@mui/material 5.0.0 → 5.0.4

package/node/TableBody/tableBodyClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableBodyUtilityClass = getTableBodyUtilityClass;
 exports.default = void 0;
+exports.getTableBodyUtilityClass = getTableBodyUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableCell/tableCellClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableCellUtilityClass = getTableCellUtilityClass;
 exports.default = void 0;
+exports.getTableCellUtilityClass = getTableCellUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableContainer/tableContainerClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableContainerUtilityClass = getTableContainerUtilityClass;
 exports.default = void 0;
+exports.getTableContainerUtilityClass = getTableContainerUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableFooter/tableFooterClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableFooterUtilityClass = getTableFooterUtilityClass;
 exports.default = void 0;
+exports.getTableFooterUtilityClass = getTableFooterUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableHead/tableHeadClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableHeadUtilityClass = getTableHeadUtilityClass;
 exports.default = void 0;
+exports.getTableHeadUtilityClass = getTableHeadUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TablePagination/tablePaginationClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTablePaginationUtilityClass = getTablePaginationUtilityClass;
 exports.default = void 0;
+exports.getTablePaginationUtilityClass = getTablePaginationUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableRow/tableRowClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableRowUtilityClass = getTableRowUtilityClass;
 exports.default = void 0;
+exports.getTableRowUtilityClass = getTableRowUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableSortLabel/tableSortLabelClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableSortLabelUtilityClass = getTableSortLabelUtilityClass;
 exports.default = void 0;
+exports.getTableSortLabelUtilityClass = getTableSortLabelUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Tabs/tabsClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTabsUtilityClass = getTabsUtilityClass;
 exports.default = void 0;
+exports.getTabsUtilityClass = getTabsUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TextField/textFieldClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTextFieldUtilityClass = getTextFieldUtilityClass;
 exports.default = void 0;
+exports.getTextFieldUtilityClass = getTextFieldUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/ToggleButton/toggleButtonClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToggleButtonUtilityClass = getToggleButtonUtilityClass;
 exports.default = void 0;
+exports.getToggleButtonUtilityClass = getToggleButtonUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToggleButtonGroupUtilityClass = getToggleButtonGroupUtilityClass;
 exports.default = void 0;
+exports.getToggleButtonGroupUtilityClass = getToggleButtonGroupUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Toolbar/toolbarClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarUtilityClass = getToolbarUtilityClass;
 exports.default = void 0;
+exports.getToolbarUtilityClass = getToolbarUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Tooltip/Tooltip.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testReset = testReset;
 exports.default = void 0;
+exports.testReset = testReset;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -50,7 +50,7 @@ var _tooltipClasses = _interopRequireWildcard(require("./tooltipClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["arrow", "children", "classes", "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", "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); }
 
@@ -246,9 +246,12 @@ function composeEventHandler(handler, eventHandler) {
 
     handler(event);
   };
-}
+} // TODO (v6) Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
+
 
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
+  var _components$Popper, _ref, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiTooltip'
@@ -256,6 +259,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const {
     arrow = false,
     children,
+    components = {},
+    componentsProps = {},
     describeChild = false,
     disableFocusListener = false,
     disableHoverListener = false,
@@ -272,10 +277,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     onOpen,
     open: openProp,
     placement = 'bottom',
-    PopperComponent = _Popper.default,
+    PopperComponent: PopperComponentProp,
     PopperProps = {},
     title,
-    TransitionComponent = _Grow.default,
+    TransitionComponent: TransitionComponentProp = _Grow.default,
     TransitionProps
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -607,14 +612,21 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     arrow,
     disableInteractive,
     placement,
-    PopperComponent,
+    PopperComponentProp,
     touch: ignoreNonTouchEvents.current
   });
   const classes = useUtilityClasses(ownerState);
+  const PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
+  const TransitionComponent = (_ref = TransitionComponentProp != null ? TransitionComponentProp : components.Transition) != 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, _core.appendOwnerState)(PopperComponent, (0, _extends2.default)({}, PopperProps, componentsProps.popper), ownerState);
+  const transitionProps = (0, _core.appendOwnerState)(TransitionComponent, (0, _extends2.default)({}, TransitionProps, componentsProps.transition), ownerState);
+  const tooltipProps = (0, _core.appendOwnerState)(TooltipComponent, (0, _extends2.default)({}, componentsProps.tooltip), ownerState);
+  const tooltipArrowProps = (0, _core.appendOwnerState)(ArrowComponent, (0, _extends2.default)({}, componentsProps.arrow), ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipPopper, (0, _extends2.default)({
-      as: PopperComponent,
-      className: classes.popper,
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, (0, _extends2.default)({
+      as: PopperComponentProp != null ? PopperComponentProp : _Popper.default,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({
@@ -630,24 +642,26 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       open: childNode ? open : false,
       id: id,
       transition: true
-    }, interactiveWrapperListeners, PopperProps, {
+    }, interactiveWrapperListeners, popperProps, {
+      className: (0, _clsx.default)(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       popperOptions: popperOptions,
-      ownerState: ownerState,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
-        timeout: theme.transitions.duration.shorter
-      }, TransitionPropsInner, TransitionProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipTooltip, {
-          className: classes.tooltip,
-          ownerState: ownerState,
-          children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipArrow, {
-            className: classes.arrow,
-            ref: setArrowRef,
-            ownerState: ownerState
-          }) : null]
-        })
-      }))
+      }) => {
+        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]
+          }))
+        }));
+      }
     }))]
   });
 });
@@ -680,6 +694,24 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    */
   className: _propTypes.default.string,
 
+  /**
+   * The components used for each slot inside the Tooltip.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: _propTypes.default.shape({
+    Arrow: _propTypes.default.elementType,
+    Popper: _propTypes.default.elementType,
+    Tooltip: _propTypes.default.elementType,
+    Transition: _propTypes.default.elementType
+  }),
+
+  /**
+   * The props used for each slot inside the Tooltip.
+   * @default {}
+   */
+  componentsProps: _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.

package/node/Tooltip/tooltipClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTooltipUtilityClass = getTooltipUtilityClass;
 exports.default = void 0;
+exports.getTooltipUtilityClass = getTooltipUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Typography/typographyClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTypographyUtilityClass = getTypographyUtilityClass;
 exports.default = void 0;
+exports.getTypographyUtilityClass = getTypographyUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Zoom/Zoom.js

@@ -29,7 +29,7 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 
 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); }
 
@@ -55,6 +55,7 @@ const defaultTimeout = {
 
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
   const {
+    addEndListener,
     appear = true,
     children,
     easing,
@@ -124,6 +125,14 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     }
   });
   const handleExited = normalizedTransitionCallback(onExited);
+
+  const handleAddEndListener = next => {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(nodeRef.current, next);
+    }
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
     appear: appear,
     in: inProp,
@@ -134,6 +143,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
     timeout: timeout
   }, other, {
     children: (state, childProps) => {
@@ -155,6 +165,13 @@ process.env.NODE_ENV !== "production" ? Zoom.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.default.func,
+
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -165,7 +182,7 @@ process.env.NODE_ENV !== "production" ? Zoom.propTypes
   /**
    * A single child content element.
    */
-  children: _utils.elementAcceptingRef,
+  children: _utils.elementAcceptingRef.isRequired,
 
   /**
    * The transition timing function.

package/node/colors/index.js

@@ -5,124 +5,124 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "common", {
+Object.defineProperty(exports, "amber", {
   enumerable: true,
   get: function () {
-    return _common.default;
+    return _amber.default;
   }
 });
-Object.defineProperty(exports, "red", {
+Object.defineProperty(exports, "blue", {
   enumerable: true,
   get: function () {
-    return _red.default;
+    return _blue.default;
   }
 });
-Object.defineProperty(exports, "pink", {
+Object.defineProperty(exports, "blueGrey", {
   enumerable: true,
   get: function () {
-    return _pink.default;
+    return _blueGrey.default;
   }
 });
-Object.defineProperty(exports, "purple", {
+Object.defineProperty(exports, "brown", {
   enumerable: true,
   get: function () {
-    return _purple.default;
+    return _brown.default;
   }
 });
-Object.defineProperty(exports, "deepPurple", {
+Object.defineProperty(exports, "common", {
   enumerable: true,
   get: function () {
-    return _deepPurple.default;
+    return _common.default;
   }
 });
-Object.defineProperty(exports, "indigo", {
+Object.defineProperty(exports, "cyan", {
   enumerable: true,
   get: function () {
-    return _indigo.default;
+    return _cyan.default;
   }
 });
-Object.defineProperty(exports, "blue", {
+Object.defineProperty(exports, "deepOrange", {
   enumerable: true,
   get: function () {
-    return _blue.default;
+    return _deepOrange.default;
   }
 });
-Object.defineProperty(exports, "lightBlue", {
+Object.defineProperty(exports, "deepPurple", {
   enumerable: true,
   get: function () {
-    return _lightBlue.default;
+    return _deepPurple.default;
   }
 });
-Object.defineProperty(exports, "cyan", {
+Object.defineProperty(exports, "green", {
   enumerable: true,
   get: function () {
-    return _cyan.default;
+    return _green.default;
   }
 });
-Object.defineProperty(exports, "teal", {
+Object.defineProperty(exports, "grey", {
   enumerable: true,
   get: function () {
-    return _teal.default;
+    return _grey.default;
   }
 });
-Object.defineProperty(exports, "green", {
+Object.defineProperty(exports, "indigo", {
   enumerable: true,
   get: function () {
-    return _green.default;
+    return _indigo.default;
   }
 });
-Object.defineProperty(exports, "lightGreen", {
+Object.defineProperty(exports, "lightBlue", {
   enumerable: true,
   get: function () {
-    return _lightGreen.default;
+    return _lightBlue.default;
   }
 });
-Object.defineProperty(exports, "lime", {
+Object.defineProperty(exports, "lightGreen", {
   enumerable: true,
   get: function () {
-    return _lime.default;
+    return _lightGreen.default;
   }
 });
-Object.defineProperty(exports, "yellow", {
+Object.defineProperty(exports, "lime", {
   enumerable: true,
   get: function () {
-    return _yellow.default;
+    return _lime.default;
   }
 });
-Object.defineProperty(exports, "amber", {
+Object.defineProperty(exports, "orange", {
   enumerable: true,
   get: function () {
-    return _amber.default;
+    return _orange.default;
   }
 });
-Object.defineProperty(exports, "orange", {
+Object.defineProperty(exports, "pink", {
   enumerable: true,
   get: function () {
-    return _orange.default;
+    return _pink.default;
   }
 });
-Object.defineProperty(exports, "deepOrange", {
+Object.defineProperty(exports, "purple", {
   enumerable: true,
   get: function () {
-    return _deepOrange.default;
+    return _purple.default;
   }
 });
-Object.defineProperty(exports, "brown", {
+Object.defineProperty(exports, "red", {
   enumerable: true,
   get: function () {
-    return _brown.default;
+    return _red.default;
   }
 });
-Object.defineProperty(exports, "grey", {
+Object.defineProperty(exports, "teal", {
   enumerable: true,
   get: function () {
-    return _grey.default;
+    return _teal.default;
   }
 });
-Object.defineProperty(exports, "blueGrey", {
+Object.defineProperty(exports, "yellow", {
   enumerable: true,
   get: function () {
-    return _blueGrey.default;
+    return _yellow.default;
   }
 });