@salutejs/plasma-new-hope 0.115.0-canary.1335.10199765951.0 → 0.115.0-canary.1336.10206396549.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/Combobox.js +13 -16
- package/cjs/components/Combobox/Combobox.js.map +1 -1
- package/cjs/components/Select/Select.js +1 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/ui/Target/Target.js +3 -3
- package/cjs/components/Select/ui/Target/Target.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/cjs/components/Select/ui/Target/ui/Button/Button.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +4 -6
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/cjs/components/Sheet/Sheet.js +6 -8
- package/cjs/components/Sheet/Sheet.js.map +1 -1
- package/cjs/components/Sheet/hooks/useOverflow.js +3 -3
- package/cjs/components/Sheet/hooks/useOverflow.js.map +1 -1
- package/cjs/components/Sheet/utils/handleTransition.js.map +1 -1
- package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +1 -1
- package/emotion/cjs/components/Combobox/Combobox.js +13 -16
- package/emotion/cjs/components/Select/Select.js +1 -1
- package/emotion/cjs/components/Select/ui/Target/Target.js +3 -3
- package/emotion/cjs/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +4 -6
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +14 -14
- package/emotion/cjs/components/Sheet/Sheet.js +6 -8
- package/emotion/cjs/components/Sheet/Sheet.template-doc.mdx +6 -6
- package/emotion/cjs/components/Sheet/hooks/useOverflow.js +3 -3
- package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +5 -5
- package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +5 -5
- package/emotion/es/components/Accordion/Accordion.template-doc.mdx +1 -1
- package/emotion/es/components/Combobox/Combobox.js +13 -16
- package/emotion/es/components/Select/Select.js +1 -1
- package/emotion/es/components/Select/ui/Target/Target.js +3 -3
- package/emotion/es/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.js +4 -6
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +14 -14
- package/emotion/es/components/Sheet/Sheet.js +6 -8
- package/emotion/es/components/Sheet/Sheet.template-doc.mdx +6 -6
- package/emotion/es/components/Sheet/hooks/useOverflow.js +3 -3
- package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +1 -1
- package/emotion/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +5 -5
- package/emotion/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +5 -5
- package/es/components/Combobox/Combobox.js +13 -16
- package/es/components/Combobox/Combobox.js.map +1 -1
- package/es/components/Select/Select.js +1 -1
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/ui/Target/Target.js +3 -3
- package/es/components/Select/ui/Target/Target.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/es/components/Select/ui/Target/ui/Button/Button.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.js +4 -6
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/es/components/Sheet/Sheet.js +6 -8
- package/es/components/Sheet/Sheet.js.map +1 -1
- package/es/components/Sheet/hooks/useOverflow.js +3 -3
- package/es/components/Sheet/hooks/useOverflow.js.map +1 -1
- package/es/components/Sheet/utils/handleTransition.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Combobox/Combobox.js +13 -16
- package/styled-components/cjs/components/Select/Select.js +1 -1
- package/styled-components/cjs/components/Select/ui/Target/Target.js +3 -3
- package/styled-components/cjs/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +4 -6
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/styled-components/cjs/components/Sheet/Sheet.js +6 -8
- package/styled-components/cjs/components/Sheet/Sheet.template-doc.mdx +6 -6
- package/styled-components/cjs/components/Sheet/hooks/useOverflow.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +5 -5
- package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +5 -5
- package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +1 -1
- package/styled-components/es/components/Combobox/Combobox.js +13 -16
- package/styled-components/es/components/Select/Select.js +1 -1
- package/styled-components/es/components/Select/ui/Target/Target.js +3 -3
- package/styled-components/es/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js +4 -6
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/styled-components/es/components/Sheet/Sheet.js +6 -8
- package/styled-components/es/components/Sheet/Sheet.template-doc.mdx +6 -6
- package/styled-components/es/components/Sheet/hooks/useOverflow.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +5 -5
- package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +5 -5
- package/types/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/Combobox.types.d.ts +0 -7
- package/types/components/Combobox/Combobox.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/Target.types.d.ts +1 -2
- package/types/components/Select/ui/Target/Target.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Button/Button.types.d.ts +1 -1
- package/types/components/Select/ui/Target/ui/Button/Button.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.types.d.ts +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.types.d.ts.map +1 -1
- package/types/components/Sheet/Sheet.d.ts.map +1 -1
- package/types/components/Sheet/Sheet.types.d.ts +3 -5
- package/types/components/Sheet/Sheet.types.d.ts.map +1 -1
- package/types/components/Sheet/hooks/useOverflow.d.ts +1 -1
- package/types/components/Sheet/utils/handleTransition.d.ts +1 -1
@@ -13,7 +13,7 @@ var _Sheet = /*#__PURE__*/require("./Sheet.tokens");
|
|
13
13
|
var _Sheet2 = /*#__PURE__*/require("./Sheet.styles");
|
14
14
|
var _base = /*#__PURE__*/require("./variations/_view/base");
|
15
15
|
var _utils2 = /*#__PURE__*/require("./utils");
|
16
|
-
var _excluded = ["opened", "
|
16
|
+
var _excluded = ["opened", "children", "onClose", "hasHandle", "contentHeader", "isHeaderFixed", "contentFooter", "isFooterFixed", "withOverlay", "withBlur", "withTransition", "throttleMs", "className", "view"];
|
17
17
|
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); }
|
18
18
|
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; }
|
19
19
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -26,7 +26,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
26
26
|
var sheetRoot = exports.sheetRoot = function sheetRoot(Root) {
|
27
27
|
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, rootRef) {
|
28
28
|
var opened = _ref.opened,
|
29
|
-
isOpen = _ref.isOpen,
|
30
29
|
children = _ref.children,
|
31
30
|
onClose = _ref.onClose,
|
32
31
|
_ref$hasHandle = _ref.hasHandle,
|
@@ -47,12 +46,11 @@ var sheetRoot = exports.sheetRoot = function sheetRoot(Root) {
|
|
47
46
|
className = _ref.className,
|
48
47
|
view = _ref.view,
|
49
48
|
restProps = _objectWithoutProperties(_ref, _excluded);
|
50
|
-
var innerIsOpen = opened || isOpen;
|
51
49
|
var contentWrapperRef = (0, _react.useRef)(null);
|
52
50
|
var contentRef = (0, _react.useRef)(null);
|
53
51
|
var handleRef = (0, _react.useRef)(null);
|
54
52
|
(0, _hooks.useOverflow)({
|
55
|
-
|
53
|
+
opened: opened
|
56
54
|
});
|
57
55
|
(0, _hooks.useSheetSwipe)({
|
58
56
|
contentWrapperRef: contentWrapperRef,
|
@@ -63,15 +61,15 @@ var sheetRoot = exports.sheetRoot = function sheetRoot(Root) {
|
|
63
61
|
});
|
64
62
|
var hasHeader = Boolean(contentHeader);
|
65
63
|
var hasFooter = Boolean(contentFooter);
|
66
|
-
var closedClass =
|
64
|
+
var closedClass = opened ? undefined : "".concat(_Sheet.classes.closed);
|
67
65
|
var overlayBackgroundToken = withBlur ? "var(".concat(_Sheet.tokens.sheetOverlayWithBlurColor, ")") : "var(".concat(_Sheet.tokens.sheetOverlayColor, ")");
|
68
66
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
69
|
-
|
67
|
+
opened: opened,
|
70
68
|
onClose: onClose,
|
71
69
|
view: view,
|
72
70
|
ref: rootRef
|
73
71
|
}, /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledContentWrapper, _extends({
|
74
|
-
|
72
|
+
opened: opened,
|
75
73
|
withTransition: withTransition,
|
76
74
|
className: (0, _utils.cx)(closedClass, className),
|
77
75
|
ref: contentWrapperRef
|
@@ -85,7 +83,7 @@ var sheetRoot = exports.sheetRoot = function sheetRoot(Root) {
|
|
85
83
|
isHeaderFixed: isHeaderFixed
|
86
84
|
}, contentHeader), /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledSheetBody, null, children), hasFooter && /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledSheetFooter, {
|
87
85
|
isFooterFixed: isFooterFixed
|
88
|
-
}, contentFooter))), withOverlay &&
|
86
|
+
}, contentFooter))), withOverlay && opened && /*#__PURE__*/_react["default"].createElement(_Overlay.Overlay, {
|
89
87
|
zIndex: _utils2.DEFAULT_Z_INDEX,
|
90
88
|
backgroundColorProperty: overlayBackgroundToken,
|
91
89
|
withBlur: withBlur,
|
@@ -26,7 +26,7 @@ export function App() {
|
|
26
26
|
<>
|
27
27
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
28
28
|
|
29
|
-
<Sheet
|
29
|
+
<Sheet opened={opened}
|
30
30
|
onClose={() => setOpened(false)}
|
31
31
|
contentHeader={
|
32
32
|
<div>
|
@@ -50,7 +50,7 @@ export function App() {
|
|
50
50
|
|
51
51
|
### Закрепление заголовка и футера
|
52
52
|
|
53
|
-
С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
|
53
|
+
С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
|
54
54
|
В этом случае при появлении прокрутки контент будет скроллиться под них.
|
55
55
|
|
56
56
|
```tsx live
|
@@ -64,7 +64,7 @@ export function App() {
|
|
64
64
|
return (
|
65
65
|
<>
|
66
66
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
67
|
-
<Sheet
|
67
|
+
<Sheet opened={opened}
|
68
68
|
onClose={() => setOpened(false)}
|
69
69
|
contentHeader={
|
70
70
|
<div>
|
@@ -105,7 +105,7 @@ export function App() {
|
|
105
105
|
<Button onClick={() => setOpened(!opened)}>
|
106
106
|
{opened ? 'Закрыть' : 'Открыть'}
|
107
107
|
</Button>
|
108
|
-
<Sheet
|
108
|
+
<Sheet opened={opened}
|
109
109
|
onClose={() => setOpened(false)}
|
110
110
|
withOverlay={false}
|
111
111
|
>
|
@@ -131,7 +131,7 @@ export function App() {
|
|
131
131
|
<Button onClick={() => setOpened(!opened)}>
|
132
132
|
{opened ? 'Закрыть' : 'Открыть'}
|
133
133
|
</Button>
|
134
|
-
<Sheet
|
134
|
+
<Sheet opened={opened}
|
135
135
|
onClose={() => setOpened(false)}
|
136
136
|
withBlur
|
137
137
|
>
|
@@ -140,4 +140,4 @@ export function App() {
|
|
140
140
|
</>
|
141
141
|
);
|
142
142
|
}
|
143
|
-
```
|
143
|
+
```
|
@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.useOverflow = void 0;
|
7
7
|
var _react = /*#__PURE__*/require("react");
|
8
8
|
var useOverflow = exports.useOverflow = function useOverflow(_ref) {
|
9
|
-
var
|
9
|
+
var opened = _ref.opened;
|
10
10
|
var overflow = (0, _react.useRef)(document.body.style.overflowY);
|
11
11
|
|
12
12
|
// linaria не поддерживает динамический global
|
13
13
|
(0, _react.useEffect)(function () {
|
14
|
-
if (
|
14
|
+
if (opened) {
|
15
15
|
overflow.current = document.body.style.overflowY;
|
16
16
|
document.body.style.overflowY = 'hidden';
|
17
17
|
return;
|
18
18
|
}
|
19
19
|
document.body.style.overflowY = overflow.current;
|
20
|
-
}, [
|
20
|
+
}, [opened]);
|
21
21
|
};
|
@@ -49,7 +49,7 @@ const StoryDefault = ({
|
|
49
49
|
<>
|
50
50
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
51
51
|
<Sheet
|
52
|
-
|
52
|
+
opened={opened}
|
53
53
|
withOverlay={withOverlay}
|
54
54
|
withTransition={withTransition}
|
55
55
|
onClose={() => setOpened(false)}
|
@@ -92,7 +92,7 @@ const StoryWithoutOverlay = () => {
|
|
92
92
|
return (
|
93
93
|
<>
|
94
94
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
95
|
-
<Sheet
|
95
|
+
<Sheet opened={opened} withOverlay={false} onClose={() => setOpened(false)}>
|
96
96
|
<StyledBody>
|
97
97
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
|
98
98
|
consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
|
@@ -125,7 +125,7 @@ const StoryWithScroll = ({
|
|
125
125
|
<>
|
126
126
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
127
127
|
<Sheet
|
128
|
-
|
128
|
+
opened={opened}
|
129
129
|
withOverlay={withOverlay}
|
130
130
|
withTransition={withTransition}
|
131
131
|
onClose={() => setOpened(false)}
|
@@ -195,7 +195,7 @@ const StoryWithInsideScroll = ({
|
|
195
195
|
<>
|
196
196
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
197
197
|
<Sheet
|
198
|
-
|
198
|
+
opened={opened}
|
199
199
|
withOverlay={withOverlay}
|
200
200
|
withTransition={withTransition}
|
201
201
|
onClose={() => setOpened(false)}
|
@@ -267,7 +267,7 @@ const StoryWithDoubleScroll = ({
|
|
267
267
|
<>
|
268
268
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
269
269
|
<Sheet
|
270
|
-
|
270
|
+
opened={opened}
|
271
271
|
withOverlay={withOverlay}
|
272
272
|
withTransition={withTransition}
|
273
273
|
onClose={() => setOpened(false)}
|
@@ -49,7 +49,7 @@ const StoryDefault = ({
|
|
49
49
|
<>
|
50
50
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
51
51
|
<Sheet
|
52
|
-
|
52
|
+
opened={opened}
|
53
53
|
withOverlay={withOverlay}
|
54
54
|
withTransition={withTransition}
|
55
55
|
onClose={() => setOpened(false)}
|
@@ -92,7 +92,7 @@ const StoryWithoutOverlay = () => {
|
|
92
92
|
return (
|
93
93
|
<>
|
94
94
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
95
|
-
<Sheet
|
95
|
+
<Sheet opened={opened} withOverlay={false} onClose={() => setOpened(false)}>
|
96
96
|
<StyledBody>
|
97
97
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
|
98
98
|
consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
|
@@ -125,7 +125,7 @@ const StoryWithScroll = ({
|
|
125
125
|
<>
|
126
126
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
127
127
|
<Sheet
|
128
|
-
|
128
|
+
opened={opened}
|
129
129
|
withOverlay={withOverlay}
|
130
130
|
withTransition={withTransition}
|
131
131
|
onClose={() => setOpened(false)}
|
@@ -195,7 +195,7 @@ const StoryWithInsideScroll = ({
|
|
195
195
|
<>
|
196
196
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
197
197
|
<Sheet
|
198
|
-
|
198
|
+
opened={opened}
|
199
199
|
withOverlay={withOverlay}
|
200
200
|
withTransition={withTransition}
|
201
201
|
onClose={() => setOpened(false)}
|
@@ -267,7 +267,7 @@ const StoryWithDoubleScroll = ({
|
|
267
267
|
<>
|
268
268
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
269
269
|
<Sheet
|
270
|
-
|
270
|
+
opened={opened}
|
271
271
|
withOverlay={withOverlay}
|
272
272
|
withTransition={withTransition}
|
273
273
|
onClose={() => setOpened(false)}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["name", "form", "readOnly", "disabled", "label", "placeholder", "id", "children", "role", "view", "size", "frame", "usePortal", "negativeResultContent", "enumerationType", "opened", "
|
1
|
+
var _excluded = ["name", "form", "readOnly", "disabled", "label", "placeholder", "id", "children", "role", "view", "size", "frame", "usePortal", "negativeResultContent", "enumerationType", "opened", "placement", "onToggle", "onKeyDown", "filterFunction"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -43,15 +43,12 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
43
43
|
enumerationType = _ref$enumerationType === void 0 ? 'comma' : _ref$enumerationType,
|
44
44
|
_ref$opened = _ref.opened,
|
45
45
|
opened = _ref$opened === void 0 ? false : _ref$opened,
|
46
|
-
_ref$isOpen = _ref.isOpen,
|
47
|
-
isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
|
48
46
|
_ref$placement = _ref.placement,
|
49
47
|
placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
|
50
48
|
onToggle = _ref.onToggle,
|
51
49
|
onKeyDown = _ref.onKeyDown,
|
52
50
|
filterFunction = _ref.filterFunction,
|
53
51
|
rest = _objectWithoutProperties(_ref, _excluded);
|
54
|
-
var innerIsOpen = opened || isOpen;
|
55
52
|
var forceUpdate = useForceUpdate();
|
56
53
|
var uniqId = safeUseId();
|
57
54
|
var innerId = id || uniqId;
|
@@ -76,10 +73,10 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
76
73
|
itemsRefs: itemsRefs,
|
77
74
|
inputRef: inputRef
|
78
75
|
};
|
79
|
-
var _useState3 = useState(
|
76
|
+
var _useState3 = useState(opened),
|
80
77
|
_useState4 = _slicedToArray(_useState3, 2),
|
81
|
-
|
82
|
-
|
78
|
+
innerOpened = _useState4[0],
|
79
|
+
setInnerOpened = _useState4[1];
|
83
80
|
var _useState5 = useState(''),
|
84
81
|
_useState6 = _slicedToArray(_useState5, 2),
|
85
82
|
search = _useState6[0],
|
@@ -102,11 +99,11 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
102
99
|
if (disabled || readOnly) {
|
103
100
|
return;
|
104
101
|
}
|
105
|
-
|
106
|
-
}, [
|
102
|
+
setInnerOpened(opened);
|
103
|
+
}, [opened, disabled, readOnly]);
|
107
104
|
useEffect(function () {
|
108
105
|
// INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
|
109
|
-
if (
|
106
|
+
if (opened) {
|
110
107
|
setFilterValue('');
|
111
108
|
}
|
112
109
|
}, []);
|
@@ -116,14 +113,14 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
116
113
|
}
|
117
114
|
|
118
115
|
// INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
|
119
|
-
if (!
|
116
|
+
if (!innerOpened) {
|
120
117
|
setFilterValue('');
|
121
118
|
}
|
122
119
|
if (onToggle) {
|
123
120
|
onToggle(openValue, event);
|
124
121
|
return;
|
125
122
|
}
|
126
|
-
|
123
|
+
setInnerOpened(openValue);
|
127
124
|
};
|
128
125
|
var closedWithoutChanges = useRef(true);
|
129
126
|
var updateValue = function updateValue(item, event) {
|
@@ -155,7 +152,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
155
152
|
};
|
156
153
|
var _useKeyNavigation = useKeyNavigation({
|
157
154
|
controlledRefs: controlledRefs,
|
158
|
-
opened:
|
155
|
+
opened: innerOpened,
|
159
156
|
enumerationType: enumerationType,
|
160
157
|
valueType: valueType,
|
161
158
|
componentType: 'combobox',
|
@@ -175,7 +172,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
175
172
|
var onSearch = function onSearch(newSearch, newOpened) {
|
176
173
|
setSearch(newSearch);
|
177
174
|
setFilterValue(newSearch);
|
178
|
-
|
175
|
+
setInnerOpened(newOpened !== null && newOpened !== void 0 ? newOpened : true);
|
179
176
|
};
|
180
177
|
var onKeyDownHandle = function onKeyDownHandle(event) {
|
181
178
|
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
|
@@ -194,10 +191,10 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
194
191
|
disabled: disabled || readOnly
|
195
192
|
}), /*#__PURE__*/React.createElement(StyledPopover, {
|
196
193
|
role: role,
|
197
|
-
isOpen:
|
194
|
+
isOpen: innerOpened,
|
198
195
|
onToggle: onInnerToggle,
|
199
196
|
target: /*#__PURE__*/React.createElement(ComboboxTarget, _extends({
|
200
|
-
opened:
|
197
|
+
opened: innerOpened,
|
201
198
|
values: values,
|
202
199
|
label: label,
|
203
200
|
placeholder: placeholder,
|
@@ -243,7 +243,7 @@ export var selectRoot = function selectRoot(Root) {
|
|
243
243
|
onToggle: handleToggle,
|
244
244
|
trigger: "click",
|
245
245
|
target: /*#__PURE__*/React.createElement(Target, {
|
246
|
-
|
246
|
+
opened: isCurrentListOpen,
|
247
247
|
target: target,
|
248
248
|
value: value,
|
249
249
|
isTargetAmount: isTargetAmount,
|
@@ -5,7 +5,7 @@ export var Target = function Target(_ref) {
|
|
5
5
|
multiselect = _ref.multiselect,
|
6
6
|
isTargetAmount = _ref.isTargetAmount,
|
7
7
|
target = _ref.target,
|
8
|
-
|
8
|
+
opened = _ref.opened,
|
9
9
|
valueToItemMap = _ref.valueToItemMap,
|
10
10
|
onChipClick = _ref.onChipClick,
|
11
11
|
label = _ref.label,
|
@@ -20,7 +20,7 @@ export var Target = function Target(_ref) {
|
|
20
20
|
focusedPath = _ref.focusedPath,
|
21
21
|
focusedToValueMap = _ref.focusedToValueMap;
|
22
22
|
return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
|
23
|
-
|
23
|
+
opened: opened,
|
24
24
|
value: value,
|
25
25
|
isTargetAmount: isTargetAmount,
|
26
26
|
multiselect: multiselect,
|
@@ -33,7 +33,7 @@ export var Target = function Target(_ref) {
|
|
33
33
|
focusedPath: focusedPath,
|
34
34
|
focusedToValueMap: focusedToValueMap
|
35
35
|
}) : /*#__PURE__*/React.createElement(Textfield, {
|
36
|
-
|
36
|
+
opened: opened,
|
37
37
|
value: value,
|
38
38
|
isTargetAmount: isTargetAmount,
|
39
39
|
multiselect: multiselect,
|
@@ -4,7 +4,7 @@ import { classes } from '../../../../Select.tokens';
|
|
4
4
|
import { getButtonLabel, sizeToIconSize } from '../../../../utils';
|
5
5
|
import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
|
6
6
|
export var Button = function Button(_ref) {
|
7
|
-
var
|
7
|
+
var opened = _ref.opened,
|
8
8
|
value = _ref.value,
|
9
9
|
isTargetAmount = _ref.isTargetAmount,
|
10
10
|
multiselect = _ref.multiselect,
|
@@ -16,7 +16,7 @@ export var Button = function Button(_ref) {
|
|
16
16
|
renderValue = _ref.renderValue,
|
17
17
|
focusedPath = _ref.focusedPath,
|
18
18
|
focusedToValueMap = _ref.focusedToValueMap;
|
19
|
-
var withArrowInverse =
|
19
|
+
var withArrowInverse = opened ? classes.arrowInverse : undefined;
|
20
20
|
var getActiveDescendant = function getActiveDescendant() {
|
21
21
|
var _focusedToValueMap$ge;
|
22
22
|
var focusedPathAsString = focusedPath.reduce(function (acc, n) {
|
@@ -27,7 +27,7 @@ export var Button = function Button(_ref) {
|
|
27
27
|
return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(StyledButton, {
|
28
28
|
stretching: "filled",
|
29
29
|
onKeyDown: onKeyDown,
|
30
|
-
className:
|
30
|
+
className: opened ? classes.selectWithoutBoxShadow : undefined,
|
31
31
|
disabled: disabled,
|
32
32
|
contentRight: /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
|
33
33
|
size: sizeToIconSize(size),
|
@@ -36,7 +36,7 @@ export var Button = function Button(_ref) {
|
|
36
36
|
})),
|
37
37
|
role: "combobox",
|
38
38
|
"aria-controls": "tree_level_1",
|
39
|
-
"aria-expanded":
|
39
|
+
"aria-expanded": opened,
|
40
40
|
"aria-activedescendant": getActiveDescendant(),
|
41
41
|
"aria-label": label
|
42
42
|
}, /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
|
@@ -48,7 +48,6 @@ var getLabel = function getLabel(_ref) {
|
|
48
48
|
};
|
49
49
|
export var Textfield = function Textfield(_ref2) {
|
50
50
|
var opened = _ref2.opened,
|
51
|
-
isOpen = _ref2.isOpen,
|
52
51
|
value = _ref2.value,
|
53
52
|
isTargetAmount = _ref2.isTargetAmount,
|
54
53
|
multiselect = _ref2.multiselect,
|
@@ -65,8 +64,7 @@ export var Textfield = function Textfield(_ref2) {
|
|
65
64
|
renderValue = _ref2.renderValue,
|
66
65
|
focusedPath = _ref2.focusedPath,
|
67
66
|
focusedToValueMap = _ref2.focusedToValueMap;
|
68
|
-
var
|
69
|
-
var withArrowInverse = innerIsOpen ? classes.arrowInverse : undefined;
|
67
|
+
var withArrowInverse = opened ? classes.arrowInverse : undefined;
|
70
68
|
var getActiveDescendant = function getActiveDescendant() {
|
71
69
|
var _focusedToValueMap$ge;
|
72
70
|
var focusedPathAsString = focusedPath.reduce(function (acc, n) {
|
@@ -75,16 +73,16 @@ export var Textfield = function Textfield(_ref2) {
|
|
75
73
|
return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
|
76
74
|
};
|
77
75
|
return /*#__PURE__*/React.createElement(TextfieldWrapper, {
|
78
|
-
|
76
|
+
opened: opened,
|
79
77
|
value: value
|
80
78
|
}, /*#__PURE__*/React.createElement(StyledButton, {
|
81
79
|
stretching: "filled",
|
82
|
-
className: cx(classes.textfieldTarget,
|
80
|
+
className: cx(classes.textfieldTarget, opened || focusedChipIndex !== null ? classes.selectWithoutBoxShadow : undefined),
|
83
81
|
onKeyDown: onKeyDown,
|
84
82
|
disabled: disabled,
|
85
83
|
role: "combobox",
|
86
84
|
"aria-controls": "tree_level_1",
|
87
|
-
"aria-expanded":
|
85
|
+
"aria-expanded": opened,
|
88
86
|
"aria-activedescendant": getActiveDescendant(),
|
89
87
|
"aria-label": label
|
90
88
|
}, /*#__PURE__*/React.createElement(Wrapper, null, contentLeft && (!multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, null, getLabel({
|
@@ -10,8 +10,8 @@ var Button = /*#__PURE__*/component(mergedButtonConfig);
|
|
10
10
|
export var TextfieldWrapper = /*#__PURE__*/styled.div.withConfig({
|
11
11
|
componentId: "plasma-new-hope__sc-1akl2tk-0"
|
12
12
|
})(["display:inline;.", "{background:", ";padding:", ";}.", "::before{box-shadow:none !important;}"], classes.textfieldTarget, function (_ref) {
|
13
|
-
var
|
14
|
-
return
|
13
|
+
var opened = _ref.opened;
|
14
|
+
return opened ? "var(".concat(tokens.targetTextfieldBackgroundColorOpened, ")") : "var(".concat(tokens.targetTextfieldBackgroundColor, ")");
|
15
15
|
}, function (_ref2) {
|
16
16
|
var value = _ref2.value;
|
17
17
|
return Array.isArray(value) && !isEmpty(value) ? "0 var(".concat(tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(tokens.targetTextfieldPadding, ")");
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["opened", "
|
1
|
+
var _excluded = ["opened", "children", "onClose", "hasHandle", "contentHeader", "isHeaderFixed", "contentFooter", "isFooterFixed", "withOverlay", "withBlur", "withTransition", "throttleMs", "className", "view"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
@@ -18,7 +18,6 @@ import { DEFAULT_Z_INDEX } from './utils';
|
|
18
18
|
export var sheetRoot = function sheetRoot(Root) {
|
19
19
|
return /*#__PURE__*/forwardRef(function (_ref, rootRef) {
|
20
20
|
var opened = _ref.opened,
|
21
|
-
isOpen = _ref.isOpen,
|
22
21
|
children = _ref.children,
|
23
22
|
onClose = _ref.onClose,
|
24
23
|
_ref$hasHandle = _ref.hasHandle,
|
@@ -39,12 +38,11 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
39
38
|
className = _ref.className,
|
40
39
|
view = _ref.view,
|
41
40
|
restProps = _objectWithoutProperties(_ref, _excluded);
|
42
|
-
var innerIsOpen = opened || isOpen;
|
43
41
|
var contentWrapperRef = useRef(null);
|
44
42
|
var contentRef = useRef(null);
|
45
43
|
var handleRef = useRef(null);
|
46
44
|
useOverflow({
|
47
|
-
|
45
|
+
opened: opened
|
48
46
|
});
|
49
47
|
useSheetSwipe({
|
50
48
|
contentWrapperRef: contentWrapperRef,
|
@@ -55,15 +53,15 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
55
53
|
});
|
56
54
|
var hasHeader = Boolean(contentHeader);
|
57
55
|
var hasFooter = Boolean(contentFooter);
|
58
|
-
var closedClass =
|
56
|
+
var closedClass = opened ? undefined : "".concat(classes.closed);
|
59
57
|
var overlayBackgroundToken = withBlur ? "var(".concat(tokens.sheetOverlayWithBlurColor, ")") : "var(".concat(tokens.sheetOverlayColor, ")");
|
60
58
|
return /*#__PURE__*/React.createElement(Root, {
|
61
|
-
|
59
|
+
opened: opened,
|
62
60
|
onClose: onClose,
|
63
61
|
view: view,
|
64
62
|
ref: rootRef
|
65
63
|
}, /*#__PURE__*/React.createElement(StyledContentWrapper, _extends({
|
66
|
-
|
64
|
+
opened: opened,
|
67
65
|
withTransition: withTransition,
|
68
66
|
className: cx(closedClass, className),
|
69
67
|
ref: contentWrapperRef
|
@@ -77,7 +75,7 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
77
75
|
isHeaderFixed: isHeaderFixed
|
78
76
|
}, contentHeader), /*#__PURE__*/React.createElement(StyledSheetBody, null, children), hasFooter && /*#__PURE__*/React.createElement(StyledSheetFooter, {
|
79
77
|
isFooterFixed: isFooterFixed
|
80
|
-
}, contentFooter))), withOverlay &&
|
78
|
+
}, contentFooter))), withOverlay && opened && /*#__PURE__*/React.createElement(Overlay, {
|
81
79
|
zIndex: DEFAULT_Z_INDEX,
|
82
80
|
backgroundColorProperty: overlayBackgroundToken,
|
83
81
|
withBlur: withBlur,
|
@@ -26,7 +26,7 @@ export function App() {
|
|
26
26
|
<>
|
27
27
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
28
28
|
|
29
|
-
<Sheet
|
29
|
+
<Sheet opened={opened}
|
30
30
|
onClose={() => setOpened(false)}
|
31
31
|
contentHeader={
|
32
32
|
<div>
|
@@ -50,7 +50,7 @@ export function App() {
|
|
50
50
|
|
51
51
|
### Закрепление заголовка и футера
|
52
52
|
|
53
|
-
С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
|
53
|
+
С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
|
54
54
|
В этом случае при появлении прокрутки контент будет скроллиться под них.
|
55
55
|
|
56
56
|
```tsx live
|
@@ -64,7 +64,7 @@ export function App() {
|
|
64
64
|
return (
|
65
65
|
<>
|
66
66
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
67
|
-
<Sheet
|
67
|
+
<Sheet opened={opened}
|
68
68
|
onClose={() => setOpened(false)}
|
69
69
|
contentHeader={
|
70
70
|
<div>
|
@@ -105,7 +105,7 @@ export function App() {
|
|
105
105
|
<Button onClick={() => setOpened(!opened)}>
|
106
106
|
{opened ? 'Закрыть' : 'Открыть'}
|
107
107
|
</Button>
|
108
|
-
<Sheet
|
108
|
+
<Sheet opened={opened}
|
109
109
|
onClose={() => setOpened(false)}
|
110
110
|
withOverlay={false}
|
111
111
|
>
|
@@ -131,7 +131,7 @@ export function App() {
|
|
131
131
|
<Button onClick={() => setOpened(!opened)}>
|
132
132
|
{opened ? 'Закрыть' : 'Открыть'}
|
133
133
|
</Button>
|
134
|
-
<Sheet
|
134
|
+
<Sheet opened={opened}
|
135
135
|
onClose={() => setOpened(false)}
|
136
136
|
withBlur
|
137
137
|
>
|
@@ -140,4 +140,4 @@ export function App() {
|
|
140
140
|
</>
|
141
141
|
);
|
142
142
|
}
|
143
|
-
```
|
143
|
+
```
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
2
2
|
export var useOverflow = function useOverflow(_ref) {
|
3
|
-
var
|
3
|
+
var opened = _ref.opened;
|
4
4
|
var overflow = useRef(document.body.style.overflowY);
|
5
5
|
|
6
6
|
// linaria не поддерживает динамический global
|
7
7
|
useEffect(function () {
|
8
|
-
if (
|
8
|
+
if (opened) {
|
9
9
|
overflow.current = document.body.style.overflowY;
|
10
10
|
document.body.style.overflowY = 'hidden';
|
11
11
|
return;
|
12
12
|
}
|
13
13
|
document.body.style.overflowY = overflow.current;
|
14
|
-
}, [
|
14
|
+
}, [opened]);
|
15
15
|
};
|