Tree

3.4.5

Hierarchical collapsible tree structure

import { Tree } from '@component-controls/components';

	Name	Description	Default
- (10 properties)

	items	Array of child items TreeItems	-
	arrowPosition	POsition of the expand/collapse arrow startend	end
	activeItem	Initially active item Pick<TreeItem, labelid>	-
	expandAll	If specified, will expand all items with chidren boolean	-
	onSelect	Function that will be called when the user selects a item ((item?: TreeItem) => void) & ((event: SyntheticEvent<HTMLDivElement, Event>) => void)	-
	onExpandCollapse	Function that will be called on expand/collapse (expandedCount: number) => void	-
	search	If specified, will filter the items by the search terms string	-
	chevronIcon	custom chevron icon ReactNode	<ChevronDownIcon />
	indentPixels	indentation in pixels for each elevel, By default 6 pixels number	8
	ref	((instance: HTMLDivElement) => void) \| RefObject<HTMLDivElement>	-
HTMLAttributes (44 properties)
Attributes (1 properties)
AriaAttributes (48 properties)
DOMAttributes (160 properties)
BoxOwnProps (4 properties)
SpaceProps (28 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)

package	imports	peer
@primer/octicons-react ^10.0.0	ChevronDownIcon
react ^17.0.1	useStateuseEffectFC	*
theme-ui ^0.6.0-alpha.7	jsxTextFlexButtonPropsButtonBoxPropsBox

file	imports
"../Keyboard"	KeyboardLEFT_ARROWUP_ARROWRIGHT_ARROWDOWN_ARROW
"../Link"	LinkLinkClassType
"./tree-utils"	TreeItemTreeStateTreeOwnPropsstateFromPropsgetFlatChildrenIdsgetChildrenByIdhasActiveChidlren