@digdir/designsystemet-react 0.58.0 → 0.59.1-alpha.0

package/dist/esm/components/form/Combobox/Option/Option.js

@@ -1,51 +1,33 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useContext, useMemo, useEffect } from 'react';
+import { memo, forwardRef, useId, useContext } from 'react';
 import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
-import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { ComboboxContext } from '../Combobox.js';
-import useDebounce from '../../../../utilities/useDebounce.js';
+import { ComboboxContext } from '../ComboboxContext.js';
 import { SelectedIcon } from './Icon/SelectedIcon.js';
 import classes from './Option.module.css.js';
 import ComboboxOptionDescription from './Description/Description.js';
+import useComboboxOption from './useComboboxOption.js';
 import { omit } from '../../../../utilities/objectUtils.js';
 import { Label } from '../../../Typography/Label/Label.js';
 
-const ComboboxOption = forwardRef(({ value, description, children, className, ...rest }, ref) => {
+const ComboboxOption = memo(forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = useId();
-    const generatedId = useId();
+    const { id, ref, selected, active, onOptionClick } = useComboboxOption({
+        id: rest.id,
+        ref: forwardedRef,
+        value,
+    });
     const context = useContext(ComboboxContext);
     if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
     }
-    const { selectedOptions, activeIndex, setActiveOption, onOptionClick, size, listRef, optionValues, multiple, } = context;
-    const index = useMemo(() => optionValues.indexOf(value), [optionValues, value]);
-    const combinedRef = useMergeRefs([
-        (node) => {
-            listRef.current[index] = node;
-        },
-        ref,
-    ]);
-    if (index === -1) {
-        throw new Error('Internal error: ComboboxOption did not find index');
-    }
-    const selected = selectedOptions.find((option) => option.value === value);
-    useEffect(() => {
-        if (activeIndex === index)
-            setActiveOption(index, rest.id || generatedId);
-    }, [activeIndex, generatedId, index, rest.id, setActiveOption]);
-    const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
-    return (jsxs("button", { id: rest.id || generatedId, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
-            onOptionClickDebounced();
+    const { size, multiple, getItemProps } = context;
+    const props = getItemProps();
+    return (jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+            onOptionClick();
             rest.onClick?.(e);
-        }, onMouseEnter: (e) => {
-            setActiveOption(index, labelId);
-            rest.onMouseEnter?.(e);
-        }, onFocus: (e) => {
-            setActiveOption(index, labelId);
-            rest.onFocus?.(e);
-        }, className: clsx(classes.option, classes[size], activeIndex === index && classes.active, multiple && classes.multiple, className), ref: combinedRef, ...omit(['displayValue'], rest), children: [jsx(Label, { asChild: true, size: size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: classes.optionText, size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }));
-});
+        }, className: clsx(classes.option, classes[size], active && classes.active, multiple && classes.multiple, className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, size: size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: classes.optionText, size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }));
+}));
 ComboboxOption.displayName = 'ComboboxOption';
 
 export { ComboboxOption };

package/dist/esm/components/form/Combobox/Option/useComboboxOption.js

@@ -0,0 +1,45 @@
+'use client';
+import { useId, useContext, useMemo, useEffect } from 'react';
+import { useMergeRefs } from '../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { ComboboxContext } from '../ComboboxContext.js';
+import useDebounce from '../../../../utilities/useDebounce.js';
+import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';
+
+function useComboboxOption({ id, ref, value, }) {
+    const generatedId = useId();
+    const newId = id || generatedId;
+    const context = useContext(ComboboxContext);
+    const { activeIndex } = useComboboxId();
+    const dispatch = useComboboxIdDispatch();
+    if (!context) {
+        throw new Error('ComboboxOption must be used within a Combobox');
+    }
+    const { selectedOptions, onOptionClick, listRef, customIds, filteredOptions, } = context;
+    const index = useMemo(() => filteredOptions.indexOf(value) + customIds.length, [customIds.length, filteredOptions, value]);
+    const combinedRef = useMergeRefs([
+        (node) => {
+            listRef.current[index] = node;
+        },
+        ref,
+    ]);
+    if (index === -1) {
+        throw new Error('Internal error: ComboboxOption did not find index');
+    }
+    const selected = selectedOptions[value];
+    const active = activeIndex === index;
+    useEffect(() => {
+        if (active) {
+            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
+        }
+    }, [generatedId, id, dispatch, active, index]);
+    const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
+    return {
+        id: newId,
+        ref: combinedRef,
+        selected,
+        active,
+        onOptionClick: onOptionClickDebounced,
+    };
+}
+
+export { useComboboxOption as default };

package/dist/esm/components/form/Combobox/internal/ComboboxChips.js

@@ -2,7 +2,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import '../../../Chip/index.js';
-import { ComboboxContext } from '../Combobox.js';
+import { ComboboxContext } from '../ComboboxContext.js';
 import { RemovableChip } from '../../../Chip/Removable/Removable.js';
 
 const ComboboxChips = () => {
@@ -11,7 +11,7 @@ const ComboboxChips = () => {
         throw new Error('ComboboxContext is missing');
     }
     const { size, readOnly, disabled, selectedOptions, setSelectedOptions, chipSrLabel, inputRef, } = context;
-    return (jsx(Fragment, { children: selectedOptions.map((option) => {
+    return (jsx(Fragment, { children: Object.keys(selectedOptions).map((value) => {
             return (jsx(RemovableChip, { size: size, disabled: disabled, onKeyDown: (e) => {
                     if (readOnly)
                         return;
@@ -19,7 +19,11 @@ const ComboboxChips = () => {
                         return;
                     if (e.key === 'Enter') {
                         e.stopPropagation();
-                        setSelectedOptions(selectedOptions.filter((i) => i.value !== option.value));
+                        setSelectedOptions((prev) => {
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            const { [value]: _, ...rest } = prev;
+                            return rest;
+                        });
                         inputRef.current?.focus();
                     }
                 }, onClick: () => {
@@ -28,11 +32,15 @@ const ComboboxChips = () => {
                     if (disabled)
                         return;
                     /* If we click a chip, filter the active values and remove the one we clicked */
-                    setSelectedOptions(selectedOptions.filter((i) => i.value !== option.value));
+                    setSelectedOptions((prev) => {
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        const { [value]: _, ...rest } = prev;
+                        return rest;
+                    });
                 }, style: {
                     /* We already set the opacity on Combobox */
                     opacity: 1,
-                }, "aria-label": chipSrLabel(option), children: option.label }, option.value));
+                }, "aria-label": chipSrLabel(selectedOptions[value]), children: selectedOptions[value].label }, value));
         }) }));
 };
 ComboboxChips.displayName = 'ComboboxChips';

package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
-import { ComboboxContext } from '../Combobox.js';
+import { ComboboxContext } from '../ComboboxContext.js';
 import classes from '../Combobox.module.css.js';
 
 const ComboboxClearButton = () => {
@@ -17,7 +17,7 @@ const ComboboxClearButton = () => {
                 return;
             if (disabled)
                 return;
-            setSelectedOptions([]);
+            setSelectedOptions({});
             setInputValue('');
         }, onKeyDown: (e) => {
             if (readOnly)
@@ -26,7 +26,7 @@ const ComboboxClearButton = () => {
                 return;
             if (e.key === 'Enter') {
                 e.stopPropagation();
-                setSelectedOptions([]);
+                setSelectedOptions({});
                 setInputValue('');
                 inputRef.current?.focus();
             }

package/dist/esm/components/form/Combobox/internal/ComboboxInput.js

@@ -3,10 +3,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext, useState, useEffect } from 'react';
 import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
-import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { ComboboxContext } from '../Combobox.js';
+import { useMergeRefs } from '../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { ComboboxContext } from '../ComboboxContext.js';
 import classes from '../Combobox.module.css.js';
 import textFieldClasses from '../../Textfield/Textfield.module.css.js';
+import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
 import { Box } from '../../../Box/Box.js';
@@ -14,10 +15,14 @@ import { omit } from '../../../../utilities/objectUtils.js';
 
 const ComboboxInput = ({ ...rest }) => {
     const context = useContext(ComboboxContext);
+    const idDispatch = useComboboxIdDispatch();
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, activeDescendant, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, hideClearButton, setOpen, setActiveIndex, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const setActiveIndex = (id) => {
+        idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
+    };
+    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, hideClearButton, setOpen, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
     const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
     // we need to check if input is in focus, to add focus styles to the wrapper
     const [inputInFocus, setInputInFocus] = useState(false);
@@ -48,10 +53,10 @@ const ComboboxInput = ({ ...rest }) => {
             setOpen(false);
         }
         // check if input value is the same as a label, if so, select it
-        const option = options.find((option) => option.label === value);
+        const option = options[value];
         if (!option)
             return;
-        if (selectedOptions.find((selectedOption) => selectedOption.value === option.value))
+        if (selectedOptions[option.value])
             return;
         handleSelectOption(option);
         if (multiple) {
@@ -64,36 +69,36 @@ const ComboboxInput = ({ ...rest }) => {
             }, 0);
         }
     };
-    const showClearButton = multiple && !hideClearButton && selectedOptions.length > 0;
-    return (jsxs(Box
+    const showClearButton = multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
     /* Props from floating-ui */
-    , { ...getReferenceProps({
-            ref: refs?.setReference,
-            role: null,
-            'aria-controls': null,
-            'aria-expanded': null,
-            'aria-haspopup': null,
-            /* If we click the wrapper, open the list, set index to first option, and focus the input */
-            onClick() {
-                if (disabled)
-                    return;
-                if (readOnly)
-                    return;
-                setOpen(true);
-                setActiveIndex(0);
-                inputRef.current?.focus();
-            },
-            /* Handles list navigation */
-            onKeyDown(event) {
-                handleKeyDown(event);
-            },
-            // preventDefault on keydown to avoid sending in form
-            onKeyPress(event) {
-                if (event.key === 'Enter') {
-                    event.preventDefault();
-                }
-            },
-        }), "aria-disabled": disabled, className: clsx(textFieldClasses.input, classes.inputWrapper, classes[size], inputInFocus && classes.inFocus, readOnly && classes.readonly, error && classes.error), children: [jsxs("div", { className: classes.chipAndInput, children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": activeDescendant, readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
+    const props = getReferenceProps({
+        ref: refs?.setReference,
+        role: null,
+        'aria-controls': null,
+        'aria-expanded': null,
+        'aria-haspopup': null,
+        /* If we click the wrapper, open the list, set index to first option, and focus the input */
+        onClick() {
+            if (disabled)
+                return;
+            if (readOnly)
+                return;
+            setOpen(true);
+            setActiveIndex(0);
+            inputRef.current?.focus();
+        },
+        /* Handles list navigation */
+        onKeyDown(event) {
+            handleKeyDown(event);
+        },
+        // preventDefault on keydown to avoid sending in form
+        onKeyPress(event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+            }
+        },
+    });
+    return (jsxs(Box, { ...props, "aria-disabled": disabled, className: clsx(textFieldClasses.input, classes.inputWrapper, classes[size], inputInFocus && classes.inFocus, readOnly && classes.readonly, error && classes.error), children: [jsxs("div", { className: classes.chipAndInput, children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
                             onChange(e);
                             rest.onChange && rest.onChange(e);
                         } })] }), showClearButton && jsx(ComboboxClearButton, {}), jsx("div", { className: classes.arrow, children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));

package/dist/esm/components/form/Combobox/internal/ComboboxNative.js

@@ -3,8 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 
 const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
     return (jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple
-            ? selectedOptions.map((option) => option.value)
-            : selectedOptions[0]?.value, onChange: () => { }, children: selectedOptions.map((option) => (jsx("option", { value: option.value }, option.value))) }));
+            ? Object.keys(selectedOptions)
+            : Object.keys(selectedOptions)[0], onChange: () => { }, children: Object.keys(selectedOptions).map((value) => (jsx("option", { value: value }, value))) }));
 };
 ComboboxNative.displayName = 'ComboboxNative';
 var ComboboxNative$1 = ComboboxNative;

package/dist/esm/components/form/Combobox/useCombobox.js

@@ -13,9 +13,11 @@ function isComboboxCustom(child) {
 function isInteractiveComboboxCustom(child) {
     return isComboboxCustom(child) && child.props.interactive === true;
 }
-function useCombobox({ children, inputValue, multiple, filter, initialValue, }) {
+function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
+    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, initialValue, }) {
     const options = useMemo(() => {
-        const allOptions = [];
+        const allOptions = {};
         Children.forEach(children, (child) => {
             if (isComboboxOption(child)) {
                 const props = child.props;
@@ -33,51 +35,57 @@ function useCombobox({ children, inputValue, multiple, filter, initialValue, })
                     });
                     label = childrenLabel;
                 }
-                allOptions.push({
+                allOptions[props.value] = {
                     value: props.value,
                     label,
                     displayValue: props.displayValue,
                     description: props.description,
-                });
+                };
             }
         });
         return allOptions;
     }, [children]);
-    const preSelectedOptions = (initialValue || [])
-        .map((value) => options.find((option) => option.value === value))
-        .filter(isOption);
+    const preSelectedOptions = useMemo(() => (initialValue || []).reduce((acc, value) => {
+        const option = options[value];
+        if (isOption(option)) {
+            acc[value] = option;
+        }
+        return acc;
+    }, {}), [initialValue, options]);
     const [selectedOptions, setSelectedOptions] = useState(preSelectedOptions);
     const [prevSelectedHash, setPrevSelectedHash] = useState(JSON.stringify(selectedOptions));
-    const optionsChildren = useMemo(() => {
-        const valuesArray = Array.from(options);
-        const children_ = Children.toArray(children).filter((child) => isComboboxOption(child));
-        const activeValue = valuesArray.find((item) => item.label === inputValue);
-        if (activeValue && !multiple)
-            return children_;
-        if (inputValue === '' && !multiple)
-            return children_;
-        return children_.filter((child) => {
-            const { value } = child.props;
-            const option = valuesArray.find((item) => item.value === value);
-            if (!option)
-                return false;
-            const isSelected = selectedOptions.some((selectedOption) => selectedOption.value === value);
-            // show what we search for, and all selected options
-            return filter(inputValue, { ...option }) || isSelected;
-        });
-    }, [options, children, multiple, inputValue, selectedOptions, filter]);
-    const customIds = useMemo(() => {
+    const { optionsChildren, customIds } = useMemo(() => {
+        const allChildren = Children.toArray(children);
+        const optionsChildren = allChildren.filter((child) => isComboboxOption(child));
         // find all custom components with `interactive=true` and generate random values for them
-        const children_ = Children.toArray(children).filter((child) => {
+        const customChildren = allChildren.filter((child) => {
             return isInteractiveComboboxCustom(child);
         });
         // return all ids
-        return children_.map((child) => {
+        const customIds = customChildren.map((child) => {
             if (!child.props.id)
                 throw new Error('If ComboboxCustom is interactive, it must have an id');
             return child.props.id;
         });
+        return { optionsChildren, customIds };
     }, [children]);
+    const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
+        const filteredOptions = [];
+        const filteredOptionsChildren = Object.keys(options)
+            .map((option, index) => {
+            if (multiple && selectedOptions[option]) {
+                filteredOptions.push(options[option].value);
+                return optionsChildren[index];
+            }
+            if (filter(inputValue, options[option])) {
+                filteredOptions.push(options[option].value);
+                return optionsChildren[index];
+            }
+        })
+            .filter((child) => child);
+        return { filteredOptions, filteredOptionsChildren };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue, multiple, options, optionsChildren, selectedOptions]);
     const optionValues = useMemo(() => {
         // create an index map of values from optionsChildren
         const options = optionsChildren.map((child) => {
@@ -86,20 +94,26 @@ function useCombobox({ children, inputValue, multiple, filter, initialValue, })
         });
         return [...customIds, ...options];
     }, [customIds, optionsChildren]);
-    const restChildren = useMemo(() => {
-        return Children.toArray(children).filter((child) => {
+    const { restChildren, interactiveChildren } = useMemo(() => {
+        const restChildren = Children.toArray(children).filter((child) => {
             return !isComboboxOption(child);
         });
+        const interactiveChildren = restChildren.filter((child) => {
+            return isInteractiveComboboxCustom(child);
+        });
+        return { restChildren, interactiveChildren };
     }, [children]);
     return {
-        optionsChildren,
+        filteredOptionsChildren,
+        filteredOptions,
         optionValues,
         restChildren,
         options,
         customIds,
         selectedOptions,
-        setSelectedOptions,
         prevSelectedHash,
+        interactiveChildren,
+        setSelectedOptions,
         setPrevSelectedHash,
     };
 }

package/dist/esm/components/form/Combobox/useComboboxKeyboard.js

@@ -0,0 +1,77 @@
+'use client';
+import useDebounce from '../../../utilities/useDebounce.js';
+import { useComboboxId } from './ComboboxIdContext.js';
+
+const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, setInputValue, setSelectedOptions, handleSelectOption, }) => {
+    const { activeIndex } = useComboboxId();
+    // handle keyboard navigation in the list
+    const handleKeyDownFunc = (event) => {
+        if (readOnly || disabled)
+            return;
+        if (!event)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                /* If we are on the first item, close */
+                if (activeIndex === 0) {
+                    setOpen(false);
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                // ignore if it is closed
+                if (!open)
+                    break;
+                // check if we are in the custom components
+                if (activeIndex <= interactiveChildren.length - 1) {
+                    const selectedComponent = interactiveChildren[activeIndex];
+                    if (selectedComponent.props.onSelect) {
+                        selectedComponent?.props.onSelect();
+                        return;
+                    }
+                }
+                // if we are in the options, find the actual index
+                // eslint-disable-next-line no-case-declarations
+                const valueIndex = activeIndex - interactiveChildren.length;
+                // eslint-disable-next-line no-case-declarations
+                const option = filteredOptions[valueIndex];
+                if (!multiple) {
+                    // check if option is already selected, if so, deselect it
+                    if (selectedOptions[option]) {
+                        setSelectedOptions({});
+                        setInputValue('');
+                        return;
+                    }
+                }
+                handleSelectOption(options[option]);
+                break;
+            case 'Backspace':
+                if (inputValue === '' &&
+                    multiple &&
+                    Object.keys(selectedOptions).length >= 0) {
+                    setSelectedOptions((prev) => {
+                        const updated = { ...prev };
+                        const keys = Object.keys(updated);
+                        delete updated[keys[keys.length - 1]];
+                        return updated;
+                    });
+                }
+                // if we are in single mode, we need to set activeValue to null
+                if (!multiple) {
+                    setSelectedOptions({});
+                }
+                break;
+        }
+    };
+    const handleKeyDown = useDebounce(handleKeyDownFunc, 20);
+    return handleKeyDown;
+};
+
+export { useComboboxKeyboard };

package/dist/esm/components/form/Combobox/useFloatingCombobox.js

@@ -0,0 +1,76 @@
+'use client';
+import { useFloating, useRole, useDismiss, useListNavigation, useInteractions } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
+import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';
+import { autoUpdate, flip, size } from '../../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { offset } from '../../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js';
+
+const useFloatingCombobox = ({ listRef }) => {
+    const [open, setOpen] = useState(false);
+    const { activeIndex } = useComboboxId();
+    const dispatch = useComboboxIdDispatch();
+    // floating UI
+    const { refs, floatingStyles, context } = useFloating({
+        open,
+        onOpenChange: (newOpen) => {
+            if (!newOpen)
+                dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
+            flushSync(() => {
+                if (refs.floating.current && !newOpen) {
+                    refs.floating.current.scrollTop = 0;
+                }
+                setTimeout(() => {
+                    setOpen(newOpen);
+                }, 1);
+            });
+        },
+        whileElementsMounted: (reference, floating, update) => {
+            autoUpdate(reference, floating, update);
+            return () => {
+                floating.scrollTop = 0;
+            };
+        },
+        middleware: [
+            flip({ padding: 10 }),
+            size({
+                apply({ rects, elements }) {
+                    requestAnimationFrame(() => {
+                        Object.assign(elements.floating.style, {
+                            width: `calc(${rects.reference.width}px - calc(var(--fds-spacing-2) * 2))`,
+                            maxHeight: `200px`,
+                        });
+                    });
+                },
+            }),
+            offset(10),
+        ],
+    });
+    const role = useRole(context, { role: 'listbox' });
+    const dismiss = useDismiss(context);
+    const listNav = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        virtual: true,
+        scrollItemIntoView: true,
+        enabled: open,
+        focusItemOnHover: true,
+        onNavigate: (index) => {
+            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
+        },
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);
+    return {
+        open,
+        setOpen,
+        activeIndex,
+        refs,
+        floatingStyles,
+        context,
+        getReferenceProps,
+        getFloatingProps,
+        getItemProps,
+    };
+};
+
+export { useFloatingCombobox };

package/dist/esm/components/form/Search/Search.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useCallback } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
-import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { useSearch } from './useSearch.js';
 import classes from './Search.module.css.js';
 import { Button } from '../../Button/Button.js';

package/dist/esm/node_modules/@floating-ui/utils/{dom/dist → dist}/floating-ui.utils.dom.js

@@ -10,7 +10,7 @@ function getNodeName(node) {
 }
 function getWindow(node) {
   var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
 function getDocumentElement(node) {
   var _ref;
@@ -109,18 +109,21 @@ function getNearestOverflowAncestor(node) {
   }
   return getNearestOverflowAncestor(parentNode);
 }
-function getOverflowAncestors(node, list) {
+function getOverflowAncestors(node, list, traverseIframes) {
   var _node$ownerDocument2;
   if (list === void 0) {
     list = [];
   }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
   const scrollableAncestor = getNearestOverflowAncestor(node);
   const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
   const win = getWindow(scrollableAncestor);
   if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
   }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 
 export { getComputedStyle, getContainingBlock, getDocumentElement, getNearestOverflowAncestor, getNodeName, getNodeScroll, getOverflowAncestors, getParentNode, getWindow, isContainingBlock, isElement, isHTMLElement, isLastTraversableNode, isNode, isOverflowElement, isShadowRoot, isTableElement, isWebKit };

package/dist/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js

@@ -1,4 +1,9 @@
 'use client';
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;