@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/esm/AutoComplete/AutoComplete.js

@@ -0,0 +1,453 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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) { _defineProperty(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; }
+import cx from "clsx";
+import { useCombobox, useMultipleSelection } from "downshift";
+import { forwardRef } from "react";
+import { Fragment } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { usePopper } from "react-popper";
+import useMeasure from "react-use/lib/useMeasure";
+import usePrevious from "react-use/lib/usePrevious";
+import { Card } from "../Card";
+import { ClickAwayContainer } from "../ClickAwayContainer";
+import { useField } from "../Field";
+import { CheckIcon, XIcon } from "../Icons";
+import { useCreatePortal, useLocale } from "../Satellite";
+import { ScrollIndicator } from "../ScrollIndicator";
+import stl from "../styles/helpers/satellitePrefixer";
+import { Tag } from "../Tag";
+import { mergeRefs } from "../utils/mergeRefs";
+import { uniqBy } from "../utils/uniqBy";
+import { AutoCompleteProvider } from "./components/AutoCompleteContext";
+import { AutoCompleteEmptyState } from "./components/AutoCompleteEmptyState";
+import { DefaultOptionItem } from "./components/DefaultOptionItem";
+import { DEFAULT_AUTOCOMPLETE_LOCALE, defaultCreateFromInputValue, filter, optionToString } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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__*/_jsx(XIcon, {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/_jsx(CheckIcon, {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["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.
+ */
+export var AutoComplete = /*#__PURE__*/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 ? 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 = useCreatePortal();
+  var _useField = 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 : Fragment;
+  var localeContext = useLocale("autoComplete");
+  var locale = useMemo(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_AUTOCOMPLETE_LOCALE), localeContext), localeProp);
+  }, [localeContext, localeProp]);
+  var inputRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputFocused = _useState2[0],
+    setInputFocused = _useState2[1];
+  var _useState3 = useState(function () {
+      return (inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : multiple) ? "" : value ? optionToString(value) : "";
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalInputValue = _useState4[0],
+    setInternalInputValue = _useState4[1];
+  var previousValue = usePrevious(value);
+  useEffect(function () {
+    if (multiple || typeof inputValueProp !== "undefined") return;
+    if (!Array.isArray(previousValue) && optionToString(previousValue) === optionToString(value)) return;
+    setInternalInputValue(optionToString(value));
+  }, [multiple, inputValueProp, previousValue, value]);
+  var inputValue = inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : internalInputValue;
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    containerElement = _useState6[0],
+    setContainerElement = _useState6[1];
+  var _useMeasure = useMeasure(),
+    _useMeasure2 = _slicedToArray(_useMeasure, 2),
+    setContainerMeasureRef = _useMeasure2[0],
+    containerWidth = _useMeasure2[1].width;
+  var menuRef = useRef(null);
+  var menuPopper = usePopper(containerElement, menuRef.current, MENU_POPPER_OPTIONS);
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showAllItems = _useState8[0],
+    setShowAllItems = _useState8[1];
+  var selectedItems = useMemo(function () {
+    return !value ? [] : Array.isArray(value) ? value : [value];
+  }, [value]);
+  var items = useMemo(function () {
+    var results = filter(options !== null && options !== void 0 ? options : [], multiple ? selectedItems : [], inputValue);
+    var emptyInputValue = !inputValue || inputValue.trim().length === 0;
+    if (creatable && !emptyInputValue) {
+      results.unshift.apply(results, _toConsumableArray(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 = useMultipleSelection({
+    selectedItems: selectedItems,
+    onSelectedItemsChange: function onSelectedItemsChange(changes) {
+      if (typeof changes.selectedItems === "undefined") {
+        onChange(null);
+      } else if (multiple) {
+        onChange(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 = useCombobox({
+    inputId: id !== null && id !== void 0 ? id : inputId,
+    labelId: labelId !== null && labelId !== void 0 ? labelId : fieldLabelId,
+    items: items,
+    itemToString: 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(optionToString(selectedItem), selectedItem);
+    },
+    selectedItem: null,
+    inputValue: inputValue,
+    onStateChange: function onStateChange(changes) {
+      switch (changes.type) {
+        case useCombobox.stateChangeTypes.InputBlur:
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          {
+            var selectedItem = selectOnBlur && changes.type === useCombobox.stateChangeTypes.InputBlur && combobox.highlightedIndex >= 0 ? items[combobox.highlightedIndex] : changes.selectedItem;
+            if (!selectedItem || selectedItem.disabled) return;
+            if (changes.type !== 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(optionToString(selectedItem));
+              setShowAllItems(false);
+            }
+            break;
+          }
+        case 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: 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 = _slicedToArray(_createFromInputValue, 1),
+          newOption = _createFromInputValue2[0];
+        if (newOption && !newOption.disabled) {
+          multipleSelection.addSelectedItem(newOption);
+          setInternalInputValue("");
+        }
+      }
+    }
+  })));
+  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;
+  useEffect(function () {
+    updateRef(internalsRef, {
+      inputRef: inputRef,
+      inputValue: inputValue
+    });
+  }, [inputRef, internalsRef, inputValue]);
+  return /*#__PURE__*/_jsx(AutoCompleteProvider, {
+    locale: locale,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex"]))), className),
+      ref: function ref(el) {
+        setContainerElement(el);
+        // @ts-expect-error
+        setContainerMeasureRef(el);
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["autocomplete-container"]))), variant === "large" && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["autocomplete-large py-1"]))), inputFocused && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["autocomplete-focused"]))), disabled && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["autocomplete-disabled"]))), isInvalid && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["autocomplete-invalid"]))), noWrap && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["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__*/_jsx(Icon, {
+          className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-4 shrink-0"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
+          width: "1rem",
+          height: "1rem"
+        }), /*#__PURE__*/_jsxs("div", {
+          className: cx(stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex items-center flex-1 max-h-full"]))), !noWrap && stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex-wrap overflow-y-scroll no-scrollbar"]))), multiple && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["-ml-1"]))), valuesClassName),
+          children: [multiple && selectedItems.map(function (option, index) {
+            return renderValueTemplate ? /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, multipleSelection.getSelectedItemProps({
+              selectedItem: option,
+              index: index
+            })), {}, {
+              children: renderValueTemplate({
+                option: option,
+                editable: !disabled
+              })
+            }), String(option.value)) : /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({
+              onRemove: disabled ? undefined : function (evt) {
+                evt.stopPropagation();
+                multipleSelection.removeSelectedItem(option);
+              },
+              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["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__*/_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: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["autocomplete-input py-1.5"]))), multiple && stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["ml-1"]))), shouldRenderCustomTemplate && hasValue && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["h-0 w-0 opacity-0"]))))
+          }))]
+        }), Boolean(showClearButton || endItem) && /*#__PURE__*/_jsxs("div", {
+          className: cx(showClearButton && endItem && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
+          children: [!!endItem && /*#__PURE__*/_jsx("div", {
+            className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
+            children: endItem
+          }), showClearButton && /*#__PURE__*/_jsx("button", {
+            type: "button",
+            className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
+            onClick: function onClick() {
+              setInternalInputValue("");
+              multipleSelection.setSelectedItems([]);
+            },
+            "aria-label": locale.clearInputButton,
+            children: /*#__PURE__*/_jsx(XIcon, {
+              size: ".75rem"
+            })
+          })]
+        }), /*#__PURE__*/_jsx(StatusIcon, {})]
+      }), createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
+        element: menuRef.current,
+        children: /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({}, menuPopper.attributes), {}, {
+          className: cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["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__*/_jsx("div", _objectSpread({}, combobox.getMenuProps())) : items.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, combobox.getMenuProps({
+            className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["min-h-10"])))
+          })), {}, {
+            children: /*#__PURE__*/_jsx("div", {
+              role: "option",
+              "aria-disabled": "true",
+              "aria-selected": "false",
+              children: emptyState !== null && emptyState !== void 0 ? emptyState : /*#__PURE__*/_jsx(AutoCompleteEmptyState, {
+                title: locale.emptyStateTitle
+              })
+            })
+          })) : /*#__PURE__*/_jsx(ScrollIndicator, {
+            className: menuSize === "large" ? stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["max-h-64"]))),
+            children: /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
+              children: items.map(function (item, index) {
+                return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
+                  item: item,
+                  className: cx(stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
+                })), {}, {
+                  children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/_jsx("span", {
+                    className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
+                    children: item.label
+                  }, item.value) : /*#__PURE__*/_jsx(OptionItem, {
+                    multiple: Boolean(multiple),
+                    inputValue: inputValue,
+                    highlighted: index === combobox.highlightedIndex,
+                    option: item
+                  })
+                }), String(item.value));
+              })
+            }))
+          }), !!menuFooter && /*#__PURE__*/_jsx("footer", {
+            className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["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/esm/AutoComplete/AutoComplete.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = autoCompletePlugin;
+declare const autoCompletePlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/esm/AutoComplete/AutoComplete.tailwind.js

@@ -0,0 +1,105 @@
+import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
+var rgba = _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")
+      }
+    }
+  });
+});
+export default autoCompletePlugin;

package/dist/esm/AutoComplete/components/AutoCompleteContext.d.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren, VFC } from "react";
+import type { AutoCompleteLocale } from "../types";
+declare type AutoCompleteContextType = {
+    locale: Required<AutoCompleteLocale>;
+};
+declare type AutoCompleteProviderProps = PropsWithChildren<AutoCompleteContextType>;
+export declare const AutoCompleteProvider: VFC<AutoCompleteProviderProps>;
+export declare const useIsInsideAutoComplete: () => boolean;
+export declare const useAutoCompleteLocale: () => Required<AutoCompleteLocale>;
+export {};

package/dist/esm/AutoComplete/components/AutoCompleteContext.js

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+var AutoCompleteContext = /*#__PURE__*/createContext(null);
+export var AutoCompleteProvider = function AutoCompleteProvider(_ref) {
+  var locale = _ref.locale,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx(AutoCompleteContext.Provider, {
+    value: {
+      locale: locale
+    },
+    children: children
+  });
+};
+export var useIsInsideAutoComplete = function useIsInsideAutoComplete() {
+  return !!useContext(AutoCompleteContext);
+};
+export var useAutoCompleteLocale = function useAutoCompleteLocale() {
+  var context = useContext(AutoCompleteContext);
+  if (!context) {
+    throw new Error("useAutoCompleteLocale must be used inside AutoCompleteProvider");
+  }
+  return context.locale;
+};

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

@@ -0,0 +1,12 @@
+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/esm/AutoComplete/components/AutoCompleteEmptyState.js

@@ -0,0 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { XIcon } from "../../Icons";
+import { Medallion } from "../../Medallion";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var AutoCompleteEmptyState = function AutoCompleteEmptyState(_ref) {
+  var _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? XIcon : _ref$icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    title = _ref.title,
+    description = _ref.description;
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col items-center p-6"]))),
+    children: [/*#__PURE__*/_jsx(Medallion, {
+      icon: icon,
+      variant: variant
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["font-semibold pt-4"]))),
+      children: title
+    }), !!description && /*#__PURE__*/_jsx("p", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption typo-subdued pt-4"]))),
+      children: description
+    })]
+  });
+};

package/dist/esm/AutoComplete/components/DefaultOptionItem.d.ts

@@ -0,0 +1,6 @@
+import type { VFC } from "react";
+import type { AutoCompleteLocale, OptionItemProps } from "../types";
+export declare type DefaultOptionItemProps = OptionItemProps & {
+    locale?: AutoCompleteLocale;
+};
+export declare const DefaultOptionItem: VFC<DefaultOptionItemProps>;