@entur/dropdown 7.3.9-beta.0 → 7.3.9

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<HTMLElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => 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<HTMLElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => 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<HTMLElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => 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<HTMLElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => 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,9 +1,10 @@
-import { default as React, MutableRefObject } from 'react';
+import { default as React } 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;
@@ -11,15 +12,15 @@ type DropdownListProps<ValueType> = {
     floatingStyles: {
         [key: string]: any;
     } | undefined;
-    innerRef?: MutableRefObject<HTMLUListElement> | ((node: HTMLElement | null) => void);
+    setListRef: (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, isOpen, highlightedIndex, listItems, floatingStyles, innerRef, loading, loadingText, noMatchesText, readOnly, selectAllCheckboxState, selectAllItem, selectedItems, style, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
+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 {};

package/dist/dropdown.cjs.js

@@ -18,19 +18,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;
@@ -43,7 +43,7 @@ const DropdownList = ({
     return true;
   });
   const ariaValuesSelectAll = () => {
-    switch (selectAllCheckboxState) {
+    switch (selectAllCheckboxState?.()) {
       case "indeterminate": {
         return {
           label: `${selectAllItem?.label}, delvis valgt`,
@@ -66,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
@@ -113,68 +113,75 @@ const DropdownList = ({
       }) : null
     ] });
   };
-  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
-          );
-        });
-      })()
-    }
+  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
+            );
+          });
+        })()
+      }
+    )
   );
 };
 const SelectedItemTag = ({
@@ -450,11 +457,11 @@ const useMultiselectUtils = ({
       (selectedItem) => selectedItem.value !== clickedItem.value
     )
   );
-  const selectAllCheckboxState = React.useMemo(() => {
+  const selectAllCheckboxState = () => {
     if (allListItemsAreSelected) return true;
     if (someListItemsAreSelected) return "indeterminate";
     return false;
-  }, [allListItemsAreSelected, someListItemsAreSelected]);
+  };
   const selectAllUnselectedItemsInListItems = (onChange) => {
     onChange([...selectedItems, ...unselectedItemsInListItems]);
   };
@@ -548,6 +555,7 @@ const SearchableDropdown = React.forwardRef(
     const resetInputState = ({
       changes
     }) => {
+      updateListItems({ inputValue: EMPTY_INPUT });
       return {
         ...changes,
         inputValue: EMPTY_INPUT
@@ -576,12 +584,11 @@ 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:
-            return resetInputState({ changes });
           case downshift.useCombobox.stateChangeTypes.InputBlur:
-            return resetInputState({
-              changes: { ...changes, selectedItem: value }
-            });
+            return resetInputState({ changes });
           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: {
@@ -652,17 +659,19 @@ const SearchableDropdown = React.forwardRef(
         reactDom.offset(tokens.space.extraSmall2),
         reactDom.shift({ padding: tokens.space.extraSmall }),
         reactDom.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`
+            });
           }
         }),
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    React.useLayoutEffect(() => {
+    React.useEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
           refs.reference.current,
@@ -693,7 +702,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,
@@ -711,19 +722,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,
@@ -755,9 +764,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);
                     }
                   }
                 },
@@ -879,21 +887,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]);
@@ -958,8 +960,6 @@ 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,
@@ -981,13 +981,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,
@@ -996,6 +996,7 @@ const MultiSelect = React.forwardRef(
       getMenuProps,
       getToggleButtonProps,
       highlightedIndex,
+      setHighlightedIndex,
       inputValue,
       isOpen,
       setInputValue
@@ -1008,6 +1009,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;
@@ -1031,17 +1034,19 @@ const MultiSelect = React.forwardRef(
         reactDom.offset(tokens.space.extraSmall2),
         reactDom.shift({ padding: tokens.space.extraSmall }),
         reactDom.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`
+            });
           }
         }),
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    React.useLayoutEffect(() => {
+    React.useEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
           refs.reference.current,
@@ -1071,8 +1076,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,
@@ -1088,22 +1099,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,
@@ -1162,10 +1170,6 @@ const MultiSelect = React.forwardRef(
                           });
                         }
                       },
-                      onBlur: (e) => {
-                        setInputValue("");
-                        onBlur?.(e);
-                      },
                       ...getDropdownProps({
                         preventKeyAction: isOpen,
                         value: inputValue ?? EMPTY_INPUT,
@@ -1276,17 +1280,19 @@ const Dropdown = React.forwardRef(
         reactDom.offset(tokens.space.extraSmall2),
         reactDom.shift({ padding: tokens.space.extraSmall }),
         reactDom.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`
+            });
           }
         }),
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    React.useLayoutEffect(() => {
+    React.useEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
           refs.reference.current,
@@ -1339,19 +1345,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,