@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/SpeedDial/SpeedDial.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,9 +13,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Zoom = _interopRequireDefault(require("../Zoom"));
 var _Fab = _interopRequireDefault(require("../Fab"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -25,10 +23,8 @@ var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _speedDialClasses = _interopRequireWildcard(require("./speedDialClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ref"],
-  _excluded2 = ["ariaLabel", "FabProps", "children", "className", "direction", "hidden", "icon", "onBlur", "onClose", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onOpen", "open", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"],
-  _excluded3 = ["ref"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -55,7 +51,7 @@ function getOrientation(direction) {
 }
 const dialRadius = 32;
 const spacingActions = 16;
-const SpeedDialRoot = (0, _styled.default)('div', {
+const SpeedDialRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiSpeedDial',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -64,51 +60,71 @@ const SpeedDialRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, styles[`direction${(0, _capitalize.default)(ownerState.direction)}`]];
   }
-})(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   zIndex: (theme.vars || theme).zIndex.speedDial,
   display: 'flex',
   alignItems: 'center',
-  pointerEvents: 'none'
-}, ownerState.direction === 'up' && {
-  flexDirection: 'column-reverse',
-  [`& .${_speedDialClasses.default.actions}`]: {
-    flexDirection: 'column-reverse',
-    marginBottom: -dialRadius,
-    paddingBottom: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'down' && {
-  flexDirection: 'column',
-  [`& .${_speedDialClasses.default.actions}`]: {
-    flexDirection: 'column',
-    marginTop: -dialRadius,
-    paddingTop: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'left' && {
-  flexDirection: 'row-reverse',
-  [`& .${_speedDialClasses.default.actions}`]: {
-    flexDirection: 'row-reverse',
-    marginRight: -dialRadius,
-    paddingRight: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'right' && {
-  flexDirection: 'row',
-  [`& .${_speedDialClasses.default.actions}`]: {
-    flexDirection: 'row',
-    marginLeft: -dialRadius,
-    paddingLeft: spacingActions + dialRadius
-  }
-}));
-const SpeedDialFab = (0, _styled.default)(_Fab.default, {
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      direction: 'up'
+    },
+    style: {
+      flexDirection: 'column-reverse',
+      [`& .${_speedDialClasses.default.actions}`]: {
+        flexDirection: 'column-reverse',
+        marginBottom: -dialRadius,
+        paddingBottom: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'down'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${_speedDialClasses.default.actions}`]: {
+        flexDirection: 'column',
+        marginTop: -dialRadius,
+        paddingTop: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'left'
+    },
+    style: {
+      flexDirection: 'row-reverse',
+      [`& .${_speedDialClasses.default.actions}`]: {
+        flexDirection: 'row-reverse',
+        marginRight: -dialRadius,
+        paddingRight: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'right'
+    },
+    style: {
+      flexDirection: 'row',
+      [`& .${_speedDialClasses.default.actions}`]: {
+        flexDirection: 'row',
+        marginLeft: -dialRadius,
+        paddingLeft: spacingActions + dialRadius
+      }
+    }
+  }]
+})));
+const SpeedDialFab = (0, _zeroStyled.styled)(_Fab.default, {
   name: 'MuiSpeedDial',
   slot: 'Fab',
   overridesResolver: (props, styles) => styles.fab
-})(() => ({
+})({
   pointerEvents: 'auto'
-}));
-const SpeedDialActions = (0, _styled.default)('div', {
+});
+const SpeedDialActions = (0, _zeroStyled.styled)('div', {
   name: 'MuiSpeedDial',
   slot: 'Actions',
   overridesResolver: (props, styles) => {
@@ -117,59 +133,67 @@ const SpeedDialActions = (0, _styled.default)('div', {
     } = props;
     return [styles.actions, !ownerState.open && styles.actionsClosed];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   display: 'flex',
-  pointerEvents: 'auto'
-}, !ownerState.open && {
-  transition: 'top 0s linear 0.2s',
-  pointerEvents: 'none'
-}));
+  pointerEvents: 'auto',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open,
+    style: {
+      transition: 'top 0s linear 0.2s',
+      pointerEvents: 'none'
+    }
+  }]
+});
 const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiSpeedDial'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      ariaLabel,
-      FabProps: {
-        ref: origDialButtonRef
-      } = {},
-      children: childrenProp,
-      className,
-      direction = 'up',
-      hidden = false,
-      icon,
-      onBlur,
-      onClose,
-      onFocus,
-      onKeyDown,
-      onMouseEnter,
-      onMouseLeave,
-      onOpen,
-      open: openProp,
-      TransitionComponent = _Zoom.default,
-      transitionDuration = defaultTransitionDuration,
-      TransitionProps
-    } = props,
-    FabProps = (0, _objectWithoutPropertiesLoose2.default)(props.FabProps, _excluded),
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    ariaLabel,
+    FabProps: {
+      ref: origDialButtonRef,
+      ...FabProps
+    } = {},
+    children: childrenProp,
+    className,
+    direction = 'up',
+    hidden = false,
+    icon,
+    onBlur,
+    onClose,
+    onFocus,
+    onKeyDown,
+    onMouseEnter,
+    onMouseLeave,
+    onOpen,
+    open: openProp,
+    openIcon,
+    slots = {},
+    slotProps = {},
+    TransitionComponent: TransitionComponentProp,
+    TransitionProps: TransitionPropsProp,
+    transitionDuration = defaultTransitionDuration,
+    ...other
+  } = props;
   const [open, setOpenState] = (0, _useControlled.default)({
     controlled: openProp,
     default: false,
     name: 'SpeedDial',
     state: 'open'
   });
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     open,
     direction
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const eventTimer = (0, _useTimeout.default)();
 
@@ -325,26 +349,43 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     return /*#__PURE__*/React.isValidElement(child);
   });
   const children = allItems.map((child, index) => {
-    const _child$props = child.props,
-      {
-        FabProps: {
-          ref: origButtonRef
-        } = {},
-        tooltipPlacement: tooltipPlacementProp
-      } = _child$props,
-      ChildFabProps = (0, _objectWithoutPropertiesLoose2.default)(_child$props.FabProps, _excluded3);
+    const {
+      FabProps: {
+        ref: origButtonRef,
+        ...ChildFabProps
+      } = {},
+      tooltipPlacement: tooltipPlacementProp
+    } = child.props;
     const tooltipPlacement = tooltipPlacementProp || (getOrientation(direction) === 'vertical' ? 'left' : 'top');
     return /*#__PURE__*/React.cloneElement(child, {
-      FabProps: (0, _extends2.default)({}, ChildFabProps, {
+      FabProps: {
+        ...ChildFabProps,
         ref: createHandleSpeedDialActionButtonRef(index, origButtonRef)
-      }),
+      },
       delay: 30 * (open ? index : allItems.length - index),
       open,
       tooltipPlacement,
       id: `${id}-action-${index}`
     });
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpeedDialRoot, (0, _extends2.default)({
+  const backwardCompatibleSlots = {
+    transition: TransitionComponentProp,
+    ...slots
+  };
+  const backwardCompatibleSlotProps = {
+    transition: TransitionPropsProp,
+    ...slotProps
+  };
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [TransitionSlot, transitionProps] = (0, _useSlot.default)('transition', {
+    elementType: _Zoom.default,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpeedDialRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     role: "presentation",
@@ -353,20 +394,20 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     onFocus: handleOpen,
     onMouseEnter: handleOpen,
     onMouseLeave: handleClose,
-    ownerState: ownerState
-  }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+    ownerState: ownerState,
+    ...other,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
       in: !hidden,
       timeout: transitionDuration,
-      unmountOnExit: true
-    }, TransitionProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialFab, (0, _extends2.default)({
+      unmountOnExit: true,
+      ...transitionProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialFab, {
         color: "primary",
         "aria-label": ariaLabel,
         "aria-haspopup": "true",
         "aria-expanded": open,
-        "aria-controls": `${id}-actions`
-      }, FabProps, {
+        "aria-controls": `${id}-actions`,
+        ...FabProps,
         onClick: handleClick,
         className: (0, _clsx.default)(classes.fab, FabProps.className),
         ref: handleFabRef,
@@ -374,8 +415,8 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
         children: /*#__PURE__*/React.isValidElement(icon) && (0, _isMuiElement.default)(icon, ['SpeedDialIcon']) ? /*#__PURE__*/React.cloneElement(icon, {
           open
         }) : icon
-      }))
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialActions, {
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialActions, {
       id: `${id}-actions`,
       role: "menu",
       "aria-orientation": getOrientation(direction),
@@ -383,7 +424,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
       ownerState: ownerState,
       children: children
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -469,6 +510,20 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
    * The icon to display in the SpeedDial Fab when the SpeedDial is open.
    */
   openIcon: _propTypes.default.node,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    transition: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/SpeedDialAction/SpeedDialAction.js

@@ -7,21 +7,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Fab = _interopRequireDefault(require("../Fab"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _speedDialActionClasses = _interopRequireWildcard(require("./speedDialActionClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "delay", "FabProps", "icon", "id", "open", "TooltipClasses", "tooltipOpen", "tooltipPlacement", "tooltipTitle"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -37,7 +35,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _speedDialActionClasses.getSpeedDialActionUtilityClass, classes);
 };
-const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
+const SpeedDialActionFab = (0, _zeroStyled.styled)(_Fab.default, {
   name: 'MuiSpeedDialAction',
   slot: 'Fab',
   skipVariantsResolver: false,
@@ -47,10 +45,9 @@ const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
     } = props;
     return [styles.fab, !ownerState.open && styles.fabClosed];
   }
-})(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   margin: 8,
   color: (theme.vars || theme).palette.text.secondary,
   backgroundColor: (theme.vars || theme).palette.background.paper,
@@ -60,12 +57,18 @@ const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
   })}, opacity 0.8s`,
-  opacity: 1
-}, !ownerState.open && {
-  opacity: 0,
-  transform: 'scale(0)'
-}));
-const SpeedDialActionStaticTooltip = (0, _styled.default)('span', {
+  opacity: 1,
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open,
+    style: {
+      opacity: 0,
+      transform: 'scale(0)'
+    }
+  }]
+})));
+const SpeedDialActionStaticTooltip = (0, _zeroStyled.styled)('span', {
   name: 'MuiSpeedDialAction',
   slot: 'StaticTooltip',
   overridesResolver: (props, styles) => {
@@ -74,68 +77,90 @@ const SpeedDialActionStaticTooltip = (0, _styled.default)('span', {
     } = props;
     return [styles.staticTooltip, !ownerState.open && styles.staticTooltipClosed, styles[`tooltipPlacement${(0, _capitalize.default)(ownerState.tooltipPlacement)}`]];
   }
-})(({
-  theme,
-  ownerState
+})((0, _memoTheme.default)(({
+  theme
 }) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
-  [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: (0, _extends2.default)({
+  [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
     transition: theme.transitions.create(['transform', 'opacity'], {
       duration: theme.transitions.duration.shorter
     }),
     opacity: 1
-  }, !ownerState.open && {
-    opacity: 0,
-    transform: 'scale(0.5)'
-  }, ownerState.tooltipPlacement === 'left' && {
-    transformOrigin: '100% 50%',
-    right: '100%',
-    marginRight: 8
-  }, ownerState.tooltipPlacement === 'right' && {
-    transformOrigin: '0% 50%',
-    left: '100%',
-    marginLeft: 8
-  })
-}));
-const SpeedDialActionStaticTooltipLabel = (0, _styled.default)('span', {
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open,
+    style: {
+      [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
+        opacity: 0,
+        transform: 'scale(0.5)'
+      }
+    }
+  }, {
+    props: {
+      tooltipPlacement: 'left'
+    },
+    style: {
+      [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
+        transformOrigin: '100% 50%',
+        right: '100%',
+        marginRight: 8
+      }
+    }
+  }, {
+    props: {
+      tooltipPlacement: 'right'
+    },
+    style: {
+      [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
+        transformOrigin: '0% 50%',
+        left: '100%',
+        marginLeft: 8
+      }
+    }
+  }]
+})));
+const SpeedDialActionStaticTooltipLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiSpeedDialAction',
   slot: 'StaticTooltipLabel',
   overridesResolver: (props, styles) => styles.staticTooltipLabel
-})(({
+})((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({
-  position: 'absolute'
-}, theme.typography.body1, {
+}) => ({
+  position: 'absolute',
+  ...theme.typography.body1,
   backgroundColor: (theme.vars || theme).palette.background.paper,
   borderRadius: (theme.vars || theme).shape.borderRadius,
   boxShadow: (theme.vars || theme).shadows[1],
   color: (theme.vars || theme).palette.text.secondary,
   padding: '4px 16px',
   wordBreak: 'keep-all'
-}));
+})));
 const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiSpeedDialAction'
   });
   const {
-      className,
-      delay = 0,
-      FabProps = {},
-      icon,
-      id,
-      open,
-      TooltipClasses,
-      tooltipOpen: tooltipOpenProp = false,
-      tooltipPlacement = 'left',
-      tooltipTitle
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    delay = 0,
+    FabProps = {},
+    icon,
+    id,
+    open,
+    TooltipClasses,
+    tooltipOpen: tooltipOpenProp = false,
+    tooltipPlacement = 'left',
+    tooltipTitle,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     tooltipPlacement
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const [tooltipOpen, setTooltipOpen] = React.useState(tooltipOpenProp);
   const handleTooltipClose = () => {
@@ -147,23 +172,26 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const transitionStyle = {
     transitionDelay: `${delay}ms`
   };
-  const fab = /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialActionFab, (0, _extends2.default)({
+  const fab = /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialActionFab, {
     size: "small",
     className: (0, _clsx.default)(classes.fab, className),
     tabIndex: -1,
     role: "menuitem",
-    ownerState: ownerState
-  }, FabProps, {
-    style: (0, _extends2.default)({}, transitionStyle, FabProps.style),
+    ownerState: ownerState,
+    ...FabProps,
+    style: {
+      ...transitionStyle,
+      ...FabProps.style
+    },
     children: icon
-  }));
+  });
   if (tooltipOpenProp) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpeedDialActionStaticTooltip, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpeedDialActionStaticTooltip, {
       id: id,
       ref: ref,
       className: classes.staticTooltip,
-      ownerState: ownerState
-    }, other, {
+      ownerState: ownerState,
+      ...other,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialActionStaticTooltipLabel, {
         style: transitionStyle,
         id: `${id}-label`,
@@ -173,12 +201,12 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
       }), /*#__PURE__*/React.cloneElement(fab, {
         'aria-labelledby': `${id}-label`
       })]
-    }));
+    });
   }
   if (!open && tooltipOpen) {
     setTooltipOpen(false);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
     id: id,
     ref: ref,
     title: tooltipTitle,
@@ -186,10 +214,10 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     onClose: handleTooltipClose,
     onOpen: handleTooltipOpen,
     open: open && tooltipOpen,
-    classes: TooltipClasses
-  }, other, {
+    classes: TooltipClasses,
+    ...other,
     children: fab
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐