- Name
open- Kind
- property
- Type
boolean- Requirement
- required
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
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();14 of 14
Exports
PopoverChangeReason
typePopoverChangeReasonts
type PopoverChangeReason = PopoverOpenReason | PopoverCloseReason;PopoverCloseReason
typePopoverCloseReasonts
type PopoverCloseReason = "escape" | "outside-click" | "programmatic";PopoverCommand
typePopoverCommandts
type PopoverCommand = CommandObject & { readonly type: "OPEN_CHANGE_REQUEST"; readonly open: boolean; readonly reason: PopoverChangeReason;};Name
Kind
Type
Requirement
openproperty
booleanrequired
reasonproperty
PopoverChangeReasonrequired
typeproperty
stringrequired
- Name
reason- Kind
- property
- Type
PopoverChangeReason- Requirement
- required
- Name
type- Kind
- property
- Type
string- Requirement
- required
PopoverContext
typePopoverContextts
type PopoverContext = { readonly mode: "controlled" | "uncontrolled";};Name
Kind
Type
Requirement
modeproperty
"controlled" | "uncontrolled"required
- Name
mode- Kind
- property
- Type
"controlled" | "uncontrolled"- Requirement
- required
PopoverDiagnosticCodes
valuePopoverDiagnosticCodests
export declare const PopoverDiagnosticCodes: readonly DiagnosticCatalogueEntry[];PopoverEvent
typePopoverEventts
type PopoverEvent = { readonly type: "TOGGLE"; readonly reason: "trigger";} | { readonly type: "OPEN"; readonly reason: PopoverOpenReason;} | { readonly type: "CLOSE"; readonly reason: PopoverCloseReason;};PopoverInput
typePopoverInputts
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
alignproperty
"start" | "end"optional
Styling-only placement hook; the machine never branches on it.
defaultOpenproperty
booleanoptional
Uncontrolled initial open state.
openproperty
booleanoptional
Controlled committed open state. Defining it fixes controlled mode at first start.
sideproperty
"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.
popoverMachine
valuepopoverMachinets
export declare const popoverMachine: PopoverMachine;PopoverMachine
typePopoverMachinets
type PopoverMachine = Machine<PopoverInput, PopoverStateValue, PopoverContext, PopoverEvent, PopoverCommand>;PopoverOpenReason
typePopoverOpenReasonts
type PopoverOpenReason = "trigger" | "programmatic";popoverReplaySequence
valuepopoverReplaySequencets
export declare const popoverReplaySequence: readonly PopoverEvent[];popoverSelectors
valuepopoverSelectorsts
export declare const popoverSelectors: { open: (snapshot: PopoverSnapshot) => boolean;};Name
Kind
Type
Requirement
openproperty
(snapshot: PopoverSnapshot) => booleanrequired
- Name
open- Kind
- property
- Type
(snapshot: PopoverSnapshot) => boolean- Requirement
- required
PopoverSnapshot
typePopoverSnapshotts
type PopoverSnapshot = Snapshot<PopoverStateValue, PopoverContext>;PopoverStateValue
typePopoverStateValuets
type PopoverStateValue = "open" | "closed";