Import 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).
Exports
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
CallDock props
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
Consumers do not pass className; layout comes from the shell Box or FlexBox props.
ref
Ref<HTMLElement>
The region element
data-*
string
Forwarded to the region
There is no placement (AppShell's dockPlacement decides whether the tray overlays main), no details, no controls, no style, and no as.
Part props
CallDockDetails and CallDockControls take children, className, ref (Ref<HTMLDivElement>) and data-*. CallDockSkeleton takes className, ref and data-*.
CallDockError props
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.
Removed
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.
Props
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.
Storybook
Interactive examples and edge cases for this component are in Storybook.