From 12b4af96b5571be422aba375417135fd62f62b22 Mon Sep 17 00:00:00 2001
From: Prev Wong <prevwong@gmail.com>
Date: Mon, 27 Nov 2023 22:00:47 +0000
Subject: [PATCH] feat: add option remove hover state on mouseleave (#582)

---
 .changeset/two-windows-remain.md               |  5 +++++
 packages/core/src/editor/store.tsx             |  1 +
 .../core/src/events/DefaultEventHandlers.ts    | 18 ++++++++++++------
 3 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/two-windows-remain.md

diff --git a/.changeset/two-windows-remain.md b/.changeset/two-windows-remain.md
new file mode 100644
index 000000000..2bde0c000
--- /dev/null
+++ b/.changeset/two-windows-remain.md
@@ -0,0 +1,5 @@
+---
+'@craftjs/core': patch
+---
+
+Add option to remove hover state on mouseleave
diff --git a/packages/core/src/editor/store.tsx b/packages/core/src/editor/store.tsx
index 1624a93ef..d851e3b19 100644
--- a/packages/core/src/editor/store.tsx
+++ b/packages/core/src/editor/store.tsx
@@ -31,6 +31,7 @@ export const editorInitialState: EditorState = {
     handlers: (store) =>
       new DefaultEventHandlers({
         store,
+        removeHoverOnMouseleave: false,
         isMultiSelectEnabled: (e: MouseEvent) => !!e.metaKey,
       }),
     normalizeNodes: () => {},
diff --git a/packages/core/src/events/DefaultEventHandlers.ts b/packages/core/src/events/DefaultEventHandlers.ts
index 95e6ef003..17ae097e1 100644
--- a/packages/core/src/events/DefaultEventHandlers.ts
+++ b/packages/core/src/events/DefaultEventHandlers.ts
@@ -10,6 +10,7 @@ import { Indicator, NodeId, DragTarget, NodeTree } from '../interfaces';
 
 export type DefaultEventHandlersOptions = {
   isMultiSelectEnabled: (e: MouseEvent) => boolean;
+  removeHoverOnMouseleave: boolean;
 };
 
 /**
@@ -134,17 +135,22 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
           }
         );
 
-        const unbindMouseleave = this.addCraftEventListener(
-          el,
-          'mouseleave',
-          (e) => {
+        let unbindMouseleave: (() => void) | null = null;
+
+        if (this.options.removeHoverOnMouseleave) {
+          this.addCraftEventListener(el, 'mouseleave', (e) => {
             e.craft.stopPropagation();
             store.actions.setNodeEvent('hovered', null);
-          }
-        );
+          });
+        }
 
         return () => {
           unbindMouseover();
+
+          if (!unbindMouseleave) {
+            return;
+          }
+
           unbindMouseleave();
         };
       },