Fix bug in hover with implicit toggle method; (#154)

ydaniv · web-flow · commit 8580b20c2bae · 2026-03-12T18:35:00.000+02:00
Update CHANGELOG;
Improve AGENTS.md and add CLAUDE.md;
Force node 24 in all workflows
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -12,6 +12,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/interact-e2e.yml b/.github/workflows/interact-e2e.yml
@@ -20,6 +20,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
 jobs:
   e2e:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/interactdocs.yml b/.github/workflows/interactdocs.yml
@@ -16,6 +16,9 @@ concurrency:
   group: pages
   cancel-in-progress: false
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/motion-e2e.yml b/.github/workflows/motion-e2e.yml
@@ -20,6 +20,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
 jobs:
   e2e:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/release-interact.yml b/.github/workflows/release-interact.yml
@@ -30,6 +30,9 @@ permissions:
   contents: write
   pull-requests: write
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
 jobs:
   publish:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/release-motion-presets.yml b/.github/workflows/release-motion-presets.yml
@@ -25,6 +25,9 @@ permissions:
   contents: write
   pull-requests: write
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
 jobs:
   publish:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/release-motion.yml b/.github/workflows/release-motion.yml
@@ -30,6 +30,9 @@ permissions:
   contents: write
   pull-requests: write
 
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
 jobs:
   publish:
     runs-on: ubuntu-latest
diff --git a/AGENTS.md b/AGENTS.md
@@ -1,8 +1,46 @@
 # Agent Guidelines
 
+## Repository Overview
+
+A monorepo for Wix's web animation and interaction libraries, built on the native Web Animations API.
+
+### Project Map
+
+| Project  | Package               | Directory                  |
+| -------- | --------------------- | -------------------------- |
+| Motion   | `@wix/motion`         | `packages/motion/`         |
+| Interact | `@wix/interact`       | `packages/interact/`       |
+| Presets  | `@wix/motion-presets` | `packages/motion-presets/` |
+
+### Dependency Graph
+
+```
+@wix/motion              ← core animation layer
+    ↑
+@wix/interact            ← declarative interaction layer
+```
+
+```
+@wix/motion              ← core animation layer
+    ↑
+@wix/motion-presets       ← ready-made presets
+```
+
+### Motion (`@wix/motion`)
+
+Core animation toolkit. Provides low-level APIs for running animations via the Web Animations API and CSS, including scroll-driven (ViewTimeline) and pointer-based animations. Uses `fastdom` to batch DOM reads/writes and reduce layout thrashing.
+
+### Interact (`@wix/interact`)
+
+Declarative, configuration-driven interaction library built on top of `@wix/motion`. Lets you wire animations to triggers via JSON config. Ships three entry points: vanilla JS (`@wix/interact`), React (`@wix/interact/react`), and Custom Elements (`@wix/interact/web`).
+
+### Presets (`@wix/motion-presets`)
+
+Ready-made animation presets for `@wix/motion`, organized in five categories: entrance, ongoing, scroll, mouse, and background-scroll. Each preset is a separate module under `library/`. Consumed via `registerEffects()`.
+
 ## CLI Commands
 
-Always run `nvm use` before executing any CLI commands to ensure the correct Node.js version (defined in `.nvmrc`) is active.
+Always run `nvm use` before executing any CLI commands to ensure the correct Node.js version is active.
 
 ```bash
 nvm use
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## @wix/interact
 
+### [2.1.1] - 2026-03-12
+
+#### Fixed
+
+- Fix leave event listeners are not added when using transition effects with `hover` or `interest` triggers without explicit `params: { method: 'toggle' }`
+
 ### [2.1.0] - 2026-03-12
 
 #### Added
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1 @@
+AGENTS.md
diff --git a/packages/interact/src/handlers/eventTrigger.ts b/packages/interact/src/handlers/eventTrigger.ts
@@ -179,8 +179,11 @@ function addEventTriggerHandler(
       }
       addListener(source, eventType, { passive: true, once });
     });
+
+    const isToggle =
+      !(options as StateParams).method || (options as StateParams).method === 'toggle';
     const addLeaveListeners = isTransition
-      ? (options as StateParams).method === 'toggle'
+      ? isToggle
       : (options as PointerTriggerParams).type !== 'once';
 
     if (addLeaveListeners) {
diff --git a/packages/interact/test/web.spec.ts b/packages/interact/test/web.spec.ts
@@ -692,6 +692,104 @@ describe('interact (web)', () => {
           { reducedMotion: false },
         );
       });
+
+      it('should add mouseleave listener for hover trigger with transition effect and no explicit method', () => {
+        Interact.destroy();
+        Interact.create(
+          {
+            interactions: [
+              {
+                trigger: 'hover',
+                key: 'hover-transition-default',
+                effects: [{ key: 'hover-transition-default', effectId: 'hover-transition-fx' }],
+              },
+            ],
+            effects: {
+              'hover-transition-fx': {
+                transition: {
+                  duration: 300,
+                  styleProperties: [{ name: 'opacity', value: '0' }],
+                },
+              },
+            },
+          },
+          { useCutsomElement: true },
+        );
+
+        const el = document.createElement('interact-element') as IInteractElement;
+        const div = document.createElement('div');
+        el.append(div);
+        const addEventListenerSpy = vi.spyOn(div, 'addEventListener');
+
+        add(el, 'hover-transition-default');
+
+        expect(addEventListenerSpy).toHaveBeenCalledWith(
+          'mouseenter',
+          expect.any(Function),
+          expect.objectContaining({ passive: true }),
+        );
+        expect(addEventListenerSpy).toHaveBeenCalledWith(
+          'mouseleave',
+          expect.any(Function),
+          expect.objectContaining({ passive: true }),
+        );
+      });
+    });
+
+    describe('interest', () => {
+      it('should add leave listeners for interest trigger with transition effect and no explicit method', () => {
+        Interact.destroy();
+        Interact.create(
+          {
+            interactions: [
+              {
+                trigger: 'interest',
+                key: 'interest-transition-default',
+                effects: [
+                  { key: 'interest-transition-default', effectId: 'interest-transition-fx' },
+                ],
+              },
+            ],
+            effects: {
+              'interest-transition-fx': {
+                transition: {
+                  duration: 300,
+                  styleProperties: [{ name: 'opacity', value: '0' }],
+                },
+              },
+            },
+          },
+          { useCutsomElement: true },
+        );
+
+        const el = document.createElement('interact-element') as IInteractElement;
+        const div = document.createElement('div');
+        el.append(div);
+        const addEventListenerSpy = vi.spyOn(div, 'addEventListener');
+
+        add(el, 'interest-transition-default');
+
+        expect(addEventListenerSpy).toHaveBeenCalledWith(
+          'mouseenter',
+          expect.any(Function),
+          expect.objectContaining({ passive: true }),
+        );
+        expect(addEventListenerSpy).toHaveBeenCalledWith(
+          'mouseleave',
+          expect.any(Function),
+          expect.objectContaining({ passive: true }),
+        );
+        expect(addEventListenerSpy).toHaveBeenCalledWith(
+          'focusin',
+          expect.any(Function),
+          expect.any(Object),
+        );
+        expect(addEventListenerSpy).toHaveBeenCalledWith(
+          'focusout',
+          expect.any(Function),
+          expect.any(Object),
+        );
+      });
     });
 
     describe('click', () => {
