@aria-ui/popover

@aria-ui/popover

PopoverContent

PopoverContentElement

A custom PopoverContent element.

Constructors

new PopoverContentElement(): PopoverContentElement

Properties

Property	Type	Description
altBoundary	boolean	See https://floating-ui.com/docs/detectoverflow Default true
autoUpdate	boolean | Partial<object>	Options to activate auto-update listeners See https://floating-ui.com/docs/autoUpdate Default true
boundary	Boundary	See https://floating-ui.com/docs/detectoverflow Default 'clippingAncestors'
elementContext	ElementContext	See https://floating-ui.com/docs/detectoverflow Default 'floating'
fitViewport	boolean	Whether to constrain the floating element's width and height to not exceed the viewport. Default false
flip	boolean | Placement[]	Whether to flip the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred placement does not fit. Default true
hide	boolean	Whether to hide the floating element when the reference element or the floating element is fully clipped. Default false
hoist	boolean	Whether to use the browser Popover API to place the floating element on top of other page content. When enabled, the floating element won't be clipped by an ancestor. This provides a similar result to React's <Portals> or Vue's <Teleport>. Default true
inline	boolean	Whether to improve positioning for inline reference elements that span over multiple lines. Default false
offset	null | OffsetOptions	The distance between the reference and floating element. Default 4
onEscapeKeyDown	null | (event: KeyboardEvent) => void	Event handler called when the escape key is pressed. By default, the popover will be closed. It can be prevented by calling event.preventDefault.
onFocusOutside	null | (event: FocusOutsideEvent) => void	Event handler called when the focus is moved outside the element. By default, the popover will be closed. It can be prevented by calling event.preventDefault.
onInteractOutside	null | (event: InteractOutsideEvent) => void	Function called when an interaction (pointer or focus) happens outside the component. By default, the popover will be closed. It can be prevented by calling event.preventDefault.
onPointerDownOutside	null | (event: PointerDownOutsideEvent) => void	Event handler called when the pointer is pressed down outside the element. By default, the popover will be closed. It can be prevented by calling event.preventDefault.
overflowPadding	number	Default 4
overlap	boolean	Whether the floating element can overlap the reference element to keep it in view. Default false
placement	Placement	The initial placement of the floating element Default "top"
rootBoundary	RootBoundary	See https://floating-ui.com/docs/detectoverflow Default 'viewport'
sameHeight	boolean	Whether to constrain the floating element's height so that it matches the reference element. Default false
sameWidth	boolean	Whether to constrain the floating element's width so that it matches the reference element. Default false
shift	boolean	Whether the floating element should shift to keep it in view. Default true
strategy	"absolute" | "fixed"	The strategy to use for positioning Default "absolute"
transform	boolean	Whether to use transform: translate3d() for positioning instead of top and left (layout) to place the floating element. Default false

PopoverContentDataAttributes

Properties

Property	Type
data-align	"center" | "start" | "end"
data-side	"bottom" | "left" | "right" | "top"
data-state	"open" | "closed"

PopoverContentProps

Properties

Property	Type	Description
altBoundary	boolean	See https://floating-ui.com/docs/detectoverflow Default true
autoUpdate	boolean | Partial<object>	Options to activate auto-update listeners See https://floating-ui.com/docs/autoUpdate Default true
boundary	Boundary	See https://floating-ui.com/docs/detectoverflow Default 'clippingAncestors'
elementContext	ElementContext	See https://floating-ui.com/docs/detectoverflow Default 'floating'
fitViewport	boolean	Whether to constrain the floating element's width and height to not exceed the viewport. Default false
flip	boolean | Placement[]	Whether to flip the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred placement does not fit. Default true
hide	boolean	Whether to hide the floating element when the reference element or the floating element is fully clipped. Default false
hoist	boolean	Whether to use the browser Popover API to place the floating element on top of other page content. When enabled, the floating element won't be clipped by an ancestor. This provides a similar result to React's <Portals> or Vue's <Teleport>. Default true
inline	boolean	Whether to improve positioning for inline reference elements that span over multiple lines. Default false
offset	null | OffsetOptions	The distance between the reference and floating element. Default 4
onEscapeKeyDown	null | (event: KeyboardEvent) => void	Event handler called when the escape key is pressed. By default, the popover will be closed. It can be prevented by calling event.preventDefault.
onFocusOutside	null | (event: FocusOutsideEvent) => void	Event handler called when the focus is moved outside the element. By default, the popover will be closed. It can be prevented by calling event.preventDefault.
onInteractOutside	null | (event: InteractOutsideEvent) => void	Function called when an interaction (pointer or focus) happens outside the component. By default, the popover will be closed. It can be prevented by calling event.preventDefault.
onPointerDownOutside	null | (event: PointerDownOutsideEvent) => void	Event handler called when the pointer is pressed down outside the element. By default, the popover will be closed. It can be prevented by calling event.preventDefault.
overflowPadding	number	Default 4
overlap	boolean	Whether the floating element can overlap the reference element to keep it in view. Default false
placement	Placement	The initial placement of the floating element Default "top"
rootBoundary	RootBoundary	See https://floating-ui.com/docs/detectoverflow Default 'viewport'
sameHeight	boolean	Whether to constrain the floating element's height so that it matches the reference element. Default false
sameWidth	boolean	Whether to constrain the floating element's width so that it matches the reference element. Default false
shift	boolean	Whether the floating element should shift to keep it in view. Default true
strategy	"absolute" | "fixed"	The strategy to use for positioning Default "absolute"
transform	boolean	Whether to use transform: translate3d() for positioning instead of top and left (layout) to place the floating element. Default false

PopoverRoot

PopoverRootElement

A custom PopoverRoot element.

Constructors

new PopoverRootElement(): PopoverRootElement

Properties

Property	Type	Description
defaultOpen	boolean	Whether the popover is open by default. Default false
onOpenChange	null | (open: boolean) => void	Event handler called then the open state changes because of a user interaction. Default null
open	boolean	Whether the popover is open. Default false

PopoverTrigger

PopoverTriggerElement

A custom PopoverTrigger element.

Constructors

new PopoverTriggerElement(): PopoverTriggerElement