[core] Init the next branch (#41552)

CONTRIBUTING.md

@@ -72,11 +72,11 @@ git remote add upstream https://github.com/mui/material-ui.git
 
 <!-- #default-branch-switch -->
 
-3. Synchronize your local `master` branch with the upstream one:
+3. Synchronize your local `next` branch with the upstream one:
 
 ```bash
-git checkout master
-git pull upstream master
+git checkout next
+git pull upstream next
 ```
 
 4. Install the dependencies with pnpm (yarn or npm aren't supported):
@@ -146,7 +146,7 @@ Make sure the following is true:
 
 <!-- #default-branch-switch -->
 
-- The branch is targeted at `master` for ongoing development. All tests are passing. Code that lands in `master` must be compatible with the latest stable release. It may contain additional features but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time.
+- The branch is targeted at `next` for ongoing development. All tests are passing. Code that lands in `next` must be compatible with the latest alpha/beta release. It may contain additional features but no breaking changes. We should be able to release a new minor version from the tip of `next` at any time.
 - If a feature is being added:
   - If the result was already achievable with the core library, you've explained why this feature needs to be added to the core.
   - If this is a common use case, you've added an example to the documentation.

docs/data/material/getting-started/templates/blog/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, markdown-to-jsx.
 3. Import and use the `Blog` component.
 
 ## Demo
 
 <!-- #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/.

docs/data/material/getting-started/templates/checkout/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @emotion/styled, @emotion/react.
 3. Import and use the `Checkout` component.
 
 ## Demo
 
 <!-- #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/.

docs/data/material/getting-started/templates/dashboard/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, @mui/x-charts.
 3. Import and use the `Dashboard` component.
 
 ## Demo
 
 <!-- #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/.

docs/data/material/getting-started/templates/landing-page/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `LandingPage` component.
 
 ## Demo
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/landing-page/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/landing-page/.

docs/data/material/getting-started/templates/pricing/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `Pricing` component.
 
 ## Demo
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/pricing/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/pricing/.

docs/data/material/getting-started/templates/sign-in-side/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignInSide` component.
 
 ## Demo
 
 <!-- #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/.

docs/data/material/getting-started/templates/sign-in/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignIn` component.
 
 ## Demo
 
 <!-- #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/.

docs/data/material/getting-started/templates/sign-up/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignUp` component.
 
 ## Demo
 
 <!-- #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/.

docs/data/material/getting-started/templates/sticky-footer/README.md

@@ -4,12 +4,12 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples).
 2. Make sure your project has the required dependencies: @mui/material, @emotion/styled, @emotion/react.
 3. Import and use the `StickyFooter` component.
 
 ## Demo
 
 <!-- #default-branch-switch -->
 
-View the demo at https://mui.com/material-ui/getting-started/templates/sticky-footer/.
+View the demo at https://next.mui.com/material-ui/getting-started/templates/sticky-footer/.

docs/data/material/guides/localization/localization.md

@@ -97,7 +97,7 @@ The [Data Grid and Data Grid Pro](/x/react-data-grid/) components have their own
 
 <!-- #default-branch-switch -->
 
-You can [find the source](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/locale/index.ts) in the GitHub repository.
+You can [find the source](https://github.com/mui/material-ui/blob/next/packages/mui-material/src/locale/index.ts) in the GitHub repository.
 
 To create your own translation, or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.
 

docs/data/material/guides/typescript/typescript.md

@@ -6,7 +6,7 @@
 
 <!-- #default-branch-switch -->
 
-Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts) example.
+Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts) example.
 
 For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`:
 

docs/data/material/integrations/interoperability/interoperability.md

@@ -274,8 +274,8 @@ If, however, you would like to use styled-components, you can configure your app
 
 <!-- #default-branch-switch -->
 
-- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
-- [Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
+- [Create React App with styled-components](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components)
+- [Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components-ts)
 
 Following this approach reduces the bundle size, and removes the need to configure the CSS injection order.
 

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"
 +  },
  }
 ```
@@ -102,8 +102,8 @@ We provide boilerplate examples of Create React App with Material UI and styled
 
 <!-- #default-branch-switch -->
 
-- [Material UI + CRA + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
-- [Material UI + CRA + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
+- [Material UI + CRA + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components)
+- [Material UI + CRA + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components-ts)
 
 :::warning
 `@emotion/react`, `@emotion/styled`, and `styled-components` are optional peer dependencies of `@mui/material`, so you need to install them yourself.

docs/data/styles/advanced/advanced.md

@@ -417,16 +417,12 @@ It's a must-do for static pages, but it needs to be put in balance with not doin
 There is [an official Gatsby plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@mui/styles`.
 Refer to the plugin's page for setup and usage instructions.
 
-<!-- #default-branch-switch -->
-
 Refer to [this example Gatsby project](https://github.com/mui/material-ui/tree/v4.x/examples/gatsby) for an usage example.
 
 ### Next.js Pages Router
 
 You need to have a custom `pages/_document.js`, then copy [this logic](https://github.com/mui/material-ui/blob/v4.x/examples/nextjs/pages/_document.js#L52-L59) to inject the server-side rendered styles into the `<head>` element.
 
-<!-- #default-branch-switch -->
-
 Refer to [this example project](https://github.com/mui/material-ui/tree/v4.x/examples/nextjs) for an up-to-date usage example.
 
 ## Class names

docs/data/system/getting-started/usage/usage.md

@@ -163,7 +163,7 @@ Runtime performance takes a hit.
 
 <!-- #default-branch-switch -->
 
-Visit the [benchmark folder](https://github.com/mui/material-ui/tree/master/benchmark/browser) for a reproduction of the metrics above.
+Visit the [benchmark folder](https://github.com/mui/material-ui/tree/next/benchmark/browser) for a reproduction of the metrics above.
 
 We believe that for most use cases it's fast enough, but there are simple workarounds when performance becomes critical.
 For instance, when rendering a list with many items, you can use a CSS child selector to have a single "style injection" point (using d. for the wrapper and a. for each item).

docs/next.config.mjs

@@ -189,7 +189,7 @@ export default withDocsInfra({
     // docs-infra
     LIB_VERSION: pkg.version,
     SOURCE_CODE_REPO: 'https://github.com/mui/material-ui',
-    SOURCE_GITHUB_BRANCH: 'master', // #default-branch-switch
+    SOURCE_GITHUB_BRANCH: 'next', // #default-branch-switch
     GITHUB_TEMPLATE_DOCS_FEEDBACK: '4.docs-feedback.yml',
     BUILD_ONLY_ENGLISH_LOCALE: String(buildOnlyEnglishLocale),
     // MUI Core related

docs/package.json

@@ -9,7 +9,7 @@
     "build:clean": "rimraf .next && pnpm build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
     "dev": "next dev",
-    "deploy": "git push -f material-ui-docs master:latest",
+    "deploy": "git push -f material-ui-docs next:next",
     "icons": "rimraf --glob public/static/icons/* && node ./scripts/buildIcons.js",
     "start": "next start",
     "create-playground": "cpy --cwd=scripts playground.template.tsx ../../pages/playground --rename=index.tsx",

docs/pages/_app.js

@@ -167,6 +167,7 @@ function AppWrapper(props) {
         name: 'Material UI',
         versions: [
           { text: `v${materialPkgJson.version}`, current: true },
+          { text: `v5`, href: `https://mui.com${languagePrefix}/material-ui/getting-started/` },
           {
             text: 'v4',
             href: `https://v4.mui.com${languagePrefix}/getting-started/installation/`,
@@ -193,6 +194,7 @@ function AppWrapper(props) {
         name: 'MUI System',
         versions: [
           { text: `v${systemPkgJson.version}`, current: true },
+          { text: 'v5', href: `https://mui.com${languagePrefix}/system/getting-started/` },
           { text: 'v4', href: `https://v4.mui.com${languagePrefix}/system/basics/` },
           {
             text: 'View all versions',

docs/src/modules/components/MaterialUIExampleCollection.js

@@ -13,78 +13,78 @@ const examples = [
     name: 'Next.js App Router',
     label: 'View JS example',
     tsLabel: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs',
-    tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs',
+    tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-ts',
     src: '/static/images/examples/next.svg',
   },
   {
     name: 'Vite.js',
     label: 'View JS example',
     tsLabel: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite',
-    tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-ts',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite',
+    tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite-ts',
     src: '/static/images/examples/vite.svg',
   },
   {
     name: 'Next.js Pages Router',
     label: 'View JS example',
     tsLabel: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router',
     tsLink:
-      'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts',
+      'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router-ts',
     src: '/static/images/examples/next.svg',
   },
   {
     name: 'Remix',
     label: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-remix-ts',
     src: '/static/images/examples/remix.svg',
   },
   {
     name: 'Tailwind CSS + CRA',
     label: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-tailwind-ts',
     src: '/static/images/examples/tailwindcss.svg',
   },
   {
     name: 'Create React App',
     label: 'View JS example',
     tsLabel: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra',
-    tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra',
+    tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts',
     src: '/static/images/examples/cra.svg',
   },
   {
     name: 'styled-components',
     label: 'View JS example',
     tsLabel: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components',
     tsLink:
-      'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts',
+      'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components-ts',
     src: '/static/images/examples/styled.png',
   },
   {
     name: 'Preact',
     label: 'View JS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-preact',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-preact',
     src: '/static/images/examples/preact.svg',
   },
   {
     name: 'CDN',
     label: 'View JS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn',
     src: <CloudRoundedIcon />,
   },
   {
     name: 'Express.js (server-rendered)',
     label: 'View JS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-express-ssr',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-express-ssr',
     src: '/static/images/examples/express.png',
   },
   {
     name: 'Gatsby',
     label: 'View JS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-gatsby',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-gatsby',
     src: '/static/images/examples/gatsby.svg',
   },
   {

docs/src/modules/sandbox/CodeSandbox.test.js

@@ -33,7 +33,7 @@ describe('CodeSandbox', () => {
             'https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.js',
           dependencies: {
             react: 'latest',
-            '@mui/material': 'latest',
+            '@mui/material': 'next',
             'react-dom': 'latest',
             '@emotion/react': 'latest',
             '@emotion/styled': 'latest',
@@ -123,7 +123,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
             'https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.tsx',
           dependencies: {
             react: 'latest',
-            '@mui/material': 'latest',
+            '@mui/material': 'next',
             'react-dom': 'latest',
             '@emotion/react': 'latest',
             '@emotion/styled': 'latest',
@@ -230,7 +230,7 @@ ReactDOM.createRoot(document.querySelector("#root")!).render(
     expect(result.dependencies).to.deep.equal({
       '@emotion/react': 'latest',
       '@emotion/styled': 'latest',
-      '@mui/material': 'latest',
+      '@mui/material': 'next',
       '@types/react': 'latest',
       '@types/react-dom': 'latest',
       react: 'latest',