@availity/mui-autocomplete 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.1.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@2.0.2...@availity/mui-autocomplete@2.1.0) (2025-12-23)
+
+
+### Features
+
+* prependOptions functionality for AsyncAutocompletes ([532b8b6](https://github.com/Availity/element/commit/532b8b6dc7a165ed37feb885fcea9cdf8007ae41))
+
 ## [2.0.2](https://github.com/Availity/element/compare/@availity/mui-autocomplete@2.0.1...@availity/mui-autocomplete@2.0.2) (2025-12-09)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -35,8 +35,10 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
     watchParams?: Record<string, unknown>;
     /** Time to wait before searching with the input value typed into the component */
     debounceTimeout?: number;
+    /** Options to prepend to the list (e.g., frequently used items). These will be filtered from loadOptions results to avoid duplicates. */
+    prependOptions?: Option[];
 }
-declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]>({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, onInputChange, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
+declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]>({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, onInputChange, prependOptions, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 

package/dist/index.d.ts

@@ -35,8 +35,10 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
     watchParams?: Record<string, unknown>;
     /** Time to wait before searching with the input value typed into the component */
     debounceTimeout?: number;
+    /** Options to prepend to the list (e.g., frequently used items). These will be filtered from loadOptions results to avoid duplicates. */
+    prependOptions?: Option[];
 }
-declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]>({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, onInputChange, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
+declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]>({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, onInputChange, prependOptions, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 

package/dist/index.js

@@ -174,7 +174,8 @@ var AsyncAutocomplete = (_a) => {
     watchParams,
     debounceTimeout = 350,
     FieldProps,
-    onInputChange
+    onInputChange,
+    prependOptions = []
   } = _b, rest = __objRest(_b, [
     "loadOptions",
     "limit",
@@ -184,7 +185,8 @@ var AsyncAutocomplete = (_a) => {
     "watchParams",
     "debounceTimeout",
     "FieldProps",
-    "onInputChange"
+    "onInputChange",
+    "prependOptions"
   ]);
   const [inputValue, setInputValue] = (0, import_react3.useState)("");
   const handleInputPropsOnChange = (event) => {
@@ -202,6 +204,14 @@ var AsyncAutocomplete = (_a) => {
     getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : void 0
   }, queryOptions));
   const options = (data == null ? void 0 : data.pages) ? data.pages.map((page) => page.options).flat() : [];
+  const finalOptions = prependOptions.length > 0 ? [
+    ...prependOptions,
+    ...options.filter(
+      (option) => !prependOptions.some(
+        (prepended) => rest.isOptionEqualToValue ? rest.isOptionEqualToValue(option, prepended) : option === prepended
+      )
+    )
+  ] : options;
   const handleOnInputChange = (event, value, reason) => {
     if (reason === "clear") {
       setInputValue(event.target.value);
@@ -220,7 +230,7 @@ var AsyncAutocomplete = (_a) => {
         })
       }),
       loading: isFetching,
-      options,
+      options: finalOptions,
       ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
         onScroll: (event) => __async(null, null, function* () {
           const listboxNode = event.currentTarget;

package/dist/index.mjs

@@ -132,7 +132,8 @@ var AsyncAutocomplete = (_a) => {
     watchParams,
     debounceTimeout = 350,
     FieldProps,
-    onInputChange
+    onInputChange,
+    prependOptions = []
   } = _b, rest = __objRest(_b, [
     "loadOptions",
     "limit",
@@ -142,7 +143,8 @@ var AsyncAutocomplete = (_a) => {
     "watchParams",
     "debounceTimeout",
     "FieldProps",
-    "onInputChange"
+    "onInputChange",
+    "prependOptions"
   ]);
   const [inputValue, setInputValue] = useState2("");
   const handleInputPropsOnChange = (event) => {
@@ -160,6 +162,14 @@ var AsyncAutocomplete = (_a) => {
     getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : void 0
   }, queryOptions));
   const options = (data == null ? void 0 : data.pages) ? data.pages.map((page) => page.options).flat() : [];
+  const finalOptions = prependOptions.length > 0 ? [
+    ...prependOptions,
+    ...options.filter(
+      (option) => !prependOptions.some(
+        (prepended) => rest.isOptionEqualToValue ? rest.isOptionEqualToValue(option, prepended) : option === prepended
+      )
+    )
+  ] : options;
   const handleOnInputChange = (event, value, reason) => {
     if (reason === "clear") {
       setInputValue(event.target.value);
@@ -178,7 +188,7 @@ var AsyncAutocomplete = (_a) => {
         })
       }),
       loading: isFetching,
-      options,
+      options: finalOptions,
       ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
         onScroll: (event) => __async(null, null, function* () {
           const listboxNode = event.currentTarget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/AsyncAutocomplete.test.tsx

@@ -103,6 +103,85 @@ describe('AsyncAutocomplete', () => {
     });
   });
 
+  test('prependedOptions should be available', async () => {
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete
+          queryKey="prepended-options"
+          prependOptions={[{ label: 'Option 0', value: 0 }]}
+          loadOptions={loadOptions}
+          FieldProps={{ label: 'Test' }}
+        />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    waitFor(() => {
+      expect(screen.getByText('Option 0')).toBeDefined();
+      expect(screen.getByText('Option 1')).toBeDefined();
+    });
+
+    fireEvent.click(await screen.findByText('Option 0'));
+
+    waitFor(() => {
+      expect(screen.getByText('Option 0')).toBeDefined();
+    });
+  });
+
+  test('prependedOptions should not be duplicative', async () => {
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete
+          queryKey="prepended-options-unique"
+          prependOptions={[{ label: 'Option 1', value: 1 }]}
+          loadOptions={loadOptions}
+          FieldProps={{ label: 'Test' }}
+        />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    waitFor(() => {
+      expect(screen.getAllByText('Option 1').length).toBe(1);
+    });
+  });
+
+  test('should filter duplicates using custom isOptionEqualToValue', async () => {
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete
+          queryKey="test-duplicates"
+          prependOptions={[{ label: 'Option 1', value: 1 }]}
+          isOptionEqualToValue={(option, value) => option.value === value.value}
+          loadOptions={loadOptions}
+          FieldProps={{ label: 'Test' }}
+        />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Option 1')).toBeDefined();
+      expect(screen.getByText('Option 2')).toBeDefined();
+      expect(screen.getAllByText('Option 1')).toHaveLength(1);
+    });
+  });
+
   test('should call loadOptions when scroll to the bottom', async () => {
     const client = new QueryClient();
 

package/src/lib/AsyncAutocomplete.tsx

@@ -33,6 +33,8 @@ export interface AsyncAutocompleteProps<
   watchParams?: Record<string, unknown>;
   /** Time to wait before searching with the input value typed into the component */
   debounceTimeout?: number;
+  /** Options to prepend to the list (e.g., frequently used items). These will be filtered from loadOptions results to avoid duplicates. */
+  prependOptions?: Option[];
 }
 
 export const AsyncAutocomplete = <
@@ -51,6 +53,7 @@ export const AsyncAutocomplete = <
   debounceTimeout = 350,
   FieldProps,
   onInputChange,
+  prependOptions = [],
   ...rest
 }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
   const [inputValue, setInputValue] = useState('');
@@ -73,6 +76,19 @@ export const AsyncAutocomplete = <
 
   const options = data?.pages ? data.pages.map((page) => page.options).flat() : [];
 
+  const finalOptions =
+    prependOptions.length > 0
+      ? [
+          ...prependOptions,
+          ...options.filter(
+            (option) =>
+              !prependOptions.some((prepended) =>
+                rest.isOptionEqualToValue ? rest.isOptionEqualToValue(option, prepended) : option === prepended
+              )
+          ),
+        ]
+      : options;
+
   const handleOnInputChange = (
     event: React.ChangeEvent<HTMLInputElement>,
     value: string,
@@ -99,7 +115,7 @@ export const AsyncAutocomplete = <
         },
       }}
       loading={isFetching}
-      options={options}
+      options={finalOptions}
       ListboxProps={{
         ...ListboxProps,
         onScroll: async (event: React.SyntheticEvent) => {