@alfalab/core-components-universal-modal 3.0.7 → 3.1.0

package/modern/desktop/styles/transitions/full-size-vertical-top-transitions.module.css.js

@@ -1,6 +1,6 @@
 import './full-size-vertical-top-transitions.css';
 
-const fullSizeVerticalTopTransitions = {"appear":"universal-modal__appear_1r3vm","enter":"universal-modal__enter_1r3vm","appearActive":"universal-modal__appearActive_1r3vm","enterActive":"universal-modal__enterActive_1r3vm","exit":"universal-modal__exit_1r3vm","exitActive":"universal-modal__exitActive_1r3vm","exitDone":"universal-modal__exitDone_1r3vm"};
+const fullSizeVerticalTopTransitions = {"appear":"universal-modal__appear_qhje1","enter":"universal-modal__enter_qhje1","appearActive":"universal-modal__appearActive_qhje1","enterActive":"universal-modal__enterActive_qhje1","exit":"universal-modal__exit_qhje1","exitActive":"universal-modal__exitActive_qhje1","exitDone":"universal-modal__exitDone_qhje1"};
 
 export { fullSizeVerticalTopTransitions as default };
 //# sourceMappingURL=full-size-vertical-top-transitions.module.css.js.map

package/modern/mobile/mobile.css

@@ -1,7 +1,7 @@
 :root {
     --gap-0: 0px;
 }
-.universal-modal__component_vlc5a {
+.universal-modal__component_1sesv {
     top: var(--gap-0);
     height: 100%;
     width: 100%;
@@ -11,10 +11,10 @@
     display: flex;
     flex-direction: column;
 }
-.universal-modal__component_vlc5a .universal-modal__content_vlc5a {
+.universal-modal__component_1sesv .universal-modal__content_1sesv {
         height: auto;
     }
-.universal-modal__component_vlc5a.universal-modal__component_vlc5a {
+.universal-modal__component_1sesv.universal-modal__component_1sesv {
     position: fixed;
     flex: 1;
 }

package/modern/mobile/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const styles = {"component":"universal-modal__component_vlc5a","content":"universal-modal__content_vlc5a"};
+const styles = {"component":"universal-modal__component_1sesv","content":"universal-modal__content_1sesv"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/mobile/transitions/right-side-transitions.mobile.css

@@ -1,18 +1,18 @@
-.universal-modal__appear_1dfvp,
-.universal-modal__enter_1dfvp {
+.universal-modal__appear_lb0xx,
+.universal-modal__enter_lb0xx {
     transform: translateX(100%);
 }
-.universal-modal__appearActive_1dfvp,
-.universal-modal__enterActive_1dfvp {
+.universal-modal__appearActive_lb0xx,
+.universal-modal__enterActive_lb0xx {
     transform: translateX(0);
     transition: transform 280ms ease-in-out;
     transition-delay: 80ms;
 }
-.universal-modal__exit_1dfvp {
+.universal-modal__exit_lb0xx {
     transform: translateX(0);
 }
-.universal-modal__exitActive_1dfvp,
-.universal-modal__exitDone_1dfvp {
+.universal-modal__exitActive_lb0xx,
+.universal-modal__exitDone_lb0xx {
     transform: translateX(100%);
     transition: transform 280ms ease-in-out;
 }

package/modern/mobile/transitions/right-side-transitions.mobile.module.css.js

@@ -1,6 +1,6 @@
 import './right-side-transitions.mobile.css';
 
-const rightSideTransitions = {"appear":"universal-modal__appear_1dfvp","enter":"universal-modal__enter_1dfvp","appearActive":"universal-modal__appearActive_1dfvp","enterActive":"universal-modal__enterActive_1dfvp","exit":"universal-modal__exit_1dfvp","exitActive":"universal-modal__exitActive_1dfvp","exitDone":"universal-modal__exitDone_1dfvp"};
+const rightSideTransitions = {"appear":"universal-modal__appear_lb0xx","enter":"universal-modal__enter_lb0xx","appearActive":"universal-modal__appearActive_lb0xx","enterActive":"universal-modal__enterActive_lb0xx","exit":"universal-modal__exit_lb0xx","exitActive":"universal-modal__exitActive_lb0xx","exitDone":"universal-modal__exitDone_lb0xx"};
 
 export { rightSideTransitions as default };
 //# sourceMappingURL=right-side-transitions.mobile.module.css.js.map

package/modern/mobile/transitions/transitions.mobile.css

@@ -1,11 +1,11 @@
-.universal-modal__appear_19v2h,
-.universal-modal__enter_19v2h {
+.universal-modal__appear_e8qz6,
+.universal-modal__enter_e8qz6 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.universal-modal__appearActive_19v2h,
-.universal-modal__enterActive_19v2h {
+.universal-modal__appearActive_e8qz6,
+.universal-modal__enterActive_e8qz6 {
     opacity: 1;
     transform: translateY(0);
     transition:
@@ -13,13 +13,13 @@
         transform 200ms ease-in;
 }
 
-.universal-modal__exit_19v2h {
+.universal-modal__exit_e8qz6 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.universal-modal__exitActive_19v2h,
-.universal-modal__exitDone_19v2h {
+.universal-modal__exitActive_e8qz6,
+.universal-modal__exitDone_e8qz6 {
     opacity: 0;
     transform: translateY(15px);
     transition:

package/modern/mobile/transitions/transitions.mobile.module.css.js

@@ -1,6 +1,6 @@
 import './transitions.mobile.css';
 
-const transitions = {"appear":"universal-modal__appear_19v2h","enter":"universal-modal__enter_19v2h","appearActive":"universal-modal__appearActive_19v2h","enterActive":"universal-modal__enterActive_19v2h","exit":"universal-modal__exit_19v2h","exitActive":"universal-modal__exitActive_19v2h","exitDone":"universal-modal__exitDone_19v2h"};
+const transitions = {"appear":"universal-modal__appear_e8qz6","enter":"universal-modal__enter_e8qz6","appearActive":"universal-modal__appearActive_e8qz6","enterActive":"universal-modal__enterActive_e8qz6","exit":"universal-modal__exit_e8qz6","exitActive":"universal-modal__exitActive_e8qz6","exitDone":"universal-modal__exitDone_e8qz6"};
 
 export { transitions as default };
 //# sourceMappingURL=transitions.mobile.module.css.js.map

package/moderncssm/desktop/components/center-modal/center-modal.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/moderncssm';
 import { isMacOS, isSafari } from '@alfalab/core-components-shared/moderncssm';
-import { useModalWheel } from '../../hooks/useModalWheel.js';
+import { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref.js';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions.js';
 import { getHeightStyle } from '../../utils/get-height-style.js';
 import { getMarginStyles } from '../../utils/get-margin-styles.js';
@@ -15,23 +15,27 @@ import transitions from './transitions/transitions.module.css';
 // в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию
 const transitionProps = isMacOS() && isSafari() ? safariTransitions : transitions;
 const CenterModal = forwardRef((props, ref) => {
-    const { dataTestId, className, open, children, width = 500, height = 'hugContent', verticalAlign = 'center', overlay = true, margin, scrollableContainerRef, onClose, ...restProps } = props;
+    const { dataTestId, className, open, children, width = 500, height = 'hugContent', verticalAlign = 'center', overlay = true, margin, scrollableContainerRef: scrollableContainerRefProp, onClose, ...restProps } = props;
     const componentRef = useRef(null);
-    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);
+    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({
+        overlay,
+        refObject: scrollableContainerRefProp,
+    });
     const { isFullSizeModal, componentTransitions: fullSizeModalContentTransitions, backdropTransitions: fullSizeModalBackdropTransitions, } = getFullSizeModalTransitions({ verticalAlign, width, height });
-    return (React.createElement(BaseModal, { ...restProps, open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, scrollHandler: 'content', disableBlockingScroll: !overlay, wrapperClassName: cn({
+    const withoutOverlay = !overlay;
+    return (React.createElement(BaseModal, { ...restProps, open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, scrollHandler: 'content', disableBlockingScroll: withoutOverlay, wrapperClassName: cn(styles.baseModalContainer, {
             [styles.wrapperJustifyStart]: verticalAlign === 'top',
             [styles.wrapperJustifyCenter]: verticalAlign === 'center',
             [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',
-        }), className: cn(styles.component, className, {
-            [styles.overlayHidden]: !overlay,
+            [styles.withoutOverlay]: withoutOverlay,
+        }), className: cn(styles.component, className, styles.baseModalComponent, {
             ...getMarginStyles({ styles, margin }),
         }), transitionProps: {
             classNames: transitionProps,
             ...(isFullSizeModal && fullSizeModalContentTransitions),
             ...restProps.transitionProps,
         }, backdropProps: {
-            transparent: !overlay,
+            shouldRender: overlay,
             ...(isFullSizeModal && fullSizeModalBackdropTransitions),
             ...restProps.backdropProps,
         }, componentDivProps: {
@@ -40,7 +44,7 @@ const CenterModal = forwardRef((props, ref) => {
                 ...getHeightStyle(height, margin),
             },
         }, onWheel: handleWheel, onClose: onClose },
-        React.createElement(ModalContent, { height: height, wheelDeltaY: wheelDeltaY, scrollableContainerRef: scrollableContainerRef }, children)));
+        React.createElement(ModalContent, { height: height, scrollableContainerRef: scrollableContainerRef }, children)));
 });
 
 export { CenterModal };

package/moderncssm/desktop/components/center-modal/center-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"center-modal.js","sources":["../../../../src/desktop/components/center-modal/center-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { isMacOS, isSafari } from '@alfalab/core-components-shared';\n\nimport { useModalWheel } from '../../hooks/useModalWheel';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport styles from './index.module.css';\nimport safariTransitions from './transitions/safari-transitions.module.css';\nimport transitions from './transitions/transitions.module.css';\n\n// в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию\nconst transitionProps = isMacOS() && isSafari() ? safariTransitions : transitions;\n\nexport const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n    const {\n        dataTestId,\n        className,\n        open,\n        children,\n        width = 500,\n        height = 'hugContent',\n        verticalAlign = 'center',\n        overlay = true,\n        margin,\n        scrollableContainerRef,\n        onClose,\n        ...restProps\n    } = props;\n\n    const componentRef = useRef<HTMLDivElement>(null);\n\n    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);\n\n    const {\n        isFullSizeModal,\n        componentTransitions: fullSizeModalContentTransitions,\n        backdropTransitions: fullSizeModalBackdropTransitions,\n    } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n    return (\n        <BaseModal\n            {...restProps}\n            open={open}\n            dataTestId={dataTestId}\n            ref={ref}\n            componentRef={componentRef}\n            scrollHandler='content'\n            disableBlockingScroll={!overlay}\n            wrapperClassName={cn({\n                [styles.wrapperJustifyStart]: verticalAlign === 'top',\n                [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n                [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n            })}\n            className={cn(styles.component, className, {\n                [styles.overlayHidden]: !overlay,\n                ...getMarginStyles({ styles, margin }),\n            })}\n            transitionProps={{\n                classNames: transitionProps,\n                ...(isFullSizeModal && fullSizeModalContentTransitions),\n                ...restProps.transitionProps,\n            }}\n            backdropProps={{\n                transparent: !overlay,\n                ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n                ...restProps.backdropProps,\n            }}\n            componentDivProps={{\n                style: {\n                    width: getWidthStyle(width, margin),\n                    ...getHeightStyle(height, margin),\n                },\n            }}\n            onWheel={handleWheel}\n            onClose={onClose}\n        >\n            <ModalContent\n                height={height}\n                wheelDeltaY={wheelDeltaY}\n                scrollableContainerRef={scrollableContainerRef}\n            >\n                {children}\n            </ModalContent>\n        </BaseModal>\n    );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkBA;AACA,MAAM,eAAe,GAAG,OAAO,EAAE,IAAI,QAAQ,EAAE,GAAG,iBAAiB,GAAG,WAAW;AAEpE,MAAA,WAAW,GAAG,UAAU,CAA6C,CAAC,KAAK,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,EACF,UAAU,EACV,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,YAAY,EACrB,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,IAAI,EACd,MAAM,EACN,sBAAsB,EACtB,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;IAEjD,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC;IAE3D,MAAM,EACF,eAAe,EACf,oBAAoB,EAAE,+BAA+B,EACrD,mBAAmB,EAAE,gCAAgC,GACxD,GAAG,2BAA2B,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEjE,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GACF,SAAS,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAC,SAAS,EACvB,qBAAqB,EAAE,CAAC,OAAO,EAC/B,gBAAgB,EAAE,EAAE,CAAC;AACjB,YAAA,CAAC,MAAM,CAAC,mBAAmB,GAAG,aAAa,KAAK,KAAK;AACrD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa,KAAK,QAAQ;AACzD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,aAAa,KAAK,QAAQ;SACzD,CAAC,EACF,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE;AACvC,YAAA,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,OAAO;AAChC,YAAA,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACzC,CAAC,EACF,eAAe,EAAE;AACb,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,IAAI,eAAe,IAAI,+BAA+B,CAAC;YACvD,GAAG,SAAS,CAAC,eAAe;AAC/B,SAAA,EACD,aAAa,EAAE;YACX,WAAW,EAAE,CAAC,OAAO;AACrB,YAAA,IAAI,eAAe,IAAI,gCAAgC,CAAC;YACxD,GAAG,SAAS,CAAC,aAAa;AAC7B,SAAA,EACD,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACnC,gBAAA,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACpC,aAAA;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,sBAAsB,EAAE,sBAAsB,EAAA,EAE7C,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}
+{"version":3,"file":"center-modal.js","sources":["../../../../src/desktop/components/center-modal/center-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { isMacOS, isSafari } from '@alfalab/core-components-shared';\n\nimport { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport styles from './index.module.css';\nimport safariTransitions from './transitions/safari-transitions.module.css';\nimport transitions from './transitions/transitions.module.css';\n\n// в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию\nconst transitionProps = isMacOS() && isSafari() ? safariTransitions : transitions;\n\nexport const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n    const {\n        dataTestId,\n        className,\n        open,\n        children,\n        width = 500,\n        height = 'hugContent',\n        verticalAlign = 'center',\n        overlay = true,\n        margin,\n        scrollableContainerRef: scrollableContainerRefProp,\n        onClose,\n        ...restProps\n    } = props;\n\n    const componentRef = useRef<HTMLDivElement>(null);\n    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({\n        overlay,\n        refObject: scrollableContainerRefProp,\n    });\n\n    const {\n        isFullSizeModal,\n        componentTransitions: fullSizeModalContentTransitions,\n        backdropTransitions: fullSizeModalBackdropTransitions,\n    } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n    const withoutOverlay = !overlay;\n\n    return (\n        <BaseModal\n            {...restProps}\n            open={open}\n            dataTestId={dataTestId}\n            ref={ref}\n            componentRef={componentRef}\n            scrollHandler='content'\n            disableBlockingScroll={withoutOverlay}\n            wrapperClassName={cn(styles.baseModalContainer, {\n                [styles.wrapperJustifyStart]: verticalAlign === 'top',\n                [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n                [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n                [styles.withoutOverlay]: withoutOverlay,\n            })}\n            className={cn(styles.component, className, styles.baseModalComponent, {\n                ...getMarginStyles({ styles, margin }),\n            })}\n            transitionProps={{\n                classNames: transitionProps,\n                ...(isFullSizeModal && fullSizeModalContentTransitions),\n                ...restProps.transitionProps,\n            }}\n            backdropProps={{\n                shouldRender: overlay,\n                ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n                ...restProps.backdropProps,\n            }}\n            componentDivProps={{\n                style: {\n                    width: getWidthStyle(width, margin),\n                    ...getHeightStyle(height, margin),\n                },\n            }}\n            onWheel={handleWheel}\n            onClose={onClose}\n        >\n            <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>\n                {children}\n            </ModalContent>\n        </BaseModal>\n    );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkBA;AACA,MAAM,eAAe,GAAG,OAAO,EAAE,IAAI,QAAQ,EAAE,GAAG,iBAAiB,GAAG,WAAW;AAEpE,MAAA,WAAW,GAAG,UAAU,CAA6C,CAAC,KAAK,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,EACF,UAAU,EACV,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,YAAY,EACrB,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,IAAI,EACd,MAAM,EACN,sBAAsB,EAAE,0BAA0B,EAClD,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,CAAC;QACtE,OAAO;AACP,QAAA,SAAS,EAAE,0BAA0B;AACxC,KAAA,CAAC;IAEF,MAAM,EACF,eAAe,EACf,oBAAoB,EAAE,+BAA+B,EACrD,mBAAmB,EAAE,gCAAgC,GACxD,GAAG,2BAA2B,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEjE,IAAA,MAAM,cAAc,GAAG,CAAC,OAAO;AAE/B,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACF,EAAA,GAAA,SAAS,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAC,SAAS,EACvB,qBAAqB,EAAE,cAAc,EACrC,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AAC5C,YAAA,CAAC,MAAM,CAAC,mBAAmB,GAAG,aAAa,KAAK,KAAK;AACrD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa,KAAK,QAAQ;AACzD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,aAAa,KAAK,QAAQ;AACtD,YAAA,CAAC,MAAM,CAAC,cAAc,GAAG,cAAc;AAC1C,SAAA,CAAC,EACF,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE;AAClE,YAAA,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACzC,CAAC,EACF,eAAe,EAAE;AACb,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,IAAI,eAAe,IAAI,+BAA+B,CAAC;YACvD,GAAG,SAAS,CAAC,eAAe;AAC/B,SAAA,EACD,aAAa,EAAE;AACX,YAAA,YAAY,EAAE,OAAO;AACrB,YAAA,IAAI,eAAe,IAAI,gCAAgC,CAAC;YACxD,GAAG,SAAS,CAAC,aAAa;AAC7B,SAAA,EACD,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACnC,gBAAA,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACpC,aAAA;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,sBAAsB,EACvE,EAAA,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}

package/moderncssm/desktop/components/center-modal/index.module.css

@@ -10,10 +10,6 @@
             backface-visibility: hidden;
 }
 
-.component.overlayHidden {
-        box-shadow: var(--shadow-m);
-    }
-
 .wrapperJustifyStart {
     justify-content: flex-start;
 }
@@ -26,6 +22,15 @@
     justify-content: flex-end;
 }
 
+.baseModalContainer.withoutOverlay {
+        pointer-events: none;
+    }
+
+.baseModalContainer.withoutOverlay .baseModalComponent {
+            pointer-events: auto;
+            box-shadow: var(--shadow-m);
+        }
+
 .marginTop-0 {
         margin-top: 0px;
     }

package/moderncssm/desktop/components/modal-content/modal-content.d.ts

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
 import { type BaseModalProps } from '@alfalab/core-components-base-modal/moderncssm';
 import { type UniversalModalDesktopProps } from '../../types/props';
-interface Props extends Pick<BaseModalProps, 'children'>, Pick<UniversalModalDesktopProps, 'height' | 'scrollableContainerRef'> {
-    wheelDeltaY: number;
-}
+type PickedBaseModalProps = Pick<BaseModalProps, 'children'>;
+type PickedUniversalModalDesktopProps = Pick<UniversalModalDesktopProps, 'height' | 'scrollableContainerRef'>;
+type Props = PickedBaseModalProps & PickedUniversalModalDesktopProps;
 export declare const ModalContent: FC<Props>;
 export {};

package/moderncssm/desktop/components/modal-content/modal-content.js

@@ -3,13 +3,12 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { Scrollbar } from '@alfalab/core-components-scrollbar/moderncssm';
 import { useModalHighlighted } from '../../hooks/use-modal-highlighted.js';
-import { useOutsideScroll } from '../../hooks/use-outside-scroll.js';
 import { useSetScrollbarHeight } from '../../hooks/use-set-scrollbar-height.js';
 import { setFooterAndHeaderRefs } from '../../utils/set-footer-and-header-refs.js';
 import styles from './modal-content.module.css';
 
 const ModalContent = (props) => {
-    const { children, wheelDeltaY, height, scrollableContainerRef = null } = props;
+    const { children, height, scrollableContainerRef = null } = props;
     const scrollableNodeRef = useRef(null);
     const scrollbarContentNodeRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -17,7 +16,6 @@ const ModalContent = (props) => {
     const headerElementRef = useRef(null);
     const footerElementRef = useRef(null);
     const { handleScroll } = useModalHighlighted({ scrollbarContentNodeRef, scrollableNodeRef });
-    useOutsideScroll({ scrollableNodeRef, wheelDeltaY });
     const { enhancedChildren } = setFooterAndHeaderRefs({
         children,
         headerElementRef,

package/moderncssm/desktop/components/modal-content/modal-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.js","sources":["../../../../src/desktop/components/modal-content/modal-content.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\n\nimport { useModalHighlighted } from '../../hooks/use-modal-highlighted';\nimport { useOutsideScroll } from '../../hooks/use-outside-scroll';\nimport { useSetScrollbarHeight } from '../../hooks/use-set-scrollbar-height';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { setFooterAndHeaderRefs } from '../../utils/set-footer-and-header-refs';\n\nimport styles from './modal-content.module.css';\n\ninterface Props\n    extends Pick<BaseModalProps, 'children'>,\n        Pick<UniversalModalDesktopProps, 'height' | 'scrollableContainerRef'> {\n    wheelDeltaY: number;\n}\n\nexport const ModalContent: FC<Props> = (props) => {\n    const { children, wheelDeltaY, height, scrollableContainerRef = null } = props;\n\n    const scrollableNodeRef = useRef<HTMLDivElement>(null);\n    const scrollbarContentNodeRef = useRef<HTMLDivElement>(null);\n    const scrollbarRef = useRef<HTMLDivElement | null>(null);\n    const verticalBarRef = useRef<HTMLDivElement>(null);\n    const headerElementRef = useRef<HTMLDivElement>(null);\n    const footerElementRef = useRef<HTMLDivElement | null>(null);\n\n    const { handleScroll } = useModalHighlighted({ scrollbarContentNodeRef, scrollableNodeRef });\n\n    useOutsideScroll({ scrollableNodeRef, wheelDeltaY });\n\n    const { enhancedChildren } = setFooterAndHeaderRefs({\n        children,\n        headerElementRef,\n        footerElementRef,\n    });\n\n    useSetScrollbarHeight({ scrollbarRef, verticalBarRef, headerElementRef, footerElementRef });\n\n    return (\n        <Scrollbar\n            className={styles.scrollable}\n            ref={scrollbarRef}\n            verticalBarRef={verticalBarRef}\n            scrollableNodeProps={{\n                ref: mergeRefs([scrollableNodeRef, scrollableContainerRef]),\n                className: styles.scrollableNode,\n            }}\n            contentNodeProps={{\n                ref: scrollbarContentNodeRef,\n                className: cn(styles.contentNode, {\n                    [styles.hugContent]: height === 'hugContent',\n                }),\n            }}\n            onContentScroll={handleScroll}\n        >\n            {enhancedChildren}\n        </Scrollbar>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAqBa,MAAA,YAAY,GAAc,CAAC,KAAK,KAAI;AAC7C,IAAA,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,sBAAsB,GAAG,IAAI,EAAE,GAAG,KAAK;AAE9E,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACtD,IAAA,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC5D,IAAA,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAwB,IAAI,CAAC;AAE5D,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,mBAAmB,CAAC,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,CAAC;AAE5F,IAAA,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC;AAEpD,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,CAAC;QAChD,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;AACnB,KAAA,CAAC;IAEF,qBAAqB,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAE3F,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,IACN,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE;YACjB,GAAG,EAAE,SAAS,CAAC,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;YAC3D,SAAS,EAAE,MAAM,CAAC,cAAc;AACnC,SAAA,EACD,gBAAgB,EAAE;AACd,YAAA,GAAG,EAAE,uBAAuB;AAC5B,YAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,MAAM,KAAK,YAAY;aAC/C,CAAC;AACL,SAAA,EACD,eAAe,EAAE,YAAY,IAE5B,gBAAgB,CACT;AAEpB;;;;"}
+{"version":3,"file":"modal-content.js","sources":["../../../../src/desktop/components/modal-content/modal-content.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\n\nimport { useModalHighlighted } from '../../hooks/use-modal-highlighted';\nimport { useSetScrollbarHeight } from '../../hooks/use-set-scrollbar-height';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { setFooterAndHeaderRefs } from '../../utils/set-footer-and-header-refs';\n\nimport styles from './modal-content.module.css';\n\ntype PickedBaseModalProps = Pick<BaseModalProps, 'children'>;\ntype PickedUniversalModalDesktopProps = Pick<\n    UniversalModalDesktopProps,\n    'height' | 'scrollableContainerRef'\n>;\n\ntype Props = PickedBaseModalProps & PickedUniversalModalDesktopProps;\n\nexport const ModalContent: FC<Props> = (props) => {\n    const { children, height, scrollableContainerRef = null } = props;\n\n    const scrollableNodeRef = useRef<HTMLDivElement>(null);\n    const scrollbarContentNodeRef = useRef<HTMLDivElement>(null);\n    const scrollbarRef = useRef<HTMLDivElement | null>(null);\n    const verticalBarRef = useRef<HTMLDivElement>(null);\n    const headerElementRef = useRef<HTMLDivElement>(null);\n    const footerElementRef = useRef<HTMLDivElement | null>(null);\n\n    const { handleScroll } = useModalHighlighted({ scrollbarContentNodeRef, scrollableNodeRef });\n\n    const { enhancedChildren } = setFooterAndHeaderRefs({\n        children,\n        headerElementRef,\n        footerElementRef,\n    });\n\n    useSetScrollbarHeight({ scrollbarRef, verticalBarRef, headerElementRef, footerElementRef });\n\n    return (\n        <Scrollbar\n            className={styles.scrollable}\n            ref={scrollbarRef}\n            verticalBarRef={verticalBarRef}\n            scrollableNodeProps={{\n                ref: mergeRefs([scrollableNodeRef, scrollableContainerRef]),\n                className: styles.scrollableNode,\n            }}\n            contentNodeProps={{\n                ref: scrollbarContentNodeRef,\n                className: cn(styles.contentNode, {\n                    [styles.hugContent]: height === 'hugContent',\n                }),\n            }}\n            onContentScroll={handleScroll}\n        >\n            {enhancedChildren}\n        </Scrollbar>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAsBa,MAAA,YAAY,GAAc,CAAC,KAAK,KAAI;IAC7C,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,sBAAsB,GAAG,IAAI,EAAE,GAAG,KAAK;AAEjE,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACtD,IAAA,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC5D,IAAA,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAwB,IAAI,CAAC;AAE5D,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,mBAAmB,CAAC,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,CAAC;AAE5F,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,CAAC;QAChD,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;AACnB,KAAA,CAAC;IAEF,qBAAqB,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAE3F,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,IACN,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE;YACjB,GAAG,EAAE,SAAS,CAAC,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;YAC3D,SAAS,EAAE,MAAM,CAAC,cAAc;AACnC,SAAA,EACD,gBAAgB,EAAE;AACd,YAAA,GAAG,EAAE,uBAAuB;AAC5B,YAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,MAAM,KAAK,YAAY;aAC/C,CAAC;AACL,SAAA,EACD,eAAe,EAAE,YAAY,IAE5B,gBAAgB,CACT;AAEpB;;;;"}

package/moderncssm/desktop/components/side-modal/index.module.css

@@ -30,10 +30,15 @@
             backface-visibility: hidden;
 }
 
-.component.overlayHidden {
-        box-shadow: var(--shadow-m);
+.baseModalContainer.withoutOverlay {
+        pointer-events: none;
     }
 
+.baseModalContainer.withoutOverlay .baseModalComponent {
+            pointer-events: auto;
+            box-shadow: var(--shadow-m);
+        }
+
 .marginTop-0 {
         margin-top: 0px;
     }

package/moderncssm/desktop/components/side-modal/side-modal.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/moderncssm';
-import { useModalWheel } from '../../hooks/useModalWheel.js';
+import { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref.js';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions.js';
 import { getHeightStyle } from '../../utils/get-height-style.js';
 import { getMarginStyles } from '../../utils/get-margin-styles.js';
@@ -11,18 +11,22 @@ import { getDefaultTransitionProps } from './get-default-transition-props.js';
 import styles from './index.module.css';
 
 const SideModal = forwardRef((props, ref) => {
-    const { width = 500, height = 'fullHeight', horizontalAlign = 'center', verticalAlign = 'center', overlay = true, open, dataTestId, className, children, margin, scrollableContainerRef, onClose, ...restProps } = props;
+    const { width = 500, height = 'fullHeight', horizontalAlign = 'center', verticalAlign = 'center', overlay = true, open, dataTestId, className, children, margin, scrollableContainerRef: scrollableContainerRefProp, onClose, ...restProps } = props;
     const componentRef = useRef(null);
     const contentRef = useRef(null);
-    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);
+    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({
+        overlay,
+        refObject: scrollableContainerRefProp,
+    });
     const { isFullSizeModal, componentTransitions: fullSizeModalContentTransitions, backdropTransitions: fullSizeModalBackdropTransitions, } = getFullSizeModalTransitions({ verticalAlign, width, height });
-    return (React.createElement(BaseModal, { ...restProps, open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, contentElementRef: contentRef, scrollHandler: 'content', disableBlockingScroll: !overlay, wrapperClassName: cn(styles.wrapper, {
+    const withoutOverlay = !overlay;
+    return (React.createElement(BaseModal, { ...restProps, open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, contentElementRef: contentRef, scrollHandler: 'content', disableBlockingScroll: withoutOverlay, wrapperClassName: cn(styles.wrapper, styles.baseModalContainer, {
             [styles.wrapperAlignStart]: horizontalAlign === 'start',
             [styles.wrapperAlignEnd]: horizontalAlign === 'end',
             [styles.wrapperJustifyCenter]: verticalAlign === 'center',
             [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',
-        }), className: cn(styles.component, className, {
-            [styles.overlayHidden]: !overlay,
+            [styles.withoutOverlay]: withoutOverlay,
+        }), className: cn(styles.component, className, styles.baseModalComponent, {
             ...getMarginStyles({ styles, margin }),
         }), contentClassName: styles.content, transitionProps: {
             ...getDefaultTransitionProps({
@@ -32,7 +36,7 @@ const SideModal = forwardRef((props, ref) => {
             ...(isFullSizeModal && fullSizeModalContentTransitions),
             ...restProps.transitionProps,
         }, backdropProps: {
-            transparent: !overlay,
+            shouldRender: overlay,
             ...(isFullSizeModal && fullSizeModalBackdropTransitions),
             ...restProps.backdropProps,
         }, componentDivProps: {
@@ -41,7 +45,7 @@ const SideModal = forwardRef((props, ref) => {
                 ...getHeightStyle(height, margin),
             },
         }, onWheel: handleWheel, onClose: onClose },
-        React.createElement(ModalContent, { height: height, wheelDeltaY: wheelDeltaY, scrollableContainerRef: scrollableContainerRef }, children)));
+        React.createElement(ModalContent, { height: height, scrollableContainerRef: scrollableContainerRef }, children)));
 });
 
 export { SideModal };

package/moderncssm/desktop/components/side-modal/side-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-modal.js","sources":["../../../../src/desktop/components/side-modal/side-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { useModalWheel } from '../../hooks/useModalWheel';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport { getDefaultTransitionProps } from './get-default-transition-props';\n\nimport styles from './index.module.css';\n\nexport const SideModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n    const {\n        width = 500,\n        height = 'fullHeight',\n        horizontalAlign = 'center',\n        verticalAlign = 'center',\n        overlay = true,\n        open,\n        dataTestId,\n        className,\n        children,\n        margin,\n        scrollableContainerRef,\n        onClose,\n        ...restProps\n    } = props;\n    const componentRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);\n\n    const {\n        isFullSizeModal,\n        componentTransitions: fullSizeModalContentTransitions,\n        backdropTransitions: fullSizeModalBackdropTransitions,\n    } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n    return (\n        <BaseModal\n            {...restProps}\n            open={open}\n            dataTestId={dataTestId}\n            ref={ref}\n            componentRef={componentRef}\n            contentElementRef={contentRef}\n            scrollHandler='content'\n            disableBlockingScroll={!overlay}\n            wrapperClassName={cn(styles.wrapper, {\n                [styles.wrapperAlignStart]: horizontalAlign === 'start',\n                [styles.wrapperAlignEnd]: horizontalAlign === 'end',\n                [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n                [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n            })}\n            className={cn(styles.component, className, {\n                [styles.overlayHidden]: !overlay,\n                ...getMarginStyles({ styles, margin }),\n            })}\n            contentClassName={styles.content}\n            transitionProps={{\n                ...getDefaultTransitionProps({\n                    horizontalAlign,\n                    margin,\n                }),\n                ...(isFullSizeModal && fullSizeModalContentTransitions),\n                ...restProps.transitionProps,\n            }}\n            backdropProps={{\n                transparent: !overlay,\n                ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n                ...restProps.backdropProps,\n            }}\n            componentDivProps={{\n                style: {\n                    width: getWidthStyle(width, margin),\n                    ...getHeightStyle(height, margin),\n                },\n            }}\n            onWheel={handleWheel}\n            onClose={onClose}\n        >\n            <ModalContent\n                height={height}\n                wheelDeltaY={wheelDeltaY}\n                scrollableContainerRef={scrollableContainerRef}\n            >\n                {children}\n            </ModalContent>\n        </BaseModal>\n    );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBa,MAAA,SAAS,GAAG,UAAU,CAA6C,CAAC,KAAK,EAAE,GAAG,KAAI;AAC3F,IAAA,MAAM,EACF,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,YAAY,EACrB,eAAe,GAAG,QAAQ,EAC1B,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AACT,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE/C,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC;IAE3D,MAAM,EACF,eAAe,EACf,oBAAoB,EAAE,+BAA+B,EACrD,mBAAmB,EAAE,gCAAgC,GACxD,GAAG,2BAA2B,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEjE,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,OACF,SAAS,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,iBAAiB,EAAE,UAAU,EAC7B,aAAa,EAAC,SAAS,EACvB,qBAAqB,EAAE,CAAC,OAAO,EAC/B,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;AACjC,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,eAAe,KAAK,OAAO;AACvD,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,eAAe,KAAK,KAAK;AACnD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa,KAAK,QAAQ;AACzD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,aAAa,KAAK,QAAQ;SACzD,CAAC,EACF,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE;AACvC,YAAA,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,OAAO;AAChC,YAAA,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACzC,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,eAAe,EAAE;AACb,YAAA,GAAG,yBAAyB,CAAC;gBACzB,eAAe;gBACf,MAAM;aACT,CAAC;AACF,YAAA,IAAI,eAAe,IAAI,+BAA+B,CAAC;YACvD,GAAG,SAAS,CAAC,eAAe;AAC/B,SAAA,EACD,aAAa,EAAE;YACX,WAAW,EAAE,CAAC,OAAO;AACrB,YAAA,IAAI,eAAe,IAAI,gCAAgC,CAAC;YACxD,GAAG,SAAS,CAAC,aAAa;AAC7B,SAAA,EACD,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACnC,gBAAA,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACpC,aAAA;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,sBAAsB,EAAE,sBAAsB,EAAA,EAE7C,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}
+{"version":3,"file":"side-modal.js","sources":["../../../../src/desktop/components/side-modal/side-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport { getDefaultTransitionProps } from './get-default-transition-props';\n\nimport styles from './index.module.css';\n\nexport const SideModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n    const {\n        width = 500,\n        height = 'fullHeight',\n        horizontalAlign = 'center',\n        verticalAlign = 'center',\n        overlay = true,\n        open,\n        dataTestId,\n        className,\n        children,\n        margin,\n        scrollableContainerRef: scrollableContainerRefProp,\n        onClose,\n        ...restProps\n    } = props;\n    const componentRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({\n        overlay,\n        refObject: scrollableContainerRefProp,\n    });\n\n    const {\n        isFullSizeModal,\n        componentTransitions: fullSizeModalContentTransitions,\n        backdropTransitions: fullSizeModalBackdropTransitions,\n    } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n    const withoutOverlay = !overlay;\n\n    return (\n        <BaseModal\n            {...restProps}\n            open={open}\n            dataTestId={dataTestId}\n            ref={ref}\n            componentRef={componentRef}\n            contentElementRef={contentRef}\n            scrollHandler='content'\n            disableBlockingScroll={withoutOverlay}\n            wrapperClassName={cn(styles.wrapper, styles.baseModalContainer, {\n                [styles.wrapperAlignStart]: horizontalAlign === 'start',\n                [styles.wrapperAlignEnd]: horizontalAlign === 'end',\n                [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n                [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n                [styles.withoutOverlay]: withoutOverlay,\n            })}\n            className={cn(styles.component, className, styles.baseModalComponent, {\n                ...getMarginStyles({ styles, margin }),\n            })}\n            contentClassName={styles.content}\n            transitionProps={{\n                ...getDefaultTransitionProps({\n                    horizontalAlign,\n                    margin,\n                }),\n                ...(isFullSizeModal && fullSizeModalContentTransitions),\n                ...restProps.transitionProps,\n            }}\n            backdropProps={{\n                shouldRender: overlay,\n                ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n                ...restProps.backdropProps,\n            }}\n            componentDivProps={{\n                style: {\n                    width: getWidthStyle(width, margin),\n                    ...getHeightStyle(height, margin),\n                },\n            }}\n            onWheel={handleWheel}\n            onClose={onClose}\n        >\n            <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>\n                {children}\n            </ModalContent>\n        </BaseModal>\n    );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBa,MAAA,SAAS,GAAG,UAAU,CAA6C,CAAC,KAAK,EAAE,GAAG,KAAI;AAC3F,IAAA,MAAM,EACF,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,YAAY,EACrB,eAAe,GAAG,QAAQ,EAC1B,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,MAAM,EACN,sBAAsB,EAAE,0BAA0B,EAClD,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AACT,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,CAAC;QACtE,OAAO;AACP,QAAA,SAAS,EAAE,0BAA0B;AACxC,KAAA,CAAC;IAEF,MAAM,EACF,eAAe,EACf,oBAAoB,EAAE,+BAA+B,EACrD,mBAAmB,EAAE,gCAAgC,GACxD,GAAG,2BAA2B,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEjE,IAAA,MAAM,cAAc,GAAG,CAAC,OAAO;IAE/B,QACI,oBAAC,SAAS,EAAA,EAAA,GACF,SAAS,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,iBAAiB,EAAE,UAAU,EAC7B,aAAa,EAAC,SAAS,EACvB,qBAAqB,EAAE,cAAc,EACrC,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,kBAAkB,EAAE;AAC5D,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,eAAe,KAAK,OAAO;AACvD,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,eAAe,KAAK,KAAK;AACnD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa,KAAK,QAAQ;AACzD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,aAAa,KAAK,QAAQ;AACtD,YAAA,CAAC,MAAM,CAAC,cAAc,GAAG,cAAc;AAC1C,SAAA,CAAC,EACF,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE;AAClE,YAAA,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACzC,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,eAAe,EAAE;AACb,YAAA,GAAG,yBAAyB,CAAC;gBACzB,eAAe;gBACf,MAAM;aACT,CAAC;AACF,YAAA,IAAI,eAAe,IAAI,+BAA+B,CAAC;YACvD,GAAG,SAAS,CAAC,eAAe;AAC/B,SAAA,EACD,aAAa,EAAE;AACX,YAAA,YAAY,EAAE,OAAO;AACrB,YAAA,IAAI,eAAe,IAAI,gCAAgC,CAAC;YACxD,GAAG,SAAS,CAAC,aAAa;AAC7B,SAAA,EACD,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACnC,gBAAA,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACpC,aAAA;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,sBAAsB,EACvE,EAAA,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}

package/moderncssm/desktop/hooks/use-scrollable-container-ref.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject, type WheelEvent } from 'react';
+interface Params {
+    overlay: boolean;
+    refObject?: RefObject<HTMLDivElement>;
+}
+export declare const useScrollableContainerRef: ({ overlay, refObject }: Params) => {
+    handleWheel: (e: WheelEvent<HTMLElement>) => void;
+    scrollableContainerRef: RefObject<HTMLDivElement>;
+};
+export {};

package/moderncssm/desktop/hooks/use-scrollable-container-ref.js

@@ -0,0 +1,21 @@
+import { useRef, useCallback } from 'react';
+
+const useScrollableContainerRef = ({ overlay, refObject }) => {
+    const innerScrollableContainerRef = useRef(null);
+    const scrollableContainerRef = refObject || innerScrollableContainerRef;
+    const handleWheel = useCallback((e) => {
+        if (!overlay || e.target !== e.currentTarget) {
+            return;
+        }
+        scrollableContainerRef.current?.scrollBy({
+            top: e.deltaY,
+        });
+    }, [overlay, scrollableContainerRef]);
+    return {
+        handleWheel,
+        scrollableContainerRef,
+    };
+};
+
+export { useScrollableContainerRef };
+//# sourceMappingURL=use-scrollable-container-ref.js.map

package/moderncssm/desktop/hooks/use-scrollable-container-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scrollable-container-ref.js","sources":["../../../src/desktop/hooks/use-scrollable-container-ref.ts"],"sourcesContent":["import { type RefObject, useCallback, useRef, type WheelEvent } from 'react';\n\ninterface Params {\n    overlay: boolean;\n    refObject?: RefObject<HTMLDivElement>;\n}\n\nexport const useScrollableContainerRef = ({ overlay, refObject }: Params) => {\n    const innerScrollableContainerRef = useRef<HTMLDivElement>(null);\n    const scrollableContainerRef = refObject || innerScrollableContainerRef;\n\n    const handleWheel = useCallback(\n        (e: WheelEvent<HTMLElement>) => {\n            if (!overlay || e.target !== e.currentTarget) {\n                return;\n            }\n\n            scrollableContainerRef.current?.scrollBy({\n                top: e.deltaY,\n            });\n        },\n        [overlay, scrollableContainerRef],\n    );\n\n    return {\n        handleWheel,\n        scrollableContainerRef,\n    };\n};\n"],"names":[],"mappings":";;AAOa,MAAA,yBAAyB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAU,KAAI;AACxE,IAAA,MAAM,2BAA2B,GAAG,MAAM,CAAiB,IAAI,CAAC;AAChE,IAAA,MAAM,sBAAsB,GAAG,SAAS,IAAI,2BAA2B;AAEvE,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,CAA0B,KAAI;QAC3B,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAC1C;;AAGJ,QAAA,sBAAsB,CAAC,OAAO,EAAE,QAAQ,CAAC;YACrC,GAAG,EAAE,CAAC,CAAC,MAAM;AAChB,SAAA,CAAC;AACN,KAAC,EACD,CAAC,OAAO,EAAE,sBAAsB,CAAC,CACpC;IAED,OAAO;QACH,WAAW;QACX,sBAAsB;KACzB;AACL;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-universal-modal",
-    "version": "3.0.7",
+    "version": "3.1.0",
     "description": "UniversalModal component",
     "keywords": [],
     "license": "MIT",
@@ -11,7 +11,7 @@
     "module": "./esm/index.js",
     "dependencies": {
         "@alfalab/core-components-backdrop": "^5.0.2",
-        "@alfalab/core-components-base-modal": "^7.1.2",
+        "@alfalab/core-components-base-modal": "^7.1.3",
         "@alfalab/core-components-mq": "^6.0.3",
         "@alfalab/core-components-navigation-bar-private": "^2.0.6",
         "@alfalab/core-components-scrollbar": "^5.0.2",
@@ -30,6 +30,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.0.2",
+    "themesVersion": "15.0.3",
     "varsVersion": "11.0.2"
 }

package/src/desktop/components/center-modal/center-modal.module.css

@@ -1,4 +1,4 @@
-@import '../../../vars.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     border-radius: var(--border-radius-24);
@@ -11,10 +11,6 @@
     */
     will-change: transform, opacity;
     backface-visibility: hidden;
-
-    &.overlayHidden {
-        box-shadow: var(--shadow-m);
-    }
 }
 
 .wrapperJustifyStart {

package/src/desktop/components/center-modal/center-modal.tsx

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal';
 import { isMacOS, isSafari } from '@alfalab/core-components-shared';
 
-import { useModalWheel } from '../../hooks/useModalWheel';
+import { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';
 import { type UniversalModalDesktopProps } from '../../types/props';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';
 import { getHeightStyle } from '../../utils/get-height-style';
@@ -30,14 +30,16 @@ export const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps
         verticalAlign = 'center',
         overlay = true,
         margin,
-        scrollableContainerRef,
+        scrollableContainerRef: scrollableContainerRefProp,
         onClose,
         ...restProps
     } = props;
 
     const componentRef = useRef<HTMLDivElement>(null);
-
-    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);
+    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({
+        overlay,
+        refObject: scrollableContainerRefProp,
+    });
 
     const {
         isFullSizeModal,
@@ -45,6 +47,8 @@ export const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps
         backdropTransitions: fullSizeModalBackdropTransitions,
     } = getFullSizeModalTransitions({ verticalAlign, width, height });
 
+    const withoutOverlay = !overlay;
+
     return (
         <BaseModal
             {...restProps}
@@ -53,14 +57,14 @@ export const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps
             ref={ref}
             componentRef={componentRef}
             scrollHandler='content'
-            disableBlockingScroll={!overlay}
-            wrapperClassName={cn({
+            disableBlockingScroll={withoutOverlay}
+            wrapperClassName={cn(styles.baseModalContainer, {
                 [styles.wrapperJustifyStart]: verticalAlign === 'top',
                 [styles.wrapperJustifyCenter]: verticalAlign === 'center',
                 [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',
+                [styles.withoutOverlay]: withoutOverlay,
             })}
-            className={cn(styles.component, className, {
-                [styles.overlayHidden]: !overlay,
+            className={cn(styles.component, className, styles.baseModalComponent, {
                 ...getMarginStyles({ styles, margin }),
             })}
             transitionProps={{
@@ -69,7 +73,7 @@ export const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps
                 ...restProps.transitionProps,
             }}
             backdropProps={{
-                transparent: !overlay,
+                shouldRender: overlay,
                 ...(isFullSizeModal && fullSizeModalBackdropTransitions),
                 ...restProps.backdropProps,
             }}
@@ -82,11 +86,7 @@ export const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps
             onWheel={handleWheel}
             onClose={onClose}
         >
-            <ModalContent
-                height={height}
-                wheelDeltaY={wheelDeltaY}
-                scrollableContainerRef={scrollableContainerRef}
-            >
+            <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>
                 {children}
             </ModalContent>
         </BaseModal>

package/src/desktop/components/center-modal/index.module.css

@@ -1,2 +1,3 @@
-@import 'center-modal.module.css';
+@import './center-modal.module.css';
+@import '../../styles/common.module.css';
 @import '../../styles/margins.module.css';

package/src/desktop/components/modal-content/modal-content.tsx

@@ -6,21 +6,22 @@ import { type BaseModalProps } from '@alfalab/core-components-base-modal';
 import { Scrollbar } from '@alfalab/core-components-scrollbar';
 
 import { useModalHighlighted } from '../../hooks/use-modal-highlighted';
-import { useOutsideScroll } from '../../hooks/use-outside-scroll';
 import { useSetScrollbarHeight } from '../../hooks/use-set-scrollbar-height';
 import { type UniversalModalDesktopProps } from '../../types/props';
 import { setFooterAndHeaderRefs } from '../../utils/set-footer-and-header-refs';
 
 import styles from './modal-content.module.css';
 
-interface Props
-    extends Pick<BaseModalProps, 'children'>,
-        Pick<UniversalModalDesktopProps, 'height' | 'scrollableContainerRef'> {
-    wheelDeltaY: number;
-}
+type PickedBaseModalProps = Pick<BaseModalProps, 'children'>;
+type PickedUniversalModalDesktopProps = Pick<
+    UniversalModalDesktopProps,
+    'height' | 'scrollableContainerRef'
+>;
+
+type Props = PickedBaseModalProps & PickedUniversalModalDesktopProps;
 
 export const ModalContent: FC<Props> = (props) => {
-    const { children, wheelDeltaY, height, scrollableContainerRef = null } = props;
+    const { children, height, scrollableContainerRef = null } = props;
 
     const scrollableNodeRef = useRef<HTMLDivElement>(null);
     const scrollbarContentNodeRef = useRef<HTMLDivElement>(null);
@@ -31,8 +32,6 @@ export const ModalContent: FC<Props> = (props) => {
 
     const { handleScroll } = useModalHighlighted({ scrollbarContentNodeRef, scrollableNodeRef });
 
-    useOutsideScroll({ scrollableNodeRef, wheelDeltaY });
-
     const { enhancedChildren } = setFooterAndHeaderRefs({
         children,
         headerElementRef,

package/src/desktop/components/side-modal/index.module.css

@@ -1,2 +1,3 @@
-@import 'side-modal.module.css';
+@import './side-modal.module.css';
+@import '../../styles/common.module.css';
 @import '../../styles/margins.module.css';

package/src/desktop/components/side-modal/side-modal.module.css

@@ -31,8 +31,4 @@
     */
     will-change: transform;
     backface-visibility: hidden;
-
-    &.overlayHidden {
-        box-shadow: var(--shadow-m);
-    }
 }