[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

@@ -1472,6 +1472,36 @@ The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
  />
 ```
 
+### \*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,
++    }}
+ />
+```
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:

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

@@ -55,8 +55,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",
@@ -79,8 +87,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

@@ -1312,6 +1312,43 @@ npx @mui/codemod@next deprecations/outlined-input-props <path>
 npx @mui/codemod@next deprecations/slider-props <path>
 ```
 
+#### `step-connector-classes`
+
+JS transforms:
+
+```diff
+ import { stepConnectorClasses } from '@mui/material/StepConnector';
+
+ MuiStepConnector: {
+   styleOverrides: {
+     root: {
+-      [`& .${stepConnectorClasses.lineHorizontal}`]: {
++      [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
+         color: 'red',
+        },
+-      [`& .${stepConnectorClasses.lineVertical}`]: {
++      [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
+         color: 'red',
+        },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal
++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped
+-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical
++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>
+```
+
 #### `tooltip-props`
 
 ```diff
@@ -1334,33 +1371,46 @@ npx @mui/codemod@next deprecations/slider-props <path>
  },
 ```
 
-```bash
-npx @mui/codemod@next deprecations/tooltip-props <path>
+```diff
+ <Tooltip
+-    PopperComponent={CustomPopperComponent}
+-    TransitionComponent={CustomTransitionComponent}
+-    PopperProps={CustomPopperProps}
+-    TransitionProps={CustomTransitionProps}
++    slots={{
++        popper: CustomPopperComponent,
++        transition: CustomTransitionComponent,
++    }}
++    slotProps={{
++        popper: CustomPopperProps,
++        transition: CustomTransitionProps,
++    }}
+ />
 ```
 
-#### `step-connector-classes`
-
-JS transforms:
-
 ```diff
- import { stepConnectorClasses } from '@mui/material/StepConnector';
-
- MuiStepConnector: {
-   styleOverrides: {
-     root: {
--      [`& .${stepConnectorClasses.lineHorizontal}`]: {
-+      [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
-         color: 'red',
-        },
--      [`& .${stepConnectorClasses.lineVertical}`]: {
-+      [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
-         color: 'red',
-        },
-     },
+ 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

@@ -22,6 +22,7 @@ import transformStepConnectorClasses from '../step-connector-classes';
 import transformStepLabelProps from '../step-label-props';
 import transformTextFieldProps from '../text-field-props';
 import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
+import transformTooltipProps from '../tooltip-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -52,6 +53,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformStepLabelProps(file, api, options);
   file.source = transformTextFieldProps(file, api, options);
   file.source = transformToggleButtonGroupClasses(file, api, options);
+  file.source = transformTooltipProps(file, api, options);
 
   return file.source;
 }