✨(tree-view) load children on keyboard navigation and simplify toggle

replace arrow click with node.toggle and trigger load on open via useEffect

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

Author: Ovgodd

src/components/tree-view/TreeViewItem.tsx

@@ -55,6 +55,26 @@ export const TreeViewItem = <T,>({
     node.open();
   }, [isLeaf, hasLoadedChildren, node, context?.treeData]);
 
+  useEffect(() => {
+    if (isLeaf || hasLoadedChildren || node.data.value.hasLoadedChildren) {
+      return;
+    }
+
+    if (node.isOpen) {
+      setIsLoading(true);
+      context?.treeData
+        .handleLoadChildren(node.data.value.id)
+        .then(() => setIsLoading(false));
+    }
+  }, [
+    node.isOpen,
+    isLeaf,
+    hasLoadedChildren,
+    node.data.value.hasLoadedChildren,
+    node.data.value.id,
+    context?.treeData,
+  ]);
+
   const handleOver = useCallback(
     (isOver: boolean) => {
       if (isOver && !node.isOpen && !node.isDragging) {
@@ -131,7 +151,7 @@ export const TreeViewItem = <T,>({
               <span
                 onClick={(e) => {
                   e.stopPropagation();
-                  void handleClick();
+                  node.toggle();
                 }}
                 className="c__tree-view--node__arrow material-icons"
               >