@entur/dropdown 6.0.3-beta.2 → 6.0.3

package/dist/dropdown.esm.js

@@ -1235,7 +1235,7 @@ function SelectedItemsLabel(items) {
   }).toString() : items.length + " elementer valgt";
 }
 
-var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "listStyle", "listRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
+var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "listStyle", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
 var DropdownList = function DropdownList(_ref) {
   var _listItems$;
   var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
@@ -1248,7 +1248,7 @@ var DropdownList = function DropdownList(_ref) {
     highlightedIndex = _ref.highlightedIndex,
     listItems = _ref.listItems,
     listStyle = _ref.listStyle,
-    listRef = _ref.listRef,
+    setListRef = _ref.setListRef,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     _ref$loadingText = _ref.loadingText,
@@ -1331,9 +1331,11 @@ var DropdownList = function DropdownList(_ref) {
   return (
     // use popover from @entur/tooltip when that package upgrades to floating-ui
     React.createElement("ul", _extends({}, getMenuProps({
-      'aria-multiselectable': isMultiselect,
-      ref: listRef
+      'aria-multiselectable': isMultiselect
+    }, {
+      suppressRefError: true
     }), {
+      ref: setListRef,
       className: "eds-dropdown__list",
       style: _extends({
         display: isOpen ? 'inline-block' : 'none'
@@ -1342,14 +1344,13 @@ 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 == 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)
-        })
+        }),
+        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value)
       }, getItemProps({
-        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value),
         // @ts-expect-error Since getItemProps expects the same item type
         // here as items, it throws error when selectAllItem is a string.
         // This does, however, not cause any functional issues.
@@ -1399,7 +1400,8 @@ var SelectedItemTag = function SelectedItemTag(_ref) {
     key: selectedItem.value,
     "aria-live": "polite"
   }), React.createElement("span", {
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    className: "eds-dropdown__selected-item-tag__text"
   }, selectedItem.label));
 };
 var FieldAppend$1 = function FieldAppend(_ref3) {
@@ -1555,17 +1557,14 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
   };
   var handleListItemClicked = function handleListItemClicked(_ref2) {
     var clickedItem = _ref2.clickedItem,
-      onChange = _ref2.onChange,
-      setLastRemovedItem = _ref2.setLastClickedItem;
+      onChange = _ref2.onChange;
     if (clickedItemIsSelectAll(clickedItem)) {
       if (allListItemsAreSelected) {
-        setLastRemovedItem(selectAll);
         return unselectAllListItems(onChange);
       }
       return selectAllUnselectedItemsInListItems(onChange);
     }
     if (clickedItemIsInSelectedItems(clickedItem)) {
-      setLastRemovedItem(clickedItem);
       return removeClickedItemFromSelectedItems(clickedItem, onChange);
     }
     addClickedItemToSelectedItems(clickedItem, onChange);
@@ -1896,7 +1895,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     isOpen: isOpen,
     listItems: listItems,
     listStyle: _extends({}, floatingStyles, listStyle),
-    listRef: refs.setFloating,
+    setListRef: refs.setFloating,
     loading: loading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
@@ -1963,13 +1962,12 @@ var MultiSelect = function MultiSelect(_ref) {
   var _React$useState = React.useState(0),
     lastHighlightedIndex = _React$useState[0],
     setLastHighlightedIndex = _React$useState[1];
-  var _React$useState2 = React.useState(undefined),
-    setLastClickedItem = _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?");
-  }, []);
+    //@ts-expect-error selectedItem should not actually exist in rest
+  }, [rest.selectedItem]);
   var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
@@ -2083,8 +2081,7 @@ var MultiSelect = function MultiSelect(_ref) {
               if (isOpen && changes.highlightedIndex !== undefined) {
                 handleListItemClicked({
                   clickedItem: listItems[changes.highlightedIndex],
-                  onChange: onChange,
-                  setLastClickedItem: setLastClickedItem
+                  onChange: onChange
                 });
               }
             }
@@ -2134,8 +2131,7 @@ var MultiSelect = function MultiSelect(_ref) {
             {
               handleListItemClicked({
                 clickedItem: clickedItem,
-                onChange: onChange,
-                setLastClickedItem: setLastClickedItem
+                onChange: onChange
               });
             }
         }
@@ -2235,8 +2231,7 @@ var MultiSelect = function MultiSelect(_ref) {
         var _inputRef$current6;
         handleListItemClicked({
           clickedItem: selectedItem,
-          onChange: onChange,
-          setLastClickedItem: setLastClickedItem
+          onChange: onChange
         });
         inputRef == null ? void 0 : (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.focus();
       },
@@ -2261,16 +2256,15 @@ var MultiSelect = function MultiSelect(_ref) {
         if (highlitedItem) {
           handleListItemClicked({
             clickedItem: highlitedItem,
-            onChange: onChange,
-            setLastClickedItem: setLastClickedItem
+            onChange: onChange
           });
         }
       }
     }
   }, getDropdownProps({
     preventKeyAction: isOpen,
-    ref: inputRef,
-    value: inputValue != null ? inputValue : EMPTY_INPUT
+    value: inputValue != null ? inputValue : EMPTY_INPUT,
+    ref: inputRef
   })))))), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
@@ -2281,7 +2275,7 @@ var MultiSelect = function MultiSelect(_ref) {
     isOpen: isOpen,
     listItems: listItems,
     listStyle: _extends({}, floatingStyles, listStyle),
-    listRef: refs.setFloating,
+    setListRef: refs.setFloating,
     loading: loading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
@@ -2436,7 +2430,7 @@ var Dropdown = function Dropdown(_ref) {
     isOpen: isOpen,
     listItems: normalizedItems,
     listStyle: _extends({}, floatingStyles, listStyle),
-    listRef: refs.setFloating,
+    setListRef: refs.setFloating,
     loading: loading,
     loadingText: loadingText,
     selectedItems: selectedItem !== null ? [selectedItem] : []