@mui/material-nextjs 5.15.4 → 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/{build/legacy → legacy}/v13-appRouter/appRouterV13.js

@@ -3,10 +3,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import createCache from '@emotion/cache';
-import { useServerInsertedHTML } from 'next/navigation';
 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];
@@ -77,6 +83,7 @@ export default function AppRouterCacheProvider(props) {
         var name = _ref2.name,
           style = _ref2.style;
         return /*#__PURE__*/_jsx("style", {
+          nonce: options == null ? void 0 : options.nonce,
           "data-emotion": "".concat(registry.cache.key, "-global ").concat(name)
           // eslint-disable-next-line react/no-danger
           ,
@@ -85,6 +92,7 @@ export default function AppRouterCacheProvider(props) {
           }
         }, name);
       }), styles && /*#__PURE__*/_jsx("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": dataEmotionAttribute
         // eslint-disable-next-line react/no-danger
         ,

package/{build/legacy → legacy}/v13-appRouter/index.js

@@ -1,4 +1,2 @@
-'use client';
-
 export { default as AppRouterCacheProvider } from './appRouterV13';
 export * from './appRouterV13';

package/{build/legacy → 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/legacy/v14-appRouter/index.js

@@ -0,0 +1 @@
+export * from '../v13-appRouter';

package/{build/modern → modern}/v13-appRouter/appRouterV13.js

@@ -3,10 +3,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import createCache from '@emotion/cache';
-import { useServerInsertedHTML } from 'next/navigation';
 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}}`;
@@ -73,6 +79,7 @@ export default function AppRouterCacheProvider(props) {
         name,
         style
       }) => /*#__PURE__*/_jsx("style", {
+        nonce: options?.nonce,
         "data-emotion": `${registry.cache.key}-global ${name}`
         // eslint-disable-next-line react/no-danger
         ,
@@ -80,6 +87,7 @@ export default function AppRouterCacheProvider(props) {
           __html: style
         }
       }, name)), styles && /*#__PURE__*/_jsx("style", {
+        nonce: options?.nonce,
         "data-emotion": dataEmotionAttribute
         // eslint-disable-next-line react/no-danger
         ,

package/{build/modern → modern}/v13-appRouter/index.js

@@ -1,4 +1,2 @@
-'use client';
-
 export { default as AppRouterCacheProvider } from './appRouterV13';
 export * from './appRouterV13';

package/{build/modern → 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/modern/v14-appRouter/index.js

@@ -0,0 +1 @@
+export * from '../v13-appRouter';

package/{build/node → node}/v13-appRouter/appRouterV13.js

@@ -9,11 +9,16 @@ exports.default = AppRouterCacheProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _cache = _interopRequireDefault(require("@emotion/cache"));
-var _navigation = require("next/navigation");
 var _react2 = require("@emotion/react");
+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}}`;
@@ -81,6 +87,7 @@ function AppRouterCacheProvider(props) {
         name,
         style
       }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": `${registry.cache.key}-global ${name}`
         // eslint-disable-next-line react/no-danger
         ,
@@ -88,6 +95,7 @@ function AppRouterCacheProvider(props) {
           __html: style
         }
       }, name)), styles && /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": dataEmotionAttribute
         // eslint-disable-next-line react/no-danger
         ,

package/{build/node → node}/v13-appRouter/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/{build/node → 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/{build/node → node}/v14-appRouter/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "5.15.4",
+  "version": "5.15.6",
   "private": false,
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",
@@ -23,14 +23,6 @@
     "type": "opencollective",
     "url": "https://opencollective.com/mui-org"
   },
-  "devDependencies": {
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.3",
-    "@emotion/server": "^11.11.0",
-    "@types/react": "^18.2.46",
-    "next": "13.4.19",
-    "react": "^18.2.0"
-  },
   "peerDependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/server": "^11.11.0",
@@ -52,22 +44,10 @@
   },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "build"
   },
   "engines": {
     "node": ">=12.0.0"
-  },
-  "scripts": {
-    "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:legacy": "node ../../scripts/build.mjs legacy",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
-    "build:types": "node ../../scripts/buildTypes.mjs",
-    "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
-    "release": "pnpm build && npm publish build",
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-utils/**/*.test.{js,ts,tsx}'",
-    "typescript": "tsc -p tsconfig.json"
   }
 }

package/{build/v13-appRouter → v13-appRouter}/appRouterV13.d.ts

@@ -1,19 +1,28 @@
 import * as React from 'react';
-import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
+import { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
 export type AppRouterCacheProviderProps = {
-    /** These are the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+    /**
+     * These are the options passed to createCache() from 'import createCache from "@emotion/cache"'.
+     */
     options?: Partial<OptionsOfCreateCache> & {
         /**
          * If `true`, the generated styles are wrapped within `@layer mui`.
-         * This is useful if you want to override the Material UI's generated styles with different styling solution, like Tailwind, plain CSS etc.
+         * This is useful if you want to override the Material UI's generated styles with different styling solution, like Tailwind CSS, plain CSS etc.
          */
         enableCssLayer?: boolean;
     };
-    /** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
+    /**
+     * By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"'.
+     */
     CacheProvider?: (props: {
         value: EmotionCache;
         children: React.ReactNode;
     }) => 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/{build/v13-appRouter → v13-appRouter}/appRouterV13.js

@@ -3,10 +3,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import createCache from '@emotion/cache';
-import { useServerInsertedHTML } from 'next/navigation';
 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}}`;
@@ -74,6 +80,7 @@ export default function AppRouterCacheProvider(props) {
         name,
         style
       }) => /*#__PURE__*/_jsx("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": `${registry.cache.key}-global ${name}`
         // eslint-disable-next-line react/no-danger
         ,
@@ -81,6 +88,7 @@ export default function AppRouterCacheProvider(props) {
           __html: style
         }
       }, name)), styles && /*#__PURE__*/_jsx("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": dataEmotionAttribute
         // eslint-disable-next-line react/no-danger
         ,

package/{build/v13-appRouter → v13-appRouter}/index.js

@@ -1,4 +1,2 @@
-'use client';
-
 export { default as AppRouterCacheProvider } from './appRouterV13';
 export * from './appRouterV13';

package/{build/v13-pagesRouter → 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/{build/v13-pagesRouter → 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/v14-appRouter/index.js

@@ -0,0 +1 @@
+export * from '../v13-appRouter';

package/build/README.md

@@ -1,3 +0,0 @@
-# @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.

package/build/legacy/v14-appRouter/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export * from '../v13-appRouter';

package/build/modern/v14-appRouter/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export * from '../v13-appRouter';

package/build/package.json

@@ -1,52 +0,0 @@
-{
-  "name": "@mui/material-nextjs",
-  "version": "5.15.4",
-  "private": false,
-  "author": "MUI Team",
-  "description": "Collection of utilities for integration between Material UI and Next.js.",
-  "keywords": [
-    "react",
-    "next",
-    "material-ui"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
-    "directory": "packages/mui-material-nextjs"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/mui/material-ui/issues"
-  },
-  "homepage": "https://mui.com/material-ui/guides/nextjs/",
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/mui-org"
-  },
-  "peerDependencies": {
-    "@emotion/cache": "^11.11.0",
-    "@emotion/server": "^11.11.0",
-    "@mui/material": "^5.0.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "next": "^13.0.0 || ^14.0.0",
-    "react": "^17.0.0 || ^18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
-    },
-    "@emotion/cache": {
-      "optional": true
-    },
-    "@emotion/server": {
-      "optional": true
-    }
-  },
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=12.0.0"
-  }
-}

package/build/v14-appRouter/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export * from '../v13-appRouter';

package/src/v13-appRouter/appRouterV13.tsx

@@ -1,102 +0,0 @@
-'use client';
-import * as React from 'react';
-import createCache from '@emotion/cache';
-import { useServerInsertedHTML } from 'next/navigation';
-import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
-import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
-
-export type AppRouterCacheProviderProps = {
-  /** These are the options passed to createCache() from 'import createCache from "@emotion/cache"' */
-  options?: Partial<OptionsOfCreateCache> & {
-    /**
-     * If `true`, the generated styles are wrapped within `@layer mui`.
-     * This is useful if you want to override the Material UI's generated styles with different styling solution, like Tailwind, plain CSS etc.
-     */
-    enableCssLayer?: boolean;
-  };
-  /** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
-  CacheProvider?: (props: {
-    value: EmotionCache;
-    children: React.ReactNode;
-  }) => React.JSX.Element | null;
-  children: React.ReactNode;
-};
-
-export default function AppRouterCacheProvider(props: AppRouterCacheProviderProps) {
-  const { options, CacheProvider = DefaultCacheProvider, children } = props;
-
-  const [registry] = React.useState(() => {
-    const cache = createCache({ ...options, key: options?.key ?? 'mui' });
-    cache.compat = true;
-    const prevInsert = cache.insert;
-    let inserted: { name: string; isGlobal: boolean }[] = [];
-    cache.insert = (...args) => {
-      if (options?.enableCssLayer) {
-        args[1].styles = `@layer mui {${args[1].styles}}`;
-      }
-      const [selector, serialized] = args;
-      if (cache.inserted[serialized.name] === undefined) {
-        inserted.push({
-          name: serialized.name,
-          isGlobal: !selector,
-        });
-      }
-      return prevInsert(...args);
-    };
-    const flush = () => {
-      const prevInserted = inserted;
-      inserted = [];
-      return prevInserted;
-    };
-    return { cache, flush };
-  });
-
-  useServerInsertedHTML(() => {
-    const inserted = registry.flush();
-    if (inserted.length === 0) {
-      return null;
-    }
-    let styles = '';
-    let dataEmotionAttribute = registry.cache.key;
-
-    const globals: {
-      name: string;
-      style: string;
-    }[] = [];
-
-    inserted.forEach(({ name, isGlobal }) => {
-      const style = registry.cache.inserted[name];
-
-      if (typeof style !== 'boolean') {
-        if (isGlobal) {
-          globals.push({ name, style });
-        } else {
-          styles += style;
-          dataEmotionAttribute += ` ${name}`;
-        }
-      }
-    });
-
-    return (
-      <React.Fragment>
-        {globals.map(({ name, style }) => (
-          <style
-            key={name}
-            data-emotion={`${registry.cache.key}-global ${name}`}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: style }}
-          />
-        ))}
-        {styles && (
-          <style
-            data-emotion={dataEmotionAttribute}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: styles }}
-          />
-        )}
-      </React.Fragment>
-    );
-  });
-
-  return <CacheProvider value={registry.cache}>{children}</CacheProvider>;
-}

package/src/v13-appRouter/index.ts

@@ -1,3 +0,0 @@
-'use client';
-export { default as AppRouterCacheProvider } from './appRouterV13';
-export * from './appRouterV13';

package/src/v13-pagesRouter/createCache.ts

@@ -1,19 +0,0 @@
-import createCache from '@emotion/cache';
-
-const isBrowser = typeof document !== 'undefined';
-
-// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
-// This assures that MUI styles are loaded first.
-// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-export default function createEmotionCache() {
-  let insertionPoint;
-
-  if (isBrowser) {
-    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
-      'meta[name="emotion-insertion-point"]',
-    );
-    insertionPoint = emotionInsertionPoint ?? undefined;
-  }
-
-  return createCache({ key: 'mui', insertionPoint });
-}

package/src/v13-pagesRouter/index.ts

@@ -1,2 +0,0 @@
-export * from './pagesRouterV13Document';
-export * from './pagesRouterV13App';

package/src/v13-pagesRouter/pagesRouterV13App.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { CacheProvider, EmotionCache } from '@emotion/react';
-import createEmotionCache from './createCache';
-
-export interface EmotionCacheProviderProps {
-  emotionCache?: EmotionCache;
-}
-
-const defaultEmotionCache = createEmotionCache();
-
-export function AppCacheProvider({
-  emotionCache = defaultEmotionCache,
-  children,
-}: React.PropsWithChildren<EmotionCacheProviderProps>) {
-  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
-}