Migration to MUI TreeView v7 (#747)

Signed-off-by: achour94 <[email protected]>

Author: achour94

package-lock.json

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

package.json

@@ -19,7 +19,7 @@ import {
     styled,
     Typography,
 } from '@mui/material';
-import { TreeItem, TreeView, TreeViewClasses } from '@mui/x-tree-view';
+import { TreeItem, SimpleTreeView, SimpleTreeViewClasses } from '@mui/x-tree-view';
 import {
     Check as CheckIcon,
     ChevronRight as ChevronRightIcon,
@@ -64,6 +64,14 @@ const defaultStyles = {
 export const generateTreeViewFinderClass = (className: string) => `GsiTreeViewFinder-${className}`;
 const composeClasses = makeComposeClasses(generateTreeViewFinderClass);
 
+function CustomExpandIcon({ className }: Readonly<{ className?: string }>) {
+    return <ChevronRightIcon className={className} />;
+}
+
+function CustomCollapseIcon({ className }: Readonly<{ className?: string }>) {
+    return <ExpandMoreIcon className={className} />;
+}
+
 export interface TreeViewFinderNodeProps {
     id: UUID;
     name: string;
@@ -85,7 +93,7 @@ export interface TreeViewFinderProps {
     selected?: string[];
     expanded?: string[];
     multiSelect?: boolean;
-    classes?: Partial<TreeViewClasses>;
+    classes?: Partial<SimpleTreeViewClasses>;
     className?: string;
 
     // dialog props
@@ -99,7 +107,7 @@ export interface TreeViewFinderProps {
     // data management props
     onlyLeaves?: boolean;
     data?: TreeViewFinderNodeProps[];
-    onTreeBrowse?: (nodeId: string) => void;
+    onTreeBrowse?: (itemId: string) => void;
     sortMethod?: (a: TreeViewFinderNodeProps, b: TreeViewFinderNodeProps) => number;
 }
 
@@ -175,7 +183,7 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
     const isValidationDisabled = () => {
         return (
             selected?.length === 0 ||
-            (selected?.length === selectedProp?.length && selected?.every((nodeId) => selectedProp?.includes(nodeId)))
+            (selected?.length === selectedProp?.length && selected?.every((itemId) => selectedProp?.includes(itemId)))
         );
     };
 
@@ -191,22 +199,22 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
     }, []);
 
     const findParents = (
-        nodeId: string,
+        itemId: string,
         nodes: TreeViewFinderNodeProps[],
         parentPath: TreeViewFinderNodeProps[] = []
     ): TreeViewFinderNodeProps[] | null => {
         let result: TreeViewFinderNodeProps[] | null = null;
 
         nodes.some((node) => {
             // If the current node matches the selected node, set result and break
-            if (node.id === nodeId) {
+            if (node.id === itemId) {
                 result = parentPath;
                 return true;
             }
 
             // If the current node has children, recursively search them
             if (node.children) {
-                const childResult = findParents(nodeId, node.children, [...parentPath, node]);
+                const childResult = findParents(itemId, node.children, [...parentPath, node]);
                 if (childResult) {
                     result = childResult;
                     return true;
@@ -232,34 +240,34 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
             return [];
         }
         return selected
-            .map((nodeId) => {
-                const selectedNode = mapPrintedNodes[nodeId];
+            .map((itemId) => {
+                const selectedNode = mapPrintedNodes[itemId];
                 if (!selectedNode) {
                     return null;
                 }
 
-                const parents = findParents(nodeId, data ?? []);
+                const parents = findParents(itemId, data ?? []);
 
                 return {
                     ...selectedNode,
                     parents: parents ?? [],
                 };
             })
-            .filter((node) => node !== null);
+            .filter((node) => node !== null) as TreeViewFinderNodeProps[];
     };
 
-    const handleNodeToggle = (_e: React.SyntheticEvent, nodeIds: string[]) => {
+    const handleNodeToggle = (_e: React.SyntheticEvent, itemIds: string[]) => {
         // onTreeBrowse proc only on last node clicked and only when expanded
-        nodeIds.every((nodeId) => {
-            if (!expanded?.includes(nodeId)) {
+        itemIds.every((itemId) => {
+            if (!expanded?.includes(itemId)) {
                 // proc onTreeBrowse here
-                onTreeBrowse?.(nodeId);
+                onTreeBrowse?.(itemId);
                 return false; // break loop to call onTreeBrowse only once
             }
             return true;
         });
 
-        setExpanded(nodeIds);
+        setExpanded(itemIds);
         // will proc onNodeSelect then ...
     };
 
@@ -288,7 +296,7 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
         // if we have selected elements by default, we scroll to it
         if (selectedProp.length > 0 && autoScrollAllowed) {
             // we check if all expanded nodes by default all already expanded first
-            const isNodeExpanded = expandedProp?.every((nodeId) => expanded?.includes(nodeId));
+            const isNodeExpanded = expandedProp?.every((itemId) => expanded?.includes(itemId));
 
             // we got the last element that we suppose to scroll to
             const lastScrollRef = scrollRef.current[scrollRef.current.length - 1];
@@ -304,11 +312,11 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
     }, [expanded, selectedProp, expandedProp, data, autoScrollAllowed]);
 
     /* User Interaction management */
-    const handleNodeSelect = (_e: React.SyntheticEvent, values: string | string[]) => {
+    const handleNodeSelect = (_e: React.SyntheticEvent, values: string | string[] | null) => {
         // Default management
         if (multiSelect && Array.isArray(values)) {
-            setSelected(values.filter((nodeId) => isSelectable(mapPrintedNodes[nodeId])));
-        } else if (!Array.isArray(values)) {
+            setSelected(values.filter((itemId) => isSelectable(mapPrintedNodes[itemId])));
+        } else if (typeof values === 'string') {
             // Toggle selection to allow unselection
             if (selected?.includes(values)) {
                 setSelected([]);
@@ -348,7 +356,7 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
             return null;
         }
 
-        if (isSelectable(node) && selected?.find((nodeId) => nodeId === node.id)) {
+        if (isSelectable(node) && selected?.find((itemId) => itemId === node.id)) {
             return <CheckIcon className={composeClasses(classes, cssLabelIcon)} />;
         }
         if (node.icon) {
@@ -365,36 +373,39 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
             </div>
         );
     };
+
     const showChevron = (node: TreeViewFinderNodeProps) => {
-        // by defaut show Chevron if childrenCount is null or undefined otherwise only if > 0
-        return !!(node.childrenCount == null || (node.childrenCount && node.childrenCount > 0));
+        return !!(node.childrenCount && node.childrenCount > 0);
     };
 
     const renderTree = (node: TreeViewFinderNodeProps) => {
         if (!node) {
             return null;
         }
         let childrenNodes = null;
-
-        if (Array.isArray(node.children)) {
-            if (node.children.length) {
-                const sortedChildren = node.children.sort(sortMethod);
-                childrenNodes = sortedChildren.map((child) => renderTree(child));
-            } else {
-                childrenNodes = [false]; // Pass non empty Array here to simulate a child then this node isn't considered as a leaf.
-            }
+        const showExpandIcon = showChevron(node);
+        if (Array.isArray(node.children) && node.children.length > 0) {
+            childrenNodes = node.children.toSorted(sortMethod).map(renderTree);
+        } else if (showExpandIcon) {
+            childrenNodes = [<span key="placeholder" style={{ display: 'none' }} />]; // simulate placeholder so expand icon is shown
         }
         return (
             <TreeItem
                 key={node.id}
-                nodeId={node.id}
+                itemId={node.id}
                 label={renderTreeItemLabel(node)}
-                expandIcon={
-                    showChevron(node) ? <ChevronRightIcon className={composeClasses(classes, cssIcon)} /> : null
-                }
-                collapseIcon={
-                    showChevron(node) ? <ExpandMoreIcon className={composeClasses(classes, cssIcon)} /> : null
-                }
+                slots={{
+                    expandIcon: CustomExpandIcon,
+                    collapseIcon: CustomCollapseIcon,
+                }}
+                slotProps={{
+                    expandIcon: {
+                        className: composeClasses(classes, cssIcon),
+                    },
+                    collapseIcon: {
+                        className: composeClasses(classes, cssIcon),
+                    },
+                }}
                 ref={(element) => {
                     if (selectedProp?.includes(node.id)) {
                         scrollRef.current.push(element);
@@ -445,17 +456,15 @@ function TreeViewFinderComponant(props: Readonly<TreeViewFinderProps>) {
                     {contentText ?? intl.formatMessage({ id: 'treeview_finder/contentText' }, { multiSelect })}
                 </DialogContentText>
 
-                <TreeView
-                    // Controlled props
-                    expanded={expanded}
-                    // events
-                    onNodeToggle={handleNodeToggle}
-                    onNodeSelect={handleNodeSelect}
+                <SimpleTreeView
+                    expandedItems={expanded}
+                    onExpandedItemsChange={handleNodeToggle}
+                    onSelectedItemsChange={handleNodeSelect}
                     // Uncontrolled props
                     {...getTreeViewSelectionProps()}
                 >
                     {data && Array.isArray(data) ? data.sort(sortMethod).map((child) => renderTree(child)) : null}
-                </TreeView>
+                </SimpleTreeView>
             </DialogContent>
             <DialogActions>
                 <CancelButton