npm - @alfalab/core-components-universal-modal - Versions diffs - 3.0.7 → 3.1.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (246) hide show

package/components/content/base-content/index.css CHANGED Viewed

@@ -2,7 +2,7 @@
     --gap-2xl: 32px;
     --gap-32: var(--gap-2xl);
 }
-.universal-modal__content_1xase {
+.universal-modal__content_1a5yd {
     position: relative;
     box-sizing: border-box;
     width: 100%;

package/components/content/base-content/index.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./index.css');
-var styles = {"content":"universal-modal__content_1xase"};
+var styles = {"content":"universal-modal__content_1a5yd"};
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/content/desktop/desktop.css CHANGED Viewed

@@ -1,9 +1,9 @@
 :root {
     --gap-0: 0px;
 }
-.universal-modal__content_sodo9.universal-modal__withHeader_sodo9 {
+.universal-modal__content_1ft7o.universal-modal__withHeader_1ft7o {
         padding-top: var(--gap-0);
     }
-.universal-modal__content_sodo9.universal-modal__withFooter_sodo9 {
+.universal-modal__content_1ft7o.universal-modal__withFooter_1ft7o {
         padding-bottom: var(--gap-0);
     }

package/components/content/desktop/desktop.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./desktop.css');
-var styles = {"content":"universal-modal__content_sodo9","withHeader":"universal-modal__withHeader_sodo9","withFooter":"universal-modal__withFooter_sodo9"};
+var styles = {"content":"universal-modal__content_1ft7o","withHeader":"universal-modal__withHeader_1ft7o","withFooter":"universal-modal__withFooter_1ft7o"};
 module.exports = styles;
 //# sourceMappingURL=desktop.module.css.js.map

package/components/content/mobile/mobile.css CHANGED Viewed

@@ -5,12 +5,12 @@
     --gap-16: var(--gap-m);
     --gap-20: var(--gap-l);
 }
-.universal-modal__content_1972n {
+.universal-modal__content_2atcj {
     padding: var(--gap-16);
 }
-.universal-modal__content_1972n.universal-modal__withHeader_1972n {
+.universal-modal__content_2atcj.universal-modal__withHeader_2atcj {
         padding-top: var(--gap-0);
     }
-.universal-modal__content_1972n.universal-modal__withFooter_1972n {
+.universal-modal__content_2atcj.universal-modal__withFooter_2atcj {
         padding-bottom: var(--gap-20);
     }

package/components/content/mobile/mobile.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./mobile.css');
-var styles = {"content":"universal-modal__content_1972n","withHeader":"universal-modal__withHeader_1972n","withFooter":"universal-modal__withFooter_1972n"};
+var styles = {"content":"universal-modal__content_2atcj","withHeader":"universal-modal__withHeader_2atcj","withFooter":"universal-modal__withFooter_2atcj"};
 module.exports = styles;
 //# sourceMappingURL=mobile.module.css.js.map

package/components/footer/base-footer/index.css CHANGED Viewed

@@ -13,7 +13,7 @@
     --universal-modal-footer-highlight-background: var(--color-light-modal-bg-primary);
     --universal-modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
 }
-.universal-modal__footer_3ib4v {
+.universal-modal__footer_1fel6 {
     width: 100%;
     box-sizing: border-box;
     transition:
@@ -21,12 +21,12 @@
         background 0.2s ease;
     padding: var(--gap-16) var(--gap-32) var(--gap-32);
 }
-.universal-modal__sticky_3ib4v {
+.universal-modal__sticky_1fel6 {
     background: var(--universal-modal-footer-background);
     position: sticky;
     z-index: 1;
 }
-.universal-modal__highlighted_3ib4v {
+.universal-modal__highlighted_1fel6 {
     background: var(--universal-modal-footer-highlight-background);
     box-shadow: var(--universal-modal-footer-highlight-box-shadow);
 }

package/components/footer/base-footer/index.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./index.css');
-var styles = {"footer":"universal-modal__footer_3ib4v","sticky":"universal-modal__sticky_3ib4v","highlighted":"universal-modal__highlighted_3ib4v"};
+var styles = {"footer":"universal-modal__footer_1fel6","sticky":"universal-modal__sticky_1fel6","highlighted":"universal-modal__highlighted_1fel6"};
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/footer/desktop/desktop.css CHANGED Viewed

@@ -1,6 +1,6 @@
 :root {
     --gap-0: 0px;
 }
-.universal-modal__sticky_8h3up {
+.universal-modal__sticky_1sfol {
     bottom: var(--gap-0);
 }

package/components/footer/desktop/desktop.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./desktop.css');
-var styles = {"sticky":"universal-modal__sticky_8h3up"};
+var styles = {"sticky":"universal-modal__sticky_1sfol"};
 module.exports = styles;
 //# sourceMappingURL=desktop.module.css.js.map

package/components/footer/desktop/layout.css CHANGED Viewed

@@ -6,29 +6,29 @@
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
 }
-.universal-modal__column_87fq9 {
+.universal-modal__column_1s60g {
     display: flex;
     flex-direction: column;
     gap: var(--gap-8);
 }
-.universal-modal__column_87fq9.universal-modal__middle_87fq9 {
+.universal-modal__column_1s60g.universal-modal__middle_1s60g {
         gap: var(--gap-12);
     }
-.universal-modal__start_87fq9 {
+.universal-modal__start_1s60g {
     justify-content: flex-start;
 }
-.universal-modal__center_87fq9 {
+.universal-modal__center_1s60g {
     justify-content: center;
 }
-.universal-modal__space-between_87fq9 {
+.universal-modal__space-between_1s60g {
     justify-content: space-between;
 }
-.universal-modal__space-between_87fq9 > * {
+.universal-modal__space-between_1s60g > * {
         flex: 1;
     }
-.universal-modal__start_87fq9,
-.universal-modal__center_87fq9,
-.universal-modal__space-between_87fq9 {
+.universal-modal__start_1s60g,
+.universal-modal__center_1s60g,
+.universal-modal__space-between_1s60g {
     display: flex;
     gap: var(--gap-16);
 }

package/components/footer/desktop/layout.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./layout.css');
-var layoutStyles = {"column":"universal-modal__column_87fq9","middle":"universal-modal__middle_87fq9","start":"universal-modal__start_87fq9","center":"universal-modal__center_87fq9","space-between":"universal-modal__space-between_87fq9"};
+var layoutStyles = {"column":"universal-modal__column_1s60g","middle":"universal-modal__middle_1s60g","start":"universal-modal__start_1s60g","center":"universal-modal__center_1s60g","space-between":"universal-modal__space-between_1s60g"};
 module.exports = layoutStyles;
 //# sourceMappingURL=layout.module.css.js.map

package/components/footer/mobile/layout.mobile.css CHANGED Viewed

@@ -2,26 +2,26 @@
     --gap-m: 16px;
     --gap-16: var(--gap-m);
 }
-.universal-modal__column_3te02 {
+.universal-modal__column_vy8ra {
     display: flex;
     flex-direction: column;
     gap: var(--gap-16);
 }
-.universal-modal__start_3te02 {
+.universal-modal__start_vy8ra {
     justify-content: flex-start;
 }
-.universal-modal__center_3te02 {
+.universal-modal__center_vy8ra {
     justify-content: center;
 }
-.universal-modal__space-between_3te02 {
+.universal-modal__space-between_vy8ra {
     justify-content: space-between;
 }
-.universal-modal__space-between_3te02 > * {
+.universal-modal__space-between_vy8ra > * {
         flex: 1;
     }
-.universal-modal__start_3te02,
-.universal-modal__center_3te02,
-.universal-modal__space-between_3te02 {
+.universal-modal__start_vy8ra,
+.universal-modal__center_vy8ra,
+.universal-modal__space-between_vy8ra {
     display: flex;
     gap: var(--gap-16);
 }

package/components/footer/mobile/layout.mobile.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./layout.mobile.css');
-var layoutStylesMobile = {"column":"universal-modal__column_3te02","start":"universal-modal__start_3te02","center":"universal-modal__center_3te02","space-between":"universal-modal__space-between_3te02"};
+var layoutStylesMobile = {"column":"universal-modal__column_vy8ra","start":"universal-modal__start_vy8ra","center":"universal-modal__center_vy8ra","space-between":"universal-modal__space-between_vy8ra"};
 module.exports = layoutStylesMobile;
 //# sourceMappingURL=layout.mobile.module.css.js.map

package/components/footer/mobile/mobile.css CHANGED Viewed

@@ -3,9 +3,9 @@
     --gap-0: 0px;
     --gap-16: var(--gap-m);
 }
-.universal-modal__footer_ash13 {
+.universal-modal__footer_1a037 {
     padding: var(--gap-16);
 }
-.universal-modal__sticky_ash13 {
+.universal-modal__sticky_1a037 {
     bottom: var(--gap-0);
 }

package/components/footer/mobile/mobile.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./mobile.css');
-var styles = {"footer":"universal-modal__footer_ash13","sticky":"universal-modal__sticky_ash13"};
+var styles = {"footer":"universal-modal__footer_1a037","sticky":"universal-modal__sticky_1a037"};
 module.exports = styles;
 //# sourceMappingURL=mobile.module.css.js.map

package/components/header/base-header/index.css CHANGED Viewed

@@ -10,22 +10,22 @@
     --universal-modal-header-highlight-background: var(--color-light-modal-bg-primary);
     --universal-modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
 }
-.universal-modal__header_1d3bq {
+.universal-modal__header_pyhqc {
     width: 100%;
     box-sizing: border-box;
     transition:
         box-shadow 0.2s ease,
         background 0.2s ease;
 }
-.universal-modal__header_1d3bq.universal-modal__highlighted_1d3bq {
+.universal-modal__header_pyhqc.universal-modal__highlighted_pyhqc {
         background: var(--universal-modal-header-highlight-background);
         box-shadow: var(--universal-modal-header-highlight-box-shadow);
     }
-.universal-modal__header_1d3bq.universal-modal__sticky_1d3bq {
+.universal-modal__header_pyhqc.universal-modal__sticky_pyhqc {
         position: sticky;
         top: var(--gap-0);
         z-index: 1;
     }
-.universal-modal__header_1d3bq.universal-modal__sticky_1d3bq.universal-modal__hasContent_1d3bq {
+.universal-modal__header_pyhqc.universal-modal__sticky_pyhqc.universal-modal__hasContent_pyhqc {
             background: var(--universal-modal-header-background);
         }

package/components/header/base-header/index.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./index.css');
-var styles = {"header":"universal-modal__header_1d3bq","highlighted":"universal-modal__highlighted_1d3bq","sticky":"universal-modal__sticky_1d3bq","hasContent":"universal-modal__hasContent_1d3bq"};
+var styles = {"header":"universal-modal__header_pyhqc","highlighted":"universal-modal__highlighted_pyhqc","sticky":"universal-modal__sticky_pyhqc","hasContent":"universal-modal__hasContent_pyhqc"};
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/header/desktop/desktop.css CHANGED Viewed

@@ -11,31 +11,31 @@
     --font-family-system:
         system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
 }
-.universal-modal__header_5ka9g {
+.universal-modal__header_12i37 {
     padding: var(--gap-20) var(--gap-20) 0;
 }
-.universal-modal__header_5ka9g .universal-modal__headerTitle_5ka9g {
+.universal-modal__header_12i37 .universal-modal__headerTitle_12i37 {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
         font-family: var(--font-family-system);
         padding: 11px var(--gap-12);
     }
-.universal-modal__header_5ka9g .universal-modal__bottomAddons_5ka9g {
+.universal-modal__header_12i37 .universal-modal__bottomAddons_12i37 {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
         font-family: var(--font-family-system);
         padding: var(--gap-6) var(--gap-12) var(--gap-16);
     }
-.universal-modal__header_5ka9g.universal-modal__medium_5ka9g .universal-modal__headerTitle_5ka9g {
+.universal-modal__header_12i37.universal-modal__medium_12i37 .universal-modal__headerTitle_12i37 {
             font-size: 30px;
             line-height: 36px;
             font-weight: 700;
             font-family: var(--font-family-system);
             padding: var(--gap-6) var(--gap-12) var(--gap-16);
         }
-.universal-modal__header_5ka9g.universal-modal__medium_5ka9g .universal-modal__bottomAddons_5ka9g {
+.universal-modal__header_12i37.universal-modal__medium_12i37 .universal-modal__bottomAddons_12i37 {
             font-size: 30px;
             line-height: 36px;
             font-weight: 700;

package/components/header/desktop/desktop.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./desktop.css');
-var desktopStyles = {"header":"universal-modal__header_5ka9g","headerTitle":"universal-modal__headerTitle_5ka9g","bottomAddons":"universal-modal__bottomAddons_5ka9g","medium":"universal-modal__medium_5ka9g"};
+var desktopStyles = {"header":"universal-modal__header_12i37","headerTitle":"universal-modal__headerTitle_12i37","bottomAddons":"universal-modal__bottomAddons_12i37","medium":"universal-modal__medium_12i37"};
 module.exports = desktopStyles;
 //# sourceMappingURL=desktop.module.css.js.map

package/components/header/mobile/mobile.css CHANGED Viewed

@@ -13,10 +13,10 @@
     --font-family-system:
         system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
 }
-.universal-modal__header_1bk7v {
+.universal-modal__header_4gw09 {
     padding: var(--gap-8) var(--gap-4);
 }
-.universal-modal__content_1bk7v {
+.universal-modal__content_4gw09 {
     font-size: 20px;
     line-height: 28px;
     font-weight: 600;
@@ -25,7 +25,7 @@
     min-height: 40px;
     justify-content: center;
 }
-.universal-modal__bottomAddons_1bk7v {
+.universal-modal__bottomAddons_4gw09 {
     font-size: 20px;
     line-height: 28px;
     font-weight: 600;

package/components/header/mobile/mobile.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./mobile.css');
-var mobileStyles = {"header":"universal-modal__header_1bk7v","content":"universal-modal__content_1bk7v","bottomAddons":"universal-modal__bottomAddons_1bk7v"};
+var mobileStyles = {"header":"universal-modal__header_4gw09","content":"universal-modal__content_4gw09","bottomAddons":"universal-modal__bottomAddons_4gw09"};
 module.exports = mobileStyles;
 //# sourceMappingURL=mobile.module.css.js.map

package/cssm/desktop/components/center-modal/center-modal.js CHANGED Viewed

@@ -7,7 +7,7 @@ var React = require('react');
 var cn = require('classnames');
 var cssm$1 = require('@alfalab/core-components-base-modal/cssm');
 var cssm = require('@alfalab/core-components-shared/cssm');
-var useModalWheel = require('../../hooks/useModalWheel.js');
+var useScrollableContainerRef = require('../../hooks/use-scrollable-container-ref.js');
 var getFullSizeModalTransitions = require('../../utils/get-full-size-modal-transitions.js');
 var getHeightStyle = require('../../utils/get-height-style.js');
 var getMarginStyles = require('../../utils/get-margin-styles.js');
@@ -28,19 +28,24 @@ var transitions__default = /*#__PURE__*/_interopDefaultCompat(transitions);
 // в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию
 var transitionProps = cssm.isMacOS() && cssm.isSafari() ? safariTransitions__default.default : transitions__default.default;
 var CenterModal = React.forwardRef(function (props, ref) {
-    var _a, _b;
-    var dataTestId = props.dataTestId, className = props.className, open = props.open, children = props.children, _c = props.width, width = _c === void 0 ? 500 : _c, _d = props.height, height = _d === void 0 ? 'hugContent' : _d, _e = props.verticalAlign, verticalAlign = _e === void 0 ? 'center' : _e, _f = props.overlay, overlay = _f === void 0 ? true : _f, margin = props.margin, scrollableContainerRef = props.scrollableContainerRef, onClose = props.onClose, restProps = tslib.__rest(props, ["dataTestId", "className", "open", "children", "width", "height", "verticalAlign", "overlay", "margin", "scrollableContainerRef", "onClose"]);
+    var _a;
+    var dataTestId = props.dataTestId, className = props.className, open = props.open, children = props.children, _b = props.width, width = _b === void 0 ? 500 : _b, _c = props.height, height = _c === void 0 ? 'hugContent' : _c, _d = props.verticalAlign, verticalAlign = _d === void 0 ? 'center' : _d, _e = props.overlay, overlay = _e === void 0 ? true : _e, margin = props.margin, scrollableContainerRefProp = props.scrollableContainerRef, onClose = props.onClose, restProps = tslib.__rest(props, ["dataTestId", "className", "open", "children", "width", "height", "verticalAlign", "overlay", "margin", "scrollableContainerRef", "onClose"]);
     var componentRef = React.useRef(null);
-    var _g = useModalWheel.useModalWheel(overlay), wheelDeltaY = _g.wheelDeltaY, handleWheel = _g.handleWheel;
-    var _h = getFullSizeModalTransitions.getFullSizeModalTransitions({ verticalAlign: verticalAlign, width: width, height: height }), isFullSizeModal = _h.isFullSizeModal, fullSizeModalContentTransitions = _h.componentTransitions, fullSizeModalBackdropTransitions = _h.backdropTransitions;
-    return (React__default.default.createElement(cssm$1.BaseModal, tslib.__assign({}, restProps, { open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, scrollHandler: 'content', disableBlockingScroll: !overlay, wrapperClassName: cn__default.default((_a = {},
+    var _f = useScrollableContainerRef.useScrollableContainerRef({
+        overlay: overlay,
+        refObject: scrollableContainerRefProp,
+    }), handleWheel = _f.handleWheel, scrollableContainerRef = _f.scrollableContainerRef;
+    var _g = getFullSizeModalTransitions.getFullSizeModalTransitions({ verticalAlign: verticalAlign, width: width, height: height }), isFullSizeModal = _g.isFullSizeModal, fullSizeModalContentTransitions = _g.componentTransitions, fullSizeModalBackdropTransitions = _g.backdropTransitions;
+    var withoutOverlay = !overlay;
+    return (React__default.default.createElement(cssm$1.BaseModal, tslib.__assign({}, restProps, { open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, scrollHandler: 'content', disableBlockingScroll: withoutOverlay, wrapperClassName: cn__default.default(styles__default.default.baseModalContainer, (_a = {},
             _a[styles__default.default.wrapperJustifyStart] = verticalAlign === 'top',
             _a[styles__default.default.wrapperJustifyCenter] = verticalAlign === 'center',
             _a[styles__default.default.wrapperJustifyEnd] = verticalAlign === 'bottom',
-            _a)), className: cn__default.default(styles__default.default.component, className, tslib.__assign((_b = {}, _b[styles__default.default.overlayHidden] = !overlay, _b), getMarginStyles.getMarginStyles({ styles: styles__default.default, margin: margin }))), transitionProps: tslib.__assign(tslib.__assign({ classNames: transitionProps }, (isFullSizeModal && fullSizeModalContentTransitions)), restProps.transitionProps), backdropProps: tslib.__assign(tslib.__assign({ transparent: !overlay }, (isFullSizeModal && fullSizeModalBackdropTransitions)), restProps.backdropProps), componentDivProps: {
+            _a[styles__default.default.withoutOverlay] = withoutOverlay,
+            _a)), className: cn__default.default(styles__default.default.component, className, styles__default.default.baseModalComponent, tslib.__assign({}, getMarginStyles.getMarginStyles({ styles: styles__default.default, margin: margin }))), transitionProps: tslib.__assign(tslib.__assign({ classNames: transitionProps }, (isFullSizeModal && fullSizeModalContentTransitions)), restProps.transitionProps), backdropProps: tslib.__assign(tslib.__assign({ shouldRender: overlay }, (isFullSizeModal && fullSizeModalBackdropTransitions)), restProps.backdropProps), componentDivProps: {
             style: tslib.__assign({ width: getWidthStyle.getWidthStyle(width, margin) }, getHeightStyle.getHeightStyle(height, margin)),
         }, onWheel: handleWheel, onClose: onClose }),
-        React__default.default.createElement(modalContent.ModalContent, { height: height, wheelDeltaY: wheelDeltaY, scrollableContainerRef: scrollableContainerRef }, children)));
+        React__default.default.createElement(modalContent.ModalContent, { height: height, scrollableContainerRef: scrollableContainerRef }, children)));
 });
 exports.CenterModal = CenterModal;

package/cssm/desktop/components/center-modal/center-modal.js.map CHANGED Viewed

	@@ -1 +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":["isMacOS","isSafari","safariTransitions","transitions","forwardRef","__rest","useRef","~~useModalWheel~~","getFullSizeModalTransitions","React","BaseModal","__assign","cn","styles","getMarginStyles","getWidthStyle","getHeightStyle","ModalContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA;AACA,IAAM,eAAe,GAAGA,YAAO,EAAE,IAAIC,aAAQ,EAAE,GAAGC,kCAAiB,GAAGC,4BAAW;IAEpE,WAAW,GAAGC,gBAAU,CAA6C,UAAC,KAAK,EAAE,GAAG,EAAA;;AAErF,IAAA,IAAA,UAAU,GAYV,KAAK,CAZK,UAAA,EACV,SAAS,GAWT,KAAK,CAXI,SAAA,EACT,IAAI,GAUJ,KAAK,CAVD,IAAA,EACJ,QAAQ,GASR,KAAK,CATG,QAAA,EACR,KAQA,KAAK,CAAA,KARM,EAAX,KAAK,mBAAG,GAAG,GAAA,EAAA,EACX,EAAA,GAOA,KAAK,CAPgB,MAAA,EAArB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,YAAY,GAAA,EAAA,EACrB,EAMA,GAAA,KAAK,cANmB,EAAxB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,QAAQ,KAAA,EACxB,EAAA,GAKA,KAAK,CAAA,OALS,EAAd,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACd,MAAM,GAIN,KAAK,CAAA,MAJC,~~EACN~~,~~sBAAsB~~,~~GAGtB~~,KAAK,CAAA,~~sBAHiB~~,~~EACtB~~,OAAO,GAEP,KAAK,CAAA,OAFE,EACJ,SAAS,GAAAC,YAAA,CACZ,KAAK,EAbH,CAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,eAAA,EAAA,SAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,SAAA,CAaL,CADe;AAGhB,IAAA,IAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;~~IAE3C~~,IAAA,EAAA,~~GAA+BC~~,~~2BAAa~~,CAAC,OAAO,CAAC,~~EAAnD~~,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,~~WAAW~~,~~GAAA,EAAA,CAAA,WAA2B~~;~~IAErD~~,IAAA,EAAA,GAIFC,uDAA2B,CAAC,EAAE,aAAa,EAAA,aAAA,EAAE,KAAK,EAAA,KAAA,EAAE,MAAM,QAAA,EAAE,CAAC,EAH7D,eAAe,GAAA,EAAA,CAAA,eAAA,EACO,+BAA+B,GAAA,EAAA,CAAA,oBAAA,EAChC,gCAAgC,GAAA,EAAA,CAAA,mBACQ;AAEjE,IAAA,QACIC,~~sBAAA~~,CAAA,aAAA,~~CAACC~~,gBAAS,~~EAAAC~~,cAAA,CAAA,EAAA,~~EACF~~,SAAS,~~EACb~~,~~EAAA,~~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,EAAEC,mBAAE,~~EAAA~~,EAAA,GAAA,EAAA;~~AAChB~~,YAAA,EAAA,~~CAACC~~,uBAAM,CAAC,mBAAmB,CAAG,GAAA,aAAa,KAAK,KAAK;AACrD,YAAA,EAAA,CAACA,uBAAM,CAAC,oBAAoB,CAAG,GAAA,aAAa,KAAK,QAAQ;AACzD,YAAA,EAAA,CAACA,uBAAM,CAAC,iBAAiB,CAAG,GAAA,aAAa,KAAK,QAAQ;~~AACxD~~,YAAA,EAAA,~~EAAA~~,EACF,SAAS,EAAED,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAE,SAAS,~~EAAAF~~,~~cAAA,EAAA,EAAA,GAAA,EAAA,EAAA,EAAA,CACpCE,~~uBAAM,CAAC,~~aAAa~~,~~CAAA~~,~~GAAG~~,~~CAAC~~,~~OAAO,EAC7B,~~EAAA,~~GAAAC~~,+BAAe,CAAC,EAAE,MAAM,EAAAD,uBAAA,EAAE,MAAM,EAAA,MAAA,EAAE,CAAC,CAAA,CACxC,EACF,eAAe,~~EAAAF~~,cAAA,CAAAA,cAAA,CAAA,~~EACX~~,UAAU,EAAE,eAAe,~~EAAA~~,~~GACvB~~,eAAe,IAAI,+BAA+B,~~EAAC~~,~~EACpD~~,SAAS,CAAC,eAAe,~~CAAA~~,~~EAEhC~~,aAAa,EACTA,cAAA,CAAAA,cAAA,CAAA,EAAA,~~WAAW~~,EAAE,~~CAAC,~~OAAO,~~EAAA~~,~~GACjB~~,eAAe,IAAI,gCAAgC,~~EAAC~~,~~EACrD~~,SAAS,CAAC,aAAa,~~CAAA~~,~~EAE9B~~,iBAAiB,EAAE;AACf,YAAA,KAAK,mBACD,KAAK,EAAEI,2BAAa,CAAC,KAAK,EAAE,MAAM,CAAC,EAAA,EAChCC,6BAAc,CAAC,MAAM,EAAE,MAAM,CAAC,CACpC;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA,CAAA;AAEhB,QAAAP,sBAAA,CAAA,aAAA,CAACQ,yBAAY,~~EACT,~~EAAA,MAAM,EAAE,MAAM,~~EACd,WAAW,~~EAAE,~~WAAW,EACxB,~~sBAAsB,EAAE,sBAAsB,EAAA,~~EAE7C,~~QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}
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 { 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":["isMacOS","isSafari","safariTransitions","transitions","forwardRef","__rest","useRef","useScrollableContainerRef","getFullSizeModalTransitions","React","BaseModal","__assign","cn","styles","getMarginStyles","getWidthStyle","getHeightStyle","ModalContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA;AACA,IAAM,eAAe,GAAGA,YAAO,EAAE,IAAIC,aAAQ,EAAE,GAAGC,kCAAiB,GAAGC,4BAAW;IAEpE,WAAW,GAAGC,gBAAU,CAA6C,UAAC,KAAK,EAAE,GAAG,EAAA;;AAErF,IAAA,IAAA,UAAU,GAYV,KAAK,CAZK,UAAA,EACV,SAAS,GAWT,KAAK,CAXI,SAAA,EACT,IAAI,GAUJ,KAAK,CAVD,IAAA,EACJ,QAAQ,GASR,KAAK,CATG,QAAA,EACR,KAQA,KAAK,CAAA,KARM,EAAX,KAAK,mBAAG,GAAG,GAAA,EAAA,EACX,EAAA,GAOA,KAAK,CAPgB,MAAA,EAArB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,YAAY,GAAA,EAAA,EACrB,EAMA,GAAA,KAAK,cANmB,EAAxB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,QAAQ,KAAA,EACxB,EAAA,GAKA,KAAK,CAAA,OALS,EAAd,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACd,MAAM,GAIN,KAAK,CAAA,MAJC,EACkB,0BAA0B,GAGlD,KAAK,CAAA,sBAH6C,EAClD,OAAO,GAEP,KAAK,CAAA,OAFE,EACJ,SAAS,GAAAC,YAAA,CACZ,KAAK,EAbH,CAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,eAAA,EAAA,SAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,SAAA,CAaL,CADe;AAGhB,IAAA,IAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;IAC3C,IAAA,EAAA,GAA0CC,mDAAyB,CAAC;AACtE,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,SAAS,EAAE,0BAA0B;AACxC,KAAA,CAAC,EAHM,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,sBAAsB,4BAGzC;IAEI,IAAA,EAAA,GAIFC,uDAA2B,CAAC,EAAE,aAAa,EAAA,aAAA,EAAE,KAAK,EAAA,KAAA,EAAE,MAAM,QAAA,EAAE,CAAC,EAH7D,eAAe,GAAA,EAAA,CAAA,eAAA,EACO,+BAA+B,GAAA,EAAA,CAAA,oBAAA,EAChC,gCAAgC,GAAA,EAAA,CAAA,mBACQ;AAEjE,IAAA,IAAM,cAAc,GAAG,CAAC,OAAO;AAE/B,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EACFC,cAAA,CAAA,EAAA,EAAA,SAAS,IACb,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,EAAEC,mBAAE,CAACC,uBAAM,CAAC,kBAAkB,GAAA,EAAA,GAAA,EAAA;AAC1C,YAAA,EAAA,CAACA,uBAAM,CAAC,mBAAmB,CAAG,GAAA,aAAa,KAAK,KAAK;AACrD,YAAA,EAAA,CAACA,uBAAM,CAAC,oBAAoB,CAAG,GAAA,aAAa,KAAK,QAAQ;AACzD,YAAA,EAAA,CAACA,uBAAM,CAAC,iBAAiB,CAAG,GAAA,aAAa,KAAK,QAAQ;AACtD,YAAA,EAAA,CAACA,uBAAM,CAAC,cAAc,CAAA,GAAG,cAAc;gBACzC,EACF,SAAS,EAAED,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAE,SAAS,EAAEA,uBAAM,CAAC,kBAAkB,EAC7DF,cAAA,CAAA,EAAA,EAAAG,+BAAe,CAAC,EAAE,MAAM,EAAAD,uBAAA,EAAE,MAAM,EAAA,MAAA,EAAE,CAAC,CAAA,CACxC,EACF,eAAe,EACXF,cAAA,CAAAA,cAAA,CAAA,EAAA,UAAU,EAAE,eAAe,EACxB,GAAC,eAAe,IAAI,+BAA+B,EACnD,EAAA,SAAS,CAAC,eAAe,CAEhC,EAAA,aAAa,EACTA,cAAA,CAAAA,cAAA,CAAA,EAAA,YAAY,EAAE,OAAO,EAClB,GAAC,eAAe,IAAI,gCAAgC,EACpD,EAAA,SAAS,CAAC,aAAa,CAE9B,EAAA,iBAAiB,EAAE;AACf,YAAA,KAAK,mBACD,KAAK,EAAEI,2BAAa,CAAC,KAAK,EAAE,MAAM,CAAC,EAAA,EAChCC,6BAAc,CAAC,MAAM,EAAE,MAAM,CAAC,CACpC;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA,CAAA;AAEhB,QAAAP,sBAAA,CAAA,aAAA,CAACQ,yBAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,sBAAsB,EACvE,EAAA,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}

package/cssm/desktop/components/center-modal/index.module.css CHANGED Viewed

@@ -16,9 +16,6 @@
     -webkit-backface-visibility: hidden;
             backface-visibility: hidden;
 }
-.component.overlayHidden {
-        box-shadow: var(--shadow-m);
-    }
 .wrapperJustifyStart {
     justify-content: flex-start;
 }
@@ -28,6 +25,13 @@
 .wrapperJustifyEnd {
     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/cssm/desktop/components/modal-content/modal-content.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
 import { type BaseModalProps } from '@alfalab/core-components-base-modal/cssm';
 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/cssm/desktop/components/modal-content/modal-content.js CHANGED Viewed

@@ -7,7 +7,6 @@ var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var cssm = require('@alfalab/core-components-scrollbar/cssm');
 var useModalHighlighted = require('../../hooks/use-modal-highlighted.js');
-var useOutsideScroll = require('../../hooks/use-outside-scroll.js');
 var useSetScrollbarHeight = require('../../hooks/use-set-scrollbar-height.js');
 var setFooterAndHeaderRefs = require('../../utils/set-footer-and-header-refs.js');
 var styles = require('./modal-content.module.css');
@@ -21,7 +20,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var ModalContent = function (props) {
     var _a;
-    var children = props.children, wheelDeltaY = props.wheelDeltaY, height = props.height, _b = props.scrollableContainerRef, scrollableContainerRef = _b === void 0 ? null : _b;
+    var children = props.children, height = props.height, _b = props.scrollableContainerRef, scrollableContainerRef = _b === void 0 ? null : _b;
     var scrollableNodeRef = React.useRef(null);
     var scrollbarContentNodeRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
@@ -29,7 +28,6 @@ var ModalContent = function (props) {
     var headerElementRef = React.useRef(null);
     var footerElementRef = React.useRef(null);
     var handleScroll = useModalHighlighted.useModalHighlighted({ scrollbarContentNodeRef: scrollbarContentNodeRef, scrollableNodeRef: scrollableNodeRef }).handleScroll;
-    useOutsideScroll.useOutsideScroll({ scrollableNodeRef: scrollableNodeRef, wheelDeltaY: wheelDeltaY });
     var enhancedChildren = setFooterAndHeaderRefs.setFooterAndHeaderRefs({
         children: children,
         headerElementRef: headerElementRef,

package/cssm/desktop/components/modal-content/modal-content.js.map CHANGED Viewed

	@@ -1 +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":["useRef","useModalHighlighted","~~useOutsideScroll","~~setFooterAndHeaderRefs","useSetScrollbarHeight","React","Scrollbar","styles","mergeRefs","cn"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;AAqBO~~,IAAM,YAAY,GAAc,UAAC,KAAK,EAAA;;~~IACjC~~,IAAA,QAAQ,~~GAAyD,KAAK,CAAA,QAA9D,EAAE,WAAW,~~GAA4C,KAAK,~~CAAA~~,~~WAAjD,~~EAAE,MAAM,GAAoC,KAAK,CAAA,MAAzC,EAAE,EAAA,GAAkC,KAAK,~~CAAA~~,~~sBAAV~~,EAA7B,sBAAsB,~~GAAA~~,EAAA,KAAA,MAAA,~~GAAG~~,IAAI,~~GAAA,EAAA~~;~~AAEpE~~,IAAA,IAAM,iBAAiB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACtD,IAAA,IAAM,uBAAuB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAC5D,IAAA,IAAM,YAAY,GAAGA,YAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,IAAM,cAAc,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAAwB,IAAI,CAAC;AAEpD,IAAA,IAAA,YAAY,GAAKC,uCAAmB,CAAC,EAAE,uBAAuB,EAAA,uBAAA,EAAE,iBAAiB,EAAA,iBAAA,EAAE,CAAC,aAAxE;~~IAEpBC~~,~~iCAAgB,CAAC,EAAE,iBAAiB,EAAA,iBAAA,EAAE,WAAW,EAAA,WAAA,EAAE,CAAC;IAE5C,~~IAAA,gBAAgB,GAAKC,6CAAsB,CAAC;AAChD,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,gBAAgB,EAAA,gBAAA;AAChB,QAAA,gBAAgB,EAAA,gBAAA;AACnB,KAAA,CAAC,iBAJsB;AAMxB,IAAAC,2CAAqB,CAAC,EAAE,YAAY,EAAA,YAAA,EAAE,cAAc,EAAA,cAAA,EAAE,gBAAgB,kBAAA,EAAE,gBAAgB,EAAA,gBAAA,EAAE,CAAC;AAE3F,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,cAAS,IACN,SAAS,EAAEC,uBAAM,CAAC,UAAU,EAC5B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE;YACjB,GAAG,EAAEC,0BAAS,CAAC,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;YAC3D,SAAS,EAAED,uBAAM,CAAC,cAAc;AACnC,SAAA,EACD,gBAAgB,EAAE;AACd,YAAA,GAAG,EAAE,uBAAuB;AAC5B,YAAA,SAAS,EAAEE,mBAAE,CAACF,uBAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AAC5B,gBAAA,EAAA,CAACA,uBAAM,CAAC,UAAU,CAAG,GAAA,MAAM,KAAK,YAAY;AAC9C,gBAAA,EAAA,EAAA;AACL,SAAA,EACD,eAAe,EAAE,YAAY,IAE5B,gBAAgB,CACT;AAEpB;;;;"}
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 { 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":["useRef","useModalHighlighted","setFooterAndHeaderRefs","useSetScrollbarHeight","React","Scrollbar","styles","mergeRefs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBO,IAAM,YAAY,GAAc,UAAC,KAAK,EAAA;;AACjC,IAAA,IAAA,QAAQ,GAA4C,KAAK,SAAjD,EAAE,MAAM,GAAoC,KAAK,CAAA,MAAzC,EAAE,EAAA,GAAkC,KAAK,CAAV,sBAAA,EAA7B,sBAAsB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA;AAEvD,IAAA,IAAM,iBAAiB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACtD,IAAA,IAAM,uBAAuB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAC5D,IAAA,IAAM,YAAY,GAAGA,YAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,IAAM,cAAc,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAAwB,IAAI,CAAC;AAEpD,IAAA,IAAA,YAAY,GAAKC,uCAAmB,CAAC,EAAE,uBAAuB,EAAA,uBAAA,EAAE,iBAAiB,EAAA,iBAAA,EAAE,CAAC,aAAxE;IAEZ,IAAA,gBAAgB,GAAKC,6CAAsB,CAAC;AAChD,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,gBAAgB,EAAA,gBAAA;AAChB,QAAA,gBAAgB,EAAA,gBAAA;AACnB,KAAA,CAAC,iBAJsB;AAMxB,IAAAC,2CAAqB,CAAC,EAAE,YAAY,EAAA,YAAA,EAAE,cAAc,EAAA,cAAA,EAAE,gBAAgB,kBAAA,EAAE,gBAAgB,EAAA,gBAAA,EAAE,CAAC;AAE3F,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,cAAS,IACN,SAAS,EAAEC,uBAAM,CAAC,UAAU,EAC5B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE;YACjB,GAAG,EAAEC,0BAAS,CAAC,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;YAC3D,SAAS,EAAED,uBAAM,CAAC,cAAc;AACnC,SAAA,EACD,gBAAgB,EAAE;AACd,YAAA,GAAG,EAAE,uBAAuB;AAC5B,YAAA,SAAS,EAAEE,mBAAE,CAACF,uBAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AAC5B,gBAAA,EAAA,CAACA,uBAAM,CAAC,UAAU,CAAG,GAAA,MAAM,KAAK,YAAY;AAC9C,gBAAA,EAAA,EAAA;AACL,SAAA,EACD,eAAe,EAAE,YAAY,IAE5B,gBAAgB,CACT;AAEpB;;;;"}

package/cssm/desktop/components/side-modal/index.module.css CHANGED Viewed

@@ -31,9 +31,13 @@
     -webkit-backface-visibility: hidden;
             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/cssm/desktop/components/side-modal/side-modal.js CHANGED Viewed

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var cssm = require('@alfalab/core-components-base-modal/cssm');
-var useModalWheel = require('../../hooks/useModalWheel.js');
+var useScrollableContainerRef = require('../../hooks/use-scrollable-container-ref.js');
 var getFullSizeModalTransitions = require('../../utils/get-full-size-modal-transitions.js');
 var getHeightStyle = require('../../utils/get-height-style.js');
 var getMarginStyles = require('../../utils/get-margin-styles.js');
@@ -22,24 +22,29 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var SideModal = React.forwardRef(function (props, ref) {
-    var _a, _b;
-    var _c = props.width, width = _c === void 0 ? 500 : _c, _d = props.height, height = _d === void 0 ? 'fullHeight' : _d, _e = props.horizontalAlign, horizontalAlign = _e === void 0 ? 'center' : _e, _f = props.verticalAlign, verticalAlign = _f === void 0 ? 'center' : _f, _g = props.overlay, overlay = _g === void 0 ? true : _g, open = props.open, dataTestId = props.dataTestId, className = props.className, children = props.children, margin = props.margin, scrollableContainerRef = props.scrollableContainerRef, onClose = props.onClose, restProps = tslib.__rest(props, ["width", "height", "horizontalAlign", "verticalAlign", "overlay", "open", "dataTestId", "className", "children", "margin", "scrollableContainerRef", "onClose"]);
+    var _a;
+    var _b = props.width, width = _b === void 0 ? 500 : _b, _c = props.height, height = _c === void 0 ? 'fullHeight' : _c, _d = props.horizontalAlign, horizontalAlign = _d === void 0 ? 'center' : _d, _e = props.verticalAlign, verticalAlign = _e === void 0 ? 'center' : _e, _f = props.overlay, overlay = _f === void 0 ? true : _f, open = props.open, dataTestId = props.dataTestId, className = props.className, children = props.children, margin = props.margin, scrollableContainerRefProp = props.scrollableContainerRef, onClose = props.onClose, restProps = tslib.__rest(props, ["width", "height", "horizontalAlign", "verticalAlign", "overlay", "open", "dataTestId", "className", "children", "margin", "scrollableContainerRef", "onClose"]);
     var componentRef = React.useRef(null);
     var contentRef = React.useRef(null);
-    var _h = useModalWheel.useModalWheel(overlay), wheelDeltaY = _h.wheelDeltaY, handleWheel = _h.handleWheel;
-    var _j = getFullSizeModalTransitions.getFullSizeModalTransitions({ verticalAlign: verticalAlign, width: width, height: height }), isFullSizeModal = _j.isFullSizeModal, fullSizeModalContentTransitions = _j.componentTransitions, fullSizeModalBackdropTransitions = _j.backdropTransitions;
-    return (React__default.default.createElement(cssm.BaseModal, tslib.__assign({}, restProps, { open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, contentElementRef: contentRef, scrollHandler: 'content', disableBlockingScroll: !overlay, wrapperClassName: cn__default.default(styles__default.default.wrapper, (_a = {},
+    var _g = useScrollableContainerRef.useScrollableContainerRef({
+        overlay: overlay,
+        refObject: scrollableContainerRefProp,
+    }), handleWheel = _g.handleWheel, scrollableContainerRef = _g.scrollableContainerRef;
+    var _h = getFullSizeModalTransitions.getFullSizeModalTransitions({ verticalAlign: verticalAlign, width: width, height: height }), isFullSizeModal = _h.isFullSizeModal, fullSizeModalContentTransitions = _h.componentTransitions, fullSizeModalBackdropTransitions = _h.backdropTransitions;
+    var withoutOverlay = !overlay;
+    return (React__default.default.createElement(cssm.BaseModal, tslib.__assign({}, restProps, { open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, contentElementRef: contentRef, scrollHandler: 'content', disableBlockingScroll: withoutOverlay, wrapperClassName: cn__default.default(styles__default.default.wrapper, styles__default.default.baseModalContainer, (_a = {},
             _a[styles__default.default.wrapperAlignStart] = horizontalAlign === 'start',
             _a[styles__default.default.wrapperAlignEnd] = horizontalAlign === 'end',
             _a[styles__default.default.wrapperJustifyCenter] = verticalAlign === 'center',
             _a[styles__default.default.wrapperJustifyEnd] = verticalAlign === 'bottom',
-            _a)), className: cn__default.default(styles__default.default.component, className, tslib.__assign((_b = {}, _b[styles__default.default.overlayHidden] = !overlay, _b), getMarginStyles.getMarginStyles({ styles: styles__default.default, margin: margin }))), contentClassName: styles__default.default.content, transitionProps: tslib.__assign(tslib.__assign(tslib.__assign({}, getDefaultTransitionProps.getDefaultTransitionProps({
+            _a[styles__default.default.withoutOverlay] = withoutOverlay,
+            _a)), className: cn__default.default(styles__default.default.component, className, styles__default.default.baseModalComponent, tslib.__assign({}, getMarginStyles.getMarginStyles({ styles: styles__default.default, margin: margin }))), contentClassName: styles__default.default.content, transitionProps: tslib.__assign(tslib.__assign(tslib.__assign({}, getDefaultTransitionProps.getDefaultTransitionProps({
             horizontalAlign: horizontalAlign,
             margin: margin,
-        })), (isFullSizeModal && fullSizeModalContentTransitions)), restProps.transitionProps), backdropProps: tslib.__assign(tslib.__assign({ transparent: !overlay }, (isFullSizeModal && fullSizeModalBackdropTransitions)), restProps.backdropProps), componentDivProps: {
+        })), (isFullSizeModal && fullSizeModalContentTransitions)), restProps.transitionProps), backdropProps: tslib.__assign(tslib.__assign({ shouldRender: overlay }, (isFullSizeModal && fullSizeModalBackdropTransitions)), restProps.backdropProps), componentDivProps: {
             style: tslib.__assign({ width: getWidthStyle.getWidthStyle(width, margin) }, getHeightStyle.getHeightStyle(height, margin)),
         }, onWheel: handleWheel, onClose: onClose }),
-        React__default.default.createElement(modalContent.ModalContent, { height: height, wheelDeltaY: wheelDeltaY, scrollableContainerRef: scrollableContainerRef }, children)));
+        React__default.default.createElement(modalContent.ModalContent, { height: height, scrollableContainerRef: scrollableContainerRef }, children)));
 });
 exports.SideModal = SideModal;