@wix/interact 1.85.0 → 1.86.0

package/dist/esm/InteractElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["add","addListItems","remove","removeListItems","INTERACT_EFFECT_DATA_ATTR","getInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","InteractElement","HTMLElement","constructor","_defineProperty","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","delete","e","connectedCallback","connect","disconnectedCallback","disconnect","key","dataset","interactKey","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"],"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/esm/__tests__/interact.spec.js

@@ -249,7 +249,7 @@ describe('interact', () => {
     }
   });
   beforeEach(() => {
-    element = document.createElement('wix-interact-element');
+    element = document.createElement('interact-element');
     const div = document.createElement('div');
     element.append(div);
 
@@ -408,14 +408,14 @@ describe('interact', () => {
   describe('init Interact instance', () => {
     it('should initialize with valid config', () => {
       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.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);
       add(element, 'logo-entrance');
@@ -439,7 +439,7 @@ describe('interact', () => {
     });
     it('should clear all elements from cache', () => {
       Interact.create(getMockConfig());
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       add(element, 'logo-hover');
@@ -449,10 +449,10 @@ describe('interact', () => {
     });
     it('should call disconnect on all cached elements', () => {
       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);
       add(element1, 'logo-hover');
@@ -465,7 +465,7 @@ describe('interact', () => {
     });
     it('should clean up interactions after destroy', () => {
       Interact.create(getMockConfig());
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       add(element, 'logo-click');
@@ -476,7 +476,7 @@ describe('interact', () => {
 
       // Re-create instance and verify it works independently
       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');
@@ -490,9 +490,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);
 
@@ -535,7 +535,7 @@ describe('interact', () => {
           }
         }
       });
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       add(element, 'logo-hover');
@@ -560,7 +560,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');
@@ -587,7 +587,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');
@@ -603,7 +603,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);
         add(element, 'logo-entrance');
@@ -616,15 +616,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);
         add(elementClick, 'logo-click');
         add(element, 'logo-entrance');
@@ -648,7 +648,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);
         add(element, 'logo-loop');
@@ -663,7 +663,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);
         add(element, 'logo-animation-end');
@@ -686,7 +686,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);
         add(element, 'logo-mouse');
@@ -702,7 +702,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);
         add(element, 'logo-scroll');
@@ -725,7 +725,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);
         add(element, 'logo-scroll');
@@ -740,7 +740,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';
@@ -766,7 +766,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';
@@ -782,7 +782,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';
@@ -816,9 +816,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';
@@ -857,7 +857,7 @@ describe('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');
@@ -878,7 +878,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);
       add(element, 'logo-mouse');
@@ -894,10 +894,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         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');
@@ -926,10 +926,10 @@ describe('interact', () => {
         const config = createCascadingTestConfig({}, []); // No matching conditions
 
         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);
         add(sourceElement, 'cascade-source');
@@ -952,10 +952,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['max-width: 767px']);
         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);
         add(sourceElement, 'cascade-source');
@@ -980,10 +980,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         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);
 
@@ -1006,10 +1006,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         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);
 
@@ -1077,13 +1077,13 @@ describe('interact', () => {
         };
         mockMatchMedia(['min-width: 1024px']); // Only desktop matches
         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);
         add(sourceElement, 'multi-source-1');
@@ -1151,10 +1151,10 @@ describe('interact', () => {
         // Both conditions match
         mockMatchMedia(['min-width: 1024px', 'min-resolution: 2dppx']);
         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);
         add(sourceElement, 'cascade-source');
@@ -1207,10 +1207,10 @@ describe('interact', () => {
         };
         mockMatchMedia(['min-width: 1024px']);
         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);
         add(sourceElement, 'cascade-source');
@@ -1254,10 +1254,10 @@ describe('interact', () => {
         };
         mockMatchMedia([]);
         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);
         add(sourceElement, 'cascade-source');
@@ -1280,7 +1280,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>
@@ -1293,7 +1293,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>
@@ -1528,7 +1528,7 @@ describe('interact', () => {
         Interact.create(config);
         add(sourceElement, 'invalid-source');
         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 = {
@@ -1558,7 +1558,7 @@ describe('interact', () => {
         Interact.create(config);
         add(sourceElement, 'invalid-container-source');
         add(targetElement, 'invalid-container-target');
-        expect(consoleSpy).toHaveBeenCalledWith('WixInteract: No container found for list container ".non-existent-container"');
+        expect(consoleSpy).toHaveBeenCalledWith('Interact: No container found for list container ".non-existent-container"');
       });
       it('should gracefully handle invalid selectors without breaking interactions', () => {
         const config = {