@availity/mui-autocomplete 2.2.6 → 3.0.0

package/dist/index.js

@@ -1,157 +1,64 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  AsyncAutocomplete: () => AsyncAutocomplete,
-  Autocomplete: () => Autocomplete,
-  CodesAutocomplete: () => CodesAutocomplete,
-  OrganizationAutocomplete: () => OrganizationAutocomplete,
-  ProviderAutocomplete: () => ProviderAutocomplete,
-  createFilterOptions: () => import_Autocomplete2.createFilterOptions,
-  fetchCodes: () => fetchCodes,
-  fetchOrgs: () => fetchOrgs,
-  fetchProviders: () => fetchProviders,
-  handleGetCodesOptionLabel: () => handleGetCodesOptionLabel,
-  handleGetOrgOptionLabel: () => handleGetOrgOptionLabel,
-  handleGetProviderOptionLabel: () => handleGetProviderOptionLabel
-});
-module.exports = __toCommonJS(index_exports);
-
 // src/lib/Autocomplete.tsx
-var import_react = require("react");
-var import_Autocomplete = __toESM(require("@mui/material/Autocomplete"));
-var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
-var import_IconButton = __toESM(require("@mui/material/IconButton"));
-var import_mui_textfield = require("@availity/mui-textfield");
-var import_mui_form_utils = require("@availity/mui-form-utils");
-var import_Autocomplete2 = require("@mui/material/Autocomplete");
-var import_jsx_runtime = require("react/jsx-runtime");
-var PopupIndicatorWrapper = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectDivider, { orientation: "vertical", className: "MuiSelect-avEndAdornmentDivider" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IconButton.default, __spreadProps(__spreadValues({}, props), { ref }))
+import { forwardRef } from "react";
+import {
+  default as MuiAutocomplete
+} from "@mui/material/Autocomplete";
+import CircularProgress from "@mui/material/CircularProgress";
+import { default as MuiIconButton } from "@mui/material/IconButton";
+import { TextField } from "@availity/mui-textfield";
+import { SelectDivider, SelectExpandIcon } from "@availity/mui-form-utils";
+import { createFilterOptions } from "@mui/material/Autocomplete";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PopupIndicatorWrapper = forwardRef((props, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(SelectDivider, { orientation: "vertical", className: "MuiSelect-avEndAdornmentDivider" }),
+  /* @__PURE__ */ jsx(MuiIconButton, { ...props, ref })
 ] }));
 var progressSx = { marginRight: ".5rem" };
-var LoadingIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CircularProgress.default, { "aria-label": "Loading", size: 20, sx: progressSx });
-var Autocomplete = (_a) => {
-  var _b = _a, {
-    FieldProps
-  } = _b, props = __objRest(_b, [
-    "FieldProps"
-  ]);
+var LoadingIndicator = () => /* @__PURE__ */ jsx(CircularProgress, { "aria-label": "Loading", size: 20, sx: progressSx });
+var Autocomplete = ({
+  FieldProps,
+  ...props
+}) => {
   const defaultProps = {
     fullWidth: true,
     size: "small"
   };
   const resolvedProps = (params) => ({
-    InputProps: __spreadProps(__spreadValues(__spreadValues({}, params == null ? void 0 : params.InputProps), FieldProps == null ? void 0 : FieldProps.InputProps), {
-      endAdornment: props.loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        (params == null ? void 0 : params.InputProps.endAdornment) || null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingIndicator, {})
-      ] }) : (params == null ? void 0 : params.InputProps.endAdornment) || null
-    }),
-    inputProps: __spreadProps(__spreadValues({}, params == null ? void 0 : params.inputProps), {
+    InputProps: {
+      ...params?.InputProps,
+      ...FieldProps?.InputProps,
+      endAdornment: props.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        params?.InputProps.endAdornment || null,
+        /* @__PURE__ */ jsx(LoadingIndicator, {})
+      ] }) : params?.InputProps.endAdornment || null
+    },
+    inputProps: {
+      ...params?.inputProps,
       // appease the Level Access scanning tools
-      "aria-controls": (params == null ? void 0 : params.inputProps["aria-controls"]) || ""
-    })
+      "aria-controls": params?.inputProps["aria-controls"] || ""
+    }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Autocomplete.default,
-    __spreadValues(__spreadValues({
-      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)
+  return /* @__PURE__ */ jsx(
+    MuiAutocomplete,
+    {
+      renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, ...FieldProps, ...resolvedProps(params) }),
+      popupIcon: /* @__PURE__ */ jsx(SelectExpandIcon, { className: "MuiSelect-avExpandIcon" }),
+      slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
+      ...props,
+      ...defaultProps
+    }
   );
 };
 
 // src/lib/AsyncAutocomplete.tsx
-var import_react3 = require("react");
-var import_react_query = require("@tanstack/react-query");
+import { useState as useState2, useRef, useEffect as useEffect2, useCallback } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
 
 // src/lib/util.tsx
-var import_react2 = require("react");
+import { useEffect, useState } from "react";
 var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = (0, import_react2.useState)("");
-  (0, import_react2.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = useState("");
+  useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -163,51 +70,39 @@ var useDebounce = (value, delay) => {
 };
 
 // src/lib/AsyncAutocomplete.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var AsyncAutocomplete = (_a) => {
-  var _b = _a, {
-    loadOptions,
-    limit = 50,
-    queryKey,
-    ListboxProps,
-    queryOptions,
-    watchParams,
-    debounceTimeout = 350,
-    FieldProps,
-    onInputChange,
-    prependOptions = []
-  } = _b, rest = __objRest(_b, [
-    "loadOptions",
-    "limit",
-    "queryKey",
-    "ListboxProps",
-    "queryOptions",
-    "watchParams",
-    "debounceTimeout",
-    "FieldProps",
-    "onInputChange",
-    "prependOptions"
-  ]);
-  const [inputValue, setInputValue] = (0, import_react3.useState)("");
-  const listboxRef = (0, import_react3.useRef)(null);
-  const setListboxRef = (0, import_react3.useCallback)((node) => {
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AsyncAutocomplete = ({
+  loadOptions,
+  limit = 50,
+  queryKey,
+  ListboxProps,
+  queryOptions,
+  watchParams,
+  debounceTimeout = 350,
+  FieldProps,
+  onInputChange,
+  prependOptions = [],
+  ...rest
+}) => {
+  const [inputValue, setInputValue] = useState2("");
+  const listboxRef = useRef(null);
+  const setListboxRef = useCallback((node) => {
     listboxRef.current = node;
   }, []);
   const handleInputPropsOnChange = (event) => {
-    var _a2;
     setInputValue(event.target.value);
-    if ((_a2 = FieldProps == null ? void 0 : FieldProps.InputProps) == null ? void 0 : _a2.onChange) FieldProps.InputProps.onChange(event);
+    if (FieldProps?.InputProps?.onChange) FieldProps.InputProps.onChange(event);
   };
   const debouncedInput = useDebounce(inputValue, debounceTimeout);
-  const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)(__spreadValues({
+  const { isLoading, isFetching, data, hasNextPage, fetchNextPage } = useInfiniteQuery({
     queryKey: [queryKey, limit, debouncedInput, watchParams],
-    queryFn: (_0) => __async(null, [_0], function* ({ pageParam = 0 }) {
-      return loadOptions(pageParam, limit, debouncedInput);
-    }),
+    queryFn: ({ pageParam }) => loadOptions(pageParam, limit, debouncedInput),
+    initialPageParam: 0,
     staleTime: 1e4,
-    getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : void 0
-  }, queryOptions));
-  const options = (data == null ? void 0 : data.pages) ? data.pages.map((page) => page.options).flat() : [];
+    getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : void 0,
+    ...queryOptions
+  });
+  const options = data?.pages ? data.pages.flatMap((page) => page.options) : [];
   const finalOptions = prependOptions.length > 0 ? [
     ...prependOptions,
     ...options.filter(
@@ -218,179 +113,174 @@ var AsyncAutocomplete = (_a) => {
   ] : options;
   const handleOnInputChange = (event, value, reason) => {
     if (reason === "clear") {
-      setInputValue(event.target.value);
+      setInputValue(value);
     } else if (reason === "blur") {
       setInputValue(value);
     }
     if (onInputChange) onInputChange(event, value, reason);
   };
-  const handleAddingOptions = (event) => __async(null, null, function* () {
+  const handleAddingOptions = async (event) => {
     const listboxNode = event.currentTarget;
     const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
     if (difference <= 10 && !isLoading && !isFetching && hasNextPage) {
       fetchNextPage();
     }
-  });
-  (0, import_react3.useEffect)(() => {
-    var _a2;
+  };
+  useEffect2(() => {
     if (hasNextPage) {
-      (_a2 = listboxRef.current) == null ? void 0 : _a2.dispatchEvent(new UIEvent("scroll"));
+      listboxRef.current?.dispatchEvent(new UIEvent("scroll"));
     }
-  }, [data == null ? void 0 : data.pages.length, hasNextPage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  }, [data?.pages.length, hasNextPage]);
+  return /* @__PURE__ */ jsx2(
     Autocomplete,
-    __spreadProps(__spreadValues({}, rest), {
+    {
+      ...rest,
       onInputChange: handleOnInputChange,
-      FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
-        InputProps: __spreadProps(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.InputProps), {
+      FieldProps: {
+        ...FieldProps,
+        InputProps: {
+          ...FieldProps?.InputProps,
           onChange: handleInputPropsOnChange
-        })
-      }),
+        }
+      },
       loading: isFetching,
       options: finalOptions,
-      ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
+      ListboxProps: {
+        ...ListboxProps,
         ref: setListboxRef,
         onScroll: handleAddingOptions,
         onPointerEnter: handleAddingOptions
-      })
-    })
+      }
+    }
   );
 };
 
 // src/lib/CodesAutocomplete.tsx
-var import_api_axios = require("@availity/api-axios");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var fetchCodes = (config) => __async(null, null, function* () {
-  const resp = yield import_api_axios.avCodesApi.query(config);
+import { avCodesApi } from "@availity/api-axios";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var fetchCodes = async (config) => {
+  const resp = await avCodesApi.query(config);
   return {
     options: resp.data.codes,
     hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
     offset: config.params.offset
   };
-});
+};
 var handleGetCodesOptionLabel = (option) => [option.code, option.value].filter(Boolean).join(" - ");
-var CodesAutocomplete = (_a) => {
-  var _b = _a, {
-    apiConfig = {},
-    queryOptions,
-    queryKey = "codes-autocomplete",
-    list,
-    watchParams
-  } = _b, rest = __objRest(_b, [
-    "apiConfig",
-    "queryOptions",
-    "queryKey",
-    "list",
-    "watchParams"
-  ]);
-  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 __spreadProps(__spreadValues({}, resp), {
-      options: resp.options
+var CodesAutocomplete = ({
+  apiConfig = {},
+  queryOptions,
+  queryKey = "codes-autocomplete",
+  list,
+  watchParams,
+  ...rest
+}) => {
+  const handleLoadOptions = async (offset, limit, inputValue) => {
+    const resp = await fetchCodes({
+      ...apiConfig,
+      params: { ...apiConfig.params, list, offset, limit, q: inputValue }
     });
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return {
+      ...resp,
+      options: resp.options
+    };
+  };
+  return /* @__PURE__ */ jsx3(
     AsyncAutocomplete,
-    __spreadProps(__spreadValues({
+    {
       getOptionLabel: handleGetCodesOptionLabel,
       queryKey,
-      queryOptions: __spreadValues({ enabled: !!list }, queryOptions),
-      watchParams: __spreadValues({ list }, watchParams)
-    }, rest), {
+      queryOptions: { enabled: !!list, ...queryOptions },
+      watchParams: { list, ...watchParams },
+      ...rest,
       loadOptions: handleLoadOptions
-    })
+    }
   );
 };
 
 // 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(null, null, function* () {
-  const configWithParamsSerializer = __spreadProps(__spreadValues({}, config), {
+import { avOrganizationsApi } from "@availity/api-axios";
+import qs from "qs";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var fetchOrgs = async (config) => {
+  const configWithParamsSerializer = {
+    ...config,
     paramsSerializer: {
-      serialize: (params) => import_qs.default.stringify(params, { arrayFormat: "repeat" })
+      serialize: (params) => qs.stringify(params, { arrayFormat: "repeat" })
     }
-  });
-  const resp = yield import_api_axios2.avOrganizationsApi.getOrganizations(configWithParamsSerializer);
+  };
+  const resp = await avOrganizationsApi.getOrganizations(configWithParamsSerializer);
   return {
     options: resp.data.organizations,
     hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
     offset: config.params.offset
   };
-});
+};
 var handleGetOrgOptionLabel = (org) => org.name;
-var OrganizationAutocomplete = (_a) => {
-  var _b = _a, {
-    apiConfig = {},
-    queryKey = "org-autocomplete"
-  } = _b, rest = __objRest(_b, [
-    "apiConfig",
-    "queryKey"
-  ]);
-  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 __spreadProps(__spreadValues({}, resp), {
+var OrganizationAutocomplete = ({
+  apiConfig = {},
+  queryKey = "org-autocomplete",
+  ...rest
+}) => {
+  const handleLoadOptions = async (offset, limit) => {
+    const resp = await fetchOrgs({ ...apiConfig, params: { dropdown: true, ...apiConfig.params, offset, limit } });
+    return {
+      ...resp,
       options: resp.options
-    });
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    };
+  };
+  return /* @__PURE__ */ jsx4(
     AsyncAutocomplete,
-    __spreadProps(__spreadValues({
+    {
       getOptionLabel: handleGetOrgOptionLabel,
-      queryKey
-    }, rest), {
+      queryKey,
+      ...rest,
       loadOptions: handleLoadOptions
-    })
+    }
   );
 };
 
 // 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(null, null, function* () {
-  const resp = yield import_api_axios3.avProvidersApi.getProviders(customerId, config);
+import { avProvidersApi } from "@availity/api-axios";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var fetchProviders = async (customerId, config) => {
+  const resp = await avProvidersApi.getProviders(customerId, config);
   return {
     options: resp.data.providers,
     hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
     offset: config.params.offset
   };
-});
+};
 var handleGetProviderOptionLabel = (option) => option.uiDisplayName;
-var ProviderAutocomplete = (_a) => {
-  var _b = _a, {
-    apiConfig = {},
-    customerId,
-    queryKey = "prov-autocomplete"
-  } = _b, rest = __objRest(_b, [
-    "apiConfig",
-    "customerId",
-    "queryKey"
-  ]);
-  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 __spreadProps(__spreadValues({}, resp), {
-      options: resp.options
+var ProviderAutocomplete = ({
+  apiConfig = {},
+  customerId,
+  queryKey = "prov-autocomplete",
+  ...rest
+}) => {
+  const handleLoadOptions = async (offset, limit, inputValue) => {
+    const resp = await fetchProviders(customerId, {
+      ...apiConfig,
+      params: { ...apiConfig.params, offset, limit, q: inputValue }
     });
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return {
+      ...resp,
+      options: resp.options
+    };
+  };
+  return /* @__PURE__ */ jsx5(
     AsyncAutocomplete,
-    __spreadProps(__spreadValues({
+    {
       getOptionLabel: handleGetProviderOptionLabel,
       queryOptions: { enabled: !!customerId },
       queryKey,
-      watchParams: { customerId }
-    }, rest), {
+      watchParams: { customerId },
+      ...rest,
       loadOptions: handleLoadOptions
-    })
+    }
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   AsyncAutocomplete,
   Autocomplete,
   CodesAutocomplete,
@@ -403,4 +293,4 @@ var ProviderAutocomplete = (_a) => {
   handleGetCodesOptionLabel,
   handleGetOrgOptionLabel,
   handleGetProviderOptionLabel
-});
+};

package/introduction.mdx

@@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import ReadMe from './README.md?raw';
 import CHANGELOG from './CHANGELOG.md?raw';
 
-<Meta title="Form Components/Autocomplete/Introduction" />
+<Meta title="Form Components/Uncontrolled Fields/Autocomplete/README" />
 
 <Markdown>{ReadMe}</Markdown>