@mui/material 5.12.0 → 5.12.1

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.12.0
+ * @mui/material v5.12.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7342,6 +7342,9 @@
           }
           Component.displayName = displayName;
         }
+        if (tag.muiName) {
+          Component.muiName = tag.muiName;
+        }
         return Component;
       };
       if (defaultStyledResolver.withConfig) {
@@ -8639,11 +8642,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const generateCssVars = colorScheme => {
       if (!colorScheme) {
         return {
-          css: rootCss,
+          css: _extends({}, rootCss),
           vars: rootVars
         };
       }
-      return colorSchemesMap[colorScheme];
+      return {
+        css: _extends({}, colorSchemesMap[colorScheme].css),
+        vars: colorSchemesMap[colorScheme].vars
+      };
     };
     return {
       vars: themeVars,
@@ -8790,26 +8796,26 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return `Level${level}`;
   }
   function isNestedContainer(ownerState) {
-    return ownerState.level > 0 && ownerState.container;
+    return ownerState.unstable_level > 0 && ownerState.container;
   }
   function createGetSelfSpacing(ownerState) {
     return function getSelfSpacing(axis) {
-      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level)})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level)})`;
     };
   }
   function createGetParentSpacing(ownerState) {
     return function getParentSpacing(axis) {
-      if (ownerState.level === 0) {
+      if (ownerState.unstable_level === 0) {
         return `var(--Grid-${axis}Spacing)`;
       }
-      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level - 1)})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level - 1)})`;
     };
   }
   function getParentColumns(ownerState) {
-    if (ownerState.level === 0) {
+    if (ownerState.unstable_level === 0) {
       return `var(--Grid-columns)`;
     }
-    return `var(--Grid-columns${appendLevel(ownerState.level - 1)})`;
+    return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
   }
   const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
   const traverseBreakpoints = (breakpoints, responsive, iterator) => {
@@ -8917,13 +8923,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       return {};
     }
     const styles = isNestedContainer(ownerState) ? {
-      [`--Grid-columns${appendLevel(ownerState.level)}`]: getParentColumns(ownerState)
+      [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: getParentColumns(ownerState)
     } : {
       '--Grid-columns': 12
     };
     traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
       appendStyle(styles, {
-        [`--Grid-columns${appendLevel(ownerState.level)}`]: value
+        [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
       });
     });
     return styles;
@@ -8939,12 +8945,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const styles = isNestedContainer(ownerState) ? {
       // Set the default spacing as its parent spacing.
       // It will be overridden if spacing props are provided
-      [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('row')
+      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
       var _theme$spacing;
       appendStyle(styles, {
-        [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+        [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
       });
     });
     return styles;
@@ -8960,12 +8966,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const styles = isNestedContainer(ownerState) ? {
       // Set the default spacing as its parent spacing.
       // It will be overridden if spacing props are provided
-      [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('column')
+      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
       var _theme$spacing2;
       appendStyle(styles, {
-        [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+        [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
       });
     });
     return styles;
@@ -9048,7 +9054,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [`direction-xs-${String(direction)}`];
   };
 
-  const _excluded$2g = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+  const _excluded$2g = ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"];
   const defaultTheme$5 = createTheme$1();
 
   // widening Theme to any so that the consumer can own the theme structure.
@@ -9071,7 +9077,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       useThemeProps = useThemePropsDefault$1,
       componentName = 'MuiGrid'
     } = options;
-    const NestedContext = /*#__PURE__*/React__namespace.createContext(0);
     const OverflowContext = /*#__PURE__*/React__namespace.createContext(undefined);
     const useUtilityClasses = (ownerState, theme) => {
       const {
@@ -9092,10 +9097,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const theme = useTheme$2();
       const themeProps = useThemeProps(inProps);
       const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-      const level = React__namespace.useContext(NestedContext);
       const overflow = React__namespace.useContext(OverflowContext);
       const {
           className,
+          children,
           columns: columnsProp = 12,
           container = false,
           component = 'div',
@@ -9104,7 +9109,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           spacing: spacingProp = 0,
           rowSpacing: rowSpacingProp = spacingProp,
           columnSpacing: columnSpacingProp = spacingProp,
-          disableEqualOverflow: themeDisableEqualOverflow
+          disableEqualOverflow: themeDisableEqualOverflow,
+          unstable_level: level = 0
         } = props,
         rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
       // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
@@ -9151,13 +9157,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         as: component,
         ownerState: ownerState,
         className: clsx(classes.root, className)
-      }, other));
-      if (container) {
-        result = /*#__PURE__*/jsxRuntime_1(NestedContext.Provider, {
-          value: level + 1,
-          children: result
-        });
-      }
+      }, other, {
+        children: React__namespace.Children.map(children, child => {
+          if ( /*#__PURE__*/React__namespace.isValidElement(child) && isMuiElement(child, ['Grid'])) {
+            var _child$props$unstable;
+            return /*#__PURE__*/React__namespace.cloneElement(child, {
+              unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
+            });
+          }
+          return child;
+        })
+      }));
       if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
         // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
         // 1. It is the root grid with `disableEqualOverflow`.
@@ -9193,6 +9203,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
       xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
     } ;
+
+    // @ts-ignore internal logic for nested grid
+    Grid.muiName = 'Grid';
     return Grid;
   }
 
@@ -10257,7 +10270,14 @@ Use unitless line heights instead.` );
     }));
   }
   ThemeProvider.propTypes = {
-    theme: PropTypes.object
+    /**
+     * Your component tree.
+     */
+    children: PropTypes.node,
+    /**
+     * A theme object. You can provide a function to extend the outer theme.
+     */
+    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
   } ;
 
   function makeStyles() {
@@ -10402,7 +10422,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
 
       // assign component variables
-      assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+      assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
       if (key === 'light') {
         setColor(palette.Alert, 'errorColor', private_safeDarken(palette.error.light, 0.6));
         setColor(palette.Alert, 'infoColor', private_safeDarken(palette.info.light, 0.6));
@@ -10426,6 +10446,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
         setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
         setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+        setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
+        setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
         setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
         setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
         setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
@@ -10486,6 +10508,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
         setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
         setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+        setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
+        setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
         setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
         setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
         setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));
@@ -22232,7 +22256,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         paddingRight: 52 + 4 + 9
       },
       [`& .${autocompleteClasses$1.input}`]: {
-        padding: '7.5px 4px 7.5px 6px'
+        padding: '7.5px 4px 7.5px 5px'
       },
       [`& .${autocompleteClasses$1.endAdornment}`]: {
         right: 9
@@ -22245,7 +22269,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       paddingBottom: 6,
       paddingLeft: 6,
       [`& .${autocompleteClasses$1.input}`]: {
-        padding: '2.5px 4px 2.5px 6px'
+        padding: '2.5px 4px 2.5px 8px'
       }
     },
     [`& .${filledInputClasses$1.root}`]: {
@@ -25001,6 +25025,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => {
     var _theme$palette$getCon, _theme$palette;
+    const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+    const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
     return _extends({}, theme.typography.button, {
       minWidth: 64,
       padding: '6px 16px',
@@ -25029,7 +25055,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           backgroundColor: 'transparent'
         }
       }, ownerState.variant === 'contained' && {
-        backgroundColor: (theme.vars || theme).palette.grey.A100,
+        backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
         boxShadow: (theme.vars || theme).shadows[4],
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
@@ -25072,7 +25098,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       color: theme.vars ?
       // this is safe because grey does not change between default light/dark mode
       theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
-      backgroundColor: (theme.vars || theme).palette.grey[300],
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
       boxShadow: (theme.vars || theme).shadows[2]
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
       color: (theme.vars || theme).palette[ownerState.color].contrastText,
@@ -29919,20 +29945,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getFormControlLabelUtilityClasses(slot) {
     return generateUtilityClass('MuiFormControlLabel', slot);
   }
-  const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
+  const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
   var formControlLabelClasses$1 = formControlLabelClasses;
 
-  const _excluded$1g = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+  const _excluded$1g = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
   const useUtilityClasses$13 = ownerState => {
     const {
       classes,
       disabled,
       labelPlacement,
-      error
+      error,
+      required
     } = ownerState;
     const slots = {
-      root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error'],
-      label: ['label', disabled && 'disabled']
+      root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error', required && 'required'],
+      label: ['label', disabled && 'disabled'],
+      asterisk: ['asterisk', error && 'error']
     };
     return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
   };
@@ -29981,13 +30009,24 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
   }));
+  const AsteriskComponent$1 = styled$1('span', {
+    name: 'MuiFormControlLabel',
+    slot: 'Asterisk',
+    overridesResolver: (props, styles) => styles.asterisk
+  })(({
+    theme
+  }) => ({
+    [`&.${formControlLabelClasses$1.error}`]: {
+      color: (theme.vars || theme).palette.error.main
+    }
+  }));
 
   /**
    * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
    * Use this component if you want to display an extra label.
    */
   const FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
-    var _slotProps$typography;
+    var _ref, _slotProps$typography;
     const props = useThemeProps({
       props: inProps,
       name: 'MuiFormControlLabel'
@@ -30000,19 +30039,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         disableTypography,
         label: labelProp,
         labelPlacement = 'end',
+        required: requiredProp,
         slotProps = {}
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1g);
     const muiFormControl = useFormControl();
-    let disabled = disabledProp;
-    if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
-      disabled = control.props.disabled;
-    }
-    if (typeof disabled === 'undefined' && muiFormControl) {
-      disabled = muiFormControl.disabled;
-    }
+    const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
+    const required = requiredProp != null ? requiredProp : control.props.required;
     const controlProps = {
-      disabled
+      disabled,
+      required
     };
     ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
       if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
@@ -30027,6 +30063,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       disabled,
       labelPlacement,
+      required,
       error: fcs.error
     });
     const classes = useUtilityClasses$13(ownerState);
@@ -30045,7 +30082,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       ref: ref
     }, other, {
-      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label]
+      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label, required && /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
+        ownerState: ownerState,
+        "aria-hidden": true,
+        className: classes.asterisk,
+        children: ["\u2009", '*']
+      })]
     }));
   });
   FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -30108,6 +30150,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * You can pull out the new checked state by accessing `event.target.checked` (boolean).
      */
     onChange: PropTypes.func,
+    /**
+     * If `true`, the label will indicate that the `input` is required.
+     */
+    required: PropTypes.bool,
     /**
      * The props used for each slot inside.
      * @default {}
@@ -43535,7 +43581,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
      *
-     * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+     * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
      * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
      *
      * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
@@ -47498,7 +47544,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const setMeasurements = () => {
       scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
     };
-    React__namespace.useEffect(() => {
+    useEnhancedEffect$1(() => {
       const handleResize = debounce$1(() => {
         const prevHeight = scrollbarHeight.current;
         setMeasurements();