@entur/dropdown 7.2.2 → 7.3.0

package/dist/dropdown.esm.js

@@ -421,7 +421,9 @@ var DropdownList = function DropdownList(_ref) {
       checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
       className: "eds-dropdown__list__item__checkbox",
       tabIndex: -1,
-      readOnly: true
+      onChange: function onChange() {
+        return undefined;
+      }
     }), React.createElement("span", {
       className: "eds-dropdown__list__item__text",
       "aria-label": ariaValuesSelectAll().label
@@ -436,7 +438,9 @@ var DropdownList = function DropdownList(_ref) {
       checked: isItemSelected(item),
       className: "eds-dropdown__list__item__checkbox",
       tabIndex: -1,
-      readOnly: true
+      onChange: function onChange() {
+        return undefined;
+      }
     }), React.createElement("span", {
       className: "eds-dropdown__list__item__text"
     }, item.label, React.createElement(VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), Array.isArray(item.icons) ? item.icons.filter(isReactComponent).map(function (Icon, index) {
@@ -1035,9 +1039,8 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           inputValue: changes.inputValue
         });
       },
-      onStateChange: function onStateChange(_ref6) {
+      onSelectedItemChange: function onSelectedItemChange(_ref6) {
         var newSelectedItem = _ref6.selectedItem;
-        if (newSelectedItem === undefined) return;
         onChange(newSelectedItem);
       },
       // Accessibility
@@ -1047,7 +1050,6 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }));
       }
     }),
-    closeMenu = _useCombobox.closeMenu,
     isOpen = _useCombobox.isOpen,
     getToggleButtonProps = _useCombobox.getToggleButtonProps,
     getLabelProps = _useCombobox.getLabelProps,
@@ -1057,7 +1059,9 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     getItemProps = _useCombobox.getItemProps,
     selectedItem = _useCombobox.selectedItem,
     inputValue = _useCombobox.inputValue,
-    setInputValue = _useCombobox.setInputValue;
+    setInputValue = _useCombobox.setInputValue,
+    selectItem = _useCombobox.selectItem,
+    reset = _useCombobox.reset;
   // calculations for floating-UI popover position
   var _useFloating = useFloating({
       open: isOpen,
@@ -1094,13 +1098,8 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [isOpen, refs.reference, refs.floating, update]);
   var handleOnClear = function handleOnClear() {
     var _inputRef$current;
-    onChange(null);
-    setInputValue(EMPTY_INPUT);
     (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
-    updateListItems({
-      inputValue: inputValue
-    });
-    setShowSelectedItem(false);
+    reset();
   };
   return React.createElement(BaseFormControl, _extends({
     className: classNames('eds-dropdown', 'eds-dropdown--searchable', className, {
@@ -1165,10 +1164,8 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         var highlitedItem = listItems[highlightedIndex];
         // we don't want to clear selection with tab
         if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-          onChange == null || onChange(highlitedItem);
+          selectItem(highlitedItem);
         }
-        closeMenu();
-        e.preventDefault();
       }
     },
     onBlur: function onBlur() {
@@ -1203,7 +1200,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$current5;
+  var _inputRef$current4;
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? true : _ref$clearable,
@@ -1317,21 +1314,25 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     hasSelectedItems = _useMultiselectUtils.hasSelectedItems,
     handleListItemClicked = _useMultiselectUtils.handleListItemClicked,
-    selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState;
+    selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState,
+    clickedItemIsInSelectedItems = _useMultiselectUtils.clickedItemIsInSelectedItems,
+    clickedItemIsSelectAll = _useMultiselectUtils.clickedItemIsSelectAll;
   var _useMultipleSelection = useMultipleSelection({
       selectedItems: selectedItems,
       // @ts-expect-error prop missing from library types
       itemToString: itemToString,
       itemToKey: itemToKey,
-      onStateChange: function onStateChange(_ref4) {
+      onSelectedItemsChange: function onSelectedItemsChange(_ref4) {
         var newSelectedItems = _ref4.selectedItems;
-        if (newSelectedItems !== undefined) onChange(newSelectedItems);
+        onChange(newSelectedItems);
       }
     }),
     getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
-    getDropdownProps = _useMultipleSelection.getDropdownProps;
+    getDropdownProps = _useMultipleSelection.getDropdownProps,
+    reset = _useMultipleSelection.reset,
+    _removeSelectedItem = _useMultipleSelection.removeSelectedItem,
+    setSelectedItems = _useMultipleSelection.setSelectedItems;
   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) {
@@ -1340,7 +1341,6 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     switch (type) {
       // reset input value when leaving input field
       case useCombobox.stateChangeTypes.InputBlur:
-        if (state.isOpen) (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
         return _extends({}, changes, {
           inputValue: EMPTY_INPUT
         });
@@ -1348,18 +1348,18 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.ItemClick:
         {
-          var _inputRef$current$val, _inputRef$current2;
+          var _inputRef$current$val, _inputRef$current;
           return _extends({}, changes, {
             isOpen: true,
-            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
+            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
           });
         }
       // edit input value when selected items is updated outside component
       case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
-          var _inputRef$current$val2, _inputRef$current3;
+          var _inputRef$current$val2, _inputRef$current2;
           return _extends({}, changes, {
-            inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
+            inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
           });
         }
       // remove leading whitespace, select item with spacebar if input is empty and filter list items
@@ -1404,13 +1404,13 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         setHighlightedIndex(hideSelectAll ? 0 : 1);
         setLastHighlightedIndex(hideSelectAll ? 0 : 1);
       },
-      onStateChange: function onStateChange(_ref6) {
+      onSelectedItemChange: function onSelectedItemChange(_ref6) {
         var clickedItem = _ref6.selectedItem;
         // clickedItem means item chosen either via mouse or keyboard
         if (!clickedItem) return;
         handleListItemClicked({
           clickedItem: clickedItem,
-          onChange: onChange
+          onChange: setSelectedItems
         });
       },
       // Accessibility
@@ -1466,13 +1466,9 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [isOpen, refs.reference, refs.floating, update]);
   var handleOnClear = function handleOnClear() {
-    var _inputRef$current4;
-    onChange([]);
-    setInputValue(EMPTY_INPUT);
-    (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.focus();
-    updateListItems({
-      inputValue: inputValue
-    });
+    var _inputRef$current3;
+    (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
+    reset();
   };
   return React.createElement(BaseFormControl, _extends({
     className: classNames('eds-dropdown', 'eds-dropdown--multiselect', className, {
@@ -1523,7 +1519,7 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'eds-dropdown--multiselect__selected-items-and-input--filled': hasSelectedItems
     })
   }, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
-    onClick: (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus
+    onClick: (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus
   }, ariaLabelJumpToInput) : null, selectedItems.length <= maxChips ? selectedItems.map(function (selectedItem, index) {
     return React.createElement(SelectedItemTag, {
       ariaLabelChosen: ariaLabelChosenSingular,
@@ -1534,12 +1530,9 @@ 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$current6;
-        handleListItemClicked({
-          clickedItem: selectedItem,
-          onChange: onChange
-        });
-        inputRef == null || (_inputRef$current6 = inputRef.current) == null || _inputRef$current6.focus();
+        var _inputRef$current5;
+        _removeSelectedItem(selectedItem);
+        inputRef == null || (_inputRef$current5 = inputRef.current) == null || _inputRef$current5.focus();
       },
       selectedItem: selectedItem
     });
@@ -1554,13 +1547,14 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown: function onKeyDown(e) {
       if (selectOnTab && isOpen && e.key === 'Tab') {
         var highlitedItem = listItems[highlightedIndex];
-        // we don't want to clear selection with tab
-        if (highlitedItem) {
-          handleListItemClicked({
-            clickedItem: highlitedItem,
-            onChange: onChange
-          });
-        }
+        if (!highlitedItem) return;
+        // Skip tab selection for select all or if item already is selected
+        var shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
+        if (shouldSkipTabSelection) return;
+        handleListItemClicked({
+          clickedItem: highlitedItem,
+          onChange: setSelectedItems
+        });
       }
     }
   }, getDropdownProps({
@@ -1663,13 +1657,13 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       itemToString: itemToString
     }),
-    closeMenu = _useSelect.closeMenu,
     isOpen = _useSelect.isOpen,
     getItemProps = _useSelect.getItemProps,
     getLabelProps = _useSelect.getLabelProps,
     getMenuProps = _useSelect.getMenuProps,
     getToggleButtonProps = _useSelect.getToggleButtonProps,
     highlightedIndex = _useSelect.highlightedIndex,
+    selectItem = _useSelect.selectItem,
     reset = _useSelect.reset;
   // calculations for floating-UI popover position
   var _useFloating = useFloating({
@@ -1737,10 +1731,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         var highlitedItem = normalizedItems[highlightedIndex];
         // we don't want to clear selection with tab
         if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-          onChange == null || onChange(highlitedItem);
+          selectItem(highlitedItem);
         }
-        closeMenu();
-        e.preventDefault();
       }
     }
   }), {