Merge branch 'master' into fix-styled-engine-types

mui · Feb 25, 2025 · 9358aaa · 9358aaa
2 parents 207d8b4 + 04f9116
commit 9358aaa
Show file tree

Hide file tree

Showing 341 changed files with 6,340 additions and 4,756 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,8 @@ via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](http
   &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;
+  <a href="https://www.socialwick.com/instagram/followers/?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-followers-socialwick/ac6033a/logo/256.png" alt="socialwick.com/instagram/followers" title="SocialWick: Buy Instagram followers." loading="lazy" />SocialWick</a>
+  &nbsp;
 </p>
 
 Gold sponsors are those who have pledged \$500/month or more to MUI.

diff --git a/apps/bare-next-app/src/app/grid/page.tsx b/apps/bare-next-app/src/app/grid/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import { styled } from '@mui/material';
 
 const Item = styled('div')`

diff --git a/apps/bare-next-app/src/app/material-ui/react-grid/page.tsx b/apps/bare-next-app/src/app/material-ui/react-grid/page.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import { styled } from '@mui/material';
 
 const Item = styled(Paper)(({ theme }) => ({

diff --git a/benchmark/browser/scenarios/grid-material-ui/index.js b/benchmark/browser/scenarios/grid-material-ui/index.js
@@ -5,7 +5,13 @@ export default function GridMaterialUI() {
   return (
     <Grid container spacing={2}>
       {new Array(1000).fill().map(() => (
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid
+          size={{
+            xs: 12,
+            sm: 6,
+            md: 4,
+          }}
+        >
           test case
         </Grid>
       ))}

diff --git a/docs/data/joy/components/tooltip/PositionedTooltips.js b/docs/data/joy/components/tooltip/PositionedTooltips.js
@@ -8,7 +8,7 @@ export default function PositionedTooltips() {
   return (
     <Box sx={{ width: 500 }}>
       <Grid container sx={{ justifyContent: 'center' }}>
-        <Grid item>
+        <Grid>
           <Tooltip title="Add" placement="top-start">
             <Button variant="plain">top-start</Button>
           </Tooltip>
@@ -21,7 +21,7 @@ export default function PositionedTooltips() {
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <Tooltip title="Add" placement="left-start">
             <Button variant="plain">left-start</Button>
           </Tooltip>
@@ -34,32 +34,26 @@ export default function PositionedTooltips() {
             <Button variant="plain">left-end</Button>
           </Tooltip>
         </Grid>
-        <Grid
-          item
-          container
-          xs={6}
-          direction="column"
-          sx={{ alignItems: 'flex-end' }}
-        >
-          <Grid item>
+        <Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
+          <Grid>
             <Tooltip title="Add" placement="right-start">
               <Button variant="plain">right-start</Button>
             </Tooltip>
           </Grid>
-          <Grid item>
+          <Grid>
             <Tooltip title="Add" placement="right">
               <Button variant="plain">right</Button>
             </Tooltip>
           </Grid>
-          <Grid item>
+          <Grid>
             <Tooltip title="Add" placement="right-end">
               <Button variant="plain">right-end</Button>
             </Tooltip>
           </Grid>
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
-        <Grid item>
+        <Grid>
           <Tooltip title="Add" placement="bottom-start">
             <Button variant="plain">bottom-start</Button>
           </Tooltip>

diff --git a/docs/data/joy/components/tooltip/PositionedTooltips.tsx b/docs/data/joy/components/tooltip/PositionedTooltips.tsx
@@ -8,7 +8,7 @@ export default function PositionedTooltips() {
   return (
     <Box sx={{ width: 500 }}>
       <Grid container sx={{ justifyContent: 'center' }}>
-        <Grid item>
+        <Grid>
           <Tooltip title="Add" placement="top-start">
             <Button variant="plain">top-start</Button>
           </Tooltip>
@@ -21,7 +21,7 @@ export default function PositionedTooltips() {
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <Tooltip title="Add" placement="left-start">
             <Button variant="plain">left-start</Button>
           </Tooltip>
@@ -34,32 +34,26 @@ export default function PositionedTooltips() {
             <Button variant="plain">left-end</Button>
           </Tooltip>
         </Grid>
-        <Grid
-          item
-          container
-          xs={6}
-          direction="column"
-          sx={{ alignItems: 'flex-end' }}
-        >
-          <Grid item>
+        <Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
+          <Grid>
             <Tooltip title="Add" placement="right-start">
               <Button variant="plain">right-start</Button>
             </Tooltip>
           </Grid>
-          <Grid item>
+          <Grid>
             <Tooltip title="Add" placement="right">
               <Button variant="plain">right</Button>
             </Tooltip>
           </Grid>
-          <Grid item>
+          <Grid>
             <Tooltip title="Add" placement="right-end">
               <Button variant="plain">right-end</Button>
             </Tooltip>
           </Grid>
         </Grid>
       </Grid>
       <Grid container sx={{ justifyContent: 'center' }}>
-        <Grid item>
+        <Grid>
           <Tooltip title="Add" placement="bottom-start">
             <Button variant="plain">bottom-start</Button>
           </Tooltip>

diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.js b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
@@ -8,7 +8,7 @@ import LayersIcon from '@mui/icons-material/Layers';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 
 const NAVIGATION = [
   {

diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
@@ -8,7 +8,7 @@ import LayersIcon from '@mui/icons-material/Layers';
 import { AppProvider, Navigation, Router } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 
 const NAVIGATION: Navigation = [
   {

diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js
@@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import Paper from '@mui/material/Paper';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
-import Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import parse from 'autosuggest-highlight/parse';
@@ -212,11 +212,11 @@ export default function GoogleMaps() {
         );
         return (
           <li key={key} {...optionProps}>
-            <Grid2 container sx={{ alignItems: 'center' }}>
-              <Grid2 sx={{ display: 'flex', width: 44 }}>
+            <Grid container sx={{ alignItems: 'center' }}>
+              <Grid sx={{ display: 'flex', width: 44 }}>
                 <LocationOnIcon sx={{ color: 'text.secondary' }} />
-              </Grid2>
-              <Grid2 sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
+              </Grid>
+              <Grid sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
                 {parts.map((part, index) => (
                   <Box
                     key={index}
@@ -235,8 +235,8 @@ export default function GoogleMaps() {
                     {option.structured_formatting.secondary_text}
                   </Typography>
                 ) : null}
-              </Grid2>
-            </Grid2>
+              </Grid>
+            </Grid>
           </li>
         );
       }}

diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx
@@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import Paper, { PaperProps } from '@mui/material/Paper';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
-import Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import parse from 'autosuggest-highlight/parse';
@@ -230,11 +230,11 @@ export default function GoogleMaps() {
         );
         return (
           <li key={key} {...optionProps}>
-            <Grid2 container sx={{ alignItems: 'center' }}>
-              <Grid2 sx={{ display: 'flex', width: 44 }}>
+            <Grid container sx={{ alignItems: 'center' }}>
+              <Grid sx={{ display: 'flex', width: 44 }}>
                 <LocationOnIcon sx={{ color: 'text.secondary' }} />
-              </Grid2>
-              <Grid2 sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
+              </Grid>
+              <Grid sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
                 {parts.map((part, index) => (
                   <Box
                     key={index}
@@ -253,8 +253,8 @@ export default function GoogleMaps() {
                     {option.structured_formatting.secondary_text}
                   </Typography>
                 ) : null}
-              </Grid2>
-            </Grid2>
+              </Grid>
+            </Grid>
           </li>
         );
       }}

diff --git a/docs/data/material/components/autocomplete/Sizes.js b/docs/data/material/components/autocomplete/Sizes.js
@@ -65,20 +65,6 @@ export default function Sizes() {
         options={top100Films}
         getOptionLabel={(option) => option.title}
         defaultValue={top100Films[13]}
-        renderTags={(value, getTagProps) =>
-          value.map((option, index) => {
-            const { key, ...tagProps } = getTagProps({ index });
-            return (
-              <Chip
-                key={key}
-                variant="outlined"
-                label={option.title}
-                size="small"
-                {...tagProps}
-              />
-            );
-          })
-        }
         renderInput={(params) => (
           <TextField
             {...params}

diff --git a/docs/data/material/components/autocomplete/Sizes.tsx b/docs/data/material/components/autocomplete/Sizes.tsx
@@ -65,20 +65,6 @@ export default function Sizes() {
         options={top100Films}
         getOptionLabel={(option) => option.title}
         defaultValue={top100Films[13]}
-        renderTags={(value, getTagProps) =>
-          value.map((option, index) => {
-            const { key, ...tagProps } = getTagProps({ index });
-            return (
-              <Chip
-                key={key}
-                variant="outlined"
-                label={option.title}
-                size="small"
-                {...tagProps}
-              />
-            );
-          })
-        }
         renderInput={(params) => (
           <TextField
             {...params}

diff --git a/docs/data/material/components/breadcrumbs/PageContainerBasic.js b/docs/data/material/components/breadcrumbs/PageContainerBasic.js
@@ -7,7 +7,7 @@ import {
   PageHeader,
   PageHeaderToolbar,
 } from '@toolpad/core/PageContainer';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';

diff --git a/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx b/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx
@@ -7,7 +7,7 @@ import {
   PageHeader,
   PageHeaderToolbar,
 } from '@toolpad/core/PageContainer';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
-Original file line number
+Diff line change
@@ Expand Up @@
       &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;
+      <a href="https://www.socialwick.com/instagram/followers/?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-followers-socialwick/ac6033a/logo/256.png" alt="socialwick.com/instagram/followers" title="SocialWick: Buy Instagram followers." loading="lazy" />SocialWick</a>
+      &nbsp;
     </p>
     Gold sponsors are those who have pledged \$500/month or more to MUI.
@@ Expand Down @@