Collection of theme-ui and external components.
Theme UI
created:3/15/2021
updated:3/15/2021
source lines:185
comments %:2

Tree

@component-controls/components
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
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

Stories

Overview

Large Indentation

Custom Expand Icons

Arrows Start