.circleci/config.yml

@@ -240,6 +240,11 @@ jobs:
           command: |
             yarn extract-error-codes
             git diff --exit-code
+      - run:
+          name: '`yarn docs:link-check` changes committed?'
+          command: |
+            yarn docs:link-check
+            git diff --exit-code
   test_types:
     <<: *defaults
     resource_class: 'medium+'

.eslintignore

@@ -3,7 +3,7 @@
 /benchmark/**/dist
 /coverage
 /docs/export
-/docs/pages/playground.tsx
+/docs/pages/playground/
 /examples/create-react-app*/src/serviceWorker.js
 /examples/gatsby/public/
 /examples/preact/config

.eslintrc.js

@@ -159,6 +159,8 @@ 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',
   },
   overrides: [
     {

.github/workflows/codeql.yml

@@ -0,0 +1,41 @@
+name: 'CodeQL'
+
+on:
+  schedule:
+    - cron: '0 2 * * 1-5'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ['javascript', 'typescript']
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+
+          # 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@v2
+        with:
+          category: '/language:${{matrix.language}}'

.gitignore

@@ -14,7 +14,7 @@
 /coverage
 /docs/.env.local
 /docs/export
-/docs/pages/playground.tsx
+/docs/pages/playground/
 /examples/**/.cache
 /packages/mui-codemod/lib
 /packages/mui-envinfo/*.tgz

.markdownlint-cli2.cjs

@@ -0,0 +1,28 @@
+const straightQuotes = require('./packages/markdownlint-rule-mui/straight-quotes');
+
+module.exports = {
+  config: {
+    default: true,
+    MD004: false, // MD004/ul-style. Buggy
+    MD013: false, // MD013/line-length. Already handled by Prettier.
+    MD014: false, // MD014/commands-show-output. It's OK.
+    MD024: { siblings_only: true }, // MD024/no-duplicate-heading/no-duplicate-header
+    MD025: {
+      // Heading level
+      level: 1,
+      // RegExp for matching title in front matter
+      front_matter_title: '',
+    },
+    MD033: false, // MD033/no-inline-html. We use it from time to time, it's fine.
+    MD034: false, // MD034/no-bare-urls. Not a concern for us, our Markdown interpreter supports it.
+    MD028: false, // MD028/no-blanks-blockquote prevent double blockquote
+    MD029: false, // MD029/ol-prefix. Buggy
+    MD031: false, // MD031/blanks-around-fences Some code blocks inside li
+    MD036: false, // MD036/no-emphasis-as-heading/no-emphasis-as-header. It's OK.
+    MD051: false, // MD051/link-fragments. Many false positives in the changelog.
+    MD052: false, // MD052/reference-links-images. Many false positives in the changelog.
+    straightQuotes: true,
+  },
+  customRules: [straightQuotes],
+  ignores: ['**/node_modules/**', '**/*-zh.md', '**/*-pt.md', '.github/PULL_REQUEST_TEMPLATE.md'],
+};

CHANGELOG.md

@@ -1,5 +1,77 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.10
+
+<!-- generated comparing v5.10.9..master -->
+
+_Oct 18, 2022_
+
+A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌 Thanks to the efforts of @bharatkashyap and @nihgwu, we now have editable demos across our docs (#34454)!
+- 🚀 The Tooltip component has been added to Joy UI by @hbjORbj (#34509).
+- ⚙️ We started converting the remaining JS components in MUI Base to TypeScript.
+  @mbayucot finished the first PR with the conversion of the NoSsr code (#34735).
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.10.10`
+
+- [Popover] Fix paper position flash on open (#34546) @TheUnlocked
+- [SwipeableDrawer] Make component `defaultProps` overridable (#34643) @hbjORbj
+
+### `@mui/system@5.10.10`
+
+- [system] Support CSS `grey` color in `sx` (#34548) @TheUnlocked
+
+### `@mui/styles@5.10.10`
+
+- [styles] Use memoized context in StylesProvider (#34637) @mohd-akram
+
+### `@mui/joy@5.0.0-alpha.50`
+
+- [Select][joy] Added hidden input element (#34657) @zee-bit
+- [Slider][joy] Add global variant to slider (#34733) @siriwatknp
+- [Tooltip][joy] Add component (#34509) @hbjORbj
+
+### `@mui/base@5.0.0-alpha.102`
+
+- [MultiSelect][base] Prevent the renderValue prop from being propagated to the DOM (#34698) @michaldudak
+- [NoSsr] Convert code to TypeScript (#34735) @mbayucot
+
+### Docs
+
+- [docs] Fix the Autocomplete Highlighting example (#34184) @hayawata3626
+- [docs] Fix typos in Base (Menu, Tabs) and Joy UI (Chip) (#34803) @rvrvrv
+- [docs] Use new editing API in homepage demos (#34220) @m4theushw
+- [docs] Live demos (#34454) @bharatkashyap
+- [docs] Fix typos in Joy UI Switch (#34728) @ndresx
+- [docs] Avoid scrollbar in the code demos (#34741) @oliviertassinari
+- [docs] Revise the Joy UI "Automatic adjustment" page (#34614) @samuelsycamore
+- [docs] Revise and rename the Joy UI "Perfect dark mode" page (#34613) @samuelsycamore
+- [docs] Revise the Joy UI "Global variants" page (#34595) @samuelsycamore
+- [docs] Basic link verification at PR level (#34588) @alexfauquette
+- [docs] Add a missing comma in the customization example (#34617) @AbayKinayat
+- [website] Clarify Pro/Premium support (#34607) @oliviertassinari
+- [website] Fix home page dark mode flicker (#33545)
+- [website] Update the state of the date pickers on the landing page (#34750) @joserodolfofreitas
+
+### Core
+
+- [core] Clean conditionals (#34772) @pedroprado010
+- [core] Temporary remove the authorization (#34796) @siriwatknp
+- [core] Avoid slower CI run statues @oliviertassinari
+- [core] Improve the playground DX (#34739) @oliviertassinari
+- [core] Link Netlify in the danger comment (#34688) @oliviertassinari
+- [core] Fix CI after out of sync merge @oliviertassinari
+- [core] Enforce straight quote (#34686) @oliviertassinari
+- [core] Add code scanning via CodeQL (#34707) @DanailH
+- [core] Fix some upcoming eslint issues (#34727) @oliviertassinari
+- [core] Auto-fix upcoming eslint issues (#34644) @Janpot
+- [core] Move SearchIcons to docs src folder (#34802)
+- [test] Enable `react/no-unstable-nested-components` (#34518) @eps1lon
+
+All contributors of this release in alphabetical order: @AbayKinayat, @alexfauquette, @bharatkashyap, @DanailH, @eps1lon, @hayawata3626, @hbjORbj, @Janpot, @joserodolfofreitas, @m4theushw, @mbayucot, @michaldudak, @mohd-akram, @ndresx, @oliviertassinari, @pedroprado010, @rvrvrv, @samuelsycamore, @siriwatknp, @TheUnlocked, @zee-bit
+
 ## 5.10.9
 
 <!-- generated comparing v5.10.8..master -->
@@ -154,8 +226,8 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 - [TrapFocus] Rename TrapFocus to FocusTrap (#34216) @kabernardes
 
   ```diff
-  - import TrapFocus from ‘@mui/base/TrapFocus’;
-  + import FocusTrap from ‘@mui/base/FocusTrap’;
+  -import TrapFocus from '@mui/base/TrapFocus';
+  +import FocusTrap from '@mui/base/FocusTrap';
   ```
 
 #### Changes
@@ -437,7 +509,7 @@ _Aug 22, 2022_
 
 A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
 
-- ✨ @michaldudak synced the Material Icons set with the latest from Google (#33988).  
+- ✨ @michaldudak synced the Material Icons set with the latest from Google (#33988).\
   A couple of icons changed their appearance. See the difference [on this Argos build](https://app.argos-ci.com/mui/material-ui/builds/4428]).
 
 ### `@mui/material@5.10.2`
@@ -2027,8 +2099,8 @@ A big thanks to the 16 contributors who made this release possible. Here are som
   `unstable_ClassNameGenerator` has been moved from `utils` to `className` folder to prevent all MUI Base module imports. If you use the module, please update the import as suggested in the diff below:
 
   ```diff
-  - import { unstable_ClassNameGenerator } from '@mui/material/utils';
-  + import { unstable_ClassNameGenerator } from '@mui/material/className';
+  -import { unstable_ClassNameGenerator } from '@mui/material/utils';
+  +import { unstable_ClassNameGenerator } from '@mui/material/className';
   ```
 
 #### Changes
@@ -2370,8 +2442,8 @@ A big thanks to the 22 contributors who made this release possible. Here are som
   3. Change the import paths of unstyled components from @mui/material to @mui/base, e.g.:
 
   ```diff
-  - @import ButtonUnstyled from '@mui/material/ButtonUnstyled';
-  + @import ButtonUnstyled from '@mui/base/ButtonUnstyled';
+  -import ButtonUnstyled from '@mui/material/ButtonUnstyled';
+  +import ButtonUnstyled from '@mui/base/ButtonUnstyled';
   ```
 
 #### Changes
@@ -4414,27 +4486,27 @@ A big thanks to the 13 contributors who made this release possible. Here are som
   `span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui/material-ui/pull/26666).
 
   ```diff
-  <button class="MuiTab-root">
-  - <span class="MuiTab-wrapper">
+   <button class="MuiTab-root">
+  -  <span class="MuiTab-wrapper">
       {icon}
       {label}
-  - </span>
-  </button>
+  -  </span>
+   </button>
   ```
 
 - [BottomNavigation] Remove wrapper from BottomNavigationAction (#26923) @siriwatknp
 
   `span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui/material-ui/pull/26666).
 
   ```diff
-  <button class="MuiBottomNavigationAction-root">
-  - <span class="MuiBottomNavigationAction-wrapper">
-      {icon}
-      <span class="MuiBottomNavigationAction-label">
-        {label}
-      </span>
-  - </span>
-  </button>
+   <button class="MuiBottomNavigationAction-root">
+  -  <span class="MuiBottomNavigationAction-wrapper">
+       {icon}
+       <span class="MuiBottomNavigationAction-label">
+         {label}
+       </span>
+  -  </span>
+   </button>
   ```
 
 #### Changes

CONTRIBUTING.md

@@ -80,7 +80,7 @@ The core team is monitoring for Pull Requests. We will review your Pull Request
 ### Trying changes on the documentation site
 
 The documentation site is built with MUI and contains examples of all the components.
-This is a great place to experiment with your changes.
+This is the best place to experiment with your changes.
 It's the local development environment used by the maintainers.
 
 To get started:
@@ -89,9 +89,29 @@ To get started:
 yarn start
 ```
 
-You can now access the documentation site [locally](http://localhost:3000).
+You can now access the documentation site locally: http://localhost:3000.
 Changes to the docs will hot reload the site.
 
+### Trying changes on the playground
+
+While we recommend to try your changes on the documentation site—it's not always ideal.
+You might face following problems:
+
+- updating the existing demos prevent you to work in isolation on a single instance of the component
+- emptying an existing page to try your changes in isolation lead to a noisy `git diff`
+- static linters will report issues that you might not care about.
+
+To solve these problems—you can use the playground:
+
+```sh
+yarn docs:create-playground && yarn start
+```
+
+You can now access it locally: http://localhost:3000/playground/.
+
+You can create as many playgrounds as you want by going to the `/docs/pages/playground/` folder and duplicating the index.tsx file with a different name: `<file_name>.tsx`.
+The new playground will be accessible under: `http://localhost:3000/playground/<file_name>`.
+
 ### How to increase the chance of being accepted?
 
 Continuous Integration (CI) runs a series of checks automatically when a Pull Request is opened. If you're not

benchmark/package.json

@@ -15,9 +15,9 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mdx-js/react": "^2.1.4",
-    "@mui/material": "^5.10.9",
-    "@mui/styles": "^5.10.9",
-    "@mui/system": "^5.10.9",
+    "@mui/material": "^5.10.10",
+    "@mui/styles": "^5.10.10",
+    "@mui/system": "^5.10.10",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.26.1",

benchmark/server/scenarios/styles.js

@@ -84,9 +84,14 @@ function HookButton(props) {
   return <button type="button" className={classes.root} {...props} />;
 }
 
-const NakedButton = (props) => <button type="submit" {...props} />;
-// eslint-disable-next-line react/no-unknown-property
-const EmotionCssButton = (props) => <button type="submit" css={emotionCss} {...props} />;
+function NakedButton(props) {
+  return <button type="submit" {...props} />;
+}
+
+function EmotionCssButton(props) {
+  // eslint-disable-next-line react/no-unknown-property
+  return <button type="submit" css={emotionCss} {...props} />;
+}
 
 suite
   .add('StyledMuiButton', () => {

dangerfile.js

@@ -1,6 +1,6 @@
 // inspire by reacts dangerfile
 // danger has to be the first thing required!
-const { danger, markdown } = require('danger');
+const { danger, markdown, message } = require('danger');
 const { exec } = require('child_process');
 const { loadComparison } = require('./scripts/sizeSnapshot');
 
@@ -167,6 +167,9 @@ async function reportBundleSize() {
 }
 
 async function run() {
+  const netlifyPreview = `https://deploy-preview-${process.env.CIRCLE_PR_NUMBER}--material-ui.netlify.app/`;
+  message(`Netlify deploy preview: <a href="${netlifyPreview}">${netlifyPreview}</a>`);
+
   switch (dangerCommand) {
     case 'prepareBundleSizeReport':
       prepareBundleSizeReport();