@entur/dropdown 7.3.9-beta.0 → 7.3.9

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, useMemo, useState, useRef, useEffect, useCallback, useLayoutEffect } from "react";
+import React, { forwardRef, createElement, useState, useRef, useEffect, useCallback } 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,19 +16,19 @@ const DropdownList = ({
   ariaLabelChosenSingular = "valgt",
   ariaLabelSelectedItem = ", valgt element, trykk for å fjerne",
   getItemProps,
+  getMenuProps,
   isOpen,
   highlightedIndex,
   listItems,
   floatingStyles,
-  innerRef,
+  setListRef,
   loading = false,
   loadingText = "Laster inn …",
   noMatchesText = "Ingen treff for søket",
-  readOnly = false,
   selectAllCheckboxState,
   selectAllItem,
   selectedItems,
-  style,
+  readOnly = false,
   ...rest
 }) => {
   const isMultiselect = selectAllItem !== void 0;
@@ -41,7 +41,7 @@ const DropdownList = ({
     return true;
   });
   const ariaValuesSelectAll = () => {
-    switch (selectAllCheckboxState) {
+    switch (selectAllCheckboxState?.()) {
       case "indeterminate": {
         return {
           label: `${selectAllItem?.label}, delvis valgt`,
@@ -64,7 +64,7 @@ const DropdownList = ({
       Checkbox,
       {
         "aria-hidden": "true",
-        checked: selectAllCheckboxState,
+        checked: selectAllCheckboxState?.(),
         className: "eds-dropdown__list__item__checkbox",
         tabIndex: -1,
         onChange: () => void 0
@@ -111,68 +111,75 @@ const DropdownList = ({
       }) : null
     ] });
   };
-  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
-          );
-        });
-      })()
-    }
+  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
+            );
+          });
+        })()
+      }
+    )
   );
 };
 const SelectedItemTag = ({
@@ -448,11 +455,11 @@ const useMultiselectUtils = ({
       (selectedItem) => selectedItem.value !== clickedItem.value
     )
   );
-  const selectAllCheckboxState = useMemo(() => {
+  const selectAllCheckboxState = () => {
     if (allListItemsAreSelected) return true;
     if (someListItemsAreSelected) return "indeterminate";
     return false;
-  }, [allListItemsAreSelected, someListItemsAreSelected]);
+  };
   const selectAllUnselectedItemsInListItems = (onChange) => {
     onChange([...selectedItems, ...unselectedItemsInListItems]);
   };
@@ -546,6 +553,7 @@ const SearchableDropdown = React.forwardRef(
     const resetInputState = ({
       changes
     }) => {
+      updateListItems({ inputValue: EMPTY_INPUT });
       return {
         ...changes,
         inputValue: EMPTY_INPUT
@@ -574,12 +582,11 @@ 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:
-            return resetInputState({ changes });
           case useCombobox.stateChangeTypes.InputBlur:
-            return resetInputState({
-              changes: { ...changes, selectedItem: value }
-            });
+            return resetInputState({ changes });
           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: {
@@ -650,17 +657,19 @@ const SearchableDropdown = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ elements, availableHeight }) {
-            elements.floating.style.setProperty(
-              "--list-max-height",
-              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            );
+          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`
+            });
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useLayoutEffect(() => {
+    useEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -691,7 +700,9 @@ 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,
@@ -709,19 +720,17 @@ 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,
-            ...getMenuProps({
-              refKey: "innerRef",
-              ref: refs.setFloating,
-              style: listStyle
-            })
+            readOnly
           }
         ),
         ...rest,
@@ -753,9 +762,8 @@ const SearchableDropdown = React.forwardRef(
                 onKeyDown(e) {
                   if (isOpen && e.key === "Tab") {
                     const highlitedItem = listItems[highlightedIndex];
-                    if ((selectOnTab || selectOnBlur) && highlitedItem) {
+                    if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
                       selectItem(highlitedItem);
-                      setShowSelectedItem(true);
                     }
                   }
                 },
@@ -877,21 +885,15 @@ const MultiSelect = React.forwardRef(
       ...!hideSelectAll ? [selectAll] : [],
       ...normalizedItems
     ]);
-    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]
-    );
+    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 });
+    };
     React.useEffect(() => {
       filterListItems({ inputValue });
     }, [normalizedItems]);
@@ -956,8 +958,6 @@ 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,
@@ -979,13 +979,13 @@ const MultiSelect = React.forwardRef(
                 }
               }
             }
-            return { ...changes, highlightedIndex: hideSelectAll ? 0 : 1 };
+            return changes;
           }
           default:
             return changes;
         }
       },
-      [hideSelectAll, normalizedItems, initialItems]
+      [hideSelectAll, normalizedItems, filterListItems, initialItems]
     );
     const {
       getInputProps,
@@ -994,6 +994,7 @@ const MultiSelect = React.forwardRef(
       getMenuProps,
       getToggleButtonProps,
       highlightedIndex,
+      setHighlightedIndex,
       inputValue,
       isOpen,
       setInputValue
@@ -1006,6 +1007,8 @@ 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;
@@ -1029,17 +1032,19 @@ const MultiSelect = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ elements, availableHeight }) {
-            elements.floating.style.setProperty(
-              "--list-max-height",
-              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            );
+          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`
+            });
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useLayoutEffect(() => {
+    useEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -1069,8 +1074,14 @@ 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,
@@ -1086,22 +1097,19 @@ 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,
-            ...getMenuProps({
-              "aria-multiselectable": true,
-              refKey: "innerRef",
-              ref: refs.setFloating,
-              style: listStyle
-            })
+            readOnly
           }
         ),
         ...rest,
@@ -1160,10 +1168,6 @@ const MultiSelect = React.forwardRef(
                           });
                         }
                       },
-                      onBlur: (e) => {
-                        setInputValue("");
-                        onBlur?.(e);
-                      },
                       ...getDropdownProps({
                         preventKeyAction: isOpen,
                         value: inputValue ?? EMPTY_INPUT,
@@ -1274,17 +1278,19 @@ const Dropdown = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ elements, availableHeight }) {
-            elements.floating.style.setProperty(
-              "--list-max-height",
-              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            );
+          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`
+            });
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useLayoutEffect(() => {
+    useEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -1337,19 +1343,17 @@ 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,
-            ...getMenuProps({
-              refKey: "innerRef",
-              ref: refs.setFloating,
-              style: listStyle
-            })
+            readOnly
           }
         ),
         ...rest,