Merge remote-tracking branch 'upstream/master'

docs/package.json

@@ -34,7 +34,7 @@
     "@mui/monorepo": "github:mui/material-ui#0102a9579628d48d784511a562b7b72f0f51847e",
     "@mui/styles": "5.15.14",
     "@mui/utils": "5.15.14",
-    "@mui/x-data-grid-pro": "6.19.8",
+    "@mui/x-data-grid-pro": "7.0.0",
     "@toolpad/studio": "workspace:*",
     "@trendmicro/react-interpolate": "0.5.5",
     "@types/lodash": "4.14.202",
@@ -89,15 +89,15 @@
     "webpack-bundle-analyzer": "4.10.1"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-constant-elements": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/plugin-transform-react-constant-elements": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
     "@types/doctrine": "0.0.9",
     "@types/json-schema": "7.0.15",
     "@types/react-is": "18.2.4",
     "cpy-cli": "5.0.0",
     "cross-fetch": "4.0.0",
     "gm": "1.25.0",
-    "typescript": "5.4.2",
+    "typescript": "5.4.3",
     "typescript-to-proptypes": "2.2.1"
   }
 }

examples/custom-server-nextjs/package.json

@@ -16,6 +16,6 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.66"
+    "@types/react": "18.2.73"
   }
 }

examples/react-pages/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@mui/material": "5.15.14",
     "@toolpad/studio": "0.1.53",
-    "@mui/x-data-grid": "6.19.8",
+    "@mui/x-data-grid": "7.0.0",
     "@tanstack/react-query": "5.18.1"
   },
   "devDependencies": {}

examples/with-prisma-data-provider/package.json

@@ -14,10 +14,10 @@
     "qrcode": "^1.5.3"
   },
   "devDependencies": {
-    "@types/node": "^20.11.28",
+    "@types/node": "^20.11.30",
     "@types/qrcode": "^1.5.5",
     "prisma": "^5.11.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.3"
   }
 }

examples/with-prisma/package.json

@@ -14,10 +14,10 @@
     "qrcode": "^1.5.3"
   },
   "devDependencies": {
-    "@types/node": "^20.11.28",
+    "@types/node": "^20.11.30",
     "@types/qrcode": "^1.5.5",
     "prisma": "^5.11.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.3"
   }
 }

package.json

@@ -40,13 +40,13 @@
   "devDependencies": {
     "@argos-ci/core": "1.5.5",
     "@mui/monorepo": "github:mui/material-ui#0102a9579628d48d784511a562b7b72f0f51847e",
-    "@mui/x-charts": "6.19.8",
+    "@mui/x-charts": "7.0.0",
     "@next/eslint-plugin-next": "14.1.4",
     "@playwright/test": "1.42.1",
-    "@testing-library/react": "14.2.1",
+    "@testing-library/react": "14.2.2",
     "@types/archiver": "6.0.2",
     "@types/gtag.js": "0.0.19",
-    "@types/node": "20.11.28",
+    "@types/node": "20.11.30",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "chalk": "5.3.0",
@@ -75,9 +75,9 @@
     "recharts": "2.12.3",
     "regenerator-runtime": "0.14.1",
     "rimraf": "5.0.5",
-    "typescript": "5.4.2",
+    "typescript": "5.4.3",
     "vitest-dom": "0.1.1",
-    "vitest-fail-on-console": "0.5.1"
+    "vitest-fail-on-console": "0.6.3"
   },
   "dependencies": {
     "archiver": "7.0.0",

packages/create-toolpad-app/package.json

@@ -42,7 +42,7 @@
   "devDependencies": {
     "@types/inquirer": "9.0.7",
     "@types/invariant": "2.2.37",
-    "@types/node": "20.11.28",
+    "@types/node": "20.11.30",
     "@types/semver": "7.5.8",
     "@types/tar": "6.1.11",
     "@types/yargs": "17.0.32"

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

@@ -8,7 +8,7 @@
     "emoji-regex": "10.3.0"
   },
   "devDependencies": {
-    "@types/eslint": "8.56.5",
+    "@types/eslint": "8.56.6",
     "@typescript-eslint/parser": "7.2.0"
   },
   "scripts": {},

packages/toolpad-core/package.json

@@ -53,7 +53,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.67",
+    "@types/react": "18.2.73",
     "@types/react-dom": "18.2.22"
   },
   "peerDependencies": {

packages/toolpad-studio-components/package.json

@@ -42,10 +42,10 @@
     "@mui/icons-material": "5.15.14",
     "@mui/lab": "5.0.0-alpha.169",
     "@mui/material": "5.15.14",
-    "@mui/x-charts": "6.19.8",
-    "@mui/x-data-grid-pro": "6.19.8",
-    "@mui/x-date-pickers": "6.19.8",
-    "@mui/x-license-pro": "6.10.2",
+    "@mui/x-charts": "7.0.0",
+    "@mui/x-data-grid-pro": "7.0.0",
+    "@mui/x-date-pickers": "7.0.0",
+    "@mui/x-license": "7.0.0",
     "@tanstack/react-query": "5.18.1",
     "@toolpad/studio-runtime": "workspace:*",
     "@toolpad/utils": "workspace:*",
@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@types/invariant": "2.2.37",
-    "@types/react": "18.2.66",
+    "@types/react": "18.2.73",
     "react": "18.2.0"
   },
   "peerDependencies": {

packages/toolpad-studio-components/src/DataGrid.tsx

@@ -10,7 +10,6 @@ import {
   GridRowSelectionModel,
   GridValueFormatterParams,
   GridColDef,
-  GridValueGetterParams,
   useGridApiRef,
   GridRenderCellParams,
   useGridRootProps,
@@ -37,11 +36,14 @@ import {
   GridEventListener,
   GridRowEditStopReasons,
   GridRowEditStartReasons,
+  GridValueGetter,
+  GridToolbarProps,
+  GridColType,
 } from '@mui/x-data-grid-pro';
 import {
   Unstable_LicenseInfoProvider as LicenseInfoProvider,
   Unstable_LicenseInfoProviderProps as LicenseInfoProviderProps,
-} from '@mui/x-license-pro';
+} from '@mui/x-license';
 import * as React from 'react';
 import {
   useNode,
@@ -348,7 +350,7 @@ function ImageCell({ field, id, value: src }: GridRenderCellParams<any, any, any
 
 const INVALID_DATE = new Date(NaN);
 
-function dateValueGetter({ value }: GridValueGetterParams<any, any>): Date | undefined {
+const dateValueGetter: GridValueGetter = (value: any): Date | undefined => {
   if (value === null || value === undefined || value === '') {
     return undefined;
   }
@@ -374,7 +376,7 @@ function dateValueGetter({ value }: GridValueGetterParams<any, any>): Date | und
   // It's fine if this turns out to be an invalid date, the user wanted a date column, if the data can't be parsed as a date
   // it should just show as such
   return INVALID_DATE;
-}
+};
 
 function ComponentErrorFallback({ error }: FallbackProps) {
   return (
@@ -442,8 +444,9 @@ export const CUSTOM_COLUMN_TYPES: Record<string, GridColTypeDef> = {
 export interface SerializableGridColumn
   extends Pick<
     GridColDef,
-    'field' | 'type' | 'align' | 'width' | 'headerName' | 'sortable' | 'filterable' | 'editable'
+    'field' | 'align' | 'width' | 'headerName' | 'sortable' | 'filterable' | 'editable'
   > {
+  type?: string;
   numberFormat?: NumberFormat;
   dateFormat?: DateFormat;
   dateTimeFormat?: DateFormat;
@@ -466,40 +469,43 @@ export function inferColumns(rows: GridRowsProp): SerializableGridColumns {
   });
 }
 
+function getNarrowedColType(type?: string): GridColType | undefined {
+  return (type && type in DEFAULT_COLUMN_TYPES ? type : undefined) as GridColType | undefined;
+}
+
 export function parseColumns(columns: SerializableGridColumns): GridColDef[] {
-  return columns.map((column) => {
+  return columns.map(({ type: colType, ...column }) => {
     const isIdColumn = column.field === 'id';
 
     if (isIdColumn) {
       return {
         ...column,
+        type: getNarrowedColType(colType),
         editable: false,
         hide: true,
         renderCell: ({ row, value }) => (row[DRAFT_ROW_MARKER] ? '' : value),
       };
     }
 
-    let baseColumn: Omit<SerializableGridColumn, 'field'> = { editable: true };
+    let baseColumn: Omit<GridColDef, 'field'> = { editable: true };
 
-    if (column.type) {
-      baseColumn = { ...baseColumn, ...CUSTOM_COLUMN_TYPES[column.type] };
+    if (colType) {
+      baseColumn = { ...baseColumn, ...CUSTOM_COLUMN_TYPES[colType], ...column };
     }
 
-    if (column.type === 'number' && column.numberFormat) {
+    if (colType === 'number' && column.numberFormat) {
       const format = createNumberFormat(column.numberFormat);
-      return {
+      baseColumn = {
         ...baseColumn,
-        ...column,
-        valueFormatter: ({ value }) => format.format(value),
+        valueFormatter: (value: any) => format.format(value),
       };
     }
 
-    if (column.type === 'date') {
+    if (colType === 'date') {
       const format = createDateFormat(column.dateFormat);
-      return {
+      baseColumn = {
         ...baseColumn,
-        ...column,
-        valueFormatter: ({ value }) => {
+        valueFormatter: (value: any) => {
           try {
             return format.format(value);
           } catch {
@@ -509,12 +515,11 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] {
       };
     }
 
-    if (column.type === 'dateTime') {
+    if (colType === 'dateTime') {
       const format = createDateFormat(column.dateTimeFormat);
-      return {
+      baseColumn = {
         ...baseColumn,
-        ...column,
-        valueFormatter: ({ value }) => {
+        valueFormatter: (value: any) => {
           try {
             return format.format(value);
           } catch {
@@ -524,9 +529,7 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] {
       };
     }
 
-    const type = column.type && column.type in DEFAULT_COLUMN_TYPES ? column.type : undefined;
-
-    return { ...baseColumn, ...column, type };
+    return { ...baseColumn, ...column, type: getNarrowedColType(colType) };
   });
 }
 
@@ -603,7 +606,7 @@ function DeleteAction({ id, dataProvider, refetch }: DeleteActionProps) {
   );
 }
 
-interface EditToolbarProps {
+interface EditToolbarProps extends GridToolbarProps {
   hasCreateButton?: boolean;
   createDisabled?: boolean;
   onCreateClick?: () => void;
@@ -991,11 +994,13 @@ function useDataProviderDataGridProps(
   };
 }
 
-interface NoRowsOverlayProps extends React.ComponentProps<typeof GridNoRowsOverlay> {
-  error: Error;
+type NoRowsOverlayProps = React.ComponentProps<typeof GridNoRowsOverlay>;
+
+interface NoRowsOverlayPropsX extends NoRowsOverlayProps {
+  error?: Error | null;
 }
 
-function NoRowsOverlay(props: NoRowsOverlayProps) {
+function NoRowsOverlay(props: NoRowsOverlayPropsX) {
   if (props.error) {
     return <ErrorContent sx={{ height: '100%' }} error={props.error} />;
   }

packages/toolpad-studio-runtime/package.json

@@ -60,7 +60,7 @@
     "@types/cookie": "0.6.0",
     "@types/express": "4.17.21",
     "@types/invariant": "2.2.37",
-    "@types/react": "18.2.66",
+    "@types/react": "18.2.73",
     "@types/react-is": "18.2.4",
     "concurrently": "8.2.2"
   },

packages/toolpad-studio/package.json

@@ -54,12 +54,12 @@
     "@mui/system": "5.15.14",
     "@mui/types": "7.2.14",
     "@mui/utils": "5.15.14",
-    "@mui/x-charts": "6.19.8",
-    "@mui/x-data-grid": "6.19.8",
-    "@mui/x-data-grid-pro": "6.19.8",
-    "@mui/x-date-pickers": "6.19.8",
-    "@mui/x-date-pickers-pro": "6.19.8",
-    "@mui/x-tree-view": "6.17.0",
+    "@mui/x-charts": "7.0.0",
+    "@mui/x-data-grid": "7.0.0",
+    "@mui/x-data-grid-pro": "7.0.0",
+    "@mui/x-date-pickers": "7.0.0",
+    "@mui/x-date-pickers-pro": "7.0.0",
+    "@mui/x-tree-view": "7.0.0",
     "@tanstack/react-query": "5.18.1",
     "@tanstack/react-query-devtools": "5.18.1",
     "@toolpad/studio-components": "workspace:*",
@@ -144,8 +144,8 @@
     "@types/invariant": "2.2.37",
     "@types/lodash-es": "4.17.12",
     "@types/node-fetch": "2.6.11",
-    "@types/pg": "8.11.2",
-    "@types/react": "18.2.66",
+    "@types/pg": "8.11.4",
+    "@types/react": "18.2.73",
     "@types/react-dom": "18.2.22",
     "@types/react-is": "18.2.4",
     "@types/semver": "7.5.8",
@@ -159,7 +159,7 @@
     "eslint-plugin-import": "2.29.1",
     "formidable": "3.5.1",
     "react-transition-group": "4.4.5",
-    "webpack": "5.90.3"
+    "webpack": "5.91.0"
   },
   "typings": "./index.d.ts",
   "publishConfig": {

packages/toolpad-studio/src/components/EditableTreeItem.tsx

@@ -183,16 +183,15 @@ export default function EditableTreeItem({
           </Typography>
         ),
       )}
-      sx={
-        isEditing
-          ? {
-              ...sx,
-              '> .MuiTreeItem-content': {
-                backgroundColor: alpha(theme.palette.primary.main, 0.2),
-              },
-            }
-          : sx
-      }
+      sx={{
+        ...sx,
+        paddingLeft: theme.spacing(0.5),
+        '> .MuiTreeItem-content': {
+          padding: theme.spacing(0, 0.5),
+          gap: theme.spacing(0.5),
+          backgroundColor: isEditing ? alpha(theme.palette.primary.main, 0.2) : undefined,
+        },
+      }}
     />
   );
 }

packages/toolpad-studio/src/server/toolpadAppBuilder.ts

@@ -298,6 +298,7 @@ if (import.meta.hot) {
       },
       envFile: false,
       resolve: {
+        dedupe: ['@mui/material'],
         alias: [
           {
             // FIXME(https://github.com/mui/material-ui/issues/35233)