@mui/material 5.11.14 → 5.11.15

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.14
+ * @mui/material v5.11.15
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -6450,36 +6450,6 @@
   });
   compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
 
-  const createFontStyleFunction = prop => {
-    return props => {
-      if (props[prop] !== undefined && props[prop] !== null) {
-        const styleFromPropValue = propValue => {
-          var _props$theme$typograp;
-          // fetch the value directly defined in the theme, like fontWeightLight
-          let value = (_props$theme$typograp = props.theme.typography) == null ? void 0 : _props$theme$typograp[propValue];
-          if (typeof value === 'object') {
-            // typography variant was pulled, but these props can't be an object
-            value = null;
-          }
-          if (!value) {
-            var _props$theme$typograp2, _props$prop;
-            // fetch fontWeightLight when the value is 'light'
-            value = (_props$theme$typograp2 = props.theme.typography) == null ? void 0 : _props$theme$typograp2[`${prop}${props[prop] === 'default' || props[prop] === prop ? '' : capitalize((_props$prop = props[prop]) == null ? void 0 : _props$prop.toString())}`];
-          }
-          if (!value) {
-            var _props$theme$typograp3, _props$theme$typograp4, _props$theme$typograp5;
-            // fetch the value from the typography variant or default to the propValue
-            value = (_props$theme$typograp3 = (_props$theme$typograp4 = props.theme.typography) == null ? void 0 : (_props$theme$typograp5 = _props$theme$typograp4[propValue]) == null ? void 0 : _props$theme$typograp5[prop]) != null ? _props$theme$typograp3 : propValue;
-          }
-          return {
-            [prop]: value
-          };
-        };
-        return handleBreakpoints(props, props[prop], styleFromPropValue);
-      }
-      return null;
-    };
-  };
   const defaultSxConfig = {
     // borders
     border: {
@@ -6738,19 +6708,16 @@
     boxSizing: {},
     // typography
     fontFamily: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontFamily')
+      themeKey: 'typography'
     },
     fontSize: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontSize')
+      themeKey: 'typography'
     },
     fontStyle: {
       themeKey: 'typography'
     },
     fontWeight: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontWeight')
+      themeKey: 'typography'
     },
     letterSpacing: {},
     textTransform: {},
@@ -6794,6 +6761,11 @@
       if (val == null) {
         return null;
       }
+      if (themeKey === 'typography' && val === 'inherit') {
+        return {
+          [prop]: val
+        };
+      }
       const themeMapping = getPath(theme, themeKey) || {};
       if (style) {
         return style(props);
@@ -8735,12 +8707,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Container;
   }
 
+  function appendLevel(level) {
+    if (!level) {
+      return '';
+    }
+    return `Level${level}`;
+  }
   function isNestedContainer(ownerState) {
     return ownerState.level > 0 && ownerState.container;
   }
   function createGetSelfSpacing(ownerState) {
     return function getSelfSpacing(axis) {
-      return `var(--Grid-${axis}Spacing${ownerState.level || ''})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level)})`;
     };
   }
   function createGetParentSpacing(ownerState) {
@@ -8748,9 +8726,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (ownerState.level === 0) {
         return `var(--Grid-${axis}Spacing)`;
       }
-      return `var(--Grid-${axis}Spacing${ownerState.level - 1 || ''})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level - 1)})`;
     };
   }
+  function getParentColumns(ownerState) {
+    if (ownerState.level === 0) {
+      return `var(--Grid-columns)`;
+    }
+    return `var(--Grid-columns${appendLevel(ownerState.level - 1)})`;
+  }
   const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
   const traverseBreakpoints = (breakpoints, responsive, iterator) => {
     const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
@@ -8821,7 +8805,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         style = {
           flexGrow: 0,
           flexBasis: 'auto',
-          width: `calc(100% * ${value} / var(--Grid-columns)${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
+          width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
         };
       }
       appendStyle(styles, style);
@@ -8842,7 +8826,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
       if (typeof value === 'number') {
         style = {
-          marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(--Grid-columns))`
+          marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
         };
       }
       appendStyle(styles, style);
@@ -8856,12 +8840,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     if (!ownerState.container) {
       return {};
     }
-    const styles = {
+    const styles = isNestedContainer(ownerState) ? {
+      [`--Grid-columns${appendLevel(ownerState.level)}`]: getParentColumns(ownerState)
+    } : {
       '--Grid-columns': 12
     };
     traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
       appendStyle(styles, {
-        '--Grid-columns': value
+        [`--Grid-columns${appendLevel(ownerState.level)}`]: value
       });
     });
     return styles;
@@ -8877,12 +8863,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${ownerState.level || ''}`]: getParentSpacing('row')
+      [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('row')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
       var _theme$spacing;
       appendStyle(styles, {
-        [`--Grid-rowSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+        [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
       });
     });
     return styles;
@@ -8898,12 +8884,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${ownerState.level || ''}`]: getParentSpacing('column')
+      [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('column')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
       var _theme$spacing2;
       appendStyle(styles, {
-        [`--Grid-columnSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+        [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
       });
     });
     return styles;
@@ -9134,7 +9120,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Grid;
   }
 
-  const _excluded$2e = ["component", "direction", "spacing", "divider", "children", "className"];
+  const _excluded$2e = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
   const defaultTheme$4 = createTheme$1();
   // widening Theme to any so that the consumer can own the theme structure.
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -9218,6 +9204,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         });
       }
       const styleFromPropValue = (propValue, breakpoint) => {
+        if (ownerState.useFlexGap) {
+          return {
+            gap: getValue(transformer, propValue)
+          };
+        }
         return {
           '& > :not(style) + :not(style)': {
             margin: 0,
@@ -9255,12 +9246,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           spacing = 0,
           divider,
           children,
-          className
+          className,
+          useFlexGap = false
         } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded$2e);
       const ownerState = {
         direction,
-        spacing
+        spacing,
+        useFlexGap
       };
       const classes = useUtilityClasses();
       return /*#__PURE__*/jsxRuntime_1(StackRoot, _extends({
@@ -11429,7 +11422,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getUAString() {
     var uaData = navigator.userAgentData;
 
-    if (uaData != null && uaData.brands) {
+    if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
       return uaData.brands.map(function (item) {
         return item.brand + "/" + item.version;
       }).join(' ');
@@ -11757,10 +11750,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   // Zooming can change the DPR, but it seems to report a value that will
   // cleanly divide the values into the appropriate subpixels.
 
-  function roundOffsetsByDPR(_ref) {
+  function roundOffsetsByDPR(_ref, win) {
     var x = _ref.x,
         y = _ref.y;
-    var win = window;
     var dpr = win.devicePixelRatio || 1;
     return {
       x: round$1(x * dpr) / dpr || 0,
@@ -11843,7 +11835,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
       x: x,
       y: y
-    }) : {
+    }, getWindow(popper)) : {
       x: x,
       y: y
     };
@@ -20814,7 +20806,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
     const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
     return _extends({
       maxWidth: '100%',
@@ -20881,12 +20872,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       })),
       [`& .${chipClasses$1.deleteIcon}`]: _extends({
         WebkitTapHighlightColor: 'transparent',
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
         fontSize: 22,
         cursor: 'pointer',
         margin: '0 5px 0 -6px',
         '&:hover': {
-          color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(deleteIconColor, 0.4)
+          color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
         }
       }, ownerState.size === 'small' && {
         fontSize: 16,
@@ -22653,6 +22644,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If `true`, the selected option becomes the value of the input
      * when the Autocomplete loses focus unless the user chooses
      * a different option or changes the character string in the input.
+     *
+     * When using `freeSolo` mode, the typed value will be the input value
+     * if the Autocomplete loses focus without highlighting an option.
      * @default false
      */
     autoSelect: PropTypes.bool,
@@ -43411,7 +43405,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The system prop, which 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])
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    /**
+     * 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),
+     * 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.
+     * @default false
+     */
+    useFlexGap: PropTypes.bool
   } ;
   var Stack$1 = Stack;