Sheet
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Sheet } from "@corew500/ui/sheet"
<Sheet>Content</Sheet>Variants
sheetContentVariants
| Axis | Values | Default |
|---|---|---|
| side | topbottomleftright | right |
CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | enum | — | Whether the dialog is currently open. |
| defaultOpen | enum | false | Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead. |
| modal | enum | true | Determines if the dialog enters a modal state when open. - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled. |
| onOpenChange | (open: boolean, eventDetails: DialogRootChangeEventDetails) => void | — | Event handler called when the dialog is opened or closed. |
| onOpenChangeComplete | (open: boolean) => void | — | Event handler called after any animations complete when the dialog is opened or closed. |
| disablePointerDismissal | enum | false | Determines whether the dialog should close on outside clicks. |
| actionsRef | RefObject<DialogRootActions> | — | A ref to imperative actions. - `unmount`: When specified, the dialog will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the dialog manually. Useful when the dialog's animation is controlled by an external library. - `close`: Closes the dialog imperatively when called. |
| handle | DialogHandle<unknown> | — | A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method. |
| triggerId | string | — | ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set). |
| defaultTriggerId | string | — | ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog. |
Accessibility
Keyboard Navigation
- Pressing Escape closes the sheet
Focus Management
- - Focus is trapped within the sheet when open
- Focus is returned to the trigger element when closed
Screen Readers
- Uses `role="dialog"` with proper ARIA labeling via SheetTitle
- Close button includes screen reader text "Close"
Additional
- Backdrop click closes the sheet
Localization
Translatable Content
- - Pass translated strings to SheetTitle and SheetDescription
- Close button label can be customized for screen readers
- All visible text content should be pre-translated by the consuming application