@algolia/satellite 1.1.0 → 1.1.2

package/dist/cjs/AutoComplete/AutoComplete.js

@@ -1,457 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AutoComplete = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _downshift = require("downshift");
-var _react = require("react");
-var _reactPopper = require("react-popper");
-var _useMeasure3 = _interopRequireDefault(require("react-use/lib/useMeasure"));
-var _usePrevious = _interopRequireDefault(require("react-use/lib/usePrevious"));
-var _Card = require("../Card");
-var _ClickAwayContainer = require("../ClickAwayContainer");
-var _Field = require("../Field");
-var _Icons = require("../Icons");
-var _Satellite = require("../Satellite");
-var _ScrollIndicator = require("../ScrollIndicator");
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-var _Tag = require("../Tag");
-var _mergeRefs = require("../utils/mergeRefs");
-var _uniqBy = require("../utils/uniqBy");
-var _AutoCompleteContext = require("./components/AutoCompleteContext");
-var _AutoCompleteEmptyState = require("./components/AutoCompleteEmptyState");
-var _DefaultOptionItem = require("./components/DefaultOptionItem");
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MENU_POPPER_OPTIONS = {
-  strategy: "fixed",
-  placement: "bottom-start",
-  modifiers: [{
-    name: "offset",
-    options: {
-      offset: [0, 8]
-    }
-  }]
-};
-var SHOW_ALL_ITEMS_ID = "__stl_extra_results_option__";
-var updateRef = function updateRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-};
-var InvalidIcon = function InvalidIcon() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
-  });
-};
-var ValidatedIcon = function ValidatedIcon() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
-  });
-};
-
-/**
- * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
- *
- * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
- */
-var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var localeProp = _ref.locale,
-    id = _ref.id,
-    labelId = _ref.labelId,
-    ariaLabel = _ref["aria-label"],
-    name = _ref.name,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required,
-    placeholder = _ref.placeholder,
-    autoFocus = _ref.autoFocus,
-    inputValueProp = _ref.inputValue,
-    onTextChange = _ref.onTextChange,
-    _onFocus = _ref.onFocus,
-    _onBlur = _ref.onBlur,
-    disabled = _ref.disabled,
-    clearable = _ref.clearable,
-    renderValueTemplate = _ref.renderValueTemplate,
-    noWrap = _ref.noWrap,
-    separatorKeys = _ref.separatorKeys,
-    multiple = _ref.multiple,
-    value = _ref.value,
-    selectOnBlur = _ref.selectOnBlur,
-    onChange = _ref.onChange,
-    options = _ref.options,
-    optionItemComponent = _ref.optionItemComponent,
-    creatable = _ref.creatable,
-    _ref$createFromInputV = _ref.createFromInputValue,
-    createFromInputValue = _ref$createFromInputV === void 0 ? _utils.defaultCreateFromInputValue : _ref$createFromInputV,
-    emptyState = _ref.emptyState,
-    _ref$maxResults = _ref.maxResults,
-    maxItems = _ref$maxResults === void 0 ? 7 : _ref$maxResults,
-    menuFooter = _ref.menuFooter,
-    menuSize = _ref.menuSize,
-    variant = _ref.variant,
-    Icon = _ref.icon,
-    endItem = _ref.endItem,
-    className = _ref.className,
-    menuClassName = _ref.menuClassName,
-    valuesClassName = _ref.valuesClassName,
-    internalsRef = _ref.internalsRef;
-  var createPortal = (0, _Satellite.useCreatePortal)();
-  var _useField = (0, _Field.useField)({
-      required: required
-    }),
-    status = _useField.state.status,
-    fieldLabelId = _useField.labelId,
-    descriptionId = _useField.descriptionId,
-    inputId = _useField.inputId;
-  var isInvalid = status === "invalid";
-  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
-  var localeContext = (0, _Satellite.useLocale)("autoComplete");
-  var locale = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, _utils.DEFAULT_AUTOCOMPLETE_LOCALE), localeContext), localeProp);
-  }, [localeContext, localeProp]);
-  var inputRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    inputFocused = _useState2[0],
-    setInputFocused = _useState2[1];
-  var _useState3 = (0, _react.useState)(function () {
-      return (inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : multiple) ? "" : value ? (0, _utils.optionToString)(value) : "";
-    }),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    internalInputValue = _useState4[0],
-    setInternalInputValue = _useState4[1];
-  var previousValue = (0, _usePrevious["default"])(value);
-  (0, _react.useEffect)(function () {
-    if (multiple || typeof inputValueProp !== "undefined") return;
-    if (!Array.isArray(previousValue) && (0, _utils.optionToString)(previousValue) === (0, _utils.optionToString)(value)) return;
-    setInternalInputValue((0, _utils.optionToString)(value));
-  }, [multiple, inputValueProp, previousValue, value]);
-  var inputValue = inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : internalInputValue;
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    containerElement = _useState6[0],
-    setContainerElement = _useState6[1];
-  var _useMeasure = (0, _useMeasure3["default"])(),
-    _useMeasure2 = (0, _slicedToArray2["default"])(_useMeasure, 2),
-    setContainerMeasureRef = _useMeasure2[0],
-    containerWidth = _useMeasure2[1].width;
-  var menuRef = (0, _react.useRef)(null);
-  var menuPopper = (0, _reactPopper.usePopper)(containerElement, menuRef.current, MENU_POPPER_OPTIONS);
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    showAllItems = _useState8[0],
-    setShowAllItems = _useState8[1];
-  var selectedItems = (0, _react.useMemo)(function () {
-    return !value ? [] : Array.isArray(value) ? value : [value];
-  }, [value]);
-  var items = (0, _react.useMemo)(function () {
-    var results = (0, _utils.filter)(options !== null && options !== void 0 ? options : [], multiple ? selectedItems : [], inputValue);
-    var emptyInputValue = !inputValue || inputValue.trim().length === 0;
-    if (creatable && !emptyInputValue) {
-      results.unshift.apply(results, (0, _toConsumableArray2["default"])(createFromInputValue(options, inputValue)));
-    }
-    if (!showAllItems && results.length > maxItems) {
-      var extraResults = results.length - maxItems;
-      var label = locale.showMoreButton(extraResults);
-      results.splice(maxItems, results.length, {
-        value: SHOW_ALL_ITEMS_ID,
-        label: label
-      });
-    }
-    return results;
-  }, [creatable, createFromInputValue, inputValue, locale, maxItems, multiple, options, selectedItems, showAllItems]);
-  var hasValue = !!selectedItems.length;
-  var showClearButton = !disabled && clearable && hasValue;
-  var multipleSelection = (0, _downshift.useMultipleSelection)({
-    selectedItems: selectedItems,
-    onSelectedItemsChange: function onSelectedItemsChange(changes) {
-      if (typeof changes.selectedItems === "undefined") {
-        onChange(null);
-      } else if (multiple) {
-        onChange((0, _uniqBy.uniqBy)(changes.selectedItems, function (i) {
-          return i.value;
-        }));
-      } else {
-        var _changes$selectedItem;
-        onChange((_changes$selectedItem = changes.selectedItems[0]) !== null && _changes$selectedItem !== void 0 ? _changes$selectedItem : null);
-      }
-    }
-  });
-  var combobox = (0, _downshift.useCombobox)({
-    inputId: id !== null && id !== void 0 ? id : inputId,
-    labelId: labelId !== null && labelId !== void 0 ? labelId : fieldLabelId,
-    items: items,
-    itemToString: _utils.optionToString,
-    scrollIntoView: function scrollIntoView(node) {
-      var _node$scrollIntoView;
-      return node === null || node === void 0 || (_node$scrollIntoView = node.scrollIntoView) === null || _node$scrollIntoView === void 0 ? void 0 : _node$scrollIntoView.call(node, {
-        block: "nearest"
-      });
-    },
-    defaultHighlightedIndex: 0,
-    getA11yStatusMessage: function getA11yStatusMessage(_ref2) {
-      var isOpen = _ref2.isOpen,
-        resultCount = _ref2.resultCount,
-        previousResultCount = _ref2.previousResultCount;
-      if (!isOpen) {
-        return "";
-      }
-      if (!resultCount) {
-        return locale.emptyStateTitle;
-      }
-      if (resultCount !== previousResultCount) {
-        return locale.itemsAvailable(resultCount);
-      }
-      return "";
-    },
-    getA11ySelectionMessage: function getA11ySelectionMessage(_ref3) {
-      var selectedItem = _ref3.selectedItem;
-      return locale.selectionMessage((0, _utils.optionToString)(selectedItem), selectedItem);
-    },
-    selectedItem: null,
-    inputValue: inputValue,
-    onStateChange: function onStateChange(changes) {
-      switch (changes.type) {
-        case _downshift.useCombobox.stateChangeTypes.InputBlur:
-        case _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-        case _downshift.useCombobox.stateChangeTypes.ItemClick:
-          {
-            var selectedItem = selectOnBlur && changes.type === _downshift.useCombobox.stateChangeTypes.InputBlur && combobox.highlightedIndex >= 0 ? items[combobox.highlightedIndex] : changes.selectedItem;
-            if (!selectedItem || selectedItem.disabled) return;
-            if (changes.type !== _downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem.value === SHOW_ALL_ITEMS_ID) {
-              setShowAllItems(true);
-              combobox.openMenu();
-              combobox.setHighlightedIndex(maxItems);
-            } else if (multiple) {
-              multipleSelection.addSelectedItem(selectedItem);
-              setInternalInputValue("");
-              setShowAllItems(false);
-            } else {
-              multipleSelection.setSelectedItems([selectedItem]);
-              setInternalInputValue((0, _utils.optionToString)(selectedItem));
-              setShowAllItems(false);
-            }
-            break;
-          }
-        case _downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
-          {
-            if (!combobox.isOpen) {
-              setInternalInputValue("");
-              multipleSelection.setSelectedItems([]);
-            }
-            break;
-          }
-      }
-    },
-    isItemDisabled: function isItemDisabled(item) {
-      return Boolean(item.disabled);
-    }
-  });
-  var inputProps = combobox.getInputProps(_objectSpread({
-    "aria-label": ariaLabel,
-    "aria-describedby": descriptionId,
-    "aria-invalid": isInvalid,
-    required: required
-  }, multipleSelection.getDropdownProps({
-    ref: (0, _mergeRefs.mergeRefs)([inputRef, ref]),
-    autoFocus: autoFocus,
-    disabled: disabled,
-    // See https://github.com/downshift-js/downshift/issues/1108
-    // as to why we manage the input value ourselves completely
-    onChange: function onChange(evt) {
-      var _value, _menuPopper$update;
-      var newInputValue = (_value = evt.currentTarget.value) !== null && _value !== void 0 ? _value : "";
-      setInternalInputValue(newInputValue);
-      onTextChange === null || onTextChange === void 0 || onTextChange(newInputValue);
-      if (!multiple && value && !newInputValue) {
-        multipleSelection.setSelectedItems([]);
-      }
-      (_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 || _menuPopper$update.call(menuPopper);
-    },
-    // We need to make sure to define event handlers here so that they can be composed properly
-    onFocus: function onFocus(evt) {
-      var _menuPopper$update2;
-      _onFocus === null || _onFocus === void 0 || _onFocus(evt);
-      if (evt.defaultPrevented) return;
-      setInputFocused(true);
-      (_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 || _menuPopper$update2.call(menuPopper);
-    },
-    onBlur: function onBlur(evt) {
-      _onBlur === null || _onBlur === void 0 || _onBlur(evt);
-      setInputFocused(false);
-    },
-    onKeyDown: function onKeyDown(evt) {
-      if (combobox.isOpen && ["ArrowLeft", "ArrowRight"].includes(evt.key)) {
-        // @ts-expect-error
-        evt.nativeEvent.preventDownshiftDefault = true;
-      }
-      if (multiple && creatable && inputValue.trim().length > 0 && separatorKeys !== null && separatorKeys !== void 0 && separatorKeys.includes(evt.key)) {
-        evt.preventDefault();
-        var _createFromInputValue = createFromInputValue(options, inputValue),
-          _createFromInputValue2 = (0, _slicedToArray2["default"])(_createFromInputValue, 1),
-          newOption = _createFromInputValue2[0];
-        if (newOption && !newOption.disabled) {
-          multipleSelection.addSelectedItem(newOption);
-          setInternalInputValue("");
-        }
-      }
-    }
-  })));
-  (0, _react.useEffect)(function () {
-    if (!combobox.isOpen) return;
-    if (items.length === 0 && combobox.highlightedIndex >= 0) {
-      combobox.setHighlightedIndex(-1);
-    } else if (items.length > 0 && combobox.highlightedIndex < 0) {
-      combobox.setHighlightedIndex(0);
-    }
-  }, [combobox, items.length]);
-  var shouldRenderCustomTemplate = Boolean(!multiple && !inputFocused && value && renderValueTemplate);
-  var shouldShowDefaultEmptyState = emptyState === undefined && !!inputValue.length;
-  var shouldShowEmptyState = !!emptyState;
-  var hideMenu = !combobox.isOpen || items.length === 0 && !shouldShowEmptyState && !shouldShowDefaultEmptyState;
-  var OptionItem = optionItemComponent !== null && optionItemComponent !== void 0 ? optionItemComponent : _DefaultOptionItem.DefaultOptionItem;
-  (0, _react.useEffect)(function () {
-    updateRef(internalsRef, {
-      inputRef: inputRef,
-      inputValue: inputValue
-    });
-  }, [inputRef, internalsRef, inputValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoCompleteContext.AutoCompleteProvider, {
-    locale: locale,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), className),
-      ref: function ref(el) {
-        setContainerElement(el);
-        // @ts-expect-error
-        setContainerMeasureRef(el);
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-container"]))), variant === "large" && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-large py-1"]))), inputFocused && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-focused"]))), disabled && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-disabled"]))), isInvalid && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-invalid"]))), noWrap && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-nowrap"])))),
-        onClick: function onClick() {
-          var _inputRef$current;
-          return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-        },
-        children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-4 shrink-0"]))), (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
-          width: "1rem",
-          height: "1rem"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex items-center flex-1 max-h-full"]))), !noWrap && (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap overflow-y-scroll no-scrollbar"]))), multiple && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["-ml-1"]))), valuesClassName),
-          children: [multiple && selectedItems.map(function (option, index) {
-            return renderValueTemplate ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, multipleSelection.getSelectedItemProps({
-              selectedItem: option,
-              index: index
-            })), {}, {
-              children: renderValueTemplate({
-                option: option,
-                editable: !disabled
-              })
-            }), String(option.value)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, _objectSpread(_objectSpread({
-              onRemove: disabled ? undefined : function (evt) {
-                evt.stopPropagation();
-                multipleSelection.removeSelectedItem(option);
-              },
-              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["m-1 max-w-48 ", ""])), disabled && "opacity-50")
-            }, multipleSelection.getSelectedItemProps({
-              selectedItem: option,
-              index: index
-            })), {}, {
-              children: option.label
-            }), String(option.value));
-          }), shouldRenderCustomTemplate && renderValueTemplate({
-            option: value,
-            editable: !disabled
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
-            "data-lpignore": true
-          }, inputProps), {}, {
-            id: id !== null && id !== void 0 ? id : inputId,
-            name: name,
-            type: "text",
-            placeholder: hasValue ? "" : placeholder,
-            autoComplete: "off",
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-input py-1.5"]))), multiple && (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["ml-1"]))), shouldRenderCustomTemplate && hasValue && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["h-0 w-0 opacity-0"]))))
-          }))]
-        }), Boolean(showClearButton || endItem) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _clsx["default"])(showClearButton && endItem && (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["my-2 flex self-end space-x-4"])))),
-          children: [!!endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-grey-700 my-auto"]))),
-            children: endItem
-          }), showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            type: "button",
-            className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
-            onClick: function onClick() {
-              setInternalInputValue("");
-              multipleSelection.setSelectedItems([]);
-            },
-            "aria-label": locale.clearInputButton,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
-              size: ".75rem"
-            })
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
-      }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
-        element: menuRef.current,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, _objectSpread(_objectSpread({}, menuPopper.attributes), {}, {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
-          style: _objectSpread(_objectSpread(_objectSpread({}, menuPopper.styles.popper), hideMenu && {
-            display: "none"
-          }), {}, {
-            minWidth: containerWidth,
-            maxWidth: "42vw"
-          }),
-          ref: menuRef,
-          elevation: "300",
-          fullBleed: true,
-          children: [hideMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({}, combobox.getMenuProps())) : items.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, combobox.getMenuProps({
-            className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"])))
-          })), {}, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              role: "option",
-              "aria-disabled": "true",
-              "aria-selected": "false",
-              children: emptyState !== null && emptyState !== void 0 ? emptyState : /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoCompleteEmptyState.AutoCompleteEmptyState, {
-                title: locale.emptyStateTitle
-              })
-            })
-          })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator.ScrollIndicator, {
-            className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
-              children: items.map(function (item, index) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
-                  item: item,
-                  className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), item.disabled && (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))))
-                })), {}, {
-                  children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["w-full py-2 truncate text-center text-grey-900"]))),
-                    children: item.label
-                  }, item.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, {
-                    multiple: Boolean(multiple),
-                    inputValue: inputValue,
-                    highlighted: index === combobox.highlightedIndex,
-                    option: item
-                  })
-                }), String(item.value));
-              })
-            }))
-          }), !!menuFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
-            className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
-            children: menuFooter
-          })]
-        }))
-      }))]
-    })
-  });
-});
-AutoComplete.displayName = "AutoComplete";

package/dist/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -1,104 +0,0 @@
-"use strict";
-
-// @ts-check
-var plugin = require("tailwindcss/plugin");
-var disabledColor = require("../styles/disabledColor");
-var rgba = require("../styles/rgba");
-var autoCompletePlugin = plugin(function (_ref) {
-  var addComponents = _ref.addComponents,
-    theme = _ref.theme;
-  addComponents({
-    ".autocomplete-container": {
-      display: "flex",
-      alignItems: "center",
-      width: "100%",
-      minHeight: "2.5rem",
-      padding: "0 ".concat(theme("spacing.4")),
-      overflow: "hidden",
-      fontSize: theme("fontSize.base"),
-      lineHeight: theme("lineHeight.base"),
-      cursor: "text",
-      backgroundColor: theme("colors.white"),
-      borderRadius: theme("borderRadius.DEFAULT"),
-      border: "1px solid ".concat(theme("colors.grey.500")),
-      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
-      transition: "all 100ms ease-in-out",
-      outline: "1px solid transparent",
-      "&:not(.autocomplete-disabled, .autocomplete-focused):hover": {
-        borderColor: theme("colors.grey.600")
-      },
-      // Workaround for ie
-      "&::after": {
-        content: '" "',
-        display: "block",
-        minHeight: "30px",
-        // don't ask me why 30
-        fontSize: "0px"
-      },
-      "&.autocomplete-large": {
-        minHeight: "3rem",
-        "&::after": {
-          minHeight: "38px" // don't ask me why 38
-        }
-      }
-    },
-
-    ".autocomplete-focused, .autocomplete-container:focus-within": {
-      borderColor: theme("colors.accent.600"),
-      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
-    },
-    ".autocomplete-disabled": {
-      cursor: "not-allowed",
-      backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-      borderColor: disabledColor(theme("colors.grey.200")),
-      boxShadow: "none",
-      ".autocomplete-input, .autocomplete-input::placeholder": {
-        color: theme("colors.grey.300"),
-        pointerEvents: "none"
-      }
-    },
-    ".autocomplete-invalid:not(.autocomplete-disabled)": {
-      backgroundColor: theme("colors.red.100"),
-      borderColor: theme("colors.red.700"),
-      "&:hover": {
-        backgroundColor: theme("colors.red.50"),
-        borderColor: theme("colors.red.700")
-      },
-      "&.autocomplete-focused, &.autocomplete-container:focus-within": {
-        outlineColor: theme("colors.red.700")
-      }
-    },
-    ".autocomplete-nowrap": {
-      overflowX: "scroll",
-      WebkitOverflowScrolling: "touch",
-      // Remove scrollbars
-      scrollbarWidth: "none",
-      msOverflowStyle: "-ms-autohiding-scrollbar",
-      "&::-webkit-scrollbar": {
-        width: "0px",
-        height: "0px"
-      }
-    },
-    ".autocomplete-input": {
-      flex: "1",
-      backgroundColor: "transparent",
-      caretColor: theme("colors.grey.600"),
-      color: theme("colors.grey.900"),
-      minWidth: "10ch",
-      "&:focus": {
-        outline: "none"
-      },
-      "&::placeholder": {
-        color: theme("colors.grey.600")
-      }
-    },
-    ".autocomplete-result": {
-      // Search highlight
-      "&:not([disabled]) em": {
-        fontStyle: "normal",
-        background: theme("colors.accent.300")
-      }
-    }
-  });
-});
-module.exports = autoCompletePlugin;

package/dist/cjs/AutoComplete/components/AutoCompleteEmptyState.d.ts

@@ -1,12 +0,0 @@
-import type { ReactNode, VFC } from "react";
-import { type IconComponentType } from "../../Icons";
-import type { MedallionVariant } from "../../Medallion";
-export interface AutoCompleteEmptyStateProps {
-    icon?: IconComponentType;
-    variant?: MedallionVariant;
-    /** Descriptive title for state */
-    title: ReactNode;
-    /** Optional description to explain why the screen is empty or define next steps */
-    description?: ReactNode;
-}
-export declare const AutoCompleteEmptyState: VFC<AutoCompleteEmptyStateProps>;

package/dist/cjs/AutoComplete/components/AutoCompleteEmptyState.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AutoCompleteEmptyState = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _Icons = require("../../Icons");
-var _Medallion = require("../../Medallion");
-var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
-var AutoCompleteEmptyState = exports.AutoCompleteEmptyState = function AutoCompleteEmptyState(_ref) {
-  var _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? _Icons.XIcon : _ref$icon,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
-    title = _ref.title,
-    description = _ref.description;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-center p-6"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Medallion.Medallion, {
-      icon: icon,
-      variant: variant
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["font-semibold pt-4"]))),
-      children: title
-    }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption typo-subdued pt-4"]))),
-      children: description
-    })]
-  });
-};

package/dist/cjs/AutoComplete/components/DefaultOptionItem.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultOptionItem = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
-var _AutoCompleteContext = require("./AutoCompleteContext");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var metadataSpacer = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-  className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["px-1"]))),
-  children: "\xB7"
-});
-var DefaultOptionItem = exports.DefaultOptionItem = function DefaultOptionItem(_ref) {
-  var _locale$optionItemPre;
-  var option = _ref.option,
-    multiple = _ref.multiple,
-    localeProp = _ref.locale;
-  var contextLocale = (0, _AutoCompleteContext.useAutoCompleteLocale)();
-  var locale = _objectSpread(_objectSpread({}, contextLocale), localeProp);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate py-2"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["font-semibold text-md text-grey-900"]))),
-      children: option["new"] ? "".concat((_locale$optionItemPre = locale.optionItemPrefix) === null || _locale$optionItemPre === void 0 ? void 0 : _locale$optionItemPre.call(locale, multiple), " ").concat(option.label) : option.label
-    }), option.metadata && option.metadata.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex text-grey-600"]))),
-      children: option.metadata.map(function (metadata, idx) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          children: [metadata, idx !== option.metadata.length - 1 && metadataSpacer]
-        }, metadata);
-      })
-    })]
-  });
-};