chore: implementing removing the click area when you click outside the ref

src/components/Explorer/FileExplorer.tsx

@@ -288,19 +288,20 @@ export const FileExplorerRow = ({
   selectedRow: FileExplorerEntry | null
   domLength: number
 }) => {
-  const isSelected =row.name === selectedRow?.name && row.parentPath === selectedRow?.parentPath
+  const isSelected =
+    row.name === selectedRow?.name && row.parentPath === selectedRow?.parentPath
   return (
     <div
       role="treeitem"
-      className={`h-6 flex flex-row items-center text-xs cursor-pointer hover:bg-sky-400 ${ isSelected ? 'bg-sky-800' : ''}`}
+      className={`h-6 flex flex-row items-center text-xs cursor-pointer hover:bg-sky-400 ${isSelected ? 'bg-sky-800' : ''}`}
       data-index={row.domIndex}
-      data-last-element={row.domIndex === row.domLength -1 }
-      data-parity={row.domIndex % 2 === 0 }
+      data-last-element={row.domIndex === row.domLength - 1}
+      data-parity={row.domIndex % 2 === 0}
       aria-setsize={row.domLength}
-      aria-posinset={row.domIndex+1}
+      aria-posinset={row.domIndex + 1}
       aria-label={row.name}
       aria-selected={isSelected}
-      aria-level={row.level+1}
+      aria-level={row.level + 1}
       aria-expanded={row.isFolder && row.isOpen}
       onClick={() => {
         row.rowClicked(row.domIndex)

src/components/Explorer/ProjectExplorer.tsx

@@ -53,20 +53,20 @@ export const ProjectExplorer = ({
   }
 
   // Handle outside clicks
-  // useEffect(() => {
-  //   const handleClickOutside = (event) => {
-  //     console.log(event.target)
-  //     if (fileExplorerContainer.current && !fileExplorerContainer.current.contains(event.target)) {
-  //       console.log(fileExplorerContainer.current)
-  //       setActiveIndex(-2);
-  //     }
-  //   };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const path = event.composedPath ? event.composedPath() : [];
 
-  //   document.addEventListener('click', handleClickOutside);
-  //   return () => {
-  //     document.removeEventListener('click', handleClickOutside);
-  //   };
-  // }, []);
+      if (!path.includes(fileExplorerContainer.current)) {
+        setActiveIndex(-2);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
 
   return (
     <div>