From 286c17ad6e5405475636684591ea0be7fd4281e6 Mon Sep 17 00:00:00 2001
From: Kaustubh Krishna Borpujari
 <kaustubh.krishna.borpujari@ipg-automotive.com>
Date: Fri, 3 Jan 2025 12:00:49 +0530
Subject: [PATCH] Code review changes

---
 src/Filter/LabelFilter/LabelFilter.stories.tsx     | 2 +-
 src/Filter/LabelFilter/LabelFilter.test.tsx        | 2 +-
 src/Filter/LabelFilter/LabelFilter.tsx             | 6 +++---
 src/Filter/LabelFilter/LabelFilter.types.ts        | 3 ---
 src/Filter/LabelFilter/index.ts                    | 2 ++
 src/Filter/SidebarFilter/SidebarFilter.stories.tsx | 6 +++---
 src/Filter/index.ts                                | 5 +----
 7 files changed, 11 insertions(+), 15 deletions(-)
 create mode 100644 src/Filter/LabelFilter/index.ts

diff --git a/src/Filter/LabelFilter/LabelFilter.stories.tsx b/src/Filter/LabelFilter/LabelFilter.stories.tsx
index 765be97b3..fce66e5bc 100644
--- a/src/Filter/LabelFilter/LabelFilter.stories.tsx
+++ b/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";
 
diff --git a/src/Filter/LabelFilter/LabelFilter.test.tsx b/src/Filter/LabelFilter/LabelFilter.test.tsx
index 55e37b5dd..993a3432b 100644
--- a/src/Filter/LabelFilter/LabelFilter.test.tsx
+++ b/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";
 
diff --git a/src/Filter/LabelFilter/LabelFilter.tsx b/src/Filter/LabelFilter/LabelFilter.tsx
index c1e06de62..a80fa3c51 100644
--- a/src/Filter/LabelFilter/LabelFilter.tsx
+++ b/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.
diff --git a/src/Filter/LabelFilter/LabelFilter.types.ts b/src/Filter/LabelFilter/LabelFilter.types.ts
index 0c7317fea..a102659a8 100644
--- a/src/Filter/LabelFilter/LabelFilter.types.ts
+++ b/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>;
diff --git a/src/Filter/LabelFilter/index.ts b/src/Filter/LabelFilter/index.ts
new file mode 100644
index 000000000..5d4358fab
--- /dev/null
+++ b/src/Filter/LabelFilter/index.ts
@@ -0,0 +1,2 @@
+export { LabelFilter } from "./LabelFilter";
+export type { LabelFilterProps } from "./LabelFilter.types";
diff --git a/src/Filter/SidebarFilter/SidebarFilter.stories.tsx b/src/Filter/SidebarFilter/SidebarFilter.stories.tsx
index 98b5e3b1f..c8e85e08a 100644
--- a/src/Filter/SidebarFilter/SidebarFilter.stories.tsx
+++ b/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"];
 
diff --git a/src/Filter/index.ts b/src/Filter/index.ts
index 85ed07d90..6b485396f 100644
--- a/src/Filter/index.ts
+++ b/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";