Merge branch 'master' of https://github.com/mui/material-ui into depr…

…ecation/tabs
mui · Jan 31, 2025 · ccf794b · ccf794b
2 parents 851268f + 4b74f87
commit ccf794b
Show file tree

Hide file tree

Showing 283 changed files with 3,696 additions and 2,927 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
+<!-- #default-branch-switch -->
 <!-- markdownlint-disable-next-line -->
 <p align="center">
-  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
+  <a href="https://next.mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
 </p>
 
 <h1 align="center">Material UI</h1>

diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -23,7 +23,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.29",
+    "@pigment-css/nextjs-plugin": "0.0.30",
     "@types/node": "^20.17.16",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",

diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@pigment-css/vite-plugin": "0.0.29",
+    "@pigment-css/vite-plugin": "0.0.30",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@types/webfontloader": "^1.6.38",

diff --git a/docs/data/material/components/about-the-lab/about-the-lab.md b/docs/data/material/components/about-the-lab/about-the-lab.md
@@ -24,15 +24,15 @@ To install and save in your `package.json` dependencies, run one of the followin
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install @mui/lab @mui/material
+npm install @mui/lab@next @mui/material@next
 ```
 
 ```bash pnpm
-pnpm add @mui/lab @mui/material
+pnpm add @mui/lab@next @mui/material@next
 ```
 
 ```bash yarn
-yarn add @mui/lab @mui/material
+yarn add @mui/lab@next @mui/material@next
 ```
 
 </codeblock>

diff --git a/docs/data/material/components/breadcrumbs/PageContainerBasic.js b/docs/data/material/components/breadcrumbs/PageContainerBasic.js
@@ -15,9 +15,10 @@ import PrintIcon from '@mui/icons-material/Print';
 import DownloadIcon from '@mui/icons-material/Download';
 
 const NAVIGATION = [
+  { segment: 'inbox', title: 'Inbox' },
   {
-    segment: 'orders',
-    title: 'Orders',
+    segment: 'inbox/all',
+    title: 'All',
     icon: <DashboardIcon />,
   },
 ];
@@ -74,7 +75,7 @@ function CustomPageHeader() {
 
 export default function PageContainerBasic(props) {
   const { window } = props;
-  const router = useDemoRouter('/orders');
+  const router = useDemoRouter('/inbox/all');
   const theme = useTheme();
   // Remove this const when copying and pasting into your project.
   const demoWindow = window ? window() : undefined;

diff --git a/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx b/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx
@@ -15,9 +15,10 @@ import PrintIcon from '@mui/icons-material/Print';
 import DownloadIcon from '@mui/icons-material/Download';
 
 const NAVIGATION: Navigation = [
+  { segment: 'inbox', title: 'Inbox' },
   {
-    segment: 'orders',
-    title: 'Orders',
+    segment: 'inbox/all',
+    title: 'All',
     icon: <DashboardIcon />,
   },
 ];
@@ -74,7 +75,7 @@ function CustomPageHeader() {
 
 export default function PageContainerBasic(props: any) {
   const { window } = props;
-  const router = useDemoRouter('/orders');
+  const router = useDemoRouter('/inbox/all');
   const theme = useTheme();
   // Remove this const when copying and pasting into your project.
   const demoWindow = window ? window() : undefined;

diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md
@@ -30,15 +30,15 @@ Run one of the following commands to install it and save it to your `package.jso
 
 <codeblock storageKey="package-manager">
 ```bash npm
-npm install @mui/icons-material
+npm install @mui/icons-material@next
 ```
 
 ```bash pnpm
-pnpm add @mui/icons-material
+pnpm add @mui/icons-material@next
 ```
 
 ```bash yarn
-yarn add @mui/icons-material
+yarn add @mui/icons-material@next
 ```
 
 </codeblock>

diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md
@@ -23,15 +23,15 @@ Use one of the following commands to install it:
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
+npm install @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
 ```
 
 ```bash pnpm
-pnpm add @mui/icons-material @mui/material @emotion/styled @emotion/react
+pnpm add @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
 ```
 
 ```bash yarn
-yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react
+yarn add @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
 ```
 
 </codeblock>

diff --git a/docs/data/material/components/snackbars/ConsecutiveSnackbars.js b/docs/data/material/components/snackbars/ConsecutiveSnackbars.js
@@ -45,7 +45,7 @@ export default function ConsecutiveSnackbars() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        TransitionProps={{ onExited: handleExited }}
+        slotProps={{ transition: { onExited: handleExited } }}
         message={messageInfo ? messageInfo.message : undefined}
         action={
           <React.Fragment>

diff --git a/docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx b/docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx
@@ -55,7 +55,7 @@ export default function ConsecutiveSnackbars() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        TransitionProps={{ onExited: handleExited }}
+        slotProps={{ transition: { onExited: handleExited } }}
         message={messageInfo ? messageInfo.message : undefined}
         action={
           <React.Fragment>

diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.js b/docs/data/material/components/snackbars/DirectionSnackbar.js
@@ -53,7 +53,7 @@ export default function DirectionSnackbar() {
       <Snackbar
         open={open}
         onClose={handleClose}
-        TransitionComponent={transition}
+        slots={{ transition }}
         message="I love snacks"
         key={transition ? transition.name : ''}
       />

diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.tsx b/docs/data/material/components/snackbars/DirectionSnackbar.tsx
@@ -57,7 +57,7 @@ export default function DirectionSnackbar() {
       <Snackbar
         open={open}
         onClose={handleClose}
-        TransitionComponent={transition}
+        slots={{ transition }}
         message="I love snacks"
         key={transition ? transition.name : ''}
       />

diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.js b/docs/data/material/components/snackbars/TransitionsSnackbar.js
@@ -41,7 +41,7 @@ export default function TransitionsSnackbar() {
       <Snackbar
         open={state.open}
         onClose={handleClose}
-        TransitionComponent={state.Transition}
+        slots={{ transition: state.Transition }}
         message="I love snacks"
         key={state.Transition.name}
         autoHideDuration={1200}

diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx b/docs/data/material/components/snackbars/TransitionsSnackbar.tsx
@@ -57,7 +57,7 @@ export default function TransitionsSnackbar() {
       <Snackbar
         open={state.open}
         onClose={handleClose}
-        TransitionComponent={state.Transition}
+        slots={{ transition: state.Transition }}
         message="I love snacks"
         key={state.Transition.name}
         autoHideDuration={1200}

diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview b/docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview
@@ -4,7 +4,7 @@
 <Snackbar
   open={state.open}
   onClose={handleClose}
-  TransitionComponent={state.Transition}
+  slots={{ transition: state.Transition }}
   message="I love snacks"
   key={state.Transition.name}
   autoHideDuration={1200}

diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md
@@ -13,8 +13,6 @@ We recommend Next.js for server-side rendering and more opinionated framework fe
 See [Start a New React Project](https://react.dev/learn/start-a-new-react-project) from the official React docs to learn more about some of the options available.
 :::
 
-<!-- #default-branch-switch -->
-
 {{"component": "modules/components/MaterialUIExampleCollection"}}
 
 <br />

diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md
@@ -11,15 +11,15 @@ Run one of the following commands to add Material UI to your project:
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install @mui/material @emotion/react @emotion/styled
+npm install @mui/material@next @emotion/react @emotion/styled
 ```
 
 ```bash pnpm
-pnpm add @mui/material @emotion/react @emotion/styled
+pnpm add @mui/material@next @emotion/react @emotion/styled
 ```
 
 ```bash yarn
-yarn add @mui/material @emotion/react @emotion/styled
+yarn add @mui/material@next @emotion/react @emotion/styled
 ```
 
 </codeblock>

diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md
@@ -74,6 +74,7 @@ This includes issues introduced by external sources, like browser upgrades or ch
 
 | Material UI version | Release    | Supported                                                           |
 | ------------------: | :--------- | :------------------------------------------------------------------ |
+|              ^7.0.0 | March 2025 | 🚧 Pre release (Continuous support)                                 |
 |              ^6.0.0 | 2024-08-26 | ✅ Stable major (Continuous support)                                |
 |              ^5.0.0 | 2021-09-16 | ⚠️ Long-term support (Support for security issues and regressions). |
 |              ^4.0.0 | 2019-06-23 | ❌                                                                  |

diff --git a/docs/data/material/getting-started/templates/blog/README.md b/docs/data/material/getting-started/templates/blog/README.md
@@ -12,4 +12,4 @@
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/blog/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/blog/.
diff --git a/docs/data/material/getting-started/templates/checkout/README.md b/docs/data/material/getting-started/templates/checkout/README.md
@@ -12,4 +12,4 @@
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/checkout/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/checkout/.
diff --git a/docs/data/material/getting-started/templates/dashboard/README.md b/docs/data/material/getting-started/templates/dashboard/README.md
@@ -12,4 +12,4 @@
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/dashboard/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/dashboard/.
diff --git a/docs/data/material/getting-started/templates/marketing-page/README.md b/docs/data/material/getting-started/templates/marketing-page/README.md
@@ -12,4 +12,4 @@
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/marketing-page/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/marketing-page/.
diff --git a/docs/data/material/getting-started/templates/sign-in-side/README.md b/docs/data/material/getting-started/templates/sign-in-side/README.md
@@ -12,4 +12,4 @@
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/sign-in-side/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-in-side/.
diff --git a/docs/data/material/getting-started/templates/sign-in/README.md b/docs/data/material/getting-started/templates/sign-in/README.md
@@ -12,4 +12,4 @@
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/sign-in/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-in/.
diff --git a/docs/data/material/getting-started/templates/sign-up/README.md b/docs/data/material/getting-started/templates/sign-up/README.md
@@ -12,4 +12,4 @@
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/sign-up/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-up/.
diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md
@@ -7,8 +7,6 @@ title: New Free React Templates
 
 <p class="description">Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React marketing page, and more.</p>
 
-<!-- #default-branch-switch -->
-
 ## Free templates
 
 Our curated collection of free Material UI templates includes a dashboard, a marketing page, a checkout flow, sign-in and sign-up pages, and a blog.

diff --git a/docs/data/material/integrations/styled-components/styled-components.md b/docs/data/material/integrations/styled-components/styled-components.md
@@ -35,11 +35,11 @@ If you're using yarn, you can configure it using a package resolution:
 ```diff title="package.json"
  {
    "dependencies": {
--    "@mui/styled-engine": "latest"
-+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+-    "@mui/styled-engine": "next"
++    "@mui/styled-engine": "npm:@mui/styled-engine-sc@next"
    },
 +  "resolutions": {
-+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
++    "@mui/styled-engine": "npm:@mui/styled-engine-sc@next"
 +  },
  }
 ```

diff --git a/docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md b/docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md
@@ -0,0 +1,25 @@
+# Upgrade to v7
+
+<p class="description">This guide explains how to upgrade from Material UI v6 to v7.</p>
+
+## Start using the alpha release
+
+In the `package.json` file, change the package version from `latest` to `next`.
+
+```diff title="package.json"
+-"@mui/material": "latest",
++"@mui/material": "next",
+```
+
+Using `next` ensures your project always uses the latest v7 pre-releases.
+Alternatively, you can also target and fix it to a specific version, for example, `7.0.0-alpha.0`.
+
+## Breaking changes
+
+Since v7 is a new major release, it contains some changes that affect the public API.
+The steps you need to take to migrate from Material UI v6 to v7 are described below.
+
+:::info
+This list is a work in progress.
+Expect updates as new breaking changes are introduced.
+:::
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
@@ -297,6 +297,16 @@ const pages: MuiPage[] = [
         pathname: '/material-ui/migration/pickers-migration',
         title: 'Migration from @material-ui/pickers',
       },
+      {
+        pathname: '/material-ui/migration/v7',
+        subheader: 'Upgrade to v7',
+        children: [
+          {
+            pathname: '/material-ui/migration/upgrade-to-v7',
+            title: 'Upgrade to v7: getting started',
+          },
+        ],
+      },
       {
         pathname: '/material-ui/migration/v6',
         subheader: 'Upgrade to v6',

diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md
@@ -19,7 +19,7 @@ To install and save in your `package.json` dependencies, run:
 <!-- #default-branch-switch -->
 
 ```bash
-npm install @mui/styles
+npm install @mui/styles@next
 ```
 
 ## Getting started

diff --git a/docs/data/system/getting-started/installation/installation.md b/docs/data/system/getting-started/installation/installation.md
@@ -44,15 +44,15 @@ If you want to use [styled-components](https://styled-components.com/) instead,
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install @mui/system @mui/styled-engine-sc styled-components
+npm install @mui/system@next @mui/styled-engine-sc@next styled-components
 ```
 
 ```bash pnpm
-pnpm add @mui/system @mui/styled-engine-sc styled-components
+pnpm add @mui/system@next @mui/styled-engine-sc@next styled-components
 ```
 
 ```bash yarn
-yarn add @mui/system @mui/styled-engine-sc styled-components
+yarn add @mui/system@next @mui/styled-engine-sc@next styled-components
 ```
 
 </codeblock>

diff --git a/docs/data/system/migration/upgrade-to-v7/upgrade-to-v7.md b/docs/data/system/migration/upgrade-to-v7/upgrade-to-v7.md
@@ -0,0 +1,25 @@
+# Upgrade to v7
+
+<p class="description">This guide explains how to upgrade from MUI System v6 to v7.</p>
+
+## Start using the alpha release
+
+In the `package.json` file, change the package version from `latest` to `next`.
+
+```diff title="package.json"
+-"@mui/system": "latest",
++"@mui/system": "next",
+```
+
+Using `next` ensures your project always uses the latest v7 pre-releases.
+Alternatively, you can also target and fix it to a specific version, for example, `7.0.0-alpha.0`.
+
+## Breaking changes
+
+Since v7 is a new major release, it contains some changes that affect the public API.
+The steps you need to take to migrate from MUI System v6 to v7 are described below.
+
+:::info
+This list is a work in progress.
+Expect updates as new breaking changes are introduced.
+:::
-Original file line number
+Diff line change
@@ Expand Up @@
     See [Start a New React Project](https://react.dev/learn/start-a-new-react-project) from the official React docs to learn more about some of the options available.
     :::
-    <!-- #default-branch-switch -->
     {{"component": "modules/components/MaterialUIExampleCollection"}}
     <br />
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,4 +12,4 @@

		<!-- #default-branch-switch -->

		View the demo at https://mui.com/material-ui/getting-started/templates/blog/.
		View the demo at https://next.mui.com/material-ui/getting-started/templates/blog/.