@digdir/designsystemet-react 1.0.0-rc.8 → 1.0.0

package/dist/esm/components/Combobox/Custom.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useContext, useMemo } from 'react';
+import { ComboboxContext } from './ComboboxContext.js';
+import { useComboboxId } from './ComboboxIdContext.js';
+import { Label } from '../Label/Label.js';
+import { omit } from '../../utilities/omit/omit.js';
+
+const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
+    if (interactive && !id) {
+        throw new Error('If ComboboxCustom is interactive, it must have an id');
+    }
+    const Component = asChild ? Slot : 'div';
+    const randomId = useId();
+    const { activeIndex } = useComboboxId();
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxCustom must be used within a Combobox');
+    }
+    const { customIds, setListRef, getItemProps, size } = context;
+    const index = useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
+    const combinedRef = useMergeRefs([
+        (node) => {
+            setListRef(index, node);
+        },
+        ref,
+    ]);
+    return (jsx(Label, { "data-size": size, asChild: true, children: jsx(Component, { ref: combinedRef, tabIndex: -1, className: cl('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
+});
+
+export { ComboboxCustom };

package/dist/esm/components/Combobox/Empty.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useContext } from 'react';
+import { ComboboxContext } from './ComboboxContext.js';
+import { Label } from '../Label/Label.js';
+
+const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxEmpty must be used within a Combobox');
+    }
+    const { filteredOptions, size } = context;
+    return (filteredOptions.length === 0 && (jsx(Label, { "data-size": size, asChild: true, children: jsx("div", { ref: ref, className: cl('ds-combobox__empty', className), ...rest, children: children }) })));
+});
+ComboboxEmpty.displayName = 'ComboboxEmpty';
+
+export { ComboboxEmpty };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const ComboboxOptionDescription = forwardRef(({ children, className, ...rest }, ref) => {
+    return (jsx("span", { className: cl('ds-combobox__option__description', className), ref: ref, ...rest, children: children }));
+});
+ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
+
+export { ComboboxOptionDescription as default };

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

@@ -0,0 +1,37 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { memo, forwardRef, useId, useContext, isValidElement } from 'react';
+import { omit } from '../../../utilities/omit/omit.js';
+import { ComboboxContext } from '../ComboboxContext.js';
+import ComboboxOptionDescription from './Description.js';
+import { SelectedIcon } from './SelectedIcon.js';
+import { useComboboxOption } from './useComboboxOption.js';
+import { Label } from '../../Label/Label.js';
+
+const ComboboxOption = memo(forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
+    const labelId = 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 { size, multiple, getItemProps } = context;
+    const props = getItemProps();
+    return (jsx(Label, { "data-size": 'md', asChild: true, children: jsxs("button", { ref: ref, id: id, 
+            // biome-ignore lint/a11y/useSemanticElements: biome wants me to use the <option> element
+            role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+                onOptionClick();
+                rest.onClick?.(e);
+            }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, "data-size": size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }) }));
+}));
+ComboboxOption.displayName = 'ComboboxOption';
+function isComboboxOption(child) {
+    return isValidElement(child) && child.type === ComboboxOption;
+}
+
+export { ComboboxOption, isComboboxOption };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { CheckmarkIcon } from '@navikt/aksel-icons';
+import cl from 'clsx/lite';
+
+const SelectedIcon = ({ multiple, selected }) => {
+    return (jsx("div", { className: cl(multiple && 'ds-combobox__option__icon-wrapper', selected && 'ds-combobox__option__icon-wrapper--selected'), children: selected && (jsx(CheckmarkIcon, { className: 'ds-combobox__option__icon-wrapper__icon', "aria-hidden": true })) }));
+};
+SelectedIcon.displayName = 'SelectedIcon';
+
+export { SelectedIcon };

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

@@ -0,0 +1,46 @@
+'use client';
+import { useMergeRefs } from '@floating-ui/react';
+import { useId, useContext, useMemo, useEffect } from 'react';
+import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { ComboboxContext } from '../ComboboxContext.js';
+import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';
+import { prefix } from '../utilities.js';
+
+const 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, setListRef, customIds, filteredOptions, } = context;
+    const index = useMemo(() => filteredOptions.indexOf(prefix(String(value))) + customIds.length, [customIds.length, filteredOptions, value]);
+    const combinedRef = useMergeRefs([
+        (node) => {
+            setListRef(index, node);
+        },
+        ref,
+    ]);
+    if (index === -1) {
+        throw new Error('Internal error: ComboboxOption did not find index');
+    }
+    const selected = selectedOptions[prefix(value)];
+    const active = activeIndex === index;
+    useEffect(() => {
+        if (active) {
+            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
+        }
+    }, [generatedId, id, dispatch, active, index]);
+    const onOptionClickDebounced = useDebounceCallback(() => onOptionClick(value), 50);
+    return {
+        id: newId,
+        ref: combinedRef,
+        selected,
+        active,
+        onOptionClick: onOptionClickDebounced,
+    };
+};
+
+export { useComboboxOption };

package/dist/esm/components/Combobox/index.js

@@ -0,0 +1,15 @@
+'use client';
+import { Combobox as Combobox$1 } from './Combobox.js';
+import { ComboboxEmpty } from './Empty.js';
+import { ComboboxOption } from './Option/Option.js';
+
+/**
+ * @deprecated Use `Suggestion` instead
+ */
+const Combobox = Combobox$1;
+Combobox.Option = ComboboxOption;
+Combobox.Empty = ComboboxEmpty;
+Combobox.Option.displayName = 'Combobox.Option';
+Combobox.Empty.displayName = 'Combobox.Empty';
+
+export { Combobox, ComboboxEmpty, ComboboxOption };

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

@@ -0,0 +1,43 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import '../../Chip/index.js';
+import { ComboboxContext } from '../ComboboxContext.js';
+import { ChipRemovable } from '../../Chip/Chips.js';
+
+const ComboboxChips = () => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef, } = context;
+    return (jsx(Fragment, { children: Object.keys(selectedOptions).map((value) => {
+            return (jsx(ChipRemovable, { "data-size": size, disabled: disabled, onKeyDown: (e) => {
+                    if (readOnly)
+                        return;
+                    if (disabled)
+                        return;
+                    if (e.key === 'Enter') {
+                        e.stopPropagation();
+                        handleSelectOption({
+                            option: selectedOptions[value],
+                            remove: true,
+                        });
+                        inputRef?.current?.focus();
+                    }
+                }, onClick: () => {
+                    if (readOnly)
+                        return;
+                    if (disabled)
+                        return;
+                    /* If we click a chip, filter the active values and remove the one we clicked */
+                    handleSelectOption({
+                        option: selectedOptions[value],
+                        remove: true,
+                    });
+                }, "aria-label": chipSrLabel(selectedOptions[value]), children: selectedOptions[value].label }, value));
+        }) }));
+};
+ComboboxChips.displayName = 'ComboboxChips';
+
+export { ComboboxChips as default };

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { XMarkIcon } from '@navikt/aksel-icons';
+import cl from 'clsx/lite';
+import { forwardRef, useContext } from 'react';
+import { ComboboxContext } from '../ComboboxContext.js';
+
+const ComboboxClearButton = forwardRef((props, ref) => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
+    return (jsx("button", { ...props, ref: ref, disabled: disabled, className: cl('ds-combobox__clear-button', `ds-focus`), onClick: () => {
+            if (readOnly)
+                return;
+            if (disabled)
+                return;
+            handleSelectOption({ option: null, clear: true });
+        }, onKeyDown: (e) => {
+            if (readOnly)
+                return;
+            if (disabled)
+                return;
+            if (e.key === 'Enter') {
+                e.stopPropagation();
+                handleSelectOption({ option: null, clear: true });
+            }
+        }, type: 'button', "aria-label": clearButtonLabel, children: jsx(XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
+});
+ComboboxClearButton.displayName = 'ComboboxClearButton';
+
+export { ComboboxClearButton as default };

package/dist/esm/components/Combobox/internal/ComboboxError.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
+
+const ComboboxError = ({ size, error, formFieldProps }) => {
+    return (jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ValidationMessage, { "data-size": size, children: error }) }));
+};
+ComboboxError.displayName = 'ComboboxError';
+
+export { ComboboxError as default };

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

@@ -0,0 +1,79 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
+import cl from 'clsx/lite';
+import { useContext, useRef } from 'react';
+import { ComboboxContext } from '../ComboboxContext.js';
+import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
+import { prefix } from '../utilities.js';
+import ComboboxChips from './ComboboxChips.js';
+import ComboboxClearButton from './ComboboxClearButton.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { omit } from '../../../utilities/omit/omit.js';
+
+const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
+    const context = useContext(ComboboxContext);
+    const idDispatch = useComboboxIdDispatch();
+    const clearButtonRef = useRef(null);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const setActiveIndex = (id) => {
+        idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
+    };
+    const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, size, } = context;
+    const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
+    // onChange function for the input
+    const onChange = (event) => {
+        const value = event.target.value;
+        setInputValue(value);
+        setActiveIndex(0);
+        // check if input value is the same as a label, if so, select it
+        for (const option of Object.values(options)) {
+            if (option.label.toLowerCase() === value.toLowerCase()) {
+                /* if option is already selected, discard selecting it, since it would de-select */
+                if (selectedOptions[prefix(option.value)])
+                    continue;
+                handleSelectOption({ option });
+            }
+        }
+    };
+    const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
+    /* Props from floating-ui */
+    const props = getReferenceProps({
+        ref: refs?.setReference,
+        role: null,
+        'aria-controls': null,
+        'aria-expanded': null,
+        'aria-haspopup': null,
+        /* If we click the wrapper, toggle open, set index to first option, and focus the input */
+        onClick(event) {
+            if (disabled)
+                return;
+            if (readOnly)
+                return;
+            if (clearButtonRef.current?.contains(event.target))
+                return;
+            setOpen(!open);
+            setActiveIndex(0);
+            inputRef.current?.focus();
+        },
+        /* Handles list navigation */
+        onKeyDown: handleKeyDown,
+        // preventDefault on keydown to avoid sending in form
+        onKeyPress(event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+            }
+        },
+    });
+    return (jsx(Paragraph, { "data-size": size, asChild: true, children: jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: cl('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { "data-size": size, asChild: true, children: jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": open ? listId : undefined, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
+                                    onChange(e);
+                                    !open && setOpen(true);
+                                    rest.onChange?.(e);
+                                } }) })] }), showClearButton && jsx(ComboboxClearButton, { ref: clearButtonRef }), jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }) }));
+};
+ComboboxInput.displayName = 'ComboboxInput';
+
+export { ComboboxInput as default };

package/dist/esm/components/Combobox/internal/ComboboxLabel.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import cl from 'clsx/lite';
+import { Label } from '../../Label/Label.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
+
+const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
+    return (jsxs(Fragment, { children: [label && (jsxs(Label, { "data-size": size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, "data-size": size, children: jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
+};
+ComboboxLabel.displayName = 'ComboboxLabel';
+
+export { ComboboxLabel as default };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { removePrefix } from '../utilities.js';
+
+const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
+    const VALUE = Object.keys(selectedOptions).map((key) => removePrefix(key));
+    return (jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple ? VALUE : VALUE[0], onChange: () => { }, children: VALUE.map((value) => (jsx("option", { value: value }, value))) }));
+};
+ComboboxNative.displayName = 'ComboboxNative';
+
+export { ComboboxNative as default };

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

@@ -0,0 +1,120 @@
+'use client';
+import { useCallback, useMemo, Children, useState } from 'react';
+import { isComboboxOption } from './Option/Option.js';
+import { isInteractiveComboboxCustom, prefix } from './utilities.js';
+
+const isOption = (option) => !!option;
+function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
+    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, initialValue, }) {
+    const filterCallback = useCallback(filter, [filter]);
+    const { optionsChildren, customIds, restChildren, interactiveChildren } = useMemo(() => {
+        const allChildren = Children.toArray(children);
+        const result = allChildren.reduce((acc, child) => {
+            if (isComboboxOption(child)) {
+                acc.optionsChildren.push(child);
+            }
+            else {
+                acc.restChildren.push(child);
+                if (isInteractiveComboboxCustom(child)) {
+                    const childElement = child;
+                    acc.interactiveChildren.push(childElement);
+                    if (!childElement.props.id) {
+                        throw new Error('If ComboboxCustom is interactive, it must have an id');
+                    }
+                    acc.customIds.push(childElement.props.id);
+                }
+            }
+            return acc;
+        }, {
+            optionsChildren: [],
+            customIds: [],
+            restChildren: [],
+            interactiveChildren: [],
+        });
+        return result;
+    }, [children]);
+    const options = useMemo(() => {
+        const values = [];
+        const allOptions = {};
+        optionsChildren.map((child) => {
+            const props = child.props;
+            let label = props.displayValue || '';
+            if (!props.displayValue) {
+                let childrenLabel = '';
+                // go over children and find all strings
+                Children.forEach(props.children, (child) => {
+                    if (typeof child === 'string') {
+                        childrenLabel += child;
+                    }
+                    else {
+                        throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
+                    }
+                });
+                label = childrenLabel;
+            }
+            if (values.includes(props.value)) {
+                console.warn(`Combobox has multiple options with the same value: ${props.value}`);
+            }
+            values.push(props.value);
+            allOptions[prefix(String(props.value))] = {
+                value: String(props.value),
+                label,
+                displayValue: props.displayValue,
+                description: props.description,
+            };
+        });
+        return allOptions;
+    }, [optionsChildren]);
+    const preSelectedOptions = useMemo(() => (initialValue?.map((key) => {
+        return prefix(key);
+    }) || []).reduce((acc, value) => {
+        const option = options[value];
+        if (isOption(option)) {
+            acc[value] = option;
+        }
+        return acc;
+    }, {}), [initialValue, options]);
+    const [selectedOptions, setSelectedOptions] = useState(preSelectedOptions);
+    const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
+        const filteredOptions = [];
+        const filteredOptionsChildren = Object.keys(options)
+            .map((option, index) => {
+            /* If we have a selected value in single mode and the input matches an option, return all children */
+            if (!multiple && Object.keys(selectedOptions).length === 1) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            if (multiple && selectedOptions[option]) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            if (filterCallback(inputValue, options[option])) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            return;
+        })
+            .filter((child) => child);
+        return { filteredOptions, filteredOptionsChildren };
+    }, [
+        filterCallback,
+        inputValue,
+        multiple,
+        options,
+        optionsChildren,
+        selectedOptions,
+    ]);
+    return {
+        filteredOptionsChildren,
+        filteredOptions,
+        restChildren,
+        options,
+        customIds,
+        selectedOptions,
+        interactiveChildren,
+        setSelectedOptions,
+    };
+}
+
+export { useCombobox };

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

@@ -0,0 +1,73 @@
+'use client';
+import { useComboboxId } from './ComboboxIdContext.js';
+import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+
+const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, 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)
+                    break;
+                setOpen(true);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                /* If we are on the first item, close */
+                if (activeIndex !== 0)
+                    break;
+                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
+                const valueIndex = activeIndex - interactiveChildren.length;
+                const option = filteredOptions[valueIndex];
+                handleSelectOption({ option: options[option] });
+                break;
+            }
+            case 'Backspace':
+                // if we are in single mode, we need to set selectedOptions to empty
+                if (!multiple) {
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
+                    break;
+                }
+                if (inputValue === '' && multiple) {
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    /* Remove last option, and use handleSelectOption */
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
+                }
+                break;
+        }
+    };
+    const handleKeyDown = useDebounceCallback(handleKeyDownFunc, 20);
+    return handleKeyDown;
+};
+
+export { useComboboxKeyboard };

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

@@ -0,0 +1,74 @@
+'use client';
+import { useFloating, flip, size, offset, autoUpdate, useRole, useDismiss, useListNavigation, useInteractions } from '@floating-ui/react';
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
+import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.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: `${rects.reference.width}px`,
+                            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 };