- Name
focusedValue- Kind
- property
- Type
TValue- Requirement
- optional
DocsAPI referenceUI machinesaccordion
accordion machine
The public state machine contract for @grassroot/ui-machines/accordion. The machine owns behaviour; the matching headless layer owns composition.
@grassroot/ui-machines/accordion
Package
Service example
accordion.tsts
import { createService } from "@grassroot/statechart";import { accordionMachine } from "@grassroot/ui-machines/accordion"; const service = createService(accordionMachine, { input: {} });service.start();service.send({ type: "…" });service.stop();15 of 15
Exports
AccordionChangeReasonts
type AccordionChangeReason = "pointer" | "keyboard" | "programmatic";AccordionCommand
typeAccordionCommandts
type AccordionCommand<TValue extends AccordionItemValue = string> = CommandObject & ({ readonly type: "VALUE_CHANGE_REQUEST"; readonly value: readonly TValue[]; readonly reason: AccordionChangeReason;} | { readonly type: "FOCUS_ITEM"; readonly key: TValue;});AccordionContext
typeAccordionContextts
type AccordionContext<TValue extends AccordionItemValue = string> = { readonly value: readonly TValue[]; readonly focusedValue?: TValue; readonly mode: "controlled" | "uncontrolled";};Name
Kind
Type
Requirement
focusedValueproperty
TValueoptional
modeproperty
"controlled" | "uncontrolled"required
valueproperty
readonly TValue[]required
- Name
mode- Kind
- property
- Type
"controlled" | "uncontrolled"- Requirement
- required
- Name
value- Kind
- property
- Type
readonly TValue[]- Requirement
- required
AccordionDiagnosticCodes
valueAccordionDiagnosticCodests
export declare const AccordionDiagnosticCodes: readonly DiagnosticCatalogueEntry[];AccordionEvent
typeAccordionEventts
type AccordionEvent<TValue extends AccordionItemValue = string> = { readonly type: "TOGGLE"; readonly value: TValue; readonly reason: AccordionChangeReason;} | { 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";};AccordionInput
typeAccordionInputts
type AccordionInput<TValue extends AccordionItemValue = string> = { readonly items: readonly AccordionItem<TValue>[]; /** Default "single" — legacy. */ readonly type?: AccordionType; /** Controlled committed open list. Defining it fixes controlled mode at first start. */ readonly value?: readonly TValue[]; /** Uncontrolled initial committed open list. */ readonly defaultValue?: readonly TValue[]; /** Default true — legacy: the open single item can always close. */ readonly collapsible?: boolean;};Name
Kind
Type
Requirement
Description
collapsibleproperty
booleanoptional
Default true — legacy: the open single item can always close.
defaultValueproperty
readonly TValue[]optional
Uncontrolled initial committed open list.
itemsproperty
readonly AccordionItem<TValue>[]required
—
typeproperty
AccordionTypeoptional
Default "single" — legacy.
valueproperty
readonly TValue[]optional
Controlled committed open list. Defining it fixes controlled mode at first start.
- Name
collapsible- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- Default true — legacy: the open single item can always close.
- Name
defaultValue- Kind
- property
- Type
readonly TValue[]- Requirement
- optional
- Description
- Uncontrolled initial committed open list.
- Name
items- Kind
- property
- Type
readonly AccordionItem<TValue>[]- Requirement
- required
- Description
- —
- Name
type- Kind
- property
- Type
AccordionType- Requirement
- optional
- Description
- Default "single" — legacy.
- Name
value- Kind
- property
- Type
readonly TValue[]- Requirement
- optional
- Description
- Controlled committed open list. Defining it fixes controlled mode at first start.
AccordionItem
interfaceAccordionItemts
interface AccordionItem<TValue extends AccordionItemValue = string> { readonly value: TValue; readonly disabled?: boolean;}Name
Kind
Type
Requirement
disabledproperty
booleanoptional
valueproperty
TValuerequired
- Name
disabled- Kind
- property
- Type
boolean- Requirement
- optional
- Name
value- Kind
- property
- Type
TValue- Requirement
- required
AccordionItemValue
typeAccordionItemValuets
type AccordionItemValue = string;accordionMachine
valueaccordionMachinets
export declare const accordionMachine: AccordionMachine;AccordionMachine
typeAccordionMachinets
type AccordionMachine<TValue extends AccordionItemValue = string> = Machine<AccordionInput<TValue>, AccordionStateValue, AccordionContext<TValue>, AccordionEvent<TValue>, AccordionCommand<TValue>>;accordionReplaySequence
valueaccordionReplaySequencets
export declare const accordionReplaySequence: readonly AccordionEvent[];accordionSelectors
valueaccordionSelectorsts
export declare const accordionSelectors: { value: (snapshot: AccordionSnapshot) => readonly string[]; focusedValue: (snapshot: AccordionSnapshot) => string | undefined; isOpen: (snapshot: AccordionSnapshot, itemValue: AccordionItemValue) => boolean;};Name
Kind
Type
Requirement
focusedValueproperty
(snapshot: AccordionSnapshot) => string | undefinedrequired
isOpenproperty
(snapshot: AccordionSnapshot, itemValue: AccordionItemValue) => booleanrequired
valueproperty
(snapshot: AccordionSnapshot) => readonly string[]required
- Name
focusedValue- Kind
- property
- Type
(snapshot: AccordionSnapshot) => string | undefined- Requirement
- required
- Name
isOpen- Kind
- property
- Type
(snapshot: AccordionSnapshot, itemValue: AccordionItemValue) => boolean- Requirement
- required
- Name
value- Kind
- property
- Type
(snapshot: AccordionSnapshot) => readonly string[]- Requirement
- required
AccordionSnapshot
typeAccordionSnapshotts
type AccordionSnapshot<TValue extends AccordionItemValue = string> = Snapshot<AccordionStateValue, AccordionContext<TValue>>;AccordionStateValue
typeAccordionStateValuets
type AccordionStateValue = "ready";AccordionType
typeAccordionTypets
type AccordionType = "single" | "multiple";