feat: add filterOptions prop to Autocomplete

.changeset/blue-shirts-brake.md

@@ -0,0 +1,5 @@
+---
+"@arkejs/ui": patch
+---
+
+feat: add filterOptions prop to Autocomplete

apps/docs/content/docs/components/autocomplete.mdx

@@ -86,6 +86,10 @@ The `Autocomplete` component is used to create an input field with suggestions o
       name: "multiple",
       type: "boolean",
     },
+    {
+      name: "filterOptions",
+      type: "(option: TValue, inputValue: string) => boolean",
+    },
   ]}
 />
 

apps/storybook/src/stories/Autocomplete.stories.tsx

@@ -43,6 +43,27 @@ export const Default = (args: Story["args"]) => {
   );
 };
 
+export const WithFilteredOptions = (args: Story["args"]) => {
+  const [{ value, values = departments }, updateArgs] = useArgs();
+
+  const handleChange = (val: unknown) => updateArgs({ value: val });
+
+  return (
+    //   @ts-ignore
+    <Autocomplete
+      {...args}
+      value={value}
+      values={values}
+      filterOptions={(option, inputValue) =>
+        option.name.toLowerCase().includes(inputValue)
+      }
+      onChange={handleChange}
+      renderValue={(val) => val?.name}
+      placeholder="Search..."
+    />
+  );
+};
+
 export const Nullable = (args: Story["args"]) => {
   const [{ value, values = departments }, updateArgs] = useArgs();
   const [search, setSearch] = useState("");
@@ -101,16 +122,11 @@ export const Clearable = (args: Story["args"]) => {
 
 export const Multiple = (args: Story["args"]) => {
   const [{ value, values = departments }, updateArgs] = useArgs();
-  const [search, setSearch] = useState("");
 
   const handleChange = (val: unknown) => {
     updateArgs({ value: val });
   };
 
-  const filteredValues = values.filter((v: { name: string }) =>
-    v.name.toLowerCase().includes(search)
-  );
-
   return (
     //   @ts-ignore
     <Autocomplete
@@ -119,11 +135,14 @@ export const Multiple = (args: Story["args"]) => {
       value={value}
       nullable
       clearable
-      values={filteredValues}
-      onInputChange={(e) => setSearch(e.target.value)}
+      values={values}
+      filterOptions={(option, inputValue) =>
+        option.name.toLowerCase().includes(inputValue)
+      }
       onChange={handleChange}
       multiple
       placeholder="Search..."
+      renderValue={(val) => val?.name}
     />
   );
 };
@@ -183,6 +202,7 @@ export const Icons = (args: Story["args"]) => {
       startAdornment={<StartIcon />}
       endAdornment={<EndIcon />}
       placeholder="Search..."
+      renderValue={(val) => val?.name}
     />
   );
 };

packages/ui/src/components/Autocomplete/Autocomplete.test.tsx

@@ -75,6 +75,24 @@ describe("Autocomplete", () => {
     expect(getByText("Test 1")).toBeInTheDocument();
   });
 
+  test("should render correct filtered values", async () => {
+    const { getByTestId, getByText, queryAllByText } = render(
+      <Autocomplete
+        onChange={() => null}
+        values={mockValues}
+        renderValue={(val) => val.name}
+        filterOptions={(option, inputValue) =>
+          option.name.toLowerCase().includes(inputValue.toLowerCase())
+        }
+      />
+    );
+    await userEvent.type(getByTestId("arke-autocomplete"), "Test 1");
+
+    expect(getByText("Test 1")).toBeInTheDocument();
+    expect(queryAllByText("Test 2")).toHaveLength(0);
+    expect(queryAllByText("Test 3")).toHaveLength(0);
+  });
+
   test("should call onChange when value is selected", async () => {
     const onChange = jest.fn();
     const { getByTestId, getByText } = render(

packages/ui/src/components/Autocomplete/Autocomplete.tsx

@@ -77,6 +77,7 @@ function Autocomplete<TValue>({
   clearable,
   className,
   clearIcon,
+  filterOptions,
 }: IAutocompleteProps<
   TValue,
   boolean | undefined,
@@ -127,6 +128,13 @@ function Autocomplete<TValue>({
     [clearable, nullable, value]
   );
 
+  const filteredOptions = useMemo(() => {
+    if (filterOptions) {
+      return values?.filter((v) => filterOptions(v, inputValue));
+    }
+    return values;
+  }, [values, filterOptions, inputValue]);
+
   return (
     <div className="relative">
       <Combobox
@@ -225,10 +233,10 @@ function Autocomplete<TValue>({
             className="autocomplete__options"
             style={getPosition()}
           >
-            {values?.length === 0 && (
+            {filteredOptions?.length === 0 && (
               <li className={twMerge("autocomplete__option")}>Nothing found</li>
             )}
-            {values?.map((val, index) => (
+            {filteredOptions?.map((val, index) => (
               <Combobox.Option key={index} value={val} as={Fragment}>
                 {({ active, selected }) => (
                   <li

packages/ui/src/components/Autocomplete/Autocomplete.types.ts

@@ -31,6 +31,7 @@ type AutocompleteBaseProps<TValue> = {
   renderChips?: boolean;
   className?: string;
   clearIcon?: ReactNode;
+  filterOptions?: (option: TValue, inputValue: string) => boolean;
 };
 
 export type IAutocompleteProps<