@mskcc/carbon-react/lib/components/MskAutocomplete/Autocomplete.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var Downshift = require('downshift');
var debounce = require('lodash.debounce');
var PropTypes = require('prop-types');
var AutocompleteInput = require('./AutocompleteInput.js');
var AutocompleteSuggestionList = require('./AutocompleteSuggestionList.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);

const AutocompleteContext = /*#__PURE__*/React.createContext(null);
function useAutocomplete() {
  const context = React.useContext(AutocompleteContext);
  if (!context) {
    throw new Error('useAutocomplete must be used within an Autocomplete provider');
  }
  return context;
}

// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
const Autocomplete = _ref => {
  let {
    children,
    handleInput,
    min = 3,
    ...downshiftProps
  } = _ref;
  const [items, setItems] = React.useState([]);
  const {
    isOpen,
    getMenuProps,
    getInputProps,
    highlightedIndex,
    getItemProps,
    reset,
    inputValue
  } = Downshift.useCombobox({
    items,
    ...downshiftProps
  });
  const clearInput = () => reset();
  React.useEffect(() => {
    const effectiveMin = Math.max(min, 1);
    if (inputValue && inputValue.length >= effectiveMin) {
      const debouncedHandleInput = debounce__default["default"](() => {
        const result = handleInput(inputValue);
        if (result instanceof Promise) {
          result.then(setItems);
        } else {
          setItems(result);
        }
      }, 300);
      debouncedHandleInput();
      return () => {
        debouncedHandleInput.cancel();
      };
    }
  }, [inputValue, handleInput]);
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: "msk-autocomplete"
  }, /*#__PURE__*/React__default["default"].createElement(AutocompleteContext.Provider, {
    value: {
      isOpen,
      getMenuProps,
      getInputProps,
      highlightedIndex,
      getItemProps,
      items,
      clearInput
    }
  }, children));
};
Autocomplete.displayName = 'Autocomplete';
Autocomplete.Input = AutocompleteInput.AutocompleteInput;
Autocomplete.SuggestionList = AutocompleteSuggestionList.AutocompleteSuggestionList;
Autocomplete.propTypes = {
  /**
   * The children of the Autocomplete component.
   */
  children: PropTypes__default["default"].node.isRequired,
  /**
   * The function that will be called when the user types in the input.
   * It should return an array of items or a promise that resolves to an array of items.
   */
  handleInput: PropTypes__default["default"].func.isRequired,
  /**
   * The minimum number of characters that must be typed before the handleInput function is called.
   */
  min: PropTypes__default["default"].number
};

exports.Autocomplete = Autocomplete;
exports["default"] = Autocomplete;
exports.useAutocomplete = useAutocomplete;