DocsAPI referenceUI machinesselect

select machine

The public state machine contract for @grassroot/ui-machines/select. The machine owns behaviour; the matching headless layer owns composition.

@grassroot/ui-machines/select

Package

22 exports
View source packages/ui-machines/src/select/index.ts

Service example

select.tsts
import { createService } from "@grassroot/statechart";
import { selectMachine } from "@grassroot/ui-machines/select";
const service = createService(selectMachine, { input: {} });
service.start();
service.send({ type: "…" });
service.stop();

Exports

DeclarationView source
LegacyHighlightEventts
type LegacyHighlightEvent = {
readonly type: typeof LEGACY_HIGHLIGHT_EVENT;
readonly index: number;
};
Name
Kind
Type
Requirement
index
property
number
required
type
property
typeof LEGACY_HIGHLIGHT_EVENT
required
Name
index
Kind
property
Type
number
Requirement
required
Name
type
Kind
property
Type
typeof LEGACY_HIGHLIGHT_EVENT
Requirement
required
DeclarationView source
LegacyHighlightTypets
type LegacyHighlightType = `ACT${"IVATE"}`;
DeclarationView source
normalizedOptionsts
declare function normalizedOptions(options: readonly OptionInput[]): readonly NormalizedOption[];
Name
Kind
Type
Requirement
options
parameter
readonly OptionInput[]
required
return
return value
readonly NormalizedOption[]
n/a
Name
options
Kind
parameter
Type
readonly OptionInput[]
Requirement
required
Name
return
Kind
return value
Type
readonly NormalizedOption[]
Requirement
n/a

normalizeOption

function
DeclarationView source
normalizeOptionts
declare function normalizeOption(option: OptionInput): NormalizedOption;
Name
Kind
Type
Requirement
option
parameter
OptionInput
required
return
return value
NormalizedOption
n/a
Name
option
Kind
parameter
Type
OptionInput
Requirement
required
Name
return
Kind
return value
Type
NormalizedOption
Requirement
n/a
DeclarationView source
SelectChangeReasonts
type SelectChangeReason = "pointer" | "keyboard" | "programmatic";
DeclarationView source
SelectCommandts
type SelectCommand<TValue extends SelectItemValue = string> = CommandObject & {
readonly type: "VALUE_CHANGE_REQUEST";
readonly value: SelectCommandValue<TValue>;
readonly reason: SelectChangeReason;
};
Name
Kind
Type
Requirement
reason
property
SelectChangeReason
required
type
property
string
required
value
property
SelectCommandValue<TValue>
required
Name
reason
Kind
property
Type
SelectChangeReason
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required
Name
value
Kind
property
Type
SelectCommandValue<TValue>
Requirement
required
DeclarationView source
SelectContextts
type SelectContext<TValue extends SelectItemValue = string> = {
/** Caller-facing selection representation. */
readonly value: SelectValue<TValue>;
/** Normalized identity used by the machine for all selection operations. */
readonly selectedIds: readonly string[];
readonly valueKind: SelectionKind;
/** Original options-list index; disabled options are skipped during movement. */
readonly highlightedIndex: number;
readonly mode: "controlled" | "uncontrolled";
};
Name
Kind
Type
Requirement
Description
highlightedIndex
property
number
required
Original options-list index; disabled options are skipped during movement.
mode
property
"controlled" | "uncontrolled"
required
selectedIds
property
readonly string[]
required
Normalized identity used by the machine for all selection operations.
value
property
SelectValue<TValue>
required
Caller-facing selection representation.
valueKind
property
SelectionKind
required
Name
highlightedIndex
Kind
property
Type
number
Requirement
required
Description
Original options-list index; disabled options are skipped during movement.
Name
mode
Kind
property
Type
"controlled" | "uncontrolled"
Requirement
required
Description
Name
selectedIds
Kind
property
Type
readonly string[]
Requirement
required
Description
Normalized identity used by the machine for all selection operations.
Name
value
Kind
property
Type
SelectValue<TValue>
Requirement
required
Description
Caller-facing selection representation.
Name
valueKind
Kind
property
Type
SelectionKind
Requirement
required
Description
DeclarationView source
SelectDiagnosticCodests
export declare const SelectDiagnosticCodes: readonly DiagnosticCatalogueEntry[];
DeclarationView source
SelectEventts
type SelectEvent<TValue extends SelectItemValue = string> = {
readonly type: "TOGGLE";
} | {
readonly type: "OPEN";
} | {
readonly type: "CLOSE";
} | {
readonly type: "MOVE";
readonly direction: -1 | 1;
} | {
readonly type: "SELECT";
readonly value: TValue;
readonly reason: SelectChangeReason;
} | {
readonly type: "HIGHLIGHT";
readonly index: number;
} | LegacyHighlightEvent | {
readonly type: "HOME";
} | {
readonly type: "END";
} | {
readonly type: "TYPEAHEAD";
readonly query: string;
} | {
readonly type: "RESET";
};
DeclarationView source
SelectInputts
type SelectInput<TValue extends SelectItemValue = string> = {
readonly options: readonly SelectOptionInput<TValue>[];
readonly selectionMode?: SelectSelectionMode;
/** Controlled committed value. Defining it fixes controlled mode at first start. */
readonly value?: SelectValue<TValue>;
/** Uncontrolled initial committed value. */
readonly defaultValue?: SelectValue<TValue>;
readonly defaultOpen?: boolean;
/** Versioned behavior: MOVE wraps past either end when true. Default false (legacy clamp). */
readonly loop?: boolean;
};
Name
Kind
Type
Requirement
Description
defaultOpen
property
boolean
optional
defaultValue
property
SelectValue<TValue>
optional
Uncontrolled initial committed value.
loop
property
boolean
optional
Versioned behavior: MOVE wraps past either end when true. Default false (legacy clamp).
options
property
readonly SelectOptionInput<TValue>[]
required
selectionMode
property
SelectSelectionMode
optional
value
property
SelectValue<TValue>
optional
Controlled committed value. Defining it fixes controlled mode at first start.
Name
defaultOpen
Kind
property
Type
boolean
Requirement
optional
Description
Name
defaultValue
Kind
property
Type
SelectValue<TValue>
Requirement
optional
Description
Uncontrolled initial committed value.
Name
loop
Kind
property
Type
boolean
Requirement
optional
Description
Versioned behavior: MOVE wraps past either end when true. Default false (legacy clamp).
Name
options
Kind
property
Type
readonly SelectOptionInput<TValue>[]
Requirement
required
Description
Name
selectionMode
Kind
property
Type
SelectSelectionMode
Requirement
optional
Description
Name
value
Kind
property
Type
SelectValue<TValue>
Requirement
optional
Description
Controlled committed value. Defining it fixes controlled mode at first start.
DeclarationView source
SelectItemValuets
type SelectItemValue = string;
DeclarationView source
selectMachinets
export declare const selectMachine: SelectMachine;
DeclarationView source
SelectMachinets
type SelectMachine<TValue extends SelectItemValue = string> = Machine<SelectInput<TValue>, SelectStateValue, SelectContext<TValue>, SelectEvent<TValue>, SelectCommand<TValue>>;

SelectOption

interface
DeclarationView source
SelectOptionts
interface SelectOption<TValue extends SelectItemValue = string> {
readonly id?: string;
readonly value: TValue;
readonly label: string;
readonly disabled?: boolean;
}
Name
Kind
Type
Requirement
disabled
property
boolean
optional
id
property
string
optional
label
property
string
required
value
property
TValue
required
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
label
Kind
property
Type
string
Requirement
required
Name
value
Kind
property
Type
TValue
Requirement
required
DeclarationView source
SelectOptionInputts
type SelectOptionInput<TValue extends SelectItemValue = string> = string | SelectOption<TValue>;
DeclarationView source
selectReplaySequencets
export declare const selectReplaySequence: readonly SelectEvent[];
DeclarationView source
SelectSelectionts
type SelectSelection<TValue extends SelectItemValue = string> = string | SelectOption<TValue>;
DeclarationView source
SelectSelectionModets
type SelectSelectionMode = "single" | "multiple";
DeclarationView source
selectSelectorsts
export declare const selectSelectors: {
open: (snapshot: SelectSnapshot) => boolean;
value: (snapshot: SelectSnapshot) => SelectValue<string>;
selectedIds: (snapshot: SelectSnapshot) => readonly string[];
highlightedIndex: (snapshot: SelectSnapshot) => number;
};
Name
Kind
Type
Requirement
highlightedIndex
property
(snapshot: SelectSnapshot) => number
required
open
property
(snapshot: SelectSnapshot) => boolean
required
selectedIds
property
(snapshot: SelectSnapshot) => readonly string[]
required
value
property
(snapshot: SelectSnapshot) => SelectValue<string>
required
Name
highlightedIndex
Kind
property
Type
(snapshot: SelectSnapshot) => number
Requirement
required
Name
open
Kind
property
Type
(snapshot: SelectSnapshot) => boolean
Requirement
required
Name
selectedIds
Kind
property
Type
(snapshot: SelectSnapshot) => readonly string[]
Requirement
required
Name
value
Kind
property
Type
(snapshot: SelectSnapshot) => SelectValue<string>
Requirement
required
DeclarationView source
SelectSnapshotts
type SelectSnapshot<TValue extends SelectItemValue = string> = Snapshot<SelectStateValue, SelectContext<TValue>>;
DeclarationView source
SelectStateValuets
type SelectStateValue = "open" | "closed";
DeclarationView source
SelectValuets
type SelectValue<TValue extends SelectItemValue = string> = readonly SelectSelection<TValue>[];