[material-ui][SpeedDial] Add missing root slot

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

@@ -30,11 +30,17 @@
     "open": { "type": { "name": "bool" } },
     "openIcon": { "type": { "name": "node" } },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ transition?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ root?: elementType, transition?: elementType }"
+      },
       "default": "{}"
     },
     "sx": {
@@ -69,6 +75,12 @@
     "import { SpeedDial } from '@mui/material';"
   ],
   "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root slot.",
+      "default": "'div'",
+      "class": "MuiSpeedDial-root"
+    },
     {
       "name": "transition",
       "description": "The component that renders the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
@@ -118,12 +130,6 @@
       "className": "MuiSpeedDial-fab",
       "description": "Styles applied to the Fab component.",
       "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiSpeedDial-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,

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

@@ -73,10 +73,10 @@
     "directionUp": {
       "description": "Styles applied to the root element if direction="up""
     },
-    "fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" },
-    "root": { "description": "Styles applied to the root element." }
+    "fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" }
   },
   "slotDescriptions": {
+    "root": "The component that renders the root slot.",
     "transition": "The component that renders the transition. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

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

@@ -11,6 +11,11 @@ export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';
 export type OpenReason = 'toggle' | 'focus' | 'mouseEnter';
 
 export interface SpeedDialSlots {
+  /**
+   * The component that renders the root slot.
+   * @default 'div'
+   */
+  root: React.ElementType;
   /**
    * The component that renders the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
@@ -22,6 +27,11 @@ export interface SpeedDialSlots {
 export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<
   SpeedDialSlots,
   {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on div element.
+     */
+    root: SlotComponentProps<'div', React.HTMLAttributes<HTMLDivElement>, SpeedDialOwnerState>;
     /**
      * Props forwarded to the transition slot.
      * By default, the avaible props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component.

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

@@ -395,25 +395,51 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) {
     slotProps: backwardCompatibleSlotProps,
   };
 
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    elementType: SpeedDialRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    ownerState,
+    ref,
+    className: clsx(classes.root, className),
+    additionalProps: {
+      role: 'presentation',
+    },
+    getSlotProps: (handlers) => ({
+      ...handlers,
+      onKeyDown: (event) => {
+        handlers.onKeyDown?.(event);
+        handleKeyDown(event);
+      },
+      onBlur: (event) => {
+        handlers.onBlur?.(event);
+        handleClose(event);
+      },
+      onFocus: (event) => {
+        handlers.onFocus?.(event);
+        handleOpen(event);
+      },
+      onMouseEnter: (event) => {
+        handlers.onMouseEnter?.(event);
+        handleOpen(event);
+      },
+      onMouseLeave: (event) => {
+        handlers.onMouseLeave?.(event);
+        handleClose(event);
+      },
+    }),
+  });
+
   const [TransitionSlot, transitionProps] = useSlot('transition', {
     elementType: Zoom,
     externalForwardedProps,
     ownerState,
   });
 
   return (
-    <SpeedDialRoot
-      className={clsx(classes.root, className)}
-      ref={ref}
-      role="presentation"
-      onKeyDown={handleKeyDown}
-      onBlur={handleClose}
-      onFocus={handleOpen}
-      onMouseEnter={handleOpen}
-      onMouseLeave={handleClose}
-      ownerState={ownerState}
-      {...other}
-    >
+    <RootSlot {...rootSlotProps}>
       <TransitionSlot in={!hidden} timeout={transitionDuration} unmountOnExit {...transitionProps}>
         <SpeedDialFab
           color="primary"
@@ -441,7 +467,7 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) {
       >
         {children}
       </SpeedDialActions>
-    </SpeedDialRoot>
+    </RootSlot>
   );
 });
 
@@ -534,13 +560,15 @@ SpeedDial.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slotProps: PropTypes.shape({
+    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({
+    root: PropTypes.elementType,
     transition: PropTypes.elementType,
   }),
   /**

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

@@ -35,7 +35,7 @@ describe('<SpeedDial />', () => {
     refInstanceof: window.HTMLDivElement,
     muiName: 'MuiSpeedDial',
     testVariantProps: { direction: 'right' },
-    slots: { transition: { testWithElement: null } },
+    slots: { transition: { testWithElement: null }, root: { expectedClassName: classes.root } },
     skip: [
       'componentProp', // react-transition-group issue
       'componentsProp',