update modal styles & transition

package.json

@@ -17,7 +17,7 @@
     "@mui/material": "5.6.0",
     "@mui/styles": "5.6.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.4",
-    "@rowy/form-builder": "^0.6.2",
+    "@rowy/form-builder": "^0.7.0",
     "@rowy/multiselect": "^0.4.0",
     "@tinymce/tinymce-react": "^3",
     "@uiw/react-md-editor": "^3.14.1",

src/components/ConfirmDialog.tsx

@@ -11,7 +11,6 @@ import {
   Button,
 } from "@mui/material";
 
-import { FadeTransitionMui } from "@src/components/Modal/FadeTransition";
 import { projectScope, confirmDialogAtom } from "@src/atoms/projectScope";
 
 export interface IConfirmDialogProps {
@@ -62,7 +61,6 @@ export default function ConfirmDialog({
         else handleClose();
       }}
       maxWidth={maxWidth}
-      TransitionComponent={FadeTransitionMui}
       sx={{ cursor: "default", zIndex: (theme) => theme.zIndex.modal + 50 }}
     >
       <DialogTitle>{title}</DialogTitle>

src/components/Modal/FadeTransition.tsx

@@ -1,76 +0,0 @@
-import { forwardRef, cloneElement } from "react";
-import { useTheme } from "@mui/material";
-import { Transition } from "react-transition-group";
-import { TransitionProps } from "react-transition-group/Transition";
-import { TransitionProps as MuiTransitionProps } from "@mui/material/transitions";
-
-export const FadeTransition: React.ForwardRefExoticComponent<
-  Pick<TransitionProps, React.ReactText> & React.RefAttributes<any>
-> = forwardRef(
-  ({ children, ...props }: TransitionProps, ref: React.Ref<any>) => {
-    const theme = useTheme();
-
-    if (!children) return null;
-
-    const defaultStyle = {
-      opacity: 0,
-      transform: "scale(0.8)",
-
-      transition: theme.transitions.create(["transform", "opacity"], {
-        duration: "300ms",
-        easing: theme.transitions.easing.strong,
-      }),
-    };
-
-    const transitionStyles = {
-      entering: {
-        willChange: "transform, opacity",
-      },
-
-      entered: {
-        opacity: 1,
-        transform: "none",
-      },
-
-      exiting: {
-        opacity: 0,
-        transform: "scale(0.8)",
-
-        transitionDuration: theme.transitions.duration.leavingScreen,
-      },
-
-      exited: {
-        opacity: 0,
-        transform: "none",
-        transition: "none",
-      },
-
-      unmounted: {},
-    };
-
-    return (
-      <Transition
-        appear
-        timeout={{ enter: 0, exit: theme.transitions.duration.leavingScreen }}
-        {...props}
-      >
-        {(state) =>
-          cloneElement(children as any, {
-            style: { ...defaultStyle, ...transitionStyles[state] },
-            tabIndex: -1,
-            ref,
-          })
-        }
-      </Transition>
-    );
-  }
-);
-
-export default FadeTransition;
-
-export const FadeTransitionMui = forwardRef(function Transition(
-  props: MuiTransitionProps & { children?: React.ReactElement<any, any> },
-  ref: React.Ref<unknown>
-) {
-  return <FadeTransition ref={ref} {...props} />;
-});

src/components/Modal/Modal.tsx

@@ -11,12 +11,10 @@ import {
   DialogActions,
   Button,
   ButtonProps,
-  Slide,
 } from "@mui/material";
 import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
 import CloseIcon from "@mui/icons-material/Close";
 
-import { FadeTransitionMui } from "./FadeTransition";
 import ScrollableDialogContent, {
   IScrollableDialogContentProps,
 } from "./ScrollableDialogContent";
@@ -86,8 +84,6 @@ export default function Modal({
       onClose={handleClose}
       fullWidth
       fullScreen={fullScreen}
-      TransitionComponent={fullScreen ? Slide : FadeTransitionMui}
-      TransitionProps={fullScreen ? ({ direction: "up" } as any) : undefined}
       aria-labelledby="modal-title"
       {...props}
       sx={

src/components/Modal/ModalTransition.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, cloneElement } from "react";
+import { useTheme, Slide } from "@mui/material";
+import { Transition } from "react-transition-group";
+import { TransitionProps } from "react-transition-group/Transition";
+import { TransitionProps as MuiTransitionProps } from "@mui/material/transitions";
+
+export const ModalTransition: React.ForwardRefExoticComponent<
+  Pick<TransitionProps, React.ReactText> & React.RefAttributes<any>
+> = forwardRef(function ModalTransition(
+  { children, ...props }: TransitionProps,
+  ref: React.Ref<any>
+) {
+  const theme = useTheme();
+
+  if (!children) return null;
+
+  const isFullScreenDialog = (
+    Array.isArray(children) ? children[0] : children
+  ).props?.children?.props?.className?.includes("MuiDialog-paperFullScreen");
+
+  if (isFullScreenDialog)
+    return (
+      <Slide direction="up" appear {...props}>
+        {children as any}
+      </Slide>
+    );
+
+  const defaultStyle = {
+    opacity: 0,
+    transform: "scale(0.8)",
+
+    transition: theme.transitions.create(["transform", "opacity"], {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.strong,
+    }),
+  };
+
+  const transitionStyles = {
+    entering: {
+      willChange: "transform, opacity",
+    },
+
+    entered: {
+      opacity: 1,
+      transform: "none",
+    },
+
+    exiting: {
+      opacity: 0,
+      transform: "scale(0.8)",
+
+      transitionDuration: theme.transitions.duration.leavingScreen,
+    },
+
+    exited: {
+      opacity: 0,
+      transform: "none",
+      transition: "none",
+    },
+
+    unmounted: {},
+  };
+
+  return (
+    <Transition
+      appear
+      timeout={{
+        enter: theme.transitions.duration.enteringScreen,
+        exit: theme.transitions.duration.leavingScreen,
+      }}
+      {...props}
+    >
+      {(state) =>
+        cloneElement(children as any, {
+          style: { ...defaultStyle, ...transitionStyles[state] },
+          tabIndex: -1,
+          ref,
+        })
+      }
+    </Transition>
+  );
+});
+
+export default ModalTransition;
+
+export const ModalTransitionMui = forwardRef(function Transition(
+  props: MuiTransitionProps & { children?: React.ReactElement<any, any> },
+  ref: React.Ref<unknown>
+) {
+  return <ModalTransition ref={ref} {...props} />;
+});

src/theme/components.tsx

@@ -4,6 +4,7 @@ import type {} from "@mui/lab/themeAugmentation";
 import { MultiSelectProps } from "@rowy/multiselect";
 import { toRem } from "./typography";
 
+import ModalTransition from "@src/components/Modal/ModalTransition";
 import RadioIcon from "@src/theme/RadioIcon";
 import CheckboxIcon from "@src/theme/CheckboxIcon";
 import CheckboxIndeterminateIcon from "@src/theme/CheckboxIndeterminateIcon";
@@ -248,6 +249,9 @@ export const components = (theme: Theme): ThemeOptions => {
       },
 
       MuiDialog: {
+        defaultProps: {
+          TransitionComponent: ModalTransition,
+        },
         styleOverrides: {
           root: {
             "--dialog-title-height": "64px",
@@ -307,14 +311,8 @@ export const components = (theme: Theme): ThemeOptions => {
       MuiDialogTitle: {
         styleOverrides: {
           root: {
-            padding: "var(--dialog-spacing)",
-            paddingTop: (64 - 28) / 2,
-            paddingBottom: (64 - 28) / 2,
-
-            [theme.breakpoints.down("sm")]: {
-              paddingTop: (56 - 28) / 2,
-              paddingBottom: (56 - 28) / 2,
-            },
+            ...(theme.typography.h5 as any),
+            padding: `calc((var(--dialog-title-height) - ${theme.typography.h5.lineHeight} * ${theme.typography.h5.fontSize}) / 2) var(--dialog-spacing)`,
           },
         },
       },

yarn.lock

@@ -3350,10 +3350,10 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rowy/form-builder@^0.6.2":
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.6.2.tgz#aa51c877525afc061f25d614e6526ff57193dd3a"
-  integrity sha512-Lr4CJk4zQpp8ae27umsuxkRf8zs6GQGGA26u/z6lFDIeM+wIr33IOsRjgx9XlNhrRHGEhfLdwX4okuQGv3MwOA==
+"@rowy/form-builder@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.7.0.tgz#75c95d7114d0912a944f737a1c61b60b6cefa935"
+  integrity sha512-D5koLnPdcGuHCMWgiU0stLVK8Dvu+mKWJY+WSKNUsPtqCxuSeoi1RWTQEy+DYkQl2msVFWvxt4Ei1FlPTNwNsQ==
   dependencies:
     "@hookform/resolvers" "^2.6.0"
     "@types/lodash-es" "^4.17.6"