@availity/mui-autocomplete 1.2.4 → 1.2.6

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.2.6](https://github.com/Availity/element/compare/@availity/mui-autocomplete@1.2.5...@availity/mui-autocomplete@1.2.6) (2025-10-09)
+
+### Dependency Updates
+
+* `@availity/mock` updated to version `1.2.5`
+## [1.2.5](https://github.com/Availity/element/compare/@availity/mui-autocomplete@1.2.4...@availity/mui-autocomplete@1.2.5) (2025-07-17)
+
+
+### Bug Fixes
+
+* **mui-autocomplete:** fix the multiple prop type for async autocompletes ([3b904a4](https://github.com/Availity/element/commit/3b904a4f88b250433d75ff4a439aab10adc238e9))
+
 ## [1.2.4](https://github.com/Availity/element/compare/@availity/mui-autocomplete@1.2.3...@availity/mui-autocomplete@1.2.4) (2025-06-18)
 
 

package/dist/index.d.mts

@@ -56,7 +56,7 @@ interface CodesAutocompleteProps<Option = Code, Multiple extends boolean | undef
     apiConfig?: ApiConfig;
 }
 declare const handleGetCodesOptionLabel: (option: Code) => string;
-declare const CodesAutocomplete: ({ apiConfig, queryOptions, queryKey, list, watchParams, ...rest }: CodesAutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const CodesAutocomplete: <Option = Code, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ apiConfig, queryOptions, queryKey, list, watchParams, ...rest }: CodesAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 type Organization = {
     customerId: string;
@@ -75,7 +75,7 @@ interface OrgAutocompleteProps<Option = Organization, Multiple extends boolean |
     apiConfig?: ApiConfig;
 }
 declare const handleGetOrgOptionLabel: (org: Organization) => string;
-declare const OrganizationAutocomplete: ({ apiConfig, queryKey, ...rest }: OrgAutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const OrganizationAutocomplete: <Option = Organization, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ apiConfig, queryKey, ...rest }: OrgAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 type Provider = {
     id: string;
@@ -134,6 +134,6 @@ interface ProviderAutocompleteProps<Option = Provider, Multiple extends boolean
     apiConfig?: ApiConfig;
 }
 declare const handleGetProviderOptionLabel: (option: Provider) => string;
-declare const ProviderAutocomplete: ({ apiConfig, customerId, queryKey, ...rest }: ProviderAutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const ProviderAutocomplete: <Option = Provider, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ apiConfig, customerId, queryKey, ...rest }: ProviderAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps, type Code, CodesAutocomplete, type CodesAutocompleteProps, type OrgAutocompleteProps, type Organization, OrganizationAutocomplete, type Provider, ProviderAutocomplete, type ProviderAutocompleteProps, fetchCodes, fetchOrgs, fetchProviders, handleGetCodesOptionLabel, handleGetOrgOptionLabel, handleGetProviderOptionLabel };

package/dist/index.d.ts

@@ -56,7 +56,7 @@ interface CodesAutocompleteProps<Option = Code, Multiple extends boolean | undef
     apiConfig?: ApiConfig;
 }
 declare const handleGetCodesOptionLabel: (option: Code) => string;
-declare const CodesAutocomplete: ({ apiConfig, queryOptions, queryKey, list, watchParams, ...rest }: CodesAutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const CodesAutocomplete: <Option = Code, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ apiConfig, queryOptions, queryKey, list, watchParams, ...rest }: CodesAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 type Organization = {
     customerId: string;
@@ -75,7 +75,7 @@ interface OrgAutocompleteProps<Option = Organization, Multiple extends boolean |
     apiConfig?: ApiConfig;
 }
 declare const handleGetOrgOptionLabel: (org: Organization) => string;
-declare const OrganizationAutocomplete: ({ apiConfig, queryKey, ...rest }: OrgAutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const OrganizationAutocomplete: <Option = Organization, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ apiConfig, queryKey, ...rest }: OrgAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 type Provider = {
     id: string;
@@ -134,6 +134,6 @@ interface ProviderAutocompleteProps<Option = Provider, Multiple extends boolean
     apiConfig?: ApiConfig;
 }
 declare const handleGetProviderOptionLabel: (option: Provider) => string;
-declare const ProviderAutocomplete: ({ apiConfig, customerId, queryKey, ...rest }: ProviderAutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const ProviderAutocomplete: <Option = Provider, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ apiConfig, customerId, queryKey, ...rest }: ProviderAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps, type Code, CodesAutocomplete, type CodesAutocompleteProps, type OrgAutocompleteProps, type Organization, OrganizationAutocomplete, type Provider, ProviderAutocomplete, type ProviderAutocompleteProps, fetchCodes, fetchOrgs, fetchProviders, handleGetCodesOptionLabel, handleGetOrgOptionLabel, handleGetProviderOptionLabel };

package/dist/index.js

@@ -195,7 +195,7 @@ var AsyncAutocomplete = (_a) => {
   const debouncedInput = useDebounce(inputValue, debounceTimeout);
   const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)(__spreadValues({
     queryKey: [queryKey, limit, debouncedInput, watchParams],
-    queryFn: (_0) => __async(void 0, [_0], function* ({ pageParam = 0 }) {
+    queryFn: (_0) => __async(null, [_0], function* ({ pageParam = 0 }) {
       return loadOptions(pageParam, limit, debouncedInput);
     }),
     staleTime: 1e4,
@@ -222,7 +222,7 @@ var AsyncAutocomplete = (_a) => {
       loading: isFetching,
       options,
       ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
-        onScroll: (event) => __async(void 0, null, function* () {
+        onScroll: (event) => __async(null, null, function* () {
           const listboxNode = event.currentTarget;
           const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
           if (difference <= 5 && !isLoading && !isFetching && hasNextPage) {
@@ -237,7 +237,7 @@ var AsyncAutocomplete = (_a) => {
 // src/lib/CodesAutocomplete.tsx
 var import_api_axios = require("@availity/api-axios");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var fetchCodes = (config) => __async(void 0, null, function* () {
+var fetchCodes = (config) => __async(null, null, function* () {
   const resp = yield import_api_axios.avCodesApi.query(config);
   return {
     options: resp.data.codes,
@@ -260,11 +260,13 @@ var CodesAutocomplete = (_a) => {
     "list",
     "watchParams"
   ]);
-  const handleLoadOptions = (offset, limit, inputValue) => __async(void 0, null, function* () {
+  const handleLoadOptions = (offset, limit, inputValue) => __async(null, null, function* () {
     const resp = yield fetchCodes(__spreadProps(__spreadValues({}, apiConfig), {
       params: __spreadProps(__spreadValues({}, apiConfig.params), { list, offset, limit, q: inputValue })
     }));
-    return resp;
+    return __spreadProps(__spreadValues({}, resp), {
+      options: resp.options
+    });
   });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     AsyncAutocomplete,
@@ -283,7 +285,7 @@ var CodesAutocomplete = (_a) => {
 var import_api_axios2 = require("@availity/api-axios");
 var import_qs = __toESM(require("qs"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var fetchOrgs = (config) => __async(void 0, null, function* () {
+var fetchOrgs = (config) => __async(null, null, function* () {
   const configWithParamsSerializer = __spreadProps(__spreadValues({}, config), {
     paramsSerializer: {
       serialize: (params) => import_qs.default.stringify(params, { arrayFormat: "repeat" })
@@ -305,9 +307,11 @@ var OrganizationAutocomplete = (_a) => {
     "apiConfig",
     "queryKey"
   ]);
-  const handleLoadOptions = (offset, limit) => __async(void 0, null, function* () {
+  const handleLoadOptions = (offset, limit) => __async(null, null, function* () {
     const resp = yield fetchOrgs(__spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({ dropdown: true }, apiConfig.params), { offset, limit }) }));
-    return resp;
+    return __spreadProps(__spreadValues({}, resp), {
+      options: resp.options
+    });
   });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     AsyncAutocomplete,
@@ -323,7 +327,7 @@ var OrganizationAutocomplete = (_a) => {
 // src/lib/ProviderAutocomplete.tsx
 var import_api_axios3 = require("@availity/api-axios");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var fetchProviders = (customerId, config) => __async(void 0, null, function* () {
+var fetchProviders = (customerId, config) => __async(null, null, function* () {
   const resp = yield import_api_axios3.avProvidersApi.getProviders(customerId, config);
   return {
     options: resp.data.providers,
@@ -342,11 +346,13 @@ var ProviderAutocomplete = (_a) => {
     "customerId",
     "queryKey"
   ]);
-  const handleLoadOptions = (offset, limit, inputValue) => __async(void 0, null, function* () {
+  const handleLoadOptions = (offset, limit, inputValue) => __async(null, null, function* () {
     const resp = yield fetchProviders(customerId, __spreadProps(__spreadValues({}, apiConfig), {
       params: __spreadProps(__spreadValues({}, apiConfig.params), { offset, limit, q: inputValue })
     }));
-    return resp;
+    return __spreadProps(__spreadValues({}, resp), {
+      options: resp.options
+    });
   });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     AsyncAutocomplete,

package/dist/index.mjs

@@ -153,7 +153,7 @@ var AsyncAutocomplete = (_a) => {
   const debouncedInput = useDebounce(inputValue, debounceTimeout);
   const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = useInfiniteQuery(__spreadValues({
     queryKey: [queryKey, limit, debouncedInput, watchParams],
-    queryFn: (_0) => __async(void 0, [_0], function* ({ pageParam = 0 }) {
+    queryFn: (_0) => __async(null, [_0], function* ({ pageParam = 0 }) {
       return loadOptions(pageParam, limit, debouncedInput);
     }),
     staleTime: 1e4,
@@ -180,7 +180,7 @@ var AsyncAutocomplete = (_a) => {
       loading: isFetching,
       options,
       ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
-        onScroll: (event) => __async(void 0, null, function* () {
+        onScroll: (event) => __async(null, null, function* () {
           const listboxNode = event.currentTarget;
           const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
           if (difference <= 5 && !isLoading && !isFetching && hasNextPage) {
@@ -195,7 +195,7 @@ var AsyncAutocomplete = (_a) => {
 // src/lib/CodesAutocomplete.tsx
 import { avCodesApi } from "@availity/api-axios";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var fetchCodes = (config) => __async(void 0, null, function* () {
+var fetchCodes = (config) => __async(null, null, function* () {
   const resp = yield avCodesApi.query(config);
   return {
     options: resp.data.codes,
@@ -218,11 +218,13 @@ var CodesAutocomplete = (_a) => {
     "list",
     "watchParams"
   ]);
-  const handleLoadOptions = (offset, limit, inputValue) => __async(void 0, null, function* () {
+  const handleLoadOptions = (offset, limit, inputValue) => __async(null, null, function* () {
     const resp = yield fetchCodes(__spreadProps(__spreadValues({}, apiConfig), {
       params: __spreadProps(__spreadValues({}, apiConfig.params), { list, offset, limit, q: inputValue })
     }));
-    return resp;
+    return __spreadProps(__spreadValues({}, resp), {
+      options: resp.options
+    });
   });
   return /* @__PURE__ */ jsx3(
     AsyncAutocomplete,
@@ -241,7 +243,7 @@ var CodesAutocomplete = (_a) => {
 import { avOrganizationsApi } from "@availity/api-axios";
 import qs from "qs";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var fetchOrgs = (config) => __async(void 0, null, function* () {
+var fetchOrgs = (config) => __async(null, null, function* () {
   const configWithParamsSerializer = __spreadProps(__spreadValues({}, config), {
     paramsSerializer: {
       serialize: (params) => qs.stringify(params, { arrayFormat: "repeat" })
@@ -263,9 +265,11 @@ var OrganizationAutocomplete = (_a) => {
     "apiConfig",
     "queryKey"
   ]);
-  const handleLoadOptions = (offset, limit) => __async(void 0, null, function* () {
+  const handleLoadOptions = (offset, limit) => __async(null, null, function* () {
     const resp = yield fetchOrgs(__spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({ dropdown: true }, apiConfig.params), { offset, limit }) }));
-    return resp;
+    return __spreadProps(__spreadValues({}, resp), {
+      options: resp.options
+    });
   });
   return /* @__PURE__ */ jsx4(
     AsyncAutocomplete,
@@ -281,7 +285,7 @@ var OrganizationAutocomplete = (_a) => {
 // src/lib/ProviderAutocomplete.tsx
 import { avProvidersApi } from "@availity/api-axios";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var fetchProviders = (customerId, config) => __async(void 0, null, function* () {
+var fetchProviders = (customerId, config) => __async(null, null, function* () {
   const resp = yield avProvidersApi.getProviders(customerId, config);
   return {
     options: resp.data.providers,
@@ -300,11 +304,13 @@ var ProviderAutocomplete = (_a) => {
     "customerId",
     "queryKey"
   ]);
-  const handleLoadOptions = (offset, limit, inputValue) => __async(void 0, null, function* () {
+  const handleLoadOptions = (offset, limit, inputValue) => __async(null, null, function* () {
     const resp = yield fetchProviders(customerId, __spreadProps(__spreadValues({}, apiConfig), {
       params: __spreadProps(__spreadValues({}, apiConfig.params), { offset, limit, q: inputValue })
     }));
-    return resp;
+    return __spreadProps(__spreadValues({}, resp), {
+      options: resp.options
+    });
   });
   return /* @__PURE__ */ jsx5(
     AsyncAutocomplete,

package/package.json

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

package/src/lib/AsyncAutocomplete.stories.tsx

@@ -12,13 +12,6 @@ const meta: Meta<typeof AsyncAutocomplete> = {
   args: {
     id: 'example',
   },
-  argTypes: {
-    multiple: {
-      table: {
-        disable: true,
-      },
-    },
-  },
 };
 
 export default meta;

package/src/lib/CodesAutocomplete.stories.tsx

@@ -11,13 +11,6 @@ const meta: Meta<typeof CodesAutocomplete> = {
   args: {
     id: 'example',
   },
-  argTypes: {
-    multiple: {
-      table: {
-        disable: true,
-      },
-    },
-  },
 };
 
 export default meta;

package/src/lib/CodesAutocomplete.tsx

@@ -37,26 +37,35 @@ export interface CodesAutocompleteProps<
 
 export const handleGetCodesOptionLabel = (option: Code) => [option.code, option.value].filter(Boolean).join(' - ');
 
-export const CodesAutocomplete = ({
+export const CodesAutocomplete = <
+  Option = Code,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+>({
   apiConfig = {},
   queryOptions,
   queryKey = 'codes-autocomplete',
   list,
   watchParams,
   ...rest
-}: CodesAutocompleteProps) => {
+}: CodesAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
   const handleLoadOptions = async (offset: number, limit: number, inputValue: string) => {
     const resp = await fetchCodes({
       ...apiConfig,
       params: { ...apiConfig.params, list, offset, limit, q: inputValue },
     });
 
-    return resp;
+    return {
+      ...resp,
+      options: resp.options as Option[],
+    };
   };
 
   return (
     <AsyncAutocomplete
-      getOptionLabel={handleGetCodesOptionLabel}
+      getOptionLabel={handleGetCodesOptionLabel as (option: Option) => string}
       queryKey={queryKey}
       queryOptions={{ enabled: !!list, ...queryOptions }}
       watchParams={{ list, ...watchParams }}

package/src/lib/OrganizationAutocomplete.stories.tsx

@@ -11,13 +11,6 @@ const meta: Meta<typeof OrganizationAutocomplete> = {
   args: {
     id: 'example',
   },
-  argTypes: {
-    multiple: {
-      table: {
-        disable: true,
-      },
-    },
-  },
 };
 
 export default meta;

package/src/lib/OrganizationAutocomplete.tsx

@@ -49,20 +49,29 @@ export interface OrgAutocompleteProps<
 
 export const handleGetOrgOptionLabel = (org: Organization) => org.name;
 
-export const OrganizationAutocomplete = ({
+export const OrganizationAutocomplete = <
+  Option = Organization,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+>({
   apiConfig = {},
   queryKey = 'org-autocomplete',
   ...rest
-}: OrgAutocompleteProps) => {
+}: OrgAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
   const handleLoadOptions = async (offset: number, limit: number) => {
     const resp = await fetchOrgs({ ...apiConfig, params: { dropdown: true, ...apiConfig.params, offset, limit } });
 
-    return resp;
+    return {
+      ...resp,
+      options: resp.options as Option[],
+    };
   };
 
   return (
     <AsyncAutocomplete
-      getOptionLabel={handleGetOrgOptionLabel}
+      getOptionLabel={handleGetOrgOptionLabel as (option: Option) => string}
       queryKey={queryKey}
       {...rest}
       loadOptions={handleLoadOptions}

package/src/lib/ProviderAutocomplete.stories.tsx

@@ -11,13 +11,6 @@ const meta: Meta<typeof ProviderAutocomplete> = {
   args: {
     id: 'example',
   },
-  argTypes: {
-    multiple: {
-      table: {
-        disable: true,
-      },
-    },
-  },
 };
 
 export default meta;

package/src/lib/ProviderAutocomplete.tsx

@@ -64,24 +64,33 @@ export interface ProviderAutocompleteProps<
 
 export const handleGetProviderOptionLabel = (option: Provider) => option.uiDisplayName;
 
-export const ProviderAutocomplete = ({
+export const ProviderAutocomplete = <
+  Option = Provider,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+>({
   apiConfig = {},
   customerId,
   queryKey = 'prov-autocomplete',
   ...rest
-}: ProviderAutocompleteProps) => {
+}: ProviderAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
   const handleLoadOptions = async (offset: number, limit: number, inputValue: string) => {
     const resp = await fetchProviders(customerId, {
       ...apiConfig,
       params: { ...apiConfig.params, offset, limit, q: inputValue },
     });
 
-    return resp;
+    return {
+      ...resp,
+      options: resp.options as Option[],
+    };
   };
 
   return (
     <AsyncAutocomplete
-      getOptionLabel={handleGetProviderOptionLabel}
+      getOptionLabel={handleGetProviderOptionLabel as (option: Option) => string}
       queryOptions={{ enabled: !!customerId }}
       queryKey={queryKey}
       watchParams={{ customerId }}