<script>
  import { InlineNotification, UnorderedList, ListItem, Link } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`TreeView` displays hierarchical data in a collapsible tree structure. It supports node selection, expansion, icons, and programmatic control of the tree state.

## Default

Create a basic tree view using the `nodes` prop. Each node requires an `id` and `text`, with optional properties for `disabled`, `icon`, and child `nodes`.

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    In version 0.86.0, the <strong>children</strong> prop was renamed to <strong>nodes</strong> for <Link target="_blank" href="https://svelte.dev/docs/svelte/v5-migration-guide#The-children-prop-is-reserved">Svelte 5 compatibility</Link>.
  </div>
</InlineNotification>

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">Every node must have a unique id.</div>
</InlineNotification>

<FileSource src="/framed/TreeView/TreeView" />

## Slottable node

Customize node rendering using the default slot with the `let:node` directive. The node object provides:

<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
  <ListItem><strong>id</strong>: the node id</ListItem>
  <ListItem><strong>text</strong>: the node text</ListItem>
  <ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>
  <ListItem><strong>leaf</strong>: true if the node does not have child nodes</ListItem>
  <ListItem><strong>disabled</strong>: true if the node is disabled</ListItem>
  <ListItem><strong>selected</strong>: true if the node is selected</ListItem>
</UnorderedList>

<FileSource src="/framed/TreeView/TreeViewSlot" />

## Initial active node

Set the initial active node using the `activeId` prop.

<FileSource src="/framed/TreeView/TreeViewActive" />

## Compact size

Use the compact variant by setting `size` to `"compact"`.

<FileSource src="/framed/TreeView/TreeViewCompact" />

## With icons

Add icons to nodes by defining an `icon` property with a Carbon Svelte icon component.

<FileSource src="/framed/TreeView/TreeViewIcons" />

## Initial expanded nodes

Set initially expanded nodes using the `expandedIds` prop.

<FileSource src="/framed/TreeView/TreeViewExpanded" />

## Initial multiple selected nodes

Set multiple initially selected nodes using the `selectedIds` prop.

<FileSource src="/framed/TreeView/TreeViewMultiselect" />

## Expand all nodes

Programmatically expand all nodes using the `TreeView.expandAll()` method.

<FileSource src="/framed/TreeView/TreeViewExpandAll" />

## Collapse all nodes

Programmatically collapse all nodes using the `TreeView.collapseAll()` method.

<FileSource src="/framed/TreeView/TreeViewCollapseAll" />

## Expand a subset of nodes

Use `TreeView.expandNodes` to expand specific nodes based on a condition.

<FileSource src="/framed/TreeView/TreeViewExpandNodes" />

## Collapse a subset of nodes

Use `TreeView.collapseNodes` to collapse specific nodes based on a condition.

<FileSource src="/framed/TreeView/TreeViewCollapseNodes" />

## Show a specific node

Use `TreeView.showNode` to expand, select, and focus a specific node.

<FileSource src="/framed/TreeView/TreeViewShowNode" />

## Flat data structure

Convert flat data to a hierarchical structure using the `toHierarchy` utility.

<FileSource src="/framed/TreeView/TreeViewFlatArray" />
