grassroot
Install

DocsAPI referenceUI machinesresizable

resizable machine

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

@grassroot/ui-machines/resizable

Package

10 exports
View source packages/ui-machines/src/resizable/index.ts

Service example

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

Exports

ResizableCommand

type
DeclarationView source
ResizableCommandts
type ResizableCommand = CommandObject & {
  readonly type: "RESIZE_REQUEST";
  readonly size: number;
  readonly reason: ResizableReason;
};
Name
Kind
Type
Requirement
reason
property
ResizableReason
required
size
property
number
required
type
property
string
required
Name
reason
Kind
property
Type
ResizableReason
Requirement
required
Name
size
Kind
property
Type
number
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required

ResizableContext

type
DeclarationView source
ResizableContextts
type ResizableContext = {
  readonly size: number;
  readonly mode: BindingMode;
};
Name
Kind
Type
Requirement
mode
property
BindingMode
required
size
property
number
required
Name
mode
Kind
property
Type
BindingMode
Requirement
required
Name
size
Kind
property
Type
number
Requirement
required

ResizableDiagnosticCodes

value
DeclarationView source
ResizableDiagnosticCodests
export declare const ResizableDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

ResizableEvent

type
DeclarationView source
ResizableEventts
type ResizableEvent = {
  readonly type: "RESIZE";
  readonly value: number;
  readonly reason: ResizableReason;
} | {
  readonly type: "NUDGE";
  readonly direction: -1 | 1;
  readonly reason: ResizableReason;
} | {
  readonly type: "HOME";
  readonly reason: ResizableReason;
} | {
  readonly type: "END";
  readonly reason: ResizableReason;
} | {
  readonly type: "RESET";
};

ResizableInput

type
DeclarationView source
ResizableInputts
type ResizableInput = {
  readonly value?: number;
  readonly defaultSize?: number;
  readonly minSize?: number;
  readonly step?: number;
  readonly direction?: "horizontal" | "vertical";
};
Name
Kind
Type
Requirement
defaultSize
property
number
optional
direction
property
"horizontal" | "vertical"
optional
minSize
property
number
optional
step
property
number
optional
value
property
number
optional
Name
defaultSize
Kind
property
Type
number
Requirement
optional
Name
direction
Kind
property
Type
"horizontal" | "vertical"
Requirement
optional
Name
minSize
Kind
property
Type
number
Requirement
optional
Name
step
Kind
property
Type
number
Requirement
optional
Name
value
Kind
property
Type
number
Requirement
optional

resizableMachine

value
DeclarationView source
resizableMachinets
export declare const resizableMachine: Machine<ResizableInput, "ready", ResizableContext, ResizableEvent, ResizableCommand>;

ResizableReason

type
DeclarationView source
ResizableReasonts
type ResizableReason = "pointer" | "keyboard" | "programmatic";

resizableReplaySequence

value
DeclarationView source
resizableReplaySequencets
export declare const resizableReplaySequence: readonly ResizableEvent[];

resizableSelectors

value
DeclarationView source
resizableSelectorsts
export declare const resizableSelectors: {
  size: (snapshot: ResizableSnapshot) => number;
};
Name
Kind
Type
Requirement
size
property
(snapshot: ResizableSnapshot) => number
required
Name
size
Kind
property
Type
(snapshot: ResizableSnapshot) => number
Requirement
required

ResizableSnapshot

type
DeclarationView source
ResizableSnapshotts
type ResizableSnapshot = Snapshot<"ready", ResizableContext>;