@availity/mui-autocomplete 1.2.3 → 1.2.5

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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)
+
+
+### Bug Fixes
+
+* **mui-autocomplete:** serialize organization params ([23d9dce](https://github.com/Availity/element/commit/23d9dce0bd63e9417a8a79a95ab2c7e5c8946301))
+
 ## [1.2.3](https://github.com/Availity/element/compare/@availity/mui-autocomplete@1.2.2...@availity/mui-autocomplete@1.2.3) (2025-05-30)
 
 

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

@@ -264,7 +264,9 @@ var CodesAutocomplete = (_a) => {
     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,
@@ -281,9 +283,15 @@ var CodesAutocomplete = (_a) => {
 
 // src/lib/OrganizationAutocomplete.tsx
 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* () {
-  const resp = yield import_api_axios2.avOrganizationsApi.getOrganizations(config);
+  const configWithParamsSerializer = __spreadProps(__spreadValues({}, config), {
+    paramsSerializer: {
+      serialize: (params) => import_qs.default.stringify(params, { arrayFormat: "repeat" })
+    }
+  });
+  const resp = yield import_api_axios2.avOrganizationsApi.getOrganizations(configWithParamsSerializer);
   return {
     options: resp.data.organizations,
     hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
@@ -301,7 +309,9 @@ var OrganizationAutocomplete = (_a) => {
   ]);
   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;
+    return __spreadProps(__spreadValues({}, resp), {
+      options: resp.options
+    });
   });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     AsyncAutocomplete,
@@ -340,7 +350,9 @@ var ProviderAutocomplete = (_a) => {
     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

@@ -222,7 +222,9 @@ var CodesAutocomplete = (_a) => {
     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,
@@ -239,9 +241,15 @@ var CodesAutocomplete = (_a) => {
 
 // src/lib/OrganizationAutocomplete.tsx
 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* () {
-  const resp = yield avOrganizationsApi.getOrganizations(config);
+  const configWithParamsSerializer = __spreadProps(__spreadValues({}, config), {
+    paramsSerializer: {
+      serialize: (params) => qs.stringify(params, { arrayFormat: "repeat" })
+    }
+  });
+  const resp = yield avOrganizationsApi.getOrganizations(configWithParamsSerializer);
   return {
     options: resp.data.organizations,
     hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
@@ -259,7 +267,9 @@ var OrganizationAutocomplete = (_a) => {
   ]);
   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;
+    return __spreadProps(__spreadValues({}, resp), {
+      options: resp.options
+    });
   });
   return /* @__PURE__ */ jsx4(
     AsyncAutocomplete,
@@ -298,7 +308,9 @@ var ProviderAutocomplete = (_a) => {
     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.3",
+  "version": "1.2.5",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -41,7 +41,8 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@mui/types": "^7.2.21"
+    "@mui/types": "^7.2.21",
+    "qs": "^6.14.0"
   },
   "devDependencies": {
     "@availity/api-axios": "^11.0.0",

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

@@ -1,5 +1,6 @@
 import { avOrganizationsApi, ApiConfig } from '@availity/api-axios';
 import type { ChipTypeMap } from '@mui/material/Chip';
+import qs from 'qs';
 
 import { AsyncAutocomplete, AsyncAutocompleteProps } from './AsyncAutocomplete';
 import type { Optional } from './util';
@@ -15,7 +16,15 @@ export type Organization = {
 export const fetchOrgs = async (
   config: ApiConfig
 ): Promise<{ options: Organization[]; hasMore: boolean; offset: number }> => {
-  const resp = await avOrganizationsApi.getOrganizations(config);
+  // Configure axios to use 'repeat' format for arrays (no brackets)
+  const configWithParamsSerializer = {
+    ...config,
+    paramsSerializer: {
+      serialize: (params: Record<string, any>) => qs.stringify(params, { arrayFormat: 'repeat' }),
+    },
+  };
+
+  const resp = await avOrganizationsApi.getOrganizations(configWithParamsSerializer);
 
   return {
     options: resp.data.organizations as Organization[],
@@ -40,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 }}