[material-ui][Modal] migrate useSlotProps to useSLot

packages/mui-material/src/Modal/Modal.js

@@ -4,14 +4,15 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import { useSlotProps } from '@mui/base/utils';
 import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
 import { styled, createUseThemeProps } from '../zero-styled';
 import Backdrop from '../Backdrop';
 import { getModalUtilityClass } from './modalClasses';
+import useSlot from '../utils/useSlot';
+import { useForkRef } from '../utils';
 
 const useThemeProps = createUseThemeProps('MuiModal');
 
@@ -100,8 +101,8 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
     onTransitionEnter,
     onTransitionExited,
     open,
-    slotProps,
-    slots,
+    slotProps = {},
+    slots = {},
     // eslint-disable-next-line react/prop-types
     theme,
     ...other
@@ -152,16 +153,23 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
 
-  const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
-  const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
-
   const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const backdropSlotProps = slotProps?.backdrop ?? componentsProps.backdrop;
+  const backdropSlotProps = slotProps.backdrop ?? componentsProps?.backdrop;
+
+  const externalForwardedProps = {
+    slots: {
+      root: slots.root ?? components.Root,
+      backdrop: slots.backdrop ?? components.Backdrop,
+    },
+    slotProps: {
+      root: slotProps.root ?? componentsProps.root,
+      backdrop: backdropSlotProps,
+    },
+  };
 
-  const rootProps = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: ModalRoot,
+    externalForwardedProps,
     getSlotProps: getRootProps,
     additionalProps: {
       ref,
@@ -176,9 +184,9 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
     ),
   });
 
-  const backdropProps = useSlotProps({
-    elementType: BackdropSlot,
-    externalSlotProps: backdropSlotProps,
+  const [BackdropSlot, backdropProps] = useSlot('backdrop', {
+    elementType: BackdropComponent,
+    externalForwardedProps,
     additionalProps: BackdropProps,
     getSlotProps: (otherHandlers) => {
       return getBackdropProps({
@@ -197,6 +205,8 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
     ownerState,
   });
 
+  const backdropRef = useForkRef(BackdropProps?.ref, backdropProps.ref);
+
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -209,8 +219,10 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
        * is not meant for humans to interact with directly.
        * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
        */}
-      <RootSlot {...rootProps}>
-        {!hideBackdrop && BackdropComponent ? <BackdropSlot {...backdropProps} /> : null}
+      <RootSlot {...rootProps} {...other}>
+        {!hideBackdrop && BackdropComponent ? (
+          <BackdropSlot {...backdropProps} ref={backdropRef} />
+        ) : null}
         <FocusTrap
           disableEnforceFocus={disableEnforceFocus}
           disableAutoFocus={disableAutoFocus}

packages/mui-material/src/Modal/Modal.test.js

@@ -44,7 +44,6 @@ describe('<Modal />', () => {
         'themeDefaultProps', // portal, can't determine the root
         'themeStyleOverrides', // portal, can't determine the root
         'reactTestRenderer', // portal https://github.com/facebook/react/issues/11565
-        'slotPropsCallback', // not supported yet
       ],
     }),
   );