[dialog][modal][drawer][swipeabledrawer] Remove deprecated props and classes

docs/data/material/getting-started/templates/blog/components/AppAppBar.js

@@ -97,9 +97,11 @@ export default function AppAppBar() {
               anchor="top"
               open={open}
               onClose={toggleDrawer(false)}
-              PaperProps={{
-                sx: {
-                  top: 'var(--template-frame-height, 0px)',
+              slotProps={{
+                paper: {
+                  sx: {
+                    top: 'var(--template-frame-height, 0px)',
+                  },
                 },
               }}
             >

docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx

@@ -97,9 +97,11 @@ export default function AppAppBar() {
               anchor="top"
               open={open}
               onClose={toggleDrawer(false)}
-              PaperProps={{
-                sx: {
-                  top: 'var(--template-frame-height, 0px)',
+              slotProps={{
+                paper: {
+                  sx: {
+                    top: 'var(--template-frame-height, 0px)',
+                  },
                 },
               }}
             >

docs/data/material/getting-started/templates/checkout/components/InfoMobile.js

@@ -40,11 +40,13 @@ function InfoMobile({ totalPrice }) {
         open={open}
         anchor="top"
         onClose={toggleDrawer(false)}
-        PaperProps={{
-          sx: {
-            top: 'var(--template-frame-height, 0px)',
-            backgroundImage: 'none',
-            backgroundColor: 'background.paper',
+        slotProps={{
+          paper: {
+            sx: {
+              top: 'var(--template-frame-height, 0px)',
+              backgroundImage: 'none',
+              backgroundColor: 'background.paper',
+            },
           },
         }}
       >

docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx

@@ -43,11 +43,13 @@ export default function InfoMobile({ totalPrice }: InfoProps) {
         open={open}
         anchor="top"
         onClose={toggleDrawer(false)}
-        PaperProps={{
-          sx: {
-            top: 'var(--template-frame-height, 0px)',
-            backgroundImage: 'none',
-            backgroundColor: 'background.paper',
+        slotProps={{
+          paper: {
+            sx: {
+              top: 'var(--template-frame-height, 0px)',
+              backgroundImage: 'none',
+              backgroundColor: 'background.paper',
+            },
           },
         }}
       >

docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js

@@ -97,9 +97,11 @@ export default function AppAppBar() {
               anchor="top"
               open={open}
               onClose={toggleDrawer(false)}
-              PaperProps={{
-                sx: {
-                  top: 'var(--template-frame-height, 0px)',
+              slotProps={{
+                paper: {
+                  sx: {
+                    top: 'var(--template-frame-height, 0px)',
+                  },
                 },
               }}
             >

docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx

@@ -97,9 +97,11 @@ export default function AppAppBar() {
               anchor="top"
               open={open}
               onClose={toggleDrawer(false)}
-              PaperProps={{
-                sx: {
-                  top: 'var(--template-frame-height, 0px)',
+              slotProps={{
+                paper: {
+                  sx: {
+                    top: 'var(--template-frame-height, 0px)',
+                  },
                 },
               }}
             >

docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md

@@ -894,6 +894,110 @@ If you were using these deprecated class names as `styleOverrides` keys in your
  });
 ```
 
+#### Dialog deprecated CSS classes removed
+
+Use the [dialog-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#dialog-classes) below to migrate the code as described in the following section:
+
+```bash
+npx @mui/codemod@latest deprecations/dialog-classes <path>
+```
+
+The following deprecated `Dialog` CSS classes have been removed:
+
+- `paperScrollPaper` → use `.MuiDialog-scrollPaper > .MuiDialog-paper`
+- `paperScrollBody` → use `.MuiDialog-scrollBody > .MuiDialog-paper`
+
+If you were using these classes in `styleOverrides`, use the `variants` array in the `paper` slot instead:
+
+```diff
+ const theme = createTheme({
+   components: {
+     MuiDialog: {
+       styleOverrides: {
+-        paperScrollPaper: {
+-          maxHeight: '80vh',
+-        },
+-        paperScrollBody: {
+-          verticalAlign: 'bottom',
+-        },
++        paper: {
++          variants: [
++            {
++              props: { scroll: 'paper' },
++              style: {
++                maxHeight: '80vh',
++              },
++            },
++            {
++              props: { scroll: 'body' },
++              style: {
++                verticalAlign: 'bottom',
++              },
++            },
++          ],
++        },
+       },
+     },
+   },
+ });
+```
+
+#### Dialog deprecated props removed
+
+Use the [dialog-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#dialog-props) below to migrate the code as described in the following section:
+
+```bash
+npx @mui/codemod@latest deprecations/dialog-props <path>
+```
+
+The following deprecated props have been removed from the `Dialog` component:
+
+- `BackdropComponent` → use `slots.backdrop`
+- `BackdropProps` → use `slotProps.backdrop`
+- `PaperProps` → use `slotProps.paper`
+- `TransitionComponent` → use `slots.transition`
+- `TransitionProps` → use `slotProps.transition`
+
+```diff
+ <Dialog
+-  BackdropComponent={CustomBackdrop}
+-  BackdropProps={{ invisible: true }}
+-  PaperProps={{ elevation: 3 }}
+-  TransitionComponent={CustomTransition}
+-  TransitionProps={{ timeout: 500 }}
++  slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
++  slotProps={{ backdrop: { invisible: true }, paper: { elevation: 3 }, transition: { timeout: 500 } }}
+ />
+```
+
+#### Drawer deprecated props removed
+
+Use the [drawer-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-props) below to migrate the code as described in the following section:
+
+```bash
+npx @mui/codemod@latest deprecations/drawer-props <path>
+```
+
+The following deprecated props have been removed from the `Drawer` component:
+
+- `BackdropComponent` → use `slots.backdrop`
+- `BackdropProps` → use `slotProps.backdrop`
+- `PaperProps` → use `slotProps.paper`
+- `SlideProps` → use `slotProps.transition`
+- `TransitionComponent` → use `slots.transition`
+
+```diff
+ <Drawer
+-  BackdropComponent={CustomBackdrop}
+-  BackdropProps={{ invisible: true }}
+-  PaperProps={{ elevation: 2 }}
+-  SlideProps={{ timeout: 500 }}
+-  TransitionComponent={CustomTransition}
++  slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
++  slotProps={{ backdrop: { invisible: true }, paper: { elevation: 2 }, transition: { timeout: 500 } }}
+ />
+```
+
 #### Divider deprecated props removed
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as described in the following sections:
@@ -1368,6 +1472,32 @@ The following deprecated props have been removed:
  />
 ```
 
+#### Modal deprecated props removed
+
+Use the [modal-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#modal-props) below to migrate the code as described in the following section:
+
+```bash
+npx @mui/codemod@latest deprecations/modal-props <path>
+```
+
+The following deprecated props have been removed from the `Modal` component:
+
+- `BackdropComponent` → use `slots.backdrop`
+- `BackdropProps` → use `slotProps.backdrop`
+- `components` → use `slots`
+- `componentsProps` → use `slotProps`
+
+```diff
+ <Modal
+-  BackdropComponent={CustomBackdrop}
+-  BackdropProps={{ invisible: true }}
+-  components={{ Root: CustomRoot }}
+-  componentsProps={{ root: { className: 'custom' } }}
++  slots={{ backdrop: CustomBackdrop, root: CustomRoot }}
++  slotProps={{ backdrop: { invisible: true }, root: { className: 'custom' } }}
+ />
+```
+
 #### Popover deprecated props removed
 
 The following deprecated props have been removed:
@@ -1434,6 +1564,30 @@ The following deprecated `Switch` props have been removed:
  />
 ```
 
+#### SwipeableDrawer deprecated props removed
+
+Use the [drawer-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-props) below to migrate the code as described in the following section:
+
+```bash
+npx @mui/codemod@latest deprecations/drawer-props <path>
+```
+
+The following deprecated props have been removed from the `SwipeableDrawer` component:
+
+- `BackdropComponent` → use `slots.backdrop`
+- `BackdropProps` → use `slotProps.backdrop`
+- `SwipeAreaProps` → use `slotProps.swipeArea`
+
+```diff
+ <SwipeableDrawer
+-  BackdropComponent={CustomBackdrop}
+-  BackdropProps={{ invisible: true }}
+-  SwipeAreaProps={{ className: 'custom' }}
++  slots={{ backdrop: CustomBackdrop }}
++  slotProps={{ backdrop: { invisible: true }, swipeArea: { className: 'custom' } }}
+ />
+```
+
 #### Tabs deprecated props removed
 
 Use the [tabs-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tabs-props) below to migrate the code as described in the following section:

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

@@ -10,12 +10,6 @@
       },
       "default": "true"
     },
-    "BackdropComponent": {
-      "type": { "name": "elementType" },
-      "default": "styled(Backdrop, {\n  name: 'MuiModal',\n  slot: 'Backdrop',\n})({\n  zIndex: -1,\n})",
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slots.backdrop</code> instead. While this prop currently works, it will be removed in the next major version."
-    },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "fullScreen": { "type": { "name": "bool" }, "default": "false" },
@@ -35,12 +29,6 @@
       }
     },
     "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
-    "PaperProps": {
-      "type": { "name": "object" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.paper</code> instead. This prop will be removed in a future major release. 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'"
@@ -66,23 +54,12 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "TransitionComponent": {
-      "type": { "name": "elementType" },
-      "default": "Fade",
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in a future major release. 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" },
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in a future major release. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     }
   },
   "name": "Dialog",
@@ -132,20 +109,6 @@
       "description": "Styles applied to the Paper component if `fullWidth={true}`.",
       "isGlobal": false
     },
-    {
-      "key": "paperScrollBody",
-      "className": "MuiDialog-paperScrollBody",
-      "description": "Styles applied to the Paper component if `scroll=\"body\"`.",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
-    {
-      "key": "paperScrollPaper",
-      "className": "MuiDialog-paperScrollPaper",
-      "description": "Styles applied to the Paper component if `scroll=\"paper\"`.",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
     {
       "key": "paperWidthFalse",
       "className": "MuiDialog-paperWidthFalse",

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

@@ -20,17 +20,6 @@
       }
     },
     "open": { "type": { "name": "bool" }, "default": "false" },
-    "PaperProps": {
-      "type": { "name": "object" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "use the <code>slotProps.paper</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "SlideProps": {
-      "type": { "name": "object" },
-      "deprecated": true,
-      "deprecationInfo": "use the <code>slotProps.transition</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "slotProps": {
       "type": {
         "name": "shape",

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

@@ -2,35 +2,9 @@
   "props": {
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
     "open": { "type": { "name": "bool" }, "required": true },
-    "BackdropComponent": {
-      "type": { "name": "elementType" },
-      "default": "styled(Backdrop, {\n  name: 'MuiModal',\n  slot: 'Backdrop',\n})({\n  zIndex: -1,\n})",
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slots.backdrop</code> instead. While this prop currently works, it will be removed in the next major version."
-    },
-    "BackdropProps": {
-      "type": { "name": "object" },
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.backdrop</code> instead."
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "closeAfterTransition": { "type": { "name": "bool" }, "default": "false" },
     "component": { "type": { "name": "elementType" } },
-    "components": {
-      "type": { "name": "shape", "description": "{ Backdrop?: elementType, Root?: elementType }" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "Use the <code>slots</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "componentsProps": {
-      "type": {
-        "name": "shape",
-        "description": "{ backdrop?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
-      },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "Use the <code>slotProps</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },