/** * Stage 4.6 port of Base UI React's `useTypeahead` hook. * * React source: * `base-ui/packages/react/src/floating-ui-react/hooks/useTypeahead.ts` * * Provides a matching callback that focuses / highlights a list item as * the user types. Typically paired with `useListNavigation`; the React * fork delivers this hook unchanged from upstream `@floating-ui/react`. * * ### React → Solid deviations * * 1. `useRef` → `MutableRef` (matches sibling hooks). Closed-over * `{ current }` containers hold the typeahead string, the last matched * index, and the previous-index snapshot. * * 2. `useStableCallback` → `createStableCallback` from * `src/internals/stable-callback.ts`. Used only where React stabilises * identity for effect deps / memo keys — here it stabilises the * event handlers so they can be captured in `reference` / `floating` * bags without identity churn. * * 3. `useIsoLayoutEffect` (with React single-callback + deps) → * `createRenderEffect`-backed `useIsoLayoutEffect(compute, apply)` in * split form. Tracked reads go in the `compute` factory; the * side-effect body runs in `apply`. We use `store.state.open` * inside `compute` to subscribe and `store.state.open` inside `apply` * for the sync read. * * 4. `useMemo` for `reference` / `floating` bags collapses to plain * object literals — Solid doesn't re-run component bodies, so the bag * identity is already stable for the lifetime of the call site. * * 5. Event handlers receive native events directly (no `.nativeEvent` * unwrap). * * 6. `MaybeAccessor` applies to the reactive option fields * (`activeIndex`, `selectedIndex`, `enabled`, `resetMs`) so consumers * that mount the hook once can still flip values later — same * convention as `useListNavigation`. Literal values also work. * * 7. Shadow-DOM-safe `contains()` from `src/internals/dom/contains.ts` * replaces raw `node.contains(target)`. * * ### Reason strings * * `useTypeahead` does not call `store.setOpen` — it only invokes * `onMatch(index)` and the `onTypingChange(isTyping)` callback. No * `REASONS.*` strings are emitted from this hook. Matches React 1:1. */ import { type MaybeAccessor } from "../../maybe-accessor.js"; import type { ElementProps, FloatingContext, FloatingRootContext, MutableRef } from "../types.js"; export interface UseTypeaheadProps { /** * A ref which contains an array of strings whose indices match the HTML * elements of the list. * @default empty list */ listRef: MutableRef>; /** * The index of the active (focused or highlighted) item in the list. * May be a literal or an accessor. * @default null */ activeIndex: MaybeAccessor; /** * Callback invoked with the matching index if found as the user types. */ onMatch?: ((index: number) => void) | undefined; /** * Optional list of item elements that correspond to `listRef` indices. * When an element exists for an index, typeahead skips it if it is * hidden via CSS (`display: none`). */ elementsRef?: MutableRef> | undefined; /** * Callback invoked with the typing state as the user types. */ onTypingChange?: ((isTyping: boolean) => void) | undefined; /** * Whether the Hook is enabled, including all internal Effects and * event handlers. * @default true */ enabled?: MaybeAccessor | undefined; /** * The number of milliseconds to wait before resetting the typed * string. * @default 750 */ resetMs?: MaybeAccessor | undefined; /** * The index of the selected item in the list, if available. * @default null */ selectedIndex?: MaybeAccessor | undefined; } /** * Provides a matching callback that can be used to focus an item as the * user types, often used in tandem with `useListNavigation()`. * @see https://floating-ui.com/docs/useTypeahead */ export declare function useTypeahead(context: FloatingRootContext | FloatingContext, props: UseTypeaheadProps): ElementProps; //# sourceMappingURL=use-typeahead.d.ts.map