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

package/lib/ComboBox.d.ts

@@ -1,33 +1,11 @@
 import type { ComboBoxProps } from './types';
+import './styles.css';
 /**
- * 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.
+ * 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.
  *
  * @param props - The props for the ComboBox component
- * @returns A responsive, accessible combobox
+ * @returns A responsive combobox component with search and selection capabilities
  */
-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;
+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;

package/lib/ComboBox.js

@@ -1,209 +1,110 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
 import BottomSheet from '@pixum/bottom-sheet';
-import Text, { TEXT_VARIANT } from '@pixum/text';
-import { SearchInput, SelectInput } from '@pixum/web-input';
-import ThemeProvider, { DEFAULT_THEME } from '@pixum/theme-provider';
+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 { ComboBoxNoResults, ComboBoxOptions } from './partials';
-import { useComboBox, useComboBoxFocus, useIsDesktopScreenWidth } from './hooks';
-import { getOptionLabel, normaliseOptions, toValueArray } from './utils';
-import styles from './ComboBox.module.css';
+import ThemeProvider, { DEFAULT_THEME } from '@pixum/theme-provider';
+import './styles.css';
 /**
- * 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.
+ * 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.
  *
  * @param props - The props for the ComboBox component
- * @returns A responsive, accessible combobox
+ * @returns A responsive combobox component with search and selection capabilities
  */
-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();
+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);
+    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]);
     /**
-     * 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.
+     * Handles changes to the search input field
+     *
+     * @param e - The change event from the input
      */
-    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]);
+    const handleChange = (e) => {
+        const { value: searchValue } = e.target;
+        setSearchQuery(searchValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(searchValue);
+    };
     /**
-     * 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.
+     * Clears the search input field
      */
-    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]);
+    const handleClearInput = () => {
+        setSearchQuery('');
+    };
     /**
-     * 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
+     * Clears the search input and closes the dropdown/bottom sheet
      */
-    const close = useCallback((restoreFocus = true) => {
+    const clearAndClose = () => {
         setSearchQuery('');
-        setHasTyped(false);
-        onChange === null || onChange === void 0 ? void 0 : onChange('');
         setIsOpen(false);
-        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".
-     */
+    };
+    useEscapeKeyPress(clearAndClose, isOpen);
+    // Handle outside clicks for desktop dropdown
     useEffect(() => {
         if (!isDesktop || !isOpen)
             return;
-        const handleDocumentPointerDown = (event) => {
+        const handleDocumentClick = (event) => {
             var _a;
-            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();
+            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();
+            }
         };
-        document.addEventListener('mousedown', handleDocumentPointerDown);
-        return () => document.removeEventListener('mousedown', handleDocumentPointerDown);
-    }, [isDesktop, isOpen, close, 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]);
     /**
-     * Opens the list when the trigger receives the focus - but not when the focus
-     * is only coming back from a close.
+     * Handles click on an option item
+     *
+     * @param optionValue - The value of the clicked option
      */
-    const handleTriggerFocus = useCallback(() => {
-        if (isReturningFocus())
-            return;
-        open();
-    }, [isReturningFocus, open]);
-    const handleTriggerClick = useCallback(() => {
+    const handleOptionItemClick = (optionValue) => {
+        onOptionItemClick === null || onOptionItemClick === void 0 ? void 0 : onOptionItemClick(optionValue);
+    };
+    /**
+     * Handles click on the input field
+     */
+    const handleOnClick = () => {
         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]);
+    };
     /**
-     * Props shared by the desktop and the mobile search field. Both render the
-     * same field, only placement and compact styling differ.
+     * Renders the "no results" message when no options match the search
+     *
+     * @returns A text component displaying the no results message
      */
-    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);
+    const NoResultsTextComponent = () => {
+        return (_jsx(Text, { variant: TextVariant.SUBHEADLINE, className: "combobox--no-results-text", children: noResultsText }));
+    };
     /**
-     * The options block is built once and rendered either in the popover or in
-     * the bottom sheet.
+     * Removes the placeholder text from the input field
      */
-    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] }))] }));
+    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, {}))) })] }))] }));
 }
-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":"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"}

package/lib/hooks/index.d.ts

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

package/lib/hooks/index.js

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

package/lib/hooks/useIsDesktopScreenWidth.d.ts

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

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-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';
+import { ComboBox } from './ComboBox';
+export default ComboBox;
+export * from './types';
+export { ComboBoxOptionsSlot } from './partials';

package/lib/index.js

@@ -1,4 +1,5 @@
-export { ComboBox, default } from './ComboBox';
+import { ComboBox } from './ComboBox';
+export default ComboBox;
+export * from './types';
 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,OAAO,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAiC,MAAM,YAAY,CAAA;AAC/E,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA"}
+{"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"}

package/lib/partials/ComboBoxOptions.d.ts

@@ -1,21 +1,10 @@
 import type { ComboBoxOptionsProps } from '../types';
 /**
- * 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`.
+ * ComboBoxOptions component that renders a list of options in a menu.
+ * Handles both grouped and ungrouped options and automatically scrolls to the selected option.
  *
  * @param props - The props for the ComboBoxOptions component
- * @returns The options panel
+ * @returns A menu containing the combobox options
  */
-export declare function ComboBoxOptions({ options, listboxAriaProps, selectedValues, activeOptionId, leadingType, optionDetails, onOptionClick, }: ComboBoxOptionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBoxOptions({ options, onClick, selectedOption, leadingType, optionDetails, }: ComboBoxOptionsProps): import("react/jsx-runtime").JSX.Element;
 export default ComboBoxOptions;

package/lib/partials/ComboBoxOptions.js

@@ -1,33 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import Menu from '@pixum/menu';
-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';
+import { useIsDesktopScreenWidth } from '../hooks';
+import { scrollOptionToViewport } from '../utils';
+import { ComboxBoxOptionsWithGrouping } from './ComboBoxOptionsWithGrouping';
+import { ComboBoxOptionsItems } from './ComboBoxOptionsItems';
 /**
- * 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`.
+ * ComboBoxOptions component that renders a list of options in a menu.
+ * Handles both grouped and ungrouped options and automatically scrolls to the selected option.
  *
  * @param props - The props for the ComboBoxOptions component
- * @returns The options panel
+ * @returns A menu containing the combobox options
  */
-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 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 default ComboBoxOptions;
 //# sourceMappingURL=ComboBoxOptions.js.map