From a93d571dc0dfc7f683942beaf96f74a0086984ea Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 28 Nov 2022 05:09:20 -0800
Subject: [PATCH] Unhover on mouse exit of tree

Summary: This was causing the hover state to linger which is now quite noticable in the tree

Reviewed By: lblasa

Differential Revision: D41548249

fbshipit-source-id: cdf8ed434aa064dba05ebf31773bedaef18ba007
---
 .../public/ui-debugger/components/Tree.tsx    | 129 +++++++++---------
 1 file changed, 67 insertions(+), 62 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index 18f042e62..0b89fcf51 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -58,70 +58,75 @@ export function Tree(props: {
   }, [props.selectedNode]);
 
   return (
-    <HighlightProvider
-      text={searchTerm}
-      highlightColor={theme.searchHighlightBackground.yellow}>
-      <ControlledTreeEnvironment
-        ref={treeEnvRef as any}
-        items={items}
-        getItemTitle={(item) => item.data.name}
-        canRename={false}
-        canDragAndDrop={false}
-        viewState={{
-          tree: {
-            focusedItem: head(hoveredNodes),
-            expandedItems,
-            selectedItems: props.selectedNode ? [props.selectedNode] : [],
-          },
-        }}
-        onFocusItem={(item) => {
-          instance.uiState.hoveredNodes.set([item.index]);
-        }}
-        onExpandItem={(item) => {
-          instance.uiState.treeState.update((draft) => {
-            draft.expandedNodes.push(item.index);
-          });
-        }}
-        onCollapseItem={(item) =>
-          instance.uiState.treeState.update((draft) => {
-            draft.expandedNodes = draft.expandedNodes.filter(
-              (expandedItemIndex) => expandedItemIndex !== item.index,
-            );
-          })
-        }
-        renderItem={renderItem}
-        onSelectItems={(items) => props.onSelectNode(items[0])}
-        defaultInteractionMode={{
-          mode: 'custom',
-          extends: InteractionMode.DoubleClickItemToExpand,
-          createInteractiveElementProps: (
-            item,
-            treeId,
-            actions,
-            renderFlags,
-          ) => ({
-            onClick: () => {
-              if (renderFlags.isSelected) {
-                actions.unselectItem();
-              } else {
-                actions.selectItem();
-              }
+    <div
+      onMouseLeave={() => {
+        instance.uiState.hoveredNodes.set([]);
+      }}>
+      <HighlightProvider
+        text={searchTerm}
+        highlightColor={theme.searchHighlightBackground.yellow}>
+        <ControlledTreeEnvironment
+          ref={treeEnvRef as any}
+          items={items}
+          getItemTitle={(item) => item.data.name}
+          canRename={false}
+          canDragAndDrop={false}
+          viewState={{
+            tree: {
+              focusedItem: head(hoveredNodes),
+              expandedItems,
+              selectedItems: props.selectedNode ? [props.selectedNode] : [],
             },
+          }}
+          onFocusItem={(item) => {
+            instance.uiState.hoveredNodes.set([item.index]);
+          }}
+          onExpandItem={(item) => {
+            instance.uiState.treeState.update((draft) => {
+              draft.expandedNodes.push(item.index);
+            });
+          }}
+          onCollapseItem={(item) =>
+            instance.uiState.treeState.update((draft) => {
+              draft.expandedNodes = draft.expandedNodes.filter(
+                (expandedItemIndex) => expandedItemIndex !== item.index,
+              );
+            })
+          }
+          renderItem={renderItem}
+          onSelectItems={(items) => props.onSelectNode(items[0])}
+          defaultInteractionMode={{
+            mode: 'custom',
+            extends: InteractionMode.DoubleClickItemToExpand,
+            createInteractiveElementProps: (
+              item,
+              treeId,
+              actions,
+              renderFlags,
+            ) => ({
+              onClick: () => {
+                if (renderFlags.isSelected) {
+                  actions.unselectItem();
+                } else {
+                  actions.selectItem();
+                }
+              },
 
-            onMouseOver: () => {
-              if (!instance.uiState.isContextMenuOpen.get()) {
-                instance.uiState.hoveredNodes.set([item.index]);
-              }
-            },
-          }),
-        }}>
-        <ComplexTree
-          treeId="tree"
-          rootItem={FakeNode.id as any} //the typing in in the library is wrong here
-          treeLabel="UI"
-        />
-      </ControlledTreeEnvironment>
-    </HighlightProvider>
+              onMouseOver: () => {
+                if (!instance.uiState.isContextMenuOpen.get()) {
+                  instance.uiState.hoveredNodes.set([item.index]);
+                }
+              },
+            }),
+          }}>
+          <ComplexTree
+            treeId="tree"
+            rootItem={FakeNode.id as any} //the typing in in the library is wrong here
+            treeLabel="UI"
+          />
+        </ControlledTreeEnvironment>
+      </HighlightProvider>
+    </div>
   );
 }