From 4440582e6525a881ff1897449dbb3fef3e8824c0 Mon Sep 17 00:00:00 2001
From: Clemens Solar <git@clemens.solar>
Date: Fri, 14 Jun 2024 22:24:23 +0200
Subject: [PATCH] fix: migrate to @mui/x-tree-view/SimpleTreeView

---
 src/components/Workspace/FileSystem.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Workspace/FileSystem.tsx b/src/components/Workspace/FileSystem.tsx
index 72f8b6b..f23db90 100644
--- a/src/components/Workspace/FileSystem.tsx
+++ b/src/components/Workspace/FileSystem.tsx
@@ -8,7 +8,7 @@ import { Alert, AlertTitle } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import { TreeView } from '@mui/x-tree-view/TreeView';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { BlobReader, Uint8ArrayWriter, ZipReader } from '@zip.js/zip.js';
 import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
@@ -102,7 +102,7 @@ export default function FileSystem() {
         tree.push(
           <StyledTreeItem
             key={file.path}
-            nodeId={file.path}
+            itemId={file.path}
             labelText={file.name}
             labelIcon={FolderIcon}
           >
@@ -116,7 +116,7 @@ export default function FileSystem() {
         tree.push(
           <StyledTreeItem
             key={file.path}
-            nodeId={file.path}
+            itemId={file.path}
             labelText={file.name}
             endLabelAdornment={
               <IconButton onClick={handleDelete} data-name={file.name}>
@@ -156,18 +156,20 @@ export default function FileSystem() {
           overflowY: 'scroll',
         }}
       >
-        <TreeView
+        <SimpleTreeView
           {...getRootProps()}
           aria-label="File tree"
-          defaultExpanded={['3']}
-          defaultCollapseIcon={<ArrowDropDownIcon />}
-          defaultExpandIcon={<ArrowRightIcon />}
-          defaultEndIcon={<div style={{ width: 24 }} />}
+          defaultExpandedItems={['3']}
+          slots={{
+            endIcon: CustomEndIcon,
+            expandIcon: ArrowDropDownIcon,
+            collapseIcon: ArrowRightIcon,
+          }}
           sx={{ height: '100%', overflowY: 'scroll' }}
         >
           <input {...getInputProps()} />
           {createTree(recursiveTree(files))}
-        </TreeView>
+        </SimpleTreeView>
       </Box>
     </Box>
   );
@@ -200,3 +202,7 @@ function recursiveTree(files: WorkspaceFile[]): TreeItemStruct[] {
   }
   return tree;
 }
+
+function CustomEndIcon() {
+  return <div style={{ width: 24 }} />;
+}