ComponentsPopover
Popover
A popover is a non-modal dialog that floats around a trigger. It is used to display contextual information to the user, and should be paired with a clickable trigger element.
A popover is a non-modal dialog that floats around a trigger. It is used to display contextual information to the user, and should be paired with a clickable trigger element.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
boolean
Whether to automatically set focus on the first focusable content within the popover when opened.
boolean
Whether to close the popover when the escape key is pressed.
boolean
Whether to close the popover when the user clicks outside of the popover.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ anchor: string trigger: string content: string title: string description: string closeTrigger: string positioner: string arrow: string }>
The ids of the elements in the popover. Useful for composition.
HTMLElement | (() => MaybeElement)
The element to focus on when the popover is opened.
boolean
Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
(event: KeyboardEvent) => void
Function called when the escape key is pressed
(event: FocusOutsideEvent) => void
Function called when the focus is moved outside the combobox
(event: InteractOutsideEvent) => void
Function called when an interaction happens outside the combobox
(details: OpenChangeDetails) => void
Function invoked when the popover opens or closes
(event: PointerDownOutsideEvent) => void
Function called when the pointer is pressed down outside the combobox
boolean
Whether the popover is open
boolean
Whether the popover is rendered in a portal
PositioningOptions
The user provided options used to position the popover content
Dict<any>
Dict<any>
Dict<any>
() => void
Function to close the popover
Dict<any>
Dict<any>
Dict<any>
boolean
Whether the popover is open
() => void
Function to open the popover
boolean
Whether the popover is portalled
Dict<any>
(options?: Partial<PositioningOptions> | undefined) => void
Function to reposition the popover
Dict<any>
Dict<any>
boolean
Whether to enable lazy mounting. Defaults to `false`.
() => void
boolean
boolean
Whether to unmount on exit. Defaults to `false`.