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

15 exports
View source packages/ui-machines/src/accordion/index.ts

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();

Exports

DeclarationView source
AccordionChangeReasonts
type AccordionChangeReason = "pointer" | "keyboard" | "programmatic";
DeclarationView source
AccordionCommandts
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;
});
DeclarationView source
AccordionContextts
type AccordionContext<TValue extends AccordionItemValue = string> = {
readonly value: readonly TValue[];
readonly focusedValue?: TValue;
readonly mode: "controlled" | "uncontrolled";
};
Name
Kind
Type
Requirement
focusedValue
property
TValue
optional
mode
property
"controlled" | "uncontrolled"
required
value
property
readonly TValue[]
required
Name
focusedValue
Kind
property
Type
TValue
Requirement
optional
Name
mode
Kind
property
Type
"controlled" | "uncontrolled"
Requirement
required
Name
value
Kind
property
Type
readonly TValue[]
Requirement
required
DeclarationView source
AccordionDiagnosticCodests
export declare const AccordionDiagnosticCodes: readonly DiagnosticCatalogueEntry[];
DeclarationView source
AccordionEventts
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";
};
DeclarationView source
AccordionInputts
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
collapsible
property
boolean
optional
Default true — legacy: the open single item can always close.
defaultValue
property
readonly TValue[]
optional
Uncontrolled initial committed open list.
items
property
readonly AccordionItem<TValue>[]
required
type
property
AccordionType
optional
Default "single" — legacy.
value
property
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

interface
DeclarationView source
AccordionItemts
interface AccordionItem<TValue extends AccordionItemValue = 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
DeclarationView source
AccordionItemValuets
type AccordionItemValue = string;
DeclarationView source
accordionMachinets
export declare const accordionMachine: AccordionMachine;
DeclarationView source
AccordionMachinets
type AccordionMachine<TValue extends AccordionItemValue = string> = Machine<AccordionInput<TValue>, AccordionStateValue, AccordionContext<TValue>, AccordionEvent<TValue>, AccordionCommand<TValue>>;
DeclarationView source
accordionReplaySequencets
export declare const accordionReplaySequence: readonly AccordionEvent[];
DeclarationView source
accordionSelectorsts
export declare const accordionSelectors: {
value: (snapshot: AccordionSnapshot) => readonly string[];
focusedValue: (snapshot: AccordionSnapshot) => string | undefined;
isOpen: (snapshot: AccordionSnapshot, itemValue: AccordionItemValue) => boolean;
};
Name
Kind
Type
Requirement
focusedValue
property
(snapshot: AccordionSnapshot) => string | undefined
required
isOpen
property
(snapshot: AccordionSnapshot, itemValue: AccordionItemValue) => boolean
required
value
property
(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
DeclarationView source
AccordionSnapshotts
type AccordionSnapshot<TValue extends AccordionItemValue = string> = Snapshot<AccordionStateValue, AccordionContext<TValue>>;
DeclarationView source
AccordionStateValuets
type AccordionStateValue = "ready";
DeclarationView source
AccordionTypets
type AccordionType = "single" | "multiple";