@pixum/combobox 5.10.9 → 7.0.0-alpha.0

package/lib/types.d.ts

@@ -1,216 +1,34 @@
-import type { LeadingType, MenuItemProps } from '@pixum/menu-item';
-import type { ThemeType } from '@pixum/theme-provider';
-import type { InputModesType } from '@pixum/web-input';
-/**
- * An option as handed in by the consumer.
- *
- * Everything a `MenuItem` understands is accepted and forwarded unchanged -
- * the ComboBox only adds `key` and `disabled` on top. That keeps existing
- * consumers working: they pass their MenuItem props as they always did, and
- * props the ComboBox does not know about still reach the `MenuItem`.
- */
-export interface ComboBoxOptionItemProps extends MenuItemProps {
-    /** Unique key for the option item */
-    key?: string;
-    /**
-     * Disabled options are rendered, but skipped by mouse and keyboard.
-     *
-     * Newly added. Consumer types that already carry a `disabled` field of a
-     * different type (e.g. `disabled: 'true' | 'false'`) are no longer
-     * assignable - widen it to `boolean` on the consumer side.
-     */
-    disabled?: boolean;
-}
-/** Options are accepted either as a flat list or grouped by a group headline. */
-export type ComboBoxOptionsInput = ComboBoxOptionItemProps[] | Record<string, ComboBoxOptionItemProps[]>;
-/**
- * An option after normalisation. Flat and grouped options are reduced to this
- * shape once, so keyboard navigation, rendering and ARIA ids all work on the
- * very same list in the very same order.
- */
-export interface ComboBoxOption {
-    /** The original option as handed in by the consumer. */
-    item: ComboBoxOptionItemProps;
-    /**
-     * Stable value of the option, reported by `onOptionItemClick` and compared
-     * against `value`. Resolved by `resolveOptionValue`: the option's `text` when
-     * it is a string, otherwise `key`, otherwise the render index.
-     */
-    value: string;
-    /** Position in render order. Drives the DOM id and the keyboard navigation. */
-    index: number;
-    /** DOM id, referenced by `aria-activedescendant`. */
-    id: string;
-    /** Group headline the option belongs to, `undefined` for flat lists. */
-    group?: string;
-    /** Whether the option can be activated. */
-    disabled: boolean;
-}
-/** Options of one render group, produced by `groupOptions`. */
-export interface ComboBoxOptionGroup {
-    /** Group headline, `undefined` for flat lists. */
-    group?: string;
-    /** Options of this group, still carrying their global render index. */
-    options: ComboBoxOption[];
-}
-/** ARIA props for the element that owns the `combobox` role. */
-export interface ComboBoxAriaProps {
-    role: 'combobox';
-    'aria-expanded': boolean;
-    'aria-haspopup': 'listbox';
-    'aria-controls': string | undefined;
-    'aria-activedescendant': string | undefined;
-    'aria-autocomplete': 'list' | 'none';
-}
-/** ARIA props for the element that owns the `listbox` role. */
-export interface ListboxAriaProps {
-    role: 'listbox';
-    id: string;
-    /** Only set for multi select; single select listboxes omit it. */
-    'aria-multiselectable'?: boolean;
-}
-/**
- * Public options contract, kept for backwards compatibility.
- *
- * In the previous version this interface was the base of `ComboBoxProps` and
- * the prop type of
- * the exported options component. It describes the options as the *consumer*
- * hands them in - not the normalised list the internal panel renders. The
- * internal shape now lives in `ComboBoxOptionsPanelProps`.
- *
- * @deprecated Use `ComboBoxProps` (or `Pick<ComboBoxProps, 'options'>`)
- * directly. Kept so existing imports do not silently change meaning; will be
- * removed in the next major.
- */
-export interface ComboBoxOptionsProps {
-    /** Options to display, either flat or grouped. */
-    options: ComboBoxOptionsInput;
-    /**
-     * Currently selected option value.
-     *
-     * @deprecated Use `value`. When both are set, `value` wins.
-     */
+/// <reference types="react" />
+import { LeadingType, MenuItemProps } from '@pixum/menu-item';
+import { InputMode } from '@pixum/user-input';
+interface ComboBoxOptionsProps {
+    options: Record<string, ComboBoxOptionProps[]> | ComboBoxOptionProps[];
     selectedOption?: string;
-    /**
-     * Callback fired when an option is clicked.
-     *
-     * @deprecated Use `onOptionItemClick`. On `ComboBoxProps` this prop is
-     * narrowed to the trigger click handler `() => void`.
-     */
     onClick?: (value: string) => void;
-    /** Type of leading element to display (icon, avatar, checkbox …). */
-    leadingType?: LeadingType;
-    /** Additional details rendered below the options. */
-    optionDetails?: React.ReactNode;
-}
-/**
- * Props of the rendered options panel - the internal, normalised shape.
- *
- * This is what `ComboBoxOptions` consumes. It is exported so custom panels can
- * be typed against it, but it is not part of the consumer-facing API and may
- * change without a major bump.
- */
-export interface ComboBoxOptionsPanelProps {
-    /** Normalised options in render order. */
-    options: ComboBoxOption[];
-    /** ARIA props of the listbox element. */
-    listboxAriaProps: ListboxAriaProps;
-    /** Values that are currently selected. */
-    selectedValues: string[];
-    /** DOM id of the active option (`aria-activedescendant`). */
-    activeOptionId?: string;
-    /** Type of the leading element, e.g. a checkbox for multi select. */
     leadingType?: LeadingType;
-    /** Additional details rendered as a sticky footer below the options. */
     optionDetails?: React.ReactNode;
-    /** Called with the value of the clicked option. */
-    onOptionClick: (value: string) => void;
 }
-/**
- * Props of the ComboBox component.
- *
- * Extends the deprecated `ComboBoxOptionsProps` so that consumers who built
- * their own prop types on top of it keep compiling.
- */
-export interface ComboBoxProps extends ComboBoxOptionsProps {
-    /** Additional CSS class name for the trigger field. */
+interface ComboBoxProps extends ComboBoxOptionsProps {
     className?: string;
-    /** Name attribute for the input field. */
-    name?: string;
-    /**
-     * ID attribute for the input field.
-     *
-     * @deprecated The trigger generates its own ids for the ARIA wiring; `id` is
-     * forwarded to the underlying input untouched and no longer used internally.
-     */
-    id?: string;
-    /** Headline text displayed in the mobile bottom sheet. */
     headline?: string;
-    /** Helper text displayed below the input field. */
     helperText?: string;
-    /** Label text for the input field. */
+    id?: string;
     label?: string;
-    /** Options to display, either flat or grouped. */
-    options: ComboBoxOptionsInput;
-    /** Whether the popover / bottom sheet is currently open. */
     isOpen: boolean;
-    /** State setter that controls the open state. */
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    /**
-     * Selected value: a string for single select, an array of strings when
-     * `multiple` is set.
-     *
-     * The array member is new in this version. Code that *reads* this prop back
-     * out of
-     * a props object has to narrow it (`Array.isArray(value)`).
-     */
-    value?: string | string[];
-    /** Allows selecting several options; combine with a checkbox `leadingType`. */
-    multiple?: boolean;
-    /** Called with the value of the selected (in multi select: toggled) option. */
-    onOptionItemClick?: (value: string) => void;
-    /** Called when the search input value changes. */
     onChange?: (value: string) => void;
-    /** Called when the user clicks outside of the component. */
+    onOptionItemClick?: (value: string) => void;
     onOutsideClick?: () => void;
-    /** Called when the trigger field is clicked. */
     onClick?: () => void;
-    /** Called when the bottom sheet has been closed. */
     onSheetClose?: () => void;
-    /** Placeholder text for the input field. */
     placeholder?: string;
-    /** Search pattern for input validation. */
     searchPattern?: string;
-    /** Text to display when there is no option to show. */
+    value?: string;
     noResultsText?: string;
-    /** Input mode for mobile keyboards. */
-    inputMode?: InputModesType;
-    /** Renders a search input inside the popover / bottom sheet. */
+    inputMode?: InputMode;
     withSearch?: boolean;
-    /** Enter opens the closed list. Disable it inside forms with implicit submit. */
-    openOnEnter?: boolean;
-    /** Whether the combobox is disabled. */
-    disabled?: boolean;
-    /** Disabled style plus shimmer animation while content is loading. */
-    loading?: boolean;
-    /** Type of the leading element of an option (icon, avatar, checkbox …). */
-    leadingType?: LeadingType;
-    /** Additional details rendered below the options. */
-    optionDetails?: React.ReactNode;
-    /** Theme configuration for the component. */
-    theme?: ThemeType;
-    /** Custom slot that replaces the standard options / no-results block. */
-    optionsSlot?: React.ReactNode;
-    /**
-     * Icon element displayed at the leading side of the trigger input.
-     *
-     * Deliberately `ReactNode`, not `ReactElement`: fragments, strings and
-     * conditional `false` have always been accepted here.
-     */
-    leadingIcon?: React.ReactNode;
-    /**
-     * Formats the selected values for the trigger field.
-     * Defaults to the labels of the selected options joined by a comma.
-     */
-    renderValue?: (labels: string[]) => string;
 }
+interface ComboBoxOptionProps extends MenuItemProps {
+    key?: string;
+}
+export { ComboBoxProps, ComboBoxOptionProps, ComboBoxOptionsProps };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@pixum/combobox",
-  "version": "5.10.9",
+  "version": "7.0.0-alpha.0",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "license": "UNLICENSED",
   "peerDependencies": {
-    "@pixum/bottom-sheet": "4.9.0",
-    "@pixum/menu": "4.4.2",
-    "@pixum/menu-item": "3.4.3",
-    "@pixum/text": "3.7.0",
-    "@pixum/theme-provider": "^6.0.0",
-    "@pixum/web-input": "2.5.6"
+    "@pixum/bottom-sheet": "^1.4.0",
+    "@pixum/button": "^1.15.0",
+    "@pixum/menu": "^2.1.0",
+    "@pixum/menu-item": "^0.11.0",
+    "@pixum/svg-icon": "^1.23.0",
+    "@pixum/text": "^1.2.2",
+    "@pixum/user-input": "^0.12.2"
   },
   "files": [
     "lib"
@@ -18,5 +19,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "2d1168fb9cce7bcc670b48681705144522dabcfe"
+  "gitHead": "b0af49dd6fe46f93f5c4bf7c7d3fc86bd32408eb"
 }

package/lib/ComboBox.module.css

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

@@ -1 +0,0 @@
-export {};

package/lib/ComboBox.test.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render } from '@testing-library/react';
-import { ComboBox } from './ComboBox';
-// jsdom sets window.innerWidth to 0, so useIsDesktopScreenWidth returns false.
-// When !isDesktop, showSelectField is always true — SelectInput always renders.
-const baseProps = {
-    isOpen: false,
-    setIsOpen: jest.fn(),
-    options: [],
-    label: 'Test',
-};
-describe('ComboBox disabled', () => {
-    it('does not fire onClick when disabled', () => {
-        const onClick = jest.fn();
-        const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { disabled: true, onClick: onClick })));
-        fireEvent.click(container.querySelector('.input-inner-container'));
-        expect(onClick).not.toHaveBeenCalled();
-    });
-    it('passes disabled to the trigger input', () => {
-        const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { disabled: true, value: "some option" })));
-        expect(container.querySelector('input')).toBeDisabled();
-    });
-});
-describe('ComboBox enabled', () => {
-    it('fires onClick when not disabled', () => {
-        const onClick = jest.fn();
-        const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { onClick: onClick })));
-        fireEvent.click(container.querySelector('.input-inner-container'));
-        expect(onClick).toHaveBeenCalledTimes(1);
-    });
-});
-//# sourceMappingURL=ComboBox.test.js.map

package/lib/ComboBox.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox.test.js","sourceRoot":"","sources":["../src/ComboBox.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,+EAA+E;AAC/E,gFAAgF;AAEhF,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;IACpB,OAAO,EAAE,EAA+B;IACxC,KAAK,EAAE,MAAM;CACd,CAAA;AAED,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;QACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,QAAQ,QAAC,OAAO,EAAE,OAAO,IAAI,CACvD,CAAA;QACD,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC,CAAA;QACnE,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,QAAQ,QAAC,KAAK,EAAC,aAAa,IAAG,CACzD,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,CAAA;IACzD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;QACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,OAAO,EAAE,OAAO,IAAI,CAC9C,CAAA;QACD,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC,CAAA;QACnE,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/lib/hooks/index.d.ts

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

package/lib/hooks/index.js

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

package/lib/hooks/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,60 +0,0 @@
-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;

package/lib/hooks/useComboBox.js

@@ -1,226 +0,0 @@
-'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

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

package/lib/hooks/useComboBoxFocus.d.ts

@@ -1,35 +0,0 @@
-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;