@salutejs/plasma-new-hope 0.89.0-canary.1247.9544729230.0 → 0.89.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (117) hide show
  1. package/cjs/components/Sheet/Sheet.css +8 -0
  2. package/cjs/components/Sheet/Sheet.js +108 -0
  3. package/cjs/components/Sheet/Sheet.js.map +1 -0
  4. package/cjs/components/Sheet/Sheet.styles.js +115 -0
  5. package/cjs/components/Sheet/Sheet.styles.js.map +1 -0
  6. package/cjs/components/Sheet/Sheet.styles_o73i75.css +6 -0
  7. package/cjs/components/Sheet/Sheet.tokens.js +17 -0
  8. package/cjs/components/Sheet/Sheet.tokens.js.map +1 -0
  9. package/cjs/components/Sheet/hooks/useOverflow.js +23 -0
  10. package/cjs/components/Sheet/hooks/useOverflow.js.map +1 -0
  11. package/cjs/components/Sheet/hooks/useSheetSwipe.js +98 -0
  12. package/cjs/components/Sheet/hooks/useSheetSwipe.js.map +1 -0
  13. package/cjs/components/Sheet/utils/handleTransition.js +13 -0
  14. package/cjs/components/Sheet/utils/handleTransition.js.map +1 -0
  15. package/cjs/components/Sheet/utils/index.js +8 -0
  16. package/cjs/components/Sheet/utils/index.js.map +1 -0
  17. package/cjs/components/Sheet/variations/_view/base.js +9 -0
  18. package/cjs/components/Sheet/variations/_view/base.js.map +1 -0
  19. package/cjs/components/Sheet/variations/_view/base_x642ct.css +1 -0
  20. package/cjs/index.css +7 -0
  21. package/cjs/index.js +6 -0
  22. package/cjs/index.js.map +1 -1
  23. package/es/components/Sheet/Sheet.css +8 -0
  24. package/es/components/Sheet/Sheet.js +103 -0
  25. package/es/components/Sheet/Sheet.js.map +1 -0
  26. package/es/components/Sheet/Sheet.styles.js +106 -0
  27. package/es/components/Sheet/Sheet.styles.js.map +1 -0
  28. package/es/components/Sheet/Sheet.styles_o73i75.css +6 -0
  29. package/es/components/Sheet/Sheet.tokens.js +12 -0
  30. package/es/components/Sheet/Sheet.tokens.js.map +1 -0
  31. package/es/components/Sheet/hooks/useOverflow.js +19 -0
  32. package/es/components/Sheet/hooks/useOverflow.js.map +1 -0
  33. package/es/components/Sheet/hooks/useSheetSwipe.js +94 -0
  34. package/es/components/Sheet/hooks/useSheetSwipe.js.map +1 -0
  35. package/es/components/Sheet/utils/handleTransition.js +9 -0
  36. package/es/components/Sheet/utils/handleTransition.js.map +1 -0
  37. package/es/components/Sheet/utils/index.js +4 -0
  38. package/es/components/Sheet/utils/index.js.map +1 -0
  39. package/es/components/Sheet/variations/_view/base.js +5 -0
  40. package/es/components/Sheet/variations/_view/base.js.map +1 -0
  41. package/es/components/Sheet/variations/_view/base_x642ct.css +1 -0
  42. package/es/index.css +7 -0
  43. package/es/index.js +2 -0
  44. package/es/index.js.map +1 -1
  45. package/package.json +4 -2
  46. package/styled-components/cjs/components/Sheet/Sheet.js +108 -0
  47. package/styled-components/cjs/components/Sheet/Sheet.styles.js +52 -0
  48. package/styled-components/cjs/components/Sheet/Sheet.template-doc.mdx +143 -0
  49. package/styled-components/cjs/components/Sheet/Sheet.tokens.js +15 -0
  50. package/styled-components/cjs/components/Sheet/Sheet.types.js +5 -0
  51. package/styled-components/cjs/components/Sheet/hooks/index.js +19 -0
  52. package/styled-components/cjs/components/Sheet/hooks/useOverflow.js +21 -0
  53. package/styled-components/cjs/components/Sheet/hooks/useSheetSwipe.js +102 -0
  54. package/styled-components/cjs/components/Sheet/index.js +31 -0
  55. package/styled-components/cjs/components/Sheet/utils/handleTransition.js +12 -0
  56. package/styled-components/cjs/components/Sheet/utils/index.js +14 -0
  57. package/styled-components/cjs/components/Sheet/variations/_view/base.js +8 -0
  58. package/styled-components/cjs/components/Sheet/variations/_view/tokens.json +6 -0
  59. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.config.js +18 -0
  60. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.js +17 -0
  61. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +341 -0
  62. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.config.js +18 -0
  63. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.js +17 -0
  64. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +341 -0
  65. package/styled-components/cjs/index.js +11 -0
  66. package/styled-components/es/components/Sheet/Sheet.js +100 -0
  67. package/styled-components/es/components/Sheet/Sheet.styles.js +45 -0
  68. package/styled-components/es/components/Sheet/Sheet.template-doc.mdx +143 -0
  69. package/styled-components/es/components/Sheet/Sheet.tokens.js +9 -0
  70. package/styled-components/es/components/Sheet/Sheet.types.js +1 -0
  71. package/styled-components/es/components/Sheet/hooks/index.js +2 -0
  72. package/styled-components/es/components/Sheet/hooks/useOverflow.js +15 -0
  73. package/styled-components/es/components/Sheet/hooks/useSheetSwipe.js +95 -0
  74. package/styled-components/es/components/Sheet/index.js +2 -0
  75. package/styled-components/es/components/Sheet/utils/handleTransition.js +6 -0
  76. package/styled-components/es/components/Sheet/utils/index.js +2 -0
  77. package/styled-components/es/components/Sheet/variations/_view/base.js +2 -0
  78. package/styled-components/es/components/Sheet/variations/_view/tokens.json +6 -0
  79. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.config.js +12 -0
  80. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.js +6 -0
  81. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +341 -0
  82. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.config.js +12 -0
  83. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.js +6 -0
  84. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +341 -0
  85. package/styled-components/es/index.js +1 -0
  86. package/types/components/Sheet/Sheet.d.ts +22 -0
  87. package/types/components/Sheet/Sheet.d.ts.map +1 -0
  88. package/types/components/Sheet/Sheet.styles.d.ts +16 -0
  89. package/types/components/Sheet/Sheet.styles.d.ts.map +1 -0
  90. package/types/components/Sheet/Sheet.tokens.d.ts +10 -0
  91. package/types/components/Sheet/Sheet.tokens.d.ts.map +1 -0
  92. package/types/components/Sheet/Sheet.types.d.ts +65 -0
  93. package/types/components/Sheet/Sheet.types.d.ts.map +1 -0
  94. package/types/components/Sheet/hooks/index.d.ts +3 -0
  95. package/types/components/Sheet/hooks/index.d.ts.map +1 -0
  96. package/types/components/Sheet/hooks/useOverflow.d.ts +3 -0
  97. package/types/components/Sheet/hooks/useOverflow.d.ts.map +1 -0
  98. package/types/components/Sheet/hooks/useSheetSwipe.d.ts +9 -0
  99. package/types/components/Sheet/hooks/useSheetSwipe.d.ts.map +1 -0
  100. package/types/components/Sheet/index.d.ts +4 -0
  101. package/types/components/Sheet/index.d.ts.map +1 -0
  102. package/types/components/Sheet/utils/handleTransition.d.ts +5 -0
  103. package/types/components/Sheet/utils/handleTransition.d.ts.map +1 -0
  104. package/types/components/Sheet/utils/index.d.ts +3 -0
  105. package/types/components/Sheet/utils/index.d.ts.map +1 -0
  106. package/types/components/Sheet/variations/_view/base.d.ts +2 -0
  107. package/types/components/Sheet/variations/_view/base.d.ts.map +1 -0
  108. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts +11 -0
  109. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts.map +1 -0
  110. package/types/examples/plasma_b2c/components/Sheet/Sheet.d.ts +8 -0
  111. package/types/examples/plasma_b2c/components/Sheet/Sheet.d.ts.map +1 -0
  112. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts +11 -0
  113. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts.map +1 -0
  114. package/types/examples/plasma_web/components/Sheet/Sheet.d.ts +8 -0
  115. package/types/examples/plasma_web/components/Sheet/Sheet.d.ts.map +1 -0
  116. package/types/index.d.ts +1 -0
  117. package/types/index.d.ts.map +1 -1
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledSheetHeader = exports.StyledSheetHandle = exports.StyledSheetFooter = exports.StyledSheetContent = exports.StyledSheetBody = exports.StyledContentWrapper = void 0;
7
+ var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
8
+ var _Sheet = /*#__PURE__*/require("./Sheet.tokens");
9
+ var _handleTransition = /*#__PURE__*/require("./utils/handleTransition");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+ var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
12
+ componentId: "plasma-new-hope__sc-1pj79gq-0"
13
+ })(["position:fixed;left:0;bottom:0;width:100%;max-height:100%;z-index:1000;opacity:1;display:flex;flex-direction:column;justify-content:flex-end;transition:", ";&.", "{opacity:0;visibility:hidden;transform:translateY(100%);}"], /*#__PURE__*/(0, _handleTransition.handleTransition)('all 0.5s 0.1s'), /*#__PURE__*/String(_Sheet.classes.closed));
14
+ var StyledSheetHandle = exports.StyledSheetHandle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
15
+ componentId: "plasma-new-hope__sc-1pj79gq-1"
16
+ })(["width:3rem;padding:1.75rem 0;margin:-1.375rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], _Sheet.tokens.handleBackgroundColor);
17
+ var StyledSheetContent = exports.StyledSheetContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
18
+ componentId: "plasma-new-hope__sc-1pj79gq-2"
19
+ })(["border-radius:1.25rem 1.25rem 0 0;background-color:var(", ");padding-left:1rem;padding-right:1rem;padding-top:", ";padding-bottom:", ";max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], _Sheet.tokens.contentBackgroundColor, function (_ref) {
20
+ var hasHeader = _ref.hasHeader;
21
+ return hasHeader ? 'unset' : '1rem';
22
+ }, function (_ref2) {
23
+ var hasFooter = _ref2.hasFooter;
24
+ return hasFooter ? 'unset' : '1rem';
25
+ });
26
+ var StyledSheetHeader = exports.StyledSheetHeader = /*#__PURE__*/_styledComponents["default"].div.withConfig({
27
+ componentId: "plasma-new-hope__sc-1pj79gq-3"
28
+ })(["width:100%;z-index:1;padding-top:1rem;position:", ";top:", ";background-color:", ";"], function (_ref3) {
29
+ var isHeaderFixed = _ref3.isHeaderFixed;
30
+ return isHeaderFixed ? 'sticky' : 'static';
31
+ }, function (_ref4) {
32
+ var isHeaderFixed = _ref4.isHeaderFixed;
33
+ return isHeaderFixed ? '0' : 'unset';
34
+ }, function (_ref5) {
35
+ var isHeaderFixed = _ref5.isHeaderFixed;
36
+ return isHeaderFixed ? "var(".concat(_Sheet.tokens.contentBackgroundColor, ")") : 'transparent';
37
+ });
38
+ var StyledSheetBody = exports.StyledSheetBody = /*#__PURE__*/_styledComponents["default"].div.withConfig({
39
+ componentId: "plasma-new-hope__sc-1pj79gq-4"
40
+ })([""]);
41
+ var StyledSheetFooter = exports.StyledSheetFooter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
42
+ componentId: "plasma-new-hope__sc-1pj79gq-5"
43
+ })(["width:100%;z-index:1;padding-bottom:1rem;position:", ";bottom:", ";background-color:", ";"], function (_ref6) {
44
+ var isFooterFixed = _ref6.isFooterFixed;
45
+ return isFooterFixed ? 'sticky' : 'static';
46
+ }, function (_ref7) {
47
+ var isFooterFixed = _ref7.isFooterFixed;
48
+ return isFooterFixed ? '0' : 'unset';
49
+ }, function (_ref8) {
50
+ var isFooterFixed = _ref8.isFooterFixed;
51
+ return isFooterFixed ? "var(".concat(_Sheet.tokens.contentBackgroundColor, ")") : 'transparent';
52
+ });
@@ -0,0 +1,143 @@
1
+ ---
2
+ id: sheet
3
+ title: Sheet
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Sheet
9
+ <Description name="Sheet" />
10
+ <PropsTable name="Sheet" />
11
+
12
+ ## Использование
13
+ Компонент `Sheet` может содержать любой контент напрямую через `children`.
14
+
15
+ Также есть возможность добавить любой контент в заголовок и футер с помощью свойств `contentHeader` и `contentFooter`.
16
+
17
+ ```tsx live
18
+ import React, { useState } from 'react';
19
+ import { Sheet } from '@salutejs/{{ package }}';
20
+ import { Button } from '@salutejs/{{ package }}';
21
+
22
+ export function App() {
23
+ const [opened, setOpened] = useState(false);
24
+
25
+ return (
26
+ <>
27
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
28
+
29
+ <Sheet opened={opened}
30
+ onClose={() => setOpened(false)}
31
+ contentHeader={
32
+ <div>
33
+ <h4>header</h4>
34
+ </div>
35
+ }
36
+ contentFooter={
37
+ <div>
38
+ <p>footer</p>
39
+ </div>
40
+ }
41
+ >
42
+ <div style=\{{ 'padding-bottom': '300px' }}>body</div>
43
+ </Sheet>
44
+ </>
45
+ );
46
+ }
47
+ ```
48
+
49
+ ## Примеры
50
+
51
+ ### Закрепление заголовка и футера
52
+
53
+ С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
54
+ В этом случае при появлении прокрутки контент будет скроллиться под них.
55
+
56
+ ```tsx live
57
+ import React, { useState } from 'react';
58
+ import { Sheet } from '@salutejs/{{ package }}';
59
+ import { Button } from '@salutejs/{{ package }}';
60
+
61
+ export function App() {
62
+ const [opened, setOpened] = useState(false);
63
+
64
+ return (
65
+ <>
66
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
67
+ <Sheet opened={opened}
68
+ onClose={() => setOpened(false)}
69
+ contentHeader={
70
+ <div>
71
+ <h4>header</h4>
72
+ </div>
73
+ }
74
+ contentFooter={
75
+ <div>
76
+ <p>footer</p>
77
+ </div>
78
+ }
79
+ isFooterFixed
80
+ isHeaderFixed
81
+ >
82
+ <div style=\{{ 'padding-bottom': '300px' }}>body</div>
83
+ </Sheet>
84
+ </>
85
+ );
86
+ }
87
+ ```
88
+
89
+ ### Подложка
90
+
91
+ Наличие или отсутствие подложки задается с помощью свойства `withOverlay`.
92
+
93
+ В случае, когда подложка отсутствует, у пользователя появляется возможность взаимодействовать с контентом вне шторки.
94
+
95
+ ```tsx live
96
+ import React, { useState } from 'react';
97
+ import { Sheet } from '@salutejs/{{ package }}';
98
+ import { Button } from '@salutejs/{{ package }}';
99
+
100
+ export function App() {
101
+ const [opened, setOpened] = useState(false);
102
+
103
+ return (
104
+ <>
105
+ <Button onClick={() => setOpened(!opened)}>
106
+ {opened ? 'Закрыть' : 'Открыть'}
107
+ </Button>
108
+ <Sheet opened={opened}
109
+ onClose={() => setOpened(false)}
110
+ withOverlay={false}
111
+ >
112
+ <div style=\{{ 'padding-bottom': '300px' }}>body</div>
113
+ </Sheet>
114
+ </>
115
+ );
116
+ }
117
+ ```
118
+
119
+ К подложке можно добавить эффект размытия при помощи свойства `withBlur`.
120
+
121
+ ```tsx live
122
+ import React, { useState } from 'react';
123
+ import { Sheet } from '@salutejs/{{ package }}';
124
+ import { Button } from '@salutejs/{{ package }}';
125
+
126
+ export function App() {
127
+ const [opened, setOpened] = useState(false);
128
+
129
+ return (
130
+ <>
131
+ <Button onClick={() => setOpened(!opened)}>
132
+ {opened ? 'Закрыть' : 'Открыть'}
133
+ </Button>
134
+ <Sheet opened={opened}
135
+ onClose={() => setOpened(false)}
136
+ withBlur
137
+ >
138
+ <div style=\{{ 'padding-bottom': '300px' }}>body</div>
139
+ </Sheet>
140
+ </>
141
+ );
142
+ }
143
+ ```
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.tokens = exports.classes = void 0;
7
+ var classes = exports.classes = {
8
+ closed: 'closed'
9
+ };
10
+ var tokens = exports.tokens = {
11
+ sheetOverlayColor: '--plasma-sheet-overlay-color',
12
+ sheetOverlayWithBlurColor: '--plasma-sheet-overlay-with-blur-color',
13
+ contentBackgroundColor: '--plasma-sheet-content-background-color',
14
+ handleBackgroundColor: '--plasma-sheet-handle-background-color'
15
+ };
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "useOverflow", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _useOverflow.useOverflow;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "useSheetSwipe", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _useSheetSwipe.useSheetSwipe;
16
+ }
17
+ });
18
+ var _useSheetSwipe = /*#__PURE__*/require("./useSheetSwipe");
19
+ var _useOverflow = /*#__PURE__*/require("./useOverflow");
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useOverflow = void 0;
7
+ var _react = /*#__PURE__*/require("react");
8
+ var useOverflow = exports.useOverflow = function useOverflow(_ref) {
9
+ var opened = _ref.opened;
10
+ var overflow = (0, _react.useRef)(document.body.style.overflowY);
11
+
12
+ // linaria не поддерживает динамический global
13
+ (0, _react.useEffect)(function () {
14
+ if (opened) {
15
+ overflow.current = document.body.style.overflowY;
16
+ document.body.style.overflowY = 'hidden';
17
+ return;
18
+ }
19
+ document.body.style.overflowY = overflow.current;
20
+ }, [opened]);
21
+ };
@@ -0,0 +1,102 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useSheetSwipe = void 0;
7
+ var _lodash = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("lodash.throttle"));
8
+ var _react = /*#__PURE__*/require("react");
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
11
+ 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."); }
12
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
13
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
14
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
15
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
16
+ var SWIPE_THRESHOLD = 0.2;
17
+ var THROTTLE_DEFAULT_MS = 0;
18
+ var isScrollable = function isScrollable(element) {
19
+ if (!element) {
20
+ return false;
21
+ }
22
+ var style = getComputedStyle(element);
23
+ return style.overflow === 'scroll' || style.overflow === 'auto' || style.overflowY === 'scroll' || style.overflowY === 'auto';
24
+ };
25
+ var useSheetSwipe = exports.useSheetSwipe = function useSheetSwipe(args) {
26
+ var contentWrapperRef = args.contentWrapperRef,
27
+ contentRef = args.contentRef,
28
+ handleRef = args.handleRef,
29
+ onClose = args.onClose,
30
+ _args$throttleMs = args.throttleMs,
31
+ throttleMs = _args$throttleMs === void 0 ? THROTTLE_DEFAULT_MS : _args$throttleMs;
32
+ var _useState = (0, _react.useState)(true),
33
+ _useState2 = _slicedToArray(_useState, 2),
34
+ isTopScroll = _useState2[0],
35
+ setIsTopScroll = _useState2[1];
36
+ var isOverscroll = (0, _react.useRef)(false);
37
+ var startY = (0, _react.useRef)(0);
38
+ var currentY = (0, _react.useRef)(0);
39
+ (0, _react.useEffect)(function () {
40
+ var contentWrapperEl = contentWrapperRef.current;
41
+ var handleEl = handleRef.current;
42
+ var contentEl = contentRef.current;
43
+ var triggerElement = !isTopScroll ? handleEl : contentWrapperEl;
44
+ if (!triggerElement || !contentEl || !contentWrapperEl) {
45
+ return;
46
+ }
47
+ var nodes = Array.from(contentWrapperEl.querySelectorAll('*'));
48
+ var scrollableElements = nodes.filter(isScrollable);
49
+ contentWrapperEl.style.willChange = 'transform';
50
+ var onTouchStart = function onTouchStart(event) {
51
+ isOverscroll.current = false;
52
+ startY.current = event.changedTouches[0].clientY;
53
+ currentY.current = startY.current;
54
+ contentWrapperEl.style.transition = 'none';
55
+ };
56
+ var onTouchMove = function onTouchMove(event) {
57
+ var clientY = event.changedTouches[0].clientY;
58
+ currentY.current = Math.max(startY.current, clientY);
59
+ var offsetY = currentY.current - startY.current;
60
+ if (isOverscroll.current) {
61
+ startY.current = Infinity;
62
+ return;
63
+ }
64
+ if (offsetY !== 0 && event.cancelable) {
65
+ event.preventDefault();
66
+ }
67
+ contentWrapperEl.style.transform = "translateY(".concat(offsetY, "px)");
68
+ };
69
+ var onTouchEnd = function onTouchEnd(event) {
70
+ isOverscroll.current = false;
71
+ var curtainHeight = contentWrapperEl.offsetHeight;
72
+ var endY = event.changedTouches[0].clientY;
73
+ var offsetY = endY - startY.current;
74
+ contentWrapperEl.style.transform = '';
75
+ contentWrapperEl.style.transition = '';
76
+ if (offsetY / curtainHeight > SWIPE_THRESHOLD) {
77
+ onClose();
78
+ }
79
+ };
80
+ var onScroll = (0, _lodash["default"])(function (event) {
81
+ var onTop = event.target.scrollTop <= 0;
82
+ if (!onTop) {
83
+ isOverscroll.current = true;
84
+ }
85
+ setIsTopScroll(onTop);
86
+ }, throttleMs);
87
+ triggerElement.addEventListener('touchstart', onTouchStart);
88
+ triggerElement.addEventListener('touchmove', onTouchMove);
89
+ triggerElement.addEventListener('touchend', onTouchEnd);
90
+ scrollableElements.forEach(function (element) {
91
+ element.addEventListener('scroll', onScroll);
92
+ });
93
+ return function () {
94
+ triggerElement.removeEventListener('touchstart', onTouchStart);
95
+ triggerElement.removeEventListener('touchmove', onTouchMove);
96
+ triggerElement.removeEventListener('touchend', onTouchEnd);
97
+ scrollableElements.forEach(function (element) {
98
+ element.removeEventListener('scroll', onScroll);
99
+ });
100
+ };
101
+ }, [isTopScroll]);
102
+ };
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "sheetClasses", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Sheet2.classes;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "sheetConfig", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Sheet.sheetConfig;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "sheetRoot", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _Sheet.sheetRoot;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "sheetTokens", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _Sheet2.tokens;
28
+ }
29
+ });
30
+ var _Sheet = /*#__PURE__*/require("./Sheet");
31
+ var _Sheet2 = /*#__PURE__*/require("./Sheet.tokens");
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.handleTransition = void 0;
7
+ var handleTransition = exports.handleTransition = function handleTransition(transition) {
8
+ return function (props) {
9
+ var withTransition = props.withTransition;
10
+ return !withTransition ? 'unset' : transition;
11
+ };
12
+ };
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.DEFAULT_Z_INDEX = void 0;
7
+ Object.defineProperty(exports, "handleTransition", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _handleTransition.handleTransition;
11
+ }
12
+ });
13
+ var _handleTransition = /*#__PURE__*/require("./handleTransition");
14
+ var DEFAULT_Z_INDEX = exports.DEFAULT_Z_INDEX = '0';
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
@@ -0,0 +1,6 @@
1
+ [
2
+ "--plasma-sheet-overlay-color",
3
+ "--plasma-sheet-overlay-with-blur-color",
4
+ "--plasma-sheet-content-background-color",
5
+ "--plasma-sheet-handle-background-color"
6
+ ]
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Sheet = /*#__PURE__*/require("../../../../components/Sheet");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default'
12
+ },
13
+ variations: {
14
+ view: {
15
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], _Sheet.sheetTokens.sheetOverlayColor, _Sheet.sheetTokens.sheetOverlayWithBlurColor, _Sheet.sheetTokens.contentBackgroundColor, _Sheet.sheetTokens.handleBackgroundColor)
16
+ }
17
+ }
18
+ };
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Sheet = void 0;
7
+ Object.defineProperty(exports, "sheetClasses", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _Sheet.sheetClasses;
11
+ }
12
+ });
13
+ var _Sheet = /*#__PURE__*/require("../../../../components/Sheet");
14
+ var _engines = /*#__PURE__*/require("../../../../engines");
15
+ var _Sheet2 = /*#__PURE__*/require("./Sheet.config");
16
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Sheet.sheetConfig, _Sheet2.config);
17
+ var Sheet = exports.Sheet = /*#__PURE__*/(0, _engines.component)(mergedConfig);