@salutejs/plasma-new-hope 0.325.0-dev.0 → 0.326.0-canary.1986.15321507276.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.css +55 -51
- package/cjs/components/Combobox/ComboboxNew/Combobox.js +5 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +8 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.css +56 -0
- package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +44 -0
- package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js.map +1 -0
- package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +53 -0
- package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js.map +1 -0
- package/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles_1bpknuo.css +3 -0
- package/cjs/components/Pagination/Pagination.css +57 -52
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +57 -52
- package/cjs/components/Select/FloatingPopover.js +9 -5
- package/cjs/components/Select/FloatingPopover.js.map +1 -1
- package/cjs/components/Select/Select.css +57 -52
- package/cjs/components/Select/Select.js +14 -5
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/Select.styles.js +17 -17
- package/cjs/components/Select/Select.styles.js.map +1 -1
- package/cjs/components/Select/Select.styles_bjoo18.css +3 -0
- package/cjs/components/Select/Select.tokens.js +9 -2
- package/cjs/components/Select/Select.tokens.js.map +1 -1
- package/cjs/components/Select/hooks/useKeyboardNavigation.js +2 -2
- package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/cjs/components/Select/ui/Inner/Inner.css +11 -10
- package/cjs/components/Select/ui/Inner/Inner.js +5 -4
- package/cjs/components/Select/ui/Inner/Inner.js.map +1 -1
- package/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +4 -4
- package/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js.map +1 -1
- package/cjs/components/Select/ui/Inner/ui/Item/Item.styles_1qpfn0s.css +11 -0
- package/cjs/components/Select/ui/SelectAll/SelectAll.css +54 -0
- package/cjs/components/Select/ui/SelectAll/SelectAll.js +44 -0
- package/cjs/components/Select/ui/SelectAll/SelectAll.js.map +1 -0
- package/cjs/components/Select/ui/SelectAll/SelectAll.styles.js +53 -0
- package/cjs/components/Select/ui/SelectAll/SelectAll.styles.js.map +1 -0
- package/cjs/components/Select/ui/SelectAll/SelectAll.styles_1puprwc.css +3 -0
- package/cjs/components/Select/ui/VirtualList/VirtualList.css +10 -10
- package/cjs/components/Table/Table.css +34 -29
- package/cjs/components/Table/ui/Cell/Cell.css +34 -29
- package/cjs/components/Table/ui/EditableCell/EditableCell.css +34 -29
- package/cjs/components/Table/ui/HeadCell/HeadCell.css +34 -29
- package/cjs/components/Table/ui/HeadCell/ui/Filter/Filter.css +34 -29
- package/cjs/index.css +23 -14
- package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +58 -0
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +4 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +8 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +39 -0
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +30 -0
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/index.js +11 -0
- package/emotion/cjs/components/Select/FloatingPopover.js +9 -5
- package/emotion/cjs/components/Select/Select.js +13 -5
- package/emotion/cjs/components/Select/Select.styles.js +11 -10
- package/emotion/cjs/components/Select/Select.template-doc.mdx +58 -0
- package/emotion/cjs/components/Select/Select.tokens.js +9 -2
- package/emotion/cjs/components/Select/hooks/useKeyboardNavigation.js +2 -2
- package/emotion/cjs/components/Select/ui/Inner/Inner.js +5 -4
- package/emotion/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +14 -14
- package/emotion/cjs/components/Select/ui/SelectAll/SelectAll.js +39 -0
- package/emotion/cjs/components/Select/ui/SelectAll/SelectAll.styles.js +30 -0
- package/emotion/cjs/components/Select/ui/index.js +11 -0
- package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +15 -15
- package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.js +13 -2
- package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +187 -0
- package/emotion/cjs/examples/plasma_b2c/components/Select/Select.config.js +24 -24
- package/emotion/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +186 -0
- package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +15 -15
- package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.js +12 -2
- package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +186 -0
- package/emotion/cjs/examples/plasma_web/components/Select/Select.config.js +24 -24
- package/emotion/cjs/examples/plasma_web/components/Select/Select.stories.tsx +186 -0
- package/emotion/es/components/Combobox/Combobox.template-doc.mdx +58 -0
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +5 -2
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.tokens.js +8 -1
- package/emotion/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +32 -0
- package/emotion/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +23 -0
- package/emotion/es/components/Combobox/ComboboxNew/ui/index.js +2 -1
- package/emotion/es/components/Select/FloatingPopover.js +9 -5
- package/emotion/es/components/Select/Select.js +15 -7
- package/emotion/es/components/Select/Select.styles.js +10 -9
- package/emotion/es/components/Select/Select.template-doc.mdx +58 -0
- package/emotion/es/components/Select/Select.tokens.js +9 -2
- package/emotion/es/components/Select/hooks/useKeyboardNavigation.js +2 -2
- package/emotion/es/components/Select/ui/Inner/Inner.js +6 -5
- package/emotion/es/components/Select/ui/Inner/ui/Item/Item.styles.js +14 -14
- package/emotion/es/components/Select/ui/SelectAll/SelectAll.js +32 -0
- package/emotion/es/components/Select/ui/SelectAll/SelectAll.styles.js +23 -0
- package/emotion/es/components/Select/ui/index.js +2 -1
- package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +15 -15
- package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.js +10 -2
- package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +187 -0
- package/emotion/es/examples/plasma_b2c/components/Select/Select.config.js +24 -24
- package/emotion/es/examples/plasma_b2c/components/Select/Select.stories.tsx +186 -0
- package/emotion/es/examples/plasma_web/components/Combobox/Combobox.config.js +15 -15
- package/emotion/es/examples/plasma_web/components/Combobox/Combobox.js +10 -3
- package/emotion/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +186 -0
- package/emotion/es/examples/plasma_web/components/Select/Select.config.js +24 -24
- package/emotion/es/examples/plasma_web/components/Select/Select.stories.tsx +186 -0
- package/es/components/Combobox/ComboboxNew/Combobox.css +55 -51
- package/es/components/Combobox/ComboboxNew/Combobox.js +5 -1
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.tokens.js +8 -1
- package/es/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js +1 -1
- package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.css +56 -0
- package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +36 -0
- package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js.map +1 -0
- package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +47 -0
- package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js.map +1 -0
- package/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles_1bpknuo.css +3 -0
- package/es/components/Pagination/Pagination.css +57 -52
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +57 -52
- package/es/components/Select/FloatingPopover.js +9 -5
- package/es/components/Select/FloatingPopover.js.map +1 -1
- package/es/components/Select/Select.css +57 -52
- package/es/components/Select/Select.js +15 -6
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/Select.styles.js +17 -18
- package/es/components/Select/Select.styles.js.map +1 -1
- package/es/components/Select/Select.styles_bjoo18.css +3 -0
- package/es/components/Select/Select.tokens.js +9 -2
- package/es/components/Select/Select.tokens.js.map +1 -1
- package/es/components/Select/hooks/useKeyboardNavigation.js +2 -2
- package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/es/components/Select/ui/Inner/Inner.css +11 -10
- package/es/components/Select/ui/Inner/Inner.js +6 -5
- package/es/components/Select/ui/Inner/Inner.js.map +1 -1
- package/es/components/Select/ui/Inner/ui/Item/Item.styles.js +4 -4
- package/es/components/Select/ui/Inner/ui/Item/Item.styles.js.map +1 -1
- package/es/components/Select/ui/Inner/ui/Item/Item.styles_1qpfn0s.css +11 -0
- package/es/components/Select/ui/SelectAll/SelectAll.css +54 -0
- package/es/components/Select/ui/SelectAll/SelectAll.js +36 -0
- package/es/components/Select/ui/SelectAll/SelectAll.js.map +1 -0
- package/es/components/Select/ui/SelectAll/SelectAll.styles.js +47 -0
- package/es/components/Select/ui/SelectAll/SelectAll.styles.js.map +1 -0
- package/es/components/Select/ui/SelectAll/SelectAll.styles_1puprwc.css +3 -0
- package/es/components/Select/ui/VirtualList/VirtualList.css +10 -10
- package/es/components/Table/Table.css +34 -29
- package/es/components/Table/ui/Cell/Cell.css +34 -29
- package/es/components/Table/ui/EditableCell/EditableCell.css +34 -29
- package/es/components/Table/ui/HeadCell/HeadCell.css +34 -29
- package/es/components/Table/ui/HeadCell/ui/Filter/Filter.css +34 -29
- package/es/index.css +23 -14
- package/package.json +2 -2
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +58 -0
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +4 -1
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +8 -1
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +39 -0
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +27 -0
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/index.js +11 -0
- package/styled-components/cjs/components/Select/FloatingPopover.js +9 -5
- package/styled-components/cjs/components/Select/Select.js +13 -5
- package/styled-components/cjs/components/Select/Select.styles.js +8 -8
- package/styled-components/cjs/components/Select/Select.template-doc.mdx +58 -0
- package/styled-components/cjs/components/Select/Select.tokens.js +9 -2
- package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js +2 -2
- package/styled-components/cjs/components/Select/ui/Inner/Inner.js +5 -4
- package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +3 -3
- package/styled-components/cjs/components/Select/ui/SelectAll/SelectAll.js +39 -0
- package/styled-components/cjs/components/Select/ui/SelectAll/SelectAll.styles.js +27 -0
- package/styled-components/cjs/components/Select/ui/index.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +8 -8
- package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.js +13 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +187 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.config.js +14 -14
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +186 -0
- package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.js +12 -2
- package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +186 -0
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.config.js +14 -14
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx +186 -0
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +58 -0
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +5 -2
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js +8 -1
- package/styled-components/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.js +32 -0
- package/styled-components/es/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js +20 -0
- package/styled-components/es/components/Combobox/ComboboxNew/ui/index.js +2 -1
- package/styled-components/es/components/Select/FloatingPopover.js +9 -5
- package/styled-components/es/components/Select/Select.js +15 -7
- package/styled-components/es/components/Select/Select.styles.js +7 -7
- package/styled-components/es/components/Select/Select.template-doc.mdx +58 -0
- package/styled-components/es/components/Select/Select.tokens.js +9 -2
- package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js +2 -2
- package/styled-components/es/components/Select/ui/Inner/Inner.js +6 -5
- package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.styles.js +3 -3
- package/styled-components/es/components/Select/ui/SelectAll/SelectAll.js +32 -0
- package/styled-components/es/components/Select/ui/SelectAll/SelectAll.styles.js +20 -0
- package/styled-components/es/components/Select/ui/index.js +2 -1
- package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +8 -8
- package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.js +10 -2
- package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +187 -0
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.config.js +14 -14
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +186 -0
- package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.js +10 -3
- package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +186 -0
- package/styled-components/es/examples/plasma_web/components/Select/Select.config.js +14 -14
- package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx +186 -0
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts +7 -0
- package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +11 -0
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.d.ts +7 -0
- package/types/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.d.ts.map +1 -0
- package/types/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.d.ts +11 -0
- package/types/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.d.ts.map +1 -0
- package/types/components/Combobox/ComboboxNew/ui/index.d.ts +1 -0
- package/types/components/Combobox/ComboboxNew/ui/index.d.ts.map +1 -1
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +3 -0
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
- package/types/components/Select/FloatingPopover.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.styles.d.ts +3 -1
- package/types/components/Select/Select.styles.d.ts.map +1 -1
- package/types/components/Select/Select.tokens.d.ts +7 -0
- package/types/components/Select/Select.tokens.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +13 -1
- 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/SelectAll/SelectAll.d.ts +7 -0
- package/types/components/Select/ui/SelectAll/SelectAll.d.ts.map +1 -0
- package/types/components/Select/ui/SelectAll/SelectAll.styles.d.ts +11 -0
- package/types/components/Select/ui/SelectAll/SelectAll.styles.d.ts.map +1 -0
- package/types/components/Select/ui/index.d.ts +1 -0
- package/types/components/Select/ui/index.d.ts.map +1 -1
- package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts +3 -0
- package/types/components/Table/ui/HeadCell/ui/Filter/Filter.styles.d.ts.map +1 -1
- package/cjs/components/Select/Select.styles_11cghkj.css +0 -2
- package/cjs/components/Select/ui/Inner/ui/Item/Item.styles_ir8fmi.css +0 -11
- package/es/components/Select/Select.styles_11cghkj.css +0 -2
- package/es/components/Select/ui/Inner/ui/Item/Item.styles_ir8fmi.css +0 -11
@@ -16,6 +16,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
16
16
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
17
17
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
18
18
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
19
|
+
// TODO: #2003
|
20
|
+
var LIST_PADDING = 2;
|
19
21
|
var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
|
20
22
|
var target = _ref.target,
|
21
23
|
children = _ref.children,
|
@@ -24,9 +26,8 @@ var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forward
|
|
24
26
|
placement = _ref.placement,
|
25
27
|
portal = _ref.portal,
|
26
28
|
listWidth = _ref.listWidth,
|
27
|
-
|
28
|
-
|
29
|
-
zIndex = _ref.zIndex;
|
29
|
+
zIndex = _ref.zIndex,
|
30
|
+
isInner = _ref.isInner;
|
30
31
|
var _useFloating = (0, _react.useFloating)({
|
31
32
|
whileElementsMounted: function whileElementsMounted(referenceEl, floatingEl, update) {
|
32
33
|
return (0, _react.autoUpdate)(referenceEl, floatingEl, update, {
|
@@ -37,14 +38,17 @@ var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forward
|
|
37
38
|
},
|
38
39
|
placement: (0, _utils.getPlacement)(placement),
|
39
40
|
open: opened,
|
40
|
-
middleware: [(0, _react.offset)(
|
41
|
+
middleware: [(0, _react.offset)({
|
42
|
+
mainAxis: isInner ? 4 : 0,
|
43
|
+
alignmentAxis: isInner ? -LIST_PADDING : 0
|
44
|
+
}), (0, _react.flip)({
|
41
45
|
fallbackPlacements: (0, _utils.getFallbackPlacements)(placement)
|
42
46
|
}), (0, _react.shift)(), (0, _react.size)({
|
43
47
|
apply: function apply(_ref2) {
|
44
48
|
var rects = _ref2.rects,
|
45
49
|
elements = _ref2.elements;
|
46
50
|
Object.assign(elements.floating.style, {
|
47
|
-
width: listWidth || "".concat(rects.reference.width, "px")
|
51
|
+
width: listWidth || "".concat(isInner ? rects.reference.width + LIST_PADDING * 2 : rects.reference.width, "px")
|
48
52
|
});
|
49
53
|
}
|
50
54
|
})]
|
@@ -409,7 +409,8 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
409
409
|
hintProps: hintProps
|
410
410
|
});
|
411
411
|
},
|
412
|
-
zIndex: zIndex
|
412
|
+
zIndex: zIndex,
|
413
|
+
isInner: false
|
413
414
|
}, /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
414
415
|
view: view,
|
415
416
|
size: size,
|
@@ -417,17 +418,24 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
417
418
|
chipView: chipView,
|
418
419
|
disabled: disabled,
|
419
420
|
readOnly: readOnly
|
420
|
-
}, rest), /*#__PURE__*/_react["default"].createElement(_Select.
|
421
|
+
}, rest), /*#__PURE__*/_react["default"].createElement(_Select.ListWrapper, {
|
422
|
+
listWidth: listWidth
|
423
|
+
}, /*#__PURE__*/_react["default"].createElement(_Select.Ul, {
|
421
424
|
role: "tree",
|
422
425
|
id: "".concat(treeId, "_tree_level_1"),
|
423
426
|
"aria-multiselectable": Boolean(props.multiselect),
|
424
427
|
listOverflow: listOverflow,
|
425
428
|
listMaxHeight: listMaxHeight || listHeight,
|
426
429
|
onScroll: virtual ? undefined : handleScroll,
|
427
|
-
listWidth: listWidth,
|
428
430
|
ref: targetRef,
|
429
431
|
virtual: virtual
|
430
|
-
}, beforeList,
|
432
|
+
}, beforeList, props.multiselect && props.selectAllOptions &&
|
433
|
+
/*#__PURE__*/
|
434
|
+
// TODO: #2004
|
435
|
+
_react["default"].createElement(_ui.SelectAll, {
|
436
|
+
selectAllOptions: props.selectAllOptions,
|
437
|
+
variant: variant
|
438
|
+
}), virtual ? /*#__PURE__*/_react["default"].createElement(_ui.VirtualList, {
|
431
439
|
items: transformedItems,
|
432
440
|
listMaxHeight: listMaxHeight || listHeight,
|
433
441
|
onScroll: onScroll
|
@@ -441,7 +449,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
441
449
|
index: index,
|
442
450
|
listWidth: listWidth
|
443
451
|
});
|
444
|
-
}), afterList)))));
|
452
|
+
}), afterList))))));
|
445
453
|
});
|
446
454
|
};
|
447
455
|
var selectConfig = exports.selectConfig = {
|
@@ -4,18 +4,21 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
5
5
|
value: true
|
6
6
|
});
|
7
|
-
exports.base = exports.Ul = void 0;
|
7
|
+
exports.base = exports.Ul = exports.ListWrapper = void 0;
|
8
8
|
var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
|
9
9
|
var _utils = /*#__PURE__*/require("./utils");
|
10
10
|
var _Select = /*#__PURE__*/require("./Select.tokens");
|
11
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
13
|
-
var
|
13
|
+
var ListWrapper = exports.ListWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
14
14
|
componentId: "plasma-new-hope__sc-le54jv-0"
|
15
|
-
})(["
|
15
|
+
})(["width:", ";padding:calc(var(", ") + var(", ",0rem));border-radius:var(", ");box-sizing:border-box;background:var(", ");box-shadow:", ",inset 0 0 0 var(", ",0rem) var(", ",transparent);"], function (_ref) {
|
16
16
|
var listWidth = _ref.listWidth;
|
17
17
|
return listWidth || '100%';
|
18
|
-
},
|
18
|
+
}, _Select.tokens.padding, _Select.tokens.dropdownBorderWidth, _Select.tokens.borderRadius, _Select.constants.background, _Select.constants.boxShadow, _Select.tokens.dropdownBorderWidth, _Select.tokens.dropdownBorderColor);
|
19
|
+
var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
|
20
|
+
componentId: "plasma-new-hope__sc-le54jv-1"
|
21
|
+
})(["max-height:", ";overflow-y:", ";border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));margin:0;padding:0;"], function (_ref2) {
|
19
22
|
var virtual = _ref2.virtual,
|
20
23
|
listMaxHeight = _ref2.listMaxHeight;
|
21
24
|
return (
|
@@ -26,8 +29,5 @@ var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
|
|
26
29
|
var virtual = _ref3.virtual,
|
27
30
|
listOverflow = _ref3.listOverflow;
|
28
31
|
return virtual ? 'visible' : listOverflow || 'visible';
|
29
|
-
},
|
30
|
-
var isInnerUl = _ref4.isInnerUl;
|
31
|
-
return isInnerUl ? "calc(var(".concat(_Select.tokens.padding, ") * -1) 0 0 0") : "var(".concat(_Select.tokens.margin, ") 0 0 0");
|
32
|
-
}, _Select.tokens.padding, _Select.tokens.dropdownBorderWidth);
|
32
|
+
}, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth);
|
33
33
|
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
|
@@ -508,6 +508,64 @@ Select может выглядеть как Button и как Textfield. За э
|
|
508
508
|
}
|
509
509
|
```
|
510
510
|
</TabItem>
|
511
|
+
<TabItem value="selectAll" label="Выбрать всё">
|
512
|
+
Работа с кнопкой "Выбрать всё" осуществляется через свойство `selectAllOptions` только в режиме `multiselect`:
|
513
|
+
```tsx
|
514
|
+
type SelectAllProps = {
|
515
|
+
checked?: boolean;
|
516
|
+
indeterminate?: boolean;
|
517
|
+
label?: string;
|
518
|
+
onClick?: () => void;
|
519
|
+
sticky?: boolean;
|
520
|
+
};
|
521
|
+
```
|
522
|
+
Вся логика выбора элементов и взаимодействия с компонентом лежит на стороне пользователя.
|
523
|
+
|
524
|
+
```tsx live
|
525
|
+
import React, { useState } from 'react';
|
526
|
+
import { Select } from '@salutejs/{{ package }}';
|
527
|
+
|
528
|
+
export function App() {
|
529
|
+
const [checked, setChecked] = useState(false);
|
530
|
+
|
531
|
+
const items = [
|
532
|
+
{
|
533
|
+
value: 'north_america',
|
534
|
+
label: 'Северная Америка',
|
535
|
+
},
|
536
|
+
{
|
537
|
+
value: 'south_america',
|
538
|
+
label: 'Южная Америка',
|
539
|
+
items: [
|
540
|
+
{
|
541
|
+
value: 'brazil',
|
542
|
+
label: 'Бразилия',
|
543
|
+
},
|
544
|
+
{
|
545
|
+
value: 'argentina',
|
546
|
+
label: 'Аргентина',
|
547
|
+
},
|
548
|
+
],
|
549
|
+
},
|
550
|
+
];
|
551
|
+
|
552
|
+
return (
|
553
|
+
<div style={{ display: "flex", gap: "30px", height: "300px" }}>
|
554
|
+
<Select
|
555
|
+
label="Label"
|
556
|
+
placeholder="Placeholder"
|
557
|
+
items={items}
|
558
|
+
multiselect
|
559
|
+
selectAllOptions={{
|
560
|
+
checked,
|
561
|
+
onClick: () => setChecked(prev => !prev)
|
562
|
+
}}
|
563
|
+
/>
|
564
|
+
</div>
|
565
|
+
);
|
566
|
+
}
|
567
|
+
```
|
568
|
+
</TabItem>
|
511
569
|
</Tabs>
|
512
570
|
|
513
571
|
|
@@ -61,6 +61,13 @@ var tokens = exports.tokens = {
|
|
61
61
|
checkboxTriggerBorderWidth: '--plasma-select-checkbox-trigger-border-width',
|
62
62
|
indicatorSize: '--plasma-select-indicator-size',
|
63
63
|
targetHeight: '--plasma-select-target-height',
|
64
|
+
dividerMarginTop: '--plasma-select-divider-margin-top',
|
65
|
+
dividerMarginTopTight: '--plasma-select-divider-margin-top-tight',
|
66
|
+
dividerMarginRight: '--plasma-select-divider-margin-right',
|
67
|
+
dividerMarginBottom: '--plasma-select-divider-margin-bottom',
|
68
|
+
dividerMarginBottomTight: '--plasma-select-divider-margin-bottom-tight',
|
69
|
+
dividerMarginLeft: '--plasma-select-divider-margin-left',
|
70
|
+
dividerColor: '--plasma-select-divider-color',
|
64
71
|
// Токены для Button
|
65
72
|
buttonColor: '--plasma-select-button-color',
|
66
73
|
buttonColorHover: '--plasma-select-button-color-hover',
|
@@ -234,7 +241,7 @@ var constants = exports.constants = {
|
|
234
241
|
focusSize: '0.0625rem',
|
235
242
|
background: '--surface-solid-card',
|
236
243
|
boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
|
237
|
-
itemBackground: '--
|
244
|
+
itemBackground: '--surface-clear',
|
238
245
|
textfieldTargetColor: '--text-primary',
|
239
246
|
textfieldOuterLabelColor: '--text-primary',
|
240
247
|
textfieldInnerLabelColor: '--text-secondary',
|
@@ -247,5 +254,5 @@ var constants = exports.constants = {
|
|
247
254
|
fontLetterSpacing: '--plasma-typo-body-xs-letter-spacing',
|
248
255
|
fontLineHeight: '--plasma-typo-body-xs-line-height',
|
249
256
|
cellTitleColor: '--text-primary',
|
250
|
-
cellBackgroundColor: '--
|
257
|
+
cellBackgroundColor: '--surface-clear'
|
251
258
|
};
|
@@ -148,7 +148,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
|
|
148
148
|
});
|
149
149
|
break;
|
150
150
|
}
|
151
|
-
if (!_currentItem || _currentItem !== null && _currentItem !== void 0 && _currentItem.disabled) {
|
151
|
+
if (!_currentItem || _currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
152
152
|
break;
|
153
153
|
}
|
154
154
|
handlePressDown(_currentItem);
|
@@ -158,7 +158,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
|
|
158
158
|
{
|
159
159
|
event.preventDefault();
|
160
160
|
var _currentItem2 = getItemByFocused(focusedPath, focusedToValueMap);
|
161
|
-
if (_currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
|
161
|
+
if (_currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled) {
|
162
162
|
break;
|
163
163
|
}
|
164
164
|
if (!path[0]) {
|
@@ -42,7 +42,6 @@ var Inner = exports.Inner = function Inner(_ref) {
|
|
42
42
|
placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right',
|
43
43
|
opened: isCurrentListOpen,
|
44
44
|
onToggle: handleToggle,
|
45
|
-
offset: 2,
|
46
45
|
target: /*#__PURE__*/_react["default"].createElement(_Item.Item, {
|
47
46
|
item: item,
|
48
47
|
path: path,
|
@@ -52,12 +51,14 @@ var Inner = exports.Inner = function Inner(_ref) {
|
|
52
51
|
ariaExpanded: isCurrentListOpen,
|
53
52
|
ariaLevel: nextLevel,
|
54
53
|
ariaLabel: item.label
|
55
|
-
})
|
54
|
+
}),
|
55
|
+
isInner: true
|
56
|
+
}, /*#__PURE__*/_react["default"].createElement(_Select.ListWrapper, {
|
57
|
+
listWidth: listWidth
|
56
58
|
}, /*#__PURE__*/_react["default"].createElement(_Select.Ul, {
|
57
59
|
role: "group",
|
58
60
|
id: listId,
|
59
61
|
isInnerUl: true,
|
60
|
-
listWidth: listWidth,
|
61
62
|
virtual: false
|
62
63
|
}, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(function (innerItem, innerIndex) {
|
63
64
|
return /*#__PURE__*/_react["default"].createElement(Inner, {
|
@@ -69,7 +70,7 @@ var Inner = exports.Inner = function Inner(_ref) {
|
|
69
70
|
index: innerIndex,
|
70
71
|
listWidth: listWidth
|
71
72
|
});
|
72
|
-
})));
|
73
|
+
}))));
|
73
74
|
}
|
74
75
|
return /*#__PURE__*/_react["default"].createElement(_Item.Item, {
|
75
76
|
item: item,
|
@@ -79,16 +79,16 @@ var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].
|
|
79
79
|
})(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
80
80
|
var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
|
81
81
|
componentId: "plasma-new-hope__sc-fr2h0y-9"
|
82
|
-
})(["display:flex;align-items:center;min-height:var(", ");margin:0
|
82
|
+
})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:var(", ");color:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, function (_ref8) {
|
83
83
|
var variant = _ref8.variant;
|
84
84
|
return "var(".concat(variant === 'tight' ? _Select.tokens.itemPaddingTight : _Select.tokens.itemPadding, ")");
|
85
85
|
}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemDisabledOpacity, _Select.tokens.itemDisabledColor, /*#__PURE__*/(0, _mixins.addFocus)({
|
86
|
-
outlineSize: '0
|
86
|
+
outlineSize: '0',
|
87
87
|
outlineOffset: '0',
|
88
88
|
outlineColor: /*#__PURE__*/"var(".concat(_Select.constants.focusColor, ")"),
|
89
89
|
outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.borderRadius, ") - 0.125rem - var(").concat(_Select.tokens.dropdownBorderWidth, ", 0rem))"),
|
90
90
|
hasTransition: false,
|
91
|
-
customFocusRules: /*#__PURE__*/"\n &.".concat(_Select.classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(").concat(_Select.constants.focusColor, ");\n }\n ")
|
91
|
+
customFocusRules: /*#__PURE__*/"\n &.".concat(_Select.classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: inset 0 0 0 0.0625rem var(").concat(_Select.constants.focusColor, ");\n }\n ")
|
92
92
|
}));
|
93
93
|
var StyledCheckboxWrapper = exports.StyledCheckboxWrapper = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
94
94
|
componentId: "plasma-new-hope__sc-fr2h0y-10"
|
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.SelectAll = void 0;
|
7
|
+
var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
|
8
|
+
var _Item = /*#__PURE__*/require("../Inner/ui/Item/Item.styles");
|
9
|
+
var _SelectAll = /*#__PURE__*/require("./SelectAll.styles");
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
11
|
+
var SelectAll = exports.SelectAll = function SelectAll(_ref) {
|
12
|
+
var variant = _ref.variant,
|
13
|
+
selectAllOptions = _ref.selectAllOptions;
|
14
|
+
return /*#__PURE__*/_react["default"].createElement(_SelectAll.Wrapper, {
|
15
|
+
variant: variant,
|
16
|
+
onClick: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.onClick,
|
17
|
+
sticky: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.sticky
|
18
|
+
}, /*#__PURE__*/_react["default"].createElement(_Item.Wrapper, {
|
19
|
+
variant: variant
|
20
|
+
}, /*#__PURE__*/_react["default"].createElement(_Item.IconWrapper, {
|
21
|
+
variant: variant
|
22
|
+
}, /*#__PURE__*/_react["default"].createElement(_Item.StyledCheckboxWrapper, {
|
23
|
+
onClick: function onClick(e) {
|
24
|
+
return e.preventDefault();
|
25
|
+
}
|
26
|
+
}, /*#__PURE__*/_react["default"].createElement(_Item.StyledCheckbox, {
|
27
|
+
checked: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.checked,
|
28
|
+
indeterminate: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.indeterminate,
|
29
|
+
appearance: "default"
|
30
|
+
}))), /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell
|
31
|
+
// TODO: #1548
|
32
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
33
|
+
// @ts-ignore
|
34
|
+
, {
|
35
|
+
title: /*#__PURE__*/_react["default"].createElement("span", null, (selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.label) || 'Выбрать всё')
|
36
|
+
}))), /*#__PURE__*/_react["default"].createElement(_SelectAll.DividerWrapper, null, /*#__PURE__*/_react["default"].createElement(_SelectAll.Divider, {
|
37
|
+
variant: variant
|
38
|
+
})));
|
39
|
+
};
|
@@ -0,0 +1,27 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Wrapper = exports.DividerWrapper = exports.Divider = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
|
8
|
+
var _Select = /*#__PURE__*/require("../../Select.tokens");
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
10
|
+
var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
11
|
+
componentId: "plasma-new-hope__sc-1f7l6yo-0"
|
12
|
+
})(["position:", ";z-index:10;top:0;display:flex;flex-direction:column;background:var(", ");margin-bottom:", ";border-top-left-radius:calc(var(", ") - 0.125rem - var(", ",0rem));border-top-right-radius:calc(var(", ") - 0.125rem - var(", ",0rem));"], function (_ref) {
|
13
|
+
var sticky = _ref.sticky;
|
14
|
+
return sticky ? 'sticky' : 'static';
|
15
|
+
}, _Select.constants.background, function (_ref2) {
|
16
|
+
var variant = _ref2.variant;
|
17
|
+
return "var(".concat(variant === 'tight' ? _Select.tokens.dividerMarginBottomTight : _Select.tokens.dividerMarginBottom, ")");
|
18
|
+
}, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth);
|
19
|
+
var DividerWrapper = exports.DividerWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
20
|
+
componentId: "plasma-new-hope__sc-1f7l6yo-1"
|
21
|
+
})(["margin:0 calc(0.125rem + var(", ",0rem));background:var(", ");"], _Select.tokens.dropdownBorderWidth, _Select.constants.background);
|
22
|
+
var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
23
|
+
componentId: "plasma-new-hope__sc-1f7l6yo-2"
|
24
|
+
})(["height:0.0625rem;margin-top:", ";margin-right:var(", ");margin-left:var(", ");background:var(", ");"], function (_ref3) {
|
25
|
+
var variant = _ref3.variant;
|
26
|
+
return "var(".concat(variant === 'tight' ? _Select.tokens.dividerMarginTopTight : _Select.tokens.dividerMarginTop, ")");
|
27
|
+
}, _Select.tokens.dividerMarginRight, _Select.tokens.dividerMarginLeft, _Select.tokens.dividerColor);
|
@@ -35,4 +35,15 @@ Object.keys(_VirtualList).forEach(function (key) {
|
|
35
35
|
return _VirtualList[key];
|
36
36
|
}
|
37
37
|
});
|
38
|
+
});
|
39
|
+
var _SelectAll = /*#__PURE__*/require("./SelectAll/SelectAll");
|
40
|
+
Object.keys(_SelectAll).forEach(function (key) {
|
41
|
+
if (key === "default" || key === "__esModule") return;
|
42
|
+
if (key in exports && exports[key] === _SelectAll[key]) return;
|
43
|
+
Object.defineProperty(exports, key, {
|
44
|
+
enumerable: true,
|
45
|
+
get: function get() {
|
46
|
+
return _SelectAll[key];
|
47
|
+
}
|
48
|
+
});
|
38
49
|
});
|