Components
Popover
Click-triggered floating panel anchored to a trigger, with smart positioning and dismiss.
Popover opens a floating panel when its trigger is clicked, positioned next
to the trigger with auto-flip and collision handling. Use it for menus, filters,
and small contextual forms. It is portaled and dismisses on Escape or outside
click. Works uncontrolled (defaultOpen) or controlled (open/onOpenChange);
set modal to trap focus and switch to role="dialog". Pass a function as
children to receive a close callback.
Example
Preview
import { Popover } from '@officina/ui';
<Popover trigger={<button>Options</button>} side="bottom" align="end">
{({ close }) => (
<div className="p-2">
<button onClick={close}>Rename</button>
<button onClick={close}>Delete</button>
</div>
)}
</Popover>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | ((api: { close: () => void; }) => ReactNode) | — | Panel content, or a render function receiving a `close` callback. |
| trigger* | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Element that toggles the popover; receives the trigger props. |
| align | enum | start | Alignment along the chosen side. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| modal | boolean | false | Trap focus and block outside interaction while open. |
| onOpenChange | (open: boolean) => void | — | Called when the open state changes. |
| open | boolean | — | Controlled open state. |
| side | enum | bottom | Preferred side of the trigger to position against. |
| sideOffset | number | 8 | Gap in pixels between trigger and panel. |