@entur/dropdown 5.0.7 → 5.0.9-beta.0

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';
@@ -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,
@@ -1500,11 +1510,20 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
   var listItemsWithoutSelectAll = listItems.filter(function (item) {
     return item.value !== selectAll.value;
   });
-  var allListItemsAreSelected = listItemsWithoutSelectAll.filter(function (item) {
-    return !selectedItems.includes(item);
-  }).length === 0;
-  var someListItemsAreSelected = listItemsWithoutSelectAll.some(function (item) {
-    return selectedItems.includes(item);
+  var unselectedItemsInListItems = listItemsWithoutSelectAll.filter(function (listItem) {
+    return !selectedItems.some(function (selectedItem) {
+      return selectedItem.value === listItem.value;
+    });
+  });
+  var allListItemsAreSelected = !listItemsWithoutSelectAll.some(function (listItem) {
+    return !selectedItems.some(function (selectedItem) {
+      return selectedItem.value === listItem.value;
+    });
+  });
+  var someListItemsAreSelected = listItemsWithoutSelectAll.some(function (listItem) {
+    return selectedItems.some(function (selectedItem) {
+      return selectedItem.value === listItem.value;
+    });
   });
   var addClickedItemToSelectedItems = function addClickedItemToSelectedItems(clickedItem, onChange) {
     return onChange([].concat(selectedItems, [clickedItem]));
@@ -1545,14 +1564,15 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
     return false;
   };
   var selectAllUnselectedItemsInListItems = function selectAllUnselectedItemsInListItems(onChange) {
-    onChange([].concat(selectedItems, listItemsWithoutSelectAll.filter(function (item) {
-      return !selectedItems.includes(item);
-    })));
+    onChange([].concat(selectedItems, unselectedItemsInListItems));
   };
   var unselectAllListItems = function unselectAllListItems(onChange) {
-    onChange(selectedItems.filter(function (item) {
-      return !listItemsWithoutSelectAll.includes(item);
-    }));
+    var selectedItemsWithoutItemsInListItems = selectedItems.filter(function (selectedItem) {
+      return !listItemsWithoutSelectAll.some(function (listItem) {
+        return listItem.value === selectedItem.value;
+      });
+    });
+    onChange(selectedItemsWithoutItemsInListItems);
   };
   return {
     addClickedItemToSelectedItems: addClickedItemToSelectedItems,
@@ -1618,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", "style", "variant"];
 var SearchableDropdown = function SearchableDropdown(_ref) {
   var _selectedItem$label;
   var ariaLabelCloseList = _ref.ariaLabelCloseList,
@@ -1632,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,
@@ -1674,7 +1694,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
     });
@@ -1697,7 +1718,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       case useCombobox.stateChangeTypes.InputBlur:
       case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
-          filterListItems({
+          updateListItems({
             inputValue: EMPTY_INPUT
           });
           return _extends({}, changes, {
@@ -1804,16 +1825,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,7 +1860,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", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
 var MultiSelect = function MultiSelect(_ref) {
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
@@ -1854,9 +1873,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,
@@ -1875,7 +1894,8 @@ 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,
     style = _ref.style,
@@ -1901,6 +1921,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,
@@ -1930,7 +1954,8 @@ var MultiSelect = function MultiSelect(_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
     });
@@ -2033,6 +2058,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
           });
@@ -2125,16 +2153,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;
@@ -2291,12 +2319,12 @@ 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
   })), (_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,