diff --git a/examples/core/auth-nextjs-themed/app/(dashboard)/DashboardContent.tsx b/examples/core/auth-nextjs-themed/app/(dashboard)/DashboardContent.tsx index cb951603a50..9fd13812966 100644 --- a/examples/core/auth-nextjs-themed/app/(dashboard)/DashboardContent.tsx +++ b/examples/core/auth-nextjs-themed/app/(dashboard)/DashboardContent.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import StatCard, { StatCardProps } from '../components/StatCard'; diff --git a/examples/core/auth-nextjs-themed/app/(dashboard)/employees/[[...segments]]/page.tsx b/examples/core/auth-nextjs-themed/app/(dashboard)/employees/[[...segments]]/page.tsx index feb92ee0b86..8ee425c8a38 100644 --- a/examples/core/auth-nextjs-themed/app/(dashboard)/employees/[[...segments]]/page.tsx +++ b/examples/core/auth-nextjs-themed/app/(dashboard)/employees/[[...segments]]/page.tsx @@ -1,88 +1,22 @@ 'use client'; import * as React from 'react'; -import { usePathname, useRouter } from 'next/navigation'; -import { CrudProvider, List, Create, Edit, Show } from '@toolpad/core/Crud'; +import { Crud } from '@toolpad/core/Crud'; import { employeesDataSource, Employee, employeesCache } from '../../../mocks/employees'; import CustomDataGrid from '../../../components/CustomDataGrid'; -function matchPath(pattern: string, pathname: string): string | null { - const regex = new RegExp(`^${pattern.replace(/:[^/]+/g, '([^/]+)')}$`); - const match = pathname.match(regex); - return match ? match[1] : null; -} - export default function EmployeesCrudPage() { - const pathname = usePathname(); - const router = useRouter(); - - const rootPath = '/employees'; - const listPath = rootPath; - const showPath = `${rootPath}/:employeeId`; - const createPath = `${rootPath}/new`; - const editPath = `${rootPath}/:employeeId/edit`; - - const showEmployeeId = matchPath(showPath, pathname); - const editEmployeeId = matchPath(editPath, pathname); - - const handleRowClick = React.useCallback( - (employeeId: string | number) => { - console.log('Clicked on row with ID', employeeId); - router.push(`${rootPath}/${String(employeeId)}`); - }, - [router], - ); - - const handleCreateClick = React.useCallback(() => { - router.push(createPath); - }, [createPath, router]); - - const handleEditClick = React.useCallback( - (employeeId: string | number) => { - router.push(`${rootPath}/${String(employeeId)}/edit`); - }, - [router], - ); - - const handleCreate = React.useCallback(() => { - router.push(listPath); - }, [listPath, router]); - - const handleEdit = React.useCallback(() => { - router.push(listPath); - }, [listPath, router]); - - const handleDelete = React.useCallback(() => { - router.push(listPath); - }, [listPath, router]); - return ( - dataSource={employeesDataSource} dataSourceCache={employeesCache}> - {pathname === listPath ? ( - - initialPageSize={20} - onRowClick={handleRowClick} - onCreateClick={handleCreateClick} - onEditClick={handleEditClick} - slots={{ - dataGrid: CustomDataGrid, - }} - /> - ) : null} - {pathname === createPath ? ( - - initialValues={{ title: 'New Employee' }} - onSubmitSuccess={handleCreate} - resetOnSubmit={false} - /> - ) : null} - {pathname !== createPath && showEmployeeId ? ( - id={showEmployeeId} onEditClick={handleEditClick} onDelete={handleDelete} /> - ) : null} - {editEmployeeId ? ( - - id={editEmployeeId} onSubmitSuccess={handleEdit} /> - - ) : null} - + + dataSource={employeesDataSource} + dataSourceCache={employeesCache} + rootPath="/employees" + initialPageSize={20} + defaultValues={{ title: 'New Employee' }} + slots={{ + list: { + dataGrid: CustomDataGrid, + }, + }} + /> ); } diff --git a/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx b/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx index d0f18d52d1b..9b71fc336ae 100644 --- a/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx +++ b/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx @@ -9,18 +9,15 @@ import CardContent from '@mui/material/CardContent'; import Collapse from '@mui/material/Collapse'; import Typography from '@mui/material/Typography'; import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem'; import { - unstable_useTreeItem2 as useTreeItem2, - UseTreeItem2Parameters, -} from '@mui/x-tree-view/useTreeItem2'; -import { - TreeItem2Content, - TreeItem2IconContainer, - TreeItem2Label, - TreeItem2Root, -} from '@mui/x-tree-view/TreeItem2'; -import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; -import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; + TreeItemContent, + TreeItemIconContainer, + TreeItemLabel, + TreeItemRoot, +} from '@mui/x-tree-view/TreeItem'; +import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon'; +import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider'; import { TreeViewBaseItem } from '@mui/x-tree-view/models'; import { useTheme } from '@mui/material/styles'; @@ -112,17 +109,17 @@ function CustomLabel({ color, expandable, children, ...other }: CustomLabelProps const iconColor = color ? colors[color] : null; return ( - + {iconColor && } {children} - + ); } interface CustomTreeItemProps - extends Omit, + extends Omit, Omit, 'onFocus'> {} const CustomTreeItem = React.forwardRef(function CustomTreeItem( @@ -139,14 +136,14 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem( getGroupTransitionProps, status, publicAPI, - } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); + } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref }); const item = publicAPI.getItem(itemId); const color = item?.color; return ( - - - + + {status.expandable && ( - - - + + + )} - + {children && ( )} - - + + ); }); diff --git a/examples/core/auth-nextjs-themed/package.json b/examples/core/auth-nextjs-themed/package.json index 1c3e133d6df..4b6fbbb8f85 100644 --- a/examples/core/auth-nextjs-themed/package.json +++ b/examples/core/auth-nextjs-themed/package.json @@ -19,7 +19,7 @@ "dayjs": "^1", "clsx": "^2", "@react-spring/web": "^9", - "@toolpad/core": "^0.13.0", + "@toolpad/core": "^0.14.0", "next": "^15", "next-auth": "^5.0.0-beta.25", "react": "^19.0.0", diff --git a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx index b8aa7f325c8..f163a6e8bda 100644 --- a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx +++ b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx @@ -442,27 +442,8 @@ export const inputsCustomizations: Components = { styleOverrides: { root: ({ theme }) => ({ color: theme.palette.grey[500], - '.employee-edit-container & .MuiIconButton-root': { - border: 'none', - '&:hover': { - backgroundColor: 'rgba(0, 0, 0, 0.04)', - border: 'none', - }, - '&:active': { - border: 'none', - }, - }, ...theme.applyStyles('dark', { color: theme.palette.grey[400], - '.employee-edit-container & .MuiIconButton-root': { - backgroundColor: 'transparent', - border: 'none', - height: 24, - '&:hover': { - backgroundColor: theme.palette.grey[900], - border: 'none', - }, - }, }), }), }, @@ -474,4 +455,22 @@ export const inputsCustomizations: Components = { }), }, }, + MuiPickersInputBase: { + styleOverrides: { + // @ts-expect-error + root: ({ theme }) => ({ + marginTop: '6px', + border: `1px solid ${theme.palette.divider}`, + ' .MuiPickersInputBase-sectionsContainer': { + padding: '10px 0', + }, + ' .MuiPickersOutlinedInput-notchedOutline': { + border: 0, + }, + ' .MuiIconButton-root': { + border: 0, + }, + }), + }, + }, }; diff --git a/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts b/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts index fcfb2b39b80..a34760bd56b 100644 --- a/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts +++ b/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts @@ -6,5 +6,8 @@ declare module '@mui/material/styles' { defaultProps?: Partial; styleOverrides?: Record; }; + MuiPickersInputBase?: { + styleOverrides?: Record; + }; } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fecf86d5fa4..ac80ba33980 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -201,7 +201,7 @@ importers: version: 7.37.4(eslint@8.57.1) eslint-plugin-react-compiler: specifier: latest - version: 19.0.0-beta-ebf51a3-20250411(eslint@8.57.1) + version: 19.1.0-rc.1(eslint@8.57.1) eslint-plugin-react-hooks: specifier: 5.2.0 version: 5.2.0(eslint@8.57.1) @@ -5600,8 +5600,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@19.0.0-beta-ebf51a3-20250411: - resolution: {integrity: sha512-R7ncuwbCPFAoeMlS56DGGSJFxmRtlWafYH/iWyep5Ks0RaPqTCL4k5gA87axUBBcITsaIgUGkbqAxDxl8Xfm5A==} + eslint-plugin-react-compiler@19.1.0-rc.1: + resolution: {integrity: sha512-3umw5eqZXapBl7aQGmvcjheKhUbsElb9jTETxRZg371e1LG4EPs/zCHt2JzP+wNcdaZWzjU/R730zPUJblY2zw==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -15409,7 +15409,7 @@ snapshots: globals: 13.24.0 rambda: 7.5.0 - eslint-plugin-react-compiler@19.0.0-beta-ebf51a3-20250411(eslint@8.57.1): + eslint-plugin-react-compiler@19.1.0-rc.1(eslint@8.57.1): dependencies: '@babel/core': 7.26.10 '@babel/parser': 7.27.0