@mui/material 6.4.5 → 6.4.6

package/Drawer/Drawer.js

@@ -15,6 +15,8 @@ import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getDrawerUtilityClass } from "./drawerClasses.js";
+import useSlot from "../utils/useSlot.js";
+import { mergeSlotProps } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
@@ -194,9 +196,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     PaperProps = {},
     SlideProps,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent = Slide,
+    TransitionComponent,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -220,56 +224,100 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     ...other
   };
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/_jsx(DrawerPaper, {
-    elevation: variant === 'temporary' ? elevation : 0,
-    square: true,
-    ...PaperProps,
+  const externalForwardedProps = {
+    slots: {
+      transition: TransitionComponent,
+      ...slots
+    },
+    slotProps: {
+      paper: PaperProps,
+      transition: SlideProps,
+      ...slotProps,
+      backdrop: mergeSlotProps(slotProps.backdrop || {
+        ...BackdropProps,
+        ...BackdropPropsProp
+      }, {
+        transitionDuration
+      })
+    }
+  };
+  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,
     className: clsx(classes.paper, PaperProps.className),
-    ownerState: ownerState,
+    ownerState,
+    externalForwardedProps,
+    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,
+    additionalProps: other // pass `other` here because `DockedSlot` is also a root slot for some variants
+  });
+  const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
+    elementType: Slide,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      in: open,
+      direction: oppositeDirection[anchorInvariant],
+      timeout: transitionDuration,
+      appear: mounted.current
+    }
+  });
+  const drawer = /*#__PURE__*/_jsx(PaperSlot, {
+    ...paperSlotProps,
     children: children
   });
   if (variant === 'permanent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
-      className: clsx(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/_jsx(DockedSlot, {
+      ...dockedSlotProps,
       children: drawer
     });
   }
-  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, {
-    in: open,
-    direction: oppositeDirection[anchorInvariant],
-    timeout: transitionDuration,
-    appear: mounted.current,
-    ...SlideProps,
+  const slidingDrawer = /*#__PURE__*/_jsx(TransitionSlot, {
+    ...transitionSlotProps,
     children: drawer
   });
   if (variant === 'persistent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
-      className: clsx(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/_jsx(DockedSlot, {
+      ...dockedSlotProps,
       children: slidingDrawer
     });
   }
 
   // variant === temporary
-  return /*#__PURE__*/_jsx(DrawerRoot, {
-    BackdropProps: {
-      ...BackdropProps,
-      ...BackdropPropsProp,
-      transitionDuration
-    },
-    className: clsx(classes.root, classes.modal, className),
-    open: open,
-    ownerState: ownerState,
-    onClose: onClose,
-    hideBackdrop: hideBackdrop,
-    ref: ref,
-    ...other,
-    ...ModalProps,
+  return /*#__PURE__*/_jsx(RootSlot, {
+    ...rootSlotProps,
     children: slidingDrawer
   });
 });
@@ -329,13 +377,37 @@ process.env.NODE_ENV !== "production" ? 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.
    */

package/InputBase/inputBaseClasses.d.ts

@@ -27,17 +27,26 @@ export interface InputBaseClasses {
     readOnly: string;
     /** Styles applied to the input element. */
     input: string;
-    /** Styles applied to the input element if `size="small"`. */
+    /** Styles applied to the input element if `size="small"`.
+     * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-sizeSmall](/material-ui/api/input-base/#inputbase-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     inputSizeSmall: string;
-    /** Styles applied to the input element if `multiline={true}`. */
+    /** Styles applied to the input element if `multiline={true}`.
+     * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-multiline](/material-ui/api/input-base/#inputbase-classes-multiline) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     inputMultiline: string;
-    /** Styles applied to the input element if `type="search"`. */
     inputTypeSearch: string;
-    /** Styles applied to the input element if `startAdornment` is provided. */
+    /** Styles applied to the input element if `startAdornment` is provided.
+     * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedStart](/material-ui/api/input-base/#inputbase-classes-adornedStart) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     inputAdornedStart: string;
-    /** Styles applied to the input element if `endAdornment` is provided. */
+    /** Styles applied to the input element if `endAdornment` is provided.
+     * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedEnd](/material-ui/api/input-base/#inputbase-classes-adornedEnd) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     inputAdornedEnd: string;
-    /** Styles applied to the input element if `hiddenLabel={true}`. */
+    /** Styles applied to the input element if `hiddenLabel={true}`.
+     * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-hiddenLabel](/material-ui/api/input-base/#inputbase-classes-hiddenLabel) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     inputHiddenLabel: string;
 }
 export type InputBaseClassKey = keyof InputBaseClasses;

package/Menu/Menu.d.ts

@@ -4,11 +4,94 @@ import { InternalStandardProps as StandardProps } from '..';
 import { PaperProps } from '../Paper';
 import { PopoverProps } from '../Popover';
 import { MenuListProps } from '../MenuList';
+import { ModalProps } from '../Modal';
+import { BackdropProps } from '../Backdrop';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { MenuClasses } from './menuClasses';
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
 
-export interface MenuProps extends StandardProps<PopoverProps> {
+export interface MenuRootSlotPropsOverrides {}
+
+export interface MenuPaperSlotPropsOverrides {}
+
+export interface MenuTransitionSlotPropsOverrides {}
+
+export interface MenuListSlotPropsOverrides {}
+
+export interface MenuBackdropSlotPropsOverrides {}
+
+export interface MenuSlots {
+  /**
+   * The component used for the popper.
+   * @default Modal
+   */
+  root: React.ElementType;
+  /**
+   * The component used for the paper.
+   * @default Paper
+   */
+  paper: React.ElementType;
+  /**
+   * The component used for the list.
+   * @default MenuList
+   */
+  list: React.ElementType;
+  /**
+   * The component used for the transition slot.
+   * @default Grow
+   */
+  transition: React.ElementType;
+  /**
+   * The component used for the backdrop slot.
+   * @default Backdrop
+   */
+  backdrop: React.ElementType;
+}
+
+export type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  MenuSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [Popover](https://mui.com/material-ui/api/popover/#props) component.
+     */
+    root: SlotProps<React.ElementType<ModalProps>, MenuRootSlotPropsOverrides, MenuOwnerState>;
+    /**
+     * 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>, MenuPaperSlotPropsOverrides, MenuOwnerState>;
+    /**
+     * Props forwarded to the list slot.
+     * By default, the avaible props are based on the [MenuList](https://mui.com/material-ui/api/menu-list/#props) component.
+     */
+    list: SlotProps<React.ElementType<MenuListProps>, MenuListSlotPropsOverrides, MenuOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
+     */
+    transition: SlotComponentProps<
+      // use SlotComponentProps because transition slot does not support `component` and `sx` prop
+      React.ElementType,
+      TransitionProps & MenuTransitionSlotPropsOverrides,
+      MenuOwnerState
+    >;
+    /**
+     * 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>,
+      MenuBackdropSlotPropsOverrides,
+      MenuOwnerState
+    >;
+  }
+>;
+
+export interface MenuProps
+  extends StandardProps<Omit<PopoverProps, 'slots' | 'slotProps'>>,
+    MenuSlotsAndSlotProps {
   /**
    * An HTML element, or a function that returns one.
    * It's used to set the position of the menu.
@@ -40,6 +123,7 @@ export interface MenuProps extends StandardProps<PopoverProps> {
   disableAutoFocusItem?: boolean;
   /**
    * 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?: Partial<MenuListProps>;
@@ -70,6 +154,7 @@ export interface MenuProps extends StandardProps<PopoverProps> {
   /**
    * 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?: TransitionProps;
@@ -80,6 +165,8 @@ export interface MenuProps extends StandardProps<PopoverProps> {
   variant?: 'menu' | 'selectedMenu';
 }
 
+export interface MenuOwnerState extends Omit<MenuProps, 'slots' | 'slotProps'> {}
+
 export declare const MenuPaper: React.FC<PaperProps>;
 
 /**

package/Menu/Menu.js

@@ -14,6 +14,7 @@ import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getMenuUtilityClass } from "./menuClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -145,20 +146,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 = useSlotProps({
     elementType: slots.root,
     externalSlotProps: slotProps.root,
     ownerState,
     className: [classes.root, className]
   });
-  const paperSlotProps = useSlotProps({
-    elementType: PaperSlot,
-    externalSlotProps: paperExternalSlotProps,
-    ownerState,
-    className: classes.paper
+  const [PaperSlot, paperSlotProps] = useSlot('paper', {
+    className: classes.paper,
+    elementType: MenuPaper,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    ownerState
+  });
+  const [ListSlot, listSlotProps] = useSlot('list', {
+    className: clsx(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__*/_jsx(MenuRoot, {
     onClose: onClose,
     anchorOrigin: {
@@ -167,31 +191,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__*/_jsx(MenuMenuList, {
-      onKeyDown: handleListKeyDown,
+    children: /*#__PURE__*/_jsx(ListSlot, {
       actions: menuListActionsRef,
       autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
       autoFocusItem: autoFocusItem,
       variant: variant,
-      ...MenuListProps,
-      className: clsx(classes.list, MenuListProps.className),
+      ...listSlotProps,
       children: children
     })
   });
@@ -236,6 +267,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   disableAutoFocusItem: PropTypes.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.object,
@@ -263,16 +295,22 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * @default {}
    */
   slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    list: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: 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,
+    list: PropTypes.elementType,
     paper: PropTypes.elementType,
-    root: PropTypes.elementType
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -290,6 +328,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.object,

package/Modal/Modal.js

@@ -15,7 +15,6 @@ import Backdrop from "../Backdrop/index.js";
 import useModal from "./useModal.js";
 import { getModalUtilityClass } from "./modalClasses.js";
 import useSlot from "../utils/useSlot.js";
-import { useForkRef } from "../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -158,7 +157,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
   const externalForwardedProps = {
-    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -170,19 +168,22 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     }
   };
   const [RootSlot, rootProps] = useSlot('root', {
+    ref,
     elementType: ModalRoot,
-    externalForwardedProps,
-    getSlotProps: getRootProps,
-    additionalProps: {
-      ref,
-      as: component
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
     },
+    getSlotProps: getRootProps,
     ownerState,
     className: clsx(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
   const [BackdropSlot, backdropProps] = useSlot('backdrop', {
+    ref: BackdropProps?.ref,
     elementType: BackdropComponent,
     externalForwardedProps,
+    shouldForwardComponentProp: true,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -200,7 +201,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     className: clsx(BackdropProps?.className, classes?.backdrop),
     ownerState
   });
-  const backdropRef = useForkRef(BackdropProps?.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -211,8 +211,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     children: /*#__PURE__*/_jsxs(RootSlot, {
       ...rootProps,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, {
-        ...backdropProps,
-        ref: backdropRef
+        ...backdropProps
       }) : null, /*#__PURE__*/_jsx(FocusTrap, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,

package/Popover/Popover.d.ts

@@ -1,23 +1,74 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/utils';
 import { BackdropProps, InternalStandardProps as StandardProps } from '..';
 import Paper, { PaperProps } from '../Paper';
-import Modal, { ModalOwnerState, ModalProps } from '../Modal';
+import Modal, { ModalProps } from '../Modal';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { PopoverClasses } from './popoverClasses';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface PopoverSlots {
+  /**
+   * The component used for the root slot.
+   * @default Modal
+   */
   root: React.ElementType;
+  /**
+   * The component used for the paper slot.
+   * @default Paper
+   */
   paper: React.ElementType;
+  /**
+   * The component used for the transition slot.
+   * @default Grow
+   */
+  transition: React.ElementType;
+  /**
+   * The component used for the backdrop slot.
+   * @default Backdrop
+   */
+  backdrop: React.ElementType;
 }
 
+export interface PopoverRootSlotPropsOverrides {}
+export interface PopoverPaperSlotPropsOverrides {}
+export interface PopoverTransitionSlotPropsOverrides {}
+export interface PopoverBackdropSlotPropsOverrides {}
+
 export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<
   PopoverSlots,
   {
-    root: SlotProps<typeof Modal, {}, ModalOwnerState>;
-    paper: SlotProps<typeof Paper, {}, {}>;
+    /**
+     * 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<typeof Modal, PopoverRootSlotPropsOverrides, PopoverOwnerState>;
+    /**
+     * 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<typeof Paper, PopoverPaperSlotPropsOverrides, PopoverOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
+     */
+    transition: SlotComponentProps<
+      // use SlotComponentProps because transition slot does not support `component` and `sx` prop
+      React.ElementType,
+      TransitionProps & PopoverTransitionSlotPropsOverrides,
+      PopoverOwnerState
+    >;
+    /**
+     * 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>,
+      PopoverBackdropSlotPropsOverrides,
+      PopoverOwnerState
+    >;
   }
 >;
 
@@ -87,8 +138,7 @@ export interface PopoverProps
   anchorReference?: PopoverReference;
   /**
    * 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',
@@ -102,7 +152,7 @@ export interface PopoverProps
   BackdropComponent?: React.ElementType<BackdropProps>;
   /**
    * 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?: Partial<BackdropProps>;
   /**
@@ -166,6 +216,7 @@ export interface PopoverProps
   /**
    * 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?: React.JSXElementConstructor<
@@ -179,11 +230,14 @@ export interface PopoverProps
   /**
    * 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?: TransitionProps;
 }
 
+export interface PopoverOwnerState extends Omit<PopoverProps, 'slots' | 'slotProps'> {}
+
 export interface PopoverActions {
   updatePosition(): void;
 }