DocsAPI referenceUI machinessegmented

segmented machine

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

@grassroot/ui-machines/segmented

Package

25 exports
View source packages/ui-machines/src/segmented/index.ts

Service example

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

Exports

DeclarationView source
SegmentedChangeReasonts
type SegmentedChangeReason = "pointer" | "keyboard" | "programmatic";
DeclarationView source
SegmentedCommandts
type SegmentedCommand = CommandObject & ({
readonly type: "VALUE_CHANGE_REQUEST";
readonly value: SegmentedSelection;
readonly reason: SegmentedChangeReason;
} | {
readonly type: "FOCUS_ITEM";
readonly key: string;
});
DeclarationView source
SegmentedContextts
type SegmentedContext = {
readonly type: SegmentedType;
readonly value: SegmentedSelection | undefined;
readonly focusedValue?: string;
readonly mode: BindingMode;
};
Name
Kind
Type
Requirement
focusedValue
property
string
optional
mode
property
BindingMode
required
type
property
SegmentedType
required
value
property
SegmentedSelection | undefined
required
Name
focusedValue
Kind
property
Type
string
Requirement
optional
Name
mode
Kind
property
Type
BindingMode
Requirement
required
Name
type
Kind
property
Type
SegmentedType
Requirement
required
Name
value
Kind
property
Type
SegmentedSelection | undefined
Requirement
required
DeclarationView source
SegmentedDiagnosticCodests
export declare const SegmentedDiagnosticCodes: readonly DiagnosticCatalogueEntry[];
DeclarationView source
SegmentedEventts
type SegmentedEvent = {
readonly type: "SELECT";
readonly value: string;
readonly reason: SegmentedChangeReason;
} | {
readonly type: "MOVE";
readonly direction: -1 | 1;
} | {
readonly type: "HOME";
} | {
readonly type: "END";
} | {
readonly type: "FOCUS";
readonly value: string;
} | {
readonly type: "BLUR";
} | {
readonly type: "RESET";
};
DeclarationView source
SegmentedInputts
type SegmentedInput = {
readonly options: readonly SegmentedItem[];
readonly type?: SegmentedType;
/** Controlled committed value. A defined empty array is controlled. */
readonly value?: SegmentedSelection;
/** Uncontrolled initial value. */
readonly defaultValue?: SegmentedSelection;
readonly disabled?: boolean;
readonly readOnly?: boolean;
/** Connector hint; the machine receives logical movement only. */
readonly orientation?: SegmentedOrientation;
readonly loop?: boolean;
};
Name
Kind
Type
Requirement
Description
defaultValue
property
SegmentedSelection
optional
Uncontrolled initial value.
disabled
property
boolean
optional
loop
property
boolean
optional
options
property
readonly SegmentedItem[]
required
orientation
property
SegmentedOrientation
optional
Connector hint; the machine receives logical movement only.
readOnly
property
boolean
optional
type
property
SegmentedType
optional
value
property
SegmentedSelection
optional
Controlled committed value. A defined empty array is controlled.
Name
defaultValue
Kind
property
Type
SegmentedSelection
Requirement
optional
Description
Uncontrolled initial value.
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Description
Name
loop
Kind
property
Type
boolean
Requirement
optional
Description
Name
options
Kind
property
Type
readonly SegmentedItem[]
Requirement
required
Description
Name
orientation
Kind
property
Type
SegmentedOrientation
Requirement
optional
Description
Connector hint; the machine receives logical movement only.
Name
readOnly
Kind
property
Type
boolean
Requirement
optional
Description
Name
type
Kind
property
Type
SegmentedType
Requirement
optional
Description
Name
value
Kind
property
Type
SegmentedSelection
Requirement
optional
Description
Controlled committed value. A defined empty array is controlled.

SegmentedItem

interface
DeclarationView source
SegmentedItemts
interface SegmentedItem {
readonly value: string;
readonly disabled?: boolean;
}
Name
Kind
Type
Requirement
disabled
property
boolean
optional
value
property
string
required
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Name
value
Kind
property
Type
string
Requirement
required
DeclarationView source
segmentedMachinets
export declare const segmentedMachine: SegmentedMachine;
DeclarationView source
SegmentedMachinets
type SegmentedMachine = Machine<SegmentedInput, SegmentedStateValue, SegmentedContext, SegmentedEvent, SegmentedCommand>;
DeclarationView source
SegmentedOrientationts
type SegmentedOrientation = "horizontal" | "vertical";
DeclarationView source
segmentedReplaySequencets
export declare const segmentedReplaySequence: readonly SegmentedEvent[];
DeclarationView source
SegmentedSelectionts
type SegmentedSelection = string | readonly string[];
DeclarationView source
segmentedSelectorsts
export declare const segmentedSelectors: {
type: (snapshot: SegmentedSnapshot) => SegmentedType;
value: (snapshot: SegmentedSnapshot) => SegmentedSelection | undefined;
focusedValue: (snapshot: SegmentedSnapshot) => string | undefined;
isSelected: (snapshot: SegmentedSnapshot, value: string) => boolean;
};
Name
Kind
Type
Requirement
focusedValue
property
(snapshot: SegmentedSnapshot) => string | undefined
required
isSelected
property
(snapshot: SegmentedSnapshot, value: string) => boolean
required
type
property
(snapshot: SegmentedSnapshot) => SegmentedType
required
value
property
(snapshot: SegmentedSnapshot) => SegmentedSelection | undefined
required
Name
focusedValue
Kind
property
Type
(snapshot: SegmentedSnapshot) => string | undefined
Requirement
required
Name
isSelected
Kind
property
Type
(snapshot: SegmentedSnapshot, value: string) => boolean
Requirement
required
Name
type
Kind
property
Type
(snapshot: SegmentedSnapshot) => SegmentedType
Requirement
required
Name
value
Kind
property
Type
(snapshot: SegmentedSnapshot) => SegmentedSelection | undefined
Requirement
required
DeclarationView source
SegmentedSnapshotts
type SegmentedSnapshot = Snapshot<SegmentedStateValue, SegmentedContext>;
DeclarationView source
SegmentedStateValuets
type SegmentedStateValue = "ready";
DeclarationView source
SegmentedTypets
type SegmentedType = "single" | "multiple";
DeclarationView source
ToggleGroupCommandts
type ToggleGroupCommand = SegmentedCommand;
DeclarationView source
ToggleGroupContextts
type ToggleGroupContext = SegmentedContext;
DeclarationView source
ToggleGroupEventts
type ToggleGroupEvent = SegmentedEvent;
DeclarationView source
ToggleGroupInputts
type ToggleGroupInput = SegmentedInput;
DeclarationView source
ToggleGroupItemts
type ToggleGroupItem = SegmentedItem;
DeclarationView source
toggleGroupMachinets
export declare const toggleGroupMachine: SegmentedMachine;
DeclarationView source
ToggleGroupMachinets
type ToggleGroupMachine = SegmentedMachine;
DeclarationView source
toggleGroupSelectorsts
export declare const toggleGroupSelectors: {
type: (snapshot: SegmentedSnapshot) => SegmentedType;
value: (snapshot: SegmentedSnapshot) => SegmentedSelection | undefined;
focusedValue: (snapshot: SegmentedSnapshot) => string | undefined;
isSelected: (snapshot: SegmentedSnapshot, value: string) => boolean;
};
Name
Kind
Type
Requirement
focusedValue
property
(snapshot: SegmentedSnapshot) => string | undefined
required
isSelected
property
(snapshot: SegmentedSnapshot, value: string) => boolean
required
type
property
(snapshot: SegmentedSnapshot) => SegmentedType
required
value
property
(snapshot: SegmentedSnapshot) => SegmentedSelection | undefined
required
Name
focusedValue
Kind
property
Type
(snapshot: SegmentedSnapshot) => string | undefined
Requirement
required
Name
isSelected
Kind
property
Type
(snapshot: SegmentedSnapshot, value: string) => boolean
Requirement
required
Name
type
Kind
property
Type
(snapshot: SegmentedSnapshot) => SegmentedType
Requirement
required
Name
value
Kind
property
Type
(snapshot: SegmentedSnapshot) => SegmentedSelection | undefined
Requirement
required
DeclarationView source
ToggleGroupSnapshotts
type ToggleGroupSnapshot = SegmentedSnapshot;