Merge branch 'master' into xulingzhihou/fixSelectA11y

mui · Sep 22, 2023 · b233d35 · b233d35
2 parents 88d5c68 + cab11f2
commit b233d35
Show file tree

Hide file tree

Showing 1,532 changed files with 28,121 additions and 18,402 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  aws-cli: circleci/aws-cli@4.0
+  aws-cli: circleci/aws-cli@4.1
   aws-s3: circleci/[email protected]
 
 parameters:
@@ -690,8 +690,8 @@ jobs:
           steps:
             - aws-cli/setup:
                 aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS
-                region: AWS_REGION_ARTIFACTS
                 aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                region: ${AWS_REGION_ARTIFACTS}
             # Upload distributables to S3
             - aws-s3/copy:
                 from: mui-material.tgz
@@ -719,8 +719,8 @@ jobs:
           steps:
             - aws-cli/setup:
                 aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS
-                region: AWS_REGION_ARTIFACTS
                 aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                region: ${AWS_REGION_ARTIFACTS}
             # persist size snapshot on S3
             - aws-s3/copy:
                 arguments: --content-type application/json

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -67,13 +67,6 @@ module.exports = {
       {
         patterns: [
           '@mui/*/*/*',
-          // Begin block: Packages with files instead of packages in the top level
-          // Importing from the top level pulls in CommonJS instead of ES modules
-          // Allowing /icons as to reduce cold-start of dev builds significantly.
-          // There's nothing to tree-shake when importing from /icons this way:
-          // '@mui/icons-material/*/',
-          '@mui/utils/*',
-          // End block
           // Macros are fine since their import path is transpiled away
           '!@mui/utils/macros',
           '@mui/utils/macros/*',
@@ -218,15 +211,6 @@ module.exports = {
       rules: {
         // does not work with wildcard imports. Mistakes will throw at runtime anyway
         'import/named': 'off',
-        'no-restricted-imports': [
-          'error',
-          {
-            // Use named import from `test/utils` instead.
-            // The other files are private.
-            patterns: ['test/utils/*'],
-          },
-        ],
-
         'material-ui/disallow-active-element-as-key-event-target': 'error',
 
         // upgraded level from recommended
@@ -333,7 +317,7 @@ module.exports = {
           'error',
           {
             patterns: [
-              // Allow deeper imports for TypeScript types. TODO?
+              // Allow deeper imports for TypeScript types. TODO remove
               '@mui/*/*/*/*',
               // Macros are fine since they're transpiled into something else
               '!@mui/utils/macros/*.macro',

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@a09933a12a80f87b87005513f0abb1494c27a716 # v2.21.4
+        uses: github/codeql-action/init@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.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@a09933a12a80f87b87005513f0abb1494c27a716 # v2.21.4
+        uses: github/codeql-action/analyze@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
diff --git a/.github/workflows/scorecards.yml b/.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@a09933a12a80f87b87005513f0abb1494c27a716 # v2.21.4
+        uses: github/codeql-action/upload-sarif@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
         with:
           sarif_file: results.sarif
diff --git a/.mocharc.js b/.mocharc.js
@@ -10,7 +10,7 @@ module.exports = {
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
-  require: [require.resolve('./test/utils/setupBabel'), require.resolve('./test/utils/setupJSDOM')],
+  require: ['@mui-internal/test-utils/setupBabel', '@mui-internal/test-utils/setupJSDOM'],
   'watch-ignore': [
     // default
     '.git',

diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
@@ -279,7 +279,7 @@ A big thanks to the 12 contributors who made this release possible.
 
 - [styles] Add support for TypeScript 4.1 (#23692) @ldrick
 - [ClickAwayListener] Fix mounting behavior in Portals in React 17 (#23367) @eps1lon
-- [TrapFocus] Prevent possible crash in React 17 (#22263) @eps1lon
+- [FocusTrap] Prevent possible crash in React 17 (#22263) @eps1lon
 - [Tabs] Fix RTL scrollbar with Chrome 85 (#22830) @ankit
 
 ### `@material-ui/[email protected]`
@@ -542,7 +542,7 @@ A big thanks to the 21 contributors who made this release possible.
 
 ### Core
 
-- [TrapFocus] Make an unstable version public (#21201) @dmtrKovalenko
+- [FocusTrap] Make an unstable version public (#21201) @dmtrKovalenko
 - [test] Track size of `@material-ui/utils` (#21240) @eps1lon
 - [core] Batch small changes (#21156) @oliviertassinari
 - [core] Batch small changes (#21249) @oliviertassinari
@@ -729,7 +729,7 @@ Here are some highlights ✨:
 - [Tabs] Improve customizability of the scroll buttons (#20783) @netochaves
 - [TextField] Fix caret color in autofill dark theme (#20857) @CarsonF
 - [Tooltip] Fix disableTouchListener behavior (#20807) @weslenng
-- [unstable_TrapFocus] Guard against dropped memo cache (#20848) @eps1lon
+- [FocusTrap] Guard against dropped memo cache (#20848) @eps1lon
 
 ### `@material-ui/[email protected]`
 
@@ -1293,7 +1293,7 @@ Here are some highlights ✨:
 
 - [Autocomplete] Fix list of countries (#19862) @FottyM
 - [TreeView] Fix conditional nodes support (#19849) @joshwooding
-- [Treeview] Add node selection support (#18357) @joshwooding
+- [TreeView] Add node selection support (#18357) @joshwooding
 
 ### Docs
 
@@ -3443,7 +3443,7 @@ Here are some highlights ✨:
 - [Portal] Synchronously call onRendered (#15943) @Arlevoy
 - [Radio] Fix dot misalignment in IE11 (#15952) @rupert-ong
 - [theme] Return default value for spacing when no args provided (#15891) @mbrookes
-- [TrapFocus] Fix error restoring focus when activeElement is null (#15967) @ryancogswell
+- [FocusTrap] Fix error restoring focus when activeElement is null (#15967) @ryancogswell
 - [core] Export useMediaQuery & useScrollTrigger in index.js (#15958) @adeelibr
 - [core] Migrate extend ButtonBaseProps typings (#15869) @joshwooding
 
@@ -3963,7 +3963,7 @@ You will learn more about v4 in the final release blog post and our plans for th
 - [core] Use terser for minification in umd bundle (#15491) @eps1lon
 - [test] Conform components forward ref to root component (#15425) @eps1lon
 - [test] Fix a flaky test (#15445) @oliviertassinari
-- [test] Keep track of the bundle size of TrapFocus (#15453) @oliviertassinari
+- [test] Keep track of the bundle size of FocusTrap (#15453) @oliviertassinari
 
 ## 4.0.0-alpha.8
 
@@ -5571,7 +5571,7 @@ Here are some highlights ✨:
 - [Tooltip] Suppress warning if button is disabled and title is empty (#13785) @rfbotto
 - [Dialog] Warn if className in PaperProps is set (#13797) @eps1lon
 - [TextField] Fix textfield label position when empty (#13791) @Studio384
-- [Popper] Save 7 KB gzipped (for people only using it) (#13804) @oliviertassinari
+- [Popper] Save 7 kB gzipped (for people only using it) (#13804) @oliviertassinari
 - [Modal] Handle modal mount interruption (#13778) @amensouissi
 - [Select] Make value prop required in TypeScript (#13810) @t49tran
 - [Popover] Fix onEntering event propagation (#13821) @ekoeditaa
@@ -5788,7 +5788,7 @@ This new package is a significant step forward. Some of the key features:
 - Supports 4 different APIs: hooks, styled-components, higher-order components and render props.
 - Allow accessing the component's props from within the style object.
 - Replace the usage of the old React APIs with the new ones.
-- 15.0 KB gzipped.
+- 15.0 kB gzipped.
 
 Here is an example: https://codesandbox.io/s/vjzn5z4k77.
 
@@ -9898,7 +9898,7 @@ Here are some highlights ✨:
 
 - New InputAdornment component (#8504).
 - New [Frequently asked questions](https://github.com/mui/material-ui/blob/4df547d56448cedf70977d6e2463b38eaf64d1c7/docs/src/pages/getting-started/frequently-asked-questions.md) documentation section
-- We have saved 1 KB gzip by removing our internal react-transition-group fork (#8785).
+- We have saved 1 kB gzip by removing our internal react-transition-group fork (#8785).
 - We have made one step further in order to upgrade all our development dependencies to react@16 (#8804).
 
 ### Breaking change

diff --git a/README.md b/README.md
@@ -1,24 +1,22 @@
 <!-- markdownlint-disable-next-line -->
 <p align="center">
-  <a href="https://mui.com/" rel="noopener" target="_blank"><img width="150" src="/docs/public/static/logo.svg" alt="MUI 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="MUI Core logo"></a>
 </p>
 
 <h1 align="center">MUI Core</h1>
 
-**MUI Core** contains foundational React UI component libraries for shipping new features faster.
+**MUI Core** contains foundational React UI component libraries for shipping new features faster:
 
-- [_Material UI_](https://mui.com/material-ui/getting-started/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
+- [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 beautifully designed library of React UI components.
+- [Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy.
 
-- [_Base UI_](https://mui.com/base-ui/getting-started/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
+- [Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features.
 
-- [_MUI System_](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs.
+- [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">
 
-**[Stable channel v5](https://mui.com/)**
-
 [![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)
@@ -33,23 +31,11 @@
 
 </div>
 
-## Installation
+## Documentation
 
 ### Material UI
 
-Material UI is available as an [npm package](https://www.npmjs.com/package/@mui/material).
-
-**npm:**
-
-```bash
-npm install @mui/material @emotion/react @emotion/styled
-```
-
-**yarn:**
-
-```bash
-yarn add @mui/material @emotion/react @emotion/styled
-```
+Visit [https://mui.com/material-ui/](https://mui.com/material-ui/) to view the full documentation.
 
 <details>
   <summary>Older versions</summary>
@@ -63,56 +49,23 @@ yarn add @mui/material @emotion/react @emotion/styled
 **Note:** `@next` only points to pre-releases.
 Use `@latest` for the latest stable release.
 
-### Base UI
-
-Base UI is available as an [npm package](https://www.npmjs.com/package/@mui/base).
+### Joy UI
 
-**npm:**
+Visit [https://mui.com/joy-ui/getting-started/](https://mui.com/joy-ui/getting-started/) to view the full documentation.
 
-```bash
-npm install @mui/base
-```
+**Note**: Joy UI is still in beta.
+We are adding new components regularly and you're welcome to contribute!
 
-**yarn:**
+### Base UI
 
-```bash
-yarn add @mui/base
-```
+Visit [https://mui.com/base-ui/](https://mui.com/base-ui/) to view the full documentation.
 
 **Note**: Base UI is still in beta.
 We are adding new components regularly and you're welcome to contribute!
 
 ### MUI System
 
-MUI System is available as an [npm package](https://www.npmjs.com/package/@mui/system).
-
-**npm:**
-
-```bash
-npm install @mui/system @emotion/react @emotion/styled
-```
-
-**yarn:**
-
-```bash
-yarn add @mui/system @emotion/react @emotion/styled
-```
-
-Or if you want to use `styled-components` as a styling engine:
-
-**npm:**
-
-```bash
-npm install @mui/material @mui/styled-engine-sc styled-components
-```
-
-**yarn:**
-
-```bash
-yarn add @mui/material @mui/styled-engine-sc styled-components
-```
-
-Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+Visit [https://mui.com/system/](https://mui.com/system/) to view the full documentation.
 
 ## Sponsors
 
@@ -146,42 +99,15 @@ Gold Sponsors are those who have pledged \$500/month or more to MUI.
 
 See the full list of [our backers](https://mui.com/material-ui/discover-more/backers/).
 
-## Getting started with Material UI
-
-Here is an example of a basic app using Material UI's `Button` component:
-
-```jsx
-import * as React from 'react';
-import Button from '@mui/material/Button';
-
-function App() {
-  return <Button variant="contained">Hello World</Button>;
-}
-```
-
-In the interactive demo below, try changing the code and see how it affects the output.
-(Hint: change `variant` to `"outlined"` and `color` to `"secondary"`.
-For more options, see the [`Button` component page](https://mui.com/material-ui/react-button/) in our docs.)
-
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/material-ui-u9sy1h)
-
 ## Questions
 
-For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui) instead of GitHub issues.
-Use the "mui" tag on Stack Overflow to make it easier for the community to find your question.
+For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/) instead of GitHub issues.
 
 ## Examples
 
-Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/).
-
-## Documentation
-
-- [Material UI](https://mui.com/material-ui/getting-started/)
-- [Joy UI](https://mui.com/joy-ui/getting-started/)
-- [Base UI](https://mui.com/base-ui/getting-started/)
-- [MUI System](https://mui.com/system/getting-started/)
+Our documentation features [a collection of example projects](https://github.com/mui/material-ui/tree/master/examples).
 
-## Premium themes
+## Premium templates
 
 You can find complete templates and themes in the [MUI Store](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store).
 
@@ -213,30 +139,42 @@ For details of supported versions and contact details for reporting security iss
 
 These great services sponsor MUI's core infrastructure:
 
+<div>
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/github-darkmode.svg">
-  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/github-lightmode.svg">
-  <img alt="GitHub logo" src="/docs/public/static/readme/github-lightmode.svg" width="80" height="43">
+  <source media="(prefers-color-scheme: dark)" srcset="https://mui.com/static/readme/github-darkmode.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://mui.com/static/readme/github-lightmode.svg">
+  <img alt="GitHub logo" src="https://mui.com/static/readme/github-lightmode.svg" width="80" height="43">
 </picture>
 
 [GitHub](https://github.com/) lets us host the Git repository and coordinate contributions.
 
+</div>
+
+<div>
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/netlify-darkmode.svg">
-  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/netlify-lightmode.svg">
-  <img alt="Netlify logo" src="/docs/public/static/readme/netlify-lightmode.svg" width="100" height="27" style="margin-top: 1rem;">
+  <source media="(prefers-color-scheme: dark)" srcset="https://mui.com/static/readme/netlify-darkmode.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://mui.com/static/readme/netlify-lightmode.svg">
+  <img alt="Netlify logo" src="https://mui.com/static/readme/netlify-lightmode.svg" width="100" height="27">
 </picture>
 
 [Netlify](https://www.netlify.com/) lets us distribute the documentation.
 
+</div>
+
+<div>
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/browserstack-darkmode.svg">
-  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/browserstack-lightmode.svg">
-  <img alt="BrowserStack logo" src="/docs/public/static/readme/browserstack-lightmode.svg" width="140" height="25" style="margin-top: 1rem;">
+  <source media="(prefers-color-scheme: dark)" srcset="https://mui.com/static/readme/browserstack-darkmode.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://mui.com/static/readme/browserstack-lightmode.svg">
+  <img alt="BrowserStack logo" src="https://mui.com/static/readme/browserstack-lightmode.svg" width="140" height="25">
 </picture>
 
 [BrowserStack](https://www.browserstack.com/) lets us test in real browsers.
 
-<img loading="lazy" alt="CodeCov logo" src="https://avatars.githubusercontent.com/u/8226205?s=70" width="35" height="35" style="margin-top: 1rem;">
+</div>
+
+<div>
+<img loading="lazy" alt="CodeCov logo" src="https://avatars.githubusercontent.com/u/8226205?s=70" width="35" height="35">
 
 [CodeCov](https://about.codecov.io/) lets us monitor test coverage.
+
+</div>