Code review changes

src/Filter/LabelFilter/LabelFilter.stories.tsx

@@ -1,5 +1,5 @@
 import { Label } from "../../LabelSelector/Label.types";
-import LabelFilter from "./LabelFilter";
+import { LabelFilter } from "./LabelFilter";
 import React from "react";
 import { action } from "@storybook/addon-actions";
 

src/Filter/LabelFilter/LabelFilter.test.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 
-import LabelFilter from "./LabelFilter";
+import { LabelFilter } from "./LabelFilter";
 import { LabelFilterProps } from "./LabelFilter.types";
 import userEvent from "@testing-library/user-event";
 

src/Filter/LabelFilter/LabelFilter.tsx

@@ -17,7 +17,7 @@ import { VirtualizedAutocomplete } from "../../Autocomplete/Autocomplete";
 /**
  * A label filter allows the user to select multiple labels from a list.
  */
-export default function LabelFilter({
+export function LabelFilter({
   value = [],
   limitTags = -1,
   ...props
@@ -73,10 +73,11 @@ function Tags(
   const { value = [], onChange = () => {} } = ownerState;
   return labels.map((label, index) => (
     <LabelChip
+      {...getTagProps({ index })}
       key={label._id}
       label={label.name}
       color={label.color}
-      style={{ marginLeft: 2 }}
+      sx={{ marginLeft: 2 }}
       onDelete={e => {
         // Remove label from the value
         const updatedValue = value.filter(l => l._id !== label._id);
@@ -90,7 +91,6 @@ function Tags(
   ));
 }
 
-// Render label options
 /**
  * Renders a single option in the dropdown for selection.
  * @param props - HTML attributes for the list item element.

src/Filter/LabelFilter/LabelFilter.types.ts

@@ -1,5 +1,4 @@
 import type { Label } from "../../LabelSelector/Label.types";
-import LabelFilter from "./LabelFilter";
 
 /**
  * Props definition for the LabelFilter component
@@ -32,5 +31,3 @@ export type LabelFilterProps = {
    */
   value?: Label[];
 };
-
-export default LabelFilter as React.FC<LabelFilterProps>;

src/Filter/LabelFilter/index.ts

@@ -0,0 +1,2 @@
+export { LabelFilter } from "./LabelFilter";
+export type { LabelFilterProps } from "./LabelFilter.types";

src/Filter/SidebarFilter/SidebarFilter.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 
 import CheckboxFilter from "../CheckboxFilter/CheckboxFilter";
-import LabelFilter from "../LabelFilter/LabelFilter";
+import { LabelFilter } from "../LabelFilter/LabelFilter";
 import React from "react";
 import { SidebarFilter } from "./SidebarFilter";
 import { SidebarFilterProps } from "./SidebarFilter.types";
@@ -24,8 +24,8 @@ const meta: Meta<typeof SidebarFilter> = {
 
 // standard options
 const labelOptions = [
-  { _id: 1, color: "#005FA8", description: "first label", name: "label 1" },
-  { _id: 2, color: "#f542e0", description: "second label", name: "label 2" }
+  { _id: "1", color: "#005FA8", description: "first label", name: "label 1" },
+  { _id: "2", color: "#f542e0", description: "second label", name: "label 2" }
 ];
 const checkboxOptions = ["Option 1", "Option 2", "Option 3"];
 

src/Filter/index.ts

@@ -2,10 +2,7 @@ export {
   default as CheckboxFilter,
   type CheckboxFilterProps
 } from "./CheckboxFilter";
-export {
-  default as LabelFilter,
-  type LabelFilterProps
-} from "./LabelFilter/LabelFilter.types";
+export { LabelFilter, type LabelFilterProps } from "./LabelFilter";
 export { default as RangeFilter, type RangeFilterProps } from "./RangeFilter";
 
 export { SidebarFilter, type SidebarFilterProps } from "./SidebarFilter";