Use TreeView v7 from mui (#2778)

Signed-off-by: David BRAQUART <[email protected]>

Author: dbraquart

package-lock.json

@@ -11,14 +11,14 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@gridsuite/commons-ui": "0.93.0",
+        "@gridsuite/commons-ui": "0.94.0",
         "@hello-pangea/dnd": "^18.0.1",
         "@hookform/resolvers": "^4.0.0",
         "@mui/icons-material": "^5.16.14",
         "@mui/lab": "5.0.0-alpha.175",
         "@mui/material": "^5.16.14",
         "@mui/x-charts": "^7.25.0",
-        "@mui/x-tree-view": "^6.17.0",
+        "@mui/x-tree-view": "^7.28.1",
         "@powsybl/network-viewer": "1.8.0",
         "@reduxjs/toolkit": "^2.5.1",
         "@svgdotjs/svg.js": "^3.2.4",

package.json

@@ -7,11 +7,9 @@
 
 import * as React from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { alpha, Checkbox, SxProps, Theme, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { treeItemClasses, TreeView, TreeItem } from '@mui/x-tree-view';
+import { treeItemClasses, SimpleTreeView, TreeItem } from '@mui/x-tree-view';
 
 import { ModelVariable } from '../../dynamic-simulation.type';
 
@@ -35,7 +33,7 @@ const BorderedTreeItem = styled(TreeItem)(({ root }: { root: boolean }) => {
             top: 20,
             borderBottom: root ? 'none' : border,
         },
-        [`& .${treeItemClasses.group}`]: {
+        [`& .${treeItemClasses.groupTransition}`]: {
             marginLeft: 15,
             paddingLeft: 18,
             borderLeft: border,
@@ -209,7 +207,7 @@ const CheckboxTreeview = forwardRef<GetSelectedItemsHandle, CheckBoxTreeViewProp
             return itemsToRender.map((elem) => (
                 <BorderedTreeItem
                     key={elem.id}
-                    nodeId={elem.id}
+                    itemId={elem.id}
                     onClick={handleExpand}
                     root={!elem.parentId}
                     label={
@@ -228,11 +226,7 @@ const CheckboxTreeview = forwardRef<GetSelectedItemsHandle, CheckBoxTreeViewProp
             ));
         };
 
-        return (
-            <TreeView defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ChevronRightIcon />} {...rest}>
-                {renderItems(items)}
-            </TreeView>
-        );
+        return <SimpleTreeView {...rest}>{renderItems(items)}</SimpleTreeView>;
     }
 );