interface / @typed/ui/Composite

State

Complete renderer-independent state for Composite.

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Active item state
Since
1.0.0

Import

import { State } from "@typed/ui/Composite";

Signatures

export interface State {
    readonly activeId: string | null;
    readonly orientation: Orientation;
    readonly loop: boolean;
    readonly rtl: boolean;
    readonly virtualFocus: boolean;
}

Why

Applications can inspect, update, and test Composite behavior without mounting or coupling the state to a renderer.

Ownership and lifetime

This declaration is data or schema metadata and acquires no resources.

Example

Import with import type { State } from "@typed/ui/Composite"; Extend the Composite.makeState runnable setup. Inside the linked program, const snapshot: State = yield* state exposes focus, orientation, looping, RTL, and virtual-focus policy.

Property: activeId

Id currently active for keyboard navigation; null means no active item.

Property: loop

Whether movement wraps between the first and last enabled items.

Property: orientation

Axis used to interpret Arrow-key movement.

Property: rtl

Whether horizontal Arrow-key meaning is reversed for right-to-left layout.

Property: virtualFocus

Whether DOM focus remains on the root and activeId is exposed via aria-activedescendant.

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source