Popover
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Popover } from "@corew500/ui/popover"
<Popover>Content</Popover>CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | enum | false | Whether the popover is initially open. To render a controlled popover, use the `open` prop instead. |
| open | enum | — | Whether the popover is currently open. |
| onOpenChange | (open: boolean, eventDetails: PopoverRootChangeEventDetails) => void | — | Event handler called when the popover is opened or closed. |
| onOpenChangeComplete | (open: boolean) => void | — | Event handler called after any animations complete when the popover is opened or closed. |
| actionsRef | RefObject<PopoverRootActions> | — | A ref to imperative actions. - `unmount`: When specified, the popover will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the popover manually. Useful when the popover's animation is controlled by an external library. - `close`: Closes the dialog imperatively when called. |
| modal | enum | false | Determines if the popover enters a modal state when open. - `true`: user interaction is limited to the popover: 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 popover, but document page scroll is not locked and pointer interactions outside of it remain enabled. |
| triggerId | string | — | ID of the trigger that the popover is associated with. This is useful in conjunction with the `open` prop to create a controlled popover. 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 popover is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open popover. |
| handle | PopoverHandle<unknown> | — | A handle to associate the popover with a trigger. If specified, allows external triggers to control the popover's open state. |
Accessibility
Keyboard Navigation
- Escape key closes the popover
- Tab navigates through focusable content
Focus Management
- Content receives focus when opened
- Focus returns to trigger when closed
Screen Readers
- - Trigger uses aria-expanded and aria-haspopup
Additional
- Click outside closes the popover
Localization
Translatable Content
- - Component accepts pre-resolved strings for all text content
- Title, description, and content should be translated