Reference machines

combobox

import { … } from '@kumiki/machines/combobox'

interface 3 type 5 function 1

interface Interfaces 3

interface combobox/index.ts · L70

# ComboboxContext

Type Parameters

T

Members

error: error: Error | null
Most recent fetcher error, if any.
filtered: filtered: readonly T[]
Filtered subset shown in the listbox.
highlightedId: highlightedId: string | null
Id of the currently highlighted option, or null.
options: options: readonly T[]
Source list of options (sync mode). For async, mirrors the latest fetch.
pageSize: pageSize: number
Page step for PageUp / PageDown navigation.
query: query: string
Current input string.
status: status: ComboboxStatus
Async fetch lifecycle. Always 'idle' in sync mode.
token: token: number
Monotonic token incremented on every INPUT.CHANGE; used to drop stale fetches.
value: value: T | null
Currently selected option, or null.

interface combobox/index.ts · L27

# ComboboxOption

Structural shape an option must satisfy. Most consumers pass typed domain objects (User, Product, …) — id and label are the floor; everything else propagates as T.

Members

disabled?: readonly optional disabled?: boolean
id: readonly id: string
label: readonly label: string

interface combobox/index.ts · L99

# CreateComboboxInput

Type Parameters

T

Members

defaultQuery?: optional defaultQuery?: string
defaultValue?: optional defaultValue?: T | null
disabled?: optional disabled?: boolean
filter?: optional filter?: (options, query) => readonly T[]
Optional sync filter. Receives (options, query) and returns a subset. Default: case-insensitive label substring match.

###### Parameters

###### options

readonly T[]

###### query

string

###### Returns

readonly T[]
options?: optional options?: readonly T[]
pageSize?: optional pageSize?: number
Page step for PageUp/PageDown. Defaults to 10.

type Type Aliases 5

type combobox/index.ts · L40

# ComboboxEvent

ComboboxEvent<T> = { type: "INPUT.FOCUS"; } | { type: "INPUT.BLUR"; } | { type: "INPUT.CHANGE"; value: string; } | { type: "INPUT.ESCAPE"; } | { type: "INPUT.ENTER"; } | { direction: NavigateDirection; type: "INPUT.NAVIGATE"; } | { id: string; type: "OPTION.HIGHLIGHT"; } | { option: T; type: "OPTION.SELECT"; } | { type: "TRIGGER.CLICK"; } | { type: "OPEN"; } | { type: "CLOSE"; } | { options: ReadonlyArray<T>; token: number; type: "FETCH.RESOLVE"; } | { error: Error; token: number; type: "FETCH.REJECT"; } | { token: number; type: "FETCH.LOADING"; } | { type: "SET.VALUE"; value: T | null; } | { type: "RESET"; } | { type: "DISABLE"; } | { type: "ENABLE"; }

All events the Combobox machine can receive.

Type Parameters

T

type combobox/index.ts · L93

# ComboboxMachine

ComboboxMachine<T> = Machine<ComboboxContext<T>, ComboboxEvent<T>, ComboboxState>

Type Parameters

T

type combobox/index.ts · L91

# ComboboxState

ComboboxState = "idle" | "open" | "disabled"

type combobox/index.ts · L34

# ComboboxStatus

ComboboxStatus = "idle" | "loading" | "error"

Async fetch lifecycle.

type combobox/index.ts · L37

# NavigateDirection

Keyboard navigation directions.

function Functions 1

function combobox/index.ts · L180

# createComboboxMachine ( )

createComboboxMachine<T>(input?): ComboboxMachine<T>

Construct a fresh Combobox machine for option type T.

Type Parameters

T

Parameters

input?: CreateComboboxInput<T> = {}

Returns

ComboboxMachine<T>