Drawer API

API documentation for Drawer component

DrawerRoot#

Props#

Defines valid properties in Drawer 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?: DrawerRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerRootInstance) => 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<DrawerRootPassThrough>	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: DrawerRootInstance) => ReactNode)	null	The children to render.
position	"top" \| "right" \| "bottom" \| "left" \| "full"	left	Position of the drawer.
onOpenChange	(event: DrawerRootChangeEvent) => void	null	Callback function that is called when the trigger is clicked.
open	boolean	null	Specifies the visibility of the drawer.
defaultOpen	boolean	null	Specifies the default visibility of the drawer.
modal	boolean	null	Defines if background should be blocked when drawer is displayed.
dismissable	boolean	true	Whether clicking outside closes the drawer.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
appendTo	HTMLElement \| "body" \| "self"	body	A valid query selector or an HTMLElement to specify where the drawer gets attached.
[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 Drawer component.

name	type	default	description
opened	boolean	null	Whether the drawer is currently opened.

Exposes#

Defines the methods and properties exposed by Drawer component.

name	type	default	description
state	useDrawerState	null	Current state of the drawer.
maskRef	RefObject<{ elementRef: RefObject<HTMLDivElement> }>	null	Reference to the mask element.
rootRef	RefObject<{ elementRef: RefObject<HTMLDivElement> }>	null	Reference to the root element.
closeButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the close button element.
onOpenStateChange	() => void	null	Method to change the open state of the drawer.
close	() => void	null	Method to close the drawer.
onMaskMouseDown	(event: MouseEvent) => void	null	Handler for mask mouse down events.
onMaskMouseUp	() => void	null	Handler for mask mouse up events.
onMaskEnter	() => void	null	Handler for mask enter events.
onEnter	() => void	null	Handler for enter events.
onAfterEnter	() => void	null	Handler for after enter events.
onLeave	() => void	null	Handler for leave events.
onAfterLeave	() => void	null	Handler for after leave events.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Drawer component.

name	type	default	description
root	DrawerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
backdrop	DrawerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the backdrop's DOM element.
trigger	DrawerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the trigger's DOM element.
portal	DrawerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the portal's DOM element.
header	DrawerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
title	DrawerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the title's DOM element.
close	DrawerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the close's DOM element.
content	DrawerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
footer	DrawerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.

Types#

Instance

Instance of Drawer component.

values
ComponentInstance<DrawerRootProps, DrawerRootState, DrawerRootExposes>

DrawerTrigger#

Props#

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

name	type	default	description
drawer	DrawerRootInstance	null	Instance of the Drawer component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerTrigger component.

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

Types#

Instance

Instance of DrawerTrigger component.

values
ComponentInstance<DrawerTriggerProps, DrawerTriggerState, DrawerTriggerExposes>

DrawerBackdrop#

Props#

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

name	type	default	description
drawer	DrawerRootInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerBackdrop component.

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

Types#

Instance

Instance of DrawerBackdrop component.

values
ComponentInstance<DrawerBackdropProps, DrawerBackdropState, DrawerBackdropExposes>

DrawerPortal#

Props#

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

name	type	default	description
drawer	DrawerRootInstance	null	Instance of the Drawer component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerPortal component.

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

Types#

Instance

Instance of DrawerPortal component.

values
ComponentInstance<DrawerPortalProps, DrawerPortalState, DrawerPortalExposes>

DrawerHeader#

Props#

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

name	type	default	description
drawer	DrawerRootInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerHeader component.

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

Types#

Instance

Instance of DrawerHeader component.

values
ComponentInstance<DrawerHeaderProps, DrawerHeaderState, DrawerHeaderExposes>

DrawerTitle#

Props#

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

name	type	default	description
drawer	DrawerRootInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerTitle component.

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

Types#

Instance

Instance of DrawerTitle component.

values
ComponentInstance<DrawerTitleProps, DrawerTitleState, DrawerTitleExposes>

DrawerClose#

Props#

Defines valid properties in DrawerClose 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?: DrawerCloseInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DrawerCloseInstance) => 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<DrawerClosePassThrough>	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: DrawerCloseInstance) => ReactNode)	null	The children to render.
iconOnly	boolean	true	Whether to show the DrawerClose with a borderless style.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	'secondary'	Severity type of the DrawerClose.
variant	"link" \| "text" \| "outlined"	'text'	Variant of the DrawerClose.
rounded	boolean	true	Whether to show the DrawerClose with a rounded style.
[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 DrawerClose component.

name	type	default	description
drawer	DrawerRootInstance	null	Instance of the Drawer component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerClose component.

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

Types#

Instance

Instance of DrawerClose component.

values
ComponentInstance<DrawerCloseProps, DrawerCloseState, DrawerCloseExposes>

DrawerContent#

Props#

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

name	type	default	description
drawer	DrawerRootInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerContent component.

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

Types#

Instance

Instance of DrawerContent component.

values
ComponentInstance<DrawerContentProps, DrawerContentState, DrawerContentExposes>

DrawerFooter#

Props#

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

name	type	default	description
drawer	DrawerRootInstance	null	The Drawer component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DrawerFooter component.

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

Types#

Instance

Instance of DrawerFooter component.

values
ComponentInstance<DrawerFooterProps, DrawerFooterState, DrawerFooterExposes>

useDrawer#

Props#

Defines valid properties in useDrawer.

name	type	default	description
open	boolean	null	Specifies the visibility of the drawer.
defaultOpen	boolean	null	Specifies the default visibility of the drawer.
modal	boolean	null	Defines if background should be blocked when drawer is displayed.
dismissable	boolean	true	Whether clicking outside closes the drawer.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
appendTo	HTMLElement \| "body" \| "self"	body	A valid query selector or an HTMLElement to specify where the drawer gets attached.
onOpenChange	(event: useDrawerChangeEvent) => void	null	Callback function that is called when the trigger is clicked.

State#

Defines valid state in useDrawer.

name	type	default	description
opened	boolean	null	Whether the drawer is currently opened.

Exposes#

Defines the methods and properties exposed by useDrawer.

name	type	default	description
state	useDrawerState	null	Current state of the drawer.
maskRef	RefObject<{ elementRef: RefObject<HTMLDivElement> }>	null	Reference to the mask element.
rootRef	RefObject<{ elementRef: RefObject<HTMLDivElement> }>	null	Reference to the root element.
closeButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the close button element.
onOpenStateChange	() => void	null	Method to change the open state of the drawer.
close	() => void	null	Method to close the drawer.
onMaskMouseDown	(event: MouseEvent) => void	null	Handler for mask mouse down events.
onMaskMouseUp	() => void	null	Handler for mask mouse up events.
onMaskEnter	() => void	null	Handler for mask enter events.
onEnter	() => void	null	Handler for enter events.
onAfterEnter	() => void	null	Handler for after enter events.
onLeave	() => void	null	Handler for leave events.
onAfterLeave	() => void	null	Handler for after leave events.

Events#

useDrawerChangeEvent

Event fired when the drawer's open state changes.

name	type	description
value	boolean	The value of the drawer.

Types#

Instance

Instance of useDrawer headless.

values
HeadlessInstance<useDrawerProps, useDrawerState, useDrawerExposes>