moved open prop to DialogProps obj as required by MUI

src/components/auth/Login.jsx

@@ -130,9 +130,9 @@ export const LoginDialog = styled(
     return (
       <Dialog
         DialogProps={{
-          fullWidth: true
+          fullWidth: true,
+          open: open
         }}
-        open={open}
         onClose={handleClose}
         className={`${className} CeuiLoginDialog`}
         content={

src/components/common/Dialog/Dialog.tsx

@@ -80,8 +80,7 @@ const DialogTitle = ({ onClose, className, children }: DialogTitleProps) => (
 export interface DialogProps {
   title: string | ReactNode;
   content: string | ReactNode;
-  open: boolean;
-  DialogProps?: DialogPropsMUI;
+  DialogProps: DialogPropsMUI;
   className?: string;
   isLoading?: boolean;
   error?: string;
@@ -92,7 +91,6 @@ export interface DialogProps {
 export const Dialog = ({
   title,
   content,
-  open,
   className,
   isLoading,
   error,
@@ -102,7 +100,6 @@ export const Dialog = ({
 }: DialogProps) => {
   return (
     <MuiDialog
-      open={open}
       onClose={onClose}
       fullWidth
       maxWidth="sm"
@@ -219,18 +216,18 @@ export const ConfirmationDialog = styled(
   ({
     title,
     content,
-    open,
     onConfirm,
     onClose,
     confirmText = "Yes",
     cancelText = "No",
-    isConfirmDisabled = false
+    isConfirmDisabled = false,
+    DialogProps
   }: ConfirmationDialogProps) => {
     return (
       <Dialog
         title={title}
         content={content}
-        open={open}
+        DialogProps={DialogProps}
         onClose={onClose}
         renderActions={() => (
           <ConfirmationDialogButtons
@@ -256,7 +253,7 @@ export const ConfirmDangerActionDialog = ({
   content,
   confirmText,
   valueToCheck,
-  open,
+  DialogProps,
   onClose,
   onConfirm,
   isLoading,
@@ -280,6 +277,7 @@ export const ConfirmDangerActionDialog = ({
       confirmText={confirmText}
       cancelText="Cancel"
       onClose={handleClose}
+      DialogProps={DialogProps}
       content={
         <Grid
           container

src/components/common/ExpandableViewer/ExpandableViewer.jsx

@@ -88,7 +88,6 @@ export const ExpandableViewer = styled(
         ) : (
           <>
             <Dialog
-              open={dialogOpen}
               onClose={handleClose}
               title={title}
               content={
@@ -101,6 +100,7 @@ export const ExpandableViewer = styled(
               }
               className="CeuiExpandableViewerDialog"
               DialogProps={{
+                open: dialogOpen,
                 fullWidth: true,
                 maxWidth: "xl",
                 ...DialogProps

src/stories/common/Dialog/Dialog.stories.tsx

@@ -61,8 +61,7 @@ export const BasicDialog = ({
   title,
   titleIsCustomComponent,
   content,
-  contentIsCustomComponent,
-  ...props
+  contentIsCustomComponent
 }: DialogProps) => {
   const [state, setState] = useState(OPEN);
 
@@ -75,7 +74,7 @@ export const BasicDialog = ({
         Show Dialog
       </Button>
       <Dialog
-        open={state === OPEN}
+        DialogProps={{ open: state === OPEN }}
         onClose={() => setState(IDLE)}
         title={titleIsCustomComponent ? <CustomTitle title={title} /> : title}
         content={
@@ -85,7 +84,6 @@ export const BasicDialog = ({
             content
           )
         }
-        {...props}
       />
     </>
   );
@@ -102,8 +100,7 @@ const ConfirmationTemplate = ({
   title,
   titleIsCustomComponent,
   content,
-  contentIsCustomComponent,
-  ...props
+  contentIsCustomComponent
 }: DialogProps) => {
   const [state, setState] = useState(OPEN);
   const onConfirm = () => setState(CONFIRMED);
@@ -128,8 +125,10 @@ const ConfirmationTemplate = ({
       </Box>
       <ConfirmationDialog
         {...{ onConfirm, onClose }}
-        open={state === OPEN}
+        DialogProps={{ open: state === OPEN }}
         title={titleIsCustomComponent ? <CustomTitle title={title} /> : title}
+        cancelText="Cancel"
+        confirmText="Confirm"
         content={
           contentIsCustomComponent ? (
             <CustomContent content={content} />
@@ -137,7 +136,6 @@ const ConfirmationTemplate = ({
             content
           )
         }
-        {...props}
       />
     </>
   );
@@ -191,7 +189,7 @@ const DangerActionComponent = ({
         content={content}
         confirmText={confirmText}
         valueToCheck={valueToCheck}
-        open={state === OPEN}
+        DialogProps={{ open: state === OPEN }}
         onConfirm={() => setState(CONFIRMED)}
         onClose={() => setState(CLOSED)}
         {...props}