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

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 }),
+    };
+};

package/src/desktop/utils/get-margin-styles.ts

@@ -5,26 +5,21 @@ import { type UniversalModalDesktopProps } from '../types/props';
 interface Params {
     styles: Record<string, string>;
     margin: UniversalModalDesktopProps['margin'];
-    height: NonNullable<UniversalModalDesktopProps['height']>;
 }
 
 export const getMarginStyles = (params: Params): Record<string, boolean> => {
-    const { margin, styles, height } = params;
+    const { margin, styles } = 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'),
-        };
+    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 }),
+    };
 };