grassroot
Install

DocsAPI referenceUI machinesmessage-scroller

message-scroller machine

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

@grassroot/ui-machines/message-scroller

Package

17 exports
View source packages/ui-machines/src/message-scroller/index.ts

Service example

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

Exports

MESSAGE_SCROLLER_JUMP_DELAY_MS

value
DeclarationView source
MESSAGE_SCROLLER_JUMP_DELAY_MSts
export declare const MESSAGE_SCROLLER_JUMP_DELAY_MS: 260;

MESSAGE_SCROLLER_JUMP_KEY

value
DeclarationView source
MESSAGE_SCROLLER_JUMP_KEYts
export declare const MESSAGE_SCROLLER_JUMP_KEY: "message-scroller.jump";

MessageScrollerCommand

type
DeclarationView source
MessageScrollerCommandts
type MessageScrollerCommand = (CommandObject & {
  readonly type: "SCROLL_TO";
  readonly target: MessageScrollerScrollTarget;
  readonly behavior: MessageScrollerScrollBehavior;
}) | (CommandObject & {
  readonly type: "PRESERVE_PREPEND";
}) | (CommandObject & {
  readonly type: "CLEAR_SPACER";
}) | (CommandObject & {
  readonly type: "REANCHOR";
}) | ScheduleCommand<MessageScrollerEvent> | CancelCommand;

MessageScrollerContext

type
DeclarationView source
MessageScrollerContextts
type MessageScrollerContext = {
  readonly jumping: boolean;
  readonly anchorId: string | null;
  readonly defaultApplied: boolean;
  readonly pendingJumpId: string | null;
};
Name
Kind
Type
Requirement
anchorId
property
string | null
required
defaultApplied
property
boolean
required
jumping
property
boolean
required
pendingJumpId
property
string | null
required
Name
anchorId
Kind
property
Type
string | null
Requirement
required
Name
defaultApplied
Kind
property
Type
boolean
Requirement
required
Name
jumping
Kind
property
Type
boolean
Requirement
required
Name
pendingJumpId
Kind
property
Type
string | null
Requirement
required

MessageScrollerDefaultScrollPosition

type
DeclarationView source
MessageScrollerDefaultScrollPositionts
type MessageScrollerDefaultScrollPosition = "start" | "end" | "last-anchor";

MessageScrollerDiagnosticCodes

value
DeclarationView source
MessageScrollerDiagnosticCodests
export declare const MessageScrollerDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

MessageScrollerEvent

type
DeclarationView source
MessageScrollerEventts
type MessageScrollerEvent = {
  readonly type: "USER_RELEASE";
} | {
  readonly type: "SCROLL_REPORT";
  readonly atEnd: boolean;
} | {
  readonly type: "PREPEND";
} | {
  readonly type: "APPLY_DEFAULT";
  readonly action: "start" | "end" | "anchor";
  readonly anchorId?: string;
} | {
  readonly type: "APPEND";
  readonly newAnchorId: string | null;
  readonly newAnchorCount: number;
} | {
  readonly type: "ANCHOR";
  readonly id: string;
} | {
  readonly type: "FOLLOW_END";
} | {
  readonly type: "JUMP_START";
  readonly behavior: MessageScrollerScrollBehavior;
} | {
  readonly type: "JUMP_END";
  readonly behavior: MessageScrollerScrollBehavior;
} | {
  readonly type: "JUMP_MESSAGE";
  readonly messageId: string;
  readonly found: boolean;
  readonly rowsMounted: boolean;
  readonly alreadyVisible: boolean;
  readonly behavior: MessageScrollerScrollBehavior;
  readonly align?: MessageScrollerScrollAlign;
  readonly scrollMargin?: number;
} | {
  readonly type: "JUMP_COMPLETE";
} | {
  readonly type: "REANCHOR_REQUEST";
} | {
  readonly type: "ANCHOR_LOST";
} | {
  readonly type: "REANCHOR_RELEASED";
} | {
  readonly type: "RESIZE";
} | {
  readonly type: "AUTO_SCROLL_EDGE";
  readonly atEnd: boolean;
} | {
  readonly type: "STOP";
};

MessageScrollerInput

type
DeclarationView source
MessageScrollerInputts
type MessageScrollerInput = {
  readonly autoScroll?: boolean;
  readonly defaultScrollPosition?: MessageScrollerDefaultScrollPosition;
  readonly preserveScrollOnPrepend?: boolean;
  /** Presentation-only. The machine ignores it. @default "Messages" */
  readonly label?: string;
  /** Presentation-only. The machine ignores it. @default false */
  readonly busy?: boolean;
  /** Presentation-only. The machine ignores it. @default "end" */
  readonly buttonDirection?: "start" | "end";
};
Name
Kind
Type
Requirement
Description
autoScroll
property
boolean
optional
—
busy
property
boolean
optional
Presentation-only. The machine ignores it.
buttonDirection
property
"start" | "end"
optional
Presentation-only. The machine ignores it.
defaultScrollPosition
property
MessageScrollerDefaultScrollPosition
optional
—
label
property
string
optional
Presentation-only. The machine ignores it.
preserveScrollOnPrepend
property
boolean
optional
—
Name
autoScroll
Kind
property
Type
boolean
Requirement
optional
Description
—
Name
busy
Kind
property
Type
boolean
Requirement
optional
Description
Presentation-only. The machine ignores it.
Name
buttonDirection
Kind
property
Type
"start" | "end"
Requirement
optional
Description
Presentation-only. The machine ignores it.
Name
defaultScrollPosition
Kind
property
Type
MessageScrollerDefaultScrollPosition
Requirement
optional
Description
—
Name
label
Kind
property
Type
string
Requirement
optional
Description
Presentation-only. The machine ignores it.
Name
preserveScrollOnPrepend
Kind
property
Type
boolean
Requirement
optional
Description
—

messageScrollerMachine

value
DeclarationView source
messageScrollerMachinets
export declare const messageScrollerMachine: MessageScrollerMachine;

MessageScrollerMachine

type
DeclarationView source
MessageScrollerMachinets
type MessageScrollerMachine = Machine<MessageScrollerInput, MessageScrollerStateValue, MessageScrollerContext, MessageScrollerEvent, MessageScrollerCommand>;

messageScrollerReplaySequence

value
DeclarationView source
messageScrollerReplaySequencets
export declare const messageScrollerReplaySequence: readonly MessageScrollerEvent[];

MessageScrollerScrollAlign

type
DeclarationView source
MessageScrollerScrollAlignts
type MessageScrollerScrollAlign = "start" | "center" | "end" | "nearest";

MessageScrollerScrollBehavior

type
DeclarationView source
MessageScrollerScrollBehaviorts
type MessageScrollerScrollBehavior = "smooth" | "auto";

MessageScrollerScrollTarget

type
DeclarationView source
MessageScrollerScrollTargetts
type MessageScrollerScrollTarget = {
  readonly kind: "start";
} | {
  readonly kind: "end";
} | {
  readonly kind: "message";
  readonly id: string;
  readonly align?: MessageScrollerScrollAlign;
  readonly scrollMargin?: number;
} | {
  readonly kind: "anchor";
  readonly id: string;
};

messageScrollerSelectors

value
DeclarationView source
messageScrollerSelectorsts
export declare const messageScrollerSelectors: {
  following: (snapshot: MessageScrollerSnapshot) => boolean;
  anchored: (snapshot: MessageScrollerSnapshot) => boolean;
  idle: (snapshot: MessageScrollerSnapshot) => boolean;
  jumping: (snapshot: MessageScrollerSnapshot) => boolean;
  anchorId: (snapshot: MessageScrollerSnapshot) => string | null;
  pendingJumpId: (snapshot: MessageScrollerSnapshot) => string | null;
  defaultApplied: (snapshot: MessageScrollerSnapshot) => boolean;
};
Name
Kind
Type
Requirement
anchored
property
(snapshot: MessageScrollerSnapshot) => boolean
required
anchorId
property
(snapshot: MessageScrollerSnapshot) => string | null
required
defaultApplied
property
(snapshot: MessageScrollerSnapshot) => boolean
required
following
property
(snapshot: MessageScrollerSnapshot) => boolean
required
idle
property
(snapshot: MessageScrollerSnapshot) => boolean
required
jumping
property
(snapshot: MessageScrollerSnapshot) => boolean
required
pendingJumpId
property
(snapshot: MessageScrollerSnapshot) => string | null
required
Name
anchored
Kind
property
Type
(snapshot: MessageScrollerSnapshot) => boolean
Requirement
required
Name
anchorId
Kind
property
Type
(snapshot: MessageScrollerSnapshot) => string | null
Requirement
required
Name
defaultApplied
Kind
property
Type
(snapshot: MessageScrollerSnapshot) => boolean
Requirement
required
Name
following
Kind
property
Type
(snapshot: MessageScrollerSnapshot) => boolean
Requirement
required
Name
idle
Kind
property
Type
(snapshot: MessageScrollerSnapshot) => boolean
Requirement
required
Name
jumping
Kind
property
Type
(snapshot: MessageScrollerSnapshot) => boolean
Requirement
required
Name
pendingJumpId
Kind
property
Type
(snapshot: MessageScrollerSnapshot) => string | null
Requirement
required

MessageScrollerSnapshot

type
DeclarationView source
MessageScrollerSnapshotts
type MessageScrollerSnapshot = Snapshot<MessageScrollerStateValue, MessageScrollerContext>;

MessageScrollerStateValue

type
DeclarationView source
MessageScrollerStateValuets
type MessageScrollerStateValue = "idle" | "following" | "anchored";