MUI X migration v7 to v8

package.json

@@ -65,7 +65,7 @@
         "@mui/icons-material": "^5.16.14",
         "@mui/lab": "5.0.0-alpha.175",
         "@mui/material": "^5.16.14",
-        "@mui/x-tree-view": "^7.29.1",
+        "@mui/x-tree-view": "^8.21.0",
         "ag-grid-community": "^33.0.3",
         "ag-grid-react": "^33.0.4",
         "notistack": "^3.0.2",

src/components/treeViewFinder/TreeViewFinder.tsx

@@ -19,7 +19,7 @@ import {
     styled,
     Typography,
 } from '@mui/material';
-import { TreeItem, SimpleTreeView, SimpleTreeViewClasses } from '@mui/x-tree-view';
+import { SimpleTreeView, SimpleTreeViewClasses, TreeItem } from '@mui/x-tree-view';
 import {
     Check as CheckIcon,
     ChevronRight as ChevronRightIcon,
@@ -28,7 +28,8 @@ import {
 import type { UUID } from 'node:crypto';
 import { makeComposeClasses, type MuiStyles, toNestedGlobalSelectors } from '../../utils/styles';
 import { CancelButton } from '../inputs/reactHookForm/utils/CancelButton';
-import { ElementType } from '../../utils';
+import { ElementAttributes, ElementType } from '../../utils';
+import { doesNodeHasChildren } from './TreeViewUtils';
 
 // As a bunch of individual variables to try to make it easier
 // to track that they are all used. Not sure, maybe group them in an object ?
@@ -261,7 +262,7 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
             .filter((node) => node !== null) as TreeViewFinderNodeProps[];
     };
 
-    const handleNodeToggle = (_e: React.SyntheticEvent, itemIds: string[]) => {
+    const handleNodeToggle = (_e: React.SyntheticEvent | null, itemIds: string[]) => {
         // onTreeBrowse proc only on last node clicked and only when expanded
         itemIds.every((itemId) => {
             if (!expanded?.includes(itemId)) {
@@ -322,7 +323,7 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
     }, [expanded, selectedProp, expandedProp, data, autoScrollAllowed]);
 
     /* User Interaction management */
-    const handleNodeSelect = (_e: React.SyntheticEvent, values: string | string[] | null) => {
+    const handleNodeSelect = (_e: React.SyntheticEvent | null, values: string | string[] | null) => {
         // Default management
         if (multiSelect && Array.isArray(values)) {
             setSelected(values.filter((itemId) => isSelectable(mapPrintedNodes[itemId])));
@@ -394,7 +395,8 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
         }
         let childrenNodes = null;
         const showExpandIcon = showChevron(node);
-        if (Array.isArray(node.children) && node.children.length > 0) {
+        if (doesNodeHasChildren(node as unknown as ElementAttributes)) {
+            // @ts-ignore checked above
             childrenNodes = node.children.toSorted(sortMethod).map(renderTree);
         } else if (showExpandIcon) {
             childrenNodes = [<span key="placeholder" style={{ display: 'none' }} />]; // simulate placeholder so expand icon is shown

src/components/treeViewFinder/TreeViewUtils.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { ElementAttributes } from '../../utils';
+
+export function doesNodeHasChildren(node: ElementAttributes) {
+    return Array.isArray(node.children) && node.children.length > 0;
+}

src/components/treeViewFinder/index.ts

@@ -5,3 +5,4 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 export * from './TreeViewFinder';
+export * from './TreeViewUtils';