@mui/system - npm Package Compare versions

Comparing version 6.0.0-beta.5 to 6.0.0-beta.6

cssVars/prepareCssVars.js

@@ -52,3 +52,3 @@ import deepmerge from '@mui/utils/deepmerge';
   }
-  function defaultGetSelector(colorScheme) {
+  function defaultGetSelector(colorScheme, cssObject) {
     let rule = selector;
@@ -71,3 +71,7 @@ if (selector === 'class') {
         const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
-        return `@media (prefers-color-scheme: ${mode}) { :root`;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
       }
@@ -74,0 +78,0 @@ if (rule) {

Grid/createGrid.js

@@ -122,3 +122,3 @@ import * as React from 'react';
           return /*#__PURE__*/React.cloneElement(child, {
-            unstable_level: child.props.unstable_level ?? level + 1
+            unstable_level: child.props?.unstable_level ?? level + 1
           });
@@ -125,0 +125,0 @@ }

index.js

 /**
- * @mui/system v6.0.0-beta.5
+ * @mui/system v6.0.0-beta.6
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/cssVars/prepareCssVars.js

@@ -52,3 +52,3 @@ import deepmerge from '@mui/utils/deepmerge';
   }
-  function defaultGetSelector(colorScheme) {
+  function defaultGetSelector(colorScheme, cssObject) {
     let rule = selector;
@@ -71,3 +71,7 @@ if (selector === 'class') {
         const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
-        return `@media (prefers-color-scheme: ${mode}) { :root`;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
       }
@@ -74,0 +78,0 @@ if (rule) {

modern/Grid/createGrid.js

@@ -122,3 +122,3 @@ import * as React from 'react';
           return /*#__PURE__*/React.cloneElement(child, {
-            unstable_level: child.props.unstable_level ?? level + 1
+            unstable_level: child.props?.unstable_level ?? level + 1
           });
@@ -125,0 +125,0 @@ }

modern/index.js

 /**
- * @mui/system v6.0.0-beta.5
+ * @mui/system v6.0.0-beta.6
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/useThemeProps/useThemeProps.js

@@ -15,3 +15,3 @@ 'use client';
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
@@ -21,3 +21,2 @@ name,
   });
-  return mergedProps;
 }

modern/version/index.js

@@ -1,2 +0,2 @@
-export const version = "6.0.0-beta.5";
+export const version = "6.0.0-beta.6";
 export const major = Number("6");
@@ -6,3 +6,3 @@ export const minor = Number("0");
 export const preReleaseLabel = "beta" || null;
-export const preReleaseNumber = Number("5") || null;
+export const preReleaseNumber = Number("6") || null;
 export default version;

node/breakpoints/breakpoints.js

@@ -112,4 +112,3 @@ "use strict";
 function createEmptyBreakpointObject(breakpointsInput = {}) {
-  var _breakpointsInput$key;
-  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
@@ -116,0 +115,0 @@ acc[breakpointStyleKey] = {};

node/createStyled/createStyled.js

@@ -88,3 +88,3 @@ "use strict";
         Object.keys(variant.props).forEach(key => {
-          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
+          if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
             isMatch = false;
@@ -125,3 +125,3 @@ }
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
-    (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
+    (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !style?.__mui_systemSx));
     const {
@@ -213,3 +213,2 @@ name: componentName,
         expressionsWithDefaultTheme.push(props => {
-          var _theme$components;
           const theme = resolveTheme({
@@ -220,3 +219,3 @@ ...props,
           });
-          const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
+          const themeVariants = theme?.components?.[componentName]?.variants;
           return processStyleArg({
@@ -223,0 +222,0 @@ variants: themeVariants

node/createTheme/applyStyles.js

@@ -69,4 +69,3 @@ "use strict";
   if (theme.vars) {
-    var _theme$colorSchemes;
-    if (!((_theme$colorSchemes = theme.colorSchemes) != null && _theme$colorSchemes[key]) || typeof theme.getColorSchemeSelector !== 'function') {
+    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
       return {};
@@ -73,0 +72,0 @@ }

node/createTheme/createTheme.js

@@ -46,3 +46,3 @@ "use strict";
     ..._defaultSxConfig.default,
-    ...(other == null ? void 0 : other.unstable_sxConfig)
+    ...other?.unstable_sxConfig
   };
@@ -49,0 +49,0 @@ muiTheme.unstable_sx = function sx(props) {

node/cssContainerQueries/cssContainerQueries.js

@@ -23,5 +23,4 @@ "use strict";
   const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    var _a$match, _b$match;
     const regex = /min-width:\s*([0-9.]+)/;
-    return +(((_a$match = a.match(regex)) == null ? void 0 : _a$match[1]) || 0) - +(((_b$match = b.match(regex)) == null ? void 0 : _b$match[1]) || 0);
+    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
   });
@@ -28,0 +27,0 @@ if (!sorted.length) {

node/cssVars/createCssVarsProvider.js

@@ -52,3 +52,2 @@ "use strict";
   function CssVarsProvider(props) {
-    var _colorSchemes$restThe, _restThemeProp$palett, _restThemeProp$genera, _theme$generateStyleS;
     const {
@@ -87,3 +86,3 @@ children,
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : ((_colorSchemes$restThe = colorSchemes[restThemeProp.defaultColorScheme]) == null || (_colorSchemes$restThe = _colorSchemes$restThe.palette) == null ? void 0 : _colorSchemes$restThe.mode) || ((_restThemeProp$palett = restThemeProp.palette) == null ? void 0 : _restThemeProp$palett.mode);
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
@@ -119,3 +118,3 @@ // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     // 2. get the `vars` object that refers to the CSS custom properties
-    const themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
+    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
@@ -166,3 +165,3 @@ // 3. Start composing the theme object
         }
-        if (selector != null && selector.startsWith('data-') && !selector.includes('%s')) {
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
           // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
@@ -229,3 +228,3 @@ rule = `[${selector}="%s"]`;
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -235,3 +234,3 @@ }
       children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-        children: (((_theme$generateStyleS = theme.generateStyleSheets) == null ? void 0 : _theme$generateStyleS.call(theme)) || []).map((styles, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
           styles: styles
@@ -238,0 +237,0 @@ }, index))

node/cssVars/prepareCssVars.js

@@ -59,3 +59,3 @@ "use strict";
   }
-  function defaultGetSelector(colorScheme) {
+  function defaultGetSelector(colorScheme, cssObject) {
     let rule = selector;
@@ -68,3 +68,3 @@ if (selector === 'class') {
     }
-    if (selector != null && selector.startsWith('data-') && !selector.includes('%s')) {
+    if (selector?.startsWith('data-') && !selector.includes('%s')) {
       // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
@@ -75,8 +75,11 @@ rule = `[${selector}="%s"]`;
       if (rule === 'media') {
-        var _colorSchemes;
         if (theme.defaultColorScheme === colorScheme) {
           return ':root';
         }
-        const mode = ((_colorSchemes = colorSchemes[colorScheme]) == null || (_colorSchemes = _colorSchemes.palette) == null ? void 0 : _colorSchemes.mode) || colorScheme;
-        return `@media (prefers-color-scheme: ${mode}) { :root`;
+        const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
       }
@@ -123,3 +126,2 @@ if (rule) {
     if (defaultSchemeVal) {
-      var _colorSchemes$colorSc;
       // default color scheme has to come before other color schemes
@@ -129,3 +131,3 @@ const {
       } = defaultSchemeVal;
-      const cssColorSheme = (_colorSchemes$colorSc = colorSchemes[colorScheme]) == null || (_colorSchemes$colorSc = _colorSchemes$colorSc.palette) == null ? void 0 : _colorSchemes$colorSc.mode;
+      const cssColorSheme = colorSchemes[colorScheme]?.palette?.mode;
       const finalCss = !disableCssColorScheme && cssColorSheme ? {
@@ -144,4 +146,3 @@ colorScheme: cssColorSheme,
     }]) => {
-      var _colorSchemes$key;
-      const cssColorSheme = (_colorSchemes$key = colorSchemes[key]) == null || (_colorSchemes$key = _colorSchemes$key.palette) == null ? void 0 : _colorSchemes$key.mode;
+      const cssColorSheme = colorSchemes[key]?.palette?.mode;
       const finalCss = !disableCssColorScheme && cssColorSheme ? {
@@ -148,0 +149,0 @@ colorScheme: cssColorSheme,

node/cssVars/useCurrentColorScheme.js

@@ -99,3 +99,3 @@ "use strict";
       }
-      const newMode = mode != null ? mode : defaultMode;
+      const newMode = mode ?? defaultMode;
       try {
@@ -190,3 +190,3 @@ localStorage.setItem(modeStorageKey, newMode);
       setState(currentState => {
-        const systemMode = event != null && event.matches ? 'dark' : 'light';
+        const systemMode = event?.matches ? 'dark' : 'light';
 
@@ -193,0 +193,0 @@ // Early exit, nothing changed.

node/Grid/createGrid.js

@@ -83,3 +83,2 @@ "use strict";
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-    var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin;
     const theme = (0, _useTheme.default)();
@@ -106,6 +105,6 @@ const themeProps = useThemeProps(inProps);
     const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
-    const columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : level ? undefined : columnsProp;
-    const spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
-    const rowSpacing = (_ref = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref : level ? undefined : rowSpacingProp;
-    const columnSpacing = (_ref2 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref2 : level ? undefined : columnSpacingProp;
+    const columns = inProps.columns ?? (level ? undefined : columnsProp);
+    const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
+    const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
+    const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
     const ownerState = {
@@ -133,5 +132,4 @@ ...props,
         if ( /*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid'])) {
-          var _unstable_level;
           return /*#__PURE__*/React.cloneElement(child, {
-            unstable_level: (_unstable_level = child.props.unstable_level) != null ? _unstable_level : level + 1
+            unstable_level: child.props?.unstable_level ?? level + 1
           });
@@ -138,0 +136,0 @@ }

node/Grid/gridGenerator.js

@@ -129,5 +129,4 @@ "use strict";
   (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
-    var _theme$spacing;
     appendStyle(styles, {
-      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_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?.(value)
     });
@@ -152,5 +151,4 @@ });
   (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
-    var _theme$spacing2;
     appendStyle(styles, {
-      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_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.spacing?.(value)
     });
@@ -157,0 +155,0 @@ });

node/index.js

 /**
- * @mui/system v6.0.0-beta.5
+ * @mui/system v6.0.0-beta.6
  *
@@ -4,0 +4,0 @@ * @license MIT

node/RtlProvider/index.js

@@ -19,3 +19,3 @@ "use strict";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, {
-    value: value != null ? value : true,
+    value: value ?? true,
     ...props
@@ -30,5 +30,5 @@ });
   const value = React.useContext(RtlContext);
-  return value != null ? value : false;
+  return value ?? false;
 };
 exports.useRtl = useRtl;
 var _default = exports.default = RtlProvider;

node/sizing/sizing.js

@@ -23,4 +23,3 @@ "use strict";
     const styleFromPropValue = propValue => {
-      var _props$theme, _props$theme2;
-      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || _breakpoints.values[propValue];
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || _breakpoints.values[propValue];
       if (!breakpoint) {
@@ -31,3 +30,3 @@ return {
       }
-      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+      if (props.theme?.breakpoints?.unit !== 'px') {
         return {
@@ -34,0 +33,0 @@ maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`

node/spacing/spacing.js

@@ -61,4 +61,3 @@ "use strict";
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  var _getPath;
-  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey, true)) != null ? _getPath : defaultValue;
+  const themeSpacing = (0, _style.getPath)(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
@@ -65,0 +64,0 @@ return val => {

node/styleFunctionSx/extendSxProp.js

@@ -11,3 +11,2 @@ "use strict";
 const splitProps = props => {
-  var _props$theme$unstable, _props$theme;
   const result = {
@@ -17,3 +16,3 @@ systemProps: {},
   };
-  const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : _defaultSxConfig.default;
+  const config = props?.theme?.unstable_sxConfig ?? _defaultSxConfig.default;
   Object.keys(props).forEach(prop => {
@@ -20,0 +19,0 @@ if (config[prop]) {

node/styleFunctionSx/styleFunctionSx.js

@@ -73,3 +73,2 @@ "use strict";
   function styleFunctionSx(props) {
-    var _theme$unstable_sxCon;
     const {
@@ -82,3 +81,3 @@ sx,
     }
-    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : _defaultSxConfig.default;
+    const config = theme.unstable_sxConfig ?? _defaultSxConfig.default;
 
@@ -85,0 +84,0 @@ /*

node/ThemeProvider/ThemeProvider.js

@@ -77,3 +77,3 @@ "use strict";
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
-          value: engineTheme == null ? void 0 : engineTheme.components,
+          value: engineTheme?.components,
           children: children
@@ -80,0 +80,0 @@ })

node/useThemeProps/useThemeProps.js

@@ -21,3 +21,3 @@ "use strict";
   }
-  const mergedProps = (0, _getThemeProps.default)({
+  return (0, _getThemeProps.default)({
     theme,
@@ -27,3 +27,2 @@ name,
   });
-  return mergedProps;
 }

node/version/index.js

@@ -7,3 +7,3 @@ "use strict";
 exports.version = exports.preReleaseNumber = exports.preReleaseLabel = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.0.0-beta.5";
+const version = exports.version = "6.0.0-beta.6";
 const major = exports.major = Number("6");
@@ -13,3 +13,3 @@ const minor = exports.minor = Number("0");
 const preReleaseLabel = exports.preReleaseLabel = "beta" || null;
-const preReleaseNumber = exports.preReleaseNumber = Number("5") || null;
+const preReleaseNumber = exports.preReleaseNumber = Number("6") || null;
 var _default = exports.default = version;

package.json

 {
   "name": "@mui/system",
-  "version": "6.0.0-beta.5",
+  "version": "6.0.0-beta.6",
   "private": false,
@@ -33,6 +33,6 @@ "author": "MUI Team",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "6.0.0-beta.5",
-    "@mui/utils": "6.0.0-beta.5",
-    "@mui/styled-engine": "6.0.0-beta.5",
-    "@mui/types": "^7.2.14"
+    "@mui/private-theming": "6.0.0-beta.6",
+    "@mui/types": "^7.2.15",
+    "@mui/styled-engine": "6.0.0-beta.6",
+    "@mui/utils": "6.0.0-beta.6"
   },
@@ -42,4 +42,4 @@ "peerDependencies": {
     "@emotion/styled": "^11.3.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -46,0 +46,0 @@ "peerDependenciesMeta": {

useThemeProps/useThemeProps.js

@@ -15,3 +15,3 @@ 'use client';
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
@@ -21,3 +21,2 @@ name,
   });
-  return mergedProps;
 }

version/index.js

@@ -1,2 +0,2 @@
-export const version = "6.0.0-beta.5";
+export const version = "6.0.0-beta.6";
 export const major = Number("6");
@@ -6,3 +6,3 @@ export const minor = Number("0");
 export const preReleaseLabel = "beta" || null;
-export const preReleaseNumber = Number("5") || null;
+export const preReleaseNumber = Number("6") || null;
 export default version;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1536528

increased by0.08%

Worsened metrics

Lines of code

18088

decreased by-0.04%

Dependency changes

• + Added@mui/private-theming@6.0.0-beta.6(transitive)

• + Added@mui/styled-engine@6.0.0-beta.6(transitive)

• + Added@mui/utils@6.0.0-beta.6(transitive)

• - Removed@mui/private-theming@6.0.0-beta.5(transitive)

• - Removed@mui/styled-engine@6.0.0-beta.5(transitive)

• - Removed@mui/utils@6.0.0-beta.5(transitive)

• Updated@mui/private-theming@6.0.0-beta.6

• Updated@mui/styled-engine@6.0.0-beta.6

• Updated@mui/types@^7.2.15

• Updated@mui/utils@6.0.0-beta.6