@digigov/ui 2.0.0-cbc56209 → 2.0.0-d2ffc726

package/cjs/form/AutoComplete/index.js

@@ -1,666 +1,705 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AutoComplete = void 0;
-Object.defineProperty(exports, "AutoCompleteAssistiveHint", {
-  enumerable: true,
-  get: function get() {
-    return _AutoCompleteAssistiveHint["default"];
-  }
-});
-Object.defineProperty(exports, "AutoCompleteInput", {
-  enumerable: true,
-  get: function get() {
-    return _AutoCompleteInput["default"];
-  }
-});
-Object.defineProperty(exports, "AutoCompleteInputTypeahead", {
-  enumerable: true,
-  get: function get() {
-    return _AutoCompleteInputTypeahead["default"];
-  }
-});
-Object.defineProperty(exports, "AutoCompleteResultList", {
-  enumerable: true,
-  get: function get() {
-    return _AutoCompleteResultList["default"];
-  }
-});
-Object.defineProperty(exports, "AutoCompleteResultListItem", {
-  enumerable: true,
-  get: function get() {
-    return _AutoCompleteResultListItem["default"];
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AutoComplete_exports = {};
+__export(AutoComplete_exports, {
+  AutoComplete: () => AutoComplete,
+  AutoCompleteAssistiveHint: () => import_AutoCompleteAssistiveHint.AutoCompleteAssistiveHint,
+  AutoCompleteContainer: () => import_AutoCompleteContainer.AutoCompleteContainer,
+  AutoCompleteInputBase: () => import_AutoCompleteInputBase.AutoCompleteInputBase,
+  AutoCompleteMultipleInput: () => import_AutoCompleteMultipleInput.AutoCompleteMultipleInput,
+  AutoCompleteMultipleInputContainer: () => import_AutoCompleteMultipleInputContainer.AutoCompleteMultipleInputContainer,
+  AutoCompleteResultList: () => import_AutoCompleteResultList.AutoCompleteResultList,
+  AutoCompleteResultListItem: () => import_AutoCompleteResultListItem.AutoCompleteResultListItem,
+  default: () => AutoComplete
 });
-Object.defineProperty(exports, "AutoCompleteWrapper", {
-  enumerable: true,
-  get: function get() {
-    return _AutoCompleteWrapper["default"];
-  }
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = _interopRequireWildcard(require("react"));
-var _AutoCompleteAssistiveHint = _interopRequireDefault(require("@digigov/react-core/cjs/AutoCompleteAssistiveHint"));
-var _AutoCompleteInput = _interopRequireDefault(require("@digigov/react-core/cjs/AutoCompleteInput"));
-var _AutoCompleteInputTypeahead = _interopRequireDefault(require("@digigov/react-core/cjs/AutoCompleteInputTypeahead"));
-var _AutoCompleteResultList = _interopRequireDefault(require("@digigov/react-core/cjs/AutoCompleteResultList"));
-var _AutoCompleteResultListItem = _interopRequireDefault(require("@digigov/react-core/cjs/AutoCompleteResultListItem"));
-var _AutoCompleteWrapper = _interopRequireDefault(require("@digigov/react-core/cjs/AutoCompleteWrapper"));
-var _CaretIcon = require("@digigov/react-icons/cjs/CaretIcon");
-var _Status = _interopRequireDefault(require("@digigov/ui/form/AutoComplete/Status"));
-var _utils = require("@digigov/ui/form/AutoComplete/utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var AutoComplete = exports.AutoComplete = exports["default"] = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(AutoComplete, _Component);
-  function AutoComplete(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, AutoComplete);
-    _this = _callSuper(this, AutoComplete, [props]);
-    _this.elementReferences = {};
-    _this.$pollInput = void 0;
-    _this.state = {
+module.exports = __toCommonJS(AutoComplete_exports);
+var import_react = __toESM(require("react"));
+var import_AutoCompleteAssistiveHint = require("@digigov/react-core/AutoCompleteAssistiveHint");
+var import_AutoCompleteContainer = require("@digigov/react-core/AutoCompleteContainer");
+var import_AutoCompleteInputBase = require("@digigov/react-core/AutoCompleteInputBase");
+var import_AutoCompleteMultipleInput = require("@digigov/react-core/AutoCompleteMultipleInput");
+var import_AutoCompleteMultipleInputContainer = require("@digigov/react-core/AutoCompleteMultipleInputContainer");
+var import_AutoCompleteResultList = require("@digigov/react-core/AutoCompleteResultList");
+var import_AutoCompleteResultListItem = require("@digigov/react-core/AutoCompleteResultListItem");
+var import_Base = require("@digigov/react-core/Base");
+var import_CaretIcon = require("@digigov/react-icons/CaretIcon");
+var import_Chip = require("@digigov/ui/content/Chip");
+var import_Status = __toESM(require("@digigov/ui/form/AutoComplete/Status"));
+var import_utils = require("@digigov/ui/form/AutoComplete/utils");
+var import_Button = __toESM(require("@digigov/ui/form/Button"));
+var import_Checkbox = __toESM(require("@digigov/ui/form/Checkbox"));
+var import_NormalText = require("@digigov/ui/typography/NormalText");
+class AutoComplete extends import_react.Component {
+  constructor(props) {
+    super(props);
+    this.elementReferences = {};
+    const customState = {};
+    if (Array.isArray(props.defaultValue)) {
+      customState.selectedValues = props.defaultValue;
+    } else if (props.defaultValue) {
+      customState.selectedValues = [props.defaultValue];
+    }
+    this.state = {
       focused: null,
       hovered: null,
       menuOpen: false,
-      options: props.defaultValue ? [props.defaultValue] : [],
-      query: props.defaultValue,
+      options: [],
+      query: this.props.multiple ? "" : props.defaultValue || "",
+      selectedValues: [],
       validChoiceMade: false,
       selected: null,
-      ariaHint: true
+      ariaHint: true,
+      ...customState
     };
-    _this.handleComponentBlur = _this.handleComponentBlur.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleUpArrow = _this.handleUpArrow.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleDownArrow = _this.handleDownArrow.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleEnter = _this.handleEnter.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handlePrintableKey = _this.handlePrintableKey.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleListMouseLeave = _this.handleListMouseLeave.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleOptionBlur = _this.handleOptionBlur.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleOptionClick = _this.handleOptionClick.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleOptionFocus = _this.handleOptionFocus.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleOptionMouseDown = _this.handleOptionMouseDown.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleOptionMouseEnter = _this.handleOptionMouseEnter.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleInputBlur = _this.handleInputBlur.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleInputChange = _this.handleInputChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleInputFocus = _this.handleInputFocus.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.pollInputElement = _this.pollInputElement.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.getDirectInputChanges = _this.getDirectInputChanges.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
-  }
-  (0, _createClass2["default"])(AutoComplete, [{
-    key: "isQueryAnOption",
-    value: function isQueryAnOption(query, options) {
-      var _this2 = this;
-      return options.map(function (entry) {
-        return _this2.templateInputValue(entry).toLowerCase();
-      }).indexOf(query.toLowerCase()) !== -1;
+    this.handleComponentBlur = this.handleComponentBlur.bind(this);
+    this.handleAutoCompleteBlur = this.handleAutoCompleteBlur.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleUpArrow = this.handleUpArrow.bind(this);
+    this.handleDownArrow = this.handleDownArrow.bind(this);
+    this.handleEnter = this.handleEnter.bind(this);
+    this.handlePrintableKey = this.handlePrintableKey.bind(this);
+    this.handleListMouseLeave = this.handleListMouseLeave.bind(this);
+    if (this.props.multiple) {
+      this.handleOptionClick = this.handleOptionClickMultiple.bind(this);
+    } else {
+      this.handleOptionClick = this.handleOptionClick.bind(this);
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.pollInputElement();
+    this.handleOptionFocus = this.handleOptionFocus.bind(this);
+    this.handleOptionMouseDown = this.handleOptionMouseDown.bind(this);
+    this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleInputFocus = this.handleInputFocus.bind(this);
+    this.getDirectInputChanges = this.getDirectInputChanges.bind(this);
+  }
+  static {
+    this.defaultProps = {
+      width: "full",
+      autoselect: false,
+      minLength: 0,
+      name: "ds-input-autocomplete",
+      placeholder: "",
+      hint: false,
+      onConfirm: () => {
+        return;
+      },
+      confirmOnBlur: false,
+      required: false,
+      tNoResults: () => "No results found",
+      tAssistiveHint: () => "When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures."
+    };
+  }
+  isQueryAnOption(query, options) {
+    return options.map((entry) => this.templateInputValue(entry).toLowerCase()).indexOf(query.toLowerCase()) !== -1;
+  }
+  componentDidMount() {
+    this.getDirectInputChanges();
+  }
+  getDirectInputChanges() {
+    const inputReference = this.elementReferences[-1];
+    const queryHasChanged = inputReference && inputReference.value !== (this.state.query ?? "");
+    if (queryHasChanged) {
+      this.handleInputChange({ target: { value: inputReference.value } });
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      clearTimeout(this.$pollInput);
+  }
+  componentDidUpdate(_, prevState) {
+    const { focused } = this.state;
+    const componentLostFocus = focused === null;
+    const focusedChanged = prevState.focused !== focused;
+    const focusDifferentElement = focusedChanged && !componentLostFocus;
+    if (focusDifferentElement) {
+      this.elementReferences[focused].focus();
     }
-
-    // Applications like Dragon NaturallySpeaking will modify the
-    // `input` field by directly changing its `.value`. These events
-    // don't trigger our JavaScript event listeners, so we need to poll
-    // to handle when and if they occur.
-  }, {
-    key: "pollInputElement",
-    value: function pollInputElement() {
-      var _this3 = this;
-      this.getDirectInputChanges();
-      this.$pollInput = setTimeout(function () {
-        _this3.pollInputElement();
-      }, 100);
+    const focusedInput = focused === -1;
+    const componentGainedFocus = focusedChanged && prevState.focused === null;
+    const selectAllText = focusedInput && componentGainedFocus;
+    if (selectAllText) {
+      const inputElement = this.elementReferences[focused];
+      inputElement.setSelectionRange(0, inputElement.value.length);
     }
-  }, {
-    key: "getDirectInputChanges",
-    value: function getDirectInputChanges() {
-      var inputReference = this.elementReferences[-1];
-      var queryHasChanged = inputReference && inputReference.value !== this.state.query;
-      if (queryHasChanged) {
-        this.handleInputChange({
-          target: {
-            value: inputReference.value
-          }
-        });
-      }
+  }
+  hasAutoselect() {
+    return (0, import_utils.isIosDevice)() ? false : this.props.autoselect;
+  }
+  // This template is used when converting from a state.options object into a state.query.
+  templateInputValue(value) {
+    const inputValueTemplate = this.props.templates && this.props.templates.inputValue;
+    return inputValueTemplate ? inputValueTemplate(value) : value;
+  }
+  // This template is used when displaying results / suggestions.
+  templateSuggestion(value) {
+    const suggestionTemplate = this.props.templates && this.props.templates.suggestion;
+    return suggestionTemplate ? suggestionTemplate(value, this.state.query) : value;
+  }
+  handleComponentBlur(newState) {
+    const { options, query, selected } = this.state;
+    const { confirmOnBlur, autoselect, onConfirm } = this.props;
+    let newQuery = query;
+    if (confirmOnBlur || autoselect) {
+      newQuery = newState?.query ?? query;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
-      var focused = this.state.focused;
-      var componentLostFocus = focused === null;
-      var focusedChanged = prevState.focused !== focused;
-      var focusDifferentElement = focusedChanged && !componentLostFocus;
-      if (focusDifferentElement) {
-        this.elementReferences[focused].focus();
-      }
-      var focusedInput = focused === -1;
-      var componentGainedFocus = focusedChanged && prevState.focused === null;
-      var selectAllText = focusedInput && componentGainedFocus;
-      if (selectAllText) {
-        var inputElement = this.elementReferences[focused];
-        inputElement.setSelectionRange(0, inputElement.value.length);
-      }
+    if (confirmOnBlur) {
+      onConfirm?.(options[selected]);
     }
-  }, {
-    key: "hasAutoselect",
-    value: function hasAutoselect() {
-      return (0, _utils.isIosDevice)() ? false : this.props.autoselect;
+    this.setState({
+      focused: null,
+      menuOpen: newState?.menuOpen || false,
+      query: newQuery,
+      selected: null,
+      validChoiceMade: this.isQueryAnOption(newQuery, options)
+    });
+  }
+  handleListMouseLeave() {
+    this.setState({
+      hovered: null
+    });
+  }
+  handleAutoCompleteBlur(event, index) {
+    const { autoselect } = this.props;
+    const { focused, options, query, selected } = this.state;
+    let focusingOutsideComponent = false;
+    if (event.relatedTarget === null) {
+      focusingOutsideComponent = true;
+    } else {
+      focusingOutsideComponent = this.elementReferences["button-arrow"] !== event.relatedTarget;
     }
-
-    // This template is used when converting from a state.options object into a state.query.
-  }, {
-    key: "templateInputValue",
-    value: function templateInputValue(value) {
-      var inputValueTemplate = this.props.templates && this.props.templates.inputValue;
-      return inputValueTemplate ? inputValueTemplate(value) : value;
+    const focusingInput = event.relatedTarget === this.elementReferences[-1];
+    const focusingButtonArrow = this.elementReferences["button-arrow"] === event.relatedTarget || false;
+    let focusingAnotherOption = focused !== null && focused !== -1;
+    if (index !== void 0) {
+      focusingAnotherOption = focused !== index && focused !== -1;
     }
-
-    // This template is used when displaying results / suggestions.
-  }, {
-    key: "templateSuggestion",
-    value: function templateSuggestion(value) {
-      var suggestionTemplate = this.props.templates && this.props.templates.suggestion;
-      return suggestionTemplate ? suggestionTemplate(value) : value;
+    const blurComponent = focusingOutsideComponent && !(focusingAnotherOption || focusingInput || focusingButtonArrow);
+    if (blurComponent && !autoselect) {
+      const newQuery = (0, import_utils.isIosDevice)() ? query : this.templateInputValue(options[selected]);
+      this.handleComponentBlur({
+        menuOpen: false,
+        query: newQuery
+      });
     }
-  }, {
-    key: "handleComponentBlur",
-    value: function handleComponentBlur(newState) {
-      var _this$state = this.state,
-        options = _this$state.options,
-        query = _this$state.query,
-        selected = _this$state.selected;
-      var newQuery;
-      if (this.props.confirmOnBlur) {
-        var _this$props$onConfirm, _this$props;
-        newQuery = newState.query || query;
-        (_this$props$onConfirm = (_this$props = this.props).onConfirm) === null || _this$props$onConfirm === void 0 ? void 0 : _this$props$onConfirm.call(_this$props, options[selected]);
-      } else {
-        newQuery = query;
-      }
-      this.setState({
-        focused: null,
-        menuOpen: newState.menuOpen || false,
-        query: newQuery,
-        selected: null,
-        validChoiceMade: this.isQueryAnOption(newQuery, options)
+    if (blurComponent && autoselect) {
+      const selectedOption = this.templateInputValue(
+        options[selected]
+      );
+      const newQuery = (0, import_utils.isIosDevice)() ? query : selectedOption?.toLowerCase().includes(query.toLowerCase()) ? selectedOption : query;
+      this.handleComponentBlur({
+        menuOpen: false,
+        query: newQuery
       });
     }
-  }, {
-    key: "handleListMouseLeave",
-    value: function handleListMouseLeave() {
+  }
+  handleInputChange(event) {
+    const { source, minLength } = this.props;
+    const query = event.target.value;
+    const queryEmpty = query.length === 0;
+    this.setState({
+      query,
+      ariaHint: queryEmpty
+    });
+    const minLengthQuery = minLength != void 0 && minLength > query.length ? "" : query;
+    source(minLengthQuery, (options) => {
+      const optionsAvailable = options.length > 0;
       this.setState({
-        hovered: null
+        menuOpen: optionsAvailable,
+        options,
+        selected: -1,
+        validChoiceMade: false
       });
-    }
-  }, {
-    key: "handleOptionBlur",
-    value: function handleOptionBlur(event, index) {
-      var _this$state2 = this.state,
-        focused = _this$state2.focused,
-        menuOpen = _this$state2.menuOpen,
-        options = _this$state2.options,
-        selected = _this$state2.selected;
-      var focusingOutsideComponent = event.relatedTarget === null;
-      var focusingInput = event.relatedTarget === this.elementReferences[-1];
-      var focusingAnotherOption = focused !== index && focused !== -1;
-      var blurComponent = !focusingAnotherOption && focusingOutsideComponent || !(focusingAnotherOption || focusingInput);
-      if (blurComponent) {
-        var keepMenuOpen = menuOpen && (0, _utils.isIosDevice)();
-        this.handleComponentBlur({
-          menuOpen: keepMenuOpen,
-          query: this.templateInputValue(options[selected])
-        });
-      }
-    }
-  }, {
-    key: "handleInputBlur",
-    value: function handleInputBlur() {
-      var _this$state3 = this.state,
-        focused = _this$state3.focused,
-        menuOpen = _this$state3.menuOpen,
-        options = _this$state3.options,
-        query = _this$state3.query,
-        selected = _this$state3.selected;
-      var focusingAnOption = focused !== -1;
-      if (!focusingAnOption) {
-        var keepMenuOpen = menuOpen && (0, _utils.isIosDevice)();
-        var newQuery = (0, _utils.isIosDevice)() ? query : this.templateInputValue(options[selected]);
-        this.handleComponentBlur({
-          menuOpen: keepMenuOpen,
-          query: newQuery
+    });
+  }
+  handleInputClick(event) {
+    this.handleInputChange(event);
+  }
+  handleInputFocus() {
+    const { source } = this.props;
+    const { query, validChoiceMade, options } = this.state;
+    const { minLength } = this.props;
+    const shouldReopenMenu = !validChoiceMade && query.length >= minLength && options.length > 0;
+    if (shouldReopenMenu) {
+      this.setState(({ menuOpen }) => ({
+        focused: -1,
+        menuOpen: shouldReopenMenu || menuOpen,
+        selected: -1
+      }));
+    } else {
+      source(query, (options2) => {
+        this.setState({
+          focused: -1,
+          options: options2
         });
-      }
+      });
     }
-  }, {
-    key: "handleInputChange",
-    value: function handleInputChange(event) {
-      var _this4 = this;
-      var _this$props2 = this.props,
-        minLength = _this$props2.minLength,
-        source = _this$props2.source,
-        showAllValues = _this$props2.showAllValues;
-      var autoselect = this.hasAutoselect();
-      var query = event.target.value;
-      var queryEmpty = query.length === 0;
-      var queryChanged = this.state.query.length !== query.length;
-      var queryLongEnough = query.length >= minLength;
+  }
+  handleOptionFocus(index) {
+    this.setState({
+      focused: index,
+      hovered: null,
+      selected: index
+    });
+  }
+  handleOptionMouseEnter(index) {
+    if (!(0, import_utils.isIosDevice)()) {
       this.setState({
-        query: query,
-        ariaHint: queryEmpty
+        hovered: index
       });
-      var searchForOptions = showAllValues || !queryEmpty && queryChanged && queryLongEnough;
-      if (searchForOptions) {
-        source(query, function (options) {
-          var optionsAvailable = options.length > 0;
-          _this4.setState({
-            menuOpen: optionsAvailable,
-            options: options,
-            selected: autoselect && optionsAvailable ? 0 : -1,
-            validChoiceMade: false
-          });
-        });
-      } else if (queryEmpty || !queryLongEnough) {
-        this.setState({
-          menuOpen: false,
-          options: []
-        });
-      }
     }
-  }, {
-    key: "handleInputClick",
-    value: function handleInputClick(event) {
-      this.handleInputChange(event);
+    this.handleOptionFocus(index);
+  }
+  handleOptionClickMultiple(index) {
+    const selectedOption = this.state.options[index];
+    let selectedValues = this.state.selectedValues;
+    if (this.state.selectedValues.indexOf(selectedOption) === -1) {
+      selectedValues = selectedValues.concat([selectedOption]);
+    } else {
+      selectedValues.splice(
+        this.state.selectedValues.indexOf(selectedOption),
+        1
+      );
     }
-  }, {
-    key: "handleInputFocus",
-    value: function handleInputFocus() {
-      var _this$state4 = this.state,
-        query = _this$state4.query,
-        validChoiceMade = _this$state4.validChoiceMade,
-        options = _this$state4.options;
-      var minLength = this.props.minLength;
-      var shouldReopenMenu = !validChoiceMade && query.length >= minLength && options.length > 0;
-      if (shouldReopenMenu) {
-        this.setState(function (_ref) {
-          var menuOpen = _ref.menuOpen;
-          return {
-            focused: -1,
-            menuOpen: shouldReopenMenu || menuOpen,
-            selected: -1
-          };
-        });
-      } else {
+    this.props.onConfirm?.(selectedValues);
+    this.setState({
+      focused: index,
+      hovered: null,
+      menuOpen: true,
+      query: "",
+      selectedValues,
+      selected: index,
+      validChoiceMade: true
+    });
+    this.forceUpdate();
+  }
+  handleOptionClick(index) {
+    const selectedOption = this.state.options[index];
+    const newQuery = this.templateInputValue(selectedOption);
+    this.props.onConfirm?.(selectedOption);
+    const selectedValues = this.props.multiple ? this.state.selectedValues.concat(selectedOption) : [selectedOption];
+    this.setState({
+      focused: -1,
+      hovered: null,
+      menuOpen: false,
+      query: newQuery,
+      selectedValues,
+      selected: -1,
+      validChoiceMade: true
+    });
+    this.forceUpdate();
+  }
+  handleOptionMouseDown(event) {
+    event.preventDefault();
+  }
+  handleUpArrow(event) {
+    event.preventDefault();
+    const { menuOpen, selected } = this.state;
+    const isNotAtTop = selected !== -1;
+    const allowMoveUp = isNotAtTop && menuOpen;
+    if (allowMoveUp) {
+      this.handleOptionFocus(selected - 1);
+    }
+  }
+  handleDownArrow(event) {
+    event.preventDefault();
+    if (this.state.menuOpen === false) {
+      event.preventDefault();
+      this.props.source("", (options) => {
         this.setState({
-          focused: -1
+          menuOpen: true,
+          options,
+          selected: 0,
+          focused: 0,
+          hovered: null
         });
-      }
-    }
-  }, {
-    key: "handleOptionFocus",
-    value: function handleOptionFocus(index) {
-      this.setState({
-        focused: index,
-        hovered: null,
-        selected: index
       });
+    } else if (this.state.menuOpen === true) {
+      const { menuOpen, options, selected } = this.state;
+      const isNotAtBottom = selected !== options.length - 1;
+      const allowMoveDown = isNotAtBottom && menuOpen;
+      if (allowMoveDown) {
+        this.handleOptionFocus(selected + 1);
+      }
     }
-  }, {
-    key: "handleOptionMouseEnter",
-    value: function handleOptionMouseEnter(index) {
-      // iOS Safari prevents click event if mouseenter adds hover background colour
-      // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4
-      if (!(0, _utils.isIosDevice)()) {
+  }
+  handleSpace(event) {
+    if (this.state.menuOpen === false && this.state.query === "") {
+      event.preventDefault();
+      this.props.source("", (options) => {
         this.setState({
-          hovered: index
+          menuOpen: true,
+          options
         });
-      }
-    }
-  }, {
-    key: "handleOptionClick",
-    value: function handleOptionClick(index) {
-      var _this$props$onConfirm2, _this$props3;
-      var selectedOption = this.state.options[index];
-      var newQuery = this.templateInputValue(selectedOption);
-      (_this$props$onConfirm2 = (_this$props3 = this.props).onConfirm) === null || _this$props$onConfirm2 === void 0 ? void 0 : _this$props$onConfirm2.call(_this$props3, selectedOption);
-      this.setState({
-        focused: -1,
-        hovered: null,
-        menuOpen: false,
-        query: newQuery,
-        selected: -1,
-        validChoiceMade: true
       });
-      this.forceUpdate();
     }
-  }, {
-    key: "handleOptionMouseDown",
-    value: function handleOptionMouseDown(event) {
-      // Safari triggers focusOut before click, but if you
-      // preventDefault on mouseDown, you can stop that from happening.
-      // If this is removed, clicking on an option in Safari will trigger
-      // `handleOptionBlur`, which closes the menu, and the click will
-      // trigger on the element underneath instead.
-      // See: http://stackoverflow.com/questions/7621711/how-to-prevent-blur-running-when-clicking-a-link-in-jquery
+    const focusIsOnOption = this.state.focused !== -1;
+    if (focusIsOnOption) {
       event.preventDefault();
+      this.handleOptionClick(this.state.focused);
     }
-  }, {
-    key: "handleUpArrow",
-    value: function handleUpArrow(event) {
-      event.preventDefault();
-      var _this$state5 = this.state,
-        menuOpen = _this$state5.menuOpen,
-        selected = _this$state5.selected;
-      var isNotAtTop = selected !== -1;
-      var allowMoveUp = isNotAtTop && menuOpen;
-      if (allowMoveUp) {
-        this.handleOptionFocus(selected - 1);
-      }
-    }
-  }, {
-    key: "handleDownArrow",
-    value: function handleDownArrow(event) {
-      var _this5 = this;
+  }
+  handleEnter(event) {
+    if (this.state.menuOpen) {
       event.preventDefault();
-      // if not open, open
-      if (this.props.showAllValues && this.state.menuOpen === false) {
-        event.preventDefault();
-        this.props.source('', function (options) {
-          _this5.setState({
-            menuOpen: true,
-            options: options,
-            selected: 0,
-            focused: 0,
-            hovered: null
+      const hasSelectedOption = this.state.selected >= 0;
+      if (hasSelectedOption) {
+        this.handleOptionClick(this.state.selected);
+        if (this.props.multiple) {
+          this.setState({
+            menuOpen: false,
+            focused: -1
           });
-        });
-      } else if (this.state.menuOpen === true) {
-        var _this$state6 = this.state,
-          menuOpen = _this$state6.menuOpen,
-          _options = _this$state6.options,
-          selected = _this$state6.selected;
-        var isNotAtBottom = selected !== _options.length - 1;
-        var allowMoveDown = isNotAtBottom && menuOpen;
-        if (allowMoveDown) {
-          this.handleOptionFocus(selected + 1);
         }
       }
     }
-  }, {
-    key: "handleSpace",
-    value: function handleSpace(event) {
-      var _this6 = this;
-      // if not open, open
-      if (this.props.showAllValues && this.state.menuOpen === false && this.state.query === '') {
-        event.preventDefault();
-        this.props.source('', function (options) {
-          _this6.setState({
-            menuOpen: true,
-            options: options
-          });
+  }
+  handlePrintableKey(event) {
+    const inputElement = this.elementReferences[-1];
+    const eventIsOnInput = event.target === inputElement;
+    if (!eventIsOnInput) {
+      inputElement.focus();
+    }
+  }
+  handleKeyDown(event) {
+    switch (import_utils.keyCodes[event.keyCode]) {
+      case "up":
+        this.handleUpArrow(event);
+        break;
+      case "down":
+        this.handleDownArrow(event);
+        break;
+      case "space":
+        this.handleSpace(event);
+        break;
+      case "enter":
+        this.handleEnter(event);
+        break;
+      case "escape": {
+        this.handleComponentBlur({
+          query: this.state.query,
+          menuOpen: false
         });
+        break;
       }
-      var focusIsOnOption = this.state.focused !== -1;
-      if (focusIsOnOption) {
-        event.preventDefault();
-        this.handleOptionClick(this.state.focused);
-      }
-    }
-  }, {
-    key: "handleEnter",
-    value: function handleEnter(event) {
-      if (this.state.menuOpen) {
-        event.preventDefault();
-        var hasSelectedOption = this.state.selected >= 0;
-        if (hasSelectedOption) {
-          this.handleOptionClick(this.state.selected);
+      case "backspace":
+        if (this.props.multiple) {
+          if (this.state.query.length === 0 && this.state.selectedValues.length > 0) {
+            event.preventDefault();
+            const updatedSelectedValues = this.state.selectedValues.slice(
+              0,
+              -1
+            );
+            this.setState(
+              {
+                selectedValues: updatedSelectedValues
+              },
+              () => {
+                this.props.onConfirm?.(updatedSelectedValues);
+              }
+            );
+          } else {
+            if ((0, import_utils.isPrintableKeyCode)(event.keyCode)) {
+              this.handlePrintableKey(event);
+            }
+          }
+        } else {
+          this.props.onConfirm?.("");
         }
-      }
-    }
-  }, {
-    key: "handlePrintableKey",
-    value: function handlePrintableKey(event) {
-      var inputElement = this.elementReferences[-1];
-      var eventIsOnInput = event.target === inputElement;
-      if (!eventIsOnInput) {
-        // FIXME: This would be better if it was in componentDidUpdate,
-        // but using setState to trigger that seems to not work correctly
-        // in preact@8.1.0.
-        inputElement.focus();
-      }
+        break;
+      default:
+        if ((0, import_utils.isPrintableKeyCode)(event.keyCode)) {
+          this.handlePrintableKey(event);
+        }
+        break;
     }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(event) {
-      switch (_utils.keyCodes[event.keyCode]) {
-        case 'up':
-          this.handleUpArrow(event);
-          break;
-        case 'down':
-          this.handleDownArrow(event);
-          break;
-        case 'space':
-          this.handleSpace(event);
-          break;
-        case 'enter':
-          this.handleEnter(event);
-          break;
-        case 'escape':
-          this.handleComponentBlur({
-            query: this.state.query
-          });
-          break;
-        default:
-          if ((0, _utils.isPrintableKeyCode)(event.keyCode)) {
-            this.handlePrintableKey(event);
-          }
-          break;
+  }
+  render() {
+    const {
+      id,
+      width,
+      minLength,
+      name,
+      placeholder,
+      required,
+      hint,
+      tNoResults,
+      tStatusQueryTooShort,
+      tStatusNoResults,
+      tStatusSelectedOption,
+      tStatusResults,
+      tAssistiveHint,
+      multiple,
+      source
+    } = this.props;
+    const {
+      focused,
+      hovered,
+      menuOpen,
+      options,
+      selected,
+      ariaHint,
+      validChoiceMade
+    } = this.state;
+    const autoselect = this.hasAutoselect();
+    const query = this.state.query ?? "";
+    const inputFocused = focused === -1;
+    const noOptionsAvailable = options.length === 0;
+    const queryNotEmpty = query.length !== 0;
+    const queryLongEnough = query.length >= minLength;
+    const showNoOptionsFound = inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
+    const componentIsFocused = focused !== null;
+    const optionFocused = focused !== -1 && focused !== null;
+    const menuIsVisible = menuOpen || showNoOptionsFound;
+    const selectedOptionText = this.templateInputValue(options[selected]);
+    const optionBeginsWithQuery = selectedOptionText && selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
+    const hintValue = optionBeginsWithQuery && (autoselect || hint) ? query + selectedOptionText.substr(query.length) : "";
+    const assistiveHintID = id + "__assistiveHint";
+    const ariaDescribedProp = ariaHint ? {
+      "aria-describedby": assistiveHintID
+    } : null;
+    const showAutoCompleteResultListItems = (options2, multiple2) => {
+      {
+        return options2.map((option, index) => {
+          const showFocused = focused === -1 ? selected === index : focused === index;
+          const iosPosinsetHtml = (0, import_utils.isIosDevice)() ? /* @__PURE__ */ import_react.default.createElement(
+            import_Base.Base,
+            {
+              as: "span",
+              id: `${id}__option-suffix--${index}`,
+              style: {
+                border: "0",
+                clip: "rect(0 0 0 0)",
+                height: "1px",
+                marginBottom: "-1px",
+                marginRight: "-1px",
+                overflow: "hidden",
+                padding: "0",
+                position: "absolute",
+                whiteSpace: "nowrap",
+                width: "1px"
+              }
+            },
+            index + 1,
+            " \u03B1\u03C0\u03CC ",
+            options2.length
+          ) : "";
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_AutoCompleteResultListItem.AutoCompleteResultListItem,
+            {
+              isFocused: showFocused,
+              isHovered: hovered,
+              index,
+              "aria-selected": focused === index ? "true" : "false",
+              key: index,
+              onBlur: (event) => this.handleAutoCompleteBlur(event, index),
+              onClick: () => this.handleOptionClick(index),
+              onMouseDown: this.handleOptionMouseDown,
+              onMouseEnter: () => this.handleOptionMouseEnter(index),
+              ref: (optionEl) => {
+                this.elementReferences[index] = optionEl;
+              },
+              role: "option",
+              tabIndex: -1,
+              value: typeof option === "object" ? option?.value : option,
+              "aria-posinset": index + 1,
+              "aria-setsize": options2.length
+            },
+            multiple2 ? /* @__PURE__ */ import_react.default.createElement(
+              import_Checkbox.CheckboxItem,
+              {
+                value: option,
+                checked: this.state.selectedValues.includes(option),
+                onChange: () => {
+                }
+              },
+              this.templateSuggestion(option)
+            ) : this.templateSuggestion(option),
+            iosPosinsetHtml
+          );
+        });
       }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this7 = this;
-      var _this$props4 = this.props,
-        id = _this$props4.id,
-        width = _this$props4.width,
-        displayMenu = _this$props4.displayMenu,
-        minLength = _this$props4.minLength,
-        name = _this$props4.name,
-        placeholder = _this$props4.placeholder,
-        required = _this$props4.required,
-        showAllValues = _this$props4.showAllValues,
-        tNoResults = _this$props4.tNoResults,
-        tStatusQueryTooShort = _this$props4.tStatusQueryTooShort,
-        tStatusNoResults = _this$props4.tStatusNoResults,
-        tStatusSelectedOption = _this$props4.tStatusSelectedOption,
-        tStatusResults = _this$props4.tStatusResults,
-        tAssistiveHint = _this$props4.tAssistiveHint,
-        DropdownArrow = _this$props4.dropdownArrow;
-      var _this$state7 = this.state,
-        focused = _this$state7.focused,
-        hovered = _this$state7.hovered,
-        menuOpen = _this$state7.menuOpen,
-        options = _this$state7.options,
-        query = _this$state7.query,
-        selected = _this$state7.selected,
-        ariaHint = _this$state7.ariaHint,
-        validChoiceMade = _this$state7.validChoiceMade;
-      var autoselect = this.hasAutoselect();
-      var inputFocused = focused === -1;
-      var noOptionsAvailable = options.length === 0;
-      var queryNotEmpty = query.length !== 0;
-      var queryLongEnough = query.length >= minLength;
-      var showNoOptionsFound = this.props.showNoOptionsFound && inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
-      var componentIsFocused = focused !== null;
-      var dropdownArrowClassName = "ds-autocomplete__dropdown-arrow-down";
-      var optionFocused = focused !== -1 && focused !== null;
-      var menuIsVisible = menuOpen || showNoOptionsFound;
-      var selectedOptionText = this.templateInputValue(options[selected]);
-      var optionBeginsWithQuery = selectedOptionText && selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
-      var hintValue = optionBeginsWithQuery && autoselect ? query + selectedOptionText.substr(query.length) : '';
-      var assistiveHintID = id + '__assistiveHint';
-      var ariaDescribedProp = ariaHint ? {
-        'aria-describedby': assistiveHintID
-      } : null;
-      return /*#__PURE__*/_react["default"].createElement(_AutoCompleteWrapper["default"], {
-        onKeyDown: this.handleKeyDown,
-        width: width
-      }, /*#__PURE__*/_react["default"].createElement(_Status["default"], {
-        id: id,
+    };
+    return /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteContainer.AutoCompleteContainer, { onKeyDown: this.handleKeyDown, width }, /* @__PURE__ */ import_react.default.createElement(
+      import_Status.default,
+      {
+        id,
         length: options.length,
         queryLength: query.length,
         minQueryLength: minLength,
         selectedOption: this.templateInputValue(options[selected]),
         selectedOptionIndex: selected,
-        validChoiceMade: validChoiceMade,
+        validChoiceMade,
         isInFocus: this.state.focused !== null,
         tQueryTooShort: tStatusQueryTooShort,
         tNoResults: tStatusNoResults,
         tSelectedOption: tStatusSelectedOption,
         tResults: tStatusResults
-      }), hintValue && /*#__PURE__*/_react["default"].createElement(_AutoCompleteInputTypeahead["default"], {
-        value: hintValue
-      }), /*#__PURE__*/_react["default"].createElement(_AutoCompleteInput["default"], (0, _extends2["default"])({
-        "aria-expanded": menuOpen ? 'true' : 'false',
-        "aria-activedescendant": optionFocused ? "".concat(id, "__option--").concat(focused) : '',
-        "aria-owns": "".concat(id, "__listbox"),
-        "aria-autocomplete": this.hasAutoselect() ? 'both' : 'list'
-      }, ariaDescribedProp, {
-        autoComplete: "off",
+      }
+    ), multiple && !autoselect ? /* @__PURE__ */ import_react.default.createElement(
+      import_AutoCompleteMultipleInputContainer.AutoCompleteMultipleInputContainer,
+      {
         isFocused: componentIsFocused,
-        showAllValues: this.props.showAllValues,
-        id: id,
-        onClick: function onClick(event) {
-          return _this7.handleInputClick(event);
+        numberOfSelected: this.props.numberOfSelected
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_Chip.ChipContainer, null, this.state.selectedValues.map((value, index) => {
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_Chip.Chip,
+          {
+            key: index,
+            onDelete: () => {
+              this.setState(
+                (prevState) => ({
+                  selectedValues: prevState.selectedValues.filter(
+                    (v) => {
+                      if (typeof v === "string") {
+                        return v !== value;
+                      } else {
+                        return v.value !== value.value;
+                      }
+                    }
+                  )
+                }),
+                () => {
+                  this.props.onConfirm?.(this.state.selectedValues);
+                }
+              );
+            }
+          },
+          typeof value === "string" ? value : value.label.primary
+        );
+      }), !componentIsFocused && typeof this.props.numberOfSelected === "number" && this.state.selectedValues.length > this.props.numberOfSelected && /* @__PURE__ */ import_react.default.createElement(import_NormalText.NormalText, { fontWeight: "bold", margin: 0 }, "+", this.state.selectedValues.length - this.props.numberOfSelected)),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_AutoCompleteMultipleInput.AutoCompleteMultipleInput,
+        {
+          "aria-expanded": menuOpen ? "true" : "false",
+          "aria-activedescendant": optionFocused ? `${id}__option--${focused}` : "",
+          "aria-owns": `${id}__listbox`,
+          "aria-autocomplete": this.hasAutoselect() ? "both" : "list",
+          ...ariaDescribedProp,
+          autoComplete: "off",
+          id,
+          onClick: (event) => this.handleInputClick(event),
+          onBlur: (event) => this.handleAutoCompleteBlur(event),
+          onChange: this.handleInputChange,
+          onFocus: this.handleInputFocus,
+          name,
+          placeholder: hintValue || placeholder,
+          ref: (inputElement) => {
+            this.elementReferences[-1] = inputElement;
+          },
+          role: "combobox",
+          required,
+          value: query
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_Button.default,
+        {
+          id: `${id}__button-arrow`,
+          ref: (buttonElement) => {
+            this.elementReferences["button-arrow"] = buttonElement;
+          },
+          variant: "link",
+          onClick: () => {
+            if (!this.state.menuOpen) {
+              source(query, (options2) => {
+                const optionsAvailable = options2.length > 0;
+                this.setState({
+                  menuOpen: optionsAvailable,
+                  options: options2,
+                  selected: -1,
+                  validChoiceMade: false
+                });
+              });
+            } else {
+              this.setState({
+                menuOpen: false,
+                focused: null
+              });
+            }
+          },
+          onBlur: (event) => this.handleAutoCompleteBlur(event)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_CaretIcon.CaretIcon, { direction: "down", size: "md" })
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_AutoCompleteResultList.AutoCompleteResultList,
+        {
+          isVisible: menuIsVisible,
+          onMouseLeave: () => this.handleListMouseLeave(),
+          id: `${id}__listbox`,
+          role: "listbox"
         },
-        onBlur: this.handleInputBlur,
+        /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, null, showAutoCompleteResultListItems(options, multiple)),
+        showNoOptionsFound && /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultListItem.AutoCompleteResultListItem, { empty: true }, tNoResults?.())
+      ),
+      /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteAssistiveHint.AutoCompleteAssistiveHint, { id: assistiveHintID }, tAssistiveHint?.())
+    ) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_AutoCompleteInputBase.AutoCompleteInputBase,
+      {
+        "aria-expanded": menuOpen ? "true" : "false",
+        "aria-activedescendant": optionFocused ? `${id}__option--${focused}` : "",
+        "aria-owns": `${id}__listbox`,
+        "aria-autocomplete": this.hasAutoselect() ? "both" : "list",
+        ...ariaDescribedProp,
+        autoComplete: "off",
+        isFocused: componentIsFocused,
+        id,
+        onClick: (event) => this.handleInputClick(event),
+        onBlur: this.handleAutoCompleteBlur,
         onChange: this.handleInputChange,
         onFocus: this.handleInputFocus,
-        name: name,
-        placeholder: placeholder,
-        ref: function ref(inputElement) {
-          _this7.elementReferences[-1] = inputElement;
+        name,
+        placeholder: hintValue || placeholder,
+        ref: (inputElement) => {
+          this.elementReferences[-1] = inputElement;
         },
         role: "combobox",
-        required: required,
+        required,
         value: query
-      })), showNoOptionsFound || showAllValues && !menuOpen && DropdownArrow && /*#__PURE__*/_react["default"].createElement(DropdownArrow, {
-        type: "button",
-        onClick: function onClick() {
-          _this7.elementReferences[-1].focus();
-          _this7.handleInputChange({
-            target: {
-              value: query
-            }
-          });
-        },
-        className: dropdownArrowClassName
-      }), /*#__PURE__*/_react["default"].createElement(_AutoCompleteResultList["default"], {
-        displayMenu: displayMenu,
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_CaretIcon.CaretIcon, { direction: "down", size: "md" }), /* @__PURE__ */ import_react.default.createElement(
+      import_AutoCompleteResultList.AutoCompleteResultList,
+      {
         isVisible: menuIsVisible,
-        onMouseLeave: function onMouseLeave() {
-          return _this7.handleListMouseLeave();
-        },
-        id: "".concat(id, "__listbox"),
+        onMouseLeave: () => this.handleListMouseLeave(),
+        id: `${id}__listbox`,
         role: "listbox"
-      }, options.map(function (option, index) {
-        var showFocused = focused === -1 ? selected === index : focused === index;
-        var iosPosinsetHtml = (0, _utils.isIosDevice)() ? /*#__PURE__*/_react["default"].createElement("span", {
-          id: "".concat(id, "__option-suffix--").concat(index),
-          style: {
-            border: '0',
-            clip: 'rect(0 0 0 0)',
-            height: '1px',
-            marginBottom: '-1px',
-            marginRight: '-1px',
-            overflow: 'hidden',
-            padding: '0',
-            position: 'absolute',
-            whiteSpace: 'nowrap',
-            width: '1px'
-          }
-        }, index + 1, " \u03B1\u03C0\u03CC ", options.length) : '';
-        return /*#__PURE__*/_react["default"].createElement(_AutoCompleteResultListItem["default"], {
-          isFocused: showFocused,
-          isHovered: hovered,
-          index: index,
-          "aria-selected": focused === index ? 'true' : 'false',
-          key: index,
-          onBlur: function onBlur(event) {
-            return _this7.handleOptionBlur(event, index);
-          },
-          onClick: function onClick() {
-            return _this7.handleOptionClick(index);
-          },
-          onMouseDown: _this7.handleOptionMouseDown,
-          onMouseEnter: function onMouseEnter() {
-            return _this7.handleOptionMouseEnter(index);
-          },
-          ref: function ref(optionEl) {
-            _this7.elementReferences[index] = optionEl;
-          },
-          role: "option",
-          tabIndex: -1,
-          "aria-posinset": index + 1,
-          "aria-setsize": options.length
-        }, _this7.templateSuggestion(option), " ", iosPosinsetHtml);
-      }), showNoOptionsFound && /*#__PURE__*/_react["default"].createElement(_AutoCompleteResultListItem["default"], {
-        empty: true
-      }, tNoResults === null || tNoResults === void 0 ? void 0 : tNoResults())), /*#__PURE__*/_react["default"].createElement(_AutoCompleteAssistiveHint["default"], {
-        id: assistiveHintID
-      }, tAssistiveHint === null || tAssistiveHint === void 0 ? void 0 : tAssistiveHint()));
-    }
-  }]);
-  return AutoComplete;
-}(_react.Component);
-AutoComplete.defaultProps = {
-  width: '33.3%',
-  autoselect: false,
-  defaultValue: '',
-  displayMenu: 'overlay',
-  minLength: 0,
-  name: 'ds-input-autocomplete',
-  placeholder: '',
-  onConfirm: function onConfirm() {
-    return;
-  },
-  confirmOnBlur: false,
-  showNoOptionsFound: true,
-  showAllValues: false,
-  required: false,
-  tNoResults: function tNoResults() {
-    return 'No results found';
-  },
-  tAssistiveHint: function tAssistiveHint() {
-    return 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.';
-  },
-  dropdownArrow: function dropdownArrow(props) {
-    return /*#__PURE__*/_react["default"].createElement(_CaretIcon.CaretIcon, (0, _extends2["default"])({
-      direction: "down",
-      size: "sm"
-    }, props));
+      },
+      showAutoCompleteResultListItems(options, false),
+      showNoOptionsFound && /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultListItem.AutoCompleteResultListItem, { empty: true }, tNoResults?.())
+    ), /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteAssistiveHint.AutoCompleteAssistiveHint, { id: assistiveHintID }, tAssistiveHint?.())));
   }
-};
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoComplete,
+  AutoCompleteAssistiveHint,
+  AutoCompleteContainer,
+  AutoCompleteInputBase,
+  AutoCompleteMultipleInput,
+  AutoCompleteMultipleInputContainer,
+  AutoCompleteResultList,
+  AutoCompleteResultListItem
+});
+//# sourceMappingURL=index.js.map