@digigov/ui 0.21.1 → 0.22.0

package/esm/admin/AutoComplete/index.js

@@ -0,0 +1,676 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import AutoCompleteInput from '@digigov/react-extensions/admin/AutoCompleteInput';
+import AutoCompleteInputTypeahead from '@digigov/react-extensions/admin/AutoCompleteInputTypeahead';
+import AutoCompleteNoResult from '@digigov/react-extensions/admin/AutoCompleteNoResult';
+import AutoCompleteResultList from '@digigov/react-extensions/admin/AutoCompleteResultList';
+import AutoCompleteResultListItem from '@digigov/react-extensions/admin/AutoCompleteResultListItem';
+import AutoCompleteWrapper from '@digigov/react-extensions/admin/AutoCompleteWrapper';
+import AutoCompleteAssistiveHint from '@digigov/react-extensions/admin/AutoCompleteAssistiveHint';
+import { Component } from 'react';
+import Status from '@digigov/ui/admin/AutoComplete/Status';
+import DropdownArrowDown from '@digigov/react-extensions/admin/DropdownArrowDown';
+/* const IS_PREACT = process.env.COMPONENT_LIBRARY === 'PREACT'; */
+
+/* const IS_REACT = process.env.COMPONENT_LIBRARY === 'REACT'; */
+
+var keyCodes = {
+  13: 'enter',
+  27: 'escape',
+  32: 'space',
+  38: 'up',
+  40: 'down'
+};
+
+function isIosDevice() {
+  return typeof navigator !== 'undefined' && !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));
+}
+
+function isPrintableKeyCode(keyCode) {
+  return keyCode > 47 && keyCode < 58 || // number keys
+  keyCode === 32 || keyCode === 8 || // spacebar or backspace
+  keyCode > 64 && keyCode < 91 || // letter keys
+  keyCode > 95 && keyCode < 112 || // numpad keys
+  keyCode > 185 && keyCode < 193 || // ;=,-./` (in order)
+  keyCode > 218 && keyCode < 223 // [\]' (in order)
+  ;
+}
+
+var AutoComplete = /*#__PURE__*/function (_Component) {
+  _inherits(AutoComplete, _Component);
+
+  var _super = _createSuper(AutoComplete);
+
+  function AutoComplete(props) {
+    var _this;
+
+    _classCallCheck(this, AutoComplete);
+
+    _this = _super.call(this, props);
+    _this.elementReferences = {};
+    _this.$pollInput = void 0;
+    _this.state = {
+      focused: null,
+      hovered: null,
+      menuOpen: false,
+      options: props.defaultValue ? [props.defaultValue] : [],
+      query: props.defaultValue,
+      validChoiceMade: false,
+      selected: null,
+      ariaHint: true
+    };
+    _this.handleComponentBlur = _this.handleComponentBlur.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));
+    _this.handleOptionBlur = _this.handleOptionBlur.bind(_assertThisInitialized(_this));
+    _this.handleOptionClick = _this.handleOptionClick.bind(_assertThisInitialized(_this));
+    _this.handleOptionFocus = _this.handleOptionFocus.bind(_assertThisInitialized(_this));
+    _this.handleOptionMouseDown = _this.handleOptionMouseDown.bind(_assertThisInitialized(_this));
+    _this.handleOptionMouseEnter = _this.handleOptionMouseEnter.bind(_assertThisInitialized(_this));
+    _this.handleInputBlur = _this.handleInputBlur.bind(_assertThisInitialized(_this));
+    _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_this));
+    _this.handleInputFocus = _this.handleInputFocus.bind(_assertThisInitialized(_this));
+    _this.pollInputElement = _this.pollInputElement.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;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.pollInputElement();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.$pollInput);
+    } // 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);
+    }
+  }, {
+    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
+          }
+        });
+      }
+    }
+  }, {
+    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;
+    } // 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;
+    }
+  }, {
+    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)
+      });
+    }
+  }, {
+    key: "handleListMouseLeave",
+    value: function handleListMouseLeave() {
+      this.setState({
+        hovered: null
+      });
+    }
+  }, {
+    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 && 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 && isIosDevice();
+        var newQuery = isIosDevice() ? query : this.templateInputValue(options[selected]);
+        this.handleComponentBlur({
+          menuOpen: keepMenuOpen,
+          query: newQuery
+        });
+      }
+    }
+  }, {
+    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;
+      this.setState({
+        query: query,
+        ariaHint: queryEmpty
+      });
+      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);
+    }
+  }, {
+    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.setState({
+          focused: -1
+        });
+      }
+    }
+  }, {
+    key: "handleOptionFocus",
+    value: function handleOptionFocus(index) {
+      this.setState({
+        focused: index,
+        hovered: null,
+        selected: index
+      });
+    }
+  }, {
+    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
+        });
+      }
+    }
+  }, {
+    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
+      event.preventDefault();
+    }
+  }, {
+    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;
+
+      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
+          });
+        });
+      } 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
+          });
+        });
+      }
+
+      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);
+        }
+      }
+    }
+  }, {
+    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();
+      }
+    }
+  }, {
+    key: "handleKeyDown",
+    value: function 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
+          });
+          break;
+
+        default:
+          if (isPrintableKeyCode(event.keyCode)) {
+            this.handlePrintableKey(event);
+          }
+
+          break;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this7 = this;
+
+      var _this$props4 = this.props,
+          id = _this$props4.id,
+          cellWidth = _this$props4.cellWidth,
+          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,
+          dropdownArrowFactory = _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 = "govgr-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;
+      var dropdownArrow; // we only need a dropdown arrow if showAllValues is set to a truthy value
+
+      if (showAllValues) {
+        dropdownArrow = dropdownArrowFactory({
+          className: dropdownArrowClassName
+        }); // if the factory returns a string we'll render this as HTML (usage w/o (P)React)
+
+        if (typeof dropdownArrow === 'string') {
+          dropdownArrow = /*#__PURE__*/React.createElement("div", {
+            className: "autocomplete__dropdown-arrow-down-wrapper",
+            dangerouslySetInnerHTML: {
+              __html: dropdownArrow
+            }
+          });
+        }
+      }
+
+      return /*#__PURE__*/React.createElement(AutoCompleteWrapper, {
+        onKeyDown: this.handleKeyDown,
+        cellWidth: cellWidth
+      }, /*#__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 && /*#__PURE__*/React.createElement(AutoCompleteInputTypeahead, {
+        value: hintValue
+      }), /*#__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,
+        showAllValues: this.props.showAllValues,
+        id: id,
+        onClick: function onClick(event) {
+          return _this7.handleInputClick(event);
+        },
+        onBlur: this.handleInputBlur,
+        onChange: this.handleInputChange,
+        onFocus: this.handleInputFocus,
+        name: name,
+        placeholder: placeholder,
+        ref: function ref(inputElement) {
+          _this7.elementReferences[-1] = inputElement;
+        },
+        role: "combobox",
+        required: required,
+        value: query
+      })), dropdownArrow, /*#__PURE__*/React.createElement(AutoCompleteResultList, {
+        displayMenu: displayMenu,
+        isVisible: menuIsVisible,
+        onMouseLeave: function onMouseLeave() {
+          return _this7.handleListMouseLeave();
+        },
+        id: "".concat(id, "__listbox"),
+        role: "listbox"
+      }, options.map(function (option, index) {
+        var showFocused = focused === -1 ? selected === index : focused === index;
+        var iosPosinsetHtml = isIosDevice() ? "<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">' + " ".concat(index + 1, " of ").concat(options.length, "</span>") : '';
+        return /*#__PURE__*/React.createElement(AutoCompleteResultListItem, {
+          isFocused: showFocused,
+          isHovered: hovered,
+          index: index,
+          "aria-selected": focused === index ? 'true' : 'false',
+          dangerouslySetInnerHTML: {
+            __html: _this7.templateSuggestion(option) + iosPosinsetHtml
+          },
+          id: "".concat(id, "__option--").concat(index),
+          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
+        });
+      }), showNoOptionsFound && /*#__PURE__*/React.createElement(AutoCompleteNoResult, null, tNoResults === null || tNoResults === void 0 ? void 0 : tNoResults())), /*#__PURE__*/React.createElement(AutoCompleteAssistiveHint, {
+        id: assistiveHintID
+      }, tAssistiveHint === null || tAssistiveHint === void 0 ? void 0 : tAssistiveHint()));
+    }
+  }]);
+
+  return AutoComplete;
+}(Component);
+
+AutoComplete.defaultProps = {
+  cellWidth: 'one-third',
+  autoselect: false,
+  defaultValue: '',
+  displayMenu: 'overlay',
+  minLength: 0,
+  name: 'govgr-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: DropdownArrowDown
+};
+export { AutoComplete as default };
+export { AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteNoResult, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteWrapper, AutoCompleteAssistiveHint };