@snack-uikit/tree 0.9.34 → 0.9.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +78 -26
  3. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## <small>0.9.35 (2026-01-19)</small>
7
+
8
+ * chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
9
+ * chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
10
+ * docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
11
+
12
+
13
+
14
+
15
+
6
16
  ## <small>0.9.34 (2025-12-06)</small>
7
17
 
8
18
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -5,34 +5,86 @@
5
5
 
6
6
  [Changelog](./CHANGELOG.md)
7
7
 
8
- ## Example
9
-
10
- #### selectionMode = 'single'
11
-
12
- ```typescript jsx
13
- import { Tree } from '@snack-uikit/tree';
14
-
15
- // ...
8
+ ## Description
9
+
10
+ - Пакет `@snack-uikit/tree` предоставляет компонент `Tree` для отображения иерархических данных в виде дерева с возможностью навигации, раскрытия/сворачивания узлов и выбора элементов.
11
+ - Компонент поддерживает **три режима выбора**: одиночный (`selectionMode='single'`), множественный (`selectionMode='multi'`) и без выбора (`selectionMode` не указан).
12
+ - Позволяет **раскрывать и сворачивать узлы** с вложенными элементами, управляя состоянием раскрытия через пропы `expandedNodes` и `onExpand`.
13
+ - Поддерживает **асинхронную загрузку данных** при раскрытии узла через колбэк `onDataLoad`, что позволяет динамически подгружать дочерние элементы.
14
+ - Позволяет задавать **кастомные иконки** для узлов: отдельные иконки для открытого и закрытого состояния родительских элементов (`expandedIcon`, `collapsedIcon`) и иконки для дочерних элементов (`icon`).
15
+ - Поддерживает **отображение ссылок** через проп `href`, позволяя узлам дерева быть навигационными элементами.
16
+ - Может отображать **дополнительные действия** для узлов через пропы `nodeActions` и `parentActions`, которые показываются в виде выпадающего меню при наведении.
17
+ - Позволяет **отключать отдельные узлы** через проп `disabled`, делая их недоступными для взаимодействия.
18
+ - Поддерживает **кастомный контент** в заголовках узлов: можно передать как строку, так и React-компонент через проп `title`.
19
+ - Управляет видимостью **линий вложенности** (`showLines`) и **иконок** (`showIcons`) для настройки внешнего вида дерева.
20
+ - Обеспечивает **полную поддержку клавиатурной навигации**: стрелки вверх/вниз для перемещения между узлами, стрелки влево/вправо для сворачивания/раскрытия, Enter/Space для выбора, Tab для фокуса.
21
+ - В режиме множественного выбора поддерживает **каскадный выбор**: при выборе родительского узла автоматически выбираются все дочерние, а при частичном выборе дочерних родительский узел переходит в состояние неопределённости (indeterminate).
22
+ - Figma: [`Tree`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A34043&mode=design).
16
23
 
17
- const [selectedNode, setSelected] = useState<TreeNodeId>();
18
-
19
- // ...
20
-
21
- <Tree data={data} selectionMode='single' selected={selectedNode} onSelect={setSelected} />
22
- ```
23
-
24
- #### selectionMode = 'multi'
25
-
26
- ```typescript jsx
27
- import { Tree } from '@snack-uikit/tree';
28
-
29
- // ...
30
-
31
- const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
32
-
33
- // ...
24
+ ## Example
34
25
 
35
- <Tree data={data} selectionMode='multi' selected={selectedNodes} onSelect={setSelected} />
26
+ ```tsx
27
+ import { Tree, TreeNodeProps, TreeNodeId } from '@snack-uikit/tree';
28
+ import { useState } from 'react';
29
+
30
+ const data: TreeNodeProps[] = [
31
+ {
32
+ id: '1',
33
+ title: 'Документы',
34
+ nested: [
35
+ { id: '1.1', title: 'Документ 1', nested: [] },
36
+ { id: '1.2', title: 'Документ 2', nested: [] },
37
+ ],
38
+ },
39
+ {
40
+ id: '2',
41
+ title: 'Изображения',
42
+ nested: [
43
+ { id: '2.1', title: 'Фото 1', nested: [] },
44
+ { id: '2.2', title: 'Фото 2', nested: [] },
45
+ ],
46
+ },
47
+ ];
48
+
49
+ // Пример с одиночным выбором
50
+ function TreeSingleSelectExample() {
51
+ const [selectedNode, setSelected] = useState<TreeNodeId>();
52
+
53
+ return (
54
+ <Tree
55
+ data={data}
56
+ selectionMode="single"
57
+ selected={selectedNode}
58
+ onSelect={setSelected}
59
+ />
60
+ );
61
+ }
62
+
63
+ // Пример с множественным выбором
64
+ function TreeMultiSelectExample() {
65
+ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
66
+
67
+ return (
68
+ <Tree
69
+ data={data}
70
+ selectionMode="multi"
71
+ selected={selectedNodes}
72
+ onSelect={setSelected}
73
+ />
74
+ );
75
+ }
76
+
77
+ // Пример с асинхронной загрузкой данных
78
+ function TreeAsyncLoadExample() {
79
+ const onDataLoad = async (node: TreeNodeProps) => {
80
+ // Имитация загрузки данных с сервера
81
+ await new Promise(resolve => setTimeout(resolve, 1000));
82
+ // Возвращаем новые дочерние элементы
83
+ return true;
84
+ };
85
+
86
+ return <Tree data={data} onDataLoad={onDataLoad} />;
87
+ }
36
88
  ```
37
89
 
38
90
 
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Tree",
7
- "version": "0.9.34",
7
+ "version": "0.9.35",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,16 +36,16 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.19.16",
40
- "@snack-uikit/icons": "0.27.4",
41
- "@snack-uikit/list": "0.32.11",
42
- "@snack-uikit/toggles": "0.13.23",
43
- "@snack-uikit/truncate-string": "0.7.6",
44
- "@snack-uikit/typography": "0.8.11",
45
- "@snack-uikit/utils": "4.0.0",
39
+ "@snack-uikit/button": "0.19.17",
40
+ "@snack-uikit/icons": "0.27.5",
41
+ "@snack-uikit/list": "0.32.12",
42
+ "@snack-uikit/toggles": "0.13.24",
43
+ "@snack-uikit/truncate-string": "0.7.7",
44
+ "@snack-uikit/typography": "0.8.12",
45
+ "@snack-uikit/utils": "4.0.1",
46
46
  "classnames": "2.5.1",
47
47
  "react-transition-state": "2.1.1",
48
48
  "uncontrollable": "8.0.4"
49
49
  },
50
- "gitHead": "78bb9c9dd3a49941fa39bde71d838e9bf036e65d"
50
+ "gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
51
51
  }