@availity/mui-autocomplete 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.6.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.5.2...@availity/mui-autocomplete@0.6.0) (2024-07-01)
+
+
+### Features
+
+* **mui-autocomplete:** add ProviderAutocomplete component ([5ed1450](https://github.com/Availity/element/commit/5ed1450a6daca47231a030b516b5bf950c190f08))
+
+
+### Bug Fixes
+
+* **mui-autocomplete:** fix unit test ([50e2b52](https://github.com/Availity/element/commit/50e2b52f2a0b7799fe63d4d140259255d905a96f))
+
+## [0.5.2](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.5.1...@availity/mui-autocomplete@0.5.2) (2024-06-27)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.5.1`
+* `mui-textfield` updated to version `0.5.1`
 ## [0.5.1](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.5.0...@availity/mui-autocomplete@0.5.1) (2024-06-21)
 
 

package/README.md

@@ -48,8 +48,6 @@ yarn add @availity/mui-autocomplete
 
 ### Usage
 
-#### Import through @availity/element
-
 The `Autcomplete` component can be used standalone or with a form state library like [react-hook-form](https://react-hook-form.com/).
 
 `Autocomplete` uses the `TextField` component to render the input. You must pass your field related props: `label`, `helperText`, `error`, etc. to the the `FieldProps` prop.
@@ -121,18 +119,24 @@ const Form = () => {
 
 #### `AsyncAutocomplete` Usage
 
-An `AsyncAutocomplete` component is exported for use cases that require fetching paginated results from an api. You will need to use the `loadOptions` prop. The `loadOptions` function will be called when the user scrolls to the bottom of the dropdown. It will be passed the current page and limit. The `limit` prop controls what is passed to `loadOptions` and is defaulted to `50`. The `loadOptions` function must return an object that has an array of `options` and a `hasMore` property. `hasMore` tells the `AsyncAutocomplete` component whether or not it should call `loadOptions` again. The returned `options` will be concatenated to the existing options array.
+An `AsyncAutocomplete` component is exported for use cases that require fetching paginated results from an api. It uses the `useInfiniteQuery` from [@tanstack/react-query](https://tanstack.com/query/v4/docs/framework/react/guides/infinite-queries). The component requires two props to work properly: `loadOptions` and `queryKey`. The `loadOptions` prop is the function that is called to fetch the options. The `queryKey` is used as the key to cache the results. You can use this key to interact with the data in the query client.
+
+The `loadOptions` function will be called when the user scrolls to the bottom of the dropdown. It will be passed the current offset and limit. The `limit` prop controls what is passed to `loadOptions` and is defaulted to `50`. The `loadOptions` function must return an object that has an array of `options`, a boolean `hasMore` property, and the `offset`. The returned `options` will be concatenated to the existing options array. `hasMore` tells the `AsyncAutocomplete` component whether or not it should call `loadOptions` again. Finally, the returned `offset` will be passed in the subsequent call to get the next set of options.
+
+The `queryOptions` prop is available for passing in options to the `useInfiniteQuery` hook. One example of how this can be used is by using the `enabled` property. This can be used in cases where you would like to render the autocomplete, but are waiting on fetching the options. For example, if you need the user to fill out a section of the form before fetching the options for the autocomplete.
 
 ```jsx
 import { Autocomplete } from '@availity/element';
+import { callApi } from '../api';
 
 const Example = () => {
-  const loadOptions = async (page: number) => {
-    const response = await callApi(page);
+  const loadOptions = async (offset: number, limit: number) => {
+    const response = await callApi(offset, limit);
 
     return {
       options: repsonse.data,
-      hasMore: response.totalCount > response.count,
+      hasMore: response.data.totalCount > response.data.count,
+      offset,
     };
   };
 
@@ -146,6 +150,8 @@ The `OrganizationAutocomplete` component is an extension of the `AsyncAutocomple
 
 If you need to add params, headers, or other data to the api call then the `apiConfig` prop is available. This allows for passing in the same options you would to the `getOrganizations`. For example, `permissionIds` or `resourceIds`.
 
+The `queryKey` by default is `org-autocomplete`.
+
 ```jsx
 import { OrganizationAutocomplete } from '@availity/element';
 
@@ -153,3 +159,19 @@ const Example = () => {
   return <OrganizationAutocomplete FieldProps={{ label: 'Organization Select', placeholder: 'Select...' }} />;
 };
 ```
+
+#### `ProviderAutocomplete` Usage
+
+The `ProviderAutocomplete` component is an extension of the `AsyncAutocomplete` component which calls our Providers endpoint. The props are the same except you do not need to pass a function to `loadOptions`. This has already been done for you. The component uses the `uiDisplayName` as the default label for the options. This can be changed through the `getOptionLabel` function.
+
+`ProviderAutocomplete` requires a `customerId` to call the api. You can pass it in as prop that the component will then use in the api call. There is also an `apiConfig` prop available for further customizing the call.
+
+The `queryKey` by default is `prov-autocomplete`.
+
+```jsx
+import { ProviderAutocomplete } from '@availity/element';
+
+const Example = () => {
+  return <ProviderAutocomplete customerId="1234" FieldProps={{ label: 'Provider Select', placeholder: 'Select...' }} />;
+};
+```

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { AutocompleteProps as AutocompleteProps$1 } from '@mui/material/Autocomp
 import { ChipTypeMap } from '@mui/material/Chip';
 import { TextFieldProps } from '@availity/mui-textfield';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseInfiniteQueryOptions } from '@tanstack/react-query';
 import { ApiConfig } from '@availity/api-axios';
 
 interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'clearIcon' | 'clearText' | 'closeText' | 'componentsProps' | 'disabledItemsFocusable' | 'forcePopupIcon' | 'fullWidth' | 'handleHomeEndKeys' | 'includeInputInList' | 'openOnFocus' | 'openText' | 'PaperComponent' | 'PopperComponent' | 'popupIcon' | 'selectOnFocus' | 'size' | 'renderInput' | 'slotProps'> {
@@ -10,19 +11,30 @@ interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClea
     FieldProps?: TextFieldProps;
     name?: string;
 }
-declare const Autocomplete: <T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ FieldProps, ...props }: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
+declare const Autocomplete: <T, 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">({ FieldProps, ...props }: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
 
 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 returns a promise with options and hasMore */
-    loadOptions: (page: number, limit: number) => Promise<{
+    /** 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;
     }>;
+    /** The key used by @tanstack/react-query to cache the response */
+    queryKey: string;
     /** The number of options to request from the api
      * @default 50 */
     limit?: number;
+    /** Config options for the useInfiniteQuery hook */
+    queryOptions?: UseInfiniteQueryOptions<{
+        options: Option[];
+        hasMore: boolean;
+        offset: 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> = "div">({ loadOptions, limit, ListboxProps, ...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, ...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>;
 
 type Organization = {
     customerId: string;
@@ -31,9 +43,9 @@ type Organization = {
     createDate: string;
     links: Record<string, Record<string, string>>;
 };
-interface OrgAutocompleteProps<Option = Organization, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'loadOptions'> {
+interface OrgAutocompleteProps<Option = Organization, 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'> {
     apiConfig?: ApiConfig;
 }
-declare const OrganizationAutocomplete: ({ apiConfig, ...rest }: OrgAutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const OrganizationAutocomplete: ({ apiConfig, queryKey, ...rest }: OrgAutocompleteProps) => react_jsx_runtime.JSX.Element;
 
 export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps, type OrgAutocompleteProps, type Organization, OrganizationAutocomplete };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { AutocompleteProps as AutocompleteProps$1 } from '@mui/material/Autocomp
 import { ChipTypeMap } from '@mui/material/Chip';
 import { TextFieldProps } from '@availity/mui-textfield';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseInfiniteQueryOptions } from '@tanstack/react-query';
 import { ApiConfig } from '@availity/api-axios';
 
 interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'clearIcon' | 'clearText' | 'closeText' | 'componentsProps' | 'disabledItemsFocusable' | 'forcePopupIcon' | 'fullWidth' | 'handleHomeEndKeys' | 'includeInputInList' | 'openOnFocus' | 'openText' | 'PaperComponent' | 'PopperComponent' | 'popupIcon' | 'selectOnFocus' | 'size' | 'renderInput' | 'slotProps'> {
@@ -10,19 +11,30 @@ interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClea
     FieldProps?: TextFieldProps;
     name?: string;
 }
-declare const Autocomplete: <T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ FieldProps, ...props }: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
+declare const Autocomplete: <T, 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">({ FieldProps, ...props }: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
 
 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 returns a promise with options and hasMore */
-    loadOptions: (page: number, limit: number) => Promise<{
+    /** 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;
     }>;
+    /** The key used by @tanstack/react-query to cache the response */
+    queryKey: string;
     /** The number of options to request from the api
      * @default 50 */
     limit?: number;
+    /** Config options for the useInfiniteQuery hook */
+    queryOptions?: UseInfiniteQueryOptions<{
+        options: Option[];
+        hasMore: boolean;
+        offset: 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> = "div">({ loadOptions, limit, ListboxProps, ...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, ...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>;
 
 type Organization = {
     customerId: string;
@@ -31,9 +43,9 @@ type Organization = {
     createDate: string;
     links: Record<string, Record<string, string>>;
 };
-interface OrgAutocompleteProps<Option = Organization, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'loadOptions'> {
+interface OrgAutocompleteProps<Option = Organization, 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'> {
     apiConfig?: ApiConfig;
 }
-declare const OrganizationAutocomplete: ({ apiConfig, ...rest }: OrgAutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const OrganizationAutocomplete: ({ apiConfig, queryKey, ...rest }: OrgAutocompleteProps) => react_jsx_runtime.JSX.Element;
 
 export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps, type OrgAutocompleteProps, type Organization, OrganizationAutocomplete };

package/dist/index.js

@@ -129,51 +129,42 @@ var Autocomplete = (_a) => {
 };
 
 // src/lib/AsyncAutocomplete.tsx
-var import_react2 = require("react");
+var import_react_query = require("@tanstack/react-query");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AsyncAutocomplete = (_a) => {
   var _b = _a, {
     loadOptions,
     limit = 50,
-    ListboxProps
+    queryKey,
+    ListboxProps,
+    queryOptions
   } = _b, rest = __objRest(_b, [
     "loadOptions",
     "limit",
-    "ListboxProps"
+    "queryKey",
+    "ListboxProps",
+    "queryOptions"
   ]);
-  const [page, setPage] = (0, import_react2.useState)(0);
-  const [options, setOptions] = (0, import_react2.useState)([]);
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const [hasMore, setHasMore] = (0, import_react2.useState)(true);
-  (0, import_react2.useEffect)(() => {
-    const getInitialOptions = () => __async(void 0, null, function* () {
-      setLoading(true);
-      const result = yield loadOptions(page, limit);
-      setOptions(result.options);
-      setHasMore(result.hasMore);
-      setPage((prev) => prev + 1);
-      setLoading(false);
-    });
-    if (!loading && hasMore && page === 0) {
-      getInitialOptions();
-    }
-  }, [page, loading, loadOptions]);
+  const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)(__spreadValues({
+    queryKey: [queryKey, limit],
+    queryFn: (_0) => __async(void 0, [_0], function* ({ pageParam = 0 }) {
+      return loadOptions(pageParam, limit);
+    }),
+    staleTime: 1e4,
+    getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : false
+  }, queryOptions));
+  const options = (data == null ? void 0 : data.pages) ? data.pages.map((page) => page.options).flat() : [];
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Autocomplete,
     __spreadProps(__spreadValues({}, rest), {
-      loading,
+      loading: isFetching,
       options,
       ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
         onScroll: (event) => __async(void 0, null, function* () {
           const listboxNode = event.currentTarget;
           const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
-          if (difference <= 5 && !loading && hasMore) {
-            setLoading(true);
-            const result = yield loadOptions(page, limit);
-            setOptions([...options, ...result.options]);
-            setHasMore(result.hasMore);
-            setPage((prev) => prev + 1);
-            setLoading(false);
+          if (difference <= 5 && !isLoading && !isFetching && hasNextPage) {
+            fetchNextPage();
           }
         })
       })
@@ -185,28 +176,35 @@ var AsyncAutocomplete = (_a) => {
 var import_api_axios = require("@availity/api-axios");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var fetchOrgs = (config) => __async(void 0, null, function* () {
-  try {
-    const resp = yield import_api_axios.avOrganizationsApi.getOrganizations(config);
-    return {
-      options: resp.data.organizations,
-      hasMore: config.params.offset + config.params.limit < resp.data.totalCount
-    };
-  } catch (e) {
-    return {
-      options: [],
-      hasMore: false
-    };
-  }
+  const resp = yield import_api_axios.avOrganizationsApi.getOrganizations(config);
+  return {
+    options: resp.data.organizations,
+    hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
+    offset: config.params.offset
+  };
 });
 var OrganizationAutocomplete = (_a) => {
-  var _b = _a, { apiConfig = {} } = _b, rest = __objRest(_b, ["apiConfig"]);
-  const handleLoadOptions = (page, limit) => __async(void 0, null, function* () {
-    const offset = page * limit;
+  var _b = _a, {
+    apiConfig = {},
+    queryKey = "org-autocomplete"
+  } = _b, rest = __objRest(_b, [
+    "apiConfig",
+    "queryKey"
+  ]);
+  const handleLoadOptions = (offset, limit) => __async(void 0, null, function* () {
     const resp = yield fetchOrgs(__spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({ dropdown: true }, apiConfig.params), { offset, limit }) }));
     return resp;
   });
   const handleGetOptionLabel = (org) => org.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AsyncAutocomplete, __spreadProps(__spreadValues({ getOptionLabel: handleGetOptionLabel }, rest), { loadOptions: handleLoadOptions }));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    AsyncAutocomplete,
+    __spreadProps(__spreadValues({
+      getOptionLabel: handleGetOptionLabel,
+      queryKey
+    }, rest), {
+      loadOptions: handleLoadOptions
+    })
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -96,51 +96,42 @@ var Autocomplete = (_a) => {
 };
 
 // src/lib/AsyncAutocomplete.tsx
-import { useState, useEffect } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var AsyncAutocomplete = (_a) => {
   var _b = _a, {
     loadOptions,
     limit = 50,
-    ListboxProps
+    queryKey,
+    ListboxProps,
+    queryOptions
   } = _b, rest = __objRest(_b, [
     "loadOptions",
     "limit",
-    "ListboxProps"
+    "queryKey",
+    "ListboxProps",
+    "queryOptions"
   ]);
-  const [page, setPage] = useState(0);
-  const [options, setOptions] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  useEffect(() => {
-    const getInitialOptions = () => __async(void 0, null, function* () {
-      setLoading(true);
-      const result = yield loadOptions(page, limit);
-      setOptions(result.options);
-      setHasMore(result.hasMore);
-      setPage((prev) => prev + 1);
-      setLoading(false);
-    });
-    if (!loading && hasMore && page === 0) {
-      getInitialOptions();
-    }
-  }, [page, loading, loadOptions]);
+  const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = useInfiniteQuery(__spreadValues({
+    queryKey: [queryKey, limit],
+    queryFn: (_0) => __async(void 0, [_0], function* ({ pageParam = 0 }) {
+      return loadOptions(pageParam, limit);
+    }),
+    staleTime: 1e4,
+    getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : false
+  }, queryOptions));
+  const options = (data == null ? void 0 : data.pages) ? data.pages.map((page) => page.options).flat() : [];
   return /* @__PURE__ */ jsx2(
     Autocomplete,
     __spreadProps(__spreadValues({}, rest), {
-      loading,
+      loading: isFetching,
       options,
       ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
         onScroll: (event) => __async(void 0, null, function* () {
           const listboxNode = event.currentTarget;
           const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
-          if (difference <= 5 && !loading && hasMore) {
-            setLoading(true);
-            const result = yield loadOptions(page, limit);
-            setOptions([...options, ...result.options]);
-            setHasMore(result.hasMore);
-            setPage((prev) => prev + 1);
-            setLoading(false);
+          if (difference <= 5 && !isLoading && !isFetching && hasNextPage) {
+            fetchNextPage();
           }
         })
       })
@@ -152,28 +143,35 @@ var AsyncAutocomplete = (_a) => {
 import { avOrganizationsApi } from "@availity/api-axios";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var fetchOrgs = (config) => __async(void 0, null, function* () {
-  try {
-    const resp = yield avOrganizationsApi.getOrganizations(config);
-    return {
-      options: resp.data.organizations,
-      hasMore: config.params.offset + config.params.limit < resp.data.totalCount
-    };
-  } catch (e) {
-    return {
-      options: [],
-      hasMore: false
-    };
-  }
+  const resp = yield avOrganizationsApi.getOrganizations(config);
+  return {
+    options: resp.data.organizations,
+    hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
+    offset: config.params.offset
+  };
 });
 var OrganizationAutocomplete = (_a) => {
-  var _b = _a, { apiConfig = {} } = _b, rest = __objRest(_b, ["apiConfig"]);
-  const handleLoadOptions = (page, limit) => __async(void 0, null, function* () {
-    const offset = page * limit;
+  var _b = _a, {
+    apiConfig = {},
+    queryKey = "org-autocomplete"
+  } = _b, rest = __objRest(_b, [
+    "apiConfig",
+    "queryKey"
+  ]);
+  const handleLoadOptions = (offset, limit) => __async(void 0, null, function* () {
     const resp = yield fetchOrgs(__spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({ dropdown: true }, apiConfig.params), { offset, limit }) }));
     return resp;
   });
   const handleGetOptionLabel = (org) => org.name;
-  return /* @__PURE__ */ jsx3(AsyncAutocomplete, __spreadProps(__spreadValues({ getOptionLabel: handleGetOptionLabel }, rest), { loadOptions: handleLoadOptions }));
+  return /* @__PURE__ */ jsx3(
+    AsyncAutocomplete,
+    __spreadProps(__spreadValues({
+      getOptionLabel: handleGetOptionLabel,
+      queryKey
+    }, rest), {
+      loadOptions: handleLoadOptions
+    })
+  );
 };
 export {
   AsyncAutocomplete,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -36,10 +36,11 @@
     "@mui/types": "^7.2.14"
   },
   "devDependencies": {
-    "@availity/api-axios": "^8.0.7",
-    "@availity/mui-form-utils": "^0.11.2",
-    "@availity/mui-textfield": "^0.5.20",
+    "@availity/api-axios": "^8.0.8",
+    "@availity/mui-form-utils": "^0.11.3",
+    "@availity/mui-textfield": "^0.5.21",
     "@mui/material": "^5.15.15",
+    "@tanstack/react-query": "^4.36.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsup": "^8.0.2",
@@ -47,9 +48,10 @@
   },
   "peerDependencies": {
     "@availity/api-axios": "^8.0.7",
-    "@availity/mui-form-utils": "^0.11.2",
-    "@availity/mui-textfield": "^0.5.20",
+    "@availity/mui-form-utils": "^0.11.3",
+    "@availity/mui-textfield": "^0.5.21",
     "@mui/material": "^5.11.9",
+    "@tanstack/react-query": "^4.36.1",
     "react": ">=16.3.0"
   },
   "publishConfig": {

package/src/lib/AsyncAutocomplete.stories.tsx

@@ -1,6 +1,7 @@
 // Each exported component in the package should have its own stories file
 import type { Meta, StoryObj } from '@storybook/react';
 import AvApi, { ApiConfig } from '@availity/api-axios';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { AsyncAutocomplete } from './AsyncAutocomplete';
 
@@ -35,42 +36,46 @@ type ExampleResponse = {
   count: number;
 };
 
-const getResults = async (page: number, limit: number) => {
-  const offset = page * limit;
-  try {
-    const resp = await api.post<ExampleResponse>({ offset, limit }, { params: {} });
+const getResults = async (offset: number, limit: number) => {
+  // const offset = page * limit;
+  const resp = await api.post<ExampleResponse>({ offset, limit }, { params: {} });
 
-    return {
-      totalCount: resp.data.totalCount,
-      offset,
-      limit,
-      options: resp.data.options,
-      count: resp.data.count,
-    };
-  } catch {
-    return {
-      totalCount: 0,
-      offset,
-      limit,
-      options: [],
-      count: 0,
-    };
-  }
+  return {
+    totalCount: resp.data.totalCount,
+    offset,
+    limit,
+    options: resp.data.options,
+    count: resp.data.count,
+  };
 };
 
-const loadOptions = async (page: number, limit: number) => {
-  const { options, totalCount, offset } = await getResults(page, limit);
+const loadOptions = async (offset: number, limit: number) => {
+  const { options, totalCount } = await getResults(offset, limit);
 
   return {
     options,
     hasMore: offset + limit < totalCount,
+    offset,
   };
 };
 
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 export const _Async: StoryObj<typeof AsyncAutocomplete> = {
   render: (args) => {
-    return <AsyncAutocomplete {...args} />;
+    return (
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete {...args} />
+      </QueryClientProvider>
+    );
   },
+  decorators: [],
   parameters: {
     controls: {
       exclude: /loading(?!Text)|options/,
@@ -81,5 +86,6 @@ export const _Async: StoryObj<typeof AsyncAutocomplete> = {
     getOptionLabel: (val: Option) => val.label,
     loadOptions,
     limit: 10,
+    queryKey: 'example',
   },
 };

package/src/lib/AsyncAutocomplete.test.tsx

@@ -2,11 +2,14 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import AvApi, { ApiConfig } from '@availity/api-axios';
 /* eslint-disable @nx/enforce-module-boundaries */
 import { server } from '@availity/mock/src/lib/server';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { AsyncAutocomplete } from './AsyncAutocomplete';
 
 const api = new AvApi({ name: 'example' } as ApiConfig);
 
+const client = new QueryClient();
+
 type Option = {
   label: string;
   value: number;
@@ -18,8 +21,7 @@ type ExampleResponse = {
   count: number;
 };
 
-const getResults = async (page: number, limit: number) => {
-  const offset = page * limit;
+const getResults = async (offset: number, limit: number) => {
   try {
     const resp = await api.post<ExampleResponse>({ offset, limit }, { params: {} });
 
@@ -41,12 +43,13 @@ const getResults = async (page: number, limit: number) => {
   }
 };
 
-const loadOptions = async (page: number, limit: number) => {
-  const { options, totalCount, offset } = await getResults(page, limit);
+const loadOptions = async (offset: number, limit: number) => {
+  const { options, totalCount } = await getResults(offset, limit);
 
   return {
     options,
     hasMore: offset + limit < totalCount,
+    offset,
   };
 };
 
@@ -64,13 +67,21 @@ describe('AsyncAutocomplete', () => {
   });
 
   test('should render successfully', () => {
-    const { getByLabelText } = render(<AsyncAutocomplete FieldProps={{ label: 'Test' }} loadOptions={loadOptions} />);
+    const { getByLabelText } = render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete queryKey="test" FieldProps={{ label: 'Test' }} loadOptions={loadOptions} />
+      </QueryClientProvider>
+    );
 
     expect(getByLabelText('Test')).toBeTruthy();
   });
 
   test('options should be available', async () => {
-    render(<AsyncAutocomplete loadOptions={loadOptions} FieldProps={{ label: 'Test' }} />);
+    render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete queryKey="test1" loadOptions={loadOptions} FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
 
     const input = screen.getByRole('combobox');
     fireEvent.click(input);
@@ -88,7 +99,11 @@ describe('AsyncAutocomplete', () => {
   });
 
   test('should call loadOptions when scroll to the bottom', async () => {
-    render(<AsyncAutocomplete loadOptions={loadOptions} limit={10} FieldProps={{ label: 'Test' }} />);
+    render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete queryKey="test2" loadOptions={loadOptions} limit={10} FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
 
     const input = screen.getByRole('combobox');
     fireEvent.click(input);

package/src/lib/AsyncAutocomplete.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
 import type { ChipTypeMap } from '@mui/material/Chip';
+import { useInfiniteQuery, UseInfiniteQueryOptions } from '@tanstack/react-query';
 
 import { Autocomplete, AutocompleteProps } from './Autocomplete';
 
@@ -13,11 +13,15 @@ export interface AsyncAutocompleteProps<
     AutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>,
     'options' | 'disableListWrap' | 'loading'
   > {
-  /** Function that returns a promise with options and hasMore */
-  loadOptions: (page: number, limit: number) => Promise<{ options: Option[]; hasMore: boolean }>;
+  /** 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 }>;
+  /** The key used by @tanstack/react-query to cache the response */
+  queryKey: string;
   /** The number of options to request from the api
    * @default 50 */
   limit?: number;
+  /** Config options for the useInfiniteQuery hook */
+  queryOptions?: UseInfiniteQueryOptions<{ options: Option[]; hasMore: boolean; offset: number }>;
 }
 
 export const AsyncAutocomplete = <
@@ -29,33 +33,25 @@ export const AsyncAutocomplete = <
 >({
   loadOptions,
   limit = 50,
+  queryKey,
   ListboxProps,
+  queryOptions,
   ...rest
 }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
-  const [page, setPage] = useState(0);
-  const [options, setOptions] = useState<Option[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
+  const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = useInfiniteQuery({
+    queryKey: [queryKey, limit],
+    queryFn: async ({ pageParam = 0 }) => loadOptions(pageParam, limit),
+    staleTime: 10000,
+    getNextPageParam: (lastPage) => (lastPage.hasMore ? lastPage.offset + limit : false),
+    ...queryOptions,
+  });
 
-  useEffect(() => {
-    const getInitialOptions = async () => {
-      setLoading(true);
-      const result = await loadOptions(page, limit);
-      setOptions(result.options);
-      setHasMore(result.hasMore);
-      setPage((prev) => prev + 1);
-      setLoading(false);
-    };
-
-    if (!loading && hasMore && page === 0) {
-      getInitialOptions();
-    }
-  }, [page, loading, loadOptions]);
+  const options = data?.pages ? data.pages.map((page) => page.options).flat() : [];
 
   return (
     <Autocomplete
       {...rest}
-      loading={loading}
+      loading={isFetching}
       options={options}
       ListboxProps={{
         ...ListboxProps,
@@ -64,13 +60,8 @@ export const AsyncAutocomplete = <
           const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
 
           // Only fetch if we are near the bottom, not already fetching, and there are more results
-          if (difference <= 5 && !loading && hasMore) {
-            setLoading(true);
-            const result = await loadOptions(page, limit);
-            setOptions([...options, ...result.options]);
-            setHasMore(result.hasMore);
-            setPage((prev) => prev + 1);
-            setLoading(false);
+          if (difference <= 5 && !isLoading && !isFetching && hasNextPage) {
+            fetchNextPage();
           }
         },
       }}

package/src/lib/OrganizationAutocomplete.stories.tsx

@@ -1,5 +1,6 @@
 // Each exported component in the package should have its own stories file
 import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { OrganizationAutocomplete } from './OrganizationAutocomplete';
 
@@ -21,9 +22,21 @@ const meta: Meta<typeof OrganizationAutocomplete> = {
 
 export default meta;
 
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 export const _OrganizationAutocomplete: StoryObj<typeof OrganizationAutocomplete> = {
   render: (args) => {
-    return <OrganizationAutocomplete {...args} />;
+    return (
+      <QueryClientProvider client={client}>
+        <OrganizationAutocomplete {...args} />
+      </QueryClientProvider>
+    );
   },
   args: {
     FieldProps: {

package/src/lib/OrganizationAutocomplete.test.tsx

@@ -1,9 +1,12 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 /* eslint-disable @nx/enforce-module-boundaries */
 import { server } from '@availity/mock/src/lib/server';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { OrganizationAutocomplete } from './OrganizationAutocomplete';
 
+const client = new QueryClient();
+
 describe('OrganizationAutocomplete', () => {
   beforeAll(() => {
     // Start the interception.
@@ -15,10 +18,15 @@ describe('OrganizationAutocomplete', () => {
     // in individual tests (runtime handlers).
     server.resetHandlers();
     jest.restoreAllMocks();
+    client.clear();
   });
 
   test('organizations are fetched and displayed by name', async () => {
-    render(<OrganizationAutocomplete FieldProps={{ label: 'Test' }} />);
+    render(
+      <QueryClientProvider client={client}>
+        <OrganizationAutocomplete FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
 
     const input = screen.getByRole('combobox');
     fireEvent.click(input);

package/src/lib/OrganizationAutocomplete.tsx

@@ -2,6 +2,7 @@ import { avOrganizationsApi, ApiConfig } from '@availity/api-axios';
 import type { ChipTypeMap } from '@mui/material/Chip';
 
 import { AsyncAutocomplete, AsyncAutocompleteProps } from './AsyncAutocomplete';
+import type { Optional } from './util';
 
 export type Organization = {
   customerId: string;
@@ -11,20 +12,14 @@ export type Organization = {
   links: Record<string, Record<string, string>>;
 };
 
-const fetchOrgs = async (config: ApiConfig): Promise<{ options: Organization[]; hasMore: boolean }> => {
-  try {
-    const resp = await avOrganizationsApi.getOrganizations(config);
-
-    return {
-      options: resp.data.organizations as Organization[],
-      hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
-    };
-  } catch {
-    return {
-      options: [],
-      hasMore: false,
-    };
-  }
+const fetchOrgs = async (config: ApiConfig): Promise<{ options: Organization[]; hasMore: boolean; offset: number }> => {
+  const resp = await avOrganizationsApi.getOrganizations(config);
+
+  return {
+    options: resp.data.organizations as Organization[],
+    hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
+    offset: config.params.offset,
+  };
 };
 
 export interface OrgAutocompleteProps<
@@ -33,14 +28,19 @@ export interface OrgAutocompleteProps<
   DisableClearable extends boolean | undefined = false,
   FreeSolo extends boolean | undefined = false,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
-> extends Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'loadOptions'> {
+> extends Omit<
+    Optional<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
+    'loadOptions'
+  > {
   apiConfig?: ApiConfig;
 }
 
-export const OrganizationAutocomplete = ({ apiConfig = {}, ...rest }: OrgAutocompleteProps) => {
-  const handleLoadOptions = async (page: number, limit: number) => {
-    const offset = page * limit;
-
+export const OrganizationAutocomplete = ({
+  apiConfig = {},
+  queryKey = 'org-autocomplete',
+  ...rest
+}: OrgAutocompleteProps) => {
+  const handleLoadOptions = async (offset: number, limit: number) => {
     const resp = await fetchOrgs({ ...apiConfig, params: { dropdown: true, ...apiConfig.params, offset, limit } });
 
     return resp;
@@ -48,5 +48,12 @@ export const OrganizationAutocomplete = ({ apiConfig = {}, ...rest }: OrgAutocom
 
   const handleGetOptionLabel = (org: Organization) => org.name;
 
-  return <AsyncAutocomplete getOptionLabel={handleGetOptionLabel} {...rest} loadOptions={handleLoadOptions} />;
+  return (
+    <AsyncAutocomplete
+      getOptionLabel={handleGetOptionLabel}
+      queryKey={queryKey}
+      {...rest}
+      loadOptions={handleLoadOptions}
+    />
+  );
 };

package/src/lib/ProviderAutocomplete.stories.tsx

@@ -0,0 +1,51 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { ProviderAutocomplete } from './ProviderAutocomplete';
+
+const meta: Meta<typeof ProviderAutocomplete> = {
+  title: 'Form Components/Autocomplete/ProviderAutocomplete',
+  component: ProviderAutocomplete,
+  tags: ['autodocs'],
+  args: {
+    id: 'example',
+  },
+  argTypes: {
+    multiple: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export const _ProviderAutocomplete: StoryObj<typeof ProviderAutocomplete> = {
+  render: (args) => {
+    return (
+      <QueryClientProvider client={client}>
+        <ProviderAutocomplete {...args} />
+      </QueryClientProvider>
+    );
+  },
+  args: {
+    FieldProps: {
+      label: 'Provider Select',
+      helperText: 'Select a Provider from the list',
+      placeholder: 'Select...',
+      fullWidth: false,
+    },
+    limit: 10,
+    customerId: '1234',
+  },
+};

package/src/lib/ProviderAutocomplete.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+/* eslint-disable @nx/enforce-module-boundaries */
+import { server } from '@availity/mock/src/lib/server';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { ProviderAutocomplete } from './ProviderAutocomplete';
+
+const client = new QueryClient();
+
+describe('ProviderAutocomplete', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    server.resetHandlers();
+    jest.restoreAllMocks();
+    client.clear();
+  });
+
+  test('providers are fetched and displayed by name', async () => {
+    render(
+      <QueryClientProvider client={client}>
+        <ProviderAutocomplete customerId="123" FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Provider 1')).toBeDefined();
+    });
+  });
+
+  test('providers are not fetched when customerId is not present', async () => {
+    render(
+      <QueryClientProvider client={client}>
+        <ProviderAutocomplete customerId="" FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('No options')).toBeDefined();
+    });
+  });
+});

package/src/lib/ProviderAutocomplete.tsx

@@ -0,0 +1,64 @@
+import { avProvidersApi, ApiConfig } from '@availity/api-axios';
+import type { ChipTypeMap } from '@mui/material/Chip';
+
+import { AsyncAutocomplete, AsyncAutocompleteProps } from './AsyncAutocomplete';
+import type { Optional } from './util';
+
+export type Provider = {
+  id: string;
+  businessName: string;
+  uiDisplayName: string;
+  aytypical: boolean;
+};
+
+const fetchProviders = async (
+  customerId: string,
+  config: ApiConfig
+): Promise<{ options: Provider[]; hasMore: boolean; offset: number }> => {
+  const resp = await avProvidersApi.getProviders(customerId, config);
+
+  return {
+    options: resp.data.providers as Provider[],
+    hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
+    offset: config.params.offset,
+  };
+};
+
+export 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'
+  > {
+  customerId: string;
+  apiConfig?: ApiConfig;
+}
+
+export const ProviderAutocomplete = ({
+  apiConfig = {},
+  customerId,
+  queryKey = 'prov-autocomplete',
+  ...rest
+}: ProviderAutocompleteProps) => {
+  const handleLoadOptions = async (offset: number, limit: number) => {
+    const resp = await fetchProviders(customerId, { ...apiConfig, params: { ...apiConfig.params, offset, limit } });
+
+    return resp;
+  };
+
+  const handleGetOptionLabel = (option: Provider) => option.uiDisplayName;
+
+  return (
+    <AsyncAutocomplete
+      getOptionLabel={handleGetOptionLabel}
+      queryOptions={{ enabled: !!customerId }}
+      queryKey={queryKey}
+      {...rest}
+      loadOptions={handleLoadOptions}
+    />
+  );
+};

package/src/lib/util.ts

@@ -0,0 +1,2 @@
+// 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>;