interface / @typed/ui

Composite.InitialState

Initial Composite values. activeId defaults to null, orientation to horizontal, loop to true, RTL and virtual focus to false.

Learn this UI primitive →

Package version
1.0.0-beta.13
Category
Active item state
Since
1.0.0
Member of
Composite

Import

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

Access Composite.InitialState through the imported Composite export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

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

Why

Making initialization explicit documents hydration-sensitive defaults and lets servers and clients construct matching state.

Ownership and lifetime

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

Example

Import with import type { InitialState } from "@typed/ui/Composite"; Extend the Composite.makeState runnable setup. Construct policy explicitly with const initial: InitialState = { activeId: null, orientation: "vertical", loop: false, rtl: false, virtualFocus: true }; const state = yield* Composite.makeState(initial).

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