@entur/dropdown 7.2.3-beta.0 → 7.3.0

package/dist/dropdown.cjs.development.js

@@ -425,7 +425,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
@@ -440,7 +442,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(a11y.VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), Array.isArray(item.icons) ? item.icons.filter(isReactComponent).map(function (Icon, index) {
@@ -880,7 +884,7 @@ function getA11yStatusMessage(options) {
 
 var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
 var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _document, _selectedItem$label;
+  var _document, _getInputProps2, _selectedItem$label;
   var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
     _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
     ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
@@ -1039,9 +1043,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
@@ -1051,7 +1054,6 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }));
       }
     }),
-    closeMenu = _useCombobox.closeMenu,
     isOpen = _useCombobox.isOpen,
     getToggleButtonProps = _useCombobox.getToggleButtonProps,
     getLabelProps = _useCombobox.getLabelProps,
@@ -1061,7 +1063,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 = reactDom.useFloating({
       open: isOpen,
@@ -1098,13 +1102,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(form.BaseFormControl, _extends({
     className: classNames('eds-dropdown', 'eds-dropdown--searchable', className, {
@@ -1118,6 +1117,9 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     labelTooltip: labelTooltip,
+    onBlur: function onBlur() {
+      return setInputValue('');
+    },
     onClick: function onClick(e) {
       if (e.target === e.currentTarget) {
         var _getInputProps;
@@ -1154,13 +1156,7 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: classNames('eds-dropdown--searchable__selected-item', {
       'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
     }),
-    onClick: function onClick(event) {
-      if (!disabled && !readOnly) {
-        var _inputRef$current2, _getInputProps2;
-        (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.focus();
-        (_getInputProps2 = getInputProps()) == null || _getInputProps2.onClick == null || _getInputProps2.onClick(event);
-      }
-    },
+    onClick: readOnly ? undefined : (_getInputProps2 = getInputProps()) == null ? void 0 : _getInputProps2.onClick,
     tabIndex: readOnly ? 0 : -1
   }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
     className: classNames('eds-dropdown__input eds-form-control', {
@@ -1172,10 +1168,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() {
@@ -1210,7 +1204,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,
@@ -1324,21 +1318,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 = downshift.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) {
@@ -1347,7 +1345,6 @@ 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
         });
@@ -1355,18 +1352,18 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
       case downshift.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 downshift.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
@@ -1411,13 +1408,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
@@ -1473,13 +1470,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(form.BaseFormControl, _extends({
     className: classNames('eds-dropdown', 'eds-dropdown--multiselect', className, {
@@ -1530,7 +1523,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$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,
@@ -1541,12 +1534,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
     });
@@ -1561,13 +1551,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({
@@ -1670,13 +1661,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 = reactDom.useFloating({
@@ -1744,10 +1735,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();
       }
     }
   }), {