Виджеты

TreeView

Дерево с клавиатурой, tri-state чекбоксами и переносом узлов.

Дерево с клавиатурной навигацией, tri-state чекбоксами и переносом узлов мышью. В shadcn/ui дерева нет вовсе — а нужно оно постоянно: файлы, разделы, вложенные задачи.

Установка

terminal

npx @toimetdev/pathlogs-ui add tree-view

Пример

📂src

📄index.ts

📂components

📄Button.tsx

📄Dialog.tsx

📄Menu.tsx

📁hooks

📄README.md

📄package.json

Стрелки — навигация, пробел — галочка, перетаскивание меняет вложенность.

<TreeView
  nodes={tree}
  expanded={expanded}
  onExpandedChange={setExpanded}
  checkable
  checked={checked}
  onCheckedChange={setChecked}
  onMove={(next) => setTree(next)}
  renderLabel={(node) => node.name}
/>

Стрелки двигают фокус и разворачивают ветки, пробел ставит галочку, перетаскивание меняет вложенность.

Пропсы

Проп	Тип	По умолчанию	Описание
`nodes`*	`N[]`	—	Дерево. У узла нужны id и children.
`renderLabel`*	`(node, meta) => ReactNode`	—	Подпись узла.
`renderIcon`	`(node, expanded) => ReactNode`	—	Иконка слева.
`expanded / onExpandedChange`	`Set<string> / (set) => void`	—	Развёрнутые узлы.
`checkable`	`boolean`	`false`	Включить чекбоксы с tri-state.
`checked / onCheckedChange`	`Set<string> / (set) => void`	—	Отмеченные узлы.
`onMove`	`(nodes, moved) => void`	—	Перенос узла мышью. Без него дерево только для чтения.
`onActivate`	`(node) => void`	—	Клик или Enter по узлу.

nodes*N[]

Дерево. У узла нужны id и children.

renderLabel*(node, meta) => ReactNode

Подпись узла.

renderIcon(node, expanded) => ReactNode

Иконка слева.

expanded / onExpandedChangeSet<string> / (set) => void

Развёрнутые узлы.

checkableboolean

по умолчанию: false

Включить чекбоксы с tri-state.

checked / onCheckedChangeSet<string> / (set) => void

Отмеченные узлы.

onMove(nodes, moved) => void

Перенос узла мышью. Без него дерево только для чтения.

onActivate(node) => void

Клик или Enter по узлу.

Tri-state чекбоксы

Модель отдельно

tsx

import {
  flattenTree,    // дерево → плоский список видимых строк (для виртуализации)
  moveNode,       // перенос с запретом переноса в потомка
  checkStates,    // tri-state для всего дерева
  treeKeyAction,  // клавиатура по ARIA
  filterTree,     // поиск с сохранением предков
} from "@/components/ui/tree-view/treeModel";