@wix/interact 1.74.0 → 1.76.0

package/dist/esm/__tests__/interact.spec.js

@@ -1,4 +1,6 @@
-import { Interact, add, remove } from '../interact';
+import { Interact } from '../core/Interact';
+import { add, addListItems } from '../core/add';
+import { remove } from '../core/remove';
 import { effectToAnimationOptions } from '../handlers/utilities';
 
 // Mock @wix/motion module
@@ -40,75 +42,75 @@ describe('interact', () => {
   const mockConfig = {
     interactions: [{
       trigger: 'viewEnter',
-      source: '#logo-entrance',
+      key: 'logo-entrance',
       params: {
         threshold: 0.2
       },
       effects: [{
-        target: '#logo-entrance',
+        key: 'logo-entrance',
         effectId: 'logo-arc-in'
       }, {
-        target: '#logo-click',
+        key: 'logo-click',
         effectId: 'logo-bounce'
       }]
     }, {
       trigger: 'pageVisible',
-      source: '#logo-loop',
+      key: 'logo-loop',
       effects: [{
-        target: '#logo-loop',
+        key: 'logo-loop',
         effectId: 'logo-poke'
       }]
     }, {
       trigger: 'animationEnd',
-      source: '#logo-animation-end',
+      key: 'logo-animation-end',
       params: {
         effectId: 'logo-arc-in'
       },
       effects: [{
-        target: '#logo-animation-end',
+        key: 'logo-animation-end',
         effectId: 'logo-poke'
       }]
     }, {
       trigger: 'pointerMove',
-      source: '#logo-mouse',
+      key: 'logo-mouse',
       params: {
         hitArea: 'root'
       },
       effects: [{
-        target: '#logo-mouse',
+        key: 'logo-mouse',
         effectId: 'logo-track-mouse'
       }]
     }, {
       trigger: 'click',
-      source: '#logo-click',
+      key: 'logo-click',
       params: {
         type: 'alternate'
       },
       effects: [{
-        target: '#logo-click',
+        key: 'logo-click',
         effectId: 'logo-bounce'
       }]
     }, {
       trigger: 'click',
-      source: '#logo-click',
+      key: 'logo-click',
       params: {
         method: 'toggle'
       },
       effects: [{
-        target: '#logo-click',
+        key: 'logo-click',
         effectId: 'logo-transition-hover'
       }]
     }, {
       trigger: 'hover',
-      source: '#logo-hover',
+      key: 'logo-hover',
       params: {
         type: 'alternate'
       },
       effects: [{
-        target: '#logo-hover',
+        key: 'logo-hover',
         effectId: 'logo-arc-in'
       }, {
-        target: '#logo-hover',
+        key: 'logo-hover',
         effectId: 'logo-arc-in',
         namedEffect: {
           type: 'ArcIn',
@@ -118,19 +120,49 @@ describe('interact', () => {
       }]
     }, {
       trigger: 'hover',
-      source: '#logo-hover',
+      key: 'logo-hover',
       params: {
         method: 'toggle'
       },
       effects: [{
-        target: '#logo-hover',
+        key: 'logo-hover',
         effectId: 'logo-transition-hover'
       }]
     }, {
       trigger: 'viewProgress',
-      source: '#logo-scroll',
+      key: 'logo-scroll',
       effects: [{
-        target: '#logo-scroll',
+        key: 'logo-scroll',
+        effectId: 'logo-fade-scroll'
+      }]
+    }, {
+      trigger: 'click',
+      key: 'logo-click-container',
+      listContainer: '#logo-list',
+      effects: [{
+        effectId: 'logo-bounce'
+      }]
+    }, {
+      trigger: 'viewEnter',
+      key: 'logo-view-container',
+      effects: [{
+        listContainer: '#logo-list',
+        effectId: 'logo-bounce'
+      }]
+    }, {
+      trigger: 'viewProgress',
+      key: 'logo-scroll-container',
+      listContainer: '#logo-scroll-list',
+      effects: [{
+        listContainer: '#logo-scroll-list',
+        effectId: 'logo-fade-scroll'
+      }]
+    }, {
+      trigger: 'viewProgress',
+      key: 'logo-scroll-container',
+      effects: [{
+        key: 'logo-scroll-items',
+        listContainer: '#logo-scroll-list',
         effectId: 'logo-fade-scroll'
       }]
     }],
@@ -144,7 +176,7 @@ describe('interact', () => {
         duration: 1200
       },
       'logo-arc-in-with-target': {
-        target: '#logo-hover',
+        key: 'logo-hover',
         namedEffect: {
           type: 'ArcIn',
           direction: 'right',
@@ -268,7 +300,8 @@ describe('interact', () => {
     window.CSSStyleSheet = class CSSStyleSheet {
       constructor(_) {
         return {
-          replace: jest.fn()
+          replace: jest.fn(),
+          insertRule: jest.fn()
         };
       }
     };
@@ -327,12 +360,12 @@ describe('interact', () => {
       },
       interactions: [{
         trigger: 'click',
-        source: '#cascade-source',
+        key: 'cascade-source',
         effects: [{
-          target: '#cascade-target',
+          key: 'cascade-target',
           effectId: 'default-effect'
         }, {
-          target: '#cascade-target',
+          key: 'cascade-target',
           effectId: 'default-effect',
           conditions: ['desktop'],
           namedEffect: {
@@ -342,7 +375,7 @@ describe('interact', () => {
           },
           duration: 800
         }, {
-          target: '#cascade-target',
+          key: 'cascade-target',
           effectId: 'default-effect',
           conditions: ['mobile'],
           namedEffect: {
@@ -366,23 +399,25 @@ describe('interact', () => {
   }
   afterEach(() => {
     jest.clearAllMocks();
-    remove('#logo-entrance');
-    remove('#logo-loop');
-    remove('#logo-animation-end');
-    remove('#logo-mouse');
-    remove('#logo-click');
-    remove('#logo-hover');
-    remove('#logo-scroll');
+    remove('logo-entrance');
+    remove('logo-loop');
+    remove('logo-animation-end');
+    remove('logo-mouse');
+    remove('logo-click');
+    remove('logo-hover');
+    remove('logo-scroll');
     // Clean up cascading test elements
-    remove('#cascade-source');
-    remove('#cascade-target');
-    remove('#cascade-target-1');
-    remove('#cascade-target-2');
-    remove('#multi-source-1');
-    remove('#multi-source-2');
+    remove('cascade-source');
+    remove('cascade-target');
+    remove('cascade-target-1');
+    remove('cascade-target-2');
+    remove('multi-source-1');
+    remove('multi-source-2');
     // Clear Interact instances to ensure test isolation
     Interact.instances.length = 0;
     Interact.elementCache.clear();
+    // Reset forceReducedMotion to default
+    Interact.forceReducedMotion = false;
   });
   describe('init Interact', () => {
     it('should initialize with valid config', () => {
@@ -399,9 +434,9 @@ describe('interact', () => {
       Interact.create({
         interactions: [{
           trigger: 'hover',
-          source: '#logo-hover',
+          key: 'logo-hover',
           effects: [{
-            target: '#logo-hover',
+            key: 'logo-hover',
             effectId: 'logo-arc-in'
           }]
         }],
@@ -419,12 +454,12 @@ describe('interact', () => {
       element = document.createElement('wix-interact-element');
       const div = document.createElement('div');
       element.append(div);
-      add(element, '#logo-hover');
+      add(element, 'logo-hover');
       expect(getWebAnimation).toHaveBeenCalledWith(div, expect.any(Object), undefined, {
         reducedMotion: true
       });
       Interact.forceReducedMotion = false;
-      remove('#logo-hover');
+      remove('logo-hover');
     });
   });
   describe('add interaction', () => {
@@ -440,7 +475,7 @@ describe('interact', () => {
         const div = document.createElement('div');
         element.append(div);
         const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
-        add(element, '#logo-hover');
+        add(element, 'logo-hover');
         expect(addEventListenerSpy).toHaveBeenCalledTimes(4);
         expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.objectContaining({
           passive: true
@@ -466,7 +501,7 @@ describe('interact', () => {
         const div = document.createElement('div');
         element.append(div);
         const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
-        add(element, '#logo-click');
+        add(element, 'logo-click');
         expect(addEventListenerSpy).toHaveBeenCalledTimes(2);
         expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
           passive: true
@@ -481,7 +516,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        add(element, '#logo-entrance');
+        add(element, 'logo-entrance');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object), undefined, {
           reducedMotion: false
@@ -493,14 +528,25 @@ describe('interact', () => {
         } = require('@wix/motion');
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
+        div.id = 'logo-entrance';
         element.append(div);
         const elementClick = document.createElement('wix-interact-element');
         const divClick = document.createElement('div');
-        element.append(divClick);
-        add(elementClick, '#logo-click');
-        add(element, '#logo-entrance');
-        expect(getWebAnimation).toHaveBeenCalledTimes(1);
-        expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object), undefined, {
+        divClick.id = 'logo-click';
+        elementClick.append(divClick);
+        add(elementClick, 'logo-click');
+        add(element, 'logo-entrance');
+        expect(getWebAnimation).toHaveBeenCalledTimes(3);
+        expect(getWebAnimation.mock.calls[0][0]).toBe(divClick);
+        expect(getWebAnimation.mock.calls[1][0]).toBe(div);
+        expect(getWebAnimation.mock.calls[2][0]).toBe(divClick);
+        expect(getWebAnimation.mock.calls[0][3]).toMatchObject({
+          reducedMotion: false
+        });
+        expect(getWebAnimation.mock.calls[1][3]).toMatchObject({
+          reducedMotion: false
+        });
+        expect(getWebAnimation.mock.calls[2][3]).toMatchObject({
           reducedMotion: false
         });
       });
@@ -513,7 +559,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        add(element, '#logo-loop');
+        add(element, 'logo-loop');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object), undefined, {
           reducedMotion: false
@@ -528,7 +574,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        add(element, '#logo-animation-end');
+        add(element, 'logo-animation-end');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object), undefined, {
           reducedMotion: false
@@ -551,7 +597,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        add(element, '#logo-mouse');
+        add(element, 'logo-mouse');
         expect(getScrubScene).toHaveBeenCalledTimes(1);
         expect(getScrubScene).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining(effectToAnimationOptions(mockConfig.effects['logo-track-mouse'])), expect.objectContaining({
           trigger: 'pointer-move'
@@ -567,7 +613,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        add(element, '#logo-scroll');
+        add(element, 'logo-scroll');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining(effectToAnimationOptions(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
           trigger: 'view-progress'
@@ -590,7 +636,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        add(element, '#logo-scroll');
+        add(element, 'logo-scroll');
         expect(getScrubScene).toHaveBeenCalledTimes(1);
         expect(getScrubScene).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining(effectToAnimationOptions(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
           trigger: 'view-progress'
@@ -600,6 +646,116 @@ describe('interact', () => {
         }, 0);
       });
     });
+    describe('listContainer', () => {
+      it('should add a handler per list item for click trigger with listContainer', () => {
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        const ul = document.createElement('ul');
+        ul.id = 'logo-list';
+        div.append(ul);
+        const li = document.createElement('li');
+        const li2 = li.cloneNode(true);
+        ul.append(li);
+        ul.append(li2);
+        element.append(div);
+        const addEventListenerSpy = jest.spyOn(li, 'addEventListener');
+        const addEventListenerSpy2 = jest.spyOn(li2, 'addEventListener');
+        add(element, 'logo-click-container');
+        expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
+        expect(addEventListenerSpy2).toHaveBeenCalledTimes(1);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+        expect(addEventListenerSpy2).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+      });
+      it('should add a handler per list item for viewEnter trigger with listContainer in effect', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        const ul = document.createElement('ul');
+        ul.id = 'logo-list';
+        div.append(ul);
+        const li = document.createElement('li');
+        const li2 = li.cloneNode(true);
+        ul.append(li);
+        ul.append(li2);
+        element.append(div);
+        add(element, 'logo-view-container');
+        expect(getWebAnimation).toHaveBeenCalledTimes(2);
+        expect(getWebAnimation.mock.calls[0][0]).toBe(li);
+        expect(getWebAnimation.mock.calls[1][0]).toBe(li2);
+      });
+      it('should add a handler per newly added list item for click trigger with listContainer', () => {
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        const ul = document.createElement('ul');
+        ul.id = 'logo-list';
+        div.append(ul);
+        const li = document.createElement('li');
+        const li2 = li.cloneNode(true);
+        ul.append(li);
+        ul.append(li2);
+        element.append(div);
+        const addEventListenerSpy = jest.spyOn(li, 'addEventListener');
+        const addEventListenerSpy2 = jest.spyOn(li2, 'addEventListener');
+        add(element, 'logo-click-container');
+        expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
+        expect(addEventListenerSpy2).toHaveBeenCalledTimes(1);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+        expect(addEventListenerSpy2).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+        const li3 = document.createElement('li');
+        ul.append(li3);
+        const addEventListenerSpy3 = jest.spyOn(li3, 'addEventListener');
+        addListItems(element, 'logo-click-container', '#logo-list', [li3]);
+        expect(addEventListenerSpy3).toHaveBeenCalledTimes(1);
+        expect(addEventListenerSpy3).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+      });
+      it('should add a handler per newly added list item for viewProgress trigger but not add same interaction twice', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        const targetElement = document.createElement('wix-interact-element');
+        const divTarget = document.createElement('div');
+        const ul = document.createElement('ul');
+        ul.id = 'logo-scroll-list';
+        divTarget.append(ul);
+        const li = document.createElement('li');
+        const li2 = li.cloneNode(true);
+        ul.append(li);
+        ul.append(li2);
+        element.append(div);
+        targetElement.append(divTarget);
+        add(element, 'logo-scroll-container');
+        expect(getWebAnimation).toHaveBeenCalledTimes(0);
+        add(targetElement, 'logo-scroll-items');
+        expect(getWebAnimation).toHaveBeenCalledTimes(2);
+        expect(getWebAnimation).toHaveBeenCalledWith(li, expect.objectContaining(effectToAnimationOptions(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
+          trigger: 'view-progress'
+        }));
+        expect(getWebAnimation).toHaveBeenCalledWith(li2, expect.objectContaining(effectToAnimationOptions(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
+          trigger: 'view-progress'
+        }));
+        const li3 = document.createElement('li');
+        ul.append(li3);
+        addListItems(targetElement, 'logo-scroll-items', '#logo-scroll-list', [li3]);
+        expect(getWebAnimation).toHaveBeenCalledTimes(3);
+        expect(getWebAnimation).toHaveBeenCalledWith(li3, expect.objectContaining(effectToAnimationOptions(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
+          trigger: 'view-progress'
+        }));
+      });
+    });
   });
   describe('remove interaction', () => {
     beforeEach(() => {
@@ -610,8 +766,8 @@ describe('interact', () => {
       const div = document.createElement('div');
       element.append(div);
       const removeEventListenerSpy = jest.spyOn(div, 'removeEventListener');
-      add(element, '#logo-click');
-      remove('#logo-click');
+      add(element, 'logo-click');
+      remove('logo-click');
       expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
       expect(removeEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function));
     });
@@ -630,8 +786,8 @@ describe('interact', () => {
       element = document.createElement('wix-interact-element');
       const div = document.createElement('div');
       element.append(div);
-      add(element, '#logo-mouse');
-      remove('#logo-mouse');
+      add(element, 'logo-mouse');
+      remove('logo-mouse');
       expect(pointerInstance.destroy).toHaveBeenCalledTimes(1);
     });
   });
@@ -650,8 +806,8 @@ describe('interact', () => {
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         const addEventListenerSpy = jest.spyOn(sourceDiv, 'addEventListener');
-        add(sourceElement, '#cascade-source');
-        add(targetElement, '#cascade-target');
+        add(sourceElement, 'cascade-source');
+        add(targetElement, 'cascade-target');
         expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
         expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
           passive: true
@@ -681,8 +837,8 @@ describe('interact', () => {
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        add(sourceElement, '#cascade-source');
-        add(targetElement, '#cascade-target');
+        add(sourceElement, 'cascade-source');
+        add(targetElement, 'cascade-target');
 
         // Should create animation with default effect
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -707,8 +863,8 @@ describe('interact', () => {
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        add(sourceElement, '#cascade-source');
-        add(targetElement, '#cascade-target');
+        add(sourceElement, 'cascade-source');
+        add(targetElement, 'cascade-target');
 
         // Should create animation with mobile effect
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -737,9 +893,9 @@ describe('interact', () => {
         targetElement.append(targetDiv);
 
         // Add source first
-        add(sourceElement, '#cascade-source');
+        add(sourceElement, 'cascade-source');
         // Add target second
-        add(targetElement, '#cascade-target');
+        add(targetElement, 'cascade-target');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
           namedEffect: expect.objectContaining({
@@ -763,9 +919,9 @@ describe('interact', () => {
         targetElement.append(targetDiv);
 
         // Add target first
-        add(targetElement, '#cascade-target');
+        add(targetElement, 'cascade-target');
         // Add source second
-        add(sourceElement, '#cascade-source');
+        add(sourceElement, 'cascade-source');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
           namedEffect: expect.objectContaining({
@@ -794,13 +950,13 @@ describe('interact', () => {
           },
           interactions: [{
             trigger: 'click',
-            source: '#multi-source-1',
+            key: 'multi-source-1',
             effects: [{
-              target: '#cascade-target-1',
+              key: 'cascade-target-1',
               effectId: 'desktop-effect',
               conditions: ['desktop']
             }, {
-              target: '#cascade-target-2',
+              key: 'cascade-target-2',
               effectId: 'mobile-effect',
               conditions: ['mobile']
             }]
@@ -835,9 +991,9 @@ describe('interact', () => {
         const target2Element = document.createElement('wix-interact-element');
         const target2Div = document.createElement('div');
         target2Element.append(target2Div);
-        add(sourceElement, '#multi-source-1');
-        add(target1Element, '#cascade-target-1');
-        add(target2Element, '#cascade-target-2');
+        add(sourceElement, 'multi-source-1');
+        add(target1Element, 'cascade-target-1');
+        add(target2Element, 'cascade-target-2');
 
         // Only desktop effect should be applied (mobile condition doesn't match)
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -875,12 +1031,12 @@ describe('interact', () => {
           },
           interactions: [{
             trigger: 'click',
-            source: '#cascade-source',
+            key: 'cascade-source',
             effects: [{
-              target: '#cascade-target',
+              key: 'cascade-target',
               effectId: 'premium-effect'
             }, {
-              target: '#cascade-target',
+              key: 'cascade-target',
               effectId: 'premium-effect',
               conditions: ['desktop', 'high-res']
             }]
@@ -906,8 +1062,8 @@ describe('interact', () => {
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        add(sourceElement, '#cascade-source');
-        add(targetElement, '#cascade-target');
+        add(sourceElement, 'cascade-source');
+        add(targetElement, 'cascade-target');
 
         // Premium effect should be applied since both conditions match
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -934,12 +1090,12 @@ describe('interact', () => {
           },
           interactions: [{
             trigger: 'click',
-            source: '#cascade-source',
+            key: 'cascade-source',
             effects: [{
-              target: '#cascade-target',
+              key: 'cascade-target',
               effectId: 'default-effect'
             }, {
-              target: '#cascade-target',
+              key: 'cascade-target',
               effectId: 'default-effect',
               conditions: ['nonexistent-condition']
             }]
@@ -962,8 +1118,8 @@ describe('interact', () => {
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        add(sourceElement, '#cascade-source');
-        add(targetElement, '#cascade-target');
+        add(sourceElement, 'cascade-source');
+        add(targetElement, 'cascade-target');
 
         // Should fall back to default effect since condition doesn't exist
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -983,9 +1139,9 @@ describe('interact', () => {
           conditions: {},
           interactions: [{
             trigger: 'click',
-            source: '#cascade-source',
+            key: 'cascade-source',
             effects: [{
-              target: '#cascade-target',
+              key: 'cascade-target',
               effectId: 'always-applied-effect',
               conditions: []
             }]
@@ -1009,8 +1165,8 @@ describe('interact', () => {
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        add(sourceElement, '#cascade-source');
-        add(targetElement, '#cascade-target');
+        add(sourceElement, 'cascade-source');
+        add(targetElement, 'cascade-target');
 
         // Effect should be applied since empty conditions array should always match
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -1024,5 +1180,501 @@ describe('interact', () => {
       });
     });
   });
+  describe('selector functionality', () => {
+    let sourceElement;
+    let targetElement;
+    beforeEach(() => {
+      // Create source element with multiple child elements
+      sourceElement = document.createElement('wix-interact-element');
+      sourceElement.innerHTML = `
+        <div class="first-child">First Child</div>
+        <button class="trigger-button">Click Me</button>
+        <div class="other-element">Other</div>
+        <div class="list-container">
+          <div class="list-item">Item 1</div>
+          <div class="list-item">Item 2</div>
+          <div class="list-item">Item 3</div>
+        </div>
+      `;
+
+      // Create target element with multiple child elements
+      targetElement = document.createElement('wix-interact-element');
+      targetElement.innerHTML = `
+        <div class="first-child">Target First</div>
+        <div class="animation-target">Animation Target</div>
+        <div class="overlay">Overlay</div>
+        <div class="nested">
+          <span class="deep-target">Deep Target</span>
+        </div>
+      `;
+    });
+    describe('basic selector functionality', () => {
+      it('should use selector instead of firstElementChild for source', () => {
+        const config = {
+          effects: {
+            'test-effect': {
+              keyframeEffect: {
+                name: 'test',
+                keyframes: [{
+                  opacity: '0'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'selector-source',
+            selector: '.trigger-button',
+            trigger: 'click',
+            effects: [{
+              key: 'selector-target',
+              effectId: 'test-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+        const triggerButton = sourceElement.querySelector('.trigger-button');
+        const firstChild = sourceElement.querySelector('.first-child');
+        const triggerSpy = jest.spyOn(triggerButton, 'addEventListener');
+        const firstChildSpy = jest.spyOn(firstChild, 'addEventListener');
+        add(sourceElement, 'selector-source');
+        add(targetElement, 'selector-target');
+
+        // Should add event listener to the selected element, not firstElementChild
+        expect(triggerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(firstChildSpy).not.toHaveBeenCalled();
+      });
+      it('should use selector instead of firstElementChild for target', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const config = {
+          effects: {
+            'test-effect': {
+              keyframeEffect: {
+                name: 'test',
+                keyframes: [{
+                  opacity: '0'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'selector-source',
+            trigger: 'click',
+            effects: [{
+              key: 'selector-target',
+              selector: '.animation-target',
+              effectId: 'test-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+        add(sourceElement, 'selector-source');
+        add(targetElement, 'selector-target');
+        const animationTarget = targetElement.querySelector('.animation-target');
+
+        // Should create animation on the selected element, not firstElementChild
+        expect(getWebAnimation).toHaveBeenCalledWith(animationTarget, expect.any(Object), undefined, {
+          reducedMotion: false
+        });
+      });
+      it('should fall back to firstElementChild when no selector is provided', () => {
+        const config = {
+          effects: {
+            'test-effect': {
+              keyframeEffect: {
+                name: 'test',
+                keyframes: [{
+                  opacity: '0'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'fallback-source',
+            trigger: 'click',
+            effects: [{
+              key: 'fallback-target',
+              effectId: 'test-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+        const firstChild = sourceElement.querySelector('.first-child');
+        const firstChildSpy = jest.spyOn(firstChild, 'addEventListener');
+        add(sourceElement, 'fallback-source');
+        add(targetElement, 'fallback-target');
+
+        // Should fall back to firstElementChild
+        expect(firstChildSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+      });
+    });
+    describe('selector with listContainer', () => {
+      it('should use selector within listContainer items', () => {
+        const config = {
+          effects: {
+            'list-effect': {
+              keyframeEffect: {
+                name: 'list-test',
+                keyframes: [{
+                  transform: 'scale(1)'
+                }, {
+                  transform: 'scale(1.1)'
+                }]
+              },
+              duration: 200
+            }
+          },
+          interactions: [{
+            key: 'list-source',
+            listContainer: '.list-container',
+            selector: '.list-item',
+            trigger: 'hover',
+            effects: [{
+              listContainer: '.list-container',
+              selector: '.list-item',
+              effectId: 'list-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+
+        // Set up spies before adding interactions
+        const listItems = Array.from(sourceElement.querySelectorAll('.list-item'));
+        const spies = listItems.map(item => jest.spyOn(item, 'addEventListener'));
+        add(sourceElement, 'list-source');
+
+        // Should add event listeners to each list item
+        spies.forEach(spy => {
+          expect(spy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        });
+      });
+      it('should handle listContainer without selector (all children)', () => {
+        var _sourceElement$queryS;
+        const config = {
+          effects: {
+            'container-effect': {
+              keyframeEffect: {
+                name: 'container-test',
+                keyframes: [{
+                  opacity: '0.5'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 150
+            }
+          },
+          interactions: [{
+            key: 'container-source',
+            listContainer: '.list-container',
+            trigger: 'click',
+            effects: [{
+              listContainer: '.list-container',
+              effectId: 'container-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+
+        // Set up spies before adding interactions
+        const containerChildren = Array.from(((_sourceElement$queryS = sourceElement.querySelector('.list-container')) == null ? void 0 : _sourceElement$queryS.children) || []);
+        const spies = containerChildren.map(child => jest.spyOn(child, 'addEventListener'));
+        add(sourceElement, 'container-source');
+
+        // Should add event listeners to all children of the container
+        spies.forEach(spy => {
+          expect(spy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        });
+      });
+    });
+    describe('selector error handling', () => {
+      let consoleSpy;
+      beforeEach(() => {
+        consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      });
+      afterEach(() => {
+        consoleSpy.mockRestore();
+      });
+      it('should warn when selector does not match any elements', () => {
+        const config = {
+          effects: {
+            'test-effect': {
+              keyframeEffect: {
+                name: 'test',
+                keyframes: [{
+                  opacity: '0'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'invalid-source',
+            selector: '.non-existent-element',
+            trigger: 'click',
+            effects: [{
+              key: 'invalid-target',
+              effectId: 'test-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+        add(sourceElement, 'invalid-source');
+        add(targetElement, 'invalid-target');
+        expect(consoleSpy).toHaveBeenCalledWith('WixInteract: No element found for selector ".non-existent-element"');
+      });
+      it('should warn when listContainer selector does not match', () => {
+        const config = {
+          effects: {
+            'test-effect': {
+              keyframeEffect: {
+                name: 'test',
+                keyframes: [{
+                  opacity: '0'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'invalid-container-source',
+            listContainer: '.non-existent-container',
+            trigger: 'click',
+            effects: [{
+              key: 'invalid-container-target',
+              effectId: 'test-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+        add(sourceElement, 'invalid-container-source');
+        add(targetElement, 'invalid-container-target');
+        expect(consoleSpy).toHaveBeenCalledWith('WixInteract: No container found for list container ".non-existent-container"');
+      });
+      it('should gracefully handle invalid selectors without breaking interactions', () => {
+        const config = {
+          effects: {
+            'valid-effect': {
+              keyframeEffect: {
+                name: 'valid',
+                keyframes: [{
+                  opacity: '0'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'mixed-source',
+            selector: '.non-existent',
+            trigger: 'click',
+            effects: [{
+              key: 'mixed-target',
+              effectId: 'valid-effect'
+            }]
+          }, {
+            key: 'valid-source',
+            selector: '.trigger-button',
+            trigger: 'click',
+            effects: [{
+              key: 'valid-target',
+              effectId: 'valid-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+
+        // Set up spy before adding interactions
+        const triggerButton = sourceElement.querySelector('.trigger-button');
+        const spy = jest.spyOn(triggerButton, 'addEventListener');
+
+        // This should not throw and should allow other interactions to work
+        expect(() => {
+          add(sourceElement, 'mixed-source');
+          add(sourceElement, 'valid-source');
+          add(targetElement, 'mixed-target');
+          add(targetElement, 'valid-target');
+        }).not.toThrow();
+
+        // Valid interaction should still work
+        expect(spy).toHaveBeenCalled();
+      });
+    });
+    describe('complex selector scenarios', () => {
+      it('should handle nested selectors', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const config = {
+          effects: {
+            'nested-effect': {
+              keyframeEffect: {
+                name: 'nested',
+                keyframes: [{
+                  color: 'black'
+                }, {
+                  color: 'blue'
+                }]
+              },
+              duration: 200
+            }
+          },
+          interactions: [{
+            key: 'nested-source',
+            selector: '.other-element',
+            trigger: 'click',
+            effects: [{
+              key: 'nested-target',
+              selector: '.nested .deep-target',
+              effectId: 'nested-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+        const addEventListenerSpy = jest.spyOn(sourceElement.querySelector('.other-element'), 'addEventListener');
+        add(sourceElement, 'nested-source');
+        add(targetElement, 'nested-target');
+        const deepTarget = targetElement.querySelector('.nested .deep-target');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(getWebAnimation).toHaveBeenCalledWith(deepTarget, expect.any(Object), undefined, {
+          reducedMotion: false
+        });
+      });
+      it('should handle attribute selectors', () => {
+        // Add data attributes to test elements
+        const buttonWithData = sourceElement.querySelector('.trigger-button');
+        buttonWithData.setAttribute('data-interactive', 'true');
+        buttonWithData.setAttribute('data-category', 'primary');
+        const config = {
+          effects: {
+            'attr-effect': {
+              keyframeEffect: {
+                name: 'attr',
+                keyframes: [{
+                  backgroundColor: 'white'
+                }, {
+                  backgroundColor: 'lightblue'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'attr-source',
+            selector: '[data-interactive="true"][data-category="primary"]',
+            trigger: 'click',
+            effects: [{
+              key: 'attr-target',
+              selector: '[class*="animation"]',
+              effectId: 'attr-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+
+        // Set up spy before adding interactions
+        const spy = jest.spyOn(buttonWithData, 'addEventListener');
+        add(sourceElement, 'attr-source');
+        add(targetElement, 'attr-target');
+        expect(spy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+      });
+    });
+    describe('selector inheritance and priority', () => {
+      it('should not inherit selector from interaction to effect', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const config = {
+          effects: {
+            'inherit-effect': {
+              keyframeEffect: {
+                name: 'inherit',
+                keyframes: [{
+                  opacity: '0'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'inherit-source',
+            selector: '.trigger-button',
+            // Interaction has selector
+            trigger: 'click',
+            effects: [{
+              key: 'inherit-target',
+              // Effect has no selector - should use firstElementChild, not inherit
+              effectId: 'inherit-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+        add(sourceElement, 'inherit-source');
+        add(targetElement, 'inherit-target');
+
+        // Effect should target firstElementChild, not the interaction's selector
+        const targetFirstChild = targetElement.firstElementChild;
+        expect(getWebAnimation).toHaveBeenCalledWith(targetFirstChild, expect.any(Object), undefined, {
+          reducedMotion: false
+        });
+      });
+    });
+    describe('selector cleanup', () => {
+      it('should clean up selector-based interactions on remove', () => {
+        const config = {
+          effects: {
+            'cleanup-effect': {
+              keyframeEffect: {
+                name: 'cleanup',
+                keyframes: [{
+                  opacity: '0'
+                }, {
+                  opacity: '1'
+                }]
+              },
+              duration: 300
+            }
+          },
+          interactions: [{
+            key: 'cleanup-source',
+            selector: '.trigger-button',
+            trigger: 'click',
+            effects: [{
+              key: 'cleanup-target',
+              selector: '.animation-target',
+              effectId: 'cleanup-effect'
+            }]
+          }]
+        };
+        Interact.create(config);
+        const triggerButton = sourceElement.querySelector('.trigger-button');
+        const removeEventListenerSpy = jest.spyOn(triggerButton, 'removeEventListener');
+        add(sourceElement, 'cleanup-source');
+        add(targetElement, 'cleanup-target');
+        remove('cleanup-source');
+
+        // Should remove event listeners from the selected element
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function));
+      });
+    });
+  });
 });
 //# sourceMappingURL=interact.spec.js.map