[material-ui][Popover] migrate useSlotProps to useSlot

docs/pages/material-ui/api/popover.json

@@ -73,20 +73,11 @@
     "import Popover from '@mui/material/Popover';",
     "import { Popover } from '@mui/material';"
   ],
-  "classes": [
-    {
-      "key": "paper",
-      "className": "MuiPopover-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiPopover-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    }
+  "slots": [
+    { "name": "root", "description": "", "class": "MuiPopover-root" },
+    { "name": "paper", "description": "", "class": "MuiPopover-paper" }
   ],
+  "classes": [],
   "spread": true,
   "themeDefaultProps": false,
   "muiName": "MuiPopover",

docs/translations/api-docs/menu/menu.json

@@ -26,9 +26,7 @@
     "PopoverClasses": {
       "description": "<code>classes</code> prop applied to the <a href=\"/material-ui/api/popover/\"><code>Popover</code></a> element."
     },
-    "slotProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones."
-    },
+    "slotProps": { "description": "The props used for each slot inside." },
     "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."

docs/translations/api-docs/popover/popover.json

@@ -33,9 +33,7 @@
     "PaperProps": {
       "description": "Props applied to the <a href=\"/material-ui/api/paper/\"><code>Paper</code></a> element.<br>This prop is an alias for <code>slotProps.paper</code> and will be overriden by it if both are used."
     },
-    "slotProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones."
-    },
+    "slotProps": { "description": "The props used for each slot inside." },
     "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
@@ -53,11 +51,6 @@
       "description": "Props applied to the transition element. By default, the element is based on this <a href=\"https://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
     }
   },
-  "classDescriptions": {
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
-    "root": { "description": "Styles applied to the root element." }
-  }
+  "classDescriptions": {},
+  "slotDescriptions": { "paper": "", "root": "" }
 }

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

@@ -285,9 +285,7 @@ Menu.propTypes /* remove-proptypes */ = {
    */
   PopoverClasses: PropTypes.object,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -296,7 +294,6 @@ Menu.propTypes /* remove-proptypes */ = {
   }),
   /**
    * The components used for each slot inside.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

packages/mui-material/src/Popover/Popover.d.ts

@@ -1,12 +1,25 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/base';
 import { InternalStandardProps as StandardProps } from '..';
 import Paper, { PaperProps } from '../Paper';
 import Modal, { ModalOwnerState, 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 {
+  root?: React.ElementType;
+  paper?: React.ElementType;
+}
+
+export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  PopoverSlots,
+  {
+    root: SlotProps<typeof Modal, {}, ModalOwnerState>;
+    paper: SlotProps<typeof Paper, {}, {}>;
+  }
+>;
 
 export interface PopoverOrigin {
   vertical: 'top' | 'center' | 'bottom' | number;
@@ -26,7 +39,8 @@ interface PopoverVirtualElement {
 }
 
 export interface PopoverProps
-  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'> {
+  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'>,
+    PopoverSlotsAndSlotProps {
   /**
    * A ref for imperative actions.
    * It currently only supports updatePosition() action.
@@ -109,25 +123,6 @@ export interface PopoverProps
    * @default {}
    */
   PaperProps?: Partial<PaperProps<React.ElementType>>;
-  /**
-   * The components used for each slot inside.
-   *
-   * @default {}
-   */
-  slots?: {
-    root?: React.ElementType;
-    paper?: React.ElementType;
-  };
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @default {}
-   */
-  slotProps?: {
-    root?: SlotComponentProps<typeof Modal, {}, ModalOwnerState>;
-    paper?: SlotComponentProps<typeof Paper, {}, {}>;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

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

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useSlotProps, isHostComponent } from '@mui/base/utils';
+import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import refType from '@mui/utils/refType';
@@ -18,6 +18,7 @@ import Grow from '../Grow';
 import Modal from '../Modal';
 import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
+import useSlot from '../utils/useSlot';
 
 const useThemeProps = createUseThemeProps('MuiPopover');
 
@@ -112,8 +113,8 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     marginThreshold = 16,
     open,
     PaperProps: PaperPropsProp = {},
-    slots,
-    slotProps,
+    slots = {},
+    slotProps = {},
     transformOrigin = {
       vertical: 'top',
       horizontal: 'left',
@@ -128,7 +129,6 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
   const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp;
 
   const paperRef = React.useRef();
-  const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
 
   const ownerState = {
     ...props,
@@ -377,31 +377,31 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
   const container =
     containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
 
-  const RootSlot = slots?.root ?? PopoverRoot;
-  const PaperSlot = slots?.paper ?? PopoverPaper;
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      ...slotProps,
+      paper: externalPaperSlotProps,
+    },
+  };
 
-  const paperProps = useSlotProps({
-    elementType: PaperSlot,
-    externalSlotProps: {
-      ...externalPaperSlotProps,
+  const [PaperSlot, paperProps] = useSlot('paper', {
+    elementType: PopoverPaper,
+    externalForwardedProps,
+    additionalProps: {
+      elevation,
+      className: clsx(classes.paper, externalPaperSlotProps?.className),
       style: isPositioned
         ? externalPaperSlotProps.style
         : { ...externalPaperSlotProps.style, opacity: 0 },
     },
-    additionalProps: {
-      elevation,
-      ref: handlePaperRef,
-    },
     ownerState,
-    className: clsx(classes.paper, externalPaperSlotProps?.className),
   });
 
-  const { slotProps: rootSlotPropsProp, ...rootProps } = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: slotProps?.root || {},
-    externalForwardedProps: other,
+  const [RootSlot, { slotProps: rootSlotPropsProp, ...rootProps }] = useSlot('root', {
+    elementType: PopoverRoot,
+    externalForwardedProps,
     additionalProps: {
-      ref,
       slotProps: { backdrop: { invisible: true } },
       container,
       open,
@@ -410,10 +410,14 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     className: clsx(classes.root, className),
   });
 
+  const handlePaperRef = useForkRef(paperRef, paperProps.ref);
+
   return (
     <RootSlot
       {...rootProps}
       {...(!isHostComponent(RootSlot) && { slotProps: rootSlotPropsProp, disableScrollLock })}
+      {...other}
+      ref={ref}
     >
       <TransitionComponent
         appear
@@ -423,7 +427,9 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
         timeout={transitionDuration}
         {...TransitionProps}
       >
-        <PaperSlot {...paperProps}>{children}</PaperSlot>
+        <PaperSlot {...paperProps} ref={handlePaperRef}>
+          {children}
+        </PaperSlot>
       </TransitionComponent>
     </RootSlot>
   );
@@ -573,9 +579,7 @@ Popover.propTypes /* remove-proptypes */ = {
     component: elementTypeAcceptingRef,
   }),
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -584,7 +588,6 @@ Popover.propTypes /* remove-proptypes */ = {
   }),
   /**
    * The components used for each slot inside.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

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

@@ -74,7 +74,6 @@ describe('<Popover />', () => {
       'themeStyleOverrides', // portal, can't determine the root
       'themeVariants',
       'reactTestRenderer', // react-transition-group issue
-      'slotPropsCallback', // not supported yet
     ],
   }));