[material-ui][Dialog] Add slots and slotProps (#44792)

docs/pages/material-ui/api/dialog.json

@@ -41,46 +41,91 @@
       }
     },
     "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
-    "PaperProps": { "type": { "name": "object" }, "default": "{}" },
+    "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": "{ 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": "{ backdrop?: elementType, container?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       },
       "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",
         "description": "number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
       },
       "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": [
     "import Dialog from '@mui/material/Dialog';",
     "import { Dialog } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "container",
-      "className": "MuiDialog-container",
-      "description": "Styles applied to the container element.",
-      "isGlobal": false
+      "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
     },
     {
-      "key": "paper",
-      "className": "MuiDialog-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
+      "name": "paper",
+      "description": "The component that renders the paper.",
+      "default": "Paper",
+      "class": "MuiDialog-paper"
+    },
+    {
+      "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",
@@ -141,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",

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."
     },
@@ -49,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",
@@ -107,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",
@@ -118,5 +111,12 @@
       "nodeName": "the container element",
       "conditions": "<code>scroll=\"paper\"</code>"
     }
+  },
+  "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."
   }
 }

packages/mui-material/src/Dialog/Dialog.d.ts

@@ -1,12 +1,91 @@
 import * as React from 'react';
 import { SxProps, Breakpoint } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
+import { BackdropProps } from '../Backdrop';
 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.ElementType;
+  /**
+   * 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,
+  {
+    /**
+     * 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<'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.
+     */
+    transition: SlotProps<
+      React.ElementType<TransitionProps>,
+      DialogTransitionSlotPropsOverrides,
+      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
+    >;
+  }
+>;
+
+export interface DialogProps
+  extends Omit<StandardProps<ModalProps, 'children'>, 'slots' | 'slotProps'>,
+    DialogSlotsAndSlotProps {
   /**
    * The id(s) of the element(s) that describe the dialog.
    */
@@ -77,6 +156,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
   /**
    * 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>>;
   /**
@@ -92,6 +172,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * 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> }
@@ -108,6 +189,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
   /**
    * 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;
 }
@@ -125,3 +207,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 Omit<DialogProps, 'slots' | 'slotProps'> {}