zidanecomponents/floating/Popover
import { … } from 'zidane-ui'ui/src/components/floating/Popover.tsx
Components#
PopoverComponent#
Renders a trigger that opens a floating surface. The caller draws the trigger from the props it receives, so any control can open one. A surface that is or holds a menu or listbox takes focus on open; Esc and a pick hand focus back to the trigger.
function Popover(props: PopoverProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | PopoverProps | Component props. |
Returns
ElementProps
| Name | Type | Default | Description |
|---|---|---|---|
| align? | Align | 'start' | How the surface lines up along the trigger's edge. |
| ariaLabel | string | Accessible name of the surface. | |
| children | (close: () => void) => ReactNode | Renders the surface content. | |
| className? | string | Extra classes on the surface. | |
| onDismiss? | () => void | Called when an outside press, Esc or the trigger closes the surface. Not called for a close
from | |
| onOpenChange? | (open: boolean) => void | Called when the surface opens or closes, however it does (to load what it shows on each opening). | |
| role? | 'dialog' | 'listbox' | 'menu' | 'dialog' | ARIA role of the surface, also reported on the trigger as |
| side? | Side | 'top' | Preferred side of the trigger. It flips when it does not fit. |
| trigger | (props: PopoverTriggerProps, open: boolean) => ReactNode | Renders the trigger. Spread the received props onto the element; | |
| width? | number | Fixed width of the surface in px. Sized by its content when omitted. |
Interfaces#
PopoverPropsInterface#
Props for Popover.
interface PopoverPropsProperties
| Name | Type | Default | Description |
|---|---|---|---|
| align? | Align | 'start' | How the surface lines up along the trigger's edge. |
| ariaLabel | string | Accessible name of the surface. | |
| children | (close: () => void) => ReactNode | Renders the surface content. | |
| className? | string | Extra classes on the surface. | |
| onDismiss? | () => void | Called when an outside press, Esc or the trigger closes the surface. Not called for a close
from | |
| onOpenChange? | (open: boolean) => void | Called when the surface opens or closes, however it does (to load what it shows on each opening). | |
| role? | 'dialog' | 'listbox' | 'menu' | 'dialog' | ARIA role of the surface, also reported on the trigger as |
| side? | Side | 'top' | Preferred side of the trigger. It flips when it does not fit. |
| trigger | (props: PopoverTriggerProps, open: boolean) => ReactNode | Renders the trigger. Spread the received props onto the element; | |
| width? | number | Fixed width of the surface in px. Sized by its content when omitted. |
PopoverTriggerPropsInterface#
Props Popover passes to its trigger function, to spread onto the trigger element.
interface PopoverTriggerPropsProperties
| Name | Type | Description |
|---|---|---|
| aria-controls? | string | The surface's id while it is open. |
| aria-expanded | boolean | Whether the surface is open. |
| aria-haspopup | 'dialog' | 'listbox' | 'menu' | Kind of popup the trigger opens, from the |
| onClick | () => void | Toggles the surface. |
| ref | (node: HTMLElement | null) => void | Ref callback that registers the trigger as the surface's anchor. |