Bump MUI X to 7.0.0 (major) (#3310)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: MUI bot <[email protected]>
mui · Mar 28, 2024 · 97df67b · 97df67b
1 parent 53726c3
commit 97df67b
Show file tree

Hide file tree

Showing 19 changed files with 345 additions and 224 deletions.
diff --git a/docs/package.json b/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",

diff --git a/examples/react-pages/package.json b/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": {}

diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
   "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",

diff --git a/packages/toolpad-studio-components/package.json b/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:*",

diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/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} />;
   }

diff --git a/packages/toolpad-studio/package.json b/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:*",

diff --git a/packages/toolpad-studio/src/components/EditableTreeItem.tsx b/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,
+        },
+      }}
     />
   );
 }
diff --git a/packages/toolpad-studio/src/routes.ts b/packages/toolpad-studio/src/routes.ts
diff --git a/packages/toolpad-studio/src/theme.ts b/packages/toolpad-studio/src/theme.ts
@@ -1,6 +1,9 @@
 import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
 import { tooltipClasses } from '@mui/material';
 import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles';
+import type {} from '@mui/x-data-grid/themeAugmentation';
+import type {} from '@mui/x-data-grid-pro/themeAugmentation';
+import type {} from '@mui/x-tree-view/themeAugmentation';
 
 declare module '@mui/material/styles/createPalette' {
   interface ColorRange {
@@ -37,7 +40,7 @@ declare module '@mui/material/styles/createTypography' {
   }
 }
 
-declare module '@mui/material/Chip' {
+declare module '@mui/material' {
   interface ChipPropsColorOverrides {
     grey: true;
   }

diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx
@@ -38,6 +38,7 @@ import GoogleIcon from '@mui/icons-material/Google';
 import { TabContext, TabList } from '@mui/lab';
 import { updateArray } from '@toolpad/utils/immutability';
 import * as appDom from '@toolpad/studio-runtime/appDom';
+import invariant from 'invariant';
 import { useAppState, useAppStateApi } from '../AppState';
 import TabPanel from '../../components/TabPanel';
 import AzureIcon from '../../components/icons/AzureIcon';
@@ -201,12 +202,14 @@ export function AppAuthenticationEditor() {
   );
 }
 
-interface RolesToolbarProps {
-  addNewRoleDisabled: boolean;
-  onAddNewRole: () => void;
+interface RolesToolbarProps extends React.ComponentProps<typeof GridToolbarContainer> {
+  addNewRoleDisabled?: boolean;
+  onAddNewRole?: () => void;
 }
 
 function RolesToolbar({ addNewRoleDisabled, onAddNewRole }: RolesToolbarProps) {
+  invariant(typeof addNewRoleDisabled === 'boolean', 'addNewRoleDisabled is required in slotProps');
+  invariant(typeof onAddNewRole === 'function', 'onAddNewRole is required in slotProps');
   return (
     <GridToolbarContainer>
       <Button