From c5569df5adb7c1a7314578fae6f3da2548cf3177 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 15 Jan 2025 15:35:44 +0700
Subject: [PATCH] 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..ff91920e00aa07 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,
+    },
+    additionalProps: {
+      open,
+      onClose,
+      hideBackdrop,
+      ...ModalProps,
+      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,