@alfalab/core-components-popup-sheet 1.0.0

package/Component-9211a437.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { BaseButtonProps } from "./typings-9211a437";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { KeyboardEvent, MouseEvent } from "react";
+import { BaseModalProps } from "@alfalab/core-components-base-modal";
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type PopupSheetProps = Omit<BaseModalProps, 'onClose'> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean;
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean;
+    /**
+     * Отступы
+     */
+    padding?: PaddingType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void;
+};
+declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalProps, "onClose"> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean | undefined;
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean | undefined;
+    /**
+     * Отступы
+     */
+    padding?: PaddingType | undefined;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { PopupSheetProps, PopupSheet };

package/Component.desktop-2e2b2125.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

package/Component.js

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactSwipeable = require('react-swipeable');
+var cn = require('classnames');
+var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
+var shared = require('@alfalab/core-components-navigation-bar/shared');
+var coreComponentsShared = require('@alfalab/core-components-shared');
+var components_backdrop_Component = require('./components/backdrop/Component.js');
+require('@alfalab/core-components-backdrop');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"popup-sheet__component_18ukp","closer":"popup-sheet__closer_18ukp","content":"popup-sheet__content_18ukp","appear":"popup-sheet__appear_18ukp","enter":"popup-sheet__enter_18ukp","appearActive":"popup-sheet__appearActive_18ukp","enterActive":"popup-sheet__enterActive_18ukp","exit":"popup-sheet__exit_18ukp","exitBySwipe":"popup-sheet__exitBySwipe_18ukp","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_18ukp","exitActive":"popup-sheet__exitActive_18ukp","exitDone":"popup-sheet__exitDone_18ukp"};
+require('./index.css')
+
+var SWIPE_VELOCITY = 0.3;
+var CLOSE_OFFSET = 0.3;
+var ANIMATION_DURATION = 350;
+var DEFAULT_PADDING = 32;
+var PopupSheet = React.forwardRef(function (_a, ref) {
+    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, restProps = tslib.__rest(_a, ["children", "hasCloser", "className", "onClose", "transitionProps", "contentProps", "swipeable", "dataTestId", "backdropProps", "padding"]);
+    var _c = React.useState(0), sheetOffset = _c[0], setSheetOffset = _c[1];
+    var _d = React.useState(1), backdropOpacity = _d[0], setBackdropOpacity = _d[1];
+    var sheetHeight = React.useRef(0);
+    var sheetRef = React.useRef(null);
+    var bySwipeCloseAnimation = React.useRef(false);
+    var getSheetOffset = function (deltaY) { return Math.max(0, deltaY); };
+    var getBackdropOpacity = function (offset) {
+        return Math.max(0, 1 - offset / sheetHeight.current);
+    };
+    var getSwipeStyles = function () {
+        return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
+    };
+    var handleSwiping = function (_a) {
+        var deltaY = _a.deltaY;
+        var offset = getSheetOffset(deltaY);
+        setSheetOffset(offset);
+        setBackdropOpacity(getBackdropOpacity(offset));
+    };
+    var handleSwiped = function (_a) {
+        var deltaY = _a.deltaY, velocity = _a.velocity, event = _a.event;
+        var shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
+        var shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;
+        var offset = sheetOffset;
+        var animDuration = ANIMATION_DURATION / 2;
+        var start;
+        if (shouldCloseByVelocity || shouldCloseByOffset) {
+            bySwipeCloseAnimation.current = true;
+            onClose === null || onClose === void 0 ? void 0 : onClose(event, 'swipe');
+            var runLoop_1 = function (timeStamp) {
+                if (!start)
+                    start = timeStamp;
+                var elapsedTime = timeStamp - start;
+                if (elapsedTime <= animDuration) {
+                    var nextOffset = offset +
+                        (sheetHeight.current - offset) *
+                            coreComponentsShared.easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    if (nextOffset > 0) {
+                        setSheetOffset(nextOffset);
+                    }
+                    requestAnimationFrame(runLoop_1);
+                }
+                else {
+                    setSheetOffset(0);
+                    bySwipeCloseAnimation.current = false;
+                }
+            };
+            requestAnimationFrame(runLoop_1);
+        }
+        else {
+            var runLoop_2 = function (timeStamp) {
+                if (!start)
+                    start = timeStamp;
+                var elapsedTime = timeStamp - start;
+                if (elapsedTime <= animDuration) {
+                    var nextOffset = offset - offset * coreComponentsShared.easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    if (nextOffset > 0) {
+                        setSheetOffset(nextOffset);
+                        setBackdropOpacity(getBackdropOpacity(nextOffset));
+                    }
+                    requestAnimationFrame(runLoop_2);
+                }
+                else {
+                    setSheetOffset(0);
+                    setBackdropOpacity(1);
+                }
+            };
+            requestAnimationFrame(runLoop_2);
+        }
+    };
+    var handleEntered = function (node, isAppearing) {
+        bySwipeCloseAnimation.current = false;
+        if (sheetRef.current) {
+            sheetHeight.current = sheetRef.current.offsetHeight;
+        }
+        if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onEntered) {
+            transitionProps.onEntered(node, isAppearing);
+        }
+    };
+    var handleExited = function (node) {
+        bySwipeCloseAnimation.current = false;
+        setSheetOffset(0);
+        setBackdropOpacity(1);
+        if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExited) {
+            transitionProps.onExited(node);
+        }
+    };
+    var sheetSwipeableHandlers = reactSwipeable.useSwipeable({
+        onSwiping: handleSwiping,
+        onSwiped: handleSwiped,
+        trackMouse: swipeable,
+        trackTouch: swipeable,
+        delta: 5,
+    });
+    return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { onClose: onClose, ref: ref, className: cn__default.default(styles.component, className), dataTestId: dataTestId, Backdrop: components_backdrop_Component.PopupBackdrop, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), { opacity: backdropOpacity }), transitionProps: tslib.__assign(tslib.__assign({ classNames: {
+                enter: styles.enter,
+                appear: styles.appear,
+                enterActive: styles.enterActive,
+                appearActive: styles.appearActive,
+                exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,
+                exitActive: bySwipeCloseAnimation.current
+                    ? styles.exitActiveBySwipe
+                    : styles.exitActive,
+            }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: {
+            ref: sheetRef,
+            style: getSwipeStyles(),
+        }, contentProps: tslib.__assign(tslib.__assign(tslib.__assign({ style: coreComponentsShared.createPaddingStyle(padding) }, contentProps), sheetSwipeableHandlers), { className: cn__default.default(styles.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
+        hasCloser && (React__default.default.createElement(shared.Closer, { view: 'mobile', className: styles.closer, onClick: onClose, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'closer') })),
+        children));
+});
+
+exports.PopupSheet = PopupSheet;

package/components/backdrop/Component.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BackdropProps } from "@alfalab/core-components-backdrop";
+type PopupBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+declare const PopupBackdrop: FC<BackdropProps>;
+export { PopupBackdropProps, PopupBackdrop };

package/components/backdrop/Component.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsBackdrop = require('@alfalab/core-components-backdrop');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var styles = {"appear":"popup-sheet__appear_1kdlf","enter":"popup-sheet__enter_1kdlf","appearActive":"popup-sheet__appearActive_1kdlf","enterActive":"popup-sheet__enterActive_1kdlf","appearDone":"popup-sheet__appearDone_1kdlf","enterDone":"popup-sheet__enterDone_1kdlf","exit":"popup-sheet__exit_1kdlf","exitActive":"popup-sheet__exitActive_1kdlf","exitDone":"popup-sheet__exitDone_1kdlf"};
+require('./index.css')
+
+var PopupBackdrop = function (_a) {
+    var opacity = _a.opacity, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = tslib.__rest(_a, ["opacity", "opacityTimeout", "style"]);
+    return (React__default.default.createElement("div", { style: tslib.__assign({ opacity: opacity, transition: opacity === 1 ? "opacity ".concat(opacityTimeout, "ms ease-in-out") : '', position: 'relative' }, style) },
+        React__default.default.createElement(coreComponentsBackdrop.Backdrop, tslib.__assign({ transitionClassNames: styles }, backdropProps))));
+};
+
+exports.PopupBackdrop = PopupBackdrop;

package/components/backdrop/index.css

@@ -0,0 +1,36 @@
+/* hash: 19vqu */
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --backdrop-visible-background: var(--color-light-bg-overlay);
+    --backdrop-hidden-background: transparent;
+} .popup-sheet__appear_1kdlf,
+.popup-sheet__enter_1kdlf {
+    background-color: var(--backdrop-hidden-background);
+} .popup-sheet__appearActive_1kdlf,
+.popup-sheet__enterActive_1kdlf,
+.popup-sheet__appearDone_1kdlf,
+.popup-sheet__enterDone_1kdlf {
+    background-color: var(--backdrop-visible-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+} .popup-sheet__exit_1kdlf {
+    background-color: var(--backdrop-visible-background);
+} .popup-sheet__exitActive_1kdlf,
+.popup-sheet__exitDone_1kdlf {
+    background-color: var(--backdrop-hidden-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

package/components/backdrop/index.d.ts

@@ -0,0 +1 @@
+export { PopupBackdrop } from "./Component";

package/components/backdrop/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_backdrop_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('@alfalab/core-components-backdrop');
+
+
+
+exports.PopupBackdrop = components_backdrop_Component.PopupBackdrop;

package/cssm/Component-9211a437.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { BaseButtonProps } from "./typings-9211a437";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/cssm/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { KeyboardEvent, MouseEvent } from "react";
+import { BaseModalProps } from "@alfalab/core-components-base-modal";
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type PopupSheetProps = Omit<BaseModalProps, 'onClose'> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean;
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean;
+    /**
+     * Отступы
+     */
+    padding?: PaddingType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void;
+};
+declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalProps, "onClose"> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean | undefined;
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean | undefined;
+    /**
+     * Отступы
+     */
+    padding?: PaddingType | undefined;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { PopupSheetProps, PopupSheet };

package/cssm/Component.desktop-2e2b2125.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

package/cssm/Component.js

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactSwipeable = require('react-swipeable');
+var cn = require('classnames');
+var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
+var shared = require('@alfalab/core-components-navigation-bar/cssm/shared');
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
+var components_backdrop_Component = require('./components/backdrop/Component.js');
+var styles = require('./index.module.css');
+require('@alfalab/core-components-backdrop/cssm');
+require('./components/backdrop/index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var SWIPE_VELOCITY = 0.3;
+var CLOSE_OFFSET = 0.3;
+var ANIMATION_DURATION = 350;
+var DEFAULT_PADDING = 32;
+var PopupSheet = React.forwardRef(function (_a, ref) {
+    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, restProps = tslib.__rest(_a, ["children", "hasCloser", "className", "onClose", "transitionProps", "contentProps", "swipeable", "dataTestId", "backdropProps", "padding"]);
+    var _c = React.useState(0), sheetOffset = _c[0], setSheetOffset = _c[1];
+    var _d = React.useState(1), backdropOpacity = _d[0], setBackdropOpacity = _d[1];
+    var sheetHeight = React.useRef(0);
+    var sheetRef = React.useRef(null);
+    var bySwipeCloseAnimation = React.useRef(false);
+    var getSheetOffset = function (deltaY) { return Math.max(0, deltaY); };
+    var getBackdropOpacity = function (offset) {
+        return Math.max(0, 1 - offset / sheetHeight.current);
+    };
+    var getSwipeStyles = function () {
+        return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
+    };
+    var handleSwiping = function (_a) {
+        var deltaY = _a.deltaY;
+        var offset = getSheetOffset(deltaY);
+        setSheetOffset(offset);
+        setBackdropOpacity(getBackdropOpacity(offset));
+    };
+    var handleSwiped = function (_a) {
+        var deltaY = _a.deltaY, velocity = _a.velocity, event = _a.event;
+        var shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
+        var shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;
+        var offset = sheetOffset;
+        var animDuration = ANIMATION_DURATION / 2;
+        var start;
+        if (shouldCloseByVelocity || shouldCloseByOffset) {
+            bySwipeCloseAnimation.current = true;
+            onClose === null || onClose === void 0 ? void 0 : onClose(event, 'swipe');
+            var runLoop_1 = function (timeStamp) {
+                if (!start)
+                    start = timeStamp;
+                var elapsedTime = timeStamp - start;
+                if (elapsedTime <= animDuration) {
+                    var nextOffset = offset +
+                        (sheetHeight.current - offset) *
+                            coreComponentsShared.easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    if (nextOffset > 0) {
+                        setSheetOffset(nextOffset);
+                    }
+                    requestAnimationFrame(runLoop_1);
+                }
+                else {
+                    setSheetOffset(0);
+                    bySwipeCloseAnimation.current = false;
+                }
+            };
+            requestAnimationFrame(runLoop_1);
+        }
+        else {
+            var runLoop_2 = function (timeStamp) {
+                if (!start)
+                    start = timeStamp;
+                var elapsedTime = timeStamp - start;
+                if (elapsedTime <= animDuration) {
+                    var nextOffset = offset - offset * coreComponentsShared.easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    if (nextOffset > 0) {
+                        setSheetOffset(nextOffset);
+                        setBackdropOpacity(getBackdropOpacity(nextOffset));
+                    }
+                    requestAnimationFrame(runLoop_2);
+                }
+                else {
+                    setSheetOffset(0);
+                    setBackdropOpacity(1);
+                }
+            };
+            requestAnimationFrame(runLoop_2);
+        }
+    };
+    var handleEntered = function (node, isAppearing) {
+        bySwipeCloseAnimation.current = false;
+        if (sheetRef.current) {
+            sheetHeight.current = sheetRef.current.offsetHeight;
+        }
+        if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onEntered) {
+            transitionProps.onEntered(node, isAppearing);
+        }
+    };
+    var handleExited = function (node) {
+        bySwipeCloseAnimation.current = false;
+        setSheetOffset(0);
+        setBackdropOpacity(1);
+        if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExited) {
+            transitionProps.onExited(node);
+        }
+    };
+    var sheetSwipeableHandlers = reactSwipeable.useSwipeable({
+        onSwiping: handleSwiping,
+        onSwiped: handleSwiped,
+        trackMouse: swipeable,
+        trackTouch: swipeable,
+        delta: 5,
+    });
+    return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { onClose: onClose, ref: ref, className: cn__default.default(styles__default.default.component, className), dataTestId: dataTestId, Backdrop: components_backdrop_Component.PopupBackdrop, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), { opacity: backdropOpacity }), transitionProps: tslib.__assign(tslib.__assign({ classNames: {
+                enter: styles__default.default.enter,
+                appear: styles__default.default.appear,
+                enterActive: styles__default.default.enterActive,
+                appearActive: styles__default.default.appearActive,
+                exit: bySwipeCloseAnimation.current ? styles__default.default.exitBySwipe : styles__default.default.exit,
+                exitActive: bySwipeCloseAnimation.current
+                    ? styles__default.default.exitActiveBySwipe
+                    : styles__default.default.exitActive,
+            }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: {
+            ref: sheetRef,
+            style: getSwipeStyles(),
+        }, contentProps: tslib.__assign(tslib.__assign(tslib.__assign({ style: coreComponentsShared.createPaddingStyle(padding) }, contentProps), sheetSwipeableHandlers), { className: cn__default.default(styles__default.default.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
+        hasCloser && (React__default.default.createElement(shared.Closer, { view: 'mobile', className: styles__default.default.closer, onClick: onClose, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'closer') })),
+        children));
+});
+
+exports.PopupSheet = PopupSheet;

package/cssm/components/backdrop/Component.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BackdropProps } from "@alfalab/core-components-backdrop";
+type PopupBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+declare const PopupBackdrop: FC<BackdropProps>;
+export { PopupBackdropProps, PopupBackdrop };

package/cssm/components/backdrop/Component.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PopupBackdrop = function (_a) {
+    var opacity = _a.opacity, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = tslib.__rest(_a, ["opacity", "opacityTimeout", "style"]);
+    return (React__default.default.createElement("div", { style: tslib.__assign({ opacity: opacity, transition: opacity === 1 ? "opacity ".concat(opacityTimeout, "ms ease-in-out") : '', position: 'relative' }, style) },
+        React__default.default.createElement(coreComponentsBackdrop.Backdrop, tslib.__assign({ transitionClassNames: styles__default.default }, backdropProps))));
+};
+
+exports.PopupBackdrop = PopupBackdrop;

package/cssm/components/backdrop/index.d.ts

@@ -0,0 +1 @@
+export { PopupBackdrop } from "./Component";

package/cssm/components/backdrop/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_backdrop_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('@alfalab/core-components-backdrop/cssm');
+require('./index.module.css');
+
+
+
+exports.PopupBackdrop = components_backdrop_Component.PopupBackdrop;

package/cssm/components/backdrop/index.module.css

@@ -0,0 +1,35 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --backdrop-visible-background: var(--color-light-bg-overlay);
+    --backdrop-hidden-background: transparent;
+} .appear,
+.enter {
+    background-color: var(--backdrop-hidden-background);
+} .appearActive,
+.enterActive,
+.appearDone,
+.enterDone {
+    background-color: var(--backdrop-visible-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+} .exit {
+    background-color: var(--backdrop-visible-background);
+} .exitActive,
+.exitDone {
+    background-color: var(--backdrop-hidden-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}