npm - @mui/material - Versions diffs - 5.17.0 → 5.18.0 - Mend

@mui/material 5.17.0 → 5.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/Breadcrumbs/BreadcrumbCollapsed.js +3 -1
package/CHANGELOG.md +34 -0
package/OutlinedInput/NotchedOutline.js +2 -0
package/Radio/RadioButtonIcon.js +7 -2
package/SwipeableDrawer/SwipeArea.js +1 -0
package/index.js +1 -1
package/internal/SwitchBase.js +4 -1
package/legacy/Breadcrumbs/BreadcrumbCollapsed.js +3 -1
package/legacy/OutlinedInput/NotchedOutline.js +2 -0
package/legacy/Radio/RadioButtonIcon.js +7 -2
package/legacy/SwipeableDrawer/SwipeArea.js +1 -0
package/legacy/index.js +1 -1
package/legacy/internal/SwitchBase.js +4 -1
package/legacy/styles/shouldSkipGeneratingVar.js +1 -1
package/legacy/version/index.js +2 -2
package/modern/Breadcrumbs/BreadcrumbCollapsed.js +3 -1
package/modern/OutlinedInput/NotchedOutline.js +2 -0
package/modern/Radio/RadioButtonIcon.js +7 -2
package/modern/SwipeableDrawer/SwipeArea.js +1 -0
package/modern/index.js +1 -1
package/modern/internal/SwitchBase.js +4 -1
package/modern/styles/shouldSkipGeneratingVar.js +1 -1
package/modern/version/index.js +2 -2
package/node/Breadcrumbs/BreadcrumbCollapsed.js +3 -1
package/node/OutlinedInput/NotchedOutline.js +2 -0
package/node/Radio/RadioButtonIcon.js +7 -2
package/node/SwipeableDrawer/SwipeArea.js +1 -0
package/node/index.js +1 -1
package/node/internal/SwitchBase.js +4 -1
package/node/styles/shouldSkipGeneratingVar.js +1 -1
package/node/version/index.js +2 -2
package/package.json +5 -5
package/styles/createTheme.d.ts +1 -0
package/styles/experimental_extendTheme.d.ts +5 -0
package/styles/shouldSkipGeneratingVar.js +1 -1
package/umd/material-ui.development.js +172 -33
package/umd/material-ui.production.min.js +2 -2
package/version/index.js +2 -2

package/umd/material-ui.development.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.17.0
+ * @mui/material v5.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5160,26 +5160,58 @@
   var jsxRuntimeExports = requireJsxRuntime();
-  var cache;
-  if ((typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object') {
-    cache = createCache({
+  function getCache(injectFirst, enableCssLayer) {
+    var emotionCache = createCache({
       key: 'css',
-      prepend: true
+      prepend: injectFirst
     });
+    if (enableCssLayer) {
+      var prevInsert = emotionCache.insert;
+      emotionCache.insert = function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+          // avoid nested @layer
+          args[1].styles = "@layer mui {".concat(args[1].styles, "}");
+        }
+        return prevInsert.apply(void 0, args);
+      };
+    }
+    return emotionCache;
   }
+  var cacheMap = new Map();
   function StyledEngineProvider(props) {
     var injectFirst = props.injectFirst,
+      enableCssLayer = props.enableCssLayer,
       children = props.children;
-    return injectFirst && cache ? /*#__PURE__*/jsxRuntimeExports.jsx(CacheProvider, {
-      value: cache,
-      children: children
-    }) : children;
+    var cache = React__namespace.useMemo(function () {
+      var cacheKey = "".concat(injectFirst, "-").concat(enableCssLayer);
+      if ((typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' && cacheMap.has(cacheKey)) {
+        return cacheMap.get(cacheKey);
+      }
+      var fresh = getCache(injectFirst, enableCssLayer);
+      cacheMap.set(cacheKey, fresh);
+      return fresh;
+    }, [injectFirst, enableCssLayer]);
+    if (injectFirst || enableCssLayer) {
+      return /*#__PURE__*/jsxRuntimeExports.jsx(CacheProvider, {
+        value: cache,
+        children: children
+      });
+    }
+    return children;
   }
   StyledEngineProvider.propTypes = {
     /**
      * Your component tree.
      */
     children: PropTypes.node,
+    /**
+     * If true, MUI styles are wrapped in CSS `@layer mui` rule.
+     * It helps to override MUI styles when using CSS Modules, Tailwind CSS, plain CSS, or any other styling solution.
+     */
+    enableCssLayer: PropTypes.bool,
     /**
      * By default, the styles are injected last in the <head> element of the page.
      * As a result, they gain more specificity than any other style sheet.
@@ -5236,6 +5268,14 @@
     }
   };
+  // Emotion only accepts an array, but we want to avoid allocations
+  var wrapper = [];
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  function internal_serializeStyles(styles) {
+    wrapper[0] = styles;
+    return serializeStyles(wrapper);
+  }
   // https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
   function isPlainObject(item) {
     if (_typeof(item) !== 'object' || item === null) {
@@ -6439,7 +6479,8 @@
       var _ref4 = props || {},
         sx = _ref4.sx,
         _ref4$theme = _ref4.theme,
-        theme = _ref4$theme === void 0 ? {} : _ref4$theme;
+        theme = _ref4$theme === void 0 ? {} : _ref4$theme,
+        nested = _ref4.nested;
       if (!sx) {
         return null; // Emotion & styled-components will neglect null
       }
@@ -6479,7 +6520,8 @@
                 if (objectsHaveSameKeys(breakpointsValues, value)) {
                   css[styleKey] = styleFunctionSx({
                     sx: value,
-                    theme: theme
+                    theme: theme,
+                    nested: true
                   });
                 } else {
                   css = merge(css, breakpointsValues);
@@ -6490,6 +6532,11 @@
             }
           }
         });
+        if (!nested && theme.modularCssLayers) {
+          return {
+            '@layer sx': removeUnusedBreakpoints(breakpointsKeys, css)
+          };
+        }
         return removeUnusedBreakpoints(breakpointsKeys, css);
       }
       return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
@@ -6628,13 +6675,37 @@
     return useTheme$3(defaultTheme);
   }
+  function wrapGlobalLayer(styles) {
+    var serialized = internal_serializeStyles(styles);
+    if (styles !== serialized && serialized.styles) {
+      if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+        // If the styles are not already wrapped in a layer, wrap them in a global layer.
+        serialized.styles = "@layer global{".concat(serialized.styles, "}");
+      }
+      return serialized;
+    }
+    return styles;
+  }
   function GlobalStyles$1(_ref) {
     var styles = _ref.styles,
       themeId = _ref.themeId,
       _ref$defaultTheme = _ref.defaultTheme,
       defaultTheme = _ref$defaultTheme === void 0 ? {} : _ref$defaultTheme;
     var upperTheme = useTheme$2(defaultTheme);
-    var globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+    var resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+    var globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
+    if (resolvedTheme.modularCssLayers) {
+      if (Array.isArray(globalStyles)) {
+        globalStyles = globalStyles.map(function (styleArg) {
+          if (typeof styleArg === 'function') {
+            return wrapGlobalLayer(styleArg(resolvedTheme));
+          }
+          return wrapGlobalLayer(styleArg);
+        });
+      } else {
+        globalStyles = wrapGlobalLayer(globalStyles);
+      }
+    }
     return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$2, {
       styles: globalStyles
     });
@@ -6989,6 +7060,13 @@
   function shouldForwardProp(prop) {
     return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
   }
+  function shallowLayer(serialized, layerName) {
+    if (layerName && serialized && _typeof(serialized) === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+    ) {
+      serialized.styles = "@layer ".concat(layerName, "{").concat(String(serialized.styles), "}");
+    }
+    return serialized;
+  }
   var systemDefaultTheme = createTheme$1();
   var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
     if (!string) {
@@ -7010,7 +7088,7 @@
       return styles[slot];
     };
   }
-  function processStyleArg(callableStyle, _ref2) {
+  function processStyleArg(callableStyle, _ref2, layerName) {
     var ownerState = _ref2.ownerState,
       props = _objectWithoutProperties(_ref2, ["ownerState"]);
     var resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
@@ -7020,7 +7098,7 @@
       return resolvedStylesArg.flatMap(function (resolvedStyle) {
         return processStyleArg(resolvedStyle, _extends({
           ownerState: ownerState
-        }, props));
+        }, props), layerName);
       });
     }
     if (!!resolvedStylesArg && _typeof(resolvedStylesArg) === 'object' && Array.isArray(resolvedStylesArg.variants)) {
@@ -7045,14 +7123,15 @@
           if (!Array.isArray(result)) {
             result = [result];
           }
-          result.push(typeof variant.style === 'function' ? variant.style(_extends({
+          var variantStyle = typeof variant.style === 'function' ? variant.style(_extends({
             ownerState: ownerState
-          }, props, ownerState)) : variant.style);
+          }, props, ownerState)) : variant.style;
+          result.push(layerName ? shallowLayer(internal_serializeStyles(variantStyle), layerName) : variantStyle);
         }
       });
       return result;
     }
-    return resolvedStylesArg;
+    return layerName ? shallowLayer(internal_serializeStyles(resolvedStylesArg), layerName) : resolvedStylesArg;
   }
   function createStyled() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -7086,7 +7165,10 @@
         inputSkipSx = inputOptions.skipSx,
         _inputOptions$overrid = inputOptions.overridesResolver,
         overridesResolver = _inputOptions$overrid === void 0 ? defaultOverridesResolver(lowercaseFirstLetter(componentSlot)) : _inputOptions$overrid,
-        options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+        options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]);
+      var layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
+      // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
       var skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
       // TODO v6: remove `Root` in the next major release
       // For more details: https://github.com/mui/material-ui/pull/37908
@@ -7123,13 +7205,14 @@
         // which are basically components used as a selectors.
         if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
           return function (props) {
+            var theme = resolveTheme({
+              theme: props.theme,
+              defaultTheme: defaultTheme,
+              themeId: themeId
+            });
             return processStyleArg(stylesArg, _extends({}, props, {
-              theme: resolveTheme({
-                theme: props.theme,
-                defaultTheme: defaultTheme,
-                themeId: themeId
-              })
-            }));
+              theme: theme
+            }), theme.modularCssLayers ? layerName : undefined);
           };
         }
         return stylesArg;
@@ -7158,7 +7241,7 @@
                 slotStyle = _ref4[1];
               resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
                 theme: theme
-              }));
+              }), theme.modularCssLayers ? 'theme' : undefined);
             });
             return overridesResolver(props, resolvedStyleOverrides);
           });
@@ -7175,7 +7258,7 @@
               variants: themeVariants
             }, _extends({}, props, {
               theme: theme
-            }));
+            }), theme.modularCssLayers ? 'theme' : undefined);
           });
         }
         if (!skipSx) {
@@ -8891,6 +8974,48 @@
     });
   }
+  function useLayerOrder(theme) {
+    var upperTheme = useTheme$3();
+    var id = useId() || '';
+    var modularCssLayers = theme.modularCssLayers;
+    var layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+    if (!modularCssLayers || upperTheme !== null) {
+      // skip this hook if upper theme exists.
+      layerOrder = '';
+    } else if (typeof modularCssLayers === 'string') {
+      layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+    } else {
+      layerOrder = "@layer ".concat(layerOrder, ";");
+    }
+    useEnhancedEffect$1(function () {
+      var head = document.querySelector('head');
+      if (!head) {
+        return;
+      }
+      var firstChild = head.firstChild;
+      if (layerOrder) {
+        var _firstChild$hasAttrib;
+        // Only insert if first child doesn't have data-mui-layer-order attribute
+        if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+          return;
+        }
+        var styleElement = document.createElement('style');
+        styleElement.setAttribute('data-mui-layer-order', id);
+        styleElement.textContent = layerOrder;
+        head.prepend(styleElement);
+      } else {
+        var _head$querySelector;
+        (_head$querySelector = head.querySelector("style[data-mui-layer-order=\"".concat(id, "\"]"))) == null || _head$querySelector.remove();
+      }
+    }, [layerOrder, id]);
+    if (!layerOrder) {
+      return null;
+    }
+    return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$1, {
+      styles: layerOrder
+    });
+  }
   var EMPTY_THEME = {};
   function useThemeScoping(themeId, upperTheme, localTheme) {
     var isPrivate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -8933,15 +9058,16 @@
     var engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
     var privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
     var rtlValue = engineTheme.direction === 'rtl';
+    var layerOrder = useLayerOrder(engineTheme);
     return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, {
       theme: privateTheme,
       children: /*#__PURE__*/jsxRuntimeExports.jsx(ThemeContext$2.Provider, {
         value: engineTheme,
         children: /*#__PURE__*/jsxRuntimeExports.jsx(RtlProvider, {
           value: rtlValue,
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(DefaultPropsProvider, {
+          children: /*#__PURE__*/jsxRuntimeExports.jsxs(DefaultPropsProvider, {
             value: engineTheme == null ? void 0 : engineTheme.components,
-            children: children
+            children: [layerOrder, children]
           })
         })
       })
@@ -11504,7 +11630,7 @@
   function shouldSkipGeneratingVar(keys) {
     var _keys$;
-    return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+    return !!keys[0].match(/(cssVarPrefix|modularCssLayers|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
     // ends with sxConfig
     keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
   }
@@ -24028,7 +24154,9 @@
     d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
   }), 'MoreHoriz');
-  var BreadcrumbCollapsedButton = styled$1(ButtonBase$1)(function (_ref) {
+  var BreadcrumbCollapsedButton = styled$1(ButtonBase$1, {
+    name: 'MuiBreadcrumbCollapsed'
+  })(function (_ref) {
     var theme = _ref.theme;
     return _extends({
       display: 'flex',
@@ -25673,7 +25801,9 @@
     };
     return composeClasses(slots, getSwitchBaseUtilityClass, classes);
   };
-  var SwitchBaseRoot = styled$1(ButtonBase$1)(function (_ref) {
+  var SwitchBaseRoot = styled$1(ButtonBase$1, {
+    name: 'MuiSwitchBase'
+  })(function (_ref) {
     var ownerState = _ref.ownerState;
     return _extends({
       padding: 9,
@@ -25685,6 +25815,7 @@
     });
   });
   var SwitchBaseInput = styled$1('input', {
+    name: 'MuiSwitchBase',
     shouldForwardProp: rootShouldForwardProp$1
   })({
     cursor: 'inherit',
@@ -37354,6 +37485,7 @@
   var _span$1;
   var NotchedOutlineRoot$1 = styled$1('fieldset', {
+    name: 'MuiNotchedOutlined',
     shouldForwardProp: rootShouldForwardProp$1
   })({
     textAlign: 'left',
@@ -37372,6 +37504,7 @@
     minWidth: '0%'
   });
   var NotchedOutlineLegend = styled$1('legend', {
+    name: 'MuiNotchedOutlined',
     shouldForwardProp: rootShouldForwardProp$1
   })(function (_ref) {
     var ownerState = _ref.ownerState,
@@ -38542,16 +38675,21 @@
   }), 'RadioButtonChecked');
   var RadioButtonIconRoot = styled$1('span', {
+    name: 'MuiRadioButtonIcon',
     shouldForwardProp: rootShouldForwardProp$1
   })({
     position: 'relative',
     display: 'flex'
   });
-  var RadioButtonIconBackground = styled$1(RadioButtonUncheckedIcon)({
+  var RadioButtonIconBackground = styled$1(RadioButtonUncheckedIcon, {
+    name: 'MuiRadioButtonIcon'
+  })({
     // Scale applied to prevent dot misalignment in Safari
     transform: 'scale(1)'
   });
-  var RadioButtonIconDot = styled$1(RadioButtonCheckedIcon)(function (_ref) {
+  var RadioButtonIconDot = styled$1(RadioButtonCheckedIcon, {
+    name: 'MuiRadioButtonIcon'
+  })(function (_ref) {
     var theme = _ref.theme,
       ownerState = _ref.ownerState;
     return _extends({
@@ -46000,6 +46138,7 @@
   var Stepper$1 = Stepper;
   var SwipeAreaRoot = styled$1('div', {
+    name: 'MuiSwipeArea',
     shouldForwardProp: rootShouldForwardProp$1
   })(function (_ref) {
     var theme = _ref.theme,