grassroot
Install

DocsAPI referenceUI machinescollapsible

collapsible machine

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

@grassroot/ui-machines/collapsible

Package

12 exports
View source packages/ui-machines/src/collapsible/index.ts

Service example

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

Exports

CollapsibleChangeReason

type
DeclarationView source
CollapsibleChangeReasonts
type CollapsibleChangeReason = "pointer" | "keyboard" | "programmatic";

CollapsibleCommand

type
DeclarationView source
CollapsibleCommandts
type CollapsibleCommand = CommandObject & {
  readonly type: "OPEN_CHANGE_REQUEST";
  readonly open: boolean;
  readonly reason: CollapsibleChangeReason;
};
Name
Kind
Type
Requirement
open
property
boolean
required
reason
property
CollapsibleChangeReason
required
type
property
string
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
CollapsibleChangeReason
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required

CollapsibleContext

type
DeclarationView source
CollapsibleContextts
type CollapsibleContext = {
  readonly mode: "controlled" | "uncontrolled";
};
Name
Kind
Type
Requirement
mode
property
"controlled" | "uncontrolled"
required
Name
mode
Kind
property
Type
"controlled" | "uncontrolled"
Requirement
required

CollapsibleDiagnosticCodes

value
DeclarationView source
CollapsibleDiagnosticCodests
export declare const CollapsibleDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

CollapsibleEvent

type
DeclarationView source
CollapsibleEventts
type CollapsibleEvent = {
  readonly type: "TOGGLE";
  readonly reason: CollapsibleChangeReason;
} | {
  readonly type: "RESET";
};

CollapsibleInput

type
DeclarationView source
CollapsibleInputts
type CollapsibleInput = {
  /** Controlled committed open state. Defining it fixes controlled mode. */
  readonly open?: boolean;
  /** Uncontrolled initial open state. */
  readonly defaultOpen?: boolean;
  /** Disabled prevents user toggles. */
  readonly disabled?: boolean;
};
Name
Kind
Type
Requirement
Description
defaultOpen
property
boolean
optional
Uncontrolled initial open state.
disabled
property
boolean
optional
Disabled prevents user toggles.
open
property
boolean
optional
Controlled committed open state. Defining it fixes controlled mode.
Name
defaultOpen
Kind
property
Type
boolean
Requirement
optional
Description
Uncontrolled initial open state.
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Description
Disabled prevents user toggles.
Name
open
Kind
property
Type
boolean
Requirement
optional
Description
Controlled committed open state. Defining it fixes controlled mode.

collapsibleMachine

value
DeclarationView source
collapsibleMachinets
export declare const collapsibleMachine: CollapsibleMachine;

CollapsibleMachine

type
DeclarationView source
CollapsibleMachinets
type CollapsibleMachine = Machine<CollapsibleInput, CollapsibleStateValue, CollapsibleContext, CollapsibleEvent, CollapsibleCommand>;

collapsibleReplaySequence

value
DeclarationView source
collapsibleReplaySequencets
export declare const collapsibleReplaySequence: readonly CollapsibleEvent[];

collapsibleSelectors

value
DeclarationView source
collapsibleSelectorsts
export declare const collapsibleSelectors: {
  open: (snapshot: CollapsibleSnapshot) => boolean;
};
Name
Kind
Type
Requirement
open
property
(snapshot: CollapsibleSnapshot) => boolean
required
Name
open
Kind
property
Type
(snapshot: CollapsibleSnapshot) => boolean
Requirement
required

CollapsibleSnapshot

type
DeclarationView source
CollapsibleSnapshotts
type CollapsibleSnapshot = Snapshot<CollapsibleStateValue, CollapsibleContext>;

CollapsibleStateValue

type
DeclarationView source
CollapsibleStateValuets
type CollapsibleStateValue = "open" | "closed";