API and Development
CallDock, CallDockControls, CallDockDetails, CallDockError, CallDockSkeleton from @prepared911/ui/blocks/call-dock.
See props.ts for the props and schema.ts for the declaration (inputs and slots).
| Export | Role |
|---|---|
CallDock | Labelled section region for the active call. An inverted surface that owns presence from open, entry and exit motion, and the size hold during the exit |
CallDockDetails | The group of the call's number, caller and timer |
CallDockControls | The group of the call's controls. Leads them with a vertical rule while the tray holds details too |
CallDockSkeleton | Tray-sized loading content |
CallDockError | Compact failure content: a glyph, a message and an optional Retry |
CallDockProps, CallDockDetailsProps, CallDockControlsProps, CallDockSkeletonProps, CallDockErrorProps and the types they build on | Types |
| Prop | Type | Notes |
|---|---|---|
open | boolean | Required. Whether a call is active; the shell decides it. The tray is present while it is true, whatever children renders |
label | LocalizedMessage | Required. Accessible name of the region |
children | ReactNode | What fills the tray, usually one module mount that renders the parts. Optional |
className | string | Appended to the tray surface; put rules in @layer chroma.overrides |
ref | Ref<HTMLElement> | The region element |
data-* | string | Forwarded to the region |
placement, no details, no controls, no style, and no as.
CallDockDetails and CallDockControls take children, className, ref (Ref<HTMLDivElement>) and data-*. CallDockSkeleton takes className, ref and data-*.
| Prop | Type | Notes |
|---|---|---|
message | LocalizedMessage | Required. Short message saying what failed; announced politely |
icon | Glyph | Required. The error glyph, decorative |
onRetry | () => void | Optional. Shows the Retry Button; needs retryLabel |
retryLabel | LocalizedMessage | Label of the Retry Button; needs onRetry |
className, ref, data-* | As the other parts |
onRetry and retryLabel come together or not at all; either one alone is a type error.
details and controls (replaced by children with the parts; see "Migration" in CONTRACT.md), and from Dock: Dock, DockGroup, DockItem, DockPlacement, DockRestoreDetails, DockItemProps and the other Dock types, placement, onRestore, restoreState, itemId, trailing, hideLabel, minimizedAnnouncement, restoredAnnouncement, and the focus fallback that served restoring.
| Name | Type | Default | Description |
|---|---|---|---|
label | LocalizedMessage | — | Accessible name of the tray's region. |
open | boolean | — | Whether a call is active. The shell decides it, usually from the calls domain, and the tray follows: present while
true, sliding out and leaving the tree after false. It does not depend on children: with true and nothing
to show, the tray still shows. |
children | ReactNode | — | What fills the tray: usually one module mount, such as a remote that renders {@link CallDockDetails } and {@link CallDockControls }, with {@link CallDockSkeleton } and {@link CallDockError } as its loading and failure states. Anything may sit between the tray and the parts, including wrappers that generate no box of their own. |
className | string | — | Classes appended to the tray's surface. Put the rules in @layer chroma.overrides. |
ref | Ref<HTMLElement> | — | Ref to the tray's section region. |