# Tree View

URL: https://ark-ui.com/docs/components/tree-view
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/tree-view.mdx

A component that is used to show a tree hierarchy.

---

<ComponentPreview id="TreeView" />

## Anatomy

<Anatomy id="tree-view" />

```tsx
<TreeView.Root>
  <TreeView.Label />
  <TreeView.Tree>
    <TreeView.NodeProvider>
      <TreeView.Branch>
        <TreeView.BranchControl>
          <TreeView.BranchIndicator />
          <TreeView.BranchText />
        </TreeView.BranchControl>
        <TreeView.BranchContent>
          <TreeView.BranchIndentGuide />
          <TreeView.Item>
            <TreeView.ItemText />
          </TreeView.Item>
        </TreeView.BranchContent>
      </TreeView.Branch>
    </TreeView.NodeProvider>
  </TreeView.Tree>
</TreeView.Root>
```

## Examples

**Example: basic**

```ripple
import { TreeView, createTreeCollection } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[] | undefined;
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    <TreeView.NodeContext>
      component children({ context }) {
        if (props.node.children) {
          <TreeView.Branch class={styles.Branch}>
            <TreeView.BranchControl class={styles.BranchControl}>
              <TreeView.BranchIndicator class={styles.BranchIndicator}>
                <ChevronRight />
              </TreeView.BranchIndicator>
              <TreeView.BranchText class={styles.BranchText}>
                if (@context.expanded) {
                  <FolderOpen />
                } else {
                  <Folder />
                }
                {props.node.name}
              </TreeView.BranchText>
            </TreeView.BranchControl>
            <TreeView.BranchContent class={styles.BranchContent}>
              <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
              for (const child of props.node.children; index i; key child.id) {
                <TreeNode node={child} indexPath={[...props.indexPath, i]} />
              }
            </TreeView.BranchContent>
          </TreeView.Branch>
        } else {
          <TreeView.Item class={styles.Item}>
            <TreeView.ItemText class={styles.ItemText}>
              <File />
              {props.node.name}
            </TreeView.ItemText>
          </TreeView.Item>
        }
      }
    </TreeView.NodeContext>
  </TreeView.NodeProvider>
}

export component Basic() {
  <TreeView.Root class={styles.Root} {collection}>
    <TreeView.Label class={styles.Label}>{'Tree'}</TreeView.Label>
    <TreeView.Tree class={styles.Tree}>
      for (const [index, node] of collection.rootNode.children!.entries(); key node.id) {
        <TreeNode {node} indexPath={[index]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Controlled Expanded

Pass the `expandedValue` and `onExpandedChange` props to the `TreeView.Root` component to control the expanded state of
the tree view.

**Example: controlled-expanded**

```ripple
import { TreeView, createTreeCollection } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[] | undefined;
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    <TreeView.NodeContext>
      component children({ context }) {
        if (props.node.children) {
          <TreeView.Branch class={styles.Branch}>
            <TreeView.BranchControl class={styles.BranchControl}>
              <TreeView.BranchIndicator class={styles.BranchIndicator}>
                <ChevronRight />
              </TreeView.BranchIndicator>
              <TreeView.BranchText class={styles.BranchText}>
                if (@context.expanded) {
                  <FolderOpen />
                } else {
                  <Folder />
                }
                {props.node.name}
              </TreeView.BranchText>
            </TreeView.BranchControl>
            <TreeView.BranchContent class={styles.BranchContent}>
              <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
              for (const child of props.node.children; index i; key child.id) {
                <TreeNode node={child} indexPath={[...props.indexPath, i]} />
              }
            </TreeView.BranchContent>
          </TreeView.Branch>
        } else {
          <TreeView.Item class={styles.Item}>
            <TreeView.ItemText class={styles.ItemText}>
              <File />
              {props.node.name}
            </TreeView.ItemText>
          </TreeView.Item>
        }
      }
    </TreeView.NodeContext>
  </TreeView.NodeProvider>
}

export component ControlledExpanded() {
  let expandedValue = track<string[]>(['node_modules']);

  <TreeView.Root
    class={styles.Root}
    {collection}
    {expandedValue}
    onExpandedChange={(details) => {
      @expandedValue = details.expandedValue;
    }}
  >
    <TreeView.Label class={styles.Label}>{'Tree'}</TreeView.Label>
    <TreeView.Tree class={styles.Tree}>
      for (const node of collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Controlled Selection

Pass the `selectedValue` and `onSelectionChange` props to the `TreeView.Root` component to control the selected state of
the tree view.

**Example: controlled-selected**

```ripple
import { TreeView, createTreeCollection } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[] | undefined;
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    <TreeView.NodeContext>
      component children({ context }) {
        if (props.node.children) {
          <TreeView.Branch class={styles.Branch}>
            <TreeView.BranchControl class={styles.BranchControl}>
              <TreeView.BranchIndicator class={styles.BranchIndicator}>
                <ChevronRight />
              </TreeView.BranchIndicator>
              <TreeView.BranchText class={styles.BranchText}>
                if (@context.expanded) {
                  <FolderOpen />
                } else {
                  <Folder />
                }
                {props.node.name}
              </TreeView.BranchText>
            </TreeView.BranchControl>
            <TreeView.BranchContent class={styles.BranchContent}>
              <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
              for (const child of props.node.children; index i; key child.id) {
                <TreeNode node={child} indexPath={[...props.indexPath, i]} />
              }
            </TreeView.BranchContent>
          </TreeView.Branch>
        } else {
          <TreeView.Item class={styles.Item}>
            <TreeView.ItemText class={styles.ItemText}>
              <File />
              {props.node.name}
            </TreeView.ItemText>
          </TreeView.Item>
        }
      }
    </TreeView.NodeContext>
  </TreeView.NodeProvider>
}

export component ControlledSelected() {
  let selectedValue = track<string[]>(['package.json']);

  <TreeView.Root
    class={styles.Root}
    {collection}
    {selectedValue}
    onSelectionChange={(details) => {
      @selectedValue = details.selectedValue;
    }}
  >
    <TreeView.Label class={styles.Label}>{'Tree'}</TreeView.Label>
    <TreeView.Tree class={styles.Tree}>
      for (const node of collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Root Provider

An alternative way to control the tree view is to use the `RootProvider` component and the `useTreeView` hook. This way
you can access the state and methods from outside the component.

**Example: root-provider**

```ripple
import { TreeView, createTreeCollection, useTreeView } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[] | undefined;
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    <TreeView.NodeContext>
      component children({ context }) {
        if (props.node.children) {
          <TreeView.Branch class={styles.Branch}>
            <TreeView.BranchControl class={styles.BranchControl}>
              <TreeView.BranchIndicator class={styles.BranchIndicator}>
                <ChevronRight />
              </TreeView.BranchIndicator>
              <TreeView.BranchText class={styles.BranchText}>
                if (@context.expanded) {
                  <FolderOpen />
                } else {
                  <Folder />
                }
                {props.node.name}
              </TreeView.BranchText>
            </TreeView.BranchControl>
            <TreeView.BranchContent class={styles.BranchContent}>
              <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
              for (const child of props.node.children; index i; key child.id) {
                <TreeNode node={child} indexPath={[...props.indexPath, i]} />
              }
            </TreeView.BranchContent>
          </TreeView.Branch>
        } else {
          <TreeView.Item class={styles.Item}>
            <TreeView.ItemText class={styles.ItemText}>
              <File />
              {props.node.name}
            </TreeView.ItemText>
          </TreeView.Item>
        }
      }
    </TreeView.NodeContext>
  </TreeView.NodeProvider>
}

export component RootProvider() {
  const treeViewApi = useTreeView(track(() => ({ collection })));

  <div class="stack">
    <output>
      {'selected: '}
      {JSON.stringify(@treeViewApi.selectedValue)}
    </output>
    <TreeView.RootProvider class={styles.Root} value={treeViewApi}>
      <TreeView.Label class={styles.Label}>{'Tree'}</TreeView.Label>
      <TreeView.Tree class={styles.Tree}>
        for (const node of collection.rootNode.children!; index i; key node.id) {
          <TreeNode {node} indexPath={[i]} />
        }
      </TreeView.Tree>
    </TreeView.RootProvider>
  </div>
}

```

### Lazy Loading

Lazy loading is a feature that allows the tree view to load children of a node on demand (or async). This helps to
improve the initial load time and memory usage.

To use this, you need to provide the following:

- `loadChildren` — A function that is used to load the children of a node.
- `onLoadChildrenComplete` — A callback that is called when the children of a node are loaded. Used to update the tree
  collection.
- `childrenCount` — A number that indicates the number of children of a branch node.

**Example: async-loading**

```ripple
import { TreeView, createTreeCollection, useTreeViewNodeContext } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder, FolderOpen, Loader } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[];
  childrenCount?: number;
}

const response: Record<string, Node[]> = {
  node_modules: [
    { id: 'zag-js', name: 'zag-js' },
    { id: 'pandacss', name: 'panda' },
    { id: '@types', name: '@types', childrenCount: 2 },
  ],
  'node_modules/@types': [
    { id: 'react', name: 'react' },
    { id: 'react-dom', name: 'react-dom' },
  ],
  src: [
    { id: 'app.tsx', name: 'app.tsx' },
    { id: 'index.ts', name: 'index.ts' },
  ],
};

function loadChildren(details: TreeView.LoadChildrenDetails<Node>): Promise<Node[]> {
  const value = details.valuePath.join('/');
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(response[value] ?? []);
    }, 500);
  });
}

component TreeBranchIcon() {
  const nodeState = useTreeViewNodeContext();
  if (@nodeState.loading) {
    <Loader class={styles.Loader} />
  } else if (@nodeState.expanded) {
    <FolderOpen />
  } else {
    <Folder />
  }
}

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    if (props.node.children || props.node.childrenCount) {
      <TreeView.Branch class={styles.Branch}>
        <TreeView.BranchControl class={styles.BranchControl}>
          <TreeView.BranchIndicator class={styles.BranchIndicator}>
            <ChevronRight />
          </TreeView.BranchIndicator>
          <TreeView.BranchText class={styles.BranchText}>
            <TreeBranchIcon />
            {props.node.name}
          </TreeView.BranchText>
        </TreeView.BranchControl>
        <TreeView.BranchContent class={styles.BranchContent}>
          <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
          for (const child of props.node.children || []; index i; key child.id) {
            <TreeNode node={child} indexPath={[...props.indexPath, i]} />
          }
        </TreeView.BranchContent>
      </TreeView.Branch>
    } else {
      <TreeView.Item class={styles.Item}>
        <TreeView.ItemText class={styles.ItemText}>
          <File />
          {props.node.name}
        </TreeView.ItemText>
      </TreeView.Item>
    }
  </TreeView.NodeProvider>
}

const initialCollection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        { id: 'node_modules', name: 'node_modules', childrenCount: 3 },
        { id: 'src', name: 'src', childrenCount: 2 },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

export component AsyncLoading() {
  let collection = track(initialCollection);
  <TreeView.Root
    class={styles.Root}
    {collection}
    {loadChildren}
    onLoadChildrenComplete={(e) => {
      @collection = e.collection;
    }}
  >
    <TreeView.Label class={styles.Label}>{'Tree'}</TreeView.Label>
    <TreeView.Tree class={styles.Tree}>
      for (const node of @collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Lazy Mount

Lazy mounting is a feature that allows the content of a tree view to be rendered only when it is expanded. This is
useful for performance optimization, especially when tree content is large or complex. To enable lazy mounting, use the
`lazyMount` prop on the `TreeView.Root` component.

In addition, the `unmountOnExit` prop can be used in conjunction with `lazyMount` to unmount the tree view content when
branches are collapsed, freeing up resources. The next time a branch is expanded, its content will be re-rendered.

**Example: lazy-mount**

```ripple
import { TreeView, createTreeCollection, useTreeViewNodeContext } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[] | undefined;
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeBranchIcon() {
  const nodeState = useTreeViewNodeContext();
  if (@nodeState.expanded) {
    <FolderOpen />
  } else {
    <Folder />
  }
}

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    if (props.node.children) {
      <TreeView.Branch class={styles.Branch}>
        <TreeView.BranchControl class={styles.BranchControl}>
          <TreeView.BranchIndicator class={styles.BranchIndicator}>
            <ChevronRight />
          </TreeView.BranchIndicator>
          <TreeView.BranchText class={styles.BranchText}>
            <TreeBranchIcon />
            {props.node.name}
          </TreeView.BranchText>
        </TreeView.BranchControl>
        <TreeView.BranchContent class={styles.BranchContent}>
          <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
          for (const child of props.node.children; index i; key child.id) {
            <TreeNode node={child} indexPath={[...props.indexPath, i]} />
          }
        </TreeView.BranchContent>
      </TreeView.Branch>
    } else {
      <TreeView.Item class={styles.Item}>
        <TreeView.ItemText class={styles.ItemText}>
          <File />
          {props.node.name}
        </TreeView.ItemText>
      </TreeView.Item>
    }
  </TreeView.NodeProvider>
}

export component LazyMount() {
  <TreeView.Root class={styles.Root} {collection} lazyMount unmountOnExit>
    <TreeView.Label class={styles.Label}>{'Tree'}</TreeView.Label>
    <TreeView.Tree class={styles.Tree}>
      for (const node of collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Filtering

Filtering is useful when you have a large tree and you want to filter the nodes to only show the ones that match the
search query. Here's an example that composes the `filter` method from the `TreeCollection` and `useFilter` hook to
filter the nodes.

**Example: filtering**

```ripple
import { useFilter } from 'ark-ripple/locale';
import { TreeView, createTreeCollection, useTreeViewContext } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-ripple';
import { track } from 'ripple';
import fieldStyles from 'styles/field.module.css';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[];
}

const initialCollection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeNode(props: { node: Node; indexPath: number[] }) {
  const treeView = useTreeViewContext();
  const nodeState = @treeView.getNodeState({ node: props.node, indexPath: props.indexPath });

  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    if (nodeState.isBranch) {
      <TreeView.Branch class={styles.Branch}>
        <TreeView.BranchControl class={styles.BranchControl}>
          <TreeView.BranchIndicator class={styles.BranchIndicator}>
            <ChevronRight />
          </TreeView.BranchIndicator>
          <TreeView.BranchText class={styles.BranchText}>
            if (nodeState.expanded) {
              <FolderOpen />
            } else {
              <Folder />
            }
            {props.node.name}
          </TreeView.BranchText>
        </TreeView.BranchControl>
        <TreeView.BranchContent class={styles.BranchContent}>
          <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
          for (const child of props.node.children || []; index i; key child.id) {
            <TreeNode node={child} indexPath={[...props.indexPath, i]} />
          }
        </TreeView.BranchContent>
      </TreeView.Branch>
    } else {
      <TreeView.Item class={styles.Item}>
        <TreeView.ItemText class={styles.ItemText}>
          <File />
          {props.node.name}
        </TreeView.ItemText>
      </TreeView.Item>
    }
  </TreeView.NodeProvider>
}

export component Filtering() {
  const filterApi = useFilter({ sensitivity: 'base' });
  let collection = track(initialCollection);

  const filter = (value: string) => {
    @collection = value.length > 0
      ? initialCollection.filter((node: Node) => @filterApi.contains(node.name, value))
      : initialCollection;
  };

  <div class="stack" style={{ maxWidth: '20rem' }}>
    <input
      class={fieldStyles.Input}
      placeholder="Search"
      onInput={(e: InputEvent) => filter((e.target as HTMLInputElement).value)}
    />
    <TreeView.Root class={styles.Root} {collection}>
      <TreeView.Tree class={styles.Tree}>
        for (const node of @collection.rootNode.children!; index i; key node.id) {
          <TreeNode {node} indexPath={[i]} />
        }
      </TreeView.Tree>
    </TreeView.Root>
  </div>
}

```

### Links

Tree items can be rendered as links to another page or website. This could be useful for documentation sites.

Here's an example that modifies the tree collection to represent an hierarchical link structure. It uses the `asChild`
prop to render the tree items as links, passing the `href` prop to a `<a>` element.

**Example: links**

```ripple
import { TreeView, createTreeCollection } from 'ark-ripple/tree-view';
import { ChevronRight, ExternalLink, File } from 'lucide-ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  href?: string;
  children?: Node[];
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'docs',
          name: 'Documentation',
          children: [
            { id: 'docs/getting-started', name: 'Getting Started', href: '/docs/getting-started' },
            { id: 'docs/installation', name: 'Installation', href: '/docs/installation' },
            {
              id: 'docs/components',
              name: 'Components',
              children: [
                {
                  id: 'docs/components/accordion',
                  name: 'Accordion',
                  href: '/docs/components/accordion',
                },
                { id: 'docs/components/dialog', name: 'Dialog', href: '/docs/components/dialog' },
                { id: 'docs/components/menu', name: 'Menu', href: '/docs/components/menu' },
              ],
            },
          ],
        },
        {
          id: 'examples',
          name: 'Examples',
          children: [
            { id: 'examples/react', name: 'React Examples', href: '/examples/react' },
            { id: 'examples/vue', name: 'Vue Examples', href: '/examples/vue' },
            { id: 'examples/solid', name: 'Solid Examples', href: '/examples/solid' },
          ],
        },
        {
          id: 'external',
          name: 'External Links',
          children: [
            {
              id: 'external/github',
              name: 'GitHub Repository',
              href: 'https://github.com/chakra-ui/zag',
            },
            {
              id: 'external/npm',
              name: 'NPM Package',
              href: 'https://www.npmjs.com/package/@zag-js/core',
            },
            { id: 'external/docs', name: 'Official Docs', href: 'https://zagjs.com' },
          ],
        },
        { id: 'readme.md', name: 'README.md', href: '/readme' },
        { id: 'license', name: 'LICENSE', href: '/license' },
      ],
    },
  },
);

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    if (props.node.children) {
      <TreeView.Branch class={styles.Branch}>
        <TreeView.BranchControl class={styles.BranchControl}>
          <TreeView.BranchIndicator class={styles.BranchIndicator}>
            <ChevronRight />
          </TreeView.BranchIndicator>
          <TreeView.BranchText class={styles.BranchText}>{props.node.name}</TreeView.BranchText>
        </TreeView.BranchControl>
        <TreeView.BranchContent class={styles.BranchContent}>
          <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
          for (const child of props.node.children; index i; key child.id) {
            <TreeNode node={child} indexPath={[...props.indexPath, i]} />
          }
        </TreeView.BranchContent>
      </TreeView.Branch>
    } else {
      <TreeView.Item class={styles.Item}>
        component asChild({ propsFn }) {
          <a {...propsFn({ href: props.node.href })}>
            <TreeView.ItemText class={styles.ItemText}>
              <File />
              {props.node.name}
            </TreeView.ItemText>
            if (props.node.href && props.node.href.startsWith('http')) {
              <ExternalLink size={12} />
            }
          </a>
        }
      </TreeView.Item>
    }
  </TreeView.NodeProvider>
}

export component Links() {
  <TreeView.Root class={styles.Root} {collection}>
    <TreeView.Label class={styles.Label}>{'Docs'}</TreeView.Label>
    <TreeView.Tree class={styles.Tree}>
      for (const node of collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Virtualized

For large tree views with thousands of nodes, virtualization can significantly improve performance by only rendering
visible nodes.

Key implementation details:

- Use `useTreeView` hook with `TreeView.RootProvider` for programmatic control
- Pass `scrollToIndexFn` to enable keyboard navigation within the virtualized list
- Use `getVisibleNodes()` to get the flattened list of currently visible nodes

**Example: virtualized**

```ripple
import { TreeView, createTreeCollection, useTreeView } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder } from 'lucide-ripple';
import { flushSync, track } from 'ripple';
import { createVirtualizer } from '../../../utils/use-virtualizer.ripple';
import button from 'styles/button.module.css';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[];
}

function generateLargeTree(): Node {
  const folders: Node[] = [];
  for (let i = 0; i < 50; i++) {
    const children: Node[] = [];
    for (let j = 0; j < 20; j++) {
      children.push({ id: `folder-${i}/file-${i}-${j}.ts`, name: `file-${i}-${j}.ts` });
    }
    folders.push({ id: `folder-${i}`, name: `folder-${i}`, children });
  }
  return {
    id: 'ROOT',
    name: '',
    children: folders,
  };
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: generateLargeTree(),
  },
);

const ROW_HEIGHT = 32;

export component Virtualized() {
  let treeEl = track<HTMLDivElement | null>(null);

  const tree = useTreeView(
    {
      collection,
      scrollToIndexFn(details) {
        flushSync(() => {
          virtualizer.scrollToIndex(details.index, { align: 'auto' });
        });
      },
    },
  );

  const virtualizer = createVirtualizer(
    {
      get count() {
        return @tree.getVisibleNodes().length;
      },
      getScrollElement: () => @treeEl,
      estimateSize: () => ROW_HEIGHT,
      overscan: 10,
    },
  );

  const visibleNodes = track(() => @tree.getVisibleNodes());

  <TreeView.RootProvider class={styles.Root} value={tree}>
    <TreeView.Label class={styles.Label}>
      {'Virtualized Tree ('}
      {@visibleNodes.length}
      {' visible nodes)'}
    </TreeView.Label>
    <div class="hstack">
      <button
        class={button.Root}
        onClick={() => {
          @tree.collapse();
        }}
      >
        {'Collapse all'}
      </button>
      <button
        class={button.Root}
        onClick={() => {
          @tree.expand();
        }}
      >
        {'Expand all'}
      </button>
    </div>
    <TreeView.Tree
      class={styles.Tree}
      {ref (el: HTMLDivElement) => {
        @treeEl = el;
      }}
      style={{ height: '400px', overflow: 'auto' }}
    >
      <div
        style={{
          minHeight: `${virtualizer.getTotalSize()}px`,
          width: '100%',
          position: 'relative',
        }}
      >
        for (const virtualItem of virtualizer.getVirtualItems(); index index; key index) {
          const item = track(() => @visibleNodes[virtualItem.index]);
          const node = track(() => @item.node);
          const indexPath = track(() => @item.indexPath);
          const nodeState = track(() => @tree.getNodeState({ node: @node, indexPath: @indexPath }));
          <div
            data-index={virtualItem.index}
            onPointerDown={(e: PointerEvent) => {
              if (e.button !== 0) return;
              @tree.focus(@node.id);
            }}
            style={{
              position: 'absolute',
              top: '0',
              left: '0',
              width: '100%',
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`,
            }}
          >
            <TreeView.NodeProvider {node} {indexPath}>
              if (@nodeState.isBranch) {
                <TreeView.BranchControl
                  class={styles.BranchControl}
                  style={{ paddingLeft: `${@nodeState.depth * 22}px` }}
                >
                  <TreeView.BranchIndicator class={styles.BranchIndicator}>
                    <ChevronRight />
                  </TreeView.BranchIndicator>
                  <TreeView.BranchText class={styles.BranchText}>
                    <Folder />
                    {@node.name}
                  </TreeView.BranchText>
                </TreeView.BranchControl>
              } else {
                <TreeView.Item
                  class={styles.Item}
                  style={{ paddingLeft: `${@nodeState.depth * 22}px` }}
                >
                  <TreeView.ItemText class={styles.ItemText}>
                    <File />
                    {@node.name}
                  </TreeView.ItemText>
                </TreeView.Item>
              }
            </TreeView.NodeProvider>
          </div>
        }
      </div>
    </TreeView.Tree>
  </TreeView.RootProvider>
}

```

### Checkbox Tree

Use the `defaultCheckedValue` prop to enable checkbox selection mode. This allows users to select multiple nodes with
checkboxes, including parent-child selection relationships.

**Example: checkbox-tree**

```ripple
import { TreeView, createTreeCollection } from 'ark-ripple/tree-view';
import { Check, ChevronRight, Minus } from 'lucide-ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[] | undefined;
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeNodeCheckbox() {
  <TreeView.NodeCheckbox class={styles.NodeCheckbox}>
    <TreeView.NodeCheckboxIndicator class={styles.NodeCheckboxIndicator} indeterminate={Minus}>
      <Check />
    </TreeView.NodeCheckboxIndicator>
  </TreeView.NodeCheckbox>
}

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    if (props.node.children) {
      <TreeView.Branch class={styles.Branch}>
        <TreeView.BranchControl class={styles.BranchControl}>
          <TreeView.BranchIndicator class={styles.BranchIndicator}>
            <ChevronRight />
          </TreeView.BranchIndicator>
          <TreeNodeCheckbox />
          <TreeView.BranchText class={styles.BranchText}>{props.node.name}</TreeView.BranchText>
        </TreeView.BranchControl>
        <TreeView.BranchContent class={styles.BranchContent}>
          <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
          for (const child of props.node.children; index i; key child.id) {
            <TreeNode node={child} indexPath={[...props.indexPath, i]} />
          }
        </TreeView.BranchContent>
      </TreeView.Branch>
    } else {
      <TreeView.Item class={styles.Item}>
        <TreeNodeCheckbox />
        <TreeView.ItemText class={styles.ItemText}>{props.node.name}</TreeView.ItemText>
      </TreeView.Item>
    }
  </TreeView.NodeProvider>
}

export component CheckboxTree() {
  <TreeView.Root class={styles.Root} {collection} defaultCheckedValue={[]}>
    <TreeView.Label class={styles.Label}>{'Tree'}</TreeView.Label>
    <TreeView.Tree class={styles.Tree}>
      for (const node of collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Expand and Collapse All

Use the `expand()` and `collapse()` methods from the tree view context to programmatically expand or collapse all
branches.

**Example: expand-collapse-all**

```ripple
import { TreeView, createTreeCollection, useTreeViewContext } from 'ark-ripple/tree-view';
import { track } from 'ripple';
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-ripple';
import button from 'styles/button.module.css';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[];
}

const collection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component ExpandCollapseButtons() {
  const tree = useTreeViewContext();
  let isAllExpanded = track(() => {
    const branchValues = @tree.collection.getBranchValues();
    return branchValues.every((value: string) => @tree.expandedValue.includes(value));
  });

  <div class="hstack">
    if (@isAllExpanded) {
      <button
        class={button.Root}
        onClick={() => {
          @tree.collapse();
        }}
      >
        {'Collapse all'}
      </button>
    } else {
      <button
        class={button.Root}
        onClick={() => {
          @tree.expand();
        }}
      >
        {'Expand all'}
      </button>
    }
  </div>
}

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    <TreeView.NodeContext>
      component children({ context }) {
        if (props.node.children) {
          <TreeView.Branch class={styles.Branch}>
            <TreeView.BranchControl class={styles.BranchControl}>
              <TreeView.BranchIndicator class={styles.BranchIndicator}>
                <ChevronRight />
              </TreeView.BranchIndicator>
              <TreeView.BranchText class={styles.BranchText}>
                if (@context.expanded) {
                  <FolderOpen />
                } else {
                  <Folder />
                }
                {props.node.name}
              </TreeView.BranchText>
            </TreeView.BranchControl>
            <TreeView.BranchContent class={styles.BranchContent}>
              <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
              for (const child of props.node.children; index i; key child.id) {
                <TreeNode node={child} indexPath={[...props.indexPath, i]} />
              }
            </TreeView.BranchContent>
          </TreeView.Branch>
        } else {
          <TreeView.Item class={styles.Item}>
            <TreeView.ItemText class={styles.ItemText}>
              <File />
              {props.node.name}
            </TreeView.ItemText>
          </TreeView.Item>
        }
      }
    </TreeView.NodeContext>
  </TreeView.NodeProvider>
}

export component ExpandCollapseAll() {
  <TreeView.Root class={styles.Root} {collection} data-animate="false">
    <ExpandCollapseButtons />
    <TreeView.Tree class={styles.Tree}>
      for (const node of collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Mutation

Use the collection's `remove()` and `replace()` methods to dynamically add and remove nodes from the tree. This is
useful for building file explorer interfaces where users can create and delete files.

**Example: mutation**

```ripple
import { TreeView, createTreeCollection, useTreeViewContext } from 'ark-ripple/tree-view';
import { ChevronRight, Plus, Trash } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[];
}

interface TreeNodeProps {
  node: Node;
  indexPath: number[];
  onRemove?: (props: { node: Node; indexPath: number[] }) => void;
  onAdd?: (props: { node: Node; indexPath: number[] }) => void;
}

const initialCollection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeNodeActions(props: TreeNodeProps) {
  const tree = useTreeViewContext();
  const isBranch = @tree.collection.isBranchNode(props.node);

  <div class={styles.ActionGroup}>
    <button
      class={styles.Action}
      onClick={(e: MouseEvent) => {
        e.stopPropagation();
        props.onRemove?.(props);
      }}
    >
      <Trash />
    </button>
    if (isBranch) {
      <button
        class={styles.Action}
        onClick={(e: MouseEvent) => {
          e.stopPropagation();
          props.onAdd?.(props);
          @tree.expand([props.node.id]);
        }}
      >
        <Plus />
      </button>
    }
  </div>
}

component TreeNode(props: TreeNodeProps) {
  const tree = useTreeViewContext();
  const nodeState = @tree.getNodeState({ node: props.node, indexPath: props.indexPath });

  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    if (nodeState.isBranch) {
      <TreeView.Branch class={styles.Branch}>
        <TreeView.BranchControl class={styles.BranchControl}>
          <TreeView.BranchIndicator class={styles.BranchIndicator}>
            <ChevronRight />
          </TreeView.BranchIndicator>
          <TreeView.BranchText class={styles.BranchText}>{props.node.name}</TreeView.BranchText>
          <TreeNodeActions {...props} />
        </TreeView.BranchControl>
        <TreeView.BranchContent class={styles.BranchContent}>
          <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
          for (const child of props.node.children || []; index i; key child.id) {
            <TreeNode
              node={child}
              indexPath={[...props.indexPath, i]}
              onRemove={props.onRemove}
              onAdd={props.onAdd}
            />
          }
        </TreeView.BranchContent>
      </TreeView.Branch>
    } else {
      <TreeView.Item class={styles.Item}>
        <TreeView.ItemText class={styles.ItemText}>{props.node.name}</TreeView.ItemText>
        <TreeNodeActions {...props} />
      </TreeView.Item>
    }
  </TreeView.NodeProvider>
}

export component Mutation() {
  let collection = track(initialCollection);

  const removeNode = (props: { node: Node; indexPath: number[] }) => {
    @collection = @collection.remove([props.indexPath]);
  };

  const addNode = (props: { node: Node; indexPath: number[] }) => {
    const { node, indexPath } = props;
    if (!@collection.isBranchNode(node)) return;
    const children = [
      { id: `untitled-${Date.now()}`, name: 'untitled.tsx' },
      ...node.children || [],
    ];
    @collection = @collection.replace(indexPath, { ...node, children });
  };

  <TreeView.Root class={styles.Root} {collection}>
    <TreeView.Tree class={styles.Tree}>
      for (const node of @collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} onRemove={removeNode} onAdd={addNode} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

### Rename Node

Enable inline renaming of nodes using the `canRename` prop and `onRenameComplete` callback. Press <kbd>F2</kbd> to
activate rename mode on the focused node.

**Example: rename-node**

```ripple
import { TreeView, createTreeCollection } from 'ark-ripple/tree-view';
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/tree-view.module.css';

interface Node {
  id: string;
  name: string;
  children?: Node[];
}

const initialCollection = createTreeCollection<Node>(
  {
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: {
      id: 'ROOT',
      name: '',
      children: [
        {
          id: 'node_modules',
          name: 'node_modules',
          children: [
            { id: 'node_modules/zag-js', name: 'zag-js' },
            { id: 'node_modules/pandacss', name: 'panda' },
            {
              id: 'node_modules/@types',
              name: '@types',
              children: [
                { id: 'node_modules/@types/react', name: 'react' },
                { id: 'node_modules/@types/react-dom', name: 'react-dom' },
              ],
            },
          ],
        },
        {
          id: 'src',
          name: 'src',
          children: [
            { id: 'src/app.tsx', name: 'app.tsx' },
            { id: 'src/index.ts', name: 'index.ts' },
          ],
        },
        { id: 'panda.config', name: 'panda.config.ts' },
        { id: 'package.json', name: 'package.json' },
        { id: 'renovate.json', name: 'renovate.json' },
        { id: 'readme.md', name: 'README.md' },
      ],
    },
  },
);

component TreeNode(props: { node: Node; indexPath: number[] }) {
  <TreeView.NodeProvider node={props.node} indexPath={props.indexPath}>
    <TreeView.NodeContext>
      component children({ context }) {
        if (props.node.children) {
          <TreeView.Branch class={styles.Branch}>
            <TreeView.BranchControl class={styles.BranchControl}>
              <TreeView.BranchIndicator class={styles.BranchIndicator}>
                <ChevronRight />
              </TreeView.BranchIndicator>
              if (@context.renaming) {
                <TreeView.NodeRenameInput class={styles.NodeRenameInput} />
              } else {
                <TreeView.BranchText class={styles.BranchText}>
                  if (@context.expanded) {
                    <FolderOpen />
                  } else {
                    <Folder />
                  }
                  {props.node.name}
                </TreeView.BranchText>
              }
            </TreeView.BranchControl>
            <TreeView.BranchContent class={styles.BranchContent}>
              <TreeView.BranchIndentGuide class={styles.BranchIndentGuide} />
              for (const child of props.node.children; index i; key child.id) {
                <TreeNode node={child} indexPath={[...props.indexPath, i]} />
              }
            </TreeView.BranchContent>
          </TreeView.Branch>
        } else {
          <TreeView.Item class={styles.Item}>
            <File />
            if (@context.renaming) {
              <TreeView.NodeRenameInput class={styles.NodeRenameInput} />
            } else {
              <TreeView.ItemText class={styles.ItemText}>{props.node.name}</TreeView.ItemText>
            }
          </TreeView.Item>
        }
      }
    </TreeView.NodeContext>
  </TreeView.NodeProvider>
}

export component RenameNode() {
  let collection = track(initialCollection);
  <TreeView.Root
    class={styles.Root}
    {collection}
    canRename={() => true}
    onRenameComplete={(details) => {
      const node = @collection.at(details.indexPath);
      if (!node) return;
      @collection = @collection.replace(details.indexPath, { ...node, name: details.label });
    }}
  >
    <TreeView.Label class={styles.Label}>{'Tree (Press F2 to rename)'}</TreeView.Label>
    <TreeView.Tree class={styles.Tree}>
      for (const node of @collection.rootNode.children!; index i; key node.id) {
        <TreeNode {node} indexPath={[i]} />
      }
    </TreeView.Tree>
  </TreeView.Root>
}

```

## API Reference

### Props

**Component API Reference**

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `collection` | `TreeCollection<T>` | Yes | The collection of tree nodes |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `canRename` | `(node: T, indexPath: IndexPath) => boolean` | No | Function to determine if a node can be renamed |
| `checkedValue` | `string[]` | No | The controlled checked node value |
| `defaultCheckedValue` | `string[]` | No | The initial checked node value when rendered.
Use when you don't need to control the checked node value. |
| `defaultExpandedValue` | `string[]` | No | The initial expanded node ids when rendered.
Use when you don't need to control the expanded node value. |
| `defaultFocusedValue` | `string` | No | The initial focused node value when rendered.
Use when you don't need to control the focused node value. |
| `defaultSelectedValue` | `string[]` | No | The initial selected node value when rendered.
Use when you don't need to control the selected node value. |
| `expandedValue` | `string[]` | No | The controlled expanded node ids |
| `expandOnClick` | `boolean` | No | Whether clicking on a branch should open it or not |
| `focusedValue` | `string` | No | The value of the focused node |
| `ids` | `Partial<{ root: string; tree: string; label: string; node: (value: string) => string }>` | No | The ids of the tree elements. Useful for composition. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `loadChildren` | `(details: LoadChildrenDetails<T>) => Promise<T[]>` | No | Function to load children for a node asynchronously.
When provided, branches will wait for this promise to resolve before expanding. |
| `onBeforeRename` | `(details: RenameCompleteDetails) => boolean` | No | Called before a rename is completed. Return false to prevent the rename. |
| `onCheckedChange` | `(details: CheckedChangeDetails) => void` | No | Called when the checked value changes |
| `onExpandedChange` | `(details: ExpandedChangeDetails<T>) => void` | No | Called when the tree is opened or closed |
| `onFocusChange` | `(details: FocusChangeDetails<T>) => void` | No | Called when the focused node changes |
| `onLoadChildrenComplete` | `(details: LoadChildrenCompleteDetails<T>) => void` | No | Called when a node finishes loading children |
| `onLoadChildrenError` | `(details: LoadChildrenErrorDetails<T>) => void` | No | Called when loading children fails for one or more nodes |
| `onRenameComplete` | `(details: RenameCompleteDetails) => void` | No | Called when a node label rename is completed |
| `onRenameStart` | `(details: RenameStartDetails<T>) => void` | No | Called when a node starts being renamed |
| `onSelectionChange` | `(details: SelectionChangeDetails<T>) => void` | No | Called when the selection changes |
| `scrollToIndexFn` | `(details: ScrollToIndexDetails<T>) => void` | No | Function to scroll to a specific index.
Useful for virtualized tree views. |
| `selectedValue` | `string[]` | No | The controlled selected node value |
| `selectionMode` | `'multiple' | 'single'` | No | Whether the tree supports multiple selection
- "single": only one node can be selected
- "multiple": multiple nodes can be selected |
| `typeahead` | `boolean` | No | Whether the tree supports typeahead search |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**BranchContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**BranchContent Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | branch-content |
| `[data-state]` | "open" | "closed" |
| `[data-depth]` | The depth of the item |
| `[data-path]` | The path of the item |
| `[data-value]` | The value of the item |


**BranchControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**BranchControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | branch-control |
| `[data-path]` | The path of the item |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-selected]` | Present when selected |
| `[data-focus]` | Present when focused |
| `[data-renaming]` |  |
| `[data-value]` | The value of the item |
| `[data-depth]` | The depth of the item |
| `[data-loading]` | Present when loading |


**BranchIndentGuide Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**BranchIndentGuide Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | branch-indent-guide |
| `[data-depth]` | The depth of the item |


**BranchIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**BranchIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | branch-indicator |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-selected]` | Present when selected |
| `[data-focus]` | Present when focused |
| `[data-loading]` | Present when loading |


**Branch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Branch Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | branch |
| `[data-depth]` | The depth of the item |
| `[data-branch]` |  |
| `[data-value]` | The value of the item |
| `[data-path]` | The path of the item |
| `[data-selected]` | Present when selected |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-loading]` | Present when loading |


**Branch CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--depth` | The depth value for the Branch |


**BranchText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**BranchText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | branch-text |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "open" | "closed" |
| `[data-loading]` | Present when loading |


**BranchTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**BranchTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | branch-trigger |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "open" | "closed" |
| `[data-value]` | The value of the item |
| `[data-loading]` | Present when loading |


**ItemIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | item-indicator |
| `[data-disabled]` | Present when disabled |
| `[data-selected]` | Present when selected |
| `[data-focus]` | Present when focused |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | item |
| `[data-path]` | The path of the item |
| `[data-value]` | The value of the item |
| `[data-focus]` | Present when focused |
| `[data-selected]` | Present when selected |
| `[data-disabled]` | Present when disabled |
| `[data-renaming]` |  |
| `[data-depth]` | The depth of the item |


**Item CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--depth` | The depth value for the Item |


**ItemText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | item-text |
| `[data-disabled]` | Present when disabled |
| `[data-selected]` | Present when selected |
| `[data-focus]` | Present when focused |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NodeCheckboxIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fallback` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No |  |
| `indeterminate` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No |  |


**NodeCheckbox Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NodeCheckbox Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | tree-view |
| `[data-part]` | node-checkbox |
| `[data-state]` | "checked" | "unchecked" | "indeterminate" |
| `[data-disabled]` | Present when disabled |


**NodeProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `indexPath` | `number[]` | Yes | The index path of the tree node |
| `node` | `NonNullable<T>` | No | The tree node |


**NodeRenameInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseTreeViewReturn<T>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Tree Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `collection` | `TreeCollection<V>` | The tree collection data |
| `expandedValue` | `string[]` | The value of the expanded nodes. |
| `setExpandedValue` | `(value: string[]) => void` | Sets the expanded value |
| `selectedValue` | `string[]` | The value of the selected nodes. |
| `setSelectedValue` | `(value: string[]) => void` | Sets the selected value |
| `checkedValue` | `string[]` | The value of the checked nodes |
| `toggleChecked` | `(value: string, isBranch: boolean) => void` | Toggles the checked value of a node |
| `setChecked` | `(value: string[]) => void` | Sets the checked value of a node |
| `clearChecked` | `VoidFunction` | Clears the checked value of a node |
| `getCheckedMap` | `() => CheckedValueMap` | Returns the checked details of branch and leaf nodes |
| `getVisibleNodes` | `() => VisibleNode<V>[]` | Returns the visible nodes as a flat array of nodes and their index path.
Useful for rendering virtualized tree views. |
| `expand` | `(value?: string[]) => void` | Function to expand nodes.
If no value is provided, all nodes will be expanded |
| `collapse` | `(value?: string[]) => void` | Function to collapse nodes
If no value is provided, all nodes will be collapsed |
| `select` | `(value?: string[]) => void` | Function to select nodes
If no value is provided, all nodes will be selected |
| `deselect` | `(value?: string[]) => void` | Function to deselect nodes
If no value is provided, all nodes will be deselected |
| `focus` | `(value: string) => void` | Function to focus a node by value |
| `selectParent` | `(value: string) => void` | Function to select the parent node of the focused node |
| `expandParent` | `(value: string) => void` | Function to expand the parent node of the focused node |
| `startRenaming` | `(value: string) => void` | Function to start renaming a node by value |
| `submitRenaming` | `(value: string, label: string) => void` | Function to submit the rename and update the node label |
| `cancelRenaming` | `() => void` | Function to cancel renaming without changes |


## Accessibility

Complies with the [Tree View WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).

### Keyboard Support

<KeyBindingsTable id="tree-view" />