[material-ui][SpeedDial] Fix SpeedDial tooltip placement

docs/pages/material-ui/api/speed-dial-action.json

@@ -41,36 +41,6 @@
       "className": "MuiSpeedDialAction-fabClosed",
       "description": "Styles applied to the Fab component if `open={false}`.",
       "isGlobal": false
-    },
-    {
-      "key": "staticTooltip",
-      "className": "MuiSpeedDialAction-staticTooltip",
-      "description": "Styles applied to the root element if `tooltipOpen={true}`.",
-      "isGlobal": false
-    },
-    {
-      "key": "staticTooltipClosed",
-      "className": "MuiSpeedDialAction-staticTooltipClosed",
-      "description": "Styles applied to the root element if `tooltipOpen={true}` and `open={false}`.",
-      "isGlobal": false
-    },
-    {
-      "key": "staticTooltipLabel",
-      "className": "MuiSpeedDialAction-staticTooltipLabel",
-      "description": "Styles applied to the static tooltip label if `tooltipOpen={true}`.",
-      "isGlobal": false
-    },
-    {
-      "key": "tooltipPlacementLeft",
-      "className": "MuiSpeedDialAction-tooltipPlacementLeft",
-      "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"left\"``",
-      "isGlobal": false
-    },
-    {
-      "key": "tooltipPlacementRight",
-      "className": "MuiSpeedDialAction-tooltipPlacementRight",
-      "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"right\"``",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/speed-dial-action/speed-dial-action.json

@@ -29,27 +29,6 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Fab component",
       "conditions": "<code>open={false}</code>"
-    },
-    "staticTooltip": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>tooltipOpen={true}</code>"
-    },
-    "staticTooltipClosed": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>tooltipOpen={true}</code> and <code>open={false}</code>"
-    },
-    "staticTooltipLabel": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the static tooltip label",
-      "conditions": "<code>tooltipOpen={true}</code>"
-    },
-    "tooltipPlacementLeft": {
-      "description": "Styles applied to the root element if <code>tooltipOpen={true}</code> and `tooltipPlacement=&quot;left&quot;``"
-    },
-    "tooltipPlacementRight": {
-      "description": "Styles applied to the root element if <code>tooltipOpen={true}</code> and `tooltipPlacement=&quot;right&quot;``"
     }
   }
 }

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

@@ -7,23 +7,16 @@ import composeClasses from '@mui/utils/composeClasses';
 import { emphasize } from '@mui/system/colorManipulator';
 import { styled, createUseThemeProps } from '../zero-styled';
 import Fab from '../Fab';
-import Tooltip from '../Tooltip';
-import capitalize from '../utils/capitalize';
-import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
+import Tooltip, { tooltipClasses } from '../Tooltip';
+import { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
 
 const useThemeProps = createUseThemeProps('MuiSpeedDialAction');
 
 const useUtilityClasses = (ownerState) => {
-  const { open, tooltipPlacement, classes } = ownerState;
+  const { open, classes } = ownerState;
 
   const slots = {
     fab: ['fab', !open && 'fabClosed'],
-    staticTooltip: [
-      'staticTooltip',
-      `tooltipPlacement${capitalize(tooltipPlacement)}`,
-      !open && 'staticTooltipClosed',
-    ],
-    staticTooltipLabel: ['staticTooltipLabel'],
   };
 
   return composeClasses(slots, getSpeedDialActionUtilityClass, classes);
@@ -186,25 +179,19 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref)
 
   if (tooltipOpenProp) {
     return (
-      <SpeedDialActionStaticTooltip
+      <PersistentTooltip
         id={id}
         ref={ref}
-        className={classes.staticTooltip}
-        ownerState={ownerState}
+        title={tooltipTitle}
+        placement={tooltipPlacement}
+        onClose={handleTooltipClose}
+        onOpen={handleTooltipOpen}
+        open={open && tooltipOpenProp}
+        classes={TooltipClasses}
         {...other}
       >
-        <SpeedDialActionStaticTooltipLabel
-          style={transitionStyle}
-          id={`${id}-label`}
-          className={classes.staticTooltipLabel}
-          ownerState={ownerState}
-        >
-          {tooltipTitle}
-        </SpeedDialActionStaticTooltipLabel>
-        {React.cloneElement(fab, {
-          'aria-labelledby': `${id}-label`,
-        })}
-      </SpeedDialActionStaticTooltip>
+        {fab}
+      </PersistentTooltip>
     );
   }
 

packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts

@@ -6,16 +6,6 @@ export interface SpeedDialActionClasses {
   fab: string;
   /** Styles applied to the Fab component if `open={false}`. */
   fabClosed: string;
-  /** Styles applied to the root element if `tooltipOpen={true}`. */
-  staticTooltip: string;
-  /** Styles applied to the root element if `tooltipOpen={true}` and `open={false}`. */
-  staticTooltipClosed: string;
-  /** Styles applied to the static tooltip label if `tooltipOpen={true}`. */
-  staticTooltipLabel: string;
-  /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="left"`` */
-  tooltipPlacementLeft: string;
-  /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="right"`` */
-  tooltipPlacementRight: string;
 }
 
 export type SpeedDialActionClassKey = keyof SpeedDialActionClasses;
@@ -26,15 +16,7 @@ export function getSpeedDialActionUtilityClass(slot: string): string {
 
 const speedDialActionClasses: SpeedDialActionClasses = generateUtilityClasses(
   'MuiSpeedDialAction',
-  [
-    'fab',
-    'fabClosed',
-    'staticTooltip',
-    'staticTooltipClosed',
-    'staticTooltipLabel',
-    'tooltipPlacementLeft',
-    'tooltipPlacementRight',
-  ],
+  ['fab', 'fabClosed'],
 );
 
 export default speedDialActionClasses;