diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 5c5e61c1bcbd3f..71c1bc1f9d4a90 100644
--- 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@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
diff --git a/.github/workflows/publish-canaries.yml b/.github/workflows/publish-canaries.yml
new file mode 100644
index 00000000000000..6ceb6385a7dfbf
--- /dev/null
+++ b/.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}}
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
index 3f348f259c2330..d3252e8d2ccf20 100644
--- a/.github/workflows/scorecards.yml
+++ b/.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
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6698480d3e0be..6e2e47de870e69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,46 @@
# [Versions](https://mui.com/versions/)
+## 6.0.0-beta.4
+
+
+
+_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 `` 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
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
index bb02f753c17d9e..7ea036d0378d2f 100644
--- a/apps/pigment-css-vite-app/package.json
+++ b/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"
diff --git a/benchmark/browser/scenarios/grid-system/index.js b/benchmark/browser/scenarios/grid-system/index.js
index cead80916b8af3..bdfaad77c2736e 100644
--- a/benchmark/browser/scenarios/grid-system/index.js
+++ b/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 (
diff --git a/benchmark/package.json b/benchmark/package.json
index fd75359acbef90..83bdc119c29e0d 100644
--- a/benchmark/package.json
+++ b/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",
diff --git a/docs/data/material/components/about-the-lab/about-the-lab.md b/docs/data/material/components/about-the-lab/about-the-lab.md
index 0b86d1f0c90305..c1e8e3bc707a37 100644
--- a/docs/data/material/components/about-the-lab/about-the-lab.md
+++ b/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: {
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.js b/docs/data/material/components/autocomplete/AutocompleteHint.js
index f473c1674b9728..ab0db8c05e1cfc 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.js
+++ b/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() {
{
- const newValue = e.target.value;
+ onChange={(event) => {
+ const newValue = event.target.value;
setInputValue(newValue);
const matchingOption = top100Films.find((option) =>
option.label.startsWith(newValue),
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.tsx b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
index f473c1674b9728..ab0db8c05e1cfc 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.tsx
+++ b/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() {
{
- const newValue = e.target.value;
+ onChange={(event) => {
+ const newValue = event.target.value;
setInputValue(newValue);
const matchingOption = top100Films.find((option) =>
option.label.startsWith(newValue),
diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js
index 490d11833351b8..a507dbba08a3c0 100644
--- a/docs/data/material/components/box/BoxSx.js
+++ b/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 (
diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/BoxSx.tsx
index 490d11833351b8..a507dbba08a3c0 100644
--- a/docs/data/material/components/box/BoxSx.tsx
+++ b/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 (
diff --git a/docs/data/material/components/cards/ActionAreaCard.js b/docs/data/material/components/cards/ActionAreaCard.js
index d70a0952579f59..7902ef66b12f0b 100644
--- a/docs/data/material/components/cards/ActionAreaCard.js
+++ b/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 (
diff --git a/docs/data/material/components/cards/ActionAreaCard.tsx b/docs/data/material/components/cards/ActionAreaCard.tsx
index d70a0952579f59..7902ef66b12f0b 100644
--- a/docs/data/material/components/cards/ActionAreaCard.tsx
+++ b/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 (
diff --git a/docs/data/material/components/cards/MultiActionAreaCard.js b/docs/data/material/components/cards/MultiActionAreaCard.js
index 859ae9eef68207..74348192caee58 100644
--- a/docs/data/material/components/cards/MultiActionAreaCard.js
+++ b/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 (
diff --git a/docs/data/material/components/cards/MultiActionAreaCard.tsx b/docs/data/material/components/cards/MultiActionAreaCard.tsx
index 859ae9eef68207..74348192caee58 100644
--- a/docs/data/material/components/cards/MultiActionAreaCard.tsx
+++ b/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 (
diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md
index e6c0ccba1d699f..93b026b4890624 100644
--- a/docs/data/material/components/cards/cards.md
+++ b/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.
diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md
index 816918f92a7201..3e1898118b6ba7 100644
--- a/docs/data/material/components/grid/grid.md
+++ b/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:
diff --git a/docs/data/material/components/grid2/AutoGrid.js b/docs/data/material/components/grid2/AutoGrid.js
index ca9c7ec891ad18..ea1617c9f5e42a 100644
--- a/docs/data/material/components/grid2/AutoGrid.js
+++ b/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',
diff --git a/docs/data/material/components/grid2/AutoGrid.tsx b/docs/data/material/components/grid2/AutoGrid.tsx
index ca9c7ec891ad18..ea1617c9f5e42a 100644
--- a/docs/data/material/components/grid2/AutoGrid.tsx
+++ b/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',
diff --git a/docs/data/material/components/grid2/BasicGrid.js b/docs/data/material/components/grid2/BasicGrid.js
index 86f550e3c5949c..7f167521cfd5d0 100644
--- a/docs/data/material/components/grid2/BasicGrid.js
+++ b/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',
diff --git a/docs/data/material/components/grid2/BasicGrid.tsx b/docs/data/material/components/grid2/BasicGrid.tsx
index 86f550e3c5949c..7f167521cfd5d0 100644
--- a/docs/data/material/components/grid2/BasicGrid.tsx
+++ b/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',
diff --git a/docs/data/material/components/grid2/CenteredElementGrid.js b/docs/data/material/components/grid2/CenteredElementGrid.js
index bb53cea3e4d8ac..0d4fa14b4ac95e 100644
--- a/docs/data/material/components/grid2/CenteredElementGrid.js
+++ b/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 (
diff --git a/docs/data/material/components/grid2/CenteredElementGrid.tsx b/docs/data/material/components/grid2/CenteredElementGrid.tsx
index bb53cea3e4d8ac..0d4fa14b4ac95e 100644
--- a/docs/data/material/components/grid2/CenteredElementGrid.tsx
+++ b/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 (
diff --git a/docs/data/material/components/grid2/ColumnsGrid.js b/docs/data/material/components/grid2/ColumnsGrid.js
index 15ceb2c25893bd..442dbf01bbe105 100644
--- a/docs/data/material/components/grid2/ColumnsGrid.js
+++ b/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',
diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx b/docs/data/material/components/grid2/ColumnsGrid.tsx
index 15ceb2c25893bd..442dbf01bbe105 100644
--- a/docs/data/material/components/grid2/ColumnsGrid.tsx
+++ b/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',
diff --git a/docs/data/material/components/grid2/FullBorderedGrid.js b/docs/data/material/components/grid2/FullBorderedGrid.js
index c586d97ee78659..ccd93a973108dc 100644
--- a/docs/data/material/components/grid2/FullBorderedGrid.js
+++ b/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 (
diff --git a/docs/data/material/components/grid2/FullBorderedGrid.tsx b/docs/data/material/components/grid2/FullBorderedGrid.tsx
index c586d97ee78659..ccd93a973108dc 100644
--- a/docs/data/material/components/grid2/FullBorderedGrid.tsx
+++ b/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 (
diff --git a/docs/data/material/components/grid2/FullWidthGrid.js b/docs/data/material/components/grid2/FullWidthGrid.js
index 641c8eb56ca8f9..94ce3c71790400 100644
--- a/docs/data/material/components/grid2/FullWidthGrid.js
+++ b/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',
diff --git a/docs/data/material/components/grid2/FullWidthGrid.tsx b/docs/data/material/components/grid2/FullWidthGrid.tsx
index 641c8eb56ca8f9..94ce3c71790400 100644
--- a/docs/data/material/components/grid2/FullWidthGrid.tsx
+++ b/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',
diff --git a/docs/data/material/components/grid2/HalfBorderedGrid.js b/docs/data/material/components/grid2/HalfBorderedGrid.js
index 088e91fee523ed..e0c51b84407fd0 100644
--- a/docs/data/material/components/grid2/HalfBorderedGrid.js
+++ b/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 };
diff --git a/docs/data/material/components/grid2/HalfBorderedGrid.tsx b/docs/data/material/components/grid2/HalfBorderedGrid.tsx
index 86559e7b7f2a07..8c08fda0130141 100644
--- a/docs/data/material/components/grid2/HalfBorderedGrid.tsx
+++ b/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;
diff --git a/docs/data/material/components/grid2/NestedGrid.js b/docs/data/material/components/grid2/NestedGrid.js
index acde87b966314e..5bb80f4483644c 100644
--- a/docs/data/material/components/grid2/NestedGrid.js
+++ b/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',
diff --git a/docs/data/material/components/grid2/NestedGrid.tsx b/docs/data/material/components/grid2/NestedGrid.tsx
index acde87b966314e..5bb80f4483644c 100644
--- a/docs/data/material/components/grid2/NestedGrid.tsx
+++ b/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',
diff --git a/docs/data/material/components/grid2/NestedGridColumns.js b/docs/data/material/components/grid2/NestedGridColumns.js
index 6bbb985a425ba7..cbe82b160cf8a5 100644
--- a/docs/data/material/components/grid2/NestedGridColumns.js
+++ b/docs/data/material/components/grid2/NestedGridColumns.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',
diff --git a/docs/data/material/components/grid2/NestedGridColumns.tsx b/docs/data/material/components/grid2/NestedGridColumns.tsx
index 6bbb985a425ba7..cbe82b160cf8a5 100644
--- a/docs/data/material/components/grid2/NestedGridColumns.tsx
+++ b/docs/data/material/components/grid2/NestedGridColumns.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',
diff --git a/docs/data/material/components/grid2/OffsetGrid.js b/docs/data/material/components/grid2/OffsetGrid.js
index 93e52e754fd946..20883b5e6bceef 100644
--- a/docs/data/material/components/grid2/OffsetGrid.js
+++ b/docs/data/material/components/grid2/OffsetGrid.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
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',
diff --git a/docs/data/material/components/grid2/OffsetGrid.tsx b/docs/data/material/components/grid2/OffsetGrid.tsx
index 93e52e754fd946..20883b5e6bceef 100644
--- a/docs/data/material/components/grid2/OffsetGrid.tsx
+++ b/docs/data/material/components/grid2/OffsetGrid.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
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',
diff --git a/docs/data/material/components/grid2/ResponsiveGrid.js b/docs/data/material/components/grid2/ResponsiveGrid.js
index e80fbbdee44bec..2e25849576f911 100644
--- a/docs/data/material/components/grid2/ResponsiveGrid.js
+++ b/docs/data/material/components/grid2/ResponsiveGrid.js
@@ -2,7 +2,7 @@ import * as React from 'react';
import { experimentalStyled as 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',
diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx b/docs/data/material/components/grid2/ResponsiveGrid.tsx
index e80fbbdee44bec..2e25849576f911 100644
--- a/docs/data/material/components/grid2/ResponsiveGrid.tsx
+++ b/docs/data/material/components/grid2/ResponsiveGrid.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { experimentalStyled as 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',
diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.js b/docs/data/material/components/grid2/RowAndColumnSpacing.js
index 60432628c330f7..452c578fe9aa39 100644
--- a/docs/data/material/components/grid2/RowAndColumnSpacing.js
+++ b/docs/data/material/components/grid2/RowAndColumnSpacing.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx
index 60432628c330f7..452c578fe9aa39 100644
--- a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx
+++ b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
diff --git a/docs/data/material/components/grid2/SpacingGrid.js b/docs/data/material/components/grid2/SpacingGrid.js
index 3d8458a87f53fd..2b252f5f4df68a 100644
--- a/docs/data/material/components/grid2/SpacingGrid.js
+++ b/docs/data/material/components/grid2/SpacingGrid.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';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
diff --git a/docs/data/material/components/grid2/SpacingGrid.tsx b/docs/data/material/components/grid2/SpacingGrid.tsx
index 5f5b04cc7acc8d..4b9132af7ffe11 100644
--- a/docs/data/material/components/grid2/SpacingGrid.tsx
+++ b/docs/data/material/components/grid2/SpacingGrid.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';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
diff --git a/docs/data/material/components/grid2/VariableWidthGrid.js b/docs/data/material/components/grid2/VariableWidthGrid.js
index 669561ef0eff1b..0b50197b503b8e 100644
--- a/docs/data/material/components/grid2/VariableWidthGrid.js
+++ b/docs/data/material/components/grid2/VariableWidthGrid.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',
diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx b/docs/data/material/components/grid2/VariableWidthGrid.tsx
index 669561ef0eff1b..0b50197b503b8e 100644
--- a/docs/data/material/components/grid2/VariableWidthGrid.tsx
+++ b/docs/data/material/components/grid2/VariableWidthGrid.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',
diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md
index f0b407444e19eb..cea778689f5c90 100644
--- a/docs/data/material/components/grid2/grid2.md
+++ b/docs/data/material/components/grid2/grid2.md
@@ -1,7 +1,7 @@
---
productId: material-ui
title: React Grid component
-components: PigmentGrid
+components: PigmentGrid, Grid2
githubLabel: 'component: Grid'
materialDesign: https://m2.material.io/design/layout/understanding-layout.html
---
@@ -15,29 +15,6 @@ The columns can be configured with multiple breakpoints to specify the column sp
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
-## What's changed
-
-We built the `Grid` component from scratch in order to:
-
-- Fix [known issues](https://github.com/mui/material-ui/pull/32746) introduced in Material UI v5.
-- Simplify the logic with CSS variables, removing the unnecessary `item` prop and reducing CSS specificity.
-- Introduce a proper fix for [preventing a scrollbar](#prevent-scrollbar) by switching between negative margin approaches.
-- Set negative margins of equal size on all sides of the grid container by default.
-
-Since the new implementation is considered a breaking change, we introduced it as `Unstable_Grid2` to gather feedbacks from the community before making it stable in the next major release of Material UI.
-
-We encourage everyone to try the new version of the `Grid` by visiting the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/).
-
-:::info
-From now on, the `Grid` v1 and `Grid` v2 refer to the import as:
-
-```js
-import Grid from '@mui/material/Grid'; // Grid version 1
-import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
-```
-
-:::
-
## How it works
The grid system is implemented with the `Grid` component:
diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md
index fa1e8c49403b64..ed689aedbde926 100644
--- a/docs/data/material/components/icons/icons.md
+++ b/docs/data/material/components/icons/icons.md
@@ -303,10 +303,10 @@ const theme = createTheme({
## Font vs. SVGs: Which approach to use?
-Both approaches work fine, however there are some subtle differences, especially in terms of performance and rendering quality.
+Both approaches work fine, however, there are some subtle differences, especially in terms of performance and rendering quality.
Whenever possible SVG is preferred as it allows code splitting, supports more icons, and renders faster and better.
-For more details, take a look at [why GitHub migrated from font icons to SVG icons](https://github.blog/2016-02-22-delivering-octicons-with-svg/).
+For more details, take a look at [why GitHub migrated from font icons to SVG icons](https://github.blog/engineering/delivering-octicons-with-svg/).
## Accessibility
diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js
index 5b4106edcb7596..c894e3fac75041 100644
--- a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js
+++ b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js
@@ -2,12 +2,10 @@ import * as React from 'react';
import { styled } from '@mui/material/styles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Masonry from '@mui/lab/Masonry';
-import {
- Accordion,
- AccordionDetails,
- AccordionSummary,
- Typography,
-} from '@mui/material';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx
index 5b4106edcb7596..c894e3fac75041 100644
--- a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx
+++ b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx
@@ -2,12 +2,10 @@ import * as React from 'react';
import { styled } from '@mui/material/styles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Masonry from '@mui/lab/Masonry';
-import {
- Accordion,
- AccordionDetails,
- AccordionSummary,
- Typography,
-} from '@mui/material';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
diff --git a/docs/data/material/customization/palette/AddingColorTokens.js b/docs/data/material/customization/palette/AddingColorTokens.js
index e96c922eb69cdf..6c3007d0aa0b79 100644
--- a/docs/data/material/customization/palette/AddingColorTokens.js
+++ b/docs/data/material/customization/palette/AddingColorTokens.js
@@ -1,8 +1,9 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { blue } from '@mui/material/colors';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
const theme = createTheme({
palette: {
diff --git a/docs/data/material/customization/palette/AddingColorTokens.tsx b/docs/data/material/customization/palette/AddingColorTokens.tsx
index befffec4fad4ef..334c88193d03ac 100644
--- a/docs/data/material/customization/palette/AddingColorTokens.tsx
+++ b/docs/data/material/customization/palette/AddingColorTokens.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { blue } from '@mui/material/colors';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
declare module '@mui/material/styles' {
interface PaletteColor {
diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.js b/docs/data/material/customization/palette/ManuallyProvideCustomColor.js
index c73af734f014c6..ea924fefd85a33 100644
--- a/docs/data/material/customization/palette/ManuallyProvideCustomColor.js
+++ b/docs/data/material/customization/palette/ManuallyProvideCustomColor.js
@@ -1,8 +1,9 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
// Augment the palette to include an ochre color
diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx
index 4e0583ca41861b..bca5cc06c3dfff 100644
--- a/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx
+++ b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
// Augment the palette to include an ochre color
declare module '@mui/material/styles' {
diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js
index 2da583793843b8..dd1316a429fa7d 100644
--- a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js
+++ b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js
@@ -2,9 +2,10 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
import { unstable_capitalize as capitalize } from '@mui/utils';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
const theme = createTheme({
palette: {
diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx
index 09b9f54f289332..c0e493eed90594 100644
--- a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx
+++ b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
import { unstable_capitalize as capitalize } from '@mui/utils';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
const theme = createTheme({
palette: {
diff --git a/docs/data/material/customization/palette/TonalOffset.js b/docs/data/material/customization/palette/TonalOffset.js
index 84c38c941fa7af..73be9e394b79ef 100644
--- a/docs/data/material/customization/palette/TonalOffset.js
+++ b/docs/data/material/customization/palette/TonalOffset.js
@@ -2,8 +2,9 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { blue } from '@mui/material/colors';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
const defaultTonalOffsetTheme = createTheme({
palette: {
diff --git a/docs/data/material/customization/palette/TonalOffset.tsx b/docs/data/material/customization/palette/TonalOffset.tsx
index a8caeda2080537..ac6885e9c1dd7a 100644
--- a/docs/data/material/customization/palette/TonalOffset.tsx
+++ b/docs/data/material/customization/palette/TonalOffset.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { blue } from '@mui/material/colors';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
const defaultTonalOffsetTheme = createTheme({
palette: {
diff --git a/docs/data/material/customization/palette/UsingAugmentColor.js b/docs/data/material/customization/palette/UsingAugmentColor.js
index cc9f5b28ec3c3a..ae14dc3e4b104c 100644
--- a/docs/data/material/customization/palette/UsingAugmentColor.js
+++ b/docs/data/material/customization/palette/UsingAugmentColor.js
@@ -1,8 +1,9 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
// Augment the palette to include a salmon color
diff --git a/docs/data/material/customization/palette/UsingAugmentColor.tsx b/docs/data/material/customization/palette/UsingAugmentColor.tsx
index f40e2acb558dbf..705294f4a8c04d 100644
--- a/docs/data/material/customization/palette/UsingAugmentColor.tsx
+++ b/docs/data/material/customization/palette/UsingAugmentColor.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
// Augment the palette to include a salmon color
declare module '@mui/material/styles' {
diff --git a/docs/data/material/customization/palette/UsingStylesUtils.js b/docs/data/material/customization/palette/UsingStylesUtils.js
index 466167ec1ea73a..b9d8560047f2a7 100644
--- a/docs/data/material/customization/palette/UsingStylesUtils.js
+++ b/docs/data/material/customization/palette/UsingStylesUtils.js
@@ -6,8 +6,9 @@ import {
getContrastRatio,
} from '@mui/material/styles';
import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
// Augment the palette to include a violet color
diff --git a/docs/data/material/customization/palette/UsingStylesUtils.tsx b/docs/data/material/customization/palette/UsingStylesUtils.tsx
index 21a26e95e7c1d8..26934daef8511e 100644
--- a/docs/data/material/customization/palette/UsingStylesUtils.tsx
+++ b/docs/data/material/customization/palette/UsingStylesUtils.tsx
@@ -6,8 +6,9 @@ import {
getContrastRatio,
} from '@mui/material/styles';
import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
// Augment the palette to include a violet color
declare module '@mui/material/styles' {
diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md
index c490ec2d5b4e8d..087e1ac8adced6 100644
--- a/docs/data/material/getting-started/supported-platforms/supported-platforms.md
+++ b/docs/data/material/getting-started/supported-platforms/supported-platforms.md
@@ -37,5 +37,5 @@ Have a look at the older [versions](https://mui.com/versions/) for backward comp
## TypeScript
-Material UI requires a minimum version of TypeScript 3.5.
+Material UI requires a minimum version of TypeScript 4.7.
This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old.
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
index df3148d7fbb465..be0ab712f7423c 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
index 67ef806c5b8819..e981d697a6a8cf 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md
index e781767ed8d904..ab31f6937079e3 100644
--- a/docs/data/material/guides/typescript/typescript.md
+++ b/docs/data/material/guides/typescript/typescript.md
@@ -6,7 +6,7 @@
-Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts) example.
+Material UI requires a minimum version of TypeScript 4.7. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts) example.
For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`:
diff --git a/docs/data/material/integrations/routing/ListRouter.js b/docs/data/material/integrations/routing/ListRouter.js
index 23db2bb775557f..950cf175d56a72 100644
--- a/docs/data/material/integrations/routing/ListRouter.js
+++ b/docs/data/material/integrations/routing/ListRouter.js
@@ -1,8 +1,9 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import List from '@mui/material/List';
-import Box from '@mui/material/Box';
import ListItem from '@mui/material/ListItem';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
import Paper from '@mui/material/Paper';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
@@ -44,12 +45,10 @@ function ListItemLink(props) {
const { icon, primary, to } = props;
return (
-
-
- {icon ? {icon} : null}
-
-
-
+
+ {icon ? {icon} : null}
+
+
);
}
@@ -78,13 +77,21 @@ export default function ListRouter() {
- } />
- } />
+
+ } />
+
+
+ } />
+
-
-
+
+
+
+
+
+
diff --git a/docs/data/material/integrations/routing/ListRouter.tsx b/docs/data/material/integrations/routing/ListRouter.tsx
index 58c05b3d7d6962..a711dbbd6be900 100644
--- a/docs/data/material/integrations/routing/ListRouter.tsx
+++ b/docs/data/material/integrations/routing/ListRouter.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
import List from '@mui/material/List';
-import Box from '@mui/material/Box';
import ListItem from '@mui/material/ListItem';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
import Paper from '@mui/material/Paper';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
@@ -48,12 +49,10 @@ function ListItemLink(props: ListItemLinkProps) {
const { icon, primary, to } = props;
return (
-
-
- {icon ? {icon} : null}
-
-
-
+
+ {icon ? {icon} : null}
+
+
);
}
@@ -76,13 +75,21 @@ export default function ListRouter() {
- } />
- } />
+
+ } />
+
+
+ } />
+
-
-
+
+
+
+
+
+
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
index 99d5db156b13ef..a3e87cbb508950 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -550,8 +550,8 @@ Pigment CSS can extract the `sx` prop from any JSX element, so there is no need
-
- ...
-
-+
-+
++
++
+ ...
+
)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 36a5ec48e4c804..d5e82f71a3a54c 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -86,7 +86,7 @@ pnpm add react@ react-dom@
### Update TypeScript
-The minimum supported version of TypeScript has been increased from v3.5 to 4.1.
+The minimum supported version of TypeScript has been increased from v3.5 to 4.7.
:::info
We align with types released by [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) (published on npm under the `@types` namespace).
@@ -191,13 +191,27 @@ The `children` passed to the Loading Button component is now wrapped in a `
```
+:::warning
+You need to modify the import from `@mui/material/Unstable_Grid2` to `@mui/material/Grid2` before running the codemod.
+:::
+
If you have custom breakpoints, the change is the same:
```diff
diff --git a/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js b/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js
deleted file mode 100644
index 9540a6c296583c..00000000000000
--- a/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Grid2 from '@mui/material/Unstable_Grid2';
-import Typography from '@mui/material/Typography';
-
-export default function GridDisableEqualOverflow() {
- return (
-
-
-
-
- ver.2
- Top and left overflow
-
-
-
-
- The overflow represents the negative margin of the grid.
-
-
- );
-}
diff --git a/docs/data/material/migration/migration-grid-v2/GridsDiff.js b/docs/data/material/migration/migration-grid-v2/GridsDiff.js
index 05a8e81dd41117..9c75b750dd81d9 100644
--- a/docs/data/material/migration/migration-grid-v2/GridsDiff.js
+++ b/docs/data/material/migration/migration-grid-v2/GridsDiff.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
-import Grid2 from '@mui/material/Unstable_Grid2';
+import Grid2 from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
export default function GridsDiff() {
diff --git a/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md
index 516605b47229d4..d885b13b4caaf0 100644
--- a/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md
+++ b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md
@@ -11,22 +11,16 @@ Grid v2 has several new feature and many improvements over the original:
- All grids are considered items without specifying the `item` prop.
- The long-awaited [offset feature](/material-ui/react-grid2/#offset) gives you more flexibility for positioning.
- [Nested grids](/material-ui/react-grid2/#nested-grid) now have no depth limitation.
-- The `disableEqualOverflow` flag disables the horizontal scrollbar in smaller viewports.
-
-:::info
-Grid v2 is currently considered `Unstable_` as we give the community time to try it out and offer feedback.
-We will make it stable and deprecate v1 in the next major release of Material UI.
-:::
## With Material UI v4
-The Grid v2 is introduced in Material UI v5, so you have to follow the [Material UI migration guide](/material-ui/migration/migration-v4/) first.
+The Grid v2 is introduced in Material UI v5, so you have to follow the [Material UI v5 migration guide](/material-ui/migration/migration-v4/) first.
## With Material UI v5
-The migration is expected to be smooth since most of the APIs remains the same. However, there is one breaking change that we want to clarify:
-
-The default implementation of the negative margin in Grid v2 is spread equally on all sides (same as the Grid in Material UI v4).
+The migration is expected to be smooth since most of the APIs remains the same.
+There is one breaking change that we want to clarify:
+The default implementation of the negative margin in Grid v2 is spread equally on all sides.
{{"demo": "GridsDiff.js", "bg": true, "hideToolbar": true}}
@@ -48,10 +42,7 @@ The `item` and `zeroMinWidth` props have been removed in Grid v2:
### Negative margins
-If you want to apply the negative margins similar to the Grid v1, specify `disableEqualOverflow: true` on the grid container:
-
-{{"demo": "GridDisableEqualOverflow.js", "bg": true, "hideToolbar": true}}
-
+If you want to apply the negative margins similar to the Grid v1, specify `disableEqualOverflow={true}` on the grid container.
To apply to all grids, add the default props to the theme:
```js
@@ -79,6 +70,20 @@ function Demo() {
}
```
+## With Material UI v6
+
+The Grid v2 is marked as stable in Material UI v6, so the `Unstable_` prefix is removed:
+
+```diff
+-import Grid from '@mui/material/Unstable_Grid2';
++import Grid from '@mui/material/Grid2';
+```
+
+Alongside the stabilization, the API has been improved.
+You can see the changes and further details of how to migrate in the [Material UI v6 migration guide](/material-ui/migrating-to-v6/).
+
+Finally, the original Grid component is deprecated and will be removed in the future, so we highly encourage you to migrate to Grid v2.
+
## Documentation page
Check out [Grid v2 docs](/material-ui/react-grid2/#fluid-grids) for all the demos and code samples.
diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md
index 09c37a3fe69ac5..f2f179a7b0d820 100644
--- a/docs/data/material/migration/migration-v4/v5-component-changes.md
+++ b/docs/data/material/migration/migration-v4/v5-component-changes.md
@@ -772,7 +772,7 @@ If you need negative margins on all sides, we recommend using the new Grid v2 in
```diff
- import Grid from '@mui/material/Grid';
-+ import Grid from '@mui/material/Unstable_Grid2';
++ import Grid from '@mui/material/Grid2';
```
To learn more about the Grid v2, check out the [demos](/material-ui/react-grid2/#whats-changed) and the [Grid migration guide](/material-ui/migration/migration-grid-v2/).
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 3df0800866aa33..bac35ba97326ea 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -106,8 +106,8 @@ const pages: MuiPage[] = [
children: [
{ pathname: '/material-ui/react-box' },
{ pathname: '/material-ui/react-container' },
- { pathname: '/material-ui/react-grid' },
- { pathname: '/material-ui/react-grid2', title: 'Grid v2', newFeature: true },
+ { pathname: '/material-ui/react-grid', deprecated: true },
+ { pathname: '/material-ui/react-grid2', title: 'Grid v2' },
{ pathname: '/material-ui/react-stack' },
{ pathname: '/material-ui/react-image-list', title: 'Image List' },
{ pathname: '/material-ui/react-hidden' },
diff --git a/docs/data/material/pagesApi.js b/docs/data/material/pagesApi.js
index 0d8fdd2ebbda25..2c6f1e2aca5155 100644
--- a/docs/data/material/pagesApi.js
+++ b/docs/data/material/pagesApi.js
@@ -48,6 +48,7 @@ module.exports = [
{ pathname: '/material-ui/api/form-label' },
{ pathname: '/material-ui/api/global-styles' },
{ pathname: '/material-ui/api/grid' },
+ { pathname: '/material-ui/api/grid-2' },
{ pathname: '/material-ui/api/grow' },
{ pathname: '/material-ui/api/hidden' },
{ pathname: '/material-ui/api/icon' },
diff --git a/docs/data/system/components/grid/AutoGrid.js b/docs/data/system/components/grid/AutoGrid.js
index 5bca5c0db7dde2..7e6795574e63e0 100644
--- a/docs/data/system/components/grid/AutoGrid.js
+++ b/docs/data/system/components/grid/AutoGrid.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/AutoGrid.tsx b/docs/data/system/components/grid/AutoGrid.tsx
index 5bca5c0db7dde2..7e6795574e63e0 100644
--- a/docs/data/system/components/grid/AutoGrid.tsx
+++ b/docs/data/system/components/grid/AutoGrid.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/AutoGridNoWrap.js b/docs/data/system/components/grid/AutoGridNoWrap.js
index 971db7e1721af4..5e28c136639e95 100644
--- a/docs/data/system/components/grid/AutoGridNoWrap.js
+++ b/docs/data/system/components/grid/AutoGridNoWrap.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
diff --git a/docs/data/system/components/grid/AutoGridNoWrap.tsx b/docs/data/system/components/grid/AutoGridNoWrap.tsx
index 971db7e1721af4..5e28c136639e95 100644
--- a/docs/data/system/components/grid/AutoGridNoWrap.tsx
+++ b/docs/data/system/components/grid/AutoGridNoWrap.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
diff --git a/docs/data/system/components/grid/BasicGrid.js b/docs/data/system/components/grid/BasicGrid.js
index 9d119cd6b3e405..69f1e8c48390e7 100644
--- a/docs/data/system/components/grid/BasicGrid.js
+++ b/docs/data/system/components/grid/BasicGrid.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/BasicGrid.tsx b/docs/data/system/components/grid/BasicGrid.tsx
index 9d119cd6b3e405..69f1e8c48390e7 100644
--- a/docs/data/system/components/grid/BasicGrid.tsx
+++ b/docs/data/system/components/grid/BasicGrid.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/ColumnsGrid.js b/docs/data/system/components/grid/ColumnsGrid.js
index 3294d5aa72922f..9d9f131ebc1842 100644
--- a/docs/data/system/components/grid/ColumnsGrid.js
+++ b/docs/data/system/components/grid/ColumnsGrid.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/ColumnsGrid.tsx b/docs/data/system/components/grid/ColumnsGrid.tsx
index 3294d5aa72922f..9d9f131ebc1842 100644
--- a/docs/data/system/components/grid/ColumnsGrid.tsx
+++ b/docs/data/system/components/grid/ColumnsGrid.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/CustomBreakpointsGrid.js b/docs/data/system/components/grid/CustomBreakpointsGrid.js
index d51105cdb55559..d0c5c09a73a2b5 100644
--- a/docs/data/system/components/grid/CustomBreakpointsGrid.js
+++ b/docs/data/system/components/grid/CustomBreakpointsGrid.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/system';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/FullWidthGrid.js b/docs/data/system/components/grid/FullWidthGrid.js
index e86bf34a209edc..592739cdbcc5e7 100644
--- a/docs/data/system/components/grid/FullWidthGrid.js
+++ b/docs/data/system/components/grid/FullWidthGrid.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/FullWidthGrid.tsx b/docs/data/system/components/grid/FullWidthGrid.tsx
index e86bf34a209edc..592739cdbcc5e7 100644
--- a/docs/data/system/components/grid/FullWidthGrid.tsx
+++ b/docs/data/system/components/grid/FullWidthGrid.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/NestedGrid.js b/docs/data/system/components/grid/NestedGrid.js
index 267c08c3881666..f4e4399b05b924 100644
--- a/docs/data/system/components/grid/NestedGrid.js
+++ b/docs/data/system/components/grid/NestedGrid.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/NestedGrid.tsx b/docs/data/system/components/grid/NestedGrid.tsx
index 267c08c3881666..f4e4399b05b924 100644
--- a/docs/data/system/components/grid/NestedGrid.tsx
+++ b/docs/data/system/components/grid/NestedGrid.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/OffsetGrid.js b/docs/data/system/components/grid/OffsetGrid.js
index 7143b5f1b45e81..c17f8451fda021 100644
--- a/docs/data/system/components/grid/OffsetGrid.js
+++ b/docs/data/system/components/grid/OffsetGrid.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/OffsetGrid.tsx b/docs/data/system/components/grid/OffsetGrid.tsx
index 7143b5f1b45e81..c17f8451fda021 100644
--- a/docs/data/system/components/grid/OffsetGrid.tsx
+++ b/docs/data/system/components/grid/OffsetGrid.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/ResponsiveGrid.js b/docs/data/system/components/grid/ResponsiveGrid.js
index 7fd174a2bc301c..abd60378e9d595 100644
--- a/docs/data/system/components/grid/ResponsiveGrid.js
+++ b/docs/data/system/components/grid/ResponsiveGrid.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/ResponsiveGrid.tsx b/docs/data/system/components/grid/ResponsiveGrid.tsx
index 7fd174a2bc301c..abd60378e9d595 100644
--- a/docs/data/system/components/grid/ResponsiveGrid.tsx
+++ b/docs/data/system/components/grid/ResponsiveGrid.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/RowAndColumnSpacing.js b/docs/data/system/components/grid/RowAndColumnSpacing.js
index fded5d876109f5..bc9c0caa12fae9 100644
--- a/docs/data/system/components/grid/RowAndColumnSpacing.js
+++ b/docs/data/system/components/grid/RowAndColumnSpacing.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import styled from '@mui/system/styled';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import Box from '@mui/system/Box';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/RowAndColumnSpacing.tsx b/docs/data/system/components/grid/RowAndColumnSpacing.tsx
index fded5d876109f5..bc9c0caa12fae9 100644
--- a/docs/data/system/components/grid/RowAndColumnSpacing.tsx
+++ b/docs/data/system/components/grid/RowAndColumnSpacing.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import styled from '@mui/system/styled';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import Box from '@mui/system/Box';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/SpacingGrid.js b/docs/data/system/components/grid/SpacingGrid.js
index 4141d66e7934ed..391d18ad7b340f 100644
--- a/docs/data/system/components/grid/SpacingGrid.js
+++ b/docs/data/system/components/grid/SpacingGrid.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
diff --git a/docs/data/system/components/grid/SpacingGrid.tsx b/docs/data/system/components/grid/SpacingGrid.tsx
index dac4291794e53a..a1e34f3ad3fbb0 100644
--- a/docs/data/system/components/grid/SpacingGrid.tsx
+++ b/docs/data/system/components/grid/SpacingGrid.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
diff --git a/docs/data/system/components/grid/VariableWidthGrid.js b/docs/data/system/components/grid/VariableWidthGrid.js
index cc3e7219c95056..539b0e71198ff8 100644
--- a/docs/data/system/components/grid/VariableWidthGrid.js
+++ b/docs/data/system/components/grid/VariableWidthGrid.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/VariableWidthGrid.tsx b/docs/data/system/components/grid/VariableWidthGrid.tsx
index cc3e7219c95056..539b0e71198ff8 100644
--- a/docs/data/system/components/grid/VariableWidthGrid.tsx
+++ b/docs/data/system/components/grid/VariableWidthGrid.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/system/Box';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
diff --git a/docs/data/system/components/grid/grid.md b/docs/data/system/components/grid/grid.md
index 9441ce63c7d66e..dc26f2b19a7b84 100644
--- a/docs/data/system/components/grid/grid.md
+++ b/docs/data/system/components/grid/grid.md
@@ -21,7 +21,6 @@ The grid system is implemented with the `Grid` component:
- Item widths are set in percentages, so they're always fluid and sized relative to their parent element.
- There are five default grid breakpoints: xs, sm, md, lg, and xl. If you need custom breakpoints, check out [custom breakpoints grid](#custom-breakpoints).
- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint constraints](/material-ui/customization/breakpoints/#default-breakpoints).
-- It uses negative margin and padding technique to create [gap-like](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) between children.
- It **does not** have the concept of rows. Meaning, you can't make the children span to multiple rows. If you need to do that, we recommend to use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) instead.
- It **does not** offer auto-placement children feature. It will try to fit the children one by one and if there is not enough space, the rest of the children will start on the next line and so on. If you need the auto-placement feature, we recommend to use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) instead.
diff --git a/docs/data/system/components/stack/InteractiveStack.js b/docs/data/system/components/stack/InteractiveStack.js
index 140e9c5fff789b..1f4a0926e900d7 100644
--- a/docs/data/system/components/stack/InteractiveStack.js
+++ b/docs/data/system/components/stack/InteractiveStack.js
@@ -5,7 +5,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import Paper from '@mui/material/Paper';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
diff --git a/docs/data/system/components/stack/InteractiveStack.tsx b/docs/data/system/components/stack/InteractiveStack.tsx
index dd612ca6ca5b7b..95a6bb71b432eb 100644
--- a/docs/data/system/components/stack/InteractiveStack.tsx
+++ b/docs/data/system/components/stack/InteractiveStack.tsx
@@ -5,7 +5,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import Paper from '@mui/material/Paper';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
-import Grid from '@mui/system/Unstable_Grid';
+import Grid from '@mui/system/Grid';
import Stack, { StackProps } from '@mui/system/Stack';
import { styled } from '@mui/system';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js
index 7753788ec198a3..2de7826af6e29f 100644
--- a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js
+++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { Box, Stack } from '@mui/system';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
import { createTheme, ThemeProvider } from '@mui/material/styles';
// Retain type safety.
diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx
index 78c7db94c99363..01269e928daaea 100644
--- a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx
+++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { Box, Stack } from '@mui/system';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
import { createTheme, ThemeProvider } from '@mui/material/styles';
// Retain type safety.
diff --git a/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md
index cb9012f86fb63a..bd24626f5ac58b 100644
--- a/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md
@@ -37,13 +37,27 @@ You can follow progress on https://github.com/mui/material-ui/issues/30671.
### Grid
-The `Grid` component was updated to match the API of the new `PigmentGrid` component, to allow interoperability between the two:
+The `Grid` component was updated and stabilized:
-- The previous size and offset props were replaced with the `size` and `offset` props
+- The previous size (`xs`, `sm`, `md`, ...) and offset (`xsOffset`, `smOffset`, `mdOffset`, ...) props, which were named after the theme's breakpoints, were replaced with the `size` and `offset` props.
- The spacing mechanism was reworked to use the `gap` CSS property.
This brings some breaking changes described in the following sections.
+#### Stabilized API
+
+The `Grid` component API was stabilized, so its import no longer contains the `Unstable_` prefix:
+
+```diff
+- import { Unstable_Grid as Grid } from '@mui/system';
++ import { Grid } from '@mui/system';
+```
+
+```diff
+- import Grid from '@mui/system/Unstable_Grid';
++ import Grid from '@mui/system/Grid';
+```
+
#### Size and offset props
Previously, the size and offset props were named corresponding to the theme's breakpoints.
@@ -85,6 +99,10 @@ Use this codemod to migrate your project to the new size and offset props:
npx @mui/codemod@next v6.0.0/grid-v2-props
```
+:::warning
+You need to modify the import from `@mui/system/Unstable_Grid` to `@mui/system/Grid` before running the codemod.
+:::
+
If you have custom breakpoints, the change is the same:
```diff
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 23c6188e700b86..10a11a86e00f33 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -98,8 +98,14 @@ export default withDocsInfra({
...config.resolve.alias,
// for 3rd party packages with dependencies in this repository
+ '@mui/material$': path.resolve(workspaceRoot, 'packages/mui-material/src/index.js'),
'@mui/material': path.resolve(workspaceRoot, 'packages/mui-material/src'),
+
'@mui/docs': path.resolve(workspaceRoot, 'packages/mui-docs/src'),
+ '@mui/icons-material$': path.resolve(
+ workspaceRoot,
+ 'packages/mui-icons-material/lib/esm/index.js',
+ ),
'@mui/icons-material': path.resolve(workspaceRoot, 'packages/mui-icons-material/lib/esm'),
'@mui/lab': path.resolve(workspaceRoot, 'packages/mui-lab/src'),
'@mui/styled-engine': path.resolve(workspaceRoot, 'packages/mui-styled-engine/src'),
diff --git a/docs/package.json b/docs/package.json
index 5da4febdc8544b..0edc8bc33b826f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,15 +20,15 @@
},
"dependencies": {
"@babel/core": "^7.24.9",
- "@babel/runtime": "^7.24.8",
- "@babel/runtime-corejs2": "^7.24.8",
+ "@babel/runtime": "^7.25.0",
+ "@babel/runtime-corejs2": "^7.25.0",
"@docsearch/react": "^3.6.1",
- "@emotion/cache": "^11.13.0",
+ "@emotion/cache": "^11.13.1",
"@emotion/react": "^11.13.0",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.13.0",
- "@fortawesome/fontawesome-svg-core": "^6.5.2",
- "@fortawesome/free-solid-svg-icons": "^6.5.2",
+ "@fortawesome/fontawesome-svg-core": "^6.6.0",
+ "@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"@mui/base": "workspace:*",
"@mui/docs": "workspace:^",
@@ -43,17 +43,17 @@
"@mui/system": "workspace:^",
"@mui/types": "workspace:^",
"@mui/utils": "workspace:^",
- "@mui/x-charts": "7.10.0",
- "@mui/x-data-grid": "7.10.0",
- "@mui/x-data-grid-generator": "7.10.0",
- "@mui/x-data-grid-premium": "7.10.0",
- "@mui/x-data-grid-pro": "7.10.0",
- "@mui/x-date-pickers": "7.10.0",
- "@mui/x-date-pickers-pro": "7.10.0",
- "@mui/x-license": "7.10.0",
- "@mui/x-tree-view": "7.10.0",
+ "@mui/x-charts": "7.11.1",
+ "@mui/x-data-grid": "7.11.1",
+ "@mui/x-data-grid-generator": "7.11.1",
+ "@mui/x-data-grid-premium": "7.11.1",
+ "@mui/x-data-grid-pro": "7.11.1",
+ "@mui/x-date-pickers": "7.11.1",
+ "@mui/x-date-pickers-pro": "7.11.1",
+ "@mui/x-license": "7.11.1",
+ "@mui/x-tree-view": "7.11.1",
"@popperjs/core": "^2.11.8",
- "@react-spring/web": "^9.7.3",
+ "@react-spring/web": "^9.7.4",
"autoprefixer": "^10.4.19",
"autosuggest-highlight": "^3.3.4",
"babel-plugin-module-resolver": "^5.0.2",
@@ -85,7 +85,7 @@
"next": "^14.2.5",
"notistack": "3.0.1",
"nprogress": "^0.2.0",
- "postcss": "^8.4.39",
+ "postcss": "^8.4.40",
"postcss-import": "^16.1.0",
"prop-types": "^15.8.1",
"react": "^18.3.1",
@@ -99,7 +99,7 @@
"react-router-dom": "^6.24.1",
"react-runner": "^1.0.5",
"react-simple-code-editor": "^0.14.1",
- "react-spring": "^9.7.3",
+ "react-spring": "^9.7.4",
"react-swipeable-views": "^0.14.0",
"react-transition-group": "^4.4.5",
"react-virtuoso": "^4.7.13",
@@ -112,7 +112,7 @@
"webpack-bundle-analyzer": "^4.10.2"
},
"devDependencies": {
- "@babel/plugin-transform-react-constant-elements": "^7.24.7",
+ "@babel/plugin-transform-react-constant-elements": "^7.25.1",
"@babel/preset-typescript": "^7.24.7",
"@mui/internal-docs-utils": "workspace:^",
"@mui/internal-scripts": "workspace:^",
@@ -121,7 +121,7 @@
"@types/chai": "^4.3.16",
"@types/css-mediaquery": "^0.1.4",
"@types/json2mq": "^0.2.2",
- "@types/node": "^18.19.41",
+ "@types/node": "^18.19.42",
"@types/prop-types": "^15.7.12",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
@@ -129,13 +129,13 @@
"@types/react-transition-group": "^4.4.10",
"@types/react-window": "^1.8.8",
"@types/stylis": "^4.2.0",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"cross-fetch": "^4.0.0",
"gm": "^1.25.0",
"marked": "^13.0.2",
"playwright": "^1.45.3",
"prettier": "^3.3.3",
- "tailwindcss": "^3.4.4",
+ "tailwindcss": "^3.4.7",
"yargs": "^17.7.2"
}
}
diff --git a/docs/pages/material-ui/api/grid-2.js b/docs/pages/material-ui/api/grid-2.js
new file mode 100644
index 00000000000000..39e0924da9ff1b
--- /dev/null
+++ b/docs/pages/material-ui/api/grid-2.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './grid-2.json';
+
+export default function Page(props) {
+ const { descriptions, pageContent } = props;
+ return ;
+}
+
+Page.getInitialProps = () => {
+ const req = require.context('docs/translations/api-docs/grid-2', false, /\.\/grid-2.*.json$/);
+ const descriptions = mapApiPageTranslations(req);
+
+ return {
+ descriptions,
+ pageContent: jsonPageContent,
+ };
+};
diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json
new file mode 100644
index 00000000000000..08188af737d19a
--- /dev/null
+++ b/docs/pages/material-ui/api/grid-2.json
@@ -0,0 +1,65 @@
+{
+ "props": {
+ "children": { "type": { "name": "node" } },
+ "columns": {
+ "type": {
+ "name": "union",
+ "description": "Array<number> | number | object"
+ }
+ },
+ "columnSpacing": {
+ "type": {
+ "name": "union",
+ "description": "Array<number | string> | number | object | string"
+ }
+ },
+ "container": { "type": { "name": "bool" } },
+ "direction": {
+ "type": {
+ "name": "union",
+ "description": "'column-reverse' | 'column' | 'row-reverse' | 'row' | Array<'column-reverse' | 'column' | 'row-reverse' | 'row'> | object"
+ }
+ },
+ "offset": {
+ "type": {
+ "name": "union",
+ "description": "string | number | Array<string | number> | object"
+ }
+ },
+ "rowSpacing": {
+ "type": {
+ "name": "union",
+ "description": "Array<number | string> | number | object | string"
+ }
+ },
+ "size": {
+ "type": {
+ "name": "union",
+ "description": "string | bool | number | Array<string | bool | number> | object"
+ }
+ },
+ "spacing": {
+ "type": {
+ "name": "union",
+ "description": "Array<number | string> | number | object | string"
+ }
+ },
+ "wrap": {
+ "type": {
+ "name": "enum",
+ "description": "'nowrap' | 'wrap-reverse' | 'wrap'"
+ }
+ }
+ },
+ "name": "Grid2",
+ "imports": ["import Grid2 from '@mui/material/Grid2';", "import { Grid2 } from '@mui/material';"],
+ "classes": [],
+ "spread": true,
+ "themeDefaultProps": true,
+ "muiName": "MuiGrid2",
+ "forwardsRefTo": "HTMLElement",
+ "filename": "/packages/mui-material/src/Grid2/Grid2.tsx",
+ "inheritance": null,
+ "demos": "
",
"cssComponent": true
diff --git a/docs/src/MuiPage.ts b/docs/src/MuiPage.ts
index 36296ce8f71096..27fe43ada7a09f 100644
--- a/docs/src/MuiPage.ts
+++ b/docs/src/MuiPage.ts
@@ -57,6 +57,10 @@ export interface MuiPage {
* Indicates the item is in beta release.
*/
beta?: boolean;
+ /**
+ * Indicates if the pages are regarding some deprecated API.
+ */
+ deprecated?: boolean;
}
export interface OrderedMuiPage extends MuiPage {
diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx
index 855df28a277688..270d092bb82bc0 100644
--- a/docs/src/components/about/HowToSupport.tsx
+++ b/docs/src/components/about/HowToSupport.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
index b67dcd84172892..01e386c87e27ee 100644
--- a/docs/src/components/about/OurValues.tsx
+++ b/docs/src/components/about/OurValues.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx
index 51adddc5596514..582a6fcb43cc16 100644
--- a/docs/src/components/about/Team.tsx
+++ b/docs/src/components/about/Team.tsx
@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Paper, { PaperProps } from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
diff --git a/docs/src/components/careers/CareersFaq.tsx b/docs/src/components/careers/CareersFaq.tsx
index b3a385cfc9a4ba..ceab7d1f7dc573 100644
--- a/docs/src/components/careers/CareersFaq.tsx
+++ b/docs/src/components/careers/CareersFaq.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
diff --git a/docs/src/components/careers/PerksBenefits.tsx b/docs/src/components/careers/PerksBenefits.tsx
index ea43dac6a546a2..91ed9781f33423 100644
--- a/docs/src/components/careers/PerksBenefits.tsx
+++ b/docs/src/components/careers/PerksBenefits.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';
import Stack from '@mui/material/Stack';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx
index 3165859c29d65f..d8a8e3c79a515e 100644
--- a/docs/src/components/home/CompaniesGrid.tsx
+++ b/docs/src/components/home/CompaniesGrid.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage';
export const CORE_CUSTOMERS: Array = [
diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
index aa9ba2ccf9f79d..5d89c01da5672f 100644
--- a/docs/src/components/home/DiamondSponsors.tsx
+++ b/docs/src/components/home/DiamondSponsors.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { useInView } from 'react-intersection-observer';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
index b1e68a7e45ebc7..ef92649a1075b6 100644
--- a/docs/src/components/home/GoldSponsors.tsx
+++ b/docs/src/components/home/GoldSponsors.tsx
@@ -4,7 +4,7 @@ import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import AddRounded from '@mui/icons-material/AddRounded';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import SponsorCard from 'docs/src/components/home/SponsorCard';
import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx
index 854a470a0aee7c..6e800c3dddfcad 100644
--- a/docs/src/components/home/ProductSuite.tsx
+++ b/docs/src/components/home/ProductSuite.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import dynamic from 'next/dynamic';
import { useInView } from 'react-intersection-observer';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Box, { BoxProps } from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Section from 'docs/src/layouts/Section';
diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx
index 30cf0e8a81d135..8d8316d68bd1e6 100644
--- a/docs/src/components/home/UserFeedbacks.tsx
+++ b/docs/src/components/home/UserFeedbacks.tsx
@@ -3,7 +3,7 @@ import { alpha } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import MuiStatistics from 'docs/src/components/home/MuiStatistics';
const TESTIMONIALS = [
diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx
index 7f06c970ff3911..de021e0c070de6 100644
--- a/docs/src/components/home/ValueProposition.tsx
+++ b/docs/src/components/home/ValueProposition.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import InvertColorsRoundedIcon from '@mui/icons-material/InvertColorsRounded';
import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded';
import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx
index 6e13b94c077914..ccff1240d3f2c2 100644
--- a/docs/src/components/pricing/PricingFAQ.tsx
+++ b/docs/src/components/pricing/PricingFAQ.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Link from '@mui/material/Link';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
index 97709951c7ed83..f0ecbab9d3000b 100644
--- a/docs/src/components/productBaseUI/BaseUIComponents.tsx
+++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { styled as materialStyled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import SmartButtonRoundedIcon from '@mui/icons-material/SmartButtonRounded';
import TabUnselectedRoundedIcon from '@mui/icons-material/TabUnselectedRounded';
diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx
index 6009fd3579227f..cf9ea8da96761d 100644
--- a/docs/src/components/productBaseUI/BaseUIEnd.tsx
+++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { alpha } from '@mui/material/styles';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Typography from '@mui/material/Typography';
diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx
index ccf05616baf70a..a42d450154ceb1 100644
--- a/docs/src/components/productBaseUI/BaseUISummary.tsx
+++ b/docs/src/components/productBaseUI/BaseUISummary.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded';
import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded';
diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
index 6f5c85def523df..c7c19b95ef433a 100644
--- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx
+++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import { alpha } from '@mui/material/styles';
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';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx
index a1385a49445658..885c798d8c1515 100644
--- a/docs/src/components/productDesignKit/DesignKitDemo.tsx
+++ b/docs/src/components/productDesignKit/DesignKitDemo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Fade from '@mui/material/Fade';
import Typography from '@mui/material/Typography';
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
index e54fef7f10753b..daed191ae85a38 100644
--- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx
+++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Button from '@mui/material/Button';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import Paper from '@mui/material/Paper';
diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx
index 4a93862f824017..51ee8cf70d5342 100644
--- a/docs/src/components/productDesignKit/DesignKitValues.tsx
+++ b/docs/src/components/productDesignKit/DesignKitValues.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Palette from '@mui/icons-material/Palette';
import LibraryBooks from '@mui/icons-material/LibraryBooks';
import { InfoCard } from '@mui/docs/InfoCard';
diff --git a/docs/src/components/productDesignKit/SyncFeatures.tsx b/docs/src/components/productDesignKit/SyncFeatures.tsx
index a5246c8ba7b8bc..596270f65cdd1f 100644
--- a/docs/src/components/productDesignKit/SyncFeatures.tsx
+++ b/docs/src/components/productDesignKit/SyncFeatures.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Fade from '@mui/material/Fade';
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index d48acb6212aca2..94fb2a407b8e7e 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -3,7 +3,7 @@ import { CssVarsProvider } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Stack from '@mui/material/Stack';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
diff --git a/docs/src/components/productMaterial/MaterialDesignKits.tsx b/docs/src/components/productMaterial/MaterialDesignKits.tsx
index 1c216e201809b7..dcd432db4d2de0 100644
--- a/docs/src/components/productMaterial/MaterialDesignKits.tsx
+++ b/docs/src/components/productMaterial/MaterialDesignKits.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Fade from '@mui/material/Fade';
import Typography from '@mui/material/Typography';
import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded';
diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx
index c43278f35b5e59..f38fcdae423c17 100644
--- a/docs/src/components/productMaterial/MaterialEnd.tsx
+++ b/docs/src/components/productMaterial/MaterialEnd.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Typography from '@mui/material/Typography';
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index 157170f2f376c6..df868fd09ed7e3 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.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';
import Typography from '@mui/material/Typography';
import DevicesOtherRoundedIcon from '@mui/icons-material/DevicesOtherRounded';
import SwitchAccessShortcutRoundedIcon from '@mui/icons-material/SwitchAccessShortcutRounded';
diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 4e93f5e64ad3a4..9b30439d4a044e 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { CssVarsProvider } from '@mui/material/styles';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
diff --git a/docs/src/components/productTemplate/TemplateDemo.tsx b/docs/src/components/productTemplate/TemplateDemo.tsx
index ab785734a060e4..3a8b392f97cedf 100644
--- a/docs/src/components/productTemplate/TemplateDemo.tsx
+++ b/docs/src/components/productTemplate/TemplateDemo.tsx
@@ -3,7 +3,7 @@ import SwipeableViews from 'react-swipeable-views';
import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import LaunchRounded from '@mui/icons-material/LaunchRounded';
import KeyboardArrowLeftRounded from '@mui/icons-material/KeyboardArrowLeftRounded';
diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx
index a83c5f343d771f..9c6a9a25eb36ad 100644
--- a/docs/src/components/productX/XComponents.tsx
+++ b/docs/src/components/productX/XComponents.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
index 02ac7c7327758a..8dcaa8acdea390 100644
--- a/docs/src/components/productX/XDataGrid.tsx
+++ b/docs/src/components/productX/XDataGrid.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx
index 24f8efbf012525..70d7889ac777d6 100644
--- a/docs/src/components/productX/XPlans.tsx
+++ b/docs/src/components/productX/XPlans.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx
index 6ddd927c2aeca1..67e414c526769d 100644
--- a/docs/src/components/productX/XRoadmap.tsx
+++ b/docs/src/components/productX/XRoadmap.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
diff --git a/docs/src/components/productX/XTheming.tsx b/docs/src/components/productX/XTheming.tsx
index 4b8fb72becd8db..f248030852792d 100644
--- a/docs/src/components/productX/XTheming.tsx
+++ b/docs/src/components/productX/XTheming.tsx
@@ -8,7 +8,7 @@ import {
import { useDemoData } from '@mui/x-data-grid-generator';
import { CssVarsProvider } from '@mui/material/styles';
import { red } from '@mui/material/colors';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Section from 'docs/src/layouts/Section';
diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
index 0a2598466f3f69..e860607994d0f5 100644
--- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import clsx from 'clsx';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, SxProps } from '@mui/material/styles';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import { Divider, IconButton, SxProps } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
import {
brandingDarkTheme as darkTheme,
brandingLightTheme as lightTheme,
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index cb0649232521eb..b1125b6210398f 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -288,6 +288,7 @@ function reduceChildRoutes(context) {
planned={page.planned}
unstable={page.unstable}
beta={page.beta}
+ deprecated={page.deprecated}
plan={page.plan}
icon={page.icon}
subheader={subheader}
@@ -322,6 +323,7 @@ function reduceChildRoutes(context) {
planned={page.planned}
unstable={page.unstable}
beta={page.beta}
+ deprecated={page.deprecated}
plan={page.plan}
icon={page.icon}
subheader={Boolean(page.subheader)}
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 1590a6680c5506..13395f5b6b9bfd 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -296,6 +296,7 @@ export default function AppNavDrawerItem(props) {
const {
beta,
children,
+ deprecated,
depth,
href,
icon,
@@ -378,6 +379,7 @@ export default function AppNavDrawerItem(props) {
{planned && }
{unstable && }
{beta && }
+ {deprecated && }
{expandable ? (
@@ -393,6 +395,7 @@ export default function AppNavDrawerItem(props) {
AppNavDrawerItem.propTypes = {
beta: PropTypes.bool,
children: PropTypes.node,
+ deprecated: PropTypes.bool,
depth: PropTypes.number.isRequired,
expandable: PropTypes.bool,
href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
diff --git a/docs/src/modules/components/JoyStartingLinksCollection.js b/docs/src/modules/components/JoyStartingLinksCollection.js
index 9d1a2b2cf1eb62..b2e25c6f5e2ec7 100644
--- a/docs/src/modules/components/JoyStartingLinksCollection.js
+++ b/docs/src/modules/components/JoyStartingLinksCollection.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded';
import WebRoundedIcon from '@mui/icons-material/WebRounded';
import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
diff --git a/docs/src/modules/components/MaterialShowcase.js b/docs/src/modules/components/MaterialShowcase.js
index 58e88bc0a315da..2cc103b80fd94a 100644
--- a/docs/src/modules/components/MaterialShowcase.js
+++ b/docs/src/modules/components/MaterialShowcase.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';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Card from '@mui/material/Card';
diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js
index 0672e41aa6ef7a..87e6851a7879b7 100644
--- a/docs/src/modules/components/MaterialStartingLinksCollection.js
+++ b/docs/src/modules/components/MaterialStartingLinksCollection.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded';
import WebRoundedIcon from '@mui/icons-material/WebRounded';
import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
diff --git a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js
index 533f87a1b1a17e..b25f7b76208bf3 100644
--- a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js
+++ b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import { InfoCard } from '@mui/docs/InfoCard';
import HighlightAltRoundedIcon from '@mui/icons-material/HighlightAltRounded';
import CssRoundedIcon from '@mui/icons-material/CssRounded';
diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js
index 3b9034f3b049d9..e47d0dbf53da8c 100644
--- a/docs/src/modules/components/MaterialUIDesignResources.js
+++ b/docs/src/modules/components/MaterialUIDesignResources.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
import { InfoCard } from '@mui/docs/InfoCard';
const content = [
diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js
index a1128bdefe06b7..064f2f22912eaa 100644
--- a/docs/src/modules/components/MaterialUIExampleCollection.js
+++ b/docs/src/modules/components/MaterialUIExampleCollection.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';
import Paper from '@mui/material/Paper';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
diff --git a/docs/src/pages/premium-themes/onepirate/modules/form/FormButton.tsx b/docs/src/pages/premium-themes/onepirate/modules/form/FormButton.tsx
index b403f8846ebab5..db687eb5424e20 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/form/FormButton.tsx
+++ b/docs/src/pages/premium-themes/onepirate/modules/form/FormButton.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { ButtonProps } from '@mui/material';
+import { ButtonProps } from '@mui/material/Button';
import Button from '../components/Button';
import defer from './defer';
diff --git a/docs/translations/api-docs/grid-2/grid-2.json b/docs/translations/api-docs/grid-2/grid-2.json
new file mode 100644
index 00000000000000..ef2a4d9cb8bba9
--- /dev/null
+++ b/docs/translations/api-docs/grid-2/grid-2.json
@@ -0,0 +1,30 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": { "description": "The content of the component." },
+ "columns": { "description": "The number of columns." },
+ "columnSpacing": {
+ "description": "Defines the horizontal space between the type item components. It overrides the value of the spacing prop."
+ },
+ "container": {
+ "description": "If true, the component will have the flex container behavior. You should be wrapping items with a container."
+ },
+ "direction": {
+ "description": "Defines the flex-direction style property. It is applied for all screen sizes."
+ },
+ "offset": {
+ "description": "Defines the offset value for the type item components."
+ },
+ "rowSpacing": {
+ "description": "Defines the vertical space between the type item components. It overrides the value of the spacing prop."
+ },
+ "size": { "description": "Defines the size of the the type item components." },
+ "spacing": {
+ "description": "Defines the space between the type item components. It can only be used on a type container component."
+ },
+ "wrap": {
+ "description": "Defines the flex-wrap style property. It's applied for all screen sizes."
+ }
+ },
+ "classDescriptions": {}
+}
diff --git a/package.json b/package.json
index 235651ba21c73f..ddc6bccd8d0cab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/monorepo",
- "version": "6.0.0-beta.3",
+ "version": "6.0.0-beta.4",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
@@ -95,16 +95,16 @@
"@netlify/functions": "^2.8.1",
"@slack/bolt": "^3.19.0",
"execa": "^9.3.0",
- "google-auth-library": "^9.11.0"
+ "google-auth-library": "^9.12.0"
},
"devDependencies": {
"@argos-ci/core": "^2.4.0",
"@babel/cli": "^7.24.8",
"@babel/core": "^7.24.9",
- "@babel/node": "^7.24.8",
- "@babel/plugin-transform-react-constant-elements": "^7.24.7",
+ "@babel/node": "^7.25.0",
+ "@babel/plugin-transform-react-constant-elements": "^7.25.1",
"@babel/plugin-transform-runtime": "^7.24.7",
- "@babel/preset-env": "^7.24.8",
+ "@babel/preset-env": "^7.25.0",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@babel/register": "^7.24.6",
@@ -123,7 +123,7 @@
"@types/fs-extra": "^11.0.4",
"@types/lodash": "^4.17.7",
"@types/mocha": "^10.0.7",
- "@types/node": "^18.19.41",
+ "@types/node": "^18.19.42",
"@types/react": "^18.3.3",
"@types/yargs": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^7.16.1",
@@ -152,7 +152,7 @@
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-material-ui": "workspace:^",
"eslint-plugin-mocha": "^10.4.3",
- "eslint-plugin-react": "^7.34.4",
+ "eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625",
"eslint-plugin-react-hooks": "^4.6.2",
"fast-glob": "^3.3.2",
@@ -166,10 +166,10 @@
"karma-mocha": "^2.0.1",
"karma-sourcemap-loader": "^0.4.0",
"karma-webpack": "^5.0.0",
- "lerna": "^8.1.6",
+ "lerna": "^8.1.7",
"lodash": "^4.17.21",
"markdownlint-cli2": "^0.13.0",
- "mocha": "^10.6.0",
+ "mocha": "^10.7.0",
"nx": "^19.4.3",
"nyc": "^17.0.0",
"piscina": "^4.6.1",
@@ -198,15 +198,15 @@
"@babel/core": "^7.24.9",
"@babel/code-frame": "^7.24.7",
"@babel/plugin-transform-runtime": "^7.24.7",
- "@babel/preset-env": "^7.24.8",
+ "@babel/preset-env": "^7.25.0",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
- "@babel/runtime": "^7.24.8",
- "@babel/types": "^7.24.9",
+ "@babel/runtime": "^7.25.0",
+ "@babel/types": "^7.25.0",
"@definitelytyped/header-parser": "^0.2.11",
"@definitelytyped/typescript-versions": "^0.1.3",
"@definitelytyped/utils": "^0.1.7",
- "@types/node": "^18.19.41",
+ "@types/node": "^18.19.42",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"cross-fetch": "^4.0.0",
diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
index 5e16a0297884fd..7d86ca55bd8a9e 100644
--- a/packages-internal/scripts/package.json
+++ b/packages-internal/scripts/package.json
@@ -29,7 +29,7 @@
"@babel/plugin-syntax-class-properties": "^7.12.13",
"@babel/plugin-syntax-jsx": "^7.24.7",
"@babel/plugin-syntax-typescript": "^7.24.7",
- "@babel/types": "^7.24.9",
+ "@babel/types": "^7.25.0",
"@mui/internal-docs-utils": "workspace:^",
"doctrine": "^3.0.0",
"lodash": "^4.17.21",
@@ -42,10 +42,10 @@
"@types/chai": "^4.3.16",
"@types/doctrine": "^0.0.9",
"@types/lodash": "^4.17.7",
- "@types/node": "^18.19.41",
+ "@types/node": "^18.19.42",
"@types/react": "^18.3.3",
"@types/uuid": "^9.0.8",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"fast-glob": "^3.3.2",
"prettier": "^3.3.3",
"rimraf": "^5.0.9"
diff --git a/packages-internal/test-utils/package.json b/packages-internal/test-utils/package.json
index 60819098d4a785..69b5b862e6705d 100644
--- a/packages-internal/test-utils/package.json
+++ b/packages-internal/test-utils/package.json
@@ -34,20 +34,20 @@
"@babel/plugin-transform-modules-commonjs": "^7.24.8",
"@babel/preset-typescript": "^7.24.7",
"@babel/register": "^7.24.6",
- "@babel/runtime": "^7.24.8",
- "@emotion/cache": "^11.13.0",
+ "@babel/runtime": "^7.25.0",
+ "@emotion/cache": "^11.13.1",
"@emotion/react": "^11.13.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"chai-dom": "^1.12.0",
- "dom-accessibility-api": "^0.6.3",
+ "dom-accessibility-api": "^0.7.0",
"format-util": "^1.0.5",
"fs-extra": "^11.2.0",
"jsdom": "^24.0.0",
"lodash": "^4.17.21",
- "mocha": "^10.6.0",
+ "mocha": "^10.7.0",
"playwright": "^1.45.3",
"prop-types": "^15.8.1",
"sinon": "^16.1.3"
diff --git a/packages/api-docs-builder-core/materialUi/projectSettings.ts b/packages/api-docs-builder-core/materialUi/projectSettings.ts
index 45b4b8ec90041a..5d0c11f161135a 100644
--- a/packages/api-docs-builder-core/materialUi/projectSettings.ts
+++ b/packages/api-docs-builder-core/materialUi/projectSettings.ts
@@ -36,7 +36,7 @@ export const projectSettings: ProjectSettings = {
skipComponent(filename: string) {
return (
filename.match(
- /(ThemeProvider|CssVarsProvider|DefaultPropsProvider|InitColorSchemeScript|Grid2)/,
+ /(ThemeProvider|CssVarsProvider|DefaultPropsProvider|InitColorSchemeScript)/,
) !== null
);
},
diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json
index e247931a34120f..fa60581d3e49e2 100644
--- a/packages/api-docs-builder-core/package.json
+++ b/packages/api-docs-builder-core/package.json
@@ -17,9 +17,9 @@
"devDependencies": {
"@types/chai": "^4.3.16",
"@types/mocha": "^10.0.7",
- "@types/node": "^18.19.41",
+ "@types/node": "^18.19.42",
"@types/sinon": "^17.0.3",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"sinon": "^16.1.3",
"typescript": "^5.4.5"
}
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index c4279fd99407d8..e5ac6920404295 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -624,7 +624,7 @@ export default async function generateComponentApi(
const filename = componentInfo.filename;
let reactApi: ComponentReactApi;
- if (componentInfo.isSystemComponent) {
+ if (componentInfo.isSystemComponent || componentInfo.name === 'Grid2') {
try {
reactApi = docgenParse(
src,
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
index c2e76eb25909d5..3f15fe63344657 100644
--- a/packages/api-docs-builder/package.json
+++ b/packages/api-docs-builder/package.json
@@ -10,7 +10,7 @@
"dependencies": {
"@babel/core": "^7.24.9",
"@babel/preset-typescript": "^7.24.7",
- "@babel/traverse": "^7.24.8",
+ "@babel/traverse": "^7.25.1",
"@mui/internal-docs-utils": "workspace:^",
"@mui/internal-markdown": "workspace:^",
"ast-types": "^0.14.2",
@@ -32,10 +32,10 @@
"@types/doctrine": "^0.0.9",
"@types/mdast": "4.0.4",
"@types/mocha": "^10.0.7",
- "@types/node": "^18.19.41",
+ "@types/node": "^18.19.42",
"@types/react-docgen": "workspace:*",
"@types/sinon": "^17.0.3",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"sinon": "^16.1.3"
}
}
diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json
index 8824d7b3bbd732..afed639900e4ba 100644
--- a/packages/eslint-plugin-material-ui/package.json
+++ b/packages/eslint-plugin-material-ui/package.json
@@ -8,7 +8,7 @@
"emoji-regex": "^10.3.0"
},
"devDependencies": {
- "@types/eslint": "^8.56.10",
+ "@types/eslint": "^8.56.11",
"@typescript-eslint/parser": "^7.16.1",
"eslint": "^8.57.0"
},
diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index 3649cf57720b2e..71e4f93f40cd13 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -25,6 +25,6 @@
"claudia": "^5.14.1"
},
"optionalDependencies": {
- "aws-sdk": "^2.1659.0"
+ "aws-sdk": "^2.1664.0"
}
}
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
index 3316ddd6222e51..4d6660a50f5094 100644
--- a/packages/markdown/package.json
+++ b/packages/markdown/package.json
@@ -20,14 +20,14 @@
"release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\""
},
"dependencies": {
- "@babel/runtime": "^7.24.8",
+ "@babel/runtime": "^7.25.0",
"lodash": "^4.17.21",
"marked": "^13.0.2",
"prismjs": "^1.29.0"
},
"devDependencies": {
"@types/chai": "^4.3.16",
- "chai": "^4.4.1"
+ "chai": "^4.5.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json
index edef01bee1b5ee..2b2d3ae2900fec 100644
--- a/packages/mui-babel-macros/package.json
+++ b/packages/mui-babel-macros/package.json
@@ -24,7 +24,7 @@
},
"dependencies": {
"@babel/helper-module-imports": "^7.24.7",
- "@babel/runtime": "^7.24.8",
+ "@babel/runtime": "^7.25.0",
"babel-plugin-macros": "^3.1.0"
},
"devDependencies": {
@@ -32,9 +32,9 @@
"@types/babel-plugin-macros": "^3.1.3",
"@types/chai": "^4.3.16",
"@types/mocha": "^10.0.7",
- "@types/node": "^18.19.41",
+ "@types/node": "^18.19.42",
"babel-plugin-tester": "^11.0.4",
- "chai": "^4.4.1"
+ "chai": "^4.5.0"
},
"peerDependencies": {
"@mui/utils": "^5.0.0"
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index 58ecaf2dfe30f3..84bba4bab1406b 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -40,7 +40,7 @@
"typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
},
"dependencies": {
- "@babel/runtime": "^7.24.8",
+ "@babel/runtime": "^7.25.0",
"@floating-ui/react-dom": "^2.1.0",
"@mui/types": "workspace:^",
"@mui/utils": "workspace:*",
@@ -59,7 +59,7 @@
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@types/sinon": "^17.0.3",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"fast-glob": "^3.3.2",
"lodash": "^4.17.21",
"react": "^18.3.1",
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index e1a6766b0a0651..1989628090afb9 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -1844,7 +1844,7 @@ However, it has some **limitations**:
npx @mui/codemod@next v6.0.0/grid-v2-props
```
-Updates the usage of the `Unstable_Grid` (Grid v2) component to have the same API as the `PigmentGrid`.
+Updates the usage of the `@mui/material/Grid2`, `@mui/system/Grid`, and `@mui/joy/Grid` components to their updated APIs.
```diff
;
// Doesn't transform Grid v1
-;
+;
+;
diff --git a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js
index edd2527bf9d24b..d4f1223ad047bb 100644
--- a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js
+++ b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js
@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
// Transforms custom breakpoints
;
diff --git a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js
index ede253532be318..d202dffc1b29c2 100644
--- a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js
+++ b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js
@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
// Transforms custom breakpoints
;
// Doesn't transform Grid v1
-;
+;
+;
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.actual.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.actual.js
index bf73fee6620849..b6b0cdc6ac6ed0 100644
--- a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.actual.js
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.actual.js
@@ -30,8 +30,8 @@
transition: 'all 200ms ease-in-out !important',
},
}}
- onClick={(ev) => {
- ev.preventDefault();
+ onClick={(event) => {
+ event.preventDefault();
navigate(href);
}}
>
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.expected.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.expected.js
index 2a6689cc993f00..10b520a4aef57f 100644
--- a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.expected.js
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.expected.js
@@ -26,8 +26,8 @@
flexDirection: 'column',
pb: 0.5,
})]}
- onClick={(ev) => {
- ev.preventDefault();
+ onClick={(event) => {
+ event.preventDefault();
navigate(href);
}}
>
diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json
index 140442bf5b1f5d..abdac7ed536fa4 100644
--- a/packages/mui-core-downloads-tracker/package.json
+++ b/packages/mui-core-downloads-tracker/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/core-downloads-tracker",
- "version": "6.0.0-beta.3",
+ "version": "6.0.0-beta.4",
"private": false,
"author": "MUI Team",
"description": "Internal package to track number of downloads of our design system libraries",
diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
index c18d44ee09551d..c3c0ad7c103198 100644
--- a/packages/mui-docs/package.json
+++ b/packages/mui-docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/docs",
- "version": "6.0.0-beta.3",
+ "version": "6.0.0-beta.4",
"private": false,
"author": "MUI Team",
"description": "MUI Docs - Documentation building blocks.",
@@ -34,7 +34,7 @@
"test": "exit 0"
},
"dependencies": {
- "@babel/runtime": "^7.24.8",
+ "@babel/runtime": "^7.25.0",
"@mui/internal-markdown": "workspace:^",
"clipboard-copy": "^4.0.1",
"clsx": "^2.1.1",
@@ -45,7 +45,7 @@
"@mui/icons-material": "workspace:*",
"@mui/material": "workspace:*",
"@types/gtag.js": "^0.0.20",
- "@types/node": "^18.19.41",
+ "@types/node": "^18.19.42",
"@types/prop-types": "^15.7.12",
"@types/react": "^18.3.3",
"next": "^14.2.5",
diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json
index 0954e1bca24175..ee0c1a0c10246e 100644
--- a/packages/mui-envinfo/package.json
+++ b/packages/mui-envinfo/package.json
@@ -24,7 +24,7 @@
},
"devDependencies": {
"@types/chai": "^4.3.16",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"fs-extra": "^11.2.0"
},
"publishConfig": {
diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json
index b30e7c46ae21b5..d11bf8f981ac33 100644
--- a/packages/mui-icons-material/package.json
+++ b/packages/mui-icons-material/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/icons-material",
- "version": "6.0.0-beta.3",
+ "version": "6.0.0-beta.4",
"private": false,
"author": "MUI Team",
"description": "Material Design icons distributed as SVG React components.",
@@ -45,7 +45,7 @@
"typescript": "tsc -p tsconfig.json"
},
"dependencies": {
- "@babel/runtime": "^7.24.8"
+ "@babel/runtime": "^7.25.0"
},
"devDependencies": {
"@mui/icons-material": "workspace:*",
@@ -53,7 +53,7 @@
"@mui/material": "workspace:^",
"@types/chai": "^4.3.16",
"@types/react": "^18.3.3",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"chalk": "^5.3.0",
"cross-fetch": "^4.0.0",
"fast-glob": "^3.3.2",
diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
index 12a34a2006e931..7cf4efdc0287eb 100644
--- a/packages/mui-joy/package.json
+++ b/packages/mui-joy/package.json
@@ -38,7 +38,7 @@
"typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
},
"dependencies": {
- "@babel/runtime": "^7.24.8",
+ "@babel/runtime": "^7.25.0",
"@mui/base": "workspace:*",
"@mui/core-downloads-tracker": "workspace:^",
"@mui/system": "workspace:*",
@@ -55,7 +55,7 @@
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/sinon": "^17.0.3",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"fast-glob": "^3.3.2",
"lodash": "^4.17.21",
"next": "^14.2.5",
diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
index 00cd3fbff6f73c..b90562734a6c9d 100644
--- a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { unstable_traverseBreakpoints as traverseBreakpoints } from '@mui/system/Unstable_Grid';
+import { unstable_traverseBreakpoints as traverseBreakpoints } from '@mui/system/Grid';
import { OverridableComponent } from '@mui/types';
import {
unstable_capitalize as capitalize,
diff --git a/packages/mui-joy/src/Grid/Grid.tsx b/packages/mui-joy/src/Grid/Grid.tsx
index b36406b6f25577..e753f0cf25dd8f 100644
--- a/packages/mui-joy/src/Grid/Grid.tsx
+++ b/packages/mui-joy/src/Grid/Grid.tsx
@@ -1,6 +1,6 @@
'use client';
import PropTypes from 'prop-types';
-import { createGrid } from '@mui/system/Unstable_Grid';
+import { createGrid } from '@mui/system/Grid';
import { OverridableComponent } from '@mui/types';
import { styled, useThemeProps } from '../styles';
import { GridTypeMap } from './GridProps';
diff --git a/packages/mui-joy/src/Grid/GridProps.ts b/packages/mui-joy/src/Grid/GridProps.ts
index dbb362f34404a1..20ba959bee5852 100644
--- a/packages/mui-joy/src/Grid/GridProps.ts
+++ b/packages/mui-joy/src/Grid/GridProps.ts
@@ -1,6 +1,6 @@
import * as React from 'react';
import { OverrideProps } from '@mui/types';
-import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { GridBaseProps } from '@mui/system/Grid';
import { SxProps, SystemProps } from '../styles/types';
import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types';
diff --git a/packages/mui-joy/src/Grid/gridClasses.ts b/packages/mui-joy/src/Grid/gridClasses.ts
index e34cc3c742f748..c3ed2ccfff076e 100644
--- a/packages/mui-joy/src/Grid/gridClasses.ts
+++ b/packages/mui-joy/src/Grid/gridClasses.ts
@@ -2,7 +2,7 @@ import {
unstable_generateUtilityClass as generateUtilityClass,
unstable_generateUtilityClasses as generateUtilityClasses,
} from '@mui/utils';
-import { GridClasses } from '@mui/system/Unstable_Grid';
+import { GridClasses } from '@mui/system/Grid';
export type GridClassKey = keyof GridClasses;
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index 3721769a128862..2a51c2ef6591f8 100644
--- a/packages/mui-lab/package.json
+++ b/packages/mui-lab/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/lab",
- "version": "6.0.0-beta.3",
+ "version": "6.0.0-beta.4",
"private": false,
"author": "MUI Team",
"description": "Laboratory for new MUI modules.",
@@ -40,7 +40,7 @@
"typescript": "tsc -p tsconfig.json"
},
"dependencies": {
- "@babel/runtime": "^7.24.8",
+ "@babel/runtime": "^7.25.0",
"@mui/base": "workspace:*",
"@mui/system": "workspace:*",
"@mui/types": "workspace:^",
@@ -56,7 +56,7 @@
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/sinon": "^17.0.3",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"sinon": "^16.1.3"
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
index 0784b1a21975b9..ae7f9c9d930f14 100644
--- a/packages/mui-material-nextjs/package.json
+++ b/packages/mui-material-nextjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material-nextjs",
- "version": "6.0.0-beta.3",
+ "version": "6.0.0-beta.4",
"private": false,
"author": "MUI Team",
"description": "Collection of utilities for integration between Material UI and Next.js.",
@@ -36,10 +36,10 @@
"typescript": "tsc -p tsconfig.json"
},
"dependencies": {
- "@babel/runtime": "^7.24.8"
+ "@babel/runtime": "^7.25.0"
},
"devDependencies": {
- "@emotion/cache": "^11.13.0",
+ "@emotion/cache": "^11.13.1",
"@emotion/react": "^11.13.0",
"@emotion/server": "^11.11.0",
"@types/react": "^18.3.3",
diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json
index 61b231e0cc618c..149668659a22f7 100644
--- a/packages/mui-material-pigment-css/package.json
+++ b/packages/mui-material-pigment-css/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material-pigment-css",
- "version": "6.0.0-beta.3",
+ "version": "6.0.0-beta.4",
"author": "MUI Team",
"description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.",
"main": "./src/index.ts",
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 259a3d99e9b1f7..44e8c56dfe1b15 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material",
- "version": "6.0.0-beta.3",
+ "version": "6.0.0-beta.4",
"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.",
@@ -40,7 +40,7 @@
"typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
},
"dependencies": {
- "@babel/runtime": "^7.24.8",
+ "@babel/runtime": "^7.25.0",
"@mui/core-downloads-tracker": "workspace:^",
"@mui/system": "workspace:*",
"@mui/types": "workspace:^",
@@ -63,7 +63,7 @@
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/sinon": "^17.0.3",
- "chai": "^4.4.1",
+ "chai": "^4.5.0",
"css-mediaquery": "^0.1.2",
"fast-glob": "^3.3.2",
"fs-extra": "^11.2.0",
diff --git a/packages/mui-material/src/Grid/Grid.d.ts b/packages/mui-material/src/Grid/Grid.d.ts
index 475d0e09ce6835..8621d3f06a2090 100644
--- a/packages/mui-material/src/Grid/Grid.d.ts
+++ b/packages/mui-material/src/Grid/Grid.d.ts
@@ -167,6 +167,8 @@ export interface GridTypeMap<
* API:
*
* - [Grid API](https://next.mui.com/material-ui/api/grid/)
+ *
+ * @deprecated Use the [`Grid2`](https://next.mui.com/material-ui/react-grid2/) component instead.
*/
declare const Grid: OverridableComponent;
diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
index 9d1f9974b06aa8..5856cf5d0f093d 100644
--- a/packages/mui-material/src/Grid/Grid.js
+++ b/packages/mui-material/src/Grid/Grid.js
@@ -397,6 +397,9 @@ const useUtilityClasses = (ownerState) => {
return composeClasses(slots, getGridUtilityClass, classes);
};
+/**
+ * @deprecated Use the [`Grid2`](https://next.mui.com/material-ui/react-grid2/) component instead.
+ */
const Grid = React.forwardRef(function Grid(inProps, ref) {
const themeProps = useThemeProps({ props: inProps, name: 'MuiGrid' });
const { breakpoints } = useTheme();
diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2.test.js b/packages/mui-material/src/Grid2/Grid2.test.js
similarity index 80%
rename from packages/mui-material/src/Unstable_Grid2/Grid2.test.js
rename to packages/mui-material/src/Grid2/Grid2.test.js
index cba4834e0f29f1..87c952bca83cd7 100644
--- a/packages/mui-material/src/Unstable_Grid2/Grid2.test.js
+++ b/packages/mui-material/src/Grid2/Grid2.test.js
@@ -1,9 +1,9 @@
import * as React from 'react';
import { createRenderer } from '@mui/internal-test-utils';
-import Grid2, { grid2Classes as classes } from '@mui/material/Unstable_Grid2';
+import Grid2, { grid2Classes as classes } from '@mui/material/Grid2';
import describeConformance from '../../test/describeConformance';
-// The main tests are in mui-system Unstable_Grid folder
+// The main tests are in mui-system Grid folder
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx
new file mode 100644
index 00000000000000..6fefa1c7d335e1
--- /dev/null
+++ b/packages/mui-material/src/Grid2/Grid2.tsx
@@ -0,0 +1,254 @@
+'use client';
+import PropTypes from 'prop-types';
+import { createGrid as createGrid2 } from '@mui/system/Grid';
+import { SxProps, SystemProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { Theme, styled, useThemeProps, Breakpoint } from '../styles';
+
+export type Grid2Slot = 'root';
+
+type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null };
+
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+export type GridSpacing = number | string;
+
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+export type GridSize = 'auto' | 'grow' | number | false;
+
+export type GridOffset = 'auto' | number;
+
+export interface GridBaseProps {
+ /**
+ * The content of the component.
+ */
+ children?: React.ReactNode;
+ /**
+ * The number of columns.
+ * @default 12
+ */
+ columns?: ResponsiveStyleValue;
+ /**
+ * Defines the horizontal space between the type `item` components.
+ * It overrides the value of the `spacing` prop.
+ */
+ columnSpacing?: ResponsiveStyleValue;
+ /**
+ * If `true`, the component will have the flex *container* behavior.
+ * You should be wrapping *items* with a *container*.
+ * @default false
+ */
+ container?: boolean;
+ /**
+ * Defines the `flex-direction` style property.
+ * It is applied for all screen sizes.
+ * @default 'row'
+ */
+ direction?: ResponsiveStyleValue;
+ /**
+ * Defines the offset value for the type `item` components.
+ */
+ offset?: ResponsiveStyleValue;
+ /**
+ * @internal
+ * The level of the grid starts from `0`
+ * and increases when the grid nests inside another grid regardless of container or item.
+ *
+ * ```js
+ * // level 0
+ * // level 1
+ * // level 2
+ * // level 1
+ * ```
+ *
+ * Only consecutive grid is considered nesting.
+ * A grid container will start at `0` if there are non-Grid element above it.
+ *
+ * ```js
+ * // level 0
+ *
+ * // level 0
+ * // level 1
+ * ```
+ */
+ unstable_level?: number;
+ /**
+ * Defines the vertical space between the type `item` components.
+ * It overrides the value of the `spacing` prop.
+ */
+ rowSpacing?: ResponsiveStyleValue;
+ /**
+ * Defines the size of the the type `item` components.
+ */
+ size?: ResponsiveStyleValue;
+ /**
+ * Defines the space between the type `item` components.
+ * It can only be used on a type `container` component.
+ * @default 0
+ */
+ spacing?: ResponsiveStyleValue | undefined;
+ /**
+ * Defines the `flex-wrap` style property.
+ * It's applied for all screen sizes.
+ * @default 'wrap'
+ */
+ wrap?: GridWrap;
+}
+
+export interface Grid2TypeMap
{
+ props: P & GridBaseProps & { sx?: SxProps } & SystemProps;
+ defaultComponent: D;
+}
+
+export type Grid2Props<
+ D extends React.ElementType = Grid2TypeMap['defaultComponent'],
+ P = {
+ component?: React.ElementType;
+ },
+> = OverrideProps, D>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [Grid2 API](https://next.mui.com/material-ui/api/grid-2/)
+ */
+const Grid2 = createGrid2({
+ createStyledComponent: styled('div', {
+ name: 'MuiGrid2',
+ slot: 'Root',
+ overridesResolver: (props, styles) => styles.root,
+ }),
+ componentName: 'MuiGrid2',
+ useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }),
+}) as OverridableComponent;
+
+Grid2.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ /**
+ * The content of the component.
+ */
+ children: PropTypes.node,
+ /**
+ * The number of columns.
+ * @default 12
+ */
+ columns: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.arrayOf(PropTypes.number),
+ PropTypes.number,
+ PropTypes.object,
+ ]),
+ /**
+ * Defines the horizontal space between the type `item` components.
+ * It overrides the value of the `spacing` prop.
+ */
+ columnSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+ PropTypes.number,
+ PropTypes.object,
+ PropTypes.string,
+ ]),
+ /**
+ * If `true`, the component will have the flex *container* behavior.
+ * You should be wrapping *items* with a *container*.
+ * @default false
+ */
+ container: PropTypes.bool,
+ /**
+ * Defines the `flex-direction` style property.
+ * It is applied for all screen sizes.
+ * @default 'row'
+ */
+ direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
+ PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
+ PropTypes.object,
+ ]),
+ /**
+ * Defines the offset value for the type `item` components.
+ */
+ offset: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+ PropTypes.object,
+ ]),
+ /**
+ * Defines the vertical space between the type `item` components.
+ * It overrides the value of the `spacing` prop.
+ */
+ rowSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+ PropTypes.number,
+ PropTypes.object,
+ PropTypes.string,
+ ]),
+ /**
+ * Defines the size of the the type `item` components.
+ */
+ size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.string,
+ PropTypes.bool,
+ PropTypes.number,
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])),
+ PropTypes.object,
+ ]),
+ /**
+ * Defines the space between the type `item` components.
+ * It can only be used on a type `container` component.
+ * @default 0
+ */
+ spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+ PropTypes.number,
+ PropTypes.object,
+ PropTypes.string,
+ ]),
+ /**
+ * @ignore
+ */
+ sx: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+ PropTypes.func,
+ PropTypes.object,
+ ]),
+ /**
+ * @internal
+ * The level of the grid starts from `0`
+ * and increases when the grid nests inside another grid regardless of container or item.
+ *
+ * ```js
+ * // level 0
+ * // level 1
+ * // level 2
+ * // level 1
+ * ```
+ *
+ * Only consecutive grid is considered nesting.
+ * A grid container will start at `0` if there are non-Grid element above it.
+ *
+ * ```js
+ * // level 0
+ *
+ * // level 0
+ * // level 1
+ * ```
+ */
+ unstable_level: PropTypes.number,
+ /**
+ * Defines the `flex-wrap` style property.
+ * It's applied for all screen sizes.
+ * @default 'wrap'
+ */
+ wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+} as any;
+
+export default Grid2;
diff --git a/packages/mui-material/src/Unstable_Grid2/grid2Classes.ts b/packages/mui-material/src/Grid2/grid2Classes.ts
similarity index 95%
rename from packages/mui-material/src/Unstable_Grid2/grid2Classes.ts
rename to packages/mui-material/src/Grid2/grid2Classes.ts
index 2db581dc244a8b..eb26cc4f1a3567 100644
--- a/packages/mui-material/src/Unstable_Grid2/grid2Classes.ts
+++ b/packages/mui-material/src/Grid2/grid2Classes.ts
@@ -1,4 +1,4 @@
-import { GridClasses } from '@mui/system/Unstable_Grid';
+import { GridClasses } from '@mui/system/Grid';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
diff --git a/packages/mui-material/src/Unstable_Grid2/index.ts b/packages/mui-material/src/Grid2/index.ts
similarity index 82%
rename from packages/mui-material/src/Unstable_Grid2/index.ts
rename to packages/mui-material/src/Grid2/index.ts
index ca358d2c60797f..b3ff428524d803 100644
--- a/packages/mui-material/src/Unstable_Grid2/index.ts
+++ b/packages/mui-material/src/Grid2/index.ts
@@ -1,5 +1,5 @@
'use client';
export { default } from './Grid2';
-export * from './Grid2Props';
+export * from './Grid2';
export { default as grid2Classes } from './grid2Classes';
export * from './grid2Classes';
diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
index a34e4586c60efe..7d18a8dd1ead3a 100644
--- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
+++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
@@ -11,7 +11,7 @@ import {
generateDirectionClasses,
generateSizeClassNames,
generateSpacingClassNames,
-} from '@mui/system/Unstable_Grid/gridGenerator';
+} from '@mui/system/Grid/gridGenerator';
import { Breakpoint, Theme } from '../styles';
type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null };
diff --git a/packages/mui-material/src/PigmentGrid/index.ts b/packages/mui-material/src/PigmentGrid/index.ts
index 9be62559663f67..d5cf10f404dccf 100644
--- a/packages/mui-material/src/PigmentGrid/index.ts
+++ b/packages/mui-material/src/PigmentGrid/index.ts
@@ -1,3 +1,3 @@
export { default } from './PigmentGrid';
export * from './PigmentGrid';
-export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes';
+export { default as grid2Classes } from '../Grid2/grid2Classes';
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index d20f83ab4fc17c..f3b0cd3fd57e65 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -574,8 +574,8 @@ describe('', () => {
render(
{
- const elem = e.target;
+ allowSwipeInChildren={(event) => {
+ const elem = event.target;
// ignore touch events from .ignore &^ from swipe area
return (
!elem.classList.contains('ignore') &&
diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2.tsx b/packages/mui-material/src/Unstable_Grid2/Grid2.tsx
deleted file mode 100644
index 04f56b6c78c6ae..00000000000000
--- a/packages/mui-material/src/Unstable_Grid2/Grid2.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-import PropTypes from 'prop-types';
-import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid';
-import { OverridableComponent } from '@mui/types';
-import { styled, useThemeProps } from '../styles';
-import { Grid2TypeMap } from './Grid2Props';
-
-const Grid2 = createGrid2({
- createStyledComponent: styled('div', {
- name: 'MuiGrid2',
- slot: 'Root',
- overridesResolver: (props, styles) => styles.root,
- }),
- componentName: 'MuiGrid2',
- useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }),
-}) as OverridableComponent;
-
-Grid2.propTypes /* remove-proptypes */ = {
- // ┌────────────────────────────── Warning ──────────────────────────────┐
- // │ These PropTypes are generated from the TypeScript type definitions. │
- // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
- // └─────────────────────────────────────────────────────────────────────┘
- /**
- * The content of the component.
- */
- children: PropTypes.node,
- /**
- * @ignore
- */
- sx: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
- PropTypes.func,
- PropTypes.object,
- ]),
-} as any;
-
-export default Grid2;
diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts b/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts
deleted file mode 100644
index 7f2ab917c51a27..00000000000000
--- a/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
-import { GridBaseProps } from '@mui/system/Unstable_Grid';
-import { Theme } from '../styles';
-
-export type Grid2Slot = 'root';
-
-export interface Grid2TypeMap