@salutejs/plasma-new-hope 0.336.0-canary.2205.17466635480.0 → 0.336.0-canary.2208.17465207747.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 (115) hide show
  1. package/cjs/components/Combobox/ComboboxNew/Combobox.js +23 -22
  2. package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
  3. package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +3 -2
  4. package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
  5. package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
  6. package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
  7. package/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
  8. package/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js.map +1 -1
  9. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +5 -11
  10. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
  11. package/cjs/components/Drawer/hooks/useDrawer.js +12 -0
  12. package/cjs/components/Drawer/hooks/useDrawer.js.map +1 -1
  13. package/cjs/components/Select/Select.js +3 -4
  14. package/cjs/components/Select/Select.js.map +1 -1
  15. package/cjs/components/Select/Select.styles.js +3 -2
  16. package/cjs/components/Select/Select.styles.js.map +1 -1
  17. package/cjs/components/Select/hooks/useKeyboardNavigation.js +7 -3
  18. package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
  19. package/cjs/components/Select/ui/Inner/Inner.js +5 -11
  20. package/cjs/components/Select/ui/Inner/Inner.js.map +1 -1
  21. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +22 -20
  22. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +15 -15
  23. package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
  24. package/emotion/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
  25. package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +9 -50
  26. package/emotion/cjs/components/Drawer/hooks/useDrawer.js +11 -0
  27. package/emotion/cjs/components/Select/Select.js +2 -4
  28. package/emotion/cjs/components/Select/Select.styles.js +7 -7
  29. package/emotion/cjs/components/Select/hooks/useKeyboardNavigation.js +7 -3
  30. package/emotion/cjs/components/Select/ui/Inner/Inner.js +9 -50
  31. package/emotion/cjs/examples/components/Combobox/Combobox.js +0 -15
  32. package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +22 -20
  33. package/emotion/es/components/Combobox/ComboboxNew/Combobox.styles.js +15 -15
  34. package/emotion/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
  35. package/emotion/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
  36. package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -11
  37. package/emotion/es/components/Drawer/hooks/useDrawer.js +11 -0
  38. package/emotion/es/components/Select/Select.js +2 -4
  39. package/emotion/es/components/Select/Select.styles.js +7 -7
  40. package/emotion/es/components/Select/hooks/useKeyboardNavigation.js +7 -3
  41. package/emotion/es/components/Select/ui/Inner/Inner.js +6 -11
  42. package/emotion/es/examples/components/Combobox/Combobox.js +0 -7
  43. package/es/components/Combobox/ComboboxNew/Combobox.js +23 -22
  44. package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
  45. package/es/components/Combobox/ComboboxNew/Combobox.styles.js +3 -2
  46. package/es/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
  47. package/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
  48. package/es/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
  49. package/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
  50. package/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js.map +1 -1
  51. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -12
  52. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
  53. package/es/components/Drawer/hooks/useDrawer.js +12 -0
  54. package/es/components/Drawer/hooks/useDrawer.js.map +1 -1
  55. package/es/components/Select/Select.js +3 -4
  56. package/es/components/Select/Select.js.map +1 -1
  57. package/es/components/Select/Select.styles.js +3 -2
  58. package/es/components/Select/Select.styles.js.map +1 -1
  59. package/es/components/Select/hooks/useKeyboardNavigation.js +7 -3
  60. package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
  61. package/es/components/Select/ui/Inner/Inner.js +6 -12
  62. package/es/components/Select/ui/Inner/Inner.js.map +1 -1
  63. package/package.json +2 -2
  64. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +22 -20
  65. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +8 -8
  66. package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
  67. package/styled-components/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
  68. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +9 -50
  69. package/styled-components/cjs/components/Drawer/hooks/useDrawer.js +11 -0
  70. package/styled-components/cjs/components/Select/Select.js +2 -4
  71. package/styled-components/cjs/components/Select/Select.styles.js +4 -4
  72. package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js +7 -3
  73. package/styled-components/cjs/components/Select/ui/Inner/Inner.js +9 -50
  74. package/styled-components/cjs/examples/components/Combobox/Combobox.js +0 -15
  75. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +22 -20
  76. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js +8 -8
  77. package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
  78. package/styled-components/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
  79. package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -11
  80. package/styled-components/es/components/Drawer/hooks/useDrawer.js +11 -0
  81. package/styled-components/es/components/Select/Select.js +2 -4
  82. package/styled-components/es/components/Select/Select.styles.js +4 -4
  83. package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js +7 -3
  84. package/styled-components/es/components/Select/ui/Inner/Inner.js +6 -11
  85. package/styled-components/es/examples/components/Combobox/Combobox.js +0 -7
  86. package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
  87. package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts +1 -0
  88. package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts.map +1 -1
  89. package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts +1 -1
  90. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +6 -6
  91. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
  92. package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.d.ts.map +1 -1
  93. package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.type.d.ts +1 -2
  94. package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.type.d.ts.map +1 -1
  95. package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts +2 -6
  96. package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
  97. package/types/components/Drawer/hooks/useDrawer.d.ts.map +1 -1
  98. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +6 -6
  99. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
  100. package/types/components/Select/Select.d.ts.map +1 -1
  101. package/types/components/Select/Select.styles.d.ts +1 -0
  102. package/types/components/Select/Select.styles.d.ts.map +1 -1
  103. package/types/components/Select/Select.types.d.ts +10 -10
  104. package/types/components/Select/Select.types.d.ts.map +1 -1
  105. package/types/components/Select/ui/Inner/Inner.d.ts.map +1 -1
  106. package/types/components/Select/ui/Inner/Inner.type.d.ts +1 -2
  107. package/types/components/Select/ui/Inner/Inner.type.d.ts.map +1 -1
  108. package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts +3 -11
  109. package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
  110. package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts +6 -6
  111. package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts.map +1 -1
  112. package/types/examples/components/Combobox/Combobox.d.ts +24 -24
  113. package/types/examples/components/Combobox/Combobox.d.ts.map +1 -1
  114. package/types/examples/components/Select/Select.d.ts +6 -6
  115. package/types/examples/components/Select/Select.d.ts.map +1 -1
@@ -23,7 +23,7 @@ var classes = {
23
23
  dropdownItemIsFocused: 'dropdown-item-is-focused',
24
24
  dropdownItemIsDisabled: 'dropdown-item-is-disabled',
25
25
  dropdownItemIsActive: 'dropdown-item-is-active',
26
- comboboxTargetArrow: 'combobox-target-arrow',
26
+ selectTargetArrow: 'combobox-target-arrow',
27
27
  arrowInverse: 'arrow-inverse',
28
28
  textfieldTarget: 'combobox-textfield-target',
29
29
  selectChipIsFocused: 'combobox-chip-is-focused',
@@ -180,9 +180,13 @@ var useKeyNavigation = function(param) {
180
180
  case keys.Tab:
181
181
  case keys.Escape:
182
182
  {
183
- if (path[0]) {
184
- handleListToggle(false);
185
- }
183
+ dispatchPath({
184
+ type: 'reset'
185
+ });
186
+ dispatchFocusedPath({
187
+ type: 'reset'
188
+ });
189
+ handleListToggle(false);
186
190
  if (multiple) {
187
191
  setTextValue('');
188
192
  } else if (textValue !== value) {
@@ -8,55 +8,19 @@ Object.defineProperty(exports, "Inner", {
8
8
  return Inner;
9
9
  }
10
10
  });
11
- var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
11
+ var _react = /*#__PURE__*/ _interop_require_default(require("react"));
12
12
  var _utils = require("../../../../../utils");
13
13
  var _FloatingPopover = require("../../FloatingPopover");
14
14
  var _utils1 = require("../../../../../utils");
15
15
  var _Comboboxstyles = require("../../Combobox.styles");
16
16
  var _ui = require("./ui");
17
- function _getRequireWildcardCache(nodeInterop) {
18
- if (typeof WeakMap !== "function") return null;
19
- var cacheBabelInterop = new WeakMap();
20
- var cacheNodeInterop = new WeakMap();
21
- return (_getRequireWildcardCache = function(nodeInterop) {
22
- return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
23
- })(nodeInterop);
24
- }
25
- function _interop_require_wildcard(obj, nodeInterop) {
26
- if (!nodeInterop && obj && obj.__esModule) {
27
- return obj;
28
- }
29
- if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
30
- return {
31
- default: obj
32
- };
33
- }
34
- var cache = _getRequireWildcardCache(nodeInterop);
35
- if (cache && cache.has(obj)) {
36
- return cache.get(obj);
37
- }
38
- var newObj = {
39
- __proto__: null
17
+ function _interop_require_default(obj) {
18
+ return obj && obj.__esModule ? obj : {
19
+ default: obj
40
20
  };
41
- var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
42
- for(var key in obj){
43
- if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
44
- var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
45
- if (desc && (desc.get || desc.set)) {
46
- Object.defineProperty(newObj, key, desc);
47
- } else {
48
- newObj[key] = obj[key];
49
- }
50
- }
51
- }
52
- newObj.default = obj;
53
- if (cache) {
54
- cache.set(obj, newObj);
55
- }
56
- return newObj;
57
21
  }
58
22
  var Inner = function(param) {
59
- var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth, portal = param.portal;
23
+ var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth;
60
24
  var handleToggle = function(opened) {
61
25
  if (opened) {
62
26
  dispatchPath({
@@ -71,7 +35,6 @@ var Inner = function(param) {
71
35
  });
72
36
  }
73
37
  };
74
- var listWrapperRef = (0, _react.useRef)(null);
75
38
  var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
76
39
  var treeId = (0, _utils.safeUseId)();
77
40
  var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
@@ -92,16 +55,13 @@ var Inner = function(param) {
92
55
  ariaLevel: nextLevel,
93
56
  ariaLabel: item.label
94
57
  }),
95
- isInner: true,
96
- portal: portal
58
+ isInner: true
97
59
  }, /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.ListWrapper, {
98
- listWidth: listWidth,
99
- ref: listWrapperRef
60
+ listWidth: listWidth
100
61
  }, /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.Ul, {
101
62
  role: "group",
102
63
  id: listId,
103
- virtual: false,
104
- listMaxHeight: item === null || item === void 0 ? void 0 : item.listMaxHeight
64
+ virtual: false
105
65
  }, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(innerItem, innerIndex) {
106
66
  return /*#__PURE__*/ _react.default.createElement(Inner, {
107
67
  key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -110,8 +70,7 @@ var Inner = function(param) {
110
70
  path: path,
111
71
  dispatchPath: dispatchPath,
112
72
  index: innerIndex,
113
- listWidth: listWidth,
114
- portal: listWrapperRef
73
+ listWidth: listWidth
115
74
  });
116
75
  }))));
117
76
  }
@@ -97,6 +97,17 @@ var useDrawer = function(param) {
97
97
  isOpen,
98
98
  popupController.items
99
99
  ]);
100
+ // При анмаунте компонента нужно обновлять overflow у body.
101
+ (0, _react.useEffect)(function() {
102
+ return function() {
103
+ if (!_utils.canUseDOM) {
104
+ return;
105
+ }
106
+ if (!(0, _DrawerContext.hasDrawers)(Array.from(popupController.items.values()))) {
107
+ document.body.style.overflow = overflow.current;
108
+ }
109
+ };
110
+ }, []);
100
111
  var drawerInfo = _object_spread({
101
112
  id: id,
102
113
  info: {
@@ -267,7 +267,6 @@ var selectRoot = function(Root) {
267
267
  var activeDescendantItemValue = ((_getItemByFocused = (0, _useKeyboardNavigation.getItemByFocused)(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
268
268
  var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
269
269
  var treeId = (0, _utils.safeUseId)();
270
- var listWrapperRef = (0, _react.useRef)(null);
271
270
  var view = target === 'textfield-like' && (disabled || readOnly) ? 'default' : (0, _utils1.getView)(status, outerView);
272
271
  // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
273
272
  var requiredProps = props.target === 'button-like' ? undefined : {
@@ -554,12 +553,12 @@ var selectRoot = function(Root) {
554
553
  disabled: disabled,
555
554
  readOnly: readOnly
556
555
  }, rest), /*#__PURE__*/ _react.default.createElement(_Selectstyles.ListWrapper, {
557
- ref: listWrapperRef,
558
556
  listWidth: listWidth
559
557
  }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.Ul, {
560
558
  role: "tree",
561
559
  id: "".concat(treeId, "_tree_level_1"),
562
560
  "aria-multiselectable": Boolean(props.multiselect),
561
+ listOverflow: listOverflow,
563
562
  listMaxHeight: listMaxHeight || listHeight,
564
563
  onScroll: virtual ? undefined : handleScroll,
565
564
  ref: targetRef,
@@ -580,8 +579,7 @@ var selectRoot = function(Root) {
580
579
  path: path,
581
580
  dispatchPath: dispatchPath,
582
581
  index: index,
583
- listWidth: listWidth,
584
- portal: listWrapperRef
582
+ listWidth: listWidth
585
583
  });
586
584
  }), afterList))))));
587
585
  });
@@ -65,7 +65,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
65
65
  }
66
66
  var ListWrapper = _styledcomponents.default.div.withConfig({
67
67
  displayName: "Select.styles__ListWrapper",
68
- componentId: "sc-23c571db-0"
68
+ componentId: "sc-30266665-0"
69
69
  })([
70
70
  "width:",
71
71
  ";padding:calc(var(",
@@ -82,7 +82,7 @@ var ListWrapper = _styledcomponents.default.div.withConfig({
82
82
  }, _Selecttokens.tokens.padding, _Selecttokens.tokens.dropdownBorderWidth, _Selecttokens.tokens.borderRadius, _Selecttokens.constants.background, _Selecttokens.constants.boxShadow, _Selecttokens.tokens.dropdownBorderWidth, _Selecttokens.tokens.dropdownBorderColor);
83
83
  var Ul = _styledcomponents.default.ul.withConfig({
84
84
  displayName: "Select.styles__Ul",
85
- componentId: "sc-23c571db-1"
85
+ componentId: "sc-30266665-1"
86
86
  })([
87
87
  "max-height:",
88
88
  ";overflow-y:",
@@ -94,8 +94,8 @@ var Ul = _styledcomponents.default.ul.withConfig({
94
94
  return(// eslint-disable-next-line no-nested-ternary
95
95
  virtual ? 'auto' : listMaxHeight ? (0, _utils.getCorrectHeight)(listMaxHeight) : 'auto');
96
96
  }, function(param) {
97
- var virtual = param.virtual;
98
- return virtual ? 'visible' : 'auto';
97
+ var virtual = param.virtual, listOverflow = param.listOverflow;
98
+ return virtual ? 'visible' : listOverflow || 'visible';
99
99
  }, _Selecttokens.tokens.borderRadius, _Selecttokens.tokens.dropdownBorderWidth);
100
100
  var base = (0, _styledcomponents.css)([
101
101
  ""
@@ -198,9 +198,13 @@ var useKeyNavigation = function(param) {
198
198
  case keys.Tab:
199
199
  case keys.Escape:
200
200
  {
201
- if (path[0]) {
202
- handleListToggle(false);
203
- }
201
+ dispatchFocusedPath({
202
+ type: 'reset'
203
+ });
204
+ dispatchPath({
205
+ type: 'reset'
206
+ });
207
+ handleListToggle(false);
204
208
  break;
205
209
  }
206
210
  case keys.Home:
@@ -8,54 +8,18 @@ Object.defineProperty(exports, "Inner", {
8
8
  return Inner;
9
9
  }
10
10
  });
11
- var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
11
+ var _react = /*#__PURE__*/ _interop_require_default(require("react"));
12
12
  var _utils = require("../../../../utils");
13
13
  var _Selectstyles = require("../../Select.styles");
14
14
  var _FloatingPopover = require("../../FloatingPopover");
15
15
  var _Item = require("./ui/Item/Item");
16
- function _getRequireWildcardCache(nodeInterop) {
17
- if (typeof WeakMap !== "function") return null;
18
- var cacheBabelInterop = new WeakMap();
19
- var cacheNodeInterop = new WeakMap();
20
- return (_getRequireWildcardCache = function(nodeInterop) {
21
- return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
22
- })(nodeInterop);
23
- }
24
- function _interop_require_wildcard(obj, nodeInterop) {
25
- if (!nodeInterop && obj && obj.__esModule) {
26
- return obj;
27
- }
28
- if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
29
- return {
30
- default: obj
31
- };
32
- }
33
- var cache = _getRequireWildcardCache(nodeInterop);
34
- if (cache && cache.has(obj)) {
35
- return cache.get(obj);
36
- }
37
- var newObj = {
38
- __proto__: null
16
+ function _interop_require_default(obj) {
17
+ return obj && obj.__esModule ? obj : {
18
+ default: obj
39
19
  };
40
- var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
41
- for(var key in obj){
42
- if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
43
- var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
44
- if (desc && (desc.get || desc.set)) {
45
- Object.defineProperty(newObj, key, desc);
46
- } else {
47
- newObj[key] = obj[key];
48
- }
49
- }
50
- }
51
- newObj.default = obj;
52
- if (cache) {
53
- cache.set(obj, newObj);
54
- }
55
- return newObj;
56
20
  }
57
21
  var Inner = function(param) {
58
- var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth, portal = param.portal;
22
+ var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth;
59
23
  var handleToggle = function(opened) {
60
24
  if (opened) {
61
25
  dispatchPath({
@@ -70,7 +34,6 @@ var Inner = function(param) {
70
34
  });
71
35
  }
72
36
  };
73
- var listWrapperRef = (0, _react.useRef)(null);
74
37
  var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
75
38
  var treeId = (0, _utils.safeUseId)();
76
39
  var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
@@ -91,16 +54,13 @@ var Inner = function(param) {
91
54
  ariaLevel: nextLevel,
92
55
  ariaLabel: item.label
93
56
  }),
94
- isInner: true,
95
- portal: portal
57
+ isInner: true
96
58
  }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.ListWrapper, {
97
- listWidth: listWidth,
98
- ref: listWrapperRef
59
+ listWidth: listWidth
99
60
  }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.Ul, {
100
61
  role: "group",
101
62
  id: listId,
102
- virtual: false,
103
- listMaxHeight: item === null || item === void 0 ? void 0 : item.listMaxHeight
63
+ virtual: false
104
64
  }, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(innerItem, innerIndex) {
105
65
  return /*#__PURE__*/ _react.default.createElement(Inner, {
106
66
  key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -109,8 +69,7 @@ var Inner = function(param) {
109
69
  path: path,
110
70
  dispatchPath: dispatchPath,
111
71
  index: innerIndex,
112
- listWidth: listWidth,
113
- portal: listWrapperRef
72
+ listWidth: listWidth
114
73
  });
115
74
  }))));
116
75
  }
@@ -1,16 +1 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "Combobox", {
6
- enumerable: true,
7
- get: function() {
8
- return Combobox;
9
- }
10
- });
11
- var _engines = require("../../../engines");
12
- var _ = require("../../..");
13
- var _Comboboxconfig = require("./Combobox.config");
14
- var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
15
- var ComboboxComponent = (0, _engines.component)(mergedConfig);
16
- var Combobox = ComboboxComponent;
@@ -225,7 +225,6 @@ import { Context } from "./Combobox.context";
225
225
  var floatingPopoverRef = useRef(null);
226
226
  var inputForkRef = useForkRef(inputRef, ref);
227
227
  var treeId = safeUseId();
228
- var listWrapperRef = useRef(null);
229
228
  var filteredItems = useMemo(function() {
230
229
  return filterItems(transformedItems, textValue, getTextValue(multiple, value, valueToItemMap, renderValue), filter);
231
230
  }, [
@@ -286,10 +285,22 @@ import { Context } from "./Combobox.context";
286
285
  setInternalValue(newValue);
287
286
  }
288
287
  };
289
- var handleClickArrow = function(e) {
290
- handleListToggle(!isCurrentListOpen);
291
- // При клике на иконку закрытия фокус не должен становиться в инпут.
292
- e.stopPropagation();
288
+ var handleClickArrow = function() {
289
+ if (disabled || readOnly) {
290
+ return;
291
+ }
292
+ if (isCurrentListOpen) {
293
+ dispatchPath({
294
+ type: 'reset'
295
+ });
296
+ } else {
297
+ dispatchPath({
298
+ type: 'opened_first_level'
299
+ });
300
+ }
301
+ dispatchFocusedPath({
302
+ type: 'reset'
303
+ });
293
304
  };
294
305
  // Обработчик изменения значения в инпуте
295
306
  var handleTextValueChange = function(e) {
@@ -426,12 +437,6 @@ import { Context } from "./Combobox.context";
426
437
  onChange(isCurrentChecked ? '' : item.value, item);
427
438
  }
428
439
  };
429
- // Обработчик клика на таргет
430
- var handleTargetClick = function() {
431
- if (!isCurrentListOpen) {
432
- handleListToggle(true);
433
- }
434
- };
435
440
  var getChips = function() {
436
441
  if (multiple && Array.isArray(value)) {
437
442
  if (value.length === 0) return [];
@@ -564,14 +569,13 @@ import { Context } from "./Combobox.context";
564
569
  }, /*#__PURE__*/ React.createElement(FloatingPopover, {
565
570
  ref: floatingPopoverRef,
566
571
  opened: isCurrentListOpen,
572
+ onToggle: handleListToggle,
567
573
  placement: placement,
568
574
  portal: portal,
569
575
  listWidth: listWidth,
570
576
  offset: _offset,
571
577
  target: function(referenceRef) {
572
- return /*#__PURE__*/ React.createElement("div", {
573
- onClick: handleTargetClick
574
- }, /*#__PURE__*/ React.createElement(StyledTextField, _object_spread_props(_object_spread({
578
+ return /*#__PURE__*/ React.createElement(StyledTextField, _object_spread_props(_object_spread({
575
579
  ref: name ? inputRef : inputForkRef,
576
580
  inputWrapperRef: referenceRef,
577
581
  value: textValue,
@@ -585,8 +589,7 @@ import { Context } from "./Combobox.context";
585
589
  contentLeft: contentLeft,
586
590
  contentRight: /*#__PURE__*/ React.createElement(IconArrowWrapper, {
587
591
  disabled: disabled,
588
- onClick: handleClickArrow,
589
- className: classes.comboboxTargetArrow
592
+ onClick: handleClickArrow
590
593
  }, /*#__PURE__*/ React.createElement(StyledArrow, {
591
594
  color: "inherit",
592
595
  size: sizeToIconSize(size),
@@ -613,7 +616,7 @@ import { Context } from "./Combobox.context";
613
616
  enumerationType: 'plain'
614
617
  }, rest), {
615
618
  _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
616
- })));
619
+ }));
617
620
  },
618
621
  zIndex: zIndex,
619
622
  isInner: false
@@ -625,7 +628,6 @@ import { Context } from "./Combobox.context";
625
628
  readOnly: readOnly,
626
629
  name: name
627
630
  }, /*#__PURE__*/ React.createElement(ListWrapper, {
628
- ref: listWrapperRef,
629
631
  listWidth: listWidth
630
632
  }, /*#__PURE__*/ React.createElement(Ul, {
631
633
  role: "tree",
@@ -634,6 +636,7 @@ import { Context } from "./Combobox.context";
634
636
  listMaxHeight: listMaxHeight || listHeight,
635
637
  ref: targetRef,
636
638
  virtual: virtual,
639
+ listOverflow: listOverflow,
637
640
  onScroll: virtual ? undefined : onScroll
638
641
  }, beforeList, isEmpty(filteredItems) ? /*#__PURE__*/ React.createElement(StyledEmptyState, {
639
642
  className: classes.emptyStateWrapper,
@@ -655,8 +658,7 @@ import { Context } from "./Combobox.context";
655
658
  path: path,
656
659
  dispatchPath: dispatchPath,
657
660
  index: index,
658
- listWidth: listWidth,
659
- portal: listWrapperRef
661
+ listWidth: listWidth
660
662
  });
661
663
  })), afterList)))))));
662
664
  });
@@ -8,7 +8,7 @@ var mergedConfig = mergeConfig(emptyStateConfig);
8
8
  var EmptyState = component(mergedConfig);
9
9
  export var ListWrapper = styled.div.withConfig({
10
10
  displayName: "Combobox.styles__ListWrapper",
11
- componentId: "sc-900436d4-0"
11
+ componentId: "sc-7fefedf8-0"
12
12
  })([
13
13
  "width:",
14
14
  ";padding:calc(var(",
@@ -25,7 +25,7 @@ export var ListWrapper = styled.div.withConfig({
25
25
  }, tokens.padding, tokens.dropdownBorderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.dropdownBorderWidth, tokens.dropdownBorderColor);
26
26
  export var Ul = styled.ul.withConfig({
27
27
  displayName: "Combobox.styles__Ul",
28
- componentId: "sc-900436d4-1"
28
+ componentId: "sc-7fefedf8-1"
29
29
  })([
30
30
  "max-height:",
31
31
  ";overflow-y:",
@@ -37,12 +37,12 @@ export var Ul = styled.ul.withConfig({
37
37
  var virtual = param.virtual, listMaxHeight = param.listMaxHeight;
38
38
  return virtual ? 'auto' : listMaxHeight || 'auto';
39
39
  }, function(param) {
40
- var virtual = param.virtual;
41
- return virtual ? 'visible' : 'auto';
40
+ var virtual = param.virtual, listOverflow = param.listOverflow;
41
+ return virtual ? 'visible' : listOverflow || 'visible';
42
42
  }, tokens.borderRadius, tokens.dropdownBorderWidth, classes.emptyStateWrapper);
43
43
  export var IconArrowWrapper = styled.div.withConfig({
44
44
  displayName: "Combobox.styles__IconArrowWrapper",
45
- componentId: "sc-900436d4-2"
45
+ componentId: "sc-7fefedf8-2"
46
46
  })([
47
47
  "line-height:0;color:var(",
48
48
  ");cursor:",
@@ -63,7 +63,7 @@ export var sizeMap = {
63
63
  };
64
64
  export var StyledArrow = styled(IconDisclosureDownCentered).withConfig({
65
65
  displayName: "Combobox.styles__StyledArrow",
66
- componentId: "sc-900436d4-3"
66
+ componentId: "sc-7fefedf8-3"
67
67
  })([
68
68
  "width:",
69
69
  ";height:",
@@ -80,7 +80,7 @@ export var base = css([
80
80
  ]);
81
81
  export var StyledEmptyState = styled(EmptyState).withConfig({
82
82
  displayName: "Combobox.styles__StyledEmptyState",
83
- componentId: "sc-900436d4-4"
83
+ componentId: "sc-7fefedf8-4"
84
84
  })([
85
85
  "",
86
86
  ":var(",
@@ -102,7 +102,7 @@ export var StyledEmptyState = styled(EmptyState).withConfig({
102
102
  ], emptyStateTokens.borderRadius, tokens.textFieldBorderRadius, emptyStateTokens.padding, tokens.emptyStatePadding, emptyStateTokens.fontFamily, tokens.textFieldFontFamily, emptyStateTokens.fontSize, tokens.textFieldFontSize, emptyStateTokens.fontStyle, tokens.textFieldFontStyle, emptyStateTokens.fontWeight, tokens.textFieldFontWeight, emptyStateTokens.fontLetterSpacing, tokens.textFieldLetterSpacing, emptyStateTokens.fontLineHeight, tokens.textFieldLineHeight);
103
103
  export var StyledLeftHelper = styled.span.withConfig({
104
104
  displayName: "Combobox.styles__StyledLeftHelper",
105
- componentId: "sc-900436d4-5"
105
+ componentId: "sc-7fefedf8-5"
106
106
  })([
107
107
  "margin:0;padding:0;"
108
108
  ]);
@@ -2,7 +2,7 @@ export var classes = {
2
2
  dropdownItemIsFocused: 'dropdown-item-is-focused',
3
3
  dropdownItemIsDisabled: 'dropdown-item-is-disabled',
4
4
  dropdownItemIsActive: 'dropdown-item-is-active',
5
- comboboxTargetArrow: 'combobox-target-arrow',
5
+ selectTargetArrow: 'combobox-target-arrow',
6
6
  arrowInverse: 'arrow-inverse',
7
7
  textfieldTarget: 'combobox-textfield-target',
8
8
  selectChipIsFocused: 'combobox-chip-is-focused',
@@ -159,9 +159,13 @@ export var useKeyNavigation = function(param) {
159
159
  case keys.Tab:
160
160
  case keys.Escape:
161
161
  {
162
- if (path[0]) {
163
- handleListToggle(false);
164
- }
162
+ dispatchPath({
163
+ type: 'reset'
164
+ });
165
+ dispatchFocusedPath({
166
+ type: 'reset'
167
+ });
168
+ handleListToggle(false);
165
169
  if (multiple) {
166
170
  setTextValue('');
167
171
  } else if (textValue !== value) {
@@ -1,11 +1,11 @@
1
- import React, { useRef } from "react";
1
+ import React from "react";
2
2
  import { safeUseId } from "../../../../../utils";
3
3
  import { FloatingPopover } from "../../FloatingPopover";
4
4
  import { isEmpty } from "../../../../../utils";
5
5
  import { Ul, ListWrapper } from "../../Combobox.styles";
6
6
  import { Item } from "./ui";
7
7
  export var Inner = function(param) {
8
- var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth, portal = param.portal;
8
+ var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth;
9
9
  var handleToggle = function(opened) {
10
10
  if (opened) {
11
11
  dispatchPath({
@@ -20,7 +20,6 @@ export var Inner = function(param) {
20
20
  });
21
21
  }
22
22
  };
23
- var listWrapperRef = useRef(null);
24
23
  var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
25
24
  var treeId = safeUseId();
26
25
  var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
@@ -41,16 +40,13 @@ export var Inner = function(param) {
41
40
  ariaLevel: nextLevel,
42
41
  ariaLabel: item.label
43
42
  }),
44
- isInner: true,
45
- portal: portal
43
+ isInner: true
46
44
  }, /*#__PURE__*/ React.createElement(ListWrapper, {
47
- listWidth: listWidth,
48
- ref: listWrapperRef
45
+ listWidth: listWidth
49
46
  }, /*#__PURE__*/ React.createElement(Ul, {
50
47
  role: "group",
51
48
  id: listId,
52
- virtual: false,
53
- listMaxHeight: item === null || item === void 0 ? void 0 : item.listMaxHeight
49
+ virtual: false
54
50
  }, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(innerItem, innerIndex) {
55
51
  return /*#__PURE__*/ React.createElement(Inner, {
56
52
  key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -59,8 +55,7 @@ export var Inner = function(param) {
59
55
  path: path,
60
56
  dispatchPath: dispatchPath,
61
57
  index: innerIndex,
62
- listWidth: listWidth,
63
- portal: listWrapperRef
58
+ listWidth: listWidth
64
59
  });
65
60
  }))));
66
61
  }
@@ -87,6 +87,17 @@ export var useDrawer = function(param) {
87
87
  isOpen,
88
88
  popupController.items
89
89
  ]);
90
+ // При анмаунте компонента нужно обновлять overflow у body.
91
+ useEffect(function() {
92
+ return function() {
93
+ if (!canUseDOM) {
94
+ return;
95
+ }
96
+ if (!hasDrawers(Array.from(popupController.items.values()))) {
97
+ document.body.style.overflow = overflow.current;
98
+ }
99
+ };
100
+ }, []);
90
101
  var drawerInfo = _object_spread({
91
102
  id: id,
92
103
  info: {
@@ -210,7 +210,6 @@ import { Context } from "./Select.context";
210
210
  var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
211
211
  var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
212
212
  var treeId = safeUseId();
213
- var listWrapperRef = useRef(null);
214
213
  var view = target === 'textfield-like' && (disabled || readOnly) ? 'default' : getView(status, outerView);
215
214
  // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
216
215
  var requiredProps = props.target === 'button-like' ? undefined : {
@@ -497,12 +496,12 @@ import { Context } from "./Select.context";
497
496
  disabled: disabled,
498
497
  readOnly: readOnly
499
498
  }, rest), /*#__PURE__*/ React.createElement(ListWrapper, {
500
- ref: listWrapperRef,
501
499
  listWidth: listWidth
502
500
  }, /*#__PURE__*/ React.createElement(Ul, {
503
501
  role: "tree",
504
502
  id: "".concat(treeId, "_tree_level_1"),
505
503
  "aria-multiselectable": Boolean(props.multiselect),
504
+ listOverflow: listOverflow,
506
505
  listMaxHeight: listMaxHeight || listHeight,
507
506
  onScroll: virtual ? undefined : handleScroll,
508
507
  ref: targetRef,
@@ -523,8 +522,7 @@ import { Context } from "./Select.context";
523
522
  path: path,
524
523
  dispatchPath: dispatchPath,
525
524
  index: index,
526
- listWidth: listWidth,
527
- portal: listWrapperRef
525
+ listWidth: listWidth
528
526
  });
529
527
  }), afterList))))));
530
528
  });