DocsAPI referenceUI machinespopover

popover machine

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

@grassroot/ui-machines/popover

Package

14 exports
View source packages/ui-machines/src/popover/index.ts

Service example

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

Exports

DeclarationView source
PopoverChangeReasonts
type PopoverChangeReason = PopoverOpenReason | PopoverCloseReason;
DeclarationView source
PopoverCloseReasonts
type PopoverCloseReason = "escape" | "outside-click" | "programmatic";
DeclarationView source
PopoverCommandts
type PopoverCommand = CommandObject & {
readonly type: "OPEN_CHANGE_REQUEST";
readonly open: boolean;
readonly reason: PopoverChangeReason;
};
Name
Kind
Type
Requirement
open
property
boolean
required
reason
property
PopoverChangeReason
required
type
property
string
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
PopoverChangeReason
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required
DeclarationView source
PopoverContextts
type PopoverContext = {
readonly mode: "controlled" | "uncontrolled";
};
Name
Kind
Type
Requirement
mode
property
"controlled" | "uncontrolled"
required
Name
mode
Kind
property
Type
"controlled" | "uncontrolled"
Requirement
required
DeclarationView source
PopoverDiagnosticCodests
export declare const PopoverDiagnosticCodes: readonly DiagnosticCatalogueEntry[];
DeclarationView source
PopoverEventts
type PopoverEvent = {
readonly type: "TOGGLE";
readonly reason: "trigger";
} | {
readonly type: "OPEN";
readonly reason: PopoverOpenReason;
} | {
readonly type: "CLOSE";
readonly reason: PopoverCloseReason;
};
DeclarationView source
PopoverInputts
type PopoverInput = {
/** Controlled committed open state. Defining it fixes controlled mode at first start. */
readonly open?: boolean;
/** Uncontrolled initial open state. */
readonly defaultOpen?: boolean;
/** Styling-only placement hook; the machine never branches on it. */
readonly side?: "top" | "bottom";
/** Styling-only placement hook; the machine never branches on it. */
readonly align?: "start" | "end";
};
Name
Kind
Type
Requirement
Description
align
property
"start" | "end"
optional
Styling-only placement hook; the machine never branches on it.
defaultOpen
property
boolean
optional
Uncontrolled initial open state.
open
property
boolean
optional
Controlled committed open state. Defining it fixes controlled mode at first start.
side
property
"top" | "bottom"
optional
Styling-only placement hook; the machine never branches on it.
Name
align
Kind
property
Type
"start" | "end"
Requirement
optional
Description
Styling-only placement hook; the machine never branches on it.
Name
defaultOpen
Kind
property
Type
boolean
Requirement
optional
Description
Uncontrolled initial open state.
Name
open
Kind
property
Type
boolean
Requirement
optional
Description
Controlled committed open state. Defining it fixes controlled mode at first start.
Name
side
Kind
property
Type
"top" | "bottom"
Requirement
optional
Description
Styling-only placement hook; the machine never branches on it.
DeclarationView source
popoverMachinets
export declare const popoverMachine: PopoverMachine;
DeclarationView source
PopoverMachinets
type PopoverMachine = Machine<PopoverInput, PopoverStateValue, PopoverContext, PopoverEvent, PopoverCommand>;
DeclarationView source
PopoverOpenReasonts
type PopoverOpenReason = "trigger" | "programmatic";
DeclarationView source
popoverReplaySequencets
export declare const popoverReplaySequence: readonly PopoverEvent[];
DeclarationView source
popoverSelectorsts
export declare const popoverSelectors: {
open: (snapshot: PopoverSnapshot) => boolean;
};
Name
Kind
Type
Requirement
open
property
(snapshot: PopoverSnapshot) => boolean
required
Name
open
Kind
property
Type
(snapshot: PopoverSnapshot) => boolean
Requirement
required
DeclarationView source
PopoverSnapshotts
type PopoverSnapshot = Snapshot<PopoverStateValue, PopoverContext>;
DeclarationView source
PopoverStateValuets
type PopoverStateValue = "open" | "closed";