feat: allow layers to utilise CoreEventHandler mouseleave options (#705)

Author: itsbjoern

.changeset/smooth-elephants-clean.md

@@ -0,0 +1,6 @@
+---
+'@craftjs/core': patch
+'@craftjs/layers': patch
+---
+
+Use removeHoverOnMouseleave option for layers package

packages/core/src/events/CoreEventHandlers.ts

@@ -8,7 +8,7 @@ export interface CreateHandlerOptions {
 }
 
 export class CoreEventHandlers<O = {}> extends EventHandlers<
-  { store: EditorStore } & O
+  { store: EditorStore; removeHoverOnMouseleave: boolean } & O
 > {
   handlers() {
     return {

packages/core/src/events/DefaultEventHandlers.ts

@@ -138,10 +138,14 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
         let unbindMouseleave: (() => void) | null = null;
 
         if (this.options.removeHoverOnMouseleave) {
-          this.addCraftEventListener(el, 'mouseleave', (e) => {
-            e.craft.stopPropagation();
-            store.actions.setNodeEvent('hovered', null);
-          });
+          unbindMouseleave = this.addCraftEventListener(
+            el,
+            'mouseleave',
+            (e) => {
+              e.craft.stopPropagation();
+              store.actions.setNodeEvent('hovered', null);
+            }
+          );
         }
 
         return () => {

packages/layers/src/events/LayerHandlers.ts

@@ -42,6 +42,19 @@ export class LayerHandlers extends DerivedCoreEventHandlers<{
           }
         );
 
+        let unbindMouseleave: (() => void) | null = null;
+
+        if (this.derived.options.removeHoverOnMouseleave) {
+          unbindMouseleave = this.addCraftEventListener(
+            el,
+            'mouseleave',
+            (e) => {
+              e.craft.stopPropagation();
+              layerStore.actions.setLayerEvent('hovered', null);
+            }
+          );
+        }
+
         const unbindDragOver = this.addCraftEventListener(
           el,
           'dragover',
@@ -174,6 +187,12 @@ export class LayerHandlers extends DerivedCoreEventHandlers<{
           unbindMouseOver();
           unbindDragOver();
           unbindDragEnter();
+
+          if (!unbindMouseleave) {
+            return;
+          }
+
+          unbindMouseleave();
         };
       },
       layerHeader: (el: HTMLElement, layerId: NodeId) => {