@entur/dropdown 5.0.17 → 5.0.19

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));
@@ -1405,13 +1406,6 @@ var FieldAppend$1 = function FieldAppend(_ref3) {
     loadingText = _ref3$loadingText === void 0 ? 'Laster resultater …' : _ref3$loadingText,
     onClear = _ref3.onClear,
     selectedItems = _ref3.selectedItems;
-  if (loading) {
-    return React.createElement("div", {
-      className: 'eds-dropdown__appendix__toggle-button--loading-dots'
-    }, React.createElement(LoadingDots, {
-      "aria-label": loadingText
-    }));
-  }
   if (disabled) {
     return null;
   }
@@ -1423,14 +1417,18 @@ var FieldAppend$1 = function FieldAppend(_ref3) {
     labelClearSelectedItems: labelClearSelectedItems
   }), React.createElement("div", {
     className: "eds-dropdown__appendix__divider"
-  })), React.createElement(ToggleButton, {
+  })), !loading ? React.createElement(ToggleButton, {
     "aria-hidden": ariaHiddenToggleButton,
     ariaLabelCloseList: ariaLabelCloseList,
     ariaLabelOpenList: ariaLabelOpenList,
     getToggleButtonProps: getToggleButtonProps,
     isOpen: isOpen,
     focusable: focusable
-  }));
+  }) : React.createElement("div", {
+    className: 'eds-dropdown__appendix__toggle-button--loading-dots'
+  }, React.createElement(LoadingDots, {
+    "aria-label": loadingText
+  })));
 };
 var ClearableButton = function ClearableButton(_ref4) {
   var onClear = _ref4.onClear,
@@ -1640,7 +1638,7 @@ var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
 
 var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "listStyle", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
 var SearchableDropdown = function SearchableDropdown(_ref) {
-  var _selectedItem$label;
+  var _document, _selectedItem$label;
   var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
     ariaLabelCloseList = _ref.ariaLabelCloseList,
     ariaLabelOpenList = _ref.ariaLabelOpenList,
@@ -1713,6 +1711,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       inputValue: inputValue
     });
   }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
+  var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
   var stateReducer = React.useCallback(function (_, _ref4) {
     var type = _ref4.type,
       changes = _ref4.changes;
@@ -1724,7 +1723,6 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       case useCombobox.stateChangeTypes.ItemClick:
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.InputBlur:
-      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
           updateListItems({
             inputValue: EMPTY_INPUT
@@ -1733,6 +1731,14 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
             inputValue: EMPTY_INPUT
           });
         }
+      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+        if (!inputHasFocus) setShowSelectedItem(true);
+        updateListItems({
+          inputValue: EMPTY_INPUT
+        });
+        return _extends({}, changes, {
+          inputValue: EMPTY_INPUT
+        });
       // remove leading whitespace, select element with spacebar on empty input, and filter list based on input
       case useCombobox.stateChangeTypes.InputChange:
         {
@@ -1803,11 +1809,24 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     updateListItems({
       inputValue: inputValue
     });
+    setShowSelectedItem(false);
   };
   return React.createElement("div", {
     className: classNames('eds-dropdown__wrapper', className),
     style: style
   }, React.createElement(BaseFormControl, _extends({
+    className: "eds-dropdown",
+    disabled: disabled,
+    disableLabelAnimation: disableLabelAnimation,
+    feedback: feedback,
+    isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
+    label: label,
+    labelId: getLabelProps().id,
+    labelProps: getLabelProps(),
+    prepend: prepend,
+    readOnly: readOnly,
+    variant: variant
+  }, rest, {
     append: React.createElement(FieldAppend$1, {
       ariaLabelCloseList: ariaLabelCloseList,
       ariaLabelOpenList: ariaLabelOpenList,
@@ -1821,19 +1840,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       loadingText: loadingText,
       onClear: handleOnClear,
       selectedItems: [selectedItem]
-    }),
-    className: "eds-dropdown",
-    disabled: disabled,
-    disableLabelAnimation: disableLabelAnimation,
-    feedback: feedback,
-    isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
-    label: label,
-    labelId: getLabelProps().id,
-    labelProps: getLabelProps(),
-    prepend: prepend,
-    readOnly: readOnly,
-    variant: variant
-  }, rest), React.createElement("span", {
+    })
+  }), React.createElement("span", {
     className: classNames('eds-dropdown--searchable__selected-item', {
       'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
     }),
@@ -1842,7 +1850,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       var _inputRef$current2;
       return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
-  }, selectedItem == null ? void 0 : selectedItem.label), React.createElement("input", _extends({
+  }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
     className: classNames('eds-dropdown__input eds-form-control', {
       'eds-dropdown__input--hidden': showSelectedItem
     }),
@@ -1859,7 +1867,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 +2208,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 +2234,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 +2375,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', {