Merge branch 'master' into docs/mui-override-component

CHANGELOG.md

@@ -1,5 +1,36 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0-alpha.2
+
+<!-- generated comparing v7.0.0-alpha.1..master -->
+
+_Feb 18, 2025_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@7.0.0-alpha.2`
+
+- [Autocomplete] Remove legacy `aria-owns` attribute for combobox (#45302) @ZeeshanTamboli
+- [Button] Apply id only if loading indicator is present (#45296) @aarongarciah
+- [Hidden] Remove deprecated Hidden component (#45283) @DiegoAndai
+- [InputBase] Deprecate composed classes (#45234) @sai6855
+- [InputLabel] Changed size prop value from `normal` to `medium` (#45235) @perkrlsn
+- Fix `slotProps.transition` types (#45214) @siriwatknp
+
+### Docs
+
+- Fix broken links to MUI X docs (#45145) @mapache-salvaje
+- Add migration guide for package layout changes (#45222) @Janpot
+- [icons] Fix typo in material-icons.md (#45334) @a-s-russo
+
+### Core
+
+- Disallow access to esm/modern barrel files (#45332) @Janpot
+- [code-infra] Update `elliptic` (#45311) @Janpot
+- Update release guide to specify package bumping rules (#45294) @DiegoAndai
+
+All contributors of this release in alphabetical order: @a-s-russo, @aarongarciah, @DiegoAndai, @Janpot, @mapache-salvaje, @perkrlsn, @sai6855, @siriwatknp, @ZeeshanTamboli
+
 ## 7.0.0-alpha.1
 
 <!-- generated comparing v7.0.0-alpha.0..master -->

README.md

@@ -90,6 +90,8 @@ via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](http
    
   <a href="https://views4you.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="26" width="26" src="https://images.opencollective.com/buy-instagram-followers-v4y/6364714/logo/78.png" alt="views4you.com" title="Views4you: Social media growth services." loading="lazy" />Views4You</a>
   &nbsp;
+  <a href="https://poprey.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="26" width="26" src="https://images.opencollective.com/instagram-likes/2a72a03/logo/78.png" alt="poprey.com" title="Poprey: Buy Instagram likes with crypto." loading="lazy" />Poprey</a>
+  &nbsp;
 </p>
 
 Gold sponsors are those who have pledged \$500/month or more to MUI.

benchmark/browser/scenarios/grid-material-ui/index.js

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

benchmark/package.json

@@ -11,7 +11,7 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.7",
+    "@babel/runtime": "^7.26.9",
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.13.5",
     "@emotion/server": "^11.11.0",

docs/data/joy/components/tooltip/PositionedTooltips.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Button from '@mui/joy/Button';
 import Tooltip from '@mui/joy/Tooltip';
 

docs/data/joy/components/tooltip/PositionedTooltips.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Button from '@mui/joy/Button';
 import Tooltip from '@mui/joy/Tooltip';
 

docs/data/material/components/chips/ChipsPlayground.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/material/components/grid/AutoGrid.js → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/AutoGrid.tsx → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/AutoGridNoWrap.js → docs/data/material/components/grid-legacy/AutoGridNoWrap.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/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 

docs/data/material/components/grid/AutoGridNoWrap.tsx → docs/data/material/components/grid-legacy/AutoGridNoWrap.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/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 

docs/data/material/components/grid/BasicGrid.js → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/BasicGrid.tsx → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ColumnsGrid.js → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ColumnsGrid.tsx → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ComplexGrid.js → docs/data/material/components/grid-legacy/ComplexGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import ButtonBase from '@mui/material/ButtonBase';

docs/data/material/components/grid/ComplexGrid.tsx → docs/data/material/components/grid-legacy/ComplexGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import ButtonBase from '@mui/material/ButtonBase';

docs/data/material/components/grid/FullWidthGrid.js → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/FullWidthGrid.tsx → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/InteractiveGrid.js → docs/data/material/components/grid-legacy/InteractiveGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/material/components/grid/InteractiveGrid.tsx → docs/data/material/components/grid-legacy/InteractiveGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid, { GridDirection } from '@mui/material/Grid';
+import Grid, { GridLegacyDirection } from '@mui/material/GridLegacy';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -24,7 +24,7 @@ type GridJustification =
   | 'space-evenly';
 
 export default function InteractiveGrid() {
-  const [direction, setDirection] = React.useState<GridDirection>('row');
+  const [direction, setDirection] = React.useState<GridLegacyDirection>('row');
   const [justifyContent, setJustifyContent] =
     React.useState<GridJustification>('center');
   const [alignItems, setAlignItems] = React.useState<GridItemsAlignment>('center');
@@ -83,7 +83,8 @@ export default function InteractiveGrid() {
                   value={direction}
                   onChange={(event) => {
                     setDirection(
-                      (event.target as HTMLInputElement).value as GridDirection,
+                      (event.target as HTMLInputElement)
+                        .value as GridLegacyDirection,
                     );
                   }}
                 >

docs/data/material/components/grid/NestedGrid.js → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/NestedGrid.tsx → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ResponsiveGrid.js → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ResponsiveGrid.tsx → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/RowAndColumnSpacing.js → docs/data/material/components/grid-legacy/RowAndColumnSpacing.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 

docs/data/material/components/grid/RowAndColumnSpacing.tsx → docs/data/material/components/grid-legacy/RowAndColumnSpacing.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 

docs/data/material/components/grid/SpacingGrid.js → docs/data/material/components/grid-legacy/SpacingGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/material/components/grid/SpacingGrid.tsx → docs/data/material/components/grid-legacy/SpacingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/material/components/grid/VariableWidthGrid.js → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/VariableWidthGrid.tsx → docs/data/material/components/grid-legacy/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/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/grid.md → docs/data/material/components/grid-legacy/grid-legacy.md

@@ -1,13 +1,13 @@
 ---
 productId: material-ui
-title: React Grid component
-components: Grid
+title: React GridLegacy component
+components: GridLegacy
 githubLabel: 'component: Grid'
 materialDesign: https://m2.material.io/design/layout/understanding-layout.html
-githubSource: packages/mui-material/src/Grid
+githubSource: packages/mui-material/src/GridLegacy
 ---
 
-# Grid
+# GridLegacy
 
 <p class="description">The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.</p>
 
@@ -17,16 +17,18 @@ Material Design's responsive UI is based on a 12-column grid layout.
 {{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
 
 :::warning
-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/).
+The `GridLegacy` 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 [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 upgrade guide](/material-ui/migration/upgrade-to-v6/).
+The `GridLegacy` component has been deprecated.
+Please use [Grid2](/material-ui/react-grid2/) instead.
+See the [Grid2 upgrade guide](/material-ui/migration/upgrade-to-grid-v2/) for more details.
 :::
 
 ## How it works
 
-The grid system is implemented with the `Grid` component:
+The grid system is implemented with the `GridLegacy` component:
 
 - It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.
 - There are two types of layout: _containers_ and _items_.
@@ -185,11 +187,11 @@ In practice, you can set the `zeroMinWidth` prop:
 The `xs`, `sm`, `md`, `lg`, and `xl` props are **not supported** within `direction="column"` and `direction="column-reverse"` containers.
 
 They define the number of grids the component will use for a given breakpoint. They are intended to control **width** using `flex-basis` in `row` containers but they will impact height in `column` containers.
-If used, these props may have undesirable effects on the height of the `Grid` item elements.
+If used, these props may have undesirable effects on the height of the `GridLegacy` item elements.
 
 ## CSS Grid Layout
 
-The `Grid` component is using CSS flexbox internally.
+The `GridLegacy` component is using CSS flexbox internally.
 But as seen below, you can easily use [MUI System](/system/grid/) and CSS Grid to layout your pages.
 
 {{"demo": "CSSGrid.js", "bg": true}}

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

@@ -0,0 +1,36 @@
+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/Grid2';
+import Stack from '@mui/material/Stack';
+
+const Item = styled(Paper)(({ theme }) => ({
+  backgroundColor: '#fff',
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    backgroundColor: '#1A2027',
+  }),
+}));
+
+export default function ColumnLayoutInsideGrid() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={2}>
+        <Grid size={4}>
+          <Stack spacing={2}>
+            <Item>Column 1 - Row 1</Item>
+            <Item>Column 1 - Row 2</Item>
+            <Item>Column 1 - Row 3</Item>
+          </Stack>
+        </Grid>
+        <Grid size={8}>
+          <Item sx={{ height: '100%', boxSizing: 'border-box' }}>Column 2</Item>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}