@dbcdk/react-components 0.0.44 → 0.0.46

package/dist/components/forms/multi-select/MultiSelect.js

@@ -7,13 +7,11 @@ import { ClearButton } from '../../../components/clear-button/ClearButton';
 import { Input } from '../../../components/forms/input/Input';
 import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
+import { useListNavigation } from '../../../hooks/useListNavigation';
 export function MultiSelect({ options, selectedValues = [], onChange, placeholder = 'Vælg', children, variant = 'outlined', size = 'md', onClear, dataCy, fullWidth = false, disabled = false, searchable = false, searchPlaceholder = 'Søg', emptyMessage = 'Ingen resultater', }) {
     const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
     const popoverRef = useRef(null);
-    const optionRefs = useRef([]);
     const searchInputRef = useRef(null);
-    const typeaheadRef = useRef('');
-    const typeaheadTimeoutRef = useRef(null);
     const [open, setOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const filteredOptions = useMemo(() => {
@@ -22,35 +20,18 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
             return options;
         return options.filter(option => option.label.toLocaleLowerCase().includes(normalizedQuery));
     }, [options, searchQuery]);
-    const [activeIndex, setActiveIndex] = useState(() => {
-        const selectedIndex = filteredOptions.findIndex(option => selectedSet.has(option.value));
-        return selectedIndex >= 0 ? selectedIndex : 0;
+    const { activeIndex, setActiveIndex, optionRefs, resetActiveIndex, clearTypeahead, handleKeyDown, } = useListNavigation({
+        options: filteredOptions,
+        getLabel: option => option.label,
+        isOpen: open,
+        onOpenChange: setOpen,
+        searchable,
+        searchInputRef,
+        getInitialActiveIndex: items => {
+            const selectedIndex = items.findIndex(option => selectedSet.has(option.value));
+            return selectedIndex >= 0 ? selectedIndex : 0;
+        },
     });
-    useEffect(() => {
-        var _a;
-        if (!open)
-            return;
-        if (searchable && document.activeElement === searchInputRef.current)
-            return;
-        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [activeIndex, open, searchable]);
-    useEffect(() => {
-        return () => {
-            if (typeaheadTimeoutRef.current)
-                clearTimeout(typeaheadTimeoutRef.current);
-        };
-    }, []);
-    const resetActiveIndex = () => {
-        const selectedIndex = filteredOptions.findIndex(option => selectedSet.has(option.value));
-        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
-    };
-    useEffect(() => {
-        setActiveIndex(current => {
-            if (filteredOptions.length === 0)
-                return 0;
-            return Math.min(current, filteredOptions.length - 1);
-        });
-    }, [filteredOptions]);
     useEffect(() => {
         var _a;
         if (!open || !searchable)
@@ -67,137 +48,75 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
             next.add(value);
         onChange(Array.from(next));
     };
-    const clearTypeahead = () => {
-        typeaheadRef.current = '';
-        if (typeaheadTimeoutRef.current) {
-            clearTimeout(typeaheadTimeoutRef.current);
-            typeaheadTimeoutRef.current = null;
-        }
-    };
-    const findTypeaheadMatch = (query, startIndex) => {
-        var _a, _b;
-        if (!query || filteredOptions.length === 0)
-            return -1;
-        const normalizedQuery = query.trim().toLocaleLowerCase();
-        if (!normalizedQuery)
-            return -1;
-        for (let step = 1; step <= filteredOptions.length; step += 1) {
-            const index = (startIndex + step + filteredOptions.length) % filteredOptions.length;
-            const label = (_b = (_a = filteredOptions[index]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.trim().toLocaleLowerCase();
-            if (label === null || label === void 0 ? void 0 : label.startsWith(normalizedQuery))
-                return index;
-        }
-        return -1;
-    };
-    const handleTypeahead = (key) => {
-        const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
-        const repeatedChar = new Set(nextBuffer).size === 1;
-        let nextIndex = findTypeaheadMatch(nextBuffer, activeIndex);
-        let appliedBuffer = nextBuffer;
-        if (nextIndex < 0 && repeatedChar) {
-            appliedBuffer = key.toLocaleLowerCase();
-            nextIndex = findTypeaheadMatch(appliedBuffer, activeIndex);
-        }
-        if (typeaheadTimeoutRef.current)
-            clearTimeout(typeaheadTimeoutRef.current);
-        typeaheadRef.current = appliedBuffer;
-        typeaheadTimeoutRef.current = setTimeout(() => {
-            typeaheadRef.current = '';
-            typeaheadTimeoutRef.current = null;
-        }, 500);
-        if (nextIndex < 0)
-            return;
-        setActiveIndex(nextIndex);
-        if (!open)
-            setOpen(true);
-    };
-    const handleKeyDown = (e) => {
-        var _a, _b, _c, _d;
+    const handleCombinedKeyDown = (e) => {
+        var _a;
         if (searchable && e.target === searchInputRef.current) {
             switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (filteredOptions.length > 0)
-                        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                case 'Enter':
+                    if (filteredOptions[activeIndex]) {
+                        e.preventDefault();
+                        toggleValue(filteredOptions[activeIndex].value);
+                    }
                     return;
-                case 'Escape':
-                    e.preventDefault();
-                    (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.close();
+                case ' ':
+                    if (filteredOptions[activeIndex]) {
+                        e.preventDefault();
+                        toggleValue(filteredOptions[activeIndex].value);
+                    }
+                    return;
+                default:
+                    handleKeyDown(e);
                     return;
             }
-            return;
-        }
-        if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
-            e.preventDefault();
-            handleTypeahead(e.key);
-            return;
         }
         switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!open) {
-                    setOpen(true);
-                    return;
-                }
-                setActiveIndex(i => Math.min(i + 1, filteredOptions.length - 1));
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                if (!open) {
-                    setOpen(true);
-                    return;
-                }
-                if (searchable && optionRefs.current[activeIndex] === document.activeElement) {
-                    if (activeIndex === 0) {
-                        (_c = searchInputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-                        return;
-                    }
-                }
-                setActiveIndex(i => Math.max(i - 1, 0));
-                break;
-            case 'Home':
-                if (!open)
-                    return;
-                e.preventDefault();
-                setActiveIndex(0);
-                break;
-            case 'End':
-                if (!open)
-                    return;
-                e.preventDefault();
-                setActiveIndex(filteredOptions.length - 1);
-                break;
             case 'Enter':
-            case ' ':
+            case ' ': {
                 e.preventDefault();
                 clearTypeahead();
                 if (!open) {
                     setOpen(true);
                     return;
                 }
-                if (filteredOptions[activeIndex])
-                    toggleValue(filteredOptions[activeIndex].value);
-                break;
+                const activeOption = filteredOptions[activeIndex];
+                if (activeOption)
+                    toggleValue(activeOption.value);
+                return;
+            }
             case 'Escape':
                 if (!open)
                     return;
                 e.preventDefault();
-                (_d = popoverRef.current) === null || _d === void 0 ? void 0 : _d.close();
-                break;
+                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                return;
+            default:
+                handleKeyDown(e);
         }
     };
     return (_jsx(Popover, { ref: popoverRef, open: open, onOpenChange: next => {
             setOpen(next);
-            if (next)
+            if (next) {
                 resetActiveIndex();
-            else
+            }
+            else {
                 setSearchQuery('');
-        }, dataCy: dataCy, fullWidth: fullWidth, autoFocusContent: false, returnFocus: true, trigger: (onClick, icon, isOpen) => (_jsx(Button, { variant: variant, onClick: onClick, onKeyDown: handleKeyDown, size: size, fullWidth: fullWidth, disabled: disabled, "aria-haspopup": "menu", "aria-expanded": !!isOpen, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx("span", { children: children !== null && children !== void 0 ? children : placeholder }), selectedValues.length > 0 ? (_jsx(Chip, { size: "sm", children: `${selectedValues.length}` })) : null] }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selectedValues.length > 0 && _jsx(ClearButton, { onClick: onClear }), icon] })] }) })), children: _jsxs(Menu, { onKeyDown: handleKeyDown, children: [searchable ? (_jsx(Menu.Item, { children: _jsx(Input, { ref: searchInputRef, value: searchQuery, onChange: e => setSearchQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, icon: _jsx(Search, { size: 16 }), fullWidth: true }) })) : null, filteredOptions.map((option, index) => (_jsx(Menu.Item, { active: index === activeIndex, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", role: "menuitemcheckbox", "aria-checked": selectedSet.has(option.value), tabIndex: index === activeIndex ? 0 : -1, disabled: disabled, onFocus: () => setActiveIndex(index), onClick: () => {
-                            toggleValue(option.value);
-                        }, children: [_jsx("span", { style: {
-                                    pointerEvents: 'none',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    color: !selectedSet.has(option.value) ? 'var(--color-border-strong)' : 'inherit',
-                                }, children: selectedSet.has(option.value) ? _jsx(Check, {}) : _jsx(Square, {}) }), _jsx("span", { children: option.label })] }) }, option.value))), filteredOptions.length === 0 ? _jsx(Menu.Item, { disabled: true, children: emptyMessage }) : null] }) }));
+            }
+        }, dataCy: dataCy, fullWidth: fullWidth, autoFocusContent: false, returnFocus: true, trigger: (onClick, icon, isOpen) => (_jsx(Button, { variant: variant, onClick: onClick, onKeyDown: handleCombinedKeyDown, size: size, fullWidth: fullWidth, disabled: disabled, "aria-haspopup": "menu", "aria-expanded": !!isOpen, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx("span", { children: children !== null && children !== void 0 ? children : placeholder }), selectedValues.length > 0 ? _jsx(Chip, { size: "sm", children: selectedValues.length }) : null] }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selectedValues.length > 0 ? _jsx(ClearButton, { onClick: onClear }) : null, icon] })] }) })), children: _jsxs(Menu, { onKeyDown: handleCombinedKeyDown, children: [searchable ? (_jsx(Menu.Item, { children: _jsx(Input, { ref: searchInputRef, value: searchQuery, onChange: e => setSearchQuery(e.target.value), onKeyDown: handleCombinedKeyDown, placeholder: searchPlaceholder, icon: _jsx(Search, { size: 16 }), fullWidth: true }) })) : null, filteredOptions.map((option, index) => {
+                    const isSelected = selectedSet.has(option.value);
+                    const isActive = index === activeIndex;
+                    return (_jsx(Menu.Item, { active: isActive, children: _jsxs("button", { ref: el => {
+                                if (optionRefs.current) {
+                                    optionRefs.current[index] = el;
+                                }
+                            }, type: "button", role: "menuitemcheckbox", "aria-checked": isSelected, tabIndex: isActive ? 0 : -1, disabled: disabled, onFocus: () => setActiveIndex(index), onClick: () => toggleValue(option.value), children: [_jsx("span", { style: {
+                                        pointerEvents: 'none',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        color: !isSelected ? 'var(--color-border-strong)' : 'inherit',
+                                    }, children: isSelected ? _jsx(Check, {}) : _jsx(Square, {}) }), option.icon ? (_jsx("span", { style: {
+                                        pointerEvents: 'none',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                    }, children: option.icon })) : null, _jsx("span", { children: option.label })] }) }, option.value));
+                }), filteredOptions.length === 0 ? _jsx(Menu.Item, { disabled: true, children: emptyMessage }) : null] }) }));
 }

package/dist/components/forms/text-area/Textarea.module.css

@@ -7,6 +7,8 @@
   border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-sm);
   font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
 }
 
 .container textarea:disabled {

package/dist/components/forms/typeahead/Typeahead.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { InputProps, InputVariant } from '../../../components/forms/input/Input';
+type TypeaheadOption<T> = {
+    label: string;
+    value: T;
+};
+type MultiValueDisplayMode = 'chips' | 'count';
+type MultiSelectedValuesDisplayMode = 'hidden' | 'below-input';
+type MultiSelectedValueChipContent = 'label' | 'value' | 'value-label';
+interface TypeaheadProps<T> {
+    options: TypeaheadOption<T>[];
+    mode?: 'single' | 'multi';
+    multiValueDisplayMode?: MultiValueDisplayMode;
+    multiSelectedValuesDisplayMode?: MultiSelectedValuesDisplayMode;
+    multiSelectedValueChipContent?: MultiSelectedValueChipContent;
+    selectedValue?: T | T[] | null;
+    onChange: (value: T | T[] | null) => void;
+    placeholder?: string;
+    variant?: InputVariant;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    onClear?: () => void;
+    emptyMessage?: string;
+    filterOptions?: (options: TypeaheadOption<T>[], query: string) => TypeaheadOption<T>[];
+    inputProps?: Omit<InputProps, 'onChange' | 'value'>;
+    inputSize?: InputProps['inputSize'];
+    width?: InputProps['width'];
+    autoComplete?: InputProps['autoComplete'];
+    autoCorrect?: InputProps['autoCorrect'];
+    autoCapitalize?: InputProps['autoCapitalize'];
+    spellCheck?: InputProps['spellCheck'];
+}
+export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, autoComplete, autoCorrect, autoCapitalize, spellCheck, }: TypeaheadProps<T>): React.ReactElement;
+export {};

package/dist/components/forms/typeahead/Typeahead.js

@@ -0,0 +1,340 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Chip } from '../../../components/chip/Chip';
+import { Input } from '../../../components/forms/input/Input';
+import { Menu } from '../../../components/menu/Menu';
+import { Popover } from '../../../components/popover/Popover';
+export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'No results', filterOptions, inputProps, inputSize, width, autoComplete, autoCorrect, autoCapitalize, spellCheck, }) {
+    var _a;
+    const inputRef = useRef(null);
+    const listboxRef = useRef(null);
+    const optionRefs = useRef([]);
+    const listboxId = useId();
+    const { onFocus: inputPropsOnFocus, onBlur: inputPropsOnBlur, onKeyDown: inputPropsOnKeyDown, onMouseDown: inputPropsOnMouseDown, onClear: inputPropsOnClear, startAdornment: inputPropsStartAdornment, ...passthroughInputProps } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    const selectedOption = useMemo(() => {
+        var _a;
+        if (mode === 'multi')
+            return null;
+        return (_a = options.find(option => option.value === selectedValue)) !== null && _a !== void 0 ? _a : null;
+    }, [options, selectedValue, mode]);
+    const selectedOptions = useMemo(() => {
+        if (mode !== 'multi' || !Array.isArray(selectedValue))
+            return [];
+        return options.filter(option => selectedValue.includes(option.value));
+    }, [options, selectedValue, mode]);
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(mode === 'multi' ? '' : ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : ''));
+    const [query, setQuery] = useState('');
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const getSelectedValueChipLabel = React.useCallback((option) => {
+        switch (multiSelectedValueChipContent) {
+            case 'value':
+                return String(option.value);
+            case 'value-label':
+                return `${String(option.value)} - ${option.label}`;
+            case 'label':
+            default:
+                return option.label;
+        }
+    }, [multiSelectedValueChipContent]);
+    const multiSelectionAdornment = mode === 'multi' && selectedOptions.length > 0 ? (multiValueDisplayMode === 'count' ? (_jsxs("span", { className: "dbc-muted-text dbc-sm-text", style: { whiteSpace: 'nowrap', flexShrink: 0, marginRight: 6 }, children: ["(", selectedOptions.length, ")"] })) : ((() => {
+        const MAX_CHIPS = 2;
+        const chipsToShow = selectedOptions.slice(0, MAX_CHIPS);
+        const extraCount = selectedOptions.length - MAX_CHIPS;
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                flexWrap: 'nowrap',
+                overflow: 'hidden',
+            }, children: [chipsToShow.map(option => (_jsx(Chip, { size: "sm", type: "rounded", onClose: () => commitSelection(option), children: option.label }, option.value))), extraCount > 0 && (_jsxs("span", { className: "dbc-muted-text dbc-sm-text dbc-px-xxs", children: ["+", extraCount] }))] }));
+    })())) : undefined;
+    useEffect(() => {
+        var _a;
+        if (mode === 'multi') {
+            setInputValue('');
+            setQuery('');
+        }
+        else {
+            const nextLabel = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '';
+            setInputValue(nextLabel);
+        }
+    }, [selectedOption, mode]);
+    const filteredOptions = useMemo(() => {
+        if (filterOptions)
+            return filterOptions(options, query);
+        const normalizedQuery = query.trim().toLocaleLowerCase();
+        if (!normalizedQuery)
+            return options;
+        return options.filter(option => option.label.toLocaleLowerCase().includes(normalizedQuery));
+    }, [filterOptions, query, options]);
+    const getSelectedIndex = React.useCallback((items) => {
+        if (items.length === 0)
+            return -1;
+        if (mode === 'multi') {
+            if (!Array.isArray(selectedValue) || selectedValue.length === 0)
+                return 0;
+            const firstSelectedIndex = items.findIndex(option => selectedValue.includes(option.value));
+            return firstSelectedIndex >= 0 ? firstSelectedIndex : 0;
+        }
+        const singleSelectedIndex = items.findIndex(option => option.value === selectedValue);
+        return singleSelectedIndex >= 0 ? singleSelectedIndex : 0;
+    }, [mode, selectedValue]);
+    useEffect(() => {
+        setActiveIndex(current => {
+            if (filteredOptions.length === 0)
+                return -1;
+            if (current < 0)
+                return getSelectedIndex(filteredOptions);
+            return Math.min(current, filteredOptions.length - 1);
+        });
+    }, [filteredOptions, getSelectedIndex]);
+    useEffect(() => {
+        var _a;
+        if (!open || activeIndex < 0)
+            return;
+        const activeEl = optionRefs.current[activeIndex];
+        (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(activeEl, { block: 'nearest' });
+    }, [open, activeIndex, filteredOptions]);
+    const commitSelection = (option) => {
+        var _a, _b;
+        if (mode === 'multi') {
+            if (!option)
+                return;
+            const nextValues = Array.isArray(selectedValue) ? [...selectedValue] : [];
+            const idx = nextValues.indexOf(option.value);
+            if (idx > -1) {
+                nextValues.splice(idx, 1);
+            }
+            else {
+                nextValues.push(option.value);
+            }
+            onChange(nextValues);
+            setInputValue('');
+            setQuery('');
+            return;
+        }
+        onChange((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : null);
+        setInputValue((_b = option === null || option === void 0 ? void 0 : option.label) !== null && _b !== void 0 ? _b : '');
+        setQuery('');
+        setOpen(false);
+        setActiveIndex(-1);
+    };
+    const handleInputChange = (nextValue) => {
+        setInputValue(nextValue);
+        setQuery(nextValue);
+        if (!open)
+            setOpen(true);
+        if (mode === 'multi')
+            return;
+        const exactMatch = options.find(option => option.label === nextValue);
+        if (!exactMatch && selectedValue !== null) {
+            onChange(null);
+        }
+    };
+    const handleBlur = () => {
+        if (mode === 'multi') {
+            setInputValue('');
+            setQuery('');
+            setOpen(false);
+            setActiveIndex(-1);
+            return;
+        }
+        const exactLabelMatch = options.find(option => option.label === inputValue);
+        if (exactLabelMatch) {
+            commitSelection(exactLabelMatch);
+            return;
+        }
+        if (selectedOption) {
+            setInputValue(selectedOption.label);
+        }
+        else {
+            setInputValue('');
+        }
+        setQuery('');
+        setOpen(false);
+        setActiveIndex(-1);
+    };
+    const openWithAllOptions = React.useCallback(() => {
+        setQuery('');
+        setOpen(true);
+        setActiveIndex(getSelectedIndex(options));
+    }, [getSelectedIndex, options]);
+    const openWithCurrentFilter = React.useCallback(() => {
+        setOpen(true);
+        setActiveIndex(getSelectedIndex(filteredOptions));
+    }, [getSelectedIndex, filteredOptions]);
+    const handleOpen = React.useCallback(() => {
+        if (mode === 'single' && selectedOption) {
+            openWithAllOptions();
+            return;
+        }
+        openWithCurrentFilter();
+    }, [mode, selectedOption, openWithAllOptions, openWithCurrentFilter]);
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!open) {
+                    handleOpen();
+                    return;
+                }
+                setActiveIndex(index => {
+                    if (filteredOptions.length === 0)
+                        return -1;
+                    if (index < 0)
+                        return getSelectedIndex(filteredOptions);
+                    return Math.min(index + 1, filteredOptions.length - 1);
+                });
+                return;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!open) {
+                    handleOpen();
+                    return;
+                }
+                setActiveIndex(index => {
+                    if (filteredOptions.length === 0)
+                        return -1;
+                    if (index < 0)
+                        return filteredOptions.length - 1;
+                    return Math.max(index - 1, 0);
+                });
+                return;
+            case 'Home':
+                if (!open || filteredOptions.length === 0)
+                    return;
+                e.preventDefault();
+                setActiveIndex(0);
+                return;
+            case 'End':
+                if (!open || filteredOptions.length === 0)
+                    return;
+                e.preventDefault();
+                setActiveIndex(filteredOptions.length - 1);
+                return;
+            case 'Enter':
+                if (!open)
+                    return;
+                e.preventDefault();
+                if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+                    commitSelection(filteredOptions[activeIndex]);
+                }
+                return;
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                setOpen(false);
+                setActiveIndex(-1);
+                setQuery('');
+                if (mode === 'single' && selectedOption) {
+                    setInputValue(selectedOption.label);
+                }
+                else {
+                    setInputValue('');
+                }
+                return;
+        }
+    };
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: mode === 'multi' &&
+                multiSelectedValuesDisplayMode === 'below-input' &&
+                selectedOptions.length > 0
+                ? 8
+                : 0,
+            width: fullWidth ? '100%' : undefined,
+        }, children: [_jsx(Popover, { open: open, onOpenChange: nextOpen => {
+                    setOpen(nextOpen);
+                    if (nextOpen) {
+                        if (mode === 'single' && selectedOption) {
+                            setQuery('');
+                            setActiveIndex(getSelectedIndex(options));
+                        }
+                        else {
+                            setActiveIndex(getSelectedIndex(filteredOptions));
+                        }
+                    }
+                    else {
+                        setActiveIndex(-1);
+                    }
+                }, fullWidth: fullWidth, autoFocusContent: false, returnFocus: false, trigger: openPopover => {
+                    var _a, _b, _c, _d, _e;
+                    return (_jsx(Input, { ...passthroughInputProps, ref: inputRef, value: inputValue, startAdornment: multiSelectionAdornment || inputPropsStartAdornment ? (_jsxs(_Fragment, { children: [multiSelectionAdornment, inputPropsStartAdornment] })) : undefined, onFocus: e => {
+                            inputPropsOnFocus === null || inputPropsOnFocus === void 0 ? void 0 : inputPropsOnFocus(e);
+                            if (e.defaultPrevented)
+                                return;
+                            handleOpen();
+                            openPopover(e);
+                        }, onMouseDown: e => {
+                            var _a;
+                            inputPropsOnMouseDown === null || inputPropsOnMouseDown === void 0 ? void 0 : inputPropsOnMouseDown(e);
+                            if (e.defaultPrevented)
+                                return;
+                            const isAlreadyFocused = document.activeElement === inputRef.current;
+                            if (isAlreadyFocused && open) {
+                                e.preventDefault();
+                                setOpen(false);
+                                setActiveIndex(-1);
+                                if (mode === 'single') {
+                                    setQuery('');
+                                    setInputValue((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '');
+                                }
+                                else {
+                                    setQuery('');
+                                    setInputValue('');
+                                }
+                                return;
+                            }
+                            if (isAlreadyFocused && mode === 'single' && selectedOption) {
+                                setQuery('');
+                                setOpen(true);
+                                setActiveIndex(getSelectedIndex(options));
+                            }
+                            else if (isAlreadyFocused && !open) {
+                                setOpen(true);
+                                setActiveIndex(getSelectedIndex(filteredOptions));
+                            }
+                        }, onChange: e => handleInputChange(e.currentTarget.value), onBlur: e => {
+                            inputPropsOnBlur === null || inputPropsOnBlur === void 0 ? void 0 : inputPropsOnBlur(e);
+                            if (e.defaultPrevented)
+                                return;
+                            handleBlur();
+                        }, onKeyDown: e => {
+                            inputPropsOnKeyDown === null || inputPropsOnKeyDown === void 0 ? void 0 : inputPropsOnKeyDown(e);
+                            if (e.defaultPrevented)
+                                return;
+                            handleKeyDown(e);
+                        }, placeholder: placeholder, variant: variant, inputSize: (_a = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _a !== void 0 ? _a : 'md', width: width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width, autoComplete: (_b = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'off', spellCheck: (_e = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, disabled: disabled, fullWidth: fullWidth, onClear: () => {
+                            setInputValue('');
+                            setQuery('');
+                            setActiveIndex(-1);
+                            onChange(mode === 'multi' ? [] : null);
+                            inputPropsOnClear === null || inputPropsOnClear === void 0 ? void 0 : inputPropsOnClear();
+                            onClear === null || onClear === void 0 ? void 0 : onClear();
+                            if (open) {
+                                setOpen(false);
+                            }
+                        }, role: "combobox", "aria-expanded": open, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined }));
+                }, children: _jsx(Menu, { role: "listbox", id: listboxId, ref: listboxRef, children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => {
+                        const isActive = index === activeIndex;
+                        const isSelected = mode === 'multi'
+                            ? Array.isArray(selectedValue) && selectedValue.includes(option.value)
+                            : option.value === selectedValue;
+                        return (_jsx(Menu.Item, { active: isActive, selected: isSelected, children: _jsx("button", { ref: node => {
+                                    optionRefs.current[index] = node;
+                                }, id: `${listboxId}-option-${index}`, type: "button", role: "option", "aria-selected": isSelected, onMouseEnter: () => setActiveIndex(index), onMouseDown: e => {
+                                    e.preventDefault();
+                                }, onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value));
+                    })) : (_jsx(Menu.Item, { disabled: true, children: emptyMessage })) }) }), mode === 'multi' &&
+                multiSelectedValuesDisplayMode === 'below-input' &&
+                selectedOptions.length > 0 && (_jsx("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: 8,
+                    alignItems: 'flex-start',
+                }, children: selectedOptions.map(option => (_jsx(Chip, { size: "sm", type: "default", severity: "neutral", onClose: () => commitSelection(option), children: getSelectedValueChipLabel(option) }, option.value))) }))] }));
+}

package/dist/components/menu/Menu.d.ts

@@ -12,6 +12,7 @@ export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     active?: boolean;
+    selected?: boolean;
     disabled?: boolean;
     /**
      * Override the role applied to the interactive element for this item only.
@@ -33,9 +34,9 @@ export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIEl
     label: string;
     onValueChange?: (value: string) => void;
 }
-export declare const Menu: React.FC<MenuProps> & {
-    Item: React.FC<MenuItemProps>;
-    CheckItem: React.FC<MenuCheckItemProps>;
-    RadioItem: React.FC<MenuRadioItemProps>;
-    Separator: React.FC<MenuSeparatorProps>;
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>> & {
+    Item: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
+    CheckItem: React.ForwardRefExoticComponent<MenuCheckItemProps & React.RefAttributes<HTMLLIElement>>;
+    RadioItem: React.ForwardRefExoticComponent<MenuRadioItemProps & React.RefAttributes<HTMLLIElement>>;
+    Separator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLLIElement>>;
 };