@pixum/combobox 5.10.5 → 5.10.6

package/lib/ComboBox.d.ts

@@ -1,11 +1,37 @@
 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.
+ *
+ * Legacy props: `id`, `selectedOption` and a non-element `leadingIcon` are
+ * still accepted so existing consumers keep working. They are marked
+ * `@deprecated` in the types.
  *
  * @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, id, helperText, headline, label, options, isOpen, setIsOpen, value, selectedOption, 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,245 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, 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.
+ *
+ * Legacy props: `id`, `selectedOption` and a non-element `leadingIcon` are
+ * still accepted so existing consumers keep working. They are marked
+ * `@deprecated` in the types.
  *
  * @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, id, helperText, headline, label, options, isOpen, setIsOpen, value, selectedOption, 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
+     * 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 [hasTyped, setHasTyped] = useState(false);
+    const { triggerRef, searchInputRef, returnFocusToTrigger, isReturningFocus } = useComboBoxFocus();
+    const normalisedOptions = useMemo(() => normaliseOptions(options, listboxId), [options, listboxId]);
+    /**
+     * In the previous version `value` drove both the trigger text and the
+     * selection, while
+     * `selectedOption` was accepted but never read by this component - it was
+     * only passed down internally, filled with `value`.
      *
-     * @param e - The change event from the input
+     * `value` therefore keeps full priority. `selectedOption` is honoured as a
+     * fallback so consumers that always set it now get a working selection, but
+     * only when it is actually a string: several consumers type it as their own
+     * option object, and previously that object was silently ignored rather than
+     * stringified.
      */
-    const handleChange = (e) => {
-        const { value: searchValue } = e.target;
-        setSearchQuery(searchValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(searchValue);
-    };
+    const selectedValues = useMemo(() => {
+        if (value !== undefined)
+            return toValueArray(value);
+        return typeof selectedOption === 'string'
+            ? toValueArray(selectedOption)
+            : [];
+    }, [value, selectedOption]);
     /**
-     * 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]);
+    /**
+     * `leadingIcon` is typed as `ReactNode` for backwards compatibility, while
+     * `SelectInput` wants a single element. Strings, numbers and fragments are
+     * wrapped instead of rejected; `false`/`null`/`undefined` stay empty.
+     */
+    const triggerLeadingIcon = useMemo(() => {
+        if (leadingIcon === null || leadingIcon === undefined)
+            return null;
+        if (typeof leadingIcon === 'boolean')
+            return null;
+        if (isValidElement(leadingIcon))
+            return leadingIcon;
+        return _jsx(_Fragment, { children: leadingIcon });
+    }, [leadingIcon]);
+    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();
-            }
-        };
-        // 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);
+            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();
         };
-    }, [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: triggerLeadingIcon, 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":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAIL,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,cAAc,CAAA;AAErB;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,aAAa,GAAG,EAAE,EAClB,MAAM,EACN,OAAO,EACP,WAAW,EACX,KAAK,EACL,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,UAAU,GAAG,IAAI,EACjB,KAAK,GAAG,aAAa,EACrB,WAAW,EACX,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,YAAY,GACE;IACd,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAChD,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,gBAAgB,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAEhE,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAA;IAE3C,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;IACpD,MAAM,eAAe,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAA;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,MAAM,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAA,CAAA;IAC7B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ;;;;OAIG;IACH,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;QAEvC,cAAc,CAAC,WAAW,CAAC,CAAA;QAC3B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,WAAW,CAAC,CAAA;IACzB,CAAC,CAAA;IAED;;OAEG;IACH,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,cAAc,CAAC,EAAE,CAAC,CAAA;IACpB,CAAC,CAAA;IAED;;OAEG;IACH,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,cAAc,CAAC,EAAE,CAAC,CAAA;QAClB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,iBAAiB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IAExC,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,MAAM;YAAE,OAAM;QAEjC,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;;YAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAc,CAAA;YACjC,MAAM,SAAS,GAAG,CAAC,CAAA,MAAA,WAAW,CAAC,OAAO,0CAAE,QAAQ,CAAC,IAAI,CAAC,CAAA,CAAA;YAEtD,IAAI,SAAS,EAAE,CAAC;gBACd,aAAa,EAAE,CAAA;gBACf,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAA;YACpB,CAAC;QACH,CAAC,CAAA;QAED,wEAAwE;QACxE,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAA;QAC7D,CAAC,EAAE,GAAG,CAAC,CAAA;QAEP,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,SAAS,CAAC,CAAA;YACvB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAA;QAChE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAA;IAEvC;;;;OAIG;IACH,MAAM,qBAAqB,GAAG,CAAC,WAAmB,EAAE,EAAE;QACpD,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,WAAW,CAAC,CAAA;IAClC,CAAC,CAAA;IAED;;OAEG;IACH,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAM;QACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;IACb,CAAC,CAAA;IAED;;;;OAIG;IACH,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,WAAW,EAChC,SAAS,EAAC,2BAA2B,YAEpC,aAAa,GACT,CACR,CAAA;IACH,CAAC,CAAA;IAED;;OAEG;IACH,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,cAAc,CAAC,EAAE,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,CACL,MAAC,aAAa,IAAC,KAAK,EAAE,KAAK,aACxB,eAAe,IAAI,CAClB,KAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,SAAS,CAAC,EAC9C,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,aAAa,EACtB,yBAAyB,QACzB,WAAW,EAAE,WAAwC,EACrD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,SACR,CACH,EACA,SAAS,IAAI,MAAM,IAAI,CACtB,eAAK,SAAS,EAAC,UAAU,EAAC,GAAG,EAAE,WAAW,aACvC,UAAU,IAAI,CACb,KAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,gBAAgB,EACzB,kBAAkB,EAAE,MAAM,EAC1B,SAAS,QACT,SAAS,EAAE,SAAS,EACpB,SAAS,SACT,CACH,EACA,WAAW,aAAX,WAAW,cAAX,WAAW,GACV,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,EAC9B,cAAc,EAAE,KAAK,EACrB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,KAAG,CAC3B,CAAC,EACJ,eAAO,IACH,CACP,EACA,CAAC,SAAS,IAAI,MAAM,IAAI,CACvB,MAAC,WAAW,IACV,SAAS,EAAC,wBAAwB,EAClC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,aAAa,EACtB,GAAG,EAAE,cAAc,aAEnB,eAAK,SAAS,EAAC,kBAAkB,aAC/B,KAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,EAAC,oBAAoB,YAChE,QAAQ,GACJ,EACN,UAAU,IAAI,CACb,KAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW,EAAE,gBAAgB,EAC7B,SAAS,QACT,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,MAAM,GAC1B,CACH,IACG,EACN,cAAK,SAAS,EAAC,mBAAmB,YAC/B,WAAW,aAAX,WAAW,cAAX,WAAW,GACV,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,EAC9B,cAAc,EAAE,KAAK,EACrB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,KAAG,CAC3B,CAAC,GACA,IACM,CACf,IACa,CACjB,CAAA;AACH,CAAC"}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"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"}

package/lib/ComboBox.module.css

@@ -0,0 +1 @@
+.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.d.ts

@@ -0,0 +1,60 @@
+import type { ComboBoxAriaProps, ComboBoxOption, ListboxAriaProps } from '../types';
+export interface UseComboBoxOptions {
+    /** Normalised options in render order. */
+    options: ComboBoxOption[];
+    /** Whether the list is currently open. */
+    isOpen: boolean;
+    /** Opens the list. */
+    open: () => void;
+    /**
+     * Closes the list. `restoreFocus` is `false` when the focus must stay where
+     * the user put it (Tab).
+     */
+    close: (restoreFocus?: boolean) => void;
+    /** Values that are currently selected. */
+    selectedValues: string[];
+    /** Called with the value of the option that was activated by the keyboard. */
+    onSelect: (value: string) => void;
+    /** Id of the listbox element. */
+    listboxId: string;
+    /** Whether the open list offers a freely typeable search field. */
+    searchable?: boolean;
+    /** Multi select keeps the list open after a selection. */
+    multiple?: boolean;
+    /** Enter opens the closed list (APG select-only). */
+    openOnEnter?: boolean;
+}
+export interface UseComboBoxResult {
+    /** ARIA props for the element that owns the `combobox` role. */
+    comboboxAriaProps: ComboBoxAriaProps;
+    /** ARIA props for the element that owns the `listbox` role. */
+    listboxAriaProps: ListboxAriaProps;
+    /** Keyboard handler for the combobox element. */
+    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+    /** DOM id of the active option, `undefined` while closed. */
+    activeOptionId: string | undefined;
+    /** Index of the active option, `null` while closed or empty. */
+    activeIndex: number | null;
+}
+/**
+ * Headless controller for the WAI-ARIA combobox pattern.
+ *
+ * The focus never moves into the list: the active option is communicated
+ * exclusively via `aria-activedescendant`, which keeps the search field
+ * typeable while the user navigates.
+ *
+ * Keyboard (APG combobox with listbox popup):
+ * - closed: ArrowUp/ArrowDown/Alt+ArrowDown, Enter, Space open the list
+ * - open: ArrowUp/ArrowDown navigate (skipping disabled options),
+ *   Home/End jump to the first/last option, Enter selects,
+ *   Escape and Alt+ArrowUp close, Tab closes and lets the focus move on
+ * - Space selects while the field is not typeable; as soon as a search field
+ *   is open it types a space character instead, as APG requires
+ *
+ * On open the starting point is always the selected option, so ArrowDown moves
+ * to the option right after it.
+ *
+ * @param options - Configuration of the combobox
+ * @returns ARIA props, the keyboard handler and the active option
+ */
+export declare function useComboBox({ options, isOpen, open, close, selectedValues, onSelect, listboxId, searchable, multiple, openOnEnter, }: UseComboBoxOptions): UseComboBoxResult;