@entur/dropdown 5.0.9-beta.0 → 5.0.9

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,
@@ -1668,6 +1668,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,
@@ -1846,6 +1848,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     onFocus: function onFocus() {
       setHideSelectedItem(true);
     },
+    onKeyDown: function onKeyDown(e) {
+      if (selectOnTab && e.key === 'Tab') onChange == null ? void 0 : onChange(listItems[highlightedIndex]);
+    },
     ref: inputRef
   })))), React.createElement(DropdownList, {
     isOpen: isOpen,
@@ -1860,7 +1865,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 +1903,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 +2206,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 +2239,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 +2265,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 +2338,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