mui · Janpot · Mar 31, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025
diff --git a/docs/data/toolpad/core/components/page-container/PageContent.js b/docs/data/toolpad/core/components/page-container/PageContent.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 
 export default function PageContent() {
   return (

diff --git a/docs/data/toolpad/core/components/page-container/PageContent.tsx b/docs/data/toolpad/core/components/page-container/PageContent.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 
 export default function PageContent() {
   return (

diff --git a/docs/next.config.ts b/docs/next.config.ts
@@ -28,6 +28,9 @@ const toolpadCorePkg = loadPkg('./packages/toolpad-core');
 const toolpadStudioPkg = loadPkg('./packages/toolpad-studio');
 
 export default withDocsInfra({
+  experimental: {
+    esmExternals: undefined,
+  },
   transpilePackages: [
     // TODO, those shouldn't be needed in the first place
     '@mui/monorepo', // Migrate everything to @mui/docs until the @mui/monorepo dependency becomes obsolete

diff --git a/docs/package.json b/docs/package.json
@@ -25,20 +25,19 @@
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.14.0",
     "@mui/base": "5.0.0-beta.69",
-    "@mui/docs": "6.4.7",
-    "@mui/icons-material": "6.4.7",
+    "@mui/docs": "^7.0.0",
+    "@mui/icons-material": "^7.0.0",
     "@mui/internal-markdown": "1.0.25",
     "@mui/joy": "5.0.0-beta.51",
     "@mui/lab": "6.0.0-beta.30",
-    "@mui/material": "6.4.7",
-    "@mui/material-nextjs": "6.4.3",
-    "@mui/styles": "6.4.7",
-    "@mui/system": "6.4.7",
-    "@mui/utils": "6.4.6",
-    "@mui/x-data-grid-pro": "7.28.1",
-    "@mui/x-date-pickers": "7.28.0",
-    "@mui/x-date-pickers-pro": "7.28.0",
-    "@mui/x-license": "7.28.0",
+    "@mui/material": "^7.0.0",
+    "@mui/material-nextjs": "^7.0.0",
+    "@mui/system": "^7.0.0",
+    "@mui/utils": "^7.0.0",
+    "@mui/x-data-grid-pro": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-date-pickers": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-date-pickers-pro": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-license": "^8.0.0 || ^8.0.0-beta",
     "@toolpad/core": "workspace:*",
     "@toolpad/studio-components": "^0.13.0",
     "@toolpad/studio-runtime": "^0.13.0",

diff --git a/docs/src/components/landing-studio/CardGrid.js b/docs/src/components/landing-studio/CardGrid.js
@@ -4,7 +4,7 @@ import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import Section from 'docs/src/layouts/Section';
 import IconImage from 'docs/src/components/icon/IconImage';

diff --git a/docs/src/components/landing-studio/UseCases.js b/docs/src/components/landing-studio/UseCases.js
@@ -12,7 +12,7 @@ import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 
 const ImageContainer = styled(Link)(({ theme }) => [
   {

diff --git a/docs/src/components/landing/BuiltWith.js b/docs/src/components/landing/BuiltWith.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import GradientText from 'docs/src/components/typography/GradientText';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';

diff --git a/docs/src/components/landing/Examples.js b/docs/src/components/landing/Examples.js
@@ -10,7 +10,7 @@ import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 
 const ImageContainer = styled(Link)(({ theme }) => [
   {

diff --git a/docs/src/components/landing/Features.js b/docs/src/components/landing/Features.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 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/landing/StudioIntro.js b/docs/src/components/landing/StudioIntro.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { alpha } from '@mui/material/styles';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';

diff --git a/docs/src/components/landing/ToolpadDashboardLayout.tsx b/docs/src/components/landing/ToolpadDashboardLayout.tsx
@@ -11,7 +11,7 @@ import { AppProvider, type Navigation, type Router } from '@toolpad/core/AppProv
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import DemoSandbox from 'docs/src/modules/components/DemoSandbox';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import { styled } from '@mui/material/styles';
 import Frame from '../../modules/components/Frame';
 

diff --git a/docs/src/components/landing/ToolpadPageContainerDemo.tsx b/docs/src/components/landing/ToolpadPageContainerDemo.tsx
@@ -6,7 +6,7 @@ import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { useDemoRouter } from '@toolpad/core/internal';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import { createTheme, styled, useTheme } from '@mui/material/styles';
 
 const code = `

diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "@mui/internal-markdown": "1.0.25",
     "@mui/internal-scripts": "1.0.33",
     "@mui/monorepo": "github:mui/material-ui#abd8f63bc0b8d681b3bfbe47486508c94ea23609",
-    "@mui/x-charts": "7.28.0",
+    "@mui/x-charts": "^8.0.0 || ^8.0.0-beta",
     "@next/eslint-plugin-next": "14.2.25",
     "@playwright/test": "1.47.2",
     "@testing-library/jest-dom": "^6.6.3",

diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json
@@ -27,11 +27,12 @@
   "scripts": {
     "clean": "rimraf build",
     "prebuild": "pnpm clean",
-    "build": "pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
+    "build": "pnpm build:node && pnpm build:modern && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
     "build:node": "node ../../scripts/build.mjs node",
+    "build:modern": "node ../../scripts/build.mjs modern",
     "build:stable": "node ../../scripts/build.mjs stable",
     "build:copy-files": "node ../../scripts/copyFiles.mjs",
-    "build:types": "node ../../scripts/buildTypes.mjs",
+    "build:types": "tsx ../../scripts/buildTypes.mts",
     "predev": "pnpm clean",
     "dev": "mkdir -p build && concurrently \"pnpm build:stable --watch\" \"pnpm build:types --watch\" \"pnpm build:copy-files\"",
     "check-types": "pnpm build:stable && pnpm build:types && tsc --noEmit",
@@ -42,7 +43,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
-    "@mui/utils": "7.0.0-beta.4",
+    "@mui/utils": "^7.0.0",
     "@standard-schema/spec": "^1.0.0",
     "@toolpad/utils": "workspace:*",
     "@vitejs/plugin-react": "4.3.4",
@@ -53,12 +54,12 @@
     "prop-types": "15.8.1"
   },
   "devDependencies": {
-    "@mui/icons-material": "6.4.7",
-    "@mui/material": "6.4.7",
-    "@mui/x-data-grid": "7.28.1",
-    "@mui/x-data-grid-premium": "7.28.1",
-    "@mui/x-data-grid-pro": "7.28.1",
-    "@mui/x-date-pickers": "7.28.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/x-data-grid": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-data-grid-premium": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-data-grid-pro": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-date-pickers": "^8.0.0 || ^8.0.0-beta",
     "@types/invariant": "2.2.37",
     "@types/prop-types": "15.7.14",
     "@types/react": "^19.0.12",
@@ -73,12 +74,12 @@
     "vitest": "2.1.9"
   },
   "peerDependencies": {
-    "@mui/icons-material": "^6.4.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/material": "^6.4.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/x-data-grid": "^7",
-    "@mui/x-data-grid-premium": "^7",
-    "@mui/x-data-grid-pro": "^7",
-    "@mui/x-date-pickers": "^7",
+    "@mui/icons-material": "^7.0.0-beta || ^7.0.0",
+    "@mui/material": "^7.0.0-beta || ^7.0.0",
+    "@mui/x-data-grid": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-data-grid-premium": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-data-grid-pro": "^8.0.0 || ^8.0.0-beta",
+    "@mui/x-date-pickers": "^8.0.0 || ^8.0.0-beta",
     "next": "^14 || ^15",
     "react": "^18 || ^19",
     "react-router": "^7"

diff --git a/packages/toolpad-core/src/Crud/CrudForm.tsx b/packages/toolpad-core/src/Crud/CrudForm.tsx
@@ -9,7 +9,7 @@ import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import FormHelperText from '@mui/material/FormHelperText';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';

diff --git a/packages/toolpad-core/src/Crud/Show.tsx b/packages/toolpad-core/src/Crud/Show.tsx
@@ -6,7 +6,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
-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 Typography from '@mui/material/Typography';

diff --git a/packages/toolpad-utils/package.json b/packages/toolpad-utils/package.json
@@ -22,10 +22,10 @@
     "clean": "rimraf build",
     "prebuild": "pnpm clean",
     "build": "pnpm build:node && pnpm build:stable && pnpm build:modern && pnpm build:types && pnpm build:copy-files",
-    "build:node": "node ../../scripts/build.mjs node --use-exports",
-    "build:modern": "node ../../scripts/build.mjs modern --use-exports",
-    "build:stable": "node ../../scripts/build.mjs stable --use-exports",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs --use-exports",
+    "build:node": "node ../../scripts/build.mjs node",
+    "build:modern": "node ../../scripts/build.mjs modern",
+    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs",
     "build:types": "tsx ../../scripts/buildTypes.mts",
     "predev": "pnpm clean",
     "dev": "mkdir -p build && concurrently \"pnpm build:stable --watch\" \"pnpm build:types --watch\" \"pnpm build:copy-files\"",

diff --git a/playground/nextjs-pages/package.json b/playground/nextjs-pages/package.json
@@ -9,9 +9,9 @@
   "devDependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@mui/icons-material": "6.4.7",
-    "@mui/material": "6.4.7",
-    "@mui/material-nextjs": "6.4.3",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/material-nextjs": "^7.0.0",
     "@toolpad/core": "workspace:*",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",

diff --git a/playground/nextjs/package.json b/playground/nextjs/package.json
@@ -9,9 +9,9 @@
   "devDependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@mui/icons-material": "6.4.7",
-    "@mui/material": "6.4.7",
-    "@mui/material-nextjs": "6.4.3",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/material-nextjs": "^7.0.0",
     "@toolpad/core": "workspace:*",
     "@types/node": "^20.17.28",
     "@types/react": "^19.0.12",

diff --git a/playground/vite/package.json b/playground/vite/package.json
@@ -10,8 +10,8 @@
   "devDependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@mui/icons-material": "6.4.7",
-    "@mui/material": "6.4.7",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
     "@toolpad/core": "workspace:*",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",