@salutejs/plasma-new-hope 0.340.0-canary.2314.18974837629.0 → 0.340.0-canary.2314.19038910206.0

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 (141) hide show
  1. package/cjs/components/Combobox/ComboboxNew/Combobox.js +20 -4
  2. package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
  3. package/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +319 -1
  4. package/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js.map +1 -1
  5. package/cjs/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js +7 -0
  6. package/cjs/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js.map +1 -1
  7. package/cjs/components/Combobox/ComboboxNew/reducers/treePathReducer.js +14 -2
  8. package/cjs/components/Combobox/ComboboxNew/reducers/treePathReducer.js.map +1 -1
  9. package/cjs/components/Combobox/ComboboxNew/ui/TreeList/TreeList.js +3 -3
  10. package/cjs/components/Combobox/ComboboxNew/ui/TreeList/TreeList.js.map +1 -1
  11. package/cjs/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js +22 -5
  12. package/cjs/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js.map +1 -1
  13. package/cjs/components/Select/Select.js +2 -1
  14. package/cjs/components/Select/Select.js.map +1 -1
  15. package/cjs/components/Select/hooks/useKeyboardNavigation.js +127 -38
  16. package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
  17. package/cjs/components/Select/reducers/focusedPathReducer.js +7 -0
  18. package/cjs/components/Select/reducers/focusedPathReducer.js.map +1 -1
  19. package/cjs/components/Select/reducers/treePathReducer.js +12 -0
  20. package/cjs/components/Select/reducers/treePathReducer.js.map +1 -1
  21. package/cjs/components/Select/ui/TreeList/TreeList.js +3 -3
  22. package/cjs/components/Select/ui/TreeList/TreeList.js.map +1 -1
  23. package/cjs/components/Select/ui/TreeList/ui/Item/Item.js +22 -5
  24. package/cjs/components/Select/ui/TreeList/ui/Item/Item.js.map +1 -1
  25. package/cjs/index.js +2 -0
  26. package/cjs/index.js.map +1 -1
  27. package/cjs/utils/index.js.map +1 -1
  28. package/cjs/utils/isArraysEqual.js +12 -0
  29. package/cjs/utils/isArraysEqual.js.map +1 -0
  30. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +16 -3
  31. package/emotion/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +312 -0
  32. package/emotion/cjs/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js +7 -0
  33. package/emotion/cjs/components/Combobox/ComboboxNew/reducers/treePathReducer.js +14 -2
  34. package/emotion/cjs/components/Combobox/ComboboxNew/ui/TreeList/TreeList.js +7 -3
  35. package/emotion/cjs/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js +49 -5
  36. package/emotion/cjs/components/Select/Select.js +2 -1
  37. package/emotion/cjs/components/Select/hooks/useKeyboardNavigation.js +156 -44
  38. package/emotion/cjs/components/Select/reducers/focusedPathReducer.js +7 -0
  39. package/emotion/cjs/components/Select/reducers/treePathReducer.js +12 -0
  40. package/emotion/cjs/components/Select/ui/TreeList/TreeList.js +7 -3
  41. package/emotion/cjs/components/Select/ui/TreeList/ui/Item/Item.js +49 -5
  42. package/emotion/cjs/examples/components/Combobox/Combobox.js +15 -0
  43. package/emotion/cjs/utils/index.js +4 -0
  44. package/emotion/cjs/utils/isArraysEqual.js +15 -0
  45. package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +16 -3
  46. package/emotion/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +313 -0
  47. package/emotion/es/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js +7 -0
  48. package/emotion/es/components/Combobox/ComboboxNew/reducers/treePathReducer.js +14 -2
  49. package/emotion/es/components/Combobox/ComboboxNew/ui/TreeList/TreeList.js +7 -3
  50. package/emotion/es/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js +50 -6
  51. package/emotion/es/components/Select/Select.js +2 -1
  52. package/emotion/es/components/Select/hooks/useKeyboardNavigation.js +157 -44
  53. package/emotion/es/components/Select/reducers/focusedPathReducer.js +7 -0
  54. package/emotion/es/components/Select/reducers/treePathReducer.js +12 -0
  55. package/emotion/es/components/Select/ui/TreeList/TreeList.js +7 -3
  56. package/emotion/es/components/Select/ui/TreeList/ui/Item/Item.js +50 -6
  57. package/emotion/es/utils/index.js +1 -0
  58. package/emotion/es/utils/isArraysEqual.js +5 -0
  59. package/es/components/Combobox/ComboboxNew/Combobox.js +20 -4
  60. package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
  61. package/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +319 -1
  62. package/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js.map +1 -1
  63. package/es/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js +7 -0
  64. package/es/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js.map +1 -1
  65. package/es/components/Combobox/ComboboxNew/reducers/treePathReducer.js +14 -2
  66. package/es/components/Combobox/ComboboxNew/reducers/treePathReducer.js.map +1 -1
  67. package/es/components/Combobox/ComboboxNew/ui/TreeList/TreeList.js +3 -3
  68. package/es/components/Combobox/ComboboxNew/ui/TreeList/TreeList.js.map +1 -1
  69. package/es/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js +23 -6
  70. package/es/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js.map +1 -1
  71. package/es/components/Select/Select.js +2 -1
  72. package/es/components/Select/Select.js.map +1 -1
  73. package/es/components/Select/hooks/useKeyboardNavigation.js +127 -38
  74. package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
  75. package/es/components/Select/reducers/focusedPathReducer.js +7 -0
  76. package/es/components/Select/reducers/focusedPathReducer.js.map +1 -1
  77. package/es/components/Select/reducers/treePathReducer.js +12 -0
  78. package/es/components/Select/reducers/treePathReducer.js.map +1 -1
  79. package/es/components/Select/ui/TreeList/TreeList.js +3 -3
  80. package/es/components/Select/ui/TreeList/TreeList.js.map +1 -1
  81. package/es/components/Select/ui/TreeList/ui/Item/Item.js +23 -6
  82. package/es/components/Select/ui/TreeList/ui/Item/Item.js.map +1 -1
  83. package/es/index.js +1 -0
  84. package/es/index.js.map +1 -1
  85. package/es/utils/index.js.map +1 -1
  86. package/es/utils/isArraysEqual.js +8 -0
  87. package/es/utils/isArraysEqual.js.map +1 -0
  88. package/package.json +2 -2
  89. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +16 -3
  90. package/styled-components/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +312 -0
  91. package/styled-components/cjs/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js +7 -0
  92. package/styled-components/cjs/components/Combobox/ComboboxNew/reducers/treePathReducer.js +14 -2
  93. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/TreeList/TreeList.js +7 -3
  94. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js +49 -5
  95. package/styled-components/cjs/components/Select/Select.js +2 -1
  96. package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js +156 -44
  97. package/styled-components/cjs/components/Select/reducers/focusedPathReducer.js +7 -0
  98. package/styled-components/cjs/components/Select/reducers/treePathReducer.js +12 -0
  99. package/styled-components/cjs/components/Select/ui/TreeList/TreeList.js +7 -3
  100. package/styled-components/cjs/components/Select/ui/TreeList/ui/Item/Item.js +49 -5
  101. package/styled-components/cjs/utils/index.js +4 -0
  102. package/styled-components/cjs/utils/isArraysEqual.js +15 -0
  103. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +16 -3
  104. package/styled-components/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +313 -0
  105. package/styled-components/es/components/Combobox/ComboboxNew/reducers/focusedPathReducer.js +7 -0
  106. package/styled-components/es/components/Combobox/ComboboxNew/reducers/treePathReducer.js +14 -2
  107. package/styled-components/es/components/Combobox/ComboboxNew/ui/TreeList/TreeList.js +7 -3
  108. package/styled-components/es/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js +50 -6
  109. package/styled-components/es/components/Select/Select.js +2 -1
  110. package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js +157 -44
  111. package/styled-components/es/components/Select/reducers/focusedPathReducer.js +7 -0
  112. package/styled-components/es/components/Select/reducers/treePathReducer.js +12 -0
  113. package/styled-components/es/components/Select/ui/TreeList/TreeList.js +7 -3
  114. package/styled-components/es/components/Select/ui/TreeList/ui/Item/Item.js +50 -6
  115. package/styled-components/es/examples/components/Combobox/Combobox.js +0 -7
  116. package/styled-components/es/utils/index.js +1 -0
  117. package/styled-components/es/utils/isArraysEqual.js +5 -0
  118. package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
  119. package/types/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.d.ts +7 -2
  120. package/types/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.d.ts.map +1 -1
  121. package/types/components/Combobox/ComboboxNew/reducers/focusedPathReducer.d.ts +3 -0
  122. package/types/components/Combobox/ComboboxNew/reducers/focusedPathReducer.d.ts.map +1 -1
  123. package/types/components/Combobox/ComboboxNew/reducers/treePathReducer.d.ts +6 -0
  124. package/types/components/Combobox/ComboboxNew/reducers/treePathReducer.d.ts.map +1 -1
  125. package/types/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.d.ts.map +1 -1
  126. package/types/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.types.d.ts +1 -1
  127. package/types/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.types.d.ts.map +1 -1
  128. package/types/components/Select/Select.d.ts.map +1 -1
  129. package/types/components/Select/hooks/useKeyboardNavigation.d.ts +2 -1
  130. package/types/components/Select/hooks/useKeyboardNavigation.d.ts.map +1 -1
  131. package/types/components/Select/reducers/focusedPathReducer.d.ts +3 -0
  132. package/types/components/Select/reducers/focusedPathReducer.d.ts.map +1 -1
  133. package/types/components/Select/reducers/treePathReducer.d.ts +6 -0
  134. package/types/components/Select/reducers/treePathReducer.d.ts.map +1 -1
  135. package/types/components/Select/ui/TreeList/ui/Item/Item.d.ts.map +1 -1
  136. package/types/components/Select/ui/TreeList/ui/Item/Item.types.d.ts +1 -1
  137. package/types/components/Select/ui/TreeList/ui/Item/Item.types.d.ts.map +1 -1
  138. package/types/utils/index.d.ts +1 -0
  139. package/types/utils/index.d.ts.map +1 -1
  140. package/types/utils/isArraysEqual.d.ts +2 -0
  141. package/types/utils/isArraysEqual.d.ts.map +1 -0
@@ -1,3 +1,28 @@
1
+ function _array_like_to_array(arr, len) {
2
+ if (len == null || len > arr.length) len = arr.length;
3
+ for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
4
+ return arr2;
5
+ }
6
+ function _array_without_holes(arr) {
7
+ if (Array.isArray(arr)) return _array_like_to_array(arr);
8
+ }
9
+ function _iterable_to_array(iter) {
10
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
11
+ }
12
+ function _non_iterable_spread() {
13
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
14
+ }
15
+ function _to_consumable_array(arr) {
16
+ return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
17
+ }
18
+ function _unsupported_iterable_to_array(o, minLen) {
19
+ if (!o) return;
20
+ if (typeof o === "string") return _array_like_to_array(o, minLen);
21
+ var n = Object.prototype.toString.call(o).slice(8, -1);
22
+ if (n === "Object" && o.constructor) n = o.constructor.name;
23
+ if (n === "Map" || n === "Set") return Array.from(n);
24
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
25
+ }
1
26
  import { keyExists } from "../reducers/treePathReducer";
2
27
  var JUMP_SIZE = 10;
3
28
  export var keys = {
@@ -21,8 +46,9 @@ export var getItemByFocused = function(focusedPath, focusedToValueMap) {
21
46
  }, '').replace(/^(\/)/, '');
22
47
  return focusedToValueMap.get(focusedPathAsString);
23
48
  };
49
+ // #TODO: подумать над идеей выноса логики фокуса непосредственно в focusedPathReducer.
24
50
  export var useKeyNavigation = function(param) {
25
- var focusedPath = param.focusedPath, dispatchFocusedPath = param.dispatchFocusedPath, path = param.path, dispatchPath = param.dispatchPath, pathMap = param.pathMap, focusedToValueMap = param.focusedToValueMap, handleListToggle = param.handleListToggle, handlePressDown = param.handlePressDown, treePath = param.treePath, dispatchTreePath = param.dispatchTreePath, treeView = param.treeView, valueToPathMap = param.valueToPathMap;
51
+ var focusedPath = param.focusedPath, dispatchFocusedPath = param.dispatchFocusedPath, path = param.path, dispatchPath = param.dispatchPath, pathMap = param.pathMap, focusedToValueMap = param.focusedToValueMap, handleListToggle = param.handleListToggle, handlePressDown = param.handlePressDown, treePath = param.treePath, dispatchTreePath = param.dispatchTreePath, treeView = param.treeView, valueToPathMap = param.valueToPathMap, items = param.items;
26
52
  if (treeView) {
27
53
  return keyboardNavigationTree({
28
54
  focusedPath: focusedPath,
@@ -36,7 +62,8 @@ export var useKeyNavigation = function(param) {
36
62
  treePath: treePath,
37
63
  dispatchTreePath: dispatchTreePath,
38
64
  treeView: treeView,
39
- valueToPathMap: valueToPathMap
65
+ valueToPathMap: valueToPathMap,
66
+ items: items
40
67
  });
41
68
  }
42
69
  return keyboardNavigationDefault({
@@ -51,7 +78,8 @@ export var useKeyNavigation = function(param) {
51
78
  treePath: treePath,
52
79
  dispatchTreePath: dispatchTreePath,
53
80
  treeView: treeView,
54
- valueToPathMap: valueToPathMap
81
+ valueToPathMap: valueToPathMap,
82
+ items: items
55
83
  });
56
84
  };
57
85
  var keyboardNavigationDefault = function(param) {
@@ -320,24 +348,85 @@ var keyboardNavigationDefault = function(param) {
320
348
  };
321
349
  };
322
350
  var keyboardNavigationTree = function(param) {
323
- var focusedPath = param.focusedPath, dispatchFocusedPath = param.dispatchFocusedPath, path = param.path, dispatchPath = param.dispatchPath, pathMap = param.pathMap, focusedToValueMap = param.focusedToValueMap, handleListToggle = param.handleListToggle, handlePressDown = param.handlePressDown, treePath = param.treePath, dispatchTreePath = param.dispatchTreePath, valueToPathMap = param.valueToPathMap;
351
+ var focusedPath = param.focusedPath, dispatchFocusedPath = param.dispatchFocusedPath, path = param.path, dispatchPath = param.dispatchPath, pathMap = param.pathMap, focusedToValueMap = param.focusedToValueMap, handleListToggle = param.handleListToggle, handlePressDown = param.handlePressDown, treePath = param.treePath, dispatchTreePath = param.dispatchTreePath, valueToPathMap = param.valueToPathMap, items = param.items;
324
352
  var _currentItem_parent_items, _currentItem_parent;
325
- var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
326
353
  var currentItem = getItemByFocused(focusedPath, focusedToValueMap);
354
+ var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
327
355
  var currentLength = (currentItem === null || currentItem === void 0 ? void 0 : (_currentItem_parent = currentItem.parent) === null || _currentItem_parent === void 0 ? void 0 : (_currentItem_parent_items = _currentItem_parent.items) === null || _currentItem_parent_items === void 0 ? void 0 : _currentItem_parent_items.length) || pathMap.get('root') || 0;
356
+ var isValidFocus = function(focusCandidate) {
357
+ if (!Array.isArray(items) || !Array.isArray(focusCandidate)) return false;
358
+ var currentLevel = items;
359
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
360
+ try {
361
+ for(var _iterator = focusCandidate[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
362
+ var index = _step.value;
363
+ if (!Array.isArray(currentLevel) || index >= currentLevel.length) {
364
+ return false;
365
+ }
366
+ var node = currentLevel[index];
367
+ currentLevel = node.items || [];
368
+ }
369
+ } catch (err) {
370
+ _didIteratorError = true;
371
+ _iteratorError = err;
372
+ } finally{
373
+ try {
374
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
375
+ _iterator.return();
376
+ }
377
+ } finally{
378
+ if (_didIteratorError) {
379
+ throw _iteratorError;
380
+ }
381
+ }
382
+ }
383
+ return true;
384
+ };
328
385
  var onKeyDown = function(event) {
329
386
  switch(event.code){
330
387
  case keys.ArrowUp:
331
388
  {
332
- if (focusedPath.length) {
333
- if (currentIndex > 0) {
389
+ /**
390
+ * Если список открыт и фокус уже установлен на каком-либо элементе.
391
+ * */ if (focusedPath.length) {
392
+ /**
393
+ * Если это не первый элемент, то нужно вначале найти элемент для фокуса.
394
+ * Т.к. если верхний элемент раскрыт, то и перемещаться нужно не на него,
395
+ * а на его самый нижний дочерний элемент.
396
+ * */ if (currentIndex > 0) {
397
+ var nextFocus = _to_consumable_array(focusedPath.slice(0, -1)).concat([
398
+ currentIndex - 1
399
+ ]);
400
+ while(nextFocus){
401
+ var focusedPathAsString = nextFocus.reduce(function(acc, n) {
402
+ return "".concat(acc, "/").concat(n);
403
+ }, '').replace(/^(\/)/, '');
404
+ var item = focusedToValueMap.get(focusedPathAsString);
405
+ var isLevelOpened = keyExists(treePath, valueToPathMap.get(item.value.toString()) || []);
406
+ if (isLevelOpened) {
407
+ var _item_items;
408
+ nextFocus = _to_consumable_array(nextFocus).concat([
409
+ ((item === null || item === void 0 ? void 0 : (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.length) || 0) - 1
410
+ ]);
411
+ } else {
412
+ break;
413
+ }
414
+ }
334
415
  dispatchFocusedPath({
335
- type: 'change_last_focus',
336
- value: currentIndex - 1
416
+ type: 'set_focus',
417
+ value: nextFocus
418
+ });
419
+ } else {
420
+ /**
421
+ * Если элемент первый, то нужно лишь подняться к его родителю.
422
+ * */ dispatchFocusedPath({
423
+ type: 'return_prev_focus'
337
424
  });
338
425
  }
339
426
  } else {
340
- dispatchPath({
427
+ /**
428
+ * Если список закрыт, то нужно его открыть и установить фокус на первый элемент.
429
+ * */ dispatchPath({
341
430
  type: 'opened_first_level'
342
431
  });
343
432
  dispatchFocusedPath({
@@ -349,15 +438,61 @@ var keyboardNavigationTree = function(param) {
349
438
  }
350
439
  case keys.ArrowDown:
351
440
  {
352
- if (focusedPath.length) {
353
- if (currentIndex + 1 < currentLength) {
441
+ /**
442
+ * Если список открыт и фокус уже установлен на каком-либо элементе.
443
+ * */ if (focusedPath.length) {
444
+ /**
445
+ * Заходим сюда если у элемента есть другие вложенные элементы.
446
+ * */ if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.items) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.items.length)) {
447
+ var isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(currentItem.value.toString()) || []);
448
+ /**
449
+ * Если у этого элемента открыт его дочерний список,
450
+ * то устанавливаем фокус на первый элемент из этого списка
451
+ * и сразу же выходим из обработчика события.
452
+ * */ if (isCurrentLevelOpened) {
453
+ dispatchFocusedPath({
454
+ type: 'add_focus',
455
+ value: 0
456
+ });
457
+ break;
458
+ }
459
+ }
460
+ /**
461
+ * Если мы еще не достигли конца списка, то движемся к следующему элементу.
462
+ * */ if (currentIndex + 1 < currentLength) {
354
463
  dispatchFocusedPath({
355
464
  type: 'change_last_focus',
356
465
  value: currentIndex + 1
357
466
  });
467
+ } else {
468
+ /**
469
+ * Если же достигли последнего элемента на текущем уровне, то нужно определить,
470
+ * на какой из элементов ниже мы перейдем.
471
+ * Переход фокуса отсюда может быть только на уровни выше, при чем сразу на несколько.
472
+ * */ var focusCandidate = _to_consumable_array(focusedPath);
473
+ var nextFocus1 = null;
474
+ while(focusCandidate.length > 1){
475
+ focusCandidate = _to_consumable_array(focusCandidate.slice(0, -2)).concat([
476
+ (focusCandidate.at(-2) || 0) + 1
477
+ ]);
478
+ if (isValidFocus(focusCandidate)) {
479
+ nextFocus1 = focusCandidate;
480
+ break;
481
+ }
482
+ }
483
+ if (nextFocus1) {
484
+ dispatchFocusedPath({
485
+ type: 'set_focus',
486
+ value: nextFocus1
487
+ });
488
+ } else {
489
+ break;
490
+ }
358
491
  }
359
492
  } else {
360
- dispatchPath({
493
+ /**
494
+ * Если список закрыт, то нужно его открыть и установить фокус на первый элемент.
495
+ * */ dispatchPath({
361
496
  type: 'opened_first_level'
362
497
  });
363
498
  dispatchFocusedPath({
@@ -371,19 +506,10 @@ var keyboardNavigationTree = function(param) {
371
506
  {
372
507
  if (path[0]) {
373
508
  if (focusedPath.length) {
374
- var isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get((currentItem === null || currentItem === void 0 ? void 0 : currentItem.value.toString()) || '') || []);
375
- if (isCurrentLevelOpened) {
376
- dispatchTreePath({
377
- type: 'toggled_level',
378
- value: valueToPathMap.get((currentItem === null || currentItem === void 0 ? void 0 : currentItem.value.toString()) || '') || []
379
- });
380
- } else if (focusedPath.length === 1) {
381
- handleListToggle(false);
382
- } else {
383
- dispatchFocusedPath({
384
- type: 'return_prev_focus'
385
- });
386
- }
509
+ dispatchTreePath({
510
+ type: 'close_level',
511
+ value: valueToPathMap.get((currentItem === null || currentItem === void 0 ? void 0 : currentItem.value.toString()) || '') || []
512
+ });
387
513
  }
388
514
  }
389
515
  break;
@@ -391,26 +517,13 @@ var keyboardNavigationTree = function(param) {
391
517
  case keys.ArrowRight:
392
518
  {
393
519
  if (path[0]) {
394
- if (!focusedPath.length) {
520
+ if (!focusedPath.length || (currentItem === null || currentItem === void 0 ? void 0 : currentItem.disabled) || (currentItem === null || currentItem === void 0 ? void 0 : currentItem.isDisabled) || !(currentItem === null || currentItem === void 0 ? void 0 : currentItem.items)) {
395
521
  break;
396
522
  }
397
- if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.disabled) || (currentItem === null || currentItem === void 0 ? void 0 : currentItem.isDisabled)) {
398
- break;
399
- }
400
- if (currentItem === null || currentItem === void 0 ? void 0 : currentItem.items) {
401
- var isCurrentLevelOpened1 = keyExists(treePath, valueToPathMap.get(currentItem.value.toString()) || []);
402
- if (isCurrentLevelOpened1) {
403
- dispatchFocusedPath({
404
- type: 'add_focus',
405
- value: 0
406
- });
407
- } else {
408
- dispatchTreePath({
409
- type: 'toggled_level',
410
- value: valueToPathMap.get(currentItem.value.toString()) || []
411
- });
412
- }
413
- }
523
+ dispatchTreePath({
524
+ type: 'open_level',
525
+ value: valueToPathMap.get(currentItem.value.toString()) || []
526
+ });
414
527
  }
415
528
  break;
416
529
  }
@@ -29,6 +29,10 @@ export function focusedPathReducer(state, action) {
29
29
  {
30
30
  return [];
31
31
  }
32
+ case 'set_focus':
33
+ {
34
+ return action.value;
35
+ }
32
36
  case 'set_initial_focus':
33
37
  {
34
38
  return [
@@ -49,6 +53,9 @@ export function focusedPathReducer(state, action) {
49
53
  }
50
54
  case 'return_prev_focus':
51
55
  {
56
+ if (state.length === 1) {
57
+ return state;
58
+ }
52
59
  return state.slice(0, -1);
53
60
  }
54
61
  default:
@@ -73,6 +73,18 @@ export function treePathReducer(state, action) {
73
73
  }
74
74
  return stateCopy;
75
75
  }
76
+ case 'open_level':
77
+ {
78
+ var stateCopy1 = deepCopy(state);
79
+ createObjectAtPath(stateCopy1, action.value);
80
+ return stateCopy1;
81
+ }
82
+ case 'close_level':
83
+ {
84
+ var stateCopy2 = deepCopy(state);
85
+ removeObjectAtPath(stateCopy2, action.value);
86
+ return stateCopy2;
87
+ }
76
88
  default:
77
89
  {
78
90
  return state;
@@ -20,8 +20,10 @@ export var TreeList = function(param) {
20
20
  }, beforeList, items === null || items === void 0 ? void 0 : items.map(function(item, index) {
21
21
  return /*#__PURE__*/ React.createElement(Item, {
22
22
  key: index,
23
- index: index,
24
- item: item
23
+ item: item,
24
+ pathToItem: [
25
+ index
26
+ ]
25
27
  });
26
28
  }), afterList));
27
29
  };
@@ -69,7 +71,9 @@ var VirtualTreeList = function(param) {
69
71
  ref: virtualizer.measureElement
70
72
  }, /*#__PURE__*/ React.createElement(Item, {
71
73
  item: items[virtualRow.index],
72
- index: virtualRow.index
74
+ pathToItem: [
75
+ virtualRow.index
76
+ ]
73
77
  }));
74
78
  })))), afterList);
75
79
  };
@@ -1,11 +1,38 @@
1
- import React, { useContext } from "react";
1
+ function _array_like_to_array(arr, len) {
2
+ if (len == null || len > arr.length) len = arr.length;
3
+ for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
4
+ return arr2;
5
+ }
6
+ function _array_without_holes(arr) {
7
+ if (Array.isArray(arr)) return _array_like_to_array(arr);
8
+ }
9
+ function _iterable_to_array(iter) {
10
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
11
+ }
12
+ function _non_iterable_spread() {
13
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
14
+ }
15
+ function _to_consumable_array(arr) {
16
+ return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
17
+ }
18
+ function _unsupported_iterable_to_array(o, minLen) {
19
+ if (!o) return;
20
+ if (typeof o === "string") return _array_like_to_array(o, minLen);
21
+ var n = Object.prototype.toString.call(o).slice(8, -1);
22
+ if (n === "Object" && o.constructor) n = o.constructor.name;
23
+ if (n === "Map" || n === "Set") return Array.from(n);
24
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
25
+ }
26
+ import React, { useContext, useRef } from "react";
2
27
  import { classes } from "../../../../Select.tokens";
3
28
  import { sizeToIconSize } from "../../../../utils";
29
+ import { isArraysEqual, cx } from "../../../../../../utils";
30
+ import { useDidMountEffect } from "../../../../../../hooks";
4
31
  import { keyExists } from "../../../../reducers/treePathReducer";
5
32
  import { Context } from "../../../../Select.context";
6
33
  import { ItemWrapper, ChildItems, Offset, IconWrapper, StyledCheckboxWrapper, StyledCheckbox, StyledIndicator, StyledIconDone, StyledText, StyledWrapper, StyledCell, DisclosureIconWrapper, StyledArrowRight, Wrapper, StyledArrowLeft } from "./Item.styles";
7
34
  export var Item = function(param) {
8
- var item = param.item, index = param.index;
35
+ var item = param.item, pathToItem = param.pathToItem;
9
36
  var _valueToPathMap_get, _item_items;
10
37
  var label = item.label, value = item.value, disabled = item.disabled, isDisabled = item.isDisabled, contentLeft = item.contentLeft, contentRight = item.contentRight;
11
38
  var isLeaf = !(item === null || item === void 0 ? void 0 : item.items);
@@ -13,11 +40,14 @@ export var Item = function(param) {
13
40
  // @ts-ignore
14
41
  _checkboxAppearance = _useContext._checkboxAppearance, focusedPath = _useContext.focusedPath, treePath = _useContext.treePath, dispatchTreePath = _useContext.dispatchTreePath, arrowPlacement = _useContext.arrowPlacement, handleItemClick = _useContext.handleItemClick, handleCheckboxChange = _useContext.handleCheckboxChange, valueToPathMap = _useContext.valueToPathMap;
15
42
  var itemDisabled = Boolean(disabled || isDisabled);
43
+ var disabledClassName = itemDisabled ? classes.dropdownItemIsDisabled : undefined;
44
+ var ref = useRef(null);
16
45
  var currentItemDepth = (((_valueToPathMap_get = valueToPathMap.get(item.value.toString())) === null || _valueToPathMap_get === void 0 ? void 0 : _valueToPathMap_get.length) || 0) - 1;
17
46
  var isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);
18
47
  var withArrowInverse = isCurrentLevelOpened ? classes.arrowInverse : undefined;
19
- var focusedClass = currentItemDepth === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentItemDepth]) ? classes.dropdownItemIsFocused : undefined;
48
+ var focusedClass = isArraysEqual(pathToItem, focusedPath) ? classes.dropdownItemIsFocused : undefined;
20
49
  var handleClick = function(e) {
50
+ if (itemDisabled) return;
21
51
  if (!isLeaf) {
22
52
  dispatchTreePath({
23
53
  type: 'toggled_level',
@@ -33,8 +63,20 @@ export var Item = function(param) {
33
63
  e.stopPropagation();
34
64
  handleCheckboxChange(item);
35
65
  };
66
+ useDidMountEffect(function() {
67
+ if (focusedClass && (ref === null || ref === void 0 ? void 0 : ref.current)) {
68
+ ref.current.scrollIntoView({
69
+ behavior: 'smooth',
70
+ block: 'center',
71
+ inline: 'center'
72
+ });
73
+ }
74
+ }, [
75
+ focusedClass
76
+ ]);
36
77
  return /*#__PURE__*/ React.createElement(ItemWrapper, null, /*#__PURE__*/ React.createElement(Wrapper, {
37
- className: focusedClass,
78
+ ref: ref,
79
+ className: cx(focusedClass, disabledClassName),
38
80
  onClick: handleClick,
39
81
  variant: variant,
40
82
  role: "treeitem"
@@ -92,8 +134,10 @@ export var Item = function(param) {
92
134
  }))), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/ React.createElement(ChildItems, null, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(item, index) {
93
135
  return /*#__PURE__*/ React.createElement(Item, {
94
136
  item: item,
95
- index: index,
96
- key: index
137
+ key: item.value,
138
+ pathToItem: _to_consumable_array(pathToItem).concat([
139
+ index
140
+ ])
97
141
  });
98
142
  })));
99
143
  };
@@ -14,6 +14,7 @@ export { noop } from "./noop";
14
14
  export { getHeightAsNumber } from "./getHeightAsNumber";
15
15
  export { createConditionalComponent } from "./createConditionalComponent";
16
16
  export { deepCopy } from "./deepCopy";
17
+ export { isArraysEqual } from "./isArraysEqual";
17
18
  export var cx = function() {
18
19
  for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
19
20
  classes[_key] = arguments[_key];
@@ -0,0 +1,5 @@
1
+ export var isArraysEqual = function(a, b) {
2
+ return a.length === b.length && a.every(function(val, i) {
3
+ return val === b[i];
4
+ });
5
+ };
@@ -108,10 +108,14 @@ var comboboxRoot = function comboboxRoot(Root) {
108
108
  valueToCheckedMap = _useMemo2[0],
109
109
  valueToItemMap = _useMemo2[1],
110
110
  valueToPathMap = _useMemo2[2];
111
+
112
+ // Состояние поля поиска в target
111
113
  var _useState = useState(getTextValue(multiple, outerValue, valueToItemMap, renderValue)),
112
114
  _useState2 = _slicedToArray(_useState, 2),
113
115
  textValue = _useState2[0],
114
116
  setTextValue = _useState2[1];
117
+
118
+ // Внутреннее состояние выбранных элементов
115
119
  var _useState3 = useState(multiple ? [] : ''),
116
120
  _useState4 = _slicedToArray(_useState3, 2),
117
121
  internalValue = _useState4[0],
@@ -162,9 +166,6 @@ var comboboxRoot = function comboboxRoot(Root) {
162
166
  return;
163
167
  }
164
168
  handleListToggle(false);
165
-
166
- // Возвращаем актуальное значение поля ввода после закрытия выпадающего списка.
167
- setTextValue(getTextValue(multiple, value, valueToItemMap, renderValue));
168
169
  }, [floatingPopoverRef, listWrapperRef]);
169
170
 
170
171
  // Эта функция срабатывает при изменении Combobox и
@@ -246,6 +247,9 @@ var comboboxRoot = function comboboxRoot(Root) {
246
247
  type: 'reset'
247
248
  });
248
249
 
250
+ // Возвращаем актуальное значение поля ввода после закрытия выпадающего списка.
251
+ setTextValue(getTextValue(multiple, value, valueToItemMap, renderValue));
252
+
249
253
  // Скроллим чипы к левому краю при закрытии компонента
250
254
  var el = rootRef === null || rootRef === void 0 || (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelector('.input-scrollable-wrapper');
251
255
  if (multiple && value.length > 0 && el) {
@@ -407,7 +411,12 @@ var comboboxRoot = function comboboxRoot(Root) {
407
411
  multiple: multiple,
408
412
  value: value,
409
413
  textValue: textValue,
410
- valueToItemMap: valueToItemMap
414
+ valueToItemMap: valueToItemMap,
415
+ treePath: treePath,
416
+ dispatchTreePath: dispatchTreePath,
417
+ treeView: treeView,
418
+ valueToPathMap: valueToPathMap,
419
+ items: filteredItems
411
420
  }),
412
421
  onKeyDown = _useKeyNavigation.onKeyDown;
413
422
 
@@ -467,11 +476,18 @@ var comboboxRoot = function comboboxRoot(Root) {
467
476
  // Эффект для раскрытия дерева при поиске.
468
477
  useLayoutEffect(function () {
469
478
  if (treeView) {
479
+ // Если пользователь выбирает элемент, то выходим из эффекта.
480
+ if (textValue === getTextValue(multiple, value, valueToItemMap, renderValue)) {
481
+ return;
482
+ }
483
+
484
+ // Если поле ввода стало пустым, то скрывает все узлы дерева.
470
485
  if (textValue === '') {
471
486
  dispatchTreePath({
472
487
  type: 'reset'
473
488
  });
474
489
  } else {
490
+ // Иначе раскрываем все узлы, когда пользователь начинает вводить текст в поле ввода.
475
491
  dispatchTreePath({
476
492
  type: 'expand_all',
477
493
  value: filteredItems