convert root to useSlot

mui · Jan 15, 2025 · c5569df · c5569df
1 parent 39b0ef6
commit c5569df
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git 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
@@ -34,6 +34,7 @@ describe('<Drawer />', () => {
         root: {
           expectedClassName: classes.root,
           testWithComponent: null,
+          testWithElement: null,
         },
         paper: {
           expectedClassName: classes.paper,