@pixum/combobox 5.10.5 → 5.10.7

package/lib/hooks/useComboBox.js

@@ -0,0 +1,226 @@
+'use client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { findEnabledIndex } from '../utils';
+/**
+ * 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 function useComboBox({ options, isOpen, open, close, selectedValues, onSelect, listboxId, searchable = true, multiple = false, openOnEnter = true, }) {
+    var _a;
+    const [activeIndex, setActiveIndex] = useState(null);
+    /**
+     * Read inside effects only. Keeping the selection in a ref avoids re-running
+     * the "open" effect when a consumer passes a new array instance per render.
+     */
+    const selectedValuesRef = useRef(selectedValues);
+    selectedValuesRef.current = selectedValues;
+    /** Tracks the closed -> open edge so navigation is not reset while open. */
+    const wasOpen = useRef(false);
+    /**
+     * Active option requested while the list was still closed (Home/End). The
+     * open effect consumes it instead of falling back to the selected option.
+     */
+    const pendingActiveIndex = useRef(null);
+    /** Typing is only possible while an open search field is rendered. */
+    const canType = isOpen && searchable;
+    /**
+     * Sets the starting point when the list opens: the selected option, or the
+     * first enabled one as a fallback.
+     */
+    useEffect(() => {
+        if (!isOpen) {
+            wasOpen.current = false;
+            setActiveIndex(null);
+            return;
+        }
+        if (wasOpen.current)
+            return;
+        wasOpen.current = true;
+        const pending = pendingActiveIndex.current;
+        pendingActiveIndex.current = null;
+        if (pending !== null) {
+            setActiveIndex(pending);
+            return;
+        }
+        const selectedIndex = options.findIndex(option => !option.disabled && selectedValuesRef.current.includes(option.value));
+        setActiveIndex(selectedIndex !== -1 ? selectedIndex : findEnabledIndex(options, -1, 1));
+    }, [isOpen, options]);
+    /**
+     * Keeps the active index valid while the list is filtered down.
+     */
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setActiveIndex(previous => {
+            const isStillValid = previous !== null &&
+                previous < options.length &&
+                !options[previous].disabled;
+            if (isStillValid)
+                return previous;
+            return findEnabledIndex(options, -1, 1);
+        });
+    }, [isOpen, options]);
+    /**
+     * Moves the active option by `delta` positions, wrapping around and skipping
+     * disabled options.
+     *
+     * @param delta - Number of positions to move; negative moves backwards
+     */
+    const move = useCallback((delta) => setActiveIndex(previous => findEnabledIndex(options, previous !== null && previous !== void 0 ? previous : (delta > 0 ? -1 : 0), delta)), [options]);
+    /**
+     * Selects the active option. In single select the list closes afterwards,
+     * in multi select it stays open so further options can be toggled.
+     */
+    const selectActiveOption = useCallback(() => {
+        if (activeIndex === null)
+            return;
+        const option = options[activeIndex];
+        if (!option || option.disabled)
+            return;
+        onSelect(option.value);
+    }, [activeIndex, options, onSelect]);
+    const onKeyDown = useCallback(event => {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!isOpen) {
+                    open();
+                    break;
+                }
+                // Alt+ArrowUp closes and keeps the current selection.
+                if (event.key === 'ArrowUp' && event.altKey) {
+                    close();
+                    break;
+                }
+                // Alt+ArrowDown only opens, it never moves the active option.
+                if (event.altKey)
+                    break;
+                move(event.key === 'ArrowDown' ? 1 : -1);
+                break;
+            }
+            case 'Enter': {
+                if (!isOpen) {
+                    if (!openOnEnter)
+                        break;
+                    // preventDefault stops an implicit form submit.
+                    event.preventDefault();
+                    open();
+                    break;
+                }
+                if (activeIndex === null)
+                    break;
+                event.preventDefault();
+                selectActiveOption();
+                break;
+            }
+            case ' ': {
+                // An open search field must receive a real space character.
+                if (canType)
+                    break;
+                event.preventDefault();
+                if (isOpen && activeIndex !== null) {
+                    selectActiveOption();
+                    break;
+                }
+                open();
+                break;
+            }
+            case 'Escape': {
+                if (!isOpen)
+                    break;
+                event.preventDefault();
+                close();
+                break;
+            }
+            case 'Tab': {
+                // No preventDefault: the focus moves on, the popup just closes.
+                if (isOpen)
+                    close(false);
+                break;
+            }
+            case 'Home':
+            case 'End': {
+                if (options.length === 0)
+                    break;
+                event.preventDefault();
+                const targetIndex = event.key === 'Home'
+                    ? findEnabledIndex(options, -1, 1)
+                    : findEnabledIndex(options, options.length, -1);
+                // Closed: open first, the effect picks the index up from the ref.
+                if (!isOpen) {
+                    pendingActiveIndex.current = targetIndex;
+                    open();
+                    break;
+                }
+                setActiveIndex(targetIndex);
+                break;
+            }
+            default:
+                break;
+        }
+    }, [
+        isOpen,
+        open,
+        close,
+        move,
+        activeIndex,
+        selectActiveOption,
+        canType,
+        openOnEnter,
+        options,
+    ]);
+    const activeOptionId = isOpen && activeIndex !== null ? (_a = options[activeIndex]) === null || _a === void 0 ? void 0 : _a.id : undefined;
+    /**
+     * Scrolls the active option into view. Purely DOM based, so it works for the
+     * desktop popover and the bottom sheet alike.
+     */
+    useEffect(() => {
+        if (!activeOptionId)
+            return;
+        const frameId = requestAnimationFrame(() => {
+            var _a;
+            (_a = document
+                .getElementById(activeOptionId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [activeOptionId]);
+    const comboboxAriaProps = useMemo(() => ({
+        role: 'combobox',
+        'aria-expanded': isOpen,
+        'aria-haspopup': 'listbox',
+        'aria-controls': isOpen ? listboxId : undefined,
+        'aria-activedescendant': activeOptionId,
+        'aria-autocomplete': searchable ? 'list' : 'none',
+    }), [isOpen, listboxId, activeOptionId, searchable]);
+    const listboxAriaProps = useMemo(() => ({
+        role: 'listbox',
+        id: listboxId,
+        'aria-multiselectable': multiple || undefined,
+    }), [listboxId, multiple]);
+    return {
+        comboboxAriaProps,
+        listboxAriaProps,
+        onKeyDown,
+        activeOptionId,
+        activeIndex,
+    };
+}
+//# sourceMappingURL=useComboBox.js.map

package/lib/hooks/useComboBox.js.map

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

package/lib/hooks/useComboBoxFocus.d.ts

@@ -0,0 +1,35 @@
+export interface UseComboBoxFocusResult {
+    /**
+     * Ref for the trigger field (SelectInput).
+     *
+     * `| null` is part of the type parameter: since React 19 `useRef<T>(null)`
+     * returns `RefObject<T | null>` instead of the old `RefObject<T>`.
+     */
+    triggerRef: React.RefObject<HTMLInputElement | null>;
+    /**
+     * Callback ref for the search field. Focuses it the moment it is mounted -
+     * in the desktop popover as well as in the bottom sheet.
+     */
+    searchInputRef: (input: HTMLInputElement | null) => void;
+    /** Moves the focus back to the trigger without re-opening the list. */
+    returnFocusToTrigger: () => void;
+    /**
+     * Whether the current focus event on the trigger was caused by
+     * `returnFocusToTrigger` and must therefore not open the list.
+     */
+    isReturningFocus: () => boolean;
+}
+/**
+ * Bundles the focus choreography of the ComboBox:
+ *
+ * - opening moves the focus into the search field as soon as it mounts,
+ * - closing moves it back to the trigger,
+ * - the focus handler of the trigger can tell a returning focus from a real
+ *   user focus and therefore does not re-open the list it just closed.
+ *
+ * The search field is wired up with a callback ref, so both the popover and the
+ * bottom sheet share one implementation and no polling is needed.
+ *
+ * @returns Refs and helpers for the focus handling
+ */
+export declare function useComboBoxFocus(): UseComboBoxFocusResult;

package/lib/hooks/useComboBoxFocus.js

@@ -0,0 +1,49 @@
+'use client';
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * Bundles the focus choreography of the ComboBox:
+ *
+ * - opening moves the focus into the search field as soon as it mounts,
+ * - closing moves it back to the trigger,
+ * - the focus handler of the trigger can tell a returning focus from a real
+ *   user focus and therefore does not re-open the list it just closed.
+ *
+ * The search field is wired up with a callback ref, so both the popover and the
+ * bottom sheet share one implementation and no polling is needed.
+ *
+ * @returns Refs and helpers for the focus handling
+ */
+export function useComboBoxFocus() {
+    const triggerRef = useRef(null);
+    const returningFocus = useRef(false);
+    const frameRef = useRef(null);
+    useEffect(() => () => {
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+    }, []);
+    const searchInputRef = useCallback((input) => {
+        if (!input)
+            return;
+        input.focus();
+        // One frame later, so Safari does not drop the selection again when
+        // `readOnly` changes within the same render.
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = input.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(input, 0, input.value.length);
+        });
+    }, []);
+    const returnFocusToTrigger = useCallback(() => {
+        returningFocus.current = true;
+        // Wait for the commit that unmounts the popover / bottom sheet, otherwise
+        // the focus would end up on `<body>`.
+        frameRef.current = requestAnimationFrame(() => {
+            var _a;
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            // `focus()` dispatches synchronously, so the flag has served its purpose.
+            returningFocus.current = false;
+        });
+    }, []);
+    const isReturningFocus = useCallback(() => returningFocus.current, []);
+    return { triggerRef, searchInputRef, returnFocusToTrigger, isReturningFocus };
+}
+//# sourceMappingURL=useComboBoxFocus.js.map

package/lib/hooks/useComboBoxFocus.js.map

@@ -0,0 +1 @@
+{"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, ComboBoxOptionsPanelProps, 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/ComboBoxNoResults.d.ts

@@ -0,0 +1,14 @@
+export interface ComboBoxNoResultsProps {
+    /** Message shown when no option matches the search. */
+    text?: string;
+}
+/**
+ * Empty state of the options list.
+ *
+ * `role="status"` makes screen readers announce the message when the list is
+ * filtered down to nothing.
+ *
+ * @param props - The props for the ComboBoxNoResults component
+ * @returns The no-results message
+ */
+export declare function ComboBoxNoResults({ text }: ComboBoxNoResultsProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/partials/ComboBoxNoResults.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text, { TEXT_VARIANT } from '@pixum/text';
+import styles from '../ComboBox.module.css';
+/**
+ * Empty state of the options list.
+ *
+ * `role="status"` makes screen readers announce the message when the list is
+ * filtered down to nothing.
+ *
+ * @param props - The props for the ComboBoxNoResults component
+ * @returns The no-results message
+ */
+export function ComboBoxNoResults({ text }) {
+    if (!text)
+        return null;
+    return (_jsx(Text, { variant: TEXT_VARIANT.SUBHEADLINE, className: styles.noResults, children: text }));
+}
+//# sourceMappingURL=ComboBoxNoResults.js.map

package/lib/partials/ComboBoxNoResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxNoResults.js","sourceRoot":"","sources":["../../src/partials/ComboBoxNoResults.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAO3C;;;;;;;;GAQG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,IAAI,EAA0B;IAChE,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAEtB,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,YACjE,IAAI,GACA,CACR,CAAA;AACH,CAAC"}

package/lib/partials/ComboBoxOptions.d.ts

@@ -1,10 +1,21 @@
-import type { ComboBoxOptionsProps } from '../types';
+import type { ComboBoxOptionsPanelProps } 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, }: ComboBoxOptionsPanelProps): import("react/jsx-runtime").JSX.Element;
 export default ComboBoxOptions;

package/lib/partials/ComboBoxOptions.js

@@ -1,29 +1,33 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Menu from '@pixum/menu';
-import { useIsDesktopScreenWidth } from '../hooks';
-import { scrollOptionToViewport } from '../utils';
-import { ComboxBoxOptionsWithGrouping } from './ComboBoxOptionsWithGrouping';
-import { ComboBoxOptionsItems } from './ComboBoxOptionsItems';
+import Text, { TEXT_VARIANT } from '@pixum/text';
+import clsx from 'clsx';
+import { groupOptions } from '../utils';
+import { ComboBoxOptionsGroup } from './ComboBoxOptionsGroup';
+import styles from '../ComboBox.module.css';
 /**
- * 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 function ComboBoxOptions({ options, onClick, selectedOption, leadingType, optionDetails, }) {
-    const isDesktop = useIsDesktopScreenWidth();
-    const optionsWithoutGroup = Array.isArray(options);
-    const optionsWithGroup = Object.entries(options);
-    useEffect(() => {
-        // Wait for next browser frame to ensure DOM is fully rendered
-        const frameId = requestAnimationFrame(() => {
-            scrollOptionToViewport(isDesktop);
-        });
-        return () => cancelAnimationFrame(frameId);
-    }, [isDesktop, selectedOption]);
-    return (_jsxs(Menu, { className: "combobox__options scrollable", "data-tappable": "true", children: [optionsWithoutGroup ? (_jsx(ComboBoxOptionsItems, { items: options, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })) : (_jsx(_Fragment, { children: optionsWithGroup.map(([group, items]) => (_jsx(ComboxBoxOptionsWithGrouping, { group: group, items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType }, `combobox__options-group-${group}`))) })), optionDetails && (_jsx("div", { className: "combobox__option-details text--caption", children: optionDetails }))] }));
+export function ComboBoxOptions({ options, listboxAriaProps, selectedValues, activeOptionId, leadingType, optionDetails, onOptionClick, }) {
+    return (_jsxs(Menu, { className: styles.panel, "data-tappable": "true", children: [_jsx("div", Object.assign({ className: clsx(styles.options, 'scrollable'), tabIndex: -1 }, listboxAriaProps, { children: groupOptions(options).map(group => {
+                    var _a;
+                    return (_jsx(ComboBoxOptionsGroup, { group: group.group, options: group.options, selectedValues: selectedValues, activeOptionId: activeOptionId, leadingType: leadingType, onOptionClick: onOptionClick }, `combobox__options-group-${(_a = group.group) !== null && _a !== void 0 ? _a : 'default'}`));
+                }) })), optionDetails && (_jsx(Text, { variant: TEXT_VARIANT.CAPTION, className: styles.optionDetails, children: optionDetails }))] }));
 }
 export default ComboBoxOptions;
 //# sourceMappingURL=ComboBoxOptions.js.map

package/lib/partials/ComboBoxOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxOptions.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAEjD,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,GACQ;IACrB,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAA;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAClD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,8DAA8D;QAC9D,MAAM,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACzC,sBAAsB,CAAC,SAAS,CAAC,CAAA;QACnC,CAAC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAA;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,mBAAe,MAAM,aAChE,mBAAmB,CAAC,CAAC,CAAC,CACrB,KAAC,oBAAoB,IACnB,KAAK,EAAE,OAAO,EACd,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,4BACG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACxC,KAAC,4BAA4B,IAE3B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,IALnB,2BAA2B,KAAK,EAAE,CAMvC,CACH,CAAC,GACD,CACJ,EACA,aAAa,IAAI,CAChB,cAAK,SAAS,EAAC,wCAAwC,YACpD,aAAa,GACV,CACP,IACI,CACR,CAAA;AACH,CAAC;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"ComboBoxOptions.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAG3C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,EACb,aAAa,GACa;IAC1B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,mBAAgB,MAAM,aACjD,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,EAC7C,QAAQ,EAAE,CAAC,CAAC,IACR,gBAAgB,cAEnB,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;;oBAAC,OAAA,CAClC,KAAC,oBAAoB,IAEnB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,IANvB,2BAA2B,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,EAAE,CAO1D,CACH,CAAA;iBAAA,CAAC,IACE,EAEL,aAAa,IAAI,CAChB,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,aAAa,YACjE,aAAa,GACT,CACR,IACI,CACR,CAAA;AACH,CAAC;AAED,eAAe,eAAe,CAAA"}

package/lib/partials/ComboBoxOptionsGroup.d.ts

@@ -0,0 +1,15 @@
+import type { ComboBoxOptionsItemsProps } from './ComboBoxOptionsItems';
+export interface ComboBoxOptionsGroupProps extends ComboBoxOptionsItemsProps {
+    /** Group headline. Without it the options are rendered without a header. */
+    group?: string;
+}
+/**
+ * Renders one group of options with an optional sticky headline.
+ *
+ * Flat lists use the same component with `group` left undefined, so there is
+ * only one place that renders options.
+ *
+ * @param props - The props for the ComboBoxOptionsGroup component
+ * @returns A group container with an optional header and its options
+ */
+export declare function ComboBoxOptionsGroup({ group, ...itemProps }: ComboBoxOptionsGroupProps): import("react/jsx-runtime").JSX.Element;

package/lib/partials/ComboBoxOptionsGroup.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text, { TEXT_VARIANT } from '@pixum/text';
+import { ComboBoxOptionsItems } from './ComboBoxOptionsItems';
+import styles from '../ComboBox.module.css';
+/**
+ * Renders one group of options with an optional sticky headline.
+ *
+ * Flat lists use the same component with `group` left undefined, so there is
+ * only one place that renders options.
+ *
+ * @param props - The props for the ComboBoxOptionsGroup component
+ * @returns A group container with an optional header and its options
+ */
+export function ComboBoxOptionsGroup(_a) {
+    var { group } = _a, itemProps = __rest(_a, ["group"]);
+    if (!group)
+        return _jsx(ComboBoxOptionsItems, Object.assign({}, itemProps));
+    return (_jsxs("div", { role: "group", "aria-label": group, children: [_jsx(Text, { variant: TEXT_VARIANT.HEADLINE, className: styles.stickyHeader, children: group }), _jsx(ComboBoxOptionsItems, Object.assign({}, itemProps))] }));
+}
+//# sourceMappingURL=ComboBoxOptionsGroup.js.map

package/lib/partials/ComboBoxOptionsGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxOptionsGroup.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptionsGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAQ3C;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAGT;QAHS,EACnC,KAAK,OAEqB,EADvB,SAAS,cAFuB,SAGpC,CADa;IAEZ,IAAI,CAAC,KAAK;QAAE,OAAO,KAAC,oBAAoB,oBAAK,SAAS,EAAI,CAAA;IAE1D,OAAO,CACL,eAAK,IAAI,EAAC,OAAO,gBAAa,KAAK,aACjC,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,YACjE,KAAK,GACD,EACP,KAAC,oBAAoB,oBAAK,SAAS,EAAI,IACnC,CACP,CAAA;AACH,CAAC"}