v0.16.0 (#5014)

Author: apedroferreira

CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## v0.16.0
+
+<!-- generated comparing v0.15.0..master -->
+
+_Jun 11, 2025_
+
+A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- CRUD improvements including non-editable fields, rendering custom fields, and page containers out-of-the-box!
+
+**BREAKING CHANGE**: CRUD pages now include a `PageContainer` based on the `pageTitles` prop. Either remove the `PageContainer` you were using in these pages and set the `pageTitles` prop, or override the container using the `pageContainer` slot.
+You can find more detailed instructions and examples in the [CRUD component documentation](https://mui.com/toolpad/core/react-crud/).
+
+- New app provider for [Tanstack React Router](https://mui.com/toolpad/core/integrations/tanstack-router/).
+- New `useNavigationHook` to access your navigation configuration from anywhere.
+- Japanese locale support.
+
+### `@toolpad/core`
+
+- Support non-editable items in CRUD form pages (#4918) @apedroferreira
+- Allow custom form fields in CRUD (#4968) @apedroferreira
+- Add Tanstack React Router provider (#4971) @apedroferreira
+- CRUD page titles with `pageTitles` and `pageTitle` props (#4930) @apedroferreira
+- Add new `useNavigation` hook (#4965) @apedroferreira
+- Make CRUD forms React 18 compatible (#4966) @apedroferreira
+- Allow full customization for dashboard header (#4820) @rkristelijn
+- Fix closing behavior under strict mode (#4973) @Janpot
+- CRUD UI improvements (#4937) @apedroferreira
+- Add Japanese locale support (#4970) @yuito-it
+- Small adjustment to Data Grid selection in CRUD. (#4983) @apedroferreira
+- Use named imports for locales (#4945) @yuito-it
+
+### Core
+
+- Remove Toolpad Studio (#4987) @apedroferreira
+- Remove @vitejs/plugin-react as dependency (#4977) @Janpot
+- Remove required checkout step (f916976) @oliviertassinari
+
+All contributors of this release in alphabetical order: @apedroferreira, @Janpot, @oliviertassinari, @rkristelijn, @yuito-it
+
 ## v0.15.0
 
 <!-- generated comparing v0.14.0..master -->

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": true,
   "license": "MIT",
   "scripts": {

lerna.json

@@ -1,5 +1,5 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "npmClient": "pnpm"
 }

packages/create-toolpad-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-toolpad-app",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "MUI Team",
   "description": "Create Toolpad apps with one command",
   "keywords": [

packages/create-toolpad-app/src/templates/employeesPage.ts

@@ -5,7 +5,7 @@ const ordersPage: Template = (options) => {
   const routerType = options.router;
   const framework = options.framework;
 
-  let imports = `${routerType === 'nextjs-app' ? 'use client;' : ''}import * as React from 'react';
+  let imports = `${routerType === 'nextjs-app' ? `'use client';\n` : ''}import * as React from 'react';
 ${routerType === 'nextjs-pages' ? `import { useRouter } from 'next/router';` : ''}
 ${routerType === 'nextjs-app' ? `import { useParams } from 'next/navigation';` : ''}
 ${framework === 'vite' ? `import { useParams } from 'react-router';` : ''}
@@ -32,8 +32,6 @@ import { employeesDataSource, Employee, employeesCache } from '${routerType ===
     }
   }
 
-  const isAsync = authEnabled && routerType === 'nextjs-app' ? 'async ' : '';
-
   let requireAuth = '';
   if (authEnabled && routerType === 'nextjs-pages') {
     requireAuth = `\n\nEmployeesCrudPage.requireAuth = true;`;
@@ -42,15 +40,20 @@ import { employeesDataSource, Employee, employeesCache } from '${routerType ===
   return `${imports}
 
 
-export default ${isAsync}function EmployeesCrudPage() {
+export default function EmployeesCrudPage() {
   ${
     routerType === 'nextjs-pages'
       ? `const router = useRouter();
   const { segments = [] } = router.query;
   const [employeeId] = segments;`
       : ''
   }
-  ${routerType === 'nextjs-app' ? 'const { employeeId } = useParams();' : ''}
+  ${
+    routerType === 'nextjs-app'
+      ? `const params = useParams();
+  const [employeeId] = params.segments ?? [];`
+      : ''
+  }
   ${framework === 'vite' ? 'const { employeeId } = useParams();' : ''}
   
   ${sessionHandling}

packages/create-toolpad-app/src/templates/indexPage.ts

@@ -51,11 +51,11 @@ export default ${isAsync}function HomePage() {
   ${sessionHandling}
 
   return (    
+    <PageContainer>
       <Typography>
-        <PageContainer>
-          ${welcomeMessage}
-        </PageContainer>
+        ${welcomeMessage}
       </Typography>
+    </PageContainer>
   );
 }${requireAuth}
 `;

packages/create-toolpad-app/src/templates/vite/dashboardLayout.ts

@@ -9,9 +9,8 @@ const dashboardTemplate: Template = (options) => {
 `
       : ``
   }
-import { Outlet } from 'react-router';
+import { Outlet${auth ? `, Navigate, useLocation` : ''} } from 'react-router';
 import { DashboardLayout${auth ? ', ThemeSwitcher' : ''} } from '@toolpad/core/DashboardLayout';
-import { PageContainer } from '@toolpad/core/PageContainer';
 ${
   auth
     ? `import { Account } from '@toolpad/core/Account';
@@ -55,7 +54,7 @@ export default function Layout() {
   }
 
   return (
-    <DashboardLayout title={title} ${auth ? ` slots={{ toolbarActions: CustomActions }}` : ''}>
+    <DashboardLayout ${auth ? ` slots={{ toolbarActions: CustomActions }}` : ''}>
       <Outlet />
     </DashboardLayout>
   );

packages/eslint-plugin-material-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-material-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": true,
   "description": "Custom eslint rules for Material UI.",
   "main": "src/index.js",

packages/toolpad-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolpad/core",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "MUI Team",
   "description": "Dashboard framework powered by Material UI.",
   "main": "./node/index.js",
@@ -66,8 +66,8 @@
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@types/sinon": "^17.0.4",
-    "@vitest/browser": "2.1.9",
     "@vitejs/plugin-react": "4.5.2",
+    "@vitest/browser": "2.1.9",
     "next": "^15.3.3",
     "next-router-mock": "^0.9.13",
     "playwright": "1.52.0",

packages/toolpad-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolpad/utils",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "MUI Team",
   "description": "Shared utilities used by Toolpad packages.",
   "homepage": "https://github.com/mui/toolpad#readme",