import type { JSX } from "@solidjs/web"; import { type Group } from "../../combobox/internals/resolve-value-label.js"; import { type ComboboxRootChangeEventDetails, type ComboboxRootChangeEventReason, type ComboboxRootHighlightEventDetails, type ComboboxRootHighlightEventReason } from "../../combobox/root/combobox-root-context.js"; import { type MaybeAccessor } from "../../internals/maybe-accessor.js"; export type AutocompleteRootChangeEventReason = ComboboxRootChangeEventReason; export type AutocompleteRootChangeEventDetails = ComboboxRootChangeEventDetails; export type AutocompleteRootHighlightEventReason = ComboboxRootHighlightEventReason; export type AutocompleteRootHighlightEventDetails = ComboboxRootHighlightEventDetails; import type { AutocompleteMode } from "../create-autocomplete.js"; export type { AutocompleteMode }; export interface AutocompleteRootActions { /** Force-unmount the autocomplete popup immediately. */ unmount: () => void; } export interface AutocompleteRootProps { /** * Items to filter. Either a flat array or an array of groups with * `items`. When omitted, consumers render ``s * manually and the composite-list path takes over. */ items?: readonly Value[] | readonly Group[] | undefined; /** * Custom filter function. Pass `null` to disable filtering (show * everything). When omitted, uses `Intl.Collator`-backed * case/diacritics-insensitive "contains". */ filter?: ((item: Value, query: string, itemToStringLabel?: (item: Value) => string) => boolean) | null | undefined; /** Locale for the default `Intl.Collator`. */ locale?: Intl.LocalesArgument | undefined; /** * Controlled value — the input text (autocomplete has no separate * selection; the value IS the input text). When provided (resolved * value not `undefined` — the empty string IS controlled), the consumer * owns the state — pair with {@link onValueChange}. When omitted, the * autocomplete manages its own value (seeded from {@link defaultValue}). */ value?: MaybeAccessor; /** * Initial value when uncontrolled. Read once at mount. * @default "" */ defaultValue?: MaybeAccessor; /** * Fires when the input value changes. Mirroring React Base UI's * `AutocompleteRoot`, the uncontrolled value is written BEFORE this * callback fires — `eventDetails.cancel()` does not roll it back * (unlike the `open` axis). */ onValueChange?: ((value: string, details: AutocompleteRootChangeEventDetails) => void) | undefined; /** * Controlled open state. When provided (resolved value not * `undefined`), the consumer owns the state — pair with * {@link onOpenChange}. When omitted, the autocomplete 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 autocomplete's own (uncontrolled) state unchanged, * mirroring React Base UI; controlled consumers simply don't update * their signal. */ onOpenChange?: ((open: boolean, details: AutocompleteRootChangeEventDetails) => void) | undefined; /** Fires once the open/close transition has settled. */ onOpenChangeComplete?: ((open: boolean) => void) | undefined; onItemHighlighted?: ((value: Value | undefined, details: AutocompleteRootHighlightEventDetails) => void) | undefined; /** * Behaviour with respect to filtering and inline autocompletion. * @default "list" */ mode?: AutocompleteMode | undefined; autoHighlight?: boolean | "always" | undefined; /** @default true */ highlightItemOnHover?: boolean | undefined; /** @default false — autocomplete defaults to opening on typing only. */ openOnInputClick?: boolean | undefined; /** @default true */ loopFocus?: boolean | undefined; /** @default false */ keepHighlight?: boolean | undefined; /** @default false */ modal?: boolean | undefined; disabled?: boolean | undefined; readOnly?: boolean | undefined; required?: boolean | undefined; itemToStringValue?: ((item: Value) => string) | undefined; isItemEqualToValue?: ((item: Value, value: Value) => boolean) | undefined; id?: string | undefined; actionsRef?: ((actions: AutocompleteRootActions | null) => void) | { current: AutocompleteRootActions | null; } | undefined; children?: JSX.Element; } /** * Groups all parts of the autocomplete. Doesn't render its own HTML element. */ export declare function AutocompleteRoot(props: AutocompleteRootProps): JSX.Element; //# sourceMappingURL=autocomplete-root.d.ts.map