@salutejs/plasma-new-hope 0.78.0-canary.1201.8983771283.0 → 0.78.0-canary.1201.8985207823.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/cjs/components/Dropdown/Dropdown.js +2 -2
  2. package/cjs/components/Dropdown/Dropdown.js.map +1 -1
  3. package/cjs/components/Dropdown/hooks/useHashMaps.js +2 -2
  4. package/cjs/components/Dropdown/hooks/useHashMaps.js.map +1 -1
  5. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +185 -162
  6. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -1
  7. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  8. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  9. package/es/components/Dropdown/Dropdown.js +2 -2
  10. package/es/components/Dropdown/Dropdown.js.map +1 -1
  11. package/es/components/Dropdown/hooks/useHashMaps.js +2 -2
  12. package/es/components/Dropdown/hooks/useHashMaps.js.map +1 -1
  13. package/es/components/Dropdown/hooks/useKeyboardNavigation.js +185 -162
  14. package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -1
  15. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  16. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  17. package/package.json +2 -2
  18. package/styled-components/cjs/components/Dropdown/Dropdown.js +2 -2
  19. package/styled-components/cjs/components/Dropdown/hooks/useHashMaps.js +2 -2
  20. package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +189 -162
  21. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  22. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +25 -0
  23. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.js +11 -0
  24. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +292 -0
  25. package/styled-components/es/components/Dropdown/Dropdown.js +2 -2
  26. package/styled-components/es/components/Dropdown/hooks/useHashMaps.js +2 -2
  27. package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +189 -162
  28. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  29. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +19 -0
  30. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.js +5 -0
  31. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +292 -0
  32. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +1 -1
  33. package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts +18 -0
  34. package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts.map +1 -0
  35. package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts +13 -0
  36. package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts.map +1 -0
@@ -0,0 +1,292 @@
1
+ import React from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+ import { action } from '@storybook/addon-actions';
5
+
6
+ import { WithTheme } from '../../../_helpers';
7
+ import { Button } from '../Button/Button';
8
+ import type { DropdownPlacement, DropdownTrigger } from '../../../../components/Dropdown/Dropdown.types';
9
+
10
+ import { Dropdown } from './Dropdown';
11
+
12
+ type StoryDropdownProps = ComponentProps<typeof Dropdown>;
13
+
14
+ const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
15
+ const triggers: Array<DropdownTrigger> = ['click', 'hover'];
16
+ const size = ['xs', 's', 'm', 'l'];
17
+ const variant = ['normal', 'tight'];
18
+
19
+ const meta: Meta<StoryDropdownProps> = {
20
+ title: 'plasma_web/Dropdown',
21
+ decorators: [WithTheme],
22
+ component: Dropdown,
23
+ argTypes: {
24
+ placement: {
25
+ options: placements,
26
+ control: {
27
+ type: 'select',
28
+ },
29
+ },
30
+ trigger: {
31
+ options: triggers,
32
+ control: {
33
+ type: 'select',
34
+ },
35
+ },
36
+ size: {
37
+ options: size,
38
+ control: {
39
+ type: 'select',
40
+ },
41
+ },
42
+ variant: {
43
+ options: variant,
44
+ control: {
45
+ type: 'select',
46
+ },
47
+ },
48
+ },
49
+ args: {
50
+ trigger: 'click',
51
+ offset: [0, 0],
52
+ listWidth: 'auto',
53
+ hasArrow: true,
54
+ closeOnOverlayClick: true,
55
+ closeOnSelect: true,
56
+ size: 'm',
57
+ variant: 'normal',
58
+ },
59
+ };
60
+
61
+ export default meta;
62
+
63
+ const items = [
64
+ {
65
+ value: 'north_america',
66
+ label: 'Северная Америка',
67
+ },
68
+ {
69
+ value: 'south_america',
70
+ label: 'Южная Америка',
71
+ items: [
72
+ {
73
+ value: 'brazil',
74
+ label: 'Бразилия',
75
+ items: [
76
+ {
77
+ value: 'rio_de_janeiro',
78
+ label: 'Рио-де-Жанейро',
79
+ },
80
+ {
81
+ value: 'sao_paulo',
82
+ label: 'Сан-Паулу',
83
+ },
84
+ ],
85
+ },
86
+ {
87
+ value: 'argentina',
88
+ label: 'Аргентина',
89
+ items: [
90
+ {
91
+ value: 'buenos_aires',
92
+ label: 'Буэнос-Айрес',
93
+ },
94
+ {
95
+ value: 'cordoba',
96
+ label: 'Кордова',
97
+ },
98
+ ],
99
+ },
100
+ {
101
+ value: 'colombia',
102
+ label: 'Колумбия',
103
+ items: [
104
+ {
105
+ value: 'bogota',
106
+ label: 'Богота',
107
+ },
108
+ {
109
+ value: 'medellin',
110
+ label: 'Медельин',
111
+ },
112
+ ],
113
+ },
114
+ ],
115
+ },
116
+ {
117
+ value: 'europe',
118
+ label: 'Европа',
119
+ items: [
120
+ {
121
+ value: 'france',
122
+ label: 'Франция',
123
+ items: [
124
+ {
125
+ value: 'paris',
126
+ label: 'Париж',
127
+ },
128
+ {
129
+ value: 'lyon',
130
+ label: 'Лион',
131
+ },
132
+ ],
133
+ },
134
+ {
135
+ value: 'germany',
136
+ label: 'Германия',
137
+ items: [
138
+ {
139
+ value: 'berlin',
140
+ label: 'Берлин',
141
+ },
142
+ {
143
+ value: 'munich',
144
+ label: 'Мюнхен',
145
+ },
146
+ ],
147
+ },
148
+ {
149
+ value: 'italy',
150
+ label: 'Италия',
151
+ items: [
152
+ {
153
+ value: 'rome',
154
+ label: 'Рим',
155
+ },
156
+ {
157
+ value: 'milan',
158
+ label: 'Милан',
159
+ },
160
+ ],
161
+ },
162
+ {
163
+ value: 'spain',
164
+ label: 'Испания',
165
+ items: [
166
+ {
167
+ value: 'madrid',
168
+ label: 'Мадрид',
169
+ },
170
+ {
171
+ value: 'barcelona',
172
+ label: 'Барселона',
173
+ },
174
+ ],
175
+ },
176
+ {
177
+ value: 'united_kingdom',
178
+ label: 'Великобритания',
179
+ items: [
180
+ {
181
+ value: 'london',
182
+ label: 'Лондон',
183
+ },
184
+ {
185
+ value: 'manchester',
186
+ label: 'Манчестер',
187
+ },
188
+ ],
189
+ },
190
+ ],
191
+ },
192
+ {
193
+ value: 'asia',
194
+ label: 'Азия',
195
+ items: [
196
+ {
197
+ value: 'china',
198
+ label: 'Китай',
199
+ items: [
200
+ {
201
+ value: 'beijing',
202
+ label: 'Пекин',
203
+ },
204
+ {
205
+ value: 'shanghai',
206
+ label: 'Шанхай',
207
+ },
208
+ ],
209
+ },
210
+ {
211
+ value: 'japan',
212
+ label: 'Япония',
213
+ items: [
214
+ {
215
+ value: 'tokyo',
216
+ label: 'Токио',
217
+ },
218
+ {
219
+ value: 'osaka',
220
+ label: 'Осака',
221
+ },
222
+ ],
223
+ },
224
+ {
225
+ value: 'india',
226
+ label: 'Индия',
227
+ items: [
228
+ {
229
+ value: 'delhi',
230
+ label: 'Дели',
231
+ },
232
+ {
233
+ value: 'mumbai',
234
+ label: 'Мумбаи',
235
+ },
236
+ ],
237
+ },
238
+ {
239
+ value: 'south_korea',
240
+ label: 'Южная Корея',
241
+ items: [
242
+ {
243
+ value: 'seoul',
244
+ label: 'Сеул',
245
+ },
246
+ {
247
+ value: 'busan',
248
+ label: 'Пусан',
249
+ },
250
+ ],
251
+ },
252
+ {
253
+ value: 'thailand',
254
+ label: 'Таиланд',
255
+ items: [
256
+ {
257
+ value: 'bangkok',
258
+ label: 'Бангкок',
259
+ },
260
+ {
261
+ value: 'phuket',
262
+ label: 'Пхукет',
263
+ },
264
+ ],
265
+ },
266
+ ],
267
+ },
268
+ {
269
+ value: 'africa',
270
+ label: 'Африка',
271
+ disabled: true,
272
+ },
273
+ ];
274
+
275
+ const StoryNormal = (args: StoryDropdownProps) => {
276
+ return (
277
+ <Dropdown
278
+ {...args}
279
+ items={items}
280
+ onToggle={action('onToggle')}
281
+ onHover={action('onHover')}
282
+ onItemSelect={action('onItemSelect')}
283
+ onItemClick={action('onItemClick')}
284
+ >
285
+ <Button text="Список стран" />
286
+ </Dropdown>
287
+ );
288
+ };
289
+
290
+ export const Default: StoryObj<StoryDropdownProps> = {
291
+ render: (args) => <StoryNormal {...args} />,
292
+ };
@@ -122,7 +122,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
122
122
  isFocusTrapped: false,
123
123
  target: childrenWithProps(children, {
124
124
  role: 'combobox',
125
- 'aria-controls': 'listbox1',
125
+ 'aria-controls': 'tree_level_1',
126
126
  'aria-expanded': isCurrentListOpen,
127
127
  'aria-activedescendant': getActiveDescendant(),
128
128
  onKeyDown: onKeyDown
@@ -132,7 +132,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
132
132
  listHeight: listHeight,
133
133
  listOverflow: listOverflow,
134
134
  role: "tree",
135
- id: "listbox1",
135
+ id: "tree_level_1",
136
136
  listWidth: listWidth
137
137
  }, items.map(function (item, index) {
138
138
  return /*#__PURE__*/React.createElement(DropdownInner, {
@@ -1,6 +1,6 @@
1
1
  import { useMemo } from 'react';
2
- // Данный хук рекурсивно проходится по дереву items и создаем 2 мапы: мапу путей и мапу фокусов.
3
- // Нужно для получения информации всей об item, зная только путь до нее.
2
+ // Данный хук рекурсивно проходится по дереву items и создает 2 мапы: мапу путей и мапу фокусов.
3
+ // Нужно для получения всей информации об item, зная только путь до него.
4
4
 
5
5
  export var useHashMaps = function useHashMaps(items) {
6
6
  return useMemo(function () {
@@ -33,180 +33,207 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
33
33
  var currentLength = pathMap.get(path === null || path === void 0 ? void 0 : path[path.length - 1]) || 0;
34
34
  var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
35
35
  var onKeyDown = function onKeyDown(event) {
36
- var code = event.code;
37
- if (code === keys.ArrowUp) {
38
- if (focusedPath.length) {
39
- if (currentIndex <= 0) {
40
- return;
41
- }
42
- dispatchFocusedPath({
43
- type: 'change_last_focus',
44
- value: currentIndex - 1
45
- });
46
- } else {
47
- dispatchPath({
48
- type: 'opened_first_level'
49
- });
50
- dispatchFocusedPath({
51
- type: 'set_initial_focus'
52
- });
53
- handleGlobalToggle(true, event);
54
- }
55
- }
56
- if (code === keys.ArrowDown) {
57
- if (focusedPath.length) {
58
- if (currentIndex + 1 >= currentLength) {
59
- return;
60
- }
61
- dispatchFocusedPath({
62
- type: 'change_last_focus',
63
- value: currentIndex + 1
64
- });
65
- } else {
66
- dispatchPath({
67
- type: 'opened_first_level'
68
- });
69
- dispatchFocusedPath({
70
- type: 'set_initial_focus'
71
- });
72
- handleGlobalToggle(true, event);
73
- }
74
- }
75
- if (code === keys.ArrowLeft) {
76
- if (focusedPath.length) {
77
- dispatchPath({
78
- type: 'removed_last_level'
79
- });
80
- dispatchFocusedPath({
81
- type: 'return_prev_focus'
82
- });
83
- }
84
- if (focusedPath.length === 1) {
85
- handleGlobalToggle(false, event);
86
- }
87
- }
88
- if (code === keys.ArrowRight) {
89
- if (focusedPath.length) {
90
- var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
91
- if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
92
- dispatchPath({
93
- type: 'added_next_level',
94
- value: currentItem.value.toString()
95
- });
96
- dispatchFocusedPath({
97
- type: 'add_focus',
98
- value: 0
99
- });
36
+ switch (event.code) {
37
+ case keys.ArrowUp:
38
+ {
39
+ if (focusedPath.length) {
40
+ if (currentIndex > 0) {
41
+ dispatchFocusedPath({
42
+ type: 'change_last_focus',
43
+ value: currentIndex - 1
44
+ });
45
+ }
46
+ } else {
47
+ dispatchPath({
48
+ type: 'opened_first_level'
49
+ });
50
+ dispatchFocusedPath({
51
+ type: 'set_initial_focus'
52
+ });
53
+ handleGlobalToggle(true, event);
54
+ }
55
+ break;
100
56
  }
101
- }
102
- }
103
- if (code === keys.Enter || code === keys.Space) {
104
- event.preventDefault();
105
- if (path[0]) {
106
- var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
107
- if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
108
- return;
57
+ case keys.ArrowDown:
58
+ {
59
+ if (focusedPath.length) {
60
+ if (currentIndex + 1 < currentLength) {
61
+ dispatchFocusedPath({
62
+ type: 'change_last_focus',
63
+ value: currentIndex + 1
64
+ });
65
+ }
66
+ } else {
67
+ dispatchPath({
68
+ type: 'opened_first_level'
69
+ });
70
+ dispatchFocusedPath({
71
+ type: 'set_initial_focus'
72
+ });
73
+ handleGlobalToggle(true, event);
74
+ }
75
+ break;
109
76
  }
110
- if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
111
- dispatchPath({
112
- type: 'added_next_level',
113
- value: _currentItem.value.toString()
114
- });
115
- dispatchFocusedPath({
116
- type: 'add_focus',
117
- value: 0
118
- });
119
- } else {
120
- if (closeOnSelect) {
77
+ case keys.ArrowLeft:
78
+ {
79
+ if (focusedPath.length) {
80
+ dispatchPath({
81
+ type: 'removed_last_level'
82
+ });
83
+ dispatchFocusedPath({
84
+ type: 'return_prev_focus'
85
+ });
86
+ }
87
+ if (focusedPath.length === 1) {
121
88
  handleGlobalToggle(false, event);
122
89
  }
123
- if (onItemSelect && _currentItem) {
124
- onItemSelect(_currentItem, event);
90
+ break;
91
+ }
92
+ case keys.ArrowRight:
93
+ {
94
+ if (focusedPath.length) {
95
+ var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
96
+ if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
97
+ dispatchPath({
98
+ type: 'added_next_level',
99
+ value: currentItem.value.toString()
100
+ });
101
+ dispatchFocusedPath({
102
+ type: 'add_focus',
103
+ value: 0
104
+ });
105
+ }
125
106
  }
126
- if (onItemClick && _currentItem) {
127
- onItemClick(_currentItem, event);
107
+ break;
108
+ }
109
+ case keys.Enter:
110
+ case keys.Space:
111
+ {
112
+ event.preventDefault();
113
+ if (path[0]) {
114
+ var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
115
+ if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
116
+ break;
117
+ }
118
+ if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
119
+ dispatchPath({
120
+ type: 'added_next_level',
121
+ value: _currentItem.value.toString()
122
+ });
123
+ dispatchFocusedPath({
124
+ type: 'add_focus',
125
+ value: 0
126
+ });
127
+ } else {
128
+ if (closeOnSelect) {
129
+ handleGlobalToggle(false, event);
130
+ }
131
+ if (onItemSelect && _currentItem) {
132
+ onItemSelect(_currentItem, event);
133
+ }
134
+ if (onItemClick && _currentItem) {
135
+ onItemClick(_currentItem, event);
136
+ }
137
+ }
138
+ } else {
139
+ dispatchPath({
140
+ type: 'opened_first_level'
141
+ });
142
+ dispatchFocusedPath({
143
+ type: 'set_initial_focus'
144
+ });
128
145
  }
146
+ break;
129
147
  }
130
- } else {
131
- dispatchPath({
132
- type: 'opened_first_level'
133
- });
134
- dispatchFocusedPath({
135
- type: 'set_initial_focus'
136
- });
137
- }
138
- }
139
- if (code === keys.Tab || code === keys.Escape) {
140
- dispatchFocusedPath({
141
- type: 'reset'
142
- });
143
- dispatchPath({
144
- type: 'reset'
145
- });
146
- handleGlobalToggle(false, event);
147
- }
148
- if (code === keys.Home) {
149
- if (path[0]) {
150
- dispatchFocusedPath({
151
- type: 'change_last_focus',
152
- value: 0
153
- });
154
- } else {
155
- dispatchPath({
156
- type: 'opened_first_level'
157
- });
158
- dispatchFocusedPath({
159
- type: 'set_initial_focus'
160
- });
161
- handleGlobalToggle(true, event);
162
- }
163
- }
164
- if (code === keys.End) {
165
- if (path[0]) {
166
- dispatchFocusedPath({
167
- type: 'change_last_focus',
168
- value: currentLength - 1
169
- });
170
- } else {
171
- dispatchPath({
172
- type: 'opened_first_level'
173
- });
174
- dispatchFocusedPath({
175
- type: 'change_last_focus',
176
- value: (pathMap.get('root') || 0) - 1
177
- });
178
- handleGlobalToggle(true, event);
179
- }
180
- }
181
- if (code === keys.PageUp) {
182
- if (path[0]) {
183
- if (currentIndex <= JUMP_SIZE) {
148
+ case keys.Tab:
149
+ case keys.Escape:
150
+ {
184
151
  dispatchFocusedPath({
185
- type: 'change_last_focus',
186
- value: 0
152
+ type: 'reset'
187
153
  });
188
- } else {
189
- dispatchFocusedPath({
190
- type: 'change_last_focus',
191
- value: currentIndex - JUMP_SIZE
154
+ dispatchPath({
155
+ type: 'reset'
192
156
  });
157
+ handleGlobalToggle(false, event);
158
+ break;
193
159
  }
194
- }
195
- }
196
- if (code === keys.PageDown) {
197
- if (path[0]) {
198
- if (currentLength - currentIndex <= JUMP_SIZE) {
199
- dispatchFocusedPath({
200
- type: 'change_last_focus',
201
- value: currentLength - 1
202
- });
203
- } else {
204
- dispatchFocusedPath({
205
- type: 'change_last_focus',
206
- value: currentIndex + JUMP_SIZE
207
- });
160
+ case keys.Home:
161
+ {
162
+ if (path[0]) {
163
+ dispatchFocusedPath({
164
+ type: 'change_last_focus',
165
+ value: 0
166
+ });
167
+ } else {
168
+ dispatchPath({
169
+ type: 'opened_first_level'
170
+ });
171
+ dispatchFocusedPath({
172
+ type: 'set_initial_focus'
173
+ });
174
+ handleGlobalToggle(true, event);
175
+ }
176
+ break;
177
+ }
178
+ case keys.End:
179
+ {
180
+ if (path[0]) {
181
+ dispatchFocusedPath({
182
+ type: 'change_last_focus',
183
+ value: currentLength - 1
184
+ });
185
+ } else {
186
+ dispatchPath({
187
+ type: 'opened_first_level'
188
+ });
189
+ dispatchFocusedPath({
190
+ type: 'change_last_focus',
191
+ value: (pathMap.get('root') || 0) - 1
192
+ });
193
+ handleGlobalToggle(true, event);
194
+ }
195
+ break;
196
+ }
197
+ case keys.PageUp:
198
+ {
199
+ if (!path[0]) {
200
+ break;
201
+ }
202
+ if (currentIndex <= JUMP_SIZE) {
203
+ dispatchFocusedPath({
204
+ type: 'change_last_focus',
205
+ value: 0
206
+ });
207
+ } else {
208
+ dispatchFocusedPath({
209
+ type: 'change_last_focus',
210
+ value: currentIndex - JUMP_SIZE
211
+ });
212
+ }
213
+ break;
214
+ }
215
+ case keys.PageDown:
216
+ {
217
+ if (!path[0]) {
218
+ break;
219
+ }
220
+ if (currentLength - currentIndex <= JUMP_SIZE) {
221
+ dispatchFocusedPath({
222
+ type: 'change_last_focus',
223
+ value: currentLength - 1
224
+ });
225
+ } else {
226
+ dispatchFocusedPath({
227
+ type: 'change_last_focus',
228
+ value: currentIndex + JUMP_SIZE
229
+ });
230
+ }
231
+ break;
232
+ }
233
+ default:
234
+ {
235
+ break;
208
236
  }
209
- }
210
237
  }
211
238
  };
212
239
  return {
@@ -35,7 +35,7 @@ var DropdownInner = function DropdownInner(_ref) {
35
35
  }
36
36
  };
37
37
  var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
38
- var listId = "listbox".concat(currentLevel + 2);
38
+ var listId = "tree_level_".concat(currentLevel + 2);
39
39
  var nextLevel = currentLevel + 1;
40
40
  if (item !== null && item !== void 0 && item.items) {
41
41
  return /*#__PURE__*/React.createElement(StyledPopover, {