@alfalab/core-components-popup-sheet 2.0.0 → 2.1.0-snapshot-92b8690

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/components/backdrop/index.css +9 -9
  2. package/components/backdrop/index.module.css.js +1 -1
  3. package/components/backdrop/index.module.css.js.map +1 -1
  4. package/dynamic-mixins/Component.d.ts +58 -0
  5. package/dynamic-mixins/Component.js +138 -0
  6. package/dynamic-mixins/Component.js.map +1 -0
  7. package/dynamic-mixins/components/backdrop/Component.d.ts +13 -0
  8. package/dynamic-mixins/components/backdrop/Component.js +21 -0
  9. package/dynamic-mixins/components/backdrop/Component.js.map +1 -0
  10. package/dynamic-mixins/components/backdrop/index.css +21 -0
  11. package/dynamic-mixins/components/backdrop/index.d.ts +1 -0
  12. package/dynamic-mixins/components/backdrop/index.js +10 -0
  13. package/dynamic-mixins/components/backdrop/index.js.map +1 -0
  14. package/dynamic-mixins/components/backdrop/index.module.css.js +8 -0
  15. package/dynamic-mixins/components/backdrop/index.module.css.js.map +1 -0
  16. package/dynamic-mixins/index.css +42 -0
  17. package/dynamic-mixins/index.d.ts +2 -0
  18. package/dynamic-mixins/index.js +10 -0
  19. package/dynamic-mixins/index.js.map +1 -0
  20. package/dynamic-mixins/index.module.css.js +8 -0
  21. package/dynamic-mixins/index.module.css.js.map +1 -0
  22. package/dynamic-mixins/shared/index.d.ts +1 -0
  23. package/dynamic-mixins/shared/index.js +10 -0
  24. package/dynamic-mixins/shared/index.js.map +1 -0
  25. package/dynamic-mixins/utils.d.ts +4 -0
  26. package/dynamic-mixins/utils.js +15 -0
  27. package/dynamic-mixins/utils.js.map +1 -0
  28. package/esm/components/backdrop/index.css +9 -9
  29. package/esm/components/backdrop/index.module.css.js +1 -1
  30. package/esm/components/backdrop/index.module.css.js.map +1 -1
  31. package/esm/index.css +13 -13
  32. package/esm/index.module.css.js +1 -1
  33. package/esm/index.module.css.js.map +1 -1
  34. package/index.css +13 -13
  35. package/index.module.css.js +1 -1
  36. package/index.module.css.js.map +1 -1
  37. package/modern/components/backdrop/index.css +9 -9
  38. package/modern/components/backdrop/index.module.css.js +1 -1
  39. package/modern/components/backdrop/index.module.css.js.map +1 -1
  40. package/modern/index.css +13 -13
  41. package/modern/index.module.css.js +1 -1
  42. package/modern/index.module.css.js.map +1 -1
  43. package/moderncssm/components/backdrop/index.module.css +6 -0
  44. package/moderncssm/index.module.css +2 -0
  45. package/package.json +8 -8
  46. package/src/components/backdrop/index.module.css +1 -1
  47. package/src/index.module.css +1 -1
@@ -3,19 +3,19 @@
3
3
  } :root {
4
4
  --backdrop-visible-background: var(--color-light-overlay-default);
5
5
  --backdrop-hidden-background: transparent;
6
- } .popup-sheet__appear_1h1gt,
7
- .popup-sheet__enter_1h1gt {
6
+ } .popup-sheet__appear_7n48f,
7
+ .popup-sheet__enter_7n48f {
8
8
  background-color: var(--backdrop-hidden-background);
9
- } .popup-sheet__appearActive_1h1gt,
10
- .popup-sheet__enterActive_1h1gt,
11
- .popup-sheet__appearDone_1h1gt,
12
- .popup-sheet__enterDone_1h1gt {
9
+ } .popup-sheet__appearActive_7n48f,
10
+ .popup-sheet__enterActive_7n48f,
11
+ .popup-sheet__appearDone_7n48f,
12
+ .popup-sheet__enterDone_7n48f {
13
13
  background-color: var(--backdrop-visible-background);
14
14
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
15
- } .popup-sheet__exit_1h1gt {
15
+ } .popup-sheet__exit_7n48f {
16
16
  background-color: var(--backdrop-visible-background);
17
- } .popup-sheet__exitActive_1h1gt,
18
- .popup-sheet__exitDone_1h1gt {
17
+ } .popup-sheet__exitActive_7n48f,
18
+ .popup-sheet__exitDone_7n48f {
19
19
  background-color: var(--backdrop-hidden-background);
20
20
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
21
21
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"appear":"popup-sheet__appear_1h1gt","enter":"popup-sheet__enter_1h1gt","appearActive":"popup-sheet__appearActive_1h1gt","enterActive":"popup-sheet__enterActive_1h1gt","appearDone":"popup-sheet__appearDone_1h1gt","enterDone":"popup-sheet__enterDone_1h1gt","exit":"popup-sheet__exit_1h1gt","exitActive":"popup-sheet__exitActive_1h1gt","exitDone":"popup-sheet__exitDone_1h1gt"};
5
+ var styles = {"appear":"popup-sheet__appear_7n48f","enter":"popup-sheet__enter_7n48f","appearActive":"popup-sheet__appearActive_7n48f","enterActive":"popup-sheet__enterActive_7n48f","appearDone":"popup-sheet__appearDone_7n48f","enterDone":"popup-sheet__enterDone_7n48f","exit":"popup-sheet__exit_7n48f","exitActive":"popup-sheet__exitActive_7n48f","exitDone":"popup-sheet__exitDone_7n48f"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
@@ -0,0 +1,58 @@
1
+ import React, { KeyboardEvent, MouseEvent } from 'react';
2
+ import { BaseModalProps } from '@alfalab/core-components-base-modal';
3
+ import { CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';
4
+ import type { PaddingType } from '@alfalab/core-components-types';
5
+ export declare type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {
6
+ /**
7
+ * Наличие кнопки закрытия
8
+ */
9
+ hasCloser?: boolean;
10
+ /**
11
+ * Будет ли свайпаться шторка
12
+ */
13
+ swipeable?: boolean;
14
+ /**
15
+ * Отступы
16
+ */
17
+ padding?: PaddingType;
18
+ /**
19
+ * Обработчик закрытия
20
+ */
21
+ onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void;
22
+ /**
23
+ * Идентификатор для систем автоматизированного тестирования.
24
+ * Для кнопки закрытия используется модификатор -closer
25
+ */
26
+ dataTestId?: string;
27
+ /**
28
+ * Дополнительные пропсы для компонента Closer.
29
+ */
30
+ closerProps?: Omit<CloserProps, 'view' | 'onClose'>;
31
+ };
32
+ export declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalProps, "onClose" | "dataTestId"> & {
33
+ /**
34
+ * Наличие кнопки закрытия
35
+ */
36
+ hasCloser?: boolean | undefined;
37
+ /**
38
+ * Будет ли свайпаться шторка
39
+ */
40
+ swipeable?: boolean | undefined;
41
+ /**
42
+ * Отступы
43
+ */
44
+ padding?: PaddingType | undefined;
45
+ /**
46
+ * Обработчик закрытия
47
+ */
48
+ onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
49
+ /**
50
+ * Идентификатор для систем автоматизированного тестирования.
51
+ * Для кнопки закрытия используется модификатор -closer
52
+ */
53
+ dataTestId?: string | undefined;
54
+ /**
55
+ * Дополнительные пропсы для компонента Closer.
56
+ */
57
+ closerProps?: Omit<CloserProps, "onClose" | "view"> | undefined;
58
+ } & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,138 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib = require('tslib');
6
+ var React = require('react');
7
+ var reactSwipeable = require('react-swipeable');
8
+ var cn = require('classnames');
9
+ var dynamicMixins = require('@alfalab/core-components-base-modal/dynamic-mixins');
10
+ var shared = require('@alfalab/core-components-navigation-bar-private/dynamic-mixins/shared');
11
+ var dynamicMixins$1 = require('@alfalab/core-components-shared/dynamic-mixins');
12
+ var Component = require('./components/backdrop/Component.js');
13
+ var index_module = require('./index.module.css.js');
14
+
15
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
16
+
17
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
+
20
+ var SWIPE_VELOCITY = 0.3;
21
+ var CLOSE_OFFSET = 0.3;
22
+ var ANIMATION_DURATION = 350;
23
+ var DEFAULT_PADDING = 32;
24
+ var PopupSheet = React.forwardRef(function (_a, ref) {
25
+ var children = _a.children, hasCloser = _a.hasCloser, className = _a.className, onClose = _a.onClose, transitionProps = _a.transitionProps, contentProps = _a.contentProps, swipeable = _a.swipeable, dataTestId = _a.dataTestId, backdropProps = _a.backdropProps, _b = _a.padding, padding = _b === void 0 ? DEFAULT_PADDING : _b, _c = _a.closerProps, closerProps = _c === void 0 ? {} : _c, restProps = tslib.__rest(_a, ["children", "hasCloser", "className", "onClose", "transitionProps", "contentProps", "swipeable", "dataTestId", "backdropProps", "padding", "closerProps"]);
26
+ var _d = React.useState(0), sheetOffset = _d[0], setSheetOffset = _d[1];
27
+ var _e = React.useState(1), backdropOpacity = _e[0], setBackdropOpacity = _e[1];
28
+ var sheetHeight = React.useRef(0);
29
+ var sheetRef = React.useRef(null);
30
+ var bySwipeCloseAnimation = React.useRef(false);
31
+ var getSheetOffset = function (deltaY) { return Math.max(0, deltaY); };
32
+ var getBackdropOpacity = function (offset) {
33
+ return Math.max(0, 1 - offset / sheetHeight.current);
34
+ };
35
+ var getSwipeStyles = function () {
36
+ return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
37
+ };
38
+ var handleSwiping = function (_a) {
39
+ var deltaY = _a.deltaY;
40
+ var offset = getSheetOffset(deltaY);
41
+ setSheetOffset(offset);
42
+ setBackdropOpacity(getBackdropOpacity(offset));
43
+ };
44
+ var handleSwiped = function (_a) {
45
+ var deltaY = _a.deltaY, velocity = _a.velocity, event = _a.event;
46
+ var shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
47
+ var shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;
48
+ var offset = sheetOffset;
49
+ var animDuration = ANIMATION_DURATION / 2;
50
+ var start;
51
+ if (shouldCloseByVelocity || shouldCloseByOffset) {
52
+ bySwipeCloseAnimation.current = true;
53
+ onClose === null || onClose === void 0 ? void 0 : onClose(event, 'swipe');
54
+ var runLoop_1 = function (timeStamp) {
55
+ if (!start)
56
+ start = timeStamp;
57
+ var elapsedTime = timeStamp - start;
58
+ if (elapsedTime <= animDuration) {
59
+ var nextOffset = offset +
60
+ (sheetHeight.current - offset) *
61
+ dynamicMixins$1.easingFns.easeInOutQuad(elapsedTime / animDuration);
62
+ if (nextOffset > 0) {
63
+ setSheetOffset(nextOffset);
64
+ }
65
+ requestAnimationFrame(runLoop_1);
66
+ }
67
+ else {
68
+ setSheetOffset(0);
69
+ bySwipeCloseAnimation.current = false;
70
+ }
71
+ };
72
+ requestAnimationFrame(runLoop_1);
73
+ }
74
+ else {
75
+ var runLoop_2 = function (timeStamp) {
76
+ if (!start)
77
+ start = timeStamp;
78
+ var elapsedTime = timeStamp - start;
79
+ if (elapsedTime <= animDuration) {
80
+ var nextOffset = offset - offset * dynamicMixins$1.easingFns.easeInOutQuad(elapsedTime / animDuration);
81
+ if (nextOffset > 0) {
82
+ setSheetOffset(nextOffset);
83
+ setBackdropOpacity(getBackdropOpacity(nextOffset));
84
+ }
85
+ requestAnimationFrame(runLoop_2);
86
+ }
87
+ else {
88
+ setSheetOffset(0);
89
+ setBackdropOpacity(1);
90
+ }
91
+ };
92
+ requestAnimationFrame(runLoop_2);
93
+ }
94
+ };
95
+ var handleEntered = function (node, isAppearing) {
96
+ bySwipeCloseAnimation.current = false;
97
+ if (sheetRef.current) {
98
+ sheetHeight.current = sheetRef.current.offsetHeight;
99
+ }
100
+ if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onEntered) {
101
+ transitionProps.onEntered(node, isAppearing);
102
+ }
103
+ };
104
+ var handleExited = function (node) {
105
+ bySwipeCloseAnimation.current = false;
106
+ setSheetOffset(0);
107
+ setBackdropOpacity(1);
108
+ if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExited) {
109
+ transitionProps.onExited(node);
110
+ }
111
+ };
112
+ var sheetSwipeableHandlers = reactSwipeable.useSwipeable({
113
+ onSwiping: handleSwiping,
114
+ onSwiped: handleSwiped,
115
+ trackMouse: swipeable,
116
+ trackTouch: swipeable,
117
+ delta: 5,
118
+ });
119
+ return (React__default.default.createElement(dynamicMixins.BaseModal, tslib.__assign({}, restProps, { onClose: onClose, ref: ref, className: cn__default.default(index_module.component, className), dataTestId: dataTestId, Backdrop: Component.PopupBackdrop, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), { opacity: backdropOpacity }), transitionProps: tslib.__assign(tslib.__assign({ classNames: {
120
+ enter: index_module.enter,
121
+ appear: index_module.appear,
122
+ enterActive: index_module.enterActive,
123
+ appearActive: index_module.appearActive,
124
+ exit: bySwipeCloseAnimation.current ? index_module.exitBySwipe : index_module.exit,
125
+ exitActive: bySwipeCloseAnimation.current
126
+ ? index_module.exitActiveBySwipe
127
+ : index_module.exitActive,
128
+ }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: {
129
+ ref: sheetRef,
130
+ style: getSwipeStyles(),
131
+ }, contentProps: tslib.__assign(tslib.__assign(tslib.__assign({ style: dynamicMixins$1.createPaddingStyle(padding) }, contentProps), sheetSwipeableHandlers), { className: cn__default.default(index_module.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
132
+ hasCloser && (React__default.default.createElement(shared.Closer, tslib.__assign({ view: 'mobile', onClick: onClose, dataTestId: dynamicMixins$1.getDataTestId(dataTestId, 'closer') }, closerProps, { className: cn__default.default(index_module.closer, closerProps === null || closerProps === void 0 ? void 0 : closerProps.className) }))),
133
+ children));
134
+ });
135
+ PopupSheet.displayName = 'PopupSheet';
136
+
137
+ exports.PopupSheet = PopupSheet;
138
+ //# sourceMappingURL=Component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n useRef,\n useState,\n} from 'react';\nimport { SwipeCallback, useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { BaseModal, BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Closer, CloserProps } from '@alfalab/core-components-navigation-bar-private/shared';\nimport { createPaddingStyle, easingFns, getDataTestId } from '@alfalab/core-components-shared';\nimport type { PaddingType } from '@alfalab/core-components-types';\n\nimport { PopupBackdrop } from './components/backdrop';\n\nimport styles from './index.module.css';\n\nconst SWIPE_VELOCITY = 0.3;\nconst CLOSE_OFFSET = 0.3;\nconst ANIMATION_DURATION = 350;\n\nexport type PopupSheetProps = Omit<BaseModalProps, 'onClose' | 'dataTestId'> & {\n /**\n * Наличие кнопки закрытия\n */\n hasCloser?: boolean;\n\n /**\n * Будет ли свайпаться шторка\n */\n swipeable?: boolean;\n\n /**\n * Отступы\n */\n padding?: PaddingType;\n\n /**\n * Обработчик закрытия\n */\n onClose?: (\n event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe',\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n * Для кнопки закрытия используется модификатор -closer\n */\n dataTestId?: string;\n\n /**\n * Дополнительные пропсы для компонента Closer.\n */\n closerProps?: Omit<CloserProps, 'view' | 'onClose'>;\n};\n\nconst DEFAULT_PADDING = 32;\n\nexport const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(\n (\n {\n children,\n hasCloser,\n className,\n onClose,\n transitionProps,\n contentProps,\n swipeable,\n dataTestId,\n backdropProps,\n padding = DEFAULT_PADDING,\n closerProps = {},\n ...restProps\n },\n ref,\n ) => {\n const [sheetOffset, setSheetOffset] = useState(0);\n const [backdropOpacity, setBackdropOpacity] = useState(1);\n\n const sheetHeight = useRef(0);\n const sheetRef = useRef<HTMLDivElement>(null);\n const bySwipeCloseAnimation = useRef(false);\n\n const getSheetOffset = (deltaY: number): number => Math.max(0, deltaY);\n\n const getBackdropOpacity = (offset: number): number =>\n Math.max(0, 1 - offset / sheetHeight.current);\n\n const getSwipeStyles = (): CSSProperties =>\n sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};\n\n const handleSwiping: SwipeCallback = ({ deltaY }) => {\n const offset = getSheetOffset(deltaY);\n\n setSheetOffset(offset);\n setBackdropOpacity(getBackdropOpacity(offset));\n };\n\n const handleSwiped: SwipeCallback = ({ deltaY, velocity, event }) => {\n const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;\n const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;\n\n const offset = sheetOffset;\n const animDuration = ANIMATION_DURATION / 2;\n let start: number;\n\n if (shouldCloseByVelocity || shouldCloseByOffset) {\n bySwipeCloseAnimation.current = true;\n onClose?.(event as MouseEvent<HTMLElement>, 'swipe');\n\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset +\n (sheetHeight.current - offset) *\n easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n bySwipeCloseAnimation.current = false;\n }\n };\n\n requestAnimationFrame(runLoop);\n } else {\n const runLoop = (timeStamp: number) => {\n if (!start) start = timeStamp;\n const elapsedTime = timeStamp - start;\n\n if (elapsedTime <= animDuration) {\n const nextOffset =\n offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);\n\n if (nextOffset > 0) {\n setSheetOffset(nextOffset);\n setBackdropOpacity(getBackdropOpacity(nextOffset));\n }\n requestAnimationFrame(runLoop);\n } else {\n setSheetOffset(0);\n setBackdropOpacity(1);\n }\n };\n\n requestAnimationFrame(runLoop);\n }\n };\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n bySwipeCloseAnimation.current = false;\n if (sheetRef.current) {\n sheetHeight.current = sheetRef.current.offsetHeight;\n }\n\n if (transitionProps?.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const handleExited = (node: HTMLElement) => {\n bySwipeCloseAnimation.current = false;\n setSheetOffset(0);\n setBackdropOpacity(1);\n\n if (transitionProps?.onExited) {\n transitionProps.onExited(node);\n }\n };\n\n const sheetSwipeableHandlers = useSwipeable({\n onSwiping: handleSwiping,\n onSwiped: handleSwiped,\n trackMouse: swipeable,\n trackTouch: swipeable,\n delta: 5,\n });\n\n return (\n <BaseModal\n {...restProps}\n onClose={onClose}\n ref={ref}\n className={cn(styles.component, className)}\n dataTestId={dataTestId}\n Backdrop={PopupBackdrop}\n backdropProps={{\n ...backdropProps,\n opacity: backdropOpacity,\n }}\n transitionProps={{\n classNames: {\n enter: styles.enter,\n appear: styles.appear,\n enterActive: styles.enterActive,\n appearActive: styles.appearActive,\n exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,\n exitActive: bySwipeCloseAnimation.current\n ? styles.exitActiveBySwipe\n : styles.exitActive,\n },\n timeout: ANIMATION_DURATION,\n ...transitionProps,\n onEntered: handleEntered,\n onExited: handleExited,\n }}\n componentDivProps={{\n ref: sheetRef,\n style: getSwipeStyles(),\n }}\n contentProps={{\n style: createPaddingStyle(padding),\n ...contentProps,\n ...sheetSwipeableHandlers,\n className: cn(styles.content, contentProps?.className),\n }}\n >\n {hasCloser && (\n <Closer\n view='mobile'\n onClick={onClose}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n {...closerProps}\n className={cn(styles.closer, closerProps?.className)}\n />\n )}\n {children}\n </BaseModal>\n );\n },\n);\n\nPopupSheet.displayName = 'PopupSheet';\n"],"names":["forwardRef","__rest","useState","useRef","easingFns","useSwipeable","React","BaseModal","__assign","cn","styles","PopupBackdrop","createPaddingStyle","Closer","getDataTestId"],"mappings":"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"}
@@ -0,0 +1,13 @@
1
+ import { FC } from 'react';
2
+ import { BackdropProps } from '@alfalab/core-components-backdrop';
3
+ export declare type PopupBackdropProps = BackdropProps & {
4
+ /**
5
+ * Прозрачность бэкдропа
6
+ */
7
+ opacity?: number;
8
+ /**
9
+ * Время анимации opacity
10
+ */
11
+ opacityTimeout?: number;
12
+ };
13
+ export declare const PopupBackdrop: FC<BackdropProps>;
@@ -0,0 +1,21 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib = require('tslib');
6
+ var React = require('react');
7
+ var dynamicMixins = require('@alfalab/core-components-backdrop/dynamic-mixins');
8
+ var index_module = require('./index.module.css.js');
9
+
10
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
11
+
12
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
13
+
14
+ var PopupBackdrop = function (_a) {
15
+ var opacity = _a.opacity, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = tslib.__rest(_a, ["opacity", "opacityTimeout", "style"]);
16
+ return (React__default.default.createElement("div", { style: tslib.__assign({ opacity: opacity, transition: opacity === 1 ? "opacity ".concat(opacityTimeout, "ms ease-in-out") : '', position: 'relative' }, style) },
17
+ React__default.default.createElement(dynamicMixins.Backdrop, tslib.__assign({ transitionClassNames: index_module }, backdropProps))));
18
+ };
19
+
20
+ exports.PopupBackdrop = PopupBackdrop;
21
+ //# sourceMappingURL=Component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/backdrop/Component.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Backdrop, BackdropProps } from '@alfalab/core-components-backdrop';\n\nimport styles from './index.module.css';\n\nexport type PopupBackdropProps = BackdropProps & {\n /**\n * Прозрачность бэкдропа\n */\n opacity?: number;\n\n /**\n * Время анимации opacity\n */\n opacityTimeout?: number;\n};\n\nexport const PopupBackdrop: FC<BackdropProps> = ({\n opacity,\n opacityTimeout,\n style,\n ...backdropProps\n}) => (\n <div\n style={{\n opacity,\n transition: opacity === 1 ? `opacity ${opacityTimeout}ms ease-in-out` : '',\n position: 'relative',\n ...style,\n }}\n >\n <Backdrop transitionClassNames={styles} {...backdropProps} />\n </div>\n);\n"],"names":["__rest","React","__assign","Backdrop","styles"],"mappings":";;;;;;;;;;;;;AAkBO,IAAM,aAAa,GAAsB,UAAC,EAKhD,EAAA;AAJG,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,KAAK,GAAA,EAAA,CAAA,KAAA,EACF,aAAa,GAJ6BA,YAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,OAAA,CAKhD,CADmB;IACd,QACFC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EACDC,cAAA,CAAA,EAAA,OAAO,EAAA,OAAA,EACP,UAAU,EAAE,OAAO,KAAK,CAAC,GAAG,UAAW,CAAA,MAAA,CAAA,cAAc,EAAgB,gBAAA,CAAA,GAAG,EAAE,EAC1E,QAAQ,EAAE,UAAU,EAAA,EACjB,KAAK,CAAA,EAAA;QAGZD,sBAAC,CAAA,aAAA,CAAAE,sBAAQ,EAACD,cAAA,CAAA,EAAA,oBAAoB,EAAEE,YAAM,IAAM,aAAa,CAAA,CAAI,CAC3D;;;;;"}
@@ -0,0 +1,21 @@
1
+ :root {
2
+ --color-light-overlay-default: rgba(0, 0, 0, 0.6);
3
+ } :root {
4
+ --backdrop-visible-background: var(--color-light-overlay-default);
5
+ --backdrop-hidden-background: transparent;
6
+ } .popup-sheet__appear_7n48f,
7
+ .popup-sheet__enter_7n48f {
8
+ background-color: var(--backdrop-hidden-background);
9
+ } .popup-sheet__appearActive_7n48f,
10
+ .popup-sheet__enterActive_7n48f,
11
+ .popup-sheet__appearDone_7n48f,
12
+ .popup-sheet__enterDone_7n48f {
13
+ background-color: var(--backdrop-visible-background);
14
+ transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
15
+ } .popup-sheet__exit_7n48f {
16
+ background-color: var(--backdrop-visible-background);
17
+ } .popup-sheet__exitActive_7n48f,
18
+ .popup-sheet__exitDone_7n48f {
19
+ background-color: var(--backdrop-hidden-background);
20
+ transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
21
+ }
@@ -0,0 +1 @@
1
+ export { PopupBackdrop } from './Component';
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var Component = require('./Component.js');
6
+
7
+
8
+
9
+ exports.PopupBackdrop = Component.PopupBackdrop;
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ require('./index.css');
4
+
5
+ var styles = {"appear":"popup-sheet__appear_7n48f","enter":"popup-sheet__enter_7n48f","appearActive":"popup-sheet__appearActive_7n48f","enterActive":"popup-sheet__enterActive_7n48f","appearDone":"popup-sheet__appearDone_7n48f","enterDone":"popup-sheet__enterDone_7n48f","exit":"popup-sheet__exit_7n48f","exitActive":"popup-sheet__exitActive_7n48f","exitDone":"popup-sheet__exitDone_7n48f"};
6
+
7
+ module.exports = styles;
8
+ //# sourceMappingURL=index.module.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
@@ -0,0 +1,42 @@
1
+ :root {
2
+ --border-radius-36: 36px;
3
+ } :root {
4
+ --gap-xs: 8px;
5
+ --gap-0: 0px;
6
+ --gap-8: var(--gap-xs);
7
+ } .popup-sheet__component_152cl {
8
+ position: fixed;
9
+ bottom: var(--gap-0);
10
+ margin: auto var(--gap-8) var(--gap-8);
11
+ width: calc(100% - 2 * var(--gap-8));
12
+ max-width: 600px;
13
+ border-radius: var(--border-radius-36);
14
+ overflow: hidden;
15
+ } .popup-sheet__closer_152cl {
16
+ position: absolute;
17
+ top: var(--gap-8);
18
+ right: var(--gap-8)
19
+ } .popup-sheet__closer_152cl > button {
20
+ -webkit-backdrop-filter: none;
21
+ backdrop-filter: none;
22
+ } .popup-sheet__content_152cl {
23
+ box-sizing: border-box;
24
+ } .popup-sheet__appear_152cl,
25
+ .popup-sheet__enter_152cl {
26
+ transform: translateY(calc(100% + 100px));
27
+ } .popup-sheet__appearActive_152cl,
28
+ .popup-sheet__enterActive_152cl {
29
+ transform: translateY(0);
30
+ transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
31
+ transition-delay: 50ms;
32
+ } .popup-sheet__exit_152cl {
33
+ transform: translateY(0);
34
+ } .popup-sheet__exitBySwipe_152cl {
35
+ transform: translateY(calc(100% + 100px));
36
+ } .popup-sheet__exitActiveBySwipe_152cl {
37
+ transition: none;
38
+ } .popup-sheet__exitActive_152cl,
39
+ .popup-sheet__exitDone_152cl {
40
+ transform: translateY(calc(100% + 100px));
41
+ transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
42
+ }
@@ -0,0 +1,2 @@
1
+ export { PopupSheet } from './Component';
2
+ export type { PopupSheetProps } from './Component';
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var Component = require('./Component.js');
6
+
7
+
8
+
9
+ exports.PopupSheet = Component.PopupSheet;
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ require('./index.css');
4
+
5
+ var styles = {"component":"popup-sheet__component_152cl","closer":"popup-sheet__closer_152cl","content":"popup-sheet__content_152cl","appear":"popup-sheet__appear_152cl","enter":"popup-sheet__enter_152cl","appearActive":"popup-sheet__appearActive_152cl","enterActive":"popup-sheet__enterActive_152cl","exit":"popup-sheet__exit_152cl","exitBySwipe":"popup-sheet__exitBySwipe_152cl","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_152cl","exitActive":"popup-sheet__exitActive_152cl"};
6
+
7
+ module.exports = styles;
8
+ //# sourceMappingURL=index.module.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
@@ -0,0 +1 @@
1
+ export { getPopupSheetTestIds } from '../utils';
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var utils = require('../utils.js');
6
+
7
+
8
+
9
+ exports.getPopupSheetTestIds = utils.getPopupSheetTestIds;
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -0,0 +1,4 @@
1
+ export declare function getPopupSheetTestIds(dataTestId: string): {
2
+ popupSheet: string;
3
+ closer: string;
4
+ };
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var dynamicMixins = require('@alfalab/core-components-shared/dynamic-mixins');
6
+
7
+ function getPopupSheetTestIds(dataTestId) {
8
+ return {
9
+ popupSheet: dataTestId,
10
+ closer: dynamicMixins.getDataTestId(dataTestId, 'closer'),
11
+ };
12
+ }
13
+
14
+ exports.getPopupSheetTestIds = getPopupSheetTestIds;
15
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getPopupSheetTestIds(dataTestId: string) {\n return {\n popupSheet: dataTestId,\n closer: getDataTestId(dataTestId, 'closer'),\n };\n}\n"],"names":["getDataTestId"],"mappings":";;;;;;AAEM,SAAU,oBAAoB,CAAC,UAAkB,EAAA;IACnD,OAAO;AACH,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,MAAM,EAAEA,2BAAa,CAAC,UAAU,EAAE,QAAQ,CAAC;KAC9C;AACL;;;;"}
@@ -3,19 +3,19 @@
3
3
  } :root {
4
4
  --backdrop-visible-background: var(--color-light-overlay-default);
5
5
  --backdrop-hidden-background: transparent;
6
- } .popup-sheet__appear_1h1gt,
7
- .popup-sheet__enter_1h1gt {
6
+ } .popup-sheet__appear_7n48f,
7
+ .popup-sheet__enter_7n48f {
8
8
  background-color: var(--backdrop-hidden-background);
9
- } .popup-sheet__appearActive_1h1gt,
10
- .popup-sheet__enterActive_1h1gt,
11
- .popup-sheet__appearDone_1h1gt,
12
- .popup-sheet__enterDone_1h1gt {
9
+ } .popup-sheet__appearActive_7n48f,
10
+ .popup-sheet__enterActive_7n48f,
11
+ .popup-sheet__appearDone_7n48f,
12
+ .popup-sheet__enterDone_7n48f {
13
13
  background-color: var(--backdrop-visible-background);
14
14
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
15
- } .popup-sheet__exit_1h1gt {
15
+ } .popup-sheet__exit_7n48f {
16
16
  background-color: var(--backdrop-visible-background);
17
- } .popup-sheet__exitActive_1h1gt,
18
- .popup-sheet__exitDone_1h1gt {
17
+ } .popup-sheet__exitActive_7n48f,
18
+ .popup-sheet__exitDone_7n48f {
19
19
  background-color: var(--backdrop-hidden-background);
20
20
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
21
21
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"appear":"popup-sheet__appear_1h1gt","enter":"popup-sheet__enter_1h1gt","appearActive":"popup-sheet__appearActive_1h1gt","enterActive":"popup-sheet__enterActive_1h1gt","appearDone":"popup-sheet__appearDone_1h1gt","enterDone":"popup-sheet__enterDone_1h1gt","exit":"popup-sheet__exit_1h1gt","exitActive":"popup-sheet__exitActive_1h1gt","exitDone":"popup-sheet__exitDone_1h1gt"};
3
+ var styles = {"appear":"popup-sheet__appear_7n48f","enter":"popup-sheet__enter_7n48f","appearActive":"popup-sheet__appearActive_7n48f","enterActive":"popup-sheet__enterActive_7n48f","appearDone":"popup-sheet__appearDone_7n48f","enterDone":"popup-sheet__enterDone_7n48f","exit":"popup-sheet__exit_7n48f","exitActive":"popup-sheet__exitActive_7n48f","exitDone":"popup-sheet__exitDone_7n48f"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
package/esm/index.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --gap-xs: 8px;
5
5
  --gap-0: 0px;
6
6
  --gap-8: var(--gap-xs);
7
- } .popup-sheet__component_e7hgx {
7
+ } .popup-sheet__component_152cl {
8
8
  position: fixed;
9
9
  bottom: var(--gap-0);
10
10
  margin: auto var(--gap-8) var(--gap-8);
@@ -12,31 +12,31 @@
12
12
  max-width: 600px;
13
13
  border-radius: var(--border-radius-36);
14
14
  overflow: hidden;
15
- } .popup-sheet__closer_e7hgx {
15
+ } .popup-sheet__closer_152cl {
16
16
  position: absolute;
17
17
  top: var(--gap-8);
18
18
  right: var(--gap-8)
19
- } .popup-sheet__closer_e7hgx > button {
19
+ } .popup-sheet__closer_152cl > button {
20
20
  -webkit-backdrop-filter: none;
21
21
  backdrop-filter: none;
22
- } .popup-sheet__content_e7hgx {
22
+ } .popup-sheet__content_152cl {
23
23
  box-sizing: border-box;
24
- } .popup-sheet__appear_e7hgx,
25
- .popup-sheet__enter_e7hgx {
24
+ } .popup-sheet__appear_152cl,
25
+ .popup-sheet__enter_152cl {
26
26
  transform: translateY(calc(100% + 100px));
27
- } .popup-sheet__appearActive_e7hgx,
28
- .popup-sheet__enterActive_e7hgx {
27
+ } .popup-sheet__appearActive_152cl,
28
+ .popup-sheet__enterActive_152cl {
29
29
  transform: translateY(0);
30
30
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
31
31
  transition-delay: 50ms;
32
- } .popup-sheet__exit_e7hgx {
32
+ } .popup-sheet__exit_152cl {
33
33
  transform: translateY(0);
34
- } .popup-sheet__exitBySwipe_e7hgx {
34
+ } .popup-sheet__exitBySwipe_152cl {
35
35
  transform: translateY(calc(100% + 100px));
36
- } .popup-sheet__exitActiveBySwipe_e7hgx {
36
+ } .popup-sheet__exitActiveBySwipe_152cl {
37
37
  transition: none;
38
- } .popup-sheet__exitActive_e7hgx,
39
- .popup-sheet__exitDone_e7hgx {
38
+ } .popup-sheet__exitActive_152cl,
39
+ .popup-sheet__exitDone_152cl {
40
40
  transform: translateY(calc(100% + 100px));
41
41
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
42
42
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"popup-sheet__component_e7hgx","closer":"popup-sheet__closer_e7hgx","content":"popup-sheet__content_e7hgx","appear":"popup-sheet__appear_e7hgx","enter":"popup-sheet__enter_e7hgx","appearActive":"popup-sheet__appearActive_e7hgx","enterActive":"popup-sheet__enterActive_e7hgx","exit":"popup-sheet__exit_e7hgx","exitBySwipe":"popup-sheet__exitBySwipe_e7hgx","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_e7hgx","exitActive":"popup-sheet__exitActive_e7hgx"};
3
+ var styles = {"component":"popup-sheet__component_152cl","closer":"popup-sheet__closer_152cl","content":"popup-sheet__content_152cl","appear":"popup-sheet__appear_152cl","enter":"popup-sheet__enter_152cl","appearActive":"popup-sheet__appearActive_152cl","enterActive":"popup-sheet__enterActive_152cl","exit":"popup-sheet__exit_152cl","exitBySwipe":"popup-sheet__exitBySwipe_152cl","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_152cl","exitActive":"popup-sheet__exitActive_152cl"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
package/index.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --gap-xs: 8px;
5
5
  --gap-0: 0px;
6
6
  --gap-8: var(--gap-xs);
7
- } .popup-sheet__component_e7hgx {
7
+ } .popup-sheet__component_152cl {
8
8
  position: fixed;
9
9
  bottom: var(--gap-0);
10
10
  margin: auto var(--gap-8) var(--gap-8);
@@ -12,31 +12,31 @@
12
12
  max-width: 600px;
13
13
  border-radius: var(--border-radius-36);
14
14
  overflow: hidden;
15
- } .popup-sheet__closer_e7hgx {
15
+ } .popup-sheet__closer_152cl {
16
16
  position: absolute;
17
17
  top: var(--gap-8);
18
18
  right: var(--gap-8)
19
- } .popup-sheet__closer_e7hgx > button {
19
+ } .popup-sheet__closer_152cl > button {
20
20
  -webkit-backdrop-filter: none;
21
21
  backdrop-filter: none;
22
- } .popup-sheet__content_e7hgx {
22
+ } .popup-sheet__content_152cl {
23
23
  box-sizing: border-box;
24
- } .popup-sheet__appear_e7hgx,
25
- .popup-sheet__enter_e7hgx {
24
+ } .popup-sheet__appear_152cl,
25
+ .popup-sheet__enter_152cl {
26
26
  transform: translateY(calc(100% + 100px));
27
- } .popup-sheet__appearActive_e7hgx,
28
- .popup-sheet__enterActive_e7hgx {
27
+ } .popup-sheet__appearActive_152cl,
28
+ .popup-sheet__enterActive_152cl {
29
29
  transform: translateY(0);
30
30
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
31
31
  transition-delay: 50ms;
32
- } .popup-sheet__exit_e7hgx {
32
+ } .popup-sheet__exit_152cl {
33
33
  transform: translateY(0);
34
- } .popup-sheet__exitBySwipe_e7hgx {
34
+ } .popup-sheet__exitBySwipe_152cl {
35
35
  transform: translateY(calc(100% + 100px));
36
- } .popup-sheet__exitActiveBySwipe_e7hgx {
36
+ } .popup-sheet__exitActiveBySwipe_152cl {
37
37
  transition: none;
38
- } .popup-sheet__exitActive_e7hgx,
39
- .popup-sheet__exitDone_e7hgx {
38
+ } .popup-sheet__exitActive_152cl,
39
+ .popup-sheet__exitDone_152cl {
40
40
  transform: translateY(calc(100% + 100px));
41
41
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
42
42
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"popup-sheet__component_e7hgx","closer":"popup-sheet__closer_e7hgx","content":"popup-sheet__content_e7hgx","appear":"popup-sheet__appear_e7hgx","enter":"popup-sheet__enter_e7hgx","appearActive":"popup-sheet__appearActive_e7hgx","enterActive":"popup-sheet__enterActive_e7hgx","exit":"popup-sheet__exit_e7hgx","exitBySwipe":"popup-sheet__exitBySwipe_e7hgx","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_e7hgx","exitActive":"popup-sheet__exitActive_e7hgx"};
5
+ var styles = {"component":"popup-sheet__component_152cl","closer":"popup-sheet__closer_152cl","content":"popup-sheet__content_152cl","appear":"popup-sheet__appear_152cl","enter":"popup-sheet__enter_152cl","appearActive":"popup-sheet__appearActive_152cl","enterActive":"popup-sheet__enterActive_152cl","exit":"popup-sheet__exit_152cl","exitBySwipe":"popup-sheet__exitBySwipe_152cl","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_152cl","exitActive":"popup-sheet__exitActive_152cl"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
@@ -3,19 +3,19 @@
3
3
  } :root {
4
4
  --backdrop-visible-background: var(--color-light-overlay-default);
5
5
  --backdrop-hidden-background: transparent;
6
- } .popup-sheet__appear_1h1gt,
7
- .popup-sheet__enter_1h1gt {
6
+ } .popup-sheet__appear_7n48f,
7
+ .popup-sheet__enter_7n48f {
8
8
  background-color: var(--backdrop-hidden-background);
9
- } .popup-sheet__appearActive_1h1gt,
10
- .popup-sheet__enterActive_1h1gt,
11
- .popup-sheet__appearDone_1h1gt,
12
- .popup-sheet__enterDone_1h1gt {
9
+ } .popup-sheet__appearActive_7n48f,
10
+ .popup-sheet__enterActive_7n48f,
11
+ .popup-sheet__appearDone_7n48f,
12
+ .popup-sheet__enterDone_7n48f {
13
13
  background-color: var(--backdrop-visible-background);
14
14
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
15
- } .popup-sheet__exit_1h1gt {
15
+ } .popup-sheet__exit_7n48f {
16
16
  background-color: var(--backdrop-visible-background);
17
- } .popup-sheet__exitActive_1h1gt,
18
- .popup-sheet__exitDone_1h1gt {
17
+ } .popup-sheet__exitActive_7n48f,
18
+ .popup-sheet__exitDone_7n48f {
19
19
  background-color: var(--backdrop-hidden-background);
20
20
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
21
21
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"appear":"popup-sheet__appear_1h1gt","enter":"popup-sheet__enter_1h1gt","appearActive":"popup-sheet__appearActive_1h1gt","enterActive":"popup-sheet__enterActive_1h1gt","appearDone":"popup-sheet__appearDone_1h1gt","enterDone":"popup-sheet__enterDone_1h1gt","exit":"popup-sheet__exit_1h1gt","exitActive":"popup-sheet__exitActive_1h1gt","exitDone":"popup-sheet__exitDone_1h1gt"};
3
+ const styles = {"appear":"popup-sheet__appear_7n48f","enter":"popup-sheet__enter_7n48f","appearActive":"popup-sheet__appearActive_7n48f","enterActive":"popup-sheet__enterActive_7n48f","appearDone":"popup-sheet__appearDone_7n48f","enterDone":"popup-sheet__enterDone_7n48f","exit":"popup-sheet__exit_7n48f","exitActive":"popup-sheet__exitActive_7n48f","exitDone":"popup-sheet__exitDone_7n48f"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/backdrop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../../../backdrop/src/vars.css';\n\n.appear,\n.enter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.appearActive,\n.enterActive,\n.appearDone,\n.enterDone {\n background-color: var(--backdrop-visible-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.exit {\n background-color: var(--backdrop-visible-background);\n}\n\n.exitActive,\n.exitDone {\n background-color: var(--backdrop-hidden-background);\n transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,YAAY,CAAC,+BAA+B,CAAC,WAAW,CAAC,8BAA8B,CAAC,MAAM,CAAC,yBAAyB,CAAC,YAAY,CAAC,+BAA+B,CAAC,UAAU,CAAC,6BAA6B,CAAC;;;;"}
package/modern/index.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --gap-xs: 8px;
5
5
  --gap-0: 0px;
6
6
  --gap-8: var(--gap-xs);
7
- } .popup-sheet__component_e7hgx {
7
+ } .popup-sheet__component_152cl {
8
8
  position: fixed;
9
9
  bottom: var(--gap-0);
10
10
  margin: auto var(--gap-8) var(--gap-8);
@@ -12,31 +12,31 @@
12
12
  max-width: 600px;
13
13
  border-radius: var(--border-radius-36);
14
14
  overflow: hidden;
15
- } .popup-sheet__closer_e7hgx {
15
+ } .popup-sheet__closer_152cl {
16
16
  position: absolute;
17
17
  top: var(--gap-8);
18
18
  right: var(--gap-8)
19
- } .popup-sheet__closer_e7hgx > button {
19
+ } .popup-sheet__closer_152cl > button {
20
20
  -webkit-backdrop-filter: none;
21
21
  backdrop-filter: none;
22
- } .popup-sheet__content_e7hgx {
22
+ } .popup-sheet__content_152cl {
23
23
  box-sizing: border-box;
24
- } .popup-sheet__appear_e7hgx,
25
- .popup-sheet__enter_e7hgx {
24
+ } .popup-sheet__appear_152cl,
25
+ .popup-sheet__enter_152cl {
26
26
  transform: translateY(calc(100% + 100px));
27
- } .popup-sheet__appearActive_e7hgx,
28
- .popup-sheet__enterActive_e7hgx {
27
+ } .popup-sheet__appearActive_152cl,
28
+ .popup-sheet__enterActive_152cl {
29
29
  transform: translateY(0);
30
30
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
31
31
  transition-delay: 50ms;
32
- } .popup-sheet__exit_e7hgx {
32
+ } .popup-sheet__exit_152cl {
33
33
  transform: translateY(0);
34
- } .popup-sheet__exitBySwipe_e7hgx {
34
+ } .popup-sheet__exitBySwipe_152cl {
35
35
  transform: translateY(calc(100% + 100px));
36
- } .popup-sheet__exitActiveBySwipe_e7hgx {
36
+ } .popup-sheet__exitActiveBySwipe_152cl {
37
37
  transition: none;
38
- } .popup-sheet__exitActive_e7hgx,
39
- .popup-sheet__exitDone_e7hgx {
38
+ } .popup-sheet__exitActive_152cl,
39
+ .popup-sheet__exitDone_152cl {
40
40
  transform: translateY(calc(100% + 100px));
41
41
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
42
42
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"popup-sheet__component_e7hgx","closer":"popup-sheet__closer_e7hgx","content":"popup-sheet__content_e7hgx","appear":"popup-sheet__appear_e7hgx","enter":"popup-sheet__enter_e7hgx","appearActive":"popup-sheet__appearActive_e7hgx","enterActive":"popup-sheet__enterActive_e7hgx","exit":"popup-sheet__exit_e7hgx","exitBySwipe":"popup-sheet__exitBySwipe_e7hgx","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_e7hgx","exitActive":"popup-sheet__exitActive_e7hgx"};
3
+ const styles = {"component":"popup-sheet__component_152cl","closer":"popup-sheet__closer_152cl","content":"popup-sheet__content_152cl","appear":"popup-sheet__appear_152cl","enter":"popup-sheet__enter_152cl","appearActive":"popup-sheet__appearActive_152cl","enterActive":"popup-sheet__enterActive_152cl","exit":"popup-sheet__exit_152cl","exitBySwipe":"popup-sheet__exitBySwipe_152cl","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_152cl","exitActive":"popup-sheet__exitActive_152cl"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n position: fixed;\n bottom: var(--gap-0);\n margin: auto var(--gap-8) var(--gap-8);\n width: calc(100% - 2 * var(--gap-8));\n max-width: 600px;\n border-radius: var(--border-radius-36);\n overflow: hidden;\n}\n\n.closer {\n position: absolute;\n top: var(--gap-8);\n right: var(--gap-8);\n\n & > button {\n backdrop-filter: none;\n }\n}\n\n.content {\n box-sizing: border-box;\n}\n\n/* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */\n.appear,\n.enter {\n transform: translateY(calc(100% + 100px));\n}\n\n.appearActive,\n.enterActive {\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-delay: 50ms;\n}\n\n.exit {\n transform: translateY(0);\n}\n\n.exitBySwipe {\n transform: translateY(calc(100% + 100px));\n}\n\n.exitActiveBySwipe {\n transition: none;\n}\n\n.exitActive,\n.exitDone {\n transform: translateY(calc(100% + 100px));\n transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,8BAA8B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,SAAS,CAAC,4BAA4B,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,iCAAiC,CAAC,aAAa,CAAC,gCAAgC,CAAC,MAAM,CAAC,yBAAyB,CAAC,aAAa,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,sCAAsC,CAAC,YAAY,CAAC,+BAAwE,CAAC;;;;"}
@@ -1,11 +1,15 @@
1
+
2
+
1
3
  :root {
2
4
  --backdrop-visible-background: var(--color-light-overlay-default);
3
5
  --backdrop-hidden-background: transparent;
4
6
  }
7
+
5
8
  .appear,
6
9
  .enter {
7
10
  background-color: var(--backdrop-hidden-background);
8
11
  }
12
+
9
13
  .appearActive,
10
14
  .enterActive,
11
15
  .appearDone,
@@ -13,9 +17,11 @@
13
17
  background-color: var(--backdrop-visible-background);
14
18
  transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
15
19
  }
20
+
16
21
  .exit {
17
22
  background-color: var(--backdrop-visible-background);
18
23
  }
24
+
19
25
  .exitActive,
20
26
  .exitDone {
21
27
  background-color: var(--backdrop-hidden-background);
@@ -1,3 +1,5 @@
1
+
2
+
1
3
  .component {
2
4
  position: fixed;
3
5
  bottom: var(--gap-0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popup-sheet",
3
- "version": "2.0.0",
3
+ "version": "2.1.0-snapshot-92b8690",
4
4
  "description": "Popup sheet mobile component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,11 +10,11 @@
10
10
  "main": "index.js",
11
11
  "module": "./esm/index.js",
12
12
  "dependencies": {
13
- "@alfalab/core-components-backdrop": "^4.0.0",
14
- "@alfalab/core-components-base-modal": "^6.0.0",
15
- "@alfalab/core-components-navigation-bar-private": "^1.0.0",
16
- "@alfalab/core-components-shared": "^1.0.0",
17
- "@alfalab/core-components-types": "^1.0.0",
13
+ "@alfalab/core-components-backdrop": "4.1.0-snapshot-92b8690",
14
+ "@alfalab/core-components-base-modal": "6.1.0-snapshot-92b8690",
15
+ "@alfalab/core-components-navigation-bar-private": "1.1.0-snapshot-92b8690",
16
+ "@alfalab/core-components-shared": "1.1.0-snapshot-92b8690",
17
+ "@alfalab/core-components-types": "1.1.0-snapshot-92b8690",
18
18
  "classnames": "^2.5.1",
19
19
  "react-swipeable": "^7.0.0",
20
20
  "tslib": "^2.4.0"
@@ -27,6 +27,6 @@
27
27
  "access": "public",
28
28
  "directory": "dist"
29
29
  },
30
- "themesVersion": "14.0.0",
31
- "varsVersion": "10.0.0"
30
+ "themesVersion": "14.1.0-snapshot-92b8690",
31
+ "varsVersion": "10.1.0-snapshot-92b8690"
32
32
  }
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/index.css';
1
+ @import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
2
2
  @import '../../../../backdrop/src/vars.css';
3
3
 
4
4
  .appear,
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/index.css';
1
+ @import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
2
2
 
3
3
  .component {
4
4
  position: fixed;