grassroot
Install

DocsAPI referenceUI machinestoggle-button

toggle-button machine

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

@grassroot/ui-machines/toggle-button

Package

10 exports
View source packages/ui-machines/src/toggle-button/index.ts

Service example

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

Exports

ToggleButtonCommand

type
DeclarationView source
ToggleButtonCommandts
type ToggleButtonCommand = CommandObject & {
  readonly type: "PRESSED_CHANGE_REQUEST";
  readonly pressed: boolean;
  readonly reason: ToggleButtonReason;
};
Name
Kind
Type
Requirement
pressed
property
boolean
required
reason
property
ToggleButtonReason
required
type
property
string
required
Name
pressed
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
ToggleButtonReason
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required

ToggleButtonContext

type
DeclarationView source
ToggleButtonContextts
type ToggleButtonContext = {
  readonly mode: BindingMode;
  readonly pressed: boolean;
};
Name
Kind
Type
Requirement
mode
property
BindingMode
required
pressed
property
boolean
required
Name
mode
Kind
property
Type
BindingMode
Requirement
required
Name
pressed
Kind
property
Type
boolean
Requirement
required

ToggleButtonDiagnosticCodes

value
DeclarationView source
ToggleButtonDiagnosticCodests
export declare const ToggleButtonDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

ToggleButtonEvent

type
DeclarationView source
ToggleButtonEventts
type ToggleButtonEvent = {
  readonly type: "PRESS";
  readonly reason: ToggleButtonReason;
} | {
  readonly type: "RESET";
};

ToggleButtonInput

type
DeclarationView source
ToggleButtonInputts
type ToggleButtonInput = {
  readonly pressed?: boolean;
  readonly defaultPressed?: boolean;
  readonly disabled?: boolean;
};
Name
Kind
Type
Requirement
defaultPressed
property
boolean
optional
disabled
property
boolean
optional
pressed
property
boolean
optional
Name
defaultPressed
Kind
property
Type
boolean
Requirement
optional
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Name
pressed
Kind
property
Type
boolean
Requirement
optional

toggleButtonMachine

value
DeclarationView source
toggleButtonMachinets
export declare const toggleButtonMachine: Machine<ToggleButtonInput, "ready", ToggleButtonContext, ToggleButtonEvent, ToggleButtonCommand>;

ToggleButtonReason

type
DeclarationView source
ToggleButtonReasonts
type ToggleButtonReason = "pointer" | "keyboard" | "programmatic";

toggleButtonReplaySequence

value
DeclarationView source
toggleButtonReplaySequencets
export declare const toggleButtonReplaySequence: readonly ToggleButtonEvent[];

toggleButtonSelectors

value
DeclarationView source
toggleButtonSelectorsts
export declare const toggleButtonSelectors: {
  pressed: (snapshot: ToggleButtonSnapshot) => boolean;
};
Name
Kind
Type
Requirement
pressed
property
(snapshot: ToggleButtonSnapshot) => boolean
required
Name
pressed
Kind
property
Type
(snapshot: ToggleButtonSnapshot) => boolean
Requirement
required

ToggleButtonSnapshot

type
DeclarationView source
ToggleButtonSnapshotts
type ToggleButtonSnapshot = Snapshot<"ready", ToggleButtonContext>;