API and Development
CallDock, CallDockControls, CallDockDetails, CallDockError, CallDockSkeleton, CallDockWidth 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 |
width | CallDockWidth | Content (default, as wide as the content) or a floor: Size500, Size700, Size750. The tray grows to fit wider content and never exceeds its container |
children | ReactNode | What fills the tray, usually one module mount that renders the parts. Optional |
className | string | Appended to the tray surface. Design-system use only: pnpm lint:classname rejects it in apps and remotes |
ref | Ref<HTMLElement> | The region element |
data-* | string | Forwarded to the region |
placement (AppShell's dockPlacement decides whether the tray overlays main), 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 call-plane store, and the tray follows: present
while true, sliding out and leaving the tree after false. |
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 | — | @deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern. |
ref | Ref<HTMLElement> | — | Ref to the tray's section region. |
width | CallDockWidth | CallDockWidth.Content | The least inline size of the tray, so content that changes with the call's state does not make the tray jump narrower than the shell wants. The tray grows to fit wider content and never exceeds its container. |