Bump MUI X to 7.0.0 (major)

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",

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": {}

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",

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:*",

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<any, any, any, any> = (value): 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/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:*",

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

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

packages/toolpad-studio/src/theme.ts

@@ -37,7 +37,7 @@ declare module '@mui/material/styles/createTypography' {
   }
 }
 
-declare module '@mui/material/Chip' {
+declare module '@mui/material' {
   interface ChipPropsColorOverrides {
     grey: true;
   }

packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx

@@ -457,6 +457,7 @@ export function AppRolesEditor({ onRowUpdateError }: { onRowUpdateError: (error:
           return true;
         }}
         slots={{
+          // @ts-expect-error https://github.com/mui/mui-toolpad/pull/3310#issuecomment-2023043453
           toolbar: RolesToolbar,
         }}
         slotProps={{

packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NodeId } from '@toolpad/studio-runtime';
-import { Box, Typography } from '@mui/material';
-import { TreeView, TreeItem, TreeItemProps } from '@mui/x-tree-view';
+import { Box, Typography, styled } from '@mui/material';
+import { SimpleTreeView, TreeItem, TreeItemProps } from '@mui/x-tree-view';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import useBoolean from '@toolpad/utils/hooks/useBoolean';
@@ -13,6 +13,9 @@ import { removePageLayoutNode } from '../pageLayout';
 import EditableTreeItem from '../../../components/EditableTreeItem';
 import ExplorerHeader from '../ExplorerHeader';
 
+const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 });
+const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 });
+
 export interface CustomTreeItemProps extends TreeItemProps {
   ref?: React.RefObject<HTMLLIElement>;
   node: appDom.ElementNode;
@@ -100,7 +103,7 @@ function RecursiveSubTree({ dom, root }: { dom: appDom.AppDom; root: appDom.Elem
 
   if (children.length > 0) {
     return (
-      <CustomTreeItem nodeId={root.id} node={root}>
+      <CustomTreeItem itemId={root.id} node={root}>
         {children.map((childNode) => (
           <RecursiveSubTree key={childNode.id} dom={dom} root={childNode} />
         ))}
@@ -110,12 +113,12 @@ function RecursiveSubTree({ dom, root }: { dom: appDom.AppDom; root: appDom.Elem
   if (renderItem.length > 0) {
     return (
       <CustomTreeItem
-        nodeId={root.id}
+        itemId={root.id}
         node={root}
         label={<Typography variant="body2">{root.name}</Typography>}
       >
         <TreeItem
-          nodeId={`${root.id}-renderItem`}
+          itemId={`${root.id}-renderItem`}
           label={<Typography variant="body2">renderItem</Typography>}
         >
           {renderItem.map((childNode) => (
@@ -126,7 +129,7 @@ function RecursiveSubTree({ dom, root }: { dom: appDom.AppDom; root: appDom.Elem
     );
   }
 
-  return <CustomTreeItem nodeId={root.id} node={root} />;
+  return <CustomTreeItem itemId={root.id} node={root} />;
 }
 
 export default function HierarchyExplorer() {
@@ -156,14 +159,17 @@ export default function HierarchyExplorer() {
   }, [dom, currentPageNode]);
 
   const handleNodeSelect = React.useCallback(
-    (event: React.SyntheticEvent, nodeId: string) => {
-      appStateApi.selectNode(nodeId as NodeId);
+    (event: React.SyntheticEvent, itemIds: string | null) => {
+      if (!itemIds) {
+        return;
+      }
+      appStateApi.selectNode(itemIds as NodeId);
     },
     [appStateApi],
   );
 
   const handleNodeFocus = React.useCallback(
-    (event: React.SyntheticEvent, nodeId: string) => {
+    (event: React.SyntheticEvent | null, nodeId: string) => {
       appStateApi.hoverNode(nodeId as NodeId);
     },
     [appStateApi],
@@ -212,15 +218,15 @@ export default function HierarchyExplorer() {
   return (
     <React.Fragment>
       <ExplorerHeader headerText="Page hierarchy" />
-      <TreeView
+      <SimpleTreeView
         aria-label="Page hierarchy explorer"
-        defaultCollapseIcon={<ExpandMoreIcon sx={{ fontSize: '0.9rem', opacity: 0.5 }} />}
-        defaultExpandIcon={<ChevronRightIcon sx={{ fontSize: '0.9rem', opacity: 0.5 }} />}
-        expanded={Array.from(expandedDomNodeIdSet)}
-        selected={selectedDomNodeId}
-        onNodeSelect={handleNodeSelect}
-        onNodeFocus={handleNodeFocus}
-        onNodeToggle={handleNodeToggle}
+        // TODO: This belongs as a default property in the theme
+        slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }}
+        expandedItems={Array.from(expandedDomNodeIdSet)}
+        selectedItems={selectedDomNodeId}
+        onSelectedItemsChange={handleNodeSelect}
+        onItemFocus={handleNodeFocus}
+        onExpandedItemsChange={handleNodeToggle}
         onKeyDown={handleKeyDown}
         sx={{
           flexGrow: 1,
@@ -233,7 +239,7 @@ export default function HierarchyExplorer() {
         {rootChildren.map((childNode) => (
           <RecursiveSubTree key={childNode.id} dom={dom} root={childNode} />
         ))}
-      </TreeView>
+      </SimpleTreeView>
     </React.Fragment>
   );
 }