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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) 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 -161
  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 -161
  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/Dropdown.template-doc.mdx +339 -0
  20. package/styled-components/cjs/components/Dropdown/hooks/useHashMaps.js +2 -2
  21. package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +189 -161
  22. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  23. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +25 -0
  24. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.js +11 -0
  25. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +292 -0
  26. package/styled-components/es/components/Dropdown/Dropdown.js +2 -2
  27. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +339 -0
  28. package/styled-components/es/components/Dropdown/hooks/useHashMaps.js +2 -2
  29. package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +189 -161
  30. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  31. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +19 -0
  32. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.js +5 -0
  33. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +292 -0
  34. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +1 -1
  35. package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts +18 -0
  36. package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts.map +1 -0
  37. package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts +13 -0
  38. package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts.map +1 -0
@@ -39,180 +39,208 @@ 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;
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;
47
62
  }
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;
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;
66
82
  }
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
- });
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) {
94
+ handleGlobalToggle(false, event);
95
+ }
96
+ break;
106
97
  }
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;
98
+ case keys.ArrowRight:
99
+ {
100
+ if (!focusedPath.length) {
101
+ break;
102
+ }
103
+ var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
104
+ if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
105
+ dispatchPath({
106
+ type: 'added_next_level',
107
+ value: currentItem.value.toString()
108
+ });
109
+ dispatchFocusedPath({
110
+ type: 'add_focus',
111
+ value: 0
112
+ });
113
+ }
114
+ break;
115
115
  }
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) {
127
- handleGlobalToggle(false, event);
116
+ case keys.Enter:
117
+ case keys.Space:
118
+ {
119
+ event.preventDefault();
120
+ if (!path[0]) {
121
+ dispatchPath({
122
+ type: 'opened_first_level'
123
+ });
124
+ dispatchFocusedPath({
125
+ type: 'set_initial_focus'
126
+ });
127
+ break;
128
128
  }
129
- if (onItemSelect && _currentItem) {
130
- onItemSelect(_currentItem, event);
129
+ var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
130
+ if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
131
+ break;
131
132
  }
132
- if (onItemClick && _currentItem) {
133
- onItemClick(_currentItem, event);
133
+ if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
134
+ dispatchPath({
135
+ type: 'added_next_level',
136
+ value: _currentItem.value.toString()
137
+ });
138
+ dispatchFocusedPath({
139
+ type: 'add_focus',
140
+ value: 0
141
+ });
142
+ } else {
143
+ if (closeOnSelect) {
144
+ handleGlobalToggle(false, event);
145
+ }
146
+ if (onItemSelect && _currentItem) {
147
+ onItemSelect(_currentItem, event);
148
+ }
149
+ if (onItemClick && _currentItem) {
150
+ onItemClick(_currentItem, event);
151
+ }
134
152
  }
153
+ break;
135
154
  }
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) {
155
+ case keys.Tab:
156
+ case keys.Escape:
157
+ {
190
158
  dispatchFocusedPath({
191
- type: 'change_last_focus',
192
- value: 0
159
+ type: 'reset'
193
160
  });
194
- } else {
195
- dispatchFocusedPath({
196
- type: 'change_last_focus',
197
- value: currentIndex - JUMP_SIZE
161
+ dispatchPath({
162
+ type: 'reset'
198
163
  });
164
+ handleGlobalToggle(false, event);
165
+ break;
199
166
  }
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
- });
167
+ case keys.Home:
168
+ {
169
+ if (path[0]) {
170
+ dispatchFocusedPath({
171
+ type: 'change_last_focus',
172
+ value: 0
173
+ });
174
+ } else {
175
+ dispatchPath({
176
+ type: 'opened_first_level'
177
+ });
178
+ dispatchFocusedPath({
179
+ type: 'set_initial_focus'
180
+ });
181
+ handleGlobalToggle(true, event);
182
+ }
183
+ break;
184
+ }
185
+ case keys.End:
186
+ {
187
+ if (path[0]) {
188
+ dispatchFocusedPath({
189
+ type: 'change_last_focus',
190
+ value: currentLength - 1
191
+ });
192
+ } else {
193
+ dispatchPath({
194
+ type: 'opened_first_level'
195
+ });
196
+ dispatchFocusedPath({
197
+ type: 'change_last_focus',
198
+ value: (pathMap.get('root') || 0) - 1
199
+ });
200
+ handleGlobalToggle(true, event);
201
+ }
202
+ break;
203
+ }
204
+ case keys.PageUp:
205
+ {
206
+ if (!path[0]) {
207
+ break;
208
+ }
209
+ if (currentIndex <= JUMP_SIZE) {
210
+ dispatchFocusedPath({
211
+ type: 'change_last_focus',
212
+ value: 0
213
+ });
214
+ } else {
215
+ dispatchFocusedPath({
216
+ type: 'change_last_focus',
217
+ value: currentIndex - JUMP_SIZE
218
+ });
219
+ }
220
+ break;
221
+ }
222
+ case keys.PageDown:
223
+ {
224
+ if (!path[0]) {
225
+ break;
226
+ }
227
+ if (currentLength - currentIndex <= JUMP_SIZE) {
228
+ dispatchFocusedPath({
229
+ type: 'change_last_focus',
230
+ value: currentLength - 1
231
+ });
232
+ } else {
233
+ dispatchFocusedPath({
234
+ type: 'change_last_focus',
235
+ value: currentIndex + JUMP_SIZE
236
+ });
237
+ }
238
+ break;
239
+ }
240
+ default:
241
+ {
242
+ break;
214
243
  }
215
- }
216
244
  }
217
245
  };
218
246
  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);