@mui/material 5.2.3 → 5.2.7

package/legacy/Grid/Grid.js

@@ -30,72 +30,86 @@ function getOffset(val) {
   return "".concat(parse).concat(String(val).replace(String(parse), '') || 'px');
 }
 
-function generateGrid(globalStyles, theme, breakpoint, ownerState) {
-  var size = ownerState[breakpoint];
-
-  if (!size) {
-    return;
-  }
-
-  var styles = {};
-
-  if (size === true) {
-    // For the auto layouting
-    styles = {
-      flexBasis: 0,
-      flexGrow: 1,
-      maxWidth: '100%'
-    };
-  } else if (size === 'auto') {
-    styles = {
-      flexBasis: 'auto',
-      flexGrow: 0,
-      flexShrink: 0,
-      maxWidth: 'none',
-      width: 'auto'
-    };
-  } else {
-    var columnsBreakpointValues = resolveBreakpointValues({
-      values: ownerState.columns,
-      breakpoints: theme.breakpoints.values
-    });
-    var columnValue = _typeof(columnsBreakpointValues) === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues; // Keep 7 significant numbers.
-
-    var width = "".concat(Math.round(size / columnValue * 10e7) / 10e5, "%");
-    var more = {};
-
-    if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
-      var themeSpacing = theme.spacing(ownerState.columnSpacing);
-
-      if (themeSpacing !== '0px') {
-        var fullWidth = "calc(".concat(width, " + ").concat(getOffset(themeSpacing), ")");
-        more = {
-          flexBasis: fullWidth,
-          maxWidth: fullWidth
-        };
-      }
-    } // Close to the bootstrap implementation:
-    // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
+export function generateGrid(_ref) {
+  var theme = _ref.theme,
+      ownerState = _ref.ownerState;
+  var size;
+  return theme.breakpoints.keys.reduce(function (globalStyles, breakpoint) {
+    // Use side effect over immutability for better performance.
+    var styles = {};
 
+    if (ownerState[breakpoint]) {
+      size = ownerState[breakpoint];
+    }
 
-    styles = _extends({
-      flexBasis: width,
-      flexGrow: 0,
-      maxWidth: width
-    }, more);
-  } // No need for a media query for the first size.
+    if (!size) {
+      return globalStyles;
+    }
 
+    if (size === true) {
+      // For the auto layouting
+      styles = {
+        flexBasis: 0,
+        flexGrow: 1,
+        maxWidth: '100%'
+      };
+    } else if (size === 'auto') {
+      styles = {
+        flexBasis: 'auto',
+        flexGrow: 0,
+        flexShrink: 0,
+        maxWidth: 'none',
+        width: 'auto'
+      };
+    } else {
+      var columnsBreakpointValues = resolveBreakpointValues({
+        values: ownerState.columns,
+        breakpoints: theme.breakpoints.values
+      });
+      var columnValue = _typeof(columnsBreakpointValues) === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues;
+
+      if (columnValue === undefined || columnValue === null) {
+        return globalStyles;
+      } // Keep 7 significant numbers.
+
+
+      var width = "".concat(Math.round(size / columnValue * 10e7) / 10e5, "%");
+      var more = {};
+
+      if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
+        var themeSpacing = theme.spacing(ownerState.columnSpacing);
+
+        if (themeSpacing !== '0px') {
+          var fullWidth = "calc(".concat(width, " + ").concat(getOffset(themeSpacing), ")");
+          more = {
+            flexBasis: fullWidth,
+            maxWidth: fullWidth
+          };
+        }
+      } // Close to the bootstrap implementation:
+      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
+
+
+      styles = _extends({
+        flexBasis: width,
+        flexGrow: 0,
+        maxWidth: width
+      }, more);
+    } // No need for a media query for the first size.
+
+
+    if (theme.breakpoints.values[breakpoint] === 0) {
+      _extends(globalStyles, styles);
+    } else {
+      globalStyles[theme.breakpoints.up(breakpoint)] = styles;
+    }
 
-  if (theme.breakpoints.values[breakpoint] === 0) {
-    _extends(globalStyles, styles);
-  } else {
-    globalStyles[theme.breakpoints.up(breakpoint)] = styles;
-  }
+    return globalStyles;
+  }, {});
 }
-
-export function generateDirection(_ref) {
-  var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+export function generateDirection(_ref2) {
+  var theme = _ref2.theme,
+      ownerState = _ref2.ownerState;
   var directionValues = resolveBreakpointValues({
     values: ownerState.direction,
     breakpoints: theme.breakpoints.values
@@ -116,9 +130,9 @@ export function generateDirection(_ref) {
     return output;
   });
 }
-export function generateRowGap(_ref2) {
-  var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
+export function generateRowGap(_ref3) {
+  var theme = _ref3.theme,
+      ownerState = _ref3.ownerState;
   var container = ownerState.container,
       rowSpacing = ownerState.rowSpacing;
   var styles = {};
@@ -147,9 +161,9 @@ export function generateRowGap(_ref2) {
 
   return styles;
 }
-export function generateColumnGap(_ref4) {
-  var theme = _ref4.theme,
-      ownerState = _ref4.ownerState;
+export function generateColumnGap(_ref5) {
+  var theme = _ref5.theme,
+      ownerState = _ref5.ownerState;
   var container = ownerState.container,
       columnSpacing = ownerState.columnSpacing;
   var styles = {};
@@ -224,8 +238,8 @@ var GridRoot = styled('div', {
         zeroMinWidth = _props$ownerState.zeroMinWidth;
     return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth].concat(_toConsumableArray(resolveSpacingClasses(spacing, container, styles)), [direction !== 'row' && styles["direction-xs-".concat(String(direction))], wrap !== 'wrap' && styles["wrap-xs-".concat(String(wrap))], xs !== false && styles["grid-xs-".concat(String(xs))], sm !== false && styles["grid-sm-".concat(String(sm))], md !== false && styles["grid-md-".concat(String(md))], lg !== false && styles["grid-lg-".concat(String(lg))], xl !== false && styles["grid-xl-".concat(String(xl))]]);
   }
-})(function (_ref6) {
-  var ownerState = _ref6.ownerState;
+})(function (_ref7) {
+  var ownerState = _ref7.ownerState;
   return _extends({
     boxSizing: 'border-box'
   }, ownerState.container && {
@@ -242,15 +256,7 @@ var GridRoot = styled('div', {
   }, ownerState.wrap === 'reverse' && {
     flexWrap: 'wrap-reverse'
   });
-}, generateDirection, generateRowGap, generateColumnGap, function (_ref7) {
-  var theme = _ref7.theme,
-      ownerState = _ref7.ownerState;
-  return theme.breakpoints.keys.reduce(function (globalStyles, breakpoint) {
-    // Use side effect over immutability for better performance.
-    generateGrid(globalStyles, theme, breakpoint, ownerState);
-    return globalStyles;
-  }, {});
-});
+}, generateDirection, generateRowGap, generateColumnGap, generateGrid);
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,

package/legacy/InputBase/InputBase.js

@@ -213,6 +213,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
+      disableInjectingGlobalStyles = props.disableInjectingGlobalStyles,
       endAdornment = props.endAdornment,
       error = props.error,
       _props$fullWidth = props.fullWidth,
@@ -244,7 +245,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
       valueProp = props.value,
-      other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"]);
+      other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"]);
 
   var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
 
@@ -459,7 +460,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   var Input = components.Input || InputBaseComponent;
   inputProps = _extends({}, inputProps, componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
+    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
     }, {
       ref: ref,
@@ -573,6 +574,13 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    */
   disabled: PropTypes.bool,
 
+  /**
+   * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
+   * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
+   * @default false
+   */
+  disableInjectingGlobalStyles: PropTypes.bool,
+
   /**
    * End `InputAdornment` for this component.
    */

package/legacy/OutlinedInput/OutlinedInput.js

@@ -6,10 +6,13 @@ import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import NotchedOutline from './NotchedOutline';
+import useFormControl from '../FormControl/useFormControl';
+import formControlState from '../FormControl/formControlState';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
 import useThemeProps from '../styles/useThemeProps';
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -98,6 +101,8 @@ var OutlinedInputInput = styled(InputBaseInput, {
   });
 });
 var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
+  var _React$Fragment;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -118,6 +123,12 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
       other = _objectWithoutProperties(props, ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"]);
 
   var classes = useUtilityClasses(props);
+  var muiFormControl = useFormControl();
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['required']
+  });
   return /*#__PURE__*/_jsx(InputBase, _extends({
     components: _extends({
       Root: OutlinedInputRoot,
@@ -126,7 +137,9 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
         className: classes.notchedOutline,
-        label: label,
+        label: label && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [label, "\xA0", '*']
+        })) : label,
         notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
       });
     },

package/legacy/Select/SelectInput.js

@@ -426,12 +426,18 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
 
   if (computeDisplay) {
     if (multiple) {
-      if (value.length === 0) {
-        display = '';
+      if (displayMultiple.length === 0) {
+        display = null;
       } else {
-        display = displayMultiple.reduce(function (prev, curr) {
-          return [prev, ', ', curr];
-        });
+        display = displayMultiple.reduce(function (output, child, index) {
+          output.push(child);
+
+          if (index < displayMultiple.length - 1) {
+            output.push(', ');
+          }
+
+          return output;
+        }, []);
       }
     } else {
       display = displaySingle;

package/legacy/SvgIcon/SvgIcon.js

@@ -72,30 +72,38 @@ var SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       _props$fontSize = props.fontSize,
       fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,
       htmlColor = props.htmlColor,
+      _props$inheritViewBox = props.inheritViewBox,
+      inheritViewBox = _props$inheritViewBox === void 0 ? false : _props$inheritViewBox,
       titleAccess = props.titleAccess,
       _props$viewBox = props.viewBox,
       viewBox = _props$viewBox === void 0 ? '0 0 24 24' : _props$viewBox,
-      other = _objectWithoutProperties(props, ["children", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"]);
+      other = _objectWithoutProperties(props, ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"]);
 
   var ownerState = _extends({}, props, {
     color: color,
     component: component,
     fontSize: fontSize,
+    inheritViewBox: inheritViewBox,
     viewBox: viewBox
   });
 
+  var more = {};
+
+  if (!inheritViewBox) {
+    more.viewBox = viewBox;
+  }
+
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
     ownerState: ownerState,
     focusable: "false",
-    viewBox: viewBox,
     color: htmlColor,
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
     ref: ref
-  }, other, {
+  }, more, other, {
     children: [children, titleAccess ? /*#__PURE__*/_jsx("title", {
       children: titleAccess
     }) : null]
@@ -152,6 +160,15 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes
    */
   htmlColor: PropTypes.string,
 
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox: PropTypes.bool,
+
   /**
    * The shape-rendering attribute. The behavior of the different options is described on the
    * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).

package/legacy/TextField/TextField.js

@@ -15,8 +15,8 @@ import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var variantComponent = {
   standard: Input,
   filled: FilledInput,
@@ -147,14 +147,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
       InputMore.notched = InputLabelProps.shrink;
     }
 
-    if (label) {
-      var _InputLabelProps$requ;
-
-      var displayRequired = (_InputLabelProps$requ = InputLabelProps == null ? void 0 : InputLabelProps.required) != null ? _InputLabelProps$requ : required;
-      InputMore.label = /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [label, displayRequired && "\xA0*"]
-      });
-    }
+    InputMore.label = label;
   }
 
   if (select) {

package/legacy/index.js

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