From 454319b8dbc215576af0e723e0fdcb1623d5007b Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Tue, 17 Dec 2024 16:06:55 +0530
Subject: [PATCH 01/27] [material-ui][Dialog] Add slots and slotProps and
 deprecate *Component props

---
 docs/pages/material-ui/api/dialog.json        | 16 ++++++
 docs/translations/api-docs/dialog/dialog.json |  5 ++
 packages/mui-material/src/Dialog/Dialog.d.ts  | 32 ++++++++++-
 packages/mui-material/src/Dialog/Dialog.js    | 54 ++++++++++++++++---
 4 files changed, 98 insertions(+), 9 deletions(-)

diff --git a/docs/pages/material-ui/api/dialog.json b/docs/pages/material-ui/api/dialog.json
index ff7b792f4ff8c9..3ae210dfaca9af 100644
--- a/docs/pages/material-ui/api/dialog.json
+++ b/docs/pages/material-ui/api/dialog.json
@@ -46,6 +46,14 @@
       "type": { "name": "enum", "description": "'body'<br>&#124;&nbsp;'paper'" },
       "default": "'paper'"
     },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ transition?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -68,6 +76,14 @@
     "import Dialog from '@mui/material/Dialog';",
     "import { Dialog } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "transition",
+      "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Collapse",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "container",
diff --git a/docs/translations/api-docs/dialog/dialog.json b/docs/translations/api-docs/dialog/dialog.json
index ae93e9eb2aa7d2..e3e11921e3a2b9 100644
--- a/docs/translations/api-docs/dialog/dialog.json
+++ b/docs/translations/api-docs/dialog/dialog.json
@@ -35,6 +35,8 @@
       "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/paper/\"><code>Paper</code></a> element."
     },
     "scroll": { "description": "Determine the container for scrolling the dialog." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -118,5 +120,8 @@
       "nodeName": "the container element",
       "conditions": "<code>scroll=\"paper\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "transition": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }
diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 264d7a567d9a39..85f5c3baab4245 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -5,8 +5,36 @@ import { PaperProps } from '../Paper';
 import { ModalProps } from '../Modal';
 import { TransitionProps } from '../transitions/transition';
 import { DialogClasses } from './dialogClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface DialogProps extends StandardProps<ModalProps, 'children'> {
+export interface DialogSlots {
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  transition?: React.JSXElementConstructor<
+    TransitionProps & { children?: React.ReactElement<any, any> }
+  >;
+}
+
+export interface DialogTransitionSlotPropsOverrides {}
+export interface DialogPaperSlotPropsOverrides {}
+
+export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  DialogSlots,
+  {
+    transition: SlotProps<
+      React.ElementType<TransitionProps>,
+      DialogTransitionSlotPropsOverrides,
+      DialogOwnerState
+    >;
+  }
+>;
+
+export interface DialogProps
+  extends Omit<StandardProps<ModalProps, 'children'>, 'slots' | 'slotProps'>,
+    DialogSlotsAndSlotProps {
   /**
    * The id(s) of the element(s) that describe the dialog.
    */
@@ -125,3 +153,5 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
  * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
  */
 export default function Dialog(props: DialogProps): React.JSX.Element;
+
+export interface DialogOwnerState extends DialogProps {}
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 6df94689d10b31..9b5894a2c155fc 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -15,6 +15,7 @@ import { styled, useTheme } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
 
 import { useDefaultProps } from '../DefaultPropsProvider';
+import useSlot from '../utils/useSlot';
 
 const DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
@@ -234,6 +235,8 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     PaperComponent = Paper,
     PaperProps = {},
     scroll = 'paper',
+    slots = {},
+    slotProps = {},
     TransitionComponent = Fade,
     transitionDuration = defaultTransitionDuration,
     TransitionProps,
@@ -283,6 +286,33 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     return { titleId: ariaLabelledby };
   }, [ariaLabelledby]);
 
+  const backwardCompatibleSlots = {
+    transition: TransitionComponent,
+    ...slots,
+  };
+
+  const backwardCompatibleSlotProps = {
+    transition: TransitionProps,
+    ...slotProps,
+  };
+
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps,
+  };
+
+  const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
+    elementType: Fade,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      appear: true,
+      in: open,
+      timeout: transitionDuration,
+      role: 'presentation',
+    },
+  });
+
   return (
     <DialogRoot
       className={clsx(classes.root, className)}
@@ -303,13 +333,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
       ownerState={ownerState}
       {...other}
     >
-      <TransitionComponent
-        appear
-        in={open}
-        timeout={transitionDuration}
-        role="presentation"
-        {...TransitionProps}
-      >
+      <TransitionSlot {...transitionSlotProps}>
         {/* roles are applied via cloneElement from TransitionComponent */}
         {/* roles needs to be applied on the immediate child of Modal or it'll inject one */}
         <DialogContainer
@@ -331,7 +355,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
             <DialogContext.Provider value={dialogContextValue}>{children}</DialogContext.Provider>
           </DialogPaper>
         </DialogContainer>
-      </TransitionComponent>
+      </TransitionSlot>
     </DialogRoot>
   );
 });
@@ -448,6 +472,20 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @default 'paper'
    */
   scroll: PropTypes.oneOf(['body', 'paper']),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    transition: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

From 713231875cab4cea469203de1e87943c21efcd36 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Tue, 17 Dec 2024 16:30:01 +0530
Subject: [PATCH 02/27] fix

---
 packages/mui-material/src/Dialog/Dialog.d.ts    | 3 ++-
 packages/mui-material/src/Dialog/Dialog.test.js | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 85f5c3baab4245..552b6315dd6c1c 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -19,7 +19,6 @@ export interface DialogSlots {
 }
 
 export interface DialogTransitionSlotPropsOverrides {}
-export interface DialogPaperSlotPropsOverrides {}
 
 export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
   DialogSlots,
@@ -120,6 +119,7 @@ export interface DialogProps
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent?: React.JSXElementConstructor<
     TransitionProps & { children: React.ReactElement<unknown, any> }
@@ -136,6 +136,7 @@ export interface DialogProps
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps?: TransitionProps;
 }
diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index 0fb001085de7fb..3bacf021f7a591 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -48,6 +48,12 @@ describe('<Dialog />', () => {
       testVariantProps: { variant: 'foo' },
       testDeepOverrides: { slotName: 'paper', slotClassName: classes.paper },
       refInstanceof: window.HTMLDivElement,
+      slots: {
+        transition: {
+          expectedClassName: classes.transition,
+          testWithElement: null,
+        },
+      },
       skip: ['componentProp', 'componentsProp', 'themeVariants'],
     }),
   );

From 435948acef2180648228f960a55300cee89a0417 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Tue, 17 Dec 2024 17:18:40 +0530
Subject: [PATCH 03/27] fix tests

---
 packages/mui-material/src/Dialog/Dialog.test.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index 3bacf021f7a591..c3da1f1f0772b0 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -6,6 +6,7 @@ import Modal from '@mui/material/Modal';
 import Dialog, { dialogClasses as classes } from '@mui/material/Dialog';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
+import Fade from '../Fade';
 
 /**
  * more comprehensive simulation of a user click (mousedown + click)
@@ -33,6 +34,10 @@ function clickBackdrop(view) {
   userClick(findBackdrop(view));
 }
 
+const CustomFade = React.forwardRef(function CustomFade(props, ref) {
+  return <Fade {...props} ref={ref} data-testid="custom" />;
+});
+
 describe('<Dialog />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
 
@@ -51,6 +56,7 @@ describe('<Dialog />', () => {
       slots: {
         transition: {
           expectedClassName: classes.transition,
+          testWithComponent: CustomFade,
           testWithElement: null,
         },
       },

From 8f1a0ee0e0644f0dde68ad2c51e4ebf816e12a49 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Tue, 17 Dec 2024 17:19:17 +0530
Subject: [PATCH 04/27] fix import

---
 packages/mui-material/src/Dialog/Dialog.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index c3da1f1f0772b0..30dde4ab270843 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -5,8 +5,8 @@ import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils
 import Modal from '@mui/material/Modal';
 import Dialog, { dialogClasses as classes } from '@mui/material/Dialog';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Fade from '@mui/material/Fade';
 import describeConformance from '../../test/describeConformance';
-import Fade from '../Fade';
 
 /**
  * more comprehensive simulation of a user click (mousedown + click)

From db4bea2eb8a0ddc14b79f9a08b8ddc9df236b44a Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 6 Jan 2025 10:58:43 +0530
Subject: [PATCH 05/27] add paperslot

---
 packages/mui-material/src/Dialog/Dialog.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 9b5894a2c155fc..7f1129a1da0094 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -293,6 +293,10 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
 
   const backwardCompatibleSlotProps = {
     transition: TransitionProps,
+    paper: {
+      component: PaperComponent,
+      ...PaperProps,
+    },
     ...slotProps,
   };
 
@@ -313,6 +317,13 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     },
   });
 
+  const [PaperSlot, paperSlotProps] = useSlot('paper', {
+    elementType: DialogPaper,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.paper, PaperProps.className),
+  });
+
   return (
     <DialogRoot
       className={clsx(classes.root, className)}
@@ -341,19 +352,17 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
           onMouseDown={handleMouseDown}
           ownerState={ownerState}
         >
-          <DialogPaper
-            as={PaperComponent}
+          <PaperSlot
+            as={paperSlotProps.component}
             elevation={24}
             role="dialog"
             aria-describedby={ariaDescribedby}
             aria-labelledby={ariaLabelledby}
             aria-modal={ariaModal}
-            {...PaperProps}
-            className={clsx(classes.paper, PaperProps.className)}
-            ownerState={ownerState}
+            {...paperSlotProps}
           >
             <DialogContext.Provider value={dialogContextValue}>{children}</DialogContext.Provider>
-          </DialogPaper>
+          </PaperSlot>
         </DialogContainer>
       </TransitionSlot>
     </DialogRoot>

From 9c57580934bf9d5e2ef7bf962ae8e6524a189b41 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 6 Jan 2025 11:09:03 +0530
Subject: [PATCH 06/27] fix class name

---
 packages/mui-material/src/Dialog/Dialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 7f1129a1da0094..658e316bed3d61 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -321,7 +321,6 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     elementType: DialogPaper,
     externalForwardedProps,
     ownerState,
-    className: clsx(classes.paper, PaperProps.className),
   });
 
   return (
@@ -360,6 +359,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
             aria-labelledby={ariaLabelledby}
             aria-modal={ariaModal}
             {...paperSlotProps}
+            className={clsx(classes.paper, paperSlotProps.className)}
           >
             <DialogContext.Provider value={dialogContextValue}>{children}</DialogContext.Provider>
           </PaperSlot>

From f6fc3f31a42f2b6b14eeea3fd4c92199f796cb68 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 6 Jan 2025 11:11:07 +0530
Subject: [PATCH 07/27] add dialog backdrop

---
 packages/mui-material/src/Dialog/Dialog.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 658e316bed3d61..e7517258c5bb9f 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -295,6 +295,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     transition: TransitionProps,
     paper: {
       component: PaperComponent,
+      backdrop: BackdropComponent,
       ...PaperProps,
     },
     ...slotProps,
@@ -305,6 +306,12 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     slotProps: backwardCompatibleSlotProps,
   };
 
+  const [BackdropSlot, backdropSlotProps] = useSlot('backdrop', {
+    elementType: DialogBackdrop,
+    externalForwardedProps,
+    ownerState,
+  });
+
   const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
     elementType: Fade,
     externalForwardedProps,
@@ -327,12 +334,12 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     <DialogRoot
       className={clsx(classes.root, className)}
       closeAfterTransition
-      components={{ Backdrop: DialogBackdrop }}
-      componentsProps={{
+      slots={{ backdrop: BackdropSlot }}
+      slotProps={{
         backdrop: {
           transitionDuration,
-          as: BackdropComponent,
-          ...BackdropProps,
+          as: backdropSlotProps.component,
+          ...backdropSlotProps,
         },
       }}
       disableEscapeKeyDown={disableEscapeKeyDown}

From 82fea7ab13b08fda41dfeb9ad0b6a5ca03e5af75 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 6 Jan 2025 11:24:16 +0530
Subject: [PATCH 08/27] update d.ts

---
 .../material/components/dialogs/DraggableDialog.tsx |  6 +++++-
 packages/mui-material/src/Dialog/Dialog.d.ts        | 13 +++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/docs/data/material/components/dialogs/DraggableDialog.tsx b/docs/data/material/components/dialogs/DraggableDialog.tsx
index 61aabd875d16b4..40f9e613c5e6b6 100644
--- a/docs/data/material/components/dialogs/DraggableDialog.tsx
+++ b/docs/data/material/components/dialogs/DraggableDialog.tsx
@@ -40,7 +40,11 @@ export default function DraggableDialog() {
       <Dialog
         open={open}
         onClose={handleClose}
-        PaperComponent={PaperComponent}
+        slotProps={{
+          paper: {
+            component: PaperComponent,
+          },
+        }}
         aria-labelledby="draggable-dialog-title"
       >
         <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 552b6315dd6c1c..c4a496abddb3b6 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -16,10 +16,16 @@ export interface DialogSlots {
   transition?: React.JSXElementConstructor<
     TransitionProps & { children?: React.ReactElement<any, any> }
   >;
+  /**
+   * The component that renders the paper.
+   * @default Paper
+   */
+  paper?: React.JSXElementConstructor<PaperProps>;
 }
 
 export interface DialogTransitionSlotPropsOverrides {}
 
+export interface DialogPaperSlotPropsOverrides {}
 export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
   DialogSlots,
   {
@@ -28,6 +34,11 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
       DialogTransitionSlotPropsOverrides,
       DialogOwnerState
     >;
+    paper: SlotProps<
+      React.ElementType<PaperProps>,
+      DialogPaperSlotPropsOverrides,
+      DialogOwnerState
+    >;
   }
 >;
 
@@ -99,11 +110,13 @@ export interface DialogProps
   /**
    * The component used to render the body of the dialog.
    * @default Paper
+   * @deprecated Use `slotProps.paper.component` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent?: React.JSXElementConstructor<PaperProps>;
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
    * @default {}
+   * @deprecated Use `slotProps.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**

From 3a71f67f6f6d8bf54693753f7076cd161d16a046 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 6 Jan 2025 11:28:03 +0530
Subject: [PATCH 09/27] dcos:api

---
 docs/pages/material-ui/api/dialog.json        | 12 ++++++------
 docs/translations/api-docs/dialog/dialog.json |  5 +----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/docs/pages/material-ui/api/dialog.json b/docs/pages/material-ui/api/dialog.json
index 3ae210dfaca9af..2426797bfc6e89 100644
--- a/docs/pages/material-ui/api/dialog.json
+++ b/docs/pages/material-ui/api/dialog.json
@@ -82,6 +82,12 @@
       "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
       "default": "Collapse",
       "class": null
+    },
+    {
+      "name": "paper",
+      "description": "The component that renders the paper.",
+      "default": "Paper",
+      "class": "MuiDialog-paper"
     }
   ],
   "classes": [
@@ -91,12 +97,6 @@
       "description": "Styles applied to the container element.",
       "isGlobal": false
     },
-    {
-      "key": "paper",
-      "className": "MuiDialog-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
-    },
     {
       "key": "paperFullScreen",
       "className": "MuiDialog-paperFullScreen",
diff --git a/docs/translations/api-docs/dialog/dialog.json b/docs/translations/api-docs/dialog/dialog.json
index e3e11921e3a2b9..d9608503cda0a2 100644
--- a/docs/translations/api-docs/dialog/dialog.json
+++ b/docs/translations/api-docs/dialog/dialog.json
@@ -55,10 +55,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the container element"
     },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
     "paperFullScreen": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
@@ -122,6 +118,7 @@
     }
   },
   "slotDescriptions": {
+    "paper": "The component that renders the paper.",
     "transition": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

From 13c0dae9dd87951d95164d632f34fd4ac71ff577 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 6 Jan 2025 11:41:24 +0530
Subject: [PATCH 10/27] typescript formatted

---
 docs/data/material/components/dialogs/DraggableDialog.js | 6 +++++-
 packages/mui-material/src/Dialog/Dialog.d.ts             | 9 ++++++++-
 packages/mui-material/src/Dialog/Dialog.js               | 6 ++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/docs/data/material/components/dialogs/DraggableDialog.js b/docs/data/material/components/dialogs/DraggableDialog.js
index d4bbbc05d17136..6ba2560fe88ca4 100644
--- a/docs/data/material/components/dialogs/DraggableDialog.js
+++ b/docs/data/material/components/dialogs/DraggableDialog.js
@@ -40,7 +40,11 @@ export default function DraggableDialog() {
       <Dialog
         open={open}
         onClose={handleClose}
-        PaperComponent={PaperComponent}
+        slotProps={{
+          paper: {
+            component: PaperComponent,
+          },
+        }}
         aria-labelledby="draggable-dialog-title"
       >
         <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index c4a496abddb3b6..3b20d4a30c4852 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -20,20 +20,27 @@ export interface DialogSlots {
    * The component that renders the paper.
    * @default Paper
    */
-  paper?: React.JSXElementConstructor<PaperProps>;
+  paper?: React.ElementType<PaperProps>;
 }
 
 export interface DialogTransitionSlotPropsOverrides {}
 
 export interface DialogPaperSlotPropsOverrides {}
+
 export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
   DialogSlots,
   {
+    /**
+     * Props forwarded to the transition slot.
+     */
     transition: SlotProps<
       React.ElementType<TransitionProps>,
       DialogTransitionSlotPropsOverrides,
       DialogOwnerState
     >;
+    /**
+     * Props forwarded to the paper slot.
+     */
     paper: SlotProps<
       React.ElementType<PaperProps>,
       DialogPaperSlotPropsOverrides,
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index e7517258c5bb9f..599a129e1af1fa 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -476,11 +476,13 @@ Dialog.propTypes /* remove-proptypes */ = {
   /**
    * The component used to render the body of the dialog.
    * @default Paper
+   * @deprecated Use `slotProps.paper.component` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent: PropTypes.elementType,
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
    * @default {}
+   * @deprecated Use `slotProps.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperProps: PropTypes.object,
   /**
@@ -493,6 +495,7 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slotProps: PropTypes.shape({
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
@@ -500,6 +503,7 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slots: PropTypes.shape({
+    paper: PropTypes.elementType,
     transition: PropTypes.elementType,
   }),
   /**
@@ -514,6 +518,7 @@ Dialog.propTypes /* remove-proptypes */ = {
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: PropTypes.elementType,
   /**
@@ -535,6 +540,7 @@ Dialog.propTypes /* remove-proptypes */ = {
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps: PropTypes.object,
 };

From 97026174c9d58988e4d9cc58f8438e2d8106a793 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 6 Jan 2025 12:37:50 +0530
Subject: [PATCH 11/27] dcos:api

---
 docs/pages/material-ui/api/dialog.json | 37 +++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/docs/pages/material-ui/api/dialog.json b/docs/pages/material-ui/api/dialog.json
index 2426797bfc6e89..4c2131d7bec30b 100644
--- a/docs/pages/material-ui/api/dialog.json
+++ b/docs/pages/material-ui/api/dialog.json
@@ -40,18 +40,34 @@
         "describedArgs": ["event", "reason"]
       }
     },
-    "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
-    "PaperProps": { "type": { "name": "object" }, "default": "{}" },
+    "PaperComponent": {
+      "type": { "name": "elementType" },
+      "default": "Paper",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.paper.component</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "PaperProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.paper</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "scroll": {
       "type": { "name": "enum", "description": "'body'<br>&#124;&nbsp;'paper'" },
       "default": "'paper'"
     },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ paper?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ transition?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ paper?: elementType, transition?: elementType }"
+      },
       "default": "{}"
     },
     "sx": {
@@ -61,7 +77,12 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Fade" },
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "default": "Fade",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "transitionDuration": {
       "type": {
         "name": "union",
@@ -69,7 +90,11 @@
       },
       "default": "{\n  enter: theme.transitions.duration.enteringScreen,\n  exit: theme.transitions.duration.leavingScreen,\n}"
     },
-    "TransitionProps": { "type": { "name": "object" } }
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    }
   },
   "name": "Dialog",
   "imports": [

From b0304887b1cc0049172715ecbf4933d2748e607b Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Tue, 7 Jan 2025 11:54:31 +0530
Subject: [PATCH 12/27] remove paper and backdrop slots

---
 .../components/dialogs/DraggableDialog.js     |  6 +---
 .../components/dialogs/DraggableDialog.tsx    |  6 +---
 packages/mui-material/src/Dialog/Dialog.d.ts  |  1 -
 packages/mui-material/src/Dialog/Dialog.js    | 35 +++++--------------
 4 files changed, 11 insertions(+), 37 deletions(-)

diff --git a/docs/data/material/components/dialogs/DraggableDialog.js b/docs/data/material/components/dialogs/DraggableDialog.js
index 6ba2560fe88ca4..d4bbbc05d17136 100644
--- a/docs/data/material/components/dialogs/DraggableDialog.js
+++ b/docs/data/material/components/dialogs/DraggableDialog.js
@@ -40,11 +40,7 @@ export default function DraggableDialog() {
       <Dialog
         open={open}
         onClose={handleClose}
-        slotProps={{
-          paper: {
-            component: PaperComponent,
-          },
-        }}
+        PaperComponent={PaperComponent}
         aria-labelledby="draggable-dialog-title"
       >
         <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
diff --git a/docs/data/material/components/dialogs/DraggableDialog.tsx b/docs/data/material/components/dialogs/DraggableDialog.tsx
index 40f9e613c5e6b6..61aabd875d16b4 100644
--- a/docs/data/material/components/dialogs/DraggableDialog.tsx
+++ b/docs/data/material/components/dialogs/DraggableDialog.tsx
@@ -40,11 +40,7 @@ export default function DraggableDialog() {
       <Dialog
         open={open}
         onClose={handleClose}
-        slotProps={{
-          paper: {
-            component: PaperComponent,
-          },
-        }}
+        PaperComponent={PaperComponent}
         aria-labelledby="draggable-dialog-title"
       >
         <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 3b20d4a30c4852..6421d6a704b260 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -117,7 +117,6 @@ export interface DialogProps
   /**
    * The component used to render the body of the dialog.
    * @default Paper
-   * @deprecated Use `slotProps.paper.component` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent?: React.JSXElementConstructor<PaperProps>;
   /**
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 599a129e1af1fa..c34589be09006e 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -293,11 +293,6 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
 
   const backwardCompatibleSlotProps = {
     transition: TransitionProps,
-    paper: {
-      component: PaperComponent,
-      backdrop: BackdropComponent,
-      ...PaperProps,
-    },
     ...slotProps,
   };
 
@@ -306,12 +301,6 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     slotProps: backwardCompatibleSlotProps,
   };
 
-  const [BackdropSlot, backdropSlotProps] = useSlot('backdrop', {
-    elementType: DialogBackdrop,
-    externalForwardedProps,
-    ownerState,
-  });
-
   const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
     elementType: Fade,
     externalForwardedProps,
@@ -324,22 +313,16 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     },
   });
 
-  const [PaperSlot, paperSlotProps] = useSlot('paper', {
-    elementType: DialogPaper,
-    externalForwardedProps,
-    ownerState,
-  });
-
   return (
     <DialogRoot
       className={clsx(classes.root, className)}
       closeAfterTransition
-      slots={{ backdrop: BackdropSlot }}
-      slotProps={{
+      components={{ backdrop: DialogBackdrop }}
+      componentsProps={{
         backdrop: {
           transitionDuration,
-          as: backdropSlotProps.component,
-          ...backdropSlotProps,
+          as: BackdropComponent,
+          ...BackdropProps,
         },
       }}
       disableEscapeKeyDown={disableEscapeKeyDown}
@@ -358,18 +341,18 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
           onMouseDown={handleMouseDown}
           ownerState={ownerState}
         >
-          <PaperSlot
-            as={paperSlotProps.component}
+          <DialogPaper
+            as={PaperComponent}
             elevation={24}
             role="dialog"
             aria-describedby={ariaDescribedby}
             aria-labelledby={ariaLabelledby}
             aria-modal={ariaModal}
-            {...paperSlotProps}
-            className={clsx(classes.paper, paperSlotProps.className)}
+            {...PaperProps}
+            className={clsx(classes.paper, PaperProps.className)}
           >
             <DialogContext.Provider value={dialogContextValue}>{children}</DialogContext.Provider>
-          </PaperSlot>
+          </DialogPaper>
         </DialogContainer>
       </TransitionSlot>
     </DialogRoot>

From 55c170fce7252adc2b820a0ac610268c3f17db4e Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Tue, 7 Jan 2025 17:14:57 +0530
Subject: [PATCH 13/27] fix

---
 docs/pages/material-ui/api/dialog.json        | 29 ++++++-------------
 docs/translations/api-docs/dialog/dialog.json |  5 +++-
 packages/mui-material/src/Dialog/Dialog.d.ts  | 13 ---------
 packages/mui-material/src/Dialog/Dialog.js    |  3 --
 4 files changed, 13 insertions(+), 37 deletions(-)

diff --git a/docs/pages/material-ui/api/dialog.json b/docs/pages/material-ui/api/dialog.json
index 4c2131d7bec30b..f00a9c372df955 100644
--- a/docs/pages/material-ui/api/dialog.json
+++ b/docs/pages/material-ui/api/dialog.json
@@ -40,12 +40,7 @@
         "describedArgs": ["event", "reason"]
       }
     },
-    "PaperComponent": {
-      "type": { "name": "elementType" },
-      "default": "Paper",
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.paper.component</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
+    "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
     "PaperProps": {
       "type": { "name": "object" },
       "default": "{}",
@@ -57,17 +52,11 @@
       "default": "'paper'"
     },
     "slotProps": {
-      "type": {
-        "name": "shape",
-        "description": "{ paper?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
-      },
+      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
       "default": "{}"
     },
     "slots": {
-      "type": {
-        "name": "shape",
-        "description": "{ paper?: elementType, transition?: elementType }"
-      },
+      "type": { "name": "shape", "description": "{ transition?: elementType }" },
       "default": "{}"
     },
     "sx": {
@@ -107,12 +96,6 @@
       "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
       "default": "Collapse",
       "class": null
-    },
-    {
-      "name": "paper",
-      "description": "The component that renders the paper.",
-      "default": "Paper",
-      "class": "MuiDialog-paper"
     }
   ],
   "classes": [
@@ -122,6 +105,12 @@
       "description": "Styles applied to the container element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiDialog-paper",
+      "description": "Styles applied to the Paper component.",
+      "isGlobal": false
+    },
     {
       "key": "paperFullScreen",
       "className": "MuiDialog-paperFullScreen",
diff --git a/docs/translations/api-docs/dialog/dialog.json b/docs/translations/api-docs/dialog/dialog.json
index d9608503cda0a2..e3e11921e3a2b9 100644
--- a/docs/translations/api-docs/dialog/dialog.json
+++ b/docs/translations/api-docs/dialog/dialog.json
@@ -55,6 +55,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the container element"
     },
+    "paper": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the Paper component"
+    },
     "paperFullScreen": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
@@ -118,7 +122,6 @@
     }
   },
   "slotDescriptions": {
-    "paper": "The component that renders the paper.",
     "transition": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }
diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 6421d6a704b260..8940aed6685f0e 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -16,11 +16,6 @@ export interface DialogSlots {
   transition?: React.JSXElementConstructor<
     TransitionProps & { children?: React.ReactElement<any, any> }
   >;
-  /**
-   * The component that renders the paper.
-   * @default Paper
-   */
-  paper?: React.ElementType<PaperProps>;
 }
 
 export interface DialogTransitionSlotPropsOverrides {}
@@ -38,14 +33,6 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
       DialogTransitionSlotPropsOverrides,
       DialogOwnerState
     >;
-    /**
-     * Props forwarded to the paper slot.
-     */
-    paper: SlotProps<
-      React.ElementType<PaperProps>,
-      DialogPaperSlotPropsOverrides,
-      DialogOwnerState
-    >;
   }
 >;
 
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index c34589be09006e..0584c83d3036ac 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -459,7 +459,6 @@ Dialog.propTypes /* remove-proptypes */ = {
   /**
    * The component used to render the body of the dialog.
    * @default Paper
-   * @deprecated Use `slotProps.paper.component` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent: PropTypes.elementType,
   /**
@@ -478,7 +477,6 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slotProps: PropTypes.shape({
-    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
@@ -486,7 +484,6 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slots: PropTypes.shape({
-    paper: PropTypes.elementType,
     transition: PropTypes.elementType,
   }),
   /**

From a9abb5494f377674c6f4aa92a481d87cae474088 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Tue, 7 Jan 2025 17:16:38 +0530
Subject: [PATCH 14/27] fix

---
 packages/mui-material/src/Dialog/Dialog.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 0584c83d3036ac..06a4915acbf1ea 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -317,7 +317,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     <DialogRoot
       className={clsx(classes.root, className)}
       closeAfterTransition
-      components={{ backdrop: DialogBackdrop }}
+      components={{ Backdrop: DialogBackdrop }}
       componentsProps={{
         backdrop: {
           transitionDuration,
@@ -350,6 +350,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
             aria-modal={ariaModal}
             {...PaperProps}
             className={clsx(classes.paper, PaperProps.className)}
+            ownerState={ownerState}
           >
             <DialogContext.Provider value={dialogContextValue}>{children}</DialogContext.Provider>
           </DialogPaper>

From af3d06f68a5aaa45c5fdb17053513a0e202ba5c9 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 13 Jan 2025 13:36:49 +0530
Subject: [PATCH 15/27] add paper slot

---
 packages/mui-material/src/Dialog/Dialog.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 06a4915acbf1ea..b75a4e4cf621a0 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -293,6 +293,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
 
   const backwardCompatibleSlotProps = {
     transition: TransitionProps,
+    paper: PaperProps,
     ...slotProps,
   };
 
@@ -301,6 +302,13 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     slotProps: backwardCompatibleSlotProps,
   };
 
+  const [PaperSlot, { as: paperComponent, ...paperSlotProps }] = useSlot('paper', {
+    elementType: DialogPaper,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.paper, PaperProps.className),
+  });
+
   const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
     elementType: Fade,
     externalForwardedProps,
@@ -341,19 +349,18 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
           onMouseDown={handleMouseDown}
           ownerState={ownerState}
         >
-          <DialogPaper
+          <PaperSlot
             as={PaperComponent}
             elevation={24}
             role="dialog"
             aria-describedby={ariaDescribedby}
             aria-labelledby={ariaLabelledby}
             aria-modal={ariaModal}
-            {...PaperProps}
-            className={clsx(classes.paper, PaperProps.className)}
-            ownerState={ownerState}
+            {...paperSlotProps}
+            component={paperComponent}
           >
             <DialogContext.Provider value={dialogContextValue}>{children}</DialogContext.Provider>
-          </DialogPaper>
+          </PaperSlot>
         </DialogContainer>
       </TransitionSlot>
     </DialogRoot>

From 9093003d3674ec470d21a24aa10aeff239258202 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 13 Jan 2025 13:38:43 +0530
Subject: [PATCH 16/27] add backdrop slot

---
 packages/mui-material/src/Dialog/Dialog.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index b75a4e4cf621a0..ec77c150b0588d 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -294,6 +294,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
   const backwardCompatibleSlotProps = {
     transition: TransitionProps,
     paper: PaperProps,
+    backdrop: BackdropProps,
     ...slotProps,
   };
 
@@ -302,6 +303,12 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     slotProps: backwardCompatibleSlotProps,
   };
 
+  const [BackdropSlot, { as: backdropComponent, ...backdropSlotProps }] = useSlot('backdrop', {
+    elementType: DialogBackdrop,
+    externalForwardedProps,
+    ownerState,
+  });
+
   const [PaperSlot, { as: paperComponent, ...paperSlotProps }] = useSlot('paper', {
     elementType: DialogPaper,
     externalForwardedProps,
@@ -325,12 +332,13 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     <DialogRoot
       className={clsx(classes.root, className)}
       closeAfterTransition
-      components={{ Backdrop: DialogBackdrop }}
+      components={{ Backdrop: BackdropSlot }}
       componentsProps={{
         backdrop: {
           transitionDuration,
           as: BackdropComponent,
-          ...BackdropProps,
+          component: backdropComponent,
+          ...backdropSlotProps,
         },
       }}
       disableEscapeKeyDown={disableEscapeKeyDown}

From 6bbf6ba6620f9fb589abbab48b9d5af5fd64e74a Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 13 Jan 2025 13:40:47 +0530
Subject: [PATCH 17/27] add container slot

---
 packages/mui-material/src/Dialog/Dialog.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index ec77c150b0588d..3820bc4917ec96 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -316,6 +316,13 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     className: clsx(classes.paper, PaperProps.className),
   });
 
+  const [ContainerSlot, containerSlotProps] = useSlot('container', {
+    elementType: DialogContainer,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.container),
+  });
+
   const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
     elementType: Fade,
     externalForwardedProps,
@@ -332,8 +339,8 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     <DialogRoot
       className={clsx(classes.root, className)}
       closeAfterTransition
-      components={{ Backdrop: BackdropSlot }}
-      componentsProps={{
+      slots={{ Backdrop: BackdropSlot }}
+      slotProps={{
         backdrop: {
           transitionDuration,
           as: BackdropComponent,
@@ -352,11 +359,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
       <TransitionSlot {...transitionSlotProps}>
         {/* roles are applied via cloneElement from TransitionComponent */}
         {/* roles needs to be applied on the immediate child of Modal or it'll inject one */}
-        <DialogContainer
-          className={clsx(classes.container)}
-          onMouseDown={handleMouseDown}
-          ownerState={ownerState}
-        >
+        <ContainerSlot onMouseDown={handleMouseDown} {...containerSlotProps}>
           <PaperSlot
             as={PaperComponent}
             elevation={24}
@@ -369,7 +372,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
           >
             <DialogContext.Provider value={dialogContextValue}>{children}</DialogContext.Provider>
           </PaperSlot>
-        </DialogContainer>
+        </ContainerSlot>
       </TransitionSlot>
     </DialogRoot>
   );

From aef9657fffee97c28a456d33d3810c98d1a878a0 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 13 Jan 2025 13:42:32 +0530
Subject: [PATCH 18/27] add root slot

---
 packages/mui-material/src/Dialog/Dialog.d.ts |  1 +
 packages/mui-material/src/Dialog/Dialog.js   | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 8940aed6685f0e..0e649e7afc9e13 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -16,6 +16,7 @@ export interface DialogSlots {
   transition?: React.JSXElementConstructor<
     TransitionProps & { children?: React.ReactElement<any, any> }
   >;
+  
 }
 
 export interface DialogTransitionSlotPropsOverrides {}
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 3820bc4917ec96..3ff863ee02d871 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -303,6 +303,14 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     slotProps: backwardCompatibleSlotProps,
   };
 
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    elementType: DialogRoot,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.root, className),
+    ref,
+  });
+
   const [BackdropSlot, { as: backdropComponent, ...backdropSlotProps }] = useSlot('backdrop', {
     elementType: DialogBackdrop,
     externalForwardedProps,
@@ -336,10 +344,9 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
   });
 
   return (
-    <DialogRoot
-      className={clsx(classes.root, className)}
+    <RootSlot
       closeAfterTransition
-      slots={{ Backdrop: BackdropSlot }}
+      slots={{ backdrop: BackdropSlot }}
       slotProps={{
         backdrop: {
           transitionDuration,
@@ -351,9 +358,8 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
       disableEscapeKeyDown={disableEscapeKeyDown}
       onClose={onClose}
       open={open}
-      ref={ref}
       onClick={handleBackdropClick}
-      ownerState={ownerState}
+      {...rootSlotProps}
       {...other}
     >
       <TransitionSlot {...transitionSlotProps}>
@@ -374,7 +380,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
           </PaperSlot>
         </ContainerSlot>
       </TransitionSlot>
-    </DialogRoot>
+    </RootSlot>
   );
 });
 

From f447b80a576bc1f25e51c322e090e97f8a6a35cb Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 13 Jan 2025 14:01:59 +0530
Subject: [PATCH 19/27] add slots

---
 packages/mui-material/src/Dialog/Dialog.d.ts  | 26 +++++++++++++++++--
 .../mui-material/src/Dialog/Dialog.test.js    | 17 ++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 0e649e7afc9e13..bd3c47a7a2223c 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -16,12 +16,30 @@ export interface DialogSlots {
   transition?: React.JSXElementConstructor<
     TransitionProps & { children?: React.ReactElement<any, any> }
   >;
-  
+  /**
+   * The component that renders the paper.
+   * @default Paper
+   */
+  paper?: React.ElementType;
+  /**
+   * The component that renders the container.
+   */
+  container?: React.ElementType;
+  /**
+   * The component that renders the backdrop.
+   */
+  backdrop?: React.ElementType;
+  /**
+   * The component that renders the root.
+   */
+  root?: React.ElementType;
 }
 
 export interface DialogTransitionSlotPropsOverrides {}
-
 export interface DialogPaperSlotPropsOverrides {}
+export interface DialogContainerSlotPropsOverrides {}
+export interface DialogBackdropSlotPropsOverrides {}
+export interface DialogRootSlotPropsOverrides {}
 
 export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
   DialogSlots,
@@ -34,6 +52,10 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
       DialogTransitionSlotPropsOverrides,
       DialogOwnerState
     >;
+    paper: SlotProps<React.ElementType, DialogPaperSlotPropsOverrides, DialogOwnerState>;
+    container: SlotProps<React.ElementType, DialogContainerSlotPropsOverrides, DialogOwnerState>;
+    backdrop: SlotProps<React.ElementType, DialogBackdropSlotPropsOverrides, DialogOwnerState>;
+    root: SlotProps<React.ElementType, DialogRootSlotPropsOverrides, DialogOwnerState>;
   }
 >;
 
diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index 30dde4ab270843..6cb2cbebc9a982 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -59,6 +59,23 @@ describe('<Dialog />', () => {
           testWithComponent: CustomFade,
           testWithElement: null,
         },
+        root: {
+          expectedClassName: classes.root,
+          testWithElement: null,
+        },
+        backdrop: {
+          expectedClassName: classes.backdrop,
+          testWithElement: null,
+        },
+        container: {
+          expectedClassName: classes.container,
+          testWithElement: null,
+          testWithComponent:CustomFade
+        },
+        paper: {
+          expectedClassName: classes.paper,
+          testWithElement: null,
+        },
       },
       skip: ['componentProp', 'componentsProp', 'themeVariants'],
     }),

From 517369f9e45411c9fafed962cdcce817aa9b16ce Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 13 Jan 2025 14:31:53 +0530
Subject: [PATCH 20/27] add prop descriptions

---
 packages/mui-material/src/Dialog/Dialog.d.ts | 39 +++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index bd3c47a7a2223c..d2bcd7f392aeb2 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps, Breakpoint } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { BackdropProps, InternalStandardProps as StandardProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 import { ModalProps } from '../Modal';
 import { TransitionProps } from '../transitions/transition';
@@ -44,18 +44,47 @@ export interface DialogRootSlotPropsOverrides {}
 export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
   DialogSlots,
   {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+     */
+    root: SlotProps<React.ElementType<ModalProps>, DialogRootSlotPropsOverrides, DialogOwnerState>;
+    /**
+     * Props forwarded to the backdrop slot.
+     * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+     */
+    backdrop: SlotProps<
+      React.ElementType<BackdropProps>,
+      DialogBackdropSlotPropsOverrides,
+      DialogOwnerState
+    >;
+    /**
+     * Props forwarded to the container slot.
+     * By default, the avaible props are based on a div element.
+     */
+    container: SlotProps<
+      React.ElementType<React.HTMLAttributes<HTMLDivElement>>,
+      DialogContainerSlotPropsOverrides,
+      DialogOwnerState
+    >;
     /**
      * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
      */
     transition: SlotProps<
       React.ElementType<TransitionProps>,
       DialogTransitionSlotPropsOverrides,
       DialogOwnerState
     >;
-    paper: SlotProps<React.ElementType, DialogPaperSlotPropsOverrides, DialogOwnerState>;
-    container: SlotProps<React.ElementType, DialogContainerSlotPropsOverrides, DialogOwnerState>;
-    backdrop: SlotProps<React.ElementType, DialogBackdropSlotPropsOverrides, DialogOwnerState>;
-    root: SlotProps<React.ElementType, DialogRootSlotPropsOverrides, DialogOwnerState>;
+    /**
+     * Props forwarded to the paper slot.
+     * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+     */
+    paper: SlotProps<
+      React.ElementType<PaperProps>,
+      DialogPaperSlotPropsOverrides,
+      DialogOwnerState
+    >;
   }
 >;
 

From 666532063bd88a7b83aa1be3d52f30c5453537ef Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Mon, 13 Jan 2025 14:36:18 +0530
Subject: [PATCH 21/27] proptypes

---
 docs/pages/material-ui/api/dialog.json        | 47 +++++++++++--------
 docs/translations/api-docs/dialog/dialog.json | 13 ++---
 packages/mui-material/src/Dialog/Dialog.js    |  8 ++++
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/docs/pages/material-ui/api/dialog.json b/docs/pages/material-ui/api/dialog.json
index f00a9c372df955..e2b7e1c989dbd7 100644
--- a/docs/pages/material-ui/api/dialog.json
+++ b/docs/pages/material-ui/api/dialog.json
@@ -52,11 +52,17 @@
       "default": "'paper'"
     },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, container?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ transition?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: elementType, container?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
       "default": "{}"
     },
     "sx": {
@@ -96,21 +102,30 @@
       "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
       "default": "Collapse",
       "class": null
-    }
-  ],
-  "classes": [
+    },
     {
-      "key": "container",
-      "className": "MuiDialog-container",
-      "description": "Styles applied to the container element.",
-      "isGlobal": false
+      "name": "paper",
+      "description": "The component that renders the paper.",
+      "default": "Paper",
+      "class": "MuiDialog-paper"
     },
     {
-      "key": "paper",
-      "className": "MuiDialog-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
+      "name": "container",
+      "description": "The component that renders the container.",
+      "class": "MuiDialog-container"
     },
+    {
+      "name": "backdrop",
+      "description": "The component that renders the backdrop.",
+      "class": null
+    },
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "class": "MuiDialog-root"
+    }
+  ],
+  "classes": [
     {
       "key": "paperFullScreen",
       "className": "MuiDialog-paperFullScreen",
@@ -171,12 +186,6 @@
       "description": "Styles applied to the Paper component if `maxWidth=\"xs\"`.",
       "isGlobal": false
     },
-    {
-      "key": "root",
-      "className": "MuiDialog-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "scrollBody",
       "className": "MuiDialog-scrollBody",
diff --git a/docs/translations/api-docs/dialog/dialog.json b/docs/translations/api-docs/dialog/dialog.json
index e3e11921e3a2b9..93f82aa4afc0e7 100644
--- a/docs/translations/api-docs/dialog/dialog.json
+++ b/docs/translations/api-docs/dialog/dialog.json
@@ -51,14 +51,6 @@
     }
   },
   "classDescriptions": {
-    "container": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the container element"
-    },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
     "paperFullScreen": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
@@ -109,7 +101,6 @@
       "nodeName": "the Paper component",
       "conditions": "<code>maxWidth=\"xs\"</code>"
     },
-    "root": { "description": "Styles applied to the root element." },
     "scrollBody": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the container element",
@@ -122,6 +113,10 @@
     }
   },
   "slotDescriptions": {
+    "backdrop": "The component that renders the backdrop.",
+    "container": "The component that renders the container.",
+    "paper": "The component that renders the paper.",
+    "root": "The component that renders the root.",
     "transition": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 3ff863ee02d871..d2334d8c4b1b64 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -502,6 +502,10 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    container: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
@@ -509,6 +513,10 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    container: PropTypes.elementType,
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType,
     transition: PropTypes.elementType,
   }),
   /**

From de4de37ba4d71a62378d20b83ba346260ac9170d Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Tue, 14 Jan 2025 11:41:54 +0530
Subject: [PATCH 22/27] prettier

---
 packages/mui-material/src/Dialog/Dialog.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index 6cb2cbebc9a982..7eaf2f150069f2 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -70,7 +70,7 @@ describe('<Dialog />', () => {
         container: {
           expectedClassName: classes.container,
           testWithElement: null,
-          testWithComponent:CustomFade
+          testWithComponent: CustomFade,
         },
         paper: {
           expectedClassName: classes.paper,

From 4c61efb4aca2a2ead1e9b34574aa061fd1f3b1b0 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Wed, 15 Jan 2025 13:16:25 +0530
Subject: [PATCH 23/27] fix Backdrop import

---
 packages/mui-material/src/Dialog/Dialog.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index d2bcd7f392aeb2..55796038810e69 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SxProps, Breakpoint } from '@mui/system';
-import { BackdropProps, InternalStandardProps as StandardProps, Theme } from '..';
+import { InternalStandardProps as StandardProps, Theme } from '..';
+import { BackdropProps } from '../Backdrop';
 import { PaperProps } from '../Paper';
 import { ModalProps } from '../Modal';
 import { TransitionProps } from '../transitions/transition';

From 6ae70b725e42b57a7eb55cdd24ff08e786bf641e Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Wed, 15 Jan 2025 13:16:43 +0530
Subject: [PATCH 24/27] fix transition slot type

---
 packages/mui-material/src/Dialog/Dialog.d.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 55796038810e69..874817033952c6 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -14,9 +14,7 @@ export interface DialogSlots {
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
-  transition?: React.JSXElementConstructor<
-    TransitionProps & { children?: React.ReactElement<any, any> }
-  >;
+  transition?: React.ElementType;
   /**
    * The component that renders the paper.
    * @default Paper

From 79e8ea643357a7e41af3dfb14f566dca746db202 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Wed, 15 Jan 2025 13:17:21 +0530
Subject: [PATCH 25/27] use 'div'

---
 packages/mui-material/src/Dialog/Dialog.d.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 874817033952c6..61202053b3a1de 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -61,11 +61,7 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwarded to the container slot.
      * By default, the avaible props are based on a div element.
      */
-    container: SlotProps<
-      React.ElementType<React.HTMLAttributes<HTMLDivElement>>,
-      DialogContainerSlotPropsOverrides,
-      DialogOwnerState
-    >;
+    container: SlotProps<'div', DialogContainerSlotPropsOverrides, DialogOwnerState>;
     /**
      * Props forwarded to the transition slot.
      * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.

From 12c6f4f7fea1fead48d882ec49d61d9bf3599e5b Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Wed, 15 Jan 2025 13:18:11 +0530
Subject: [PATCH 26/27] prevent recursive types in DialogOwnerState

---
 packages/mui-material/src/Dialog/Dialog.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 61202053b3a1de..2bd4652ff540d0 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -208,4 +208,4 @@ export interface DialogProps
  */
 export default function Dialog(props: DialogProps): React.JSX.Element;
 
-export interface DialogOwnerState extends DialogProps {}
+export interface DialogOwnerState extends Omit<DialogProps, 'slots' | 'slotProps'> {}

From 51ca92bdb08fadb1a08ce75ac2ed1b75f02fa445 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Wed, 15 Jan 2025 13:54:11 +0530
Subject: [PATCH 27/27] add shouldForwordComponent prop

---
 packages/mui-material/src/Dialog/Dialog.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index ec1c267c1d9f9d..cf284758a26fb1 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -304,20 +304,23 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
 
   const [RootSlot, rootSlotProps] = useSlot('root', {
     elementType: DialogRoot,
+    shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
     className: clsx(classes.root, className),
     ref,
   });
 
-  const [BackdropSlot, { as: backdropComponent, ...backdropSlotProps }] = useSlot('backdrop', {
+  const [BackdropSlot, backdropSlotProps] = useSlot('backdrop', {
     elementType: DialogBackdrop,
+    shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
   });
 
-  const [PaperSlot, { as: paperComponent, ...paperSlotProps }] = useSlot('paper', {
+  const [PaperSlot, paperSlotProps] = useSlot('paper', {
     elementType: DialogPaper,
+    shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
     className: clsx(classes.paper, PaperProps.className),
@@ -350,7 +353,6 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
         backdrop: {
           transitionDuration,
           as: BackdropComponent,
-          component: backdropComponent,
           ...backdropSlotProps,
         },
       }}
@@ -373,7 +375,6 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
             aria-labelledby={ariaLabelledby}
             aria-modal={ariaModal}
             {...paperSlotProps}
-            component={paperComponent}
           >
             <DialogContext.Provider value={dialogContextValue}>{children}</DialogContext.Provider>
           </PaperSlot>