Skip to main content

Tree

Status: Content below is sourced from the Naos Figma documentation page for TreeView (file kGOhFhP2iZtOGmJsuFavq7, node 12463:5185, "🧩 Naos – Data display and structure", checked 2026-08-19) plus the component's TypeScript source. This page's own "Description" section is a literal empty placeholder (the label "Description" with no text after it) — even more bare than Banner's "blablabla" filler. There is no written when-to-use or usage-rules text anywhere on this page. Nothing below is invented — qualitative usage guidance is left as an explicit TODO.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/molecular/Tree/types/Tree.types.ts (package @dtsl/react, exported as Tree, CheckedTree, Explorer)

Props (core types, verbatim from source — partial, file continues)​

export type NodeId = string | number

export interface TreeNode {
	id: NodeId
	label?: React.ReactNode | string
	value?: string
	children?: TreeNode[]
	icon?: React.ReactNode | (() => React.ReactNode)
	isGroup?: boolean
	disabled?: boolean
	nodeItem?: (treeNode: TreeNode) => React.ReactNode
	className?: string
	styles?: React.CSSProperties
	helpButtonMetaData?: Record<string, unknown>
	helpText?: string
	showDivider?: boolean
	breadcrumbLabel?: string
	tagMetaData?: Record<string, unknown>
	type?: string
}

Anatomy​

From the Figma "Anatomy" diagram, a 4-level nesting example: each level = chevron (expand/collapse, absent on leaf items) + checkbox (optional) + Label, indented per level.

Real variant axes (from Figma component property names)​

  • Behaviour: Clickable / Selectable
  • Openable: No / Simple / Yes
  • Type: Slot / Checkbox / AI sidebar (a distinct variant — see cross-reference below)
  • States: Default / Hover / Pressed / Focused / Disabled / Loading
  • Level: multi-level (01, 02, 03...)
  • Checkbox variant also supports Selected and Indeterminate (tri-state, for partial child selection)

Real product contexts documented (from the variant grid section headers): TYPE = Navigation, TYPE = Tree, TYPE = Content Management, TYPE = AI sidebar, TYPE = Empty state — confirming Tree is reused across at least these 5 distinct product surfaces, not just one "file tree" use case.

Cross-reference: the AI sidebar variant likely relates to the real AIDrawer/ai-chat implementation already found in source at packages/product/organisms/chat-ui/src/ai-chat/AIDrawer/ai-drawer.journal.md — worth checking that journal file when writing the real doc.

Real interaction model (from the Figma "Behaviour" section)​

Tree items have two distinct click zones, not one:

  • Select — clicking the label (and most of the row) selects/navigates
  • Expand/Collapse — a separate hit zone on the chevron (and, for some rows, the leading icon) toggles expansion

At Level 1, the Select zone appears to span the full row. At Levels 2+, the Select zone excludes the leading icon area, which instead is a dedicated Expand/Collapse hit target. Confirm this level-dependent hit-zone difference with engineering — it's a real, non-obvious interaction detail read directly off the Figma hit-zone overlays, not documented in prose anywhere.

When to Use​

TODO — not covered on this Figma page. Needs design/PM input.

When NOT to Use​

TODO — not covered on this Figma page. Needs design/PM input.

Decision Logic​

Need single-select navigation through nested items?              → Tree
Need multi-select via checkboxes, including partial/indeterminate
  selection when only some children are checked?                 → CheckedTree
Need a breadcrumb-style folder browsing experience?               → Explorer
  (TreeNode has a `breadcrumbLabel` field, consistent with this)

Accessibility​

TODO — not covered on this Figma page. Needs UX/product input. Given the two-zone click model above, keyboard equivalents (e.g. Enter/Space to select, Arrow keys or a dedicated key to expand/collapse) need real confirmation, not assumption.

Common Mistakes​

  • ❌ Treating Select and Expand/Collapse as the same click target — the Figma hit zones show they're distinct, especially below Level 1
  • TODO — remaining items need UX/product input.