@algolia/satellite 1.1.0 → 1.1.1

package/dist/cjs/Fields/AutoComplete/AutoComplete.js

@@ -0,0 +1,455 @@
+"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 _Helpers = require("../../Helpers");
+var _Icons = require("../../Icons");
+var _Indicators = require("../../Indicators");
+var _Layout = require("../../Layout");
+var _Satellite = require("../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _mergeRefs = require("../../utils/mergeRefs");
+var _uniqBy = require("../../utils/uniqBy");
+var _Field = require("../Field");
+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)(_Indicators.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)(_Helpers.ClickAwayContainer, {
+        element: menuRef.current,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.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)(_Indicators.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/Fields/AutoComplete/AutoComplete.tailwind.js

@@ -0,0 +1,104 @@
+"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/Fields/AutoComplete/components/AutoCompleteEmptyState.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, VFC } from "react";
+import type { MedallionVariant } from "../../../Helpers";
+import { type IconComponentType } from "../../../Icons";
+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/Fields/AutoComplete/components/AutoCompleteEmptyState.js

@@ -0,0 +1,34 @@
+"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 _Helpers = require("../../../Helpers");
+var _Icons = require("../../../Icons");
+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)(_Helpers.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/Fields/AutoComplete/components/DefaultOptionItem.js

@@ -0,0 +1,41 @@
+"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);
+      })
+    })]
+  });
+};