[material-ui][Tooltip] deprecate *Component and *Props for v6

docs/data/material/components/material-icons/SearchIcons.js

@@ -292,8 +292,10 @@ const DialogDetails = React.memo(function DialogDetails(props) {
             <Tooltip
               placement="right"
               title={copied1 ? t('copied') : t('clickToCopy')}
-              TransitionProps={{
-                onExited: () => setCopied1(false),
+              slotProps={{
+                transition: {
+                  onExited: () => setCopied1(false),
+                },
               }}
             >
               <Title component="span" variant="inherit" onClick={handleClick(1)}>
@@ -304,7 +306,9 @@ const DialogDetails = React.memo(function DialogDetails(props) {
           <Tooltip
             placement="top"
             title={copied2 ? t('copied') : t('clickToCopy')}
-            TransitionProps={{ onExited: () => setCopied2(false) }}
+            slotProps={{
+              transition: { onExited: () => setCopied2(false) },
+            }}
           >
             <Markdown
               copyButtonHidden

docs/data/material/components/tooltips/AnchorElTooltips.js

@@ -23,16 +23,18 @@ export default function AnchorElTooltips() {
       title="Add"
       placement="top"
       arrow
-      PopperProps={{
-        popperRef,
-        anchorEl: {
-          getBoundingClientRect: () => {
-            return new DOMRect(
-              positionRef.current.x,
-              areaRef.current.getBoundingClientRect().y,
-              0,
-              0,
-            );
+      slotProps={{
+        popper: {
+          popperRef,
+          anchorEl: {
+            getBoundingClientRect: () => {
+              return new DOMRect(
+                positionRef.current.x,
+                areaRef.current.getBoundingClientRect().y,
+                0,
+                0,
+              );
+            },
           },
         },
       }}

docs/data/material/components/tooltips/AnchorElTooltips.tsx

@@ -24,16 +24,18 @@ export default function AnchorElTooltips() {
       title="Add"
       placement="top"
       arrow
-      PopperProps={{
-        popperRef,
-        anchorEl: {
-          getBoundingClientRect: () => {
-            return new DOMRect(
-              positionRef.current.x,
-              areaRef.current!.getBoundingClientRect().y,
-              0,
-              0,
-            );
+      slotProps={{
+        popper: {
+          popperRef,
+          anchorEl: {
+            getBoundingClientRect: () => {
+              return new DOMRect(
+                positionRef.current.x,
+                areaRef.current!.getBoundingClientRect().y,
+                0,
+                0,
+              );
+            },
           },
         },
       }}

docs/data/material/components/tooltips/TransitionsTooltips.js

@@ -11,13 +11,22 @@ export default function TransitionsTooltips() {
         <Button>Grow</Button>
       </Tooltip>
       <Tooltip
-        TransitionComponent={Fade}
-        TransitionProps={{ timeout: 600 }}
         title="Add"
+        slots={{
+          transition: Fade,
+        }}
+        slotProps={{
+          transition: { timeout: 600 },
+        }}
       >
         <Button>Fade</Button>
       </Tooltip>
-      <Tooltip TransitionComponent={Zoom} title="Add">
+      <Tooltip
+        title="Add"
+        slots={{
+          transition: Zoom,
+        }}
+      >
         <Button>Zoom</Button>
       </Tooltip>
     </div>

docs/data/material/components/tooltips/TransitionsTooltips.tsx

@@ -11,13 +11,22 @@ export default function TransitionsTooltips() {
         <Button>Grow</Button>
       </Tooltip>
       <Tooltip
-        TransitionComponent={Fade}
-        TransitionProps={{ timeout: 600 }}
         title="Add"
+        slots={{
+          transition: Fade,
+        }}
+        slotProps={{
+          transition: { timeout: 600 },
+        }}
       >
         <Button>Fade</Button>
       </Tooltip>
-      <Tooltip TransitionComponent={Zoom} title="Add">
+      <Tooltip
+        title="Add"
+        slots={{
+          transition: Zoom,
+        }}
+      >
         <Button>Zoom</Button>
       </Tooltip>
     </div>

docs/data/material/components/tooltips/TriggersTooltips.js

@@ -37,15 +37,17 @@ export default function TriggersTooltips() {
           <ClickAwayListener onClickAway={handleTooltipClose}>
             <div>
               <Tooltip
-                PopperProps={{
-                  disablePortal: true,
-                }}
                 onClose={handleTooltipClose}
                 open={open}
                 disableFocusListener
                 disableHoverListener
                 disableTouchListener
                 title="Add"
+                slotProps={{
+                  popper: {
+                    disablePortal: true,
+                  },
+                }}
               >
                 <Button onClick={handleTooltipOpen}>Click</Button>
               </Tooltip>

docs/data/material/components/tooltips/TriggersTooltips.tsx

@@ -37,15 +37,17 @@ export default function TriggersTooltips() {
           <ClickAwayListener onClickAway={handleTooltipClose}>
             <div>
               <Tooltip
-                PopperProps={{
-                  disablePortal: true,
-                }}
                 onClose={handleTooltipClose}
                 open={open}
                 disableFocusListener
                 disableHoverListener
                 disableTouchListener
                 title="Add"
+                slotProps={{
+                  popper: {
+                    disablePortal: true,
+                  },
+                }}
               >
                 <Button onClick={handleTooltipOpen}>Click</Button>
               </Tooltip>

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1133,3 +1133,41 @@ The SpeedDial's `TransitionProps` was deprecated in favor of `slotProps.transiti
 +  slotProps={{ transition: { unmountOnExit: true } }}
  />
 ```
+
+## Tooltip
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tooltip-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/tooltip-props <path>
+```
+
+### \*Component props
+
+All of the Tooltip's slot (`*Component`) props were deprecated in favor of equivalent `slots` entries:
+
+```diff
+ <Tooltip
+-    PopperComponent={CustomPopperComponent}
+-    TransitionComponent={CustomTransitionComponent}
++    slots={{
++        popper: CustomPopperComponent,
++        transition: CustomTransitionComponent,
++    }}
+ />
+```
+
+### \*Props props
+
+All of the Tooltip's slot props (`*Props`) props were deprecated in favor of equivalent `slotProps` entries:
+
+```diff
+ <Tooltip
+-    PopperProps={CustomPopperProps}
+-    TransitionProps={CustomTransitionProps}
++    slotProps={{
++        popper: CustomPopperProps,
++        transition: CustomTransitionProps,
++    }}
+ />
+```

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

@@ -51,8 +51,16 @@
       },
       "default": "'bottom'"
     },
-    "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" },
-    "PopperProps": { "type": { "name": "object" }, "default": "{}" },
+    "PopperComponent": {
+      "type": { "name": "elementType" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.popper</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
+    "PopperProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.popper</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "slotProps": {
       "type": {
         "name": "shape",
@@ -75,8 +83,16 @@
       "additionalInfo": { "sx": true }
     },
     "title": { "type": { "name": "node" } },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
-    "TransitionProps": { "type": { "name": "object" } }
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    }
   },
   "name": "Tooltip",
   "imports": [

packages/mui-codemod/README.md

@@ -1030,6 +1030,48 @@ CSS transforms:
 npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>
 ```
 
+#### `tooltip-props`
+
+```diff
+ <Tooltip
+-    PopperComponent={CustomPopperComponent}
+-    TransitionComponent={CustomTransitionComponent}
+-    PopperProps={CustomPopperProps}
+-    TransitionProps={CustomTransitionProps}
++    slots={{
++        popper: CustomPopperComponent,
++        transition: CustomTransitionComponent,
++    }}
++    slotProps={{
++        popper: CustomPopperProps,
++        transition: CustomTransitionProps,
++    }}
+ />
+```
+
+```diff
+ MuiTooltip: {
+   defaultProps: {
+-    PopperComponent: CustomPopperComponent,
+-    TransitionComponent: CustomTransitionComponent,
+-    PopperProps: CustomPopperProps,
+-    TransitionProps: CustomTransitionProps,
++    slots: {
++       popper: CustomPopperComponent,
++       transition: CustomTransitionComponent,
++    },
++    slotProps: {
++       popper: CustomPopperProps,
++       transition: CustomTransitionProps,
++    },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/tooltip-props <path>
+```
+
 #### `step-label-props`
 
 ```diff

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -13,6 +13,7 @@ import transformStepLabelProps from '../step-label-props';
 import transformBackdropProps from '../backdrop-props';
 import transformStepConnectorClasses from '../step-connector-classes';
 import transformSpeedDialProps from '../speed-dial-props';
+import transformTooltipProps from '../tooltip-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -34,6 +35,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformBackdropProps(file, api, options);
   file.source = transformStepConnectorClasses(file, api, options);
   file.source = transformSpeedDialProps(file, api, options);
+  file.source = transformTooltipProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/tooltip-props/index.js

@@ -0,0 +1 @@
+export { default } from './tooltip-props';

packages/mui-codemod/src/deprecations/tooltip-props/test-cases/actual.js

@@ -0,0 +1,36 @@
+import Tooltip from '@mui/material/Tooltip';
+import {Tooltip as MyTooltip} from '@mui/material';
+
+<Tooltip
+  PopperComponent={CustomPopper}
+  TransitionComponent={CustomTransition}
+  PopperProps={{ disablePortal: true }}
+  TransitionProps={{ timeout: 200 }}
+/>;
+
+<Tooltip
+  PopperComponent={CustomPopper}
+  TransitionComponent={CustomTransition}
+  PopperProps={{ disablePortal: true }}
+  TransitionProps={{ timeout: 200 }}
+  slotProps={{
+    tooltip: { height: 20 }
+  }}
+  slots={{
+    tooltip: "div",
+  }}
+/>;
+
+<MyTooltip
+  PopperComponent={CustomPopper}
+  TransitionComponent={CustomTransition}
+  PopperProps={{ disablePortal: true }}
+  TransitionProps={{ timeout: 200 }}
+/>;
+
+<CustomTooltip
+  PopperComponent={CustomPopper}
+  TransitionComponent={CustomTransition}
+  PopperProps={{ disablePortal: true }}
+  TransitionProps={{ timeout: 200 }}
+/>