import type { JSX } from "@solidjs/web"; import { type MaybeAccessor } from "../../internals/maybe-accessor.js"; import { type Group } from "../internals/resolve-value-label.js"; import { type ComboboxRootChangeEventDetails, type ComboboxRootChangeEventReason, type ComboboxRootHighlightEventDetails, type ComboboxRootHighlightEventReason } from "./combobox-root-context.js"; export type { ComboboxRootChangeEventDetails, ComboboxRootChangeEventReason, ComboboxRootHighlightEventDetails, ComboboxRootHighlightEventReason, }; import type { ComboboxSelectionMode } from "../create-combobox.js"; export type { ComboboxSelectionMode }; export interface ComboboxRootActions { /** Force-unmount the combobox popup immediately. */ unmount: () => void; } export interface ComboboxRootProps { /** * Items to filter. When provided, `` filters them * against the current input value using the active filter. When * omitted, consumers must render `` children manually * — typeahead still works via labels registered through the * composite list. */ items?: readonly Value[] | readonly Group[] | undefined; /** * Custom filter function. Receives `(item, query, itemToStringLabel)` * and returns a boolean. Pass `null` to render every item * unfiltered. When omitted, uses an `Intl.Collator`-backed * case/diacritics-insensitive "contains" filter. */ filter?: ((item: Value, query: string, itemToStringLabel?: (item: Value) => string) => boolean) | null | undefined; /** Locale for the default `Intl.Collator`. */ locale?: Intl.LocalesArgument | undefined; /** * Controlled selected value. When provided (resolved value not * `undefined` — `null` IS controlled, meaning "cleared"), the consumer * owns the state — pair with {@link onValueChange}. When omitted, the * combobox manages its own selected value (seeded from * {@link defaultValue}). In multi-select mode pass an array. */ value?: MaybeAccessor; /** * Initial selected value when uncontrolled. Read once at mount. * @default null (normalized to `[]` in multi-select mode) */ defaultValue?: MaybeAccessor; /** * Fires on every selection request. Calling `eventDetails.cancel()` * keeps the combobox's own (uncontrolled) value unchanged, mirroring * React Base UI; controlled consumers simply don't update their signal. */ onValueChange?: ((value: Value | Value[] | null, details: ComboboxRootChangeEventDetails) => void) | undefined; /** * When `true`, the combobox accepts multiple selections (chips). Pairs * with an array-valued `value` / `defaultValue`. When omitted or `false` * the combobox is single-select. * @default false */ multiple?: boolean | undefined; /** * Identifies the field when submitted in a form. Threaded into the * hidden input(s) generated for multi-select mode. */ name?: string | undefined; /** Identifies the owning form for the hidden submission inputs. */ form?: string | undefined; /** * Controlled input value. When provided (resolved value not * `undefined` — the empty string IS controlled), the consumer owns the * state — pair with {@link onInputValueChange}. When omitted, the * combobox manages its own input value (seeded from * {@link defaultInputValue}, else — in single-select mode — from the * initial selected value's label, mirroring React Base UI). */ inputValue?: MaybeAccessor; /** * Initial input value when uncontrolled. Read once at mount. * @default "" (single-select: the initial selected value's label) */ defaultInputValue?: MaybeAccessor; /** * Fires on every input-value change request. Calling * `eventDetails.cancel()` keeps the combobox's own (uncontrolled) input * value unchanged, mirroring React Base UI; controlled consumers simply * don't update their signal. */ onInputValueChange?: ((value: string, details: ComboboxRootChangeEventDetails) => void) | undefined; /** * Controlled open state. When provided (resolved value not * `undefined`), the consumer owns the state — pair with * {@link onOpenChange}. When omitted, the combobox manages its own open * state (seeded from {@link defaultOpen}). */ open?: MaybeAccessor; /** * Initial open state when uncontrolled. Read once at mount. * @default false */ defaultOpen?: MaybeAccessor; /** * Fires on every open/close request. Calling `eventDetails.cancel()` * keeps the combobox's own (uncontrolled) state unchanged, mirroring * React Base UI; controlled consumers simply don't update their signal. */ onOpenChange?: ((open: boolean, details: ComboboxRootChangeEventDetails) => void) | undefined; /** Fires once the open/close transition has settled. */ onOpenChangeComplete?: ((open: boolean) => void) | undefined; /** Fires when an item gets / loses highlight. */ onItemHighlighted?: ((value: Value | undefined, details: ComboboxRootHighlightEventDetails) => void) | undefined; /** * Selection mode. `"single"` (default) = single selection; `"none"` = * free-text autocomplete (the input value is the source of truth, * items just drive the dropdown). */ selectionMode?: ComboboxSelectionMode | undefined; /** When `true`, the first matching item is highlighted on filter. */ autoHighlight?: boolean | "always" | undefined; /** Whether pointer-over items highlights them. @default true */ highlightItemOnHover?: boolean | undefined; /** Whether arrow-key navigation loops at list ends. @default true */ loopFocus?: boolean | undefined; /** Whether clicking the input opens the popup. @default true */ openOnInputClick?: boolean | undefined; /** Whether the combobox is disabled. */ disabled?: boolean | undefined; /** Whether the combobox is read-only. */ readOnly?: boolean | undefined; /** Whether the combobox is required. */ required?: boolean | undefined; /** Whether the popup is modal. @default false */ modal?: boolean | undefined; /** * Whether list items are presented in a grid layout. * * **Solid port scope:** accepted at the prop boundary and * threaded through the root context + input's `aria-haspopup="grid"`. * Grid-specific keyboard navigation (multi-column traversal via * `` + `cols > 1` in `useListNavigation`) is not yet * wired — the list still navigates as a flat 1-D listbox. `` * is not ported. * @default false */ grid?: boolean | undefined; /** * Whether the items are externally virtualized (e.g. TanStack Virtual). * When `true`, the list indices are consumer-managed and item * registrations are kept flat even as DOM elements come and go. * * **Solid port scope:** accepted at the prop boundary and * threaded through the root context. The React `` has * virtualization-aware index tracking that avoids stale refs; the * Solid port's `` observes DOM mutations for reordering * but does not implement the virtualized "stable index override" path. * Consumers should pass an explicit `index` prop on each * `` until that lands. * @default false */ virtualized?: boolean | undefined; /** * When `selectionMode: "none"` and `submitOnItemClick` is `true`, clicking * an item submits the closest enclosing form via `form.requestSubmit()`. * @default false */ submitOnItemClick?: boolean | undefined; /** * When `true` (default) and `selectionMode: "single"` or `"none"`, pressing * an item writes its label into the input. Set to `false` to leave the * input value untouched on selection. * @default true */ fillInputOnItemPress?: boolean | undefined; /** Converts object item values to a string label for display / typeahead. */ itemToStringLabel?: ((item: Value) => string) | undefined; /** Converts object item values to a string for form submission. */ itemToStringValue?: ((item: Value) => string) | undefined; /** Custom item equality. */ isItemEqualToValue?: ((item: Value, value: Value) => boolean) | undefined; /** Optional id (flows to the input's aria-labelledby hook). */ id?: string | undefined; /** Imperative handle slot. */ actionsRef?: ((actions: ComboboxRootActions | null) => void) | { current: ComboboxRootActions | null; } | undefined; children?: JSX.Element; } /** * Groups all parts of the combobox. Doesn't render its own HTML element. */ export declare function ComboboxRoot(props: ComboboxRootProps): JSX.Element; //# sourceMappingURL=combobox-root.d.ts.map