@digigov/ui 2.0.0-rc.8 → 2.0.2

package/form/AutoComplete/index.js

@@ -1,738 +1,530 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
-import React from 'react';
-import { Component } from 'react';
-import AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistiveHint';
-import AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
-import AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
-import AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
-import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
-import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
-import AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
-import AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
-import { CaretIcon } from '@digigov/react-icons/CaretIcon';
-import Status from '@digigov/ui/form/AutoComplete/Status';
-import { isIosDevice, keyCodes, isPrintableKeyCode } from '@digigov/ui/form/AutoComplete/utils';
-import Checkbox, { CheckboxItem } from "../Checkbox";
-import { Chip, ChipContainer } from '@digigov/ui/content/Chip';
-import Button from '@digigov/ui/form/Button';
-import { NormalText } from '@digigov/ui/typography/NormalText';
-var _ref2 = /*#__PURE__*/React.createElement(CaretIcon, {
-  direction: "down",
-  size: "md"
-});
-var _ref3 = /*#__PURE__*/React.createElement(CaretIcon, {
-  direction: "down",
-  size: "md"
-});
-var AutoComplete = /*#__PURE__*/function (_Component) {
-  _inherits(AutoComplete, _Component);
-  function AutoComplete(props) {
-    var _this;
-    _classCallCheck(this, AutoComplete);
-    _this = _callSuper(this, AutoComplete, [props]);
-    _this.elementReferences = {};
-    var customState = {};
-    if (Array.isArray(props.defaultValue)) {
-      customState.selectedValues = props.defaultValue;
-    } else if (props.defaultValue) {
-      customState.selectedValues = [props.defaultValue];
+import react, { Component } from "react";
+import { AutoCompleteAssistiveHint } from "@digigov/react-core/AutoCompleteAssistiveHint/index.js";
+import { AutoCompleteContainer } from "@digigov/react-core/AutoCompleteContainer/index.js";
+import { AutoCompleteInputBase } from "@digigov/react-core/AutoCompleteInputBase/index.js";
+import { AutoCompleteMultipleInput } from "@digigov/react-core/AutoCompleteMultipleInput/index.js";
+import { AutoCompleteMultipleInputContainer } from "@digigov/react-core/AutoCompleteMultipleInputContainer/index.js";
+import { AutoCompleteResultList } from "@digigov/react-core/AutoCompleteResultList/index.js";
+import { AutoCompleteResultListItem } from "@digigov/react-core/AutoCompleteResultListItem/index.js";
+import { Base } from "@digigov/react-core/Base/index.js";
+import { CaretIcon } from "@digigov/react-icons/CaretIcon/index.js";
+import { Chip, ChipContainer } from "../../content/Chip/index.js";
+import Status from "./Status/index.js";
+import { isIosDevice, isPrintableKeyCode, keyCodes } from "./utils.js";
+import Button from "../Button/index.js";
+import Checkbox, { CheckboxItem } from "../Checkbox/index.js";
+import { NormalText } from "../../typography/NormalText/index.js";
+class AutoComplete extends Component {
+    static defaultProps = {
+        width: 'full',
+        autoselect: false,
+        minLength: 0,
+        name: 'ds-input-autocomplete',
+        placeholder: '',
+        hint: false,
+        onConfirm: ()=>{},
+        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.'
+    };
+    elementReferences = {};
+    constructor(props){
+        super(props);
+        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: [],
+            query: this.props.multiple ? '' : props.defaultValue || '',
+            selectedValues: [],
+            validChoiceMade: false,
+            selected: null,
+            ariaHint: true,
+            ...customState
+        };
+        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);
+        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);
     }
-    _this.state = _extends({
-      focused: null,
-      hovered: null,
-      menuOpen: false,
-      options: [],
-      query: _this.props.multiple ? '' : props.defaultValue || '',
-      selectedValues: [],
-      validChoiceMade: false,
-      selected: null,
-      ariaHint: true
-    }, customState);
-    _this.handleComponentBlur = _this.handleComponentBlur.bind(_assertThisInitialized(_this));
-    _this.handleAutoCompleteBlur = _this.handleAutoCompleteBlur.bind(_assertThisInitialized(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleUpArrow = _this.handleUpArrow.bind(_assertThisInitialized(_this));
-    _this.handleDownArrow = _this.handleDownArrow.bind(_assertThisInitialized(_this));
-    _this.handleEnter = _this.handleEnter.bind(_assertThisInitialized(_this));
-    _this.handlePrintableKey = _this.handlePrintableKey.bind(_assertThisInitialized(_this));
-    _this.handleListMouseLeave = _this.handleListMouseLeave.bind(_assertThisInitialized(_this));
-    if (_this.props.multiple) {
-      _this.handleOptionClick = _this.handleOptionClickMultiple.bind(_assertThisInitialized(_this));
-    } else {
-      _this.handleOptionClick = _this.handleOptionClick.bind(_assertThisInitialized(_this));
+    isQueryAnOption(query, options) {
+        return -1 !== options.map((entry)=>this.templateInputValue(entry).toLowerCase()).indexOf(query.toLowerCase());
     }
-    _this.handleOptionFocus = _this.handleOptionFocus.bind(_assertThisInitialized(_this));
-    _this.handleOptionMouseDown = _this.handleOptionMouseDown.bind(_assertThisInitialized(_this));
-    _this.handleOptionMouseEnter = _this.handleOptionMouseEnter.bind(_assertThisInitialized(_this));
-    _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_this));
-    _this.handleInputFocus = _this.handleInputFocus.bind(_assertThisInitialized(_this));
-    _this.getDirectInputChanges = _this.getDirectInputChanges.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(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;
+    componentDidMount() {
+        this.getDirectInputChanges();
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.getDirectInputChanges();
-    }
-  }, {
-    key: "getDirectInputChanges",
-    value: function getDirectInputChanges() {
-      var _this$state$query;
-      var inputReference = this.elementReferences[-1];
-      var queryHasChanged = inputReference && inputReference.value !== ((_this$state$query = this.state.query) !== null && _this$state$query !== void 0 ? _this$state$query : '');
-      if (queryHasChanged) {
-        this.handleInputChange({
-          target: {
-            value: inputReference.value
-          }
+    getDirectInputChanges() {
+        const inputReference = this.elementReferences[-1];
+        const queryHasChanged = inputReference && inputReference.value !== (this.state.query ?? '');
+        if (queryHasChanged) this.handleInputChange({
+            target: {
+                value: inputReference.value
+            }
         });
-      }
-    }
-  }, {
-    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);
-      }
-    }
-  }, {
-    key: "hasAutoselect",
-    value: function hasAutoselect() {
-      return isIosDevice() ? false : this.props.autoselect;
     }
-
-    // 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;
+    componentDidUpdate(_, prevState) {
+        const { focused } = this.state;
+        const componentLostFocus = null === focused;
+        const focusedChanged = prevState.focused !== focused;
+        const focusDifferentElement = focusedChanged && !componentLostFocus;
+        if (focusDifferentElement) this.elementReferences[focused].focus();
+        const focusedInput = -1 === focused;
+        const componentGainedFocus = focusedChanged && null === prevState.focused;
+        const selectAllText = focusedInput && componentGainedFocus;
+        if (selectAllText) {
+            const inputElement = this.elementReferences[focused];
+            inputElement.setSelectionRange(0, inputElement.value.length);
+        }
     }
-
-    // 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, this.state.query) : value;
+    hasAutoselect() {
+        return isIosDevice() ? false : this.props.autoselect;
     }
-  }, {
-    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 === null || newState === void 0 ? void 0 : 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 === null || newState === void 0 ? void 0 : newState.menuOpen) || false,
-        query: newQuery,
-        selected: null,
-        validChoiceMade: this.isQueryAnOption(newQuery, options)
-      });
+    templateInputValue(value) {
+        const inputValueTemplate = this.props.templates && this.props.templates.inputValue;
+        return inputValueTemplate ? inputValueTemplate(value) : value;
     }
-  }, {
-    key: "handleListMouseLeave",
-    value: function handleListMouseLeave() {
-      this.setState({
-        hovered: null
-      });
+    templateSuggestion(value) {
+        const suggestionTemplate = this.props.templates && this.props.templates.suggestion;
+        return suggestionTemplate ? suggestionTemplate(value, this.state.query) : value;
     }
-  }, {
-    key: "handleAutoCompleteBlur",
-    value: function handleAutoCompleteBlur(event, index) {
-      var _this$state2 = this.state,
-        focused = _this$state2.focused,
-        options = _this$state2.options,
-        query = _this$state2.query,
-        selected = _this$state2.selected;
-      var focusingOutsideComponent = false;
-      if (event.relatedTarget === null) {
-        focusingOutsideComponent = true;
-      } else {
-        // This affects if we have multiple autocompletes in same page and we click the first button-arrow and then another button-arrow
-        focusingOutsideComponent = this.elementReferences['button-arrow'] !== event.relatedTarget;
-      }
-      var focusingInput = event.relatedTarget === this.elementReferences[-1];
-      var focusingButtonArrow = this.elementReferences['button-arrow'] === event.relatedTarget || false;
-      var focusingAnotherOption = focused !== null && focused !== -1;
-      if (index !== undefined) {
-        focusingAnotherOption = focused !== index && focused !== -1;
-      }
-      // Check if the user clicks outside and not either on option, either on input or on button arrow
-      var blurComponent = focusingOutsideComponent && !(focusingAnotherOption || focusingInput || focusingButtonArrow);
-      if (blurComponent) {
-        // In handleInputBlur:
-        var newQuery = isIosDevice() ? query : this.templateInputValue(options[selected]);
-        this.handleComponentBlur({
-          menuOpen: false,
-          query: newQuery
+    handleComponentBlur(newState) {
+        const { options, query, selected } = this.state;
+        const { confirmOnBlur, autoselect, onConfirm } = this.props;
+        let newQuery = query;
+        if (confirmOnBlur || autoselect) newQuery = newState?.query ?? query;
+        if (confirmOnBlur) onConfirm?.(options[selected]);
+        this.setState({
+            focused: null,
+            menuOpen: newState?.menuOpen || false,
+            query: newQuery,
+            selected: null,
+            validChoiceMade: this.isQueryAnOption(newQuery, options)
         });
-      }
     }
-  }, {
-    key: "handleInputChange",
-    value: function handleInputChange(event) {
-      var _this3 = this;
-      var _this$props2 = this.props,
-        source = _this$props2.source,
-        minLength = _this$props2.minLength;
-      var autoselect = this.hasAutoselect();
-      var query = event.target.value;
-      var queryEmpty = query.length === 0;
-      this.setState({
-        query: query,
-        ariaHint: queryEmpty
-      });
-      var minLengthQuery = minLength != undefined && minLength > query.length ? '' : query;
-      source(minLengthQuery, function (options) {
-        var optionsAvailable = options.length > 0;
-        _this3.setState({
-          menuOpen: optionsAvailable,
-          options: options,
-          selected: autoselect && optionsAvailable ? 0 : -1,
-          validChoiceMade: false
+    handleListMouseLeave() {
+        this.setState({
+            hovered: null
         });
-      });
     }
-  }, {
-    key: "handleInputClick",
-    value: function handleInputClick(event) {
-      this.handleInputChange(event);
+    handleAutoCompleteBlur(event, index) {
+        const { autoselect } = this.props;
+        const { focused, options, query, selected } = this.state;
+        let focusingOutsideComponent = false;
+        focusingOutsideComponent = null === event.relatedTarget ? true : this.elementReferences['button-arrow'] !== event.relatedTarget;
+        const focusingInput = event.relatedTarget === this.elementReferences[-1];
+        const focusingButtonArrow = this.elementReferences['button-arrow'] === event.relatedTarget || false;
+        let focusingAnotherOption = null !== focused && -1 !== focused;
+        if (void 0 !== index) focusingAnotherOption = focused !== index && -1 !== focused;
+        const blurComponent = focusingOutsideComponent && !(focusingAnotherOption || focusingInput || focusingButtonArrow);
+        if (blurComponent && !autoselect) {
+            const newQuery = isIosDevice() ? query : this.templateInputValue(options[selected]);
+            this.handleComponentBlur({
+                menuOpen: false,
+                query: newQuery
+            });
+        }
+        if (blurComponent && autoselect) {
+            const selectedOption = this.templateInputValue(options[selected]);
+            const newQuery = isIosDevice() ? query : selectedOption?.toLowerCase().includes(query.toLowerCase()) ? selectedOption : query;
+            this.handleComponentBlur({
+                menuOpen: false,
+                query: newQuery
+            });
+        }
     }
-  }, {
-    key: "handleInputFocus",
-    value: function handleInputFocus() {
-      var _this4 = this;
-      var source = this.props.source;
-      var _this$state3 = this.state,
-        query = _this$state3.query,
-        validChoiceMade = _this$state3.validChoiceMade,
-        options = _this$state3.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
-          };
+    handleInputChange(event) {
+        const { source, minLength } = this.props;
+        const query = event.target.value;
+        const queryEmpty = 0 === query.length;
+        this.setState({
+            query,
+            ariaHint: queryEmpty
         });
-      } else {
-        source(query, function (options) {
-          _this4.setState({
-            focused: -1,
-            options: options
-          });
+        const minLengthQuery = void 0 != minLength && minLength > query.length ? '' : query;
+        source(minLengthQuery, (options)=>{
+            const optionsAvailable = options.length > 0;
+            this.setState({
+                menuOpen: optionsAvailable,
+                options,
+                selected: -1,
+                validChoiceMade: false
+            });
         });
-      }
     }
-  }, {
-    key: "handleOptionFocus",
-    value: function handleOptionFocus(index) {
-      this.setState({
-        focused: index,
-        hovered: null,
-        selected: index
-      });
+    handleInputClick(event) {
+        this.handleInputChange(event);
     }
-  }, {
-    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 (!isIosDevice()) {
-        this.setState({
-          hovered: index
+    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, (options)=>{
+            this.setState({
+                focused: -1,
+                options
+            });
         });
-      }
     }
-  }, {
-    key: "handleOptionClickMultiple",
-    value: function handleOptionClickMultiple(index) {
-      var _this$props$onConfirm2, _this$props3;
-      var selectedOption = this.state.options[index];
-      var selectedValues = this.state.selectedValues;
-      if (this.state.selectedValues.indexOf(selectedOption) === -1) {
-        selectedValues = selectedValues.concat([selectedOption]);
-      } else {
-        selectedValues.splice(this.state.selectedValues.indexOf(selectedOption), 1);
-      }
-      (_this$props$onConfirm2 = (_this$props3 = this.props).onConfirm) === null || _this$props$onConfirm2 === void 0 ? void 0 : _this$props$onConfirm2.call(_this$props3, selectedValues);
-      this.setState({
-        focused: index,
-        hovered: null,
-        menuOpen: true,
-        query: '',
-        selectedValues: selectedValues,
-        selected: index,
-        validChoiceMade: true
-      });
-      this.forceUpdate();
-    }
-  }, {
-    key: "handleOptionClick",
-    value: function handleOptionClick(index) {
-      var _this$props$onConfirm3, _this$props4;
-      var selectedOption = this.state.options[index];
-      var newQuery = this.templateInputValue(selectedOption);
-      (_this$props$onConfirm3 = (_this$props4 = this.props).onConfirm) === null || _this$props$onConfirm3 === void 0 ? void 0 : _this$props$onConfirm3.call(_this$props4, selectedOption);
-      var selectedValues = this.props.multiple ? this.state.selectedValues.concat(selectedOption) : [selectedOption];
-      this.setState({
-        focused: -1,
-        hovered: null,
-        menuOpen: false,
-        query: newQuery,
-        selectedValues: selectedValues,
-        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
-      event.preventDefault();
+    handleOptionFocus(index) {
+        this.setState({
+            focused: index,
+            hovered: null,
+            selected: index
+        });
     }
-  }, {
-    key: "handleUpArrow",
-    value: function handleUpArrow(event) {
-      event.preventDefault();
-      var _this$state4 = this.state,
-        menuOpen = _this$state4.menuOpen,
-        selected = _this$state4.selected;
-      var isNotAtTop = selected !== -1;
-      var allowMoveUp = isNotAtTop && menuOpen;
-      if (allowMoveUp) {
-        this.handleOptionFocus(selected - 1);
-      }
+    handleOptionMouseEnter(index) {
+        if (!isIosDevice()) this.setState({
+            hovered: index
+        });
+        this.handleOptionFocus(index);
     }
-  }, {
-    key: "handleDownArrow",
-    value: function handleDownArrow(event) {
-      var _this5 = this;
-      event.preventDefault();
-      // if not open, open
-      if (this.state.menuOpen === false) {
-        event.preventDefault();
-        this.props.source('', function (options) {
-          _this5.setState({
+    handleOptionClickMultiple(index) {
+        const selectedOption = this.state.options[index];
+        let selectedValues = this.state.selectedValues;
+        if (-1 === this.state.selectedValues.indexOf(selectedOption)) selectedValues = selectedValues.concat([
+            selectedOption
+        ]);
+        else selectedValues.splice(this.state.selectedValues.indexOf(selectedOption), 1);
+        this.props.onConfirm?.(selectedValues);
+        this.setState({
+            focused: index,
+            hovered: null,
             menuOpen: true,
-            options: options,
-            selected: 0,
-            focused: 0,
-            hovered: null
-          });
+            query: '',
+            selectedValues,
+            selected: index,
+            validChoiceMade: true
         });
-      } else if (this.state.menuOpen === true) {
-        var _this$state5 = this.state,
-          menuOpen = _this$state5.menuOpen,
-          _options = _this$state5.options,
-          selected = _this$state5.selected;
-        var isNotAtBottom = selected !== _options.length - 1;
-        var allowMoveDown = isNotAtBottom && menuOpen;
-        if (allowMoveDown) {
-          this.handleOptionFocus(selected + 1);
-        }
-      }
+        this.forceUpdate();
     }
-  }, {
-    key: "handleSpace",
-    value: function handleSpace(event) {
-      var _this6 = this;
-      // if not open, open
-      if (this.state.menuOpen === false && this.state.query === '') {
-        event.preventDefault();
-        this.props.source('', function (options) {
-          _this6.setState({
-            menuOpen: true,
-            options: options
-          });
+    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
         });
-      }
-      var focusIsOnOption = this.state.focused !== -1;
-      if (focusIsOnOption) {
+        this.forceUpdate();
+    }
+    handleOptionMouseDown(event) {
         event.preventDefault();
-        this.handleOptionClick(this.state.focused);
-      }
     }
-  }, {
-    key: "handleEnter",
-    value: function handleEnter(event) {
-      if (this.state.menuOpen) {
+    handleUpArrow(event) {
         event.preventDefault();
-        var hasSelectedOption = this.state.selected >= 0;
-        if (hasSelectedOption) {
-          this.handleOptionClick(this.state.selected);
-          if (this.props.multiple) {
-            this.setState({
-              menuOpen: false,
-              focused: -1
+        const { menuOpen, selected } = this.state;
+        const isNotAtTop = -1 !== selected;
+        const allowMoveUp = isNotAtTop && menuOpen;
+        if (allowMoveUp) this.handleOptionFocus(selected - 1);
+    }
+    handleDownArrow(event) {
+        event.preventDefault();
+        if (false === this.state.menuOpen) {
+            event.preventDefault();
+            this.props.source('', (options)=>{
+                this.setState({
+                    menuOpen: true,
+                    options,
+                    selected: 0,
+                    focused: 0,
+                    hovered: null
+                });
             });
-          }
+        } else if (true === this.state.menuOpen) {
+            const { menuOpen, options, selected } = this.state;
+            const isNotAtBottom = selected !== options.length - 1;
+            const allowMoveDown = isNotAtBottom && menuOpen;
+            if (allowMoveDown) this.handleOptionFocus(selected + 1);
         }
-      }
     }
-  }, {
-    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();
-      }
+    handleSpace(event) {
+        if (false === this.state.menuOpen && '' === this.state.query) {
+            event.preventDefault();
+            this.props.source('', (options)=>{
+                this.setState({
+                    menuOpen: true,
+                    options
+                });
+            });
+        }
+        const focusIsOnOption = -1 !== this.state.focused;
+        if (focusIsOnOption) {
+            event.preventDefault();
+            this.handleOptionClick(this.state.focused);
+        }
     }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(event) {
-      var _this7 = this;
-      switch (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;
-        case 'backspace':
-          if (this.props.multiple) {
-            if (this.state.query.length === 0 && this.state.selectedValues.length > 0) {
-              event.preventDefault();
-              var updatedSelectedValues = this.state.selectedValues.slice(0, -1);
-              this.setState({
-                selectedValues: updatedSelectedValues
-              }, function () {
-                var _this7$props$onConfir, _this7$props;
-                (_this7$props$onConfir = (_this7$props = _this7.props).onConfirm) === null || _this7$props$onConfir === void 0 ? void 0 : _this7$props$onConfir.call(_this7$props, updatedSelectedValues);
-              });
-              break;
+    handleEnter(event) {
+        if (this.state.menuOpen) {
+            event.preventDefault();
+            const hasSelectedOption = this.state.selected >= 0;
+            if (hasSelectedOption) {
+                this.handleOptionClick(this.state.selected);
+                if (this.props.multiple) this.setState({
+                    menuOpen: false,
+                    focused: -1
+                });
             }
-          } else {
-            var _this$props$onConfirm4, _this$props5;
-            (_this$props$onConfirm4 = (_this$props5 = this.props).onConfirm) === null || _this$props$onConfirm4 === void 0 ? void 0 : _this$props$onConfirm4.call(_this$props5, '');
-            break;
-          }
-        default:
-          if (isPrintableKeyCode(event.keyCode)) {
-            this.handlePrintableKey(event);
-          }
-          break;
-      }
+        }
+    }
+    handlePrintableKey(event) {
+        const inputElement = this.elementReferences[-1];
+        const eventIsOnInput = event.target === inputElement;
+        if (!eventIsOnInput) inputElement.focus();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state$query2,
-        _this8 = this;
-      var _this$props6 = this.props,
-        id = _this$props6.id,
-        width = _this$props6.width,
-        minLength = _this$props6.minLength,
-        name = _this$props6.name,
-        placeholder = _this$props6.placeholder,
-        required = _this$props6.required,
-        tNoResults = _this$props6.tNoResults,
-        tStatusQueryTooShort = _this$props6.tStatusQueryTooShort,
-        tStatusNoResults = _this$props6.tStatusNoResults,
-        tStatusSelectedOption = _this$props6.tStatusSelectedOption,
-        tStatusResults = _this$props6.tStatusResults,
-        tAssistiveHint = _this$props6.tAssistiveHint,
-        multiple = _this$props6.multiple,
-        source = _this$props6.source;
-      var _this$state6 = this.state,
-        focused = _this$state6.focused,
-        hovered = _this$state6.hovered,
-        menuOpen = _this$state6.menuOpen,
-        options = _this$state6.options,
-        selected = _this$state6.selected,
-        ariaHint = _this$state6.ariaHint,
-        validChoiceMade = _this$state6.validChoiceMade;
-      var autoselect = this.hasAutoselect();
-      var query = (_this$state$query2 = this.state.query) !== null && _this$state$query2 !== void 0 ? _this$state$query2 : '';
-      var inputFocused = focused === -1;
-      var noOptionsAvailable = options.length === 0;
-      var queryNotEmpty = query.length !== 0;
-      var queryLongEnough = query.length >= minLength;
-      var showNoOptionsFound = inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
-      var componentIsFocused = focused !== null;
-      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;
-      var showAutoCompleteResultListItems = function showAutoCompleteResultListItems(options, multiple) {
-        {
-          return options.map(function (option, index) {
-            var showFocused = focused === -1 ? selected === index : focused === index;
-            var iosPosinsetHtml = isIosDevice() ? /*#__PURE__*/React.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.createElement(AutoCompleteResultListItem, {
-              isFocused: showFocused,
-              isHovered: hovered,
-              index: index,
-              "aria-selected": focused === index ? 'true' : 'false',
-              key: index,
-              onBlur: function onBlur(event) {
-                return _this8.handleAutoCompleteBlur(event, index);
-              },
-              onClick: function onClick() {
-                return _this8.handleOptionClick(index);
-              },
-              onMouseDown: _this8.handleOptionMouseDown,
-              onMouseEnter: function onMouseEnter() {
-                return _this8.handleOptionMouseEnter(index);
-              },
-              ref: function ref(optionEl) {
-                _this8.elementReferences[index] = optionEl;
-              },
-              role: "option",
-              tabIndex: -1,
-              "aria-posinset": index + 1,
-              "aria-setsize": options.length
-            }, multiple ? /*#__PURE__*/React.createElement(CheckboxItem, {
-              value: option,
-              checked: _this8.state.selectedValues.includes(option),
-              onChange: function onChange() {}
-            }, _this8.templateSuggestion(option)) : _this8.templateSuggestion(option), iosPosinsetHtml);
-          });
+    handleKeyDown(event) {
+        switch(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;
+            case 'backspace':
+                if (this.props.multiple) {
+                    if (0 === this.state.query.length && 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 (isPrintableKeyCode(event.keyCode)) this.handlePrintableKey(event);
+                } else this.props.onConfirm?.('');
+                break;
+            default:
+                if (isPrintableKeyCode(event.keyCode)) this.handlePrintableKey(event);
+                break;
         }
-      };
-      return /*#__PURE__*/React.createElement(AutoCompleteContainer, {
-        onKeyDown: this.handleKeyDown,
-        width: width
-      }, /*#__PURE__*/React.createElement(Status, {
-        id: id,
-        length: options.length,
-        queryLength: query.length,
-        minQueryLength: minLength,
-        selectedOption: this.templateInputValue(options[selected]),
-        selectedOptionIndex: selected,
-        validChoiceMade: validChoiceMade,
-        isInFocus: this.state.focused !== null,
-        tQueryTooShort: tStatusQueryTooShort,
-        tNoResults: tStatusNoResults,
-        tSelectedOption: tStatusSelectedOption,
-        tResults: tStatusResults
-      }), hintValue && (placeholder === '' || !placeholder) && /*#__PURE__*/React.createElement(AutoCompleteInputTypeahead, {
-        value: hintValue
-      }), multiple ? /*#__PURE__*/React.createElement(AutoCompleteMultipleInputContainer, {
-        isFocused: componentIsFocused,
-        numberOfSelected: this.props.numberOfSelected
-      }, /*#__PURE__*/React.createElement(ChipContainer, null, this.state.selectedValues.map(function (value, index) {
-        return /*#__PURE__*/React.createElement(Chip, {
-          key: index,
-          onDelete: function onDelete() {
-            _this8.setState(function (prevState) {
-              return {
-                selectedValues: prevState.selectedValues.filter(function (v) {
-                  if (typeof v === "string") {
-                    return v !== value;
-                  } else {
-                    return v.value !== value.value;
-                  }
-                })
-              };
-            }, function () {
-              var _this8$props$onConfir, _this8$props;
-              (_this8$props$onConfir = (_this8$props = _this8.props).onConfirm) === null || _this8$props$onConfir === void 0 ? void 0 : _this8$props$onConfir.call(_this8$props, _this8.state.selectedValues);
-            });
-          }
-        }, typeof value === "string" ? value : value.label.primary);
-      }), !componentIsFocused && typeof this.props.numberOfSelected === 'number' && this.state.selectedValues.length > this.props.numberOfSelected && /*#__PURE__*/React.createElement(NormalText, {
-        fontWeight: "bold",
-        margin: 0
-      }, "+", this.state.selectedValues.length - this.props.numberOfSelected)), /*#__PURE__*/React.createElement(AutoCompleteMultipleInput, _extends({
-        "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"
-        // isFocused={componentIsFocused}
-        ,
-        id: id,
-        onClick: function onClick(event) {
-          return _this8.handleInputClick(event);
-        },
-        onBlur: function onBlur(event) {
-          return _this8.handleAutoCompleteBlur(event);
-        },
-        onChange: this.handleInputChange,
-        onFocus: this.handleInputFocus,
-        name: name,
-        placeholder: placeholder,
-        ref: function ref(inputElement) {
-          _this8.elementReferences[-1] = inputElement;
-        },
-        role: "combobox",
-        required: required,
-        value: query
-      })), /*#__PURE__*/React.createElement(Button, {
-        ref: function ref(buttonElement) {
-          _this8.elementReferences['button-arrow'] = buttonElement;
-        },
-        variant: "link",
-        onClick: function onClick() {
-          if (!_this8.state.menuOpen) {
-            source(query, function (options) {
-              var optionsAvailable = options.length > 0;
-              _this8.setState({
-                menuOpen: optionsAvailable,
-                options: options,
-                selected: autoselect && optionsAvailable ? 0 : -1,
-                validChoiceMade: false
-              });
-            });
-          } else {
-            _this8.setState({
-              menuOpen: false,
-              focused: null
+    }
+    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 = -1 === focused;
+        const noOptionsAvailable = 0 === options.length;
+        const queryNotEmpty = 0 !== query.length;
+        const queryLongEnough = query.length >= minLength;
+        const showNoOptionsFound = inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
+        const componentIsFocused = null !== focused;
+        const optionFocused = -1 !== focused && null !== focused;
+        const menuIsVisible = menuOpen || showNoOptionsFound;
+        const selectedOptionText = this.templateInputValue(options[selected]);
+        const optionBeginsWithQuery = selectedOptionText && 0 === selectedOptionText.toLowerCase().indexOf(query.toLowerCase());
+        const hintValue = optionBeginsWithQuery && (autoselect || hint) ? query + selectedOptionText.substr(query.length) : '';
+        const assistiveHintID = id + '__assistiveHint';
+        const ariaDescribedProp = ariaHint ? {
+            'aria-describedby': assistiveHintID
+        } : null;
+        const showAutoCompleteResultListItems = (options, multiple)=>options.map((option, index)=>{
+                const showFocused = -1 === focused ? selected === index : focused === index;
+                const iosPosinsetHtml = isIosDevice() ? /*#__PURE__*/ react.createElement(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, " από ", options.length) : '';
+                return /*#__PURE__*/ react.createElement(AutoCompleteResultListItem, {
+                    isFocused: showFocused,
+                    isHovered: hovered,
+                    index: 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: 'object' == typeof option ? option?.value : option,
+                    "aria-posinset": index + 1,
+                    "aria-setsize": options.length
+                }, multiple ? /*#__PURE__*/ react.createElement(CheckboxItem, {
+                    value: option,
+                    checked: this.state.selectedValues.includes(option),
+                    onChange: ()=>{}
+                }, this.templateSuggestion(option)) : this.templateSuggestion(option), iosPosinsetHtml);
             });
-          }
-        },
-        onBlur: function onBlur(event) {
-          return _this8.handleAutoCompleteBlur(event);
-        }
-      }, _ref2), /*#__PURE__*/React.createElement(AutoCompleteResultList, {
-        isVisible: menuIsVisible,
-        onMouseLeave: function onMouseLeave() {
-          return _this8.handleListMouseLeave();
-        },
-        id: "".concat(id, "__listbox"),
-        role: "listbox"
-      }, /*#__PURE__*/React.createElement(Checkbox, null, showAutoCompleteResultListItems(options, multiple)), showNoOptionsFound && /*#__PURE__*/React.createElement(AutoCompleteResultListItem, {
-        empty: true
-      }, tNoResults === null || tNoResults === void 0 ? void 0 : tNoResults())), /*#__PURE__*/React.createElement(AutoCompleteAssistiveHint, {
-        id: assistiveHintID
-      }, tAssistiveHint === null || tAssistiveHint === void 0 ? void 0 : tAssistiveHint())) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AutoCompleteInput, _extends({
-        "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",
-        isFocused: componentIsFocused,
-        id: id,
-        onClick: function onClick(event) {
-          return _this8.handleInputClick(event);
-        },
-        onBlur: this.handleAutoCompleteBlur,
-        onChange: this.handleInputChange,
-        onFocus: this.handleInputFocus,
-        name: name,
-        placeholder: placeholder,
-        ref: function ref(inputElement) {
-          _this8.elementReferences[-1] = inputElement;
-        },
-        role: "combobox",
-        required: required,
-        value: query
-      })), _ref3, /*#__PURE__*/React.createElement(AutoCompleteResultList, {
-        isVisible: menuIsVisible,
-        onMouseLeave: function onMouseLeave() {
-          return _this8.handleListMouseLeave();
-        },
-        id: "".concat(id, "__listbox"),
-        role: "listbox"
-      }, showAutoCompleteResultListItems(options, false), showNoOptionsFound && /*#__PURE__*/React.createElement(AutoCompleteResultListItem, {
-        empty: true
-      }, tNoResults === null || tNoResults === void 0 ? void 0 : tNoResults())), /*#__PURE__*/React.createElement(AutoCompleteAssistiveHint, {
-        id: assistiveHintID
-      }, tAssistiveHint === null || tAssistiveHint === void 0 ? void 0 : tAssistiveHint())));
+        return /*#__PURE__*/ react.createElement(AutoCompleteContainer, {
+            onKeyDown: this.handleKeyDown,
+            width: width
+        }, /*#__PURE__*/ react.createElement(Status, {
+            id: id,
+            length: options.length,
+            queryLength: query.length,
+            minQueryLength: minLength,
+            selectedOption: this.templateInputValue(options[selected]),
+            selectedOptionIndex: selected,
+            validChoiceMade: validChoiceMade,
+            isInFocus: null !== this.state.focused,
+            tQueryTooShort: tStatusQueryTooShort,
+            tNoResults: tStatusNoResults,
+            tSelectedOption: tStatusSelectedOption,
+            tResults: tStatusResults
+        }), multiple && !autoselect ? /*#__PURE__*/ react.createElement(AutoCompleteMultipleInputContainer, {
+            isFocused: componentIsFocused,
+            numberOfSelected: this.props.numberOfSelected
+        }, /*#__PURE__*/ react.createElement(ChipContainer, null, this.state.selectedValues.map((value, index)=>/*#__PURE__*/ react.createElement(Chip, {
+                key: index,
+                onDelete: ()=>{
+                    this.setState((prevState)=>({
+                            selectedValues: prevState.selectedValues.filter((v)=>{
+                                if ('string' == typeof v) return v !== value;
+                                return v.value !== value.value;
+                            })
+                        }), ()=>{
+                        this.props.onConfirm?.(this.state.selectedValues);
+                    });
+                }
+            }, 'string' == typeof value ? value : value.label.primary)), !componentIsFocused && 'number' == typeof this.props.numberOfSelected && this.state.selectedValues.length > this.props.numberOfSelected && /*#__PURE__*/ react.createElement(NormalText, {
+            fontWeight: "bold",
+            margin: 0
+        }, "+", this.state.selectedValues.length - this.props.numberOfSelected)), /*#__PURE__*/ react.createElement(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: id,
+            onClick: (event)=>this.handleInputClick(event),
+            onBlur: (event)=>this.handleAutoCompleteBlur(event),
+            onChange: this.handleInputChange,
+            onFocus: this.handleInputFocus,
+            name: name,
+            placeholder: hintValue || placeholder,
+            ref: (inputElement)=>{
+                this.elementReferences[-1] = inputElement;
+            },
+            role: "combobox",
+            required: required,
+            value: query
+        }), /*#__PURE__*/ react.createElement(Button, {
+            id: `${id}__button-arrow`,
+            ref: (buttonElement)=>{
+                this.elementReferences['button-arrow'] = buttonElement;
+            },
+            variant: "link",
+            onClick: ()=>{
+                if (this.state.menuOpen) this.setState({
+                    menuOpen: false,
+                    focused: null
+                });
+                else source(query, (options)=>{
+                    const optionsAvailable = options.length > 0;
+                    this.setState({
+                        menuOpen: optionsAvailable,
+                        options,
+                        selected: -1,
+                        validChoiceMade: false
+                    });
+                });
+            },
+            onBlur: (event)=>this.handleAutoCompleteBlur(event)
+        }, /*#__PURE__*/ react.createElement(CaretIcon, {
+            direction: "down",
+            size: "md"
+        })), /*#__PURE__*/ react.createElement(AutoCompleteResultList, {
+            isVisible: menuIsVisible,
+            onMouseLeave: ()=>this.handleListMouseLeave(),
+            id: `${id}__listbox`,
+            role: "listbox"
+        }, /*#__PURE__*/ react.createElement(Checkbox, null, showAutoCompleteResultListItems(options, multiple)), showNoOptionsFound && /*#__PURE__*/ react.createElement(AutoCompleteResultListItem, {
+            empty: true
+        }, tNoResults?.())), /*#__PURE__*/ react.createElement(AutoCompleteAssistiveHint, {
+            id: assistiveHintID
+        }, tAssistiveHint?.())) : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(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: id,
+            onClick: (event)=>this.handleInputClick(event),
+            onBlur: this.handleAutoCompleteBlur,
+            onChange: this.handleInputChange,
+            onFocus: this.handleInputFocus,
+            name: name,
+            placeholder: hintValue || placeholder,
+            ref: (inputElement)=>{
+                this.elementReferences[-1] = inputElement;
+            },
+            role: "combobox",
+            required: required,
+            value: query
+        }), /*#__PURE__*/ react.createElement(CaretIcon, {
+            direction: "down",
+            size: "md"
+        }), /*#__PURE__*/ react.createElement(AutoCompleteResultList, {
+            isVisible: menuIsVisible,
+            onMouseLeave: ()=>this.handleListMouseLeave(),
+            id: `${id}__listbox`,
+            role: "listbox"
+        }, showAutoCompleteResultListItems(options, false), showNoOptionsFound && /*#__PURE__*/ react.createElement(AutoCompleteResultListItem, {
+            empty: true
+        }, tNoResults?.())), /*#__PURE__*/ react.createElement(AutoCompleteAssistiveHint, {
+            id: assistiveHintID
+        }, tAssistiveHint?.())));
     }
-  }]);
-  return AutoComplete;
-}(Component);
-AutoComplete.defaultProps = {
-  width: 'full',
-  autoselect: false,
-  minLength: 0,
-  name: 'ds-input-autocomplete',
-  placeholder: '',
-  onConfirm: function onConfirm() {
-    return;
-  },
-  confirmOnBlur: 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.';
-  }
-};
-export { AutoComplete as default };
-export { AutoComplete, AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteContainer, AutoCompleteAssistiveHint, AutoCompleteMultipleInputContainer, AutoCompleteMultipleInput };
+}
+export { AutoComplete, AutoCompleteAssistiveHint, AutoCompleteContainer, AutoCompleteInputBase, AutoCompleteMultipleInput, AutoCompleteMultipleInputContainer, AutoCompleteResultList, AutoCompleteResultListItem, AutoComplete as default };