@salutejs/plasma-new-hope 0.88.0-canary.1225.9348142616.0 → 0.88.0-canary.1225.9415530810.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. package/cjs/components/Sheet/Sheet.css +9 -5
  2. package/cjs/components/Sheet/Sheet.js +30 -9
  3. package/cjs/components/Sheet/Sheet.js.map +1 -1
  4. package/cjs/components/Sheet/Sheet.styles.js +81 -16
  5. package/cjs/components/Sheet/Sheet.styles.js.map +1 -1
  6. package/cjs/components/Sheet/{Sheet.styles_1bm46e7.css → Sheet.styles_kdjr5m.css} +5 -3
  7. package/cjs/components/Sheet/Sheet.tokens.js +2 -1
  8. package/cjs/components/Sheet/Sheet.tokens.js.map +1 -1
  9. package/cjs/components/Sheet/utils/handleTransition.js +2 -3
  10. package/cjs/components/Sheet/utils/handleTransition.js.map +1 -1
  11. package/cjs/components/Sheet/utils/index.js +8 -0
  12. package/cjs/components/Sheet/utils/index.js.map +1 -0
  13. package/cjs/index.css +7 -5
  14. package/es/components/Sheet/Sheet.css +9 -5
  15. package/es/components/Sheet/Sheet.js +32 -11
  16. package/es/components/Sheet/Sheet.js.map +1 -1
  17. package/es/components/Sheet/Sheet.styles.js +79 -16
  18. package/es/components/Sheet/Sheet.styles.js.map +1 -1
  19. package/es/components/Sheet/{Sheet.styles_1bm46e7.css → Sheet.styles_kdjr5m.css} +5 -3
  20. package/es/components/Sheet/Sheet.tokens.js +2 -1
  21. package/es/components/Sheet/Sheet.tokens.js.map +1 -1
  22. package/es/components/Sheet/utils/handleTransition.js +2 -3
  23. package/es/components/Sheet/utils/handleTransition.js.map +1 -1
  24. package/es/components/Sheet/utils/index.js +4 -0
  25. package/es/components/Sheet/utils/index.js.map +1 -0
  26. package/es/index.css +7 -5
  27. package/package.json +2 -2
  28. package/styled-components/cjs/components/Sheet/Sheet.js +30 -8
  29. package/styled-components/cjs/components/Sheet/Sheet.styles.js +36 -9
  30. package/styled-components/cjs/components/Sheet/Sheet.tokens.js +2 -1
  31. package/styled-components/cjs/components/Sheet/hooks/index.js +0 -7
  32. package/styled-components/cjs/components/Sheet/utils/handleTransition.js +2 -3
  33. package/styled-components/cjs/components/Sheet/utils/index.js +3 -1
  34. package/styled-components/cjs/components/Sheet/variations/_view/tokens.json +4 -1
  35. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.config.js +1 -1
  36. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +142 -40
  37. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.config.js +1 -1
  38. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +134 -39
  39. package/styled-components/es/components/Sheet/Sheet.js +33 -11
  40. package/styled-components/es/components/Sheet/Sheet.styles.js +35 -8
  41. package/styled-components/es/components/Sheet/Sheet.tokens.js +2 -1
  42. package/styled-components/es/components/Sheet/hooks/index.js +0 -1
  43. package/styled-components/es/components/Sheet/utils/handleTransition.js +2 -3
  44. package/styled-components/es/components/Sheet/utils/index.js +2 -1
  45. package/styled-components/es/components/Sheet/variations/_view/tokens.json +4 -1
  46. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.config.js +1 -1
  47. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +142 -40
  48. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.config.js +1 -1
  49. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +134 -39
  50. package/types/components/Sheet/Sheet.d.ts +1 -0
  51. package/types/components/Sheet/Sheet.d.ts.map +1 -1
  52. package/types/components/Sheet/Sheet.styles.d.ts +12 -8
  53. package/types/components/Sheet/Sheet.styles.d.ts.map +1 -1
  54. package/types/components/Sheet/Sheet.tokens.d.ts +2 -1
  55. package/types/components/Sheet/Sheet.tokens.d.ts.map +1 -1
  56. package/types/components/Sheet/Sheet.types.d.ts +25 -7
  57. package/types/components/Sheet/Sheet.types.d.ts.map +1 -1
  58. package/types/components/Sheet/hooks/index.d.ts +0 -1
  59. package/types/components/Sheet/hooks/index.d.ts.map +1 -1
  60. package/types/components/Sheet/utils/handleTransition.d.ts.map +1 -1
  61. package/types/components/Sheet/utils/index.d.ts +1 -0
  62. package/types/components/Sheet/utils/index.d.ts.map +1 -1
  63. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts.map +1 -1
  64. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts.map +1 -1
  65. package/cjs/components/Sheet/hooks/useThemeContext.js +0 -17
  66. package/cjs/components/Sheet/hooks/useThemeContext.js.map +0 -1
  67. package/es/components/Sheet/hooks/useThemeContext.js +0 -13
  68. package/es/components/Sheet/hooks/useThemeContext.js.map +0 -1
  69. package/styled-components/cjs/components/Sheet/hooks/useThemeContext.js +0 -15
  70. package/styled-components/es/components/Sheet/hooks/useThemeContext.js +0 -9
  71. package/types/components/Sheet/hooks/useThemeContext.d.ts +0 -7
  72. package/types/components/Sheet/hooks/useThemeContext.d.ts.map +0 -1
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import type { ComponentProps } from 'react';
4
4
  import { Body1 } from '@salutejs/plasma-core';
5
+ import styled from 'styled-components';
5
6
 
6
7
  import { Button } from '../Button/Button';
7
8
  import { WithTheme } from '../../../_helpers';
@@ -11,14 +12,37 @@ import { Sheet } from './Sheet';
11
12
  const meta: Meta<typeof Sheet> = {
12
13
  title: 'plasma_b2c/Sheet',
13
14
  decorators: [WithTheme],
14
- parameters: { viewport: { defaultViewport: '860' } },
15
+ args: {
16
+ withBlur: false,
17
+ withOverlay: true,
18
+ withTransition: true,
19
+ hasHandle: true,
20
+ isHeaderFixed: false,
21
+ isFooterFixed: false,
22
+ },
15
23
  };
16
24
 
17
25
  export default meta;
18
26
 
19
- type StorySheetProps = ComponentProps<typeof Sheet>;
27
+ type StorySheetProps = ComponentProps<typeof Sheet> & {
28
+ hasHeader: boolean;
29
+ hasFooter: boolean;
30
+ };
31
+
32
+ const StyledBody = styled(Body1)`
33
+ padding-bottom: 300px;
34
+ `;
20
35
 
21
- const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
36
+ const StoryDefault = ({
37
+ withOverlay,
38
+ withTransition,
39
+ hasFooter,
40
+ isFooterFixed,
41
+ hasHeader,
42
+ isHeaderFixed,
43
+ hasHandle,
44
+ withBlur,
45
+ }: StorySheetProps) => {
22
46
  const [isOpen, setIsOpen] = useState(false);
23
47
 
24
48
  return (
@@ -29,33 +53,26 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
29
53
  withOverlay={withOverlay}
30
54
  withTransition={withTransition}
31
55
  onClose={() => setIsOpen(false)}
56
+ hasHandle={hasHandle}
57
+ withBlur={withBlur}
58
+ contentHeader={
59
+ hasHeader ? (
60
+ <div>
61
+ <h4>header</h4>
62
+ </div>
63
+ ) : undefined
64
+ }
65
+ isHeaderFixed={isHeaderFixed}
66
+ contentFooter={
67
+ hasFooter ? (
68
+ <div>
69
+ <p>footer</p>
70
+ </div>
71
+ ) : undefined
72
+ }
73
+ isFooterFixed={isFooterFixed}
32
74
  >
33
- <p>Вложенные кнопки</p>
34
- <div
35
- style={{
36
- height: '75px',
37
- overflow: 'scroll',
38
- display: 'flex',
39
- flexDirection: 'column',
40
- gap: '1rem',
41
- }}
42
- >
43
- <Button>Кнопка 1</Button>
44
- <Button>Кнопка 2</Button>
45
- <Button>Кнопка 3</Button>
46
- <Button>Кнопка 4</Button>
47
- <Button>Кнопка 5</Button>
48
- <Button>Кнопка 6</Button>
49
- <Button>Кнопка 7</Button>
50
- <Button>Кнопка 8</Button>
51
- </div>
52
- <Body1>
53
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
54
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
55
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
56
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
57
- dolorem labore quaerat vero maxime ab ipsa nihil.
58
- </Body1>
75
+ <StyledBody>body</StyledBody>
59
76
  </Sheet>
60
77
  </>
61
78
  );
@@ -63,8 +80,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
63
80
 
64
81
  export const Default: StoryObj<StorySheetProps> = {
65
82
  args: {
66
- withOverlay: true,
67
- withTransition: true,
83
+ hasHeader: true,
84
+ hasFooter: true,
68
85
  },
69
86
  render: (args) => <StoryDefault {...args} />,
70
87
  };
@@ -76,13 +93,13 @@ const StoryWithoutOverlay = () => {
76
93
  <>
77
94
  <Button onClick={() => setIsOpen(true)}>Открыть</Button>
78
95
  <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
79
- <Body1>
96
+ <StyledBody>
80
97
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
81
98
  consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
82
99
  fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
83
100
  placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
84
101
  dolorem labore quaerat vero maxime ab ipsa nihil.
85
- </Body1>
102
+ </StyledBody>
86
103
  </Sheet>
87
104
  </>
88
105
  );
@@ -92,7 +109,16 @@ export const WithoutOverlay: StoryObj = {
92
109
  render: () => <StoryWithoutOverlay />,
93
110
  };
94
111
 
95
- const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
112
+ const StoryWithScroll = ({
113
+ withOverlay,
114
+ withTransition,
115
+ hasFooter,
116
+ isFooterFixed,
117
+ hasHeader,
118
+ isHeaderFixed,
119
+ hasHandle,
120
+ withBlur,
121
+ }: StorySheetProps) => {
96
122
  const [isOpen, setIsOpen] = useState(false);
97
123
 
98
124
  return (
@@ -103,6 +129,24 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
103
129
  withOverlay={withOverlay}
104
130
  withTransition={withTransition}
105
131
  onClose={() => setIsOpen(false)}
132
+ hasHandle={hasHandle}
133
+ withBlur={withBlur}
134
+ contentHeader={
135
+ hasHeader ? (
136
+ <div>
137
+ <h4>header</h4>
138
+ </div>
139
+ ) : undefined
140
+ }
141
+ isHeaderFixed={isHeaderFixed}
142
+ contentFooter={
143
+ hasFooter ? (
144
+ <div>
145
+ <p>footer</p>
146
+ </div>
147
+ ) : undefined
148
+ }
149
+ isFooterFixed={isFooterFixed}
106
150
  >
107
151
  <Body1>
108
152
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +172,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
128
172
  };
129
173
 
130
174
  export const WithScroll: StoryObj<StorySheetProps> = {
175
+ args: {
176
+ hasHeader: true,
177
+ hasFooter: true,
178
+ },
131
179
  render: (args) => <StoryWithScroll {...args} />,
132
180
  };
133
181
 
134
- const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
182
+ const StoryWithInsideScroll = ({
183
+ withOverlay,
184
+ withTransition,
185
+ hasFooter,
186
+ isFooterFixed,
187
+ hasHeader,
188
+ isHeaderFixed,
189
+ hasHandle,
190
+ withBlur,
191
+ }: StorySheetProps) => {
135
192
  const [isOpen, setIsOpen] = useState(false);
136
193
 
137
194
  return (
@@ -142,6 +199,24 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
142
199
  withOverlay={withOverlay}
143
200
  withTransition={withTransition}
144
201
  onClose={() => setIsOpen(false)}
202
+ hasHandle={hasHandle}
203
+ withBlur={withBlur}
204
+ contentHeader={
205
+ hasHeader ? (
206
+ <div>
207
+ <h4>header</h4>
208
+ </div>
209
+ ) : undefined
210
+ }
211
+ isHeaderFixed={isHeaderFixed}
212
+ contentFooter={
213
+ hasFooter ? (
214
+ <div>
215
+ <p>footer</p>
216
+ </div>
217
+ ) : undefined
218
+ }
219
+ isFooterFixed={isFooterFixed}
145
220
  >
146
221
  <p>Вложенные кнопки</p>
147
222
  <div
@@ -170,13 +245,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
170
245
 
171
246
  export const WithInsideScroll: StoryObj<StorySheetProps> = {
172
247
  args: {
173
- withOverlay: true,
174
- withTransition: true,
248
+ hasHeader: true,
249
+ hasFooter: true,
175
250
  },
176
251
  render: (args) => <StoryWithInsideScroll {...args} />,
177
252
  };
178
253
 
179
- const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
254
+ const StoryWithDoubleScroll = ({
255
+ withOverlay,
256
+ withTransition,
257
+ hasFooter,
258
+ isFooterFixed,
259
+ hasHeader,
260
+ isHeaderFixed,
261
+ hasHandle,
262
+ withBlur,
263
+ }: StorySheetProps) => {
180
264
  const [isOpen, setIsOpen] = useState(false);
181
265
 
182
266
  return (
@@ -187,6 +271,24 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
187
271
  withOverlay={withOverlay}
188
272
  withTransition={withTransition}
189
273
  onClose={() => setIsOpen(false)}
274
+ hasHandle={hasHandle}
275
+ withBlur={withBlur}
276
+ contentHeader={
277
+ hasHeader ? (
278
+ <div>
279
+ <h4>header</h4>
280
+ </div>
281
+ ) : undefined
282
+ }
283
+ isHeaderFixed={isHeaderFixed}
284
+ contentFooter={
285
+ hasFooter ? (
286
+ <div>
287
+ <p>footer</p>
288
+ </div>
289
+ ) : undefined
290
+ }
291
+ isFooterFixed={isFooterFixed}
190
292
  >
191
293
  <Body1>
192
294
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +334,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
232
334
 
233
335
  export const WithDoubleScroll: StoryObj<StorySheetProps> = {
234
336
  args: {
235
- withOverlay: true,
236
- withTransition: true,
337
+ hasHeader: true,
338
+ hasFooter: true,
237
339
  },
238
340
  render: (args) => <StoryWithDoubleScroll {...args} />,
239
341
  };
@@ -12,7 +12,7 @@ var config = exports.config = {
12
12
  },
13
13
  variations: {
14
14
  view: {
15
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-overlay);", ":var(--plasma-colors-white);"], _Sheet.sheetTokens.contentBackgroundColor, _Sheet.sheetTokens.overlayBackgroundColor, _Sheet.sheetTokens.handleColor)
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.handleColor)
16
16
  }
17
17
  }
18
18
  };
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import type { ComponentProps } from 'react';
4
4
  import { Body1 } from '@salutejs/plasma-core';
5
+ import styled from 'styled-components';
5
6
 
6
7
  import { Button } from '../Button/Button';
7
8
  import { WithTheme } from '../../../_helpers';
@@ -16,9 +17,25 @@ const meta: Meta<typeof Sheet> = {
16
17
 
17
18
  export default meta;
18
19
 
19
- type StorySheetProps = ComponentProps<typeof Sheet>;
20
+ type StorySheetProps = ComponentProps<typeof Sheet> & {
21
+ hasHeader: boolean;
22
+ hasFooter: boolean;
23
+ };
24
+
25
+ const StyledBody = styled(Body1)`
26
+ padding-bottom: 300px;
27
+ `;
20
28
 
21
- const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
29
+ const StoryDefault = ({
30
+ withOverlay,
31
+ withTransition,
32
+ hasFooter,
33
+ isFooterFixed,
34
+ hasHeader,
35
+ isHeaderFixed,
36
+ hasHandle,
37
+ withBlur,
38
+ }: StorySheetProps) => {
22
39
  const [isOpen, setIsOpen] = useState(false);
23
40
 
24
41
  return (
@@ -29,33 +46,26 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
29
46
  withOverlay={withOverlay}
30
47
  withTransition={withTransition}
31
48
  onClose={() => setIsOpen(false)}
49
+ hasHandle={hasHandle}
50
+ withBlur={withBlur}
51
+ contentHeader={
52
+ hasHeader ? (
53
+ <div>
54
+ <h4>header</h4>
55
+ </div>
56
+ ) : undefined
57
+ }
58
+ isHeaderFixed={isHeaderFixed}
59
+ contentFooter={
60
+ hasFooter ? (
61
+ <div>
62
+ <p>footer</p>
63
+ </div>
64
+ ) : undefined
65
+ }
66
+ isFooterFixed={isFooterFixed}
32
67
  >
33
- <p>Вложенные кнопки</p>
34
- <div
35
- style={{
36
- height: '75px',
37
- overflow: 'scroll',
38
- display: 'flex',
39
- flexDirection: 'column',
40
- gap: '1rem',
41
- }}
42
- >
43
- <Button>Кнопка 1</Button>
44
- <Button>Кнопка 2</Button>
45
- <Button>Кнопка 3</Button>
46
- <Button>Кнопка 4</Button>
47
- <Button>Кнопка 5</Button>
48
- <Button>Кнопка 6</Button>
49
- <Button>Кнопка 7</Button>
50
- <Button>Кнопка 8</Button>
51
- </div>
52
- <Body1>
53
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
54
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
55
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
56
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
57
- dolorem labore quaerat vero maxime ab ipsa nihil.
58
- </Body1>
68
+ <StyledBody>body</StyledBody>
59
69
  </Sheet>
60
70
  </>
61
71
  );
@@ -63,8 +73,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
63
73
 
64
74
  export const Default: StoryObj<StorySheetProps> = {
65
75
  args: {
66
- withOverlay: true,
67
- withTransition: true,
76
+ hasHeader: true,
77
+ hasFooter: true,
68
78
  },
69
79
  render: (args) => <StoryDefault {...args} />,
70
80
  };
@@ -76,13 +86,13 @@ const StoryWithoutOverlay = () => {
76
86
  <>
77
87
  <Button onClick={() => setIsOpen(true)}>Открыть</Button>
78
88
  <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
79
- <Body1>
89
+ <StyledBody>
80
90
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
81
91
  consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
82
92
  fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
83
93
  placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
84
94
  dolorem labore quaerat vero maxime ab ipsa nihil.
85
- </Body1>
95
+ </StyledBody>
86
96
  </Sheet>
87
97
  </>
88
98
  );
@@ -92,7 +102,16 @@ export const WithoutOverlay: StoryObj = {
92
102
  render: () => <StoryWithoutOverlay />,
93
103
  };
94
104
 
95
- const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
105
+ const StoryWithScroll = ({
106
+ withOverlay,
107
+ withTransition,
108
+ hasFooter,
109
+ isFooterFixed,
110
+ hasHeader,
111
+ isHeaderFixed,
112
+ hasHandle,
113
+ withBlur,
114
+ }: StorySheetProps) => {
96
115
  const [isOpen, setIsOpen] = useState(false);
97
116
 
98
117
  return (
@@ -103,6 +122,24 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
103
122
  withOverlay={withOverlay}
104
123
  withTransition={withTransition}
105
124
  onClose={() => setIsOpen(false)}
125
+ hasHandle={hasHandle}
126
+ withBlur={withBlur}
127
+ contentHeader={
128
+ hasHeader ? (
129
+ <div>
130
+ <h4>header</h4>
131
+ </div>
132
+ ) : undefined
133
+ }
134
+ isHeaderFixed={isHeaderFixed}
135
+ contentFooter={
136
+ hasFooter ? (
137
+ <div>
138
+ <p>footer</p>
139
+ </div>
140
+ ) : undefined
141
+ }
142
+ isFooterFixed={isFooterFixed}
106
143
  >
107
144
  <Body1>
108
145
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +165,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
128
165
  };
129
166
 
130
167
  export const WithScroll: StoryObj<StorySheetProps> = {
168
+ args: {
169
+ hasHeader: true,
170
+ hasFooter: true,
171
+ },
131
172
  render: (args) => <StoryWithScroll {...args} />,
132
173
  };
133
174
 
134
- const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
175
+ const StoryWithInsideScroll = ({
176
+ withOverlay,
177
+ withTransition,
178
+ hasFooter,
179
+ isFooterFixed,
180
+ hasHeader,
181
+ isHeaderFixed,
182
+ hasHandle,
183
+ withBlur,
184
+ }: StorySheetProps) => {
135
185
  const [isOpen, setIsOpen] = useState(false);
136
186
 
137
187
  return (
@@ -142,6 +192,24 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
142
192
  withOverlay={withOverlay}
143
193
  withTransition={withTransition}
144
194
  onClose={() => setIsOpen(false)}
195
+ hasHandle={hasHandle}
196
+ withBlur={withBlur}
197
+ contentHeader={
198
+ hasHeader ? (
199
+ <div>
200
+ <h4>header</h4>
201
+ </div>
202
+ ) : undefined
203
+ }
204
+ isHeaderFixed={isHeaderFixed}
205
+ contentFooter={
206
+ hasFooter ? (
207
+ <div>
208
+ <p>footer</p>
209
+ </div>
210
+ ) : undefined
211
+ }
212
+ isFooterFixed={isFooterFixed}
145
213
  >
146
214
  <p>Вложенные кнопки</p>
147
215
  <div
@@ -170,13 +238,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
170
238
 
171
239
  export const WithInsideScroll: StoryObj<StorySheetProps> = {
172
240
  args: {
173
- withOverlay: true,
174
- withTransition: true,
241
+ hasHeader: true,
242
+ hasFooter: true,
175
243
  },
176
244
  render: (args) => <StoryWithInsideScroll {...args} />,
177
245
  };
178
246
 
179
- const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
247
+ const StoryWithDoubleScroll = ({
248
+ withOverlay,
249
+ withTransition,
250
+ hasFooter,
251
+ isFooterFixed,
252
+ hasHeader,
253
+ isHeaderFixed,
254
+ hasHandle,
255
+ withBlur,
256
+ }: StorySheetProps) => {
180
257
  const [isOpen, setIsOpen] = useState(false);
181
258
 
182
259
  return (
@@ -187,6 +264,24 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
187
264
  withOverlay={withOverlay}
188
265
  withTransition={withTransition}
189
266
  onClose={() => setIsOpen(false)}
267
+ hasHandle={hasHandle}
268
+ withBlur={withBlur}
269
+ contentHeader={
270
+ hasHeader ? (
271
+ <div>
272
+ <h4>header</h4>
273
+ </div>
274
+ ) : undefined
275
+ }
276
+ isHeaderFixed={isHeaderFixed}
277
+ contentFooter={
278
+ hasFooter ? (
279
+ <div>
280
+ <p>footer</p>
281
+ </div>
282
+ ) : undefined
283
+ }
284
+ isFooterFixed={isFooterFixed}
190
285
  >
191
286
  <Body1>
192
287
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +327,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
232
327
 
233
328
  export const WithDoubleScroll: StoryObj<StorySheetProps> = {
234
329
  args: {
235
- withOverlay: true,
236
- withTransition: true,
330
+ hasHeader: true,
331
+ hasFooter: true,
237
332
  },
238
333
  render: (args) => <StoryWithDoubleScroll {...args} />,
239
334
  };
@@ -1,15 +1,18 @@
1
- var _excluded = ["isOpen", "children", "onClose", "withOverlay", "withTransition", "throttleMs", "className", "view"];
1
+ var _excluded = ["isOpen", "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; }
5
5
  import React, { forwardRef } from 'react';
6
6
  import { cx } from '../../utils';
7
- import { useSheet, useSheetSwipe, useThemeContext } from './hooks';
8
- import { classes } from './Sheet.tokens';
9
- import { StyledContentWrapper, StyledOverlay, StyledSheetContent, StyledSheetHandle, StyledWrapper } from './Sheet.styles';
7
+ import { Overlay } from '../Overlay';
8
+ import { useSheet, useSheetSwipe } from './hooks';
9
+ import { classes, tokens } from './Sheet.tokens';
10
+ import { StyledContentWrapper, StyledSheetBody, StyledSheetContent, StyledSheetFooter, StyledSheetHandle, StyledSheetHeader, StyledWrapper } from './Sheet.styles';
10
11
  import { base as viewCSS } from './variations/_view/base';
12
+ import { DEFAULT_Z_INDEX } from './utils';
11
13
 
12
14
  /**
15
+ * Sheet
13
16
  * Открывает окно-шторку поверх основного экрана.
14
17
  */
15
18
 
@@ -18,8 +21,18 @@ export var sheetRoot = function sheetRoot(Root) {
18
21
  var isOpen = _ref.isOpen,
19
22
  children = _ref.children,
20
23
  onClose = _ref.onClose,
24
+ _ref$hasHandle = _ref.hasHandle,
25
+ hasHandle = _ref$hasHandle === void 0 ? true : _ref$hasHandle,
26
+ contentHeader = _ref.contentHeader,
27
+ _ref$isHeaderFixed = _ref.isHeaderFixed,
28
+ isHeaderFixed = _ref$isHeaderFixed === void 0 ? false : _ref$isHeaderFixed,
29
+ contentFooter = _ref.contentFooter,
30
+ _ref$isFooterFixed = _ref.isFooterFixed,
31
+ isFooterFixed = _ref$isFooterFixed === void 0 ? false : _ref$isFooterFixed,
21
32
  _ref$withOverlay = _ref.withOverlay,
22
33
  withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
34
+ _ref$withBlur = _ref.withBlur,
35
+ withBlur = _ref$withBlur === void 0 ? false : _ref$withBlur,
23
36
  _ref$withTransition = _ref.withTransition,
24
37
  withTransition = _ref$withTransition === void 0 ? true : _ref$withTransition,
25
38
  throttleMs = _ref.throttleMs,
@@ -29,7 +42,6 @@ export var sheetRoot = function sheetRoot(Root) {
29
42
  var contentWrapperRef = React.useRef(null);
30
43
  var contentRef = React.useRef(null);
31
44
  var handleRef = React.useRef(null);
32
- var theme = useThemeContext();
33
45
  useSheet({
34
46
  isOpen: isOpen
35
47
  });
@@ -40,9 +52,11 @@ export var sheetRoot = function sheetRoot(Root) {
40
52
  throttleMs: throttleMs,
41
53
  onClose: onClose
42
54
  });
55
+ var hasHeader = !!contentHeader;
56
+ var hasFooter = !!contentFooter;
43
57
  var isClosedClass = isOpen ? undefined : "".concat(classes.isClosed);
58
+ var overlayBackgroundToken = withBlur ? "var(".concat(tokens.sheetOverlayWithBlurColor, ")") : "var(".concat(tokens.sheetOverlayColor, ")");
44
59
  return /*#__PURE__*/React.createElement(StyledWrapper, _extends({
45
- theme: theme,
46
60
  isOpen: isOpen,
47
61
  withTransition: withTransition,
48
62
  className: cx(isClosedClass, className)
@@ -52,17 +66,25 @@ export var sheetRoot = function sheetRoot(Root) {
52
66
  view: view,
53
67
  ref: rootRef
54
68
  }, /*#__PURE__*/React.createElement(StyledContentWrapper, {
55
- theme: theme,
56
69
  isOpen: isOpen,
57
70
  withTransition: withTransition,
58
71
  ref: contentWrapperRef
59
- }, /*#__PURE__*/React.createElement(StyledSheetHandle, {
72
+ }, hasHandle && /*#__PURE__*/React.createElement(StyledSheetHandle, {
60
73
  ref: handleRef
61
74
  }), /*#__PURE__*/React.createElement(StyledSheetContent, {
75
+ hasHeader: hasHeader,
76
+ hasFooter: hasFooter,
62
77
  ref: contentRef
63
- }, children)), /*#__PURE__*/React.createElement(StyledOverlay, {
64
- withOverlay: withOverlay,
65
- onClick: onClose
78
+ }, hasHeader && /*#__PURE__*/React.createElement(StyledSheetHeader, {
79
+ isHeaderFixed: isHeaderFixed
80
+ }, contentHeader), /*#__PURE__*/React.createElement(StyledSheetBody, null, children), hasFooter && /*#__PURE__*/React.createElement(StyledSheetFooter, {
81
+ isFooterFixed: isFooterFixed
82
+ }, contentFooter))), withOverlay && /*#__PURE__*/React.createElement(Overlay, {
83
+ zIndex: DEFAULT_Z_INDEX,
84
+ backgroundColorProperty: overlayBackgroundToken,
85
+ withBlur: withBlur,
86
+ isClickable: true,
87
+ onOverlayClick: onClose
66
88
  })));
67
89
  });
68
90
  };