@mui/material 6.4.5 → 6.4.6

package/node/Drawer/Drawer.js

@@ -24,6 +24,8 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _drawerClasses = require("./drawerClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
   const {
@@ -203,9 +205,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     PaperProps = {},
     SlideProps,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent = _Slide.default,
+    TransitionComponent,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -229,56 +233,100 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     ...other
   };
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerPaper, {
-    elevation: variant === 'temporary' ? elevation : 0,
-    square: true,
-    ...PaperProps,
+  const externalForwardedProps = {
+    slots: {
+      transition: TransitionComponent,
+      ...slots
+    },
+    slotProps: {
+      paper: PaperProps,
+      transition: SlideProps,
+      ...slotProps,
+      backdrop: (0, _utils.mergeSlotProps)(slotProps.backdrop || {
+        ...BackdropProps,
+        ...BackdropPropsProp
+      }, {
+        transitionDuration
+      })
+    }
+  };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    elementType: DrawerRoot,
+    className: (0, _clsx.default)(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] = (0, _useSlot.default)('paper', {
+    elementType: DrawerPaper,
+    shouldForwardComponentProp: true,
     className: (0, _clsx.default)(classes.paper, PaperProps.className),
-    ownerState: ownerState,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      elevation: variant === 'temporary' ? elevation : 0,
+      square: true
+    }
+  });
+  const [DockedSlot, dockedSlotProps] = (0, _useSlot.default)('docked', {
+    elementType: DrawerDockedRoot,
+    ref,
+    className: (0, _clsx.default)(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] = (0, _useSlot.default)('transition', {
+    elementType: _Slide.default,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      in: open,
+      direction: oppositeDirection[anchorInvariant],
+      timeout: transitionDuration,
+      appear: mounted.current
+    }
+  });
+  const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
+    ...paperSlotProps,
     children: children
   });
   if (variant === 'permanent') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerDockedRoot, {
-      className: (0, _clsx.default)(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DockedSlot, {
+      ...dockedSlotProps,
       children: drawer
     });
   }
-  const slidingDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
-    in: open,
-    direction: oppositeDirection[anchorInvariant],
-    timeout: transitionDuration,
-    appear: mounted.current,
-    ...SlideProps,
+  const slidingDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
+    ...transitionSlotProps,
     children: drawer
   });
   if (variant === 'persistent') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerDockedRoot, {
-      className: (0, _clsx.default)(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DockedSlot, {
+      ...dockedSlotProps,
       children: slidingDrawer
     });
   }
 
   // variant === temporary
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerRoot, {
-    BackdropProps: {
-      ...BackdropProps,
-      ...BackdropPropsProp,
-      transitionDuration
-    },
-    className: (0, _clsx.default)(classes.root, classes.modal, className),
-    open: open,
-    ownerState: ownerState,
-    onClose: onClose,
-    hideBackdrop: hideBackdrop,
-    ref: ref,
-    ...other,
-    ...ModalProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
+    ...rootSlotProps,
     children: slidingDrawer
   });
 });
@@ -338,13 +386,37 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
   open: _propTypes.default.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.default.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.default.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    docked: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
+    docked: _propTypes.default.elementType,
+    paper: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Menu/Menu.js

@@ -21,6 +21,7 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _menuClasses = require("./menuClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -152,20 +153,43 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   });
-  const PaperSlot = slots.paper ?? MenuPaper;
-  const paperExternalSlotProps = slotProps.paper ?? PaperProps;
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      list: MenuListProps,
+      transition: TransitionProps,
+      paper: PaperProps,
+      ...slotProps
+    }
+  };
   const rootSlotProps = (0, _useSlotProps.default)({
     elementType: slots.root,
     externalSlotProps: slotProps.root,
     ownerState,
     className: [classes.root, className]
   });
-  const paperSlotProps = (0, _useSlotProps.default)({
-    elementType: PaperSlot,
-    externalSlotProps: paperExternalSlotProps,
-    ownerState,
-    className: classes.paper
+  const [PaperSlot, paperSlotProps] = (0, _useSlot.default)('paper', {
+    className: classes.paper,
+    elementType: MenuPaper,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    ownerState
+  });
+  const [ListSlot, listSlotProps] = (0, _useSlot.default)('list', {
+    className: (0, _clsx.default)(classes.list, MenuListProps.className),
+    elementType: MenuMenuList,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    getSlotProps: handlers => ({
+      ...handlers,
+      onKeyDown: event => {
+        handleListKeyDown(event);
+        handlers.onKeyDown?.(event);
+      }
+    }),
+    ownerState
   });
+  const resolvedTransitionProps = typeof externalForwardedProps.slotProps.transition === 'function' ? externalForwardedProps.slotProps.transition(ownerState) : externalForwardedProps.slotProps.transition;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuRoot, {
     onClose: onClose,
     anchorOrigin: {
@@ -174,31 +198,38 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
     slots: {
+      root: slots.root,
       paper: PaperSlot,
-      root: slots.root
+      backdrop: slots.backdrop,
+      ...(slots.transition && {
+        // TODO: pass `slots.transition` directly once `TransitionComponent` is removed from Popover
+        transition: slots.transition
+      })
     },
     slotProps: {
       root: rootSlotProps,
-      paper: paperSlotProps
+      paper: paperSlotProps,
+      backdrop: typeof slotProps.backdrop === 'function' ? slotProps.backdrop(ownerState) : slotProps.backdrop,
+      transition: {
+        ...resolvedTransitionProps,
+        onEntering: (...args) => {
+          handleEntering(...args);
+          resolvedTransitionProps?.onEntering?.(...args);
+        }
+      }
     },
     open: open,
     ref: ref,
     transitionDuration: transitionDuration,
-    TransitionProps: {
-      onEntering: handleEntering,
-      ...TransitionProps
-    },
     ownerState: ownerState,
     ...other,
     classes: PopoverClasses,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuMenuList, {
-      onKeyDown: handleListKeyDown,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListSlot, {
       actions: menuListActionsRef,
       autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
       autoFocusItem: autoFocusItem,
       variant: variant,
-      ...MenuListProps,
-      className: (0, _clsx.default)(classes.list, MenuListProps.className),
+      ...listSlotProps,
       children: children
     })
   });
@@ -243,6 +274,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   disableAutoFocusItem: _propTypes.default.bool,
   /**
    * Props applied to the [`MenuList`](https://mui.com/material-ui/api/menu-list/) element.
+   * @deprecated use the `slotProps.list` 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 {}
    */
   MenuListProps: _propTypes.default.object,
@@ -270,16 +302,22 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * @default {}
    */
   slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    list: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
+    list: _propTypes.default.elementType,
     paper: _propTypes.default.elementType,
-    root: _propTypes.default.elementType
+    root: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -297,6 +335,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @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.
    * @default {}
    */
   TransitionProps: _propTypes.default.object,

package/node/Modal/Modal.js

@@ -22,7 +22,6 @@ var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _useModal = _interopRequireDefault(require("./useModal"));
 var _modalClasses = require("./modalClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
-var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -165,7 +164,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
   const externalForwardedProps = {
-    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -177,19 +175,22 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     }
   };
   const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    ref,
     elementType: ModalRoot,
-    externalForwardedProps,
-    getSlotProps: getRootProps,
-    additionalProps: {
-      ref,
-      as: component
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
     },
+    getSlotProps: getRootProps,
     ownerState,
     className: (0, _clsx.default)(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
   const [BackdropSlot, backdropProps] = (0, _useSlot.default)('backdrop', {
+    ref: BackdropProps?.ref,
     elementType: BackdropComponent,
     externalForwardedProps,
+    shouldForwardComponentProp: true,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -207,7 +208,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     className: (0, _clsx.default)(BackdropProps?.className, classes?.backdrop),
     ownerState
   });
-  const backdropRef = (0, _utils.useForkRef)(BackdropProps?.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -218,8 +218,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
       ...rootProps,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropSlot, {
-        ...backdropProps,
-        ref: backdropRef
+        ...backdropProps
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,

package/node/Popover/Popover.js

@@ -24,12 +24,12 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _popoverClasses = require("./popoverClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -112,22 +112,21 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     marginThreshold = 16,
     open,
     PaperProps: PaperPropsProp = {},
+    // TODO: remove in v7
     slots = {},
     slotProps = {},
     transformOrigin = {
       vertical: 'top',
       horizontal: 'left'
     },
-    TransitionComponent = _Grow.default,
+    TransitionComponent,
+    // TODO: remove in v7
     transitionDuration: transitionDurationProp = 'auto',
-    TransitionProps: {
-      onEntering,
-      ...TransitionProps
-    } = {},
+    TransitionProps = {},
+    // TODO: remove in v7
     disableScrollLock = false,
     ...other
   } = props;
-  const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp;
   const paperRef = React.useRef();
   const ownerState = {
     ...props,
@@ -135,7 +134,6 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     anchorReference,
     elevation,
     marginThreshold,
-    externalPaperSlotProps,
     transformOrigin,
     TransitionComponent,
     transitionDuration: transitionDurationProp,
@@ -264,10 +262,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
     return () => window.removeEventListener('scroll', setPositioningStyles);
   }, [anchorEl, disableScrollLock, setPositioningStyles]);
-  const handleEntering = (element, isAppearing) => {
-    if (onEntering) {
-      onEntering(element, isAppearing);
-    }
+  const handleEntering = () => {
     setPositioningStyles();
   };
   const handleExited = () => {
@@ -298,45 +293,65 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     };
   }, [anchorEl, open, setPositioningStyles]);
   let transitionDuration = transitionDurationProp;
-  if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
-    transitionDuration = undefined;
-  }
-
-  // If the container prop is provided, use that
-  // If the anchorEl prop is provided, use its parent body element as the container
-  // If neither are provided let the Modal take care of choosing the container
-  const container = containerProp || (anchorEl ? (0, _ownerDocument.default)(resolveAnchorEl(anchorEl)).body : undefined);
   const externalForwardedProps = {
-    slots,
+    slots: {
+      transition: TransitionComponent,
+      ...slots
+    },
     slotProps: {
-      ...slotProps,
-      paper: externalPaperSlotProps
+      transition: TransitionProps,
+      paper: PaperPropsProp,
+      ...slotProps
     }
   };
-  const [PaperSlot, paperProps] = (0, _useSlot.default)('paper', {
-    elementType: PopoverPaper,
+  const [TransitionSlot, transitionSlotProps] = (0, _useSlot.default)('transition', {
+    elementType: _Grow.default,
     externalForwardedProps,
-    additionalProps: {
-      elevation,
-      className: (0, _clsx.default)(classes.paper, externalPaperSlotProps?.className),
-      style: isPositioned ? externalPaperSlotProps.style : {
-        ...externalPaperSlotProps.style,
-        opacity: 0
+    ownerState,
+    getSlotProps: handlers => ({
+      ...handlers,
+      onEntering: (element, isAppearing) => {
+        handlers.onEntering?.(element, isAppearing);
+        handleEntering();
+      },
+      onExited: element => {
+        handlers.onExited?.(element);
+        handleExited();
       }
-    },
-    ownerState
+    }),
+    additionalProps: {
+      appear: true,
+      in: open
+    }
   });
+  if (transitionDurationProp === 'auto' && !TransitionSlot.muiSupportAuto) {
+    transitionDuration = undefined;
+  }
+
+  // If the container prop is provided, use that
+  // If the anchorEl prop is provided, use its parent body element as the container
+  // If neither are provided let the Modal take care of choosing the container
+  const container = containerProp || (anchorEl ? (0, _ownerDocument.default)(resolveAnchorEl(anchorEl)).body : undefined);
   const [RootSlot, {
+    slots: rootSlotsProp,
     slotProps: rootSlotPropsProp,
     ...rootProps
   }] = (0, _useSlot.default)('root', {
+    ref,
     elementType: PopoverRoot,
-    externalForwardedProps,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
     additionalProps: {
+      slots: {
+        backdrop: slots.backdrop
+      },
       slotProps: {
-        backdrop: {
+        backdrop: (0, _utils.mergeSlotProps)(typeof slotProps.backdrop === 'function' ? slotProps.backdrop(ownerState) : slotProps.backdrop, {
           invisible: true
-        }
+        })
       },
       container,
       open
@@ -344,25 +359,32 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     ownerState,
     className: (0, _clsx.default)(classes.root, className)
   });
-  const handlePaperRef = (0, _useForkRef.default)(paperRef, paperProps.ref);
+  const [PaperSlot, paperProps] = (0, _useSlot.default)('paper', {
+    ref: paperRef,
+    className: classes.paper,
+    elementType: PopoverPaper,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    additionalProps: {
+      elevation,
+      style: isPositioned ? undefined : {
+        opacity: 0
+      }
+    },
+    ownerState
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
     ...rootProps,
     ...(!(0, _isHostComponent.default)(RootSlot) && {
+      slots: rootSlotsProp,
       slotProps: rootSlotPropsProp,
       disableScrollLock
     }),
-    ...other,
-    ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
-      appear: true,
-      in: open,
-      onEntering: handleEntering,
-      onExited: handleExited,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
+      ...transitionSlotProps,
       timeout: transitionDuration,
-      ...TransitionProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
         ...paperProps,
-        ref: handlePaperRef,
         children: children
       })
     })
@@ -430,8 +452,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   anchorReference: _propTypes.default.oneOf(['anchorEl', 'anchorPosition', 'none']),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @deprecated Use `slots.backdrop` 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 styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -445,7 +466,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   BackdropComponent: _propTypes.default.elementType,
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   * @deprecated Use `slotProps.backdrop` 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.
    */
   BackdropProps: _propTypes.default.object,
   /**
@@ -509,16 +530,20 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default {}
    */
   slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
     paper: _propTypes.default.elementType,
-    root: _propTypes.default.elementType
+    root: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -543,6 +568,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   /**
    * 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.
+   * @deprecated use the `slots.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.
    * @default Grow
    */
   TransitionComponent: _propTypes.default.elementType,
@@ -558,6 +584,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @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.
    * @default {}
    */
   TransitionProps: _propTypes.default.object