@pixum/combobox 5.10.4-alpha.22 → 5.10.4-alpha.24

package/lib/ComboBox.d.ts

@@ -1,11 +1,33 @@
 import type { ComboBoxProps } from './types';
-import './styles.css';
 /**
- * ComboBox component that provides a searchable dropdown with options.
- * Adapts to mobile (bottom sheet) and desktop (dropdown) viewports.
- * Supports both flat and grouped options, search functionality, and keyboard navigation.
+ * Searchable select field. On desktop the options appear in a popover, on
+ * mobile in a bottom sheet - the behaviour is identical in both cases.
+ *
+ * This file is the only client boundary of the package: all partials, hooks and
+ * utils are plain modules without a `'use client'` directive, so they can be
+ * imported from server components as well and only end up in the client bundle
+ * through this component.
+ *
+ * Focus choreography:
+ * - focusing the trigger opens the options,
+ * - with `withSearch` the focus moves into the search field as soon as it is
+ *   mounted, and its content is selected so the first keystroke replaces it,
+ * - selecting an option, Escape, Alt+ArrowUp and closing the sheet move the
+ *   focus back to the trigger without re-opening the list,
+ * - Tab closes the list and lets the focus move on.
+ *
+ * Keyboard: ArrowUp/ArrowDown navigate, Home/End jump, Enter selects. Space
+ * selects as well - unless an open search field needs it as a real space
+ * character, which is what the ARIA authoring practices ask for.
+ *
+ * Selection: pass a string for single select, or `multiple` plus an array of
+ * strings for a checkbox list. `onOptionItemClick` reports the toggled value;
+ * the selection itself stays fully controlled by the consumer. The value of an
+ * option is its `text`, so `value` can be compared against the visible label as
+ * before.
  *
  * @param props - The props for the ComboBox component
- * @returns A responsive combobox component with search and selection capabilities
+ * @returns A responsive, accessible combobox
  */
-export declare function ComboBox({ className, name, headline, label, searchPattern, isOpen, options, placeholder, value, inputMode, noResultsText, leadingType, optionDetails, withSearch, theme, optionsSlot, leadingIcon, disabled, loading, setIsOpen, onClick, onChange, onOutsideClick, onOptionItemClick, onSheetClose, }: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBox({ className, name, helperText, headline, label, options, isOpen, setIsOpen, value, multiple, placeholder, searchPattern, noResultsText, inputMode, leadingType, leadingIcon, optionDetails, optionsSlot, withSearch, openOnEnter, disabled, loading, theme, renderValue, onClick, onChange, onOptionItemClick, onOutsideClick, onSheetClose, }: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
+export default ComboBox;

package/lib/ComboBox.js

@@ -1,110 +1,209 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import BottomSheet from '@pixum/bottom-sheet';
-import Text, { TextVariant } from '@pixum/text';
-import { useEscapeKeyPress } from '@pixum/utils';
-import { ComboBoxOptions } from './partials';
-import { SelectInput, SearchInput } from '@pixum/web-input';
-import { useIsDesktopScreenWidth } from './hooks';
-import clsx from 'clsx';
+import Text, { TEXT_VARIANT } from '@pixum/text';
+import { SearchInput, SelectInput } from '@pixum/web-input';
 import ThemeProvider, { DEFAULT_THEME } from '@pixum/theme-provider';
-import './styles.css';
+import clsx from 'clsx';
+import { ComboBoxNoResults, ComboBoxOptions } from './partials';
+import { useComboBox, useComboBoxFocus, useIsDesktopScreenWidth } from './hooks';
+import { getOptionLabel, normaliseOptions, toValueArray } from './utils';
+import styles from './ComboBox.module.css';
 /**
- * ComboBox component that provides a searchable dropdown with options.
- * Adapts to mobile (bottom sheet) and desktop (dropdown) viewports.
- * Supports both flat and grouped options, search functionality, and keyboard navigation.
+ * Searchable select field. On desktop the options appear in a popover, on
+ * mobile in a bottom sheet - the behaviour is identical in both cases.
+ *
+ * This file is the only client boundary of the package: all partials, hooks and
+ * utils are plain modules without a `'use client'` directive, so they can be
+ * imported from server components as well and only end up in the client bundle
+ * through this component.
+ *
+ * Focus choreography:
+ * - focusing the trigger opens the options,
+ * - with `withSearch` the focus moves into the search field as soon as it is
+ *   mounted, and its content is selected so the first keystroke replaces it,
+ * - selecting an option, Escape, Alt+ArrowUp and closing the sheet move the
+ *   focus back to the trigger without re-opening the list,
+ * - Tab closes the list and lets the focus move on.
+ *
+ * Keyboard: ArrowUp/ArrowDown navigate, Home/End jump, Enter selects. Space
+ * selects as well - unless an open search field needs it as a real space
+ * character, which is what the ARIA authoring practices ask for.
+ *
+ * Selection: pass a string for single select, or `multiple` plus an array of
+ * strings for a checkbox list. `onOptionItemClick` reports the toggled value;
+ * the selection itself stays fully controlled by the consumer. The value of an
+ * option is its `text`, so `value` can be compared against the visible label as
+ * before.
  *
  * @param props - The props for the ComboBox component
- * @returns A responsive combobox component with search and selection capabilities
+ * @returns A responsive, accessible combobox
  */
-export function ComboBox({ className = '', name, headline, label, searchPattern = '', isOpen, options, placeholder, value, inputMode, noResultsText, leadingType, optionDetails, withSearch = true, theme = DEFAULT_THEME, optionsSlot, leadingIcon, disabled = false, loading = false, setIsOpen, onClick, onChange, onOutsideClick, onOptionItemClick, onSheetClose, }) {
-    const comboBoxRef = useRef(null);
-    const bottomSheetRef = useRef(null);
-    const [searchQuery, setSearchQuery] = useState('');
-    const [inputPlaceholder, setPlaceholder] = useState(placeholder);
+export function ComboBox({ className = '', name, helperText, headline, label, options, isOpen, setIsOpen, value, multiple = false, placeholder, searchPattern = '', noResultsText, inputMode, leadingType, leadingIcon, optionDetails, optionsSlot, withSearch = true, openOnEnter = true, disabled = false, loading = false, theme = DEFAULT_THEME, renderValue, onClick, onChange, onOptionItemClick, onOutsideClick, onSheetClose, }) {
+    const listboxId = useId();
+    const rootRef = useRef(null);
     const isDesktop = useIsDesktopScreenWidth();
-    const optionsExist = Object.keys(options).length > 0;
-    const showSelectField = !withSearch || (isDesktop && !isOpen) || !isDesktop;
-    useEffect(() => {
-        !isOpen && (onSheetClose === null || onSheetClose === void 0 ? void 0 : onSheetClose());
-    }, [isOpen]);
+    const [searchQuery, setSearchQuery] = useState('');
     /**
-     * Handles changes to the search input field
-     *
-     * @param e - The change event from the input
+     * Until the first keystroke the trigger text stays visible and the search
+     * query stays empty, so consumers do not filter down to the option that is
+     * already selected.
      */
-    const handleChange = (e) => {
-        const { value: searchValue } = e.target;
-        setSearchQuery(searchValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(searchValue);
-    };
+    const [hasTyped, setHasTyped] = useState(false);
+    const { triggerRef, searchInputRef, returnFocusToTrigger, isReturningFocus } = useComboBoxFocus();
+    const normalisedOptions = useMemo(() => normaliseOptions(options, listboxId), [options, listboxId]);
+    const selectedValues = useMemo(() => toValueArray(value), [value]);
     /**
-     * Clears the search input field
+     * Labels of the selected options; falls back to the raw values, both for
+     * options that render a custom node instead of a plain `text` and for values
+     * that have no matching option at all.
      */
-    const handleClearInput = () => {
-        setSearchQuery('');
-    };
+    const displayValue = useMemo(() => {
+        const labels = normalisedOptions
+            .filter(option => selectedValues.includes(option.value))
+            .map(getOptionLabel);
+        const selectedLabels = labels.length > 0 ? labels : selectedValues;
+        return renderValue ? renderValue(selectedLabels) : selectedLabels.join(', ');
+    }, [normalisedOptions, selectedValues, renderValue]);
+    const open = useCallback(() => {
+        if (disabled || loading)
+            return;
+        setIsOpen(true);
+    }, [disabled, loading, setIsOpen]);
     /**
-     * Clears the search input and closes the dropdown/bottom sheet
+     * Closes the list, resets the search and - unless the focus was moved away
+     * deliberately (Tab, outside click) - returns the focus to the trigger.
+     *
+     * @param restoreFocus - Whether the focus goes back to the trigger
      */
-    const clearAndClose = () => {
+    const close = useCallback((restoreFocus = true) => {
         setSearchQuery('');
+        setHasTyped(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange('');
         setIsOpen(false);
-    };
-    useEscapeKeyPress(clearAndClose, isOpen);
-    // Handle outside clicks for desktop dropdown
+        if (restoreFocus)
+            returnFocusToTrigger();
+    }, [onChange, setIsOpen, returnFocusToTrigger]);
+    /**
+     * Applies a selection. Single select closes the list, multi select keeps it
+     * open so further checkboxes can be toggled.
+     *
+     * @param optionValue - Value of the selected option
+     */
+    const handleSelect = useCallback((optionValue) => {
+        onOptionItemClick === null || onOptionItemClick === void 0 ? void 0 : onOptionItemClick(optionValue);
+        if (!multiple)
+            close();
+    }, [multiple, onOptionItemClick, close]);
+    const { comboboxAriaProps, listboxAriaProps, onKeyDown, activeOptionId } = useComboBox({
+        options: normalisedOptions,
+        isOpen,
+        open,
+        close,
+        selectedValues,
+        onSelect: handleSelect,
+        listboxId,
+        searchable: withSearch,
+        multiple,
+        openOnEnter,
+    });
+    /**
+     * While the search field is open it owns the `combobox` role: it is the
+     * element the focus lives in, so it has to carry the ARIA state.
+     */
+    const showSearchField = withSearch && isOpen;
+    /** On desktop the search field replaces the trigger in place. */
+    const showTrigger = !isDesktop || !showSearchField;
+    /**
+     * There must never be two comboboxes at once: while the bottom sheet holds
+     * the search field, the trigger behind it is inert.
+     */
+    const triggerAriaProps = showSearchField
+        ? { 'aria-hidden': true, tabIndex: -1 }
+        : comboboxAriaProps;
+    /** Notifies the consumer once the bottom sheet has actually closed. */
+    const wasOpen = useRef(isOpen);
+    useEffect(() => {
+        if (wasOpen.current && !isOpen)
+            onSheetClose === null || onSheetClose === void 0 ? void 0 : onSheetClose();
+        wasOpen.current = isOpen;
+    }, [isOpen, onSheetClose]);
+    /**
+     * State of the list at `mousedown` time. The subsequent `click` toggles based
+     * on this value - otherwise the focus handler would open the list and the
+     * click would close it again straight away.
+     */
+    const wasOpenOnPointerDown = useRef(false);
+    const handleRootPointerDown = useCallback(() => {
+        wasOpenOnPointerDown.current = isOpen;
+    }, [isOpen]);
+    /**
+     * Outside clicks are checked against the root: label, trigger, arrow and
+     * popover all live inside it and therefore never count as "outside".
+     */
     useEffect(() => {
         if (!isDesktop || !isOpen)
             return;
-        const handleDocumentClick = (event) => {
+        const handleDocumentPointerDown = (event) => {
             var _a;
-            const node = event.target;
-            const isOutside = !((_a = comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.contains(node));
-            if (isOutside) {
-                clearAndClose();
-                onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick();
-            }
+            if ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+                return;
+            // The focus stays where the user clicked.
+            close(false);
+            onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick();
         };
-        // Add listener after a small delay to avoid closing immediately on open
-        const timeoutId = setTimeout(() => {
-            document.addEventListener('mousedown', handleDocumentClick);
-        }, 100);
-        return () => {
-            clearTimeout(timeoutId);
-            document.removeEventListener('mousedown', handleDocumentClick);
-        };
-    }, [isDesktop, isOpen, onOutsideClick]);
-    /**
-     * Handles click on an option item
-     *
-     * @param optionValue - The value of the clicked option
-     */
-    const handleOptionItemClick = (optionValue) => {
-        onOptionItemClick === null || onOptionItemClick === void 0 ? void 0 : onOptionItemClick(optionValue);
-    };
+        document.addEventListener('mousedown', handleDocumentPointerDown);
+        return () => document.removeEventListener('mousedown', handleDocumentPointerDown);
+    }, [isDesktop, isOpen, close, onOutsideClick]);
     /**
-     * Handles click on the input field
+     * Opens the list when the trigger receives the focus - but not when the focus
+     * is only coming back from a close.
      */
-    const handleOnClick = () => {
+    const handleTriggerFocus = useCallback(() => {
+        if (isReturningFocus())
+            return;
+        open();
+    }, [isReturningFocus, open]);
+    const handleTriggerClick = useCallback(() => {
         if (disabled)
             return;
         onClick === null || onClick === void 0 ? void 0 : onClick();
-    };
+        if (wasOpenOnPointerDown.current) {
+            close();
+            return;
+        }
+        open();
+    }, [disabled, onClick, open, close]);
+    const handleSearchChange = useCallback((event) => {
+        setHasTyped(true);
+        setSearchQuery(event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
+    }, [onChange]);
+    const handleSearchClear = useCallback(() => {
+        setHasTyped(true);
+        setSearchQuery('');
+        onChange === null || onChange === void 0 ? void 0 : onChange('');
+    }, [onChange]);
     /**
-     * Renders the "no results" message when no options match the search
-     *
-     * @returns A text component displaying the no results message
+     * Props shared by the desktop and the mobile search field. Both render the
+     * same field, only placement and compact styling differ.
      */
-    const NoResultsTextComponent = () => {
-        return (_jsx(Text, { variant: TextVariant.SUBHEADLINE, className: "combobox--no-results-text", children: noResultsText }));
-    };
+    const searchInputProps = Object.assign({ ref: searchInputRef, name, 
+        // Multi select would show a comma separated list, which cannot be edited
+        // sensibly - there the field starts empty.
+        value: hasTyped || multiple ? searchQuery : displayValue, pattern: searchPattern, placeholder,
+        inputMode, 
+        // The mobile sheet has no visible label, so the field needs a name of its own.
+        'aria-label': label, displayLeadingIcon: true, blurOnOutsideClick: false, onChange: handleSearchChange, onClear: handleSearchClear, onKeyDown }, comboboxAriaProps);
     /**
-     * Removes the placeholder text from the input field
+     * The options block is built once and rendered either in the popover or in
+     * the bottom sheet.
      */
-    const removePlaceholder = () => {
-        setPlaceholder('');
-    };
-    return (_jsxs(ThemeProvider, { theme: theme, children: [showSelectField && (_jsx(SelectInput, { className: clsx(isOpen && 'active', className), name: name, label: label, value: value, placeholder: placeholder, onClick: handleOnClick, disableTrailingIconButton: true, leadingIcon: leadingIcon, disabled: disabled, loading: loading, readOnly: true })), isDesktop && isOpen && (_jsxs("div", { className: "combobox", ref: comboBoxRef, children: [withSearch && (_jsx(SearchInput, { name: name, value: searchQuery, pattern: searchPattern, label: label, onChange: handleChange, onClear: handleClearInput, displayLeadingIcon: isOpen, isCompact: true, inputMode: inputMode, autoFocus: true })), optionsSlot !== null && optionsSlot !== void 0 ? optionsSlot : (optionsExist ? (_jsx(ComboBoxOptions, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType })) : (_jsx(NoResultsTextComponent, {}))), _jsx("div", {})] })), !isDesktop && isOpen && (_jsxs(BottomSheet, { className: "combobox__bottom-sheet", open: isOpen, onClose: clearAndClose, ref: bottomSheetRef, children: [_jsxs("div", { className: "combobox--header", children: [_jsx(Text, { variant: TextVariant.HEADLINE, className: "combobox--headline", children: headline }), withSearch && (_jsx(SearchInput, { name: name, value: searchQuery, pattern: searchPattern, onChange: handleChange, onClear: handleClearInput, onFocus: removePlaceholder, placeholder: inputPlaceholder, isCompact: true, inputMode: inputMode, displayLeadingIcon: isOpen }))] }), _jsx("div", { className: "combobox__options", children: optionsSlot !== null && optionsSlot !== void 0 ? optionsSlot : (optionsExist ? (_jsx(ComboBoxOptions, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType, optionDetails: optionDetails })) : (_jsx(NoResultsTextComponent, {}))) })] }))] }));
+    const optionsPanel = optionsSlot !== null && optionsSlot !== void 0 ? optionsSlot : (normalisedOptions.length > 0 ? (_jsx(ComboBoxOptions, { options: normalisedOptions, listboxAriaProps: listboxAriaProps, selectedValues: selectedValues, activeOptionId: activeOptionId, leadingType: leadingType, optionDetails: optionDetails, onOptionClick: handleSelect })) : (_jsx(ComboBoxNoResults, { text: noResultsText })));
+    return (_jsxs(ThemeProvider, { theme: theme, children: [_jsxs("div", { className: styles.comboBox, ref: rootRef, onMouseDownCapture: handleRootPointerDown, children: [showTrigger && (_jsx(SelectInput, Object.assign({ ref: triggerRef, className: clsx(isOpen && 'active', className), name: name, inputInfo: helperText, label: label, value: displayValue, placeholder: placeholder, leadingIcon: leadingIcon, disabled: disabled, loading: loading, readOnly: true, disableTrailingIconButton: true, 
+                        // The focus has to stay in the field, even when clicking next to it.
+                        blurOnOutsideClick: false, onClick: handleTriggerClick, onFocus: handleTriggerFocus, onKeyDown: onKeyDown }, triggerAriaProps))), isDesktop && isOpen && (_jsxs(_Fragment, { children: [showSearchField && (_jsx(SearchInput, Object.assign({}, searchInputProps, { label: label }))), optionsPanel] }))] }), !isDesktop && isOpen && (_jsxs(BottomSheet, { className: styles.sheet, open: isOpen, onClose: () => close(), children: [_jsxs("div", { className: styles.header, children: [headline && (_jsx(Text, { variant: TEXT_VARIANT.HEADLINE, className: styles.headline, children: headline })), showSearchField && _jsx(SearchInput, Object.assign({}, searchInputProps, { isCompact: true }))] }), optionsPanel] }))] }));
 }
+export default ComboBox;
 //# sourceMappingURL=ComboBox.js.map

package/lib/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAChF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACxE,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,aAAa,GAAG,EAAE,EAClB,aAAa,EACb,SAAS,EACT,WAAW,EACX,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,aAAa,EACrB,WAAW,EACX,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,YAAY,GACE;IACd,MAAM,SAAS,GAAG,KAAK,EAAE,CAAA;IACzB,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAA;IAE3C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAElD;;;;OAIG;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE/C,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAC1E,gBAAgB,EAAE,CAAA;IAEpB,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,EAC1C,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB,CAAA;IACD,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAElE;;;;OAIG;IACH,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,MAAM,GAAG,iBAAiB;aAC7B,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACvD,GAAG,CAAC,cAAc,CAAC,CAAA;QAEtB,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAA;QAElE,OAAO,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC9E,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAA;IAEpD,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,IAAI,QAAQ,IAAI,OAAO;YAAE,OAAM;QAE/B,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAElC;;;;;OAKG;IACH,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,YAAY,GAAG,IAAI,EAAE,EAAE;QACtB,cAAc,CAAC,EAAE,CAAC,CAAA;QAClB,WAAW,CAAC,KAAK,CAAC,CAAA;QAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAA;QACd,SAAS,CAAC,KAAK,CAAC,CAAA;QAEhB,IAAI,YAAY;YAAE,oBAAoB,EAAE,CAAA;IAC1C,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAC5C,CAAA;IAED;;;;;OAKG;IACH,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,WAAmB,EAAE,EAAE;QACtB,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,WAAW,CAAC,CAAA;QAEhC,IAAI,CAAC,QAAQ;YAAE,KAAK,EAAE,CAAA;IACxB,CAAC,EACD,CAAC,QAAQ,EAAE,iBAAiB,EAAE,KAAK,CAAC,CACrC,CAAA;IAED,MAAM,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,GACtE,WAAW,CAAC;QACV,OAAO,EAAE,iBAAiB;QAC1B,MAAM;QACN,IAAI;QACJ,KAAK;QACL,cAAc;QACd,QAAQ,EAAE,YAAY;QACtB,SAAS;QACT,UAAU,EAAE,UAAU;QACtB,QAAQ;QACR,WAAW;KACZ,CAAC,CAAA;IAEJ;;;OAGG;IACH,MAAM,eAAe,GAAG,UAAU,IAAI,MAAM,CAAA;IAE5C,iEAAiE;IACjE,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,CAAC,eAAe,CAAA;IAElD;;;OAGG;IACH,MAAM,gBAAgB,GAAG,eAAe;QACtC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE;QACvC,CAAC,CAAC,iBAAiB,CAAA;IAErB,uEAAuE;IACvE,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,MAAM;YAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAA;QAEhD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAA;IAC1B,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1B;;;;OAIG;IACH,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC1C,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,oBAAoB,CAAC,OAAO,GAAG,MAAM,CAAA;IACvC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ;;;OAGG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,MAAM;YAAE,OAAM;QAEjC,MAAM,yBAAyB,GAAG,CAAC,KAAiB,EAAE,EAAE;;YACtD,IAAI,MAAA,OAAO,CAAC,OAAO,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBAAE,OAAM;YAE3D,0CAA0C;YAC1C,KAAK,CAAC,KAAK,CAAC,CAAA;YACZ,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAA;QACpB,CAAC,CAAA;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,yBAAyB,CAAC,CAAA;QAEjE,OAAO,GAAG,EAAE,CACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,yBAAyB,CAAC,CAAA;IACxE,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAA;IAE9C;;;OAGG;IACH,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,gBAAgB,EAAE;YAAE,OAAM;QAE9B,IAAI,EAAE,CAAA;IACR,CAAC,EAAE,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAAA;IAE5B,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,QAAQ;YAAE,OAAM;QAEpB,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;QAEX,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;YACjC,KAAK,EAAE,CAAA;YAEP,OAAM;QACR,CAAC;QAED,IAAI,EAAE,CAAA;IACR,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpC,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAA0C,EAAE,EAAE;QAC7C,WAAW,CAAC,IAAI,CAAC,CAAA;QACjB,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAClC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,WAAW,CAAC,IAAI,CAAC,CAAA;QACjB,cAAc,CAAC,EAAE,CAAC,CAAA;QAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAA;IAChB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd;;;OAGG;IACH,MAAM,gBAAgB,mBACpB,GAAG,EAAE,cAAc,EACnB,IAAI;QACJ,yEAAyE;QACzE,2CAA2C;QAC3C,KAAK,EAAE,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EACxD,OAAO,EAAE,aAAa,EACtB,WAAW;QACX,SAAS;QACT,+EAA+E;QAC/E,YAAY,EAAE,KAAK,EACnB,kBAAkB,EAAE,IAAI,EACxB,kBAAkB,EAAE,KAAK,EACzB,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,SAAS,IACN,iBAAiB,CACrB,CAAA;IAED;;;OAGG;IACH,MAAM,YAAY,GAChB,WAAW,aAAX,WAAW,cAAX,WAAW,GACX,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC9B,KAAC,eAAe,IACd,OAAO,EAAE,iBAAiB,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,YAAY,GAC3B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,IAAI,EAAE,aAAa,GAAI,CAC3C,CAAC,CAAA;IAEJ,OAAO,CACL,MAAC,aAAa,IAAC,KAAK,EAAE,KAAK,aACzB,eACE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,GAAG,EAAE,OAAO,EACZ,kBAAkB,EAAE,qBAAqB,aAExC,WAAW,IAAI,CACd,KAAC,WAAW,kBACV,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,SAAS,CAAC,EAC9C,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,QACR,yBAAyB;wBACzB,qEAAqE;wBACrE,kBAAkB,EAAE,KAAK,EACzB,OAAO,EAAE,kBAAkB,EAC3B,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,SAAS,IAChB,gBAAgB,EACpB,CACH,EAEA,SAAS,IAAI,MAAM,IAAI,CACtB,8BACG,eAAe,IAAI,CAClB,KAAC,WAAW,oBAAK,gBAAgB,IAAE,KAAK,EAAE,KAAK,IAAI,CACpD,EACA,YAAY,IACZ,CACJ,IACG,EAEL,CAAC,SAAS,IAAI,MAAM,IAAI,CACvB,MAAC,WAAW,IACV,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,aAEtB,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC1B,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7D,QAAQ,GACJ,CACR,EACA,eAAe,IAAI,KAAC,WAAW,oBAAK,gBAAgB,IAAE,SAAS,UAAG,IAC/D,EACL,YAAY,IACD,CACf,IACa,CACjB,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAA"}

package/lib/ComboBox.module.css

@@ -1 +1 @@
-.root{position:relative;width:100%}.root .headline[class*=text--]+*{margin-top:var(--spacing)}:is(.root,.sheet) :is(.panel,.optionsSlot,.header){position:relative;width:100%}:is(.root,.sheet) .panel{display:flex;flex-direction:column;max-height:inherit;overflow:hidden}:is(.root,.sheet) :is(.options,.optionsSlot){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:auto;scroll-padding-block-start:var(--combobox-sticky-offset,2.75rem)}.sheet .header{align-items:flex-start;height:auto;margin:var(--spacing-5) auto var(--spacing-2);padding:0 var(--spacing-2)}:is(.root,.sheet) ul.optionsSlot{list-style:none;padding:0}.root .optionsSlot{margin-top:var(--spacing)}:is(.root,.sheet) .option{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}:is(.root,.sheet) .optionCheckbox[data-selected=true] :global(.menu-item){background-color:initial}:is(.root,.sheet) .option.optionActive :global(.menu-item),:is(.root,.sheet) .optionCheckbox.optionActive :global(.menu-item){background-color:var(--color-canvas--hover)}:is(.root,.sheet) .option[data-selected=true]:not(.optionCheckbox) :global(.menu-item){background-color:var(--color-accent);color:var(--color-surface)}:is(.root,.sheet) .option[aria-disabled=true]{cursor:not-allowed;opacity:.5}@media (forced-colors:active){:is(.root,.sheet) .option.optionActive :global(.menu-item){outline:2px solid Highlight;outline-offset:-2px}}:is(.root,.sheet) .stickyHeader{background-color:var(--color-surface);border-bottom:1px solid var(--color-dim);padding:var(--spacing-1_25) var(--spacing-2);position:-webkit-sticky;position:sticky;top:0}:is(.root,.sheet) .options :global(.text--caption){color:var(--color-on-secondary)}:is(.root,.sheet) .option[data-selected=true]:not(.optionCheckbox) :global(.menu-item .text--caption){color:var(--color-surface)}:is(.root,.sheet) .options :global(.item-header){display:flex;justify-content:space-between}:is(.root,.sheet) .optionDetails{background-color:var(--color-surface);border-top:1px solid var(--color-dim);flex:0 0 auto;padding:var(--spacing-1_25) var(--spacing)}:is(.root,.sheet) .noResults{padding:var(--spacing-2) var(--spacing);text-align:center}@media screen and (min-width:960px){.root :is(.panel,.optionsSlot){border-radius:12px;margin-top:var(--spacing);max-height:330px;position:absolute}}
+.comboBox{position:relative;width:100%}.comboBox .headline[class*=text--]+*{margin-top:var(--spacing)}:is(.comboBox,.sheet) :is(.panel,.optionsSlot,.header){position:relative;width:100%}:is(.comboBox,.sheet) .panel{display:flex;flex-direction:column;max-height:inherit;overflow:hidden}:is(.sheet) .panel{box-shadow:none}:is(.comboBox,.sheet) :is(.options,.optionsSlot){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:auto;scroll-padding-block-start:var(--combobox-sticky-offset,2.75rem)}.sheet .header{align-items:flex-start;height:auto;margin:var(--spacing-5) auto var(--spacing-2);padding:0 var(--spacing-2)}:is(.comboBox,.sheet) ul.optionsSlot{list-style:none;padding:0}:is(.comboBox,.sheet) .option{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}:is(.comboBox,.sheet) .optionCheckbox[data-selected=true] :global(.menu-item){background-color:initial}:is(.comboBox,.sheet) .option.optionActive :global(.menu-item),:is(.comboBox,.sheet) .optionCheckbox.optionActive :global(.menu-item){background-color:var(--color-canvas--hover)}:is(.comboBox,.sheet) .option[data-selected=true]:not(.optionCheckbox) :global(.menu-item){background-color:var(--color-accent);color:var(--color-surface)}:is(.comboBox,.sheet) .option[aria-disabled=true]{cursor:not-allowed;opacity:.5}@media (forced-colors:active){:is(.comboBox,.sheet) .option.optionActive :global(.menu-item){outline:2px solid Highlight;outline-offset:-2px}}:is(.comboBox,.sheet) .stickyHeader{background-color:var(--color-surface);border-bottom:1px solid var(--color-dim);padding:var(--spacing-1_25) var(--spacing-2);position:-webkit-sticky;position:sticky;top:0}:is(.comboBox,.sheet) .options :global(.text--caption){color:var(--color-on-secondary)}:is(.comboBox,.sheet) .option[data-selected=true]:not(.optionCheckbox) :global(.menu-item .text--caption){color:var(--color-surface)}:is(.comboBox,.sheet) .options :global(.item-header){display:flex;justify-content:space-between}:is(.comboBox,.sheet) .optionDetails{background-color:var(--color-surface);border-top:1px solid var(--color-dim);flex:0 0 auto;padding:var(--spacing-1_25) var(--spacing)}:is(.comboBox,.sheet) .noResults{padding:var(--spacing-2) var(--spacing);text-align:center}@media screen and (min-width:960px){.comboBox :is(.panel,.optionsSlot){border-radius:var(--border-radius-3);margin-top:var(--spacing);max-height:330px;position:absolute}}

package/lib/hooks/index.d.ts

@@ -1 +1,3 @@
 export * from './useIsDesktopScreenWidth';
+export * from './useComboBox';
+export * from './useComboBoxFocus';

package/lib/hooks/index.js

@@ -1,2 +1,4 @@
 export * from './useIsDesktopScreenWidth';
+export * from './useComboBox';
+export * from './useComboBoxFocus';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA"}

package/lib/hooks/useComboBox.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { findEnabledIndex } from '../utils';
 /**

package/lib/hooks/useComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComboBox.js","sourceRoot":"","sources":["../../src/hooks/useComboBox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useComboBox.js","sourceRoot":"","sources":["../../src/hooks/useComboBox.ts"],"names":[],"mappings":"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"}

package/lib/hooks/useComboBoxFocus.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useRef } from 'react';
 /**
  * Bundles the focus choreography of the ComboBox:

package/lib/hooks/useComboBoxFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComboBoxFocus.js","sourceRoot":"","sources":["../../src/hooks/useComboBoxFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAwBtD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IACjD,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACpC,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAE5C,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI;YAAE,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IACvE,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,KAA8B,EAAE,EAAE;QACpE,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,oEAAoE;QACpE,6CAA6C;QAC7C,qBAAqB,CAAC,GAAG,EAAE;;YACzB,MAAA,KAAK,CAAC,iBAAiB,sDAAG,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAClD,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,cAAc,CAAC,OAAO,GAAG,IAAI,CAAA;QAE7B,0EAA0E;QAC1E,sCAAsC;QACtC,QAAQ,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;;YAC5C,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;YAC3B,0EAA0E;YAC1E,cAAc,CAAC,OAAO,GAAG,KAAK,CAAA;QAChC,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAEtE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAA;AAC/E,CAAC"}
+{"version":3,"file":"useComboBoxFocus.js","sourceRoot":"","sources":["../../src/hooks/useComboBoxFocus.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAwBtD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IACjD,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACpC,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAE5C,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI;YAAE,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IACvE,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,KAA8B,EAAE,EAAE;QACpE,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,oEAAoE;QACpE,6CAA6C;QAC7C,qBAAqB,CAAC,GAAG,EAAE;;YACzB,MAAA,KAAK,CAAC,iBAAiB,sDAAG,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAClD,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,cAAc,CAAC,OAAO,GAAG,IAAI,CAAA;QAE7B,0EAA0E;QAC1E,sCAAsC;QACtC,QAAQ,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;;YAC5C,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;YAC3B,0EAA0E;YAC1E,cAAc,CAAC,OAAO,GAAG,KAAK,CAAA;QAChC,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAEtE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAA;AAC/E,CAAC"}

package/lib/hooks/useIsDesktopScreenWidth.d.ts

@@ -1 +1,6 @@
+/**
+ * Custom hook that detects whether the viewport width is desktop size (>= 960px).
+ *
+ * @returns True if the viewport width is 960px or greater, false otherwise
+ */
 export declare function useIsDesktopScreenWidth(): boolean;

package/lib/hooks/useIsDesktopScreenWidth.js

@@ -1,36 +1,46 @@
-import { useState, useEffect } from 'react';
+'use client';
+import { useSyncExternalStore } from 'react';
+const DESKTOP_MEDIA_QUERY = '(min-width: 960px)';
 /**
- * Custom hook that detects whether the viewport width is desktop size (>= 960px).
- * Listens to window resize events to update the state dynamically.
+ * Subscribes to the MediaQueryList. Using `change` instead of `resize` means
+ * there is only one re-render when the breakpoint is actually crossed.
  *
- * @returns True if the viewport width is 960px or greater, false otherwise
+ * @param onStoreChange - Callback invoked when the breakpoint match changes
+ * @returns An unsubscribe function that removes the listener
  */
-function isBrowser() {
-    return typeof window !== 'undefined';
+function subscribe(onStoreChange) {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return () => { };
+    }
+    const mediaQueryList = window.matchMedia(DESKTOP_MEDIA_QUERY);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => mediaQueryList.removeEventListener('change', onStoreChange);
 }
 /**
- * Checks if the current viewport width is desktop size (>= 960px).
+ * Client snapshot: the current match state of the desktop breakpoint.
  *
- * @returns True if the viewport is desktop size, false otherwise or in non-browser environments
+ * @returns True if the desktop breakpoint currently matches, false otherwise
  */
-function isInitialScreenDesktop() {
-    if (isBrowser()) {
-        return window.innerWidth >= 960;
-    }
+function getSnapshot() {
+    if (typeof window === 'undefined' || !window.matchMedia)
+        return false;
+    return window.matchMedia(DESKTOP_MEDIA_QUERY).matches;
+}
+/**
+ * Server snapshot: deliberately `false` (mobile first), so that the server
+ * render and the first client render match deterministically.
+ *
+ * @returns Always false
+ */
+function getServerSnapshot() {
     return false;
 }
+/**
+ * Custom hook that detects whether the viewport width is desktop size (>= 960px).
+ *
+ * @returns True if the viewport width is 960px or greater, false otherwise
+ */
 export function useIsDesktopScreenWidth() {
-    const [isDesktop, setIsDesktop] = useState(isInitialScreenDesktop);
-    useEffect(() => {
-        const checkScreenSize = () => {
-            setIsDesktop(window.innerWidth >= 960);
-        };
-        checkScreenSize();
-        window.addEventListener('resize', checkScreenSize);
-        return () => {
-            window.removeEventListener('resize', checkScreenSize);
-        };
-    }, []);
-    return isDesktop;
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 //# sourceMappingURL=useIsDesktopScreenWidth.js.map

package/lib/hooks/useIsDesktopScreenWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsDesktopScreenWidth.js","sourceRoot":"","sources":["../../src/hooks/useIsDesktopScreenWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C;;;;;GAKG;AAEH,SAAS,SAAS;IAChB,OAAO,OAAO,MAAM,KAAK,WAAW,CAAA;AACtC,CAAC;AAED;;;;GAIG;AACH,SAAS,sBAAsB;IAC7B,IAAI,SAAS,EAAE,EAAE,CAAC;QAChB,OAAO,MAAM,CAAC,UAAU,IAAI,GAAG,CAAA;IACjC,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,sBAAsB,CAAC,CAAA;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,YAAY,CAAC,MAAM,CAAC,UAAU,IAAI,GAAG,CAAC,CAAA;QACxC,CAAC,CAAA;QAED,eAAe,EAAE,CAAA;QACjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;QAElD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;QACvD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,SAAS,CAAA;AAClB,CAAC"}
+{"version":3,"file":"useIsDesktopScreenWidth.js","sourceRoot":"","sources":["../../src/hooks/useIsDesktopScreenWidth.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,mBAAmB,GAAG,oBAAoB,CAAA;AAEhD;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,aAAyB;IAC1C,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;QACxD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAA;IAC7D,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;IAExD,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;AAC1E,CAAC;AAED;;;;GAIG;AACH,SAAS,WAAW;IAClB,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,UAAU;QAAE,OAAO,KAAK,CAAA;IAErE,OAAO,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAA;AACvD,CAAC;AAED;;;;;GAKG;AACH,SAAS,iBAAiB;IACxB,OAAO,KAAK,CAAA;AACd,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,uBAAuB;IACrC,OAAO,oBAAoB,CAAC,SAAS,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAA;AACxE,CAAC"}

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { ComboBox } from './ComboBox';
-export default ComboBox;
-export * from './types';
-export { ComboBoxOptionsSlot } from './partials';
+export { ComboBox, default } from './ComboBox';
+export { ComboBoxOptionsSlot, type ComboBoxOptionsSlotProps } from './partials';
+export { useComboBox, useIsDesktopScreenWidth } from './hooks';
+export type { ComboBoxAriaProps, ComboBoxOption, ComboBoxOptionGroup, ComboBoxOptionItemProps, ComboBoxOptionsInput, ComboBoxOptionsProps, ComboBoxProps, ListboxAriaProps, } from './types';

package/lib/index.js

@@ -1,5 +1,4 @@
-import { ComboBox } from './ComboBox';
-export default ComboBox;
-export * from './types';
+export { ComboBox, default } from './ComboBox';
 export { ComboBoxOptionsSlot } from './partials';
+export { useComboBox, useIsDesktopScreenWidth } from './hooks';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,eAAe,QAAQ,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAiC,MAAM,YAAY,CAAA;AAC/E,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA"}

package/lib/partials/ComboBoxOptions.d.ts

@@ -1,10 +1,21 @@
 import type { ComboBoxOptionsProps } from '../types';
 /**
- * ComboBoxOptions component that renders a list of options in a menu.
- * Handles both grouped and ungrouped options and automatically scrolls to the selected option.
+ * Renders the options panel of the ComboBox.
+ *
+ * The panel is split in two: the `Menu` provides the visible box, the element
+ * inside it carries the `listbox` role and is the only part that scrolls. That
+ * keeps `optionDetails` a real footer - it stays visible without
+ * `position: sticky` and can no longer cover the active option - and it keeps
+ * the listbox free of anything that is not an option or a group, as ARIA
+ * requires.
+ *
+ * Flat and grouped options share one render path: the options arrive already
+ * normalised, `groupOptions` only splits them into their visual groups again.
+ * The listbox is not focusable - the focus stays in the input field, the active
+ * option is announced through `aria-activedescendant`.
  *
  * @param props - The props for the ComboBoxOptions component
- * @returns A menu containing the combobox options
+ * @returns The options panel
  */
-export declare function ComboBoxOptions({ options, onClick, selectedOption, leadingType, optionDetails, }: ComboBoxOptionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBoxOptions({ options, listboxAriaProps, selectedValues, activeOptionId, leadingType, optionDetails, onOptionClick, }: ComboBoxOptionsProps): import("react/jsx-runtime").JSX.Element;
 export default ComboBoxOptions;