@fluixi-ui/tree-view

Headless tree view for Fluixi UI — expand/collapse branches, single selection, and full keyboard navigation.

import { TreeView, TreeItem } from '@fluixi-ui/tree-view';

<TreeView defaultExpandedValue={['src']} onSelectionChange={setSelected}>
  <TreeItem value="src" label="src">
    <TreeItem value="index" label="index.ts" />
    <TreeItem value="util" label="util.ts" />
  </TreeItem>
  <TreeItem value="readme" label="README.md" />
</TreeView>

An item with nested TreeItem children is an expandable branch; one without is a leaf. Expansion and selection can each be controlled or uncontrolled.

Keyboard

| Key | Action | | --- | --- | | ↑ / ↓ | Move to the previous / next visible item | | → | Expand a collapsed branch, or move into the first child | | ← | Collapse an open branch, or move to the parent | | Home / End | Jump to the first / last visible item | | Enter | Select the focused item | | Space | Select, and toggle a branch |

Props

TreeView — expandedValue / defaultExpandedValue / onExpandedChange (string[]), selectedValue / defaultSelectedValue / onSelectionChange (string), disabled.

TreeItem — value (unique), label (row content), disabled; nest TreeItems as children to form a branch.

Styling

Styled by data-* in @fluixi-ui/tokens: [data-tree-view], [data-tree-item], [data-tree-item-row], [data-tree-item-indicator] (caret), [data-tree-item-label], [data-tree-item-group]. Reflects data-state (expanded/collapsed), data-selected, data-disabled. Rows indent via the --flx-tree-depth custom property.