Merge branch 'master' into remove-esmExternals

mui · Sep 4, 2024 · 5ab86e1 · 5ab86e1
2 parents 5bb1471 + f8b2251
commit 5ab86e1
Show file tree

Hide file tree

Showing 61 changed files with 641 additions and 576 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -45,7 +45,7 @@ default-job: &default-job
     AWS_REGION_ARTIFACTS: eu-central-1
   working_directory: /tmp/material-ui
   docker:
-    - image: cimg/node:18.20
+    - image: cimg/node:20.17
 
 default-context: &default-context
   context:

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,7 +1,7 @@
 {
   "buildCommand": "build:codesandbox",
   "installCommand": "install:codesandbox",
-  "node": "18",
+  "node": "20",
   "packages": [
     "packages/markdown",
     "packages/mui-babel-macros",

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -30,10 +30,10 @@ jobs:
           fetch-depth: 0
       - name: Set up pnpm
         uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
-          node-version: 18
+          node-version: 20
           cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
       - run: pnpm install
       - run: pnpm build:ci

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
+        uses: github/codeql-action/init@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6
         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@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
+        uses: github/codeql-action/analyze@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6
diff --git a/.github/workflows/publish-canaries.yml b/.github/workflows/publish-canaries.yml
@@ -14,10 +14,10 @@ jobs:
           fetch-depth: 0
       - name: Set up pnpm
         uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
-          node-version: 18
+          node-version: 20
           cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
       - run: pnpm install
       - run: pnpm canary:release --ignore @mui/icons-material --yes --skip-last-commit-comparison

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@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
+        uses: github/codeql-action/upload-sarif@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6
         with:
           sarif_file: results.sarif
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,54 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.2
+
+<!-- generated comparing v6.0.1..master -->
+
+_Sep 3, 2024_
+
+A big thanks to the 11 contributors who made this release possible.
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 07 -->Fix `createTheme` with just color schemes (#43518) @siriwatknp
+- &#8203;<!-- 06 -->[Menu,Popover] Fix Backdrop props descriptions (#43503) @Michael-Hutchinson
+- &#8203;<!-- 05 -->[MenuList] Do not react to an event with modifier key pressed (#43505) @MateuszGroth
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 08 -->[InitColorSchemeScript] Use `let/const` instead of `var` (#43468) @ishon19
+- &#8203;<!-- 04 -->Fix composeClasses v6 behavior change (#43537) @oliviertassinari
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 19 -->Skip `ListItemButton` import for unrelated files (#43532) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 10 -->[figma] Clarity state or Figma Plugin component export (#43543) @oliviertassinari
+- &#8203;<!-- 09 -->[material-ui] Fix template shadow tokens (#43514) @zanivan
+- &#8203;<!-- 15 -->Update version support range (#43565) @oliviertassinari
+- &#8203;<!-- 14 -->Polish Material UI Sync plugin code format @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 24 -->[blog] Update Material UI v6 blog post link to reflect correct section title (#43535) @Michael-Hutchinson
+- &#8203;<!-- 23 -->[blog] Makes the v5 name change clearer @oliviertassinari
+- &#8203;<!-- 22 -->[blog] Fix typo in Material UI v6 blog post (#43502) @iamandrewluca
+- &#8203;<!-- 21 -->[code-infra] Add missing @babel/runtime dependency to @mui/material-pigment-css (#43473) @Janpot
+- &#8203;<!-- 20 -->[code-infra] Remove permissions in publish-canaries.yml (#43491) @oliviertassinari
+- &#8203;<!-- 18 -->[core] Fix CodeQL scan (#43547) @oliviertassinari
+- &#8203;<!-- 17 -->[core] Fix CHANGELOG `@mui/[email protected]` version (#43516) @DiegoAndai
+- &#8203;<!-- 14 -->[docs-infra] Reduce description max-length (#43562) @oliviertassinari
+- &#8203;<!-- 13 -->[docs-infra] Crash on invalid callout type (#43546) @oliviertassinari
+- &#8203;<!-- 12 -->[docs-infra] Fix GitHub source link redirection (#43534) @oliviertassinari
+- &#8203;<!-- 09 -->[infra] Fixed workflow file path (#43528) @michelengelen
+- &#8203;<!-- 03 -->[typescript] Fix missing `Theme` generic (#43523) @siriwatknp
+- &#8203;<!-- 02 -->[website] Match pricing label with page @oliviertassinari
+- &#8203;<!-- 01 -->[website] Update Premium price and remove any mention to cap (#43466) @joserodolfofreitas
+
+All contributors of this release in alphabetical order: @DiegoAndai, @iamandrewluca, @ishon19, @Janpot, @joserodolfofreitas, @MateuszGroth, @Michael-Hutchinson, @michelengelen, @oliviertassinari, @siriwatknp, @zanivan
+
 ## v6.0.1
 
 <!-- generated comparing v6.0.0..master -->

diff --git a/SECURITY.md b/SECURITY.md
@@ -4,14 +4,15 @@
 
 The versions of the project that are currently supported with security updates.
 
-| Material UI version | Release    | Supported            |
-| ------------------: | :--------- | :------------------- |
-|              ^5.0.0 | 2021-09-16 | ✅ Stable major      |
-|              ^4.0.0 | 2019-06-23 | ✅ Long-term support |
-|              ^3.0.0 | 2018-08-27 | ❌                   |
-|              ^2.0.0 | /          | ❌                   |
-|              ^1.0.0 | 2018-06-18 | ❌                   |
-|             <=1.0.0 | 2014-10-05 | ❌                   |
+| Material UI version | Release    | Supported                            |
+| ------------------: | :--------- | :----------------------------------- |
+|              ^6.0.0 | 2024-08-26 | :white_check_mark: Stable major      |
+|              ^5.0.0 | 2021-09-16 | :white_check_mark: Long-term support |
+|              ^4.0.0 | 2019-06-23 | :x:                                  |
+|              ^3.0.0 | 2018-08-27 | :x:                                  |
+|              ^2.0.0 | /          | :x:                                  |
+|              ^1.0.0 | 2018-06-18 | :x:                                  |
+|             <=1.0.0 | 2014-10-05 | :x:                                  |
 
 ## Reporting a vulnerability
 

diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "0.0.21",
-    "@types/node": "^20.5.7",
+    "@types/node": "^20.14.8",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.0",

diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -29,7 +29,7 @@
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.44",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.4.2",
     "vite-plugin-pages": "^0.32.3"

diff --git a/babel.config.js b/babel.config.js
@@ -93,7 +93,7 @@ module.exports = function getBabelConfig(api) {
       {
         useESModules,
         // any package needs to declare 7.25.0 as a runtime dependency. default is ^7.0.0
-        version: '^7.25.0',
+        version: process.env.MUI_BABEL_RUNTIME_VERSION || '^7.25.0',
       },
     ],
     [

diff --git a/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md b/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md
@@ -56,13 +56,12 @@ After you've added your custom tokens, click on **Regenerate theme** to include
 
 ## Customizing components
 
-The Sync plugin can also generate theme styles for customized components, enabling you to completely change their look and feel and create your custom design system from within Figma.
-
-:::info
-This feature is currently limited to the Button, Switch, and Typography components.
-Support for more components is coming soon.
+:::warning
+This feature is experimental and limited to the **Button**, **Switch**, and **Typography** components.
 :::
 
+The Sync plugin can also generate theme styles for customized components, enabling you to completely change their look and feel and create your custom design system from within Figma.
+
 As an example, here's how to customize the checked state, medium size, and primary color of a Switch component to replicate the iOS look and feel:
 
 <img src="/static/material-ui/design-resources/sync-component-variant.png" style="width: 814px; margin-bottom: 8px;" alt="A specific variant of the Switch component selected in the Design Kit." width="1628" height="400" />
@@ -251,27 +250,28 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': {
-            '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))': {
-              width: '40px',
-              height: '21px',
-              padding: '0',
-              '& .MuiSwitch-switchBase': {
-                transform: 'translateX(19px) translateY(2px)',
+            '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))':
+              {
+                width: '40px',
+                height: '21px',
                 padding: '0',
-                '& .MuiSwitch-thumb': {
-                  width: '17px',
-                  height: '17px',
-                  background: '#FAFAFA',
-                },
-                '& + .MuiSwitch-track': {
-                  width: '38px',
-                  height: '21px',
-                  background: 'var(--mui-palette-success-light)',
-                  borderRadius: 'var(--mui-shape-borderRadiusRound)',
-                  opacity: '1',
+                '& .MuiSwitch-switchBase': {
+                  transform: 'translateX(19px) translateY(2px)',
+                  padding: '0',
+                  '& .MuiSwitch-thumb': {
+                    width: '17px',
+                    height: '17px',
+                    background: '#FAFAFA',
+                  },
+                  '& + .MuiSwitch-track': {
+                    width: '38px',
+                    height: '21px',
+                    background: 'var(--mui-palette-success-light)',
+                    borderRadius: 'var(--mui-shape-borderRadiusRound)',
+                    opacity: '1',
+                  },
                 },
               },
-            },
           },
         },
       },

diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md
@@ -74,8 +74,9 @@ This includes issues introduced by external sources, like browser upgrades or ch
 
 | Material UI version | Release    | Supported                                                           |
 | ------------------: | :--------- | :------------------------------------------------------------------ |
-|              ^5.0.0 | 2021-09-16 | ✅ Stable major (Continuous support)                                |
-|              ^4.0.0 | 2019-06-23 | ⚠️ Long-term support (Support for security issues and regressions). |
+|              ^6.0.0 | 2024-08-26 | ✅ Stable major (Continuous support)                                |
+|              ^5.0.0 | 2021-09-16 | ⚠️ Long-term support (Support for security issues and regressions). |
+|              ^4.0.0 | 2019-06-23 | ❌                                                                  |
 |              ^3.0.0 | 2018-08-27 | ❌                                                                  |
 |              ^2.0.0 | /          | ❌                                                                  |
 |              ^1.0.0 | 2018-06-18 | ❌                                                                  |

diff --git a/docs/package.json b/docs/package.json
@@ -67,8 +67,6 @@
     "core-js": "^2.6.11",
     "cross-env": "^7.0.3",
     "css-mediaquery": "^0.1.2",
-    "date-fns": "^2.30.0",
-    "date-fns-jalali": "^2.21.3-1",
     "dayjs": "^1.11.13",
     "feed": "^4.2.2",
     "fg-loadcss": "^3.1.0",
@@ -83,10 +81,10 @@
     "lz-string": "^1.5.0",
     "markdown-to-jsx": "^7.4.7",
     "material-ui-popup-state": "^5.1.2",
-    "next": "^14.2.6",
+    "next": "^14.2.7",
     "notistack": "3.0.1",
     "nprogress": "^0.2.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.44",
     "postcss-import": "^16.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
@@ -96,7 +94,7 @@
     "react-imask": "^7.6.1",
     "react-intersection-observer": "^9.13.0",
     "react-is": "^18.3.1",
-    "react-number-format": "^5.4.0",
+    "react-number-format": "^5.4.1",
     "react-router-dom": "^6.26.1",
     "react-runner": "^1.0.5",
     "react-simple-code-editor": "^0.14.1",
@@ -124,7 +122,7 @@
     "@types/css-mediaquery": "^0.1.4",
     "@types/gtag.js": "^0.0.20",
     "@types/json2mq": "^0.2.2",
-    "@types/node": "^18.19.46",
+    "@types/node": "^20.14.8",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",

diff --git a/docs/pages/blog/material-ui-v6-is-out.md b/docs/pages/blog/material-ui-v6-is-out.md
@@ -1,6 +1,6 @@
 ---
 title: Material UI v6 is out now 🎉
-description: Material UI v6 ships with support for CSS variables, container queries, and advanced color schemes, as well as improved runtime performance and a reduced bundle size.
+description: Material UI v6 is now stable. It comes with new features, improvements, and an experimental integration for static CSS extraction.
 date: 2024-08-26T00:00:00.000Z
 authors:
   [

diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -80,6 +80,32 @@ export default function BrandingThemeTest() {
               <GitHubIcon fontSize="small" />
             </IconButton>
           </Stack>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <Button variant="contained" size="small" color="primary" disabled>
+              Contained primary
+            </Button>
+            <Button variant="contained" size="small" color="secondary" disabled>
+              Contained secondary
+            </Button>
+            <Button variant="outlined" size="small" color="primary" disabled>
+              Outlined primary
+            </Button>
+            <Button variant="outlined" size="small" color="secondary" disabled>
+              Outlined secondary
+            </Button>
+            <Button variant="text" size="small" disabled>
+              This button
+            </Button>
+            <IconButton color="primary">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+            <IconButton color="info">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+            <IconButton>
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+          </Stack>
           <Stack direction="column" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
             <Button variant="contained" size="large" color="primary">
               Large

diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx
@@ -82,17 +82,6 @@ const faqData = [
       </React.Fragment>
     ),
   },
-  {
-    summary: 'Why are you calling it "early access"?',
-    detail: (
-      <React.Fragment>
-        We think you'll love the features we've built so far, but we're planning to release more. We
-        opened it up as soon as we had something useful so that you can start getting value from it
-        right away, and we'll be adding new features and components based on our own ideas, and on
-        suggestions from early access customers.
-      </React.Fragment>
-    ),
-  },
   {
     summary: 'Do developers have to be named?',
     detail: (