- Name
defaultOpen- Kind
- property
- Type
boolean- Requirement
- optional
Docs/API reference/UI machines/dropdown-menu
dropdown-menu machine
The public state machine contract for @grassroot/ui-machines/dropdown-menu. The machine owns behaviour; the matching headless layer owns composition.
@grassroot/ui-machines/dropdown-menu
Package
View source
packages/ui-machines/src/dropdown-menu/index.ts
Service example
dropdown-menu.tsts
1
2
3
4
5
6
7
import { createService } from "@grassroot/statechart";import { dropdownMenuMachine } from "@grassroot/ui-machines/dropdown-menu"; const service = createService(dropdownMenuMachine, { input: {} });service.start();service.send({ type: "…" });service.stop();15 of 15
Exports
DeclarationView source
DropdownMenuChangeReasonts
type DropdownMenuChangeReason = DropdownMenuOpenReason | DropdownMenuCloseReason;DeclarationView source
DropdownMenuCloseReasonts
type DropdownMenuCloseReason = "escape" | "outside-click" | "select" | "programmatic";DropdownMenuCommand
typeDeclarationView source
DropdownMenuCommandts
type DropdownMenuCommand = (CommandObject & { readonly type: "OPEN_CHANGE_REQUEST"; readonly open: boolean; readonly reason: DropdownMenuChangeReason;}) | (CommandObject & { readonly type: "SELECT_ITEM"; readonly id: string;}) | ScheduleCommand<DropdownMenuEvent> | CancelCommand;DropdownMenuContext
typeDeclarationView source
DropdownMenuContextts
type DropdownMenuContext = MenuContext;DeclarationView source
DropdownMenuDiagnosticCodests
export declare const DropdownMenuDiagnosticCodes: readonly DiagnosticCatalogueEntry[];DropdownMenuEvent
typeDeclarationView source
DropdownMenuEventts
type DropdownMenuEvent = { readonly type: "TOGGLE"; readonly reason: "trigger";} | { readonly type: "OPEN"; readonly reason: DropdownMenuOpenReason; readonly highlight?: "first" | "last";} | { readonly type: "CLOSE"; readonly reason: DropdownMenuCloseReason;} | { readonly type: "MOVE"; readonly direction: -1 | 1;} | { readonly type: "HIGHLIGHT"; readonly index: number;} | { readonly type: "HOME";} | { readonly type: "END";} | { readonly type: "SELECT";} | { readonly type: "TYPEAHEAD"; readonly char: string;};DropdownMenuInput
typeDeclarationView source
DropdownMenuInputts
type DropdownMenuInput = { readonly open?: boolean; readonly defaultOpen?: boolean; readonly items: readonly DropdownMenuItem[]; readonly typeaheadTimeoutMs?: number;};Name
Kind
Type
Requirement
defaultOpenproperty
booleanoptional
itemsproperty
readonly DropdownMenuItem[]required
openproperty
booleanoptional
typeaheadTimeoutMsproperty
numberoptional
- Name
items- Kind
- property
- Type
readonly DropdownMenuItem[]- Requirement
- required
- Name
open- Kind
- property
- Type
boolean- Requirement
- optional
- Name
typeaheadTimeoutMs- Kind
- property
- Type
number- Requirement
- optional
DropdownMenuItem
interfaceDeclarationView source
DropdownMenuItemts
interface DropdownMenuItem { readonly id: string; readonly disabled?: boolean; readonly textValue?: string;}Name
Kind
Type
Requirement
disabledproperty
booleanoptional
idproperty
stringrequired
textValueproperty
stringoptional
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
id- Kind
- property
- Type
string- Requirement
- required
- Name
textValue- Kind
- property
- Type
string- Requirement
- optional
dropdownMenuMachine
valueDeclarationView source
dropdownMenuMachinets
export declare const dropdownMenuMachine: DropdownMenuMachine;DropdownMenuMachine
typeDeclarationView source
DropdownMenuMachinets
type DropdownMenuMachine = Machine<DropdownMenuInput, DropdownMenuStateValue, DropdownMenuContext, DropdownMenuEvent, DropdownMenuCommand>;DeclarationView source
DropdownMenuOpenReasonts
type DropdownMenuOpenReason = "trigger" | "programmatic";DeclarationView source
dropdownMenuReplaySequencets
export declare const dropdownMenuReplaySequence: readonly DropdownMenuEvent[];dropdownMenuSelectors
valueDeclarationView source
dropdownMenuSelectorsts
export declare const dropdownMenuSelectors: { open: (snapshot: DropdownMenuSnapshot) => boolean; highlightedIndex: (snapshot: DropdownMenuSnapshot) => number; typeaheadBuffer: (snapshot: DropdownMenuSnapshot) => string;};Name
Kind
Type
Requirement
highlightedIndexproperty
(snapshot: DropdownMenuSnapshot) => numberrequired
openproperty
(snapshot: DropdownMenuSnapshot) => booleanrequired
typeaheadBufferproperty
(snapshot: DropdownMenuSnapshot) => stringrequired
- Name
highlightedIndex- Kind
- property
- Type
(snapshot: DropdownMenuSnapshot) => number- Requirement
- required
- Name
open- Kind
- property
- Type
(snapshot: DropdownMenuSnapshot) => boolean- Requirement
- required
- Name
typeaheadBuffer- Kind
- property
- Type
(snapshot: DropdownMenuSnapshot) => string- Requirement
- required
DropdownMenuSnapshot
typeDeclarationView source
DropdownMenuSnapshotts
type DropdownMenuSnapshot = Snapshot<DropdownMenuStateValue, DropdownMenuContext>;DeclarationView source
DropdownMenuStateValuets
type DropdownMenuStateValue = "open" | "closed";