@mui/system - npm Package Compare versions

Comparing version 6.0.0-beta.3 to 6.0.0-beta.4

breakpoints/breakpoints.d.ts

 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import type { Breakpoint } from '../createTheme';
@@ -4,0 +4,0 @@ import { ResponsiveStyleValue } from '../styleFunctionSx';

createTheme/createTheme.d.ts

 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
+import { Breakpoints, BreakpointsOptions } from '../createBreakpoints/createBreakpoints';
 import { Shape, ShapeOptions } from './shape';
@@ -9,3 +9,7 @@ import { Spacing, SpacingOptions } from './createSpacing';
 
-export { Breakpoint, Breakpoints, BreakpointOverrides } from './createBreakpoints';
+export {
+  Breakpoint,
+  Breakpoints,
+  BreakpointOverrides,
+} from '../createBreakpoints/createBreakpoints';
 
@@ -12,0 +16,0 @@ export type Direction = 'ltr' | 'rtl';

createTheme/createTheme.js

 import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from './createBreakpoints';
+import createBreakpoints from '../createBreakpoints/createBreakpoints';
 import cssContainerQueries from '../cssContainerQueries';
@@ -4,0 +4,0 @@ import shape from './shape';

createTheme/index.js

 export { default } from './createTheme';
-export { default as private_createBreakpoints } from './createBreakpoints';
+export { default as private_createBreakpoints } from '../createBreakpoints/createBreakpoints';
 export { default as unstable_applyStyles } from './applyStyles';

cssContainerQueries/cssContainerQueries.d.ts

@@ -1,2 +0,2 @@
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 interface ContainerQueries {
@@ -3,0 +3,0 @@ up: Breakpoints['up'];

cssVars/createCssVarsProvider.js

@@ -137,8 +137,19 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
       if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
-        const selector = colorSchemeSelector.replace('%s', colorScheme);
-        if (selector.startsWith('.')) {
-          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => colorSchemeSelector.substring(1).replace('%s', scheme)));
-          colorSchemeNode.classList.add(selector.substring(1));
+        const selector = colorSchemeSelector;
+        let rule = colorSchemeSelector;
+        if (selector === 'class') {
+          rule = `.%s`;
+        }
+        if (selector === 'data') {
+          rule = `[data-%s]`;
+        }
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
+          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+          rule = `[${selector}="%s"]`;
+        }
+        if (rule.startsWith('.')) {
+          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
+          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
         } else {
-          const matches = selector.match(/\[([^\]]+)\]/);
+          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
           if (matches) {
@@ -155,3 +166,3 @@ const [attr, value] = matches[1].split('=');
           } else {
-            colorSchemeNode.setAttribute(selector, colorScheme);
+            colorSchemeNode.setAttribute(rule, colorScheme);
           }
@@ -158,0 +169,0 @@ }

cssVars/prepareCssVars.js

@@ -73,2 +73,5 @@ import deepmerge from '@mui/utils/deepmerge';
       if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
         return rule.replace('%s', String(colorScheme));
@@ -75,0 +78,0 @@ }

index.d.ts

@@ -80,4 +80,4 @@ // disable automatic export
 
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
-export * from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
+export * from './createBreakpoints/createBreakpoints';
 
@@ -121,6 +121,6 @@ export { default as createSpacing } from './createTheme/createSpacing';
 
-export { default as Unstable_Grid } from './Unstable_Grid';
-export * from './Unstable_Grid';
+export { default as Grid } from './Grid';
+export * from './Grid';
 
 export { default as Stack } from './Stack';
 export * from './Stack';

index.js

 /**
- * @mui/system v6.0.0-beta.3
+ * @mui/system v6.0.0-beta.4
  *
@@ -47,3 +47,3 @@ * @license MIT
 export { default as createTheme } from './createTheme';
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
 export { default as createSpacing } from './createTheme/createSpacing';
@@ -71,5 +71,5 @@ export { default as shape } from './createTheme/shape';
 export * from './Container';
-export { default as Unstable_Grid } from './Unstable_Grid/Grid';
-export * from './Unstable_Grid';
+export { default as Grid } from './Grid/Grid';
+export * from './Grid';
 export { default as Stack } from './Stack/Stack';
 export * from './Stack';

modern/createTheme/createTheme.js

 import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from './createBreakpoints';
+import createBreakpoints from '../createBreakpoints/createBreakpoints';
 import cssContainerQueries from '../cssContainerQueries';
@@ -4,0 +4,0 @@ import shape from './shape';

modern/createTheme/index.js

 export { default } from './createTheme';
-export { default as private_createBreakpoints } from './createBreakpoints';
+export { default as private_createBreakpoints } from '../createBreakpoints/createBreakpoints';
 export { default as unstable_applyStyles } from './applyStyles';

modern/cssVars/createCssVarsProvider.js

@@ -137,8 +137,19 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
       if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
-        const selector = colorSchemeSelector.replace('%s', colorScheme);
-        if (selector.startsWith('.')) {
-          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => colorSchemeSelector.substring(1).replace('%s', scheme)));
-          colorSchemeNode.classList.add(selector.substring(1));
+        const selector = colorSchemeSelector;
+        let rule = colorSchemeSelector;
+        if (selector === 'class') {
+          rule = `.%s`;
+        }
+        if (selector === 'data') {
+          rule = `[data-%s]`;
+        }
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
+          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+          rule = `[${selector}="%s"]`;
+        }
+        if (rule.startsWith('.')) {
+          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
+          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
         } else {
-          const matches = selector.match(/\[([^\]]+)\]/);
+          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
           if (matches) {
@@ -155,3 +166,3 @@ const [attr, value] = matches[1].split('=');
           } else {
-            colorSchemeNode.setAttribute(selector, colorScheme);
+            colorSchemeNode.setAttribute(rule, colorScheme);
           }
@@ -158,0 +169,0 @@ }

modern/cssVars/prepareCssVars.js

@@ -73,2 +73,5 @@ import deepmerge from '@mui/utils/deepmerge';
       if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
         return rule.replace('%s', String(colorScheme));
@@ -75,0 +78,0 @@ }

modern/index.js

 /**
- * @mui/system v6.0.0-beta.3
+ * @mui/system v6.0.0-beta.4
  *
@@ -47,3 +47,3 @@ * @license MIT
 export { default as createTheme } from './createTheme';
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
 export { default as createSpacing } from './createTheme/createSpacing';
@@ -71,5 +71,5 @@ export { default as shape } from './createTheme/shape';
 export * from './Container';
-export { default as Unstable_Grid } from './Unstable_Grid/Grid';
-export * from './Unstable_Grid';
+export { default as Grid } from './Grid/Grid';
+export * from './Grid';
 export { default as Stack } from './Stack/Stack';
 export * from './Stack';

node/createTheme/createTheme.js

@@ -9,3 +9,3 @@ "use strict";
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
 var _cssContainerQueries = _interopRequireDefault(require("../cssContainerQueries"));
@@ -12,0 +12,0 @@ var _shape = _interopRequireDefault(require("./shape"));

node/createTheme/index.js

@@ -26,3 +26,3 @@ "use strict";
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
 var _applyStyles = _interopRequireDefault(require("./applyStyles"));

node/cssVars/createCssVarsProvider.js

@@ -148,8 +148,19 @@ "use strict";
       if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
-        const selector = colorSchemeSelector.replace('%s', colorScheme);
-        if (selector.startsWith('.')) {
-          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => colorSchemeSelector.substring(1).replace('%s', scheme)));
-          colorSchemeNode.classList.add(selector.substring(1));
+        const selector = colorSchemeSelector;
+        let rule = colorSchemeSelector;
+        if (selector === 'class') {
+          rule = `.%s`;
+        }
+        if (selector === 'data') {
+          rule = `[data-%s]`;
+        }
+        if (selector != null && selector.startsWith('data-') && !selector.includes('%s')) {
+          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+          rule = `[${selector}="%s"]`;
+        }
+        if (rule.startsWith('.')) {
+          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
+          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
         } else {
-          const matches = selector.match(/\[([^\]]+)\]/);
+          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
           if (matches) {
@@ -166,3 +177,3 @@ const [attr, value] = matches[1].split('=');
           } else {
-            colorSchemeNode.setAttribute(selector, colorScheme);
+            colorSchemeNode.setAttribute(rule, colorScheme);
           }
@@ -169,0 +180,0 @@ }

node/cssVars/prepareCssVars.js

@@ -81,2 +81,5 @@ "use strict";
       if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
         return rule.replace('%s', String(colorScheme));
@@ -83,0 +86,0 @@ }

node/index.js

 /**
- * @mui/system v6.0.0-beta.3
+ * @mui/system v6.0.0-beta.4
  *
@@ -67,3 +67,3 @@ * @license MIT
   Container: true,
-  Unstable_Grid: true,
+  Grid: true,
   Stack: true
@@ -89,2 +89,8 @@ };
 });
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
 Object.defineProperty(exports, "RtlProvider", {
@@ -114,8 +120,2 @@ enumerable: true,
 });
-Object.defineProperty(exports, "Unstable_Grid", {
-  enumerable: true,
-  get: function () {
-    return _Grid.default;
-  }
-});
 Object.defineProperty(exports, "borders", {
@@ -515,3 +515,3 @@ enumerable: true,
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _createBreakpoints = _interopRequireDefault(require("./createTheme/createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints/createBreakpoints"));
 var _createSpacing = _interopRequireDefault(require("./createTheme/createSpacing"));
@@ -567,12 +567,12 @@ var _shape = _interopRequireDefault(require("./createTheme/shape"));
 });
-var _Grid = _interopRequireDefault(require("./Unstable_Grid/Grid"));
-var _Unstable_Grid = require("./Unstable_Grid");
-Object.keys(_Unstable_Grid).forEach(function (key) {
+var _Grid = _interopRequireDefault(require("./Grid/Grid"));
+var _Grid2 = require("./Grid");
+Object.keys(_Grid2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Unstable_Grid[key]) return;
+  if (key in exports && exports[key] === _Grid2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Unstable_Grid[key];
+      return _Grid2[key];
     }
@@ -579,0 +579,0 @@ });

package.json

 {
   "name": "@mui/system",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.4",
   "private": false,
@@ -29,10 +29,10 @@ "author": "MUI Team",
   "dependencies": {
-    "@babel/runtime": "^7.24.8",
+    "@babel/runtime": "^7.25.0",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "6.0.0-beta.3",
-    "@mui/styled-engine": "6.0.0-beta.3",
-    "@mui/types": "^7.2.14",
-    "@mui/utils": "6.0.0-beta.3"
+    "@mui/private-theming": "6.0.0-beta.4",
+    "@mui/styled-engine": "6.0.0-beta.4",
+    "@mui/utils": "6.0.0-beta.4",
+    "@mui/types": "^7.2.14"
   },
@@ -39,0 +39,0 @@ "peerDependencies": {

Stack/createStack.d.ts

 import * as React from 'react';
 import { OverridableComponent } from '@mui/types';
 import { StackTypeMap, StackOwnerState } from './StackProps';
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import { Spacing } from '../createTheme/createSpacing';
@@ -6,0 +6,0 @@ interface StyleFunctionProps {

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

1524400

increased by0.29%

Number of package files

468

increased by1.08%

Lines of code

17963

increased by0.36%

Dependency changes

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

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

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

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

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

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

• Updated@babel/runtime@^7.25.0

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

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

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