@mui/material 5.0.4 → 5.0.5

package/node/SvgIcon/SvgIcon.js

@@ -186,7 +186,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Provides a human-readable title for the element that contains it.

package/node/Switch/Switch.js

@@ -353,7 +353,7 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The value of the component. The DOM API casts this to a string.

package/node/Tab/Tab.js

@@ -33,7 +33,7 @@ var _tabClasses = _interopRequireWildcard(require("./tabClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
+const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
 
 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); }
 
@@ -78,16 +78,24 @@ const TabRoot = (0, _styled.default)(_ButtonBase.default, {
   padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
-  textAlign: 'center',
-  flexDirection: 'column',
+  textAlign: 'center'
+}, ownerState.label && {
+  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
+}, {
   lineHeight: 1.25
 }, ownerState.icon && ownerState.label && {
   minHeight: 72,
   paddingTop: 9,
   paddingBottom: 9,
-  [`& > .${_tabClasses.default.iconWrapper}`]: {
+  [`& > .${_tabClasses.default.iconWrapper}`]: (0, _extends2.default)({}, ownerState.iconPosition === 'top' && {
     marginBottom: 6
-  }
+  }, ownerState.iconPosition === 'bottom' && {
+    marginTop: 6
+  }, ownerState.iconPosition === 'start' && {
+    marginRight: theme.spacing(1)
+  }, ownerState.iconPosition === 'end' && {
+    marginLeft: theme.spacing(1)
+  })
 }, ownerState.textColor === 'inherit' && {
   color: 'inherit',
   opacity: 0.6,
@@ -134,6 +142,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     // eslint-disable-next-line react/prop-types
     fullWidth,
     icon: iconProp,
+    iconPosition = 'top',
     // eslint-disable-next-line react/prop-types
     indicator,
     label,
@@ -155,6 +164,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     disableFocusRipple,
     selected,
     icon: !!iconProp,
+    iconPosition,
     label: !!label,
     fullWidth,
     textColor,
@@ -197,7 +207,11 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     ownerState: ownerState,
     tabIndex: selected ? 0 : -1
   }, other, {
-    children: [icon, label, indicator]
+    children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [icon, label]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [label, icon]
+    }), indicator]
   }));
 });
 process.env.NODE_ENV !== "production" ? Tab.propTypes
@@ -250,6 +264,12 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.string]),
 
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition: _propTypes.default.oneOf(['bottom', 'end', 'start', 'top']),
+
   /**
    * The label element.
    */
@@ -273,7 +293,7 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.

package/node/TabScrollButton/TabScrollButton.js

@@ -152,7 +152,7 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TabScrollButton;
 exports.default = _default;

package/node/Table/Table.js

@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? Table.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = Table;
 exports.default = _default;

package/node/TableBody/TableBody.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? TableBody.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableBody;
 exports.default = _default;

package/node/TableCell/TableCell.js

@@ -245,7 +245,7 @@ process.env.NODE_ENV !== "production" ? TableCell.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Specify the cell type.

package/node/TableContainer/TableContainer.js

@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? TableContainer.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableContainer;
 exports.default = _default;

package/node/TableFooter/TableFooter.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? TableFooter.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableFooter;
 exports.default = _default;

package/node/TableHead/TableHead.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? TableHead.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableHead;
 exports.default = _default;

package/node/TablePagination/TablePagination.js

@@ -444,7 +444,7 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TablePagination;
 exports.default = _default;

package/node/TableRow/TableRow.js

@@ -157,7 +157,7 @@ process.env.NODE_ENV !== "production" ? TableRow.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableRow;
 exports.default = _default;

package/node/TableSortLabel/TableSortLabel.js

@@ -201,7 +201,7 @@ process.env.NODE_ENV !== "production" ? TableSortLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableSortLabel;
 exports.default = _default;

package/node/Tabs/Tabs.js

@@ -834,7 +834,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Props applied to the tab indicator element.

package/node/TextField/TextField.js

@@ -437,7 +437,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).

package/node/TextareaAutosize/index.js

@@ -12,4 +12,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _TextareaAutosize = _interopRequireDefault(require("./TextareaAutosize"));
+var _TextareaAutosize = _interopRequireDefault(require("@mui/core/TextareaAutosize"));

package/node/ToggleButton/ToggleButton.js

@@ -248,7 +248,7 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The value to associate with the button when selected in a

package/node/ToggleButtonGroup/ToggleButtonGroup.js

@@ -266,7 +266,7 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The currently selected value within the group or an array of selected

package/node/Toolbar/Toolbar.js

@@ -138,7 +138,7 @@ process.env.NODE_ENV !== "production" ? Toolbar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The variant to use.

package/node/Tooltip/Tooltip.js

@@ -246,11 +246,11 @@ function composeEventHandler(handler, eventHandler) {
 
     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$Tooltip, _components$Arrow, _componentsProps$popp;
+  var _components$Popper, _ref, _components$Transitio, _components$Tooltip, _components$Arrow, _componentsProps$popp;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -617,7 +617,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
   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 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, _core.appendOwnerState)(PopperComponent, (0, _extends2.default)({}, PopperProps, componentsProps.popper), ownerState);
@@ -828,7 +828,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Tooltip title. Zero-length titles string are never displayed.

package/node/Typography/Typography.js

@@ -203,7 +203,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Applies the theme typography styles.

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.4
+/** @license MUI v5.0.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/styles/index.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "createTheme", {
     return _createTheme.default;
   }
 });
+Object.defineProperty(exports, "css", {
+  enumerable: true,
+  get: function () {
+    return _system.css;
+  }
+});
 Object.defineProperty(exports, "darken", {
   enumerable: true,
   get: function () {
@@ -107,6 +113,12 @@ Object.defineProperty(exports, "hslToRgb", {
     return _system.hslToRgb;
   }
 });
+Object.defineProperty(exports, "keyframes", {
+  enumerable: true,
+  get: function () {
+    return _system.keyframes;
+  }
+});
 Object.defineProperty(exports, "lighten", {
   enumerable: true,
   get: function () {

package/node/utils/index.js

@@ -65,6 +65,12 @@ Object.defineProperty(exports, "setRef", {
     return _setRef.default;
   }
 });
+Object.defineProperty(exports, "unstable_ClassNameGenerator", {
+  enumerable: true,
+  get: function () {
+    return _core.unstable_ClassNameGenerator;
+  }
+});
 Object.defineProperty(exports, "unstable_useEnhancedEffect", {
   enumerable: true,
   get: function () {
@@ -140,4 +146,6 @@ var _useEventCallback = _interopRequireDefault(require("./useEventCallback"));
 
 var _useForkRef = _interopRequireDefault(require("./useForkRef"));
 
-var _useIsFocusVisible = _interopRequireDefault(require("./useIsFocusVisible"));
+var _useIsFocusVisible = _interopRequireDefault(require("./useIsFocusVisible"));
+
+var _core = require("@mui/core");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "private": false,
   "author": "MUI Team",
   "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.4.1",
+    "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^16.8.6 || ^17.0.0",
     "react": "^17.0.2",
@@ -45,12 +45,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@mui/core": "5.0.0-alpha.51",
-    "@mui/system": "^5.0.4",
+    "@mui/core": "5.0.0-alpha.52",
+    "@mui/system": "^5.0.5",
     "@mui/types": "^7.0.0",
     "@mui/utils": "^5.0.1",
-    "@popperjs/core": "^2.4.4",
-    "@types/react-transition-group": "^4.4.3",
+    "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.0.9",
     "hoist-non-react-statics": "^3.3.2",

package/styles/components.d.ts

@@ -128,9 +128,6 @@ export interface Components {
     styleOverrides?: ComponentsOverrides['MuiContainer'];
     variants?: ComponentsVariants['MuiContainer'];
   };
-  /**
-   * @deprecated See CssBaseline.d.ts
-   */
   MuiCssBaseline?: {
     defaultProps?: ComponentsProps['MuiCssBaseline'];
     styleOverrides?: ComponentsOverrides['MuiCssBaseline'];

package/styles/index.d.ts

@@ -36,7 +36,11 @@ export {
   Breakpoints,
   BreakpointsOptions,
   CreateMUIStyled,
+  Interpolation,
+  CSSInterpolation,
   CSSObject,
+  css,
+  keyframes,
   // color manipulators
   hexToRgb,
   rgbToHex,

package/styles/index.js

@@ -1,5 +1,5 @@
 export { default as adaptV4Theme } from './adaptV4Theme';
-export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten } from '@mui/system';
+export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';
 export { default as createTheme, createMuiTheme } from './createTheme';
 export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme';
 export { default as createStyles } from './createStyles';