@mui/system 6.0.0-beta.3 → 6.0.0-beta.4

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-beta.4
+
+<!-- generated comparing v6.0.0-beta.3..next -->
+
+_Jul 30, 2024_
+
+A big thanks to the 12 contributors who made this release possible.
+
+### `@mui/material@6.0.0-beta.4`
+
+- [Accordion] Render a heading wrapping `AccordionSummary` button per W3C Accordion Pattern standards (#42914) @ZeeshanTamboli
+- [Divider] Enable borderStyle enhancement in divider with children (#42715) @anuujj
+- [ImageListItemBar] Deprecate composed classes (#42905) @sai6855
+- Attach selector for default color scheme (#43035) @siriwatknp
+- Stabilize Grid v2 and deprecate Grid v1 (#43054) @DiegoAndai
+
+### `@mui/system@6.0.0-beta.4`
+
+- Make `createBreakpoints` independent for stringify theme (#43048) @siriwatknp
+
+### `@mui/utils@6.0.0-beta.4`
+
+- Fix issues reported by the React Compiler (#43051) @markliu2013
+
+### Docs
+
+- [material-ui] Replace deprecated `<ListItem button/>` with `ListItemButton` component in routing libraries list example (#43110) @aliharis99
+- [material-ui][Card] Update CardMedia description (#43067) @shahzaibdev1
+- [material-ui] Polish out data table demo (#43072) @zanivan
+- [material-ui][Snackbar] Improve reason type in demos (#43077) @sai6855
+- [pigment-css] Fix syntax in migrating-to-pigment-css guide (#43107) @KevinVandy
+- Fix page description line break @oliviertassinari
+
+### Core
+
+- Fix event naming convention @oliviertassinari
+- [docs-infra] Move ads to the `@mui/docs` package (#42944) @alexfauquette
+- [website] Fine-tune button styles on the branding theme (#43082) @zanivan
+
+All contributors of this release in alphabetical order: @alexfauquette, @aliharis99, @anuujj, @DiegoAndai, @KevinVandy, @markliu2013, @oliviertassinari, @sai6855, @shahzaibdev1, @siriwatknp, @zanivan, @ZeeshanTamboli
+
 ## 6.0.0-beta.3
 
 <!-- generated comparing v6.0.0-beta.2..next -->

package/{Unstable_Grid → Grid}/gridGenerator.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import { Spacing } from '../createTheme/createSpacing';
 import { ResponsiveStyleValue } from '../styleFunctionSx';
 import { GridDirection, GridOwnerState } from './GridProps';

package/{Unstable_Grid → Grid}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/Unstable_Grid/index.js",
+  "main": "../node/Grid/index.js",
   "types": "./index.d.ts"
 }

package/{Unstable_Grid → Grid}/traverseBreakpoints.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+import { Breakpoints, Breakpoint } from '../createBreakpoints/createBreakpoints';
 export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
 interface Iterator<T> {
     (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;

package/Stack/createStack.d.ts

@@ -1,7 +1,7 @@
 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';
 interface StyleFunctionProps {
     theme: {

package/breakpoints/breakpoints.d.ts

@@ -1,5 +1,5 @@
 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import type { Breakpoint } from '../createTheme';
 import { ResponsiveStyleValue } from '../styleFunctionSx';
 import { StyleFunction } from '../Box';

package/createBreakpoints/index.d.ts

@@ -0,0 +1,3 @@
+/** This export is intended for internal integration with Pigment CSS */
+/* eslint-disable import/prefer-default-export */
+export { default as unstable_createBreakpoints } from './createBreakpoints';

package/createBreakpoints/index.js

@@ -0,0 +1,3 @@
+/** This export is intended for internal integration with Pigment CSS */
+/* eslint-disable import/prefer-default-export */
+export { default as unstable_createBreakpoints } from './createBreakpoints';

package/createBreakpoints/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/createBreakpoints/index.js",
+  "types": "./index.d.ts"
+}

package/createTheme/createTheme.d.ts

@@ -1,12 +1,16 @@
 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
+import { Breakpoints, BreakpointsOptions } from '../createBreakpoints/createBreakpoints';
 import { Shape, ShapeOptions } from './shape';
 import { Spacing, SpacingOptions } from './createSpacing';
 import { SxConfig, SxProps } from '../styleFunctionSx';
 import { ApplyStyles } from './applyStyles';
 import { CssContainerQueries } from '../cssContainerQueries';
 
-export { Breakpoint, Breakpoints, BreakpointOverrides } from './createBreakpoints';
+export {
+  Breakpoint,
+  Breakpoints,
+  BreakpointOverrides,
+} from '../createBreakpoints/createBreakpoints';
 
 export type Direction = 'ltr' | 'rtl';
 

package/createTheme/createTheme.js

@@ -1,5 +1,5 @@
 import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from './createBreakpoints';
+import createBreakpoints from '../createBreakpoints/createBreakpoints';
 import cssContainerQueries from '../cssContainerQueries';
 import shape from './shape';
 import createSpacing from './createSpacing';

package/createTheme/index.js

@@ -1,3 +1,3 @@
 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';

package/cssContainerQueries/cssContainerQueries.d.ts

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

package/cssVars/createCssVarsProvider.js

@@ -134,12 +134,23 @@ export default function createCssVarsProvider(options) {
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
     React.useEffect(() => {
       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) {
             const [attr, value] = matches[1].split('=');
             if (!value) {
@@ -151,7 +162,7 @@ export default function createCssVarsProvider(options) {
             }
             colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
           } else {
-            colorSchemeNode.setAttribute(selector, colorScheme);
+            colorSchemeNode.setAttribute(rule, colorScheme);
           }
         }
       }

package/cssVars/prepareCssVars.js

@@ -70,6 +70,9 @@ function prepareCssVars(theme, parserConfig = {}) {
         return `@media (prefers-color-scheme: ${mode}) { :root`;
       }
       if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
         return rule.replace('%s', String(colorScheme));
       }
     }

package/index.d.ts

@@ -77,8 +77,8 @@ export * from './styled';
 export { default as createTheme } from './createTheme';
 export * from './createTheme';
 
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
-export * from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
+export * from './createBreakpoints/createBreakpoints';
 
 export { default as createSpacing } from './createTheme/createSpacing';
 export { SpacingOptions, Spacing } from './createTheme/createSpacing';
@@ -117,8 +117,8 @@ export * from './Container/createContainer';
 export { default as Container } from './Container';
 export * from './Container';
 
-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';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-beta.3
+ * @mui/system v6.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -44,7 +44,7 @@ export { default as createStyled } from './createStyled';
 export * from './createStyled';
 export { default as styled } from './styled';
 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';
 export { default as shape } from './createTheme/shape';
 export { default as useThemeProps, getThemeProps } from './useThemeProps';
@@ -67,7 +67,7 @@ export * from './RtlProvider';
 export { default as createContainer } from './Container/createContainer';
 export { default as Container } from './Container';
 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';

package/modern/createBreakpoints/index.js

@@ -0,0 +1,3 @@
+/** This export is intended for internal integration with Pigment CSS */
+/* eslint-disable import/prefer-default-export */
+export { default as unstable_createBreakpoints } from './createBreakpoints';

package/modern/createTheme/createTheme.js

@@ -1,5 +1,5 @@
 import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from './createBreakpoints';
+import createBreakpoints from '../createBreakpoints/createBreakpoints';
 import cssContainerQueries from '../cssContainerQueries';
 import shape from './shape';
 import createSpacing from './createSpacing';

package/modern/createTheme/index.js

@@ -1,3 +1,3 @@
 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';

package/modern/cssVars/createCssVarsProvider.js

@@ -134,12 +134,23 @@ export default function createCssVarsProvider(options) {
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
     React.useEffect(() => {
       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) {
             const [attr, value] = matches[1].split('=');
             if (!value) {
@@ -151,7 +162,7 @@ export default function createCssVarsProvider(options) {
             }
             colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
           } else {
-            colorSchemeNode.setAttribute(selector, colorScheme);
+            colorSchemeNode.setAttribute(rule, colorScheme);
           }
         }
       }

package/modern/cssVars/prepareCssVars.js

@@ -70,6 +70,9 @@ function prepareCssVars(theme, parserConfig = {}) {
         return `@media (prefers-color-scheme: ${mode}) { :root`;
       }
       if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
         return rule.replace('%s', String(colorScheme));
       }
     }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-beta.3
+ * @mui/system v6.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -44,7 +44,7 @@ export { default as createStyled } from './createStyled';
 export * from './createStyled';
 export { default as styled } from './styled';
 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';
 export { default as shape } from './createTheme/shape';
 export { default as useThemeProps, getThemeProps } from './useThemeProps';
@@ -67,7 +67,7 @@ export * from './RtlProvider';
 export { default as createContainer } from './Container/createContainer';
 export { default as Container } from './Container';
 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';

package/node/createBreakpoints/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "unstable_createBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _createBreakpoints.default;
+  }
+});
+var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));

package/node/createTheme/createTheme.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
 var _cssContainerQueries = _interopRequireDefault(require("../cssContainerQueries"));
 var _shape = _interopRequireDefault(require("./shape"));
 var _createSpacing = _interopRequireDefault(require("./createSpacing"));

package/node/createTheme/index.js

@@ -23,5 +23,5 @@ Object.defineProperty(exports, "unstable_applyStyles", {
   }
 });
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
 var _applyStyles = _interopRequireDefault(require("./applyStyles"));

package/node/cssVars/createCssVarsProvider.js

@@ -145,12 +145,23 @@ function createCssVarsProvider(options) {
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
     React.useEffect(() => {
       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) {
             const [attr, value] = matches[1].split('=');
             if (!value) {
@@ -162,7 +173,7 @@ function createCssVarsProvider(options) {
             }
             colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
           } else {
-            colorSchemeNode.setAttribute(selector, colorScheme);
+            colorSchemeNode.setAttribute(rule, colorScheme);
           }
         }
       }

package/node/cssVars/prepareCssVars.js

@@ -78,6 +78,9 @@ function prepareCssVars(theme, parserConfig = {}) {
         return `@media (prefers-color-scheme: ${mode}) { :root`;
       }
       if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
         return rule.replace('%s', String(colorScheme));
       }
     }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-beta.3
+ * @mui/system v6.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -64,7 +64,7 @@ var _exportNames = {
   RtlProvider: true,
   createContainer: true,
   Container: true,
-  Unstable_Grid: true,
+  Grid: true,
   Stack: true
 };
 Object.defineProperty(exports, "Box", {
@@ -85,6 +85,12 @@ Object.defineProperty(exports, "GlobalStyles", {
     return _GlobalStyles.default;
   }
 });
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
 Object.defineProperty(exports, "RtlProvider", {
   enumerable: true,
   get: function () {
@@ -109,12 +115,6 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeProvider.default;
   }
 });
-Object.defineProperty(exports, "Unstable_Grid", {
-  enumerable: true,
-  get: function () {
-    return _Grid.default;
-  }
-});
 Object.defineProperty(exports, "borders", {
   enumerable: true,
   get: function () {
@@ -509,7 +509,7 @@ Object.keys(_createStyled).forEach(function (key) {
 });
 var _styled = _interopRequireDefault(require("./styled"));
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _createBreakpoints = _interopRequireDefault(require("./createTheme/createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints/createBreakpoints"));
 var _createSpacing = _interopRequireDefault(require("./createTheme/createSpacing"));
 var _shape = _interopRequireDefault(require("./createTheme/shape"));
 var _useThemeProps = _interopRequireWildcard(require("./useThemeProps"));
@@ -560,16 +560,16 @@ Object.keys(_Container).forEach(function (key) {
     }
   });
 });
-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];
     }
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.4",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -26,14 +26,14 @@
     "url": "https://opencollective.com/mui-org"
   },
   "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"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",