dialogs
Popover
Add extra actions to elements
Features
- Keyboard accessible
- Focus is fully managed
- Multiple sizes
- Supports custom element as popover
- Custom icons and icon position
- Auto placement based on viewport boundaries
- Themes ready
Anatomy
import { Popover, Button, Menu } from "@wonderflow/react-components";
export default () => {
return (
<Popover trigger={<Button>Open popover</Button>}>
<Menu>
<Menu.Item>Item option 1</Menu.Item>
<Menu.Item>Item option 2</Menu.Item>
<Menu.Item>Item option 3</Menu.Item>
</Menu>
</Popover>
);
};Controlled popover
The Popover component can be controlled from the outside by using the open property. If set to true, the popover will be open once rendered, while passing false when it's open, it will force close.
import { Popover, Button } from "@wonderflow/react-components";
export default () => {
const [open, setOpen] = useState(false)
return (
<Popover
open={open}
onOpenChange={(state) => setOpen(state)}
trigger={(
<Button onClick={() => setOpen(!open)}>Open popover</Button>
)}
>
....
<Button onClick={() => setOpen(false)}>Close</Button>
</Popover>
);
};API Reference
Popover
PROPERTY
TYPE
DEFAULT
trigger*ReactNodeoffsetnumber8placementenumauto-startmatchTriggerWidthbooleandisabledbooleanopenbooleanonOpenChangefunctioncloseOnOutsideClickbooleantruecloseOnInsideClickbooleanfalseAccessibility
Adheres to the menu button role requirements.
The Popover component accepts custom elements as children. This means that you can show your component as dropodown when the trigger is activated. That said, if you're using custom elements you have to follow all the ARIA requirements and introduce the required behaviours, like focus handling (eg. using the autofocus attribute) and keyboard navigation with the roving tabindex. There is also a react package to easily handle this.
Example
Keyboard interactions
| Name | Description |
|---|---|
| tab | Move focus on the trigger if closed. If opened move the focus inside the popover. If no focusable elements are found, move focus outside and close the popover. |
| enter | Open the menu and set the focus on the first focusable element inside the popover. |