@aria-ui/popover

PopoverContentDataAttributes #

data-align

Type: "center" | "start" | "end"

data-mounted

Type: ""

data-side

Type: "bottom" | "left" | "right" | "top"

data-state

Type: "open" | "closed"

PopoverContentEvents #

escapeKeyDown

Fired when the escape key is pressed.

By default, the popover will be closed. It can be prevented by calling preventDefault().

Type: EscapeKeyDownEvent

focusOutside

Fired when the focus is moved outside the element.

By default, the popover will be closed. It can be prevented by calling preventDefault().

Type: FocusOutsideEvent

interactOutside

Fired when an interaction (pointer or focus) happens outside the component.

By default, the popover will be closed. It can be prevented by calling preventDefault().

Type: InteractOutsideEvent

pointerDownOutside

Fired when the pointer is pressed down outside the element.

By default, the popover will be closed. It can be prevented by calling preventDefault().

Type: PointerDownOutsideEvent

PopoverContentProps #

altBoundary

Whether to check the alternate elementContext’s boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Type: boolean

Default: false

autoUpdate

Options to activate auto-update listeners

Type: boolean | AutoUpdateOptions

See

https://floating-ui.com/docs/autoUpdate

Default: true

boundary

Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.

Type: Boundary

Default: 'clippingAncestors'

elementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Type: ElementContext

Default: 'floating'

fitViewport

Whether to constrain the floating element's width and height to not exceed the viewport.

Type: boolean

Default: false

flip

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.

Type: boolean | Placement[]

Default: true

hide

Whether to hide the floating element when the reference element or the floating element is fully clipped.

Type: boolean

Default: false

hoist

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>.

Type: boolean

Default: true

inline

Whether to improve positioning for inline reference elements that span over multiple lines.

Type: boolean

Default: false

offset

The distance between the reference and floating element.

Type: OffsetOptions

Default: 6

overflowPadding

Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.

Type: number

Default: 4

overlap

Whether the floating element can overlap the reference element to keep it in view.

Type: boolean

Default: false

placement

The initial placement of the floating element

Type: Placement

Default: "top"

rootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Type: RootBoundary

Default: 'viewport'

sameHeight

Whether to constrain the floating element's height so that it matches the reference element.

Type: boolean

Default: false

sameWidth

Whether to constrain the floating element's width so that it matches the reference element.

Type: boolean

Default: false

shift

Whether the floating element should shift to keep it in view.

Type: boolean

Default: true

strategy

The strategy to use for positioning

Type: "fixed" | "absolute"

Default: "absolute"

transform

Whether to use CSS transforms to position the floating element instead of layout (top and left CSS properties). CSS transforms are more performant, but can cause conflicts with transform animations.

Type: boolean

Default: false

PopoverRootEvents #

openChange

Type: CustomEvent<boolean>

PopoverRootProps #

defaultOpen

Whether the popover is open by default.

Type: boolean

Default: false

open

Whether the popover is open.

Type: boolean

Default: false

EscapeKeyDownEvent #

Type: CustomEvent<{ originalEvent: KeyboardEvent }>

popoverRootEvents #

Type: EventDeclarations<PopoverRootEvents>