@entur/dropdown 7.3.7 → 7.3.9-beta.0

package/dist/MultiSelect.d.ts

@@ -55,7 +55,7 @@ export type MultiSelectProps<ValueType> = Omit<DropdownProps<ValueType>, 'select
     /** Callback som kalles når brukeren går ut av input-feltet */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /** Callback når komponenten klikkes */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Callback når en tast trykkes */
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     /** Callback når komponenten får fokus */
@@ -115,7 +115,7 @@ export declare const MultiSelect: <ValueType extends unknown>(props: Omit<Dropdo
     /** Callback som kalles når brukeren går ut av input-feltet */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /** Callback når komponenten klikkes */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Callback når en tast trykkes */
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     /** Callback når komponenten får fokus */

package/dist/SearchableDropdown.d.ts

@@ -17,7 +17,7 @@ export type SearchableDropdownProps<ValueType> = DropdownProps<ValueType> & {
     /** Callback som kalles når brukeren går ut av input-feltet */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /** Callback når komponenten klikkes */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Callback når en tast trykkes */
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     /** Callback når komponenten får fokus */
@@ -39,7 +39,7 @@ export declare const SearchableDropdown: <ValueType extends unknown>(props: Drop
     /** Callback som kalles når brukeren går ut av input-feltet */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /** Callback når komponenten klikkes */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Callback når en tast trykkes */
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     /** Callback når komponenten får fokus */

package/dist/components/DropdownList.d.ts

@@ -1,10 +1,9 @@
-import { default as React } from 'react';
+import { default as React, MutableRefObject } from 'react';
 import { UseComboboxPropGetters, UseSelectPropGetters } from 'downshift';
 import { NormalizedDropdownItemType } from '../types';
 type DropdownListProps<ValueType> = {
     ariaLabelChosenSingular?: string;
     ariaLabelSelectedItem?: string;
-    getMenuProps: UseComboboxPropGetters<ValueType>['getMenuProps'] | UseSelectPropGetters<ValueType>['getMenuProps'];
     getItemProps: UseComboboxPropGetters<ValueType>['getItemProps'] | UseSelectPropGetters<ValueType>['getItemProps'];
     highlightedIndex: number;
     isOpen: boolean;
@@ -12,15 +11,15 @@ type DropdownListProps<ValueType> = {
     floatingStyles: {
         [key: string]: any;
     } | undefined;
-    setListRef: (node: HTMLElement | null) => void;
+    innerRef?: MutableRefObject<HTMLUListElement> | ((node: HTMLElement | null) => void);
     loading?: boolean;
     loadingText?: string;
     noMatchesText?: string;
-    selectAllCheckboxState?: () => boolean | 'indeterminate';
+    selectAllCheckboxState?: boolean | 'indeterminate';
     selectAllItem?: NormalizedDropdownItemType<string>;
     selectedItems: NormalizedDropdownItemType<ValueType>[];
     style?: React.CSSProperties;
     readOnly?: boolean;
 };
-export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, isOpen, highlightedIndex, listItems, floatingStyles, setListRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, readOnly, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
+export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, isOpen, highlightedIndex, listItems, floatingStyles, innerRef, loading, loadingText, noMatchesText, readOnly, selectAllCheckboxState, selectAllItem, selectedItems, style, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
 export {};

package/dist/dropdown.cjs.js

@@ -18,28 +18,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`,
@@ -62,7 +66,7 @@ const DropdownList = ({
       form.Checkbox,
       {
         "aria-hidden": "true",
-        checked: selectAllCheckboxState?.(),
+        checked: selectAllCheckboxState,
         className: "eds-dropdown__list__item__checkbox",
         tabIndex: -1,
         onChange: () => void 0
@@ -109,75 +113,68 @@ const DropdownList = ({
       }) : null
     ] });
   };
-  return (
-    // use popover from @entur/tooltip when that package upgrades to floating-ui
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "li",
-              {
-                className: "eds-dropdown__list__item",
-                children: loadingText
-              },
-              "dropdown-list-loading"
-            );
-          }
-          if (isNoMatches) {
-            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "li",
+            {
+              className: "eds-dropdown__list__item",
+              children: loadingText
+            },
+            "dropdown-list-loading"
+          );
+        }
+        if (isNoMatches) {
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = ({
@@ -453,11 +450,11 @@ const useMultiselectUtils = ({
       (selectedItem) => selectedItem.value !== clickedItem.value
     )
   );
-  const selectAllCheckboxState = () => {
+  const selectAllCheckboxState = React.useMemo(() => {
     if (allListItemsAreSelected) return true;
     if (someListItemsAreSelected) return "indeterminate";
     return false;
-  };
+  }, [allListItemsAreSelected, someListItemsAreSelected]);
   const selectAllUnselectedItemsInListItems = (onChange) => {
     onChange([...selectedItems, ...unselectedItemsInListItems]);
   };
@@ -551,7 +548,6 @@ const SearchableDropdown = React.forwardRef(
     const resetInputState = ({
       changes
     }) => {
-      updateListItems({ inputValue: EMPTY_INPUT });
       return {
         ...changes,
         inputValue: EMPTY_INPUT
@@ -580,11 +576,12 @@ const SearchableDropdown = React.forwardRef(
           // empty input to show selected item and reset dropdown list on item selection
           case downshift.useCombobox.stateChangeTypes.ItemClick:
           case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-          case downshift.useCombobox.stateChangeTypes.InputBlur:
             return resetInputState({ changes });
+          case downshift.useCombobox.stateChangeTypes.InputBlur:
+            return resetInputState({
+              changes: { ...changes, selectedItem: value }
+            });
           case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-            if (changes.selectedItem !== null && !inputHasFocus)
-              setShowSelectedItem(true);
             return resetInputState({ changes });
           // remove leading whitespace, select element with spacebar on empty input
           case downshift.useCombobox.stateChangeTypes.InputChange: {
@@ -655,19 +652,17 @@ const SearchableDropdown = React.forwardRef(
         reactDom.offset(tokens.space.extraSmall2),
         reactDom.shift({ padding: tokens.space.extraSmall }),
         reactDom.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`
+            );
           }
         }),
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
           refs.reference.current,
@@ -698,9 +693,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,
@@ -718,17 +711,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,
@@ -760,8 +755,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);
                     }
                   }
                 },
@@ -883,15 +879,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]);
@@ -956,6 +958,8 @@ const MultiSelect = React.forwardRef(
           case downshift.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,
@@ -977,13 +981,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,
@@ -992,7 +996,6 @@ const MultiSelect = React.forwardRef(
       getMenuProps,
       getToggleButtonProps,
       highlightedIndex,
-      setHighlightedIndex,
       inputValue,
       isOpen,
       setInputValue
@@ -1005,8 +1008,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;
@@ -1030,19 +1031,17 @@ const MultiSelect = React.forwardRef(
         reactDom.offset(tokens.space.extraSmall2),
         reactDom.shift({ padding: tokens.space.extraSmall }),
         reactDom.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`
+            );
           }
         }),
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
           refs.reference.current,
@@ -1072,14 +1071,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,
@@ -1095,19 +1088,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,
@@ -1166,6 +1162,10 @@ const MultiSelect = React.forwardRef(
                           });
                         }
                       },
+                      onBlur: (e) => {
+                        setInputValue("");
+                        onBlur?.(e);
+                      },
                       ...getDropdownProps({
                         preventKeyAction: isOpen,
                         value: inputValue ?? EMPTY_INPUT,
@@ -1276,19 +1276,17 @@ const Dropdown = React.forwardRef(
         reactDom.offset(tokens.space.extraSmall2),
         reactDom.shift({ padding: tokens.space.extraSmall }),
         reactDom.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`
+            );
           }
         }),
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
           refs.reference.current,
@@ -1341,17 +1339,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,