@sberbusiness/triplex-next-mcp-server 1.43.0-beta → 1.45.0-beta

package/bundle/components/TreeView.md

@@ -1,9 +1,7 @@
 ---
 component: TreeView
-category: Data Display
-figma-node: ""
-figma-file: ""
-related: [AbstractTree]
+category: TreeView
+related: [TreeViewNode, CollapsibleTreeExtended, CollapsibleTree]
 tokens: []
 stories: stories/TreeView/TreeView.stories.tsx
 version: "1.0"
@@ -13,212 +11,391 @@ version: "1.0"
 
 ## Назначение
 
-Базовый каркас визуального дерева: семантическая разметка
-(`<ul role="tree">` + `<li role="treeitem">` + `<ul role="group">`) и
-keyboard navigation по вертикали (ArrowUp/ArrowDown). Параллельно
-поддерживает абстрактное дерево (`TreeViewAbstractNode`) для трекинга
-active/opened/tabIndex состояний нод. Контент каждой ноды — render-prop
-(заголовок, иконка, custom-обёртка — на потребителе).
+Каркас визуального дерева: семантическая разметка (`<ul role="tree">`,
+`<li role="treeitem">`, `aria-expanded`), построение абстрактного дерева нод по
+JSX-разметке, управление `tabIndex` и перемещение активной ноды стрелками
+вверх/вниз. Собственного оформления у компонента нет — разметку узла целиком
+рисует потребитель через render-функцию `children`.
 
-Используй когда: нужно дерево с произвольным content'ом нод. Сам
-TreeView не рисует expand-кнопку и chevron — потребитель использует
-`hasChildNodes`/`openedNode`/`setOpenedNode` из render-prop'а.
+Используй когда: нужен только каркас дерева (семантика, регистрация нод,
+навигация стрелками), а весь UI узла — свой.
 
----
-
-## Файловая структура
-
-```text
-src/components/TreeView/
-├── TreeView.tsx                       # class TreeView (Component) + ITreeViewComposition
-├── TreeViewContext.tsx                # ITreeViewContext + withTreeViewContext HOC
-├── TreeViewAbstractNode.tsx           # AbstractTreeNode + active/opened/tabIndex
-├── TreeViewAbstractNodeUtils.ts       # навигация по абстрактному дереву
-├── components/
-│   ├── TreeViewNode.tsx               # class TreeViewNodeWithContext (Component) + withTreeViewContext
-│   └── TreeViewGroup.tsx              # FC, <ul role="group">
-└── styles/TreeView.module.less
-```
-
-**Примечание:** в директории нет `index.ts` — импортировать из `./TreeView`,
-`./components/TreeViewNode`, `./components/TreeViewGroup` напрямую (или из
-точки экспорта дизайн-системы, если она настроена в `src/components/index.ts`).
+Не используй когда:
+- нужно типовое дерево «папка/файл» с шевроном, hover и focus-visible —
+  бери `CollapsibleTree`;
+- нужен свой UI узла, но с анимацией раскрытия и controlled/uncontrolled
+  состоянием — бери `CollapsibleTreeExtended`.
 
 ---
 
-## Композиция
-
-```tsx
-<TreeView>
-    <TreeView.Node id="1" prevNodeId={undefined} nextNodeId="2">
-        {({ activeNode, openedNode, hasChildNodes, isLastNode, setOpenedNode }) => (
-            <>
-                <button onClick={() => setOpenedNode(!openedNode)}>
-                    {hasChildNodes ? (openedNode ? "▾" : "▸") : "•"} Node 1
-                </button>
-                {openedNode && (
-                    <TreeView.Group>
-                        <TreeView.Node id="1.1">{/* ... */}</TreeView.Node>
-                    </TreeView.Group>
-                )}
-            </>
-        )}
-    </TreeView.Node>
-    <TreeView.Node id="2" prevNodeId="1">{/* ... */}</TreeView.Node>
-</TreeView>
-```
-
----
-
-## Публичный API
-
-### `TreeView` (class component)
+## Варианты и props
 
-| Prop | Тип | Описание |
-|---|---|---|
-| `children` | `ReactNode` | Дерево из `TreeView.Node` / `TreeView.Group`. |
-| `...HTMLAttributes<HTMLUListElement>` | — | На корневой `<ul role="tree">`. |
-
-Композиция: `TreeView.Node = TreeViewNode`, `TreeView.Group = TreeViewGroup`.
+### `TreeView`
 
-### `TreeView.Node` (`ITreeViewNodeProps`)
+Class-компонент. Собственных props, кроме `children`, нет — остальное это
+стандартные атрибуты `<ul>`.
 
-```ts
-extends Omit<HTMLAttributes<HTMLElement>, "children">
-```
-
-| Prop | Тип | Описание |
-|---|---|---|
-| `id` | `string` | **Обязателен**. Уникальный id ноды. |
-| `children` | `(props: ITreeViewNodeProvideProps) => JSX.Element` | Render-prop — потребитель рисует содержимое. |
-| `opened?` | `boolean` | Внешнее управление раскрытием. Синхронизируется через `componentDidUpdate`. |
-| `prevNodeId?` | `string` | Id соседа слева (для корректной вставки в абстрактное дерево). |
-| `nextNodeId?` | `string` | Id соседа справа. |
-| `...HTMLAttributes<HTMLElement>` | — | На `<li role="treeitem">`. |
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `children` | `React.ReactNode` | — | Ноды дерева: `TreeView.Node` напрямую или компоненты-обёртки над ним |
+| `...HTMLUListElementAttributes` | — | — | Все стандартные атрибуты `<ul>`; `className` мерджится с собственным классом |
 
-#### `ITreeViewNodeProvideProps` (render-prop)
+Статические свойства: `TreeView.Node` (= `TreeViewNode`),
+`TreeView.Group` (= `TreeViewGroup`).
 
-| Поле | Тип | Описание |
-|---|---|---|
-| `activeNode` | `boolean` | Нода активна для keyboard-навигации. |
-| `openedNode` | `boolean` | Раскрыта. |
-| `hasChildNodes` | `boolean` | Есть вложенные `TreeView.Node`. |
-| `isLastNode` | `boolean` | Последняя в полном обходе дерева. |
-| `setOpenedNode` | `(opened: boolean) => void` | Переключение opened. |
-
-### `TreeView.Group` (`ITreeViewGroupProps`)
-
-```ts
-extends HTMLAttributes<HTMLUListElement>
-```
+### `TreeView.Node` (`TreeViewNode`)
 
-`<ul role="group">` — обёртка для вложенных нод.
+Узел дерева со своим API: `id`, `opened`, `prevNodeId` / `nextNodeId`,
+render-prop `children` с пятью provide-props, контракт по `focus` / `blur` и
+`aria-expanded`. Props, инварианты, порядок регистрации нод и правила
+раскрытия описаны в отдельном документе —
+[`TreeViewNode-ai.md`](./TreeViewNode-ai.md).
 
-### `TreeViewContext` / `withTreeViewContext` / `IWithTreeViewContextProps`
+### `TreeView.Group` (`TreeViewGroup`)
 
-Экспорт контекста и HOC. `withTreeViewContext<T>(Component)` оборачивает
-класс-компонент, передавая `treeViewContext: ITreeViewContext` как props.
+`<ul role="group">` — обёртка вложенных нод. `forwardRef` на `<ul>`,
+`className` мерджится, остальные атрибуты пробрасываются. Собственных props нет.
 
-### `TreeViewAbstractNode` (class)
-
-Расширяет `AbstractTreeNode<TreeViewAbstractNode>`:
-
-| Метод | Назначение |
-|---|---|
-| `getId()` / id фиксирован в конструкторе | — |
-| `getActive()` / `setActive(boolean)` | Активность для keyboard. |
-| `getOpened()` / `setOpened(boolean)` | Раскрытие. |
-| `getTabIndex()` / `setTabIndex(n)` | Управление roving tabindex (0 для первой ноды первого уровня, -1 — для остальных). |
+---
 
-### `TreeViewAbstractNodeUtils`
+## Дизайн-токены
 
-Утилиты обхода: `getNode`, `setActiveNode`, `setActiveNextNode`,
-`setActivePrevNode`, `getActiveNode`, `isLastNode`.
+Собственных CSS-переменных компонент не определяет. `TreeView.module.less`
+задаёт только сброс отступов и маркеров списка плюс `outline: none` на `<li>`
+(focus-стиль рисует потребитель).
 
 ---
 
-## Поведение
+## Инварианты
 
-### Жизненный цикл ноды
+- **`TreeView` и `TreeViewNodeWithContext` — class-компоненты.** Это legacy,
+  зафиксированный публичным API: `ref` на `TreeView` отдаёт инстанс класса.
+  Перевод на функциональные компоненты и добавление `forwardRef` — breaking
+  change поведения `ref`. Не мигрировать без отдельного решения мейнтейнера.
+- **Barrel `src/components/TreeView/index.ts`** реэкспортирует модули семейства
+  целиком (`export * from ...`), поэтому публично всё, что они экспортируют:
+  `TreeView` и `ITreeViewProps`, `TreeViewGroup` и `ITreeViewGroupProps`, а от
+  ноды — состав, перечисленный в
+  [TreeViewNode-ai.md](./TreeViewNode-ai.md) (там же и класс
+  `TreeViewNodeWithContext`). Состав и имена менять нельзя — от них зависят
+  `CollapsibleTreeExtended` и `CollapsibleTree`.
+- **`TreeViewContext` не экспортируется из barrel**, но `ITreeViewContext`
+  транзитивно виден через `ITreeViewNodePropsWithContext`. Поле `updateCount`
+  из контекста убирать нельзя без breaking change типа.
+- **Абстрактное дерево мутируемое.** `TreeViewAbstractNode` меняется на месте,
+  поэтому смена контекста сигнализируется числом `updateCount` в состоянии
+  `TreeView`. Любая мутация дерева обязана сопровождаться его инкрементом,
+  иначе ноды отрендерят устаревшие `hasChildNodes` / `isLastNode`.
+- **Слушатель `keydown` висит на `window`**, а не на корневом `<ul>`: активная
+  нода не обязана иметь DOM-фокус. Подписка живёт ровно столько, сколько в дереве
+  есть активная нода: появляется на `focus` узла и снимается, как только фокус
+  ушёл из дерева. Пока активной ноды нет, дерево не обрабатывает стрелки и не
+  отменяет скролл страницы.
+- **`role="tree"` / `role="treeitem"` / `role="group"` и `aria-expanded`**
+  выставляются после `{...props}` — семантика дерева часть контракта компонента,
+  потребитель её не переопределяет. `tabIndex` остаётся до спреда: roving
+  tabindex — поведение, а не семантика, и его потребитель при желании может
+  задать сам.
 
-`TreeViewNodeWithContext` (class):
-- **constructor:** создаёт `TreeViewAbstractNode({id})`, вызывает `treeViewContext.setOpenedNode(...)` + `registerNode(node, parentNode, prevNode, nextNode)`.
-- **componentDidUpdate:** при изменении `opened` props синхронизирует с абстрактной нодой.
-- **componentWillUnmount:** `treeViewContext.removeNode(node)`.
+---
 
-### Контекст
+## Accessibility
 
-Каждая нода **переопределяет** `parentNode` в `TreeViewContext.Provider`,
-чтобы дочерние `TreeView.Node` регистрировались в правильном родителе.
+Ориентир — WAI-ARIA Authoring Practices,
+[treeview-2a](https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html).
+
+- Корень — `<ul role="tree">`, узел — `<li role="treeitem">` с `aria-expanded`,
+  вложенная группа — `<ul role="group">` (`TreeView.Group`).
+- **Roving tabindex:** первая нода первого уровня получает `tabIndex={0}`,
+  остальные — `tabIndex={-1}`. Пересчитывается при регистрации и удалении нод,
+  то есть в дерево можно попасть одним Tab.
+- **Клавиатура:** `ArrowDown` / `ArrowUp` (по `event.keyCode`) переносят
+  активную ноду на следующую/предыдущую с `preventDefault` (чтобы не скроллить
+  страницу). Обход циклический: после последней ноды активной становится первая.
+  Стрелки спускаются только в раскрытые (`opened`) ветки: `ArrowUp` с самой
+  первой ноды дерева переходит на последнюю **видимую** ноду — если последняя
+  ветка свёрнута, активной становится она сама, а не её скрытый потомок.
+- **Активная нода ≠ DOM-фокус.** Активной нода становится по `focus`
+  (`focusin` всплывает до `<li>`, дальше `stopPropagation`), а стрелки двигают
+  только флаг активности в абстрактном дереве — DOM-фокус остаётся на исходном
+  узле. Подсветку рисует потребитель по provide-prop `activeNode`. `blur`
+  снимает активность.
+- Раскрытие/сворачивание по клавиатуре (`ArrowRight`/`ArrowLeft`, `Home`/`End`)
+  компонент **не** реализует — это на потребителе.
+- Текстовые подписи и `aria-label` компонент не хардкодит: библиотека
+  мультиязычная, всю разметку узла даёт потребитель.
 
-### Keyboard navigation
+---
 
-`TreeView.componentDidMount` вешает `window.addEventListener("keydown")`:
-- ArrowDown → `setActiveNextNode` + `preventDefault` + триггер ререндера.
-- ArrowUp → `setActivePrevNode`.
-- Срабатывает только если есть активная нода (`getActiveNode != undefined`).
+## Связанные компоненты
 
-### Active state и focus
+- `TreeViewNode` (`TreeView.Node`) — узел дерева, единственная часть семейства
+  со своим API: render-prop `children`, регистрация в абстрактном дереве,
+  focus/blur-контракт. См. [`TreeViewNode-ai.md`](./TreeViewNode-ai.md).
+- `CollapsibleTreeExtended` (`src/components/CollapsibleTreeExtended`) — обёртка
+  над `TreeView`, добавляющая каждой ноде accordion-логику: анимацию раскрытия
+  и controlled/uncontrolled состояние.
+- `CollapsibleTree` (`src/components/CollapsibleTree`) — готовое дерево
+  «папка/файл» поверх `CollapsibleTreeExtended`. Закрывает большинство
+  прикладных случаев.
+- `AbstractTreeNode` (`src/components/AbstractTree`) — базовая реализация
+  абстрактного дерева, от которой наследуется `TreeViewAbstractNode`, и функция
+  обхода `traverseAbstractTree`.
 
-- `<li>` `tabIndex` берётся из `abstractNode.getTabIndex()` (0 для первой первого уровня, -1 — остальных).
-- `onFocus` (event.stopPropagation, чтобы родитель не получил bubble) → `setActiveNode(node, true)`.
-- `onBlur` → `setActiveNode(node, false)`.
+---
 
-### `updateCount` в state
+## Stories
 
-Числовой счётчик, увеличивается при `registerNode` / `setActiveNode` /
-`setOpenedNode` / keyboard навигации. Триггерит ререндер контекста, т.к.
-`abstractNode` — мутируемый объект (изменения не вызывают триггер
-самостоятельно).
+Основные истории: `stories/TreeView/TreeView.stories.tsx`
+Файлы примеров: `stories/TreeView/examples/`
 
-⚠️ В коде `prevCount++` (post-increment) — возвращает старое значение,
-поэтому фактически `updateCount` не растёт. Тем не менее `setState` всё
-равно вызывает ререндер, поэтому работает.
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `defaultOpened` и глубины вложенности |
+| `Default` | `Default.tsx` | Минимальное дерево: плоский список `TreeView.Node` |
+| `Nested` | `Nested.tsx` | Вложенность через `TreeView.Group`, раскрытие через prop `opened`, `hasChildNodes` |
+| `Keyboard navigation` | `KeyboardNavigation.tsx` | Перемещение `activeNode` стрелками, подсветка активной ноды, `isLastNode` |
+| `VisualTests` | `VisualTests.tsx` | Свёрнутое и раскрытое дерево в одном кадре, активная нода через `play` |
 
 ---
 
-## Инварианты
+## История изменений
 
-- **`TreeView` и `TreeViewNode` — class components**, не FC и не forwardRef. Рефы на `<ul>`/`<li>` приходят через `htmlAttributes` (но не пробрасываются явно).
-- **`TreeView.Node`'s `id` обязателен и должен быть уникальным** во всём дереве.
-- **`prevNodeId`/`nextNodeId` опциональны**, но без них вставка в абстрактное дерево идёт в конец (порядок может разойтись с DOM при динамическом добавлении).
-- **Render-prop `children`** — обязателен (`(props) => JSX.Element`).
-- **`<li role="treeitem">`** + `<ul role="group">` + `<ul role="tree">` — фиксированная семантика по WAI-ARIA `treeview-2a`.
-- **Keyboard listener на `window`** — может конфликтовать с другими компонентами; для multiple TreeView'ов обработчики складываются (срабатывает первый с активной нодой).
-- **Mutable `abstractNode`** — изменения требуют ручного `setState({updateCount})` для ререндера. Не доставать ссылку из contextValue для дальнейшей мутации без `setState`.
-- **`event.stopPropagation` в onFocus/onBlur ноды** — обязательно, чтобы родительский `<li>` не получил bubble.
-- **Композиция через `TreeView.Node = TreeViewNode`** — статические свойства класса.
-- **Опечатка в `prevCount++` (vs `++prevCount`)** — намеренно или нет, не править без анализа поведения.
-- **Нет `index.ts`** в директории — импорты идут напрямую из файлов компонентов.
+| Дата | Изменение |
+|---|---|
+| 2026-08-26 | Описание `TreeView.Node` вынесено в отдельный `TreeViewNode-ai.md`, здесь оставлена ссылка |
+| 2026-08-25 | Слушатель `keydown` подписан только пока в дереве есть активная нода: после ухода фокуса из дерева стрелки снова достаются странице. `role` и `aria-expanded` перенесены после `{...props}` — потребитель больше не может их переопределить |
+| 2026-08-24 | `ArrowUp` с первой ноды дерева больше не заходит внутрь свёрнутой последней ветки — активной становится последняя видимая нода (`TreeViewAbstractNodeUtils.getPrevNode`) |
+| 2026-08-21 | Создан документ. AI-рефакторинг: починен счётчик `updateCount` (постфиксный инкремент не увеличивал значение), удалён мёртвый код, добавлены unit-тесты и stories. `TreeView.Group` получил `forwardRef` и перестал затирать собственный класс переданным `className`; после удаления ноды соседние ноды теперь перерисовываются (актуальные `hasChildNodes` / `isLastNode`) |
 
 ---
 
-## Accessibility
+## Примеры использования
 
-- Реализовано по WAI-ARIA `treeview-2a` pattern: https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html
-- `role="tree"` на корне, `role="treeitem"` на `<li>`, `role="group"` на `<ul>`.
-- `aria-expanded={openedNode}` на каждом `<li>`.
-- Roving tabindex (только первая нода первого уровня в tab-стопе).
-- ArrowDown/ArrowUp — навигация по дереву (только при наличии активной ноды).
-- ArrowLeft/ArrowRight (свернуть/раскрыть) — НЕ реализованы; должен делать потребитель в render-prop'е через `setOpenedNode`.
+### Default
 
----
+`stories/TreeView/examples/Default.tsx`
 
-## Связанные компоненты
+```tsx
+import React from "react";
+import { ETextSize, Text, TreeView } from "@sberbusiness/triplex-next";
+import "./Default.less";
+
+const items = [
+    { id: "item-1", label: "Item text" },
+    { id: "item-2", label: "Item text" },
+    { id: "item-3", label: "Item text" },
+];
+
+export const Default = () => (
+    <div className="tree-view-default-example" style={{ maxWidth: 420 }}>
+        <TreeView aria-label="Tree">
+            {items.map((item) => (
+                <TreeView.Node key={item.id} id={item.id}>
+                    {() => (
+                        <div className="tree-view-default-example-row">
+                            <Text size={ETextSize.B1} tag="span">
+                                {item.label}
+                            </Text>
+                        </div>
+                    )}
+                </TreeView.Node>
+            ))}
+        </TreeView>
+    </div>
+);
+```
 
-- `AbstractTree` / `AbstractTreeNode` — базовый класс для абстрактного дерева.
-- Любой потребитель — рисует UI ноды (заголовок, кнопка, иконка expand) через render-prop.
+### Nested
 
----
+`stories/TreeView/examples/Nested.tsx`
 
-## Stories
+```tsx
+import React from "react";
+import clsx from "clsx";
+import { CaretrightStrokeSrvIcon24 } from "@sberbusiness/icons-next";
+import { ETextSize, Text, TreeView } from "@sberbusiness/triplex-next";
+import "./Nested.less";
+
+interface INodeData {
+    id: string;
+    label: string;
+    children?: INodeData[];
+}
+
+const nodes: INodeData[] = [
+    {
+        id: "folder-1",
+        label: "Folder text",
+        children: [
+            { id: "file-1-1", label: "File text" },
+            { id: "file-1-2", label: "File text" },
+        ],
+    },
+    {
+        id: "folder-2",
+        label: "Folder text",
+        children: [
+            {
+                id: "folder-2-1",
+                label: "Folder text",
+                children: [{ id: "file-2-1-1", label: "File text" }],
+            },
+        ],
+    },
+    { id: "file-3", label: "File text" },
+];
+
+interface ITreeNodeProps {
+    node: INodeData;
+}
+
+const TreeNode = ({ node }: ITreeNodeProps) => {
+    const [opened, setOpened] = React.useState(false);
+    const branch = Boolean(node.children?.length);
+
+    const toggle = () => setOpened((prevOpened) => !prevOpened);
+
+    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        // Клик по вложенной ноде не должен раскрывать родительскую.
+        event.stopPropagation();
+
+        if (branch) {
+            toggle();
+        }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key !== "Enter" && event.key !== " ") {
+            return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (branch) {
+            toggle();
+        }
+    };
+
+    return (
+        <TreeView.Node id={node.id} opened={opened} onClick={handleClick} onKeyDown={handleKeyDown}>
+            {({ hasChildNodes, openedNode }) => (
+                <>
+                    <div className={clsx("tree-view-nested-example-row", { branch })}>
+                        {hasChildNodes ? (
+                            <CaretrightStrokeSrvIcon24
+                                paletteIndex={5}
+                                className={clsx("tree-view-nested-example-chevron", { opened: openedNode })}
+                                aria-hidden
+                            />
+                        ) : (
+                            <span className="tree-view-nested-example-chevron-placeholder" />
+                        )}
+                        <Text size={ETextSize.B1} tag="span">
+                            {node.label}
+                        </Text>
+                    </div>
+                    {node.children ? (
+                        // Группа остаётся смонтированной: так вложенные ноды зарегистрированы в дереве
+                        // и родитель знает про hasChildNodes даже в свёрнутом состоянии.
+                        <TreeView.Group className={clsx("tree-view-nested-example-group", { collapsed: !openedNode })}>
+                            {node.children.map((child) => (
+                                <TreeNode key={child.id} node={child} />
+                            ))}
+                        </TreeView.Group>
+                    ) : null}
+                </>
+            )}
+        </TreeView.Node>
+    );
+};
+
+export const Nested = () => (
+    <div className="tree-view-nested-example" style={{ maxWidth: 420 }}>
+        <TreeView aria-label="Tree">
+            {nodes.map((node) => (
+                <TreeNode key={node.id} node={node} />
+            ))}
+        </TreeView>
+    </div>
+);
+```
 
-Основные истории: `stories/TreeView/TreeView.stories.tsx`
+### Keyboard navigation
 
----
+`stories/TreeView/examples/KeyboardNavigation.tsx`
 
-## История изменений
+```tsx
+import React from "react";
+import clsx from "clsx";
+import { ECaptionSize, ETextSize, Caption, Text, TreeView } from "@sberbusiness/triplex-next";
+import "./KeyboardNavigation.less";
+
+interface INodeData {
+    id: string;
+    label: string;
+    children?: INodeData[];
+}
+
+const nodes: INodeData[] = [
+    {
+        id: "folder-1",
+        label: "Folder text",
+        children: [
+            { id: "file-1-1", label: "File text" },
+            { id: "file-1-2", label: "File text" },
+        ],
+    },
+    {
+        id: "folder-2",
+        label: "Folder text",
+        children: [{ id: "file-2-1", label: "File text" }],
+    },
+];
+
+interface ITreeNodeProps {
+    node: INodeData;
+}
+
+const TreeNode = ({ node }: ITreeNodeProps) => (
+    // Ветки раскрыты сразу: стрелки спускаются только в раскрытые ноды.
+    <TreeView.Node id={node.id} opened>
+        {({ activeNode, isLastNode }) => (
+            <>
+                <div className={clsx("tree-view-keyboard-example-row", { active: activeNode })}>
+                    <Text size={ETextSize.B1} tag="span">
+                        {node.label}
+                    </Text>
+                    {isLastNode ? (
+                        <Caption size={ECaptionSize.C2} tag="span">
+                            isLastNode
+                        </Caption>
+                    ) : null}
+                </div>
+                {node.children ? (
+                    <TreeView.Group>
+                        {node.children.map((child) => (
+                            <TreeNode key={child.id} node={child} />
+                        ))}
+                    </TreeView.Group>
+                ) : null}
+            </>
+        )}
+    </TreeView.Node>
+);
+
+export const KeyboardNavigation = () => (
+    <div className="tree-view-keyboard-example" style={{ maxWidth: 420 }}>
+        <Caption size={ECaptionSize.C1} tag="p">
+            Поставьте фокус на любой узел и используйте стрелки вверх/вниз.
+        </Caption>
+        <TreeView aria-label="Tree">
+            {nodes.map((node) => (
+                <TreeNode key={node.id} node={node} />
+            ))}
+        </TreeView>
+    </div>
+);
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |