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

package/node/Tooltip/Tooltip.js

@@ -7,31 +7,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.testReset = testReset;
-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 _useTimeout = _interopRequireWildcard(require("@mui/utils/useTimeout"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
+var _appendOwnerState = _interopRequireDefault(require("@mui/utils/appendOwnerState"));
+var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useId = _interopRequireDefault(require("../utils/useId"));
-var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _tooltipClasses = _interopRequireWildcard(require("./tooltipClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
 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; }
 function round(value) {
@@ -52,7 +50,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
 };
-const TooltipPopper = (0, _styled.default)(_Popper.default, {
+const TooltipPopper = (0, _zeroStyled.styled)(_Popper.default, {
   name: 'MuiTooltip',
   slot: 'Popper',
   overridesResolver: (props, styles) => {
@@ -61,60 +59,102 @@ const TooltipPopper = (0, _styled.default)(_Popper.default, {
     } = props;
     return [styles.popper, !ownerState.disableInteractive && styles.popperInteractive, ownerState.arrow && styles.popperArrow, !ownerState.open && styles.popperClose];
   }
-})(({
-  theme,
-  ownerState,
-  open
-}) => (0, _extends2.default)({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   zIndex: (theme.vars || theme).zIndex.tooltip,
-  pointerEvents: 'none'
-}, !ownerState.disableInteractive && {
-  pointerEvents: 'auto'
-}, !open && {
-  pointerEvents: 'none'
-}, ownerState.arrow && {
-  [`&[data-popper-placement*="bottom"] .${_tooltipClasses.default.arrow}`]: {
-    top: 0,
-    marginTop: '-0.71em',
-    '&::before': {
-      transformOrigin: '0 100%'
+  pointerEvents: 'none',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableInteractive,
+    style: {
+      pointerEvents: 'auto'
     }
-  },
-  [`&[data-popper-placement*="top"] .${_tooltipClasses.default.arrow}`]: {
-    bottom: 0,
-    marginBottom: '-0.71em',
-    '&::before': {
-      transformOrigin: '100% 0'
+  }, {
+    props: ({
+      open
+    }) => !open,
+    style: {
+      pointerEvents: 'none'
     }
-  },
-  [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: (0, _extends2.default)({}, !ownerState.isRtl ? {
-    left: 0,
-    marginLeft: '-0.71em'
-  } : {
-    right: 0,
-    marginRight: '-0.71em'
   }, {
-    height: '1em',
-    width: '0.71em',
-    '&::before': {
-      transformOrigin: '100% 100%'
+    props: ({
+      ownerState
+    }) => ownerState.arrow,
+    style: {
+      [`&[data-popper-placement*="bottom"] .${_tooltipClasses.default.arrow}`]: {
+        top: 0,
+        marginTop: '-0.71em',
+        '&::before': {
+          transformOrigin: '0 100%'
+        }
+      },
+      [`&[data-popper-placement*="top"] .${_tooltipClasses.default.arrow}`]: {
+        bottom: 0,
+        marginBottom: '-0.71em',
+        '&::before': {
+          transformOrigin: '100% 0'
+        }
+      },
+      [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
+        height: '1em',
+        width: '0.71em',
+        '&::before': {
+          transformOrigin: '100% 100%'
+        }
+      },
+      [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
+        height: '1em',
+        width: '0.71em',
+        '&::before': {
+          transformOrigin: '0 0'
+        }
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
+        left: 0,
+        marginLeft: '-0.71em'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !!ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
+        right: 0,
+        marginRight: '-0.71em'
+      }
     }
-  }),
-  [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: (0, _extends2.default)({}, !ownerState.isRtl ? {
-    right: 0,
-    marginRight: '-0.71em'
-  } : {
-    left: 0,
-    marginLeft: '-0.71em'
   }, {
-    height: '1em',
-    width: '0.71em',
-    '&::before': {
-      transformOrigin: '0 0'
-    }
-  })
-}));
-const TooltipTooltip = (0, _styled.default)('div', {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
+        right: 0,
+        marginRight: '-0.71em'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !!ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
+        left: 0,
+        marginLeft: '-0.71em'
+      }
+    }
+  }]
+})));
+const TooltipTooltip = (0, _zeroStyled.styled)('div', {
   name: 'MuiTooltip',
   slot: 'Tooltip',
   overridesResolver: (props, styles) => {
@@ -123,10 +163,9 @@ const TooltipTooltip = (0, _styled.default)('div', {
     } = props;
     return [styles.tooltip, ownerState.touch && styles.touch, ownerState.arrow && styles.tooltipArrow, styles[`tooltipPlacement${(0, _capitalize.default)(ownerState.placement.split('-')[0])}`]];
   }
-})(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : (0, _colorManipulator.alpha)(theme.palette.grey[700], 0.92),
   borderRadius: (theme.vars || theme).shape.borderRadius,
   color: (theme.vars || theme).palette.common.white,
@@ -136,56 +175,112 @@ const TooltipTooltip = (0, _styled.default)('div', {
   maxWidth: 300,
   margin: 2,
   wordWrap: 'break-word',
-  fontWeight: theme.typography.fontWeightMedium
-}, ownerState.arrow && {
-  position: 'relative',
-  margin: 0
-}, ownerState.touch && {
-  padding: '8px 16px',
-  fontSize: theme.typography.pxToRem(14),
-  lineHeight: `${round(16 / 14)}em`,
-  fontWeight: theme.typography.fontWeightRegular
-}, {
-  [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: (0, _extends2.default)({
+  fontWeight: theme.typography.fontWeightMedium,
+  [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
     transformOrigin: 'right center'
-  }, !ownerState.isRtl ? (0, _extends2.default)({
-    marginRight: '14px'
-  }, ownerState.touch && {
-    marginRight: '24px'
-  }) : (0, _extends2.default)({
-    marginLeft: '14px'
-  }, ownerState.touch && {
-    marginLeft: '24px'
-  })),
-  [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: (0, _extends2.default)({
+  },
+  [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
     transformOrigin: 'left center'
-  }, !ownerState.isRtl ? (0, _extends2.default)({
-    marginLeft: '14px'
-  }, ownerState.touch && {
-    marginLeft: '24px'
-  }) : (0, _extends2.default)({
-    marginRight: '14px'
-  }, ownerState.touch && {
-    marginRight: '24px'
-  })),
-  [`.${_tooltipClasses.default.popper}[data-popper-placement*="top"] &`]: (0, _extends2.default)({
+  },
+  [`.${_tooltipClasses.default.popper}[data-popper-placement*="top"] &`]: {
     transformOrigin: 'center bottom',
     marginBottom: '14px'
-  }, ownerState.touch && {
-    marginBottom: '24px'
-  }),
-  [`.${_tooltipClasses.default.popper}[data-popper-placement*="bottom"] &`]: (0, _extends2.default)({
+  },
+  [`.${_tooltipClasses.default.popper}[data-popper-placement*="bottom"] &`]: {
     transformOrigin: 'center top',
     marginTop: '14px'
-  }, ownerState.touch && {
-    marginTop: '24px'
-  })
-}));
-const TooltipArrow = (0, _styled.default)('span', {
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.arrow,
+    style: {
+      position: 'relative',
+      margin: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.touch,
+    style: {
+      padding: '8px 16px',
+      fontSize: theme.typography.pxToRem(14),
+      lineHeight: `${round(16 / 14)}em`,
+      fontWeight: theme.typography.fontWeightRegular
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.isRtl,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
+        marginRight: '14px'
+      },
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
+        marginLeft: '14px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.isRtl && ownerState.touch,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
+        marginRight: '24px'
+      },
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
+        marginLeft: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.isRtl,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
+        marginLeft: '14px'
+      },
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
+        marginRight: '14px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.isRtl && ownerState.touch,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
+        marginLeft: '24px'
+      },
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
+        marginRight: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.touch,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="top"] &`]: {
+        marginBottom: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.touch,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="bottom"] &`]: {
+        marginTop: '24px'
+      }
+    }
+  }]
+})));
+const TooltipArrow = (0, _zeroStyled.styled)('span', {
   name: 'MuiTooltip',
   slot: 'Arrow',
   overridesResolver: (props, styles) => styles.arrow
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   overflow: 'hidden',
@@ -203,7 +298,7 @@ const TooltipArrow = (0, _styled.default)('span', {
     backgroundColor: 'currentColor',
     transform: 'rotate(45deg)'
   }
-}));
+})));
 let hystersisOpen = false;
 const hystersisTimer = new _useTimeout.Timeout();
 let cursorPosition = {
@@ -225,47 +320,47 @@ function composeEventHandler(handler, eventHandler) {
 
 // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTooltip'
   });
   const {
-      arrow = false,
-      children: childrenProp,
-      components = {},
-      componentsProps = {},
-      describeChild = false,
-      disableFocusListener = false,
-      disableHoverListener = false,
-      disableInteractive: disableInteractiveProp = false,
-      disableTouchListener = false,
-      enterDelay = 100,
-      enterNextDelay = 0,
-      enterTouchDelay = 700,
-      followCursor = false,
-      id: idProp,
-      leaveDelay = 0,
-      leaveTouchDelay = 1500,
-      onClose,
-      onOpen,
-      open: openProp,
-      placement = 'bottom',
-      PopperComponent: PopperComponentProp,
-      PopperProps = {},
-      slotProps = {},
-      slots = {},
-      title,
-      TransitionComponent: TransitionComponentProp = _Grow.default,
-      TransitionProps
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    arrow = false,
+    children: childrenProp,
+    classes: classesProp,
+    components = {},
+    componentsProps = {},
+    describeChild = false,
+    disableFocusListener = false,
+    disableHoverListener = false,
+    disableInteractive: disableInteractiveProp = false,
+    disableTouchListener = false,
+    enterDelay = 100,
+    enterNextDelay = 0,
+    enterTouchDelay = 700,
+    followCursor = false,
+    id: idProp,
+    leaveDelay = 0,
+    leaveTouchDelay = 1500,
+    onClose,
+    onOpen,
+    open: openProp,
+    placement = 'bottom',
+    PopperComponent: PopperComponentProp,
+    PopperProps = {},
+    slotProps = {},
+    slots = {},
+    title,
+    TransitionComponent: TransitionComponentProp = _Grow.default,
+    TransitionProps,
+    ...other
+  } = props;
 
   // to prevent runtime errors, developers will need to provide a child as a React element anyway.
   const children = /*#__PURE__*/React.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     children: childrenProp
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
@@ -360,18 +455,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       handleClose(event);
     });
   };
-  const {
-    isFocusVisibleRef,
-    onBlur: handleBlurVisible,
-    onFocus: handleFocusVisible,
-    ref: focusVisibleRef
-  } = (0, _useIsFocusVisible.default)();
-  // We don't necessarily care about the focusVisible state (which is safe to access via ref anyway).
-  // We just need to re-render the Tooltip if the focus-visible state changes.
   const [, setChildIsFocusVisible] = React.useState(false);
   const handleBlur = event => {
-    handleBlurVisible(event);
-    if (isFocusVisibleRef.current === false) {
+    if (!(0, _isFocusVisible.default)(event.target)) {
       setChildIsFocusVisible(false);
       handleMouseLeave(event);
     }
@@ -383,8 +469,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (!childNode) {
       setChildNode(event.currentTarget);
     }
-    handleFocusVisible(event);
-    if (isFocusVisibleRef.current === true) {
+    if ((0, _isFocusVisible.default)(event.target)) {
       setChildIsFocusVisible(true);
       handleMouseOver(event);
     }
@@ -436,7 +521,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = (0, _useForkRef.default)(children.ref, focusVisibleRef, setChildNode, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactNodeRef.default)(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.
@@ -466,13 +551,17 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     nameOrDescProps['aria-label'] = titleIsString ? title : null;
     nameOrDescProps['aria-labelledby'] = open && !titleIsString ? id : null;
   }
-  const childrenProps = (0, _extends2.default)({}, nameOrDescProps, other, children.props, {
+  const childrenProps = {
+    ...nameOrDescProps,
+    ...other,
+    ...children.props,
     className: (0, _clsx.default)(other.className, children.props.className),
     onTouchStart: detectTouchStart,
-    ref: handleRef
-  }, followCursor ? {
-    onMouseMove: handleMouseMove
-  } : {});
+    ref: handleRef,
+    ...(followCursor ? {
+      onMouseMove: handleMouseMove
+    } : {})
+  };
   if (process.env.NODE_ENV !== 'production') {
     childrenProps['data-mui-internal-clone-element'] = true;
 
@@ -510,7 +599,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     }
   }
   const popperOptions = React.useMemo(() => {
-    var _PopperProps$popperOp;
     let tooltipModifiers = [{
       name: 'arrow',
       enabled: Boolean(arrowRef),
@@ -519,39 +607,48 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
         padding: 4
       }
     }];
-    if ((_PopperProps$popperOp = PopperProps.popperOptions) != null && _PopperProps$popperOp.modifiers) {
+    if (PopperProps.popperOptions?.modifiers) {
       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
     }
-    return (0, _extends2.default)({}, PopperProps.popperOptions, {
+    return {
+      ...PopperProps.popperOptions,
       modifiers: tooltipModifiers
-    });
+    };
   }, [arrowRef, PopperProps]);
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     isRtl,
     arrow,
     disableInteractive,
     placement,
     PopperComponentProp,
     touch: ignoreNonTouchEvents.current
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const PopperComponent = (_ref = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref : TooltipPopper;
-  const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : _Grow.default;
-  const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
-  const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
-  const popperProps = (0, _utils.appendOwnerState)(PopperComponent, (0, _extends2.default)({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
-    className: (0, _clsx.default)(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
-  }), ownerState);
-  const transitionProps = (0, _utils.appendOwnerState)(TransitionComponent, (0, _extends2.default)({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
-  const tooltipProps = (0, _utils.appendOwnerState)(TooltipComponent, (0, _extends2.default)({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
-    className: (0, _clsx.default)(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
-  }), ownerState);
-  const tooltipArrowProps = (0, _utils.appendOwnerState)(ArrowComponent, (0, _extends2.default)({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
-    className: (0, _clsx.default)(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
-  }), ownerState);
+  const PopperComponent = slots.popper ?? components.Popper ?? TooltipPopper;
+  const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? _Grow.default;
+  const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
+  const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
+  const popperProps = (0, _appendOwnerState.default)(PopperComponent, {
+    ...PopperProps,
+    ...(slotProps.popper ?? componentsProps.popper),
+    className: (0, _clsx.default)(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
+  }, ownerState);
+  const transitionProps = (0, _appendOwnerState.default)(TransitionComponent, {
+    ...TransitionProps,
+    ...(slotProps.transition ?? componentsProps.transition)
+  }, ownerState);
+  const tooltipProps = (0, _appendOwnerState.default)(TooltipComponent, {
+    ...(slotProps.tooltip ?? componentsProps.tooltip),
+    className: (0, _clsx.default)(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
+  }, ownerState);
+  const tooltipArrowProps = (0, _appendOwnerState.default)(ArrowComponent, {
+    ...(slotProps.arrow ?? componentsProps.arrow),
+    className: (0, _clsx.default)(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
+  }, ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, (0, _extends2.default)({
-      as: PopperComponentProp != null ? PopperComponentProp : _Popper.default,
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, {
+      as: PopperComponentProp ?? _Popper.default,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({
@@ -566,21 +663,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       popperRef: popperRef,
       open: childNode ? open : false,
       id: id,
-      transition: true
-    }, interactiveWrapperListeners, popperProps, {
+      transition: true,
+      ...interactiveWrapperListeners,
+      ...popperProps,
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
-        timeout: theme.transitions.duration.shorter
-      }, TransitionPropsInner, transitionProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipComponent, (0, _extends2.default)({}, tooltipProps, {
-          children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, (0, _extends2.default)({}, tooltipArrowProps, {
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
+        timeout: theme.transitions.duration.shorter,
+        ...TransitionPropsInner,
+        ...transitionProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipComponent, {
+          ...tooltipProps,
+          children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, {
+            ...tooltipArrowProps,
             ref: setArrowRef
-          })) : null]
-        }))
-      }))
-    }))]
+          }) : null]
+        })
+      })
+    })]
   });
 });
 process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */ = {
@@ -608,8 +709,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -623,8 +723,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */