Merge branch 'next' into remove-outdated-babel-plugins

.circleci/config.yml

@@ -383,7 +383,7 @@ jobs:
     <<: *default-job
     resource_class: 'medium+'
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -413,7 +413,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -423,17 +423,11 @@ jobs:
       - run:
           name: pnpm test:e2e
           command: pnpm test:e2e
-      - run:
-          name: Can we generate the @mui/material umd build?
-          command: pnpm --filter @mui/material build:umd
-      - run:
-          name: Test umd release
-          command: pnpm test:umd
   test_e2e_website:
     # NOTE: This workflow runs after successful docs deploy. See /test/e2e-website/README.md#ci
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -448,7 +442,7 @@ jobs:
   test_profile:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -475,7 +469,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -529,7 +523,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -553,7 +547,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -577,7 +571,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -601,7 +595,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -625,7 +619,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/vite/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -649,7 +643,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -677,7 +671,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -778,7 +772,7 @@ jobs:
   test_benchmark:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.43.1-focal
+      - image: mcr.microsoft.com/playwright:v1.44.0-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:

.github/workflows/cherry-pick-next-to-master.yml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ contains(github.event.pull_request.labels.*.name, 'needs cherry-pick') && github.event.pull_request.merged == true }}
     steps:
       - name: Checkout
-        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
         with:
           fetch-depth: 0
       - name: Cherry pick and create the new PR

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
         os: [macos-latest, windows-latest, ubuntu-latest]
     steps:
       - run: echo "${{ github.actor }}"
-      - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
         with:
           # fetch all tags which are required for `pnpm release:changelog`
           fetch-depth: 0

.github/workflows/codeql.yml

@@ -16,10 +16,10 @@ jobs:
       security-events: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@d39d31e687223d841ef683f52467bd88e9b21c14 # v3.25.3
+        uses: github/codeql-action/init@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@d39d31e687223d841ef683f52467bd88e9b21c14 # v3.25.3
+        uses: github/codeql-action/analyze@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4

.github/workflows/scorecards.yml

@@ -22,12 +22,12 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
         with:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
+        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
         with:
           results_file: results.sarif
           results_format: sarif
@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@d39d31e687223d841ef683f52467bd88e9b21c14 # v3.25.3
+        uses: github/codeql-action/upload-sarif@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4
         with:
           sarif_file: results.sarif

.github/workflows/vale-action.yml

@@ -12,7 +12,7 @@ jobs:
       contents: read
       pull-requests: write
     steps:
-      - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+      - uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
       - uses: errata-ai/vale-action@38bf078c328061f59879b347ca344a718a736018 # v2.1.0
         continue-on-error: true # GitHub Action flag needed until https://github.com/errata-ai/vale-action/issues/89 is fixed
         with:

CHANGELOG.md

@@ -1,5 +1,52 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.7
+
+<!-- generated comparing v6.0.0-alpha.6..next -->
+
+_May 16, 2024_
+
+A big thanks to the 14 contributors who made this release possible.
+
+### `@mui/material@6.0.0-alpha.7`
+
+- &#8203;<!-- 23 -->[Autocomplete] Deprecate `componentsProps` props (#42179) @lhilgert9
+- &#8203;<!-- 22 -->[Autocomplete] Improve design when there's a start adornment for small autocomplete (#41781) @TahaRhidouani
+- &#8203;<!-- 21 -->[Autocomplete] deprecate `*Component` and `*Props` for v6 (#41875) @lhilgert9
+- &#8203;<!-- 19 -->[CircularProgress] Deprecate composed classes (#42076) @sai6855
+- &#8203;<!-- 05 -->[ToggleButtonGroup] Add missing `selected` class in ToggleButtonGroupClasses type (#42243) @tarunrajput
+
+### `@mui/codemod@6.0.0-alpha.6`
+
+- &#8203;<!-- 18 -->[Divider] Only apply codemod if light prop is present (#42098) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 13 -->Fix 301 to Figma @oliviertassinari
+- &#8203;<!-- 12 -->Fix use of deprecated React API (#42118) @oliviertassinari
+- &#8203;<!-- 11 -->Remove the Base notification (#42191) @danilo-leal
+- &#8203;<!-- 07 -->[material-ui] Improve descriptions for deprecated props (#42221) @aarongarciah
+- &#8203;<!-- 06 -->[material-ui] Fix typo in composition docs (#42195) @aarongarciah
+
+### Core
+
+- &#8203;<!-- 20 -->[blog] Introducing Pigment CSS blog post (#42198) @samuelsycamore
+- &#8203;<!-- 17 -->[core] Remove confusing comment @oliviertassinari
+- &#8203;<!-- 16 -->[core] Match other repositories and convention @oliviertassinari
+- &#8203;<!-- 15 -->[core] Fix React 18.3 warnings about spreading keys in the Material UI `Autocomplete` component (#42099) @heath-freenome
+- &#8203;<!-- 14 -->[core] Remove unecessary quotes @oliviertassinari
+- &#8203;<!-- 10 -->[docs-infra] Share code for section title (#42236) @alexfauquette
+- &#8203;<!-- 09 -->[docs-infra] Limit the copy button to the visible code block (#42115) @danilo-leal
+- &#8203;<!-- 08 -->[docs-infra] Make select components with two capital letters (#42004) @alexfauquette
+- &#8203;<!-- 08 -->[docs-infra][toolpad] Fix Page title and SERP title mismatch (#41919) @bharatkashyap
+- &#8203;<!-- 05 -->[website] Add redirection for talk @oliviertassinari
+- &#8203;<!-- 04 -->[website] Adds Arthur Balduini team info (#42193) @arthurbalduini
+- &#8203;<!-- 03 -->[website] Update the role template file (#42192) @danilo-leal
+- &#8203;<!-- 02 -->[website] Update MUI X deps and migrate TreeView demos to v7 API (#42149) @noraleonte
+- &#8203;<!-- 01 -->[website] Fix pricing casing (#42178) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @arthurbalduini, @bharatkashyap, @danilo-leal, @DiegoAndai, @heath-freenome, @lhilgert9, @noraleonte, @oliviertassinari, @sai6855, @samuelsycamore, @TahaRhidouani, @tarunrajput
+
 ## v6.0.0-alpha.6
 
 <!-- generated comparing v6.0.0-alpha.5..next -->

apps/pigment-css-vite-app/package.json

@@ -21,8 +21,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
-    "react-router": "^6.23.0",
-    "react-router-dom": "^6.22.3"
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.24.1",
@@ -33,7 +33,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.38",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.2.10",
+    "vite": "5.2.11",
     "vite-plugin-pages": "^0.32.1"
   },
   "nx": {

babel.config.js

@@ -13,7 +13,7 @@ const productionPlugins = [
 ];
 
 module.exports = function getBabelConfig(api) {
-  const useESModules = api.env(['regressions', 'modern', 'stable', 'rollup']);
+  const useESModules = api.env(['regressions', 'modern', 'stable']);
 
   const defaultAlias = {
     '@mui/material': resolveAliasPath('./packages/mui-material/src'),
@@ -136,16 +136,6 @@ module.exports = function getBabelConfig(api) {
           ],
         ],
       },
-      rollup: {
-        plugins: [
-          [
-            'babel-plugin-module-resolver',
-            {
-              alias: defaultAlias,
-            },
-          ],
-        ],
-      },
       test: {
         sourceMaps: 'both',
         plugins: [

benchmark/package.json

@@ -24,7 +24,7 @@
     "express": "^4.19.2",
     "fs-extra": "^11.2.0",
     "jss": "^10.10.0",
-    "playwright": "^1.43.1",
+    "playwright": "^1.44.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -33,7 +33,7 @@
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "serve-handler": "^6.1.5",
-    "styled-components": "^6.1.10",
+    "styled-components": "^6.1.11",
     "styled-system": "^5.1.5",
     "theme-ui": "^0.16.2",
     "webpack": "^5.91.0"

docs/data/about/teamMembers.json

@@ -297,5 +297,13 @@
     "locationCountry": "nl",
     "about": "A general knowledge gatherer. Gamer and programmer in the off hours.",
     "github": "JCQuintas"
+  },
+  {
+    "name": "Arthur Balduini",
+    "title": "React Engineer - X",
+    "location": "Paris, France",
+    "locationCountry": "fr",
+    "about": "Cooking 🍳, plant caring 🪴 and literature 📖",
+    "github": "arthurbalduini"
   }
 ]

docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md

@@ -58,7 +58,7 @@ The design kit uses Figma's local variables to let you toggle the variable mode
 
 ### Editing the main components
 
-You can use the [Similayer](https://www.figma.com/community/plugin/735733267883397781/Similayer) plugin to select multiple components at once that share some property.
+You can use the [Similayer](https://www.figma.com/community/plugin/735733267883397781/similayer) plugin to select multiple components at once that share some property.
 
 <iframe width="100%" height="490" src="https://www.youtube.com/embed/eHBk0FbS0P8?si=QbOiMU2F1yvGB6s8" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
 

docs/data/material/getting-started/installation/installation.md

@@ -159,20 +159,12 @@ For instance, via Google Web Fonts:
 ## CDN
 
 You can start using Material UI right away with minimal front-end infrastructure by installing it via CDN, which is a great option for rapid prototyping.
-Follow [this CDN example](https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn) to get started.
+
+<!-- #default-branch-switch -->
+
+Follow [this CDN example](https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn) to get started.
 
 :::error
 We do _not_ recommend using this approach in production.
 It requires the client to download the entire library—regardless of which components are actually used—which negatively impacts performance and bandwidth utilization.
 :::
-
-Two Universal Module Definition (UMD) files are provided:
-
-- one for development: https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
-- one for production: https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js
-
-:::warning
-The UMD links use the `latest` tag to point to the latest version of the library.
-This pointer is _unstable_ and subject to change as we release new versions.
-You should consider pointing to a specific version, such as [v5.0.0](https://unpkg.com/@mui/material@5.0.0/umd/material-ui.development.js).
-:::

docs/data/material/guides/composition/composition.md

@@ -123,7 +123,7 @@ import { Link } from 'react-router-dom';
 
 :::warning
 However, this strategy suffers from a limitation: prop name collisions.
-The component receiving the `component` prop (for example ListItem) might intercept the prop (for example to) that is destined to the leave element (for example Link).
+The component receiving the `component` prop (for example ListItem) might intercept the prop (for example to) that is destined to the leaf element (for example Link).
 :::
 
 ### With TypeScript

docs/data/material/guides/server-rendering/server-rendering.md

@@ -2,7 +2,7 @@
 
 <p class="description">The most common use case for server-side rendering is to handle the initial render when a user (or search engine crawler) first requests your app.</p>
 
-When the server receives the request, it renders the required component(s) into an HTML string, and then sends it as a response to the client.
+When the server receives the request, it renders the required component(s) into an HTML string and then sends it as a response to the client.
 From that point on, the client takes over rendering duties.
 
 ## Material UI on the server
@@ -208,7 +208,7 @@ function Main() {
   );
 }
 
-ReactDOM.hydrate(<Main />, document.querySelector('#root'));
+ReactDOM.hydrateRoot(document.querySelector('#root'), <Main />);
 ```
 
 ## Reference implementations