@mui/material-nextjs 7.0.2 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.1.0
+
+<!-- generated comparing v7.0.2..master -->
+
+_May 6, 2025_
+
+A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Material UI now works with **Tailwind CSS v4**! Check out the [setup guide](https://mui.com/material-ui/integrations/tailwindcss/tailwindcss-v4/).
+
+### `@mui/material@7.1.0`
+
+- [InputBase] Text cursor jumps several lines up when inserting text fragment with new line at the end (#45246) @yermartee
+- [OutlinedInput] Add missing `notchedOutline` slot (#45917) @siriwatknp
+- [Snackbar] Skip default `onClickAway` behavior when `defaultMuiPrevented` is provided (#45629) @sai6855
+- [Avatar] Fix img slot types and add missing slots (#45483) @siriwatknp
+- [Badge] Replace useSlotProps with useSlot hook (#45871) @sai6855
+- [BottomNavigationAction] Add slots and slotProps (#45776) @sai6855
+- [CardActionArea] Add slots and slotProps (#45866) @sai6855
+- [useMediaQuery] Add warning and docs for using `useMediaQuery('print')` (#44790) @good-jinu
+- Remove unnecessary clsx usages (#46084) @sai6855
+- Corrected generic type definition in `SelectChangeEvent` (#45941) @SuyashShukla0007
+- Fix theme object changes between renders (#45863) @siriwatknp
+
+### `@mui/material-nextjs@7.1.0`
+
+- Add option to enable CSS layers for pages router (#45596) @siriwatknp
+- Do not wrap `@layer` order rules in App Router (#45864) @Nayeem-XTREME
+
+### `@mui/system@7.1.0`
+
+- Fix `@mui/system` types organization (#45860) @Janpot
+
+### `@mui/styled-engine@7.1.0`
+
+- Infer `ownerState` from props in `styled` (#46083) @siriwatknp
+- Fix style overrides variants type (#45478) @siriwatknp
+
+### Docs
+
+- [Avatar] Add avatar upload demo (#45986) @Demianeen
+- [Dialog] Remove deprecated props usage in demos (#45923) @sai6855
+- [Menu] Update `paper` slot JSDoc default from `Paper` to `PopoverPaper` (#45722) @andreachiera
+- [examples] Remove create-react-app usages (#45426) @CodeLeom
+- Add `AccordionSummary` to the v5 breaking change migration (#45947) @siriwatknp
+- Update CSS variable usage in migration guide for Pigment CSS (#46033) @sai6855
+- Fix docs API dark mode color (#46086) @alexfauquette
+- Add a guide for extending Material UI classes in Tailwind CSS (#46039) @siriwatknp
+- Add `InitColorSchemeScript` docs and API (#45927) @siriwatknp
+- Add Tailwind CSS v4 integration guide (#45906) @siriwatknp
+- Fix 301 links to the system v6 (#45931) @oliviertassinari
+- Add notification for MUI X v8 announcement (#45942) @joserodolfofreitas
+- Fix som 301 redirections (ae84b35) @oliviertassinari
+- Fix some 301 redirections (057384e) @oliviertassinari
+- Fix logo is not centered on small screens (#45920) @crabsim
+- Fix line break typo (a2a62d5) @oliviertassinari
+- Fix markdown typo in templates.md (#45914) @scyzoryck
+- Add Next.js App Router guide for custom classnames (#45852) @siriwatknp
+
+### Core
+
+- [code-infra] Give a stable name to dev tool app (3889ded) @oliviertassinari
+- [code-infra] Normalize author package in org (8135638) @oliviertassinari
+- [code-infra] Correct some manually curated .d.ts files (#46054) @Janpot
+- [code-infra] Align deps versions (#46048) @Janpot
+- [code-infra] Fix dynamic import in imports resolver (#46046) @Janpot
+- [code-infra] Eliminate `@mui/utils` deep imports (#46004) @Janpot
+- [code-infra] Expand renovate.json for react types (#45935) @Janpot
+- [code-infra] Make Argos upload script reusable (#45883) @Janpot
+- [code-infra] Disallow redundant window prefixes for globals (#45880) @Janpot
+- [code-infra] Remove type generation of modern build (#45912) @Janpot
+- [code-infra] Clean up bundle size checker (#45622) @Janpot
+- [code-infra] Fix `StrictMode` effects not being called twice in React 19 tests (#45812) @bernardobelchior
+- [code-infra] Convert `@mui/utils` to typescript (#45671) @Janpot
+- [docs-infra] Improve export into sandbox package.json (#46044) @oliviertassinari
+- [docs-infra] Update feedback Node.js to v22 (#46064) @oliviertassinari
+- [docs-infra] Normalize netlify.toml in org (b101d5c) @oliviertassinari
+- [docs-infra] Uniformize Vale between repositories (0f79796) @oliviertassinari
+- [docs-infra] Fix Vale no longer working (#46029) @oliviertassinari
+- [docs-infra] Remove demo styling switch (#45926) @Janpot
+- [docs-infra] StackBlitz WebContainer demos (#45924) @Janpot
+- [docs-infra] Fix feedback management (#45872) @alexfauquette
+- [test] Replace `playwright` with `@playwright/test` (#45998) @ZeeshanTamboli
+- Fix internal version duplication (#46051) @oliviertassinari
+- Avoid the need for `@mui/material/themeCssVarsAugmentation` (#46053) @Janpot
+- Add security label to dependabot PRs (0a5c027) @oliviertassinari
+- Remove unecessary versions (#46034) @oliviertassinari
+- Remove redundant overrides resolver (#45970) @romgrk
+- Fix duplicate branch reference (#45915) @oliviertassinari
+- Fix outdated <link rel="shortcut icon" (#45916) @oliviertassinari
+- Fix redirection chains (#45930) @oliviertassinari
+- Run pnpm docs:sync-team (beee09f) @oliviertassinari
+- Add `pkg.pr.new` publishing (#42984) @Aslemammad
+- Remove @mui/base from the master branch (#45857) @mnajdova
+
+All contributors of this release in alphabetical order: @alexfauquette, @andreachiera, @Aslemammad, @bernardobelchior, @CodeLeom, @crabsim, @Demianeen, @good-jinu, @Janpot, @joserodolfofreitas, @mnajdova, @Nayeem-XTREME, @oliviertassinari, @renovate[bot], @romgrk, @sai6855, @scyzoryck, @siriwatknp, @SuyashShukla0007, @yermartee, @ZeeshanTamboli
+
 ## 7.0.2
 
 _Apr 9, 2025_

package/esm/v13-appRouter/appRouterV13.js

@@ -34,7 +34,7 @@ export default function AppRouterCacheProvider(props) {
     let inserted = [];
     // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
-      if (options?.enableCssLayer) {
+      if (options?.enableCssLayer && !args[1].styles.startsWith('@layer')) {
         args[1].styles = `@layer mui {${args[1].styles}}`;
       }
       const [selector, serialized] = args;

package/esm/v13-pagesRouter/createCache.d.ts

@@ -1,2 +1,4 @@
-import { Options } from '@emotion/cache';
-export default function createEmotionCache(options?: Partial<Options>): import("@emotion/cache").EmotionCache;
+import createCache from '@emotion/cache';
+export default function createEmotionCache(options?: {
+  enableCssLayer?: boolean;
+} & Parameters<typeof createCache>[0]): import("@emotion/cache").EmotionCache;

package/esm/v13-pagesRouter/createCache.js

@@ -10,9 +10,24 @@ export default function createEmotionCache(options) {
     const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
     insertionPoint = emotionInsertionPoint ?? undefined;
   }
-  return createCache({
+  const {
+    enableCssLayer,
+    ...rest
+  } = options ?? {};
+  const emotionCache = createCache({
     key: 'mui',
     insertionPoint,
-    ...options
+    ...rest
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      if (!args[1].styles.startsWith('@layer')) {
+        // avoid nested @layer
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }

package/esm/v13-pagesRouter/pagesRouterV13Document.js

@@ -74,14 +74,22 @@ export async function documentGetInitialProps(ctx, options) {
       } = extractCriticalToChunks(initialProps.html);
       return {
         ...initialProps,
-        emotionStyleTags: styles.map(style => style.css.trim() ? /*#__PURE__*/_jsx("style", {
-          "data-emotion": `${style.key} ${style.ids.join(' ')}`,
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: style.css
-          },
-          nonce: cache.nonce
-        }, style.key) : null)
+        emotionStyleTags: styles.map(style => {
+          if (!style.css.trim()) {
+            return null;
+          }
+          const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
+          return /*#__PURE__*/_jsx("style", {
+            // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
+            // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
+            "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: {
+              __html: style.css
+            },
+            nonce: cache.nonce
+          }, style.key);
+        })
       };
     }
   }, ...(options?.plugins ?? [])])(ctx);

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "7.0.2",
-  "private": false,
+  "version": "7.1.0",
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",
   "keywords": [
@@ -24,7 +23,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.0"
+    "@babel/runtime": "^7.27.1"
   },
   "peerDependencies": {
     "@emotion/cache": "^11.11.0",
@@ -76,5 +75,6 @@
         "default": "./esm/v13-pagesRouter/index.js"
       }
     }
-  }
+  },
+  "private": false
 }

package/v13-appRouter/appRouterV13.js

@@ -41,7 +41,7 @@ function AppRouterCacheProvider(props) {
     let inserted = [];
     // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
-      if (options?.enableCssLayer) {
+      if (options?.enableCssLayer && !args[1].styles.startsWith('@layer')) {
         args[1].styles = `@layer mui {${args[1].styles}}`;
       }
       const [selector, serialized] = args;

package/v13-pagesRouter/createCache.d.ts

@@ -1,2 +1,4 @@
-import { Options } from '@emotion/cache';
-export default function createEmotionCache(options?: Partial<Options>): import("@emotion/cache").EmotionCache;
+import createCache from '@emotion/cache';
+export default function createEmotionCache(options?: {
+  enableCssLayer?: boolean;
+} & Parameters<typeof createCache>[0]): import("@emotion/cache").EmotionCache;

package/v13-pagesRouter/createCache.js

@@ -17,9 +17,24 @@ function createEmotionCache(options) {
     const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
     insertionPoint = emotionInsertionPoint ?? undefined;
   }
-  return (0, _cache.default)({
+  const {
+    enableCssLayer,
+    ...rest
+  } = options ?? {};
+  const emotionCache = (0, _cache.default)({
     key: 'mui',
     insertionPoint,
-    ...options
+    ...rest
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      if (!args[1].styles.startsWith('@layer')) {
+        // avoid nested @layer
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }

package/v13-pagesRouter/pagesRouterV13Document.js

@@ -84,14 +84,22 @@ async function documentGetInitialProps(ctx, options) {
       } = extractCriticalToChunks(initialProps.html);
       return {
         ...initialProps,
-        emotionStyleTags: styles.map(style => style.css.trim() ? /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
-          "data-emotion": `${style.key} ${style.ids.join(' ')}`,
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: style.css
-          },
-          nonce: cache.nonce
-        }, style.key) : null)
+        emotionStyleTags: styles.map(style => {
+          if (!style.css.trim()) {
+            return null;
+          }
+          const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+            // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
+            // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
+            "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: {
+              __html: style.css
+            },
+            nonce: cache.nonce
+          }, style.key);
+        })
       };
     }
   }, ...(options?.plugins ?? [])])(ctx);

package/modern/v13-appRouter/appRouterV13.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { 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 CSS, plain CSS etc.
-     */
-    enableCssLayer?: boolean;
-  };
-  /**
-   * By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"'.
-   */
-  CacheProvider?: React.ElementType<{
-    value: EmotionCache;
-  }>;
-  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/modern/v13-appRouter/index.d.ts

@@ -1,2 +0,0 @@
-export { default as AppRouterCacheProvider } from "./appRouterV13.js";
-export * from "./appRouterV13.js";

package/modern/v13-pagesRouter/createCache.d.ts

@@ -1,2 +0,0 @@
-import { Options } from '@emotion/cache';
-export default function createEmotionCache(options?: Partial<Options>): import("@emotion/cache").EmotionCache;

package/modern/v13-pagesRouter/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./pagesRouterV13Document.js";
-export * from "./pagesRouterV13App.js";
-export { default as createEmotionCache } from "./createCache.js";

package/modern/v13-pagesRouter/pagesRouterV13App.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { EmotionCache } from '@emotion/react';
-export interface EmotionCacheProviderProps {
-  emotionCache?: EmotionCache;
-}
-export declare function AppCacheProvider({
-  emotionCache,
-  children
-}: React.PropsWithChildren<EmotionCacheProviderProps>): React.JSX.Element;

package/modern/v13-pagesRouter/pagesRouterV13Document.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { AppType } from 'next/app';
-import { EmotionCache } from '@emotion/react';
-import type { DocumentContext, DocumentInitialProps } from 'next/document';
-interface Plugin {
-  enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType>>) => (props: any) => React.JSX.Element;
-  resolveProps: (initialProps: DocumentInitialProps) => Promise<DocumentInitialProps>;
-}
-/**
- * A utility to compose multiple `getInitialProps` functions.
- */
-export declare function createGetInitialProps(plugins: Plugin[]): (ctx: DocumentContext) => Promise<DocumentInitialProps>;
-export interface DocumentHeadTagsProps {
-  emotionStyleTags: React.ReactElement<unknown>[];
-}
-export declare function DocumentHeadTags(props: DocumentHeadTagsProps): React.JSX.Element;
-export declare function documentGetInitialProps(ctx: DocumentContext, options?: {
-  emotionCache?: EmotionCache;
-  plugins?: Plugin[];
-}): Promise<import("next/dist/shared/lib/utils").RenderPageResult & {
-  styles?: React.ReactElement[] | Iterable<React.ReactNode> | React.JSX.Element;
-} & DocumentHeadTagsProps>;
-export {};

package/modern/v14-appRouter/index.d.ts

@@ -1 +0,0 @@
-export * from "../v13-appRouter/index.js";

package/modern/v14-pagesRouter/index.d.ts

@@ -1 +0,0 @@
-export * from "../v13-pagesRouter/index.js";

package/modern/v15-appRouter/index.d.ts

@@ -1 +0,0 @@
-export * from "../v13-appRouter/index.js";

package/modern/v15-pagesRouter/index.d.ts

@@ -1 +0,0 @@
-export * from "../v13-pagesRouter/index.js";