@salutejs/plasma-new-hope 0.89.0-canary.1225.9545827287.0 → 0.89.0-canary.1247.9544729230.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/index.css +0 -7
  2. package/cjs/index.js +0 -6
  3. package/cjs/index.js.map +1 -1
  4. package/es/index.css +0 -7
  5. package/es/index.js +0 -2
  6. package/es/index.js.map +1 -1
  7. package/package.json +2 -4
  8. package/styled-components/cjs/index.js +0 -11
  9. package/styled-components/es/index.js +0 -1
  10. package/types/index.d.ts +0 -1
  11. package/types/index.d.ts.map +1 -1
  12. package/cjs/components/Sheet/Sheet.css +0 -8
  13. package/cjs/components/Sheet/Sheet.js +0 -108
  14. package/cjs/components/Sheet/Sheet.js.map +0 -1
  15. package/cjs/components/Sheet/Sheet.styles.js +0 -115
  16. package/cjs/components/Sheet/Sheet.styles.js.map +0 -1
  17. package/cjs/components/Sheet/Sheet.styles_o73i75.css +0 -6
  18. package/cjs/components/Sheet/Sheet.tokens.js +0 -17
  19. package/cjs/components/Sheet/Sheet.tokens.js.map +0 -1
  20. package/cjs/components/Sheet/hooks/useOverflow.js +0 -23
  21. package/cjs/components/Sheet/hooks/useOverflow.js.map +0 -1
  22. package/cjs/components/Sheet/hooks/useSheetSwipe.js +0 -98
  23. package/cjs/components/Sheet/hooks/useSheetSwipe.js.map +0 -1
  24. package/cjs/components/Sheet/utils/handleTransition.js +0 -13
  25. package/cjs/components/Sheet/utils/handleTransition.js.map +0 -1
  26. package/cjs/components/Sheet/utils/index.js +0 -8
  27. package/cjs/components/Sheet/utils/index.js.map +0 -1
  28. package/cjs/components/Sheet/variations/_view/base.js +0 -9
  29. package/cjs/components/Sheet/variations/_view/base.js.map +0 -1
  30. package/cjs/components/Sheet/variations/_view/base_x642ct.css +0 -1
  31. package/es/components/Sheet/Sheet.css +0 -8
  32. package/es/components/Sheet/Sheet.js +0 -103
  33. package/es/components/Sheet/Sheet.js.map +0 -1
  34. package/es/components/Sheet/Sheet.styles.js +0 -106
  35. package/es/components/Sheet/Sheet.styles.js.map +0 -1
  36. package/es/components/Sheet/Sheet.styles_o73i75.css +0 -6
  37. package/es/components/Sheet/Sheet.tokens.js +0 -12
  38. package/es/components/Sheet/Sheet.tokens.js.map +0 -1
  39. package/es/components/Sheet/hooks/useOverflow.js +0 -19
  40. package/es/components/Sheet/hooks/useOverflow.js.map +0 -1
  41. package/es/components/Sheet/hooks/useSheetSwipe.js +0 -94
  42. package/es/components/Sheet/hooks/useSheetSwipe.js.map +0 -1
  43. package/es/components/Sheet/utils/handleTransition.js +0 -9
  44. package/es/components/Sheet/utils/handleTransition.js.map +0 -1
  45. package/es/components/Sheet/utils/index.js +0 -4
  46. package/es/components/Sheet/utils/index.js.map +0 -1
  47. package/es/components/Sheet/variations/_view/base.js +0 -5
  48. package/es/components/Sheet/variations/_view/base.js.map +0 -1
  49. package/es/components/Sheet/variations/_view/base_x642ct.css +0 -1
  50. package/styled-components/cjs/components/Sheet/Sheet.js +0 -108
  51. package/styled-components/cjs/components/Sheet/Sheet.styles.js +0 -52
  52. package/styled-components/cjs/components/Sheet/Sheet.template-doc.mdx +0 -143
  53. package/styled-components/cjs/components/Sheet/Sheet.tokens.js +0 -15
  54. package/styled-components/cjs/components/Sheet/Sheet.types.js +0 -5
  55. package/styled-components/cjs/components/Sheet/hooks/index.js +0 -19
  56. package/styled-components/cjs/components/Sheet/hooks/useOverflow.js +0 -21
  57. package/styled-components/cjs/components/Sheet/hooks/useSheetSwipe.js +0 -102
  58. package/styled-components/cjs/components/Sheet/index.js +0 -31
  59. package/styled-components/cjs/components/Sheet/utils/handleTransition.js +0 -12
  60. package/styled-components/cjs/components/Sheet/utils/index.js +0 -14
  61. package/styled-components/cjs/components/Sheet/variations/_view/base.js +0 -8
  62. package/styled-components/cjs/components/Sheet/variations/_view/tokens.json +0 -6
  63. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.config.js +0 -18
  64. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.js +0 -17
  65. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +0 -341
  66. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.config.js +0 -18
  67. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.js +0 -17
  68. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +0 -341
  69. package/styled-components/es/components/Sheet/Sheet.js +0 -100
  70. package/styled-components/es/components/Sheet/Sheet.styles.js +0 -45
  71. package/styled-components/es/components/Sheet/Sheet.template-doc.mdx +0 -143
  72. package/styled-components/es/components/Sheet/Sheet.tokens.js +0 -9
  73. package/styled-components/es/components/Sheet/Sheet.types.js +0 -1
  74. package/styled-components/es/components/Sheet/hooks/index.js +0 -2
  75. package/styled-components/es/components/Sheet/hooks/useOverflow.js +0 -15
  76. package/styled-components/es/components/Sheet/hooks/useSheetSwipe.js +0 -95
  77. package/styled-components/es/components/Sheet/index.js +0 -2
  78. package/styled-components/es/components/Sheet/utils/handleTransition.js +0 -6
  79. package/styled-components/es/components/Sheet/utils/index.js +0 -2
  80. package/styled-components/es/components/Sheet/variations/_view/base.js +0 -2
  81. package/styled-components/es/components/Sheet/variations/_view/tokens.json +0 -6
  82. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.config.js +0 -12
  83. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.js +0 -6
  84. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +0 -341
  85. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.config.js +0 -12
  86. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.js +0 -6
  87. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +0 -341
  88. package/types/components/Sheet/Sheet.d.ts +0 -22
  89. package/types/components/Sheet/Sheet.d.ts.map +0 -1
  90. package/types/components/Sheet/Sheet.styles.d.ts +0 -16
  91. package/types/components/Sheet/Sheet.styles.d.ts.map +0 -1
  92. package/types/components/Sheet/Sheet.tokens.d.ts +0 -10
  93. package/types/components/Sheet/Sheet.tokens.d.ts.map +0 -1
  94. package/types/components/Sheet/Sheet.types.d.ts +0 -65
  95. package/types/components/Sheet/Sheet.types.d.ts.map +0 -1
  96. package/types/components/Sheet/hooks/index.d.ts +0 -3
  97. package/types/components/Sheet/hooks/index.d.ts.map +0 -1
  98. package/types/components/Sheet/hooks/useOverflow.d.ts +0 -3
  99. package/types/components/Sheet/hooks/useOverflow.d.ts.map +0 -1
  100. package/types/components/Sheet/hooks/useSheetSwipe.d.ts +0 -9
  101. package/types/components/Sheet/hooks/useSheetSwipe.d.ts.map +0 -1
  102. package/types/components/Sheet/index.d.ts +0 -4
  103. package/types/components/Sheet/index.d.ts.map +0 -1
  104. package/types/components/Sheet/utils/handleTransition.d.ts +0 -5
  105. package/types/components/Sheet/utils/handleTransition.d.ts.map +0 -1
  106. package/types/components/Sheet/utils/index.d.ts +0 -3
  107. package/types/components/Sheet/utils/index.d.ts.map +0 -1
  108. package/types/components/Sheet/variations/_view/base.d.ts +0 -2
  109. package/types/components/Sheet/variations/_view/base.d.ts.map +0 -1
  110. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts +0 -11
  111. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts.map +0 -1
  112. package/types/examples/plasma_b2c/components/Sheet/Sheet.d.ts +0 -8
  113. package/types/examples/plasma_b2c/components/Sheet/Sheet.d.ts.map +0 -1
  114. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts +0 -11
  115. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts.map +0 -1
  116. package/types/examples/plasma_web/components/Sheet/Sheet.d.ts +0 -8
  117. package/types/examples/plasma_web/components/Sheet/Sheet.d.ts.map +0 -1
@@ -1,95 +0,0 @@
1
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
- 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."); }
3
- 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); }
4
- 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; }
5
- 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; } }
6
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
- import throttle from 'lodash.throttle';
8
- import { useEffect, useRef, useState } from 'react';
9
- var SWIPE_THRESHOLD = 0.2;
10
- var THROTTLE_DEFAULT_MS = 0;
11
- var isScrollable = function isScrollable(element) {
12
- if (!element) {
13
- return false;
14
- }
15
- var style = getComputedStyle(element);
16
- return style.overflow === 'scroll' || style.overflow === 'auto' || style.overflowY === 'scroll' || style.overflowY === 'auto';
17
- };
18
- export var useSheetSwipe = function useSheetSwipe(args) {
19
- var contentWrapperRef = args.contentWrapperRef,
20
- contentRef = args.contentRef,
21
- handleRef = args.handleRef,
22
- onClose = args.onClose,
23
- _args$throttleMs = args.throttleMs,
24
- throttleMs = _args$throttleMs === void 0 ? THROTTLE_DEFAULT_MS : _args$throttleMs;
25
- var _useState = useState(true),
26
- _useState2 = _slicedToArray(_useState, 2),
27
- isTopScroll = _useState2[0],
28
- setIsTopScroll = _useState2[1];
29
- var isOverscroll = useRef(false);
30
- var startY = useRef(0);
31
- var currentY = useRef(0);
32
- useEffect(function () {
33
- var contentWrapperEl = contentWrapperRef.current;
34
- var handleEl = handleRef.current;
35
- var contentEl = contentRef.current;
36
- var triggerElement = !isTopScroll ? handleEl : contentWrapperEl;
37
- if (!triggerElement || !contentEl || !contentWrapperEl) {
38
- return;
39
- }
40
- var nodes = Array.from(contentWrapperEl.querySelectorAll('*'));
41
- var scrollableElements = nodes.filter(isScrollable);
42
- contentWrapperEl.style.willChange = 'transform';
43
- var onTouchStart = function onTouchStart(event) {
44
- isOverscroll.current = false;
45
- startY.current = event.changedTouches[0].clientY;
46
- currentY.current = startY.current;
47
- contentWrapperEl.style.transition = 'none';
48
- };
49
- var onTouchMove = function onTouchMove(event) {
50
- var clientY = event.changedTouches[0].clientY;
51
- currentY.current = Math.max(startY.current, clientY);
52
- var offsetY = currentY.current - startY.current;
53
- if (isOverscroll.current) {
54
- startY.current = Infinity;
55
- return;
56
- }
57
- if (offsetY !== 0 && event.cancelable) {
58
- event.preventDefault();
59
- }
60
- contentWrapperEl.style.transform = "translateY(".concat(offsetY, "px)");
61
- };
62
- var onTouchEnd = function onTouchEnd(event) {
63
- isOverscroll.current = false;
64
- var curtainHeight = contentWrapperEl.offsetHeight;
65
- var endY = event.changedTouches[0].clientY;
66
- var offsetY = endY - startY.current;
67
- contentWrapperEl.style.transform = '';
68
- contentWrapperEl.style.transition = '';
69
- if (offsetY / curtainHeight > SWIPE_THRESHOLD) {
70
- onClose();
71
- }
72
- };
73
- var onScroll = throttle(function (event) {
74
- var onTop = event.target.scrollTop <= 0;
75
- if (!onTop) {
76
- isOverscroll.current = true;
77
- }
78
- setIsTopScroll(onTop);
79
- }, throttleMs);
80
- triggerElement.addEventListener('touchstart', onTouchStart);
81
- triggerElement.addEventListener('touchmove', onTouchMove);
82
- triggerElement.addEventListener('touchend', onTouchEnd);
83
- scrollableElements.forEach(function (element) {
84
- element.addEventListener('scroll', onScroll);
85
- });
86
- return function () {
87
- triggerElement.removeEventListener('touchstart', onTouchStart);
88
- triggerElement.removeEventListener('touchmove', onTouchMove);
89
- triggerElement.removeEventListener('touchend', onTouchEnd);
90
- scrollableElements.forEach(function (element) {
91
- element.removeEventListener('scroll', onScroll);
92
- });
93
- };
94
- }, [isTopScroll]);
95
- };
@@ -1,2 +0,0 @@
1
- export { sheetConfig, sheetRoot } from './Sheet';
2
- export { classes as sheetClasses, tokens as sheetTokens } from './Sheet.tokens';
@@ -1,6 +0,0 @@
1
- export var handleTransition = function handleTransition(transition) {
2
- return function (props) {
3
- var withTransition = props.withTransition;
4
- return !withTransition ? 'unset' : transition;
5
- };
6
- };
@@ -1,2 +0,0 @@
1
- export { handleTransition } from './handleTransition';
2
- export var DEFAULT_Z_INDEX = '0';
@@ -1,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,6 +0,0 @@
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
- ]
@@ -1,12 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { sheetTokens } from '../../../../components/Sheet';
3
- export var config = {
4
- defaults: {
5
- view: 'default'
6
- },
7
- variations: {
8
- view: {
9
- "default": /*#__PURE__*/css(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleBackgroundColor)
10
- }
11
- }
12
- };
@@ -1,6 +0,0 @@
1
- import { sheetConfig } from '../../../../components/Sheet';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './Sheet.config';
4
- export { sheetClasses } from '../../../../components/Sheet';
5
- var mergedConfig = /*#__PURE__*/mergeConfig(sheetConfig, config);
6
- export var Sheet = /*#__PURE__*/component(mergedConfig);
@@ -1,341 +0,0 @@
1
- import React, { useState } from 'react';
2
- import type { StoryObj, Meta } from '@storybook/react';
3
- import type { ComponentProps } from 'react';
4
- import styled from 'styled-components';
5
-
6
- import { Button } from '../Button/Button';
7
- import { WithTheme } from '../../../_helpers';
8
- import { Body } from '../../../typograpy/components/Body/Body';
9
-
10
- import { Sheet } from './Sheet';
11
-
12
- const meta: Meta<typeof Sheet> = {
13
- title: 'plasma_b2c/Sheet',
14
- decorators: [WithTheme],
15
- args: {
16
- withBlur: false,
17
- withOverlay: true,
18
- withTransition: true,
19
- hasHandle: true,
20
- isHeaderFixed: false,
21
- isFooterFixed: false,
22
- },
23
- };
24
-
25
- export default meta;
26
-
27
- type StorySheetProps = ComponentProps<typeof Sheet> & {
28
- storyHasHeader: boolean;
29
- storyHasFooter: boolean;
30
- };
31
-
32
- const StyledBody = styled(Body)`
33
- padding-bottom: 300px;
34
- `;
35
-
36
- const StoryDefault = ({
37
- withOverlay,
38
- withTransition,
39
- storyHasFooter,
40
- isFooterFixed,
41
- storyHasHeader,
42
- isHeaderFixed,
43
- hasHandle,
44
- withBlur,
45
- }: StorySheetProps) => {
46
- const [opened, setOpened] = useState(false);
47
-
48
- return (
49
- <>
50
- <Button onClick={() => setOpened(true)}>Открыть</Button>
51
- <Sheet
52
- opened={opened}
53
- withOverlay={withOverlay}
54
- withTransition={withTransition}
55
- onClose={() => setOpened(false)}
56
- hasHandle={hasHandle}
57
- withBlur={withBlur}
58
- contentHeader={
59
- storyHasHeader ? (
60
- <div>
61
- <h4>header</h4>
62
- </div>
63
- ) : undefined
64
- }
65
- isHeaderFixed={isHeaderFixed}
66
- contentFooter={
67
- storyHasFooter ? (
68
- <div>
69
- <p>footer</p>
70
- </div>
71
- ) : undefined
72
- }
73
- isFooterFixed={isFooterFixed}
74
- >
75
- <StyledBody>body</StyledBody>
76
- </Sheet>
77
- </>
78
- );
79
- };
80
-
81
- export const Default: StoryObj<StorySheetProps> = {
82
- args: {
83
- storyHasHeader: true,
84
- storyHasFooter: true,
85
- },
86
- render: (args) => <StoryDefault {...args} />,
87
- };
88
-
89
- const StoryWithoutOverlay = () => {
90
- const [opened, setOpened] = useState(false);
91
-
92
- return (
93
- <>
94
- <Button onClick={() => setOpened(true)}>Открыть</Button>
95
- <Sheet opened={opened} withOverlay={false} onClose={() => setOpened(false)}>
96
- <StyledBody>
97
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
98
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
99
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
100
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
101
- dolorem labore quaerat vero maxime ab ipsa nihil.
102
- </StyledBody>
103
- </Sheet>
104
- </>
105
- );
106
- };
107
-
108
- export const WithoutOverlay: StoryObj = {
109
- render: () => <StoryWithoutOverlay />,
110
- };
111
-
112
- const StoryWithScroll = ({
113
- withOverlay,
114
- withTransition,
115
- storyHasFooter,
116
- isFooterFixed,
117
- storyHasHeader,
118
- isHeaderFixed,
119
- hasHandle,
120
- withBlur,
121
- }: StorySheetProps) => {
122
- const [opened, setOpened] = useState(false);
123
-
124
- return (
125
- <>
126
- <Button onClick={() => setOpened(true)}>Открыть</Button>
127
- <Sheet
128
- opened={opened}
129
- withOverlay={withOverlay}
130
- withTransition={withTransition}
131
- onClose={() => setOpened(false)}
132
- hasHandle={hasHandle}
133
- withBlur={withBlur}
134
- contentHeader={
135
- storyHasHeader ? (
136
- <div>
137
- <h4>header</h4>
138
- </div>
139
- ) : undefined
140
- }
141
- isHeaderFixed={isHeaderFixed}
142
- contentFooter={
143
- storyHasFooter ? (
144
- <div>
145
- <p>footer</p>
146
- </div>
147
- ) : undefined
148
- }
149
- isFooterFixed={isFooterFixed}
150
- >
151
- <Body>
152
- <Button onClick={() => setOpened(false)}>Закрыть</Button>
153
- <p>
154
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
155
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
156
- illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
157
- nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
158
- ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
159
- </p>
160
- <Button onClick={() => setOpened(false)}>Закрыть</Button>
161
- <p>
162
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
163
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
164
- illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
165
- nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
166
- ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
167
- </p>
168
- </Body>
169
- </Sheet>
170
- </>
171
- );
172
- };
173
-
174
- export const WithScroll: StoryObj<StorySheetProps> = {
175
- args: {
176
- storyHasHeader: true,
177
- storyHasFooter: true,
178
- },
179
- render: (args) => <StoryWithScroll {...args} />,
180
- };
181
-
182
- const StoryWithInsideScroll = ({
183
- withOverlay,
184
- withTransition,
185
- storyHasFooter,
186
- isFooterFixed,
187
- storyHasHeader,
188
- isHeaderFixed,
189
- hasHandle,
190
- withBlur,
191
- }: StorySheetProps) => {
192
- const [opened, setOpened] = useState(false);
193
-
194
- return (
195
- <>
196
- <Button onClick={() => setOpened(true)}>Открыть</Button>
197
- <Sheet
198
- opened={opened}
199
- withOverlay={withOverlay}
200
- withTransition={withTransition}
201
- onClose={() => setOpened(false)}
202
- hasHandle={hasHandle}
203
- withBlur={withBlur}
204
- contentHeader={
205
- storyHasHeader ? (
206
- <div>
207
- <h4>header</h4>
208
- </div>
209
- ) : undefined
210
- }
211
- isHeaderFixed={isHeaderFixed}
212
- contentFooter={
213
- storyHasFooter ? (
214
- <div>
215
- <p>footer</p>
216
- </div>
217
- ) : undefined
218
- }
219
- isFooterFixed={isFooterFixed}
220
- >
221
- <p>Вложенные кнопки</p>
222
- <div
223
- style={{
224
- height: '150px',
225
- overflow: 'scroll',
226
- display: 'flex',
227
- flexDirection: 'column',
228
- gap: '1rem',
229
- }}
230
- >
231
- <Button>Кнопка 1</Button>
232
- <Button>Кнопка 2</Button>
233
- <Button>Кнопка 3</Button>
234
- <Button>Кнопка 4</Button>
235
- <Button>Кнопка 5</Button>
236
- <Button>Кнопка 6</Button>
237
- <Button>Кнопка 7</Button>
238
- <Button>Кнопка 8</Button>
239
- </div>
240
- <Body>Lorem ipsum dolor sit amet consectetur adipisicing elit.</Body>
241
- </Sheet>
242
- </>
243
- );
244
- };
245
-
246
- export const WithInsideScroll: StoryObj<StorySheetProps> = {
247
- args: {
248
- storyHasHeader: true,
249
- storyHasFooter: true,
250
- },
251
- render: (args) => <StoryWithInsideScroll {...args} />,
252
- };
253
-
254
- const StoryWithDoubleScroll = ({
255
- withOverlay,
256
- withTransition,
257
- storyHasFooter,
258
- isFooterFixed,
259
- storyHasHeader,
260
- isHeaderFixed,
261
- hasHandle,
262
- withBlur,
263
- }: StorySheetProps) => {
264
- const [opened, setOpened] = useState(false);
265
-
266
- return (
267
- <>
268
- <Button onClick={() => setOpened(true)}>Открыть</Button>
269
- <Sheet
270
- opened={opened}
271
- withOverlay={withOverlay}
272
- withTransition={withTransition}
273
- onClose={() => setOpened(false)}
274
- hasHandle={hasHandle}
275
- withBlur={withBlur}
276
- contentHeader={
277
- storyHasHeader ? (
278
- <div>
279
- <h4>header</h4>
280
- </div>
281
- ) : undefined
282
- }
283
- isHeaderFixed={isHeaderFixed}
284
- contentFooter={
285
- storyHasFooter ? (
286
- <div>
287
- <p>footer</p>
288
- </div>
289
- ) : undefined
290
- }
291
- isFooterFixed={isFooterFixed}
292
- >
293
- <Body>
294
- <Button onClick={() => setOpened(false)}>Закрыть</Button>
295
- <p>Вложенные кнопки</p>
296
- <div
297
- style={{
298
- height: '150px',
299
- overflow: 'scroll',
300
- display: 'flex',
301
- flexDirection: 'column',
302
- gap: '1rem',
303
- }}
304
- >
305
- <Button>Кнопка 1</Button>
306
- <Button>Кнопка 2</Button>
307
- <Button>Кнопка 3</Button>
308
- <Button>Кнопка 4</Button>
309
- <Button>Кнопка 5</Button>
310
- <Button>Кнопка 6</Button>
311
- <Button>Кнопка 7</Button>
312
- <Button>Кнопка 8</Button>
313
- </div>
314
- <p>
315
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
316
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
317
- illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
318
- nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
319
- ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
320
- </p>
321
- <Button onClick={() => setOpened(false)}>Закрыть</Button>
322
- <p>
323
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
324
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
325
- illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
326
- nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
327
- ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
328
- </p>
329
- </Body>
330
- </Sheet>
331
- </>
332
- );
333
- };
334
-
335
- export const WithDoubleScroll: StoryObj<StorySheetProps> = {
336
- args: {
337
- storyHasHeader: true,
338
- storyHasFooter: true,
339
- },
340
- render: (args) => <StoryWithDoubleScroll {...args} />,
341
- };
@@ -1,12 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { sheetTokens } from '../../../../components/Sheet';
3
- export var config = {
4
- defaults: {
5
- view: 'default'
6
- },
7
- variations: {
8
- view: {
9
- "default": /*#__PURE__*/css(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleBackgroundColor)
10
- }
11
- }
12
- };
@@ -1,6 +0,0 @@
1
- import { sheetConfig } from '../../../../components/Sheet';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './Sheet.config';
4
- export { sheetClasses } from '../../../../components/Sheet';
5
- var mergedConfig = /*#__PURE__*/mergeConfig(sheetConfig, config);
6
- export var Sheet = /*#__PURE__*/component(mergedConfig);