@entur/dropdown 5.0.8 → 5.0.9

package/dist/dropdown.esm.js

@@ -1,5 +1,5 @@
 import { mergeRefs, debounce, useRandomId, warnAboutMissingStyles } from '@entur/utils';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Downshift, { useSelect, useCombobox, useMultipleSelection } from 'downshift';
 import classNames from 'classnames';
 import { BaseFormControl, VariantProvider, FeedbackText, Checkbox } from '@entur/form';
@@ -835,7 +835,7 @@ debounceTimeout) {
     return isItemsFunction ? itemsOrItemsResolver : function () {
       return Promise.resolve(itemsOrItemsResolver);
     };
-  }, [isItemsFunction]);
+  }, [itemsOrItemsResolver, isItemsFunction]);
   var _React$useReducer = React.useReducer(reducer, {
       items: isItemsFunction ? [] : itemsOrItemsResolver,
       loading: false
@@ -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"
       });
@@ -1407,7 +1407,7 @@ var FieldAppend$1 = function FieldAppend(_ref3) {
     selectedItems = _ref3.selectedItems;
   if (loading) {
     return React.createElement("div", {
-      className: 'eds-dropdown-appendix__toggle-button--loading-dots'
+      className: 'eds-dropdown__appendix__toggle-button--loading-dots'
     }, React.createElement(LoadingDots, {
       "aria-label": loadingText
     }));
@@ -1416,13 +1416,13 @@ var FieldAppend$1 = function FieldAppend(_ref3) {
     return null;
   }
   return React.createElement("div", {
-    className: "eds-dropdown-appendix"
+    className: "eds-dropdown__appendix"
   }, clearable && (selectedItems == null ? void 0 : selectedItems.length) > 0 && selectedItems[0] !== null && React.createElement(React.Fragment, null, React.createElement(ClearableButton, {
     onClear: onClear,
     focusable: true,
     labelClearSelectedItems: labelClearSelectedItems
   }), React.createElement("div", {
-    className: "eds-dropdown-appendix__divider"
+    className: "eds-dropdown__appendix__divider"
   })), React.createElement(ToggleButton, {
     "aria-hidden": ariaHiddenToggleButton,
     ariaLabelCloseList: ariaLabelCloseList,
@@ -1442,9 +1442,9 @@ var ClearableButton = function ClearableButton(_ref4) {
     "aria-hidden": "true",
     placement: "top",
     content: labelClearSelectedItems,
-    className: "eds-dropdown-appendix__clear-button__tooltip"
+    className: "eds-dropdown__appendix__clear-button__tooltip"
   }, React.createElement(IconButton, {
-    className: "eds-dropdown-appendix__clear-button",
+    className: "eds-dropdown__appendix__clear-button",
     type: "button",
     tabIndex: focusable ? 0 : 1,
     onClick: onClear,
@@ -1465,8 +1465,8 @@ var ToggleButton = function ToggleButton(_ref5) {
     _ref5$focusable = _ref5.focusable,
     focusable = _ref5$focusable === void 0 ? false : _ref5$focusable;
   return React.createElement(IconButton, _extends({}, getToggleButtonProps({
-    className: classNames('eds-dropdown-appendix__toggle-button', {
-      'eds-dropdown-appendix__toggle-button--open': isOpen
+    className: classNames('eds-dropdown__appendix__toggle-button', {
+      'eds-dropdown__appendix__toggle-button--open': isOpen
     }),
     'aria-labelledby': undefined
   }), {
@@ -1489,9 +1489,19 @@ function lowerCaseFilterTest(item, input) {
   var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
   return inputRegex.test(item.label);
 }
+function noFilter(
+//@ts-expect-error only here to comply with dropdown filter API
+item,
+//@ts-expect-error only here to comply with dropdown filter API
+input) {
+  return true;
+}
 var itemToString = function itemToString(item) {
   return item ? item.label : '';
 };
+var isFunctionWithQueryArgument = function isFunctionWithQueryArgument(object) {
+  return typeof object === 'function' && object.length > 0;
+};
 var useMultiselectUtils = function useMultiselectUtils(_ref) {
   var listItems = _ref.listItems,
     selectedItems = _ref.selectedItems,
@@ -1628,7 +1638,7 @@ var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
 };
 /* end a11y utils */
 
-var _excluded$3 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "itemFilter", "items", "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,
@@ -1642,9 +1652,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     _ref$disableLabelAnim = _ref.disableLabelAnimation,
     disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
     feedback = _ref.feedback,
-    _ref$itemFilter = _ref.itemFilter,
-    itemFilter = _ref$itemFilter === void 0 ? lowerCaseFilterTest : _ref$itemFilter,
     initialItems = _ref.items,
+    _ref$itemFilter = _ref.itemFilter,
+    itemFilter = _ref$itemFilter === void 0 ? isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest : _ref$itemFilter,
     label = _ref.label,
     _ref$labelClearSelect = _ref.labelClearSelectedItem,
     labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
@@ -1658,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,
@@ -1684,7 +1696,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   };
   var updateListItems = function updateListItems(_ref3) {
     var inputValue = _ref3.inputValue;
-    if (typeof initialItems === 'function') fetchItems(inputValue != null ? inputValue : EMPTY_INPUT); // fetch items only if user provides a function as items
+    var shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
+    if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
     filterListItems({
       inputValue: inputValue != null ? inputValue : EMPTY_INPUT
     });
@@ -1707,7 +1720,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       case useCombobox.stateChangeTypes.InputBlur:
       case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
-          filterListItems({
+          updateListItems({
             inputValue: EMPTY_INPUT
           });
           return _extends({}, changes, {
@@ -1814,16 +1827,14 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     prepend: prepend,
     readOnly: readOnly,
     variant: variant
-  }, rest), !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
-    className: "eds-dropdown__selected-item__wrapper",
-    "aria-hidden": "true"
-  }, React.createElement("span", {
-    className: "eds-dropdown__selected-item",
+  }, rest), !hideSelectedItem && selectedItem !== null && inputValue === '' && React.createElement("span", {
+    className: "eds-dropdown--searchable__selected-item",
+    "aria-hidden": "true",
     onClick: function onClick() {
       var _inputRef$current2;
       return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
-  }, selectedItem.label)), React.createElement("input", _extends({
+  }, selectedItem.label), React.createElement("input", _extends({
     className: "eds-dropdown__input eds-form-control",
     disabled: readOnly || disabled,
     placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder
@@ -1837,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,
@@ -1851,7 +1865,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   }));
 };
 
-var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "itemFilter", "items", "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,
@@ -1864,9 +1878,9 @@ var MultiSelect = function MultiSelect(_ref) {
     feedback = _ref.feedback,
     _ref$hideSelectAll = _ref.hideSelectAll,
     hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
-    _ref$itemFilter = _ref.itemFilter,
-    itemFilter = _ref$itemFilter === void 0 ? lowerCaseFilterTest : _ref$itemFilter,
     initialItems = _ref.items,
+    _ref$itemFilter = _ref.itemFilter,
+    itemFilter = _ref$itemFilter === void 0 ? isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest : _ref$itemFilter,
     label = _ref.label,
     _ref$labelAllItemsSel = _ref.labelAllItemsSelected,
     labelAllItemsSelected = _ref$labelAllItemsSel === void 0 ? 'Alle valgt' : _ref$labelAllItemsSel,
@@ -1885,9 +1899,12 @@ var MultiSelect = function MultiSelect(_ref) {
     placeholder = _ref.placeholder,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    selectedItems = _ref.selectedItems,
+    _ref$selectedItems = _ref.selectedItems,
+    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,
@@ -1911,6 +1928,10 @@ var MultiSelect = function MultiSelect(_ref) {
     lastRemovedItem = _React$useState2[0],
     setLastRemovedItem = _React$useState2[1];
   var inputRef = useRef(null);
+  useEffect(function () {
+    //@ts-expect-error this is done to aid developers debug wrong prop usage
+    if (rest.selectedItem !== undefined) console.warn("Incorrect 'selectedItem' prop found, did you mean to use 'selectedItems?");
+  }, []);
   var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
@@ -1940,9 +1961,7 @@ var MultiSelect = function MultiSelect(_ref) {
   };
   var updateListItems = function updateListItems(_ref3) {
     var inputValue = _ref3.inputValue;
-    var shouldRefetchItems =
-    // fetch items only if user provides a function with inputValue argument as items
-    typeof initialItems === 'function' && initialItems.length > 0; // Function.length == number of arguments
+    var shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
     if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
     filterListItems({
       inputValue: inputValue != null ? inputValue : EMPTY_INPUT
@@ -2046,6 +2065,9 @@ var MultiSelect = function MultiSelect(_ref) {
       // reset input value when leaving input field
       case useCombobox.stateChangeTypes.InputBlur:
         {
+          updateListItems({
+            inputValue: EMPTY_INPUT
+          });
           return _extends({}, changes, {
             inputValue: EMPTY_INPUT
           });
@@ -2138,16 +2160,16 @@ var MultiSelect = function MultiSelect(_ref) {
     label: label,
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
-    readOnly: readOnly,
-    variant: variant
-  }, rest), React.createElement("div", {
-    className: classNames('eds-dropdown__selected-items-and-input', {
-      'eds-dropdown__selected-items-and-input--filled': hasSelectedItems
-    }),
     onClick: function onClick(e) {
       var _inputRef$current4;
       if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
-    }
+    },
+    readOnly: readOnly,
+    variant: variant
+  }, rest), React.createElement("div", {
+    className: classNames('eds-dropdown--multiselect__selected-items-and-input', {
+      'eds-dropdown--multiselect__selected-items-and-input--filled': hasSelectedItems
+    })
   }, selectedItems.length < maxChips ? React.createElement(React.Fragment, null, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
     onClick: function onClick() {
       var _inputRef$current5;
@@ -2184,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,
@@ -2209,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,
@@ -2235,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,
@@ -2304,12 +2336,15 @@ var Dropdown = function Dropdown(_ref) {
     readOnly: readOnly,
     variant: variant
   }, rest), React.createElement("div", _extends({
-    className: "eds-dropdown__selected-item-button"
+    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-button__placeholder', {
-      'eds-dropdown__selected-item-button__placeholder--readonly': readOnly
+    className: classNames('eds-dropdown__selected-item__placeholder', {
+      'eds-dropdown__selected-item__placeholder--readonly': readOnly
     })
   }, placeholder)) != null ? _ref3 : '')), React.createElement(DropdownList, {
     getItemProps: getItemProps,