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

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

@@ -1,15 +1,13 @@
-import { hasOwnProperty } from '@alfalab/core-components-shared/moderncssm';
-
 const getHugContentStyles = (params) => {
     const { margin, styles, height } = params;
     if (height !== 'hugContent') {
         return {};
     }
+    const topGap = margin?.top ?? 0;
+    const bottomGap = margin?.bottom ?? 0;
     return {
         [styles.hugContent]: true,
-        ...(margin && hasOwnProperty(margin, 'top') && { [styles[`topGap-${margin.top}`]]: true }),
-        ...(margin &&
-            hasOwnProperty(margin, 'bottom') && { [styles[`bottomGap-${margin.bottom}`]]: true }),
+        [styles[`hugGap-${topGap}-${bottomGap}`]]: true,
     };
 };
 

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

@@ -1 +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;;;;"}
+{"version":3,"file":"get-hug-content-styles.js","sources":["../../../src/desktop/utils/get-hug-content-styles.ts"],"sourcesContent":["import { 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    const topGap = margin?.top ?? 0;\n    const bottomGap = margin?.bottom ?? 0;\n\n    return {\n        [styles.hugContent]: true,\n        [styles[`hugGap-${topGap}-${bottomGap}`]]: true,\n    };\n};\n"],"names":[],"mappings":"AAQa,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;;AAGb,IAAA,MAAM,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;AAC/B,IAAA,MAAM,SAAS,GAAG,MAAM,EAAE,MAAM,IAAI,CAAC;IAErC,OAAO;AACH,QAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI;QACzB,CAAC,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAC,GAAG,IAAI;KAClD;AACL;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-universal-modal",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "UniversalModal component",
     "keywords": [],
     "license": "MIT",

package/src/desktop/styles/common.module.css

@@ -21,25 +21,15 @@
     }
 }
 
-:root {
-    /* stylelint-disable-next-line length-zero-no-unit */
-    --hug-content-top-gap: 0px;
-    /* stylelint-disable-next-line length-zero-no-unit */
-    --hug-content-bottom-gap: 0px;
-}
-
 .hugContent {
-    max-height: calc(100% - var(--hug-content-top-gap) - var(--hug-content-bottom-gap));
-    margin-top: var(--hug-content-top-gap);
-    margin-bottom: var(--hug-content-bottom-gap);
+    max-height: 100%;
 
     /* prettier-ignore */
-    @for $i from 0 to 128 {
-        &.topGap-$(i) {
-            --hug-content-top-gap: $(i)px;
-        }
-        &.bottomGap-$(i) {
-            --hug-content-bottom-gap: $(i)px;
+    @each $top in 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 128 {
+        @each $bottom in 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 128 {
+            &.hugGap-$(top)-$(bottom) {
+                max-height: calc(100% - $(top)px - $(bottom)px);
+            }
         }
     }
 }

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

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