@mui/material 5.5.1 → 5.6.0

package/legacy/Grow/Grow.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { elementAcceptingRef } from '@mui/utils';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
-import { reflow, getTransitionProps } from '../transitions/utils';
+import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -23,6 +23,12 @@ var styles = {
     transform: 'none'
   }
 };
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+ * Remove this workaround once the Safari bug is fixed.
+ */
+
+var isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/components/tooltips/) and
  * [Popover](/components/popover/) components.
@@ -98,7 +104,7 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration: duration,
       delay: delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
+      duration: isSafari154 ? duration : duration * 0.666,
       delay: delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -134,11 +140,11 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration: duration,
       delay: delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration: isSafari154 ? duration : duration * 0.666,
+      delay: isSafari154 ? delay : delay || duration * 0.333,
       easing: transitionTimingFunction
     })].join(',');
-    node.style.opacity = '0';
+    node.style.opacity = 0;
     node.style.transform = getScale(0.75);
 
     if (onExit) {

package/legacy/Icon/Icon.js

@@ -128,7 +128,9 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'inherit'
    */
   color: PropTypes

package/legacy/IconButton/IconButton.js

@@ -166,7 +166,9 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/legacy/Input/Input.js

@@ -169,7 +169,9 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes

package/legacy/InputBase/InputBase.js

@@ -540,7 +540,9 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes

package/legacy/InputLabel/InputLabel.js

@@ -162,7 +162,9 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/legacy/LinearProgress/LinearProgress.js

@@ -272,7 +272,9 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Link/Link.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
@@ -9,6 +10,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
+import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
@@ -91,6 +93,7 @@ var LinkRoot = styled(Typography, {
   }));
 });
 var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  var theme = useTheme();
   var props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -108,7 +111,8 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
       underline = _props$underline === void 0 ? 'always' : _props$underline,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'inherit' : _props$variant,
-      other = _objectWithoutProperties(props, ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"]);
+      sx = props.sx,
+      other = _objectWithoutProperties(props, ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"]);
 
   var _useIsFocusVisible = useIsFocusVisible(),
       isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
@@ -147,7 +151,9 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   var ownerState = _extends({}, props, {
-    color: color,
+    // It is too complex to support any types of `sx`.
+    // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
+    color: (typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color) || color,
     component: component,
     focusVisible: focusVisible,
     underline: underline,
@@ -158,13 +164,15 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   return /*#__PURE__*/_jsx(LinkRoot, _extends({
     className: clsx(classes.root, className),
     classes: TypographyClasses,
-    color: color,
     component: component,
     onBlur: handleBlur,
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant
+    variant: variant,
+    sx: [{
+      color: colorTransformations[color] || color
+    }].concat(_toConsumableArray(Array.isArray(sx) ? sx : [sx]))
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes

package/legacy/ListItemButton/ListItemButton.js

@@ -53,6 +53,7 @@ var ListItemButtonRoot = styled(ButtonBase, {
     alignItems: 'center',
     position: 'relative',
     textDecoration: 'none',
+    minWidth: 0,
     boxSizing: 'border-box',
     textAlign: 'left',
     paddingTop: 8,

package/legacy/OutlinedInput/OutlinedInput.js

@@ -180,7 +180,9 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes

package/legacy/Pagination/Pagination.js

@@ -170,6 +170,8 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes
 
   /**
    * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/legacy/PaginationItem/PaginationItem.js

@@ -293,6 +293,8 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
 
   /**
    * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/legacy/Popper/Popper.js

@@ -1,12 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
-import { HTMLElementType, refType } from '@mui/utils';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
-import useThemeProps from '../styles/useThemeProps';
+import { HTMLElementType, refType } from '@mui/utils';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
+var PopperRoot = styled(PopperUnstyled, {
+  name: 'MuiPopper',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})({});
 /**
  *
  * Demos:
@@ -19,13 +25,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [Popper API](https://mui.com/api/popper/)
  */
+
 var Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   var theme = useTheme();
   var props = useThemeProps({
     props: inProps,
     name: 'MuiPopper'
   });
-  return /*#__PURE__*/_jsx(PopperUnstyled, _extends({
+  return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme == null ? void 0 : theme.direction
   }, props, {
     ref: ref
@@ -129,6 +136,11 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
    */
   popperRef: refType,
 
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
   /**
    * Help supporting a react-transition-group/Transition component.
    * @default false

package/legacy/Radio/Radio.js

@@ -153,7 +153,9 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Slider/Slider.js

@@ -556,7 +556,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/SvgIcon/SvgIcon.js

@@ -134,7 +134,9 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
    * @default 'inherit'
    */

package/legacy/Switch/Switch.js

@@ -252,7 +252,9 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/TextField/TextField.js

@@ -254,7 +254,9 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/ToggleButton/ToggleButton.js

@@ -162,6 +162,8 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
 
   /**
    * The color of the button when it is in an active state.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/legacy/ToggleButtonGroup/ToggleButtonGroup.js

@@ -184,7 +184,9 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of a button when it is selected.
+   * The color of the button when it is selected.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/legacy/Unstable_TrapFocus/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/Unstable_TrapFocus';
+export { default } from '@mui/base/TrapFocus';

package/legacy/index.js

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