@wix/interact 1.84.0 → 1.86.0

package/README.md

@@ -56,10 +56,10 @@ const interact = Interact.create(config);
 ### 2. HTML Setup
 
 ```html
-<!-- Wrap your target element with wix-interact-element -->
-<wix-interact-element data-wix-path="my-element">
+<!-- Wrap your target element with interact-element -->
+<interact-element data-interact-key="my-element">
   <div>This will fade in when it enters the viewport!</div>
-</wix-interact-element>
+</interact-element>
 ```
 
 ### 3. Framework Integration
@@ -70,11 +70,11 @@ import React from 'react';
 
 function MyComponent() {
   return (
-    <wix-interact-element data-wix-path="my-element">
+    <interact-element data-interact-key="my-element">
       <div className="animated-content">
         Hello, animated world!
       </div>
-    </wix-interact-element>
+    </interact-element>
   );
 }
 ```
@@ -140,13 +140,13 @@ Interact.create(config: InteractConfig): Interact
 Interact.getInstance(key: string): Interact | undefined
 
 // Get cached element by key
-Interact.getElement(key: string): IWixInteractElement | undefined
+Interact.getElement(key: string): IInteractElement | undefined
 ```
 
 ### Standalone Functions
 ```typescript
 // Add interactions to an element
-add(element: IWixInteractElement, key: string): boolean
+add(element: IInteractElement, key: string): boolean
 
 // Remove all interactions from an element
 remove(key: string): void

package/dist/cjs/{WixInteractElement.js → InteractElement.js}

@@ -2,16 +2,16 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.WIX_INTERACT_EFFECT_DATA_ATTR = void 0;
-exports.getWixInteractElement = getWixInteractElement;
+exports.INTERACT_EFFECT_DATA_ATTR = void 0;
+exports.getInteractElement = getInteractElement;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _add = require("./core/add");
 var _remove = require("./core/remove");
-const WIX_INTERACT_EFFECT_DATA_ATTR = exports.WIX_INTERACT_EFFECT_DATA_ATTR = 'wixInteractEffect';
-function getWixInteractElement() {
+const INTERACT_EFFECT_DATA_ATTR = exports.INTERACT_EFFECT_DATA_ATTR = 'interactEffect';
+function getInteractElement() {
   let checkedForLegacyStateSyntax = false;
   let isLegacyStateSyntax = false;
-  return class WixInteractElement extends HTMLElement {
+  return class InteractElement extends HTMLElement {
     constructor() {
       super();
       (0, _defineProperty2.default)(this, "_internals", void 0);
@@ -44,7 +44,7 @@ function getWixInteractElement() {
       this.disconnect();
     }
     disconnect() {
-      const key = this.dataset.wixPath;
+      const key = this.dataset.interactKey;
       if (key) {
         (0, _remove.remove)(key);
       }
@@ -59,9 +59,9 @@ function getWixInteractElement() {
       if (this.connected) {
         return;
       }
-      key = key || this.dataset.wixPath;
+      key = key || this.dataset.interactKey;
       if (!key) {
-        console.warn('WixInteractElement: No key provided');
+        console.warn('InteractElement: No key provided');
         return;
       }
       this.connected = (0, _add.add)(this, key);
@@ -83,11 +83,14 @@ function getWixInteractElement() {
         }
       }
     }
-    toggleEffect(effectId, method) {
+    toggleEffect(effectId, method, item) {
+      if (item === null) {
+        return;
+      }
       if (isLegacyStateSyntax) {
         effectId = `--${effectId}`;
       }
-      if (this._internals) {
+      if (this._internals && !item) {
         if (method === 'toggle') {
           this._internals.states.has(effectId) ? this._internals.states.delete(effectId) : this._internals.states.add(effectId);
         } else if (method === 'add') {
@@ -98,8 +101,8 @@ function getWixInteractElement() {
           this._internals.states.clear();
         }
       } else {
-        var _this$dataset$WIX_INT;
-        const currentEffects = new Set(((_this$dataset$WIX_INT = this.dataset[WIX_INTERACT_EFFECT_DATA_ATTR]) == null ? void 0 : _this$dataset$WIX_INT.split(' ')) || []);
+        var _this$dataset$INTERAC;
+        const currentEffects = new Set(((_this$dataset$INTERAC = this.dataset[INTERACT_EFFECT_DATA_ATTR]) == null ? void 0 : _this$dataset$INTERAC.split(' ')) || []);
         if (method === 'toggle') {
           currentEffects.has(effectId) ? currentEffects.delete(effectId) : currentEffects.add(effectId);
         } else if (method === 'add') {
@@ -109,7 +112,7 @@ function getWixInteractElement() {
         } else if (method === 'clear') {
           currentEffects.clear();
         }
-        this.dataset[WIX_INTERACT_EFFECT_DATA_ATTR] = Array.from(currentEffects).join(' ');
+        (item || this).dataset[INTERACT_EFFECT_DATA_ATTR] = Array.from(currentEffects).join(' ');
       }
     }
     getActiveEffects() {
@@ -117,7 +120,7 @@ function getWixInteractElement() {
         const effects = Array.from(this._internals.states);
         return isLegacyStateSyntax ? effects.map(effect => effect.replace(/^--/g, '')) : effects;
       }
-      const raw = this.dataset[WIX_INTERACT_EFFECT_DATA_ATTR] || '';
+      const raw = this.dataset[INTERACT_EFFECT_DATA_ATTR] || '';
       const trimmed = raw.trim();
       return trimmed ? trimmed.split(/\s+/) : [];
     }
@@ -136,7 +139,7 @@ function getWixInteractElement() {
       }
     }
     _childListChangeHandler(listContainer, entries) {
-      const key = this.dataset.wixPath;
+      const key = this.dataset.interactKey;
       const removedElements = [];
       const addedElements = [];
       entries.forEach(entry => {
@@ -156,4 +159,4 @@ function getWixInteractElement() {
     }
   };
 }
-//# sourceMappingURL=WixInteractElement.js.map
+//# sourceMappingURL=InteractElement.js.map

package/dist/cjs/InteractElement.js.map

@@ -0,0 +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":[]}

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

@@ -250,7 +250,7 @@ describe('interact', () => {
     }
   });
   beforeEach(() => {
-    element = document.createElement('wix-interact-element');
+    element = document.createElement('interact-element');
     const div = document.createElement('div');
     element.append(div);
 
@@ -400,14 +400,14 @@ describe('interact', () => {
   describe('init Interact instance', () => {
     it('should initialize with valid config', () => {
       _Interact.Interact.create({});
-      expect(customElements.get('wix-interact-element')).toBeDefined();
+      expect(customElements.get('interact-element')).toBeDefined();
     });
   });
   describe('destroy Interact instance', () => {
     it('should clear an instance entire cache', () => {
       const instance = _Interact.Interact.create(getMockConfig());
-      element = document.createElement('wix-interact-element');
-      element.dataset.wixPath = 'logo-entrance';
+      element = document.createElement('interact-element');
+      element.dataset.interactKey = 'logo-entrance';
       const div = document.createElement('div');
       element.append(div);
       (0, _add.add)(element, 'logo-entrance');
@@ -431,7 +431,7 @@ describe('interact', () => {
     });
     it('should clear all elements from cache', () => {
       _Interact.Interact.create(getMockConfig());
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       (0, _add.add)(element, 'logo-hover');
@@ -441,10 +441,10 @@ describe('interact', () => {
     });
     it('should call disconnect on all cached elements', () => {
       _Interact.Interact.create(getMockConfig());
-      const element1 = document.createElement('wix-interact-element');
+      const element1 = document.createElement('interact-element');
       const div1 = document.createElement('div');
       element1.append(div1);
-      const element2 = document.createElement('wix-interact-element');
+      const element2 = document.createElement('interact-element');
       const div2 = document.createElement('div');
       element2.append(div2);
       (0, _add.add)(element1, 'logo-hover');
@@ -457,7 +457,7 @@ describe('interact', () => {
     });
     it('should clean up interactions after destroy', () => {
       _Interact.Interact.create(getMockConfig());
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       (0, _add.add)(element, 'logo-click');
@@ -468,7 +468,7 @@ describe('interact', () => {
 
       // Re-create instance and verify it works independently
       _Interact.Interact.create(getMockConfig());
-      const newElement = document.createElement('wix-interact-element');
+      const newElement = document.createElement('interact-element');
       const newDiv = document.createElement('div');
       newElement.append(newDiv);
       const newAddEventListenerSpy = jest.spyOn(newDiv, 'addEventListener');
@@ -482,9 +482,9 @@ describe('interact', () => {
     //   Interact.create(mockConfig);
 
     //   element = document.createElement(
-    //     'wix-interact-element',
-    //   ) as IWixInteractElement;
-    //   element.dataset.wixPath = 'logo-click';
+    //     'interact-element',
+    //   ) as IInteractElement;
+    //   element.dataset.interactKey = 'logo-click';
     //   const div = document.createElement('div');
     //   element.append(div);
 
@@ -527,7 +527,7 @@ describe('interact', () => {
           }
         }
       });
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       (0, _add.add)(element, 'logo-hover');
@@ -552,7 +552,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
@@ -579,7 +579,7 @@ describe('interact', () => {
     });
     describe('click', () => {
       it('should add handler for click trigger', () => {
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
@@ -595,7 +595,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         (0, _add.add)(element, 'logo-entrance');
@@ -608,15 +608,15 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         div.id = 'logo-entrance';
-        element.dataset.wixPath = 'logo-entrance';
+        element.dataset.interactKey = 'logo-entrance';
         element.append(div);
-        const elementClick = document.createElement('wix-interact-element');
+        const elementClick = document.createElement('interact-element');
         const divClick = document.createElement('div');
         divClick.id = 'logo-click';
-        elementClick.dataset.wixPath = 'logo-click';
+        elementClick.dataset.interactKey = 'logo-click';
         elementClick.append(divClick);
         (0, _add.add)(elementClick, 'logo-click');
         (0, _add.add)(element, 'logo-entrance');
@@ -640,7 +640,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         (0, _add.add)(element, 'logo-loop');
@@ -655,7 +655,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         (0, _add.add)(element, 'logo-animation-end');
@@ -678,7 +678,7 @@ describe('interact', () => {
           destroy: jest.fn()
         };
         Pointer.mockImplementation(() => pointerInstance);
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         (0, _add.add)(element, 'logo-mouse');
@@ -694,7 +694,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         (0, _add.add)(element, 'logo-scroll');
@@ -717,7 +717,7 @@ describe('interact', () => {
           destroy: jest.fn()
         };
         Scroll.mockImplementation(() => scrollInstance);
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         (0, _add.add)(element, 'logo-scroll');
@@ -732,7 +732,7 @@ describe('interact', () => {
     });
     describe('listContainer', () => {
       it('should add a handler per list item for click trigger with listContainer', () => {
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         const ul = document.createElement('ul');
         ul.id = 'logo-list';
@@ -758,7 +758,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         const ul = document.createElement('ul');
         ul.id = 'logo-list';
@@ -774,7 +774,7 @@ describe('interact', () => {
         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');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         const ul = document.createElement('ul');
         ul.id = 'logo-list';
@@ -808,9 +808,9 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const divTarget = document.createElement('div');
         const ul = document.createElement('ul');
         ul.id = 'logo-scroll-list';
@@ -849,7 +849,7 @@ describe('interact', () => {
       _Interact.Interact.destroy();
     });
     it('should remove event listeners', () => {
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       const removeEventListenerSpy = jest.spyOn(div, 'removeEventListener');
@@ -870,7 +870,7 @@ describe('interact', () => {
         destroy: jest.fn()
       };
       Pointer.mockImplementation(() => pointerInstance);
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       (0, _add.add)(element, 'logo-mouse');
@@ -886,10 +886,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         _Interact.Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         const addEventListenerSpy = jest.spyOn(sourceDiv, 'addEventListener');
@@ -918,10 +918,10 @@ describe('interact', () => {
         const config = createCascadingTestConfig({}, []); // No matching conditions
 
         _Interact.Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         (0, _add.add)(sourceElement, 'cascade-source');
@@ -944,10 +944,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['max-width: 767px']);
         _Interact.Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         (0, _add.add)(sourceElement, 'cascade-source');
@@ -972,10 +972,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         _Interact.Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
 
@@ -998,10 +998,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         _Interact.Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
 
@@ -1069,13 +1069,13 @@ describe('interact', () => {
         };
         mockMatchMedia(['min-width: 1024px']); // Only desktop matches
         _Interact.Interact.create(complexConfig);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const target1Element = document.createElement('wix-interact-element');
+        const target1Element = document.createElement('interact-element');
         const target1Div = document.createElement('div');
         target1Element.append(target1Div);
-        const target2Element = document.createElement('wix-interact-element');
+        const target2Element = document.createElement('interact-element');
         const target2Div = document.createElement('div');
         target2Element.append(target2Div);
         (0, _add.add)(sourceElement, 'multi-source-1');
@@ -1143,10 +1143,10 @@ describe('interact', () => {
         // Both conditions match
         mockMatchMedia(['min-width: 1024px', 'min-resolution: 2dppx']);
         _Interact.Interact.create(multiConditionConfig);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         (0, _add.add)(sourceElement, 'cascade-source');
@@ -1199,10 +1199,10 @@ describe('interact', () => {
         };
         mockMatchMedia(['min-width: 1024px']);
         _Interact.Interact.create(configWithMissingCondition);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         (0, _add.add)(sourceElement, 'cascade-source');
@@ -1246,10 +1246,10 @@ describe('interact', () => {
         };
         mockMatchMedia([]);
         _Interact.Interact.create(configWithEmptyConditions);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         (0, _add.add)(sourceElement, 'cascade-source');
@@ -1272,7 +1272,7 @@ describe('interact', () => {
     let targetElement;
     beforeEach(() => {
       // Create source element with multiple child elements
-      sourceElement = document.createElement('wix-interact-element');
+      sourceElement = document.createElement('interact-element');
       sourceElement.innerHTML = `
         <div class="first-child">First Child</div>
         <button class="trigger-button">Click Me</button>
@@ -1285,7 +1285,7 @@ describe('interact', () => {
       `;
 
       // Create target element with multiple child elements
-      targetElement = document.createElement('wix-interact-element');
+      targetElement = document.createElement('interact-element');
       targetElement.innerHTML = `
         <div class="first-child">Target First</div>
         <div class="animation-target">Animation Target</div>
@@ -1520,7 +1520,7 @@ describe('interact', () => {
         _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"');
+        expect(consoleSpy).toHaveBeenCalledWith('Interact: No element found for selector ".non-existent-element"');
       });
       it('should warn when listContainer selector does not match', () => {
         const config = {
@@ -1550,7 +1550,7 @@ describe('interact', () => {
         _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"');
+        expect(consoleSpy).toHaveBeenCalledWith('Interact: No container found for list container ".non-existent-container"');
       });
       it('should gracefully handle invalid selectors without breaking interactions', () => {
         const config = {