Popover API

API documentation for Popover component

PopoverRoot#

Props#

Defines valid properties in Popover component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PopoverRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PopoverRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PopoverRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PopoverRootInstance) => ReactNode)	null	The children to render.
defaultOpen	boolean	undefined	Whether the popover is open by default.
open	boolean	undefined	Whether the popover is open.
onOpenChange	(event: usePopoverOpenChangeEvent) => void	undefined	Callback to invoke when the open state changes.
closeOnEscape	boolean	true	Specifies if pressing escape key should hide the dialog.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Popover component.

name	type	default	description
open	boolean	null	Whether the popover is open.
anchorEl	HTMLElement	null	The anchor element.
positionerEl	HTMLDivElement	null	The positioner element.
arrowEl	HTMLDivElement	null	The arrow element.

Exposes#

Defines the methods and properties exposed by Popover component.

name	type	default	description
state	usePopoverState	null	The state of the usePopover.
presence	{ present: boolean; exiting: boolean; mounted: boolean; ref: RefObject<HTMLElement> }	null	The presence of the usePopover.
setOpen	(open: boolean, originalEvent?: Event) => void	null	Sets the open state.
setArrowRef	(node: HTMLDivElement) => void	null	Sets the arrow element.
setAnchorRef	(node: HTMLElement) => void	null	Sets the anchor element.
setPositionerRef	(node: HTMLDivElement) => void	null	Sets the positioner element.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Popover component.

name	type	default	description
root	PopoverRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of Popover component.

values
ComponentInstance<PopoverRootProps, PopoverRootState, PopoverRootExposes>

PopoverTrigger#

Props#

Defines valid properties in PopoverTrigger component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PopoverTriggerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PopoverTriggerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PopoverTriggerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PopoverTriggerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PopoverTrigger component.

name	type	default	description
popover	PopoverRootInstance	null	The Popover component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PopoverTrigger component.

name	type	default	description
root	PopoverTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PopoverTrigger component.

values
ComponentInstance<PopoverTriggerProps, PopoverTriggerState, PopoverTriggerExposes>

PopoverPortal#

Props#

Defines valid properties in PopoverPortal component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	(CSSProperties \| ((instance?: PortalInstance) => CSSProperties)) & (CSSProperties \| ((instance?: PopoverPortalInstance) => CSSProperties))	null	The style to apply to the component.
className	(string \| ((instance?: PortalInstance) => string)) & (string \| ((instance?: PopoverPortalInstance) => string))	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	PortalPassThrough & Record<PropertyKey, unknown> & PopoverPortalPassThrough	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	(ReactNode \| ((instance: PortalInstance) => ReactNode)) & (ReactNode \| ((instance: PopoverPortalInstance) => ReactNode))	null	The children to render.
element	ReactNode	null	The element to be rendered as the portal.
appendTo	HTMLElement \| "body" \| "self"	'body'	The DOM element where the portal should be appended to.
visible	boolean	false	Whether the portal is visible or not.
onMounted	() => void	null	Callback function to invoke when the portal is mounted.
onUnmounted	() => void	null	Callback function to invoke when the portal is unmounted.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PopoverPortal component.

name	type	default	description
popover	PopoverRootInstance	null	The Popover component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PopoverPortal component.

name	type	default	description
root	PopoverPortalPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PopoverPortal component.

values
ComponentInstance<PopoverPortalProps, PopoverPortalState, PopoverPortalExposes>

PopoverContent#

Props#

Defines valid properties in PopoverContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PopoverContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PopoverContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PopoverContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PopoverContentInstance) => ReactNode)	null	The children to render.
autoFocus	boolean	true	Whether to focus the first focusable element when the popover is opened.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PopoverContent component.

name	type	default	description
popover	PopoverRootInstance	null	The Popover component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PopoverContent component.

name	type	default	description
root	PopoverContentPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PopoverContent component.

values
ComponentInstance<PopoverContentProps, PopoverContentState, PopoverContentExposes>

PopoverClose#

Props#

Defines valid properties in PopoverClose component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PopoverCloseInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PopoverCloseInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PopoverClosePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PopoverCloseInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PopoverClose component.

name	type	default	description
popover	PopoverRootInstance	null	The Popover component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PopoverClose component.

name	type	default	description
root	PopoverClosePassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PopoverClose component.

values
ComponentInstance<PopoverCloseProps, PopoverCloseState, PopoverCloseExposes>