A next-generation tool to create blazing-fast documentation sites
API
created:4/29/2021
updated:4/29/2021
loc
187
comments
2%
passed
12
coverage
56%

Tree

avatar of atanasster
avatar of @mas764
@component-controls/components
3.15.0

Hierarchical collapsible tree structure

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

Items

Name
Description
Default
-(11 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) & ReactEventHandler<HTMLDivElement>)
-
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
rowLinkClass

row link class - to avoid anchor in anchor warning

ElementType<any>
-
ref
((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null
-
HTMLAttributes(44 properties)
Attributes(1 properties)
AriaAttributes(48 properties)
DOMAttributes(160 properties)
BoxOwnProps(4 properties)
SpaceProps(28 properties)
BackgroundColorProps(2 properties)
OpacityProps(1 properties)

Commits

Date
Author
Commit Message
4/29/2021

atanasster

avatar of atanasster
fix: fix ally issues from axe-core 4.2
4/29/2021

atanasster

avatar of atanasster
fix: fix for aria-allowed-attr on div
3/27/2021

atanasster

avatar of atanasster
fix: row link class anchor in anchor
2/11/2021

@mas764

avatar of @mas764
feat: make chevron icons in sidebar clickable
11/30/2020

atanasster

avatar of atanasster
fix: tree collapse/expand
11/30/2020

atanasster

avatar of atanasster
fix: jsxTree nodes collapse/expand
11/30/2020

atanasster

avatar of atanasster
feat: component jsx explorer
7 commits
package
imports
peer
ChevronDownIcon
react
^17.0.1
useStateuseEffectFCElementType
*
theme-ui
^0.8.4
jsxTextFlexButtonPropsButtonBoxPropsBox
file
imports
"../Keyboard"
KeyboardLEFT_ARROWUP_ARROWRIGHT_ARROWDOWN_ARROW
"../Link"
LinkLinkClassType
"./tree-utils"
TreeItemTreeStateTreeOwnPropsstateFromPropsgetFlatChildrenIdsgetChildrenByIdhasActiveChidlren

Stories

Overview

Large Indentation

Custom Expand Icons

Arrows Start