Panel API

API documentation for Panel component

Panel#

Props#

Defines valid properties in Panel 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?: PanelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelInstance) => 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<PanelPassThrough>	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: PanelInstance) => ReactNode)	null	The children to render.
toggleable	boolean	false	When enabled, the content of panel can be expanded and collapsed by clicking the header.
onToggle	(event: PanelToggleEvent) => void	null	Callback fired when the panel's toggle state changes.
collapsed	boolean	false	Whether the panel is collapsed.
onCollapse	(event: SyntheticEvent) => void	null	Callback triggered when the panel is collapsed.
onExpand	(event: SyntheticEvent) => void	null	Callback triggered when the panel is expanded.
[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 Panel component.

name	type	default	description
collapsed	boolean	null	Whether the panel is collapsed.

Exposes#

Defines the methods and properties exposed by Panel component.

name	type	default	description
state	usePanelState	null	The state of the usePanel.
contentRef	RefObject<HTMLDivElement>	null	Reference to the content element of the panel.
toggle	(event: SyntheticEvent) => void	null	Toggles the collapsed state of the panel.
expand	(event: SyntheticEvent) => void	null	Expands the panel.
collapse	(event: SyntheticEvent) => void	null	Collapses the panel.
onButtonClick	(event: SyntheticEvent) => void	null	Callback for when the toggle button is clicked.

Events#

PanelToggleEvent

Event fired when the panel's toggle state changes.

name	type	description
originalEvent	SyntheticEvent	The original event that triggered the toggle.
value	boolean	The new value of the panel's toggle state.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Panel component.

name	type	default	description
root	PanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
header	PanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
headerActions	PanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header actions's DOM element.
title	PanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the title's DOM element.
content	PanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
collapse	PanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the collapse's DOM element.
footer	PanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.

Types#

Instance

Instance of Panel component.

values
ComponentInstance<PanelProps, PanelState, PanelExposes>

PanelHeader#

Props#

Defines valid properties in PanelHeadercomponent.

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?: PanelHeaderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelHeaderInstance) => 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<PanelHeaderPassThrough>	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: PanelHeaderInstance) => 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.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelHeadercomponent.

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

Types#

Instance

Instance of PanelHeadercomponent.

values
ComponentInstance<PanelHeaderProps, PanelHeaderState, PanelHeaderExposes>

PanelHeaderActions#

Props#

Defines valid properties in PanelHeaderActions 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?: PanelHeaderActionsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelHeaderActionsInstance) => 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<PanelHeaderActionsPassThrough>	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: PanelHeaderActionsInstance) => 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.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelHeaderActions component.

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

Types#

Instance

Instance of PanelHeaderActions component.

values
ComponentInstance<PanelHeaderActionsProps, PanelHeaderActionsState, PanelHeaderActionsExposes>

PanelTitle#

Props#

Defines valid properties in PanelTitlecomponent.

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?: PanelTitleInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelTitleInstance) => 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<PanelTitlePassThrough>	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: PanelTitleInstance) => 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.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelTitlecomponent.

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

Types#

Instance

Instance of PanelTitlecomponent.

values
ComponentInstance<PanelTitleProps, PanelTitleState, PanelTitleExposes>

PanelCollapse#

Props#

Defines valid properties in PanelCollapse 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?: PanelCollapseInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelCollapseInstance) => 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<PanelCollapsePassThrough>	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: PanelCollapseInstance) => ReactNode)	null	The children to render.
iconOnly	boolean	true	Whether to show the PanelCollapse with a borderless style.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	'secondary'	Severity type of the PanelCollapse.
variant	"link" \| "text" \| "outlined"	'text'	Variant of the PanelCollapse.
rounded	boolean	true	Whether to show the PanelCollapse with a rounded style.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelCollapse component.

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

Types#

Instance

Instance of PanelCollapse component.

values
ComponentInstance<PanelCollapseProps, PanelCollapseState, PanelCollapseExposes>

PanelContent#

Props#

Defines valid properties in PanelContent 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?: PanelContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelContentInstance) => 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<PanelContentPassThrough>	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: PanelContentInstance) => 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.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelContent component.

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

Types#

Instance

Instance of PanelContent component.

values
ComponentInstance<PanelContentProps, PanelContentState, PanelContentExposes>

PanelFooter#

Props#

Defines valid properties in PanelFooter 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?: PanelFooterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelFooterInstance) => 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<PanelFooterPassThrough>	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: PanelFooterInstance) => 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.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelFooter component.

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

Types#

Instance

Instance of PanelFooter component.

values
ComponentInstance<PanelFooterProps, PanelFooterState, PanelFooterExposes>

usePanel#

Props#

Props for the usePanel hook.

name	type	default	description
collapsed	boolean	false	Whether the panel is collapsed.
toggleable	boolean	false	Indicates if the panel can be toggled.
onCollapse	(event: SyntheticEvent) => void	null	Callback triggered when the panel is collapsed.
onExpand	(event: SyntheticEvent) => void	null	Callback triggered when the panel is expanded.
onToggle	(event: usePanelToggleEvent) => void	null	Callback triggered when the panel's toggle state changes.

State#

Defines valid state in usePanel.

name	type	default	description
collapsed	boolean	null	Whether the panel is collapsed.

Exposes#

Defines the methods and properties exposed by usePanel.

name	type	default	description
state	usePanelState	null	The state of the usePanel.
contentRef	RefObject<HTMLDivElement>	null	Reference to the content element of the panel.
toggle	(event: SyntheticEvent) => void	null	Toggles the collapsed state of the panel.
expand	(event: SyntheticEvent) => void	null	Expands the panel.
collapse	(event: SyntheticEvent) => void	null	Collapses the panel.
onButtonClick	(event: SyntheticEvent) => void	null	Callback for when the toggle button is clicked.

Events#

usePanelToggleEvent

Event object for the onToggle callback.

name	type	description
originalEvent	SyntheticEvent	The original event that triggered the toggle.
value	boolean	The new value of the panel's toggle state.

Types#

Instance

Instance of usePanel headless.

values
HeadlessInstance<usePanelProps, usePanelState, usePanelExposes>