diff --git a/docs/package.json b/docs/package.json
index d80acd4ec23..10b1e490fec 100644
--- 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
index 77f86c4d3e1..7ee9861fa97 100644
--- 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
index 10cc4b344a0..a206d5740fc 100644
--- 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
index 4a8796a3bc9..b9ebccf7f9e 100644
--- 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
index 98bf918baf5..20784d766fc 100644
--- 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
index 56dddd7e596..bc456fa54d5 100644
--- 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
index 8d43ee00f4c..a31dec8df4f 100644
--- 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
deleted file mode 100644
index 929b11ac366..00000000000
--- a/packages/toolpad-studio/src/routes.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const APP_FUNCTIONS_ROUTE = '/app/functions';
-
-export const PREVIEW_PAGE_ROUTE = '/preview/pages/:nodeId';
diff --git a/packages/toolpad-studio/src/theme.ts b/packages/toolpad-studio/src/theme.ts
index a346e151376..9fed14e47f5 100644
--- 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
index 048cb94fcd2..4f66eb6e09c 100644
--- 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
diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx
index caa9ae91871..f3f9ffec620 100644
--- a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx
+++ b/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>
   );
 }
diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx
index 18ea5c9c9df..fbe4936db98 100644
--- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx
+++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx
@@ -13,7 +13,7 @@ import {
   Paper,
   SxProps,
 } from '@mui/material';
-import { TreeView, treeItemClasses } from '@mui/x-tree-view';
+import { SimpleTreeView, treeItemClasses } from '@mui/x-tree-view';
 import AddIcon from '@mui/icons-material/Add';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -27,6 +27,9 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../../components/
 import NodeMenu from '../../NodeMenu';
 import ExplorerHeader from '../../ExplorerHeader';
 
+const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 });
+const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 });
+
 const classes = {
   treeItemMenuButton: 'Toolpad__QueryListItem',
   treeItemMenuOpen: 'Toolpad__QueryListItemMenuOpen',
@@ -62,7 +65,7 @@ interface StyledTreeItemProps extends EditableTreeItemProps {
 
 function DataTreeItem(props: StyledTreeItemProps) {
   const {
-    nodeId,
+    itemId,
     labelText,
     labelTextSx,
     labelIconSx,
@@ -86,11 +89,11 @@ function DataTreeItem(props: StyledTreeItemProps) {
   const handleRenameConfirm = React.useCallback(
     (updatedName: string) => {
       if (onRenameNode) {
-        onRenameNode(nodeId as NodeId, updatedName);
+        onRenameNode(itemId as NodeId, updatedName);
         stopEditing();
       }
     },
-    [nodeId, onRenameNode, stopEditing],
+    [itemId, onRenameNode, stopEditing],
   );
 
   const validateEditableQueryName = React.useCallback(
@@ -109,18 +112,18 @@ function DataTreeItem(props: StyledTreeItemProps) {
   }, [onSelectNode, toolpadNodeId]);
 
   const queryCreationMode = React.useMemo(() => {
-    if (props.nodeId === ':query') {
+    if (props.itemId === ':query') {
       return 'query';
     }
-    if (props.nodeId === ':mutation') {
+    if (props.itemId === ':mutation') {
       return 'mutation';
     }
     return undefined;
-  }, [props.nodeId]);
+  }, [props.itemId]);
 
   return (
     <StyledTreeItem
-      nodeId={nodeId}
+      itemId={itemId}
       labelText={labelText}
       renderLabel={(children) => (
         <Box sx={{ display: 'flex', alignItems: 'center' }} onClick={handleClick}>
@@ -349,16 +352,16 @@ function Explorer({ nodes, setAnchorEl, nodeName, headerText }: ExplorerProps) {
         onCreate={handleCreateClick}
         createLabelText={`Create new ${nodeName}`}
       />
-      <TreeView
+      <SimpleTreeView
         aria-label={`${nodeName} explorer`}
-        defaultExpanded={[`:queries`]}
-        selected={
+        defaultExpandedItems={[`:queries`]}
+        selectedItems={
           currentView.kind === 'page' && currentView.view?.kind === 'query'
             ? currentView.view.nodeId
             : ''
         }
-        defaultCollapseIcon={<ExpandMoreIcon sx={{ fontSize: '0.9rem', opacity: 0.5 }} />}
-        defaultExpandIcon={<ChevronRightIcon sx={{ fontSize: '0.9rem', opacity: 0.5 }} />}
+        // TODO: This belongs as a default property in the theme
+        slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }}
         sx={{
           flexGrow: 1,
           maxWidth: 400,
@@ -369,7 +372,7 @@ function Explorer({ nodes, setAnchorEl, nodeName, headerText }: ExplorerProps) {
         {nodes.map((node) => (
           <DataTreeItem
             key={node.id}
-            nodeId={node.id}
+            itemId={node.id}
             toolpadNodeId={node.id}
             aria-level={1}
             aria-label={node.name}
@@ -383,7 +386,7 @@ function Explorer({ nodes, setAnchorEl, nodeName, headerText }: ExplorerProps) {
             validateItemName={validateName}
           />
         ))}
-      </TreeView>
+      </SimpleTreeView>
     </Stack>
   );
 }
diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx
index a335ee28a7d..c7f00dad948 100644
--- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx
+++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx
@@ -240,7 +240,11 @@ export default function NodeHud({
         ) : null}
       </NodeHudWrapper>
       {isSelected ? (
-        <SelectionHintWrapper style={absolutePositionCss(rect)} hintPosition={hintPosition}>
+        <SelectionHintWrapper
+          style={absolutePositionCss(rect)}
+          hintPosition={hintPosition}
+          data-testid="node-hud-selection"
+        >
           <div
             draggable
             data-testid="node-hud-tag"
diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx
index 79c61e9f41d..4aed969f561 100644
--- a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx
+++ b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box, IconButton, Stack, Tooltip } from '@mui/material';
-import { TreeView, treeItemClasses } from '@mui/x-tree-view';
+import { SimpleTreeView, treeItemClasses } from '@mui/x-tree-view';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -19,6 +19,9 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../components/Edi
 import { scrollIntoViewIfNeeded } from '../../../utils/dom';
 import ExplorerHeader from '../ExplorerHeader';
 
+const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 });
+const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 });
+
 const PagesExplorerRoot = styled(Stack)({
   height: '100%',
   width: '100%',
@@ -58,7 +61,7 @@ interface StyledTreeItemProps extends EditableTreeItemProps {
 
 function PagesExplorerTreeItem(props: StyledTreeItemProps) {
   const {
-    nodeId,
+    itemId,
     labelIcon,
     labelText,
     title,
@@ -78,11 +81,11 @@ function PagesExplorerTreeItem(props: StyledTreeItemProps) {
   const handleRenameConfirm = React.useCallback(
     (updatedName: string) => {
       if (onRenameNode) {
-        onRenameNode(nodeId as NodeId, updatedName);
+        onRenameNode(itemId as NodeId, updatedName);
         stopEditing();
       }
     },
-    [nodeId, onRenameNode, stopEditing],
+    [itemId, onRenameNode, stopEditing],
   );
 
   const validateEditablePageName = React.useCallback(
@@ -97,7 +100,7 @@ function PagesExplorerTreeItem(props: StyledTreeItemProps) {
 
   return (
     <StyledEditableTreeItem
-      nodeId={nodeId}
+      itemId={itemId}
       labelText={labelText}
       renderLabel={(children) => (
         <Tooltip title={title} placement="right" disableInteractive>
@@ -347,16 +350,16 @@ export default function PagesExplorer({ className }: PagesExplorerProps) {
         onCreate={handleOpenCreateNewPage}
         createLabelText="Create new page"
       />
-      <TreeView
+      <SimpleTreeView
         ref={pagesTreeRef}
         aria-label="Pages explorer"
-        selected={activePage ? [activePage.id] : []}
-        onNodeSelect={handleSelect}
-        expanded={expanded}
-        onNodeToggle={handleToggle}
+        selectedItems={activePage ? [activePage.id] : []}
+        onSelectedItemsChange={handleSelect}
+        expandedItems={expanded}
+        onExpandedItemsChange={handleToggle}
         multiSelect
-        defaultCollapseIcon={<ExpandMoreIcon sx={{ fontSize: '0.9rem', opacity: 0.5 }} />}
-        defaultExpandIcon={<ChevronRightIcon sx={{ fontSize: '0.9rem', opacity: 0.5 }} />}
+        // TODO: This belongs as a default property in the theme
+        slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }}
         sx={{
           overflow: 'auto',
           scrollbarGutter: 'stable',
@@ -364,7 +367,7 @@ export default function PagesExplorer({ className }: PagesExplorerProps) {
       >
         {isCreateNewPageOpen ? (
           <EditableTreeItem
-            nodeId="::create::"
+            itemId="::create::"
             isEditing
             suggestedNewItemName={nextProposedName}
             onEdit={handleCreateNewCommit}
@@ -375,7 +378,7 @@ export default function PagesExplorer({ className }: PagesExplorerProps) {
         {alphabeticSortedPages.map((page) => (
           <PagesExplorerTreeItem
             key={page.id}
-            nodeId={page.id}
+            itemId={page.id}
             toolpadNodeId={page.id}
             labelText={page.name}
             title={appDom.getPageDisplayName(page)}
@@ -385,7 +388,7 @@ export default function PagesExplorer({ className }: PagesExplorerProps) {
             validateItemName={validatePageName}
           />
         ))}
-      </TreeView>
+      </SimpleTreeView>
     </PagesExplorerRoot>
   );
 }
diff --git a/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx b/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx
index f8a42d12f74..6444823ca36 100644
--- a/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx
+++ b/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx
@@ -16,7 +16,7 @@ import {
   Toolbar,
 } from '@mui/material';
 import { errorFrom } from '@toolpad/utils/errors';
-import { TreeView, treeItemClasses, TreeItem } from '@mui/x-tree-view';
+import { treeItemClasses, TreeItem, SimpleTreeView } from '@mui/x-tree-view';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import AddIcon from '@mui/icons-material/Add';
@@ -44,6 +44,9 @@ import ExplorerHeader from '../AppEditor/ExplorerHeader';
 import EditableTreeItem, { EditableTreeItemProps } from '../../components/EditableTreeItem';
 import { scrollIntoViewIfNeeded } from '../../utils/dom';
 
+const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 });
+const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 });
+
 const fileTreeItemClasses = generateUtilityClasses('FileTreeItem', ['actionButton', 'handlerItem']);
 
 const FileTreeItemRoot = styled(EditableTreeItem)(({ theme }) => ({
@@ -57,7 +60,7 @@ const FileTreeItemRoot = styled(EditableTreeItem)(({ theme }) => ({
     },
   },
 
-  [`& .${treeItemClasses.group}`]: {
+  [`& .${treeItemClasses.groupTransition}`]: {
     borderLeft: `1px solid ${alpha(theme.palette.text.primary, 0.2)}`,
     position: 'relative',
     left: '-2px',
@@ -84,7 +87,7 @@ interface HandlerFileTreeItemProps extends EditableTreeItemProps {
 
 function HandlerFileTreeItem({
   file,
-  nodeId,
+  itemId,
   validateItemName,
   onRename,
   ...other
@@ -114,7 +117,7 @@ function HandlerFileTreeItem({
   return (
     <FileTreeItemRoot
       key={file.name}
-      nodeId={nodeId}
+      itemId={itemId}
       labelText={labelText}
       renderLabel={(children) => (
         <React.Fragment>
@@ -141,7 +144,7 @@ function HandlerFileTreeItem({
           <TreeItem
             className={fileTreeItemClasses.handlerItem}
             key={handler.name}
-            nodeId={serializeFunctionId({ file: file.name, handler: handler.name })}
+            itemId={serializeFunctionId({ file: file.name, handler: handler.name })}
             label={handler.name}
           />
         );
@@ -190,10 +193,13 @@ export default function FunctionsEditor() {
   });
 
   const handleSelectFunction = React.useCallback(
-    (_event: React.SyntheticEvent, nodeId: string) => {
-      const parsed = parseFunctionId(nodeId);
+    (_event: React.SyntheticEvent, itemId: string | null) => {
+      if (!itemId) {
+        return;
+      }
+      const parsed = parseFunctionId(itemId);
       if (parsed.handler) {
-        setSelectedHandler(nodeId);
+        setSelectedHandler(itemId);
       }
     },
     [setSelectedHandler],
@@ -329,14 +335,14 @@ export default function FunctionsEditor() {
                 onSearch={handleSearch}
                 hasPersistentSearch
               />
-              <TreeView
+              <SimpleTreeView
                 ref={handlerTreeRef}
-                selected={selectedNodeId}
-                onNodeSelect={handleSelectFunction}
-                defaultCollapseIcon={<ExpandMoreIcon />}
-                defaultExpandIcon={<ChevronRightIcon />}
-                expanded={expanded}
-                onNodeToggle={(_event, nodeIds) => setExpanded(nodeIds)}
+                selectedItems={selectedNodeId}
+                onSelectedItemsChange={handleSelectFunction}
+                // TODO: This belongs as a default property in the theme
+                slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }}
+                expandedItems={expanded}
+                onExpandedItemsChange={(_event, itemIds) => setExpanded(itemIds)}
                 sx={{
                   px: 1,
                   overflow: 'auto',
@@ -345,7 +351,7 @@ export default function FunctionsEditor() {
               >
                 {isCreateNewHandlerOpen ? (
                   <EditableTreeItem
-                    nodeId="::create::"
+                    itemId="::create::"
                     isEditing
                     suggestedNewItemName={nextProposedName}
                     onEdit={handleCreateNewCommit}
@@ -363,7 +369,7 @@ export default function FunctionsEditor() {
                 {functionFiles.map((file) => (
                   <HandlerFileTreeItem
                     key={file.name}
-                    nodeId={serializeFunctionId({ file: file.name })}
+                    itemId={serializeFunctionId({ file: file.name })}
                     file={file}
                     validateItemName={validateFileName}
                     onRename={handleFileRename}
@@ -389,12 +395,12 @@ export default function FunctionsEditor() {
 
                 {introspection.isLoading ? (
                   <React.Fragment>
-                    <TreeItem disabled nodeId="::loading::" label={<Skeleton />} />
-                    <TreeItem disabled nodeId="::loading::" label={<Skeleton />} />
-                    <TreeItem disabled nodeId="::loading::" label={<Skeleton />} />
+                    <TreeItem disabled itemId="loading-1" label={<Skeleton />} />
+                    <TreeItem disabled itemId="loading-2" label={<Skeleton />} />
+                    <TreeItem disabled itemId="loading-3" label={<Skeleton />} />
                   </React.Fragment>
                 ) : null}
-              </TreeView>
+              </SimpleTreeView>
               {introspection.error ? (
                 <Box
                   sx={{
diff --git a/packages/toolpad-studio/src/toolpad/Toolpad.tsx b/packages/toolpad-studio/src/toolpad/Toolpad.tsx
index 979599acac4..c6a1f18299c 100644
--- a/packages/toolpad-studio/src/toolpad/Toolpad.tsx
+++ b/packages/toolpad-studio/src/toolpad/Toolpad.tsx
@@ -11,7 +11,6 @@ import useBoolean from '@toolpad/utils/hooks/useBoolean';
 import AppEditor from './AppEditor';
 import ErrorAlert from './AppEditor/PageEditor/ErrorAlert';
 import { ThemeProvider } from '../ThemeContext';
-import { APP_FUNCTIONS_ROUTE } from '../routes';
 import ToolpadShell from './ToolpadShell';
 import { getViewFromPathname } from '../utils/domView';
 import AppProvider, { AppState, useAppStateContext } from './AppState';
@@ -168,7 +167,7 @@ export function ToolpadEditorRoutes({ appUrl }: ToolpadEditorRoutesProps) {
                   <EditorShell>
                     <Routes>
                       {FEATURE_FLAG_GLOBAL_FUNCTIONS ? (
-                        <Route path={APP_FUNCTIONS_ROUTE} element={<FunctionsEditor />} />
+                        <Route path="/app/functions" element={<FunctionsEditor />} />
                       ) : null}
                       <Route path="*" element={<AppEditor />} />
                     </Routes>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 603731dca1d..e4a09539daf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,8 +58,8 @@ importers:
         specifier: github:mui/material-ui#0102a9579628d48d784511a562b7b72f0f51847e
         version: github.com/mui/material-ui/0102a9579628d48d784511a562b7b72f0f51847e
       '@mui/x-charts':
-        specifier: 6.19.8
-        version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0)
       '@next/eslint-plugin-next':
         specifier: 14.1.4
         version: 14.1.4
@@ -229,8 +229,8 @@ importers:
         specifier: 5.15.14
         version: 5.15.14(@types/react@18.2.66)(react@18.2.0)
       '@mui/x-data-grid-pro':
-        specifier: 6.19.8
-        version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0)
       '@toolpad/studio':
         specifier: workspace:*
         version: link:../packages/toolpad-studio
@@ -557,23 +557,23 @@ importers:
         specifier: 5.15.14
         version: 5.15.14(@types/react@18.2.66)(react@18.2.0)
       '@mui/x-charts':
-        specifier: 6.19.8
-        version: 6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-data-grid':
-        specifier: 6.19.8
-        version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-data-grid-pro':
-        specifier: 6.19.8
-        version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-date-pickers':
-        specifier: 6.19.8
-        version: 6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-date-pickers-pro':
-        specifier: 6.19.8
-        version: 6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-tree-view':
-        specifier: 6.17.0
-        version: 6.17.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@tanstack/react-query':
         specifier: 5.18.1
         version: 5.18.1(react@18.2.0)
@@ -882,17 +882,17 @@ importers:
         specifier: 5.15.14
         version: 5.15.14(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-charts':
-        specifier: 6.19.8
-        version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-data-grid-pro':
-        specifier: 6.19.8
-        version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-date-pickers':
-        specifier: 6.19.8
-        version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
-      '@mui/x-license-pro':
-        specifier: 6.10.2
-        version: 6.10.2(@types/react@18.2.66)(react@18.2.0)
+        specifier: 7.0.0
+        version: 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/x-license':
+        specifier: 7.0.0
+        version: 7.0.0(@types/react@18.2.66)(react@18.2.0)
       '@tanstack/react-query':
         specifier: 5.18.1
         version: 5.18.1(react@18.2.0)
@@ -3450,14 +3450,13 @@ packages:
       react-is: 18.2.0
     dev: false
 
-  /@mui/x-charts@6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==}
+  /@mui/x-charts@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-pL/HtRuv4X6mHPyFV54K3ZuGRx/d99uhY4MNVtCSUl3mR4r9uc4QOdhQabnrd7C2x4l0+01ED6MCdXXEIFEtMg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
       '@emotion/styled': ^11.8.1
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@mui/material': ^5.15.14
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
@@ -3472,10 +3471,13 @@ packages:
       '@mui/base': 5.0.0-beta.40(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/material': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/system': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react@18.2.0)
+      '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0)
       '@react-spring/rafz': 9.7.3
       '@react-spring/web': 9.7.3(react-dom@18.2.0)(react@18.2.0)
       clsx: 2.1.0
       d3-color: 3.1.0
+      d3-delaunay: 6.0.4
+      d3-interpolate: 3.0.1
       d3-scale: 4.0.2
       d3-shape: 3.2.0
       prop-types: 15.8.1
@@ -3485,14 +3487,13 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-charts@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==}
+  /@mui/x-charts@7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-pL/HtRuv4X6mHPyFV54K3ZuGRx/d99uhY4MNVtCSUl3mR4r9uc4QOdhQabnrd7C2x4l0+01ED6MCdXXEIFEtMg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
       '@emotion/styled': ^11.8.1
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@mui/material': ^5.15.14
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
@@ -3505,10 +3506,13 @@ packages:
       '@mui/base': 5.0.0-beta.40(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/material': 5.15.14(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/system': 5.15.14(@types/react@18.2.66)(react@18.2.0)
+      '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0)
       '@react-spring/rafz': 9.7.3
       '@react-spring/web': 9.7.3(react-dom@18.2.0)(react@18.2.0)
       clsx: 2.1.0
       d3-color: 3.1.0
+      d3-delaunay: 6.0.4
+      d3-interpolate: 3.0.1
       d3-scale: 4.0.2
       d3-shape: 3.2.0
       prop-types: 15.8.1
@@ -3518,14 +3522,13 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-charts@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==}
+  /@mui/x-charts@7.0.0(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-pL/HtRuv4X6mHPyFV54K3ZuGRx/d99uhY4MNVtCSUl3mR4r9uc4QOdhQabnrd7C2x4l0+01ED6MCdXXEIFEtMg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
       '@emotion/styled': ^11.8.1
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@mui/material': ^5.15.14
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
@@ -3538,10 +3541,13 @@ packages:
       '@mui/base': 5.0.0-beta.40(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/material': 5.15.14(react-dom@18.2.0)(react@18.2.0)
       '@mui/system': 5.15.14(react@18.2.0)
+      '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0)
       '@react-spring/rafz': 9.7.3
       '@react-spring/web': 9.7.3(react-dom@18.2.0)(react@18.2.0)
       clsx: 2.1.0
       d3-color: 3.1.0
+      d3-delaunay: 6.0.4
+      d3-interpolate: 3.0.1
       d3-scale: 4.0.2
       d3-shape: 3.2.0
       prop-types: 15.8.1
@@ -3551,12 +3557,11 @@ packages:
       - '@types/react'
     dev: true
 
-  /@mui/x-data-grid-pro@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-G1mr+AUoIxxU0+Tgus5wk2uPVqtz9Ij3Ta20bhmuDFi78fvDdyHwN52K913Ob9dQS+kfeVDhvcJYN7gN6jz4DQ==}
+  /@mui/x-data-grid-pro@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2lauQfkV3gksfFS5cBC992/Xs1PDfOAcr9JV8bQNX2MmwdYFhCJmJR+MYK5VbO72bDrwCDRJC399Pgxnw9Saxg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@mui/material': ^5.15.14
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     dependencies:
@@ -3564,8 +3569,8 @@ packages:
       '@mui/material': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/system': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react@18.2.0)
       '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0)
-      '@mui/x-data-grid': 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
-      '@mui/x-license-pro': 6.10.2(@types/react@18.2.66)(react@18.2.0)
+      '@mui/x-data-grid': 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/x-license': 7.0.0(@types/react@18.2.66)(react@18.2.0)
       '@types/format-util': 1.0.4
       clsx: 2.1.0
       prop-types: 15.8.1
@@ -3573,15 +3578,16 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       reselect: 4.1.8
     transitivePeerDependencies:
+      - '@emotion/react'
+      - '@emotion/styled'
       - '@types/react'
     dev: false
 
-  /@mui/x-data-grid-pro@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-G1mr+AUoIxxU0+Tgus5wk2uPVqtz9Ij3Ta20bhmuDFi78fvDdyHwN52K913Ob9dQS+kfeVDhvcJYN7gN6jz4DQ==}
+  /@mui/x-data-grid-pro@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2lauQfkV3gksfFS5cBC992/Xs1PDfOAcr9JV8bQNX2MmwdYFhCJmJR+MYK5VbO72bDrwCDRJC399Pgxnw9Saxg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@mui/material': ^5.15.14
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     dependencies:
@@ -3589,8 +3595,8 @@ packages:
       '@mui/material': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
       '@mui/system': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
       '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0)
-      '@mui/x-data-grid': 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0)
-      '@mui/x-license-pro': 6.10.2(@types/react@18.2.66)(react@18.2.0)
+      '@mui/x-data-grid': 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/x-license': 7.0.0(@types/react@18.2.66)(react@18.2.0)
       '@types/format-util': 1.0.4
       clsx: 2.1.0
       prop-types: 15.8.1
@@ -3598,15 +3604,42 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       reselect: 4.1.8
     transitivePeerDependencies:
+      - '@emotion/react'
+      - '@emotion/styled'
       - '@types/react'
     dev: false
 
-  /@mui/x-data-grid@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-QsOW9GhJdhvagJfUb5jpZE1MMaCLugxx0l89amxJAthMia95BlGS7jndiDEh8IQNthgzfxjAzrSv8GZpcgSEaA==}
+  /@mui/x-data-grid-pro@7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2lauQfkV3gksfFS5cBC992/Xs1PDfOAcr9JV8bQNX2MmwdYFhCJmJR+MYK5VbO72bDrwCDRJC399Pgxnw9Saxg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@mui/material': ^5.15.14
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.24.0
+      '@mui/material': 5.15.14(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/system': 5.15.14(@types/react@18.2.66)(react@18.2.0)
+      '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0)
+      '@mui/x-data-grid': 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/x-license': 7.0.0(@types/react@18.2.66)(react@18.2.0)
+      '@types/format-util': 1.0.4
+      clsx: 2.1.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      reselect: 4.1.8
+    transitivePeerDependencies:
+      - '@emotion/react'
+      - '@emotion/styled'
+      - '@types/react'
+    dev: false
+
+  /@mui/x-data-grid@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Nwwfr+ot/di0oH/pVwIxKV2QD7QyUY/MKkTWRSKzQoJw2aiFQf1Usmvq9Fu1qsCsvMmqIFaToY7972p0cczRjw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.15.14
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     dependencies:
@@ -3620,15 +3653,16 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       reselect: 4.1.8
     transitivePeerDependencies:
+      - '@emotion/react'
+      - '@emotion/styled'
       - '@types/react'
     dev: false
 
-  /@mui/x-data-grid@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-QsOW9GhJdhvagJfUb5jpZE1MMaCLugxx0l89amxJAthMia95BlGS7jndiDEh8IQNthgzfxjAzrSv8GZpcgSEaA==}
+  /@mui/x-data-grid@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Nwwfr+ot/di0oH/pVwIxKV2QD7QyUY/MKkTWRSKzQoJw2aiFQf1Usmvq9Fu1qsCsvMmqIFaToY7972p0cczRjw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@mui/material': ^5.15.14
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     dependencies:
@@ -3642,17 +3676,41 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       reselect: 4.1.8
     transitivePeerDependencies:
+      - '@emotion/react'
+      - '@emotion/styled'
+      - '@types/react'
+    dev: false
+
+  /@mui/x-data-grid@7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Nwwfr+ot/di0oH/pVwIxKV2QD7QyUY/MKkTWRSKzQoJw2aiFQf1Usmvq9Fu1qsCsvMmqIFaToY7972p0cczRjw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.15.14
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.24.0
+      '@mui/material': 5.15.14(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/system': 5.15.14(@types/react@18.2.66)(react@18.2.0)
+      '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0)
+      clsx: 2.1.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      reselect: 4.1.8
+    transitivePeerDependencies:
+      - '@emotion/react'
+      - '@emotion/styled'
       - '@types/react'
     dev: false
 
-  /@mui/x-date-pickers-pro@6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-0E4He1uxcJLYovKG0BByvQq2lTqL0MkpPoIdZwKA7PSP4iexSEn46zGsufgbGrcHEi7ievSUxXbjazpcDQPTiQ==}
+  /@mui/x-date-pickers-pro@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-3S8ehXGR4XcU9+DhMZcd/1qHhM8tROoQVQk8qtULZE16VgV9D4gDCyRNBpnbH18/K0erf41CJfUPxeiZBA5GfA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
       '@emotion/styled': ^11.8.1
-      '@mui/material': ^5.8.6
-      '@mui/system': ^5.8.0
+      '@mui/material': ^5.15.14
       date-fns: ^2.25.0 || ^3.2.0
       date-fns-jalali: ^2.13.0-0
       dayjs: ^1.10.7
@@ -3689,8 +3747,8 @@ packages:
       '@mui/material': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
       '@mui/system': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react@18.2.0)
       '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0)
-      '@mui/x-date-pickers': 6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
-      '@mui/x-license-pro': 6.10.2(@types/react@18.2.66)(react@18.2.0)
+      '@mui/x-date-pickers': 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/x-license': 7.0.0(@types/react@18.2.66)(react@18.2.0)
       clsx: 2.1.0
       dayjs: 1.11.10
       prop-types: 15.8.1
@@ -3701,14 +3759,13 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-date-pickers@6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-6wgc2DoRTR9/mKesku4CVCKr9yYkY3FI2Oy/wshLTs2rFkw2Z10uxXFHBR9ugEtNPNCQv0qqwldElenYI97wsA==}
+  /@mui/x-date-pickers@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-/9mp4O2WMixHOso63DBoZVfJVYGrzOHF5voheV2tYQ4XqDdTKp2AdWS3oh8PGwrsvCzqkvb3quzTqhKoEsJUwA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
       '@emotion/styled': ^11.8.1
-      '@mui/material': ^5.8.6
-      '@mui/system': ^5.8.0
+      '@mui/material': ^5.15.14
       date-fns: ^2.25.0 || ^3.2.0
       date-fns-jalali: ^2.13.0-0
       dayjs: ^1.10.7
@@ -3756,14 +3813,13 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-date-pickers@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-6wgc2DoRTR9/mKesku4CVCKr9yYkY3FI2Oy/wshLTs2rFkw2Z10uxXFHBR9ugEtNPNCQv0qqwldElenYI97wsA==}
+  /@mui/x-date-pickers@7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-/9mp4O2WMixHOso63DBoZVfJVYGrzOHF5voheV2tYQ4XqDdTKp2AdWS3oh8PGwrsvCzqkvb3quzTqhKoEsJUwA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
       '@emotion/styled': ^11.8.1
-      '@mui/material': ^5.8.6
-      '@mui/system': ^5.8.0
+      '@mui/material': ^5.15.14
       date-fns: ^2.25.0 || ^3.2.0
       date-fns-jalali: ^2.13.0-0
       dayjs: ^1.10.7
@@ -3809,8 +3865,8 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-license-pro@6.10.2(@types/react@18.2.66)(react@18.2.0):
-    resolution: {integrity: sha512-Baw3shilU+eHgU+QYKNPFUKvfS5rSyNJ98pQx02E0gKA22hWp/XAt88K1qUfUMPlkPpvg/uci6gviQSSLZkuKw==}
+  /@mui/x-license@7.0.0(@types/react@18.2.66)(react@18.2.0):
+    resolution: {integrity: sha512-WR9OkroKKGmnIno6tw4RzuyCQqI/Y+nbzt1r9sKtBgDQG/LvoBI45lC6zNtVosi8HhGWuXVsHDC7NYsEh31suA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
@@ -3822,14 +3878,13 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-tree-view@6.17.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-09dc2D+Rjg2z8KOaxbUXyPi0aw7fm2jurEtV8Xw48xJ00joLWd5QJm1/v4CarEvaiyhTQzHImNqdgeJW8ZQB6g==}
+  /@mui/x-tree-view@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-9nus8fesjBT/V/SzjZKhABG3qvGtupkccoOnz43ebLts8MSYtR8jwnOMArwrVnzrEoaS4F4dv3M8SYVQkHWfaQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
       '@emotion/styled': ^11.8.1
-      '@mui/material': ^5.8.6
-      '@mui/system': ^5.8.0
+      '@mui/material': ^5.15.14
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     dependencies:
@@ -7347,6 +7402,12 @@ packages:
     resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
     engines: {node: '>=12'}
 
+  /d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+    dependencies:
+      delaunator: 5.0.1
+
   /d3-ease@3.0.1:
     resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
     engines: {node: '>=12'}
@@ -7564,6 +7625,11 @@ packages:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  /delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+    dependencies:
+      robust-predicates: 3.0.2
+
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -13513,6 +13579,9 @@ packages:
       inherits: 2.0.4
     dev: true
 
+  /robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+
   /rollup@3.29.4:
     resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
diff --git a/test/integration/backend-basic/index.spec.ts b/test/integration/backend-basic/index.spec.ts
index 4ece04f1b96..2e5127e6e89 100644
--- a/test/integration/backend-basic/index.spec.ts
+++ b/test/integration/backend-basic/index.spec.ts
@@ -245,16 +245,16 @@ test('data providers', async ({ page }) => {
 
   await clickCenter(page, grid1);
 
-  await grid1.getByRole('button', { name: 'Go to next page' }).click();
+  await editorModel.appCanvas.getByRole('button', { name: 'Go to next page' }).nth(0).click();
   await expect(grid1.getByText('Index item 100')).toBeVisible();
 
   await clickCenter(page, grid2);
 
-  await grid2.getByRole('button', { name: 'Go to next page' }).click();
+  await editorModel.appCanvas.getByRole('button', { name: 'Go to next page' }).nth(1).click();
   await expect(grid2.getByText('Cursor item 100')).toBeVisible();
   await expect(grid2.getByText('Cursor item 0')).not.toBeVisible();
 
-  await grid2.getByRole('combobox', { name: 'Rows per page:' }).click();
+  await editorModel.appCanvas.getByRole('combobox', { name: 'Rows per page:' }).nth(1).click();
   await editorModel.appCanvas.getByRole('option', { name: '25', exact: true }).click();
 
   await expect(grid2.getByText('Cursor item 0')).toBeVisible();
@@ -272,7 +272,9 @@ test('data providers crud', async ({ page }) => {
 
   await clickCenter(page, grid);
 
-  await grid.getByRole('button', { name: 'Delete row with id "5"', exact: true }).click();
+  await editorModel.appCanvas
+    .getByRole('button', { name: 'Delete row with id "5"', exact: true })
+    .click();
 
   await expect(
     editorModel.appCanvas.getByText('Record deleted successfully', { exact: true }),
@@ -280,19 +282,25 @@ test('data providers crud', async ({ page }) => {
 
   await expect(grid.getByText('Index item 5')).not.toBeVisible();
 
-  await grid.getByRole('button', { name: 'Edit row with id "7"', exact: true }).click();
+  await editorModel.appCanvas
+    .getByRole('button', { name: 'Edit row with id "7"', exact: true })
+    .click();
 
   await cellLocator(grid, 8, 1).getByRole('textbox').fill('edited');
 
-  await grid.getByRole('button', { name: 'Cancel updates', exact: true }).click();
+  await editorModel.appCanvas.getByRole('button', { name: 'Cancel updates', exact: true }).click();
 
   await expect(cellLocator(grid, 8, 1)).toHaveText('Index item 7');
 
-  await grid.getByRole('button', { name: 'Edit row with id "7"', exact: true }).click();
+  await editorModel.appCanvas
+    .getByRole('button', { name: 'Edit row with id "7"', exact: true })
+    .click();
 
   await cellLocator(grid, 8, 1).getByRole('textbox').fill('edited');
 
-  await grid.getByRole('button', { name: 'Save updates to row with id "7"', exact: true }).click();
+  await editorModel.appCanvas
+    .getByRole('button', { name: 'Save updates to row with id "7"', exact: true })
+    .click();
 
   await expect(
     editorModel.appCanvas.getByText('Record updated successfully', { exact: true }),
@@ -300,16 +308,23 @@ test('data providers crud', async ({ page }) => {
 
   await expect(cellLocator(grid, 8, 1)).toHaveText('edited');
 
-  await expect(grid.getByRole('button', { name: 'Cancel updates', exact: true })).not.toBeVisible();
   await expect(
-    grid.getByRole('button', { name: 'Save updates to row with id "7"', exact: true }),
+    editorModel.appCanvas.getByRole('button', { name: 'Cancel updates', exact: true }),
+  ).not.toBeVisible();
+  await expect(
+    editorModel.appCanvas.getByRole('button', {
+      name: 'Save updates to row with id "7"',
+      exact: true,
+    }),
   ).not.toBeVisible();
 
-  await grid.getByRole('button', { name: 'Add record', exact: true }).click();
+  await editorModel.appCanvas.getByRole('button', { name: 'Add record', exact: true }).click();
 
   await cellLocator(grid, 2, 1).getByRole('textbox').fill('created');
 
-  await grid.getByRole('button', { name: 'Save updates to new row', exact: true }).click();
+  await editorModel.appCanvas
+    .getByRole('button', { name: 'Save updates to new row', exact: true })
+    .click();
 
   await expect(
     editorModel.appCanvas.getByText('New record created successfully', { exact: true }),
@@ -319,7 +334,7 @@ test('data providers crud', async ({ page }) => {
 
   await expect(cellLocator(grid, 102, 1)).toHaveText('created');
 
-  await grid.getByRole('button', { name: 'Add record', exact: true }).click();
+  await editorModel.appCanvas.getByRole('button', { name: 'Add record', exact: true }).click();
 
   await page.keyboard.press('Escape');
 
diff --git a/test/visual/components/index.spec.ts b/test/visual/components/index.spec.ts
index 8bb737dba31..ed6606a99d8 100644
--- a/test/visual/components/index.spec.ts
+++ b/test/visual/components/index.spec.ts
@@ -129,12 +129,16 @@ test('resizing element heights', async ({ page, argosScreenshot }) => {
     clip: appCanvasBoundingBox || undefined,
   };
 
-  const firstGrid = editorModel.appCanvas.getByRole('grid').nth(0);
+  const firstGrid = editorModel.appCanvas.getByRole('grid').nth(0).locator('xpath=..');
 
   await clickCenter(page, firstGrid);
+  await expect(editorModel.appCanvas.getByTestId('node-hud-tag')).toHaveText('dataGrid');
+
   await argosScreenshot('vertical-resize-before', screenshotConfig);
 
-  const firstGridBoundingBox = await waitForBoundingBox(firstGrid);
+  const firstGridBoundingBox = await waitForBoundingBox(
+    editorModel.appCanvas.getByTestId('node-hud-selection'),
+  );
 
   await page.mouse.move(
     firstGridBoundingBox!.x + firstGridBoundingBox!.width / 2,
@@ -152,11 +156,14 @@ test('resizing element heights', async ({ page, argosScreenshot }) => {
 
   await page.mouse.up();
 
-  const thirdGrid = editorModel.appCanvas.getByRole('grid').nth(2);
+  const thirdGrid = editorModel.appCanvas.getByRole('grid').nth(2).locator('xpath=..');
 
   await clickCenter(page, thirdGrid);
+  await expect(editorModel.appCanvas.getByTestId('node-hud-tag')).toHaveText('dataGrid1');
 
-  const thirdGridBoundingBox = await waitForBoundingBox(thirdGrid);
+  const thirdGridBoundingBox = await waitForBoundingBox(
+    editorModel.appCanvas.getByTestId('node-hud-selection'),
+  );
 
   await page.mouse.move(
     thirdGridBoundingBox!.x + thirdGridBoundingBox!.width / 2,
@@ -175,6 +182,8 @@ test('resizing element heights', async ({ page, argosScreenshot }) => {
   await page.mouse.up();
 
   await clickCenter(page, firstGrid);
+  await expect(editorModel.appCanvas.getByTestId('node-hud-tag')).toHaveText('dataGrid');
+
   await argosScreenshot('vertical-resize-after', screenshotConfig);
 });