Docs API reference UI machinesmenubar

menubar machine

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

@grassroot/ui-machines/menubar

Package

19 exports

View source packages/ui-machines/src/menubar/index.ts

Install npm i @grassroot/ui-machines

Service example

menubar.tsts

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

Exports

MenubarActionable

interface

MenubarActionablets

interface MenubarActionable {
  readonly id: string;
  readonly disabled?: boolean;
  readonly textValue?: string;
}

Name

Kind

Type

Requirement

disabled

property

boolean

optional

id

property

string

required

textValue

property

string

optional

Name: disabled
Kind: property
Type: boolean
Requirement: optional

Name: id
Kind: property
Type: string
Requirement: required

Name: textValue
Kind: property
Type: string
Requirement: optional

MenubarChangeReason

type

MenubarChangeReasonts

type MenubarChangeReason = MenubarOpenReason | MenubarCloseReason;

MenubarCloseReason

type

MenubarCloseReasonts

type MenubarCloseReason = "escape" | "outside-click" | "select" | "trigger" | "programmatic";

MenubarCommand

type

MenubarCommandts

type MenubarCommand = CommandObject & ({
  readonly type: "VALUE_CHANGE_REQUEST";
  readonly value: string | null;
  readonly reason: MenubarChangeReason;
} | {
  readonly type: "SELECT_ITEM";
  readonly menuValue: string;
  readonly id: string;
} | {
  readonly type: "FOCUS_TRIGGER";
  readonly key: string;
});

MenubarContext

type

MenubarContextts

type MenubarContext = {
  readonly mode: "controlled" | "uncontrolled";
  /** The one committed open-menu binding; null means all menus are closed. */
  readonly value: string | null;
  /** Original index into the current menu's item list. */
  readonly highlightedIndex: number;
  /** Roving-focus target among top-level triggers. */
  readonly focusedValue: string | null;
};

Name

Kind

Type

Requirement

Description

focusedValue

property

string | null

required

Roving-focus target among top-level triggers.

highlightedIndex

property

number

required

Original index into the current menu's item list.

mode

property

"controlled" | "uncontrolled"

required

—

value

property

string | null

required

The one committed open-menu binding; null means all menus are closed.

Name: focusedValue
Kind: property
Type: string | null
Requirement: required
Description: Roving-focus target among top-level triggers.

Name: highlightedIndex
Kind: property
Type: number
Requirement: required
Description: Original index into the current menu's item list.

Name: mode
Kind: property
Type: "controlled" | "uncontrolled"
Requirement: required
Description: —

Name: value
Kind: property
Type: string | null
Requirement: required
Description: The one committed open-menu binding; null means all menus are closed.

MenubarDiagnosticCodes

value

MenubarDiagnosticCodests

export declare const MenubarDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

MenubarDivider

interface

MenubarDividerts

interface MenubarDivider {
  readonly divider: true;
}

Name

Kind

Type

Requirement

divider

property

true

required

Name: divider
Kind: property
Type: true
Requirement: required

MenubarEvent

type

MenubarEventts

type MenubarEvent = {
  readonly type: "OPEN_MENU";
  readonly value: string;
  readonly reason: MenubarOpenReason;
} | {
  readonly type: "TOGGLE_MENU";
  readonly value: string;
  readonly reason: "trigger";
} | {
  readonly type: "CLOSE";
  readonly reason: MenubarCloseReason;
} | {
  readonly type: "MOVE_TRIGGER";
  readonly direction: -1 | 1;
} | {
  readonly type: "MOVE_ITEM";
  readonly direction: -1 | 1;
} | {
  readonly type: "HIGHLIGHT";
  readonly index: number;
} | {
  readonly type: "SELECT";
} | {
  readonly type: "FOCUS_TRIGGER";
  readonly value: string;
};

MenubarInput

type

MenubarInputts

type MenubarInput = {
  readonly menus: readonly MenubarMenu[];
  /** Controlled open-menu value. Defining it fixes controlled mode at start. */
  readonly value?: string | null;
  /** Uncontrolled initial open-menu value. */
  readonly defaultValue?: string | null;
};

Name

Kind

Type

Requirement

Description

defaultValue

property

string | null

optional

Uncontrolled initial open-menu value.

menus

property

readonly MenubarMenu[]

required

—

value

property

string | null

optional

Controlled open-menu value. Defining it fixes controlled mode at start.

Name: defaultValue
Kind: property
Type: string | null
Requirement: optional
Description: Uncontrolled initial open-menu value.

Name: menus
Kind: property
Type: readonly MenubarMenu[]
Requirement: required
Description: —

Name: value
Kind: property
Type: string | null
Requirement: optional
Description: Controlled open-menu value. Defining it fixes controlled mode at start.

MenubarItem

type

MenubarItemts

type MenubarItem = MenubarActionable | MenubarDivider;

menubarMachine

value

menubarMachinets

export declare const menubarMachine: MenubarMachine;

MenubarMachine

type

MenubarMachinets

type MenubarMachine = Machine<MenubarInput, MenubarStateValue, MenubarContext, MenubarEvent, MenubarCommand>;

MenubarMenu

interface

MenubarMenuts

interface MenubarMenu {
  readonly value: string;
  readonly items: readonly MenubarItem[];
}

Name

Kind

Type

Requirement

items

property

readonly MenubarItem[]

required

value

property

string

required

Name: items
Kind: property
Type: readonly MenubarItem[]
Requirement: required

Name: value
Kind: property
Type: string
Requirement: required

menubarNavigableIndices

function

Equivalent to the frozen `menubarNavigableIndices` helper.

menubarNavigableIndicests

declare function menubarNavigableIndices(items: readonly MenubarItem[]): readonly number[];

Name

Kind

Type

Requirement

items

parameter

readonly MenubarItem[]

required

return

return value

readonly number[]

n/a

Name: items
Kind: parameter
Type: readonly MenubarItem[]
Requirement: required

Name: return
Kind: return value
Type: readonly number[]
Requirement: n/a

MenubarOpenReason

type

MenubarOpenReasonts

type MenubarOpenReason = "trigger" | "pointer" | "keyboard" | "programmatic";

menubarReplaySequence

value

menubarReplaySequencets

export declare const menubarReplaySequence: readonly MenubarEvent[];

menubarSelectors

value

menubarSelectorsts

export declare const menubarSelectors: {
  value: (snapshot: MenubarSnapshot) => string | null;
  open: (snapshot: MenubarSnapshot) => boolean;
  highlightedIndex: (snapshot: MenubarSnapshot) => number;
  focusedValue: (snapshot: MenubarSnapshot) => string | null;
  isOpen: (snapshot: MenubarSnapshot, value: string) => boolean;
};

Name

Kind

Type

Requirement

focusedValue

property

(snapshot: MenubarSnapshot) => string | null

required

highlightedIndex

property

(snapshot: MenubarSnapshot) => number

required

isOpen

property

(snapshot: MenubarSnapshot, value: string) => boolean

required

open

property

(snapshot: MenubarSnapshot) => boolean

required

value

property

(snapshot: MenubarSnapshot) => string | null

required

Name: focusedValue
Kind: property
Type: (snapshot: MenubarSnapshot) => string | null
Requirement: required

Name: highlightedIndex
Kind: property
Type: (snapshot: MenubarSnapshot) => number
Requirement: required

Name: isOpen
Kind: property
Type: (snapshot: MenubarSnapshot, value: string) => boolean
Requirement: required

Name: open
Kind: property
Type: (snapshot: MenubarSnapshot) => boolean
Requirement: required

Name: value
Kind: property
Type: (snapshot: MenubarSnapshot) => string | null
Requirement: required

MenubarSnapshot

type

MenubarSnapshotts

type MenubarSnapshot = Snapshot<MenubarStateValue, MenubarContext>;

MenubarStateValue

type

MenubarStateValuets

type MenubarStateValue = "ready";

Service example

Exports

Related references