@mui/material 5.10.12 → 5.10.14

package/Tooltip/Tooltip.js

@@ -1,65 +1,38 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _utils = require("@mui/utils");
-
 var _base = require("@mui/base");
-
 var _system = require("@mui/system");
-
 var _styled = _interopRequireDefault(require("../styles/styled"));
-
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-
 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", "title", "TransitionComponent", "TransitionProps"];
-
+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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -75,7 +48,6 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _base.unstable_composeClasses)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
 };
-
 const TooltipPopper = (0, _styled.default)(_Popper.default, {
   name: 'MuiTooltip',
   slot: 'Popper',
@@ -215,9 +187,7 @@ const TooltipArrow = (0, _styled.default)('span', {
   overflow: 'hidden',
   position: 'absolute',
   width: '1em',
-  height: '0.71em'
-  /* = width / sqrt(2) = (length of the hypotenuse) */
-  ,
+  height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */,
   boxSizing: 'border-box',
   color: theme.vars ? theme.vars.palette.Tooltip.bg : (0, _system.alpha)(theme.palette.grey[700], 0.9),
   '&::before': {
@@ -232,58 +202,56 @@ const TooltipArrow = (0, _styled.default)('span', {
 }));
 let hystersisOpen = false;
 let hystersisTimer = null;
-
 function testReset() {
   hystersisOpen = false;
   clearTimeout(hystersisTimer);
 }
-
 function composeEventHandler(handler, eventHandler) {
   return event => {
     if (eventHandler) {
       eventHandler(event);
     }
-
     handler(event);
   };
-} // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
-
+}
 
+// TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  var _components$Popper, _ref, _components$Transitio, _components$Tooltip, _components$Arrow, _componentsProps$popp;
-
+  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)({
     props: inProps,
     name: 'MuiTooltip'
   });
   const {
-    arrow = false,
-    children,
-    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 = {},
-    title,
-    TransitionComponent: TransitionComponentProp = _Grow.default,
-    TransitionProps
-  } = props,
-        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      arrow = false,
+      children,
+      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);
   const theme = (0, _useTheme.default)();
   const isRtl = theme.direction === 'rtl';
   const [childNode, setChildNode] = React.useState();
@@ -301,20 +269,19 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     state: 'open'
   });
   let open = openState;
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const {
       current: isControlled
-    } = React.useRef(openProp !== undefined); // eslint-disable-next-line react-hooks/rules-of-hooks
+    } = React.useRef(openProp !== undefined);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {
         console.error(['MUI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
       }
     }, [title, childNode, isControlled]);
   }
-
   const id = (0, _useId.default)(idProp);
   const prevUserSelect = React.useRef();
   const stopTouchInteraction = React.useCallback(() => {
@@ -322,7 +289,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       prevUserSelect.current = undefined;
     }
-
     clearTimeout(touchTimer.current);
   }, []);
   React.useEffect(() => {
@@ -333,20 +299,18 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       stopTouchInteraction();
     };
   }, [stopTouchInteraction]);
-
   const handleOpen = event => {
     clearTimeout(hystersisTimer);
-    hystersisOpen = true; // The mouseover event will trigger for every nested element in the tooltip.
+    hystersisOpen = true;
+
+    // The mouseover event will trigger for every nested element in the tooltip.
     // We can skip rerendering when the tooltip is already open.
     // We are using the mouseover event instead of the mouseenter event to fix a hide/show issue.
-
     setOpenState(true);
-
     if (onOpen && !open) {
       onOpen(event);
     }
   };
-
   const handleClose = (0, _useEventCallback.default)(
   /**
    * @param {React.SyntheticEvent | Event} event
@@ -357,32 +321,27 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       hystersisOpen = false;
     }, 800 + leaveDelay);
     setOpenState(false);
-
     if (onClose && open) {
       onClose(event);
     }
-
     clearTimeout(closeTimer.current);
     closeTimer.current = setTimeout(() => {
       ignoreNonTouchEvents.current = false;
     }, theme.transitions.duration.shortest);
   });
-
   const handleEnter = event => {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
       return;
-    } // Remove the title ahead of time.
+    }
+
+    // Remove the title ahead of time.
     // We don't want to wait for the next render commit.
     // We would risk displaying two tooltips at the same time (native + this one).
-
-
     if (childNode) {
       childNode.removeAttribute('title');
     }
-
     clearTimeout(enterTimer.current);
     clearTimeout(leaveTimer.current);
-
     if (enterDelay || hystersisOpen && enterNextDelay) {
       enterTimer.current = setTimeout(() => {
         handleOpen(event);
@@ -391,7 +350,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       handleOpen(event);
     }
   };
-
   const handleLeave = event => {
     clearTimeout(enterTimer.current);
     clearTimeout(leaveTimer.current);
@@ -399,26 +357,22 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       handleClose(event);
     }, leaveDelay);
   };
-
   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).
+  } = (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) {
       setChildIsFocusVisible(false);
       handleLeave(event);
     }
   };
-
   const handleFocus = event => {
     // Workaround for https://github.com/facebook/react/issues/7769
     // The autoFocus of React might trigger the event before the componentDidMount.
@@ -426,106 +380,89 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (!childNode) {
       setChildNode(event.currentTarget);
     }
-
     handleFocusVisible(event);
-
     if (isFocusVisibleRef.current === true) {
       setChildIsFocusVisible(true);
       handleEnter(event);
     }
   };
-
   const detectTouchStart = event => {
     ignoreNonTouchEvents.current = true;
     const childrenProps = children.props;
-
     if (childrenProps.onTouchStart) {
       childrenProps.onTouchStart(event);
     }
   };
-
   const handleMouseOver = handleEnter;
   const handleMouseLeave = handleLeave;
-
   const handleTouchStart = event => {
     detectTouchStart(event);
     clearTimeout(leaveTimer.current);
     clearTimeout(closeTimer.current);
     stopTouchInteraction();
-    prevUserSelect.current = document.body.style.WebkitUserSelect; // Prevent iOS text selection on long-tap.
-
+    prevUserSelect.current = document.body.style.WebkitUserSelect;
+    // Prevent iOS text selection on long-tap.
     document.body.style.WebkitUserSelect = 'none';
     touchTimer.current = setTimeout(() => {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       handleEnter(event);
     }, enterTouchDelay);
   };
-
   const handleTouchEnd = event => {
     if (children.props.onTouchEnd) {
       children.props.onTouchEnd(event);
     }
-
     stopTouchInteraction();
     clearTimeout(leaveTimer.current);
     leaveTimer.current = setTimeout(() => {
       handleClose(event);
     }, leaveTouchDelay);
   };
-
   React.useEffect(() => {
     if (!open) {
       return undefined;
     }
+
     /**
      * @param {KeyboardEvent} nativeEvent
      */
-
-
     function handleKeyDown(nativeEvent) {
       // IE11, Edge (prior to using Bink?) use 'Esc'
       if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
         handleClose(nativeEvent);
       }
     }
-
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = (0, _useForkRef.default)(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
+  const handleRef = (0, _useForkRef.default)(children.ref, focusVisibleRef, setChildNode, ref);
 
+  // There is no point in displaying an empty tooltip.
   if (!title && title !== 0) {
     open = false;
   }
-
   const positionRef = React.useRef({
     x: 0,
     y: 0
   });
   const popperRef = React.useRef();
-
   const handleMouseMove = event => {
     const childrenProps = children.props;
-
     if (childrenProps.onMouseMove) {
       childrenProps.onMouseMove(event);
     }
-
     positionRef.current = {
       x: event.clientX,
       y: event.clientY
     };
-
     if (popperRef.current) {
       popperRef.current.update();
     }
   };
-
   const nameOrDescProps = {};
   const titleIsString = typeof title === 'string';
-
   if (describeChild) {
     nameOrDescProps.title = !open && titleIsString && !disableHoverListener ? title : null;
     nameOrDescProps['aria-describedby'] = open ? id : null;
@@ -533,7 +470,6 @@ 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, {
     className: (0, _clsx.default)(other.className, children.props.className),
     onTouchStart: detectTouchStart,
@@ -541,53 +477,44 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }, followCursor ? {
     onMouseMove: handleMouseMove
   } : {});
-
   if (process.env.NODE_ENV !== 'production') {
-    childrenProps['data-mui-internal-clone-element'] = true; // eslint-disable-next-line react-hooks/rules-of-hooks
+    childrenProps['data-mui-internal-clone-element'] = true;
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       if (childNode && !childNode.getAttribute('data-mui-internal-clone-element')) {
         console.error(['MUI: The `children` component of the Tooltip is not forwarding its props correctly.', 'Please make sure that props are spread on the same element that the ref is applied to.'].join('\n'));
       }
     }, [childNode]);
   }
-
   const interactiveWrapperListeners = {};
-
   if (!disableTouchListener) {
     childrenProps.onTouchStart = handleTouchStart;
     childrenProps.onTouchEnd = handleTouchEnd;
   }
-
   if (!disableHoverListener) {
     childrenProps.onMouseOver = composeEventHandler(handleMouseOver, childrenProps.onMouseOver);
     childrenProps.onMouseLeave = composeEventHandler(handleMouseLeave, childrenProps.onMouseLeave);
-
     if (!disableInteractive) {
       interactiveWrapperListeners.onMouseOver = handleMouseOver;
       interactiveWrapperListeners.onMouseLeave = handleMouseLeave;
     }
   }
-
   if (!disableFocusListener) {
     childrenProps.onFocus = composeEventHandler(handleFocus, childrenProps.onFocus);
     childrenProps.onBlur = composeEventHandler(handleBlur, childrenProps.onBlur);
-
     if (!disableInteractive) {
       interactiveWrapperListeners.onFocus = handleFocus;
       interactiveWrapperListeners.onBlur = handleBlur;
     }
   }
-
   if (process.env.NODE_ENV !== 'production') {
     if (children.props.title) {
       console.error(['MUI: You have provided a `title` prop to the child of <Tooltip />.', `Remove this title prop \`${children.props.title}\` or the Tooltip component.`].join('\n'));
     }
   }
-
   const popperOptions = React.useMemo(() => {
     var _PopperProps$popperOp;
-
     let tooltipModifiers = [{
       name: 'arrow',
       enabled: Boolean(arrowRef),
@@ -596,11 +523,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
         padding: 4
       }
     }];
-
     if ((_PopperProps$popperOp = PopperProps.popperOptions) != null && _PopperProps$popperOp.modifiers) {
       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
     }
-
     return (0, _extends2.default)({}, PopperProps.popperOptions, {
       modifiers: tooltipModifiers
     });
@@ -614,14 +539,20 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     touch: ignoreNonTouchEvents.current
   });
   const classes = useUtilityClasses(ownerState);
-  const PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
-  const TransitionComponent = (_ref = (_components$Transitio = components.Transition) != null ? _components$Transitio : TransitionComponentProp) != null ? _ref : _Grow.default;
-  const TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
-  const ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
-  const popperProps = (0, _base.appendOwnerState)(PopperComponent, (0, _extends2.default)({}, PopperProps, componentsProps.popper), ownerState);
-  const transitionProps = (0, _base.appendOwnerState)(TransitionComponent, (0, _extends2.default)({}, TransitionProps, componentsProps.transition), ownerState);
-  const tooltipProps = (0, _base.appendOwnerState)(TooltipComponent, (0, _extends2.default)({}, componentsProps.tooltip), ownerState);
-  const tooltipArrowProps = (0, _base.appendOwnerState)(ArrowComponent, (0, _extends2.default)({}, componentsProps.arrow), 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, _base.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, _base.appendOwnerState)(TransitionComponent, (0, _extends2.default)({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
+  const tooltipProps = (0, _base.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, _base.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);
   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,
@@ -641,60 +572,50 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       id: id,
       transition: true
     }, interactiveWrapperListeners, popperProps, {
-      className: (0, _clsx.default)(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => {
-        var _componentsProps$tool, _componentsProps$arro;
-
-        return /*#__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, {
-            className: (0, _clsx.default)(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
-            children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, (0, _extends2.default)({}, tooltipArrowProps, {
-              className: (0, _clsx.default)(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
-              ref: setArrowRef
-            })) : null]
-          }))
-        }));
-      }
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+        timeout: theme.transitions.duration.shorter
+      }, TransitionPropsInner, transitionProps, {
+        "data-foo": "bar",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipComponent, (0, _extends2.default)({}, tooltipProps, {
+          children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, (0, _extends2.default)({}, tooltipArrowProps, {
+            ref: setArrowRef
+          })) : null]
+        }))
+      }))
     }))]
   });
 });
-process.env.NODE_ENV !== "production" ? Tooltip.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * If `true`, adds an arrow to the tooltip.
    * @default false
    */
   arrow: _propTypes.default.bool,
-
   /**
    * Tooltip reference element.
    */
   children: _utils.elementAcceptingRef.isRequired,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
-   * The components used for each slot inside the Tooltip.
-   * Either a string to use a HTML element or a component.
+   * 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.
+   *
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -703,11 +624,13 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
     Tooltip: _propTypes.default.elementType,
     Transition: _propTypes.default.elementType
   }),
-
   /**
-   * The props used for each slot inside the Tooltip.
-   * Note that `componentsProps.popper` prop values win over `PopperProps`
-   * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
+   * 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.
+   *
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
@@ -716,137 +639,142 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
     tooltip: _propTypes.default.object,
     transition: _propTypes.default.object
   }),
-
   /**
    * Set to `true` if the `title` acts as an accessible description.
    * By default the `title` acts as an accessible label for the child.
    * @default false
    */
   describeChild: _propTypes.default.bool,
-
   /**
    * Do not respond to focus-visible events.
    * @default false
    */
   disableFocusListener: _propTypes.default.bool,
-
   /**
    * Do not respond to hover events.
    * @default false
    */
   disableHoverListener: _propTypes.default.bool,
-
   /**
    * Makes a tooltip not interactive, i.e. it will close when the user
    * hovers over the tooltip before the `leaveDelay` is expired.
    * @default false
    */
   disableInteractive: _propTypes.default.bool,
-
   /**
    * Do not respond to long press touch events.
    * @default false
    */
   disableTouchListener: _propTypes.default.bool,
-
   /**
    * The number of milliseconds to wait before showing the tooltip.
    * This prop won't impact the enter touch delay (`enterTouchDelay`).
    * @default 100
    */
   enterDelay: _propTypes.default.number,
-
   /**
    * The number of milliseconds to wait before showing the tooltip when one was already recently opened.
    * @default 0
    */
   enterNextDelay: _propTypes.default.number,
-
   /**
    * The number of milliseconds a user must touch the element before showing the tooltip.
    * @default 700
    */
   enterTouchDelay: _propTypes.default.number,
-
   /**
    * If `true`, the tooltip follow the cursor over the wrapped element.
    * @default false
    */
   followCursor: _propTypes.default.bool,
-
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: _propTypes.default.string,
-
   /**
    * The number of milliseconds to wait before hiding the tooltip.
    * This prop won't impact the leave touch delay (`leaveTouchDelay`).
    * @default 0
    */
   leaveDelay: _propTypes.default.number,
-
   /**
    * The number of milliseconds after the user stops touching an element before hiding the tooltip.
    * @default 1500
    */
   leaveTouchDelay: _propTypes.default.number,
-
   /**
    * Callback fired when the component requests to be closed.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
   onClose: _propTypes.default.func,
-
   /**
    * Callback fired when the component requests to be open.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
   onOpen: _propTypes.default.func,
-
   /**
    * If `true`, the component is shown.
    */
   open: _propTypes.default.bool,
-
   /**
    * Tooltip placement.
    * @default 'bottom'
    */
   placement: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-
   /**
    * The component used for the popper.
    * @default Popper
    */
   PopperComponent: _propTypes.default.elementType,
-
   /**
    * Props applied to the [`Popper`](/material-ui/api/popper/) element.
    * @default {}
    */
   PopperProps: _propTypes.default.object,
-
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    arrow: _propTypes.default.object,
+    popper: _propTypes.default.object,
+    tooltip: _propTypes.default.object,
+    transition: _propTypes.default.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    arrow: _propTypes.default.elementType,
+    popper: _propTypes.default.elementType,
+    tooltip: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-
   /**
    * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
    */
   title: _propTypes.default.node,
-
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Grow
    */
   TransitionComponent: _propTypes.default.elementType,
-
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.