mui · bharatkashyap · Jan 10, 2025 · Nov 28, 2024 · Dec 8, 2024 · Dec 8, 2024
diff --git a/docs/package.json b/docs/package.json
@@ -37,7 +37,7 @@
     "@mui/utils": "6.3.1",
     "@mui/x-date-pickers": "7.22.2",
     "@mui/x-date-pickers-pro": "7.22.2",
-    "@mui/x-license": "7.21.0",
+    "@mui/x-license": "7.23.5",
     "@toolpad/core": "workspace:*",
     "@toolpad/studio": "workspace:*",
     "@trendmicro/react-interpolate": "0.5.5",
@@ -72,13 +72,12 @@
     "postcss": "8.4.49",
     "prismjs": "1.29.0",
     "prop-types": "15.8.1",
-    "react": "18.3.1",
+    "react": "^19.0.0",
     "react-docgen": "7.0.3",
-    "react-dom": "18.3.1",
+    "react-dom": "^19.0.0",
     "react-hook-form": "7.53.2",
-    "react-is": "18.3.1",
+    "react-is": "^19.0.0",
     "react-router": "7.1.0",
-    "react-router-dom": "6.26.2",
     "react-runner": "1.0.5",
     "react-simple-code-editor": "0.14.1",
     "react-simple-typewriter": "5.0.1",
@@ -99,9 +98,9 @@
     "@types/babel__core": "^7.20.5",
     "@types/doctrine": "0.0.9",
     "@types/json-schema": "7.0.15",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
-    "@types/react-is": "18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-is": "^19.0.0",
     "@types/react-swipeable-views": "^0.13.6",
     "cpy-cli": "5.0.0",
     "cross-fetch": "4.0.0",

diff --git a/examples/core/auth-nextjs-email/package.json b/examples/core/auth-nextjs-email/package.json
@@ -18,14 +18,14 @@
     "next": "^15",
     "next-auth": "5.0.0-beta.25",
     "nodemailer": "^6",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "typescript": "^5",
     "@types/node": "^20.17.12",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "^8",
     "prisma": "^5",
     "eslint-config-next": "^15"

diff --git a/examples/core/auth-nextjs-pages-nextauth-4/package.json b/examples/core/auth-nextjs-pages-nextauth-4/package.json
@@ -16,14 +16,14 @@
     "@toolpad/core": "latest",
     "next": "^15",
     "next-auth": "^4.24.10",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "typescript": "^5",
     "@types/node": "^20.17.12",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "^8",
     "eslint-config-next": "^15"
   }

diff --git a/examples/core/auth-nextjs-pages-nextauth-4/src/pages/_app.tsx b/examples/core/auth-nextjs-pages-nextauth-4/src/pages/_app.tsx
@@ -13,7 +13,7 @@ import { SessionProvider, signIn, signOut, useSession } from 'next-auth/react';
 import LinearProgress from '@mui/material/LinearProgress';
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
-  getLayout?: (page: React.ReactElement) => React.ReactNode;
+  getLayout?: (page: React.ReactElement<any>) => React.ReactNode;
   requireAuth?: boolean;
 };
 
@@ -46,7 +46,7 @@ const AUTHENTICATION = {
   signOut,
 };
 
-function getDefaultLayout(page: React.ReactElement) {
+function getDefaultLayout(page: React.ReactElement<any>) {
   return <DashboardLayout>{page}</DashboardLayout>;
 }
 

diff --git a/examples/core/auth-nextjs-pages/package.json b/examples/core/auth-nextjs-pages/package.json
@@ -16,14 +16,14 @@
     "@toolpad/core": "latest",
     "next": "^15",
     "next-auth": "5.0.0-beta.25",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "typescript": "^5",
-    "@types/node": "^20.17.12",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/node": "^20.17.6",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "^8",
     "eslint-config-next": "^15"
   }

diff --git a/examples/core/auth-nextjs-pages/src/pages/_app.tsx b/examples/core/auth-nextjs-pages/src/pages/_app.tsx
@@ -13,7 +13,7 @@ import { SessionProvider, signIn, signOut, useSession } from 'next-auth/react';
 import LinearProgress from '@mui/material/LinearProgress';
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
-  getLayout?: (page: React.ReactElement) => React.ReactNode;
+  getLayout?: (page: React.ReactElement<any>) => React.ReactNode;
   requireAuth?: boolean;
 };
 
@@ -46,7 +46,7 @@ const AUTHENTICATION = {
   signOut,
 };
 
-function getDefaultLayout(page: React.ReactElement) {
+function getDefaultLayout(page: React.ReactElement<any>) {
   return (
     <DashboardLayout>
       <PageContainer>{page}</PageContainer>

diff --git a/examples/core/auth-nextjs-passkey/package.json b/examples/core/auth-nextjs-passkey/package.json
@@ -18,14 +18,14 @@
     "@toolpad/core": "latest",
     "next": "^15",
     "next-auth": "5.0.0-beta.25",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^22",
-    "@types/react": "^18",
+    "@types/react": "^19.0.0",
     "prisma": "^5",
-    "@types/react-dom": "^18",
+    "@types/react-dom": "^19.0.0",
     "eslint-config-next": "^15"
   }
 }
diff --git a/examples/core/auth-nextjs-themed/package.json b/examples/core/auth-nextjs-themed/package.json
@@ -23,13 +23,13 @@
     "@toolpad/core": "latest",
     "next": "^15",
     "next-auth": "^5.0.0-beta.25",
-    "react": "^19",
-    "react-dom": "^19"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.17.12",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "^8",
     "eslint-config-next": "^15",
     "typescript": "^5"

diff --git a/examples/core/auth-nextjs/package.json b/examples/core/auth-nextjs/package.json
@@ -14,14 +14,14 @@
     "@toolpad/core": "latest",
     "next": "^15",
     "next-auth": "5.0.0-beta.25",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "typescript": "^5",
     "@types/node": "^20.17.12",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "^8",
     "eslint-config-next": "^15"
   }

diff --git a/examples/core/auth-vite/package.json b/examples/core/auth-vite/package.json
@@ -13,13 +13,13 @@
     "@mui/icons-material": "^6",
     "@mui/material": "^6",
     "@toolpad/core": "latest",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router": "^7"
   },
   "devDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.2",
     "typescript": "^5",
     "vite": "^5.4.8"

diff --git a/examples/core/firebase-vite/package.json b/examples/core/firebase-vite/package.json
@@ -13,13 +13,13 @@
     "@mui/icons-material": "^6",
     "@mui/material": "^6",
     "@toolpad/core": "latest",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router": "^7"
   },
   "devDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.2",
     "typescript": "^5",
     "vite": "^5.4.8"

diff --git a/examples/core/tutorial/package.json b/examples/core/tutorial/package.json
@@ -8,8 +8,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "next": "^15",
     "@toolpad/core": "latest",
     "@mui/material": "^6",
@@ -21,8 +21,8 @@
   "devDependencies": {
     "typescript": "^5",
     "@types/node": "^20.17.12",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "^8",
     "eslint-config-next": "^15"
   }

diff --git a/examples/core/vite/package.json b/examples/core/vite/package.json
@@ -13,13 +13,13 @@
     "@mui/icons-material": "^6",
     "@mui/material": "^6",
     "@toolpad/core": "latest",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router": "^7"
   },
   "devDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.2",
     "typescript": "^5",
     "vite": "^5.4.8"

diff --git a/examples/studio/custom-server-nextjs/package.json b/examples/studio/custom-server-nextjs/package.json
@@ -12,10 +12,10 @@
     "@toolpad/studio": "0.5.2",
     "express": "4.20.0",
     "next": "14.2.10",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "18.3.3"
+    "@types/react": "^19.0.0"
   }
 }
diff --git a/package.json b/package.json
@@ -57,11 +57,11 @@
     "@mui/internal-markdown": "1.0.24",
     "@mui/internal-scripts": "1.0.32",
     "@mui/monorepo": "github:mui/material-ui#0221d17856a63d89e832d49f652b1e189ab7b7cf",
-    "@mui/x-charts": "7.22.2",
+    "@mui/x-charts": "7.23.2",
     "@next/eslint-plugin-next": "14.2.22",
     "@playwright/test": "1.47.2",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "16.0.1",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
     "@types/archiver": "6.0.3",
     "@types/fs-extra": "11.0.4",

diff --git a/packages/create-toolpad-app/src/templates/packageJson.ts b/packages/create-toolpad-app/src/templates/packageJson.ts
@@ -28,8 +28,8 @@ const packageJson: PackageJsonTemplate = (options) => {
   }
 
   const dependencies: Record<string, string> = {
-    react: '^18',
-    'react-dom': '^18',
+    react: '^19',
+    'react-dom': '^19',
     '@toolpad/core': coreVersion ?? 'latest',
     '@mui/material': '^6',
     '@mui/material-nextjs': '^6',

diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json
@@ -69,8 +69,8 @@
     "@mui/material": "6.3.1",
     "@types/invariant": "2.2.37",
     "@types/prop-types": "15.7.14",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/sinon": "^17.0.3",
     "@vitest/browser": "2.1.8",
     "next": "^15.1.3",
@@ -84,7 +84,7 @@
     "@mui/icons-material": "5 - 6",
     "@mui/material": "5 - 6",
     "next": "^14 || ^15",
-    "react": "^18",
+    "react": "^18 || ^19",
     "react-router": "^7"
   },
   "peerDependenciesMeta": {

diff --git a/packages/toolpad-studio-components/package.json b/packages/toolpad-studio-components/package.json
@@ -44,10 +44,10 @@
     "@mui/icons-material": "6.3.1",
     "@mui/lab": "6.0.0-beta.22",
     "@mui/material": "6.3.1",
-    "@mui/x-charts": "7.22.2",
-    "@mui/x-data-grid-premium": "7.22.2",
-    "@mui/x-date-pickers": "7.22.2",
-    "@mui/x-license": "7.21.0",
+    "@mui/x-charts": "7.23.2",
+    "@mui/x-data-grid-premium": "7.23.5",
+    "@mui/x-date-pickers": "7.23.3",
+    "@mui/x-license": "7.23.5",
     "@tanstack/react-query": "5.61.3",
     "@toolpad/studio-runtime": "workspace:*",
     "@toolpad/utils": "workspace:*",
@@ -59,11 +59,11 @@
   },
   "devDependencies": {
     "@types/invariant": "2.2.37",
-    "@types/react": "18.3.18",
-    "react": "18.3.1"
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx
@@ -1010,16 +1010,16 @@ function useDataProviderDataGridProps(
           }));
           apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex });
         },
-      },
+      } satisfies EditToolbarProps as GridToolbarProps,
     },
   };
 }
 
 type NoRowsOverlayProps = React.ComponentProps<typeof GridNoRowsOverlay>;
 
-interface NoRowsOverlayPropsX extends NoRowsOverlayProps {
+type NoRowsOverlayPropsX = NoRowsOverlayProps & {
   error?: Error | null;
-}
+};
 
 function NoRowsOverlay(props: NoRowsOverlayPropsX) {
   if (props.error) {
@@ -1331,7 +1331,7 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
               slotProps={{
                 noRowsOverlay: {
                   error: rowLoadingError,
-                } as any,
+                } satisfies NoRowsOverlayPropsX as NoRowsOverlayProps,
                 ...dataProviderSlotProps,
               }}
               onColumnResize={handleResize}