@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,341 @@
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_web/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
+ };
@@ -46,6 +46,7 @@ export * from './components/Progress';
46
46
  export * from './components/Select';
47
47
  export * from './components/Divider';
48
48
  export * from './components/Toolbar';
49
+ export * from './components/Sheet';
49
50
  export * from './components/Slider';
50
51
  export * from './components/Range';
51
52
  export * from './components/Accordion';
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import { RootProps } from '../../engines';
3
+ import { SheetProps } from './Sheet.types';
4
+ /**
5
+ * Открывает окно-шторку поверх основного экрана.
6
+ */
7
+ export declare const sheetRoot: (Root: RootProps<HTMLDivElement, SheetProps>) => React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<HTMLDivElement>>;
8
+ export declare const sheetConfig: {
9
+ name: string;
10
+ tag: string;
11
+ layout: (Root: RootProps<HTMLDivElement, SheetProps>) => React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<HTMLDivElement>>;
12
+ base: string;
13
+ variations: {
14
+ view: {
15
+ css: import("@linaria/core").LinariaClassName;
16
+ };
17
+ };
18
+ defaults: {
19
+ view: string;
20
+ };
21
+ };
22
+ //# sourceMappingURL=Sheet.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAc3C;;GAEG;AAEH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAsEhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAxEQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAqFpE,CAAC"}
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ import { CommonProps } from './Sheet.types';
3
+ export declare const StyledContentWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & CommonProps>;
4
+ export declare const StyledSheetHandle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
5
+ export declare const StyledSheetContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
6
+ hasHeader?: boolean | undefined;
7
+ hasFooter?: boolean | undefined;
8
+ }>;
9
+ export declare const StyledSheetHeader: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
10
+ isHeaderFixed?: boolean | undefined;
11
+ }>;
12
+ export declare const StyledSheetBody: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
13
+ export declare const StyledSheetFooter: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
14
+ isFooterFixed?: boolean | undefined;
15
+ }>;
16
+ //# sourceMappingURL=Sheet.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sheet.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,eAAO,MAAM,oBAAoB,0JAoBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAc7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;EAe9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;EAQ7B,CAAC;AAEF,eAAO,MAAM,eAAe,qKAAe,CAAC;AAE5C,eAAO,MAAM,iBAAiB;;EAQ7B,CAAC"}
@@ -0,0 +1,10 @@
1
+ export declare const classes: {
2
+ closed: string;
3
+ };
4
+ export declare const tokens: {
5
+ sheetOverlayColor: string;
6
+ sheetOverlayWithBlurColor: string;
7
+ contentBackgroundColor: string;
8
+ handleBackgroundColor: string;
9
+ };
10
+ //# sourceMappingURL=Sheet.tokens.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sheet.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC"}
@@ -0,0 +1,65 @@
1
+ import { ReactNode, HTMLAttributes } from 'react';
2
+ export interface SheetProps extends HTMLAttributes<HTMLDivElement> {
3
+ /**
4
+ * Состояние шторки, открыта или скрыта
5
+ */
6
+ opened: boolean;
7
+ /**
8
+ * Обработчик закрытия шторки. Вызывается при клике по оверлею или смахиванию шторки вниз
9
+ */
10
+ onClose: () => void;
11
+ /**
12
+ * Слот для контента в заголовке
13
+ */
14
+ contentHeader?: ReactNode;
15
+ /**
16
+ * Является ли заголовок фиксированным
17
+ * @default
18
+ * false
19
+ */
20
+ isHeaderFixed?: boolean;
21
+ /**
22
+ * Слот для контента в нижней части
23
+ */
24
+ contentFooter?: ReactNode;
25
+ /**
26
+ * Является ли нижняя часть фиксированной
27
+ * @default
28
+ * false
29
+ */
30
+ isFooterFixed?: boolean;
31
+ /**
32
+ * Наличие ручки у шторки
33
+ * @default
34
+ * true
35
+ */
36
+ hasHandle?: boolean;
37
+ /**
38
+ * Наличие оверлея шторки. Если включен, то контент под шторкой перекрывается оверлеем, при нажатии на
39
+ * который шторка закрывается.
40
+ * @default
41
+ * true
42
+ */
43
+ withOverlay?: boolean;
44
+ /**
45
+ * Нужно ли применять blur для подложки.
46
+ * @default
47
+ * false
48
+ */
49
+ withBlur?: boolean;
50
+ children?: ReactNode;
51
+ /**
52
+ * Наличие состояния анимации/перехода
53
+ * @default
54
+ * true
55
+ */
56
+ withTransition?: boolean;
57
+ /**
58
+ * Throttling внутренних обработчиков события onScroll
59
+ */
60
+ throttleMs?: number;
61
+ view?: string;
62
+ }
63
+ export declare type CommonProps = Pick<SheetProps, 'withTransition' | 'opened'>;
64
+ export declare type SheetHookArgs = Pick<SheetProps, 'opened'>;
65
+ //# sourceMappingURL=Sheet.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sheet.types.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC9D;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CAAC;AAExE,oBAAY,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { useSheetSwipe } from './useSheetSwipe';
2
+ export { useOverflow } from './useOverflow';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { SheetHookArgs } from '../Sheet.types';
2
+ export declare const useOverflow: ({ opened }: SheetHookArgs) => void;
3
+ //# sourceMappingURL=useOverflow.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/hooks/useOverflow.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,eAAO,MAAM,WAAW,eAAgB,aAAa,SAapD,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { RefObject } from 'react';
2
+ export declare const useSheetSwipe: (args: {
3
+ contentWrapperRef: RefObject<HTMLDivElement>;
4
+ contentRef: RefObject<HTMLDivElement>;
5
+ handleRef: RefObject<HTMLDivElement>;
6
+ throttleMs?: number | undefined;
7
+ onClose: () => void;
8
+ }) => void;
9
+ //# sourceMappingURL=useSheetSwipe.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSheetSwipe.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/hooks/useSheetSwipe.ts"],"names":[],"mappings":"AACA,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAoB/D,eAAO,MAAM,aAAa;uBACH,UAAU,cAAc,CAAC;gBAChC,UAAU,cAAc,CAAC;eAC1B,UAAU,cAAc,CAAC;;aAE3B,MAAM,IAAI;UA6FtB,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { sheetConfig, sheetRoot } from './Sheet';
2
+ export { classes as sheetClasses, tokens as sheetTokens } from './Sheet.tokens';
3
+ export type { SheetProps } from './Sheet.types';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAChF,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { CommonProps } from '../Sheet.types';
2
+ declare type HandleTransitionProps = Omit<CommonProps, 'opened'>;
3
+ export declare const handleTransition: (transition: string) => (props: HandleTransitionProps) => string;
4
+ export {};
5
+ //# sourceMappingURL=handleTransition.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"handleTransition.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/utils/handleTransition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,aAAK,qBAAqB,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAEzD,eAAO,MAAM,gBAAgB,eAAgB,MAAM,aAAa,qBAAqB,KAAG,MAIvF,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { handleTransition } from './handleTransition';
2
+ export declare const DEFAULT_Z_INDEX = "0";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,eAAO,MAAM,eAAe,MAAM,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare const base: import("@linaria/core").LinariaClassName;
2
+ //# sourceMappingURL=base.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sheet/variations/_view/base.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,0CAAQ,CAAC"}
@@ -0,0 +1,11 @@
1
+ export declare const config: {
2
+ defaults: {
3
+ view: string;
4
+ };
5
+ variations: {
6
+ view: {
7
+ default: import("@linaria/core").LinariaClassName;
8
+ };
9
+ };
10
+ };
11
+ //# sourceMappingURL=Sheet.config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sheet.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Sheet/Sheet.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;CAclB,CAAC"}
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export { sheetClasses } from '../../../../components/Sheet';
3
+ export declare const Sheet: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
4
+ view: {
5
+ default: import("@linaria/core").LinariaClassName;
6
+ };
7
+ }> & import("../../../../components/Sheet").SheetProps & import("react").RefAttributes<HTMLDivElement>>;
8
+ //# sourceMappingURL=Sheet.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Sheet/Sheet.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,eAAO,MAAM,KAAK;;;;uGAA0B,CAAC"}
@@ -0,0 +1,11 @@
1
+ export declare const config: {
2
+ defaults: {
3
+ view: string;
4
+ };
5
+ variations: {
6
+ view: {
7
+ default: import("@linaria/core").LinariaClassName;
8
+ };
9
+ };
10
+ };
11
+ //# sourceMappingURL=Sheet.config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sheet.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Sheet/Sheet.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;CAclB,CAAC"}
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export { sheetClasses } from '../../../../components/Sheet';
3
+ export declare const Sheet: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
4
+ view: {
5
+ default: import("@linaria/core").LinariaClassName;
6
+ };
7
+ }> & import("../../../../components/Sheet").SheetProps & import("react").RefAttributes<HTMLDivElement>>;
8
+ //# sourceMappingURL=Sheet.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Sheet/Sheet.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,eAAO,MAAM,KAAK;;;;uGAA0B,CAAC"}
package/types/index.d.ts CHANGED
@@ -44,6 +44,7 @@ export * from './components/Progress';
44
44
  export * from './components/Select';
45
45
  export * from './components/Divider';
46
46
  export * from './components/Toolbar';
47
+ export * from './components/Sheet';
47
48
  export * from './components/Slider';
48
49
  export * from './components/Range';
49
50
  export * from './components/Accordion';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}