tabs machine

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

@grassroot/ui-machines/tabs

Package

16 exports

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

Install npm i @grassroot/ui-machines

Service example

tabs.tsts

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

Exports

TabsActivation

type

TabsActivationts

type TabsActivation = "automatic" | "manual";

TabsChangeReason

type

TabsChangeReasonts

type TabsChangeReason = "pointer" | "keyboard" | "programmatic";

TabsCommand

type

TabsCommandts

type TabsCommand<TValue extends TabsItemValue = string> = CommandObject & ({
  readonly type: "VALUE_CHANGE_REQUEST";
  readonly value: TValue;
  readonly reason: TabsChangeReason;
} | {
  readonly type: "FOCUS_ITEM";
  readonly key: TValue;
});

TabsContext

type

TabsContextts

type TabsContext<TValue extends TabsItemValue = string> = {
  readonly value?: TValue;
  readonly focusedValue?: TValue;
  readonly mode: "controlled" | "uncontrolled";
};

Name

Kind

Type

Requirement

focusedValue

property

TValue

optional

mode

property

"controlled" | "uncontrolled"

required

value

property

TValue

optional

Name: focusedValue
Kind: property
Type: TValue
Requirement: optional

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

Name: value
Kind: property
Type: TValue
Requirement: optional

TabsDiagnosticCodes

value

TabsDiagnosticCodests

export declare const TabsDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

TabsEvent

type

TabsEventts

type TabsEvent<TValue extends TabsItemValue = string> = {
  readonly type: "SELECT";
  readonly value: TValue;
  readonly reason: TabsChangeReason;
} | {
  readonly type: "MOVE";
  readonly direction: -1 | 1;
} | {
  readonly type: "HOME";
} | {
  readonly type: "END";
} | {
  readonly type: "FOCUS";
  readonly value: TValue;
} | {
  readonly type: "BLUR";
} | {
  readonly type: "RESET";
};

TabsInput

type

TabsInputts

type TabsInput<TValue extends TabsItemValue = string> = {
  readonly tabs: readonly TabsItem<TValue>[];
  /** Controlled committed value. Defining it fixes controlled mode at first start. */
  readonly value?: TValue;
  /** Uncontrolled initial committed value. */
  readonly defaultValue?: TValue;
  /** Headless-layer concern; the machine never branches on it. Default "horizontal". */
  readonly orientation?: TabsOrientation;
  /** Default "automatic" — legacy: MOVE/HOME/END select immediately. */
  readonly activation?: TabsActivation;
  /** Default true — legacy wraps at either end. */
  readonly loop?: boolean;
};

Name

Kind

Type

Requirement

Description

activation

property

TabsActivation

optional

Default "automatic" — legacy: MOVE/HOME/END select immediately.

defaultValue

property

TValue

optional

Uncontrolled initial committed value.

loop

property

boolean

optional

Default true — legacy wraps at either end.

orientation

property

TabsOrientation

optional

Headless-layer concern; the machine never branches on it. Default "horizontal".

tabs

property

readonly TabsItem<TValue>[]

required

—

value

property

TValue

optional

Controlled committed value. Defining it fixes controlled mode at first start.

Name: activation
Kind: property
Type: TabsActivation
Requirement: optional
Description: Default "automatic" — legacy: MOVE/HOME/END select immediately.

Name: defaultValue
Kind: property
Type: TValue
Requirement: optional
Description: Uncontrolled initial committed value.

Name: loop
Kind: property
Type: boolean
Requirement: optional
Description: Default true — legacy wraps at either end.

Name: orientation
Kind: property
Type: TabsOrientation
Requirement: optional
Description: Headless-layer concern; the machine never branches on it. Default "horizontal".

Name: tabs
Kind: property
Type: readonly TabsItem<TValue>[]
Requirement: required
Description: —

Name: value
Kind: property
Type: TValue
Requirement: optional
Description: Controlled committed value. Defining it fixes controlled mode at first start.

TabsItem

interface

TabsItemts

interface TabsItem<TValue extends TabsItemValue = string> {
  readonly value: TValue;
  readonly disabled?: boolean;
}

Name

Kind

Type

Requirement

disabled

property

boolean

optional

value

property

TValue

required

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

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

TabsItemValue

type

TabsItemValuets

type TabsItemValue = string;

tabsMachine

value

tabsMachinets

export declare const tabsMachine: TabsMachine;

TabsMachine

type

TabsMachinets

type TabsMachine<TValue extends TabsItemValue = string> = Machine<TabsInput<TValue>, TabsStateValue, TabsContext<TValue>, TabsEvent<TValue>, TabsCommand<TValue>>;

TabsOrientation

type

TabsOrientationts

type TabsOrientation = "horizontal" | "vertical";

tabsReplaySequence

value

tabsReplaySequencets

export declare const tabsReplaySequence: readonly TabsEvent[];

tabsSelectors

value

tabsSelectorsts

export declare const tabsSelectors: {
  value: (snapshot: TabsSnapshot) => string | undefined;
  focusedValue: (snapshot: TabsSnapshot) => string | undefined;
};

Name

Kind

Type

Requirement

focusedValue

property

(snapshot: TabsSnapshot) => string | undefined

required

value

property

(snapshot: TabsSnapshot) => string | undefined

required

Name: focusedValue
Kind: property
Type: (snapshot: TabsSnapshot) => string | undefined
Requirement: required

Name: value
Kind: property
Type: (snapshot: TabsSnapshot) => string | undefined
Requirement: required

TabsSnapshot

type

TabsSnapshotts

type TabsSnapshot<TValue extends TabsItemValue = string> = Snapshot<TabsStateValue, TabsContext<TValue>>;

TabsStateValue

type

TabsStateValuets

type TabsStateValue = "ready";

Service example

Exports

Related references