@cleartrip/ct-design-modal 5.7.0-SNAPSHOT-native-main.5 → 5.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-modal",
-  "version": "5.7.0-SNAPSHOT-native-main.5",
+  "version": "5.7.0",
   "description": "Modal Component",
   "types": "dist/index.d.ts",
   "main": "./dist/ct-design-modal.cjs.js",
@@ -26,23 +26,23 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@cleartrip/ct-design-container": "5.7.0-SNAPSHOT-native-main.6",
-    "@cleartrip/ct-design-types": "5.7.0-SNAPSHOT-native-main.5",
-    "@cleartrip/ct-design-transition": "5.7.0-SNAPSHOT-native-main.5",
-    "@cleartrip/ct-design-portal": "5.7.0-SNAPSHOT-native-main.5",
-    "@cleartrip/ct-design-overlay": "5.7.0-SNAPSHOT-native-main.5",
-    "@cleartrip/ct-design-focus-lock": "5.7.0-SNAPSHOT-native-main.6",
-    "@cleartrip/ct-design-use-merge-refs": "5.7.0-SNAPSHOT-native-main.5",
-    "@cleartrip/ct-design-icons": "41.0.0-SNAPSHOT-native-main.5",
-    "@cleartrip/ct-design-box": "5.7.0-SNAPSHOT-native-main.6",
-    "@cleartrip/ct-design-theme": "5.7.0-SNAPSHOT-native-main.5",
-    "@cleartrip/ct-design-typography": "5.7.0-SNAPSHOT-native-main.5",
-    "@cleartrip/ct-design-button": "5.7.0-SNAPSHOT-native-main.6",
-    "@cleartrip/ct-design-style-manager": "5.7.0-SNAPSHOT-native-main.5"
+    "@cleartrip/ct-design-container": "5.7.0",
+    "@cleartrip/ct-design-transition": "5.7.0",
+    "@cleartrip/ct-design-types": "5.7.0",
+    "@cleartrip/ct-design-portal": "5.7.0",
+    "@cleartrip/ct-design-overlay": "5.7.0",
+    "@cleartrip/ct-design-focus-lock": "5.7.0",
+    "@cleartrip/ct-design-use-merge-refs": "5.7.0",
+    "@cleartrip/ct-design-icons": "41.0.0",
+    "@cleartrip/ct-design-typography": "5.7.0",
+    "@cleartrip/ct-design-box": "5.7.0",
+    "@cleartrip/ct-design-theme": "5.7.0",
+    "@cleartrip/ct-design-button": "5.7.0",
+    "@cleartrip/ct-design-style-manager": "5.7.0"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0",
-    "@cleartrip/ct-design-icons": "41.0.0-SNAPSHOT-native-main.5"
+    "@cleartrip/ct-design-icons": "41.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/Modal.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { CSSProperties } from 'react';
+import { getModalSizeStyles } from './style';
 import { IModalProps } from './type';
 import { ModalPlacement, ModalSize, ModalVariant } from './constants';
 import { Portal } from '@cleartrip/ct-design-portal';
@@ -11,6 +12,7 @@ import { Container, ContainerRef } from '@cleartrip/ct-design-container';
 import ModalContext from './ModalContext';
 import Handler from './Handler';
 import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { css } from '@emotion/css';
 
 const staticModalStyles = makeStyles(() => ({
   modalContainer: {
@@ -44,7 +46,7 @@ const Modal = forwardRef<ContainerRef, IModalProps>(
       onKeyDown,
       hideCrossIcon,
       footerAlignment,
-      size = ModalSize.MEDIUM,
+      size = 'MEDIUM',
       allowBackdropClose = true,
       blur = true,
       backDropComponent,
@@ -90,8 +92,6 @@ const Modal = forwardRef<ContainerRef, IModalProps>(
           borderBottomRightRadius: size === ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'],
           backgroundColor:
             variant === ModalVariant.DARK ? theme.color.background.defaultDarkest : theme.color.background.neutral,
-          width: (isFullScreen ? '100%' : '90%') as unknown as number,
-          maxWidth: (isFullScreen ? '100%' : '90%') as unknown as number,
           overflowY,
           maxHeight:
             size === ModalSize.FULL_SCREEN
@@ -105,9 +105,14 @@ const Modal = forwardRef<ContainerRef, IModalProps>(
       [size, overflowY, placement, bottomMargin, isFullScreen, blur, variant],
     );
 
+    const webDynamicStyles = useMemo(() => {
+      const styles = getModalSizeStyles(size);
+      return css(styles);
+    }, [size]);
+
     const modalContainerClass = useWebMergeStyles(
-      [staticModalStyles.modalContainer, dynamicStyles.modalContainer, ...rootStyles],
-      [dynamicStyles.modalContainer, rootStyles],
+      [staticModalStyles.modalContainer, dynamicStyles.modalContainer, webDynamicStyles, ...rootStyles],
+      [dynamicStyles.modalContainer, rootStyles, webDynamicStyles],
     );
     const modalRef = useRef<HTMLDivElement | null>(null);
     const containerRef = useRef<{ modalRef?: typeof modalRef.current }>({});

package/src/ModalsUsableComponents/ModalWithCloseOverlay.tsx

@@ -8,15 +8,10 @@ import Modal from '../Modal';
 import { ModalVariant } from '../constants';
 import { ModalWithCloseOverlayProps } from './type';
 
-const staticStyles = makeStyles((theme) => ({
+const staticStyles = makeStyles(() => ({
   root: {
     position: 'relative',
   },
-
-  modalCard: {
-    overflowY: 'visible',
-    paddingBottom: theme.spacing[4],
-  },
 }));
 
 /**
@@ -76,17 +71,7 @@ const ModalWithCloseOverlay = forwardRef<ContainerRef, ModalWithCloseOverlayProp
   const CloseIcon = getCloseIcon(isBack, variant);
 
   return (
-    <Modal
-      ref={forwardedRef}
-      variant={variant}
-      {...rest}
-      blur
-      size='NONE'
-      insidePortal
-      styleConfig={{
-        modalContentStyles: [staticStyles.modalCard, ...(styleConfig?.modalContentStyles ?? [])],
-      }}
-    >
+    <Modal ref={forwardedRef} blur size='NONE' insidePortal variant={variant} {...rest}>
       <Container styleConfig={{ root: [staticStyles.root, ...(styleConfig?.root ?? [])] }}>
         <Container styleConfig={{ root: [...(wrapperStyles ?? []), ...(styleConfig?.wrapper ?? [])] }}>
           <Container

package/src/ModalsUsableComponents/type.ts

@@ -36,6 +36,5 @@ export interface ModalWithCloseOverlayProps extends ModalProps {
     root?: Styles[];
     wrapper?: Styles[];
     closeButton?: Styles[];
-    modalContentStyles?: Styles[];
   };
 }