@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-0edebf87

package/form/AutoComplete/index.js

@@ -14,10 +14,24 @@ 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 AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
+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) {
@@ -25,33 +39,41 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, AutoComplete);
     _this = _callSuper(this, AutoComplete, [props]);
     _this.elementReferences = {};
-    _this.$pollInput = void 0;
-    _this.state = {
+    var customState = {};
+    if (Array.isArray(props.defaultValue)) {
+      customState.selectedValues = props.defaultValue;
+    } else if (props.defaultValue) {
+      customState.selectedValues = [props.defaultValue];
+    }
+    _this.state = _extends({
       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
-    };
+    }, 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));
-    _this.handleOptionBlur = _this.handleOptionBlur.bind(_assertThisInitialized(_this));
-    _this.handleOptionClick = _this.handleOptionClick.bind(_assertThisInitialized(_this));
+    if (_this.props.multiple) {
+      _this.handleOptionClick = _this.handleOptionClickMultiple.bind(_assertThisInitialized(_this));
+    } else {
+      _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;
   }
@@ -66,32 +88,14 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
   }, {
     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 _this$state$query;
       var inputReference = this.elementReferences[-1];
-      var queryHasChanged = inputReference && inputReference.value !== this.state.query;
+      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: {
@@ -137,7 +141,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
     key: "templateSuggestion",
     value: function templateSuggestion(value) {
       var suggestionTemplate = this.props.templates && this.props.templates.suggestion;
-      return suggestionTemplate ? suggestionTemplate(value) : value;
+      return suggestionTemplate ? suggestionTemplate(value, this.state.query) : value;
     }
   }, {
     key: "handleComponentBlur",
@@ -149,14 +153,14 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       var newQuery;
       if (this.props.confirmOnBlur) {
         var _this$props$onConfirm, _this$props;
-        newQuery = newState.query || query;
+        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.menuOpen || false,
+        menuOpen: (newState === null || newState === void 0 ? void 0 : newState.menuOpen) || false,
         query: newQuery,
         selected: null,
         validChoiceMade: this.isQueryAnOption(newQuery, options)
@@ -170,40 +174,33 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       });
     }
   }, {
-    key: "handleOptionBlur",
-    value: function handleOptionBlur(event, index) {
+    key: "handleAutoCompleteBlur",
+    value: function handleAutoCompleteBlur(event, index) {
       var _this$state2 = this.state,
         focused = _this$state2.focused,
-        menuOpen = _this$state2.menuOpen,
         options = _this$state2.options,
+        query = _this$state2.query,
         selected = _this$state2.selected;
-      var focusingOutsideComponent = event.relatedTarget === null;
+      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 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])
-        });
+      var focusingButtonArrow = this.elementReferences['button-arrow'] === event.relatedTarget || false;
+      var focusingAnotherOption = focused !== null && focused !== -1;
+      if (index !== undefined) {
+        focusingAnotherOption = focused !== index && focused !== -1;
       }
-    }
-  }, {
-    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();
+      // 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: keepMenuOpen,
+          menuOpen: false,
           query: newQuery
         });
       }
@@ -211,37 +208,27 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleInputChange",
     value: function handleInputChange(event) {
-      var _this4 = this;
+      var _this3 = this;
       var _this$props2 = this.props,
-        minLength = _this$props2.minLength,
         source = _this$props2.source,
-        showAllValues = _this$props2.showAllValues;
+        minLength = _this$props2.minLength;
       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
-          });
+      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
         });
-      } else if (queryEmpty || !queryLongEnough) {
-        this.setState({
-          menuOpen: false,
-          options: []
-        });
-      }
+      });
     }
   }, {
     key: "handleInputClick",
@@ -251,10 +238,12 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleInputFocus",
     value: function handleInputFocus() {
-      var _this$state4 = this.state,
-        query = _this$state4.query,
-        validChoiceMade = _this$state4.validChoiceMade,
-        options = _this$state4.options;
+      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) {
@@ -267,8 +256,11 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           };
         });
       } else {
-        this.setState({
-          focused: -1
+        source(query, function (options) {
+          _this4.setState({
+            focused: -1,
+            options: options
+          });
         });
       }
     }
@@ -292,18 +284,43 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         });
       }
     }
+  }, {
+    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$onConfirm2, _this$props3;
+      var _this$props$onConfirm3, _this$props4;
       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$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
       });
@@ -324,9 +341,9 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
     key: "handleUpArrow",
     value: function handleUpArrow(event) {
       event.preventDefault();
-      var _this$state5 = this.state,
-        menuOpen = _this$state5.menuOpen,
-        selected = _this$state5.selected;
+      var _this$state4 = this.state,
+        menuOpen = _this$state4.menuOpen,
+        selected = _this$state4.selected;
       var isNotAtTop = selected !== -1;
       var allowMoveUp = isNotAtTop && menuOpen;
       if (allowMoveUp) {
@@ -339,7 +356,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       var _this5 = this;
       event.preventDefault();
       // if not open, open
-      if (this.props.showAllValues && this.state.menuOpen === false) {
+      if (this.state.menuOpen === false) {
         event.preventDefault();
         this.props.source('', function (options) {
           _this5.setState({
@@ -351,10 +368,10 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           });
         });
       } else if (this.state.menuOpen === true) {
-        var _this$state6 = this.state,
-          menuOpen = _this$state6.menuOpen,
-          _options = _this$state6.options,
-          selected = _this$state6.selected;
+        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) {
@@ -367,7 +384,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
     value: function handleSpace(event) {
       var _this6 = this;
       // if not open, open
-      if (this.props.showAllValues && this.state.menuOpen === false && this.state.query === '') {
+      if (this.state.menuOpen === false && this.state.query === '') {
         event.preventDefault();
         this.props.source('', function (options) {
           _this6.setState({
@@ -390,6 +407,12 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         var hasSelectedOption = this.state.selected >= 0;
         if (hasSelectedOption) {
           this.handleOptionClick(this.state.selected);
+          if (this.props.multiple) {
+            this.setState({
+              menuOpen: false,
+              focused: -1
+            });
+          }
         }
       }
     }
@@ -408,6 +431,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleKeyDown",
     value: function handleKeyDown(event) {
+      var _this7 = this;
       switch (keyCodes[event.keyCode]) {
         case 'up':
           this.handleUpArrow(event);
@@ -426,6 +450,24 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
             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;
+            }
+          } 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);
@@ -436,40 +478,39 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
   }, {
     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 _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 = this.props.showNoOptionsFound && inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
+      var 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]);
@@ -479,7 +520,57 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       var ariaDescribedProp = ariaHint ? {
         'aria-describedby': assistiveHintID
       } : null;
-      return /*#__PURE__*/React.createElement(AutoCompleteWrapper, {
+      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);
+          });
+        }
+      };
+      return /*#__PURE__*/React.createElement(AutoCompleteContainer, {
         onKeyDown: this.handleKeyDown,
         width: width
       }, /*#__PURE__*/React.createElement(Status, {
@@ -495,106 +586,139 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         tNoResults: tStatusNoResults,
         tSelectedOption: tStatusSelectedOption,
         tResults: tStatusResults
-      }), hintValue && /*#__PURE__*/React.createElement(AutoCompleteInputTypeahead, {
+      }), hintValue && (placeholder === '' || !placeholder) && /*#__PURE__*/React.createElement(AutoCompleteInputTypeahead, {
         value: hintValue
-      }), /*#__PURE__*/React.createElement(AutoCompleteInput, _extends({
+      }), 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,
-        showAllValues: this.props.showAllValues,
+        autoComplete: "off"
+        // isFocused={componentIsFocused}
+        ,
         id: id,
         onClick: function onClick(event) {
-          return _this7.handleInputClick(event);
+          return _this8.handleInputClick(event);
+        },
+        onBlur: function onBlur(event) {
+          return _this8.handleAutoCompleteBlur(event);
         },
-        onBlur: this.handleInputBlur,
         onChange: this.handleInputChange,
         onFocus: this.handleInputFocus,
         name: name,
         placeholder: placeholder,
         ref: function ref(inputElement) {
-          _this7.elementReferences[-1] = inputElement;
+          _this8.elementReferences[-1] = inputElement;
         },
         role: "combobox",
         required: required,
         value: query
-      })), showNoOptionsFound || showAllValues && !menuOpen && DropdownArrow && /*#__PURE__*/React.createElement(DropdownArrow, {
-        type: "button",
+      })), /*#__PURE__*/React.createElement(Button, {
+        ref: function ref(buttonElement) {
+          _this8.elementReferences['button-arrow'] = buttonElement;
+        },
+        variant: "link",
         onClick: function onClick() {
-          _this7.elementReferences[-1].focus();
-          _this7.handleInputChange({
-            target: {
-              value: query
-            }
-          });
+          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
+            });
+          }
         },
-        className: dropdownArrowClassName
-      }), /*#__PURE__*/React.createElement(AutoCompleteResultList, {
-        displayMenu: displayMenu,
+        onBlur: function onBlur(event) {
+          return _this8.handleAutoCompleteBlur(event);
+        }
+      }, _ref2), /*#__PURE__*/React.createElement(AutoCompleteResultList, {
         isVisible: menuIsVisible,
         onMouseLeave: function onMouseLeave() {
-          return _this7.handleListMouseLeave();
+          return _this8.handleListMouseLeave();
         },
         id: "".concat(id, "__listbox"),
         role: "listbox"
-      }, 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 _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.createElement(AutoCompleteResultListItem, {
+      }, /*#__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()));
+      }, 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 AutoComplete;
 }(Component);
 AutoComplete.defaultProps = {
-  width: '33.3%',
+  width: 'full',
   autoselect: false,
-  defaultValue: '',
-  displayMenu: 'overlay',
   minLength: 0,
   name: 'ds-input-autocomplete',
   placeholder: '',
@@ -602,21 +726,13 @@ AutoComplete.defaultProps = {
     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.createElement(CaretIcon, _extends({
-      direction: "down",
-      size: "sm"
-    }, props));
   }
 };
 export { AutoComplete as default };
-export { AutoComplete, AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteWrapper, AutoCompleteAssistiveHint };
+export { AutoComplete, AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteContainer, AutoCompleteAssistiveHint, AutoCompleteMultipleInputContainer, AutoCompleteMultipleInput };