updated message dialog base

src/components/MessageDialog/MessageDialogBase.tsx

@@ -1,7 +1,9 @@
-import { Dialog } from '@mui/material';
+import { Dialog, DialogProps } from '@mui/material';
+import { FC } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-const MessageDialogBase = styled(Dialog)(({ theme }) => ({
+const StyledMessageDialog = styled(Dialog)(({ theme }) => ({
     '& .MuiPaper-root': {
         padding: '32px 32px 32px 28px',
         margin: '16px',
@@ -40,4 +42,27 @@ const MessageDialogBase = styled(Dialog)(({ theme }) => ({
     },
 }));
 
+interface MessageDialogBaseProps extends DialogProps {
+    staticBackDrop?: boolean;
+}
+
+const MessageDialogBase: FC<MessageDialogBaseProps> = ({
+    children,
+    staticBackDrop,
+    ...props
+}) => {
+    const handleClose: DialogProps['onClose'] = (_, reason) => {
+        if (staticBackDrop && reason === 'backdropClick') {
+            // no-op
+        } else {
+            props.onClose;
+        }
+    };
+    return (
+        <StyledMessageDialog onClose={handleClose} {...props}>
+            {children}
+        </StyledMessageDialog>
+    );
+};
+
 export default MessageDialogBase;

src/components/MessageDialog/index.tsx

@@ -53,15 +53,14 @@ export default function MessageDialog({
             open={props.show}
             maxWidth={props.size}
             fullWidth
-            onClose={!attributes.nonClosable && props.onHide}>
+            staticBackDrop={attributes.staticBackdrop}
+            onClose={attributes.nonClosable ? props.onHide : () => null}>
             {attributes.title && <DialogTitle>{attributes.title}</DialogTitle>}
             {(children || attributes?.content) && (
                 <DialogContent>
-                    {children || (
+                    <DialogContentText>
-                        <DialogContentText>
+                        {children ?? attributes.content}
-                            {attributes.content}
+                    </DialogContentText>
-                        </DialogContentText>
-                    )}
                 </DialogContent>
             )}
             {(attributes.close || attributes.proceed) && (