@entur/dropdown 5.0.8 → 5.0.9

package/dist/Dropdown.d.ts

@@ -19,6 +19,12 @@ export type DropdownProps = {
      */
     clearable?: boolean;
     /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnTab?: boolean;
+    /**
+     * @deprecated
+     * Bruk selectOnTab i stedet
+     *
+     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
     selectOnBlur?: boolean;
     /** Deaktiver dropdown-en */
     disabled?: boolean;
@@ -59,4 +65,4 @@ export type DropdownProps = {
      */
     ariaLabelOpenList?: string;
 };
-export declare const Dropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, style, variant, ...rest }: DropdownProps) => React.JSX.Element;
+export declare const Dropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, selectOnTab, style, variant, ...rest }: DropdownProps) => React.JSX.Element;

package/dist/MultiSelect.d.ts

@@ -59,6 +59,12 @@ export type MultiSelectProps = {
      */
     clearInputOnSelect?: boolean;
     /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnTab?: boolean;
+    /**
+     * @deprecated
+     * Bruk selectOnTab i stedet
+     *
+     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
     selectOnBlur?: boolean;
     style?: React.CSSProperties;
     /** Styling som sendes ned til MultiSelect-lista */
@@ -108,4 +114,4 @@ export type MultiSelectProps = {
      */
     ariaLabelSelectedItem?: string;
 };
-export declare const MultiSelect: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, itemFilter, items: initialItems, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps) => React.JSX.Element;
+export declare const MultiSelect: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, items: initialItems, itemFilter, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, selectOnTab, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps) => React.JSX.Element;

package/dist/SearchableDropdown.d.ts

@@ -33,6 +33,12 @@ export type SearchableDropdownProps = {
     /** Deaktiver dropdown-en */
     disabled?: boolean;
     /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnTab?: boolean;
+    /**
+     * @deprecated
+     * Bruk selectOnTab i stedet
+     *
+     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
     selectOnBlur?: boolean;
     /** Gjør dropdown-en til å kun kunne leses
      * @default false
@@ -67,4 +73,4 @@ export type SearchableDropdownProps = {
      */
     ariaLabelOpenList?: string;
 };
-export declare const SearchableDropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, itemFilter, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, style, variant, ...rest }: SearchableDropdownProps) => React.JSX.Element;
+export declare const SearchableDropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, items: initialItems, itemFilter, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, selectOnTab, style, variant, ...rest }: SearchableDropdownProps) => React.JSX.Element;

package/dist/dropdown.cjs.development.js

@@ -839,7 +839,7 @@ debounceTimeout) {
     return isItemsFunction ? itemsOrItemsResolver : function () {
       return Promise.resolve(itemsOrItemsResolver);
     };
-  }, [isItemsFunction]);
+  }, [itemsOrItemsResolver, isItemsFunction]);
   var _React$useReducer = React.useReducer(reducer, {
       items: isItemsFunction ? [] : itemsOrItemsResolver,
       loading: false
@@ -1317,7 +1317,7 @@ var DropdownList = function DropdownList(_ref) {
       className: "eds-dropdown__list__item__text"
     }, item.label, React.createElement(a11y.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"
       });
@@ -1411,7 +1411,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(loader.LoadingDots, {
       "aria-label": loadingText
     }));
@@ -1420,13 +1420,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,
@@ -1446,9 +1446,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(button.IconButton, {
-    className: "eds-dropdown-appendix__clear-button",
+    className: "eds-dropdown__appendix__clear-button",
     type: "button",
     tabIndex: focusable ? 0 : 1,
     onClick: onClear,
@@ -1469,8 +1469,8 @@ var ToggleButton = function ToggleButton(_ref5) {
     _ref5$focusable = _ref5.focusable,
     focusable = _ref5$focusable === void 0 ? false : _ref5$focusable;
   return React.createElement(button.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
   }), {
@@ -1493,9 +1493,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,
@@ -1632,7 +1642,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,
@@ -1646,9 +1656,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,
@@ -1662,6 +1672,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,
@@ -1688,7 +1700,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
     });
@@ -1711,7 +1724,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       case Downshift.useCombobox.stateChangeTypes.InputBlur:
       case Downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
-          filterListItems({
+          updateListItems({
             inputValue: EMPTY_INPUT
           });
           return _extends({}, changes, {
@@ -1818,16 +1831,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
@@ -1841,6 +1852,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,
@@ -1855,7 +1869,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,
@@ -1868,9 +1882,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,
@@ -1889,9 +1903,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,
@@ -1915,6 +1932,10 @@ var MultiSelect = function MultiSelect(_ref) {
     lastRemovedItem = _React$useState2[0],
     setLastRemovedItem = _React$useState2[1];
   var inputRef = React.useRef(null);
+  React.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,
@@ -1944,9 +1965,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
@@ -2050,6 +2069,9 @@ var MultiSelect = function MultiSelect(_ref) {
       // reset input value when leaving input field
       case Downshift.useCombobox.stateChangeTypes.InputBlur:
         {
+          updateListItems({
+            inputValue: EMPTY_INPUT
+          });
           return _extends({}, changes, {
             inputValue: EMPTY_INPUT
           });
@@ -2142,16 +2164,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(a11y.VisuallyHidden, {
     onClick: function onClick() {
       var _inputRef$current5;
@@ -2188,14 +2210,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,
@@ -2213,7 +2243,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,
@@ -2239,6 +2269,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,
@@ -2308,12 +2340,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,