Popover API

API documentation for Popover component

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?: PopoverInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PopoverInstance) => 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<PopoverPassThrough>	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: PopoverInstance) => 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.
dismissable	boolean	true	Enables to hide the overlay when outside is clicked.
appendTo	HTMLElement \| "body" \| "self"	body	A valid query selector or an HTMLElement to specify where the overlay gets attached.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
breakpoints	PopoverBreakpoints	null	Object literal to define widths per screen size.
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
visible	boolean	false	Current visible state as a boolean.

Exposes#

Defines the methods and properties exposed by Popover component.

name	type	default	description
hide	() => void	null	Hides the popover.
show	() => void	null	Shows the popover.
onContentKeydown	(event: KeyboardEvent<HTMLDivElement>) => void	null	The function to handle the content keydown event.
triggerRef	RefObject<{ elementRef: RefObject<HTMLElement> }>	undefined	A valid query selector or an HTMLElement to specify where the trigger gets attached.
containerRef	RefObject<{ elementRef: RefObject<HTMLElement> }>	undefined	A valid query selector or an HTMLElement to specify where the container gets attached.
onBeforeEnter	() => void	null	Callback fired before enter animation.
onLeave	() => void	null	Callback fired on leave.
onAfterLeave	() => void	null	Callback fired after leave animation.
onOverlayClick	() => void	null	Callback fired when the overlay is clicked.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Popover component.

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

Types#

Instance

Instance of Popover component.

values
ComponentInstance<PopoverProps, PopoverState, PopoverExposes>

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?: ButtonInstance) => CSSProperties)) & (CSSProperties \| ((instance?: PopoverTriggerInstance) => CSSProperties))	null	The style to apply to the component.
className	(string \| ((instance?: ButtonInstance) => string)) & (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	ButtonPassThrough & Record<PropertyKey, unknown> & 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: ButtonInstance) => ReactNode)) & (ReactNode \| ((instance: PopoverTriggerInstance) => ReactNode))	null	The children to render.
size	"small" \| "large" \| "normal"	null	Size of the Button.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	null	Severity type of the Button.
variant	"link" \| "text" \| "outlined"	null	Variant of the Button.
plain	boolean	null	Whether to show the Button with a plain style.
rounded	boolean	null	Whether to show the Button with a rounded style.
raised	boolean	null	Whether to show the Button with a raised style.
iconOnly	boolean	null	Whether to show the Button with a borderless style.
fluid	boolean	null	Whether to show the Button with a fluid width.
[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	PopoverInstance	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	PopoverInstance	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	PopoverInstance	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?: ButtonInstance) => CSSProperties)) & (CSSProperties \| ((instance?: PopoverCloseInstance) => CSSProperties))	null	The style to apply to the component.
className	(string \| ((instance?: ButtonInstance) => string)) & (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	ButtonPassThrough & Record<PropertyKey, unknown> & 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: ButtonInstance) => ReactNode)) & (ReactNode \| ((instance: PopoverCloseInstance) => ReactNode))	null	The children to render.
size	"small" \| "large" \| "normal"	null	Size of the Button.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	null	Severity type of the Button.
variant	"link" \| "text" \| "outlined"	null	Variant of the Button.
plain	boolean	null	Whether to show the Button with a plain style.
rounded	boolean	null	Whether to show the Button with a rounded style.
raised	boolean	null	Whether to show the Button with a raised style.
iconOnly	boolean	null	Whether to show the Button with a borderless style.
fluid	boolean	null	Whether to show the Button with a fluid width.
[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	PopoverInstance	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>

Popover API

Popover#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

PopoverTrigger#

Props#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

PopoverPortal#

Props#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

PopoverContent#

Props#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

PopoverClose#

Props#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance