@entur/dropdown 5.0.16 → 5.0.18

package/dist/dropdown.esm.js

@@ -1240,6 +1240,7 @@ function SelectedItemsLabel(items) {
 
 var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "listStyle", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
 var DropdownList = function DropdownList(_ref) {
+  var _listItems$;
   var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
     ariaLabelChosenSingular = _ref$ariaLabelChosenS === void 0 ? 'valgt' : _ref$ariaLabelChosenS,
     _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
@@ -1261,10 +1262,10 @@ var DropdownList = function DropdownList(_ref) {
     selectedItems = _ref.selectedItems,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var isMultiselect = selectAllItem !== undefined;
-  var isNoMatches = !loading && (listItems.length === 0 || listItems.length === 1 && listItems[0].value === (selectAllItem == null ? void 0 : selectAllItem.value));
+  var isNoMatches = !loading && (listItems.length === 0 || (listItems == null ? void 0 : listItems.length) === 1 && (listItems == null ? void 0 : (_listItems$ = listItems[0]) == null ? void 0 : _listItems$.value) === (selectAllItem == null ? void 0 : selectAllItem.value));
   var isItemSelected = function isItemSelected(item) {
     return selectedItems.some(function (selectedItem) {
-      return selectedItem.value === item.value && selectedItem.label === item.label;
+      return (selectedItem == null ? void 0 : selectedItem.value) === (item == null ? void 0 : item.value) && (selectedItem == null ? void 0 : selectedItem.label) === (item == null ? void 0 : item.label);
     });
   };
   var ariaLabelSelectAll = function ariaLabelSelectAll() {
@@ -1313,7 +1314,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: item.label + item.value + Icon.displayName,
+        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value) + (Icon == null ? void 0 : Icon.displayName),
         inline: true,
         className: "eds-dropdown__list__item__icon"
       });
@@ -1330,14 +1331,14 @@ var DropdownList = function DropdownList(_ref) {
       var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
       if (itemIsSelectAll && listItems.length <= 2) return null;
       return React.createElement("li", _extends({
-        key: item.label + item.value,
+        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value),
         className: classNames('eds-dropdown__list__item', {
           'eds-dropdown__list__item--select-all': itemIsSelectAll,
           'eds-dropdown__list__item--highlighted': highlightedIndex === index,
           'eds-dropdown__list__item--selected': !isMultiselect && isItemSelected(item)
         })
       }, getItemProps({
-        key: item.label + item.value,
+        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value),
         item: item,
         index: index
       })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
@@ -1859,7 +1860,13 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       setShowSelectedItem(false);
     },
     onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && e.key === 'Tab') onChange(listItems[highlightedIndex]);
+      if (selectOnTab && e.key === 'Tab') {
+        var highlitedItem = listItems[highlightedIndex];
+        if (highlitedItem) {
+          // we don't want to clear selection with tab
+          onChange == null ? void 0 : onChange(highlitedItem);
+        }
+      }
     },
     ref: inputRef
   })))), React.createElement(DropdownList, {
@@ -2194,7 +2201,7 @@ var MultiSelect = function MultiSelect(_ref) {
       disabled: disabled,
       getSelectedItemProps: getSelectedItemProps,
       index: index,
-      key: selectedItem.value,
+      key: selectedItem == null ? void 0 : selectedItem.value,
       readOnly: readOnly,
       removeSelectedItem: function removeSelectedItem() {
         var _inputRef$current6;
@@ -2220,11 +2227,17 @@ var MultiSelect = function MultiSelect(_ref) {
     disabled: readOnly || disabled
   }, getInputProps(_extends({
     onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && e.key === 'Tab') handleListItemClicked({
-        clickedItem: listItems[highlightedIndex],
-        onChange: onChange,
-        setLastRemovedItem: setLastRemovedItem
-      });
+      if (selectOnTab && e.key === 'Tab') {
+        var highlitedItem = listItems[highlightedIndex];
+        // we don't want to clear selection with tab
+        if (highlitedItem) {
+          handleListItemClicked({
+            clickedItem: highlitedItem,
+            onChange: onChange,
+            setLastRemovedItem: setLastRemovedItem
+          });
+        }
+      }
     }
   }, getDropdownProps({
     onClick: function onClick(e) {
@@ -2355,7 +2368,13 @@ var Dropdown = function Dropdown(_ref) {
   }, getToggleButtonProps({
     id: undefined,
     onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && e.key === 'Tab') onChange == null ? void 0 : onChange(normalizedItems[highlightedIndex]);
+      if (selectOnTab && e.key === 'Tab') {
+        // we don't want to clear selection with tab
+        var highlitedItem = normalizedItems[highlightedIndex];
+        if (highlitedItem) {
+          onChange == null ? void 0 : onChange(highlitedItem);
+        }
+      }
     }
   })), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("span", {
     className: classNames('eds-dropdown__selected-item__placeholder', {