Merge branch 'next' of https://github.com/mui/material-ui into docs-d…

…ynamic-theme-inject

.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@2d790406f505036ef40ecba973cc774a50395aac # v3.25.13
+        uses: github/codeql-action/init@afb54ba388a7dca6ecae48f608c4ff05ff4cc77a # v3.25.15
         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@2d790406f505036ef40ecba973cc774a50395aac # v3.25.13
+        uses: github/codeql-action/analyze@afb54ba388a7dca6ecae48f608c4ff05ff4cc77a # v3.25.15

.github/workflows/publish-canaries.yml

@@ -0,0 +1,23 @@
+name: Publish canary packages to npm
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        with:
+          fetch-depth: 0
+      - name: Set up pnpm
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          node-version: 18
+          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
+        env:
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/scorecards.yml

@@ -27,7 +27,7 @@ jobs:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
+        uses: ossf/scorecard-action@62b2cac7ed8198b15735ed49ab1e5cf35480ba46 # v2.4.0
         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@2d790406f505036ef40ecba973cc774a50395aac # v3.25.13
+        uses: github/codeql-action/upload-sarif@afb54ba388a7dca6ecae48f608c4ff05ff4cc77a # v3.25.15
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -1,5 +1,46 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-beta.4
+
+<!-- generated comparing v6.0.0-beta.3..next -->
+
+_Jul 30, 2024_
+
+A big thanks to the 12 contributors who made this release possible.
+
+### `@mui/material@6.0.0-beta.4`
+
+- [Accordion] Render a heading wrapping `AccordionSummary` button per W3C Accordion Pattern standards (#42914) @ZeeshanTamboli
+- [Divider] Enable borderStyle enhancement in divider with children (#42715) @anuujj
+- [ImageListItemBar] Deprecate composed classes (#42905) @sai6855
+- Attach selector for default color scheme (#43035) @siriwatknp
+- Stabilize Grid v2 and deprecate Grid v1 (#43054) @DiegoAndai
+
+### `@mui/system@6.0.0-beta.4`
+
+- Make `createBreakpoints` independent for stringify theme (#43048) @siriwatknp
+
+### `@mui/utils@6.0.0-beta.4`
+
+- Fix issues reported by the React Compiler (#43051) @markliu2013
+
+### Docs
+
+- [material-ui] Replace deprecated `<ListItem button/>` with `ListItemButton` component in routing libraries list example (#43110) @aliharis99
+- [material-ui][Card] Update CardMedia description (#43067) @shahzaibdev1
+- [material-ui] Polish out data table demo (#43072) @zanivan
+- [material-ui][Snackbar] Improve reason type in demos (#43077) @sai6855
+- [pigment-css] Fix syntax in migrating-to-pigment-css guide (#43107) @KevinVandy
+- Fix page description line break @oliviertassinari
+
+### Core
+
+- Fix event naming convention @oliviertassinari
+- [docs-infra] Move ads to the `@mui/docs` package (#42944) @alexfauquette
+- [website] Fine-tune button styles on the branding theme (#43082) @zanivan
+
+All contributors of this release in alphabetical order: @alexfauquette, @aliharis99, @anuujj, @DiegoAndai, @KevinVandy, @markliu2013, @oliviertassinari, @sai6855, @shahzaibdev1, @siriwatknp, @zanivan, @ZeeshanTamboli
+
 ## 6.0.0-beta.3
 
 <!-- generated comparing v6.0.0-beta.2..next -->

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

@@ -30,7 +30,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.40",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.3.2",
     "vite-plugin-pages": "^0.32.3"

benchmark/browser/scenarios/grid-system/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
 
 export default function GridSystem() {
   return (

benchmark/package.json

@@ -11,7 +11,7 @@
     "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": {
-    "@babel/runtime": "^7.24.8",
+    "@babel/runtime": "^7.25.0",
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.13.0",
     "@emotion/server": "^11.11.0",

docs/data/material/components/about-the-lab/about-the-lab.md

@@ -48,10 +48,7 @@ Note that the lab has a peer dependency on the Material UI components.
 In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/material-ui/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab.
 
 ```tsx
-// When using TypeScript 4.x and above
 import type {} from '@mui/lab/themeAugmentation';
-// When using TypeScript 3.x and below
-import '@mui/lab/themeAugmentation';
 
 const theme = createTheme({
   components: {

docs/data/material/components/autocomplete/AutocompleteHint.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import { Box, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 
 export default function AutocompleteHint() {
   const hint = React.useRef('');
@@ -45,8 +46,8 @@ export default function AutocompleteHint() {
             </Typography>
             <TextField
               {...params}
-              onChange={(e) => {
-                const newValue = e.target.value;
+              onChange={(event) => {
+                const newValue = event.target.value;
                 setInputValue(newValue);
                 const matchingOption = top100Films.find((option) =>
                   option.label.startsWith(newValue),

docs/data/material/components/autocomplete/AutocompleteHint.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import { Box, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 
 export default function AutocompleteHint() {
   const hint = React.useRef('');
@@ -45,8 +46,8 @@ export default function AutocompleteHint() {
             </Typography>
             <TextField
               {...params}
-              onChange={(e) => {
-                const newValue = e.target.value;
+              onChange={(event) => {
+                const newValue = event.target.value;
                 setInputValue(newValue);
                 const matchingOption = top100Films.find((option) =>
                   option.label.startsWith(newValue),

docs/data/material/components/box/BoxSx.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Box, ThemeProvider } from '@mui/material';
+import Box from '@mui/material/Box';
+import { ThemeProvider } from '@mui/material/styles';
 
 export default function BoxSx() {
   return (

docs/data/material/components/box/BoxSx.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Box, ThemeProvider } from '@mui/material';
+import Box from '@mui/material/Box';
+import { ThemeProvider } from '@mui/material/styles';
 
 export default function BoxSx() {
   return (

docs/data/material/components/cards/ActionAreaCard.js

@@ -3,7 +3,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import { CardActionArea } from '@mui/material';
+import CardActionArea from '@mui/material/CardActionArea';
 
 export default function ActionAreaCard() {
   return (

docs/data/material/components/cards/ActionAreaCard.tsx

@@ -3,7 +3,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import { CardActionArea } from '@mui/material';
+import CardActionArea from '@mui/material/CardActionArea';
 
 export default function ActionAreaCard() {
   return (

docs/data/material/components/cards/MultiActionAreaCard.js

@@ -3,7 +3,9 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import { Button, CardActionArea, CardActions } from '@mui/material';
+import Button from '@mui/material/Button';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardActions from '@mui/material/CardActions';
 
 export default function MultiActionAreaCard() {
   return (

docs/data/material/components/cards/MultiActionAreaCard.tsx

@@ -3,7 +3,9 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import { Button, CardActionArea, CardActions } from '@mui/material';
+import Button from '@mui/material/Button';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardActions from '@mui/material/CardActions';
 
 export default function MultiActionAreaCard() {
   return (

docs/data/material/components/cards/cards.md

@@ -20,7 +20,7 @@ The Material UI Card component includes several complementary utility component
 - Card: a surface-level container for grouping related components.
 - Card Content: the wrapper for the Card content.
 - Card Header: an optional wrapper for the Card header.
-- Card Media: an optional container for displaying background images and gradient layers behind the Card Content.
+- Card Media: an optional container for displaying images, videos, etc.
 - Card Actions: an optional wrapper that groups a set of buttons.
 - Card Action Area: an optional wrapper that allows users to interact with the specified area of the Card.
 

docs/data/material/components/grid/grid.md

@@ -19,6 +19,10 @@ Material Design's responsive UI is based on a 12-column grid layout.
 The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/x/react-data-grid/).
 :::
 
+:::warning
+The `Grid` component has been deprecated. Please use the [Grid v2](/material-ui/react-grid2/) instead. See how to migrate in the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) and [Material UI v6 migration guide](/material-ui/migration/migrating-to-v6/).
+:::
+
 ## How it works
 
 The grid system is implemented with the `Grid` component:

docs/data/material/components/grid2/AutoGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/AutoGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/BasicGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/BasicGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/CenteredElementGrid.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function CenteredElementGrid() {
   return (

docs/data/material/components/grid2/CenteredElementGrid.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function CenteredElementGrid() {
   return (

docs/data/material/components/grid2/ColumnsGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/ColumnsGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/FullBorderedGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function FullBorderedGrid() {
   return (

docs/data/material/components/grid2/FullBorderedGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function FullBorderedGrid() {
   return (

docs/data/material/components/grid2/FullWidthGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/FullWidthGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/HalfBorderedGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function HalfBorderedGrid() {
   const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 };

docs/data/material/components/grid2/HalfBorderedGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function HalfBorderedGrid() {
   const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 } as const;

docs/data/material/components/grid2/NestedGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid2/NestedGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',