Merge branch 'master' into fix-typo-blog-v6

CHANGELOG.md

@@ -1,5 +1,43 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.1
+
+<!-- generated comparing v6.0.0..master -->
+
+_Aug 29, 2024_
+
+A big thanks to the 12 contributors who made this release possible. It contains bug fixes and documentation improvements.
+
+### `@mui/material@6.0.1`
+
+- Attach default light color scheme when enabling CSS theme variables (#43493) @siriwatknp
+- [Skeleton] Apply the wave animation to the correct element (#43474) @mnajdova
+
+### Docs
+
+- [material-ui][Dialog] Update confirmation dialog description (#43488) @Michael-Hutchinson
+- Add Material UI v6 is out! to the notifications (#43448) @oliviertassinari
+- [material-ui] Dark scroll bars in templates (#43483) @aarongarciah
+- [material-ui] Add TemplateFrame to templates (#43406) @zanivan
+- [table] Make the data grid blend in (#43489) @oliviertassinari
+
+### Core
+
+- [blog] Update Toolpad Studio marketing page links in the blogs (#43407) @prakhargupta1
+- [blog] Add missing social card to the blog post (#43465) @siriwatknp
+- [code-infra] Fix typing issues with `@mui-internal/api-docs-builder` (#43498) @Janpot
+- [code-infra] Fix nextjs build cache (#43467) @JCQuintas
+- Remove `'use client'` from index files and useAutocomplete reexport (#41956) @DiegoAndai
+- Replace relative links to absolute ones in JSDocs (#43472) @alexfauquette
+- Upgrade babel runtime (#43243) @Janpot
+- [docs-infra] Skip shadow DOM regression test (#43500) @aarongarciah
+- [docs-infra] Fix use of process.env.DEPLOY_ENV (#43490) @oliviertassinari
+- [docs-infra] Add comment about removing optimizeFonts Next.js config (#43469) @aarongarciah
+- [examples] Use `latest` on all Material UI dependencies (#43494) @mnajdova
+- [infra] fix workflow path (#43464) @michelengelen
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @DiegoAndai, @Janpot, @JCQuintas, @Michael-Hutchinson, @michelengelen, @mnajdova, @oliviertassinari, @prakhargupta1, @siriwatknp, @zanivan
+
 ## 6.0.0
 
 <!-- generated comparing v6.0.0-rc.0..master -->

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

@@ -23,7 +23,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.20",
+    "@pigment-css/nextjs-plugin": "0.0.21",
     "@types/node": "^20.5.7",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",

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

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "0.0.20",
+    "@pigment-css/vite-plugin": "0.0.21",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

docs/data/material/customization/shadow-dom/ShadowDOMDemo.js → docs/data/material/customization/shadow-dom/ShadowDOMDemoNoSnap.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export default function ShadowDOMDemo() {
+export default function ShadowDOMDemoNoSnap() {
   return (
     <iframe
       title="codesandbox"

docs/data/material/customization/shadow-dom/shadow-dom.md

@@ -68,4 +68,4 @@ const theme = createTheme({
 
 In the example below you can see that the component outside of the shadow DOM is affected by global styles, while the component inside of the shadow DOM is not:
 
-{{"demo": "ShadowDOMDemo.js", "hideToolbar": true, "bg": true}}
+{{"demo": "ShadowDOMDemoNoSnap.js", "hideToolbar": true, "bg": true}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/monorepo",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -119,7 +119,7 @@
     "@mui/utils": "workspace:^",
     "@next/eslint-plugin-next": "^14.2.6",
     "@octokit/rest": "^21.0.2",
-    "@pigment-css/react": "0.0.20",
+    "@pigment-css/react": "0.0.21",
     "@playwright/test": "1.46.1",
     "@types/babel__core": "^7.20.5",
     "@types/fs-extra": "^11.0.4",
@@ -213,10 +213,10 @@
     "@types/react": "^18.3.4",
     "@types/react-dom": "18.3.0",
     "cross-fetch": "^4.0.0",
-    "@pigment-css/react": "0.0.20",
-    "@pigment-css/unplugin": "0.0.20",
-    "@pigment-css/nextjs-plugin": "0.0.20",
-    "@pigment-css/vite-plugin": "0.0.20"
+    "@pigment-css/react": "0.0.21",
+    "@pigment-css/unplugin": "0.0.21",
+    "@pigment-css/nextjs-plugin": "0.0.21",
+    "@pigment-css/vite-plugin": "0.0.21"
   },
   "nyc": {
     "include": [

packages-internal/docs-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-utils",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "author": "MUI Team",
   "description": "Utilities for MUI docs. This is an internal package not meant for general use.",
   "main": "./build/index.js",

packages-internal/test-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-test-utils",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "author": "MUI Team",
   "description": "Utilities for MUI tests. This is an internal package not meant for general use.",
   "main": "./build/index.js",
@@ -50,7 +50,7 @@
     "mocha": "^10.7.3",
     "playwright": "^1.46.1",
     "prop-types": "^15.8.1",
-    "sinon": "^16.1.3"
+    "sinon": "^18.0.0"
   },
   "devDependencies": {
     "@types/chai": "^4.3.17",

packages/api-docs-builder-core/package.json

@@ -20,7 +20,7 @@
     "@types/node": "^18.19.46",
     "@types/sinon": "^17.0.3",
     "chai": "^4.5.0",
-    "sinon": "^16.1.3",
+    "sinon": "^18.0.0",
     "typescript": "^5.5.4"
   }
 }

packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts

@@ -6,7 +6,7 @@ import traverse from '@babel/traverse';
 import * as _ from 'lodash';
 import kebabCase from 'lodash/kebabCase';
 import remark from 'remark';
-import remarkVisit from 'unist-util-visit';
+import { visit as remarkVisit } from 'unist-util-visit';
 import type { Link } from 'mdast';
 import { defaultHandlers, parse as docgenParse } from 'react-docgen';
 import { renderMarkdown } from '@mui/internal-markdown';

packages/api-docs-builder/package.json

@@ -23,7 +23,7 @@
     "recast": "^0.23.9",
     "remark": "^13.0.0",
     "typescript": "^5.5.4",
-    "unist-util-visit": "^2.0.3"
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -36,6 +36,6 @@
     "@types/react-docgen": "workspace:*",
     "@types/sinon": "^17.0.3",
     "chai": "^4.5.0",
-    "sinon": "^16.1.3"
+    "sinon": "^18.0.0"
   }
 }

packages/mui-base/package.json

@@ -64,7 +64,7 @@
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sinon": "^16.1.3"
+    "sinon": "^18.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",

packages/mui-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",

packages/mui-core-downloads-tracker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/core-downloads-tracker",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "Internal package to track number of downloads of our design system libraries",

packages/mui-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",

packages/mui-icons-material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/icons-material",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "Material Design icons distributed as SVG React components.",

packages/mui-joy/package.json

@@ -61,7 +61,7 @@
     "next": "^14.2.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sinon": "^16.1.3"
+    "sinon": "^18.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

packages/mui-lab/package.json

@@ -59,7 +59,7 @@
     "chai": "^4.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sinon": "^16.1.3"
+    "sinon": "^18.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

packages/mui-material-nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",

packages/mui-material-pigment-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-pigment-css",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "author": "MUI Team",
   "description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.",
   "main": "./src/index.ts",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@mui/system": "workspace:*",
-    "@pigment-css/react": "0.0.20"
+    "@pigment-css/react": "0.0.21"
   },
   "sideEffects": false,
   "publishConfig": {

packages/mui-material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -72,7 +72,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
-    "sinon": "^16.1.3"
+    "sinon": "^18.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

packages/mui-material/src/styles/createTheme.test.js

@@ -57,6 +57,17 @@ describe('createTheme', () => {
   });
 
   describe('CSS variables', () => {
+    it('should have default light with media selector if no `palette` and colorSchemes.dark is provided ', () => {
+      const theme = createTheme({
+        cssVariables: true,
+        colorSchemes: { dark: true },
+      });
+      expect(theme.defaultColorScheme).to.equal('light');
+      expect(theme.colorSchemeSelector).to.equal('media');
+      expect(theme.colorSchemes.light).not.to.equal(undefined);
+      expect(theme.colorSchemes.dark).not.to.equal(undefined);
+    });
+
     it('should have a light as a default colorScheme if only `palette` is provided', () => {
       const theme = createTheme({
         cssVariables: true,

packages/mui-material/src/styles/createTheme.ts

@@ -96,6 +96,10 @@ export default function createTheme(
     return theme;
   }
 
+  if (!palette && !('light' in colorSchemesInput) && defaultColorSchemeInput === 'light') {
+    colorSchemesInput.light = true;
+  }
+
   return createThemeWithVars(
     {
       ...rest,

packages/mui-private-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/private-theming",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.",

packages/mui-styled-engine-sc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine-sc",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for styled-components.",

packages/mui-styled-engine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",

packages/mui-styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/styles",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.",
@@ -65,7 +65,7 @@
     "chai": "^4.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sinon": "^16.1.3"
+    "sinon": "^18.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",

packages/mui-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -62,7 +62,7 @@
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
-    "sinon": "^16.1.3",
+    "sinon": "^18.0.0",
     "styled-components": "^6.1.12"
   },
   "peerDependencies": {

packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx

@@ -92,13 +92,13 @@ export default function InitColorSchemeScript(options?: InitColorSchemeScriptPro
       dangerouslySetInnerHTML={{
         __html: `(function() {
 try {
-  var mode = localStorage.getItem('${modeStorageKey}') || 'system';
-  var colorScheme = '';
-  var dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
-  var light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+  let colorScheme = '';
+  const mode = localStorage.getItem('${modeStorageKey}') || 'system';
+  const dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+  const light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
   if (mode === 'system') {
     // handle system mode
-    var mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
     if (mql.matches) {
       colorScheme = dark
     } else {

packages/mui-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
@@ -59,7 +59,7 @@
     "chai": "^4.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sinon": "^16.1.3"
+    "sinon": "^18.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",