@mui/material-nextjs 5.16.13 → 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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,66 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 5.18.0
4
+
5
+ <!-- generated comparing v5.17.1..v5.x -->
6
+
7
+ _Jun 26, 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://v5.mui.com/material-ui/customization/css-layers/).
13
+
14
+ ### `@mui/system@5.18.0`
15
+
16
+ - Backport CSS layers from v7 (#46320) @siriwatknp
17
+
18
+ ### `@mui/material-nextjs@5.18.0`
19
+
20
+ - Backport CSS layers from v7 (#46320) @siriwatknp
21
+
22
+ ### Docs
23
+
24
+ - Ease migration to v5 (#45991) @oliviertassinari
25
+ - Add AccordionSummary to the breaking change migration (@siriwatknp) (#45972) @siriwatknp
26
+
27
+ All contributors of this release in alphabetical order: @oliviertassinari, @siriwatknp
28
+
29
+ ## v5.17.1
30
+
31
+ <!-- generated comparing v5.17.0..v5.x -->
32
+
33
+ _Mar 18, 2025_
34
+
35
+ This release fixes the `@mui/types` dependencies in all packages to fix a package layout bug (#45612) @DiegoAndai
36
+
37
+ ## v5.17.0
38
+
39
+ _Mar 18, 2025_
40
+
41
+ A big thanks to the 2 contributors who made this release possible.
42
+
43
+ ### `@mui/material@5.17.0`
44
+
45
+ - [TextareaAutosize] Temporarily disconnect ResizeObserver to avoid loop error (#44540) (#45238) @DiegoAndai
46
+ - Support nested theme when upper theme is CSS vars theme (#45604) @siriwatknp
47
+
48
+ All contributors of this release in alphabetical order: @DiegoAndai, @siriwatknp
49
+
50
+ ## v5.16.14
51
+
52
+ <!-- generated comparing v5.16.13..v5.x -->
53
+
54
+ _Jan 6, 2025_
55
+
56
+ A big thanks to the 1 contributor who made this release possible.
57
+
58
+ ### `@mui/material@5.16.14`
59
+
60
+ - [Autocomplete] Revert: Fix options list rendering in freeSolo mode (#44857) @ZeeshanTamboli
61
+
62
+ All contributors of this release in alphabetical order: @ZeeshanTamboli
63
+
3
64
  ## v5.16.13
4
65
 
5
66
  <!-- generated comparing v5.16.12..v5.x -->
@@ -30,7 +30,7 @@ export default function AppRouterCacheProvider(props) {
30
30
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
31
31
  args[_key] = arguments[_key];
32
32
  }
33
- if (options != null && options.enableCssLayer) {
33
+ if (options != null && options.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
34
34
  args[1].styles = "@layer mui {".concat(args[1].styles, "}");
35
35
  }
36
36
  var selector = args[0],
@@ -1,17 +1,36 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
1
3
  import createCache from '@emotion/cache';
2
4
  var isBrowser = typeof document !== 'undefined';
3
5
 
4
6
  // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
5
7
  // This assures that MUI styles are loaded first.
6
8
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
7
- export default function createEmotionCache() {
9
+ export default function createEmotionCache(options) {
8
10
  var insertionPoint;
9
11
  if (isBrowser) {
10
12
  var emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
11
13
  insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
12
14
  }
13
- return createCache({
15
+ var _ref = options != null ? options : {},
16
+ enableCssLayer = _ref.enableCssLayer,
17
+ rest = _objectWithoutProperties(_ref, ["enableCssLayer"]);
18
+ var emotionCache = createCache(_extends({
14
19
  key: 'mui',
15
20
  insertionPoint: insertionPoint
16
- });
21
+ }, rest));
22
+ if (enableCssLayer) {
23
+ var prevInsert = emotionCache.insert;
24
+ emotionCache.insert = function () {
25
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
26
+ args[_key] = arguments[_key];
27
+ }
28
+ // ignore styles that contain layer order (`@layer ...` without `{`)
29
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
30
+ args[1].styles = "@layer mui {".concat(args[1].styles, "}");
31
+ }
32
+ return prevInsert.apply(void 0, args);
33
+ };
34
+ }
35
+ return emotionCache;
17
36
  }
@@ -1,2 +1,3 @@
1
1
  export * from './pagesRouterV13Document';
2
- export * from './pagesRouterV13App';
2
+ export * from './pagesRouterV13App';
3
+ export { default as createEmotionCache } from './createCache';
@@ -134,12 +134,19 @@ function _documentGetInitialProps() {
134
134
  _extractCriticalToChu = extractCriticalToChunks(initialProps.html), styles = _extractCriticalToChu.styles;
135
135
  return _context3.abrupt("return", _extends({}, initialProps, {
136
136
  emotionStyleTags: styles.map(function (style) {
137
+ if (!style.css.trim()) {
138
+ return null;
139
+ }
140
+ var isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
137
141
  return /*#__PURE__*/_jsx("style", {
138
- "data-emotion": "".concat(style.key, " ").concat(style.ids.join(' ')),
142
+ // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
143
+ // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
144
+ "data-emotion": "".concat(isLayerOrderRule ? "".concat(cache.key, " ") : '').concat(style.key, " ").concat(style.ids.join(' ')),
139
145
  // eslint-disable-next-line react/no-danger
140
146
  dangerouslySetInnerHTML: {
141
147
  __html: style.css
142
- }
148
+ },
149
+ nonce: cache.nonce
143
150
  }, style.key);
144
151
  })
145
152
  }));
@@ -27,7 +27,7 @@ export default function AppRouterCacheProvider(props) {
27
27
  let inserted = [];
28
28
  // Override the insert method to support streaming SSR with flush().
29
29
  cache.insert = (...args) => {
30
- if (options?.enableCssLayer) {
30
+ if (options?.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
31
31
  args[1].styles = `@layer mui {${args[1].styles}}`;
32
32
  }
33
33
  const [selector, serialized] = args;
@@ -1,17 +1,36 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["enableCssLayer"];
1
4
  import createCache from '@emotion/cache';
2
5
  const isBrowser = typeof document !== 'undefined';
3
6
 
4
7
  // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
5
8
  // This assures that MUI styles are loaded first.
6
9
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
7
- export default function createEmotionCache() {
10
+ export default function createEmotionCache(options) {
8
11
  let insertionPoint;
9
12
  if (isBrowser) {
10
13
  const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
11
14
  insertionPoint = emotionInsertionPoint ?? undefined;
12
15
  }
13
- return createCache({
16
+ const _ref = options ?? {},
17
+ {
18
+ enableCssLayer
19
+ } = _ref,
20
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
21
+ const emotionCache = createCache(_extends({
14
22
  key: 'mui',
15
23
  insertionPoint
16
- });
24
+ }, rest));
25
+ if (enableCssLayer) {
26
+ const prevInsert = emotionCache.insert;
27
+ emotionCache.insert = (...args) => {
28
+ // ignore styles that contain layer order (`@layer ...` without `{`)
29
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
30
+ args[1].styles = `@layer mui {${args[1].styles}}`;
31
+ }
32
+ return prevInsert(...args);
33
+ };
34
+ }
35
+ return emotionCache;
17
36
  }
@@ -1,2 +1,3 @@
1
1
  export * from './pagesRouterV13Document';
2
- export * from './pagesRouterV13App';
2
+ export * from './pagesRouterV13App';
3
+ export { default as createEmotionCache } from './createCache';
@@ -73,13 +73,22 @@ export async function documentGetInitialProps(ctx, options) {
73
73
  styles
74
74
  } = extractCriticalToChunks(initialProps.html);
75
75
  return _extends({}, 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);
@@ -35,7 +35,7 @@ function AppRouterCacheProvider(props) {
35
35
  let inserted = [];
36
36
  // Override the insert method to support streaming SSR with flush().
37
37
  cache.insert = (...args) => {
38
- if (options != null && options.enableCssLayer) {
38
+ if (options != null && options.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
39
39
  args[1].styles = `@layer mui {${args[1].styles}}`;
40
40
  }
41
41
  const [selector, serialized] = args;
@@ -5,20 +5,39 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = createEmotionCache;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
8
10
  var _cache = _interopRequireDefault(require("@emotion/cache"));
11
+ const _excluded = ["enableCssLayer"];
9
12
  const isBrowser = typeof document !== 'undefined';
10
13
 
11
14
  // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
12
15
  // This assures that MUI styles are loaded first.
13
16
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
14
- function createEmotionCache() {
17
+ function createEmotionCache(options) {
15
18
  let insertionPoint;
16
19
  if (isBrowser) {
17
20
  const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
18
21
  insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
19
22
  }
20
- return (0, _cache.default)({
23
+ const _ref = options != null ? options : {},
24
+ {
25
+ enableCssLayer
26
+ } = _ref,
27
+ rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
28
+ const emotionCache = (0, _cache.default)((0, _extends2.default)({
21
29
  key: 'mui',
22
30
  insertionPoint
23
- });
31
+ }, rest));
32
+ if (enableCssLayer) {
33
+ const prevInsert = emotionCache.insert;
34
+ emotionCache.insert = (...args) => {
35
+ // ignore styles that contain layer order (`@layer ...` without `{`)
36
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
37
+ args[1].styles = `@layer mui {${args[1].styles}}`;
38
+ }
39
+ return prevInsert(...args);
40
+ };
41
+ }
42
+ return emotionCache;
24
43
  }
@@ -1,11 +1,22 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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"));
@@ -84,13 +84,22 @@ async function documentGetInitialProps(ctx, options) {
84
84
  styles
85
85
  } = extractCriticalToChunks(initialProps.html);
86
86
  return (0, _extends2.default)({}, initialProps, {
87
- emotionStyleTags: styles.map(style => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
88
- "data-emotion": `${style.key} ${style.ids.join(' ')}`,
89
- // eslint-disable-next-line react/no-danger
90
- dangerouslySetInnerHTML: {
91
- __html: style.css
87
+ emotionStyleTags: styles.map(style => {
88
+ if (!style.css.trim()) {
89
+ return null;
92
90
  }
93
- }, style.key))
91
+ const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
92
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
93
+ // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
94
+ // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
95
+ "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
96
+ // eslint-disable-next-line react/no-danger
97
+ dangerouslySetInnerHTML: {
98
+ __html: style.css
99
+ },
100
+ nonce: cache.nonce
101
+ }, style.key);
102
+ })
94
103
  });
95
104
  }
96
105
  }, ...((_options$plugins = options == null ? void 0 : options.plugins) != null ? _options$plugins : [])])(ctx);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/material-nextjs",
3
- "version": "5.16.13",
3
+ "version": "5.18.0",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "Collection of utilities for integration between Material UI and Next.js.",
@@ -28,7 +28,7 @@ export default function AppRouterCacheProvider(props) {
28
28
  let inserted = [];
29
29
  // Override the insert method to support streaming SSR with flush().
30
30
  cache.insert = (...args) => {
31
- if (options != null && options.enableCssLayer) {
31
+ if (options != null && options.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
32
32
  args[1].styles = `@layer mui {${args[1].styles}}`;
33
33
  }
34
34
  const [selector, serialized] = args;
@@ -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;
@@ -1,17 +1,36 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["enableCssLayer"];
1
4
  import createCache from '@emotion/cache';
2
5
  const isBrowser = typeof document !== 'undefined';
3
6
 
4
7
  // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
5
8
  // This assures that MUI styles are loaded first.
6
9
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
7
- export default function createEmotionCache() {
10
+ export default function createEmotionCache(options) {
8
11
  let insertionPoint;
9
12
  if (isBrowser) {
10
13
  const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
11
14
  insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
12
15
  }
13
- return createCache({
16
+ const _ref = options != null ? options : {},
17
+ {
18
+ enableCssLayer
19
+ } = _ref,
20
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
21
+ const emotionCache = createCache(_extends({
14
22
  key: 'mui',
15
23
  insertionPoint
16
- });
24
+ }, rest));
25
+ if (enableCssLayer) {
26
+ const prevInsert = emotionCache.insert;
27
+ emotionCache.insert = (...args) => {
28
+ // ignore styles that contain layer order (`@layer ...` without `{`)
29
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
30
+ args[1].styles = `@layer mui {${args[1].styles}}`;
31
+ }
32
+ return prevInsert(...args);
33
+ };
34
+ }
35
+ return emotionCache;
17
36
  }
@@ -1,2 +1,3 @@
1
1
  export * from './pagesRouterV13Document';
2
2
  export * from './pagesRouterV13App';
3
+ export { default as createEmotionCache } from './createCache';
@@ -1,2 +1,3 @@
1
1
  export * from './pagesRouterV13Document';
2
- export * from './pagesRouterV13App';
2
+ export * from './pagesRouterV13App';
3
+ export { default as createEmotionCache } from './createCache';
@@ -74,13 +74,22 @@ export async function documentGetInitialProps(ctx, options) {
74
74
  styles
75
75
  } = extractCriticalToChunks(initialProps.html);
76
76
  return _extends({}, initialProps, {
77
- emotionStyleTags: styles.map(style => /*#__PURE__*/_jsx("style", {
78
- "data-emotion": `${style.key} ${style.ids.join(' ')}`,
79
- // eslint-disable-next-line react/no-danger
80
- dangerouslySetInnerHTML: {
81
- __html: style.css
77
+ emotionStyleTags: styles.map(style => {
78
+ if (!style.css.trim()) {
79
+ return null;
82
80
  }
83
- }, style.key))
81
+ const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
82
+ return /*#__PURE__*/_jsx("style", {
83
+ // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
84
+ // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
85
+ "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
86
+ // eslint-disable-next-line react/no-danger
87
+ dangerouslySetInnerHTML: {
88
+ __html: style.css
89
+ },
90
+ nonce: cache.nonce
91
+ }, style.key);
92
+ })
84
93
  });
85
94
  }
86
95
  }, ...((_options$plugins = options == null ? void 0 : options.plugins) != null ? _options$plugins : [])])(ctx);