@entur/dropdown 5.0.9-beta.0 → 5.0.11

package/dist/dropdown.esm.js

@@ -1313,7 +1313,7 @@ var DropdownList = function DropdownList(_ref) {
       className: "eds-dropdown__list__item__text"
     }, item.label, React.createElement(VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), item.icons && React.createElement("span", null, item.icons.map(function (Icon) {
       return React.createElement(Icon, {
-        key: Icon.displayName,
+        key: item.label + item.value + Icon.displayName,
         inline: true,
         className: "eds-dropdown__list__item__icon"
       });
@@ -1638,7 +1638,7 @@ var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
 };
 /* end a11y utils */
 
-var _excluded$3 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
+var _excluded$3 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
 var SearchableDropdown = function SearchableDropdown(_ref) {
   var _selectedItem$label;
   var ariaLabelCloseList = _ref.ariaLabelCloseList,
@@ -1660,7 +1660,10 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
     listStyle = _ref.listStyle,
     loadingText = _ref.loadingText,
-    onChange = _ref.onChange,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
     placeholder = _ref.placeholder,
     prepend = _ref.prepend,
     _ref$readOnly = _ref.readOnly,
@@ -1668,6 +1671,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     value = _ref.selectedItem,
     _ref$selectOnBlur = _ref.selectOnBlur,
     selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
@@ -1736,7 +1741,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
             if (isSpacePressedOnEmptyInput) {
               openMenu();
               if (isOpen && changes.highlightedIndex !== undefined) {
-                onChange == null ? void 0 : onChange(listItems[changes.highlightedIndex]);
+                onChange(listItems[changes.highlightedIndex]);
               }
             }
           } else {
@@ -1765,7 +1770,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
             if (!selectOnBlur) break;
           case useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
           case useCombobox.stateChangeTypes.ItemClick:
-            onChange == null ? void 0 : onChange(clickedItem != null ? clickedItem : null);
+            onChange(clickedItem != null ? clickedItem : null);
         }
       },
       // Accessibility
@@ -1789,7 +1794,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     setInputValue = _useCombobox.setInputValue;
   var handleOnClear = function handleOnClear() {
     var _inputRef$current;
-    onChange == null ? void 0 : onChange(null);
+    onChange(null);
     setInputValue(EMPTY_INPUT);
     (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     updateListItems({
@@ -1846,6 +1851,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     onFocus: function onFocus() {
       setHideSelectedItem(true);
     },
+    onKeyDown: function onKeyDown(e) {
+      if (selectOnTab && e.key === 'Tab') onChange(listItems[highlightedIndex]);
+    },
     ref: inputRef
   })))), React.createElement(DropdownList, {
     isOpen: isOpen,
@@ -1860,7 +1868,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   }));
 };
 
-var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
+var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
 var MultiSelect = function MultiSelect(_ref) {
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
@@ -1898,6 +1906,8 @@ var MultiSelect = function MultiSelect(_ref) {
     selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
     _ref$selectOnBlur = _ref.selectOnBlur,
     selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
@@ -2199,14 +2209,22 @@ var MultiSelect = function MultiSelect(_ref) {
     placeholder: placeholder,
     className: "eds-dropdown__input eds-form-control",
     disabled: readOnly || disabled
-  }, getInputProps(getDropdownProps({
+  }, getInputProps(_extends({
+    onKeyDown: function onKeyDown(e) {
+      if (selectOnTab && e.key === 'Tab') handleListItemClicked({
+        clickedItem: listItems[highlightedIndex],
+        onChange: onChange,
+        setLastRemovedItem: setLastRemovedItem
+      });
+    }
+  }, getDropdownProps({
     onClick: function onClick(e) {
       if (!isOpen && isVoiceOverClick(e)) openMenu();
     },
     preventKeyAction: isOpen,
     ref: inputRef,
     value: inputValue != null ? inputValue : EMPTY_INPUT
-  })))))), React.createElement(DropdownList, {
+  }))))))), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
     getItemProps: getItemProps,
@@ -2224,7 +2242,7 @@ var MultiSelect = function MultiSelect(_ref) {
   }));
 };
 
-var _excluded$1 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
+var _excluded$1 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
 var Dropdown = function Dropdown(_ref) {
   var _ref3, _selectedItem$label;
   var ariaLabelCloseList = _ref.ariaLabelCloseList,
@@ -2250,6 +2268,8 @@ var Dropdown = function Dropdown(_ref) {
     selectedItem = _ref.selectedItem,
     _ref$selectOnBlur = _ref.selectOnBlur,
     selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
@@ -2321,7 +2341,10 @@ var Dropdown = function Dropdown(_ref) {
   }, rest), React.createElement("div", _extends({
     className: "eds-dropdown__selected-item"
   }, getToggleButtonProps({
-    id: undefined
+    id: undefined,
+    onKeyDown: function onKeyDown(e) {
+      if (selectOnTab && e.key === 'Tab') onChange == null ? void 0 : onChange(normalizedItems[highlightedIndex]);
+    }
   })), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("span", {
     className: classNames('eds-dropdown__selected-item__placeholder', {
       'eds-dropdown__selected-item__placeholder--readonly': readOnly