@wix/interact 1.91.0 → 1.93.0

package/dist/cjs/InteractElement.js

@@ -53,6 +53,7 @@ function getInteractElement() {
         document.adoptedStyleSheets.splice(index, 1);
       }
       this._observers = new WeakMap();
+      this.sheet = null;
       this.connected = false;
     }
     connect(key) {

package/dist/cjs/InteractElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["_add","require","_remove","INTERACT_EFFECT_DATA_ATTR","exports","getInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","InteractElement","HTMLElement","constructor","_defineProperty2","default","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","add","delete","e","connectedCallback","connect","disconnectedCallback","disconnect","key","dataset","interactKey","remove","index","document","adoptedStyleSheets","indexOf","splice","console","warn","renderStyle","cssRules","CSSStyleSheet","replace","join","push","position","length","cssRule","insertRule","error","toggleEffect","effectId","method","item","has","clear","_this$dataset$INTERAC","currentEffects","Set","split","Array","from","getActiveEffects","effects","map","effect","raw","trimmed","trim","watchChildList","listContainer","list","querySelector","observer","get","MutationObserver","_childListChangeHandler","bind","set","observe","childList","entries","removedElements","addedElements","forEach","entry","removedNodes","el","addedNodes","removeListItems","addListItems"],"sources":["../../src/InteractElement.ts"],"sourcesContent":["import type { StateParams } from './types';\nimport { add, addListItems } from './core/add';\nimport { remove, removeListItems } from './core/remove';\n\nexport const INTERACT_EFFECT_DATA_ATTR = 'interactEffect';\n\nexport function getInteractElement() {\n  let checkedForLegacyStateSyntax = false;\n  let isLegacyStateSyntax = false;\n\n  return class InteractElement extends HTMLElement {\n    _internals: (ElementInternals & { states: Set<string> }) | null;\n    connected: boolean;\n    sheet: CSSStyleSheet | null;\n    _observers: WeakMap<HTMLElement, MutationObserver>;\n\n    constructor() {\n      super();\n\n      this.connected = false;\n      this.sheet = null;\n      this._observers = new WeakMap();\n\n      if (this.attachInternals) {\n        this._internals = this.attachInternals() as ElementInternals & {\n          states: Set<string>;\n        };\n\n        if (!checkedForLegacyStateSyntax) {\n          checkedForLegacyStateSyntax = true;\n\n          try {\n            this._internals.states.add('test');\n            this._internals.states.delete('test');\n          } catch (e) {\n            isLegacyStateSyntax = true;\n          }\n        }\n      } else {\n        checkedForLegacyStateSyntax = true; // custom states not supported - skip syntax check\n        this._internals = null;\n      }\n    }\n    connectedCallback() {\n      this.connect();\n    }\n\n    disconnectedCallback() {\n      this.disconnect();\n    }\n\n    disconnect() {\n      const key = this.dataset.interactKey;\n\n      if (key) {\n        remove(key);\n      }\n\n      if (this.sheet) {\n        const index = document.adoptedStyleSheets.indexOf(this.sheet);\n        document.adoptedStyleSheets.splice(index, 1);\n      }\n\n      this._observers = new WeakMap();\n\n      this.connected = false;\n    }\n\n    connect(key?: string) {\n      if (this.connected) {\n        return;\n      }\n\n      key = key || this.dataset.interactKey;\n\n      if (!key) {\n        console.warn('InteractElement: No key provided');\n        return;\n      }\n\n      this.connected = add(this, key);\n    }\n\n    renderStyle(cssRules: string[]) {\n      if (!this.sheet) {\n        this.sheet = new CSSStyleSheet();\n        void this.sheet.replace(cssRules.join('\\n'));\n\n        document.adoptedStyleSheets.push(this.sheet);\n      } else {\n        let position = this.sheet.cssRules.length;\n\n        for (const cssRule of cssRules) {\n          try {\n            this.sheet.insertRule(cssRule, position);\n            position++;\n          } catch (e) {\n            console.error(e);\n          }\n        }\n      }\n    }\n\n    toggleEffect(\n      effectId: string,\n      method: StateParams['method'],\n      item?: HTMLElement | null,\n    ) {\n      if (item === null) {\n        return;\n      }\n      if (isLegacyStateSyntax) {\n        effectId = `--${effectId}`;\n      }\n\n      if (this._internals && !item) {\n        if (method === 'toggle') {\n          this._internals.states.has(effectId)\n            ? this._internals.states.delete(effectId)\n            : this._internals.states.add(effectId);\n        } else if (method === 'add') {\n          this._internals.states.add(effectId);\n        } else if (method === 'remove') {\n          this._internals.states.delete(effectId);\n        } else if (method === 'clear') {\n          this._internals.states.clear();\n        }\n      } else {\n        const currentEffects = new Set(\n          this.dataset[INTERACT_EFFECT_DATA_ATTR]?.split(' ') || [],\n        );\n\n        if (method === 'toggle') {\n          currentEffects.has(effectId)\n            ? currentEffects.delete(effectId)\n            : currentEffects.add(effectId);\n        } else if (method === 'add') {\n          currentEffects.add(effectId);\n        } else if (method === 'remove') {\n          currentEffects.delete(effectId);\n        } else if (method === 'clear') {\n          currentEffects.clear();\n        }\n\n        (item || this).dataset[INTERACT_EFFECT_DATA_ATTR] =\n          Array.from(currentEffects).join(' ');\n      }\n    }\n\n    getActiveEffects(): string[] {\n      if (this._internals) {\n        const effects = Array.from(this._internals.states);\n        return isLegacyStateSyntax\n          ? effects.map((effect) => effect.replace(/^--/g, ''))\n          : effects;\n      }\n\n      const raw = this.dataset[INTERACT_EFFECT_DATA_ATTR] || '';\n      const trimmed = raw.trim();\n      return trimmed ? trimmed.split(/\\s+/) : [];\n    }\n\n    watchChildList(listContainer: string): void {\n      const list = this.querySelector(listContainer);\n\n      if (list) {\n        // TODO: we can probably improve this and use less observers, this impl. uses one per container element\n        let observer = this._observers.get(list as HTMLElement);\n\n        if (!observer) {\n          observer = new MutationObserver(\n            this._childListChangeHandler.bind(this, listContainer),\n          );\n\n          this._observers.set(list as HTMLElement, observer);\n\n          observer.observe(list as HTMLElement, { childList: true });\n        }\n      }\n    }\n\n    _childListChangeHandler(listContainer: string, entries: MutationRecord[]) {\n      const key = this.dataset.interactKey;\n      const removedElements: HTMLElement[] = [];\n      const addedElements: HTMLElement[] = [];\n\n      entries.forEach((entry) => {\n        entry.removedNodes.forEach((el) => {\n          if (el instanceof HTMLElement) {\n            removedElements.push(el);\n          }\n        });\n\n        entry.addedNodes.forEach((el) => {\n          if (el instanceof HTMLElement) {\n            addedElements.push(el);\n          }\n        });\n      });\n\n      removeListItems(removedElements);\n      key && addListItems(this, key, listContainer, addedElements);\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_add","require","_remove","INTERACT_EFFECT_DATA_ATTR","exports","getInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","InteractElement","HTMLElement","constructor","_defineProperty2","default","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","add","delete","e","connectedCallback","connect","disconnectedCallback","disconnect","key","dataset","interactKey","remove","index","document","adoptedStyleSheets","indexOf","splice","console","warn","renderStyle","cssRules","CSSStyleSheet","replace","join","push","position","length","cssRule","insertRule","error","toggleEffect","effectId","method","item","has","clear","_this$dataset$INTERAC","currentEffects","Set","split","Array","from","getActiveEffects","effects","map","effect","raw","trimmed","trim","watchChildList","listContainer","list","querySelector","observer","get","MutationObserver","_childListChangeHandler","bind","set","observe","childList","entries","removedElements","addedElements","forEach","entry","removedNodes","el","addedNodes","removeListItems","addListItems"],"sources":["../../src/InteractElement.ts"],"sourcesContent":["import type { StateParams } from './types';\nimport { add, addListItems } from './core/add';\nimport { remove, removeListItems } from './core/remove';\n\nexport const INTERACT_EFFECT_DATA_ATTR = 'interactEffect';\n\nexport function getInteractElement() {\n  let checkedForLegacyStateSyntax = false;\n  let isLegacyStateSyntax = false;\n\n  return class InteractElement extends HTMLElement {\n    _internals: (ElementInternals & { states: Set<string> }) | null;\n    connected: boolean;\n    sheet: CSSStyleSheet | null;\n    _observers: WeakMap<HTMLElement, MutationObserver>;\n\n    constructor() {\n      super();\n\n      this.connected = false;\n      this.sheet = null;\n      this._observers = new WeakMap();\n\n      if (this.attachInternals) {\n        this._internals = this.attachInternals() as ElementInternals & {\n          states: Set<string>;\n        };\n\n        if (!checkedForLegacyStateSyntax) {\n          checkedForLegacyStateSyntax = true;\n\n          try {\n            this._internals.states.add('test');\n            this._internals.states.delete('test');\n          } catch (e) {\n            isLegacyStateSyntax = true;\n          }\n        }\n      } else {\n        checkedForLegacyStateSyntax = true; // custom states not supported - skip syntax check\n        this._internals = null;\n      }\n    }\n    connectedCallback() {\n      this.connect();\n    }\n\n    disconnectedCallback() {\n      this.disconnect();\n    }\n\n    disconnect() {\n      const key = this.dataset.interactKey;\n\n      if (key) {\n        remove(key);\n      }\n\n      if (this.sheet) {\n        const index = document.adoptedStyleSheets.indexOf(this.sheet);\n        document.adoptedStyleSheets.splice(index, 1);\n      }\n\n      this._observers = new WeakMap();\n      this.sheet = null;\n      this.connected = false;\n    }\n\n    connect(key?: string) {\n      if (this.connected) {\n        return;\n      }\n\n      key = key || this.dataset.interactKey;\n\n      if (!key) {\n        console.warn('InteractElement: No key provided');\n        return;\n      }\n\n      this.connected = add(this, key);\n    }\n\n    renderStyle(cssRules: string[]) {\n      if (!this.sheet) {\n        this.sheet = new CSSStyleSheet();\n        void this.sheet.replace(cssRules.join('\\n'));\n\n        document.adoptedStyleSheets.push(this.sheet);\n      } else {\n        let position = this.sheet.cssRules.length;\n\n        for (const cssRule of cssRules) {\n          try {\n            this.sheet.insertRule(cssRule, position);\n            position++;\n          } catch (e) {\n            console.error(e);\n          }\n        }\n      }\n    }\n\n    toggleEffect(\n      effectId: string,\n      method: StateParams['method'],\n      item?: HTMLElement | null,\n    ) {\n      if (item === null) {\n        return;\n      }\n      if (isLegacyStateSyntax) {\n        effectId = `--${effectId}`;\n      }\n\n      if (this._internals && !item) {\n        if (method === 'toggle') {\n          this._internals.states.has(effectId)\n            ? this._internals.states.delete(effectId)\n            : this._internals.states.add(effectId);\n        } else if (method === 'add') {\n          this._internals.states.add(effectId);\n        } else if (method === 'remove') {\n          this._internals.states.delete(effectId);\n        } else if (method === 'clear') {\n          this._internals.states.clear();\n        }\n      } else {\n        const currentEffects = new Set(\n          this.dataset[INTERACT_EFFECT_DATA_ATTR]?.split(' ') || [],\n        );\n\n        if (method === 'toggle') {\n          currentEffects.has(effectId)\n            ? currentEffects.delete(effectId)\n            : currentEffects.add(effectId);\n        } else if (method === 'add') {\n          currentEffects.add(effectId);\n        } else if (method === 'remove') {\n          currentEffects.delete(effectId);\n        } else if (method === 'clear') {\n          currentEffects.clear();\n        }\n\n        (item || this).dataset[INTERACT_EFFECT_DATA_ATTR] =\n          Array.from(currentEffects).join(' ');\n      }\n    }\n\n    getActiveEffects(): string[] {\n      if (this._internals) {\n        const effects = Array.from(this._internals.states);\n        return isLegacyStateSyntax\n          ? effects.map((effect) => effect.replace(/^--/g, ''))\n          : effects;\n      }\n\n      const raw = this.dataset[INTERACT_EFFECT_DATA_ATTR] || '';\n      const trimmed = raw.trim();\n      return trimmed ? trimmed.split(/\\s+/) : [];\n    }\n\n    watchChildList(listContainer: string): void {\n      const list = this.querySelector(listContainer);\n\n      if (list) {\n        // TODO: we can probably improve this and use less observers, this impl. uses one per container element\n        let observer = this._observers.get(list as HTMLElement);\n\n        if (!observer) {\n          observer = new MutationObserver(\n            this._childListChangeHandler.bind(this, listContainer),\n          );\n\n          this._observers.set(list as HTMLElement, observer);\n\n          observer.observe(list as HTMLElement, { childList: true });\n        }\n      }\n    }\n\n    _childListChangeHandler(listContainer: string, entries: MutationRecord[]) {\n      const key = this.dataset.interactKey;\n      const removedElements: HTMLElement[] = [];\n      const addedElements: HTMLElement[] = [];\n\n      entries.forEach((entry) => {\n        entry.removedNodes.forEach((el) => {\n          if (el instanceof HTMLElement) {\n            removedElements.push(el);\n          }\n        });\n\n        entry.addedNodes.forEach((el) => {\n          if (el instanceof HTMLElement) {\n            addedElements.push(el);\n          }\n        });\n      });\n\n      removeListItems(removedElements);\n      key && addListItems(this, key, listContainer, addedElements);\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,11 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _Interact = require("../core/Interact");
 var _add = require("../core/add");
 var _remove = require("../core/remove");
 var _utilities = require("../handlers/utilities");
 var _handlers = _interopRequireDefault(require("../handlers"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Mock @wix/motion module
 jest.mock('@wix/motion', () => {
   const mock = {
@@ -310,6 +313,15 @@ describe('interact', () => {
       }
     };
 
+    // Mock PointerEvent (not available in JSDOM)
+    window.PointerEvent = class PointerEvent extends MouseEvent {
+      constructor(type, params = {}) {
+        super(type, params);
+        (0, _defineProperty2.default)(this, "pointerType", void 0);
+        this.pointerType = params.pointerType || '';
+      }
+    };
+
     // Mock adoptedStyleSheets
     if (!document.adoptedStyleSheets) {
       document.adoptedStyleSheets = [];
@@ -396,8 +408,9 @@ describe('interact', () => {
     jest.clearAllMocks();
     // Clear Interact instances to ensure test isolation
     _Interact.Interact.destroy();
-    // Reset forceReducedMotion to default
+    // Reset static flags to default
     _Interact.Interact.forceReducedMotion = false;
+    _Interact.Interact.allowA11yTriggers = false;
   });
   describe('init Interact instance', () => {
     it('should initialize with valid config', () => {
@@ -1797,5 +1810,285 @@ describe('interact', () => {
       expect(spy).toHaveBeenCalledWith(pointerOptionsGetter);
     });
   });
+  describe('a11y - accessible triggers', () => {
+    let a11yElement;
+    function getA11yConfig(trigger, key) {
+      return {
+        interactions: [{
+          trigger,
+          key,
+          effects: [{
+            effectId: 'test-effect'
+          }]
+        }],
+        effects: {
+          'test-effect': {
+            namedEffect: {
+              type: 'BounceIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+    }
+    afterEach(() => {
+      _Interact.Interact.destroy();
+    });
+    describe('activate trigger', () => {
+      it('should add both click and keydown listeners', () => {
+        _Interact.Interact.create(getA11yConfig('activate', 'activate-div'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'activate-div');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+      it('should not double-invoke handler when Enter triggers both keydown and click', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const mockPlay = getWebAnimation().play;
+        mockPlay.mockClear();
+        _Interact.Interact.create(getA11yConfig('activate', 'activate-handler-test'));
+        a11yElement = document.createElement('interact-element');
+        const button = document.createElement('button');
+        a11yElement.append(button);
+        (0, _add.add)(a11yElement, 'activate-handler-test');
+
+        // Simulate browser behavior: Enter key triggers keydown AND synthesized click with no pointerType
+        button.dispatchEvent(new KeyboardEvent('keydown', {
+          code: 'Enter',
+          bubbles: true
+        }));
+        button.dispatchEvent(new MouseEvent('click', {
+          bubbles: true
+        }));
+        expect(mockPlay).toHaveBeenCalledTimes(1);
+      });
+    });
+    describe('interest trigger', () => {
+      it('should add focusin listener alongside mouseenter', () => {
+        _Interact.Interact.create(getA11yConfig('interest', 'interest-test'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'interest-test');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+    });
+    describe('click trigger with allowA11yTriggers flag', () => {
+      it('should NOT add keydown listener when flag is false', () => {
+        _Interact.Interact.create(getA11yConfig('click', 'click-no-flag'));
+        _Interact.Interact.setup({
+          allowA11yTriggers: false
+        });
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'click-no-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).not.toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+      it('should add keydown listener when flag is true', () => {
+        _Interact.Interact.setup({
+          allowA11yTriggers: true
+        });
+        _Interact.Interact.create(getA11yConfig('click', 'click-with-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'click-with-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+    });
+    describe('hover trigger with allowA11yTriggers flag', () => {
+      it('should NOT add focusin listener when flag is false', () => {
+        _Interact.Interact.setup({
+          allowA11yTriggers: false
+        });
+        _Interact.Interact.create(getA11yConfig('hover', 'hover-no-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'hover-no-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).not.toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+      it('should add focusin listener when flag is true', () => {
+        _Interact.Interact.setup({
+          allowA11yTriggers: true
+        });
+        _Interact.Interact.create(getA11yConfig('hover', 'hover-with-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'hover-with-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+    });
+  });
+  describe('selector condition type', () => {
+    it('should pass selectorCondition to handler when condition type is selector', async () => {
+      const config = {
+        conditions: {
+          active: {
+            type: 'selector',
+            predicate: '.active'
+          }
+        },
+        interactions: [{
+          trigger: 'click',
+          key: 'selector-test',
+          effects: [{
+            key: 'selector-test',
+            effectId: 'test-effect',
+            conditions: ['active']
+          }]
+        }],
+        effects: {
+          'test-effect': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+      _Interact.Interact.create(config);
+      const testElement = document.createElement('interact-element');
+      const div = document.createElement('div');
+      testElement.append(div);
+      (0, _add.add)(testElement, 'selector-test');
+
+      // The handler should have received selectorCondition
+      // We verify by checking the animation is created (condition doesn't block setup)
+      const {
+        getWebAnimation
+      } = await Promise.resolve().then(() => _interopRequireWildcard(require('@wix/motion')));
+      expect(getWebAnimation).toHaveBeenCalled();
+    });
+    it('should skip handler execution when element does not match selector condition', async () => {
+      const {
+        getWebAnimation
+      } = await Promise.resolve().then(() => _interopRequireWildcard(require('@wix/motion')));
+      const mockAnimation = {
+        play: jest.fn(),
+        cancel: jest.fn(),
+        onFinish: jest.fn(),
+        reverse: jest.fn(),
+        progress: jest.fn(),
+        playState: 'idle',
+        isCSS: false
+      };
+      getWebAnimation.mockReturnValue(mockAnimation);
+      const config = {
+        conditions: {
+          active: {
+            type: 'selector',
+            predicate: '.active'
+          }
+        },
+        interactions: [{
+          trigger: 'click',
+          key: 'selector-skip-test',
+          effects: [{
+            key: 'selector-skip-test',
+            effectId: 'skip-effect',
+            conditions: ['active']
+          }]
+        }],
+        effects: {
+          'skip-effect': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+      _Interact.Interact.create(config);
+      const testElement = document.createElement('interact-element');
+      const div = document.createElement('div');
+      // div does NOT have .active class
+      testElement.append(div);
+      (0, _add.add)(testElement, 'selector-skip-test');
+
+      // Simulate click - animation should NOT play because element doesn't match .active
+      // Must use PointerEvent with pointerType because click handler filters by pointerType
+      div.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        pointerType: 'mouse'
+      }));
+      expect(mockAnimation.play).not.toHaveBeenCalled();
+    });
+    it('should execute handler when element matches selector condition', async () => {
+      const {
+        getWebAnimation
+      } = await Promise.resolve().then(() => _interopRequireWildcard(require('@wix/motion')));
+      const mockAnimation = {
+        play: jest.fn(),
+        cancel: jest.fn(),
+        onFinish: jest.fn(),
+        reverse: jest.fn(),
+        progress: jest.fn(),
+        playState: 'idle',
+        isCSS: false
+      };
+      getWebAnimation.mockReturnValue(mockAnimation);
+      const config = {
+        conditions: {
+          active: {
+            type: 'selector',
+            predicate: '.active'
+          }
+        },
+        interactions: [{
+          trigger: 'click',
+          key: 'selector-match-test',
+          effects: [{
+            key: 'selector-match-test',
+            effectId: 'match-effect',
+            conditions: ['active']
+          }]
+        }],
+        effects: {
+          'match-effect': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+      _Interact.Interact.create(config);
+      const testElement = document.createElement('interact-element');
+      const div = document.createElement('div');
+      div.classList.add('active'); // div HAS .active class
+      testElement.append(div);
+      (0, _add.add)(testElement, 'selector-match-test');
+
+      // Simulate click - animation SHOULD play because element matches .active
+      // Must use PointerEvent with pointerType because click handler filters by pointerType
+      div.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        pointerType: 'mouse'
+      }));
+      expect(mockAnimation.play).toHaveBeenCalled();
+    });
+  });
 });
 //# sourceMappingURL=interact.spec.js.map