Merge branch 'master' into renovate/theme-ui-0.x

Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>

.circleci/config.yml

@@ -44,7 +44,7 @@ defaults: &defaults
     AWS_REGION_ARTIFACTS: eu-central-1
   working_directory: /tmp/material-ui
   docker:
-    - image: cimg/node:14.20
+    - image: cimg/node:14.21
 
 # CircleCI has disabled the cache across forks for security reasons.
 # Following their official statement, it was a quick solution, they
@@ -72,7 +72,7 @@ commands:
       - run:
           name: Resolve react version
           command: |
-            node scripts/use-react-version
+            node scripts/useReactVersion.mjs
             # log a patch for maintainers who want to check out this change
             git --no-pager diff HEAD
       - restore_cache:
@@ -216,7 +216,7 @@ jobs:
       - install_js
       - run:
           name: '`yarn prettier` changes committed?'
-          command: yarn prettier check-changed
+          command: yarn prettier --check
       - run:
           name: Generate PropTypes
           command: yarn proptypes
@@ -286,7 +286,7 @@ jobs:
 
       - run:
           name: Any defect declaration files?
-          command: node scripts/testBuiltTypes.js
+          command: node scripts/testBuiltTypes.mjs
       - save_cache:
           name: Save generated declaration files
           key: typescript-declaration-files-{{ .Branch }}-{{ .Revision }}
@@ -305,7 +305,7 @@ jobs:
           environment:
             TYPESCRIPT_DIST_TAG: next
           command: |
-            node scripts/use-typescript-dist-tag
+            node scripts/useTypescriptDistTag.mjs
             # log a patch for maintainers who want to check out this change
             git --no-pager diff HEAD
       - install_js
@@ -342,7 +342,7 @@ jobs:
             # Fixing these takes some effort that isn't viable to merge in a single PR.
             # We'll simply monitor them for now.
             set +e
-            node scripts/testBuiltTypes.js
+            node scripts/testBuiltTypes.mjs
             exit 0
   test_browser:
     <<: *defaults

.eslintignore

@@ -28,3 +28,10 @@
 .next
 build
 node_modules
+.nyc_output
+
+# These come from crowdin.
+# If we would commit changes crowdin would immediately try to revert.
+# If we want to format these files we'd need to do it in crowdin
+docs/**/*-pt.md
+docs/**/*-zh.md

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
   extends: [
     'plugin:eslint-plugin-import/recommended',
     'plugin:eslint-plugin-import/typescript',
+    'eslint-config-airbnb',
     'eslint-config-airbnb-typescript',
     'eslint-config-prettier',
   ],
@@ -160,8 +161,7 @@ module.exports = {
     'react/state-in-constructor': 'off',
     // stylistic opinion. For conditional assignment we want it outside, otherwise as static
     'react/static-property-placement': 'off',
-    // Currently not in recommended ruleset but catches real bugs.
-    'react/no-unstable-nested-components': 'error',
+
     'no-restricted-syntax': [
       // See https://github.com/eslint/eslint/issues/9192 for why it's needed
       ...baseStyleRules['no-restricted-syntax'],
@@ -171,12 +171,22 @@ module.exports = {
         selector: 'ImportDeclaration[source.value="react"] ImportDefaultSpecifier',
       },
     ],
+
+    // We re-export default in many places, remove when https://github.com/airbnb/javascript/issues/2500 gets resolved
+    'no-restricted-exports': 'off',
+    // Some of these occurences are deliberate and fixing them will break things in repos that use @monorepo dependency
+    'import/no-relative-packages': 'off',
+    // Avoid accidental auto-"fixes" https://github.com/jsx-eslint/eslint-plugin-react/issues/3458
+    'react/no-invalid-html-attribute': 'off',
+
+    'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
   },
   overrides: [
     {
       files: [
         // matching the pattern of the test runner
         '*.test.js',
+        '*.test.mjs',
         '*.test.ts',
         '*.test.tsx',
       ],
@@ -354,6 +364,7 @@ module.exports = {
         'react/require-default-props': 'off',
         'react/state-in-constructor': 'off',
         'react/static-property-placement': 'off',
+        'react/function-component-definition': 'off',
       },
     },
     {
@@ -407,5 +418,11 @@ module.exports = {
         'import/extensions': ['error', 'ignorePackages'],
       },
     },
+    {
+      files: ['scripts/**/*.mjs'],
+      rules: {
+        'import/extensions': ['error', 'ignorePackages'],
+      },
+    },
   ],
 };

.github/workflows/check-if-pr-has-label.yml

@@ -13,7 +13,7 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: mnajdova/github-action-required-labels@ca0df9249827e43aa4b4a0d25d9fe3e9b19b0705 # tag=v2.1
+      - uses: mnajdova/github-action-required-labels@ca0df9249827e43aa4b4a0d25d9fe3e9b19b0705 # v2.1.0
         with:
           mode: minimum
           count: 1

.github/workflows/ci.yml

@@ -21,12 +21,12 @@ jobs:
         os: [macos-latest, windows-latest, ubuntu-latest]
     steps:
       - run: echo "${{ github.actor }}"
-      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3
+      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
         with:
           # fetch all tags which are required for `yarn release:changelog`
           fetch-depth: 0
       - name: Use Node.js 14.x
-        uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3
+        uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
         with:
           node-version: 14
           cache: 'yarn' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies

.github/workflows/codeql.yml

@@ -16,10 +16,10 @@ jobs:
       security-events: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2
+        uses: github/codeql-action/init@d00e8c09a38ef8c1ca1091fc55ef490776d2de73 # v2.1.13
         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@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2
+        uses: github/codeql-action/analyze@d00e8c09a38ef8c1ca1091fc55ef490776d2de73 # v2.1.13

.github/workflows/maintenance.yml

@@ -1,7 +1,5 @@
 name: Maintenance
 
-permissions: {}
-
 on:
   # So that PRs touching the same files as the push are updated
   push:
@@ -17,6 +15,8 @@ on:
       - next
     types: [synchronize]
 
+permissions: {}
+
 jobs:
   main:
     # l10nbot creates a lot of commits at once which starves CI.
@@ -29,7 +29,7 @@ jobs:
     steps:
       - run: echo "${{ github.actor }}"
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # tag=v2.1.0
+        uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # v2.1.0
         with:
           dirtyLabel: 'PR: out-of-date'
           removeOnDirtyLabel: 'PR: ready to ship'

.github/workflows/mark-duplicate.yml

@@ -14,7 +14,7 @@ jobs:
       issues: write
     steps:
       - name: mark-duplicate
-        uses: actions-cool/issues-helper@02811b26b65e9c0da5f1d8a0095b53478d6591a2 # tag=v3
+        uses: actions-cool/issues-helper@275328970dbc3bfc3bc43f5fe741bf3638300c0a # v3.3.3
         with:
           actions: 'mark-duplicate'
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/no-response.yml

@@ -18,7 +18,7 @@ jobs:
       contents: read
       issues: write
     steps:
-      - uses: lee-dohm/no-response@9bb0a4b5e6a45046f00353d5de7d90fb8bd773bb # tag=v0.5.0
+      - uses: lee-dohm/no-response@9bb0a4b5e6a45046f00353d5de7d90fb8bd773bb # v0.5.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # Number of days of inactivity before an Issue is closed for lack of response

.github/workflows/scorecards.yml

@@ -27,7 +27,7 @@ jobs:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@99c53751e09b9529366343771cc321ec74e9bd3d # renovate: tag=v2.0.6
+        uses: ossf/scorecard-action@99c53751e09b9529366343771cc321ec74e9bd3d # v2.0.6
         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@5f532563584d71fdef14ee64d17bafb34f751ce5 # renovate: tag=v1.0.26
+        uses: github/codeql-action/upload-sarif@73113785b9e3aa4b2c9c2e1c91463606e882665e # v1.1.33
         with:
           sarif_file: results.sarif

.github/workflows/support-stackoverflow.yml

@@ -14,7 +14,7 @@ jobs:
       contents: read
       issues: write
     steps:
-      - uses: dessant/support-requests@876a4de3922dd57434a451e58ad679f986c5da97 # tag=v2
+      - uses: dessant/support-requests@876a4de3922dd57434a451e58ad679f986c5da97 # v2.1.2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           # Label used to mark issues as support requests

.mocharc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extension: ['js', 'ts', 'tsx'],
+  extension: ['js', 'mjs', 'ts', 'tsx'],
   ignore: [
     '**/build/**',
     '**/node_modules/**',

CHANGELOG.md

@@ -1,5 +1,73 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.10.14
+
+<!-- generated comparing v5.10.13..master -->
+
+_Nov 14, 2022_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 @siriwatknp added the Autocomplete component to the Joy UI (#34315)
+- ♿ @sfavello improved the accessibility of the Material UI's Autocomplete by adding support for the Delete key (#33822)
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
+
+### `@mui/material@5.10.14`
+
+- [Material UI] Add `palette.background.defaultChannel` token (#35061) @siriwatknp
+- [Autocomplete] Remove tags with the Delete key (#33822) @sfavello
+- [IconButton] custom color causes type error (#34521) @kushagra010
+
+### `@mui/system@5.10.14`
+
+- [Unstable_Gridv2] sorted responsize keys based on breakpoint value (#34987) @sai6855
+
+### `@mui/joy@5.0.0-alpha.54`
+
+- [Joy] Export `FormControl`, `LinearProgress` and `ListSubheader` components from `@mui/joy` (#35003) @Studio384
+- [Joy] Miscellaneous fixes (#35044) @siriwatknp
+- [Joy] Add `Autocomplete` component (#34315) @siriwatknp
+- [Joy] Saturate a bit the gray palette (#35148) @danilo-leal
+- [Autocomplete][joy] Fix types (#35153) @siriwatknp
+
+### Docs
+
+- [blog] Fix font size of code blocks on iOS @oliviertassinari
+- [docs] Accessibility - increase default contrastThreshold for WCAG AA compliance (#34901) @kennethbigler
+- [docs] Correct the keepMounted section on the Drawer page (#35076) @michaldudak
+- [docs] Fix code editor styles mismatches (#35108) @oliviertassinari
+- [docs] Allows to access the next MUI-X (#34798) @alexfauquette
+- [docs] Fix bugs with live edit demos (#35106) @oliviertassinari
+- [docs] Fix `MarkdownElement` regression from adding CSS variables (#35096) @siriwatknp
+- [docs] Add a new gold sponsor (#35089) @hbjORbj
+- [docs] Fix scroll issue on expanded live demos (#35064) @bharatkashyap
+- [docs] Improve alignment of the sponsors @oliviertassinari
+- [docs] Improve code font family v2 (#35053) @oliviertassinari
+- [docs] Upgrade to Next.js 13 (#35001) @mnajdova
+- [docs] Fix typo in changelog @oliviertassinari
+- [docs] Update Joy UI templates to use latest components (#35058) @siriwatknp
+- [website] Fix design kits showcase throwing an error (#35093) @cherniavskii
+- [website] Fix margin bug on CTA @oliviertassinari
+- [website] Link respective repositories in product pages (#35046) @sidtohan
+- [website] Migrate blog pages to use CSS theme variables (#34976) @siriwatknp
+- [website] Update DoiT International logo and links with new brand (#35030) @ofir5300
+- [website] Improve visual design app bar (#35111) @oliviertassinari
+
+### Core
+
+- [core] Convert scripts to ES modules (#35036) @michaldudak
+- [core] Show the whole version to make blame easier @oliviertassinari
+- [core] Polish GitHub Action version @oliviertassinari
+- [core] Ignore icons to speed up CodeQL @oliviertassinari
+- [core] Feedback on branch protection @oliviertassinari
+- [core] Revert CI (#35098) @siriwatknp
+- [core] Fix job name to match the CI (#35097) @siriwatknp
+- [core] ESLint fixes for tests (#34924) @Janpot
+- [core] Ignore unrelated folders from github actions (#35028) @siriwatknp
+- [core] Use pretty-quick instead of custom script (#34062) @Janpot
+
+All contributors of this release in alphabetical order: @alexfauquette, @bharatkashyap, @cherniavskii, @danilo-leal, @hbjORbj, @Janpot, @kennethbigler, @kushagra010, @michaldudak, @mnajdova, @ofir5300, @oliviertassinari, @sai6855, @sfavello, @sidtohan, @siriwatknp, @Studio384
+
 ## v5.10.13
 
 <!-- generated comparing v5.10.12..master -->

benchmark/package.json

@@ -11,13 +11,13 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@chakra-ui/system": "^2.3.1",
+    "@chakra-ui/system": "^2.3.3",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mdx-js/react": "^2.1.5",
-    "@mui/material": "^5.10.13",
-    "@mui/styles": "^5.10.10",
-    "@mui/system": "^5.10.13",
+    "@mui/material": "^5.10.14",
+    "@mui/styles": "^5.10.14",
+    "@mui/system": "^5.10.14",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.27.1",
@@ -30,7 +30,7 @@
     "serve-handler": "^6.1.5",
     "styled-components": "^5.3.6",
     "theme-ui": "^0.15.4",
-    "webpack": "^5.74.0",
+    "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0"
   }
 }

docs/data/joy/components/alert/AlertColors.js

@@ -1,11 +1,12 @@
+import * as React from 'react';
 import Alert from '@mui/joy/Alert';
+import Stack from '@mui/joy/Stack';
 import Box from '@mui/joy/Box';
 import Radio from '@mui/joy/Radio';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Sheet from '@mui/joy/Sheet';
 
 import Typography from '@mui/joy/Typography';
-import * as React from 'react';
 
 export default function AlertColors() {
   const [variant, setVariant] = React.useState('solid');
@@ -14,16 +15,11 @@ export default function AlertColors() {
       sx={{
         display: 'flex',
         alignItems: 'center',
-        gap: 3,
+        justifyContent: 'center',
+        width: '100%',
       }}
     >
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
-          gap: 1,
-        }}
-      >
+      <Stack spacing={1} sx={{ width: '100%', maxWidth: 400 }}>
         <Alert variant={variant} color="primary">
           Primary
         </Alert>
@@ -42,15 +38,8 @@ export default function AlertColors() {
         <Alert variant={variant} color="warning">
           Warning
         </Alert>
-      </Box>
-      <Sheet
-        sx={{
-          background: 'transparent',
-          pl: 4,
-          borderLeft: '1px solid',
-          borderColor: 'divider',
-        }}
-      >
+      </Stack>
+      <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
         <Typography
           level="body2"
           fontWeight="xl"