@availity/mui-autocomplete/dist/index.js

Availity MUI Autocomplete Component - part of the @availity/element design system

"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 }))
] }));
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"
  ]);
  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), {
      // appease the Level Access scanning tools
      "aria-controls": (params == null ? void 0 : 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)
  );
};

// src/lib/AsyncAutocomplete.tsx
var import_react3 = require("react");
var import_react_query = require("@tanstack/react-query");

// src/lib/util.tsx
var import_react2 = require("react");
var useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = (0, import_react2.useState)("");
  (0, import_react2.useEffect)(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => {
      clearTimeout(timer);
    };
  }, [value]);
  return debouncedValue;
};

// src/lib/AsyncAutocomplete.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var AsyncAutocomplete = (_a) => {
  var _b = _a, {
    loadOptions,
    limit = 50,
    queryKey,
    ListboxProps,
    queryOptions,
    watchParams,
    debounceTimeout = 350,
    FieldProps,
    onInputChange
  } = _b, rest = __objRest(_b, [
    "loadOptions",
    "limit",
    "queryKey",
    "ListboxProps",
    "queryOptions",
    "watchParams",
    "debounceTimeout",
    "FieldProps",
    "onInputChange"
  ]);
  const [inputValue, setInputValue] = (0, import_react3.useState)("");
  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);
  };
  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 }) {
      return loadOptions(pageParam, limit, debouncedInput);
    }),
    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() : [];
  const handleOnInputChange = (event, value, reason) => {
    if (reason === "clear") {
      setInputValue(event.target.value);
    } else if (reason === "blur") {
      setInputValue(value);
    }
    if (onInputChange) onInputChange(event, value, reason);
  };
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    Autocomplete,
    __spreadProps(__spreadValues({}, rest), {
      onInputChange: handleOnInputChange,
      FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
        InputProps: __spreadProps(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.InputProps), {
          onChange: handleInputPropsOnChange
        })
      }),
      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 && !isLoading && !isFetching && hasNextPage) {
            fetchNextPage();
          }
        })
      })
    })
  );
};

// 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* () {
  const resp = yield import_api_axios.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(void 0, 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
    });
  });
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    AsyncAutocomplete,
    __spreadProps(__spreadValues({
      getOptionLabel: handleGetCodesOptionLabel,
      queryKey,
      queryOptions: __spreadValues({ enabled: !!list }, queryOptions),
      watchParams: __spreadValues({ 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(void 0, null, function* () {
  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,
    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(void 0, null, function* () {
    const resp = yield fetchOrgs(__spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({ dropdown: true }, apiConfig.params), { offset, limit }) }));
    return __spreadProps(__spreadValues({}, resp), {
      options: resp.options
    });
  });
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    AsyncAutocomplete,
    __spreadProps(__spreadValues({
      getOptionLabel: handleGetOrgOptionLabel,
      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(void 0, null, function* () {
  const resp = yield import_api_axios3.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(void 0, 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
    });
  });
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    AsyncAutocomplete,
    __spreadProps(__spreadValues({
      getOptionLabel: handleGetProviderOptionLabel,
      queryOptions: { enabled: !!customerId },
      queryKey,
      watchParams: { customerId }
    }, rest), {
      loadOptions: handleLoadOptions
    })
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  AsyncAutocomplete,
  Autocomplete,
  CodesAutocomplete,
  OrganizationAutocomplete,
  ProviderAutocomplete,
  createFilterOptions,
  fetchCodes,
  fetchOrgs,
  fetchProviders,
  handleGetCodesOptionLabel,
  handleGetOrgOptionLabel,
  handleGetProviderOptionLabel
});