@entur/dropdown 6.0.3-beta.2 → 6.0.3

package/dist/components/DropdownList.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
-import { UseComboboxGetMenuPropsOptions, GetPropsCommonOptions, UseComboboxGetItemPropsOptions } from 'downshift';
+import { UseComboboxPropGetters, UseSelectPropGetters } from 'downshift';
 import { NormalizedDropdownItemType } from '../types';
 import './DropdownList.scss';
 type DropdownListProps<ValueType> = {
     ariaLabelChosenSingular?: string;
     ariaLabelSelectedItem?: string;
-    getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType<ValueType>>) => any;
-    getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
+    getMenuProps: UseComboboxPropGetters<ValueType>['getMenuProps'] | UseSelectPropGetters<ValueType>['getMenuProps'];
+    getItemProps: UseComboboxPropGetters<ValueType>['getItemProps'] | UseSelectPropGetters<ValueType>['getItemProps'];
     highlightedIndex: number;
     isOpen: boolean;
     listItems: NormalizedDropdownItemType<ValueType | string>[];
     listStyle: {
         [key: string]: any;
     } | undefined;
-    listRef?: React.Ref<HTMLUListElement>;
+    setListRef: (node: HTMLElement | null) => void;
     loading?: boolean;
     loadingText?: string;
     noMatchesText?: string;
@@ -22,5 +22,5 @@ type DropdownListProps<ValueType> = {
     selectedItems: NormalizedDropdownItemType<ValueType>[];
     [key: string]: any;
 };
-export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, listStyle, listRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
+export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, listStyle, setListRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
 export {};

package/dist/dropdown.cjs.development.js

@@ -1239,7 +1239,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,
@@ -1252,7 +1252,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,
@@ -1335,9 +1335,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'
@@ -1346,14 +1348,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.
@@ -1403,7 +1404,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) {
@@ -1559,17 +1561,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);
@@ -1900,7 +1899,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,
@@ -1967,13 +1966,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 = 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?");
-  }, []);
+    //@ts-expect-error selectedItem should not actually exist in rest
+  }, [rest.selectedItem]);
   var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
@@ -2087,8 +2085,7 @@ var MultiSelect = function MultiSelect(_ref) {
               if (isOpen && changes.highlightedIndex !== undefined) {
                 handleListItemClicked({
                   clickedItem: listItems[changes.highlightedIndex],
-                  onChange: onChange,
-                  setLastClickedItem: setLastClickedItem
+                  onChange: onChange
                 });
               }
             }
@@ -2138,8 +2135,7 @@ var MultiSelect = function MultiSelect(_ref) {
             {
               handleListItemClicked({
                 clickedItem: clickedItem,
-                onChange: onChange,
-                setLastClickedItem: setLastClickedItem
+                onChange: onChange
               });
             }
         }
@@ -2239,8 +2235,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();
       },
@@ -2265,16 +2260,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,
@@ -2285,7 +2279,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,
@@ -2440,7 +2434,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] : []