@alfalab/core-components-universal-modal 3.2.1 → 3.2.2

package/modern/desktop/utils/get-margin-styles.d.ts

@@ -2,7 +2,6 @@ import { type UniversalModalDesktopProps } from '../types/props';
 interface Params {
     styles: Record<string, string>;
     margin: UniversalModalDesktopProps['margin'];
-    height: NonNullable<UniversalModalDesktopProps['height']>;
 }
 export declare const getMarginStyles: (params: Params) => Record<string, boolean>;
 export {};

package/modern/desktop/utils/get-margin-styles.js

@@ -1,20 +1,18 @@
 import { hasOwnProperty } from '@alfalab/core-components-shared/modern';
 
 const getMarginStyles = (params) => {
-    const { margin, styles, height } = params;
-    if (margin) {
-        const isHugContent = height === 'hugContent';
-        return {
-            [styles[`marginTop-${margin.top}`]]: hasOwnProperty(margin, 'top'),
-            [styles[`marginRight-${margin.right}`]]: hasOwnProperty(margin, 'right'),
-            [styles[`marginBottom-${margin.bottom}`]]: hasOwnProperty(margin, 'bottom'),
-            [styles[`marginLeft-${margin.left}`]]: hasOwnProperty(margin, 'left'),
-            [styles.hugContent]: isHugContent,
-            [styles[`topGap-${margin.top}`]]: isHugContent && hasOwnProperty(margin, 'top'),
-            [styles[`bottomGap-${margin.bottom}`]]: isHugContent && hasOwnProperty(margin, 'bottom'),
-        };
+    const { margin, styles } = params;
+    if (!margin) {
+        return {};
     }
-    return {};
+    return {
+        ...(hasOwnProperty(margin, 'top') && { [styles[`marginTop-${margin.top}`]]: true }),
+        ...(hasOwnProperty(margin, 'right') && { [styles[`marginRight-${margin.right}`]]: true }),
+        ...(hasOwnProperty(margin, 'bottom') && {
+            [styles[`marginBottom-${margin.bottom}`]]: true,
+        }),
+        ...(hasOwnProperty(margin, 'left') && { [styles[`marginLeft-${margin.left}`]]: true }),
+    };
 };
 
 export { getMarginStyles };

package/modern/desktop/utils/get-margin-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-margin-styles.js","sources":["../../../src/desktop/utils/get-margin-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n    height: NonNullable<UniversalModalDesktopProps['height']>;\n}\n\nexport const getMarginStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles, height } = params;\n\n    if (margin) {\n        const isHugContent = height === 'hugContent';\n\n        return {\n            [styles[`marginTop-${margin.top}`]]: hasOwnProperty(margin, 'top'),\n            [styles[`marginRight-${margin.right}`]]: hasOwnProperty(margin, 'right'),\n            [styles[`marginBottom-${margin.bottom}`]]: hasOwnProperty(margin, 'bottom'),\n            [styles[`marginLeft-${margin.left}`]]: hasOwnProperty(margin, 'left'),\n            [styles.hugContent]: isHugContent,\n            [styles[`topGap-${margin.top}`]]: isHugContent && hasOwnProperty(margin, 'top'),\n            [styles[`bottomGap-${margin.bottom}`]]:\n                isHugContent && hasOwnProperty(margin, 'bottom'),\n        };\n    }\n\n    return {};\n};\n"],"names":[],"mappings":";;AAUa,MAAA,eAAe,GAAG,CAAC,MAAc,KAA6B;IACvE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;IAEzC,IAAI,MAAM,EAAE;AACR,QAAA,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY;QAE5C,OAAO;AACH,YAAA,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;AAClE,YAAA,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC;AACxE,YAAA,CAAC,MAAM,CAAC,CAAgB,aAAA,EAAA,MAAM,CAAC,MAAM,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC3E,YAAA,CAAC,MAAM,CAAC,CAAc,WAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACrE,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY;AACjC,YAAA,CAAC,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAC,GAAG,CAAE,CAAA,CAAC,GAAG,YAAY,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;AAC/E,YAAA,CAAC,MAAM,CAAC,CAAA,UAAA,EAAa,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GACjC,YAAY,IAAI,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC;SACvD;;AAGL,IAAA,OAAO,EAAE;AACb;;;;"}
+{"version":3,"file":"get-margin-styles.js","sources":["../../../src/desktop/utils/get-margin-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n}\n\nexport const getMarginStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles } = params;\n\n    if (!margin) {\n        return {};\n    }\n\n    return {\n        ...(hasOwnProperty(margin, 'top') && { [styles[`marginTop-${margin.top}`]]: true }),\n        ...(hasOwnProperty(margin, 'right') && { [styles[`marginRight-${margin.right}`]]: true }),\n        ...(hasOwnProperty(margin, 'bottom') && {\n            [styles[`marginBottom-${margin.bottom}`]]: true,\n        }),\n        ...(hasOwnProperty(margin, 'left') && { [styles[`marginLeft-${margin.left}`]]: true }),\n    };\n};\n"],"names":[],"mappings":";;AASa,MAAA,eAAe,GAAG,CAAC,MAAc,KAA6B;AACvE,IAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;IAEjC,IAAI,CAAC,MAAM,EAAE;AACT,QAAA,OAAO,EAAE;;IAGb,OAAO;QACH,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;QACnF,IAAI,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;AACzF,QAAA,IAAI,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI;YACpC,CAAC,MAAM,CAAC,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GAAG,IAAI;SAClD,CAAC;QACF,IAAI,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAc,WAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;KACzF;AACL;;;;"}

package/modern/mobile/components/content/index.css

@@ -1,14 +1,13 @@
 :root {
-    --gap-l: 20px;
     --gap-0: 0px;
-    --gap-20: var(--gap-l);
+    --gap-20: 20px;
 }
-.universal-modal__content_1dqbk {
+.universal-modal__content_92r7v {
     padding: var(--gap-20);
 }
-.universal-modal__content_1dqbk.universal-modal__withHeader_1dqbk {
+.universal-modal__content_92r7v.universal-modal__withHeader_92r7v {
         padding-top: var(--gap-0);
     }
-.universal-modal__content_1dqbk.universal-modal__withFooter_1dqbk {
+.universal-modal__content_92r7v.universal-modal__withFooter_92r7v {
         padding-bottom: var(--gap-0);
     }

package/modern/mobile/components/content/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"content":"universal-modal__content_1dqbk","withHeader":"universal-modal__withHeader_1dqbk","withFooter":"universal-modal__withFooter_1dqbk"};
+const styles = {"content":"universal-modal__content_92r7v","withHeader":"universal-modal__withHeader_92r7v","withFooter":"universal-modal__withFooter_92r7v"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/mobile/components/footer/index.css

@@ -1,11 +1,10 @@
 :root {
-    --gap-l: 20px;
     --gap-0: 0px;
-    --gap-20: var(--gap-l);
+    --gap-20: 20px;
 }
-.universal-modal__footer_18zct {
+.universal-modal__footer_sk6o6 {
     padding: var(--gap-20);
 }
-.universal-modal__sticky_18zct {
+.universal-modal__sticky_sk6o6 {
     bottom: var(--gap-0);
 }

package/modern/mobile/components/footer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"universal-modal__footer_18zct","sticky":"universal-modal__sticky_18zct"};
+const styles = {"footer":"universal-modal__footer_sk6o6","sticky":"universal-modal__sticky_sk6o6"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/mobile/components/footer/layout.mobile.css

@@ -1,26 +1,25 @@
 :root {
-    --gap-xs: 8px;
-    --gap-8: var(--gap-xs);
+    --gap-8: 8px;
 }
-.universal-modal__column_e5ig0 {
+.universal-modal__column_18lpj {
     flex-direction: column;
 }
-.universal-modal__start_e5ig0 {
+.universal-modal__start_18lpj {
     justify-content: flex-start;
 }
-.universal-modal__center_e5ig0 {
+.universal-modal__center_18lpj {
     justify-content: center;
 }
-.universal-modal__space-between_e5ig0 {
+.universal-modal__space-between_18lpj {
     justify-content: space-between;
 }
-.universal-modal__space-between_e5ig0 > * {
+.universal-modal__space-between_18lpj > * {
         flex: 1;
     }
-.universal-modal__start_e5ig0,
-.universal-modal__center_e5ig0,
-.universal-modal__space-between_e5ig0,
-.universal-modal__column_e5ig0 {
+.universal-modal__start_18lpj,
+.universal-modal__center_18lpj,
+.universal-modal__space-between_18lpj,
+.universal-modal__column_18lpj {
     display: flex;
     gap: var(--gap-8);
 }

package/modern/mobile/components/footer/layout.mobile.module.css.js

@@ -1,6 +1,6 @@
 import './layout.mobile.css';
 
-const layoutStylesMobile = {"column":"universal-modal__column_e5ig0","start":"universal-modal__start_e5ig0","center":"universal-modal__center_e5ig0","space-between":"universal-modal__space-between_e5ig0"};
+const layoutStylesMobile = {"column":"universal-modal__column_18lpj","start":"universal-modal__start_18lpj","center":"universal-modal__center_18lpj","space-between":"universal-modal__space-between_18lpj"};
 
 export { layoutStylesMobile as default };
 //# sourceMappingURL=layout.mobile.module.css.js.map

package/modern/mobile/components/header/index.css

@@ -1,22 +1,18 @@
 :root {
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-4: var(--gap-2xs);
+    --gap-4: 4px;
     --gap-6: 6px;
-    --gap-8: var(--gap-xs);
-    --gap-12: var(--gap-s);
-    --gap-16: var(--gap-m);
+    --gap-8: 8px;
+    --gap-12: 12px;
+    --gap-16: 16px;
 }
 :root {
     --font-family-system:
         system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
 }
-.universal-modal__header_1wfw8 {
+.universal-modal__header_ruz9p {
     padding: var(--gap-8) var(--gap-4);
 }
-.universal-modal__content_1wfw8 {
+.universal-modal__content_ruz9p {
     font-size: 20px;
     line-height: 28px;
     font-weight: 600;
@@ -25,7 +21,7 @@
     min-height: 40px;
     justify-content: center;
 }
-.universal-modal__bottomAddons_1wfw8 {
+.universal-modal__bottomAddons_ruz9p {
     font-size: 20px;
     line-height: 28px;
     font-weight: 600;

package/modern/mobile/components/header/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const mobileStyles = {"header":"universal-modal__header_1wfw8","content":"universal-modal__content_1wfw8","bottomAddons":"universal-modal__bottomAddons_1wfw8"};
+const mobileStyles = {"header":"universal-modal__header_ruz9p","content":"universal-modal__content_ruz9p","bottomAddons":"universal-modal__bottomAddons_ruz9p"};
 
 export { mobileStyles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/mobile/mobile.css

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

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

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const styles = {"component":"universal-modal__component_kvehx","content":"universal-modal__content_kvehx"};
+const styles = {"component":"universal-modal__component_kzifs","content":"universal-modal__content_kzifs"};
 
 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_en3bm,
-.universal-modal__enter_en3bm {
+.universal-modal__appear_1yodc,
+.universal-modal__enter_1yodc {
     transform: translateX(100%);
 }
-.universal-modal__appearActive_en3bm,
-.universal-modal__enterActive_en3bm {
+.universal-modal__appearActive_1yodc,
+.universal-modal__enterActive_1yodc {
     transform: translateX(0);
     transition: transform 280ms ease-in-out;
     transition-delay: 80ms;
 }
-.universal-modal__exit_en3bm {
+.universal-modal__exit_1yodc {
     transform: translateX(0);
 }
-.universal-modal__exitActive_en3bm,
-.universal-modal__exitDone_en3bm {
+.universal-modal__exitActive_1yodc,
+.universal-modal__exitDone_1yodc {
     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_en3bm","enter":"universal-modal__enter_en3bm","appearActive":"universal-modal__appearActive_en3bm","enterActive":"universal-modal__enterActive_en3bm","exit":"universal-modal__exit_en3bm","exitActive":"universal-modal__exitActive_en3bm","exitDone":"universal-modal__exitDone_en3bm"};
+const rightSideTransitions = {"appear":"universal-modal__appear_1yodc","enter":"universal-modal__enter_1yodc","appearActive":"universal-modal__appearActive_1yodc","enterActive":"universal-modal__enterActive_1yodc","exit":"universal-modal__exit_1yodc","exitActive":"universal-modal__exitActive_1yodc","exitDone":"universal-modal__exitDone_1yodc"};
 
 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_z54tt,
-.universal-modal__enter_z54tt {
+.universal-modal__appear_ava34,
+.universal-modal__enter_ava34 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.universal-modal__appearActive_z54tt,
-.universal-modal__enterActive_z54tt {
+.universal-modal__appearActive_ava34,
+.universal-modal__enterActive_ava34 {
     opacity: 1;
     transform: translateY(0);
     transition:
@@ -13,13 +13,13 @@
         transform 200ms ease-in;
 }
 
-.universal-modal__exit_z54tt {
+.universal-modal__exit_ava34 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.universal-modal__exitActive_z54tt,
-.universal-modal__exitDone_z54tt {
+.universal-modal__exitActive_ava34,
+.universal-modal__exitDone_ava34 {
     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_z54tt","enter":"universal-modal__enter_z54tt","appearActive":"universal-modal__appearActive_z54tt","enterActive":"universal-modal__enterActive_z54tt","exit":"universal-modal__exit_z54tt","exitActive":"universal-modal__exitActive_z54tt","exitDone":"universal-modal__exitDone_z54tt"};
+const transitions = {"appear":"universal-modal__appear_ava34","enter":"universal-modal__enter_ava34","appearActive":"universal-modal__appearActive_ava34","enterActive":"universal-modal__enterActive_ava34","exit":"universal-modal__exit_ava34","exitActive":"universal-modal__exitActive_ava34","exitDone":"universal-modal__exitDone_ava34"};
 
 export { transitions as default };
 //# sourceMappingURL=transitions.mobile.module.css.js.map

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

@@ -5,6 +5,7 @@ import { isMacOS, isSafari } from '@alfalab/core-components-shared/moderncssm';
 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 { getHugContentStyles } from '../../utils/get-hug-content-styles.js';
 import { getMarginStyles } from '../../utils/get-margin-styles.js';
 import { getWidthStyle } from '../../utils/get-width-style.js';
 import { ModalContent } from '../modal-content/modal-content.js';
@@ -29,7 +30,8 @@ const CenterModal = forwardRef((props, ref) => {
             [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',
             [styles.withoutOverlay]: withoutOverlay,
         }), className: cn(styles.component, className, styles.baseModalComponent, {
-            ...getMarginStyles({ styles, margin, height }),
+            ...getMarginStyles({ styles, margin }),
+            ...getHugContentStyles({ styles, margin, height }),
         }), transitionProps: {
             classNames: transitionProps,
             ...(isFullSizeModal && fullSizeModalContentTransitions),

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 { 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            scrollLock={overlay}\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, height }),\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,UAAU,EAAE,OAAO,EACnB,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;YAClE,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACjD,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;;;;"}
+{"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 { getHugContentStyles } from '../../utils/get-hug-content-styles';\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            scrollLock={overlay}\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                ...getHugContentStyles({ styles, margin, height }),\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":";;;;;;;;;;;;;;;AAmBA;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,UAAU,EAAE,OAAO,EACnB,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;YACtC,GAAG,mBAAmB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACrD,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/side-modal/side-modal.js

@@ -4,6 +4,7 @@ import { BaseModal } from '@alfalab/core-components-base-modal/moderncssm';
 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 { getHugContentStyles } from '../../utils/get-hug-content-styles.js';
 import { getMarginStyles } from '../../utils/get-margin-styles.js';
 import { getWidthStyle } from '../../utils/get-width-style.js';
 import { ModalContent } from '../modal-content/modal-content.js';
@@ -27,7 +28,8 @@ const SideModal = forwardRef((props, ref) => {
             [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',
             [styles.withoutOverlay]: withoutOverlay,
         }), className: cn(styles.component, className, styles.baseModalComponent, {
-            ...getMarginStyles({ styles, margin, height }),
+            ...getMarginStyles({ styles, margin }),
+            ...getHugContentStyles({ styles, margin, height }),
         }), contentClassName: styles.content, transitionProps: {
             ...getDefaultTransitionProps({
                 horizontalAlign,

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 { 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            scrollLock={overlay}\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, height }),\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,UAAU,EAAE,OAAO,EACnB,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;YAClE,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACjD,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;;;;"}
+{"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 { getHugContentStyles } from '../../utils/get-hug-content-styles';\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            scrollLock={overlay}\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                ...getHugContentStyles({ styles, margin, height }),\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":";;;;;;;;;;;;;AAkBa,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,UAAU,EAAE,OAAO,EACnB,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;YACtC,GAAG,mBAAmB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACrD,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/utils/get-hug-content-styles.d.ts

@@ -0,0 +1,8 @@
+import { type UniversalModalDesktopProps } from '../types/props';
+interface Params {
+    styles: Record<string, string>;
+    margin: UniversalModalDesktopProps['margin'];
+    height: NonNullable<UniversalModalDesktopProps['height']>;
+}
+export declare const getHugContentStyles: (params: Params) => Record<string, boolean>;
+export {};

package/moderncssm/desktop/utils/get-hug-content-styles.js

@@ -0,0 +1,17 @@
+import { hasOwnProperty } from '@alfalab/core-components-shared/moderncssm';
+
+const getHugContentStyles = (params) => {
+    const { margin, styles, height } = params;
+    if (height !== 'hugContent') {
+        return {};
+    }
+    return {
+        [styles.hugContent]: true,
+        ...(margin && hasOwnProperty(margin, 'top') && { [styles[`topGap-${margin.top}`]]: true }),
+        ...(margin &&
+            hasOwnProperty(margin, 'bottom') && { [styles[`bottomGap-${margin.bottom}`]]: true }),
+    };
+};
+
+export { getHugContentStyles };
+//# sourceMappingURL=get-hug-content-styles.js.map

package/moderncssm/desktop/utils/get-hug-content-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-hug-content-styles.js","sources":["../../../src/desktop/utils/get-hug-content-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n    height: NonNullable<UniversalModalDesktopProps['height']>;\n}\n\nexport const getHugContentStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles, height } = params;\n\n    if (height !== 'hugContent') {\n        return {};\n    }\n\n    return {\n        [styles.hugContent]: true,\n        ...(margin && hasOwnProperty(margin, 'top') && { [styles[`topGap-${margin.top}`]]: true }),\n        ...(margin &&\n            hasOwnProperty(margin, 'bottom') && { [styles[`bottomGap-${margin.bottom}`]]: true }),\n    };\n};\n"],"names":[],"mappings":";;AAUa,MAAA,mBAAmB,GAAG,CAAC,MAAc,KAA6B;IAC3E,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;AAEzC,IAAA,IAAI,MAAM,KAAK,YAAY,EAAE;AACzB,QAAA,OAAO,EAAE;;IAGb,OAAO;AACH,QAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI;QACzB,IAAI,MAAM,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;AAC1F,QAAA,IAAI,MAAM;YACN,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,aAAa,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GAAG,IAAI,EAAE,CAAC;KAC5F;AACL;;;;"}

package/moderncssm/desktop/utils/get-margin-styles.d.ts

@@ -2,7 +2,6 @@ import { type UniversalModalDesktopProps } from '../types/props';
 interface Params {
     styles: Record<string, string>;
     margin: UniversalModalDesktopProps['margin'];
-    height: NonNullable<UniversalModalDesktopProps['height']>;
 }
 export declare const getMarginStyles: (params: Params) => Record<string, boolean>;
 export {};

package/moderncssm/desktop/utils/get-margin-styles.js

@@ -1,20 +1,18 @@
 import { hasOwnProperty } from '@alfalab/core-components-shared/moderncssm';
 
 const getMarginStyles = (params) => {
-    const { margin, styles, height } = params;
-    if (margin) {
-        const isHugContent = height === 'hugContent';
-        return {
-            [styles[`marginTop-${margin.top}`]]: hasOwnProperty(margin, 'top'),
-            [styles[`marginRight-${margin.right}`]]: hasOwnProperty(margin, 'right'),
-            [styles[`marginBottom-${margin.bottom}`]]: hasOwnProperty(margin, 'bottom'),
-            [styles[`marginLeft-${margin.left}`]]: hasOwnProperty(margin, 'left'),
-            [styles.hugContent]: isHugContent,
-            [styles[`topGap-${margin.top}`]]: isHugContent && hasOwnProperty(margin, 'top'),
-            [styles[`bottomGap-${margin.bottom}`]]: isHugContent && hasOwnProperty(margin, 'bottom'),
-        };
+    const { margin, styles } = params;
+    if (!margin) {
+        return {};
     }
-    return {};
+    return {
+        ...(hasOwnProperty(margin, 'top') && { [styles[`marginTop-${margin.top}`]]: true }),
+        ...(hasOwnProperty(margin, 'right') && { [styles[`marginRight-${margin.right}`]]: true }),
+        ...(hasOwnProperty(margin, 'bottom') && {
+            [styles[`marginBottom-${margin.bottom}`]]: true,
+        }),
+        ...(hasOwnProperty(margin, 'left') && { [styles[`marginLeft-${margin.left}`]]: true }),
+    };
 };
 
 export { getMarginStyles };

package/moderncssm/desktop/utils/get-margin-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-margin-styles.js","sources":["../../../src/desktop/utils/get-margin-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n    height: NonNullable<UniversalModalDesktopProps['height']>;\n}\n\nexport const getMarginStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles, height } = params;\n\n    if (margin) {\n        const isHugContent = height === 'hugContent';\n\n        return {\n            [styles[`marginTop-${margin.top}`]]: hasOwnProperty(margin, 'top'),\n            [styles[`marginRight-${margin.right}`]]: hasOwnProperty(margin, 'right'),\n            [styles[`marginBottom-${margin.bottom}`]]: hasOwnProperty(margin, 'bottom'),\n            [styles[`marginLeft-${margin.left}`]]: hasOwnProperty(margin, 'left'),\n            [styles.hugContent]: isHugContent,\n            [styles[`topGap-${margin.top}`]]: isHugContent && hasOwnProperty(margin, 'top'),\n            [styles[`bottomGap-${margin.bottom}`]]:\n                isHugContent && hasOwnProperty(margin, 'bottom'),\n        };\n    }\n\n    return {};\n};\n"],"names":[],"mappings":";;AAUa,MAAA,eAAe,GAAG,CAAC,MAAc,KAA6B;IACvE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;IAEzC,IAAI,MAAM,EAAE;AACR,QAAA,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY;QAE5C,OAAO;AACH,YAAA,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;AAClE,YAAA,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC;AACxE,YAAA,CAAC,MAAM,CAAC,CAAgB,aAAA,EAAA,MAAM,CAAC,MAAM,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC3E,YAAA,CAAC,MAAM,CAAC,CAAc,WAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACrE,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY;AACjC,YAAA,CAAC,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAC,GAAG,CAAE,CAAA,CAAC,GAAG,YAAY,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;AAC/E,YAAA,CAAC,MAAM,CAAC,CAAA,UAAA,EAAa,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GACjC,YAAY,IAAI,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC;SACvD;;AAGL,IAAA,OAAO,EAAE;AACb;;;;"}
+{"version":3,"file":"get-margin-styles.js","sources":["../../../src/desktop/utils/get-margin-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n}\n\nexport const getMarginStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles } = params;\n\n    if (!margin) {\n        return {};\n    }\n\n    return {\n        ...(hasOwnProperty(margin, 'top') && { [styles[`marginTop-${margin.top}`]]: true }),\n        ...(hasOwnProperty(margin, 'right') && { [styles[`marginRight-${margin.right}`]]: true }),\n        ...(hasOwnProperty(margin, 'bottom') && {\n            [styles[`marginBottom-${margin.bottom}`]]: true,\n        }),\n        ...(hasOwnProperty(margin, 'left') && { [styles[`marginLeft-${margin.left}`]]: true }),\n    };\n};\n"],"names":[],"mappings":";;AASa,MAAA,eAAe,GAAG,CAAC,MAAc,KAA6B;AACvE,IAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;IAEjC,IAAI,CAAC,MAAM,EAAE;AACT,QAAA,OAAO,EAAE;;IAGb,OAAO;QACH,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;QACnF,IAAI,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;AACzF,QAAA,IAAI,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI;YACpC,CAAC,MAAM,CAAC,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GAAG,IAAI;SAClD,CAAC;QACF,IAAI,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAc,WAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;KACzF;AACL;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-universal-modal",
-    "version": "3.2.1",
+    "version": "3.2.2",
     "description": "UniversalModal component",
     "keywords": [],
     "license": "MIT",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@alfalab/core-components-backdrop": "^5.0.2",
-        "@alfalab/core-components-base-modal": "^7.1.7",
-        "@alfalab/core-components-mq": "^6.0.6",
-        "@alfalab/core-components-navigation-bar-private": "^2.0.12",
-        "@alfalab/core-components-scrollbar": "^5.0.5",
-        "@alfalab/core-components-shared": "^2.2.2",
+        "@alfalab/core-components-base-modal": "^7.1.8",
+        "@alfalab/core-components-mq": "^6.0.7",
+        "@alfalab/core-components-navigation-bar-private": "^2.0.13",
+        "@alfalab/core-components-scrollbar": "^5.0.6",
+        "@alfalab/core-components-shared": "^2.2.3",
         "@types/react-transition-group": "^4.4.12",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
@@ -33,6 +33,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.2.0",
-    "varsVersion": "11.2.0"
+    "themesVersion": "15.2.1",
+    "varsVersion": "11.2.1"
 }

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

@@ -8,6 +8,7 @@ import { useScrollableContainerRef } from '../../hooks/use-scrollable-container-
 import { type UniversalModalDesktopProps } from '../../types/props';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';
 import { getHeightStyle } from '../../utils/get-height-style';
+import { getHugContentStyles } from '../../utils/get-hug-content-styles';
 import { getMarginStyles } from '../../utils/get-margin-styles';
 import { getWidthStyle } from '../../utils/get-width-style';
 import { ModalContent } from '../modal-content/modal-content';
@@ -65,7 +66,8 @@ export const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps
                 [styles.withoutOverlay]: withoutOverlay,
             })}
             className={cn(styles.component, className, styles.baseModalComponent, {
-                ...getMarginStyles({ styles, margin, height }),
+                ...getMarginStyles({ styles, margin }),
+                ...getHugContentStyles({ styles, margin, height }),
             })}
             transitionProps={{
                 classNames: transitionProps,

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

@@ -7,6 +7,7 @@ import { useScrollableContainerRef } from '../../hooks/use-scrollable-container-
 import { type UniversalModalDesktopProps } from '../../types/props';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';
 import { getHeightStyle } from '../../utils/get-height-style';
+import { getHugContentStyles } from '../../utils/get-hug-content-styles';
 import { getMarginStyles } from '../../utils/get-margin-styles';
 import { getWidthStyle } from '../../utils/get-width-style';
 import { ModalContent } from '../modal-content/modal-content';
@@ -64,7 +65,8 @@ export const SideModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>(
                 [styles.withoutOverlay]: withoutOverlay,
             })}
             className={cn(styles.component, className, styles.baseModalComponent, {
-                ...getMarginStyles({ styles, margin, height }),
+                ...getMarginStyles({ styles, margin }),
+                ...getHugContentStyles({ styles, margin, height }),
             })}
             contentClassName={styles.content}
             transitionProps={{

package/src/desktop/utils/get-hug-content-styles.ts

@@ -0,0 +1,24 @@
+import { hasOwnProperty } from '@alfalab/core-components-shared';
+
+import { type UniversalModalDesktopProps } from '../types/props';
+
+interface Params {
+    styles: Record<string, string>;
+    margin: UniversalModalDesktopProps['margin'];
+    height: NonNullable<UniversalModalDesktopProps['height']>;
+}
+
+export const getHugContentStyles = (params: Params): Record<string, boolean> => {
+    const { margin, styles, height } = params;
+
+    if (height !== 'hugContent') {
+        return {};
+    }
+
+    return {
+        [styles.hugContent]: true,
+        ...(margin && hasOwnProperty(margin, 'top') && { [styles[`topGap-${margin.top}`]]: true }),
+        ...(margin &&
+            hasOwnProperty(margin, 'bottom') && { [styles[`bottomGap-${margin.bottom}`]]: true }),
+    };
+};