Popover

The Popover component displays floating informative and actionable content in relation to a target.

Import#

import { Popover } from '@volue/wave-react';

// you may also access Popover's context via hook:
// import { usePopoverContext } from '@volue/wave-react';

Popover is a compound component that consists of multiple parts:

Popover: The wrapper that contains all the parts of a popover and provides context for its children.
Popover.Trigger: The button that opens the popover.
Popover.Content: The container for the popover's content.
Popover.Close: The button that closes the popover.

Examples#

Basic#

Popover works in an uncontrolled way by default, meaning each Popover component instance is responsible for managing its own state internally.

The Popover.Trigger component can be instructed via as prop to render as something else. In our case we want to render it as a <Button> component.

Controlled Popover#

You can easily make the popover controlled, by passing your own state to isOpen prop. onIsOpenChange handler is called when the state of the popover changes, allowing you to sync state.

Popover with header and body#

Customizing placement#

Popover uses Positioner under the hood. Use placement prop to customize placement of the Popover.Content.

Popover with form example#

With custom anchor#

By default, Popover uses its trigger as an "anchor" for positioning. With Popover.Anchor you can anchor the content to another element.

Accessibility features#

When the popover opens, focus is sent into the popover and set to the first tabbable element. Focus stays trapped within the popover until close is requested. After closing, focus is restored back to the trigger element.
Clicking away closes the overlay.
Pressing ESC closes the overlay.
The popover is portaled (via Portal utility) to the end of document.body to break it out of the source order.

API Reference#

Popover#

Prop	Type	Default
`isOpen`	`boolean`	`false`
`defaultIsOpen`	`boolean`	No default value
`onIsOpenChange`	`function`	No default value

Popover.Trigger#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value

Popover.Content#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`padding`	`SpacingToken`	No default value
`placement`	`enum`	`"bottom_left"`
`anchorOffset`	`number`	`8`
`onExitComplete`	`function`	`() => void`
`onCloseAutoFocus`	`function`	No default value

Popover.Title#

In addition to the props below, you can pass Heading props.

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value

Popover.Close#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value

Popover.Anchor#

An optional element to position the Popover.Content against.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value