@mui/material 5.0.0 → 5.0.4

package/legacy/Chip/Chip.js

@@ -305,11 +305,12 @@ var Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
-  var moreProps = component === ButtonBase ? {
+  var moreProps = component === ButtonBase ? _extends({
     component: ComponentProp || 'div',
-    focusVisibleClassName: classes.focusVisible,
-    disableRipple: Boolean(onDelete)
-  } : {};
+    focusVisibleClassName: classes.focusVisible
+  }, onDelete && {
+    disableRipple: true
+  }) : {};
   var deleteIcon = null;
 
   if (onDelete) {

package/legacy/Collapse/Collapse.js

@@ -100,7 +100,8 @@ var Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     name: 'MuiCollapse'
   });
 
-  var _children = props.children,
+  var addEndListener = props.addEndListener,
+      _children = props.children,
       className = props.className,
       _props$collapsedSize = props.collapsedSize,
       collapsedSizeProp = _props$collapsedSize === void 0 ? '0px' : _props$collapsedSize,
@@ -120,7 +121,7 @@ var Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
       timeout = _props$timeout === void 0 ? duration.standard : _props$timeout,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"]);
+      other = _objectWithoutProperties(props, ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"]);
 
   var ownerState = _extends({}, props, {
     orientation: orientation,
@@ -252,10 +253,15 @@ var Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     }
   });
 
-  var addEndListener = function addEndListener(next) {
+  var handleAddEndListener = function handleAddEndListener(next) {
     if (timeout === 'auto') {
       timer.current = setTimeout(next, autoTransitionDuration.current || 0);
     }
+
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(nodeRef.current, next);
+    }
   };
 
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
@@ -266,7 +272,7 @@ var Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
-    addEndListener: addEndListener,
+    addEndListener: handleAddEndListener,
     nodeRef: nodeRef,
     timeout: timeout === 'auto' ? null : timeout
   }, other, {
@@ -309,6 +315,13 @@ process.env.NODE_ENV !== "production" ? Collapse.propTypes
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
 
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+
   /**
    * The content node to be collapsed.
    */

package/legacy/Fade/Fade.js

@@ -27,7 +27,8 @@ var defaultTimeout = {
  */
 
 var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
-  var _props$appear = props.appear,
+  var addEndListener = props.addEndListener,
+      _props$appear = props.appear,
       appear = _props$appear === void 0 ? true : _props$appear,
       _children = props.children,
       easing = props.easing,
@@ -43,7 +44,7 @@ var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
+      other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
   var theme = useTheme();
   var enableStrictModeCompat = true;
@@ -101,6 +102,14 @@ var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }
   });
   var handleExited = normalizedTransitionCallback(onExited);
+
+  var handleAddEndListener = function handleAddEndListener(next) {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(nodeRef.current, next);
+    }
+  };
+
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     appear: appear,
     in: inProp,
@@ -111,6 +120,7 @@ var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
     timeout: timeout
   }, other, {
     children: function children(state, childProps) {
@@ -132,6 +142,13 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
 
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -142,7 +159,7 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
   /**
    * A single child content element.
    */
-  children: elementAcceptingRef,
+  children: elementAcceptingRef.isRequired,
 
   /**
    * The transition timing function.

package/legacy/Grow/Grow.js

@@ -30,7 +30,8 @@ var styles = {
  */
 
 var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
-  var _props$appear = props.appear,
+  var addEndListener = props.addEndListener,
+      _props$appear = props.appear,
       appear = _props$appear === void 0 ? true : _props$appear,
       _children = props.children,
       easing = props.easing,
@@ -46,7 +47,7 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
+      other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
   var timer = React.useRef();
   var autoTimeout = React.useRef();
@@ -146,10 +147,15 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   });
   var handleExited = normalizedTransitionCallback(onExited);
 
-  var addEndListener = function addEndListener(next) {
+  var handleAddEndListener = function handleAddEndListener(next) {
     if (timeout === 'auto') {
       timer.current = setTimeout(next, autoTimeout.current || 0);
     }
+
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(nodeRef.current, next);
+    }
   };
 
   React.useEffect(function () {
@@ -167,7 +173,7 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
-    addEndListener: addEndListener,
+    addEndListener: handleAddEndListener,
     timeout: timeout === 'auto' ? null : timeout
   }, other, {
     children: function children(state, childProps) {
@@ -190,6 +196,13 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
 
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -200,7 +213,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes
   /**
    * A single child content element.
    */
-  children: elementAcceptingRef,
+  children: elementAcceptingRef.isRequired,
 
   /**
    * The transition timing function.

package/legacy/InputLabel/InputLabel.js

@@ -36,7 +36,7 @@ var InputLabelRoot = styled(FormLabel, {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [_defineProperty({}, "& .".concat(formLabelClasses.asterisk), styles.asterisk), styles.root, !ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
+    return [_defineProperty({}, "& .".concat(formLabelClasses.asterisk), styles.asterisk), styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
   }
 })(function (_ref2) {
   var theme = _ref2.theme,

package/legacy/NativeSelect/NativeSelect.js

@@ -115,7 +115,7 @@ process.env.NODE_ENV !== "production" ? NativeSelect.propTypes
   input: PropTypes.element,
 
   /**
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes">Attributes</a> applied to the `select` element.
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes) applied to the `select` element.
    */
   inputProps: PropTypes.object,
 

package/legacy/PaginationItem/PaginationItem.js

@@ -242,13 +242,12 @@ var PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inPro
     last: LastPageIcon
   };
   var Icon = normalizedIcons[type];
-  return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, _extends({
+  return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
-    className: clsx(classes.root, className)
-  }, other, {
+    className: clsx(classes.root, className),
     children: "\u2026"
-  })) : /*#__PURE__*/_jsxs(PaginationItemPage, _extends({
+  }) : /*#__PURE__*/_jsxs(PaginationItemPage, _extends({
     ref: ref,
     ownerState: ownerState,
     component: component,

package/legacy/Radio/Radio.js

@@ -1,4 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -54,6 +55,15 @@ var RadioRoot = styled(SwitchBase, {
   }));
 });
 
+function areEqualValues(a, b) {
+  if (_typeof(b) === 'object' && b !== null) {
+    return a === b;
+  } // The value could be a number, the DOM will stringify it anyway.
+
+
+  return String(a) === String(b);
+}
+
 var defaultCheckedIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {
   checked: true
 });
@@ -94,7 +104,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
 
   if (radioGroup) {
     if (typeof checked === 'undefined') {
-      checked = radioGroup.value === props.value;
+      checked = areEqualValues(radioGroup.value, props.value);
     }
 
     if (typeof name === 'undefined') {

package/legacy/Select/SelectInput.js

@@ -68,7 +68,8 @@ var SelectNativeInput = styled('input', {
 function areEqualValues(a, b) {
   if (_typeof(b) === 'object' && b !== null) {
     return a === b;
-  }
+  } // The value could be a number, the DOM will stringify it anyway.
+
 
   return String(a) === String(b);
 }

package/legacy/Slide/Slide.js

@@ -95,7 +95,8 @@ var defaultTimeout = {
  */
 
 var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
-  var _props$appear = props.appear,
+  var addEndListener = props.addEndListener,
+      _props$appear = props.appear,
       appear = _props$appear === void 0 ? true : _props$appear,
       _children = props.children,
       containerProp = props.container,
@@ -115,7 +116,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
+      other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
   var theme = useTheme();
   var childrenRef = React.useRef(null);
@@ -187,6 +188,14 @@ var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       onExited(node);
     }
   });
+
+  var handleAddEndListener = function handleAddEndListener(next) {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(childrenRef.current, next);
+    }
+  };
+
   var updatePosition = React.useCallback(function () {
     if (childrenRef.current) {
       setTranslateValue(direction, childrenRef.current, containerProp);
@@ -225,6 +234,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
     appear: appear,
     in: inProp,
     timeout: timeout
@@ -247,6 +257,13 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
 
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -257,7 +274,7 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
   /**
    * A single child content element.
    */
-  children: elementAcceptingRef,
+  children: elementAcceptingRef.isRequired,
 
   /**
    * An HTML element, or a function that returns one.

package/legacy/Switch/Switch.js

@@ -83,13 +83,13 @@ var SwitchSwitchBase = styled(SwitchBase, {
   slot: 'SwitchBase',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.switchBase, styles.input, ownerState.color !== 'default' && styles["color".concat(capitalize(ownerState.color))]];
+    return [styles.switchBase, _defineProperty({}, "& .".concat(switchClasses.input), styles.input), ownerState.color !== 'default' && styles["color".concat(capitalize(ownerState.color))]];
   }
-})(function (_ref3) {
-  var _ref4;
+})(function (_ref4) {
+  var _ref5;
 
-  var theme = _ref3.theme;
-  return _ref4 = {
+  var theme = _ref4.theme;
+  return _ref5 = {
     position: 'absolute',
     top: 0,
     left: 0,
@@ -99,23 +99,23 @@ var SwitchSwitchBase = styled(SwitchBase, {
     transition: theme.transitions.create(['left', 'transform'], {
       duration: theme.transitions.duration.shortest
     })
-  }, _defineProperty(_ref4, "&.".concat(switchClasses.checked), {
+  }, _defineProperty(_ref5, "&.".concat(switchClasses.checked), {
     transform: 'translateX(20px)'
-  }), _defineProperty(_ref4, "&.".concat(switchClasses.disabled), {
+  }), _defineProperty(_ref5, "&.".concat(switchClasses.disabled), {
     color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
-  }), _defineProperty(_ref4, "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
+  }), _defineProperty(_ref5, "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
     opacity: 0.5
-  }), _defineProperty(_ref4, "&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track), {
+  }), _defineProperty(_ref5, "&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track), {
     opacity: theme.palette.mode === 'light' ? 0.12 : 0.2
-  }), _defineProperty(_ref4, "& .".concat(switchClasses.input), {
+  }), _defineProperty(_ref5, "& .".concat(switchClasses.input), {
     left: '-100%',
     width: '300%'
-  }), _ref4;
-}, function (_ref5) {
-  var _ref6;
+  }), _ref5;
+}, function (_ref6) {
+  var _ref7;
 
-  var theme = _ref5.theme,
-      ownerState = _ref5.ownerState;
+  var theme = _ref6.theme,
+      ownerState = _ref6.ownerState;
   return _extends({
     '&:hover': {
       backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
@@ -124,7 +124,7 @@ var SwitchSwitchBase = styled(SwitchBase, {
         backgroundColor: 'transparent'
       }
     }
-  }, ownerState.color !== 'default' && (_ref6 = {}, _defineProperty(_ref6, "&.".concat(switchClasses.checked), _defineProperty({
+  }, ownerState.color !== 'default' && (_ref7 = {}, _defineProperty(_ref7, "&.".concat(switchClasses.checked), _defineProperty({
     color: theme.palette[ownerState.color].main,
     '&:hover': {
       backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
@@ -134,9 +134,9 @@ var SwitchSwitchBase = styled(SwitchBase, {
     }
   }, "&.".concat(switchClasses.disabled), {
     color: theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)
-  })), _defineProperty(_ref6, "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
+  })), _defineProperty(_ref7, "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
     backgroundColor: theme.palette[ownerState.color].main
-  }), _ref6));
+  }), _ref7));
 });
 var SwitchTrack = styled('span', {
   name: 'MuiSwitch',
@@ -144,8 +144,8 @@ var SwitchTrack = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.track;
   }
-})(function (_ref7) {
-  var theme = _ref7.theme;
+})(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     height: '100%',
     width: '100%',
@@ -164,8 +164,8 @@ var SwitchThumb = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.thumb;
   }
-})(function (_ref8) {
-  var theme = _ref8.theme;
+})(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     boxShadow: theme.shadows[1],
     backgroundColor: 'currentColor',

package/legacy/Tab/Tab.js

@@ -23,7 +23,8 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       selected = ownerState.selected,
       disabled = ownerState.disabled;
   var slots = {
-    root: ['root', icon && label && 'labelIcon', "textColor".concat(capitalize(textColor)), fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled']
+    root: ['root', icon && label && 'labelIcon', "textColor".concat(capitalize(textColor)), fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
+    iconWrapper: ['iconWrapper']
   };
   return composeClasses(slots, getTabUtilityClass, classes);
 };
@@ -56,7 +57,7 @@ var TabRoot = styled(ButtonBase, {
     minHeight: 72,
     paddingTop: 9,
     paddingBottom: 9
-  }, "& > *:first-child", {
+  }, "& > .".concat(tabClasses.iconWrapper), {
     marginBottom: 6
   }), ownerState.textColor === 'inherit' && (_ref3 = {
     color: 'inherit',
@@ -98,7 +99,7 @@ var Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
       _props$disableFocusRi = props.disableFocusRipple,
       disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
       fullWidth = props.fullWidth,
-      icon = props.icon,
+      iconProp = props.icon,
       indicator = props.indicator,
       label = props.label,
       onChange = props.onChange,
@@ -117,7 +118,7 @@ var Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     disabled: disabled,
     disableFocusRipple: disableFocusRipple,
     selected: selected,
-    icon: !!icon,
+    icon: !!iconProp,
     label: !!label,
     fullWidth: fullWidth,
     textColor: textColor,
@@ -125,6 +126,9 @@ var Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
+  var icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
+    className: clsx(classes.iconWrapper, iconProp.props.className)
+  }) : iconProp;
 
   var handleClick = function handleClick(event) {
     if (!selected && onChange) {

package/legacy/Tab/tabClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
 export function getTabUtilityClass(slot) {
   return generateUtilityClass('MuiTab', slot);
 }
-var tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped']);
+var tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);
 export default tabClasses;

package/legacy/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { elementAcceptingRef } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, appendOwnerState } from '@mui/core';
 import { alpha } from '@mui/system';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
@@ -205,9 +205,12 @@ function composeEventHandler(handler, eventHandler) {
 
     handler(event);
   };
-}
+} // TODO (v6) Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
+
 
 var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
+  var _components$Popper, _ref5, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiTooltip'
@@ -217,6 +220,10 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       arrow = _props$arrow === void 0 ? false : _props$arrow,
       children = props.children,
       classesProp = props.classes,
+      _props$components = props.components,
+      components = _props$components === void 0 ? {} : _props$components,
+      _props$componentsProp = props.componentsProps,
+      componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       _props$describeChild = props.describeChild,
       describeChild = _props$describeChild === void 0 ? false : _props$describeChild,
       _props$disableFocusLi = props.disableFocusListener,
@@ -245,15 +252,14 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       openProp = props.open,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
-      _props$PopperComponen = props.PopperComponent,
-      PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
+      PopperComponentProp = props.PopperComponent,
       _props$PopperProps = props.PopperProps,
       PopperProps = _props$PopperProps === void 0 ? {} : _props$PopperProps,
       title = props.title,
       _props$TransitionComp = props.TransitionComponent,
-      TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
+      TransitionComponentProp = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
       TransitionProps = props.TransitionProps,
-      other = _objectWithoutProperties(props, ["arrow", "children", "classes", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"]);
+      other = _objectWithoutProperties(props, ["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"]);
 
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
@@ -597,15 +603,22 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     arrow: arrow,
     disableInteractive: disableInteractive,
     placement: placement,
-    PopperComponent: PopperComponent,
+    PopperComponentProp: PopperComponentProp,
     touch: ignoreNonTouchEvents.current
   });
 
   var classes = useUtilityClasses(ownerState);
+  var PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
+  var TransitionComponent = (_ref5 = TransitionComponentProp != null ? TransitionComponentProp : components.Transition) != null ? _ref5 : Grow;
+  var TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
+  var ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
+  var popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, componentsProps.popper), ownerState);
+  var transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, componentsProps.transition), ownerState);
+  var tooltipProps = appendOwnerState(TooltipComponent, _extends({}, componentsProps.tooltip), ownerState);
+  var tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, componentsProps.arrow), ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(TooltipPopper, _extends({
-      as: PopperComponent,
-      className: classes.popper,
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
+      as: PopperComponentProp != null ? PopperComponentProp : Popper,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: function getBoundingClientRect() {
@@ -623,23 +636,23 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       open: childNode ? open : false,
       id: id,
       transition: true
-    }, interactiveWrapperListeners, PopperProps, {
+    }, interactiveWrapperListeners, popperProps, {
+      className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       popperOptions: popperOptions,
-      ownerState: ownerState,
-      children: function children(_ref5) {
-        var TransitionPropsInner = _ref5.TransitionProps;
+      children: function children(_ref6) {
+        var _componentsProps$tool, _componentsProps$arro;
+
+        var TransitionPropsInner = _ref6.TransitionProps;
         return /*#__PURE__*/_jsx(TransitionComponent, _extends({
           timeout: theme.transitions.duration.shorter
-        }, TransitionPropsInner, TransitionProps, {
-          children: /*#__PURE__*/_jsxs(TooltipTooltip, {
-            className: classes.tooltip,
-            ownerState: ownerState,
-            children: [title, arrow ? /*#__PURE__*/_jsx(TooltipArrow, {
-              className: classes.arrow,
-              ref: setArrowRef,
-              ownerState: ownerState
-            }) : null]
-          })
+        }, TransitionPropsInner, transitionProps, {
+          children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
+            className: clsx(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
+            children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
+              className: clsx(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
+              ref: setArrowRef
+            })) : null]
+          }))
         }));
       }
     }))]
@@ -674,6 +687,24 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The components used for each slot inside the Tooltip.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Arrow: PropTypes.elementType,
+    Popper: PropTypes.elementType,
+    Tooltip: PropTypes.elementType,
+    Transition: PropTypes.elementType
+  }),
+
+  /**
+   * The props used for each slot inside the Tooltip.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
+
   /**
    * Set to `true` if the `title` acts as an accessible description.
    * By default the `title` acts as an accessible label for the child.