@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
@@ -39,180 +39,207 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
39
39
  var currentLength = pathMap.get(path === null || path === void 0 ? void 0 : path[path.length - 1]) || 0;
40
40
  var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
41
41
  var onKeyDown = function onKeyDown(event) {
42
- var code = event.code;
43
- if (code === keys.ArrowUp) {
44
- if (focusedPath.length) {
45
- if (currentIndex <= 0) {
46
- return;
47
- }
48
- dispatchFocusedPath({
49
- type: 'change_last_focus',
50
- value: currentIndex - 1
51
- });
52
- } else {
53
- dispatchPath({
54
- type: 'opened_first_level'
55
- });
56
- dispatchFocusedPath({
57
- type: 'set_initial_focus'
58
- });
59
- handleGlobalToggle(true, event);
60
- }
61
- }
62
- if (code === keys.ArrowDown) {
63
- if (focusedPath.length) {
64
- if (currentIndex + 1 >= currentLength) {
65
- return;
66
- }
67
- dispatchFocusedPath({
68
- type: 'change_last_focus',
69
- value: currentIndex + 1
70
- });
71
- } else {
72
- dispatchPath({
73
- type: 'opened_first_level'
74
- });
75
- dispatchFocusedPath({
76
- type: 'set_initial_focus'
77
- });
78
- handleGlobalToggle(true, event);
79
- }
80
- }
81
- if (code === keys.ArrowLeft) {
82
- if (focusedPath.length) {
83
- dispatchPath({
84
- type: 'removed_last_level'
85
- });
86
- dispatchFocusedPath({
87
- type: 'return_prev_focus'
88
- });
89
- }
90
- if (focusedPath.length === 1) {
91
- handleGlobalToggle(false, event);
92
- }
93
- }
94
- if (code === keys.ArrowRight) {
95
- if (focusedPath.length) {
96
- var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
97
- if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
98
- dispatchPath({
99
- type: 'added_next_level',
100
- value: currentItem.value.toString()
101
- });
102
- dispatchFocusedPath({
103
- type: 'add_focus',
104
- value: 0
105
- });
42
+ switch (event.code) {
43
+ case keys.ArrowUp:
44
+ {
45
+ if (focusedPath.length) {
46
+ if (currentIndex > 0) {
47
+ dispatchFocusedPath({
48
+ type: 'change_last_focus',
49
+ value: currentIndex - 1
50
+ });
51
+ }
52
+ } else {
53
+ dispatchPath({
54
+ type: 'opened_first_level'
55
+ });
56
+ dispatchFocusedPath({
57
+ type: 'set_initial_focus'
58
+ });
59
+ handleGlobalToggle(true, event);
60
+ }
61
+ break;
106
62
  }
107
- }
108
- }
109
- if (code === keys.Enter || code === keys.Space) {
110
- event.preventDefault();
111
- if (path[0]) {
112
- var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
113
- if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
114
- return;
63
+ case keys.ArrowDown:
64
+ {
65
+ if (focusedPath.length) {
66
+ if (currentIndex + 1 < currentLength) {
67
+ dispatchFocusedPath({
68
+ type: 'change_last_focus',
69
+ value: currentIndex + 1
70
+ });
71
+ }
72
+ } else {
73
+ dispatchPath({
74
+ type: 'opened_first_level'
75
+ });
76
+ dispatchFocusedPath({
77
+ type: 'set_initial_focus'
78
+ });
79
+ handleGlobalToggle(true, event);
80
+ }
81
+ break;
115
82
  }
116
- if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
117
- dispatchPath({
118
- type: 'added_next_level',
119
- value: _currentItem.value.toString()
120
- });
121
- dispatchFocusedPath({
122
- type: 'add_focus',
123
- value: 0
124
- });
125
- } else {
126
- if (closeOnSelect) {
83
+ case keys.ArrowLeft:
84
+ {
85
+ if (focusedPath.length) {
86
+ dispatchPath({
87
+ type: 'removed_last_level'
88
+ });
89
+ dispatchFocusedPath({
90
+ type: 'return_prev_focus'
91
+ });
92
+ }
93
+ if (focusedPath.length === 1) {
127
94
  handleGlobalToggle(false, event);
128
95
  }
129
- if (onItemSelect && _currentItem) {
130
- onItemSelect(_currentItem, event);
96
+ break;
97
+ }
98
+ case keys.ArrowRight:
99
+ {
100
+ if (focusedPath.length) {
101
+ var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
102
+ if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
103
+ dispatchPath({
104
+ type: 'added_next_level',
105
+ value: currentItem.value.toString()
106
+ });
107
+ dispatchFocusedPath({
108
+ type: 'add_focus',
109
+ value: 0
110
+ });
111
+ }
131
112
  }
132
- if (onItemClick && _currentItem) {
133
- onItemClick(_currentItem, event);
113
+ break;
114
+ }
115
+ case keys.Enter:
116
+ case keys.Space:
117
+ {
118
+ event.preventDefault();
119
+ if (path[0]) {
120
+ var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
121
+ if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
122
+ break;
123
+ }
124
+ if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
125
+ dispatchPath({
126
+ type: 'added_next_level',
127
+ value: _currentItem.value.toString()
128
+ });
129
+ dispatchFocusedPath({
130
+ type: 'add_focus',
131
+ value: 0
132
+ });
133
+ } else {
134
+ if (closeOnSelect) {
135
+ handleGlobalToggle(false, event);
136
+ }
137
+ if (onItemSelect && _currentItem) {
138
+ onItemSelect(_currentItem, event);
139
+ }
140
+ if (onItemClick && _currentItem) {
141
+ onItemClick(_currentItem, event);
142
+ }
143
+ }
144
+ } else {
145
+ dispatchPath({
146
+ type: 'opened_first_level'
147
+ });
148
+ dispatchFocusedPath({
149
+ type: 'set_initial_focus'
150
+ });
134
151
  }
152
+ break;
135
153
  }
136
- } else {
137
- dispatchPath({
138
- type: 'opened_first_level'
139
- });
140
- dispatchFocusedPath({
141
- type: 'set_initial_focus'
142
- });
143
- }
144
- }
145
- if (code === keys.Tab || code === keys.Escape) {
146
- dispatchFocusedPath({
147
- type: 'reset'
148
- });
149
- dispatchPath({
150
- type: 'reset'
151
- });
152
- handleGlobalToggle(false, event);
153
- }
154
- if (code === keys.Home) {
155
- if (path[0]) {
156
- dispatchFocusedPath({
157
- type: 'change_last_focus',
158
- value: 0
159
- });
160
- } else {
161
- dispatchPath({
162
- type: 'opened_first_level'
163
- });
164
- dispatchFocusedPath({
165
- type: 'set_initial_focus'
166
- });
167
- handleGlobalToggle(true, event);
168
- }
169
- }
170
- if (code === keys.End) {
171
- if (path[0]) {
172
- dispatchFocusedPath({
173
- type: 'change_last_focus',
174
- value: currentLength - 1
175
- });
176
- } else {
177
- dispatchPath({
178
- type: 'opened_first_level'
179
- });
180
- dispatchFocusedPath({
181
- type: 'change_last_focus',
182
- value: (pathMap.get('root') || 0) - 1
183
- });
184
- handleGlobalToggle(true, event);
185
- }
186
- }
187
- if (code === keys.PageUp) {
188
- if (path[0]) {
189
- if (currentIndex <= JUMP_SIZE) {
154
+ case keys.Tab:
155
+ case keys.Escape:
156
+ {
190
157
  dispatchFocusedPath({
191
- type: 'change_last_focus',
192
- value: 0
158
+ type: 'reset'
193
159
  });
194
- } else {
195
- dispatchFocusedPath({
196
- type: 'change_last_focus',
197
- value: currentIndex - JUMP_SIZE
160
+ dispatchPath({
161
+ type: 'reset'
198
162
  });
163
+ handleGlobalToggle(false, event);
164
+ break;
199
165
  }
200
- }
201
- }
202
- if (code === keys.PageDown) {
203
- if (path[0]) {
204
- if (currentLength - currentIndex <= JUMP_SIZE) {
205
- dispatchFocusedPath({
206
- type: 'change_last_focus',
207
- value: currentLength - 1
208
- });
209
- } else {
210
- dispatchFocusedPath({
211
- type: 'change_last_focus',
212
- value: currentIndex + JUMP_SIZE
213
- });
166
+ case keys.Home:
167
+ {
168
+ if (path[0]) {
169
+ dispatchFocusedPath({
170
+ type: 'change_last_focus',
171
+ value: 0
172
+ });
173
+ } else {
174
+ dispatchPath({
175
+ type: 'opened_first_level'
176
+ });
177
+ dispatchFocusedPath({
178
+ type: 'set_initial_focus'
179
+ });
180
+ handleGlobalToggle(true, event);
181
+ }
182
+ break;
183
+ }
184
+ case keys.End:
185
+ {
186
+ if (path[0]) {
187
+ dispatchFocusedPath({
188
+ type: 'change_last_focus',
189
+ value: currentLength - 1
190
+ });
191
+ } else {
192
+ dispatchPath({
193
+ type: 'opened_first_level'
194
+ });
195
+ dispatchFocusedPath({
196
+ type: 'change_last_focus',
197
+ value: (pathMap.get('root') || 0) - 1
198
+ });
199
+ handleGlobalToggle(true, event);
200
+ }
201
+ break;
202
+ }
203
+ case keys.PageUp:
204
+ {
205
+ if (!path[0]) {
206
+ break;
207
+ }
208
+ if (currentIndex <= JUMP_SIZE) {
209
+ dispatchFocusedPath({
210
+ type: 'change_last_focus',
211
+ value: 0
212
+ });
213
+ } else {
214
+ dispatchFocusedPath({
215
+ type: 'change_last_focus',
216
+ value: currentIndex - JUMP_SIZE
217
+ });
218
+ }
219
+ break;
220
+ }
221
+ case keys.PageDown:
222
+ {
223
+ if (!path[0]) {
224
+ break;
225
+ }
226
+ if (currentLength - currentIndex <= JUMP_SIZE) {
227
+ dispatchFocusedPath({
228
+ type: 'change_last_focus',
229
+ value: currentLength - 1
230
+ });
231
+ } else {
232
+ dispatchFocusedPath({
233
+ type: 'change_last_focus',
234
+ value: currentIndex + JUMP_SIZE
235
+ });
236
+ }
237
+ break;
238
+ }
239
+ default:
240
+ {
241
+ break;
214
242
  }
215
- }
216
243
  }
217
244
  };
218
245
  return {
@@ -42,7 +42,7 @@ var DropdownInner = exports.DropdownInner = function DropdownInner(_ref) {
42
42
  }
43
43
  };
44
44
  var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
45
- var listId = "listbox".concat(currentLevel + 2);
45
+ var listId = "tree_level_".concat(currentLevel + 2);
46
46
  var nextLevel = currentLevel + 1;
47
47
  if (item !== null && item !== void 0 && item.items) {
48
48
  return /*#__PURE__*/_react["default"].createElement(_Dropdown.StyledPopover, {
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Dropdown = /*#__PURE__*/require("../../../../components/Dropdown");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ size: 'm'
13
+ },
14
+ variations: {
15
+ size: {
16
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
17
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
18
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
19
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
20
+ },
21
+ view: {
22
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--text-secondary);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor)
23
+ }
24
+ }
25
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Dropdown = void 0;
7
+ var _Dropdown = /*#__PURE__*/require("../../../../components/Dropdown");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _Dropdown2 = /*#__PURE__*/require("./Dropdown.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Dropdown.dropdownConfig, _Dropdown2.config);
11
+ var Dropdown = exports.Dropdown = /*#__PURE__*/(0, _engines.component)(mergedConfig);