import type * as React from 'react'; import type { PrimitivePropsWithRef } from '../utils/primitive.cjs'; /** * Decides which items survive search: a predicate over `value` and `keywords`, or `'manual'` to let the consumer mount only matches; a numeric return also ranks (0 excludes, positive keeps, sorted descending). */ export type CommandFilter = 'manual' | ((itemValue: string, search: string, keywords?: readonly string[]) => boolean | number); /** @internal Per-item metadata stored in Command's internal ref map, keyed by item id. */ export interface CommandItemMeta { value: string; disabled?: boolean | undefined; onSelect?: ((value: string) => void) | undefined; keywords?: readonly string[] | undefined; } /** @internal Context shape distributed from Command to its parts. */ export interface CommandContextValue { listRef: React.RefObject; listId: string; activeId: string | null; /** Rank each currently-visible item's CSS `order` should carry when `filter` also scores it; `null` leaves order untouched. */ itemOrder: ReadonlyMap | null; setActiveId: (id: string | null) => void; itemMeta: Map; registerItem: (id: string) => void; unregisterItem: (id: string) => void; itemCount: number; search: string; setSearch: (search: string) => void; /** Whether an item with this value (and these aliases) survives the current search. */ matches: (itemValue: string, keywords?: readonly string[]) => boolean; /** Whether arrow navigation wraps around the ends of the item list. */ loop: boolean; /** Whether pointer-enter is allowed to move the highlight. */ disablePointerSelection: boolean; loading: boolean; } /** * One entry of a {@link CommandGroup}'s `items` — one derived `CommandItem` in the * palette's list. */ export interface CommandItem { /** Rendered as the item's label; also used as its value if `value` is not set. */ label: string; /** * Identifier passed to `onSelect` and matched as the highlighted item. * @default undefined — the item's `label`. */ value?: string | undefined; /** * Extra strings the filter matches against alongside `value`, so "Toggle theme" is findable by typing "dark mode". * @default undefined — the item matches on its value alone. */ keywords?: string[] | undefined; /** * Excludes the item from keyboard navigation, pointer highlighting and Enter selection. * @default false */ disabled?: boolean | undefined; /** * Called when this item is activated, before Command's own `onSelect`. Both fire. * @default undefined */ onSelect?: (() => void) | undefined; } /** One group of {@link CommandProps.groups}; a group with no `label` renders its items straight into the list. */ export interface CommandGroup { /** * Heading rendered above the group's items, and the group's accessible name. * @default undefined — the items are rendered ungrouped. */ label?: string | undefined; /** The group's commands. */ items: CommandItem[]; } /** Props for the {@link Command} root. */ export interface CommandProps extends Omit, 'defaultValue' | 'onSelect'> { /** * The palette's commands, rendered into the derived anatomy. Ignored when * `children` is given, which switches to full manual composition. * @default undefined — an empty palette. */ groups?: CommandGroup[] | undefined; /** * Placeholder for the derived search input. Doubles as the derived list's * accessible name, which a `role="listbox"` takes from nothing else here. * @default undefined — no placeholder, and an unnamed list. */ placeholder?: string | undefined; /** * Text for the derived `CommandEmpty` part, shown when the search has no matches * (not shown while `loading`). * @default undefined */ emptyMessage?: string | undefined; /** * Text for the derived `CommandLoading` part, announced by its live region while * `loading` is set. * @default undefined — no loading state is derived. */ loadingMessage?: string | undefined; /** * Fires with the command that was activated. The command's own `onSelect` * fires first; both run, and neither cancels the other. * @default undefined — no-op if omitted. */ onSelect?: ((item: CommandItem) => void) | undefined; /** * Renders item contents in place of the label; the element's role, id, * `data-*`, keyboard wiring and disabled state are still managed by the library. * @default undefined */ renderItem?: ((item: CommandItem) => React.ReactNode) | undefined; /** * Value of the highlighted item, for controlled usage. Pair with * `onValueChange`. * @default undefined — uncontrolled, the palette keeps the top match highlighted. */ value?: string | undefined; /** * Value of the initially highlighted item, for uncontrolled usage. * @default undefined — the first mounted item. */ defaultValue?: string | undefined; /** * Fires with the highlighted item's value whenever the highlight moves — * typing, arrow keys, or pointer. * @default undefined — no-op. */ onValueChange?: ((value: string) => void) | undefined; /** * Current search text, for controlled usage. `CommandInput` writes into this * as the user types. * @default undefined — uncontrolled, the root tracks the search internally. */ search?: string | undefined; /** * Initial search text, for uncontrolled usage. * @default '' */ defaultSearch?: string | undefined; /** * Fires with the new search text whenever `CommandInput` changes. * @default undefined — no-op. */ onSearchChange?: ((search: string) => void) | undefined; /** * Replaces the built-in matcher (case-insensitive substring on `value`), or `'manual'` to filter nothing. * @default undefined — the built-in matcher. */ filter?: CommandFilter | undefined; /** * Wraps arrow navigation around the ends: Arrow Down from the last item * highlights the first, Arrow Up from the first highlights the last. * @default false */ loop?: boolean | undefined; /** * Stops pointer-enter from moving the highlight. Use when the palette is * keyboard-driven but the pointer rests over the list — otherwise a motionless * mouse steals the highlight from arrow keys. * @default false */ disablePointerSelection?: boolean | undefined; /** * Marks results as in flight: `data-loading` on the root and * `aria-busy`/`data-loading` on `CommandList`, mounts `CommandLoading`, and * keeps `CommandEmpty` hidden so an in-flight search never flashes * "No results". * @default false */ loading?: boolean | undefined; } /** Props for {@link CommandInput}, the search/filter text field that drives virtual focus. */ export interface CommandInputProps extends PrimitivePropsWithRef<'input'> { } /** Props for {@link CommandList}, the listbox container for `CommandItem`s and `CommandGroup`s. */ export interface CommandListProps extends PrimitivePropsWithRef<'div'> { } /** Props for {@link CommandEmpty}, shown only when no `CommandItem` is currently mounted. */ export interface CommandEmptyProps extends PrimitivePropsWithRef<'div'> { } /** Props for {@link CommandGroup}, a labelled cluster of `CommandItem`s. */ export interface CommandGroupProps extends PrimitivePropsWithRef<'div'> { /** * Non-interactive heading rendered above the group's items. * @default undefined — no heading rendered. */ heading?: string | undefined; } /** Props for a single {@link CommandItem}. */ export interface CommandItemProps extends Omit, 'onSelect'> { /** Identifier passed to `onSelect` and used to match this item as the active/highlighted one. */ value: string; /** * Excludes the item from keyboard navigation, pointer highlighting, and Enter selection. * @default false */ disabled?: boolean | undefined; /** * Extra strings the root's filter matches against, alongside `value`. * @default undefined — the item matches on its `value` alone. */ keywords?: string[] | undefined; /** * Keeps the item mounted whatever the search, instead of unmounting when the filter rejects it. * @default false */ forceMount?: boolean | undefined; /** * Called with `value` when the item is activated (click, Enter, or pointer + Enter). * @default undefined — no-op if omitted. */ onSelect?: ((value: string) => void) | undefined; } /** Props for {@link CommandLoading}, shown only while the root's `loading` is set. */ export interface CommandLoadingProps extends PrimitivePropsWithRef<'div'> { } /** Props for {@link CommandSeparator}, a visual divider between items or groups. */ export interface CommandSeparatorProps extends PrimitivePropsWithRef<'div'> { }