@snack-uikit/list 0.32.11 → 0.32.13
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.
- package/CHANGELOG.md +23 -0
- package/README.md +114 -0
- package/dist/cjs/components/Items/PinGroupItem/styles.module.css +10 -10
- package/dist/cjs/helperComponents/Separator/styles.module.css +3 -1
- package/dist/esm/components/Items/PinGroupItem/styles.module.css +10 -10
- package/dist/esm/helperComponents/Separator/styles.module.css +3 -1
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,29 @@
|
|
|
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.32.13 (2026-02-18)</small>
|
|
7
|
+
|
|
8
|
+
### Only dependencies have been changed
|
|
9
|
+
* [@snack-uikit/icons@0.27.6]($PUBLIC_PROJECT_URL/blob/master/packages/icons/CHANGELOG.md)
|
|
10
|
+
* [@snack-uikit/info-block@0.6.37]($PUBLIC_PROJECT_URL/blob/master/packages/info-block/CHANGELOG.md)
|
|
11
|
+
* [@snack-uikit/search-private@0.4.35]($PUBLIC_PROJECT_URL/blob/master/packages/search-private/CHANGELOG.md)
|
|
12
|
+
* [@snack-uikit/toggles@0.13.25]($PUBLIC_PROJECT_URL/blob/master/packages/toggles/CHANGELOG.md)
|
|
13
|
+
* [@snack-uikit/truncate-string@0.7.8]($PUBLIC_PROJECT_URL/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## <small>0.32.12 (2026-01-19)</small>
|
|
20
|
+
|
|
21
|
+
* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
|
|
22
|
+
* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
|
|
23
|
+
* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
6
29
|
## <small>0.32.11 (2025-12-06)</small>
|
|
7
30
|
|
|
8
31
|
* chore(FF-7187): update typescript to 5.9.3 & some eslint deps ([b84df17](https://github.com/cloud-ru-tech/snack-uikit/commit/b84df17))
|
package/README.md
CHANGED
|
@@ -6,6 +6,120 @@
|
|
|
6
6
|
|
|
7
7
|
[Changelog](./CHANGELOG.md)
|
|
8
8
|
|
|
9
|
+
## Description
|
|
10
|
+
|
|
11
|
+
- Пакет `@snack-uikit/list` предоставляет компоненты для отображения структурированных списков с поддержкой выбора элементов, поиска, группировки и вложенных структур.
|
|
12
|
+
- Компоненты поддерживают различные типы элементов: базовые элементы, группы, аккордеоны и вложенные списки, а также режимы выбора (одиночный, множественный, без выбора).
|
|
13
|
+
- Списки поддерживают закрепление элементов сверху и снизу, кастомный футер, поисковую строку, виртуализацию для больших объёмов данных и полноценную навигацию с клавиатуры.
|
|
14
|
+
- Компоненты работают в контролируемом и неконтролируемом режимах, поддерживают состояния загрузки и пустых данных, а также настраиваемые экраны для различных сценариев (нет данных, нет результатов поиска, ошибка).
|
|
15
|
+
|
|
16
|
+
## List
|
|
17
|
+
|
|
18
|
+
### Description
|
|
19
|
+
|
|
20
|
+
- `List` — компонент для отображения структурированного списка элементов, встраиваемого непосредственно в контент страницы.
|
|
21
|
+
- Поддерживает **режимы выбора** элементов: одиночный (`selection.mode="single"`), множественный (`selection.mode="multiple"`) и без выбора (`selection` не передан).
|
|
22
|
+
- Позволяет **закреплять элементы** сверху (`pinTop`) и снизу (`pinBottom`), которые остаются видимыми при прокрутке основного списка.
|
|
23
|
+
- Включает **поисковую строку** (`search`) для фильтрации элементов по содержимому.
|
|
24
|
+
- Поддерживает **различные типы элементов**: базовые элементы, группы с заголовками, аккордеоны с раскрывающимся контентом и вложенные списки (`next-list`).
|
|
25
|
+
- Может отображать **кастомный футер** (`footer`) с дополнительными элементами управления.
|
|
26
|
+
- Поддерживает **виртуализацию** (`virtualized`) для оптимизации рендеринга больших списков (от 1000 элементов).
|
|
27
|
+
- Обеспечивает **навигацию с клавиатуры** с поддержкой стрелок, Enter, Space и других клавиш для перемещения и выбора элементов.
|
|
28
|
+
- Позволяет настраивать **состояния пустых данных** (`noDataState`, `noResultsState`, `errorDataState`) для различных сценариев.
|
|
29
|
+
- Figma: [`List`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.0.0?node-id=41%3A7631&mode=design).
|
|
30
|
+
|
|
31
|
+
### Example
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { List } from '@snack-uikit/list';
|
|
35
|
+
|
|
36
|
+
function Example() {
|
|
37
|
+
const [selected, setSelected] = useState<string | undefined>();
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<List
|
|
41
|
+
items={[
|
|
42
|
+
{
|
|
43
|
+
id: '1',
|
|
44
|
+
content: { option: 'Первый элемент', description: 'Описание первого элемента' },
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
id: '2',
|
|
48
|
+
content: { option: 'Второй элемент', description: 'Описание второго элемента' },
|
|
49
|
+
},
|
|
50
|
+
]}
|
|
51
|
+
selection={{
|
|
52
|
+
mode: 'single',
|
|
53
|
+
value: selected,
|
|
54
|
+
onChange: setSelected,
|
|
55
|
+
}}
|
|
56
|
+
search={{
|
|
57
|
+
value: '',
|
|
58
|
+
onChange: (value) => console.log('Search:', value),
|
|
59
|
+
placeholder: 'Поиск...',
|
|
60
|
+
}}
|
|
61
|
+
pinTop={[
|
|
62
|
+
{
|
|
63
|
+
id: 'pinned-top',
|
|
64
|
+
content: { option: 'Закреплённый элемент сверху' },
|
|
65
|
+
},
|
|
66
|
+
]}
|
|
67
|
+
footer={<button>Дополнительное действие</button>}
|
|
68
|
+
/>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Droplist
|
|
74
|
+
|
|
75
|
+
### Description
|
|
76
|
+
|
|
77
|
+
- `Droplist` — компонент выпадающего списка, который отображается в поповере при взаимодействии с триггером (кнопкой, ссылкой или другим элементом).
|
|
78
|
+
- Объединяет функциональность `List` с возможностями выпадающего меню: появляется по клику, ховеру, фокусу или другим триггерам и автоматически позиционируется относительно элемента-триггера.
|
|
79
|
+
- Поддерживает **различные триггеры открытия** (`trigger`): `click`, `hover`, `focus`, `focusVisible` и их комбинации.
|
|
80
|
+
- Позволяет настраивать **позиционирование** (`placement`) относительно триггера: сверху, снизу, слева, справа и их вариации.
|
|
81
|
+
- Может **автоматически закрываться** после выбора элемента (`closeDroplistOnItemClick`) в режимах без выбора или одиночного выбора.
|
|
82
|
+
- Поддерживает **управление шириной** поповера (`widthStrategy`): автоматическая, равная триггеру или больше триггера.
|
|
83
|
+
- Включает все возможности `List`: выбор элементов, поиск, группировка, закрепление элементов, виртуализация и навигация с клавиатуры.
|
|
84
|
+
- Триггер может быть передан как React-элемент или функция-рендер, которая получает обработчик `onKeyDown` для поддержки навигации с клавиатуры.
|
|
85
|
+
- Figma: [`Droplist`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.0.0?node-id=41%3A7631&mode=design).
|
|
86
|
+
|
|
87
|
+
### Example
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import { Droplist } from '@snack-uikit/list';
|
|
91
|
+
import { ButtonFilled } from '@snack-uikit/button';
|
|
92
|
+
|
|
93
|
+
function Example() {
|
|
94
|
+
const [selected, setSelected] = useState<string | undefined>();
|
|
95
|
+
|
|
96
|
+
return (
|
|
97
|
+
<Droplist
|
|
98
|
+
items={[
|
|
99
|
+
{
|
|
100
|
+
id: '1',
|
|
101
|
+
content: { option: 'Первый элемент', description: 'Описание первого элемента' },
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
id: '2',
|
|
105
|
+
content: { option: 'Второй элемент', description: 'Описание второго элемента' },
|
|
106
|
+
},
|
|
107
|
+
]}
|
|
108
|
+
selection={{
|
|
109
|
+
mode: 'single',
|
|
110
|
+
value: selected,
|
|
111
|
+
onChange: setSelected,
|
|
112
|
+
}}
|
|
113
|
+
trigger="click"
|
|
114
|
+
placement="bottom-start"
|
|
115
|
+
closeDroplistOnItemClick
|
|
116
|
+
>
|
|
117
|
+
<ButtonFilled label="Выбрать элемент" />
|
|
118
|
+
</Droplist>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
9
123
|
[//]: DOCUMENTATION_SECTION_START
|
|
10
124
|
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
|
|
11
125
|
## kindFlattenItems
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
.pinTopItem{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
border:none;
|
|
5
|
-
}
|
|
6
1
|
.pinTopItem[data-size=s]{
|
|
7
2
|
padding-bottom:var(--radius-drop-list-container, 4px);
|
|
8
3
|
gap:var(--radius-drop-list-container, 4px);
|
|
@@ -15,16 +10,16 @@
|
|
|
15
10
|
padding-bottom:var(--radius-drop-list-container, 4px);
|
|
16
11
|
gap:var(--radius-drop-list-container, 4px);
|
|
17
12
|
}
|
|
13
|
+
.pinTopItem{
|
|
14
|
+
display:flex;
|
|
15
|
+
flex-direction:column;
|
|
16
|
+
border:none;
|
|
17
|
+
}
|
|
18
18
|
.pinTopItem li,
|
|
19
19
|
.pinTopItem ul{
|
|
20
20
|
list-style-type:none;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.pinBottomItem{
|
|
24
|
-
display:flex;
|
|
25
|
-
flex-direction:column;
|
|
26
|
-
border:none;
|
|
27
|
-
}
|
|
28
23
|
.pinBottomItem[data-size=s]{
|
|
29
24
|
padding-top:var(--radius-drop-list-container, 4px);
|
|
30
25
|
gap:var(--radius-drop-list-container, 4px);
|
|
@@ -37,6 +32,11 @@
|
|
|
37
32
|
padding-top:var(--radius-drop-list-container, 4px);
|
|
38
33
|
gap:var(--radius-drop-list-container, 4px);
|
|
39
34
|
}
|
|
35
|
+
.pinBottomItem{
|
|
36
|
+
display:flex;
|
|
37
|
+
flex-direction:column;
|
|
38
|
+
border:none;
|
|
39
|
+
}
|
|
40
40
|
.pinBottomItem li,
|
|
41
41
|
.pinBottomItem ul{
|
|
42
42
|
list-style-type:none;
|
|
@@ -82,7 +82,6 @@
|
|
|
82
82
|
.separatorWithoutLabel{
|
|
83
83
|
display:flex;
|
|
84
84
|
align-items:flex-end;
|
|
85
|
-
box-sizing:border-box;
|
|
86
85
|
}
|
|
87
86
|
.separatorWithoutLabel[data-size=s]{
|
|
88
87
|
padding-top:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
|
|
@@ -102,6 +101,9 @@
|
|
|
102
101
|
padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
|
|
103
102
|
padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
|
|
104
103
|
}
|
|
104
|
+
.separatorWithoutLabel{
|
|
105
|
+
box-sizing:border-box;
|
|
106
|
+
}
|
|
105
107
|
|
|
106
108
|
.label{
|
|
107
109
|
overflow:hidden;
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
.pinTopItem{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
border:none;
|
|
5
|
-
}
|
|
6
1
|
.pinTopItem[data-size=s]{
|
|
7
2
|
padding-bottom:var(--radius-drop-list-container, 4px);
|
|
8
3
|
gap:var(--radius-drop-list-container, 4px);
|
|
@@ -15,16 +10,16 @@
|
|
|
15
10
|
padding-bottom:var(--radius-drop-list-container, 4px);
|
|
16
11
|
gap:var(--radius-drop-list-container, 4px);
|
|
17
12
|
}
|
|
13
|
+
.pinTopItem{
|
|
14
|
+
display:flex;
|
|
15
|
+
flex-direction:column;
|
|
16
|
+
border:none;
|
|
17
|
+
}
|
|
18
18
|
.pinTopItem li,
|
|
19
19
|
.pinTopItem ul{
|
|
20
20
|
list-style-type:none;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.pinBottomItem{
|
|
24
|
-
display:flex;
|
|
25
|
-
flex-direction:column;
|
|
26
|
-
border:none;
|
|
27
|
-
}
|
|
28
23
|
.pinBottomItem[data-size=s]{
|
|
29
24
|
padding-top:var(--radius-drop-list-container, 4px);
|
|
30
25
|
gap:var(--radius-drop-list-container, 4px);
|
|
@@ -37,6 +32,11 @@
|
|
|
37
32
|
padding-top:var(--radius-drop-list-container, 4px);
|
|
38
33
|
gap:var(--radius-drop-list-container, 4px);
|
|
39
34
|
}
|
|
35
|
+
.pinBottomItem{
|
|
36
|
+
display:flex;
|
|
37
|
+
flex-direction:column;
|
|
38
|
+
border:none;
|
|
39
|
+
}
|
|
40
40
|
.pinBottomItem li,
|
|
41
41
|
.pinBottomItem ul{
|
|
42
42
|
list-style-type:none;
|
|
@@ -82,7 +82,6 @@
|
|
|
82
82
|
.separatorWithoutLabel{
|
|
83
83
|
display:flex;
|
|
84
84
|
align-items:flex-end;
|
|
85
|
-
box-sizing:border-box;
|
|
86
85
|
}
|
|
87
86
|
.separatorWithoutLabel[data-size=s]{
|
|
88
87
|
padding-top:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
|
|
@@ -102,6 +101,9 @@
|
|
|
102
101
|
padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
|
|
103
102
|
padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
|
|
104
103
|
}
|
|
104
|
+
.separatorWithoutLabel{
|
|
105
|
+
box-sizing:border-box;
|
|
106
|
+
}
|
|
105
107
|
|
|
106
108
|
.label{
|
|
107
109
|
overflow:hidden;
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "List",
|
|
7
|
-
"version": "0.32.
|
|
7
|
+
"version": "0.32.13",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/button": "0.19.
|
|
40
|
-
"@snack-uikit/divider": "3.2.
|
|
41
|
-
"@snack-uikit/dropdown": "0.5.
|
|
42
|
-
"@snack-uikit/icons": "0.27.
|
|
43
|
-
"@snack-uikit/info-block": "0.6.
|
|
44
|
-
"@snack-uikit/loaders": "0.9.
|
|
45
|
-
"@snack-uikit/scroll": "0.10.
|
|
46
|
-
"@snack-uikit/search-private": "0.4.
|
|
47
|
-
"@snack-uikit/toggles": "0.13.
|
|
48
|
-
"@snack-uikit/truncate-string": "0.7.
|
|
49
|
-
"@snack-uikit/utils": "4.0.
|
|
39
|
+
"@snack-uikit/button": "0.19.17",
|
|
40
|
+
"@snack-uikit/divider": "3.2.11",
|
|
41
|
+
"@snack-uikit/dropdown": "0.5.4",
|
|
42
|
+
"@snack-uikit/icons": "0.27.6",
|
|
43
|
+
"@snack-uikit/info-block": "0.6.37",
|
|
44
|
+
"@snack-uikit/loaders": "0.9.10",
|
|
45
|
+
"@snack-uikit/scroll": "0.10.6",
|
|
46
|
+
"@snack-uikit/search-private": "0.4.35",
|
|
47
|
+
"@snack-uikit/toggles": "0.13.25",
|
|
48
|
+
"@snack-uikit/truncate-string": "0.7.8",
|
|
49
|
+
"@snack-uikit/utils": "4.0.1",
|
|
50
50
|
"@tanstack/react-virtual": "3.11.2",
|
|
51
51
|
"classnames": "2.5.1",
|
|
52
52
|
"merge-refs": "1.3.0"
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@snack-uikit/locale": "*"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "17b72086167d3d6503e4e74142358765230478c8"
|
|
58
58
|
}
|