- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
Docs/API reference/UI machines/context-menu
context-menu machine
The public state machine contract for @grassroot/ui-machines/context-menu. The machine owns behaviour; the matching headless layer owns composition.
@grassroot/ui-machines/context-menu
Package
View source
packages/ui-machines/src/context-menu/index.ts
Service example
context-menu.tsts
1
2
3
4
5
6
7
import { createService } from "@grassroot/statechart";import { contextMenuMachine } from "@grassroot/ui-machines/context-menu"; const service = createService(contextMenuMachine, { input: {} });service.start();service.send({ type: "…" });service.stop();18 of 18
Exports
ContextMenuActionable
interfaceDeclarationView source
ContextMenuActionablets
interface ContextMenuActionable { readonly id: string; readonly disabled?: boolean; readonly textValue?: string;}Name
Kind
Type
Requirement
disabledproperty
booleanoptional
idproperty
stringrequired
textValueproperty
stringoptional
- Name
id- Kind
- property
- Type
string- Requirement
- required
- Name
textValue- Kind
- property
- Type
string- Requirement
- optional
DeclarationView source
ContextMenuChangeReasonts
type ContextMenuChangeReason = ContextMenuOpenReason | ContextMenuCloseReason;DeclarationView source
ContextMenuCloseReasonts
type ContextMenuCloseReason = "escape" | "outside-click" | "select" | "programmatic";ContextMenuCommand
typeDeclarationView source
ContextMenuCommandts
type ContextMenuCommand = (CommandObject & { readonly type: "OPEN_CHANGE_REQUEST"; readonly open: boolean; readonly reason: ContextMenuChangeReason;}) | (CommandObject & { readonly type: "SELECT_ITEM"; readonly id: string;}) | ScheduleCommand<ContextMenuEvent> | CancelCommand;ContextMenuContext
typeDeclarationView source
ContextMenuContextts
type ContextMenuContext = { readonly mode: "controlled" | "uncontrolled"; readonly position: ContextMenuPosition | null; /** Original item index. Divider gaps are retained. */ readonly highlightedIndex: number; readonly typeaheadBuffer: string;};Name
Kind
Type
Requirement
Description
highlightedIndexproperty
numberrequired
Original item index. Divider gaps are retained.
modeproperty
"controlled" | "uncontrolled"required
—
positionproperty
ContextMenuPosition | nullrequired
—
typeaheadBufferproperty
stringrequired
—
- Name
highlightedIndex- Kind
- property
- Type
number- Requirement
- required
- Description
- Original item index. Divider gaps are retained.
- Name
mode- Kind
- property
- Type
"controlled" | "uncontrolled"- Requirement
- required
- Description
- —
- Name
position- Kind
- property
- Type
ContextMenuPosition | null- Requirement
- required
- Description
- —
- Name
typeaheadBuffer- Kind
- property
- Type
string- Requirement
- required
- Description
- —
DeclarationView source
ContextMenuDiagnosticCodests
export declare const ContextMenuDiagnosticCodes: readonly DiagnosticCatalogueEntry[];ContextMenuDivider
interfaceDeclarationView source
ContextMenuDividerts
interface ContextMenuDivider { readonly divider: true;}Name
Kind
Type
Requirement
dividerproperty
truerequired
- Name
divider- Kind
- property
- Type
true- Requirement
- required
ContextMenuEvent
typeDeclarationView source
ContextMenuEventts
type ContextMenuEvent = { readonly type: "OPEN_AT"; readonly position: ContextMenuPosition; readonly reason: ContextMenuOpenReason;} | { readonly type: "OPEN"; readonly reason: "programmatic";} | { readonly type: "CLOSE"; readonly reason: ContextMenuCloseReason;} | { readonly type: "MOVE"; readonly direction: -1 | 1;} | { readonly type: "HIGHLIGHT"; readonly index: number;} | { readonly type: "SELECT";} | { readonly type: "TYPEAHEAD"; readonly char: string;};ContextMenuInput
typeDeclarationView source
ContextMenuInputts
type ContextMenuInput = { /** Controlled open state. Defining it fixes controlled mode at first start. */ readonly open?: boolean; /** Uncontrolled initial open state. */ readonly defaultOpen?: boolean; /** Position used by defaultOpen or programmatic OPEN when no pointer exists. */ readonly defaultPosition?: ContextMenuPosition; /** The original entry list, including divider rows. */ readonly items: readonly ContextMenuItem[]; readonly typeaheadTimeoutMs?: number;};Name
Kind
Type
Requirement
Description
defaultOpenproperty
booleanoptional
Uncontrolled initial open state.
defaultPositionproperty
ContextMenuPositionoptional
Position used by defaultOpen or programmatic OPEN when no pointer exists.
itemsproperty
readonly ContextMenuItem[]required
The original entry list, including divider rows.
openproperty
booleanoptional
Controlled open state. Defining it fixes controlled mode at first start.
typeaheadTimeoutMsproperty
numberoptional
—
- Name
defaultOpen- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- Uncontrolled initial open state.
- Name
defaultPosition- Kind
- property
- Type
ContextMenuPosition- Requirement
- optional
- Description
- Position used by defaultOpen or programmatic OPEN when no pointer exists.
- Name
items- Kind
- property
- Type
readonly ContextMenuItem[]- Requirement
- required
- Description
- The original entry list, including divider rows.
- Name
open- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- Controlled open state. Defining it fixes controlled mode at first start.
- Name
typeaheadTimeoutMs- Kind
- property
- Type
number- Requirement
- optional
- Description
- —
ContextMenuItem
typeDeclarationView source
ContextMenuItemts
type ContextMenuItem = ContextMenuActionable | ContextMenuDivider;contextMenuMachine
valueDeclarationView source
contextMenuMachinets
export declare const contextMenuMachine: ContextMenuMachine;ContextMenuMachine
typeDeclarationView source
ContextMenuMachinets
type ContextMenuMachine = Machine<ContextMenuInput, ContextMenuStateValue, ContextMenuContext, ContextMenuEvent, ContextMenuCommand>;DeclarationView source
ContextMenuOpenReasonts
type ContextMenuOpenReason = "pointer" | "programmatic";ContextMenuPosition
typeDeclarationView source
ContextMenuPositionts
type ContextMenuPosition = { readonly x: number; readonly y: number;};Name
Kind
Type
Requirement
xproperty
numberrequired
yproperty
numberrequired
- Name
x- Kind
- property
- Type
number- Requirement
- required
- Name
y- Kind
- property
- Type
number- Requirement
- required
DeclarationView source
contextMenuReplaySequencets
export declare const contextMenuReplaySequence: readonly ContextMenuEvent[];contextMenuSelectors
valueDeclarationView source
contextMenuSelectorsts
export declare const contextMenuSelectors: { open: (snapshot: ContextMenuSnapshot) => boolean; position: (snapshot: ContextMenuSnapshot) => ContextMenuPosition | null; highlightedIndex: (snapshot: ContextMenuSnapshot) => number; typeaheadBuffer: (snapshot: ContextMenuSnapshot) => string;};Name
Kind
Type
Requirement
highlightedIndexproperty
(snapshot: ContextMenuSnapshot) => numberrequired
openproperty
(snapshot: ContextMenuSnapshot) => booleanrequired
positionproperty
(snapshot: ContextMenuSnapshot) => ContextMenuPosition | nullrequired
typeaheadBufferproperty
(snapshot: ContextMenuSnapshot) => stringrequired
- Name
highlightedIndex- Kind
- property
- Type
(snapshot: ContextMenuSnapshot) => number- Requirement
- required
- Name
open- Kind
- property
- Type
(snapshot: ContextMenuSnapshot) => boolean- Requirement
- required
- Name
position- Kind
- property
- Type
(snapshot: ContextMenuSnapshot) => ContextMenuPosition | null- Requirement
- required
- Name
typeaheadBuffer- Kind
- property
- Type
(snapshot: ContextMenuSnapshot) => string- Requirement
- required
ContextMenuSnapshot
typeDeclarationView source
ContextMenuSnapshotts
type ContextMenuSnapshot = Snapshot<ContextMenuStateValue, ContextMenuContext>;DeclarationView source
ContextMenuStateValuets
type ContextMenuStateValue = "open" | "closed";