@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.
- package/cjs/components/Combobox/ComboboxNew/Combobox.js +23 -22
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +3 -2
- package/cjs/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
- package/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +5 -11
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
- package/cjs/components/Drawer/hooks/useDrawer.js +12 -0
- package/cjs/components/Drawer/hooks/useDrawer.js.map +1 -1
- package/cjs/components/Select/Select.js +3 -4
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/Select.styles.js +3 -2
- package/cjs/components/Select/Select.styles.js.map +1 -1
- package/cjs/components/Select/hooks/useKeyboardNavigation.js +7 -3
- package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/cjs/components/Select/ui/Inner/Inner.js +5 -11
- package/cjs/components/Select/ui/Inner/Inner.js.map +1 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +22 -20
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +15 -15
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +9 -50
- package/emotion/cjs/components/Drawer/hooks/useDrawer.js +11 -0
- package/emotion/cjs/components/Select/Select.js +2 -4
- package/emotion/cjs/components/Select/Select.styles.js +7 -7
- package/emotion/cjs/components/Select/hooks/useKeyboardNavigation.js +7 -3
- package/emotion/cjs/components/Select/ui/Inner/Inner.js +9 -50
- package/emotion/cjs/examples/components/Combobox/Combobox.js +0 -15
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +22 -20
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.styles.js +15 -15
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
- package/emotion/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
- package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -11
- package/emotion/es/components/Drawer/hooks/useDrawer.js +11 -0
- package/emotion/es/components/Select/Select.js +2 -4
- package/emotion/es/components/Select/Select.styles.js +7 -7
- package/emotion/es/components/Select/hooks/useKeyboardNavigation.js +7 -3
- package/emotion/es/components/Select/ui/Inner/Inner.js +6 -11
- package/emotion/es/examples/components/Combobox/Combobox.js +0 -7
- package/es/components/Combobox/ComboboxNew/Combobox.js +23 -22
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.styles.js +3 -2
- package/es/components/Combobox/ComboboxNew/Combobox.styles.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
- package/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -12
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
- package/es/components/Drawer/hooks/useDrawer.js +12 -0
- package/es/components/Drawer/hooks/useDrawer.js.map +1 -1
- package/es/components/Select/Select.js +3 -4
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/Select.styles.js +3 -2
- package/es/components/Select/Select.styles.js.map +1 -1
- package/es/components/Select/hooks/useKeyboardNavigation.js +7 -3
- package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/es/components/Select/ui/Inner/Inner.js +6 -12
- package/es/components/Select/ui/Inner/Inner.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +22 -20
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.styles.js +8 -8
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
- package/styled-components/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +9 -50
- package/styled-components/cjs/components/Drawer/hooks/useDrawer.js +11 -0
- package/styled-components/cjs/components/Select/Select.js +2 -4
- package/styled-components/cjs/components/Select/Select.styles.js +4 -4
- package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js +7 -3
- package/styled-components/cjs/components/Select/ui/Inner/Inner.js +9 -50
- package/styled-components/cjs/examples/components/Combobox/Combobox.js +0 -15
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +22 -20
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js +8 -8
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -1
- package/styled-components/es/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js +7 -3
- package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +6 -11
- package/styled-components/es/components/Drawer/hooks/useDrawer.js +11 -0
- package/styled-components/es/components/Select/Select.js +2 -4
- package/styled-components/es/components/Select/Select.styles.js +4 -4
- package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js +7 -3
- package/styled-components/es/components/Select/ui/Inner/Inner.js +6 -11
- package/styled-components/es/examples/components/Combobox/Combobox.js +0 -7
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts +1 -0
- package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +6 -6
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.type.d.ts +1 -2
- package/types/components/Combobox/ComboboxNew/ui/Inner/Inner.type.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts +2 -6
- package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
- package/types/components/Drawer/hooks/useDrawer.d.ts.map +1 -1
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +6 -6
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.styles.d.ts +1 -0
- package/types/components/Select/Select.styles.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +10 -10
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/Inner.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/Inner.type.d.ts +1 -2
- package/types/components/Select/ui/Inner/Inner.type.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts +3 -11
- package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
- package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts +6 -6
- package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts.map +1 -1
- package/types/examples/components/Combobox/Combobox.d.ts +24 -24
- package/types/examples/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/examples/components/Select/Select.d.ts +6 -6
- 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
|
-
|
26
|
+
selectTargetArrow: 'combobox-target-arrow',
|
27
27
|
arrowInverse: 'arrow-inverse',
|
28
28
|
textfieldTarget: 'combobox-textfield-target',
|
29
29
|
selectChipIsFocused: 'combobox-chip-is-focused',
|
package/styled-components/cjs/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.js
CHANGED
@@ -180,9 +180,13 @@ var useKeyNavigation = function(param) {
|
|
180
180
|
case keys.Tab:
|
181
181
|
case keys.Escape:
|
182
182
|
{
|
183
|
-
|
184
|
-
|
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__*/
|
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
|
18
|
-
|
19
|
-
|
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
|
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-
|
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-
|
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' : '
|
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
|
-
|
202
|
-
|
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__*/
|
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
|
17
|
-
|
18
|
-
|
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
|
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(
|
290
|
-
|
291
|
-
|
292
|
-
|
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(
|
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-
|
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-
|
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' : '
|
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-
|
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-
|
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-
|
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-
|
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
|
-
|
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
|
-
|
163
|
-
|
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
|
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
|
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
|
});
|