@alfalab/core-components-popup-sheet 2.0.1 → 2.0.2

package/Component.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var reactSwipeable = require('react-swipeable');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
@@ -15,6 +16,7 @@ var index_module = require('./index.module.css.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var SWIPE_VELOCITY = 0.3;
@@ -116,6 +118,8 @@ var PopupSheet = React.forwardRef(function (_a, ref) {
         trackTouch: swipeable,
         delta: 5,
     });
+    var swipeRef = sheetSwipeableHandlers.ref, swipeHandlers = tslib.__rest(sheetSwipeableHandlers, ["ref"]);
+    var componentRef = mergeRefs__default.default([sheetRef, swipeRef]);
     return (React__default.default.createElement(coreComponentsBaseModal.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: {
                 enter: index_module.enter,
                 appear: index_module.appear,
@@ -125,10 +129,7 @@ var PopupSheet = React.forwardRef(function (_a, ref) {
                 exitActive: bySwipeCloseAnimation.current
                     ? index_module.exitActiveBySwipe
                     : index_module.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(index_module.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
+            }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: tslib.__assign({ ref: componentRef, style: getSwipeStyles() }, (swipeable ? swipeHandlers : {})), contentProps: tslib.__assign(tslib.__assign({ style: coreComponentsShared.createPaddingStyle(padding) }, contentProps), { className: cn__default.default(index_module.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
         hasCloser && (React__default.default.createElement(shared.Closer, tslib.__assign({ view: 'mobile', onClick: onClose, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'closer') }, closerProps, { className: cn__default.default(index_module.closer, closerProps === null || closerProps === void 0 ? void 0 : closerProps.className) }))),
         children));
 });

package/Component.js.map

@@ -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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"}
+{"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 mergeRefs from 'react-merge-refs';\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        const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n        const componentRef = mergeRefs([sheetRef, swipeRef]);\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: componentRef,\n                    style: getSwipeStyles(),\n                    ...(swipeable ? swipeHandlers : {}),\n                }}\n                contentProps={{\n                    style: createPaddingStyle(padding),\n                    ...contentProps,\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","mergeRefs","React","BaseModal","__assign","cn","styles","PopupBackdrop","createPaddingStyle","Closer","getDataTestId"],"mappings":"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"}

package/components/backdrop/index.css

@@ -3,19 +3,19 @@
 } :root {
     --backdrop-visible-background: var(--color-light-overlay-default);
     --backdrop-hidden-background: transparent;
-} .popup-sheet__appear_jzt2s,
-.popup-sheet__enter_jzt2s {
+} .popup-sheet__appear_5786r,
+.popup-sheet__enter_5786r {
     background-color: var(--backdrop-hidden-background);
-} .popup-sheet__appearActive_jzt2s,
-.popup-sheet__enterActive_jzt2s,
-.popup-sheet__appearDone_jzt2s,
-.popup-sheet__enterDone_jzt2s {
+} .popup-sheet__appearActive_5786r,
+.popup-sheet__enterActive_5786r,
+.popup-sheet__appearDone_5786r,
+.popup-sheet__enterDone_5786r {
     background-color: var(--backdrop-visible-background);
     transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
-} .popup-sheet__exit_jzt2s {
+} .popup-sheet__exit_5786r {
     background-color: var(--backdrop-visible-background);
-} .popup-sheet__exitActive_jzt2s,
-.popup-sheet__exitDone_jzt2s {
+} .popup-sheet__exitActive_5786r,
+.popup-sheet__exitDone_5786r {
     background-color: var(--backdrop-hidden-background);
     transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"appear":"popup-sheet__appear_jzt2s","enter":"popup-sheet__enter_jzt2s","appearActive":"popup-sheet__appearActive_jzt2s","enterActive":"popup-sheet__enterActive_jzt2s","appearDone":"popup-sheet__appearDone_jzt2s","enterDone":"popup-sheet__enterDone_jzt2s","exit":"popup-sheet__exit_jzt2s","exitActive":"popup-sheet__exitActive_jzt2s","exitDone":"popup-sheet__exitDone_jzt2s"};
+var styles = {"appear":"popup-sheet__appear_5786r","enter":"popup-sheet__enter_5786r","appearActive":"popup-sheet__appearActive_5786r","enterActive":"popup-sheet__enterActive_5786r","appearDone":"popup-sheet__appearDone_5786r","enterDone":"popup-sheet__enterDone_5786r","exit":"popup-sheet__exit_5786r","exitActive":"popup-sheet__exitActive_5786r","exitDone":"popup-sheet__exitDone_5786r"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/cssm/Component.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var reactSwipeable = require('react-swipeable');
 var cn = require('classnames');
 var cssm = require('@alfalab/core-components-base-modal/cssm');
@@ -15,6 +16,7 @@ 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 mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
@@ -117,6 +119,8 @@ var PopupSheet = React.forwardRef(function (_a, ref) {
         trackTouch: swipeable,
         delta: 5,
     });
+    var swipeRef = sheetSwipeableHandlers.ref, swipeHandlers = tslib.__rest(sheetSwipeableHandlers, ["ref"]);
+    var componentRef = mergeRefs__default.default([sheetRef, swipeRef]);
     return (React__default.default.createElement(cssm.BaseModal, tslib.__assign({}, restProps, { onClose: onClose, ref: ref, className: cn__default.default(styles__default.default.component, className), dataTestId: dataTestId, 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,
@@ -126,10 +130,7 @@ var PopupSheet = React.forwardRef(function (_a, ref) {
                 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: cssm$1.createPaddingStyle(padding) }, contentProps), sheetSwipeableHandlers), { className: cn__default.default(styles__default.default.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
+            }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: tslib.__assign({ ref: componentRef, style: getSwipeStyles() }, (swipeable ? swipeHandlers : {})), contentProps: tslib.__assign(tslib.__assign({ style: cssm$1.createPaddingStyle(padding) }, contentProps), { className: cn__default.default(styles__default.default.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
         hasCloser && (React__default.default.createElement(shared.Closer, tslib.__assign({ view: 'mobile', onClick: onClose, dataTestId: cssm$1.getDataTestId(dataTestId, 'closer') }, closerProps, { className: cn__default.default(styles__default.default.closer, closerProps === null || closerProps === void 0 ? void 0 : closerProps.className) }))),
         children));
 });

package/cssm/Component.js.map

@@ -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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"}
+{"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 mergeRefs from 'react-merge-refs';\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        const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n        const componentRef = mergeRefs([sheetRef, swipeRef]);\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: componentRef,\n                    style: getSwipeStyles(),\n                    ...(swipeable ? swipeHandlers : {}),\n                }}\n                contentProps={{\n                    style: createPaddingStyle(padding),\n                    ...contentProps,\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","mergeRefs","React","BaseModal","__assign","cn","styles","PopupBackdrop","createPaddingStyle","Closer","getDataTestId"],"mappings":"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"}

package/esm/Component.js

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useState, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { useSwipeable } from 'react-swipeable';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/esm';
@@ -107,6 +108,8 @@ var PopupSheet = forwardRef(function (_a, ref) {
         trackTouch: swipeable,
         delta: 5,
     });
+    var swipeRef = sheetSwipeableHandlers.ref, swipeHandlers = __rest(sheetSwipeableHandlers, ["ref"]);
+    var componentRef = mergeRefs([sheetRef, swipeRef]);
     return (React.createElement(BaseModal, __assign({}, restProps, { onClose: onClose, ref: ref, className: cn(styles.component, className), dataTestId: dataTestId, Backdrop: PopupBackdrop, backdropProps: __assign(__assign({}, backdropProps), { opacity: backdropOpacity }), transitionProps: __assign(__assign({ classNames: {
                 enter: styles.enter,
                 appear: styles.appear,
@@ -116,10 +119,7 @@ var PopupSheet = forwardRef(function (_a, ref) {
                 exitActive: bySwipeCloseAnimation.current
                     ? styles.exitActiveBySwipe
                     : styles.exitActive,
-            }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: {
-            ref: sheetRef,
-            style: getSwipeStyles(),
-        }, contentProps: __assign(__assign(__assign({ style: createPaddingStyle(padding) }, contentProps), sheetSwipeableHandlers), { className: cn(styles.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
+            }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: __assign({ ref: componentRef, style: getSwipeStyles() }, (swipeable ? swipeHandlers : {})), contentProps: __assign(__assign({ style: createPaddingStyle(padding) }, contentProps), { className: cn(styles.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
         hasCloser && (React.createElement(Closer, __assign({ view: 'mobile', onClick: onClose, dataTestId: getDataTestId(dataTestId, 'closer') }, closerProps, { className: cn(styles.closer, closerProps === null || closerProps === void 0 ? void 0 : closerProps.className) }))),
         children));
 });

package/esm/Component.js.map

@@ -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":[],"mappings":"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"}
+{"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 mergeRefs from 'react-merge-refs';\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        const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n        const componentRef = mergeRefs([sheetRef, swipeRef]);\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: componentRef,\n                    style: getSwipeStyles(),\n                    ...(swipeable ? swipeHandlers : {}),\n                }}\n                contentProps={{\n                    style: createPaddingStyle(padding),\n                    ...contentProps,\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":[],"mappings":"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"}

package/esm/components/backdrop/index.css

@@ -3,19 +3,19 @@
 } :root {
     --backdrop-visible-background: var(--color-light-overlay-default);
     --backdrop-hidden-background: transparent;
-} .popup-sheet__appear_jzt2s,
-.popup-sheet__enter_jzt2s {
+} .popup-sheet__appear_5786r,
+.popup-sheet__enter_5786r {
     background-color: var(--backdrop-hidden-background);
-} .popup-sheet__appearActive_jzt2s,
-.popup-sheet__enterActive_jzt2s,
-.popup-sheet__appearDone_jzt2s,
-.popup-sheet__enterDone_jzt2s {
+} .popup-sheet__appearActive_5786r,
+.popup-sheet__enterActive_5786r,
+.popup-sheet__appearDone_5786r,
+.popup-sheet__enterDone_5786r {
     background-color: var(--backdrop-visible-background);
     transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
-} .popup-sheet__exit_jzt2s {
+} .popup-sheet__exit_5786r {
     background-color: var(--backdrop-visible-background);
-} .popup-sheet__exitActive_jzt2s,
-.popup-sheet__exitDone_jzt2s {
+} .popup-sheet__exitActive_5786r,
+.popup-sheet__exitDone_5786r {
     background-color: var(--backdrop-hidden-background);
     transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
 }

package/esm/components/backdrop/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"appear":"popup-sheet__appear_jzt2s","enter":"popup-sheet__enter_jzt2s","appearActive":"popup-sheet__appearActive_jzt2s","enterActive":"popup-sheet__enterActive_jzt2s","appearDone":"popup-sheet__appearDone_jzt2s","enterDone":"popup-sheet__enterDone_jzt2s","exit":"popup-sheet__exit_jzt2s","exitActive":"popup-sheet__exitActive_jzt2s","exitDone":"popup-sheet__exitDone_jzt2s"};
+var styles = {"appear":"popup-sheet__appear_5786r","enter":"popup-sheet__enter_5786r","appearActive":"popup-sheet__appearActive_5786r","enterActive":"popup-sheet__enterActive_5786r","appearDone":"popup-sheet__appearDone_5786r","enterDone":"popup-sheet__enterDone_5786r","exit":"popup-sheet__exit_5786r","exitActive":"popup-sheet__exitActive_5786r","exitDone":"popup-sheet__exitDone_5786r"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/index.css

@@ -4,7 +4,7 @@
     --gap-xs: 8px;
     --gap-0: 0px;
     --gap-8: var(--gap-xs);
-} .popup-sheet__component_kagvy {
+} .popup-sheet__component_walne {
     position: fixed;
     bottom: var(--gap-0);
     margin: auto var(--gap-8) var(--gap-8);
@@ -12,31 +12,31 @@
     max-width: 600px;
     border-radius: var(--border-radius-36);
     overflow: hidden;
-} .popup-sheet__closer_kagvy {
+} .popup-sheet__closer_walne {
     position: absolute;
     top: var(--gap-8);
     right: var(--gap-8)
-} .popup-sheet__closer_kagvy > button {
+} .popup-sheet__closer_walne > button {
         -webkit-backdrop-filter: none;
                 backdrop-filter: none;
-    } .popup-sheet__content_kagvy {
+    } .popup-sheet__content_walne {
     box-sizing: border-box;
-} .popup-sheet__appear_kagvy,
-.popup-sheet__enter_kagvy {
+} .popup-sheet__appear_walne,
+.popup-sheet__enter_walne {
     transform: translateY(calc(100% + 100px));
-} .popup-sheet__appearActive_kagvy,
-.popup-sheet__enterActive_kagvy {
+} .popup-sheet__appearActive_walne,
+.popup-sheet__enterActive_walne {
     transform: translateY(0);
     transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
     transition-delay: 50ms;
-} .popup-sheet__exit_kagvy {
+} .popup-sheet__exit_walne {
     transform: translateY(0);
-} .popup-sheet__exitBySwipe_kagvy {
+} .popup-sheet__exitBySwipe_walne {
     transform: translateY(calc(100% + 100px));
-} .popup-sheet__exitActiveBySwipe_kagvy {
+} .popup-sheet__exitActiveBySwipe_walne {
     transition: none;
-} .popup-sheet__exitActive_kagvy,
-.popup-sheet__exitDone_kagvy {
+} .popup-sheet__exitActive_walne,
+.popup-sheet__exitDone_walne {
     transform: translateY(calc(100% + 100px));
     transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"popup-sheet__component_kagvy","closer":"popup-sheet__closer_kagvy","content":"popup-sheet__content_kagvy","appear":"popup-sheet__appear_kagvy","enter":"popup-sheet__enter_kagvy","appearActive":"popup-sheet__appearActive_kagvy","enterActive":"popup-sheet__enterActive_kagvy","exit":"popup-sheet__exit_kagvy","exitBySwipe":"popup-sheet__exitBySwipe_kagvy","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_kagvy","exitActive":"popup-sheet__exitActive_kagvy"};
+var styles = {"component":"popup-sheet__component_walne","closer":"popup-sheet__closer_walne","content":"popup-sheet__content_walne","appear":"popup-sheet__appear_walne","enter":"popup-sheet__enter_walne","appearActive":"popup-sheet__appearActive_walne","enterActive":"popup-sheet__enterActive_walne","exit":"popup-sheet__exit_walne","exitBySwipe":"popup-sheet__exitBySwipe_walne","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_walne","exitActive":"popup-sheet__exitActive_walne"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/index.css

@@ -4,7 +4,7 @@
     --gap-xs: 8px;
     --gap-0: 0px;
     --gap-8: var(--gap-xs);
-} .popup-sheet__component_kagvy {
+} .popup-sheet__component_walne {
     position: fixed;
     bottom: var(--gap-0);
     margin: auto var(--gap-8) var(--gap-8);
@@ -12,31 +12,31 @@
     max-width: 600px;
     border-radius: var(--border-radius-36);
     overflow: hidden;
-} .popup-sheet__closer_kagvy {
+} .popup-sheet__closer_walne {
     position: absolute;
     top: var(--gap-8);
     right: var(--gap-8)
-} .popup-sheet__closer_kagvy > button {
+} .popup-sheet__closer_walne > button {
         -webkit-backdrop-filter: none;
                 backdrop-filter: none;
-    } .popup-sheet__content_kagvy {
+    } .popup-sheet__content_walne {
     box-sizing: border-box;
-} .popup-sheet__appear_kagvy,
-.popup-sheet__enter_kagvy {
+} .popup-sheet__appear_walne,
+.popup-sheet__enter_walne {
     transform: translateY(calc(100% + 100px));
-} .popup-sheet__appearActive_kagvy,
-.popup-sheet__enterActive_kagvy {
+} .popup-sheet__appearActive_walne,
+.popup-sheet__enterActive_walne {
     transform: translateY(0);
     transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
     transition-delay: 50ms;
-} .popup-sheet__exit_kagvy {
+} .popup-sheet__exit_walne {
     transform: translateY(0);
-} .popup-sheet__exitBySwipe_kagvy {
+} .popup-sheet__exitBySwipe_walne {
     transform: translateY(calc(100% + 100px));
-} .popup-sheet__exitActiveBySwipe_kagvy {
+} .popup-sheet__exitActiveBySwipe_walne {
     transition: none;
-} .popup-sheet__exitActive_kagvy,
-.popup-sheet__exitDone_kagvy {
+} .popup-sheet__exitActive_walne,
+.popup-sheet__exitDone_walne {
     transform: translateY(calc(100% + 100px));
     transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
 }

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"popup-sheet__component_kagvy","closer":"popup-sheet__closer_kagvy","content":"popup-sheet__content_kagvy","appear":"popup-sheet__appear_kagvy","enter":"popup-sheet__enter_kagvy","appearActive":"popup-sheet__appearActive_kagvy","enterActive":"popup-sheet__enterActive_kagvy","exit":"popup-sheet__exit_kagvy","exitBySwipe":"popup-sheet__exitBySwipe_kagvy","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_kagvy","exitActive":"popup-sheet__exitActive_kagvy"};
+var styles = {"component":"popup-sheet__component_walne","closer":"popup-sheet__closer_walne","content":"popup-sheet__content_walne","appear":"popup-sheet__appear_walne","enter":"popup-sheet__enter_walne","appearActive":"popup-sheet__appearActive_walne","enterActive":"popup-sheet__enterActive_walne","exit":"popup-sheet__exit_walne","exitBySwipe":"popup-sheet__exitBySwipe_walne","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_walne","exitActive":"popup-sheet__exitActive_walne"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/modern/Component.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useState, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { useSwipeable } from 'react-swipeable';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/modern';
@@ -99,6 +100,8 @@ const PopupSheet = forwardRef(({ children, hasCloser, className, onClose, transi
         trackTouch: swipeable,
         delta: 5,
     });
+    const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;
+    const componentRef = mergeRefs([sheetRef, swipeRef]);
     return (React.createElement(BaseModal, { ...restProps, onClose: onClose, ref: ref, className: cn(styles.component, className), dataTestId: dataTestId, Backdrop: PopupBackdrop, backdropProps: {
             ...backdropProps,
             opacity: backdropOpacity,
@@ -118,12 +121,12 @@ const PopupSheet = forwardRef(({ children, hasCloser, className, onClose, transi
             onEntered: handleEntered,
             onExited: handleExited,
         }, componentDivProps: {
-            ref: sheetRef,
+            ref: componentRef,
             style: getSwipeStyles(),
+            ...(swipeable ? swipeHandlers : {}),
         }, contentProps: {
             style: createPaddingStyle(padding),
             ...contentProps,
-            ...sheetSwipeableHandlers,
             className: cn(styles.content, contentProps?.className),
         } },
         hasCloser && (React.createElement(Closer, { view: 'mobile', onClick: onClose, dataTestId: getDataTestId(dataTestId, 'closer'), ...closerProps, className: cn(styles.closer, closerProps?.className) })),

package/modern/Component.js.map

@@ -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":[],"mappings":"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"}
+{"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 mergeRefs from 'react-merge-refs';\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        const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n        const componentRef = mergeRefs([sheetRef, swipeRef]);\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: componentRef,\n                    style: getSwipeStyles(),\n                    ...(swipeable ? swipeHandlers : {}),\n                }}\n                contentProps={{\n                    style: createPaddingStyle(padding),\n                    ...contentProps,\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":[],"mappings":"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"}

package/modern/components/backdrop/index.css

@@ -3,19 +3,19 @@
 } :root {
     --backdrop-visible-background: var(--color-light-overlay-default);
     --backdrop-hidden-background: transparent;
-} .popup-sheet__appear_jzt2s,
-.popup-sheet__enter_jzt2s {
+} .popup-sheet__appear_5786r,
+.popup-sheet__enter_5786r {
     background-color: var(--backdrop-hidden-background);
-} .popup-sheet__appearActive_jzt2s,
-.popup-sheet__enterActive_jzt2s,
-.popup-sheet__appearDone_jzt2s,
-.popup-sheet__enterDone_jzt2s {
+} .popup-sheet__appearActive_5786r,
+.popup-sheet__enterActive_5786r,
+.popup-sheet__appearDone_5786r,
+.popup-sheet__enterDone_5786r {
     background-color: var(--backdrop-visible-background);
     transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
-} .popup-sheet__exit_jzt2s {
+} .popup-sheet__exit_5786r {
     background-color: var(--backdrop-visible-background);
-} .popup-sheet__exitActive_jzt2s,
-.popup-sheet__exitDone_jzt2s {
+} .popup-sheet__exitActive_5786r,
+.popup-sheet__exitDone_5786r {
     background-color: var(--backdrop-hidden-background);
     transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
 }

package/modern/components/backdrop/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"appear":"popup-sheet__appear_jzt2s","enter":"popup-sheet__enter_jzt2s","appearActive":"popup-sheet__appearActive_jzt2s","enterActive":"popup-sheet__enterActive_jzt2s","appearDone":"popup-sheet__appearDone_jzt2s","enterDone":"popup-sheet__enterDone_jzt2s","exit":"popup-sheet__exit_jzt2s","exitActive":"popup-sheet__exitActive_jzt2s","exitDone":"popup-sheet__exitDone_jzt2s"};
+const styles = {"appear":"popup-sheet__appear_5786r","enter":"popup-sheet__enter_5786r","appearActive":"popup-sheet__appearActive_5786r","enterActive":"popup-sheet__enterActive_5786r","appearDone":"popup-sheet__appearDone_5786r","enterDone":"popup-sheet__enterDone_5786r","exit":"popup-sheet__exit_5786r","exitActive":"popup-sheet__exitActive_5786r","exitDone":"popup-sheet__exitDone_5786r"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.css

@@ -4,7 +4,7 @@
     --gap-xs: 8px;
     --gap-0: 0px;
     --gap-8: var(--gap-xs);
-} .popup-sheet__component_kagvy {
+} .popup-sheet__component_walne {
     position: fixed;
     bottom: var(--gap-0);
     margin: auto var(--gap-8) var(--gap-8);
@@ -12,31 +12,31 @@
     max-width: 600px;
     border-radius: var(--border-radius-36);
     overflow: hidden;
-} .popup-sheet__closer_kagvy {
+} .popup-sheet__closer_walne {
     position: absolute;
     top: var(--gap-8);
     right: var(--gap-8)
-} .popup-sheet__closer_kagvy > button {
+} .popup-sheet__closer_walne > button {
         -webkit-backdrop-filter: none;
                 backdrop-filter: none;
-    } .popup-sheet__content_kagvy {
+    } .popup-sheet__content_walne {
     box-sizing: border-box;
-} .popup-sheet__appear_kagvy,
-.popup-sheet__enter_kagvy {
+} .popup-sheet__appear_walne,
+.popup-sheet__enter_walne {
     transform: translateY(calc(100% + 100px));
-} .popup-sheet__appearActive_kagvy,
-.popup-sheet__enterActive_kagvy {
+} .popup-sheet__appearActive_walne,
+.popup-sheet__enterActive_walne {
     transform: translateY(0);
     transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
     transition-delay: 50ms;
-} .popup-sheet__exit_kagvy {
+} .popup-sheet__exit_walne {
     transform: translateY(0);
-} .popup-sheet__exitBySwipe_kagvy {
+} .popup-sheet__exitBySwipe_walne {
     transform: translateY(calc(100% + 100px));
-} .popup-sheet__exitActiveBySwipe_kagvy {
+} .popup-sheet__exitActiveBySwipe_walne {
     transition: none;
-} .popup-sheet__exitActive_kagvy,
-.popup-sheet__exitDone_kagvy {
+} .popup-sheet__exitActive_walne,
+.popup-sheet__exitDone_walne {
     transform: translateY(calc(100% + 100px));
     transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"popup-sheet__component_kagvy","closer":"popup-sheet__closer_kagvy","content":"popup-sheet__content_kagvy","appear":"popup-sheet__appear_kagvy","enter":"popup-sheet__enter_kagvy","appearActive":"popup-sheet__appearActive_kagvy","enterActive":"popup-sheet__enterActive_kagvy","exit":"popup-sheet__exit_kagvy","exitBySwipe":"popup-sheet__exitBySwipe_kagvy","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_kagvy","exitActive":"popup-sheet__exitActive_kagvy"};
+const styles = {"component":"popup-sheet__component_walne","closer":"popup-sheet__closer_walne","content":"popup-sheet__content_walne","appear":"popup-sheet__appear_walne","enter":"popup-sheet__enter_walne","appearActive":"popup-sheet__appearActive_walne","enterActive":"popup-sheet__enterActive_walne","exit":"popup-sheet__exit_walne","exitBySwipe":"popup-sheet__exitBySwipe_walne","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_walne","exitActive":"popup-sheet__exitActive_walne"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/moderncssm/Component.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useState, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { useSwipeable } from 'react-swipeable';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/moderncssm';
@@ -99,6 +100,8 @@ const PopupSheet = forwardRef(({ children, hasCloser, className, onClose, transi
         trackTouch: swipeable,
         delta: 5,
     });
+    const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;
+    const componentRef = mergeRefs([sheetRef, swipeRef]);
     return (React.createElement(BaseModal, { ...restProps, onClose: onClose, ref: ref, className: cn(styles.component, className), dataTestId: dataTestId, Backdrop: PopupBackdrop, backdropProps: {
             ...backdropProps,
             opacity: backdropOpacity,
@@ -118,12 +121,12 @@ const PopupSheet = forwardRef(({ children, hasCloser, className, onClose, transi
             onEntered: handleEntered,
             onExited: handleExited,
         }, componentDivProps: {
-            ref: sheetRef,
+            ref: componentRef,
             style: getSwipeStyles(),
+            ...(swipeable ? swipeHandlers : {}),
         }, contentProps: {
             style: createPaddingStyle(padding),
             ...contentProps,
-            ...sheetSwipeableHandlers,
             className: cn(styles.content, contentProps?.className),
         } },
         hasCloser && (React.createElement(Closer, { view: 'mobile', onClick: onClose, dataTestId: getDataTestId(dataTestId, 'closer'), ...closerProps, className: cn(styles.closer, closerProps?.className) })),

package/moderncssm/Component.js.map

@@ -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":[],"mappings":"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"}
+{"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 mergeRefs from 'react-merge-refs';\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        const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;\n        const componentRef = mergeRefs([sheetRef, swipeRef]);\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: componentRef,\n                    style: getSwipeStyles(),\n                    ...(swipeable ? swipeHandlers : {}),\n                }}\n                contentProps={{\n                    style: createPaddingStyle(padding),\n                    ...contentProps,\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":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-popup-sheet",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "description": "Popup sheet mobile component",
     "keywords": [],
     "license": "MIT",
@@ -17,6 +17,7 @@
         "@alfalab/core-components-types": "^1.0.0",
         "classnames": "^2.5.1",
         "react-swipeable": "^7.0.0",
+        "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
@@ -27,6 +28,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
+    "themesVersion": "14.1.1",
     "varsVersion": "10.1.0"
 }

package/src/Component.tsx

@@ -6,6 +6,7 @@ import React, {
     useRef,
     useState,
 } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { SwipeCallback, useSwipeable } from 'react-swipeable';
 import cn from 'classnames';
 
@@ -186,6 +187,9 @@ export const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(
             delta: 5,
         });
 
+        const { ref: swipeRef, ...swipeHandlers } = sheetSwipeableHandlers;
+        const componentRef = mergeRefs([sheetRef, swipeRef]);
+
         return (
             <BaseModal
                 {...restProps}
@@ -215,13 +219,13 @@ export const PopupSheet = forwardRef<HTMLDivElement, PopupSheetProps>(
                     onExited: handleExited,
                 }}
                 componentDivProps={{
-                    ref: sheetRef,
+                    ref: componentRef,
                     style: getSwipeStyles(),
+                    ...(swipeable ? swipeHandlers : {}),
                 }}
                 contentProps={{
                     style: createPaddingStyle(padding),
                     ...contentProps,
-                    ...sheetSwipeableHandlers,
                     className: cn(styles.content, contentProps?.className),
                 }}
             >