@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
@@ -20,6 +20,31 @@ _export(exports, {
20
20
  }
21
21
  });
22
22
  var _treePathReducer = require("../reducers/treePathReducer");
23
+ function _array_like_to_array(arr, len) {
24
+ if (len == null || len > arr.length) len = arr.length;
25
+ for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
26
+ return arr2;
27
+ }
28
+ function _array_without_holes(arr) {
29
+ if (Array.isArray(arr)) return _array_like_to_array(arr);
30
+ }
31
+ function _iterable_to_array(iter) {
32
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
33
+ }
34
+ function _non_iterable_spread() {
35
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
36
+ }
37
+ function _to_consumable_array(arr) {
38
+ return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
39
+ }
40
+ function _unsupported_iterable_to_array(o, minLen) {
41
+ if (!o) return;
42
+ if (typeof o === "string") return _array_like_to_array(o, minLen);
43
+ var n = Object.prototype.toString.call(o).slice(8, -1);
44
+ if (n === "Object" && o.constructor) n = o.constructor.name;
45
+ if (n === "Map" || n === "Set") return Array.from(n);
46
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
47
+ }
23
48
  var JUMP_SIZE = 10;
24
49
  var keys = {
25
50
  Enter: 'Enter',
@@ -43,7 +68,7 @@ var getItemByFocused = function(focusedPath, focusedToValueMap) {
43
68
  return focusedToValueMap.get(focusedPathAsString);
44
69
  };
45
70
  var useKeyNavigation = function(param) {
46
- 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;
71
+ 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;
47
72
  if (treeView) {
48
73
  return keyboardNavigationTree({
49
74
  focusedPath: focusedPath,
@@ -57,7 +82,8 @@ var useKeyNavigation = function(param) {
57
82
  treePath: treePath,
58
83
  dispatchTreePath: dispatchTreePath,
59
84
  treeView: treeView,
60
- valueToPathMap: valueToPathMap
85
+ valueToPathMap: valueToPathMap,
86
+ items: items
61
87
  });
62
88
  }
63
89
  return keyboardNavigationDefault({
@@ -72,7 +98,8 @@ var useKeyNavigation = function(param) {
72
98
  treePath: treePath,
73
99
  dispatchTreePath: dispatchTreePath,
74
100
  treeView: treeView,
75
- valueToPathMap: valueToPathMap
101
+ valueToPathMap: valueToPathMap,
102
+ items: items
76
103
  });
77
104
  };
78
105
  var keyboardNavigationDefault = function(param) {
@@ -341,24 +368,85 @@ var keyboardNavigationDefault = function(param) {
341
368
  };
342
369
  };
343
370
  var keyboardNavigationTree = function(param) {
344
- 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;
371
+ 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;
345
372
  var _currentItem_parent_items, _currentItem_parent;
346
- var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
347
373
  var currentItem = getItemByFocused(focusedPath, focusedToValueMap);
374
+ var currentIndex = (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[focusedPath.length - 1]) || 0;
348
375
  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;
376
+ var isValidFocus = function(focusCandidate) {
377
+ if (!Array.isArray(items) || !Array.isArray(focusCandidate)) return false;
378
+ var currentLevel = items;
379
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
380
+ try {
381
+ for(var _iterator = focusCandidate[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
382
+ var index = _step.value;
383
+ if (!Array.isArray(currentLevel) || index >= currentLevel.length) {
384
+ return false;
385
+ }
386
+ var node = currentLevel[index];
387
+ currentLevel = node.items || [];
388
+ }
389
+ } catch (err) {
390
+ _didIteratorError = true;
391
+ _iteratorError = err;
392
+ } finally{
393
+ try {
394
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
395
+ _iterator.return();
396
+ }
397
+ } finally{
398
+ if (_didIteratorError) {
399
+ throw _iteratorError;
400
+ }
401
+ }
402
+ }
403
+ return true;
404
+ };
349
405
  var onKeyDown = function(event) {
350
406
  switch(event.code){
351
407
  case keys.ArrowUp:
352
408
  {
353
- if (focusedPath.length) {
354
- if (currentIndex > 0) {
409
+ /**
410
+ * Если список открыт и фокус уже установлен на каком-либо элементе.
411
+ * */ if (focusedPath.length) {
412
+ /**
413
+ * Если это не первый элемент, то нужно вначале найти элемент для фокуса.
414
+ * Т.к. если верхний элемент раскрыт, то и перемещаться нужно не на него,
415
+ * а на его самый нижний дочерний элемент.
416
+ * */ if (currentIndex > 0) {
417
+ var nextFocus = _to_consumable_array(focusedPath.slice(0, -1)).concat([
418
+ currentIndex - 1
419
+ ]);
420
+ while(nextFocus){
421
+ var focusedPathAsString = nextFocus.reduce(function(acc, n) {
422
+ return "".concat(acc, "/").concat(n);
423
+ }, '').replace(/^(\/)/, '');
424
+ var item = focusedToValueMap.get(focusedPathAsString);
425
+ var isLevelOpened = (0, _treePathReducer.keyExists)(treePath, valueToPathMap.get(item.value.toString()) || []);
426
+ if (isLevelOpened) {
427
+ var _item_items;
428
+ nextFocus = _to_consumable_array(nextFocus).concat([
429
+ ((item === null || item === void 0 ? void 0 : (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.length) || 0) - 1
430
+ ]);
431
+ } else {
432
+ break;
433
+ }
434
+ }
355
435
  dispatchFocusedPath({
356
- type: 'change_last_focus',
357
- value: currentIndex - 1
436
+ type: 'set_focus',
437
+ value: nextFocus
438
+ });
439
+ } else {
440
+ /**
441
+ * Если элемент первый, то нужно лишь подняться к его родителю.
442
+ * */ dispatchFocusedPath({
443
+ type: 'return_prev_focus'
358
444
  });
359
445
  }
360
446
  } else {
361
- dispatchPath({
447
+ /**
448
+ * Если список закрыт, то нужно его открыть и установить фокус на первый элемент.
449
+ * */ dispatchPath({
362
450
  type: 'opened_first_level'
363
451
  });
364
452
  dispatchFocusedPath({
@@ -370,15 +458,61 @@ var keyboardNavigationTree = function(param) {
370
458
  }
371
459
  case keys.ArrowDown:
372
460
  {
373
- if (focusedPath.length) {
374
- if (currentIndex + 1 < currentLength) {
461
+ /**
462
+ * Если список открыт и фокус уже установлен на каком-либо элементе.
463
+ * */ if (focusedPath.length) {
464
+ /**
465
+ * Заходим сюда если у элемента есть другие вложенные элементы.
466
+ * */ if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.items) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.items.length)) {
467
+ var isCurrentLevelOpened = (0, _treePathReducer.keyExists)(treePath, valueToPathMap.get(currentItem.value.toString()) || []);
468
+ /**
469
+ * Если у этого элемента открыт его дочерний список,
470
+ * то устанавливаем фокус на первый элемент из этого списка
471
+ * и сразу же выходим из обработчика события.
472
+ * */ if (isCurrentLevelOpened) {
473
+ dispatchFocusedPath({
474
+ type: 'add_focus',
475
+ value: 0
476
+ });
477
+ break;
478
+ }
479
+ }
480
+ /**
481
+ * Если мы еще не достигли конца списка, то движемся к следующему элементу.
482
+ * */ if (currentIndex + 1 < currentLength) {
375
483
  dispatchFocusedPath({
376
484
  type: 'change_last_focus',
377
485
  value: currentIndex + 1
378
486
  });
487
+ } else {
488
+ /**
489
+ * Если же достигли последнего элемента на текущем уровне, то нужно определить,
490
+ * на какой из элементов ниже мы перейдем.
491
+ * Переход фокуса отсюда может быть только на уровни выше, при чем сразу на несколько.
492
+ * */ var focusCandidate = _to_consumable_array(focusedPath);
493
+ var nextFocus1 = null;
494
+ while(focusCandidate.length > 1){
495
+ focusCandidate = _to_consumable_array(focusCandidate.slice(0, -2)).concat([
496
+ (focusCandidate.at(-2) || 0) + 1
497
+ ]);
498
+ if (isValidFocus(focusCandidate)) {
499
+ nextFocus1 = focusCandidate;
500
+ break;
501
+ }
502
+ }
503
+ if (nextFocus1) {
504
+ dispatchFocusedPath({
505
+ type: 'set_focus',
506
+ value: nextFocus1
507
+ });
508
+ } else {
509
+ break;
510
+ }
379
511
  }
380
512
  } else {
381
- dispatchPath({
513
+ /**
514
+ * Если список закрыт, то нужно его открыть и установить фокус на первый элемент.
515
+ * */ dispatchPath({
382
516
  type: 'opened_first_level'
383
517
  });
384
518
  dispatchFocusedPath({
@@ -392,19 +526,10 @@ var keyboardNavigationTree = function(param) {
392
526
  {
393
527
  if (path[0]) {
394
528
  if (focusedPath.length) {
395
- var isCurrentLevelOpened = (0, _treePathReducer.keyExists)(treePath, valueToPathMap.get((currentItem === null || currentItem === void 0 ? void 0 : currentItem.value.toString()) || '') || []);
396
- if (isCurrentLevelOpened) {
397
- dispatchTreePath({
398
- type: 'toggled_level',
399
- value: valueToPathMap.get((currentItem === null || currentItem === void 0 ? void 0 : currentItem.value.toString()) || '') || []
400
- });
401
- } else if (focusedPath.length === 1) {
402
- handleListToggle(false);
403
- } else {
404
- dispatchFocusedPath({
405
- type: 'return_prev_focus'
406
- });
407
- }
529
+ dispatchTreePath({
530
+ type: 'close_level',
531
+ value: valueToPathMap.get((currentItem === null || currentItem === void 0 ? void 0 : currentItem.value.toString()) || '') || []
532
+ });
408
533
  }
409
534
  }
410
535
  break;
@@ -412,26 +537,13 @@ var keyboardNavigationTree = function(param) {
412
537
  case keys.ArrowRight:
413
538
  {
414
539
  if (path[0]) {
415
- if (!focusedPath.length) {
416
- break;
417
- }
418
- if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.disabled) || (currentItem === null || currentItem === void 0 ? void 0 : currentItem.isDisabled)) {
540
+ 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)) {
419
541
  break;
420
542
  }
421
- if (currentItem === null || currentItem === void 0 ? void 0 : currentItem.items) {
422
- var isCurrentLevelOpened1 = (0, _treePathReducer.keyExists)(treePath, valueToPathMap.get(currentItem.value.toString()) || []);
423
- if (isCurrentLevelOpened1) {
424
- dispatchFocusedPath({
425
- type: 'add_focus',
426
- value: 0
427
- });
428
- } else {
429
- dispatchTreePath({
430
- type: 'toggled_level',
431
- value: valueToPathMap.get(currentItem.value.toString()) || []
432
- });
433
- }
434
- }
543
+ dispatchTreePath({
544
+ type: 'open_level',
545
+ value: valueToPathMap.get(currentItem.value.toString()) || []
546
+ });
435
547
  }
436
548
  break;
437
549
  }
@@ -39,6 +39,10 @@ function focusedPathReducer(state, action) {
39
39
  {
40
40
  return [];
41
41
  }
42
+ case 'set_focus':
43
+ {
44
+ return action.value;
45
+ }
42
46
  case 'set_initial_focus':
43
47
  {
44
48
  return [
@@ -59,6 +63,9 @@ function focusedPathReducer(state, action) {
59
63
  }
60
64
  case 'return_prev_focus':
61
65
  {
66
+ if (state.length === 1) {
67
+ return state;
68
+ }
62
69
  return state.slice(0, -1);
63
70
  }
64
71
  default:
@@ -90,6 +90,18 @@ function treePathReducer(state, action) {
90
90
  }
91
91
  return stateCopy;
92
92
  }
93
+ case 'open_level':
94
+ {
95
+ var stateCopy1 = (0, _utils.deepCopy)(state);
96
+ createObjectAtPath(stateCopy1, action.value);
97
+ return stateCopy1;
98
+ }
99
+ case 'close_level':
100
+ {
101
+ var stateCopy2 = (0, _utils.deepCopy)(state);
102
+ removeObjectAtPath(stateCopy2, action.value);
103
+ return stateCopy2;
104
+ }
93
105
  default:
94
106
  {
95
107
  return state;
@@ -71,8 +71,10 @@ var TreeList = function(param) {
71
71
  }, beforeList, items === null || items === void 0 ? void 0 : items.map(function(item, index) {
72
72
  return /*#__PURE__*/ _react.default.createElement(_Item.Item, {
73
73
  key: index,
74
- index: index,
75
- item: item
74
+ item: item,
75
+ pathToItem: [
76
+ index
77
+ ]
76
78
  });
77
79
  }), afterList));
78
80
  };
@@ -120,7 +122,9 @@ var VirtualTreeList = function(param) {
120
122
  ref: virtualizer.measureElement
121
123
  }, /*#__PURE__*/ _react.default.createElement(_Item.Item, {
122
124
  item: items[virtualRow.index],
123
- index: virtualRow.index
125
+ pathToItem: [
126
+ virtualRow.index
127
+ ]
124
128
  }));
125
129
  })))), afterList);
126
130
  };
@@ -11,9 +11,19 @@ Object.defineProperty(exports, "Item", {
11
11
  var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
12
12
  var _Selecttokens = require("../../../../Select.tokens");
13
13
  var _utils = require("../../../../utils");
14
+ var _utils1 = require("../../../../../../utils");
15
+ var _hooks = require("../../../../../../hooks");
14
16
  var _treePathReducer = require("../../../../reducers/treePathReducer");
15
17
  var _Selectcontext = require("../../../../Select.context");
16
18
  var _Itemstyles = require("./Item.styles");
19
+ function _array_like_to_array(arr, len) {
20
+ if (len == null || len > arr.length) len = arr.length;
21
+ for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
22
+ return arr2;
23
+ }
24
+ function _array_without_holes(arr) {
25
+ if (Array.isArray(arr)) return _array_like_to_array(arr);
26
+ }
17
27
  function _getRequireWildcardCache(nodeInterop) {
18
28
  if (typeof WeakMap !== "function") return null;
19
29
  var cacheBabelInterop = new WeakMap();
@@ -55,8 +65,25 @@ function _interop_require_wildcard(obj, nodeInterop) {
55
65
  }
56
66
  return newObj;
57
67
  }
68
+ function _iterable_to_array(iter) {
69
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
70
+ }
71
+ function _non_iterable_spread() {
72
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
73
+ }
74
+ function _to_consumable_array(arr) {
75
+ return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
76
+ }
77
+ function _unsupported_iterable_to_array(o, minLen) {
78
+ if (!o) return;
79
+ if (typeof o === "string") return _array_like_to_array(o, minLen);
80
+ var n = Object.prototype.toString.call(o).slice(8, -1);
81
+ if (n === "Object" && o.constructor) n = o.constructor.name;
82
+ if (n === "Map" || n === "Set") return Array.from(n);
83
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
84
+ }
58
85
  var Item = function(param) {
59
- var item = param.item, index = param.index;
86
+ var item = param.item, pathToItem = param.pathToItem;
60
87
  var _valueToPathMap_get, _item_items;
61
88
  var label = item.label, value = item.value, disabled = item.disabled, isDisabled = item.isDisabled, contentLeft = item.contentLeft, contentRight = item.contentRight;
62
89
  var isLeaf = !(item === null || item === void 0 ? void 0 : item.items);
@@ -64,11 +91,14 @@ var Item = function(param) {
64
91
  // @ts-ignore
65
92
  _checkboxAppearance = _useContext._checkboxAppearance, focusedPath = _useContext.focusedPath, treePath = _useContext.treePath, dispatchTreePath = _useContext.dispatchTreePath, arrowPlacement = _useContext.arrowPlacement, handleItemClick = _useContext.handleItemClick, handleCheckboxChange = _useContext.handleCheckboxChange, valueToPathMap = _useContext.valueToPathMap;
66
93
  var itemDisabled = Boolean(disabled || isDisabled);
94
+ var disabledClassName = itemDisabled ? _Selecttokens.classes.dropdownItemIsDisabled : undefined;
95
+ var ref = (0, _react.useRef)(null);
67
96
  var currentItemDepth = (((_valueToPathMap_get = valueToPathMap.get(item.value.toString())) === null || _valueToPathMap_get === void 0 ? void 0 : _valueToPathMap_get.length) || 0) - 1;
68
97
  var isCurrentLevelOpened = (0, _treePathReducer.keyExists)(treePath, valueToPathMap.get(value.toString()) || []);
69
98
  var withArrowInverse = isCurrentLevelOpened ? _Selecttokens.classes.arrowInverse : undefined;
70
- var focusedClass = currentItemDepth === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentItemDepth]) ? _Selecttokens.classes.dropdownItemIsFocused : undefined;
99
+ var focusedClass = (0, _utils1.isArraysEqual)(pathToItem, focusedPath) ? _Selecttokens.classes.dropdownItemIsFocused : undefined;
71
100
  var handleClick = function(e) {
101
+ if (itemDisabled) return;
72
102
  if (!isLeaf) {
73
103
  dispatchTreePath({
74
104
  type: 'toggled_level',
@@ -84,8 +114,20 @@ var Item = function(param) {
84
114
  e.stopPropagation();
85
115
  handleCheckboxChange(item);
86
116
  };
117
+ (0, _hooks.useDidMountEffect)(function() {
118
+ if (focusedClass && (ref === null || ref === void 0 ? void 0 : ref.current)) {
119
+ ref.current.scrollIntoView({
120
+ behavior: 'smooth',
121
+ block: 'center',
122
+ inline: 'center'
123
+ });
124
+ }
125
+ }, [
126
+ focusedClass
127
+ ]);
87
128
  return /*#__PURE__*/ _react.default.createElement(_Itemstyles.ItemWrapper, null, /*#__PURE__*/ _react.default.createElement(_Itemstyles.Wrapper, {
88
- className: focusedClass,
129
+ ref: ref,
130
+ className: (0, _utils1.cx)(focusedClass, disabledClassName),
89
131
  onClick: handleClick,
90
132
  variant: variant,
91
133
  role: "treeitem"
@@ -143,8 +185,10 @@ var Item = function(param) {
143
185
  }))), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/ _react.default.createElement(_Itemstyles.ChildItems, null, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(item, index) {
144
186
  return /*#__PURE__*/ _react.default.createElement(Item, {
145
187
  item: item,
146
- index: index,
147
- key: index
188
+ key: item.value,
189
+ pathToItem: _to_consumable_array(pathToItem).concat([
190
+ index
191
+ ])
148
192
  });
149
193
  })));
150
194
  };
@@ -45,6 +45,9 @@ _export(exports, {
45
45
  get getSizeValueFromProp () {
46
46
  return _getSizeValueFromProp.getSizeValueFromProp;
47
47
  },
48
+ get isArraysEqual () {
49
+ return _isArraysEqual.isArraysEqual;
50
+ },
48
51
  get isEmpty () {
49
52
  return _isEmpty.isEmpty;
50
53
  },
@@ -79,6 +82,7 @@ var _noop = require("./noop");
79
82
  var _getHeightAsNumber = require("./getHeightAsNumber");
80
83
  var _createConditionalComponent = require("./createConditionalComponent");
81
84
  var _deepCopy = require("./deepCopy");
85
+ var _isArraysEqual = require("./isArraysEqual");
82
86
  var _fixedForwardRef = require("./fixedForwardRef");
83
87
  function _export_star(from, to) {
84
88
  Object.keys(from).forEach(function(k) {
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "isArraysEqual", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return isArraysEqual;
9
+ }
10
+ });
11
+ var isArraysEqual = function(a, b) {
12
+ return a.length === b.length && a.every(function(val, i) {
13
+ return val === b[i];
14
+ });
15
+ };
@@ -210,7 +210,9 @@ import { Context } from "./Combobox.context";
210
210
  }, [
211
211
  items
212
212
  ]), 3), valueToCheckedMap = _useMemo[0], valueToItemMap = _useMemo[1], valueToPathMap = _useMemo[2];
213
+ // Состояние поля поиска в target
213
214
  var _useState = _sliced_to_array(useState(getTextValue(multiple, outerValue, valueToItemMap, renderValue)), 2), textValue = _useState[0], setTextValue = _useState[1];
215
+ // Внутреннее состояние выбранных элементов
214
216
  var _useState1 = _sliced_to_array(useState(multiple ? [] : ''), 2), internalValue = _useState1[0], setInternalValue = _useState1[1];
215
217
  var value = outerValue !== null && outerValue !== undefined ? outerValue : internalValue;
216
218
  var rootRef = useRef(null);
@@ -249,8 +251,6 @@ import { Context } from "./Combobox.context";
249
251
  return;
250
252
  }
251
253
  handleListToggle(false);
252
- // Возвращаем актуальное значение поля ввода после закрытия выпадающего списка.
253
- setTextValue(getTextValue(multiple, value, valueToItemMap, renderValue));
254
254
  }, [
255
255
  floatingPopoverRef,
256
256
  listWrapperRef
@@ -327,6 +327,8 @@ import { Context } from "./Combobox.context";
327
327
  dispatchTreePath({
328
328
  type: 'reset'
329
329
  });
330
+ // Возвращаем актуальное значение поля ввода после закрытия выпадающего списка.
331
+ setTextValue(getTextValue(multiple, value, valueToItemMap, renderValue));
330
332
  // Скроллим чипы к левому краю при закрытии компонента
331
333
  var el = rootRef === null || rootRef === void 0 ? void 0 : (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.querySelector('.input-scrollable-wrapper');
332
334
  if (multiple && value.length > 0 && el) {
@@ -489,7 +491,12 @@ import { Context } from "./Combobox.context";
489
491
  multiple: multiple,
490
492
  value: value,
491
493
  textValue: textValue,
492
- valueToItemMap: valueToItemMap
494
+ valueToItemMap: valueToItemMap,
495
+ treePath: treePath,
496
+ dispatchTreePath: dispatchTreePath,
497
+ treeView: treeView,
498
+ valueToPathMap: valueToPathMap,
499
+ items: filteredItems
493
500
  }).onKeyDown;
494
501
  // В данном эффекте мы следим за изменениями value снаружи и вносим коррективы в дерево чекбоксов.
495
502
  // Пример: когда юзер очистил value извне, тогда нужно пройтись по элементам и выключить все чекбоксы.
@@ -554,11 +561,17 @@ import { Context } from "./Combobox.context";
554
561
  // Эффект для раскрытия дерева при поиске.
555
562
  useLayoutEffect(function() {
556
563
  if (treeView) {
564
+ // Если пользователь выбирает элемент, то выходим из эффекта.
565
+ if (textValue === getTextValue(multiple, value, valueToItemMap, renderValue)) {
566
+ return;
567
+ }
568
+ // Если поле ввода стало пустым, то скрывает все узлы дерева.
557
569
  if (textValue === '') {
558
570
  dispatchTreePath({
559
571
  type: 'reset'
560
572
  });
561
573
  } else {
574
+ // Иначе раскрываем все узлы, когда пользователь начинает вводить текст в поле ввода.
562
575
  dispatchTreePath({
563
576
  type: 'expand_all',
564
577
  value: filteredItems