@algolia/satellite 1.0.0-beta.16 → 1.0.0-beta.160

package/esm/AutoComplete/AutoComplete.js

@@ -0,0 +1,585 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _excluded = ["optionItemPrefix"],
+  _excluded2 = ["ref"];
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+import cx from "clsx";
+import Downshift from "downshift";
+import { Component } from "react";
+import { createPortal } from "react-dom";
+import { X } from "react-feather";
+import { Popper } from "react-popper";
+import Button from "../Button";
+import Card from "../Card";
+import { ClickAwayContainer } from "../ClickAwayContainer";
+import { FieldStateContext } from "../Field/FieldStateContext";
+import { SatelliteContext } from "../Satellite";
+import ScrollIndicator from "../ScrollIndicator";
+import stl from "../styles/helpers/satellitePrefixer";
+import Tag from "../Tag";
+import uniqBy from "../utils/uniqBy";
+import AutoCompleteEmptyState from "./components/AutoCompleteEmptyState";
+import DefaultOptionItem from "./components/DefaultOptionItem";
+import { DEFAULT_AUTOCOMPLETE_LOCALE, defaultCreateFromInputValue, isAutoCompleteMultiProps } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function optionToString(option) {
+  return option ? option.label : "";
+}
+function makeNeedles(itemValue) {
+  return itemValue.toLowerCase().trim().split(/\s+/);
+}
+function needlesMatch(needles, option) {
+  var labels = (option.metadata || []).concat(option.label);
+  return needles.every(function (needle) {
+    return labels.some(function (label) {
+      return String(label || "").trim().toLowerCase().includes(needle);
+    });
+  });
+}
+function filter(options, selectedItems, itemValue) {
+  var needles = makeNeedles(itemValue);
+  var selectedValues = selectedItems.map(function (option) {
+    return option.value;
+  });
+  var results = [];
+  var _iterator = _createForOfIteratorHelper(options),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var option = _step.value;
+      if (selectedValues.includes(option.value)) {
+        continue;
+      } else if (option.bypassNeedleMatch || needlesMatch(needles, option)) {
+        results.push(option);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return results;
+}
+function inputValueFromProps(props) {
+  if (props.inputValue !== undefined) {
+    return props.inputValue;
+  }
+  return !isAutoCompleteMultiProps(props) && props.value ? optionToString(props.value) : "";
+}
+var MENU_POPPER_MODFIERS = [{
+  name: "offset",
+  options: {
+    offset: [0, 8]
+  }
+}];
+/** @ignore */
+var DefaultEmptyState = function DefaultEmptyState(_ref) {
+  var emptyStateTitle = _ref.emptyStateTitle;
+  return /*#__PURE__*/_jsx(AutoCompleteEmptyState, {
+    title: emptyStateTitle
+  });
+};
+var DefaultOption = function DefaultOption(_ref2) {
+  var optionItemPrefix = _ref2.optionItemPrefix,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/_jsx(DefaultOptionItem, _objectSpread(_objectSpread({}, props), {}, {
+    locale: {
+      optionItemPrefix: optionItemPrefix !== null && optionItemPrefix !== void 0 ? optionItemPrefix : DEFAULT_AUTOCOMPLETE_LOCALE.optionItemPrefix
+    }
+  }));
+};
+
+/**
+ * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
+ *
+ * Use this component when the user needs to search through a long list of results.
+ *
+ * ## Menu Size Variations
+ * - **Medium (default)**: the standard dropdown menu height for most use cases
+ * - **Large**: when numerous results should be displayed in the dropdown to ease selection
+ *
+ * ## Best practices
+ *
+ * - Provide an empty state if there is no result
+ * - Highlight letters in results matching the query
+ * - Provide matching results quickly
+ * - Style different data
+ */
+export var AutoComplete = /*#__PURE__*/function (_Component) {
+  _inherits(AutoComplete, _Component);
+  var _super = _createSuper(AutoComplete);
+  function AutoComplete() {
+    var _this;
+    _classCallCheck(this, AutoComplete);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      inputFocused: false,
+      inputValue: inputValueFromProps(_this.props),
+      showAllResults: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "inputContainerRef", null);
+    _defineProperty(_assertThisInitialized(_this), "inputRef", null);
+    _defineProperty(_assertThisInitialized(_this), "menuWrapperRef", null);
+    _defineProperty(_assertThisInitialized(_this), "handleClearClick", function () {
+      return _this.setState({
+        inputValue: ""
+      }, function () {
+        return _this.props.onChange(null);
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFakeInputClick", function () {
+      return _this.inputRef && _this.inputRef.focus();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleInputBlur", function (state) {
+      return function (evt) {
+        var _this$props = _this.props,
+          selectOnBlur = _this$props.selectOnBlur,
+          onBlur = _this$props.onBlur;
+        var inputValue = state.inputValue,
+          highlightedIndex = state.highlightedIndex,
+          selectItemAtIndex = state.selectItemAtIndex;
+        var newInputValue;
+        if (selectOnBlur && inputValue && highlightedIndex !== null) {
+          newInputValue = isAutoCompleteMultiProps(_this.props) ? "" : optionToString(_this.props.value);
+          selectItemAtIndex(highlightedIndex);
+        } else if (isAutoCompleteMultiProps(_this.props)) {
+          newInputValue = inputValue;
+        } else {
+          newInputValue = optionToString(_this.props.value);
+        }
+        if (onBlur) {
+          onBlur(evt);
+        }
+        _this.setState({
+          inputValue: newInputValue || "",
+          inputFocused: false,
+          showAllResults: false
+        });
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (evt) {
+      var inputValue = evt.target.value;
+      _this.setState({
+        inputValue: inputValue
+      });
+      if (_this.props.onTextChange) {
+        _this.props.onTextChange(inputValue);
+      }
+      if (!_this.props.multiple && _this.props.value && !inputValue) {
+        _this.props.onChange(null);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleInputContainerRefUpdate", function (el) {
+      _this.inputContainerRef = el;
+      if (el) {
+        _this.updateInputWidth();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateInputWidth", function () {
+      var _this$inputContainerR, _this$inputContainerR2;
+      var inputWidth = _this.state.inputWidth;
+      var newInputWidth = (_this$inputContainerR = (_this$inputContainerR2 = _this.inputContainerRef) === null || _this$inputContainerR2 === void 0 ? void 0 : _this$inputContainerR2.getBoundingClientRect().width) !== null && _this$inputContainerR !== void 0 ? _this$inputContainerR : inputWidth;
+      if (newInputWidth !== inputWidth) {
+        _this.setState({
+          inputWidth: newInputWidth
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (state) {
+      return function (evt) {
+        if (!isAutoCompleteMultiProps(_this.props)) return;
+        var _this$props2 = _this.props,
+          _this$props2$value = _this$props2.value,
+          value = _this$props2$value === void 0 ? [] : _this$props2$value,
+          _this$props2$separato = _this$props2.separatorKeys,
+          separatorKeys = _this$props2$separato === void 0 ? AutoComplete.defaultProps.separatorKeys : _this$props2$separato,
+          creatable = _this$props2.creatable,
+          _this$props2$createFr = _this$props2.createFromInputValue,
+          createFromInputValue = _this$props2$createFr === void 0 ? AutoComplete.defaultProps.createFromInputValue : _this$props2$createFr,
+          options = _this$props2.options,
+          onChange = _this$props2.onChange;
+        var inputValue = state.inputValue || "";
+        var canCreate = creatable && inputValue.trim().length > 0;
+        if (evt.key === "Backspace" && !inputValue.length) {
+          onChange(value.slice(0, -1));
+        } else if (canCreate && separatorKeys.includes(evt.key)) {
+          evt.preventDefault();
+          var _createFromInputValue = createFromInputValue(options, inputValue),
+            _createFromInputValue2 = _slicedToArray(_createFromInputValue, 1),
+            newOption = _createFromInputValue2[0];
+          if (newOption && !newOption.disabled) {
+            state.selectItem(newOption);
+          }
+        }
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (option) {
+      if (option.disabled) return;
+      option = option ? _objectSpread(_objectSpread({}, option), {}, {
+        "new": undefined
+      }) : option;
+      if (isAutoCompleteMultiProps(_this.props)) {
+        var arrayValue = Array.isArray(_this.props.value) ? _this.props.value : [];
+        var newValue = uniqBy([].concat(_toConsumableArray(arrayValue), [option]), function (o) {
+          return o.value;
+        });
+        _this.props.onChange(newValue);
+        _this.setState({
+          inputValue: "",
+          showAllResults: false
+        });
+      } else {
+        _this.props.onChange(option);
+        _this.setState({
+          inputValue: option ? option.label : "",
+          showAllResults: false
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleShowAllResults", function (evt) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      _this.setState({
+        showAllResults: true
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "removeValue", function (removedOption) {
+      if (!isAutoCompleteMultiProps(_this.props)) return;
+      var currentOptions = _this.props.value || [];
+      var newOptions = currentOptions.filter(function (option) {
+        return option.value !== removedOption.value;
+      });
+      _this.props.onChange(newOptions);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getA11yStatusMessage", function (options) {
+      if (!options.isOpen) {
+        return "";
+      }
+      if (!options.resultCount) {
+        return _this.locale.emptyStateTitle;
+      }
+      if (options.resultCount > 0) {
+        return _this.locale.itemsAvailable(options.resultCount);
+      }
+      return "";
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderInput", function (autocompleteHelpers, fieldState) {
+      var _this$props3 = _this.props,
+        id = _this$props3.id,
+        placeholder = _this$props3.placeholder,
+        name = _this$props3.name,
+        valuesClassName = _this$props3.valuesClassName,
+        disabled = _this$props3.disabled,
+        autoFocus = _this$props3.autoFocus,
+        clearable = _this$props3.clearable,
+        value = _this$props3.value,
+        multiple = _this$props3.multiple,
+        _this$props3$variant = _this$props3.variant,
+        variant = _this$props3$variant === void 0 ? "medium" : _this$props3$variant,
+        renderValueTemplate = _this$props3.renderValueTemplate,
+        Icon = _this$props3.icon,
+        _this$props3$noWrap = _this$props3.noWrap,
+        noWrap = _this$props3$noWrap === void 0 ? false : _this$props3$noWrap,
+        endItem = _this$props3.endItem,
+        _onFocus = _this$props3.onFocus;
+      var inputFocused = _this.state.inputFocused;
+      var getInputProps = autocompleteHelpers.getInputProps;
+      var hasValue = Boolean(value && (!Array.isArray(value) || value.length > 0));
+      var showClearButton = !disabled && clearable && hasValue;
+      var shouldRenderCustomTemplate = Boolean(!multiple && !inputFocused && value && renderValueTemplate);
+      var status = fieldState.status;
+      var inputContainerClassName = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      autocomplete-container\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      "])), variant === "large" && "autocomplete-large py-1", inputFocused && "autocomplete-focused", disabled && "autocomplete-disabled", status === "invalid" && "autocomplete-invalid", noWrap && "autocomplete-nowrap");
+      var inputClassName = stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      autocomplete-input py-1.5\n      ", "\n      ", "\n    "])), multiple && "ml-1", shouldRenderCustomTemplate && hasValue && "h-0 w-0 opacity-0");
+      var inputProps = getInputProps({
+        id: id,
+        name: name,
+        disabled: disabled,
+        className: inputClassName,
+        type: "text",
+        placeholder: hasValue ? undefined : placeholder,
+        ref: function ref(input) {
+          return _this.inputRef = input;
+        },
+        onChange: _this.handleInputChange,
+        onFocus: function onFocus(evt) {
+          _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(evt);
+          if (evt.defaultPrevented) {
+            return;
+          }
+          _this.setState({
+            inputFocused: true
+          });
+
+          // Doesn't work without the setTimeout :/
+          setTimeout(function () {
+            _this.updateInputWidth();
+            autocompleteHelpers.openMenu();
+          });
+        },
+        onBlur: _this.handleInputBlur(autocompleteHelpers),
+        onKeyDown: _this.handleKeyDown(autocompleteHelpers),
+        autoComplete: "off",
+        autoFocus: autoFocus
+      });
+      return /*#__PURE__*/_jsxs("div", {
+        className: inputContainerClassName,
+        onClick: _this.handleFakeInputClick,
+        ref: _this.handleInputContainerRefUpdate,
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 shrink-0 ", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500"),
+          size: "1rem"
+        }), /*#__PURE__*/_jsxs("div", {
+          className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex items-center flex-1 max-h-full ", " ", ""])), !noWrap && "flex-wrap overflow-y-scroll no-scrollbar", multiple && "-ml-1"), valuesClassName),
+          children: [multiple && Array.isArray(value) && value.map(function (option) {
+            return renderValueTemplate ? renderValueTemplate({
+              option: option,
+              key: String(option.value),
+              editable: !disabled
+            }) : /*#__PURE__*/_jsx(Tag, {
+              onRemove: disabled ? undefined : function () {
+                return _this.removeValue(option);
+              },
+              className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["m-1 max-w-48 ", ""])), disabled && "opacity-50"),
+              children: option.label
+            }, String(option.value));
+          }), shouldRenderCustomTemplate && renderValueTemplate({
+            option: value,
+            key: String(value),
+            editable: !disabled
+          }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+            "data-lpignore": true
+          }))]
+        }), (showClearButton || !!endItem) && /*#__PURE__*/_jsxs("div", {
+          className: cx(showClearButton && endItem && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
+          children: [!!endItem && /*#__PURE__*/_jsx("div", {
+            className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
+            children: endItem
+          }), showClearButton && /*#__PURE__*/_jsx("button", {
+            type: "button",
+            className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-6 flex items-center justify-center text-grey-500"]))),
+            onClick: _this.handleClearClick,
+            "aria-label": _this.locale.clearInputButton,
+            children: /*#__PURE__*/_jsx(X, {
+              size: ".75rem"
+            })
+          })]
+        })]
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderMenu", function (results, autocompleteHelpers) {
+      var _this$inputContainerR3;
+      var getItemProps = autocompleteHelpers.getItemProps,
+        getMenuProps = autocompleteHelpers.getMenuProps,
+        highlightedIndex = autocompleteHelpers.highlightedIndex,
+        inputValue = autocompleteHelpers.inputValue,
+        isOpen = autocompleteHelpers.isOpen;
+      var defaultEmptyState = /*#__PURE__*/_jsx(DefaultEmptyState, {
+        emptyStateTitle: _this.locale.emptyStateTitle
+      });
+      var _this$props4 = _this.props,
+        menuClassName = _this$props4.menuClassName,
+        menuSize = _this$props4.menuSize,
+        menuFooter = _this$props4.menuFooter,
+        _this$props4$emptySta = _this$props4.emptyState,
+        emptyState = _this$props4$emptySta === void 0 ? defaultEmptyState : _this$props4$emptySta,
+        _this$props4$maxResul = _this$props4.maxResults,
+        maxResults = _this$props4$maxResul === void 0 ? AutoComplete.defaultProps.maxResults : _this$props4$maxResul,
+        _this$props4$multiple = _this$props4.multiple,
+        multiple = _this$props4$multiple === void 0 ? AutoComplete.defaultProps.multiple : _this$props4$multiple,
+        _this$props4$optionIt = _this$props4.optionItemComponent,
+        OptionItem = _this$props4$optionIt === void 0 ? AutoComplete.defaultProps.optionItemComponent : _this$props4$optionIt;
+      var _this$state = _this.state,
+        inputWidth = _this$state.inputWidth,
+        showAllResults = _this$state.showAllResults;
+      var dropdownStyle = inputWidth ? {
+        minWidth: inputWidth,
+        maxWidth: "42vw"
+      } : undefined;
+      var optionItemProps = {
+        multiple: multiple,
+        inputValue: inputValue || ""
+      };
+      var extraResults = results.length - maxResults;
+      var shouldShowDefaultEmptyState = emptyState === defaultEmptyState && results.length === 0 && !!(inputValue !== null && inputValue !== void 0 && inputValue.length);
+      var shouldShowEmptyState = emptyState !== defaultEmptyState && !!emptyState && results.length === 0;
+      var showResults = results.length > 0;
+      if (!isOpen || !showResults && !shouldShowEmptyState && !shouldShowDefaultEmptyState) {
+        return /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+          className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["hidden h-0"])))
+        }));
+      }
+      return /*#__PURE__*/_jsx(Popper, {
+        placement: "bottom-start",
+        strategy: "fixed",
+        referenceElement: (_this$inputContainerR3 = _this.inputContainerRef) !== null && _this$inputContainerR3 !== void 0 ? _this$inputContainerR3 : undefined,
+        modifiers: MENU_POPPER_MODFIERS,
+        innerRef: function innerRef(wrapperEl) {
+          return _this.menuWrapperRef = wrapperEl;
+        },
+        children: function children(popper) {
+          var _getMenuProps = getMenuProps({
+              ref: popper.ref
+            }),
+            menuRef = _getMenuProps.ref,
+            menuProps = _objectWithoutProperties(_getMenuProps, _excluded2);
+          return /*#__PURE__*/_jsx(ClickAwayContainer, {
+            element: _this.menuWrapperRef,
+            children: /*#__PURE__*/_jsx("div", {
+              /**
+               * We put the `menuRef` on a different element than the menu props so that Downshift correctly includes
+               * the entire Popper element when identifying a click outside. We keep the rest of the`menuProps` on the
+               * `ul` itself for accessibility reasons (it needs to be the direct parent of menu item elements).
+               * While a bit hackish, we made sure that Downshift only uses the ref to compute click outside and not
+               * anything else:
+               * https://github.com/downshift-js/downshift/blob/3fb0ed21278c5f1d0a077ed9b1d0dfd55a75c71b/src/downshift.js#L951
+               */
+              ref: menuRef,
+              className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
+              style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
+              "data-popper-placement": popper.placement,
+              children: /*#__PURE__*/_jsxs(Card, {
+                fullBleed: true,
+                elevation: "300",
+                children: [results.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, menuProps), {}, {
+                  className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["min-h-10"]))),
+                  children: emptyState
+                })) : /*#__PURE__*/_jsx(ScrollIndicator, {
+                  className: menuSize === "large" ? stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["max-h-64"]))),
+                  children: /*#__PURE__*/_jsxs("ul", _objectSpread(_objectSpread({}, menuProps), {}, {
+                    children: [results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
+                      return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, getItemProps({
+                        item: result,
+                        disabled: result.disabled,
+                        className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n                            autocomplete-result\n                            flex items-center min-h-10 px-4 cursor-pointer\n                            ", "\n                            ", "\n                          "])), index === highlightedIndex && "bg-grey-100", result.disabled && "cursor-not-allowed")
+                      })), {}, {
+                        children: /*#__PURE__*/_jsx(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
+                          highlighted: index === highlightedIndex,
+                          option: result,
+                          optionItemPrefix: _this.locale.optionItemPrefix
+                        }))
+                      }), result.value);
+                    }), extraResults > 0 && !showAllResults && /*#__PURE__*/_jsx("li", {
+                      className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-2 text-right"]))),
+                      children: /*#__PURE__*/_jsx(Button, {
+                        variant: "subtle",
+                        size: "small",
+                        onMouseDown: _this.handleShowAllResults,
+                        children: _this.locale.showMoreButton(extraResults)
+                      })
+                    })]
+                  }))
+                }), !!menuFooter && /*#__PURE__*/_jsx("footer", {
+                  className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
+                  children: menuFooter
+                })]
+              })
+            })
+          });
+        }
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderSelect", function (autocompleteHelpers, fieldState) {
+      var _this$context$portalT;
+      var _this$props5 = _this.props,
+        className = _this$props5.className,
+        options = _this$props5.options,
+        value = _this$props5.value,
+        creatable = _this$props5.creatable,
+        _this$props5$createFr = _this$props5.createFromInputValue,
+        createFromInputValue = _this$props5$createFr === void 0 ? AutoComplete.defaultProps.createFromInputValue : _this$props5$createFr;
+      var inputValue = autocompleteHelpers.inputValue || "";
+      var results = options ? filter(options, Array.isArray(value) ? value : [], inputValue) : [];
+      var emptyInputValue = !inputValue || inputValue.trim().length === 0;
+      if (creatable && !emptyInputValue) {
+        results.unshift.apply(results, _toConsumableArray(createFromInputValue(options, inputValue)));
+      }
+      return /*#__PURE__*/_jsxs("div", {
+        className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex"]))), className),
+        children: [_this.renderInput(autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
+      });
+    });
+    return _this;
+  }
+  _createClass(AutoComplete, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // Only interested in updating inputValue from props for now
+      // (which should only happen when this.props.multiple === false)
+      if (this.props.multiple) return;
+      var prevPropsInputValue = inputValueFromProps(prevProps);
+      var propsInputValue = inputValueFromProps(this.props);
+      var shouldUpdateInputValueFromProps = prevPropsInputValue !== propsInputValue && this.state.inputValue !== propsInputValue;
+      if (shouldUpdateInputValueFromProps) {
+        this.setState({
+          inputValue: propsInputValue
+        });
+      }
+    }
+  }, {
+    key: "locale",
+    get: function get() {
+      return _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_AUTOCOMPLETE_LOCALE), this.context["locales"]), this.props.locale);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var inputValue = (this.props.inputValue !== undefined ? this.props.inputValue : this.state.inputValue) || "";
+      return /*#__PURE__*/_jsx(FieldStateContext.Consumer, {
+        children: function children(fieldState) {
+          return /*#__PURE__*/_jsx(Downshift, {
+            inputValue: inputValue
+            /*
+             * See https://github.com/algolia/AlgoliaWeb/issues/9045
+             * See multi-select example
+             * https://github.com/downshift-js/downshift#examples
+             * https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=/src/ordered-examples/04-multi-select.js&moduleview=1&file=/src/ordered-examples/04-multi-select.js:2482-2509
+             */,
+            selectedItem: null,
+            getA11yStatusMessage: _this2.getA11yStatusMessage,
+            onChange: _this2.handleChange,
+            itemToString: optionToString,
+            defaultHighlightedIndex: 0,
+            children: function children(autocompleteHelpers) {
+              return _this2.renderSelect(autocompleteHelpers, fieldState);
+            }
+          });
+        }
+      });
+    }
+  }]);
+  return AutoComplete;
+}(Component);
+_defineProperty(AutoComplete, "contextType", SatelliteContext);
+_defineProperty(AutoComplete, "defaultProps", {
+  clearable: false,
+  creatable: false,
+  multiple: false,
+  maxResults: 7,
+  createFromInputValue: defaultCreateFromInputValue,
+  options: [],
+  separatorKeys: [],
+  optionItemComponent: DefaultOption,
+  noWrap: false
+});
+export default AutoComplete;

package/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").Config> | undefined;
+};