@availity/mui-autocomplete 0.6.4 → 0.7.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.7.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.6.4...@availity/mui-autocomplete@0.7.0) (2024-08-01)
+
+
+### Features
+
+* **mui-autocomplete:** add watchParams and inputValue ([1479d65](https://github.com/Availity/element/commit/1479d65830e2878207283639948423cf04fc5bd3))
+
+
+### Bug Fixes
+
+* **mui-autocomplete:** fix unit test ([b8f73ea](https://github.com/Availity/element/commit/b8f73eaf38fad08049dd384fc7f13985b999dd8b))
+
 ## [0.6.4](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.6.3...@availity/mui-autocomplete@0.6.4) (2024-08-01)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -15,7 +15,7 @@ declare const Autocomplete: <T, Multiple extends boolean | undefined = false, Di
 
 interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'options' | 'disableListWrap' | 'loading'> {
     /** Function that is called to fetch the options for the list. Returns a promise with options, hasMore, and offset */
-    loadOptions: (offset: number, limit: number) => Promise<{
+    loadOptions: (offset: number, limit: number, inputValue?: string) => Promise<{
         options: Option[];
         hasMore: boolean;
         offset: number;
@@ -31,8 +31,12 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
         hasMore: boolean;
         offset: number;
     }>;
+    /** Object of parameters used for the cacheKey. Options are re-reftched when a value in the object changes  */
+    watchParams?: Record<string, unknown>;
+    /** Time to wait before searching with the input value typed into the component */
+    debounceTimeout?: number;
 }
-declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any, keyof react.JSX.IntrinsicElements> = "div">({ loadOptions, limit, queryKey, ListboxProps, queryOptions, ...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<any, keyof react.JSX.IntrinsicElements> = "div">({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, ...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>;
 
@@ -52,10 +56,51 @@ type Provider = {
     id: string;
     businessName: string;
     uiDisplayName: string;
-    aytypical: boolean;
+    lastName?: string;
+    firstName?: string;
+    payerAssignedIdentifiers?: {
+        payerId: string;
+        identifier: string;
+    }[];
+    atypical: boolean;
+    npi: string;
+    customerIds: string[];
+    roles: {
+        code: string;
+        value: string;
+    }[];
+    primaryPhone: {
+        internationalCellularCode: string;
+        areaCode: string;
+        phoneNumber: string;
+    };
+    primaryFax: {
+        internationalCellularCode: string;
+        areaCode: string;
+        phoneNumber: string;
+    };
+    taxId?: string;
+    ssn?: string;
+    primaryAddress: {
+        line1: string;
+        line2: string;
+        city: string;
+        state: string;
+        stateCode: string;
+        zip: {
+            code: string;
+            addon: string;
+        };
+    };
+    primarySpecialty?: {
+        code: string;
+        value: string;
+    };
 };
 interface ProviderAutocompleteProps<Option = Provider, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<Optional<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>, 'loadOptions'> {
+    /** Customer ID of the Organization you are requesting the providers for */
     customerId: string;
+    /** Config passed to the AvProvidersApi.getProviders function */
     apiConfig?: ApiConfig;
 }
 declare const ProviderAutocomplete: ({ apiConfig, customerId, queryKey, ...rest }: ProviderAutocompleteProps) => react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -15,7 +15,7 @@ declare const Autocomplete: <T, Multiple extends boolean | undefined = false, Di
 
 interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'options' | 'disableListWrap' | 'loading'> {
     /** Function that is called to fetch the options for the list. Returns a promise with options, hasMore, and offset */
-    loadOptions: (offset: number, limit: number) => Promise<{
+    loadOptions: (offset: number, limit: number, inputValue?: string) => Promise<{
         options: Option[];
         hasMore: boolean;
         offset: number;
@@ -31,8 +31,12 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
         hasMore: boolean;
         offset: number;
     }>;
+    /** Object of parameters used for the cacheKey. Options are re-reftched when a value in the object changes  */
+    watchParams?: Record<string, unknown>;
+    /** Time to wait before searching with the input value typed into the component */
+    debounceTimeout?: number;
 }
-declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any, keyof react.JSX.IntrinsicElements> = "div">({ loadOptions, limit, queryKey, ListboxProps, queryOptions, ...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<any, keyof react.JSX.IntrinsicElements> = "div">({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, ...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>;
 
@@ -52,10 +56,51 @@ type Provider = {
     id: string;
     businessName: string;
     uiDisplayName: string;
-    aytypical: boolean;
+    lastName?: string;
+    firstName?: string;
+    payerAssignedIdentifiers?: {
+        payerId: string;
+        identifier: string;
+    }[];
+    atypical: boolean;
+    npi: string;
+    customerIds: string[];
+    roles: {
+        code: string;
+        value: string;
+    }[];
+    primaryPhone: {
+        internationalCellularCode: string;
+        areaCode: string;
+        phoneNumber: string;
+    };
+    primaryFax: {
+        internationalCellularCode: string;
+        areaCode: string;
+        phoneNumber: string;
+    };
+    taxId?: string;
+    ssn?: string;
+    primaryAddress: {
+        line1: string;
+        line2: string;
+        city: string;
+        state: string;
+        stateCode: string;
+        zip: {
+            code: string;
+            addon: string;
+        };
+    };
+    primarySpecialty?: {
+        code: string;
+        value: string;
+    };
 };
 interface ProviderAutocompleteProps<Option = Provider, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<Optional<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>, 'loadOptions'> {
+    /** Customer ID of the Organization you are requesting the providers for */
     customerId: string;
+    /** Config passed to the AvProvidersApi.getProviders function */
     apiConfig?: ApiConfig;
 }
 declare const ProviderAutocomplete: ({ apiConfig, customerId, queryKey, ...rest }: ProviderAutocompleteProps) => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -122,7 +122,9 @@ var Autocomplete = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Autocomplete.default,
     __spreadValues(__spreadValues({
-      renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, __spreadValues(__spreadValues(__spreadValues({}, params), resolvedProps(params)), FieldProps)),
+      renderInput: (params) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, __spreadValues(__spreadValues(__spreadValues({}, params), FieldProps), resolvedProps(params)));
+      },
       popupIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectExpandIcon, { className: "MuiSelect-avExpandIcon" }),
       slotProps: { popupIndicator: { component: PopupIndicatorWrapper } }
     }, props), defaultProps)
@@ -130,7 +132,25 @@ var Autocomplete = (_a) => {
 };
 
 // src/lib/AsyncAutocomplete.tsx
+var import_react3 = require("react");
 var import_react_query = require("@tanstack/react-query");
+
+// src/lib/util.tsx
+var import_react2 = require("react");
+var useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react2.useState)("");
+  (0, import_react2.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value]);
+  return debouncedValue;
+};
+
+// src/lib/AsyncAutocomplete.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AsyncAutocomplete = (_a) => {
   var _b = _a, {
@@ -138,18 +158,32 @@ var AsyncAutocomplete = (_a) => {
     limit = 50,
     queryKey,
     ListboxProps,
-    queryOptions
+    queryOptions,
+    watchParams,
+    debounceTimeout = 350,
+    FieldProps
   } = _b, rest = __objRest(_b, [
     "loadOptions",
     "limit",
     "queryKey",
     "ListboxProps",
-    "queryOptions"
+    "queryOptions",
+    "watchParams",
+    "debounceTimeout",
+    "FieldProps"
   ]);
+  const [inputValue, setInputValue] = (0, import_react3.useState)("");
+  const handleInputChange = (event) => {
+    var _a2;
+    setInputValue(event.target.value);
+    if ((_a2 = FieldProps == null ? void 0 : FieldProps.InputProps) == null ? void 0 : _a2.onChange)
+      FieldProps.InputProps.onChange(event);
+  };
+  const debouncedInput = useDebounce(inputValue, debounceTimeout);
   const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)(__spreadValues({
-    queryKey: [queryKey, limit],
+    queryKey: [queryKey, limit, debouncedInput, watchParams],
     queryFn: (_0) => __async(void 0, [_0], function* ({ pageParam = 0 }) {
-      return loadOptions(pageParam, limit);
+      return loadOptions(pageParam, limit, debouncedInput);
     }),
     staleTime: 1e4,
     getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : false
@@ -158,6 +192,11 @@ var AsyncAutocomplete = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Autocomplete,
     __spreadProps(__spreadValues({}, rest), {
+      FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+        InputProps: __spreadProps(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.InputProps), {
+          onChange: handleInputChange
+        })
+      }),
       loading: isFetching,
       options,
       ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
@@ -229,8 +268,10 @@ var ProviderAutocomplete = (_a) => {
     "customerId",
     "queryKey"
   ]);
-  const handleLoadOptions = (offset, limit) => __async(void 0, null, function* () {
-    const resp = yield fetchProviders(customerId, __spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({}, apiConfig.params), { offset, limit }) }));
+  const handleLoadOptions = (offset, limit, inputValue) => __async(void 0, null, function* () {
+    const resp = yield fetchProviders(customerId, __spreadProps(__spreadValues({}, apiConfig), {
+      params: __spreadProps(__spreadValues({}, apiConfig.params), { offset, limit, q: inputValue })
+    }));
     return resp;
   });
   const handleGetOptionLabel = (option) => option.uiDisplayName;
@@ -239,7 +280,8 @@ var ProviderAutocomplete = (_a) => {
     __spreadProps(__spreadValues({
       getOptionLabel: handleGetOptionLabel,
       queryOptions: { enabled: !!customerId },
-      queryKey
+      queryKey,
+      watchParams: { customerId }
     }, rest), {
       loadOptions: handleLoadOptions
     })

package/dist/index.mjs

@@ -88,7 +88,9 @@ var Autocomplete = (_a) => {
   return /* @__PURE__ */ jsx(
     MuiAutocomplete,
     __spreadValues(__spreadValues({
-      renderInput: (params) => /* @__PURE__ */ jsx(TextField, __spreadValues(__spreadValues(__spreadValues({}, params), resolvedProps(params)), FieldProps)),
+      renderInput: (params) => {
+        return /* @__PURE__ */ jsx(TextField, __spreadValues(__spreadValues(__spreadValues({}, params), FieldProps), resolvedProps(params)));
+      },
       popupIcon: /* @__PURE__ */ jsx(SelectExpandIcon, { className: "MuiSelect-avExpandIcon" }),
       slotProps: { popupIndicator: { component: PopupIndicatorWrapper } }
     }, props), defaultProps)
@@ -96,7 +98,25 @@ var Autocomplete = (_a) => {
 };
 
 // src/lib/AsyncAutocomplete.tsx
+import { useState as useState2 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
+
+// src/lib/util.tsx
+import { useEffect, useState } from "react";
+var useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState("");
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value]);
+  return debouncedValue;
+};
+
+// src/lib/AsyncAutocomplete.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var AsyncAutocomplete = (_a) => {
   var _b = _a, {
@@ -104,18 +124,32 @@ var AsyncAutocomplete = (_a) => {
     limit = 50,
     queryKey,
     ListboxProps,
-    queryOptions
+    queryOptions,
+    watchParams,
+    debounceTimeout = 350,
+    FieldProps
   } = _b, rest = __objRest(_b, [
     "loadOptions",
     "limit",
     "queryKey",
     "ListboxProps",
-    "queryOptions"
+    "queryOptions",
+    "watchParams",
+    "debounceTimeout",
+    "FieldProps"
   ]);
+  const [inputValue, setInputValue] = useState2("");
+  const handleInputChange = (event) => {
+    var _a2;
+    setInputValue(event.target.value);
+    if ((_a2 = FieldProps == null ? void 0 : FieldProps.InputProps) == null ? void 0 : _a2.onChange)
+      FieldProps.InputProps.onChange(event);
+  };
+  const debouncedInput = useDebounce(inputValue, debounceTimeout);
   const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = useInfiniteQuery(__spreadValues({
-    queryKey: [queryKey, limit],
+    queryKey: [queryKey, limit, debouncedInput, watchParams],
     queryFn: (_0) => __async(void 0, [_0], function* ({ pageParam = 0 }) {
-      return loadOptions(pageParam, limit);
+      return loadOptions(pageParam, limit, debouncedInput);
     }),
     staleTime: 1e4,
     getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : false
@@ -124,6 +158,11 @@ var AsyncAutocomplete = (_a) => {
   return /* @__PURE__ */ jsx2(
     Autocomplete,
     __spreadProps(__spreadValues({}, rest), {
+      FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+        InputProps: __spreadProps(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.InputProps), {
+          onChange: handleInputChange
+        })
+      }),
       loading: isFetching,
       options,
       ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
@@ -195,8 +234,10 @@ var ProviderAutocomplete = (_a) => {
     "customerId",
     "queryKey"
   ]);
-  const handleLoadOptions = (offset, limit) => __async(void 0, null, function* () {
-    const resp = yield fetchProviders(customerId, __spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({}, apiConfig.params), { offset, limit }) }));
+  const handleLoadOptions = (offset, limit, inputValue) => __async(void 0, null, function* () {
+    const resp = yield fetchProviders(customerId, __spreadProps(__spreadValues({}, apiConfig), {
+      params: __spreadProps(__spreadValues({}, apiConfig.params), { offset, limit, q: inputValue })
+    }));
     return resp;
   });
   const handleGetOptionLabel = (option) => option.uiDisplayName;
@@ -205,7 +246,8 @@ var ProviderAutocomplete = (_a) => {
     __spreadProps(__spreadValues({
       getOptionLabel: handleGetOptionLabel,
       queryOptions: { enabled: !!customerId },
-      queryKey
+      queryKey,
+      watchParams: { customerId }
     }, rest), {
       loadOptions: handleLoadOptions
     })

package/package.json

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

package/src/lib/AsyncAutocomplete.test.tsx

@@ -8,8 +8,6 @@ import { AsyncAutocomplete } from './AsyncAutocomplete';
 
 const api = new AvApi({ name: 'example' } as ApiConfig);
 
-const client = new QueryClient();
-
 type Option = {
   label: string;
   value: number;
@@ -67,6 +65,8 @@ describe('AsyncAutocomplete', () => {
   });
 
   test('should render successfully', () => {
+    const client = new QueryClient();
+
     const { getByLabelText } = render(
       <QueryClientProvider client={client}>
         <AsyncAutocomplete queryKey="test" FieldProps={{ label: 'Test' }} loadOptions={loadOptions} />
@@ -77,6 +77,8 @@ describe('AsyncAutocomplete', () => {
   });
 
   test('options should be available', async () => {
+    const client = new QueryClient();
+
     render(
       <QueryClientProvider client={client}>
         <AsyncAutocomplete queryKey="test1" loadOptions={loadOptions} FieldProps={{ label: 'Test' }} />
@@ -99,6 +101,8 @@ describe('AsyncAutocomplete', () => {
   });
 
   test('should call loadOptions when scroll to the bottom', async () => {
+    const client = new QueryClient();
+
     render(
       <QueryClientProvider client={client}>
         <AsyncAutocomplete queryKey="test2" loadOptions={loadOptions} limit={10} FieldProps={{ label: 'Test' }} />
@@ -123,4 +127,82 @@ describe('AsyncAutocomplete', () => {
       expect(() => screen.getByText('Option 20')).toThrowError();
     });
   });
+
+  test('should search with input value', async () => {
+    const mockLoadOptions = jest.fn(async () => ({ options: [{ label: 'Option 1' }], hasMore: false, offset: 50 }));
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete queryKey="test1" loadOptions={mockLoadOptions} 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(mockLoadOptions).toHaveBeenNthCalledWith(1, 0, 50, '');
+    });
+
+    fireEvent.change(input, { target: { value: 'test' } });
+
+    await waitFor(() => expect(mockLoadOptions).toHaveBeenNthCalledWith(2, 0, 50, 'test'));
+  });
+
+  test('should make call when watchParams changes', async () => {
+    const mockLoadOptions = jest.fn(async () => ({ options: [{ label: 'Option 1' }], hasMore: false, offset: 50 }));
+    const client = new QueryClient();
+
+    const watchParams = { foo: 'bar' };
+
+    const { rerender } = render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete
+          queryKey="test1"
+          loadOptions={mockLoadOptions}
+          FieldProps={{ label: 'Test' }}
+          watchParams={watchParams}
+        />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Option 1')).toBeDefined();
+      // Check that api was called
+      expect(mockLoadOptions).toHaveBeenNthCalledWith(1, 0, 50, '');
+      // Make sure data is in the query client with given watchParams
+      expect(client.getQueryData(['test1', 50, '', watchParams])).toBeDefined();
+    });
+
+    watchParams.foo = 'test';
+
+    rerender(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete
+          queryKey="test1"
+          loadOptions={mockLoadOptions}
+          FieldProps={{ label: 'Test' }}
+          watchParams={watchParams}
+        />
+      </QueryClientProvider>
+    );
+
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Option 1')).toBeDefined();
+      // Check that options were fetched
+      expect(mockLoadOptions).toHaveBeenNthCalledWith(2, 0, 50, '');
+      // Make sure call was made with new watchParams
+      expect(client.getQueryData(['test1', 50, '', watchParams])).toBeDefined();
+    });
+  });
 });

package/src/lib/AsyncAutocomplete.tsx

@@ -1,7 +1,9 @@
+import { useState } from 'react';
 import type { ChipTypeMap } from '@mui/material/Chip';
 import { useInfiniteQuery, UseInfiniteQueryOptions } from '@tanstack/react-query';
 
 import { Autocomplete, AutocompleteProps } from './Autocomplete';
+import { useDebounce } from './util';
 
 export interface AsyncAutocompleteProps<
   Option,
@@ -14,7 +16,11 @@ export interface AsyncAutocompleteProps<
     'options' | 'disableListWrap' | 'loading'
   > {
   /** Function that is called to fetch the options for the list. Returns a promise with options, hasMore, and offset */
-  loadOptions: (offset: number, limit: number) => Promise<{ options: Option[]; hasMore: boolean; offset: number }>;
+  loadOptions: (
+    offset: number,
+    limit: number,
+    inputValue?: string
+  ) => Promise<{ options: Option[]; hasMore: boolean; offset: number }>;
   /** The key used by @tanstack/react-query to cache the response */
   queryKey: string;
   /** The number of options to request from the api
@@ -22,6 +28,10 @@ export interface AsyncAutocompleteProps<
   limit?: number;
   /** Config options for the useInfiniteQuery hook */
   queryOptions?: UseInfiniteQueryOptions<{ options: Option[]; hasMore: boolean; offset: number }>;
+  /** Object of parameters used for the cacheKey. Options are re-reftched when a value in the object changes  */
+  watchParams?: Record<string, unknown>;
+  /** Time to wait before searching with the input value typed into the component */
+  debounceTimeout?: number;
 }
 
 export const AsyncAutocomplete = <
@@ -36,11 +46,24 @@ export const AsyncAutocomplete = <
   queryKey,
   ListboxProps,
   queryOptions,
+  watchParams,
+  debounceTimeout = 350,
+  FieldProps,
   ...rest
 }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    // Call passed in onChange if present
+    if (FieldProps?.InputProps?.onChange) FieldProps.InputProps.onChange(event);
+  };
+
+  const debouncedInput = useDebounce(inputValue, debounceTimeout);
+
   const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = useInfiniteQuery({
-    queryKey: [queryKey, limit],
-    queryFn: async ({ pageParam = 0 }) => loadOptions(pageParam, limit),
+    queryKey: [queryKey, limit, debouncedInput, watchParams],
+    queryFn: async ({ pageParam = 0 }) => loadOptions(pageParam, limit, debouncedInput),
     staleTime: 10000,
     getNextPageParam: (lastPage) => (lastPage.hasMore ? lastPage.offset + limit : false),
     ...queryOptions,
@@ -51,6 +74,13 @@ export const AsyncAutocomplete = <
   return (
     <Autocomplete
       {...rest}
+      FieldProps={{
+        ...FieldProps,
+        InputProps: {
+          ...FieldProps?.InputProps,
+          onChange: handleInputChange,
+        },
+      }}
       loading={isFetching}
       options={options}
       ListboxProps={{

package/src/lib/Autocomplete.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Autocomplete> = {
   component: Autocomplete,
   tags: ['autodocs'],
   args: {
-    options: ['1', '2', '3', '4', '5'],
+    options: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
     id: 'example',
   },
   argTypes: {

package/src/lib/Autocomplete.tsx

@@ -93,9 +93,9 @@ export const Autocomplete = <
 
   return (
     <MuiAutocomplete
-      renderInput={(params: AutocompleteRenderInputParams) => (
-        <TextField {...params} {...resolvedProps(params)} {...FieldProps} />
-      )}
+      renderInput={(params: AutocompleteRenderInputParams) => {
+        return <TextField {...params} {...FieldProps} {...resolvedProps(params)} />;
+      }}
       popupIcon={<SelectExpandIcon className="MuiSelect-avExpandIcon" />}
       slotProps={{ popupIndicator: { component: PopupIndicatorWrapper } }}
       {...props}

package/src/lib/ProviderAutocomplete.tsx

@@ -8,7 +8,29 @@ export type Provider = {
   id: string;
   businessName: string;
   uiDisplayName: string;
-  aytypical: boolean;
+  lastName?: string;
+  firstName?: string;
+  payerAssignedIdentifiers?: { payerId: string; identifier: string }[];
+  atypical: boolean;
+  npi: string;
+  customerIds: string[];
+  roles: { code: string; value: string }[];
+  primaryPhone: { internationalCellularCode: string; areaCode: string; phoneNumber: string };
+  primaryFax: { internationalCellularCode: string; areaCode: string; phoneNumber: string };
+  taxId?: string;
+  ssn?: string;
+  primaryAddress: {
+    line1: string;
+    line2: string;
+    city: string;
+    state: string;
+    stateCode: string;
+    zip: { code: string; addon: string };
+  };
+  primarySpecialty?: {
+    code: string;
+    value: string;
+  };
 };
 
 const fetchProviders = async (
@@ -34,7 +56,9 @@ export interface ProviderAutocompleteProps<
     Optional<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
     'loadOptions'
   > {
+  /** Customer ID of the Organization you are requesting the providers for */
   customerId: string;
+  /** Config passed to the AvProvidersApi.getProviders function */
   apiConfig?: ApiConfig;
 }
 
@@ -44,8 +68,11 @@ export const ProviderAutocomplete = ({
   queryKey = 'prov-autocomplete',
   ...rest
 }: ProviderAutocompleteProps) => {
-  const handleLoadOptions = async (offset: number, limit: number) => {
-    const resp = await fetchProviders(customerId, { ...apiConfig, params: { ...apiConfig.params, offset, limit } });
+  const handleLoadOptions = async (offset: number, limit: number, inputValue: string) => {
+    const resp = await fetchProviders(customerId, {
+      ...apiConfig,
+      params: { ...apiConfig.params, offset, limit, q: inputValue },
+    });
 
     return resp;
   };
@@ -57,6 +84,7 @@ export const ProviderAutocomplete = ({
       getOptionLabel={handleGetOptionLabel}
       queryOptions={{ enabled: !!customerId }}
       queryKey={queryKey}
+      watchParams={{ customerId }}
       {...rest}
       loadOptions={handleLoadOptions}
     />

package/src/lib/util.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+// Mark a field as optional in an already defined type
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export const useDebounce = (value: string, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value]);
+
+  return debouncedValue;
+};

package/src/lib/util.ts

@@ -1,2 +0,0 @@
-// Mark a field as optional in an already defined type
-export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;