@wix/interact 1.74.0 → 1.76.0

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

@@ -1,6 +1,8 @@
 "use strict";
 
-var _interact = require("../interact");
+var _Interact = require("../core/Interact");
+var _add = require("../core/add");
+var _remove = require("../core/remove");
 var _utilities = require("../handlers/utilities");
 // Mock @wix/motion module
 jest.mock('@wix/motion', () => {
@@ -41,75 +43,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',
@@ -119,19 +121,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'
       }]
     }],
@@ -145,7 +177,7 @@ describe('interact', () => {
         duration: 1200
       },
       'logo-arc-in-with-target': {
-        target: '#logo-hover',
+        key: 'logo-hover',
         namedEffect: {
           type: 'ArcIn',
           direction: 'right',
@@ -269,7 +301,8 @@ describe('interact', () => {
     window.CSSStyleSheet = class CSSStyleSheet {
       constructor(_) {
         return {
-          replace: jest.fn()
+          replace: jest.fn(),
+          insertRule: jest.fn()
         };
       }
     };
@@ -319,12 +352,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: {
@@ -334,7 +367,7 @@ describe('interact', () => {
           },
           duration: 800
         }, {
-          target: '#cascade-target',
+          key: 'cascade-target',
           effectId: 'default-effect',
           conditions: ['mobile'],
           namedEffect: {
@@ -358,27 +391,29 @@ describe('interact', () => {
   }
   afterEach(() => {
     jest.clearAllMocks();
-    (0, _interact.remove)('#logo-entrance');
-    (0, _interact.remove)('#logo-loop');
-    (0, _interact.remove)('#logo-animation-end');
-    (0, _interact.remove)('#logo-mouse');
-    (0, _interact.remove)('#logo-click');
-    (0, _interact.remove)('#logo-hover');
-    (0, _interact.remove)('#logo-scroll');
+    (0, _remove.remove)('logo-entrance');
+    (0, _remove.remove)('logo-loop');
+    (0, _remove.remove)('logo-animation-end');
+    (0, _remove.remove)('logo-mouse');
+    (0, _remove.remove)('logo-click');
+    (0, _remove.remove)('logo-hover');
+    (0, _remove.remove)('logo-scroll');
     // Clean up cascading test elements
-    (0, _interact.remove)('#cascade-source');
-    (0, _interact.remove)('#cascade-target');
-    (0, _interact.remove)('#cascade-target-1');
-    (0, _interact.remove)('#cascade-target-2');
-    (0, _interact.remove)('#multi-source-1');
-    (0, _interact.remove)('#multi-source-2');
+    (0, _remove.remove)('cascade-source');
+    (0, _remove.remove)('cascade-target');
+    (0, _remove.remove)('cascade-target-1');
+    (0, _remove.remove)('cascade-target-2');
+    (0, _remove.remove)('multi-source-1');
+    (0, _remove.remove)('multi-source-2');
     // Clear Interact instances to ensure test isolation
-    _interact.Interact.instances.length = 0;
-    _interact.Interact.elementCache.clear();
+    _Interact.Interact.instances.length = 0;
+    _Interact.Interact.elementCache.clear();
+    // Reset forceReducedMotion to default
+    _Interact.Interact.forceReducedMotion = false;
   });
   describe('init Interact', () => {
     it('should initialize with valid config', () => {
-      _interact.Interact.create({});
+      _Interact.Interact.create({});
       expect(customElements.get('wix-interact-element')).toBeDefined();
     });
   });
@@ -387,13 +422,13 @@ describe('interact', () => {
       const {
         getWebAnimation
       } = require('@wix/motion');
-      _interact.Interact.forceReducedMotion = true;
-      _interact.Interact.create({
+      _Interact.Interact.forceReducedMotion = true;
+      _Interact.Interact.create({
         interactions: [{
           trigger: 'hover',
-          source: '#logo-hover',
+          key: 'logo-hover',
           effects: [{
-            target: '#logo-hover',
+            key: 'logo-hover',
             effectId: 'logo-arc-in'
           }]
         }],
@@ -411,17 +446,17 @@ describe('interact', () => {
       element = document.createElement('wix-interact-element');
       const div = document.createElement('div');
       element.append(div);
-      (0, _interact.add)(element, '#logo-hover');
+      (0, _add.add)(element, 'logo-hover');
       expect(getWebAnimation).toHaveBeenCalledWith(div, expect.any(Object), undefined, {
         reducedMotion: true
       });
-      _interact.Interact.forceReducedMotion = false;
-      (0, _interact.remove)('#logo-hover');
+      _Interact.Interact.forceReducedMotion = false;
+      (0, _remove.remove)('logo-hover');
     });
   });
   describe('add interaction', () => {
     beforeEach(() => {
-      _interact.Interact.create(mockConfig);
+      _Interact.Interact.create(mockConfig);
     });
     describe('hover', () => {
       it('should add handler for hover trigger with alternate type', () => {
@@ -432,7 +467,7 @@ describe('interact', () => {
         const div = document.createElement('div');
         element.append(div);
         const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
-        (0, _interact.add)(element, '#logo-hover');
+        (0, _add.add)(element, 'logo-hover');
         expect(addEventListenerSpy).toHaveBeenCalledTimes(4);
         expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.objectContaining({
           passive: true
@@ -458,7 +493,7 @@ describe('interact', () => {
         const div = document.createElement('div');
         element.append(div);
         const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
-        (0, _interact.add)(element, '#logo-click');
+        (0, _add.add)(element, 'logo-click');
         expect(addEventListenerSpy).toHaveBeenCalledTimes(2);
         expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
           passive: true
@@ -473,7 +508,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        (0, _interact.add)(element, '#logo-entrance');
+        (0, _add.add)(element, 'logo-entrance');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object), undefined, {
           reducedMotion: false
@@ -485,14 +520,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);
-        (0, _interact.add)(elementClick, '#logo-click');
-        (0, _interact.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);
+        (0, _add.add)(elementClick, 'logo-click');
+        (0, _add.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
         });
       });
@@ -505,7 +551,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        (0, _interact.add)(element, '#logo-loop');
+        (0, _add.add)(element, 'logo-loop');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object), undefined, {
           reducedMotion: false
@@ -520,7 +566,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        (0, _interact.add)(element, '#logo-animation-end');
+        (0, _add.add)(element, 'logo-animation-end');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object), undefined, {
           reducedMotion: false
@@ -543,7 +589,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        (0, _interact.add)(element, '#logo-mouse');
+        (0, _add.add)(element, 'logo-mouse');
         expect(getScrubScene).toHaveBeenCalledTimes(1);
         expect(getScrubScene).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-track-mouse'])), expect.objectContaining({
           trigger: 'pointer-move'
@@ -559,7 +605,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        (0, _interact.add)(element, '#logo-scroll');
+        (0, _add.add)(element, 'logo-scroll');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
           trigger: 'view-progress'
@@ -582,7 +628,7 @@ describe('interact', () => {
         element = document.createElement('wix-interact-element');
         const div = document.createElement('div');
         element.append(div);
-        (0, _interact.add)(element, '#logo-scroll');
+        (0, _add.add)(element, 'logo-scroll');
         expect(getScrubScene).toHaveBeenCalledTimes(1);
         expect(getScrubScene).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
           trigger: 'view-progress'
@@ -592,23 +638,133 @@ 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');
+        (0, _add.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);
+        (0, _add.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');
+        (0, _add.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');
+        (0, _add.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);
+        (0, _add.add)(element, 'logo-scroll-container');
+        expect(getWebAnimation).toHaveBeenCalledTimes(0);
+        (0, _add.add)(targetElement, 'logo-scroll-items');
+        expect(getWebAnimation).toHaveBeenCalledTimes(2);
+        expect(getWebAnimation).toHaveBeenCalledWith(li, expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
+          trigger: 'view-progress'
+        }));
+        expect(getWebAnimation).toHaveBeenCalledWith(li2, expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
+          trigger: 'view-progress'
+        }));
+        const li3 = document.createElement('li');
+        ul.append(li3);
+        (0, _add.addListItems)(targetElement, 'logo-scroll-items', '#logo-scroll-list', [li3]);
+        expect(getWebAnimation).toHaveBeenCalledTimes(3);
+        expect(getWebAnimation).toHaveBeenCalledWith(li3, expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
+          trigger: 'view-progress'
+        }));
+      });
+    });
   });
   describe('remove interaction', () => {
     beforeEach(() => {
-      _interact.Interact.create(mockConfig);
+      _Interact.Interact.create(mockConfig);
     });
     it('should remove event listeners', () => {
       element = document.createElement('wix-interact-element');
       const div = document.createElement('div');
       element.append(div);
       const removeEventListenerSpy = jest.spyOn(div, 'removeEventListener');
-      (0, _interact.add)(element, '#logo-click');
-      (0, _interact.remove)('#logo-click');
+      (0, _add.add)(element, 'logo-click');
+      (0, _remove.remove)('logo-click');
       expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
       expect(removeEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function));
     });
     it('should do nothing if key does not exist', () => {
-      expect(() => (0, _interact.remove)('non-existent-key')).not.toThrow();
+      expect(() => (0, _remove.remove)('non-existent-key')).not.toThrow();
     });
     it('should cleanup pointer effects', () => {
       const {
@@ -622,8 +778,8 @@ describe('interact', () => {
       element = document.createElement('wix-interact-element');
       const div = document.createElement('div');
       element.append(div);
-      (0, _interact.add)(element, '#logo-mouse');
-      (0, _interact.remove)('#logo-mouse');
+      (0, _add.add)(element, 'logo-mouse');
+      (0, _remove.remove)('logo-mouse');
       expect(pointerInstance.destroy).toHaveBeenCalledTimes(1);
     });
   });
@@ -634,7 +790,7 @@ describe('interact', () => {
           getWebAnimation
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
-        _interact.Interact.create(config);
+        _Interact.Interact.create(config);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
@@ -642,8 +798,8 @@ describe('interact', () => {
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         const addEventListenerSpy = jest.spyOn(sourceDiv, 'addEventListener');
-        (0, _interact.add)(sourceElement, '#cascade-source');
-        (0, _interact.add)(targetElement, '#cascade-target');
+        (0, _add.add)(sourceElement, 'cascade-source');
+        (0, _add.add)(targetElement, 'cascade-target');
         expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
         expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
           passive: true
@@ -666,15 +822,15 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, []); // No matching conditions
 
-        _interact.Interact.create(config);
+        _Interact.Interact.create(config);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        (0, _interact.add)(sourceElement, '#cascade-source');
-        (0, _interact.add)(targetElement, '#cascade-target');
+        (0, _add.add)(sourceElement, 'cascade-source');
+        (0, _add.add)(targetElement, 'cascade-target');
 
         // Should create animation with default effect
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -692,15 +848,15 @@ describe('interact', () => {
           getWebAnimation
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['max-width: 767px']);
-        _interact.Interact.create(config);
+        _Interact.Interact.create(config);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        (0, _interact.add)(sourceElement, '#cascade-source');
-        (0, _interact.add)(targetElement, '#cascade-target');
+        (0, _add.add)(sourceElement, 'cascade-source');
+        (0, _add.add)(targetElement, 'cascade-target');
 
         // Should create animation with mobile effect
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -720,7 +876,7 @@ describe('interact', () => {
           getWebAnimation
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
-        _interact.Interact.create(config);
+        _Interact.Interact.create(config);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
@@ -729,9 +885,9 @@ describe('interact', () => {
         targetElement.append(targetDiv);
 
         // Add source first
-        (0, _interact.add)(sourceElement, '#cascade-source');
+        (0, _add.add)(sourceElement, 'cascade-source');
         // Add target second
-        (0, _interact.add)(targetElement, '#cascade-target');
+        (0, _add.add)(targetElement, 'cascade-target');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
           namedEffect: expect.objectContaining({
@@ -746,7 +902,7 @@ describe('interact', () => {
           getWebAnimation
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
-        _interact.Interact.create(config);
+        _Interact.Interact.create(config);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
@@ -755,9 +911,9 @@ describe('interact', () => {
         targetElement.append(targetDiv);
 
         // Add target first
-        (0, _interact.add)(targetElement, '#cascade-target');
+        (0, _add.add)(targetElement, 'cascade-target');
         // Add source second
-        (0, _interact.add)(sourceElement, '#cascade-source');
+        (0, _add.add)(sourceElement, 'cascade-source');
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
         expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
           namedEffect: expect.objectContaining({
@@ -786,13 +942,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']
             }]
@@ -817,7 +973,7 @@ describe('interact', () => {
           }
         };
         mockMatchMedia(['min-width: 1024px']); // Only desktop matches
-        _interact.Interact.create(complexConfig);
+        _Interact.Interact.create(complexConfig);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
@@ -827,9 +983,9 @@ describe('interact', () => {
         const target2Element = document.createElement('wix-interact-element');
         const target2Div = document.createElement('div');
         target2Element.append(target2Div);
-        (0, _interact.add)(sourceElement, '#multi-source-1');
-        (0, _interact.add)(target1Element, '#cascade-target-1');
-        (0, _interact.add)(target2Element, '#cascade-target-2');
+        (0, _add.add)(sourceElement, 'multi-source-1');
+        (0, _add.add)(target1Element, 'cascade-target-1');
+        (0, _add.add)(target2Element, 'cascade-target-2');
 
         // Only desktop effect should be applied (mobile condition doesn't match)
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -867,12 +1023,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']
             }]
@@ -891,15 +1047,15 @@ describe('interact', () => {
 
         // Both conditions match
         mockMatchMedia(['min-width: 1024px', 'min-resolution: 2dppx']);
-        _interact.Interact.create(multiConditionConfig);
+        _Interact.Interact.create(multiConditionConfig);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        (0, _interact.add)(sourceElement, '#cascade-source');
-        (0, _interact.add)(targetElement, '#cascade-target');
+        (0, _add.add)(sourceElement, 'cascade-source');
+        (0, _add.add)(targetElement, 'cascade-target');
 
         // Premium effect should be applied since both conditions match
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -926,12 +1082,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']
             }]
@@ -947,15 +1103,15 @@ describe('interact', () => {
           }
         };
         mockMatchMedia(['min-width: 1024px']);
-        _interact.Interact.create(configWithMissingCondition);
+        _Interact.Interact.create(configWithMissingCondition);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        (0, _interact.add)(sourceElement, '#cascade-source');
-        (0, _interact.add)(targetElement, '#cascade-target');
+        (0, _add.add)(sourceElement, 'cascade-source');
+        (0, _add.add)(targetElement, 'cascade-target');
 
         // Should fall back to default effect since condition doesn't exist
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -975,9 +1131,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: []
             }]
@@ -994,15 +1150,15 @@ describe('interact', () => {
           }
         };
         mockMatchMedia([]);
-        _interact.Interact.create(configWithEmptyConditions);
+        _Interact.Interact.create(configWithEmptyConditions);
         const sourceElement = document.createElement('wix-interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
         const targetElement = document.createElement('wix-interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
-        (0, _interact.add)(sourceElement, '#cascade-source');
-        (0, _interact.add)(targetElement, '#cascade-target');
+        (0, _add.add)(sourceElement, 'cascade-source');
+        (0, _add.add)(targetElement, 'cascade-target');
 
         // Effect should be applied since empty conditions array should always match
         expect(getWebAnimation).toHaveBeenCalledTimes(1);
@@ -1016,5 +1172,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.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');
+        (0, _add.add)(sourceElement, 'selector-source');
+        (0, _add.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.Interact.create(config);
+        (0, _add.add)(sourceElement, 'selector-source');
+        (0, _add.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.Interact.create(config);
+        const firstChild = sourceElement.querySelector('.first-child');
+        const firstChildSpy = jest.spyOn(firstChild, 'addEventListener');
+        (0, _add.add)(sourceElement, 'fallback-source');
+        (0, _add.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.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'));
+        (0, _add.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.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'));
+        (0, _add.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.Interact.create(config);
+        (0, _add.add)(sourceElement, 'invalid-source');
+        (0, _add.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.Interact.create(config);
+        (0, _add.add)(sourceElement, 'invalid-container-source');
+        (0, _add.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.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(() => {
+          (0, _add.add)(sourceElement, 'mixed-source');
+          (0, _add.add)(sourceElement, 'valid-source');
+          (0, _add.add)(targetElement, 'mixed-target');
+          (0, _add.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.Interact.create(config);
+        const addEventListenerSpy = jest.spyOn(sourceElement.querySelector('.other-element'), 'addEventListener');
+        (0, _add.add)(sourceElement, 'nested-source');
+        (0, _add.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.Interact.create(config);
+
+        // Set up spy before adding interactions
+        const spy = jest.spyOn(buttonWithData, 'addEventListener');
+        (0, _add.add)(sourceElement, 'attr-source');
+        (0, _add.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.Interact.create(config);
+        (0, _add.add)(sourceElement, 'inherit-source');
+        (0, _add.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.Interact.create(config);
+        const triggerButton = sourceElement.querySelector('.trigger-button');
+        const removeEventListenerSpy = jest.spyOn(triggerButton, 'removeEventListener');
+        (0, _add.add)(sourceElement, 'cleanup-source');
+        (0, _add.add)(targetElement, 'cleanup-target');
+        (0, _remove.remove)('cleanup-source');
+
+        // Should remove event listeners from the selected element
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function));
+      });
+    });
+  });
 });
 //# sourceMappingURL=interact.spec.js.map