Tree API

API documentation for Tree component

Tree#

Props#

Defines valid properties in Tree 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?: TreeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TreeInstance) => 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<TreePassThrough>	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: TreeInstance) => ReactNode)	null	The children to render.
onExpandedChange	(event: TreeExpandedChangeEvent) => void	null	Callback fired when the tree's expanded keys state changes.
onSelectionChange	(event: TreeSelectionChangeEvent) => void	null	Callback fired when the tree's selection keys state changes.
onValueChange	(event: TreeValueChangeEvent) => void	null	Callback fired when the tree's value state changes.
value	TreeNode[]	null	An array of treenodes.
expandedKeys	TreeExpandedKeys	null	A record of keys to represent the state of the tree expansion state in controlled mode.
defaultExpandedKeys	TreeExpandedKeys	null	The default expanded keys when used in uncontrolled mode.
selectionKeys	TreeSelectionKeys \| TreeCheckboxSelectionKeys	null	A record of keys to represent the selection state in controlled mode. For single/multiple mode: Record<string, boolean> For checkbox mode: Record<string, { checked: boolean, partialChecked: boolean }>
defaultSelectionKeys	TreeSelectionKeys \| TreeCheckboxSelectionKeys	null	The default selected keys when used in uncontrolled mode.
selectionMode	"checkbox" \| "multiple" \| "single"	null	Defines the selection mode.
metaKeySelection	boolean	false	Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect multiple items. When set to false selection of each item can be toggled individually.
scrollHeight	"flex"	null	Height of the scroll viewport in fixed units or the 'flex' keyword for a dynamic size.
highlightOnSelect	boolean	false	Highlights automatically the first item.
draggableNodes	boolean	null	Whether the tree nodes can be dragged.
droppableNodes	boolean	null	Whether the tree can accept dropped nodes.
draggableScope	string \| string[]	null	A unique identifier for the draggable scope.
droppableScope	string \| string[]	null	A unique identifier for the droppable scope.
validateDrop	boolean	false	Whether to validate drops before processing.
onToggle	(event: useTreeToggleEvent) => void	null	Callback fired when a node is toggled.
onExpand	(event: useTreeExpandEvent) => void	null	Callback fired when a node is toggled.
onCollapse	(event: useTreeCollapseEvent) => void	null	Callback fired when a node is toggled.
onClick	(event: useTreeClickEvent) => void	null	Callback fired when a node is clicked.
onSelect	(event: useTreeSelectEvent) => void	null	Callback fired when a node is selected.
onUnselect	(event: useTreeUnselectEvent) => void	null	Callback fired when a node is unselected.
onNodeDrop	(event: useTreeNodeDropEvent) => void	null	Callback fired when a node is dropped.
onDragEnter	(event: useTreeDragEnterEvent) => void	null	Callback fired when drag enters the tree.
onDragLeave	(event: useTreeDragLeaveEvent) => void	null	Callback fired when drag leaves the tree.
[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 Tree component.

name	type	default	description
expandedKey	TreeExpandedKeys	null	The current expanded keys of the tree.
selectedKey	TreeSelectionKeys \| TreeCheckboxSelectionKeys	null	The current selected keys of the tree.
dragHover	boolean	null	Whether the tree is in drag hover state.

Exposes#

Defines the methods and properties exposed by Tree component.

name	type	default	description
state	useTreeState	null	The state of the useTree.
getNodes	() => TreeNode[]	null	Gets the list of tree nodes.
onKeyDown	(event: KeyboardEvent, node: TreeNode, level: number, expanded: boolean, leaf: boolean) => void	null	Handles keyboard navigation on tree nodes.
onNodeToggle	(event: SyntheticEvent, node: TreeNode) => void	null	Toggles the expansion state of a node.
onNodeClick	(event: MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>, node: TreeNode, nodeTouched?: boolean) => void	null	Handles node click event.
onClick	(event: MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>, node: TreeNode, nodeTouched?: boolean) => void	null	Handles content click event. Automatically delegates to checkbox or node click based on selection mode.
onCheckboxChange	(event: ChangeEvent<HTMLInputElement>, node: TreeNode) => void	null	Handles checkbox state change for checkbox selection mode.
isNodeSelected	(node: TreeNode) => boolean	null	Checks if a node is selected.
findNodeInfo	(nodeKey: string) => { level: number; posInSet: number; setSize: number }	null	Finds information about a node's position in the tree.
allowDrop	(node: TreeNode) => boolean	null	Checks if a node can be dropped based on drag-drop rules.

Events#

TreeExpandedChangeEvent

Event fired when the tree's expanded keys state changes.

name	type	description
value	TreeExpandedKeys	The new expanded keys.
originalEvent	SyntheticEvent	The original event that triggered the expansion change.

TreeSelectionChangeEvent

Event fired when the tree's selection keys state changes.

name	type	description
value	TreeSelectionKeys \| TreeCheckboxSelectionKeys	The new selection keys.
originalEvent	SyntheticEvent	The original event that triggered the selection change.

TreeValueChangeEvent

Event fired when the tree's value state changes.

name	type	description
value	TreeNode[]	The new value.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Tree component.

name	type	default	description
root	TreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
wrapper	TreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the wrapper's DOM element.
list	TreePassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the list's DOM element.
node	TreePassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the node's DOM element.
content	TreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
label	TreePassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the label's DOM element.
toggle	TreePassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the toggle button's DOM element.
toggleIcon	TreePassThroughType<SVGProps<SVGSVGElement>>	null	Used to pass attributes to the toggle icon's DOM element.
pcCheckbox	TreePassThroughType<HTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the checkbox's DOM element.
pcFilter	TreePassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the filter's DOM element.
header	TreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
footer	TreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.
empty	TreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the empty message's DOM element.
dropPoint	TreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the drop point's DOM element.

Types#

Instance

Instance of Tree component.

values
ComponentInstance<TreeProps, TreeState, TreeExposes>

TreeList#

Props#

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

name	type	default	description
tree	TreeInstance	null	The Tree component instance.
treenode	TreeNodeInstance	null	The TreeNode component instance.
nodes	unknown[]	null	Array of nodes.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeList component.

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

Types#

Instance

Instance of TreeList component.

values
ComponentInstance<TreeListProps, TreeListState, TreeListExposes>

TreeNode#

Props#

Defines valid properties in TreeNode 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?: TreeNodeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TreeNodeInstance) => 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<TreeNodePassThrough>	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: TreeNodeInstance) => ReactNode)	null	The children to render.
node	TreeNode	null	Node data. See TreeNode interface for more information.
index	number	null	Index of the node in the list of siblings.
draggableNodes	boolean	null	Whether nodes can be dragged.
droppableNodes	boolean	null	Whether nodes can accept drops.
draggableScope	string \| string[]	null	Draggable scope identifier.
droppableScope	string \| string[]	null	Droppable scope identifier.
validateDrop	boolean	false	Whether to validate drops before processing.
onNodeDrop	(event: TreeNodeDropEvent) => void	null	Callback fired when a node is dropped on this node.
onNodeDragEnter	(event: TreeNodeDragEnterEvent) => void	null	Callback fired when drag enters this node.
onNodeDragLeave	(event: TreeNodeDragLeaveEvent) => void	null	Callback fired when drag leaves this node.
onValueChange	(event: TreeNodeValueChangeEvent) => void	null	Callback fired when the tree value changes.
[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 TreeNode component.

name	type	default	description
tree	TreeInstance	null	The Tree component instance.
parentNode	TreeNodeInstance	null	The parent TreeNode component instance.
expanded	boolean	null	Whether the node is expanded.
checked	boolean	null	Whether the node is checked (for checkbox mode).
partialChecked	boolean	null	Whether the node is partially checked (for checkbox mode).
selected	boolean	null	Whether the node is selected (for single/multiple mode).
leaf	boolean	null	Whether the node is a leaf node (has no children).
setSize	number	null	The total number of siblings at this level.
posInSet	number	null	The position of this node among its siblings (1-based).
level	number	null	The depth level of the node in the tree (1-based).

Events#

TreeNodeDropEvent

Event fired when a node is dropped on this node.

name	type	description
originalEvent	DragEvent	The original drag event.
value	TreeNode[]	The value of the tree.
dragNode	TreeNode	The dragged node.
dropNode	TreeNode	The drop target node.
index	number	The index of the dropped node.
accept	() => void	Accept callback for validateDrop mode.

TreeNodeDragEnterEvent

Event fired when drag enters a node.

name	type	description
node	TreeNode	The node being entered.

TreeNodeDragLeaveEvent

Event fired when drag leaves a node.

name	type	description
node	TreeNode	The node being left.

TreeNodeValueChangeEvent

Event fired when the tree value changes due to drag-drop.

name	type	description
nodes	TreeNode[]	The updated tree nodes.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeNode component.

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

Types#

Instance

Instance of TreeNode component.

values
ComponentInstance<TreeNodeProps, TreeNodeState, TreeNodeExposes>

TreeContent#

Props#

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

name	type	default	description
tree	TreeInstance	null	The Tree component instance.
treenode	TreeNodeInstance	null	The TreeNode component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeContent component.

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

Types#

Instance

Instance of TreeContent component.

values
ComponentInstance<TreeContentProps, TreeContentState, TreeContentExposes>

TreeToggle#

Props#

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

name	type	default	description
tree	TreeInstance	null	The Tree component instance.
treenode	TreeNodeInstance	null	The TreeNode component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeToggle component.

name	type	default	description
root	TreeTogglePassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.
toggleIcon	TreeTogglePassThroughType<SVGProps<SVGSVGElement>>	null	Used to pass attributes to the toggle icon's DOM element.

Types#

Instance

Instance of TreeToggle component.

values
ComponentInstance<TreeToggleProps, TreeToggleState, TreeToggleExposes>

TreeLabel#

Props#

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

name	type	default	description
tree	TreeInstance	null	The Tree component instance.
treenode	TreeNodeInstance	null	The TreeNode component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeLabel component.

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

Types#

Instance

Instance of TreeLabel component.

values
ComponentInstance<TreeLabelProps, TreeLabelState, TreeLabelExposes>

TreeIcon#

Props#

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

name	type	default	description
tree	TreeInstance	null	The Tree component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeIcon component.

name	type	default	description
root	TreeIconPassThroughType<SVGAttributes<SVGElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TreeIcon component.

values
ComponentInstance<TreeIconProps, TreeIconState, TreeIconExposes>

TreeHeader#

Props#

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

name	type	default	description
tree	TreeInstance	null	The TreeHeader component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeHeader component.

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

Types#

Instance

Instance of TreeHeader component.

values
ComponentInstance<TreeHeaderProps, TreeHeaderState, TreeHeaderExposes>

TreeFilter#

Props#

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

name	type	default	description
tree	TreeInstance	null	The TreeFilter component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeFilter component.

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

Types#

Instance

Instance of TreeFilter component.

values
ComponentInstance<TreeFilterProps, TreeFilterState, TreeFilterExposes>

TreeFooter#

Props#

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

name	type	default	description
tree	TreeInstance	null	The TreeFooter component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeFooter component.

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

Types#

Instance

Instance of TreeFooter component.

values
ComponentInstance<TreeFooterProps, TreeFooterState, TreeFooterExposes>

TreeEmpty#

Props#

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

name	type	default	description
tree	TreeInstance	null	The TreeEmpty component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TreeEmpty component.

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

Types#

Instance

Instance of TreeEmpty component.

values
ComponentInstance<TreeEmptyProps, TreeEmptyState, TreeEmptyExposes>

useTree#

Props#

Defines valid properties in useTree.

name	type	default	description
value	TreeNode[]	null	An array of treenodes.
expandedKeys	TreeExpandedKeys	null	A record of keys to represent the state of the tree expansion state in controlled mode.
defaultExpandedKeys	TreeExpandedKeys	null	The default expanded keys when used in uncontrolled mode.
selectionKeys	TreeSelectionKeys \| TreeCheckboxSelectionKeys	null	A record of keys to represent the selection state in controlled mode. For single/multiple mode: Record<string, boolean> For checkbox mode: Record<string, { checked: boolean, partialChecked: boolean }>
defaultSelectionKeys	TreeSelectionKeys \| TreeCheckboxSelectionKeys	null	The default selected keys when used in uncontrolled mode.
selectionMode	"checkbox" \| "multiple" \| "single"	null	Defines the selection mode.
metaKeySelection	boolean	false	Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect multiple items. When set to false selection of each item can be toggled individually.
scrollHeight	"flex"	null	Height of the scroll viewport in fixed units or the 'flex' keyword for a dynamic size.
highlightOnSelect	boolean	false	Highlights automatically the first item.
draggableNodes	boolean	null	Whether the tree nodes can be dragged.
droppableNodes	boolean	null	Whether the tree can accept dropped nodes.
draggableScope	string \| string[]	null	A unique identifier for the draggable scope.
droppableScope	string \| string[]	null	A unique identifier for the droppable scope.
validateDrop	boolean	false	Whether to validate drops before processing.
onExpandedChange	(event: useTreeExpandedChangeEvent) => void	null	Callback fired when the tree's expanded keys change.
onSelectionChange	(event: useTreeSelectionChangeEvent) => void	null	Callback fired when the tree's selection changes.
onToggle	(event: useTreeToggleEvent) => void	null	Callback fired when a node is toggled.
onExpand	(event: useTreeExpandEvent) => void	null	Callback fired when a node is toggled.
onCollapse	(event: useTreeCollapseEvent) => void	null	Callback fired when a node is toggled.
onClick	(event: useTreeClickEvent) => void	null	Callback fired when a node is clicked.
onSelect	(event: useTreeSelectEvent) => void	null	Callback fired when a node is selected.
onUnselect	(event: useTreeUnselectEvent) => void	null	Callback fired when a node is unselected.
onNodeDrop	(event: useTreeNodeDropEvent) => void	null	Callback fired when a node is dropped.
onDragEnter	(event: useTreeDragEnterEvent) => void	null	Callback fired when drag enters the tree.
onDragLeave	(event: useTreeDragLeaveEvent) => void	null	Callback fired when drag leaves the tree.
onValueChange	(event: useTreeValueChangeEvent) => void	null	Callback fired when the tree value changes (for drag-drop).

State#

Defines valid state in useTree.

name	type	default	description
expandedKey	TreeExpandedKeys	null	The current expanded keys of the tree.
selectedKey	TreeSelectionKeys \| TreeCheckboxSelectionKeys	null	The current selected keys of the tree.
dragHover	boolean	null	Whether the tree is in drag hover state.

Exposes#

Defines the methods and properties exposed by useTree.

name	type	default	description
state	useTreeState	null	The state of the useTree.
getNodes	() => TreeNode[]	null	Gets the list of tree nodes.
onKeyDown	(event: KeyboardEvent, node: TreeNode, level: number, expanded: boolean, leaf: boolean) => void	null	Handles keyboard navigation on tree nodes.
onNodeToggle	(event: SyntheticEvent, node: TreeNode) => void	null	Toggles the expansion state of a node.
onNodeClick	(event: MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>, node: TreeNode, nodeTouched?: boolean) => void	null	Handles node click event.
onClick	(event: MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>, node: TreeNode, nodeTouched?: boolean) => void	null	Handles content click event. Automatically delegates to checkbox or node click based on selection mode.
onCheckboxChange	(event: ChangeEvent<HTMLInputElement>, node: TreeNode) => void	null	Handles checkbox state change for checkbox selection mode.
isNodeSelected	(node: TreeNode) => boolean	null	Checks if a node is selected.
findNodeInfo	(nodeKey: string) => { level: number; posInSet: number; setSize: number }	null	Finds information about a node's position in the tree.
allowDrop	(node: TreeNode) => boolean	null	Checks if a node can be dropped based on drag-drop rules.

Events#

useTreeExpandedChangeEvent

Event fired when the tree's expanded keys change.

name	type	description
originalEvent	E	The original event that triggered the expansion change.
value	TreeExpandedKeys	The new expanded keys.

useTreeSelectionChangeEvent

Event fired when the tree's selected keys change.

name	type	description
originalEvent	E	The original event that triggered the selection change.
value	TreeSelectionKeys \| TreeCheckboxSelectionKeys	The new selected keys.

useTreeToggleEvent

Event fired when a node is toggled.

name	type	description
originalEvent	SyntheticEvent	The original event that triggered the toggle.
node	TreeNode	The toggled node.

useTreeExpandEvent

Event fired when a node is expanded.

name	type	description
originalEvent	SyntheticEvent	The original event that triggered the toggle.
node	TreeNode	The expanded node.

useTreeCollapseEvent

Event fired when a node is collapsed.

name	type	description
originalEvent	SyntheticEvent	The original event that triggered the collapse.
node	TreeNode	The collapsed node.

useTreeClickEvent

Event fired when a node is clicked.

name	type	description
originalEvent	MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>	The original event that triggered the click.
node	TreeNode	The clicked node.

useTreeSelectEvent

Event fired when a node is selected.

name	type	description
originalEvent	SyntheticEvent<Element, Event> \| MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>	The original event that triggered the selection.
node	TreeNode	The selected node.

useTreeUnselectEvent

Event fired when a node is unselected.

name	type	description
originalEvent	SyntheticEvent<Element, Event> \| MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>	The original event that triggered the unselection.
node	TreeNode	The unselected node.

useTreeNodeDropEvent

Event fired when a node is dropped.

name	type	description
originalEvent	DragEvent	The original event that triggered the drop.
value	TreeNode[]	The value of the tree.
dragNode	TreeNode	The dragged node.
dropNode	TreeNode	The drop target node.
index	number	The index of the dragged node.
accept	() => void	Accept callback for validateDrop mode.

useTreeDragEnterEvent

Event fired when drag enters the tree.

name	type	description
originalEvent	DragEvent	The original event that triggered the drag enter.
value	TreeNode[]	The value of the tree.
dragNode	TreeNode	The dragged node.
dragNodeScope	string \| string[]	The drag node scope.

useTreeDragLeaveEvent

Event fired when drag leaves the tree.

name	type	description
originalEvent	DragEvent	The original event that triggered the drag leave.
value	TreeNode[]	The value of the tree.
dragNode	TreeNode	The dragged node.
dragNodeScope	string \| string[]	The drag node scope.

useTreeValueChangeEvent

Event fired when the tree value changes (for drag-drop).

name	type	description
value	TreeNode[]	The new value.

Types#

Instance

Instance of useTree headless.

values
HeadlessInstance<useTreeProps, useTreeState, useTreeExposes>