@mui/material-nextjs 6.4.12 → 6.5.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 (16) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/modern/v13-appRouter/appRouterV13.js +1 -1
  3. package/modern/v13-pagesRouter/createCache.js +19 -3
  4. package/modern/v13-pagesRouter/index.js +2 -1
  5. package/modern/v13-pagesRouter/pagesRouterV13Document.js +15 -6
  6. package/node/v13-appRouter/appRouterV13.js +1 -1
  7. package/node/v13-pagesRouter/createCache.js +19 -3
  8. package/node/v13-pagesRouter/index.js +14 -1
  9. package/node/v13-pagesRouter/pagesRouterV13Document.js +15 -6
  10. package/package.json +1 -1
  11. package/v13-appRouter/appRouterV13.js +1 -1
  12. package/v13-pagesRouter/createCache.d.ts +4 -1
  13. package/v13-pagesRouter/createCache.js +19 -3
  14. package/v13-pagesRouter/index.d.ts +1 -0
  15. package/v13-pagesRouter/index.js +2 -1
  16. package/v13-pagesRouter/pagesRouterV13Document.js +15 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 6.5.0
4
+
5
+ <!-- generated comparing v6.4.12..v6.x -->
6
+
7
+ _Jul 2, 2025_
8
+
9
+ A big thanks to the 2 contributors who made this release possible.
10
+
11
+ CSS layers make it easier to override styles by splitting a single style sheet into multiple layers.
12
+ To learn more, check out the [CSS layers documentation](https://v6.mui.com/material-ui/customization/css-layers/).
13
+
14
+ ### `@mui/material@6.5.0`
15
+
16
+ - [Dialog] Add codemod for deprecated props (#46335) @sai6855
17
+
18
+ ### `@mui/system@6.5.0`
19
+
20
+ - Backport CSS layers feature from v7 (#46283) @siriwatknp
21
+
22
+ ### `@mui/material-nextjs@6.5.0`
23
+
24
+ - Backport CSS layers feature from v7 (#46283) @siriwatknp
25
+
26
+ ### Docs
27
+
28
+ - Add ListItemButton to make the deprecation clear (#46357) @sai6855
29
+
30
+ All contributors of this release in alphabetical order: @sai6855, @siriwatknp
31
+
3
32
  ## 6.4.12
4
33
 
5
34
  <!-- generated comparing v6.4.11..v6.x -->
package/modern/v13-appRouter/appRouterV13.js CHANGED
@@ -26,7 +26,7 @@ export default function AppRouterCacheProvider(props) {
26
26
  let inserted = [];
27
27
  // Override the insert method to support streaming SSR with flush().
28
28
  cache.insert = (...args) => {
29
- if (options?.enableCssLayer && !args[1].styles.startsWith('@layer')) {
29
+ if (options?.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
30
30
  args[1].styles = `@layer mui {${args[1].styles}}`;
31
31
  }
32
32
  const [selector, serialized] = args;
package/modern/v13-pagesRouter/createCache.js CHANGED
@@ -4,14 +4,30 @@ const isBrowser = typeof document !== 'undefined';
4
4
  // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
5
5
  // This assures that MUI styles are loaded first.
6
6
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
7
- export default function createEmotionCache() {
7
+ export default function createEmotionCache(options) {
8
8
  let insertionPoint;
9
9
  if (isBrowser) {
10
10
  const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
11
11
  insertionPoint = emotionInsertionPoint ?? undefined;
12
12
  }
13
- return createCache({
13
+ const {
14
+ enableCssLayer,
15
+ ...rest
16
+ } = options ?? {};
17
+ const emotionCache = createCache({
14
18
  key: 'mui',
15
- insertionPoint
19
+ insertionPoint,
20
+ ...rest
16
21
  });
22
+ if (enableCssLayer) {
23
+ const prevInsert = emotionCache.insert;
24
+ emotionCache.insert = (...args) => {
25
+ // ignore styles that contain layer order (`@layer ...` without `{`)
26
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
27
+ args[1].styles = `@layer mui {${args[1].styles}}`;
28
+ }
29
+ return prevInsert(...args);
30
+ };
31
+ }
32
+ return emotionCache;
17
33
  }
package/modern/v13-pagesRouter/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./pagesRouterV13Document.js";
2
- export * from "./pagesRouterV13App.js";
2
+ export * from "./pagesRouterV13App.js";
3
+ export { default as createEmotionCache } from "./createCache.js";
package/modern/v13-pagesRouter/pagesRouterV13Document.js CHANGED
@@ -73,13 +73,22 @@ export async function documentGetInitialProps(ctx, options) {
73
73
  } = extractCriticalToChunks(initialProps.html);
74
74
  return {
75
75
  ...initialProps,
76
- emotionStyleTags: styles.map(style => /*#__PURE__*/_jsx("style", {
77
- "data-emotion": `${style.key} ${style.ids.join(' ')}`,
78
- // eslint-disable-next-line react/no-danger
79
- dangerouslySetInnerHTML: {
80
- __html: style.css
76
+ emotionStyleTags: styles.map(style => {
77
+ if (!style.css.trim()) {
78
+ return null;
81
79
  }
82
- }, style.key))
80
+ const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
81
+ return /*#__PURE__*/_jsx("style", {
82
+ // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
83
+ // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
84
+ "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
85
+ // eslint-disable-next-line react/no-danger
86
+ dangerouslySetInnerHTML: {
87
+ __html: style.css
88
+ },
89
+ nonce: cache.nonce
90
+ }, style.key);
91
+ })
83
92
  };
84
93
  }
85
94
  }, ...(options?.plugins ?? [])])(ctx);
package/node/v13-appRouter/appRouterV13.js CHANGED
@@ -33,7 +33,7 @@ function AppRouterCacheProvider(props) {
33
33
  let inserted = [];
34
34
  // Override the insert method to support streaming SSR with flush().
35
35
  cache.insert = (...args) => {
36
- if (options?.enableCssLayer && !args[1].styles.startsWith('@layer')) {
36
+ if (options?.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
37
37
  args[1].styles = `@layer mui {${args[1].styles}}`;
38
38
  }
39
39
  const [selector, serialized] = args;
package/node/v13-pagesRouter/createCache.js CHANGED
@@ -11,14 +11,30 @@ const isBrowser = typeof document !== 'undefined';
11
11
  // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
12
12
  // This assures that MUI styles are loaded first.
13
13
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
14
- function createEmotionCache() {
14
+ function createEmotionCache(options) {
15
15
  let insertionPoint;
16
16
  if (isBrowser) {
17
17
  const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
18
18
  insertionPoint = emotionInsertionPoint ?? undefined;
19
19
  }
20
- return (0, _cache.default)({
20
+ const {
21
+ enableCssLayer,
22
+ ...rest
23
+ } = options ?? {};
24
+ const emotionCache = (0, _cache.default)({
21
25
  key: 'mui',
22
- insertionPoint
26
+ insertionPoint,
27
+ ...rest
23
28
  });
29
+ if (enableCssLayer) {
30
+ const prevInsert = emotionCache.insert;
31
+ emotionCache.insert = (...args) => {
32
+ // ignore styles that contain layer order (`@layer ...` without `{`)
33
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
34
+ args[1].styles = `@layer mui {${args[1].styles}}`;
35
+ }
36
+ return prevInsert(...args);
37
+ };
38
+ }
39
+ return emotionCache;
24
40
  }
package/node/v13-pagesRouter/index.js CHANGED
@@ -1,11 +1,22 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
7
+ var _exportNames = {
8
+ createEmotionCache: true
9
+ };
10
+ Object.defineProperty(exports, "createEmotionCache", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _createCache.default;
14
+ }
15
+ });
6
16
  var _pagesRouterV13Document = require("./pagesRouterV13Document");
7
17
  Object.keys(_pagesRouterV13Document).forEach(function (key) {
8
18
  if (key === "default" || key === "__esModule") return;
19
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
9
20
  if (key in exports && exports[key] === _pagesRouterV13Document[key]) return;
10
21
  Object.defineProperty(exports, key, {
11
22
  enumerable: true,
@@ -17,6 +28,7 @@ Object.keys(_pagesRouterV13Document).forEach(function (key) {
17
28
  var _pagesRouterV13App = require("./pagesRouterV13App");
18
29
  Object.keys(_pagesRouterV13App).forEach(function (key) {
19
30
  if (key === "default" || key === "__esModule") return;
31
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
20
32
  if (key in exports && exports[key] === _pagesRouterV13App[key]) return;
21
33
  Object.defineProperty(exports, key, {
22
34
  enumerable: true,
@@ -24,4 +36,5 @@ Object.keys(_pagesRouterV13App).forEach(function (key) {
24
36
  return _pagesRouterV13App[key];
25
37
  }
26
38
  });
27
- });
39
+ });
40
+ var _createCache = _interopRequireDefault(require("./createCache"));
package/node/v13-pagesRouter/pagesRouterV13Document.js CHANGED
@@ -83,13 +83,22 @@ async function documentGetInitialProps(ctx, options) {
83
83
  } = extractCriticalToChunks(initialProps.html);
84
84
  return {
85
85
  ...initialProps,
86
- emotionStyleTags: styles.map(style => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
87
- "data-emotion": `${style.key} ${style.ids.join(' ')}`,
88
- // eslint-disable-next-line react/no-danger
89
- dangerouslySetInnerHTML: {
90
- __html: style.css
86
+ emotionStyleTags: styles.map(style => {
87
+ if (!style.css.trim()) {
88
+ return null;
91
89
  }
92
- }, style.key))
90
+ const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
91
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
92
+ // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
93
+ // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
94
+ "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
95
+ // eslint-disable-next-line react/no-danger
96
+ dangerouslySetInnerHTML: {
97
+ __html: style.css
98
+ },
99
+ nonce: cache.nonce
100
+ }, style.key);
101
+ })
93
102
  };
94
103
  }
95
104
  }, ...(options?.plugins ?? [])])(ctx);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/material-nextjs",
3
- "version": "6.4.12",
3
+ "version": "6.5.0",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "Collection of utilities for integration between Material UI and Next.js.",
package/v13-appRouter/appRouterV13.js CHANGED
@@ -26,7 +26,7 @@ export default function AppRouterCacheProvider(props) {
26
26
  let inserted = [];
27
27
  // Override the insert method to support streaming SSR with flush().
28
28
  cache.insert = (...args) => {
29
- if (options?.enableCssLayer && !args[1].styles.startsWith('@layer')) {
29
+ if (options?.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
30
30
  args[1].styles = `@layer mui {${args[1].styles}}`;
31
31
  }
32
32
  const [selector, serialized] = args;
package/v13-pagesRouter/createCache.d.ts CHANGED
@@ -1 +1,4 @@
1
- export default function createEmotionCache(): import("@emotion/cache").EmotionCache;
1
+ import createCache from '@emotion/cache';
2
+ export default function createEmotionCache(options?: {
3
+ enableCssLayer?: boolean;
4
+ } & Parameters<typeof createCache>[0]): import("@emotion/cache").EmotionCache;
package/v13-pagesRouter/createCache.js CHANGED
@@ -4,14 +4,30 @@ const isBrowser = typeof document !== 'undefined';
4
4
  // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
5
5
  // This assures that MUI styles are loaded first.
6
6
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
7
- export default function createEmotionCache() {
7
+ export default function createEmotionCache(options) {
8
8
  let insertionPoint;
9
9
  if (isBrowser) {
10
10
  const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
11
11
  insertionPoint = emotionInsertionPoint ?? undefined;
12
12
  }
13
- return createCache({
13
+ const {
14
+ enableCssLayer,
15
+ ...rest
16
+ } = options ?? {};
17
+ const emotionCache = createCache({
14
18
  key: 'mui',
15
- insertionPoint
19
+ insertionPoint,
20
+ ...rest
16
21
  });
22
+ if (enableCssLayer) {
23
+ const prevInsert = emotionCache.insert;
24
+ emotionCache.insert = (...args) => {
25
+ // ignore styles that contain layer order (`@layer ...` without `{`)
26
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
27
+ args[1].styles = `@layer mui {${args[1].styles}}`;
28
+ }
29
+ return prevInsert(...args);
30
+ };
31
+ }
32
+ return emotionCache;
17
33
  }
package/v13-pagesRouter/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './pagesRouterV13Document';
2
2
  export * from './pagesRouterV13App';
3
+ export { default as createEmotionCache } from './createCache';
package/v13-pagesRouter/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./pagesRouterV13Document.js";
2
- export * from "./pagesRouterV13App.js";
2
+ export * from "./pagesRouterV13App.js";
3
+ export { default as createEmotionCache } from "./createCache.js";
package/v13-pagesRouter/pagesRouterV13Document.js CHANGED
@@ -73,13 +73,22 @@ export async function documentGetInitialProps(ctx, options) {
73
73
  } = extractCriticalToChunks(initialProps.html);
74
74
  return {
75
75
  ...initialProps,
76
- emotionStyleTags: styles.map(style => /*#__PURE__*/_jsx("style", {
77
- "data-emotion": `${style.key} ${style.ids.join(' ')}`,
78
- // eslint-disable-next-line react/no-danger
79
- dangerouslySetInnerHTML: {
80
- __html: style.css
76
+ emotionStyleTags: styles.map(style => {
77
+ if (!style.css.trim()) {
78
+ return null;
81
79
  }
82
- }, style.key))
80
+ const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
81
+ return /*#__PURE__*/_jsx("style", {
82
+ // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
83
+ // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
84
+ "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
85
+ // eslint-disable-next-line react/no-danger
86
+ dangerouslySetInnerHTML: {
87
+ __html: style.css
88
+ },
89
+ nonce: cache.nonce
90
+ }, style.key);
91
+ })
83
92
  };
84
93
  }
85
94
  }, ...(options?.plugins ?? [])])(ctx);