Feedback and overlays

PhoneSheet

PhoneSheet — the phone replacement for drawers and centered modals. - `variant="page"`: a full-screen page (a notifications list, a picker); - `variant="sheet"`: slides up from the bottom with a grabber; a swipe down on its header closes it. It closes on its close button and Escape, moves focus into itself when it opens, and returns focus to the opener when it closes. It is positioned `absolute; inset: 0`, so it covers its nearest positioned ancestor — inside an `AdminShell`, render it in the `overlays` snippet so it covers the screen above the phone bottom bar. The host may keep it mounted while closed (it is hidden and inert), so a chat inside keeps its draft.

Public export

typescript

import { PhoneSheet } from '@happyvertical/smrt-ui/feedback';

Import path: @happyvertical/smrt-ui/feedback
Props: 7
Props described: 7 of 7
Bindable state: 0
Callback events: 1
Verified release: 0.57.40

Props

NameTypeRequiredDescription

openbooleanYesWhether the sheet is shown.

titlestringYesHeading shown in the sheet header; also names the dialog.

onclose() => voidYesCalled on the close button, Escape, or a swipe down (sheet).

variant'page' | 'sheet'No`page` covers the area; `sheet` slides up with rounded corners.

idstringNoElement id, for `aria-controls` on the button that opens it.

closeLabelstringNoAccessible name of the close button (default "Close {title}").

childrenSnippetYesSheet body.

Bindable state

This component has no bindable public state.

Callback events

onclose() => void

Public export

Props

Bindable state

Callback events

Examples and explanation