@entur/dropdown 7.3.7 → 7.3.9-beta.0

package/dist/dropdown.esm.js

@@ -1,6 +1,6 @@
 import { useDebounce, mergeRefs, useRandomId, warnAboutMissingStyles } from "@entur/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, createElement, useState, useRef, useEffect, useCallback } from "react";
+import React, { forwardRef, createElement, useMemo, useState, useRef, useEffect, useCallback, useLayoutEffect } from "react";
 import { useCombobox, useMultipleSelection, useSelect } from "downshift";
 import classNames from "classnames";
 import { useFloating, offset, shift, size, flip, autoUpdate } from "@floating-ui/react-dom";
@@ -16,28 +16,32 @@ const DropdownList = ({
   ariaLabelChosenSingular = "valgt",
   ariaLabelSelectedItem = ", valgt element, trykk for å fjerne",
   getItemProps,
-  getMenuProps,
   isOpen,
   highlightedIndex,
   listItems,
   floatingStyles,
-  setListRef,
+  innerRef,
   loading = false,
   loadingText = "Laster inn …",
   noMatchesText = "Ingen treff for søket",
+  readOnly = false,
   selectAllCheckboxState,
   selectAllItem,
   selectedItems,
-  readOnly = false,
+  style,
   ...rest
 }) => {
   const isMultiselect = selectAllItem !== void 0;
   const isNoMatches = !loading && (listItems.length === 0 || listItems?.length === 1 && listItems?.[0]?.value === selectAllItem?.value);
-  const isItemSelected = (item) => selectedItems.some(
-    (selectedItem) => selectedItem?.value === item?.value && selectedItem?.label === item?.label
-  );
+  const isItemSelected = (item) => selectedItems.some((selectedItem) => {
+    if (selectedItem?.value !== item?.value) return false;
+    if (selectedItem?.label && item?.label) {
+      return selectedItem.label === item.label;
+    }
+    return true;
+  });
   const ariaValuesSelectAll = () => {
-    switch (selectAllCheckboxState?.()) {
+    switch (selectAllCheckboxState) {
       case "indeterminate": {
         return {
           label: `${selectAllItem?.label}, delvis valgt`,
@@ -60,7 +64,7 @@ const DropdownList = ({
       Checkbox,
       {
         "aria-hidden": "true",
-        checked: selectAllCheckboxState?.(),
+        checked: selectAllCheckboxState,
         className: "eds-dropdown__list__item__checkbox",
         tabIndex: -1,
         onChange: () => void 0
@@ -107,75 +111,68 @@ const DropdownList = ({
       }) : null
     ] });
   };
-  return (
-    // use popover from @entur/tooltip when that package upgrades to floating-ui
-    /* @__PURE__ */ jsx(
-      "ul",
-      {
-        ...getMenuProps({
-          "aria-multiselectable": isMultiselect,
-          ref: setListRef,
-          className: "eds-dropdown__list",
-          style: {
-            ...floatingStyles,
-            display: isOpen && !readOnly ? void 0 : "none",
-            ...rest.style
-          }
-        }),
-        children: (() => {
-          if (!isOpen || readOnly) {
-            return null;
-          }
-          if (loading) {
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: "eds-dropdown__list__item",
-                children: loadingText
-              },
-              "dropdown-list-loading"
-            );
-          }
-          if (isNoMatches) {
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: "eds-dropdown__list__item",
-                children: noMatchesText
-              },
-              "dropdown-list-no-match"
-            );
-          }
-          return listItems.map((item, index) => {
-            const key = item.itemKey ?? `${item.label ?? ""}-${item.value ?? ""}-${(item.icons ?? []).map((icon) => icon?.displayName ?? icon?.name ?? "unknown").join("-")}`;
-            const itemIsSelectAll = item.value === selectAllItem?.value;
-            if (itemIsSelectAll && listItems.length <= 2) return null;
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                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)
-                }),
-                ...getItemProps({
-                  // @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.
-                  item,
-                  index,
-                  "aria-selected": itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
-                }),
-                children: itemIsSelectAll ? selectAllListItemContent() : listItemContent(
-                  item
-                )
-              },
-              key
-            );
-          });
-        })()
-      }
-    )
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: "eds-dropdown__list",
+      ref: innerRef,
+      style: {
+        display: isOpen && !readOnly ? void 0 : "none",
+        ...floatingStyles,
+        ...style
+      },
+      ...rest,
+      children: (() => {
+        if (!isOpen || readOnly) return null;
+        if (loading) {
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "eds-dropdown__list__item",
+              children: loadingText
+            },
+            "dropdown-list-loading"
+          );
+        }
+        if (isNoMatches) {
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "eds-dropdown__list__item",
+              children: noMatchesText
+            },
+            "dropdown-list-no-match"
+          );
+        }
+        return listItems.map((item, index) => {
+          const key = item.itemKey ?? `${item.label ?? ""}-${item.value ?? ""}-${(item.icons ?? []).map((icon) => icon?.displayName ?? icon?.name ?? "unknown").join("-")}`;
+          const itemIsSelectAll = item.value === selectAllItem?.value;
+          if (itemIsSelectAll && listItems.length <= 2) return null;
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              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)
+              }),
+              ...getItemProps({
+                // @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.
+                item,
+                index,
+                "aria-selected": itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
+              }),
+              children: itemIsSelectAll ? selectAllListItemContent() : listItemContent(
+                item
+              )
+            },
+            key
+          );
+        });
+      })()
+    }
   );
 };
 const SelectedItemTag = ({
@@ -451,11 +448,11 @@ const useMultiselectUtils = ({
       (selectedItem) => selectedItem.value !== clickedItem.value
     )
   );
-  const selectAllCheckboxState = () => {
+  const selectAllCheckboxState = useMemo(() => {
     if (allListItemsAreSelected) return true;
     if (someListItemsAreSelected) return "indeterminate";
     return false;
-  };
+  }, [allListItemsAreSelected, someListItemsAreSelected]);
   const selectAllUnselectedItemsInListItems = (onChange) => {
     onChange([...selectedItems, ...unselectedItemsInListItems]);
   };
@@ -549,7 +546,6 @@ const SearchableDropdown = React.forwardRef(
     const resetInputState = ({
       changes
     }) => {
-      updateListItems({ inputValue: EMPTY_INPUT });
       return {
         ...changes,
         inputValue: EMPTY_INPUT
@@ -578,11 +574,12 @@ const SearchableDropdown = React.forwardRef(
           // empty input to show selected item and reset dropdown list on item selection
           case useCombobox.stateChangeTypes.ItemClick:
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
-          case useCombobox.stateChangeTypes.InputBlur:
             return resetInputState({ changes });
+          case useCombobox.stateChangeTypes.InputBlur:
+            return resetInputState({
+              changes: { ...changes, selectedItem: value }
+            });
           case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-            if (changes.selectedItem !== null && !inputHasFocus)
-              setShowSelectedItem(true);
             return resetInputState({ changes });
           // remove leading whitespace, select element with spacebar on empty input
           case useCombobox.stateChangeTypes.InputChange: {
@@ -653,19 +650,17 @@ const SearchableDropdown = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
+          apply({ elements, availableHeight }) {
+            elements.floating.style.setProperty(
+              "--list-max-height",
+              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            );
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -696,9 +691,7 @@ const SearchableDropdown = React.forwardRef(
         labelProps: getLabelProps(),
         labelTooltip,
         onClick: (e) => {
-          if (e.target === e.currentTarget) {
-            getInputProps()?.onClick?.(e);
-          }
+          if (e.target === e.currentTarget) getInputProps()?.onClick?.(e);
           onClick?.(e);
         },
         onKeyDown,
@@ -716,17 +709,19 @@ const SearchableDropdown = React.forwardRef(
             ariaLabelSelectedItem,
             floatingStyles,
             getItemProps,
-            getMenuProps,
             highlightedIndex,
             isOpen,
             listItems,
-            style: listStyle,
-            setListRef: refs.setFloating,
             loading: loading ?? resolvedItemsLoading,
             loadingText,
             noMatchesText,
             selectedItems: selectedItem !== null ? [selectedItem] : [],
-            readOnly
+            readOnly,
+            ...getMenuProps({
+              refKey: "innerRef",
+              ref: refs.setFloating,
+              style: listStyle
+            })
           }
         ),
         ...rest,
@@ -758,8 +753,9 @@ const SearchableDropdown = React.forwardRef(
                 onKeyDown(e) {
                   if (isOpen && e.key === "Tab") {
                     const highlitedItem = listItems[highlightedIndex];
-                    if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
+                    if ((selectOnTab || selectOnBlur) && highlitedItem) {
                       selectItem(highlitedItem);
+                      setShowSelectedItem(true);
                     }
                   }
                 },
@@ -881,15 +877,21 @@ const MultiSelect = React.forwardRef(
       ...!hideSelectAll ? [selectAll] : [],
       ...normalizedItems
     ]);
-    const filterListItems = ({ inputValue: inputValue2 }) => setListItems([
-      ...!hideSelectAll ? [selectAll] : [],
-      ...normalizedItems.filter((item) => itemFilter(item, inputValue2))
-    ]);
-    const updateListItems = ({ inputValue: inputValue2 }) => {
-      const shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
-      if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
-      filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
-    };
+    const filterListItems = React.useCallback(
+      ({ inputValue: inputValue2 }) => setListItems([
+        ...!hideSelectAll ? [selectAll] : [],
+        ...normalizedItems.filter((item) => itemFilter(item, inputValue2))
+      ]),
+      [hideSelectAll, selectAll, normalizedItems, itemFilter]
+    );
+    const updateListItems = React.useCallback(
+      ({ inputValue: inputValue2 }) => {
+        const shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
+        if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
+        filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
+      },
+      [filterListItems, initialItems, fetchItems]
+    );
     React.useEffect(() => {
       filterListItems({ inputValue });
     }, [normalizedItems]);
@@ -954,6 +956,8 @@ const MultiSelect = React.forwardRef(
           case useCombobox.stateChangeTypes.InputChange: {
             const leadingWhitespaceTest = /^\s+/g;
             const isSpacePressedOnEmptyInput = changes.inputValue === " ";
+            if (!isSpacePressedOnEmptyInput)
+              setLastHighlightedIndex(hideSelectAll ? 0 : 1);
             if (changes.inputValue?.match(leadingWhitespaceTest)) {
               const sanitizedInputValue = changes.inputValue.replace(
                 leadingWhitespaceTest,
@@ -975,13 +979,13 @@ const MultiSelect = React.forwardRef(
                 }
               }
             }
-            return changes;
+            return { ...changes, highlightedIndex: hideSelectAll ? 0 : 1 };
           }
           default:
             return changes;
         }
       },
-      [hideSelectAll, normalizedItems, filterListItems, initialItems]
+      [hideSelectAll, normalizedItems, initialItems]
     );
     const {
       getInputProps,
@@ -990,7 +994,6 @@ const MultiSelect = React.forwardRef(
       getMenuProps,
       getToggleButtonProps,
       highlightedIndex,
-      setHighlightedIndex,
       inputValue,
       isOpen,
       setInputValue
@@ -1003,8 +1006,6 @@ const MultiSelect = React.forwardRef(
       stateReducer,
       onInputValueChange(changes) {
         updateListItems({ inputValue: changes.inputValue });
-        setHighlightedIndex(hideSelectAll ? 0 : 1);
-        setLastHighlightedIndex(hideSelectAll ? 0 : 1);
       },
       onSelectedItemChange({ selectedItem: clickedItem }) {
         if (!clickedItem) return;
@@ -1028,19 +1029,17 @@ const MultiSelect = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
+          apply({ elements, availableHeight }) {
+            elements.floating.style.setProperty(
+              "--list-max-height",
+              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            );
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -1070,14 +1069,8 @@ const MultiSelect = React.forwardRef(
         labelId: getLabelProps().id,
         labelProps: getLabelProps(),
         labelTooltip,
-        onBlur: (e) => {
-          setInputValue("");
-          onBlur?.(e);
-        },
         onClick: (e) => {
-          if (e.target === e.currentTarget) {
-            getInputProps()?.onClick?.(e);
-          }
+          if (e.target === e.currentTarget) getInputProps()?.onClick?.(e);
           onClick?.(e);
         },
         onKeyDown,
@@ -1093,19 +1086,22 @@ const MultiSelect = React.forwardRef(
             ariaLabelSelectedItem,
             floatingStyles,
             getItemProps,
-            getMenuProps,
             highlightedIndex,
             isOpen,
             listItems,
-            style: listStyle,
-            setListRef: refs.setFloating,
             loading: loading ?? resolvedItemsLoading,
             loadingText,
             noMatchesText,
             selectAllCheckboxState,
             selectAllItem: selectAll,
             selectedItems,
-            readOnly
+            readOnly,
+            ...getMenuProps({
+              "aria-multiselectable": true,
+              refKey: "innerRef",
+              ref: refs.setFloating,
+              style: listStyle
+            })
           }
         ),
         ...rest,
@@ -1164,6 +1160,10 @@ const MultiSelect = React.forwardRef(
                           });
                         }
                       },
+                      onBlur: (e) => {
+                        setInputValue("");
+                        onBlur?.(e);
+                      },
                       ...getDropdownProps({
                         preventKeyAction: isOpen,
                         value: inputValue ?? EMPTY_INPUT,
@@ -1274,19 +1274,17 @@ const Dropdown = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
+          apply({ elements, availableHeight }) {
+            elements.floating.style.setProperty(
+              "--list-max-height",
+              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            );
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -1339,17 +1337,19 @@ const Dropdown = React.forwardRef(
             ariaLabelSelectedItem,
             floatingStyles,
             getItemProps,
-            getMenuProps,
             highlightedIndex,
             isOpen,
             listItems: normalizedItems,
-            noMatchesText,
-            style: listStyle,
-            setListRef: refs.setFloating,
             loading: loading ?? resolvedItemsLoading,
             loadingText,
+            noMatchesText,
             selectedItems: selectedItem !== null ? [selectedItem] : [],
-            readOnly
+            readOnly,
+            ...getMenuProps({
+              refKey: "innerRef",
+              ref: refs.setFloating,
+              style: listStyle
+            })
           }
         ),
         ...rest,