@mui/material-nextjs 5.15.5 → 5.15.6

package/README.md

@@ -1,3 +1,3 @@
 # @mui/material-nextjs
 
-The official Material UI integration with Next.js. For the full documentation, visit [Next.js integration](https://mui.com/material-ui/guides/nextjs/) page.
+The official Material UI integration with Next.js. For the full documentation, visit [Next.js integration](https://mui.com/material-ui/guides/nextjs/) page.

package/legacy/v13-appRouter/appRouterV13.js

@@ -7,6 +7,11 @@ import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
 import { useServerInsertedHTML } from 'next/navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
+ * Without it, Emotion will generate a new <style> tag during SSR for every component.
+ * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
+ */
 export default function AppRouterCacheProvider(props) {
   var options = props.options,
     _props$CacheProvider = props.CacheProvider,
@@ -20,6 +25,7 @@ export default function AppRouterCacheProvider(props) {
       cache.compat = true;
       var prevInsert = cache.insert;
       var inserted = [];
+      // Override the insert method to support streaming SSR with flush().
       cache.insert = function () {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];

package/legacy/v13-pagesRouter/pagesRouterV13Document.js

@@ -70,13 +70,12 @@ export function createGetInitialProps(plugins) {
     return getInitialProps;
   }();
 }
-export function DocumentHeadTags(_ref2) {
-  var emotionStyleTags = _ref2.emotionStyleTags;
+export function DocumentHeadTags(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
       name: "emotion-insertion-point",
       content: ""
-    })), emotionStyleTags]
+    })), props.emotionStyleTags]
   });
 }
 

package/modern/v13-appRouter/appRouterV13.js

@@ -7,6 +7,11 @@ import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
 import { useServerInsertedHTML } from 'next/navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
+ * Without it, Emotion will generate a new <style> tag during SSR for every component.
+ * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
+ */
 export default function AppRouterCacheProvider(props) {
   const {
     options,
@@ -20,6 +25,7 @@ export default function AppRouterCacheProvider(props) {
     cache.compat = true;
     const prevInsert = cache.insert;
     let inserted = [];
+    // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
       if (options?.enableCssLayer) {
         args[1].styles = `@layer mui {${args[1].styles}}`;

package/modern/v13-pagesRouter/pagesRouterV13Document.js

@@ -20,14 +20,12 @@ export function createGetInitialProps(plugins) {
     return finalProps;
   };
 }
-export function DocumentHeadTags({
-  emotionStyleTags
-}) {
+export function DocumentHeadTags(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
       name: "emotion-insertion-point",
       content: ""
-    })), emotionStyleTags]
+    })), props.emotionStyleTags]
   });
 }
 

package/node/v13-appRouter/appRouterV13.js

@@ -14,6 +14,11 @@ var _navigation = require("next/navigation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
+ * Without it, Emotion will generate a new <style> tag during SSR for every component.
+ * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
+ */
 function AppRouterCacheProvider(props) {
   const {
     options,
@@ -28,6 +33,7 @@ function AppRouterCacheProvider(props) {
     cache.compat = true;
     const prevInsert = cache.insert;
     let inserted = [];
+    // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
       if (options != null && options.enableCssLayer) {
         args[1].styles = `@layer mui {${args[1].styles}}`;

package/node/v13-pagesRouter/pagesRouterV13Document.js

@@ -30,14 +30,12 @@ function createGetInitialProps(plugins) {
     return finalProps;
   };
 }
-function DocumentHeadTags({
-  emotionStyleTags
-}) {
+function DocumentHeadTags(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [_meta || (_meta = /*#__PURE__*/(0, _jsxRuntime.jsx)("meta", {
       name: "emotion-insertion-point",
       content: ""
-    })), emotionStyleTags]
+    })), props.emotionStyleTags]
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "5.15.5",
+  "version": "5.15.6",
   "private": false,
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",

package/v13-appRouter/appRouterV13.d.ts

@@ -20,4 +20,9 @@ export type AppRouterCacheProviderProps = {
     }) => React.JSX.Element | null;
     children: React.ReactNode;
 };
+/**
+ * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
+ * Without it, Emotion will generate a new <style> tag during SSR for every component.
+ * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
+ */
 export default function AppRouterCacheProvider(props: AppRouterCacheProviderProps): React.JSX.Element;

package/v13-appRouter/appRouterV13.js

@@ -7,6 +7,11 @@ import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
 import { useServerInsertedHTML } from 'next/navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
+ * Without it, Emotion will generate a new <style> tag during SSR for every component.
+ * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
+ */
 export default function AppRouterCacheProvider(props) {
   const {
     options,
@@ -21,6 +26,7 @@ export default function AppRouterCacheProvider(props) {
     cache.compat = true;
     const prevInsert = cache.insert;
     let inserted = [];
+    // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
       if (options != null && options.enableCssLayer) {
         args[1].styles = `@layer mui {${args[1].styles}}`;

package/v13-pagesRouter/pagesRouterV13Document.d.ts

@@ -13,7 +13,7 @@ export declare function createGetInitialProps(plugins: Plugin[]): (ctx: Document
 export interface DocumentHeadTagsProps {
     emotionStyleTags: React.JSX.Element[];
 }
-export declare function DocumentHeadTags({ emotionStyleTags }: DocumentHeadTagsProps): React.JSX.Element;
+export declare function DocumentHeadTags(props: DocumentHeadTagsProps): React.JSX.Element;
 export declare function documentGetInitialProps(ctx: DocumentContext, options?: {
     emotionCache?: EmotionCache;
     plugins?: Plugin[];

package/v13-pagesRouter/pagesRouterV13Document.js

@@ -20,14 +20,12 @@ export function createGetInitialProps(plugins) {
     return finalProps;
   };
 }
-export function DocumentHeadTags({
-  emotionStyleTags
-}) {
+export function DocumentHeadTags(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
       name: "emotion-insertion-point",
       content: ""
-    })), emotionStyleTags]
+    })), props.emotionStyleTags]
   });
 }