@entur/dropdown 7.1.1-beta.0 → 7.1.1

package/dist/dropdown.cjs.development.js

@@ -573,6 +573,7 @@ var DropdownFieldAppendix = /*#__PURE__*/React.forwardRef(function (_ref3, ref)
     ref: ref,
     "aria-label": getToggleAriaLabel()
   }, rest, {
+    type: "button",
     tabIndex: focusable ? 0 : -1
   }), !loading ? React.createElement(icons.DownArrowIcon, {
     "aria-hidden": "true"
@@ -985,22 +986,20 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       case downshift.useCombobox.stateChangeTypes.InputChange:
         {
           var _changes$inputValue;
-          setLastHighlightedIndex(0);
           var leadingWhitespaceTest = /^\s+/g;
           var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
+          if (!isSpacePressedOnEmptyInput) setLastHighlightedIndex(0);
           if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
             var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
             if (isSpacePressedOnEmptyInput) {
               if (!state.isOpen) return _extends({}, changes, {
                 inputValue: sanitizedInputValue,
-                isOpen: true,
-                highlightedIndex: 0
+                isOpen: true
               });
               if (changes.highlightedIndex !== undefined) {
                 return _extends({}, changes, {
                   inputValue: sanitizedInputValue,
-                  selectedItem: listItems[changes.highlightedIndex],
-                  highlightedIndex: 0
+                  selectedItem: listItems[changes.highlightedIndex]
                 });
               }
             }
@@ -1036,6 +1035,7 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }));
       }
     }),
+    closeMenu = _useCombobox.closeMenu,
     isOpen = _useCombobox.isOpen,
     getToggleButtonProps = _useCombobox.getToggleButtonProps,
     getLabelProps = _useCombobox.getLabelProps,
@@ -1147,15 +1147,23 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'eds-dropdown__input--hidden': showSelectedItem
     })
   }, getInputProps({
+    onKeyDown: function onKeyDown(e) {
+      if (isOpen && e.key === 'Tab') {
+        var highlitedItem = listItems[highlightedIndex];
+        // we don't want to clear selection with tab
+        if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
+          onChange == null || onChange(highlitedItem);
+        }
+        closeMenu();
+        e.preventDefault();
+      }
+    },
     onBlur: function onBlur() {
       if (selectedItem !== null) setShowSelectedItem(true);
     },
     onFocus: function onFocus() {
       setShowSelectedItem(false);
     },
-    onKeyDown: function onKeyDown(e) {
-      if (isOpen && (selectOnTab || selectOnBlur) && e.key === 'Tab' && highlightedIndex !== undefined) onChange(listItems[highlightedIndex]);
-    },
     disabled: disabled,
     readOnly: readOnly,
     placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder,
@@ -1180,7 +1188,7 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "labelTooltip", "listStyle", "loading", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
 var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _inputRef$current4;
+  var _inputRef$current5;
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? true : _ref$clearable,
@@ -1308,6 +1316,7 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
     getDropdownProps = _useMultipleSelection.getDropdownProps;
   var stateReducer = React.useCallback(function (state, _ref5) {
+    var _inputRef$current;
     var changes = _ref5.changes,
       type = _ref5.type;
     if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
@@ -1316,6 +1325,7 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     switch (type) {
       // reset input value when leaving input field
       case downshift.useCombobox.stateChangeTypes.InputBlur:
+        if (state.isOpen) (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
         return _extends({}, changes, {
           inputValue: EMPTY_INPUT
         });
@@ -1323,18 +1333,18 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
       case downshift.useCombobox.stateChangeTypes.ItemClick:
         {
-          var _inputRef$current$val, _inputRef$current;
+          var _inputRef$current$val, _inputRef$current2;
           return _extends({}, changes, {
             isOpen: true,
-            inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null || (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : EMPTY_INPUT
+            inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val : EMPTY_INPUT
           });
         }
       // edit input value when selected items is updated outside component
       case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
-          var _inputRef$current$val2, _inputRef$current2;
+          var _inputRef$current$val2, _inputRef$current3;
           return _extends({}, changes, {
-            inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
+            inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
           });
         }
       // remove leading whitespace, select item with spacebar if input is empty and filter list items
@@ -1441,10 +1451,10 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [isOpen, refs.reference, refs.floating, update]);
   var handleOnClear = function handleOnClear() {
-    var _inputRef$current3;
+    var _inputRef$current4;
     onChange([]);
     setInputValue(EMPTY_INPUT);
-    (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
+    (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.focus();
     updateListItems({
       inputValue: inputValue
     });
@@ -1497,7 +1507,7 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'eds-dropdown--multiselect__selected-items-and-input--filled': hasSelectedItems
     })
   }, selectedItems.length > 1 ? React.createElement(a11y.VisuallyHidden, {
-    onClick: (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus
+    onClick: (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus
   }, ariaLabelJumpToInput) : null, selectedItems.length <= maxChips ? selectedItems.map(function (selectedItem, index) {
     return React.createElement(SelectedItemTag, {
       ariaLabelChosen: ariaLabelChosenSingular,
@@ -1508,12 +1518,12 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       key: (selectedItem == null ? void 0 : selectedItem.label) + (typeof (selectedItem == null ? void 0 : selectedItem.value) === 'string' ? selectedItem.value : ''),
       readOnly: readOnly,
       removeSelectedItem: function removeSelectedItem() {
-        var _inputRef$current5;
+        var _inputRef$current6;
         handleListItemClicked({
           clickedItem: selectedItem,
           onChange: onChange
         });
-        inputRef == null || (_inputRef$current5 = inputRef.current) == null || _inputRef$current5.focus();
+        inputRef == null || (_inputRef$current6 = inputRef.current) == null || _inputRef$current6.focus();
       },
       selectedItem: selectedItem
     });
@@ -1624,6 +1634,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       itemToString: itemToString
     }),
+    closeMenu = _useSelect.closeMenu,
     isOpen = _useSelect.isOpen,
     getItemProps = _useSelect.getItemProps,
     getLabelProps = _useSelect.getLabelProps,
@@ -1687,7 +1698,15 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: undefined,
     tabIndex: disabled || readOnly ? -1 : 0,
     onKeyDown: function onKeyDown(e) {
-      if (isOpen && (selectOnTab || selectOnBlur) && e.key === 'Tab' && highlightedIndex !== undefined) onChange == null || onChange(normalizedItems[highlightedIndex]);
+      if (isOpen && e.key === 'Tab') {
+        var highlitedItem = normalizedItems[highlightedIndex];
+        // we don't want to clear selection with tab
+        if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
+          onChange == null || onChange(highlitedItem);
+        }
+        closeMenu();
+        e.preventDefault();
+      }
     }
   }), {
     after: React.createElement(DropdownList, {