FileTree

Live preview

Loading example…

Expandable tree following the WAI-ARIA tree pattern: one tab stop with roving focus, arrows to move and open/close, Home/End, type-ahead, Enter or Space to select.

Import

import { FileTree } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/file-tree.

Usage

<FileTree
  nodes={nodes}
  label="Archivos de la barbería"
  defaultExpandedIds={["clientes"]}
  defaultSelectedId="lista"
/>

Props

Prop	Type	Default	Description
`nodes` *	`FileTreeNode[]`
`label` *	`string`		Accessible name of the tree.
`selectedId`	`string \| null`
`defaultSelectedId`	`string \| null`	`null`
`onSelect`	`((id: string, node: FileTreeNode) => void)`
`expandedIds`	`string[]`
`defaultExpandedIds`	`string[]`	`[]`
`onExpandedChange`	`((ids: string[]) => void)`
`className`	`string`

* marks a required prop.

Storybook stories

Default
Controlled
Narrow
Brutal Preset

Source

packages/ui/src/containers/file-tree/file-tree.tsx