Merge branch 'deprecta-modal-componentprops' of https://github.com/sa…

…i6855/material-ui into deprecta-modal-componentprops

.eslintrc.js

@@ -12,6 +12,8 @@ const forbidCreateStylesMessage =
   '`createStyles` will lead to inlined, at-compile-time-resolved type-imports. ' +
   'See https://github.com/microsoft/TypeScript/issues/36097#issuecomment-578324386 for more information';
 
+const ENABLE_REACT_COMPILER_PLUGIN = false;
+
 module.exports = {
   root: true, // So parent files don't get applied
   env: {
@@ -35,6 +37,7 @@ module.exports = {
     'eslint-plugin-react-hooks',
     '@typescript-eslint/eslint-plugin',
     'eslint-plugin-filenames',
+    ...(ENABLE_REACT_COMPILER_PLUGIN ? ['eslint-plugin-react-compiler'] : []),
   ],
   settings: {
     'import/resolver': {
@@ -219,6 +222,7 @@ module.exports = {
 
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
     'lines-around-directive': 'off',
+    ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'error' } : {}),
   },
   overrides: [
     {
@@ -471,6 +475,7 @@ module.exports = {
       rules: {
         'import/no-default-export': 'error',
         'import/prefer-default-export': 'off',
+        ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'off' } : {}),
       },
     },
     {

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
+        uses: github/codeql-action/init@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
         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@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
+        uses: github/codeql-action/analyze@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8

.github/workflows/maintenance.yml

@@ -29,7 +29,7 @@ jobs:
     steps:
       - run: echo "${{ github.actor }}"
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@6d74047dcef155976a15e4a124dde2c7fe0c5522 # v3.0.1
+        uses: eps1lon/actions-label-merge-conflict@1b1b1fcde06a9b3d089f3464c96417961dde1168 # v3.0.2
         with:
           dirtyLabel: 'PR: out-of-date'
           removeOnDirtyLabel: 'PR: ready to ship'

.github/workflows/scorecards.yml

@@ -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@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
+        uses: github/codeql-action/upload-sarif@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
         with:
           sarif_file: results.sarif

.gitignore

@@ -41,3 +41,4 @@ docs/public/static/blog/feed/*
 # vale downloaded config
 .github/styles/
 .nx/cache
+.nx/workspace-data

CHANGELOG.md

@@ -1,5 +1,52 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.10
+
+<!-- generated comparing v6.0.0-alpha.9..next -->
+
+_Jun 4, 2024_
+
+A big thanks to the 7 contributors who made this release possible.
+
+### `@mui/material@6.0.0-alpha.10`
+
+- &#8203;<!-- 26 -->[Backdrop] Deprecate `components` and `componentsProps` (#42468) @DiegoAndai
+- &#8203;<!-- 25 -->[Collapse] Bound max transition time (#42390) @oliviertassinari
+- &#8203;<!-- 12 -->[FilledInput] Remove unapplied classes from filledInputClasses interface and add missing classes to root (#42082) @sai6855
+- &#8203;<!-- 11 -->[InputBase] Deprecate components and componentProps props for v6 (#42093) @ChronicusUA
+- &#8203;<!-- 10 -->Remove remaining IE11 code (#42283) @DiegoAndai
+- &#8203;<!-- 09 -->[Modal] Deprecate `components` and `componentsProps` (#42469) @DiegoAndai
+- &#8203;<!-- 08 -->[Popover] Migrate useSlotProps to useSlot (#42369) @sai6855
+- &#8203;<!-- 07 -->[useMediaQuery] Remove unused useMediaQueryTheme (#42367) @aarongarciah
+
+### `@mui/system@6.0.0-alpha.10`
+
+- &#8203;<!-- 06 -->Remove IE11 code (#42436) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 23 -->Reflect Base UI and MUI System in a different repository @oliviertassinari
+- &#8203;<!-- 22 -->Update twitter.com to x.com @oliviertassinari
+- &#8203;<!-- 21 -->Simplify Example projects page @oliviertassinari
+- &#8203;<!-- 17 -->[icons] Update README and docs page (#41938) @danilo-leal
+- &#8203;<!-- 16 -->[material-ui] Add changelog section to the design kits page (#42449) @danilo-leal
+- &#8203;<!-- 15 -->[material-ui] Fix sentence in the All components page (#42336) @danilo-leal
+- &#8203;<!-- 14 -->[material-ui] Update Figma design kit doc redirect link (#42448) @danilo-leal
+- &#8203;<!-- 13 -->[system] Add "dynamic values" section to sx prop page (#42239) @aarongarciah
+
+### Core
+
+- &#8203;<!-- 20 -->[docs-infra] Update the OG card image design (#42470) @danilo-leal
+- &#8203;<!-- 19 -->[docs-infra] Add small design polish (#42455) @danilo-leal
+- &#8203;<!-- 18 -->[docs-infra] Update the Material logo + add copy functionality (#42435) @danilo-leal
+- &#8203;<!-- 05 -->[website] Update DoiT description and link in Sponsors section (#42505) @erezstmn-doit
+- &#8203;<!-- 04 -->[website] Clean up the docs-infra job ad (#42504) @danilo-leal
+- &#8203;<!-- 03 -->[website] Fix FlashCode position (#42139) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Open Docs-infra engineer role (#42101) @danilo-leal
+- &#8203;<!-- 01 -->[website] Fix locationCountry in about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @ChronicusUA, @danilo-leal, @DiegoAndai, @erezstmn-doit, @oliviertassinari, @sai6855
+
 ## v6.0.0-alpha.9
 
 <!-- generated comparing v6.0.0-alpha.8..next -->
@@ -94,7 +141,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 ### Docs
 
 - &#8203;<!-- 08 -->[docs] Remove Base UI from the README (#42307) @danilo-leal
-- &#8203;<!-- 07 -->[docs][material-ui] Fix typo in style interoperability with Tailwind CSS docs (#42279) @ZeeshanTamboli
+- &#8203;<!-- 07 -->[docs][material-ui] Fix typo in style interoperability with Tailwind CSS docs (#42279) @ZeeshanTamboli
 - &#8203;<!-- 06 -->[docs][material-ui] Add supported browsers section to migration guide (#42194) @DiegoAndai
 - &#8203;<!-- 05 -->[docs][material-ui][Pagination] Clarify pagination `page` prop API (#42220) @Mandar-Pandya
 
@@ -8806,7 +8853,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 
 - &#8203;<!-- 27 -->[core] Rename mui/core to mui/base (#29585) @michaldudak
 
-  Based on the results of the [poll](https://twitter.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
+  Based on the results of the [poll](https://x.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
 
   The new name better reflects the purpose of the package: it contains unstyled components, hooks, and utilities that serve as a **base** to build on.
 
@@ -13223,7 +13270,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
   ```
 
 - [Autocomplete] Remove `debug` in favor of `open` and dev tools (#23377) @eps1lon
-  There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://twitter.com/sulco/status/1305841873945272321), or React devtools props.
+  There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://x.com/sulco/status/1305841873945272321), or React devtools props.
 
 #### Changes
 

CHANGELOG.old.md

@@ -2209,7 +2209,7 @@ Here are some highlights ✨:
 - 🔍 Introduce a new Autocomplete component in the lab to support the autocomplete, combobox and multi-select use cases (#17037) @dreamsinspace.
 
   This [new component](https://mui.com/components/autocomplete/) will replace the [third-party integration examples](https://mui.com/components/integrated-autocomplete/) once it graduates from the lab to the core.
-  It was one of the [most requested features](https://twitter.com/MaterialUI/status/1148901411180163073) (by number of 👍 on the corresponding issue).
+  It was one of the [most requested features](https://x.com/MaterialUI/status/1148901411180163073) (by number of 👍 on the corresponding issue).
 
 - 📚 Show the JSX by default for small examples (#17831) @mbrookes.
 - ♿️ Improve Gatsby's Modal support (#17972) @sreetej1998.

README.md

@@ -1,27 +1,25 @@
 <!-- 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="MUI Core logo"></a>
+  <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>
 </p>
 
-<h1 align="center">MUI Core</h1>
+<h1 align="center">Material UI</h1>
 
-**MUI Core** contains foundational React UI component libraries for shipping new features faster:
+**Material UI** contains foundational React UI component libraries for shipping new features faster:
 
 - [Material UI](https://mui.com/material-ui/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
 
 - [Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy.
 
-- [MUI System](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs.
-
 <div align="center">
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
 [![npm latest package](https://img.shields.io/npm/v/@mui/material/latest.svg)](https://www.npmjs.com/package/@mui/material)
 [![npm next package](https://img.shields.io/npm/v/@mui/material/next.svg)](https://www.npmjs.com/package/@mui/material)
 [![npm downloads](https://img.shields.io/npm/dm/@mui/material.svg)](https://www.npmjs.com/package/@mui/material)
-[![CircleCI](https://circleci.com/gh/mui/material-ui/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/mui/material-ui?branch=master)
-[![Coverage Status](https://img.shields.io/codecov/c/github/mui/material-ui/master.svg)](https://codecov.io/gh/mui/material-ui/branch/master)
-[![Follow on X](https://img.shields.io/twitter/follow/MUI_hq.svg?label=follow+MUI)](https://twitter.com/MUI_hq)
+[![GitHub branch status](https://img.shields.io/github/checks-status/mui/material-ui/HEAD)](https://github.com/mui/material-ui/commits/HEAD/)
+[![Coverage Status](https://img.shields.io/codecov/c/github/mui/material-ui.svg)](https://app.codecov.io/gh/mui/material-ui/)
+[![Follow on X](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material+UI)](https://x.com/MaterialUI)
 [![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui/material-ui/issues/27062)
 [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui/material-ui.svg)](https://isitmaintained.com/project/mui/material-ui 'Average time to resolve an issue')
 [![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui-org)](https://opencollective.com/mui-org)
@@ -54,17 +52,13 @@ Visit [https://mui.com/joy-ui/getting-started/](https://mui.com/joy-ui/getting-s
 **Note**: Joy UI is still in beta.
 We are adding new components regularly and you're welcome to contribute!
 
-### MUI System
-
-Visit [https://mui.com/system/getting-started/](https://mui.com/system/getting-started/) to view the full documentation.
-
 ## Sponsors
 
 ### Diamond 💎
 
 <p>
   <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://mui.com/static/sponsors/octopus-square.svg" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
-  <a href="https://www.doit.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://mui.com/static/sponsors/doit-square.svg" alt="doit" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
+  <a href="https://www.doit.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://mui.com/static/sponsors/doit-square.svg" alt="doit" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
 <a href="https://www.marblism.com/?utm_source=mui" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://mui.com/static/sponsors/marblism-square.svg" alt="marblism" title="AI web app generation" loading="lazy" /></a>
 </p>
 

apps/local-ui-lib/package.json

@@ -3,6 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@pigment-css/react": "^0.0.9"
+    "@pigment-css/react": "^0.0.12"
   }
 }

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

@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.10",
+    "@pigment-css/react": "^0.0.12",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -24,7 +24,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.10",
+    "@pigment-css/nextjs-plugin": "^0.0.12",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",

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

@@ -9,7 +9,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.9",
+    "@pigment-css/react": "^0.0.12",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -25,16 +25,16 @@
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
-    "@pigment-css/vite-plugin": "^0.0.9",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@pigment-css/vite-plugin": "^0.0.12",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
     "postcss": "^8.4.38",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.2.11",
-    "vite-plugin-pages": "^0.32.1"
+    "vite": "5.2.13",
+    "vite-plugin-pages": "^0.32.2"
   },
   "nx": {
     "targets": {

docs/data/about/teamMembers.json

@@ -320,7 +320,7 @@
     "name": "Nikita Ossei",
     "title": "Customer Support",
     "location": "London, United Kingdom",
-    "locationCountry": "uk",
+    "locationCountry": "gb",
     "about": "Astrology ♊️, learning 📚 and designing stuff 🎨",
     "github": "nikitaa24"
   }

docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js

@@ -278,7 +278,7 @@ function Styles() {
         width: 100%;
         border-radius: 12px;
         overflow: auto;
-        outline: 0px;
+        outline: 0;
         max-height: 300px;
         z-index: 1;
         position: absolute;

docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx

@@ -252,7 +252,7 @@ function Styles() {
         width: 100%;
         border-radius: 12px;
         overflow: auto;
-        outline: 0px;
+        outline: 0;
         max-height: 300px;
         z-index: 1;
         position: absolute;

docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js

@@ -205,7 +205,7 @@ const StyledListbox = styled('ul')(
   min-width: 320px;
   border-radius: 12px;
   overflow: auto;
-  outline: 0px;
+  outline: 0;
   max-height: 300px;
   z-index: 1;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};

docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx

@@ -188,7 +188,7 @@ const StyledListbox = styled('ul')(
   min-width: 320px;
   border-radius: 12px;
   overflow: auto;
-  outline: 0px;
+  outline: 0;
   max-height: 300px;
   z-index: 1;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};

docs/data/base/components/autocomplete/ControlledStates.js

@@ -136,7 +136,7 @@ const Listbox = styled('ul')(
   max-width: 320px;
   border-radius: 12px;
   overflow: auto;
-  outline: 0px;
+  outline: 0;
   max-height: 300px;
   z-index: 1;
   position: absolute;

docs/data/base/components/autocomplete/ControlledStates.tsx

@@ -136,7 +136,7 @@ const Listbox = styled('ul')(
   max-width: 320px;
   border-radius: 12px;
   overflow: auto;
-  outline: 0px;
+  outline: 0;
   max-height: 300px;
   z-index: 1;
   position: absolute;

docs/data/base/components/autocomplete/UseAutocomplete.js

@@ -127,7 +127,7 @@ const Listbox = styled('ul')(
   width: 320px;
   border-radius: 12px;
   overflow: auto;
-  outline: 0px;
+  outline: 0;
   max-height: 300px;
   z-index: 1;
   position: absolute;

docs/data/base/components/autocomplete/UseAutocomplete.tsx

@@ -129,7 +129,7 @@ const Listbox = styled('ul')(
   width: 320px;
   border-radius: 12px;
   overflow: auto;
-  outline: 0px;
+  outline: 0;
   max-height: 300px;
   z-index: 1;
   position: absolute;

docs/data/base/components/autocomplete/UseAutocompletePopper.js

@@ -152,7 +152,7 @@ const Listbox = styled('ul')(
   min-width: 320px;
   border-radius: 12px;
   overflow: auto;
-  outline: 0px;
+  outline: 0;
   max-height: 300px;
   z-index: 1;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};

docs/data/base/components/autocomplete/UseAutocompletePopper.tsx

@@ -160,7 +160,7 @@ const Listbox = styled('ul')(
   min-width: 320px;
   border-radius: 12px;
   overflow: auto;
-  outline: 0px;
+  outline: 0;
   max-height: 300px;
   z-index: 1;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};

docs/data/base/components/badge/BadgeVisibility.js

@@ -174,17 +174,20 @@ export default function BadgeVisibility() {
   };
 
   return (
-    <Stack direction="column" justifyContent="center" spacing={1} useFlexGap>
+    <Stack
+      direction="column"
+      spacing={1}
+      useFlexGap
+      sx={{ justifyContent: 'center' }}
+    >
       <Badge badgeContent={count} invisible={invisible}>
         <MailIcon />
       </Badge>
       <Divider sx={{ my: 2 }} />
       <Stack
         direction="row"
-        justifyContent="center"
-        alignItems="center"
-        gap={1}
         useFlexGap
+        sx={{ justifyContent: 'center', alignItems: 'center', gap: 1 }}
       >
         <StyledButton
           aria-label="decrease"