# FileTree

> 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.

Source: https://ui.jcsoftdev.com/docs/components/file-tree

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-filetree--default)
- [Controlled](/storybook/?path=/story/containers-filetree--controlled)
- [Narrow](/storybook/?path=/story/containers-filetree--narrow)
- [Brutal Preset](/storybook/?path=/story/containers-filetree--brutal-preset)

## Source

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