From 47cf38e781045615ed449912e9f9c4f57df29960 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 2 Jan 2025 19:47:52 +0700
Subject: [PATCH 01/31] deprecate props and complete slots, slotProps

---
 packages/mui-material/src/Drawer/Drawer.d.ts  |  79 +++++++++-
 packages/mui-material/src/Drawer/Drawer.js    | 137 ++++++++++--------
 .../mui-material/src/Drawer/Drawer.spec.tsx   |  34 +++++
 3 files changed, 186 insertions(+), 64 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index e464ef13a3a64e..0c6b324602afb0 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -1,13 +1,83 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 import { ModalProps } from '../Modal';
+import { BackdropProps } from '../Backdrop';
 import { SlideProps } from '../Slide';
 import { PaperProps } from '../Paper';
 import { TransitionProps } from '../transitions/transition';
 import { DrawerClasses } from './drawerClasses';
 
-export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'children'> {
+export interface DrawerRootSlotPropsOverrides {}
+
+export interface DrawerDockedSlotPropsOverrides {}
+
+export interface DrawerPaperSlotPropsOverrides {}
+
+export interface DrawerTransitionSlotPropsOverrides {}
+
+export interface DrawerBackdropSlotPropsOverrides {}
+
+export interface DrawerSlots {
+  /**
+   * The component used for the popper.
+   * @default Modal
+   */
+  root: React.ElementType;
+  /**
+   * The component used for the backdrop.
+   * @default Backdrop
+   */
+  backdrop: React.ElementType;
+  /**
+   * The component used for the docked. It's also a root slot when variant is `permanent` or `persistent`.
+   * @default div
+   */
+  docked: React.ElementType;
+  /**
+   * The component used for the paper.
+   * @default Paper
+   */
+  paper: React.ElementType;
+  /**
+   * 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 Slide
+   */
+  transition: React.ElementType;
+}
+
+export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  DrawerSlots,
+  {
+    root: SlotProps<React.ElementType<ModalProps>, DrawerRootSlotPropsOverrides, DrawerOwnerState>;
+    backdrop: SlotProps<
+      React.ElementType<BackdropProps>,
+      DrawerBackdropSlotPropsOverrides,
+      DrawerOwnerState
+    >;
+    docked: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLDivElement>>,
+      DrawerDockedSlotPropsOverrides,
+      DrawerOwnerState
+    >;
+    paper: SlotProps<
+      React.ElementType<PaperProps>,
+      DrawerPaperSlotPropsOverrides,
+      DrawerOwnerState
+    >;
+    transition: SlotProps<
+      React.ElementType<TransitionProps>,
+      DrawerTransitionSlotPropsOverrides,
+      DrawerOwnerState
+    >;
+  }
+>;
+
+export interface DrawerProps
+  extends StandardProps<ModalProps, 'open' | 'children' | 'slots' | 'slotProps'>,
+    DrawerSlotsAndSlotProps {
   /**
    * Side from which the drawer will appear.
    * @default 'left'
@@ -28,6 +98,7 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   elevation?: number;
   /**
    * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
+   * @deprecated use the `slotProps.root` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   ModalProps?: Partial<ModalProps>;
@@ -46,11 +117,13 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   open?: boolean;
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @deprecated use the `slotProps.paper` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
+   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SlideProps?: Partial<SlideProps>;
   /**
@@ -60,6 +133,7 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
+   * @deprecated use the `slotProps.transition.transitionDuration` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {
    *   enter: theme.transitions.duration.enteringScreen,
    *   exit: theme.transitions.duration.leavingScreen,
@@ -73,6 +147,9 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   variant?: 'permanent' | 'persistent' | 'temporary';
 }
 
+// omit `slots` and `slotProps` to prevent recusion
+export interface DrawerOwnerState extends Omit<DrawerProps, 'slots' | 'slotProps'> {}
+
 /**
  * The props of the [Modal](https://mui.com/material-ui/api/modal/) component are available
  * when `variant="temporary"` is set.
diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index e7d2e159357815..1cd2f0b57e5a4e 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -14,6 +14,7 @@ import { styled, useTheme } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import { getDrawerUtilityClass } from './drawerClasses';
+import useSlot from '../utils/useSlot';
 
 const overridesResolver = (props, styles) => {
   const { ownerState } = props;
@@ -206,10 +207,11 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     open = false,
     PaperProps = {},
     SlideProps,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Slide,
+    TransitionComponent,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -235,76 +237,85 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const drawer = (
-    <DrawerPaper
-      elevation={variant === 'temporary' ? elevation : 0}
-      square
-      {...PaperProps}
-      className={clsx(classes.paper, PaperProps.className)}
-      ownerState={ownerState}
-    >
-      {children}
-    </DrawerPaper>
-  );
+  const externalForwardedProps = {
+    slots: {
+      ...slots,
+      transition: slots.transition || TransitionComponent,
+    },
+    slotProps: {
+      ...slotProps,
+      root: slotProps.root || ModalProps,
+      backdrop: slotProps.backdrop || {
+        ...BackdropProps,
+        ...BackdropPropsProp,
+        transitionDuration,
+      },
+      // backdrop: mergeSlotProps(slotProps.backdrop || { ...BackdropProps, ...BackdropPropsProp }, {
+      //   transitionDuration,
+      // }),
+      paper: slotProps.paper || PaperProps,
+      transition: slotProps.transition || SlideProps,
+    },
+    other,
+  };
+
+  const [PaperSlot, paperSlotProps] = useSlot('paper', {
+    elementType: DrawerPaper,
+    className: clsx(classes.paper, PaperProps.className),
+    ownerState,
+    additionalProps: {
+      elevation: variant === 'temporary' ? elevation : 0,
+      square: true,
+    },
+  });
+
+  const [DockedSlot, dockedSlotProps] = useSlot('docked', {
+    elementType: DrawerDockedRoot,
+    ref,
+    className: clsx(classes.root, classes.docked, className),
+    ownerState,
+    externalForwardedProps,
+  });
+
+  const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
+    elementType: Slide,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      in: open,
+      direction: oppositeDirection[anchorInvariant],
+      timeout: transitionDuration,
+      appear: mounted.current,
+    },
+  });
+
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    elementType: DrawerRoot,
+    ref,
+    className: clsx(classes.root, classes.modal, className),
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      open,
+      onClose,
+      hideBackdrop,
+    },
+  });
+
+  const drawer = <PaperSlot {...paperSlotProps}>{children}</PaperSlot>;
 
   if (variant === 'permanent') {
-    return (
-      <DrawerDockedRoot
-        className={clsx(classes.root, classes.docked, className)}
-        ownerState={ownerState}
-        ref={ref}
-        {...other}
-      >
-        {drawer}
-      </DrawerDockedRoot>
-    );
+    return <DockedSlot {...dockedSlotProps}>{drawer}</DockedSlot>;
   }
 
-  const slidingDrawer = (
-    <TransitionComponent
-      in={open}
-      direction={oppositeDirection[anchorInvariant]}
-      timeout={transitionDuration}
-      appear={mounted.current}
-      {...SlideProps}
-    >
-      {drawer}
-    </TransitionComponent>
-  );
+  const slidingDrawer = <TransitionSlot {...transitionSlotProps}>{drawer}</TransitionSlot>;
 
   if (variant === 'persistent') {
-    return (
-      <DrawerDockedRoot
-        className={clsx(classes.root, classes.docked, className)}
-        ownerState={ownerState}
-        ref={ref}
-        {...other}
-      >
-        {slidingDrawer}
-      </DrawerDockedRoot>
-    );
+    return <DockedSlot {...dockedSlotProps}>{slidingDrawer}</DockedSlot>;
   }
 
   // variant === temporary
-  return (
-    <DrawerRoot
-      BackdropProps={{
-        ...BackdropProps,
-        ...BackdropPropsProp,
-        transitionDuration,
-      }}
-      className={clsx(classes.root, classes.modal, className)}
-      open={open}
-      ownerState={ownerState}
-      onClose={onClose}
-      hideBackdrop={hideBackdrop}
-      ref={ref}
-      {...other}
-      {...ModalProps}
-    >
-      {slidingDrawer}
-    </DrawerRoot>
-  );
+  return <RootSlot {...rootSlotProps}>{slidingDrawer}</RootSlot>;
 });
 
 Drawer.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/Drawer/Drawer.spec.tsx b/packages/mui-material/src/Drawer/Drawer.spec.tsx
index 8c1fef49349092..6f3cfd4ab6edb2 100644
--- a/packages/mui-material/src/Drawer/Drawer.spec.tsx
+++ b/packages/mui-material/src/Drawer/Drawer.spec.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
 import Drawer from '@mui/material/Drawer';
+import Grow from '@mui/material/Grow';
 import { PaperProps } from '@mui/material/Paper';
 
 const paperProps: PaperProps<'span'> = {
@@ -17,3 +18,36 @@ function Test() {
     </React.Fragment>
   );
 }
+
+<Drawer
+  slotProps={{
+    root: {
+      disablePortal: true,
+    },
+    backdrop: {
+      transitionDuration: 1000,
+    },
+    paper: {
+      elevation: 4,
+    },
+    docked: {
+      'aria-hidden': true,
+    },
+    transition: {
+      timeout: 500,
+    },
+  }}
+/>;
+
+function Noop() {
+  return null;
+}
+<Drawer
+  slots={{
+    root: 'div',
+    backdrop: Noop,
+    docked: 'div',
+    paper: 'div',
+    transition: Grow,
+  }}
+/>;

From c2c3f8ee5eaacdc1f8323688b5290663cea7e78a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 2 Jan 2025 19:55:47 +0700
Subject: [PATCH 02/31] run proptypes and api

---
 docs/pages/material-ui/api/drawer.json        | 86 ++++++++++++++-----
 .../material-ui/api/swipeable-drawer.json     |  4 +-
 docs/translations/api-docs/drawer/drawer.json | 21 +++--
 packages/mui-material/src/Drawer/Drawer.d.ts  | 20 +++++
 packages/mui-material/src/Drawer/Drawer.js    | 27 ++++++
 .../src/SwipeableDrawer/SwipeableDrawer.js    |  1 +
 6 files changed, 126 insertions(+), 33 deletions(-)

diff --git a/docs/pages/material-ui/api/drawer.json b/docs/pages/material-ui/api/drawer.json
index ecf652082a5d01..25e0c2fd707feb 100644
--- a/docs/pages/material-ui/api/drawer.json
+++ b/docs/pages/material-ui/api/drawer.json
@@ -11,7 +11,12 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "elevation": { "type": { "name": "custom", "description": "integer" }, "default": "16" },
     "hideBackdrop": { "type": { "name": "bool" }, "default": "false" },
-    "ModalProps": { "type": { "name": "object" }, "default": "{}" },
+    "ModalProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.root</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "onClose": {
       "type": { "name": "func" },
       "signature": {
@@ -20,8 +25,31 @@
       }
     },
     "open": { "type": { "name": "bool" }, "default": "false" },
-    "PaperProps": { "type": { "name": "object" }, "default": "{}" },
-    "SlideProps": { "type": { "name": "object" } },
+    "PaperProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.paper</code> prop instead. This prop will be removed in v7. 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 v7. 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",
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, docked?: 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, docked?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -34,7 +62,9 @@
         "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}"
+      "default": "{\n  enter: theme.transitions.duration.enteringScreen,\n  exit: theme.transitions.duration.leavingScreen,\n}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.transition.transitionDuration</code> instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "variant": {
       "type": {
@@ -49,25 +79,45 @@
     "import Drawer from '@mui/material/Drawer';",
     "import { Drawer } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "docked",
-      "className": "MuiDrawer-docked",
-      "description": "Styles applied to the root element if `variant=\"permanent or persistent\"`.",
-      "isGlobal": false
+      "name": "root",
+      "description": "The component used for the popper.",
+      "default": "Modal",
+      "class": "MuiDrawer-root"
     },
+    {
+      "name": "backdrop",
+      "description": "The component used for the backdrop.",
+      "default": "Backdrop",
+      "class": null
+    },
+    {
+      "name": "docked",
+      "description": "The component used for the docked. It's also a root slot when variant is `permanent` or `persistent`.",
+      "default": "div",
+      "class": "MuiDrawer-docked"
+    },
+    {
+      "name": "paper",
+      "description": "The component used for the paper.",
+      "default": "Paper",
+      "class": "MuiDrawer-paper"
+    },
+    {
+      "name": "transition",
+      "description": "The component used for the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Slide",
+      "class": null
+    }
+  ],
+  "classes": [
     {
       "key": "modal",
       "className": "MuiDrawer-modal",
       "description": "Styles applied to the Modal component.",
       "isGlobal": false
     },
-    {
-      "key": "paper",
-      "className": "MuiDrawer-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
-    },
     {
       "key": "paperAnchorBottom",
       "className": "MuiDrawer-paperAnchorBottom",
@@ -115,12 +165,6 @@
       "className": "MuiDrawer-paperAnchorTop",
       "description": "Styles applied to the Paper component if `anchor=\"top\"`.",
       "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiDrawer-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,
diff --git a/docs/pages/material-ui/api/swipeable-drawer.json b/docs/pages/material-ui/api/swipeable-drawer.json
index 88c0e20c8303a7..482528710c4021 100644
--- a/docs/pages/material-ui/api/swipeable-drawer.json
+++ b/docs/pages/material-ui/api/swipeable-drawer.json
@@ -37,7 +37,9 @@
         "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}"
+      "default": "{\n  enter: theme.transitions.duration.enteringScreen,\n  exit: theme.transitions.duration.leavingScreen,\n}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.transition.transitionDuration</code> instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     }
   },
   "name": "SwipeableDrawer",
diff --git a/docs/translations/api-docs/drawer/drawer.json b/docs/translations/api-docs/drawer/drawer.json
index 95074be42ae6d0..da599fa29625ca 100644
--- a/docs/translations/api-docs/drawer/drawer.json
+++ b/docs/translations/api-docs/drawer/drawer.json
@@ -23,6 +23,8 @@
     "SlideProps": {
       "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/slide/\"><code>Slide</code></a> element."
     },
+    "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."
     },
@@ -32,19 +34,10 @@
     "variant": { "description": "The variant to use." }
   },
   "classDescriptions": {
-    "docked": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"permanent or persistent\"</code>"
-    },
     "modal": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Modal component"
     },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
     "paperAnchorBottom": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
@@ -84,7 +77,13 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
       "conditions": "<code>anchor=\"top\"</code>"
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "backdrop": "The component used for the backdrop.",
+    "docked": "The component used for the docked. It&#39;s also a root slot when variant is <code>permanent</code> or <code>persistent</code>.",
+    "paper": "The component used for the paper.",
+    "root": "The component used for the popper.",
+    "transition": "The component used for the transition. <a href=\"https://mui.com/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/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index 0c6b324602afb0..2b8769d5170596 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -51,22 +51,42 @@ export interface DrawerSlots {
 export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<
   DrawerSlots,
   {
+    /**
+     * 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>, DrawerRootSlotPropsOverrides, DrawerOwnerState>;
+    /**
+     * 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>,
       DrawerBackdropSlotPropsOverrides,
       DrawerOwnerState
     >;
+    /**
+     * Props forwarded to the docked slot.
+     * By default, the avaible props are based on a div element.
+     */
     docked: SlotProps<
       React.ElementType<React.HTMLProps<HTMLDivElement>>,
       DrawerDockedSlotPropsOverrides,
       DrawerOwnerState
     >;
+    /**
+     * 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>,
       DrawerPaperSlotPropsOverrides,
       DrawerOwnerState
     >;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
+     */
     transition: SlotProps<
       React.ElementType<TransitionProps>,
       DrawerTransitionSlotPropsOverrides,
diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index 1cd2f0b57e5a4e..ec197b74af9663 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -207,6 +207,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     open = false,
     PaperProps = {},
     SlideProps,
+    // eslint-disable-next-line react/prop-types
     TransitionComponent,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
@@ -356,6 +357,7 @@ Drawer.propTypes /* remove-proptypes */ = {
   hideBackdrop: PropTypes.bool,
   /**
    * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
+   * @deprecated use the `slotProps.root` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   ModalProps: PropTypes.object,
@@ -374,13 +376,37 @@ Drawer.propTypes /* remove-proptypes */ = {
   open: PropTypes.bool,
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @deprecated use the `slotProps.paper` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   PaperProps: PropTypes.object,
   /**
    * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
+   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SlideProps: PropTypes.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    docked: 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]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    docked: PropTypes.elementType,
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -392,6 +418,7 @@ Drawer.propTypes /* remove-proptypes */ = {
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
+   * @deprecated use the `slotProps.transition.transitionDuration` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {
    *   enter: theme.transitions.duration.enteringScreen,
    *   exit: theme.transitions.duration.leavingScreen,
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index 23d775bf29f6a9..3018c625677c7e 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -736,6 +736,7 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
+   * @deprecated use the `slotProps.transition.transitionDuration` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {
    *   enter: theme.transitions.duration.enteringScreen,
    *   exit: theme.transitions.duration.leavingScreen,

From fa08db202beebbbbd0bfe3ef857eb0e60bdc254c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 2 Jan 2025 23:22:53 +0700
Subject: [PATCH 03/31] add missing externalForwardedProps

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

diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index ec197b74af9663..cb746d61cd7c84 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -264,6 +264,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     elementType: DrawerPaper,
     className: clsx(classes.paper, PaperProps.className),
     ownerState,
+    externalForwardedProps,
     additionalProps: {
       elevation: variant === 'temporary' ? elevation : 0,
       square: true,

From 8f43bfee6c56480cff3f591eb255ff38a6385c8c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 09:20:39 +0700
Subject: [PATCH 04/31] apply mergeSlotProps

---
 packages/mui-material/src/Drawer/Drawer.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index cb746d61cd7c84..39773b701b6d37 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -15,6 +15,7 @@ import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import { getDrawerUtilityClass } from './drawerClasses';
 import useSlot from '../utils/useSlot';
+import { mergeSlotProps } from '../utils';
 
 const overridesResolver = (props, styles) => {
   const { ownerState } = props;
@@ -246,14 +247,9 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     slotProps: {
       ...slotProps,
       root: slotProps.root || ModalProps,
-      backdrop: slotProps.backdrop || {
-        ...BackdropProps,
-        ...BackdropPropsProp,
+      backdrop: mergeSlotProps(slotProps.backdrop || { ...BackdropProps, ...BackdropPropsProp }, {
         transitionDuration,
-      },
-      // backdrop: mergeSlotProps(slotProps.backdrop || { ...BackdropProps, ...BackdropPropsProp }, {
-      //   transitionDuration,
-      // }),
+      }),
       paper: slotProps.paper || PaperProps,
       transition: slotProps.transition || SlideProps,
     },

From dd610148dfb5d7cac06c90fe68022b6f9b29a1d9 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 09:48:25 +0700
Subject: [PATCH 05/31] fix Drawer spreading props

---
 packages/mui-material/src/Drawer/Drawer.js | 40 +++++++++++++---------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index 39773b701b6d37..aacee0e5d72bca 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -246,14 +246,12 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     },
     slotProps: {
       ...slotProps,
-      root: slotProps.root || ModalProps,
       backdrop: mergeSlotProps(slotProps.backdrop || { ...BackdropProps, ...BackdropPropsProp }, {
         transitionDuration,
       }),
       paper: slotProps.paper || PaperProps,
       transition: slotProps.transition || SlideProps,
     },
-    other,
   };
 
   const [PaperSlot, paperSlotProps] = useSlot('paper', {
@@ -273,6 +271,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     className: clsx(classes.root, classes.docked, className),
     ownerState,
     externalForwardedProps,
+    additionalProps: other, // pass `other` here because `DockedSlot` is also a root slot for some variants
   });
 
   const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
@@ -287,19 +286,6 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     },
   });
 
-  const [RootSlot, rootSlotProps] = useSlot('root', {
-    elementType: DrawerRoot,
-    ref,
-    className: clsx(classes.root, classes.modal, className),
-    ownerState,
-    externalForwardedProps,
-    additionalProps: {
-      open,
-      onClose,
-      hideBackdrop,
-    },
-  });
-
   const drawer = <PaperSlot {...paperSlotProps}>{children}</PaperSlot>;
 
   if (variant === 'permanent') {
@@ -313,7 +299,29 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   }
 
   // variant === temporary
-  return <RootSlot {...rootSlotProps}>{slidingDrawer}</RootSlot>;
+  // `DrawerRoot` does not need `useSlot` because it is a `Modal` (composed component),
+  // pass `slots` and `slotProps` to `DrawerRoot` directly
+  return (
+    <DrawerRoot
+      BackdropProps={{
+        ...BackdropProps,
+        ...BackdropPropsProp,
+        transitionDuration,
+      }}
+      className={clsx(classes.root, classes.modal, className)}
+      open={open}
+      ownerState={ownerState}
+      onClose={onClose}
+      hideBackdrop={hideBackdrop}
+      ref={ref}
+      slots={externalForwardedProps.slots}
+      slotProps={externalForwardedProps.slotProps}
+      {...other}
+      {...ModalProps}
+    >
+      {slidingDrawer}
+    </DrawerRoot>
+  );
 });
 
 Drawer.propTypes /* remove-proptypes */ = {

From 0b5d25ecc56d77233f2eaf102654ffb3cd91b79a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 11:55:17 +0700
Subject: [PATCH 06/31] merge style

---
 .../src/utils/mergeSlotProps.test.ts          | 52 +++++++++++++++++++
 .../mui-material/src/utils/mergeSlotProps.ts  |  8 +++
 2 files changed, 60 insertions(+)

diff --git a/packages/mui-material/src/utils/mergeSlotProps.test.ts b/packages/mui-material/src/utils/mergeSlotProps.test.ts
index b6e93114515ad3..baeaf8a77c633e 100644
--- a/packages/mui-material/src/utils/mergeSlotProps.test.ts
+++ b/packages/mui-material/src/utils/mergeSlotProps.test.ts
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { expect } from 'chai';
 
 import mergeSlotProps from './mergeSlotProps';
@@ -5,6 +6,7 @@ import mergeSlotProps from './mergeSlotProps';
 type OwnerState = {
   className: string;
   'aria-label'?: string;
+  style?: React.CSSProperties;
 };
 
 describe('utils/index.js', () => {
@@ -21,6 +23,27 @@ describe('utils/index.js', () => {
       });
     });
 
+    it('merge styles', () => {
+      expect(
+        mergeSlotProps<{ style: React.CSSProperties }>(
+          { style: { color: 'red' } },
+          { style: { backgroundColor: 'blue' } },
+        ),
+      ).to.deep.equal({
+        style: { color: 'red', backgroundColor: 'blue' },
+      });
+
+      // external styles should override
+      expect(
+        mergeSlotProps<{ style: React.CSSProperties }>(
+          { style: { backgroundColor: 'red' } },
+          { style: { backgroundColor: 'blue' } },
+        ),
+      ).to.deep.equal({
+        style: { backgroundColor: 'red' },
+      });
+    });
+
     it('external slot props should override', () => {
       expect(
         mergeSlotProps<OwnerState>(
@@ -78,6 +101,35 @@ describe('utils/index.js', () => {
       });
     });
 
+    it('merge styles for callbacks', () => {
+      expect(
+        mergeSlotProps(
+          () => ({
+            style: { color: 'red' },
+          }),
+          () => ({
+            style: { backgroundColor: 'blue' },
+          }),
+        )(),
+      ).to.deep.equal({
+        style: { color: 'red', backgroundColor: 'blue' },
+      });
+
+      // external styles should override
+      expect(
+        mergeSlotProps(
+          () => ({
+            style: { backgroundColor: 'red' },
+          }),
+          () => ({
+            style: { backgroundColor: 'blue' },
+          }),
+        )(),
+      ).to.deep.equal({
+        style: { backgroundColor: 'red' },
+      });
+    });
+
     it('external callback should be called with default slot props', () => {
       expect(
         mergeSlotProps<(ownerState: OwnerState) => OwnerState>(
diff --git a/packages/mui-material/src/utils/mergeSlotProps.ts b/packages/mui-material/src/utils/mergeSlotProps.ts
index f458a4c985d8a8..a9c9ff0b888158 100644
--- a/packages/mui-material/src/utils/mergeSlotProps.ts
+++ b/packages/mui-material/src/utils/mergeSlotProps.ts
@@ -28,6 +28,10 @@ export default function mergeSlotProps<
         ...defaultSlotPropsValue,
         ...externalSlotPropsValue,
         ...(!!className && { className }),
+        ...(defaultSlotPropsValue?.style &&
+          externalSlotPropsValue?.style && {
+            style: { ...defaultSlotPropsValue.style, ...externalSlotPropsValue.style },
+          }),
       };
     }) as U;
   }
@@ -39,5 +43,9 @@ export default function mergeSlotProps<
     ...defaultSlotProps,
     ...externalSlotProps,
     ...(!!className && { className }),
+    ...((defaultSlotProps as Record<string, any>)?.style &&
+      externalSlotProps?.style && {
+        style: { ...(defaultSlotProps as Record<string, any>).style, ...externalSlotProps.style },
+      }),
   } as U;
 }

From 3840d2c7309c9dcf6842bb7e9c17d3d71a4c6026 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 13:03:05 +0700
Subject: [PATCH 07/31] update docs

---
 docs/data/material/guides/composition/composition.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md
index cc77b9161e6e53..55b51f41d23228 100644
--- a/docs/data/material/guides/composition/composition.md
+++ b/docs/data/material/guides/composition/composition.md
@@ -65,6 +65,10 @@ If you added another `className` via the `slotProps` prop on the Custom Tooltip
 The popper slot in the original example would now have both classes applied to it, in addition to any others that may be present: `"[…] custom-tooltip-popper foo"`.
 :::
 
+:::info
+`style` object are shallow merged rather than replacing one another. The style keys from the first argument will override the second.
+:::
+
 ## Component prop
 
 Material UI allows you to change the root element that will be rendered via a prop called `component`.

From 8bacb6cec751066282f2e1fd8cf8833d601e2966 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 13:14:08 +0700
Subject: [PATCH 08/31] fix docs

---
 docs/data/material/guides/composition/composition.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md
index 55b51f41d23228..2398f114be463c 100644
--- a/docs/data/material/guides/composition/composition.md
+++ b/docs/data/material/guides/composition/composition.md
@@ -66,7 +66,7 @@ The popper slot in the original example would now have both classes applied to i
 :::
 
 :::info
-`style` object are shallow merged rather than replacing one another. The style keys from the first argument will override the second.
+`style` object are shallow merged rather than replacing one another. The style keys from the first argument have higher priority.
 :::
 
 ## Component prop

From 5f4afc921d3be4f0450021b5002d1edb2d54e8eb Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 13:40:40 +0700
Subject: [PATCH 09/31] update proptypes and api

---
 docs/pages/material-ui/api/drawer.json        | 8 ++++----
 docs/translations/api-docs/drawer/drawer.json | 4 ++--
 packages/mui-material/src/Drawer/Drawer.d.ts  | 9 +++++----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/docs/pages/material-ui/api/drawer.json b/docs/pages/material-ui/api/drawer.json
index 25e0c2fd707feb..416b0e8c578036 100644
--- a/docs/pages/material-ui/api/drawer.json
+++ b/docs/pages/material-ui/api/drawer.json
@@ -82,19 +82,19 @@
   "slots": [
     {
       "name": "root",
-      "description": "The component used for the popper.",
-      "default": "Modal",
+      "description": "The component used for the Modal root.",
+      "default": "div",
       "class": "MuiDrawer-root"
     },
     {
       "name": "backdrop",
-      "description": "The component used for the backdrop.",
+      "description": "The component used for the Modal backdrop.",
       "default": "Backdrop",
       "class": null
     },
     {
       "name": "docked",
-      "description": "The component used for the docked. It's also a root slot when variant is `permanent` or `persistent`.",
+      "description": "The component used for the docked.\nIt's also a root slot when variant is `permanent` or `persistent`.",
       "default": "div",
       "class": "MuiDrawer-docked"
     },
diff --git a/docs/translations/api-docs/drawer/drawer.json b/docs/translations/api-docs/drawer/drawer.json
index da599fa29625ca..d0b9a9eef0eb34 100644
--- a/docs/translations/api-docs/drawer/drawer.json
+++ b/docs/translations/api-docs/drawer/drawer.json
@@ -80,10 +80,10 @@
     }
   },
   "slotDescriptions": {
-    "backdrop": "The component used for the backdrop.",
+    "backdrop": "The component used for the Modal backdrop.",
     "docked": "The component used for the docked. It&#39;s also a root slot when variant is <code>permanent</code> or <code>persistent</code>.",
     "paper": "The component used for the paper.",
-    "root": "The component used for the popper.",
+    "root": "The component used for the Modal root.",
     "transition": "The component used for the transition. <a href=\"https://mui.com/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/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index 2b8769d5170596..9094cf43f8f62d 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -21,17 +21,18 @@ export interface DrawerBackdropSlotPropsOverrides {}
 
 export interface DrawerSlots {
   /**
-   * The component used for the popper.
-   * @default Modal
+   * The component used for the Modal root.
+   * @default div
    */
   root: React.ElementType;
   /**
-   * The component used for the backdrop.
+   * The component used for the Modal backdrop.
    * @default Backdrop
    */
   backdrop: React.ElementType;
   /**
-   * The component used for the docked. It's also a root slot when variant is `permanent` or `persistent`.
+   * The component used for the docked.
+   * It's also a root slot when variant is `permanent` or `persistent`.
    * @default div
    */
   docked: React.ElementType;

From cb22da5d32f30f358fb8c1c234edf3708aeb2304 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 13:55:42 +0700
Subject: [PATCH 10/31] add codemod for jsx

---
 .../src/deprecations/all/deprecations-all.js  |  2 +
 .../deprecations/drawer-props/drawer-props.js | 79 +++++++++++++++++++
 .../drawer-props/drawer-props.test.js         | 16 ++++
 .../src/deprecations/drawer-props/index.js    |  1 +
 .../drawer-props/test-cases/actual.js         | 37 +++++++++
 .../drawer-props/test-cases/expected.js       | 63 +++++++++++++++
 6 files changed, 198 insertions(+)
 create mode 100644 packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js
 create mode 100644 packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js
 create mode 100644 packages/mui-codemod/src/deprecations/drawer-props/index.js
 create mode 100644 packages/mui-codemod/src/deprecations/drawer-props/test-cases/actual.js
 create mode 100644 packages/mui-codemod/src/deprecations/drawer-props/test-cases/expected.js

diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
index 08306a961d8891..af10e22a0796e7 100644
--- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js
+++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
@@ -30,6 +30,7 @@ import transformTabClasses from '../tab-classes';
 import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 import transformTooltipProps from '../tooltip-props';
 import transformTablePaginationProps from '../table-pagination-props';
+import transformDrawerProps from '../drawer-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -68,6 +69,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformToggleButtonGroupClasses(file, api, options);
   file.source = transformTooltipProps(file, api, options);
   file.source = transformTablePaginationProps(file, api, options);
+  file.source = transformDrawerProps(file, api, options);
 
   return file.source;
 }
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js
new file mode 100644
index 00000000000000..e4e67065e4cf0d
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js
@@ -0,0 +1,79 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'BackdropComponent',
+    slotName: 'backdrop',
+  });
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'BackdropComponent',
+    slotName: 'backdrop',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'BackdropProps',
+    slotName: 'backdrop',
+  });
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'BackdropProps',
+    slotName: 'backdrop',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'ModalProps',
+    slotName: 'root',
+  });
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'ModalProps',
+    slotName: 'root',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'PaperProps',
+    slotName: 'paper',
+  });
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'PaperProps',
+    slotName: 'paper',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'SlideProps',
+    slotName: 'transition',
+  });
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'SlideProps',
+    slotName: 'transition',
+  });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js
new file mode 100644
index 00000000000000..a3880ee54d158e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './tooltip-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'tooltip-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/index.js b/packages/mui-codemod/src/deprecations/drawer-props/index.js
new file mode 100644
index 00000000000000..d56efd1114b23c
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/drawer-props/index.js
@@ -0,0 +1 @@
+export { default } from './drawer-props';
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/actual.js
new file mode 100644
index 00000000000000..72d39f47294e7a
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/actual.js
@@ -0,0 +1,37 @@
+import Drawer from '@mui/material/Drawer';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@mui/material';
+
+<Drawer BackdropComponent={Backdrop} BackdropProps={{ transitionDuration: 300 }} />;
+<SwipeableDrawer BackdropComponent={Backdrop} BackdropProps={{ transitionDuration: 300 }} />;
+
+<Drawer ModalProps={{ disablePortal: true }} />;
+<SwipeableDrawer ModalProps={{ disablePortal: true }} />;
+
+<Drawer PaperProps={{ elevation: 20 }} />;
+<SwipeableDrawer PaperProps={{ elevation: 20 }} />;
+
+<Drawer SlideProps={{ direction: 'right' }} />;
+<SwipeableDrawer SlideProps={{ direction: 'right' }} />;
+
+<MyDrawer
+  BackdropComponent={Backdrop}
+  BackdropProps={{ transitionDuration: 300 }}
+  ModalProps={{ disablePortal: true }}
+  PaperProps={{ elevation: 20 }}
+  SlideProps={{ direction: 'right' }}
+/>;
+<MySwipeableDrawer
+  BackdropComponent={Backdrop}
+  BackdropProps={{ transitionDuration: 300 }}
+  ModalProps={{ disablePortal: true }}
+  PaperProps={{ elevation: 20 }}
+  SlideProps={{ direction: 'right' }}
+/>;
+
+<CustomDrawer
+  PopperComponent={CustomPopper}
+  TransitionComponent={CustomTransition}
+  PopperProps={{ disablePortal: true }}
+  TransitionProps={{ timeout: 200 }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/expected.js
new file mode 100644
index 00000000000000..35bfb72c5f8f6d
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/expected.js
@@ -0,0 +1,63 @@
+import Drawer from '@mui/material/Drawer';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@mui/material';
+
+<Drawer slots={{
+  backdrop: Backdrop
+}} slotProps={{
+  backdrop: { transitionDuration: 300 }
+}} />;
+<SwipeableDrawer slots={{
+  backdrop: Backdrop
+}} slotProps={{
+  backdrop: { transitionDuration: 300 }
+}} />;
+
+<Drawer slotProps={{
+  root: { disablePortal: true }
+}} />;
+<SwipeableDrawer slotProps={{
+  root: { disablePortal: true }
+}} />;
+
+<Drawer slotProps={{
+  paper: { elevation: 20 }
+}} />;
+<SwipeableDrawer slotProps={{
+  paper: { elevation: 20 }
+}} />;
+
+<Drawer slotProps={{
+  transition: { direction: 'right' }
+}} />;
+<SwipeableDrawer slotProps={{
+  transition: { direction: 'right' }
+}} />;
+
+<MyDrawer
+  slots={{
+    backdrop: Backdrop
+  }}
+  slotProps={{
+    backdrop: { transitionDuration: 300 },
+    root: { disablePortal: true },
+    paper: { elevation: 20 },
+    transition: { direction: 'right' }
+  }} />;
+<MySwipeableDrawer
+  slots={{
+    backdrop: Backdrop
+  }}
+  slotProps={{
+    backdrop: { transitionDuration: 300 },
+    root: { disablePortal: true },
+    paper: { elevation: 20 },
+    transition: { direction: 'right' }
+  }} />;
+
+<CustomDrawer
+  PopperComponent={CustomPopper}
+  TransitionComponent={CustomTransition}
+  PopperProps={{ disablePortal: true }}
+  TransitionProps={{ timeout: 200 }}
+/>;

From 42abe8a5d37fd636bbc03ee9ba952490c5a79865 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 14:51:31 +0700
Subject: [PATCH 11/31] add theme codemod

---
 .../drawer-props/drawer-props.test.js         |  4 +-
 .../drawer-props/test-cases/theme.actual.js   | 77 +++++++++++++++
 .../drawer-props/test-cases/theme.expected.js | 99 +++++++++++++++++++
 3 files changed, 178 insertions(+), 2 deletions(-)
 create mode 100644 packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.actual.js
 create mode 100644 packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.expected.js

diff --git a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js
index a3880ee54d158e..115755b40f1327 100644
--- a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js
+++ b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js
@@ -1,11 +1,11 @@
 import { describeJscodeshiftTransform } from '../../../testUtils';
-import transform from './tooltip-props';
+import transform from './drawer-props';
 
 describe('@mui/codemod', () => {
   describe('deprecations', () => {
     describeJscodeshiftTransform({
       transform,
-      transformName: 'tooltip-props',
+      transformName: 'drawer-props',
       dirname: __dirname,
       testCases: [
         { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..36edd8e12bd26a
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.actual.js
@@ -0,0 +1,77 @@
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      BackdropComponent: Backdrop,
+      BackdropProps: {
+        transitionDuration: 300,
+      },
+    },
+  },
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      BackdropComponent: Backdrop,
+      BackdropProps: {
+        transitionDuration: 300,
+      },
+    },
+  },
+});
+
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      ModalProps: {
+        disablePortal: true,
+      },
+    },
+  },
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      ModalProps: {
+        disablePortal: true,
+      },
+    },
+  },
+});
+
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      PaperProps: {
+        elevation: 20,
+      },
+    },
+  },
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      PaperProps: {
+        elevation: 20,
+      },
+    },
+  },
+});
+
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      SlideProps: {
+        direction: 'right',
+      },
+    },
+  },
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      SlideProps: {
+        direction: 'right',
+      },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..9711fdaf4f46ee
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.expected.js
@@ -0,0 +1,99 @@
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      slots: {
+        backdrop: Backdrop
+      },
+
+      slotProps: {
+        backdrop: {
+          transitionDuration: 300,
+        }
+      }
+    },
+  },
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      slots: {
+        backdrop: Backdrop
+      },
+
+      slotProps: {
+        backdrop: {
+          transitionDuration: 300,
+        }
+      }
+    },
+  },
+});
+
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      slotProps: {
+        root: {
+          disablePortal: true,
+        }
+      },
+    },
+  },
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      slotProps: {
+        root: {
+          disablePortal: true,
+        }
+      },
+    },
+  },
+});
+
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      slotProps: {
+        paper: {
+          elevation: 20,
+        }
+      },
+    },
+  },
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      slotProps: {
+        paper: {
+          elevation: 20,
+        }
+      },
+    },
+  },
+});
+
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      slotProps: {
+        transition: {
+          direction: 'right',
+        }
+      },
+    },
+  },
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      slotProps: {
+        transition: {
+          direction: 'right',
+        }
+      },
+    },
+  },
+});

From 440a457855688ea6d4b81d2677ebe9c69e135723 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 14:57:44 +0700
Subject: [PATCH 12/31] replace deprecated props with slotProps

---
 .../material-ui/api/swipeable-drawer.json     | 14 ++++
 .../swipeable-drawer/swipeable-drawer.json    |  2 +
 .../src/SwipeableDrawer/SwipeableDrawer.js    | 76 ++++++++++++++-----
 3 files changed, 71 insertions(+), 21 deletions(-)

diff --git a/docs/pages/material-ui/api/swipeable-drawer.json b/docs/pages/material-ui/api/swipeable-drawer.json
index 482528710c4021..7f0fbf91563ee4 100644
--- a/docs/pages/material-ui/api/swipeable-drawer.json
+++ b/docs/pages/material-ui/api/swipeable-drawer.json
@@ -30,6 +30,20 @@
     "hysteresis": { "type": { "name": "number" }, "default": "0.52" },
     "minFlingVelocity": { "type": { "name": "number" }, "default": "450" },
     "open": { "type": { "name": "bool" }, "default": "false" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, docked?: 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, docked?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
+      "default": "{}"
+    },
     "SwipeAreaProps": { "type": { "name": "object" } },
     "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" },
     "transitionDuration": {
diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json
index 475d1a03b207eb..a0b54bb8ac4f1f 100644
--- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json
+++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json
@@ -29,6 +29,8 @@
       "typeDescriptions": { "event": "The event source of the callback." }
     },
     "open": { "description": "If <code>true</code>, the component is shown." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "SwipeAreaProps": {
       "description": "The element is used to intercept the touch events on the edge."
     },
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index 3018c625677c7e..9a6640c3aa5762 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -13,6 +13,7 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
 import { useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTransitionProps } from '../transitions/utils';
+import { mergeSlotProps } from '../utils';
 import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
@@ -159,6 +160,8 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
     swipeAreaWidth = 20,
     transitionDuration = transitionDurationDefault,
     variant = 'temporary', // Mobile first.
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -589,31 +592,40 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
       <Drawer
         open={variant === 'temporary' && maybeSwiping ? true : open}
         variant={variant}
-        ModalProps={{
-          BackdropProps: {
-            ...BackdropProps,
-            ref: backdropRef,
-          },
-          // Ensures that paperRef.current will be defined inside the touch start event handler
-          // See https://github.com/mui/material-ui/issues/30414 for more information
-          ...(variant === 'temporary' && {
-            keepMounted: true,
-          }),
-          ...ModalPropsProp,
-        }}
         hideBackdrop={hideBackdrop}
-        PaperProps={{
-          ...PaperProps,
-          style: {
-            pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '',
-            ...PaperProps.style,
-          },
-          ref: handleRef,
-        }}
         anchor={anchor}
-        transitionDuration={calculatedDurationRef.current || transitionDuration}
         onClose={onClose}
         ref={ref}
+        slots={slots}
+        slotProps={{
+          ...slotProps,
+          root: mergeSlotProps(slotProps.root, {
+            // Ensures that paperRef.current will be defined inside the touch start event handler
+            // See https://github.com/mui/material-ui/issues/30414 for more information
+            ...(variant === 'temporary' && {
+              keepMounted: true,
+            }),
+            ...ModalPropsProp,
+          }),
+          backdrop: mergeSlotProps(slotProps.backdrop, {
+            BackdropProps: {
+              ...BackdropProps,
+              ref: backdropRef,
+            },
+          }),
+          paper: mergeSlotProps(slotProps.paper, {
+            ...PaperProps,
+            style: {
+              pointerEvents:
+                variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '',
+              ...PaperProps.style,
+            },
+            ref: handleRef,
+          }),
+          transition: mergeSlotProps(slotProps.transition, {
+            transitionDuration: calculatedDurationRef.current || transitionDuration,
+          }),
+        }}
         {...other}
       />
       {!disableSwipeToOpen && variant === 'temporary' && (
@@ -723,6 +735,28 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
     component: elementTypeAcceptingRef,
     style: PropTypes.object,
   }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    docked: 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]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    docked: PropTypes.elementType,
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType,
+  }),
   /**
    * The element is used to intercept the touch events on the edge.
    */

From f56cf29f4ace6570043aac1aa5a04724657a5258 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 14:59:31 +0700
Subject: [PATCH 13/31] run codemod

---
 docs/data/material/components/drawers/ResponsiveDrawer.js | 8 +++++---
 .../data/material/components/drawers/ResponsiveDrawer.tsx | 8 +++++---
 .../material/components/drawers/SwipeableEdgeDrawer.js    | 6 ++++--
 .../material/components/drawers/SwipeableEdgeDrawer.tsx   | 6 ++++--
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
index 19a30e76db165d..94a20757fba1db 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.js
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.js
@@ -111,13 +111,15 @@ function ResponsiveDrawer(props) {
           open={mobileOpen}
           onTransitionEnd={handleDrawerTransitionEnd}
           onClose={handleDrawerClose}
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-          }}
           sx={{
             display: { xs: 'block', sm: 'none' },
             '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
           }}
+          slotProps={{
+            root: {
+              keepMounted: true, // Better open performance on mobile.
+            },
+          }}
         >
           {drawer}
         </Drawer>
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
index 5daa81e4cba73b..abd4df47889566 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
@@ -118,13 +118,15 @@ export default function ResponsiveDrawer(props: Props) {
           open={mobileOpen}
           onTransitionEnd={handleDrawerTransitionEnd}
           onClose={handleDrawerClose}
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-          }}
           sx={{
             display: { xs: 'block', sm: 'none' },
             '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
           }}
+          slotProps={{
+            root: {
+              keepMounted: true, // Better open performance on mobile.
+            },
+          }}
         >
           {drawer}
         </Drawer>
diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
index 9e2e08b8444d4f..c23f7ddc3fa8c9 100644
--- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
+++ b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
@@ -73,8 +73,10 @@ function SwipeableEdgeDrawer(props) {
         onOpen={toggleDrawer(true)}
         swipeAreaWidth={drawerBleeding}
         disableSwipeToOpen={false}
-        ModalProps={{
-          keepMounted: true,
+        slotProps={{
+          root: {
+            keepMounted: true,
+          },
         }}
       >
         <StyledBox
diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx b/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
index 98fe0e04805b5f..fffd63767e9c14 100644
--- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
+++ b/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
@@ -80,8 +80,10 @@ export default function SwipeableEdgeDrawer(props: Props) {
         onOpen={toggleDrawer(true)}
         swipeAreaWidth={drawerBleeding}
         disableSwipeToOpen={false}
-        ModalProps={{
-          keepMounted: true,
+        slotProps={{
+          root: {
+            keepMounted: true,
+          },
         }}
       >
         <StyledBox

From 1e8626e48e09901a980f968f0c4174b40a3e8d19 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 8 Jan 2025 13:46:54 +0700
Subject: [PATCH 14/31] add slots test to Drawer

---
 .../test-utils/src/describeConformance.tsx       |  2 +-
 packages/mui-material/src/Drawer/Drawer.js       |  5 -----
 packages/mui-material/src/Drawer/Drawer.test.js  | 16 ++++++++++++++++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx
index 2cd9d11010c56b..12949a354a751c 100644
--- a/packages-internal/test-utils/src/describeConformance.tsx
+++ b/packages-internal/test-utils/src/describeConformance.tsx
@@ -638,7 +638,7 @@ function testSlotPropsCallbackWithPropsAsOwnerState(
       const { queryByTestId } = await render(
         React.cloneElement(element, { slotProps, className: 'custom' }),
       );
-      const slotComponent = queryByTestId('custom');
+      const slotComponent = queryByTestId('custom', { exact: false });
       expect(slotComponent).not.to.equal(null);
     });
   });
diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index aacee0e5d72bca..6b4f45d3bc7bf6 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -303,11 +303,6 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   // pass `slots` and `slotProps` to `DrawerRoot` directly
   return (
     <DrawerRoot
-      BackdropProps={{
-        ...BackdropProps,
-        ...BackdropPropsProp,
-        transitionDuration,
-      }}
       className={clsx(classes.root, classes.modal, className)}
       open={open}
       ownerState={ownerState}
diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index 2eee979d62a4d2..07c3dc7ba25488 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -10,6 +10,12 @@ import describeConformance from '../../test/describeConformance';
 describe('<Drawer />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
 
+  const CustomPaper = React.forwardRef(({ className, children, ownerState, ...props }, ref) => (
+    <i className={className} ref={ref} {...props} data-testid="custom">
+      {children}
+    </i>
+  ));
+
   describeConformance(
     <Drawer open disablePortal>
       <div />
@@ -22,6 +28,16 @@ describe('<Drawer />', () => {
       testVariantProps: { variant: 'persistent' },
       testDeepOverrides: { slotName: 'paper', slotClassName: classes.paper },
       refInstanceof: window.HTMLDivElement,
+      slots: {
+        root: {
+          expectedClassName: classes.root,
+          testWithComponent: null,
+        },
+        paper: {
+          expectedClassName: classes.paper,
+          testWithComponent: CustomPaper,
+        },
+      },
       skip: ['componentProp', 'componentsProp', 'themeVariants'],
     }),
   );

From 5157e847c74f5ffc9a719fbd3cfabfebdd886c06 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Jan 2025 16:30:34 +0700
Subject: [PATCH 15/31] revert ModalProps deprecation

---
 .../components/drawers/SwipeableEdgeDrawer.js |   6 +-
 .../drawers/SwipeableEdgeDrawer.tsx           |   6 +-
 docs/pages/material-ui/api/drawer.json        |  11 +-
 .../material-ui/api/swipeable-drawer.json     |  14 ++-
 .../deprecations/drawer-props/drawer-props.js |  13 ---
 .../drawer-props/test-cases/actual.js         |   5 -
 .../drawer-props/test-cases/expected.js       |   9 --
 .../drawer-props/test-cases/theme.actual.js   |  19 ---
 .../drawer-props/test-cases/theme.expected.js |  23 ----
 packages/mui-material/src/Drawer/Drawer.d.ts  |   2 -
 packages/mui-material/src/Drawer/Drawer.js    |   8 +-
 .../src/SwipeableDrawer/SwipeableDrawer.d.ts  |  24 +++-
 .../src/SwipeableDrawer/SwipeableDrawer.js    |  64 ++++++-----
 .../SwipeableDrawer/SwipeableDrawer.test.js   | 108 ++++++++++++------
 14 files changed, 150 insertions(+), 162 deletions(-)

diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
index c23f7ddc3fa8c9..f13650901db2b8 100644
--- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
+++ b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
@@ -73,11 +73,7 @@ function SwipeableEdgeDrawer(props) {
         onOpen={toggleDrawer(true)}
         swipeAreaWidth={drawerBleeding}
         disableSwipeToOpen={false}
-        slotProps={{
-          root: {
-            keepMounted: true,
-          },
-        }}
+        keepMounted
       >
         <StyledBox
           sx={{
diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx b/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
index fffd63767e9c14..c6c6b7d84513fa 100644
--- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
+++ b/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
@@ -80,11 +80,7 @@ export default function SwipeableEdgeDrawer(props: Props) {
         onOpen={toggleDrawer(true)}
         swipeAreaWidth={drawerBleeding}
         disableSwipeToOpen={false}
-        slotProps={{
-          root: {
-            keepMounted: true,
-          },
-        }}
+        keepMounted
       >
         <StyledBox
           sx={{
diff --git a/docs/pages/material-ui/api/drawer.json b/docs/pages/material-ui/api/drawer.json
index 416b0e8c578036..f89590cac98c1d 100644
--- a/docs/pages/material-ui/api/drawer.json
+++ b/docs/pages/material-ui/api/drawer.json
@@ -11,12 +11,7 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "elevation": { "type": { "name": "custom", "description": "integer" }, "default": "16" },
     "hideBackdrop": { "type": { "name": "bool" }, "default": "false" },
-    "ModalProps": {
-      "type": { "name": "object" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "use the <code>slotProps.root</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
+    "ModalProps": { "type": { "name": "object" }, "default": "{}" },
     "onClose": {
       "type": { "name": "func" },
       "signature": {
@@ -62,9 +57,7 @@
         "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}",
-      "deprecated": true,
-      "deprecationInfo": "use the <code>slotProps.transition.transitionDuration</code> instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+      "default": "{\n  enter: theme.transitions.duration.enteringScreen,\n  exit: theme.transitions.duration.leavingScreen,\n}"
     },
     "variant": {
       "type": {
diff --git a/docs/pages/material-ui/api/swipeable-drawer.json b/docs/pages/material-ui/api/swipeable-drawer.json
index 7f0fbf91563ee4..a5c0bc93336b20 100644
--- a/docs/pages/material-ui/api/swipeable-drawer.json
+++ b/docs/pages/material-ui/api/swipeable-drawer.json
@@ -33,27 +33,29 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ backdrop?: func<br>&#124;&nbsp;object, docked?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, docked?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, swipeArea?: object, transition?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ backdrop?: elementType, docked?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+        "description": "{ backdrop?: elementType, docked?: elementType, paper?: elementType, root?: elementType, swipeArea?: elementType, transition?: elementType }"
       },
       "default": "{}"
     },
-    "SwipeAreaProps": { "type": { "name": "object" } },
+    "SwipeAreaProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.swipeArea</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" },
     "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}",
-      "deprecated": true,
-      "deprecationInfo": "use the <code>slotProps.transition.transitionDuration</code> instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+      "default": "{\n  enter: theme.transitions.duration.enteringScreen,\n  exit: theme.transitions.duration.leavingScreen,\n}"
     }
   },
   "name": "SwipeableDrawer",
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js
index e4e67065e4cf0d..e9e554a696745d 100644
--- a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js
+++ b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js
@@ -36,19 +36,6 @@ export default function transformer(file, api, options) {
     slotName: 'backdrop',
   });
 
-  movePropIntoSlotProps(j, {
-    root,
-    componentName: 'Drawer',
-    propName: 'ModalProps',
-    slotName: 'root',
-  });
-  movePropIntoSlotProps(j, {
-    root,
-    componentName: 'SwipeableDrawer',
-    propName: 'ModalProps',
-    slotName: 'root',
-  });
-
   movePropIntoSlotProps(j, {
     root,
     componentName: 'Drawer',
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/actual.js
index 72d39f47294e7a..7c4cabf8988b82 100644
--- a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/actual.js
+++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/actual.js
@@ -5,9 +5,6 @@ import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@mui/m
 <Drawer BackdropComponent={Backdrop} BackdropProps={{ transitionDuration: 300 }} />;
 <SwipeableDrawer BackdropComponent={Backdrop} BackdropProps={{ transitionDuration: 300 }} />;
 
-<Drawer ModalProps={{ disablePortal: true }} />;
-<SwipeableDrawer ModalProps={{ disablePortal: true }} />;
-
 <Drawer PaperProps={{ elevation: 20 }} />;
 <SwipeableDrawer PaperProps={{ elevation: 20 }} />;
 
@@ -17,14 +14,12 @@ import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@mui/m
 <MyDrawer
   BackdropComponent={Backdrop}
   BackdropProps={{ transitionDuration: 300 }}
-  ModalProps={{ disablePortal: true }}
   PaperProps={{ elevation: 20 }}
   SlideProps={{ direction: 'right' }}
 />;
 <MySwipeableDrawer
   BackdropComponent={Backdrop}
   BackdropProps={{ transitionDuration: 300 }}
-  ModalProps={{ disablePortal: true }}
   PaperProps={{ elevation: 20 }}
   SlideProps={{ direction: 'right' }}
 />;
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/expected.js
index 35bfb72c5f8f6d..30d78eb29dfd30 100644
--- a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/expected.js
+++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/expected.js
@@ -13,13 +13,6 @@ import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@mui/m
   backdrop: { transitionDuration: 300 }
 }} />;
 
-<Drawer slotProps={{
-  root: { disablePortal: true }
-}} />;
-<SwipeableDrawer slotProps={{
-  root: { disablePortal: true }
-}} />;
-
 <Drawer slotProps={{
   paper: { elevation: 20 }
 }} />;
@@ -40,7 +33,6 @@ import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@mui/m
   }}
   slotProps={{
     backdrop: { transitionDuration: 300 },
-    root: { disablePortal: true },
     paper: { elevation: 20 },
     transition: { direction: 'right' }
   }} />;
@@ -50,7 +42,6 @@ import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@mui/m
   }}
   slotProps={{
     backdrop: { transitionDuration: 300 },
-    root: { disablePortal: true },
     paper: { elevation: 20 },
     transition: { direction: 'right' }
   }} />;
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.actual.js
index 36edd8e12bd26a..6c934eb22d3fdf 100644
--- a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.actual.js
+++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.actual.js
@@ -19,25 +19,6 @@ fn({
   },
 });
 
-fn({
-  MuiDrawer: {
-    defaultProps: {
-      ModalProps: {
-        disablePortal: true,
-      },
-    },
-  },
-});
-fn({
-  MuiSwipeableDrawer: {
-    defaultProps: {
-      ModalProps: {
-        disablePortal: true,
-      },
-    },
-  },
-});
-
 fn({
   MuiDrawer: {
     defaultProps: {
diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.expected.js
index 9711fdaf4f46ee..293e56029b2130 100644
--- a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.expected.js
+++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/theme.expected.js
@@ -29,29 +29,6 @@ fn({
   },
 });
 
-fn({
-  MuiDrawer: {
-    defaultProps: {
-      slotProps: {
-        root: {
-          disablePortal: true,
-        }
-      },
-    },
-  },
-});
-fn({
-  MuiSwipeableDrawer: {
-    defaultProps: {
-      slotProps: {
-        root: {
-          disablePortal: true,
-        }
-      },
-    },
-  },
-});
-
 fn({
   MuiDrawer: {
     defaultProps: {
diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index 9094cf43f8f62d..9cd686a483a6ff 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -119,7 +119,6 @@ export interface DrawerProps
   elevation?: number;
   /**
    * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
-   * @deprecated use the `slotProps.root` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   ModalProps?: Partial<ModalProps>;
@@ -154,7 +153,6 @@ export interface DrawerProps
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @deprecated use the `slotProps.transition.transitionDuration` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {
    *   enter: theme.transitions.duration.enteringScreen,
    *   exit: theme.transitions.duration.leavingScreen,
diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index 6b4f45d3bc7bf6..8f057f17ca2915 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -241,16 +241,16 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
 
   const externalForwardedProps = {
     slots: {
+      transition: TransitionComponent,
       ...slots,
-      transition: slots.transition || TransitionComponent,
     },
     slotProps: {
+      paper: PaperProps,
+      transition: SlideProps,
       ...slotProps,
       backdrop: mergeSlotProps(slotProps.backdrop || { ...BackdropProps, ...BackdropPropsProp }, {
         transitionDuration,
       }),
-      paper: slotProps.paper || PaperProps,
-      transition: slotProps.transition || SlideProps,
     },
   };
 
@@ -357,7 +357,6 @@ Drawer.propTypes /* remove-proptypes */ = {
   hideBackdrop: PropTypes.bool,
   /**
    * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
-   * @deprecated use the `slotProps.root` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   ModalProps: PropTypes.object,
@@ -418,7 +417,6 @@ Drawer.propTypes /* remove-proptypes */ = {
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @deprecated use the `slotProps.transition.transitionDuration` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {
    *   enter: theme.transitions.duration.enteringScreen,
    *   exit: theme.transitions.duration.leavingScreen,
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts
index e4ddbbbf5cf6e4..8bc66d50000a81 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts
@@ -1,7 +1,26 @@
 import * as React from 'react';
-import { DrawerProps } from '../Drawer';
+import { DrawerProps, DrawerSlotsAndSlotProps } from '../Drawer';
 
-export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {
+type SwipeableDrawerSlotsAndSlotProps = DrawerSlotsAndSlotProps & {
+  slots?: {
+    /**
+     * The component used for the swipeArea slot.
+     * @default div
+     */
+    swipeArea?: React.ElementType;
+  };
+  slotProps?: {
+    /**
+     * Props forwarded to the swipeArea slot.
+     * By default, the avaible props are based on a div.
+     */
+    swipeArea?: React.HTMLProps<HTMLDivElement>;
+  };
+};
+
+export interface SwipeableDrawerProps
+  extends Omit<DrawerProps, 'onClose' | 'open' | 'slots' | 'slotProps'>,
+    SwipeableDrawerSlotsAndSlotProps {
   /**
    * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
    * This can be useful in scenarios where the drawer is partially visible.
@@ -67,6 +86,7 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
   open?: boolean;
   /**
    * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SwipeAreaProps?: object;
   /**
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index 9a6640c3aa5762..c1f9e08e21beb5 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -14,6 +14,7 @@ import { useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTransitionProps } from '../transitions/utils';
 import { mergeSlotProps } from '../utils';
+import useSlot from '../utils/useSlot';
 import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
@@ -587,55 +588,64 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
     }
   }, [open]);
 
+  const [SwipeAreaSlot, swipeAreaSlotProps] = useSlot('swipeArea', {
+    ref: swipeAreaRef,
+    elementType: SwipeArea,
+    ownerState: props,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        swipeArea: SwipeAreaProps,
+        ...slotProps,
+      },
+    },
+    additionalProps: {
+      width: swipeAreaWidth,
+      anchor,
+    },
+  });
+
   return (
     <React.Fragment>
       <Drawer
         open={variant === 'temporary' && maybeSwiping ? true : open}
         variant={variant}
+        ModalProps={{
+          BackdropProps: {
+            ...BackdropProps,
+            ref: backdropRef,
+          },
+          // Ensures that paperRef.current will be defined inside the touch start event handler
+          // See https://github.com/mui/material-ui/issues/30414 for more information
+          ...(variant === 'temporary' && {
+            keepMounted: true,
+          }),
+          ...ModalPropsProp,
+        }}
         hideBackdrop={hideBackdrop}
         anchor={anchor}
+        transitionDuration={calculatedDurationRef.current || transitionDuration}
         onClose={onClose}
         ref={ref}
         slots={slots}
         slotProps={{
           ...slotProps,
-          root: mergeSlotProps(slotProps.root, {
-            // Ensures that paperRef.current will be defined inside the touch start event handler
-            // See https://github.com/mui/material-ui/issues/30414 for more information
-            ...(variant === 'temporary' && {
-              keepMounted: true,
-            }),
-            ...ModalPropsProp,
+          backdrop: mergeSlotProps(slotProps.backdrop ?? BackdropProps, {
+            ref: backdropRef,
           }),
-          backdrop: mergeSlotProps(slotProps.backdrop, {
-            BackdropProps: {
-              ...BackdropProps,
-              ref: backdropRef,
-            },
-          }),
-          paper: mergeSlotProps(slotProps.paper, {
-            ...PaperProps,
+          paper: mergeSlotProps(slotProps.paper ?? PaperProps, {
             style: {
               pointerEvents:
                 variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '',
-              ...PaperProps.style,
             },
             ref: handleRef,
           }),
-          transition: mergeSlotProps(slotProps.transition, {
-            transitionDuration: calculatedDurationRef.current || transitionDuration,
-          }),
         }}
         {...other}
       />
       {!disableSwipeToOpen && variant === 'temporary' && (
         <NoSsr>
-          <SwipeArea
-            anchor={anchor}
-            ref={swipeAreaRef}
-            width={swipeAreaWidth}
-            {...SwipeAreaProps}
-          />
+          <SwipeAreaSlot {...swipeAreaSlotProps} />
         </NoSsr>
       )}
     </React.Fragment>
@@ -744,6 +754,7 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
     docked: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    swipeArea: PropTypes.object,
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
@@ -755,10 +766,12 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
     docked: PropTypes.elementType,
     paper: PropTypes.elementType,
     root: PropTypes.elementType,
+    swipeArea: PropTypes.elementType,
     transition: PropTypes.elementType,
   }),
   /**
    * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SwipeAreaProps: PropTypes.object,
   /**
@@ -770,7 +783,6 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @deprecated use the `slotProps.transition.transitionDuration` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {
    *   enter: theme.transitions.duration.enteringScreen,
    *   exit: theme.transitions.duration.leavingScreen,
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index f3b0cd3fd57e65..21d49bb9bc010a 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -87,7 +87,9 @@ describe('<SwipeableDrawer />', () => {
         onOpen={() => {}}
         onClose={() => {}}
         open
-        PaperProps={{ 'data-test': 'foo' }}
+        slotProps={{
+          paper: { 'data-test': 'foo' },
+        }}
       />,
     );
 
@@ -176,7 +178,9 @@ describe('<SwipeableDrawer />', () => {
               onOpen={handleOpen}
               onClose={handleClose}
               open={false}
-              PaperProps={{ component: FakePaper }}
+              slotProps={{
+                paper: { component: FakePaper },
+              }}
             >
               <div data-testid="drawer">SwipeableDrawer</div>
             </SwipeableDrawer>,
@@ -234,8 +238,10 @@ describe('<SwipeableDrawer />', () => {
               onOpen={handleOpen}
               onClose={handleClose}
               open={false}
-              PaperProps={{ component: FakePaper }}
               transitionDuration={0}
+              slotProps={{
+                paper: { component: FakePaper },
+              }}
             >
               <div data-testid="drawer">SwipeableDrawer</div>
             </SwipeableDrawer>,
@@ -304,7 +310,9 @@ describe('<SwipeableDrawer />', () => {
               onOpen={handleOpen}
               onClose={() => {}}
               open={false}
-              PaperProps={{ component: FakePaper }}
+              slotProps={{
+                paper: { component: FakePaper },
+              }}
             >
               <div>SwipeableDrawer</div>
             </SwipeableDrawer>,
@@ -335,7 +343,9 @@ describe('<SwipeableDrawer />', () => {
               onOpen={() => {}}
               onClose={handleClose}
               open
-              PaperProps={{ component: FakePaper }}
+              slotProps={{
+                paper: { component: FakePaper },
+              }}
             >
               <div data-testid="drawer">SwipeableDrawer</div>
             </SwipeableDrawer>,
@@ -366,7 +376,9 @@ describe('<SwipeableDrawer />', () => {
               onOpen={handleOpen}
               onClose={handleClose}
               open={false}
-              PaperProps={{ component: FakePaper }}
+              slotProps={{
+                paper: { component: FakePaper },
+              }}
             >
               <div data-testid="drawer">SwipeableDrawer</div>
             </SwipeableDrawer>,
@@ -398,7 +410,9 @@ describe('<SwipeableDrawer />', () => {
               onOpen={handleOpen}
               onClose={handleClose}
               open={false}
-              PaperProps={{ component: FakePaper }}
+              slotProps={{
+                paper: { component: FakePaper },
+              }}
             >
               <div>SwipeableDrawer</div>
             </SwipeableDrawer>,
@@ -427,7 +441,9 @@ describe('<SwipeableDrawer />', () => {
           onOpen={() => {}}
           onClose={handleClose}
           open
-          PaperProps={{ component: FakePaper }}
+          slotProps={{
+            paper: { component: FakePaper },
+          }}
         >
           <div data-testid="drawer">SwipeableDrawer</div>
         </SwipeableDrawer>,
@@ -455,7 +471,9 @@ describe('<SwipeableDrawer />', () => {
           onOpen={() => {}}
           onClose={() => {}}
           open={false}
-          PaperProps={{ component: FakePaper }}
+          slotProps={{
+            paper: { component: FakePaper },
+          }}
         >
           <div>SwipeableDrawer</div>
         </SwipeableDrawer>,
@@ -482,7 +500,9 @@ describe('<SwipeableDrawer />', () => {
           onOpen={() => {}}
           onClose={() => {}}
           open={false}
-          PaperProps={{ component: FakePaper }}
+          slotProps={{
+            paper: { component: FakePaper },
+          }}
         >
           <div>SwipeableDrawer</div>
         </SwipeableDrawer>,
@@ -515,19 +535,21 @@ describe('<SwipeableDrawer />', () => {
             onClose={() => {}}
             open={false}
             swipeAreaWidth={20}
-            SwipeAreaProps={{
-              style: {
-                // ensure clicks will not be grabbed by swipe area to ensure testing just this functionality
-                pointerEvents: 'none',
-              },
-            }}
-            PaperProps={{ component: FakePaper }}
             ModalProps={{
               keepMounted: true,
               sx: {
                 transform: `translateY(${handleHeight}px) !important`,
               },
             }}
+            slotProps={{
+              paper: { component: FakePaper },
+              swipeArea: {
+                style: {
+                  // ensure clicks will not be grabbed by swipe area to ensure testing just this functionality
+                  pointerEvents: 'none',
+                },
+              },
+            }}
           >
             <div data-testid="drawer" style={{ position: 'relative', pointerEvents: 'all' }}>
               <div
@@ -586,13 +608,6 @@ describe('<SwipeableDrawer />', () => {
             onClose={() => {}}
             open={false}
             swipeAreaWidth={20}
-            SwipeAreaProps={{
-              style: {
-                // ensure clicks will not be grabbed by swipe area to ensure testing just this functionality
-                pointerEvents: 'none',
-              },
-            }}
-            PaperProps={{ component: FakePaper }}
             ModalProps={{
               keepMounted: true,
               sx: {
@@ -601,6 +616,16 @@ describe('<SwipeableDrawer />', () => {
                 },
               },
             }}
+            slotProps={{
+              root: {},
+              paper: { component: FakePaper },
+              swipeArea: {
+                style: {
+                  // ensure clicks will not be grabbed by swipe area to ensure testing just this functionality
+                  pointerEvents: 'none',
+                },
+              },
+            }}
           >
             <div
               className="ignore"
@@ -673,7 +698,14 @@ describe('<SwipeableDrawer />', () => {
   it('should be able to attach paper ref passed through PaperProps', () => {
     const ref = React.createRef();
     render(
-      <SwipeableDrawer onOpen={() => {}} onClose={() => {}} PaperProps={{ ref }} open>
+      <SwipeableDrawer
+        onOpen={() => {}}
+        onClose={() => {}}
+        open
+        slotProps={{
+          paper: { ref },
+        }}
+      >
         <div />
       </SwipeableDrawer>,
     );
@@ -689,7 +721,9 @@ describe('<SwipeableDrawer />', () => {
           onOpen={handleOpen}
           onClose={() => {}}
           open={false}
-          PaperProps={{ component: FakePaper }}
+          slotProps={{
+            paper: { component: FakePaper },
+          }}
         >
           <div>SwipeableDrawer</div>
         </SwipeableDrawer>,
@@ -718,7 +752,9 @@ describe('<SwipeableDrawer />', () => {
           onOpen={() => {}}
           onClose={handleClose}
           open
-          PaperProps={{ component: FakePaper, 'data-testid': 'paper' }}
+          slotProps={{
+            paper: { component: FakePaper, 'data-testid': 'paper' },
+          }}
         >
           <div>SwipeableDrawer</div>
         </SwipeableDrawer>,
@@ -750,8 +786,10 @@ describe('<SwipeableDrawer />', () => {
             onOpen={handleOpen}
             onClose={() => {}}
             open={false}
-            PaperProps={{ component: FakePaper }}
-            SwipeAreaProps={{ 'data-testid': 'swipearea' }}
+            slotProps={{
+              paper: { component: FakePaper },
+              swipeArea: { 'data-testid': 'swipearea' },
+            }}
           >
             <div>Drawer1</div>
           </SwipeableDrawer>
@@ -759,8 +797,10 @@ describe('<SwipeableDrawer />', () => {
             onOpen={handleOpen}
             onClose={() => {}}
             open={false}
-            PaperProps={{ component: FakePaper }}
-            SwipeAreaProps={{ 'data-testid': 'swipearea' }}
+            slotProps={{
+              paper: { component: FakePaper },
+              swipeArea: { 'data-testid': 'swipearea' },
+            }}
           >
             <div>Drawer2</div>
           </SwipeableDrawer>
@@ -794,8 +834,10 @@ describe('<SwipeableDrawer />', () => {
         onOpen={() => {}}
         onClose={() => {}}
         open={false}
-        PaperProps={{ component: NullPaper }}
-        SwipeAreaProps={{ 'data-testid': 'swipearea' }}
+        slotProps={{
+          paper: { component: NullPaper },
+          swipeArea: { 'data-testid': 'swipearea' },
+        }}
       >
         <div>SwipeableDrawer</div>
       </SwipeableDrawer>,

From b8f1916c235eade9ad63229f4b80e44673273c35 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Jan 2025 16:34:45 +0700
Subject: [PATCH 16/31] update migration doc

---
 .../migrating-from-deprecated-apis.md         | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 24c27c33051d02..31cf4b71dedbbb 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1104,6 +1104,47 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an
  />
 ```
 
+## Drawer
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/drawer-props <path>
+```
+
+### BackdropProps
+
+The Drawer's `BackdropProps` prop was deprecated in favor of `slotProps.backdrop`:
+
+```diff
+ <Drawer
+-  BackdropProps={backdropProps}
++  slotProps={{ backdrop: backdropProps }}
+ />
+```
+
+### PaperProps
+
+The Drawer's `PaperProps` prop was deprecated in favor of `slotProps.paper`:
+
+```diff
+ <Drawer
+-  PaperProps={paperProps}
++  slotProps={{ paper: paperProps }}
+ />
+```
+
+### SlideProps
+
+The Drawer's `SlideProps` prop was deprecated in favor of `slotProps.transition`:
+
+```diff
+ <Drawer
+-  SlideProps={slideProps}
++  slotProps={{ transition: slideProps }}
+ />
+```
+
 ## FilledInput
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#filled-input-props) below to migrate the code as described in the following sections:
@@ -1604,6 +1645,47 @@ The Slider's `componentsProps` prop was deprecated in favor of `slotProps`:
  />
 ```
 
+## SwipeableDrawer
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/drawer-props <path>
+```
+
+### BackdropProps
+
+The SwipeableDrawer's `BackdropProps` prop was deprecated in favor of `slotProps.backdrop`:
+
+```diff
+ <SwipeableDrawer
+-  BackdropProps={backdropProps}
++  slotProps={{ backdrop: backdropProps }}
+ />
+```
+
+### PaperProps
+
+The SwipeableDrawer's `PaperProps` prop was deprecated in favor of `slotProps.paper`:
+
+```diff
+ <SwipeableDrawer
+-  PaperProps={paperProps}
++  slotProps={{ paper: paperProps }}
+ />
+```
+
+### SlideProps
+
+The SwipeableDrawer's `SlideProps` prop was deprecated in favor of `slotProps.transition`:
+
+```diff
+ <SwipeableDrawer
+-  SlideProps={slideProps}
++  slotProps={{ transition: slideProps }}
+ />
+```
+
 ## ToggleButtonGroup
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#toggle-button-group-classes) below to migrate the code as described in the following sections:

From 401d7eac6ff3513baa2b9f72ace1527d76aa083b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Jan 2025 16:59:16 +0700
Subject: [PATCH 17/31] skip testWithElement

---
 packages/mui-material/src/Drawer/Drawer.test.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index 07c3dc7ba25488..5960d9b9e6699e 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -10,11 +10,13 @@ import describeConformance from '../../test/describeConformance';
 describe('<Drawer />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
 
-  const CustomPaper = React.forwardRef(({ className, children, ownerState, ...props }, ref) => (
-    <i className={className} ref={ref} {...props} data-testid="custom">
-      {children}
-    </i>
-  ));
+  const CustomPaper = React.forwardRef(
+    ({ className, children, ownerState, square, ...props }, ref) => (
+      <i className={className} ref={ref} {...props} data-testid="custom">
+        {children}
+      </i>
+    ),
+  );
 
   describeConformance(
     <Drawer open disablePortal>
@@ -36,6 +38,7 @@ describe('<Drawer />', () => {
         paper: {
           expectedClassName: classes.paper,
           testWithComponent: CustomPaper,
+          testWithElement: null, // already tested with CustomPaper
         },
       },
       skip: ['componentProp', 'componentsProp', 'themeVariants'],

From 3ca7ddf7f7f328818d7ac70186d0334608fd2839 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Jan 2025 17:14:56 +0700
Subject: [PATCH 18/31] fix test

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

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index 21d49bb9bc010a..7b22374736d9ed 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -11,7 +11,7 @@ import useForkRef from '../utils/useForkRef';
 import describeConformance from '../../test/describeConformance';
 
 const FakePaper = React.forwardRef(function FakeWidthPaper(props, ref) {
-  const { style, ...other } = props;
+  const { style, square, ...other } = props;
   const paperRef = React.useRef(null);
   const handleRef = useForkRef(ref, paperRef);
 

From c43b590918da85e1024bc7f52234f1c232051650 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Jan 2025 17:30:32 +0700
Subject: [PATCH 19/31] fix paper passing component

---
 packages/mui-material/src/Drawer/Drawer.js             | 10 ++++++++--
 .../src/SwipeableDrawer/SwipeableDrawer.test.js        |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index 8f057f17ca2915..6a137ea613e031 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -254,7 +254,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     },
   };
 
-  const [PaperSlot, paperSlotProps] = useSlot('paper', {
+  const [PaperSlot, { as: paperComponent, ...paperSlotProps }] = useSlot('paper', {
     elementType: DrawerPaper,
     className: clsx(classes.paper, PaperProps.className),
     ownerState,
@@ -286,7 +286,13 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     },
   });
 
-  const drawer = <PaperSlot {...paperSlotProps}>{children}</PaperSlot>;
+  const drawer = (
+    // need to convert `as` to `component` prop, otherwise the `slotProps.paper.component` will replace the `Paper`.
+    // what we want is to replace the `div` that the Paper is rendered into.
+    <PaperSlot component={paperComponent} {...paperSlotProps}>
+      {children}
+    </PaperSlot>
+  );
 
   if (variant === 'permanent') {
     return <DockedSlot {...dockedSlotProps}>{drawer}</DockedSlot>;
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index 7b22374736d9ed..21d49bb9bc010a 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -11,7 +11,7 @@ import useForkRef from '../utils/useForkRef';
 import describeConformance from '../../test/describeConformance';
 
 const FakePaper = React.forwardRef(function FakeWidthPaper(props, ref) {
-  const { style, square, ...other } = props;
+  const { style, ...other } = props;
   const paperRef = React.useRef(null);
   const handleRef = useForkRef(ref, paperRef);
 

From 15b11902027aaf8fde50bd815a91ca38a0eeab60 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 10 Jan 2025 15:09:49 +0700
Subject: [PATCH 20/31] remove unnecessary fork ref

---
 packages/mui-material/src/Modal/Modal.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js
index 20c8747d5229c3..b522d841cbe19f 100644
--- a/packages/mui-material/src/Modal/Modal.js
+++ b/packages/mui-material/src/Modal/Modal.js
@@ -14,7 +14,6 @@ import Backdrop from '../Backdrop';
 import useModal from './useModal';
 import { getModalUtilityClass } from './modalClasses';
 import useSlot from '../utils/useSlot';
-import { useForkRef } from '../utils';
 
 const useUtilityClasses = (ownerState) => {
   const { open, exited, classes } = ownerState;
@@ -185,9 +184,11 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
   });
 
   const [BackdropSlot, backdropProps] = useSlot('backdrop', {
+    ref: BackdropProps?.ref,
     elementType: BackdropComponent,
     externalForwardedProps,
     additionalProps: BackdropProps,
+    shouldForwardComponentProp: true,
     getSlotProps: (otherHandlers) => {
       return getBackdropProps({
         ...otherHandlers,
@@ -205,8 +206,6 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
     ownerState,
   });
 
-  const backdropRef = useForkRef(BackdropProps?.ref, backdropProps.ref);
-
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -214,9 +213,7 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
   return (
     <Portal ref={portalRef} container={container} disablePortal={disablePortal}>
       <RootSlot {...rootProps}>
-        {!hideBackdrop && BackdropComponent ? (
-          <BackdropSlot {...backdropProps} ref={backdropRef} />
-        ) : null}
+        {!hideBackdrop && BackdropComponent ? <BackdropSlot {...backdropProps} /> : null}
         <FocusTrap
           disableEnforceFocus={disableEnforceFocus}
           disableAutoFocus={disableAutoFocus}

From 527908e0e967fd1ca98ab0aa70713fe163eaea11 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 10 Jan 2025 15:13:52 +0700
Subject: [PATCH 21/31] forward component prop to Paper

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

diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index 6a137ea613e031..c3a9fe937b3f02 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -254,8 +254,9 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     },
   };
 
-  const [PaperSlot, { as: paperComponent, ...paperSlotProps }] = useSlot('paper', {
+  const [PaperSlot, paperSlotProps] = useSlot('paper', {
     elementType: DrawerPaper,
+    shouldForwardComponentProp: true,
     className: clsx(classes.paper, PaperProps.className),
     ownerState,
     externalForwardedProps,
@@ -286,13 +287,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     },
   });
 
-  const drawer = (
-    // need to convert `as` to `component` prop, otherwise the `slotProps.paper.component` will replace the `Paper`.
-    // what we want is to replace the `div` that the Paper is rendered into.
-    <PaperSlot component={paperComponent} {...paperSlotProps}>
-      {children}
-    </PaperSlot>
-  );
+  const drawer = <PaperSlot {...paperSlotProps}>{children}</PaperSlot>;
 
   if (variant === 'permanent') {
     return <DockedSlot {...dockedSlotProps}>{drawer}</DockedSlot>;

From f6eeba73ee0b67eb22ae71fdd05b98e4d10a08d4 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 15 Jan 2025 15:35:44 +0700
Subject: [PATCH 22/31] convert root to useSlot

---
 packages/mui-material/src/Drawer/Drawer.js    | 43 +++++++++++--------
 .../mui-material/src/Drawer/Drawer.test.js    |  1 +
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index c3a9fe937b3f02..4ae6fe78a9b91c 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -254,6 +254,30 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     },
   };
 
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    elementType: DrawerRoot,
+    className: clsx(classes.root, classes.modal, className),
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      ...ModalProps,
+    },
+    additionalProps: {
+      open,
+      onClose,
+      hideBackdrop,
+      slots: {
+        backdrop: externalForwardedProps.slots.backdrop,
+      },
+      slotProps: {
+        backdrop: externalForwardedProps.slotProps.backdrop,
+      },
+    },
+  });
+
   const [PaperSlot, paperSlotProps] = useSlot('paper', {
     elementType: DrawerPaper,
     shouldForwardComponentProp: true,
@@ -300,24 +324,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   }
 
   // variant === temporary
-  // `DrawerRoot` does not need `useSlot` because it is a `Modal` (composed component),
-  // pass `slots` and `slotProps` to `DrawerRoot` directly
-  return (
-    <DrawerRoot
-      className={clsx(classes.root, classes.modal, className)}
-      open={open}
-      ownerState={ownerState}
-      onClose={onClose}
-      hideBackdrop={hideBackdrop}
-      ref={ref}
-      slots={externalForwardedProps.slots}
-      slotProps={externalForwardedProps.slotProps}
-      {...other}
-      {...ModalProps}
-    >
-      {slidingDrawer}
-    </DrawerRoot>
-  );
+  return <RootSlot {...rootSlotProps}>{slidingDrawer}</RootSlot>;
 });
 
 Drawer.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index 5960d9b9e6699e..10f3ad8621d22f 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -34,6 +34,7 @@ describe('<Drawer />', () => {
         root: {
           expectedClassName: classes.root,
           testWithComponent: null,
+          testWithElement: null,
         },
         paper: {
           expectedClassName: classes.paper,

From 9683fbd8711f599f27c2c35963185a8f9919b731 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 31 Jan 2025 14:46:46 +0700
Subject: [PATCH 23/31] proptypes

---
 docs/pages/material-ui/api/drawer.json        | 27 ++++++++++++++++++-
 docs/translations/api-docs/drawer/drawer.json | 15 ++++++-----
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/docs/pages/material-ui/api/drawer.json b/docs/pages/material-ui/api/drawer.json
index 3d693870a4ae24..12b005cfd64ba8 100644
--- a/docs/pages/material-ui/api/drawer.json
+++ b/docs/pages/material-ui/api/drawer.json
@@ -105,6 +105,30 @@
     }
   ],
   "classes": [
+    {
+      "key": "anchorBottom",
+      "className": "MuiDrawer-anchorBottom",
+      "description": "Styles applied to the root element if `anchor=\"bottom\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorLeft",
+      "className": "MuiDrawer-anchorLeft",
+      "description": "Styles applied to the root element if `anchor=\"left\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorRight",
+      "className": "MuiDrawer-anchorRight",
+      "description": "Styles applied to the root element if `anchor=\"right\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorTop",
+      "className": "MuiDrawer-anchorTop",
+      "description": "Styles applied to the root element if `anchor=\"top\"`.",
+      "isGlobal": false
+    },
     {
       "key": "modal",
       "className": "MuiDrawer-modal",
@@ -164,7 +188,8 @@
       "key": "paperAnchorTop",
       "className": "MuiDrawer-paperAnchorTop",
       "description": "Styles applied to the Paper component if `anchor=\"top\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     }
   ],
   "spread": true,
diff --git a/docs/translations/api-docs/drawer/drawer.json b/docs/translations/api-docs/drawer/drawer.json
index 8757c922168de1..384ed2f50d7979 100644
--- a/docs/translations/api-docs/drawer/drawer.json
+++ b/docs/translations/api-docs/drawer/drawer.json
@@ -54,11 +54,6 @@
       "nodeName": "the root element",
       "conditions": "<code>anchor=\"top\"</code>"
     },
-    "docked": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"permanent or persistent\"</code>"
-    },
     "modal": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Modal component"
@@ -110,7 +105,13 @@
       "nodeName": "the Paper component",
       "conditions": "<code>anchor=\"top\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a> and <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "backdrop": "The component used for the Modal backdrop.",
+    "docked": "The component used for the docked. It&#39;s also a root slot when variant is <code>permanent</code> or <code>persistent</code>.",
+    "paper": "The component used for the paper.",
+    "root": "The component used for the Modal root.",
+    "transition": "The component used for the transition. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

From 8dd9fea23a28aa833a8523d10a8951f98135c9b2 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 3 Feb 2025 13:54:38 +0700
Subject: [PATCH 24/31] fix duplicate fields

---
 packages/mui-material/src/Modal/Modal.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js
index 8e625be207508f..d972a51fd1e1e7 100644
--- a/packages/mui-material/src/Modal/Modal.js
+++ b/packages/mui-material/src/Modal/Modal.js
@@ -189,7 +189,6 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
     externalForwardedProps,
     shouldForwardComponentProp: true,
     additionalProps: BackdropProps,
-    shouldForwardComponentProp: true,
     getSlotProps: (otherHandlers) => {
       return getBackdropProps({
         ...otherHandlers,

From e4ce474e7cff032f497eeb86414cc13cb887298f Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 4 Feb 2025 16:28:31 +0700
Subject: [PATCH 25/31] apply suggestion

---
 .../migrating-from-deprecated-apis.md                       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 6b9da9b49a125c..713bfe0af96f2b 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1168,16 +1168,18 @@ The Drawer's `PaperProps` prop was deprecated in favor of `slotProps.paper`:
 
 The Drawer's `SlideProps` prop was deprecated in favor of `slotProps.transition`:
 
-````diff
+```diff
  <Drawer
 -  SlideProps={slideProps}
 +  slotProps={{ transition: slideProps }}
  />
+```
+
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-classes) below to migrate the code as described in the following sections:
 
 ```bash
 npx @mui/codemod@latest deprecations/drawer-classes <path>
-````
+```
 
 ### Composed CSS classes
 

From b33b1f347cd59819c7a57897eb38478573c246cd Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 4 Feb 2025 16:30:00 +0700
Subject: [PATCH 26/31] apply suggestion

---
 docs/pages/material-ui/api/drawer.json        |  2 +-
 .../material-ui/api/swipeable-drawer.json     | 10 ++++-
 .../swipeable-drawer/swipeable-drawer.json    |  3 +-
 packages/mui-material/src/Drawer/Drawer.d.ts  |  8 +---
 .../src/SwipeableDrawer/SwipeableDrawer.d.ts  | 40 +++++++++++--------
 .../src/SwipeableDrawer/SwipeableDrawer.js    |  2 +-
 6 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/docs/pages/material-ui/api/drawer.json b/docs/pages/material-ui/api/drawer.json
index 12b005cfd64ba8..494bf7b835fca2 100644
--- a/docs/pages/material-ui/api/drawer.json
+++ b/docs/pages/material-ui/api/drawer.json
@@ -76,7 +76,7 @@
     {
       "name": "root",
       "description": "The component used for the Modal root.",
-      "default": "div",
+      "default": "Modal",
       "class": "MuiDrawer-root"
     },
     {
diff --git a/docs/pages/material-ui/api/swipeable-drawer.json b/docs/pages/material-ui/api/swipeable-drawer.json
index b2082b4ce019f0..3ac376fc5d5dcd 100644
--- a/docs/pages/material-ui/api/swipeable-drawer.json
+++ b/docs/pages/material-ui/api/swipeable-drawer.json
@@ -33,7 +33,7 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ backdrop?: func<br>&#124;&nbsp;object, docked?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, swipeArea?: object, transition?: func<br>&#124;&nbsp;object }"
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, docked?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, swipeArea?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
@@ -63,6 +63,14 @@
     "import SwipeableDrawer from '@mui/material/SwipeableDrawer';",
     "import { SwipeableDrawer } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "swipeArea",
+      "description": "The component used for the swipeArea slot.",
+      "default": "div",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "anchorBottom",
diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json
index f75e27408f0f6c..461021c2cf5403 100644
--- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json
+++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json
@@ -124,5 +124,6 @@
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a> and <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "root": { "description": "Styles applied to the root element." }
-  }
+  },
+  "slotDescriptions": { "swipeArea": "The component used for the swipeArea slot." }
 }
diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index 66d1355f15916c..92487ddf7b3f70 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -22,7 +22,7 @@ export interface DrawerBackdropSlotPropsOverrides {}
 export interface DrawerSlots {
   /**
    * The component used for the Modal root.
-   * @default div
+   * @default Modal
    */
   root: React.ElementType;
   /**
@@ -70,11 +70,7 @@ export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwarded to the docked slot.
      * By default, the avaible props are based on a div element.
      */
-    docked: SlotProps<
-      React.ElementType<React.HTMLProps<HTMLDivElement>>,
-      DrawerDockedSlotPropsOverrides,
-      DrawerOwnerState
-    >;
+    docked: SlotProps<'div', DrawerDockedSlotPropsOverrides, DrawerOwnerState>;
     /**
      * 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.
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts
index 4dc7e2b4c258c6..c64601bb8ffca4 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts
@@ -1,22 +1,28 @@
 import * as React from 'react';
-import { DrawerProps, DrawerSlotsAndSlotProps } from '../Drawer';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { DrawerProps, DrawerOwnerState, DrawerSlotsAndSlotProps } from '../Drawer';
 
-type SwipeableDrawerSlotsAndSlotProps = DrawerSlotsAndSlotProps & {
-  slots?: {
-    /**
-     * The component used for the swipeArea slot.
-     * @default div
-     */
-    swipeArea?: React.ElementType;
-  };
-  slotProps?: {
-    /**
-     * Props forwarded to the swipeArea slot.
-     * By default, the avaible props are based on a div.
-     */
-    swipeArea?: React.HTMLProps<HTMLDivElement>;
-  };
-};
+export interface SwipeableDrawerSwipeAreaSlotPropsOverrides {}
+
+export interface SwipeableDrawerSlots {
+  /**
+   * The component used for the swipeArea slot.
+   * @default div
+   */
+  swipeArea?: React.ElementType;
+}
+
+type SwipeableDrawerSlotsAndSlotProps = DrawerSlotsAndSlotProps &
+  CreateSlotsAndSlotProps<
+    SwipeableDrawerSlots,
+    {
+      /**
+       * Props forwarded to the docked slot.
+       * By default, the avaible props are based on a div element.
+       */
+      swipeArea: SlotProps<'div', SwipeableDrawerSwipeAreaSlotPropsOverrides, DrawerOwnerState>;
+    }
+  >;
 
 export interface SwipeableDrawerProps
   extends Omit<DrawerProps, 'onClose' | 'open' | 'slots' | 'slotProps'>,
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index c1f9e08e21beb5..88d8412285a323 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -754,7 +754,7 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
     docked: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    swipeArea: PropTypes.object,
+    swipeArea: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**

From 3b7500f7b511395a71a7266d748d5441b161be34 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 4 Feb 2025 16:35:59 +0700
Subject: [PATCH 27/31] add more slot tests

---
 .../mui-material/src/Drawer/Drawer.test.js    | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index b17bf58dca4c24..782a9d6825ba52 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -4,6 +4,7 @@ import { spy } from 'sinon';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Drawer, { drawerClasses as classes } from '@mui/material/Drawer';
+import { modalClasses } from '@mui/material/Modal';
 import { getAnchor, isHorizontal } from './Drawer';
 import describeConformance from '../../test/describeConformance';
 
@@ -18,6 +19,10 @@ describe('<Drawer />', () => {
     ),
   );
 
+  const CustomBackdrop = React.forwardRef(({ transitionDuration, ownerState, ...props }, ref) => (
+    <i ref={ref} data-testid="custom" {...props} />
+  ));
+
   describeConformance(
     <Drawer open disablePortal>
       <div />
@@ -41,11 +46,33 @@ describe('<Drawer />', () => {
           testWithComponent: CustomPaper,
           testWithElement: null, // already tested with CustomPaper
         },
+        backdrop: { expectedClassName: modalClasses.backdrop, testWithElement: CustomBackdrop },
       },
       skip: ['componentProp', 'componentsProp', 'themeVariants'],
     }),
   );
 
+  // For `permanent` variant, the root is a div instead of a Modal.
+  describeConformance(
+    <Drawer variant="permanent">
+      <div />
+    </Drawer>,
+    () => ({
+      classes,
+      inheritComponent: 'div',
+      render,
+      muiName: 'MuiDrawer',
+      testDeepOverrides: { slotName: 'docked', slotClassName: classes.docked },
+      refInstanceof: window.HTMLDivElement,
+      slots: {
+        docked: {
+          expectedClassName: classes.docked,
+        },
+      },
+      skip: ['componentProp', 'componentsProp'],
+    }),
+  );
+
   describe('prop: variant=temporary', () => {
     describe('transitionDuration property', () => {
       const transitionDuration = {

From d0134d97e6c3d59f209f69abcac3a4c3b7024376 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 4 Feb 2025 16:38:54 +0700
Subject: [PATCH 28/31] added transition slot test

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

diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index 782a9d6825ba52..7a2cb649c632f1 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -23,6 +23,12 @@ describe('<Drawer />', () => {
     <i ref={ref} data-testid="custom" {...props} />
   ));
 
+  const CustomTransition = React.forwardRef(
+    ({ onEnter, onExit, onExited, appear, in: inProp, ownerState, ...props }, ref) => (
+      <i ref={ref} data-testid="custom" {...props} />
+    ),
+  );
+
   describeConformance(
     <Drawer open disablePortal>
       <div />
@@ -47,6 +53,11 @@ describe('<Drawer />', () => {
           testWithElement: null, // already tested with CustomPaper
         },
         backdrop: { expectedClassName: modalClasses.backdrop, testWithElement: CustomBackdrop },
+        transition: {
+          expectedClassName: null,
+          testWithComponent: CustomTransition,
+          testWithElement: CustomTransition,
+        },
       },
       skip: ['componentProp', 'componentsProp', 'themeVariants'],
     }),

From 3a20a13a68ff0c8c91bb17eac0b4a272efd9d457 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 4 Feb 2025 20:51:16 +0700
Subject: [PATCH 29/31] fix regression test

---
 packages/mui-material/src/Drawer/Drawer.test.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index 7a2cb649c632f1..347d57cbea8108 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -38,7 +38,6 @@ describe('<Drawer />', () => {
       inheritComponent: 'div',
       render,
       muiName: 'MuiDrawer',
-      testVariantProps: { variant: 'persistent' },
       testDeepOverrides: { slotName: 'paper', slotClassName: classes.paper },
       refInstanceof: window.HTMLDivElement,
       slots: {
@@ -73,7 +72,7 @@ describe('<Drawer />', () => {
       inheritComponent: 'div',
       render,
       muiName: 'MuiDrawer',
-      testDeepOverrides: { slotName: 'docked', slotClassName: classes.docked },
+      testVariantProps: { variant: 'persistent' },
       refInstanceof: window.HTMLDivElement,
       slots: {
         docked: {

From 2f01e4667ab3478a122056bb62abec3971b2d78e Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 5 Feb 2025 16:29:06 +0700
Subject: [PATCH 30/31] add transition spec

---
 packages/mui-material/src/Drawer/Drawer.d.ts  |  4 +--
 .../mui-material/src/Drawer/Drawer.spec.tsx   | 28 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index 92487ddf7b3f70..589d2099cc0561 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -85,8 +85,8 @@ export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * By default, the avaible props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
      */
     transition: SlotProps<
-      React.ElementType<TransitionProps>,
-      DrawerTransitionSlotPropsOverrides,
+      React.ElementType,
+      TransitionProps & DrawerTransitionSlotPropsOverrides,
       DrawerOwnerState
     >;
   }
diff --git a/packages/mui-material/src/Drawer/Drawer.spec.tsx b/packages/mui-material/src/Drawer/Drawer.spec.tsx
index 6f3cfd4ab6edb2..5cf479fe793988 100644
--- a/packages/mui-material/src/Drawer/Drawer.spec.tsx
+++ b/packages/mui-material/src/Drawer/Drawer.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
-import Drawer from '@mui/material/Drawer';
+import Drawer, { DrawerProps } from '@mui/material/Drawer';
 import Grow from '@mui/material/Grow';
 import { PaperProps } from '@mui/material/Paper';
 
@@ -51,3 +51,29 @@ function Noop() {
     transition: Grow,
   }}
 />;
+
+function Custom(props: DrawerProps) {
+  const { slotProps, ...dialogProps } = props;
+  return (
+    <Drawer
+      slotProps={{
+        ...slotProps,
+        transition: (ownerState) => {
+          const transitionProps =
+            typeof slotProps?.transition === 'function'
+              ? slotProps.transition(ownerState)
+              : slotProps?.transition;
+          return {
+            ...transitionProps,
+            onExited: (node) => {
+              transitionProps?.onExited?.(node);
+            },
+          };
+        },
+      }}
+      {...dialogProps}
+    >
+      test
+    </Drawer>
+  );
+}

From 61366886be0372f0a5ae069e57b0e1c5b55f3266 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 6 Feb 2025 13:03:48 +0700
Subject: [PATCH 31/31] apply suggestion

---
 docs/pages/material-ui/api/drawer.json        | 4 ++--
 docs/translations/api-docs/drawer/drawer.json | 4 ++--
 packages/mui-material/src/Drawer/Drawer.d.ts  | 5 ++---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/docs/pages/material-ui/api/drawer.json b/docs/pages/material-ui/api/drawer.json
index 494bf7b835fca2..e5e1feb6d1e8d5 100644
--- a/docs/pages/material-ui/api/drawer.json
+++ b/docs/pages/material-ui/api/drawer.json
@@ -75,7 +75,7 @@
   "slots": [
     {
       "name": "root",
-      "description": "The component used for the Modal root.",
+      "description": "The component used for the root when the variant is `temporary`.",
       "default": "Modal",
       "class": "MuiDrawer-root"
     },
@@ -87,7 +87,7 @@
     },
     {
       "name": "docked",
-      "description": "The component used for the docked.\nIt's also a root slot when variant is `permanent` or `persistent`.",
+      "description": "The component used for the root element when the variant is `permanent` or `persistent`.",
       "default": "div",
       "class": "MuiDrawer-docked"
     },
diff --git a/docs/translations/api-docs/drawer/drawer.json b/docs/translations/api-docs/drawer/drawer.json
index 384ed2f50d7979..1360692763afc6 100644
--- a/docs/translations/api-docs/drawer/drawer.json
+++ b/docs/translations/api-docs/drawer/drawer.json
@@ -109,9 +109,9 @@
   },
   "slotDescriptions": {
     "backdrop": "The component used for the Modal backdrop.",
-    "docked": "The component used for the docked. It&#39;s also a root slot when variant is <code>permanent</code> or <code>persistent</code>.",
+    "docked": "The component used for the root element when the variant is <code>permanent</code> or <code>persistent</code>.",
     "paper": "The component used for the paper.",
-    "root": "The component used for the Modal root.",
+    "root": "The component used for the root when the variant is <code>temporary</code>.",
     "transition": "The component used for the transition. <a href=\"https://mui.com/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/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index 589d2099cc0561..3b7b02eda45d3b 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -21,7 +21,7 @@ export interface DrawerBackdropSlotPropsOverrides {}
 
 export interface DrawerSlots {
   /**
-   * The component used for the Modal root.
+   * The component used for the root when the variant is `temporary`.
    * @default Modal
    */
   root: React.ElementType;
@@ -31,8 +31,7 @@ export interface DrawerSlots {
    */
   backdrop: React.ElementType;
   /**
-   * The component used for the docked.
-   * It's also a root slot when variant is `permanent` or `persistent`.
+   * The component used for the root element when the variant is `permanent` or `persistent`.
    * @default div
    */
   docked: React.ElementType;