@wix/interact 1.74.0 → 1.76.0

package/dist/esm/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n  NamedEffect,\n  MotionKeyframeEffect,\n  CustomEffect,\n  RangeOffset,\n  ScrubTransitionEasing,\n  MotionAnimationOptions,\n} from '@wix/motion';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'wix-interact-element': React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement>,\n        HTMLElement\n      > & {\n        'data-wix-path'?: string;\n      };\n    }\n  }\n}\n\nexport type TriggerType =\n  | 'hover'\n  | 'click'\n  | 'viewEnter'\n  | 'pageVisible'\n  | 'animationEnd'\n  | 'viewProgress'\n  | 'pointerMove';\n\nexport type ViewEnterType = 'once' | 'repeat' | 'alternate';\n\nexport type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';\n\nexport type StateParams = {\n  method: TransitionMethod;\n};\n\nexport type PointerTriggerParams = {\n  type?: ViewEnterType | 'state';\n};\n\nexport type ViewEnterParams = {\n  type?: ViewEnterType;\n  threshold?: number;\n  inset?: string;\n};\n\nexport type PointerMoveParams = {\n  hitArea?: 'root' | 'self';\n};\n\nexport type AnimationEndParams = {\n  effectId: string;\n};\n\nexport type TriggerParams =\n  | StateParams\n  | PointerTriggerParams\n  | ViewEnterParams\n  | PointerMoveParams\n  | AnimationEndParams;\n\ntype Fill = 'none' | 'forwards' | 'backwards' | 'both';\n\ntype EffectEffectProperty =\n  | {\n      keyframeEffect: MotionKeyframeEffect;\n    }\n  | {\n      namedEffect: NamedEffect;\n    }\n  | {\n      customEffect: CustomEffect;\n    };\n\nexport type TimeEffect = {\n  target?: string;\n  duration: number;\n  easing?: string;\n  iterations?: number;\n  alternate?: boolean;\n  fill?: Fill;\n  reversed?: boolean;\n  delay?: number;\n  effectId?: string;\n} & EffectEffectProperty;\n\nexport type ScrubEffect = {\n  target?: string;\n  easing?: string;\n  iterations?: number;\n  alternate?: boolean;\n  fill?: Fill;\n  reversed?: boolean;\n  rangeStart?: RangeOffset;\n  rangeEnd?: RangeOffset;\n  centeredToTarget?: boolean;\n  transitionDuration?: number;\n  transitionDelay?: number;\n  transitionEasing?: ScrubTransitionEasing;\n} & EffectEffectProperty;\n\nexport type TransitionOptions = {\n  duration?: number;\n  delay?: number;\n  easing?: string;\n};\n\nexport type StyleProperty = {\n  name: string;\n  value: string;\n};\n\nexport type TransitionProperty = StyleProperty & TransitionOptions;\n\nexport type TransitionEffect = {\n  target?: string;\n  effectId?: string;\n} & {\n  transition?: TransitionOptions & {\n    styleProperties: StyleProperty[];\n  };\n  transitionProperties?: TransitionProperty[];\n};\n\nexport type EffectRef = {\n  target?: string;\n  effectId: string;\n  conditions?: string[];\n};\n\nexport type Effect = (TimeEffect | ScrubEffect | TransitionEffect) & {\n  conditions?: string[];\n};\n\nexport type Condition = {\n  type: 'media' | 'container';\n  predicate?: string;\n};\n\ntype InteractionTrigger = {\n  source: string;\n  trigger: TriggerType;\n  params?: TriggerParams;\n  conditions?: string[];\n};\n\nexport type Interaction = InteractionTrigger & {\n  effects: ((Effect | EffectRef) & { interactionId?: string })[];\n};\n\nexport type InteractConfig = {\n  effects: Record<string, Effect>;\n  conditions?: Record<string, Condition>;\n  interactions: Interaction[];\n};\n\nexport type AnimationOptions<T extends 'time' | 'scrub'> =\n  MotionAnimationOptions<T> & EffectEffectProperty;\n\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n\nexport interface IWixInteractElement extends HTMLElement {\n  _internals: (ElementInternals & { states: Set<string> }) | null;\n  connected: boolean;\n  sheet: CSSStyleSheet | null;\n  connectedCallback(): void;\n  disconnectedCallback(): void;\n  connect(path?: string): void;\n  renderStyle(cssText: string): void;\n  toggleEffect(effectId: string, method: StateParams['method']): void;\n}\n\nexport type InteractionParamsTypes = {\n  hover: StateParams | PointerTriggerParams;\n  click: StateParams | PointerTriggerParams;\n  viewEnter: ViewEnterParams;\n  pageVisible: ViewEnterParams;\n  animationEnd: AnimationEndParams;\n  viewProgress: ViewEnterParams;\n  pointerMove: PointerMoveParams;\n};\n\nexport type InteractionHandlerModule<T extends TriggerType> = {\n  add: (\n    source: HTMLElement,\n    target: HTMLElement,\n    effect: Effect,\n    options: InteractionParamsTypes[T],\n    reducedMotion?: boolean,\n  ) => void;\n  remove: (element: HTMLElement) => void;\n};\n\nexport type TriggerHandlerMap<T extends TriggerType> = {\n  [K in T]: InteractionHandlerModule<K>;\n};\n\nexport type HandlerObject = {\n  source: HTMLElement;\n  target: HTMLElement;\n  cleanup: () => void;\n  handler?: () => void;\n};\n\nexport type HandlerObjectMap = WeakMap<HTMLElement, Set<HandlerObject>>;\n\nexport type InteractCache = {\n  effects: {\n    [effectId: string]: Effect;\n  };\n  conditions: {\n    [conditionId: string]: Condition;\n  };\n  interactions: {\n    [path: string]: {\n      triggers: Interaction[];\n      effects: Record<\n        string,\n        (InteractionTrigger & { effect: Effect | EffectRef })[]\n      >;\n      interactionIds: Set<string>;\n    };\n  };\n};\n\nexport type CreateTransitionCSSParams = {\n  path: string;\n  effectId: string;\n  transition?: TransitionEffect['transition'];\n  properties?: TransitionProperty[];\n  childSelector?: string;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n  NamedEffect,\n  CustomEffect,\n  RangeOffset,\n  ScrubTransitionEasing,\n  MotionAnimationOptions,\n} from '@wix/motion';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'wix-interact-element': React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement>,\n        HTMLElement\n      > & {\n        'data-wix-path'?: string;\n      };\n    }\n  }\n}\n\nexport type TriggerType =\n  | 'hover'\n  | 'click'\n  | 'viewEnter'\n  | 'pageVisible'\n  | 'animationEnd'\n  | 'viewProgress'\n  | 'pointerMove';\n\nexport type ViewEnterType = 'once' | 'repeat' | 'alternate';\n\nexport type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';\n\nexport type StateParams = {\n  method: TransitionMethod;\n};\n\nexport type PointerTriggerParams = {\n  type?: ViewEnterType | 'state';\n};\n\nexport type ViewEnterParams = {\n  type?: ViewEnterType;\n  threshold?: number;\n  inset?: string;\n};\n\nexport type PointerMoveParams = {\n  hitArea?: 'root' | 'self';\n};\n\nexport type AnimationEndParams = {\n  effectId: string;\n};\n\nexport type TriggerParams =\n  | StateParams\n  | PointerTriggerParams\n  | ViewEnterParams\n  | PointerMoveParams\n  | AnimationEndParams;\n\ntype Fill = 'none' | 'forwards' | 'backwards' | 'both';\n\ntype MotionKeyframeEffect = {\n  name: string;\n  keyframes: Keyframe[];\n};\n\ntype EffectEffectProperty =\n  | {\n      keyframeEffect: MotionKeyframeEffect;\n    }\n  | {\n      namedEffect: NamedEffect;\n    }\n  | {\n      customEffect: CustomEffect;\n    };\n\nexport type TimeEffect = {\n  key?: string;\n  duration: number;\n  easing?: string;\n  iterations?: number;\n  alternate?: boolean;\n  fill?: Fill;\n  reversed?: boolean;\n  delay?: number;\n  effectId?: string;\n} & EffectEffectProperty;\n\nexport type ScrubEffect = {\n  key?: string;\n  easing?: string;\n  iterations?: number;\n  alternate?: boolean;\n  fill?: Fill;\n  reversed?: boolean;\n  rangeStart?: RangeOffset;\n  rangeEnd?: RangeOffset;\n  centeredToTarget?: boolean;\n  transitionDuration?: number;\n  transitionDelay?: number;\n  transitionEasing?: ScrubTransitionEasing;\n} & EffectEffectProperty;\n\nexport type TransitionOptions = {\n  duration?: number;\n  delay?: number;\n  easing?: string;\n};\n\nexport type StyleProperty = {\n  name: string;\n  value: string;\n};\n\nexport type TransitionProperty = StyleProperty & TransitionOptions;\n\nexport type TransitionEffect = {\n  key?: string;\n  effectId?: string;\n} & {\n  transition?: TransitionOptions & {\n    styleProperties: StyleProperty[];\n  };\n  transitionProperties?: TransitionProperty[];\n};\n\nexport type EffectRef = {\n  key?: string;\n  effectId: string;\n  listContainer?: string;\n  conditions?: string[];\n  selector?: string;\n};\n\nexport type Effect = (TimeEffect | ScrubEffect | TransitionEffect) & {\n  listContainer?: string;\n  conditions?: string[];\n  selector?: string;\n};\n\nexport type Condition = {\n  type: 'media' | 'container';\n  predicate?: string;\n};\n\nexport type InteractionTrigger = {\n  key: string;\n  listContainer?: string;\n  trigger: TriggerType;\n  params?: TriggerParams;\n  conditions?: string[];\n  selector?: string;\n};\n\nexport type Interaction = InteractionTrigger & {\n  effects: ((Effect | EffectRef) & { interactionId?: string })[];\n};\n\nexport type InteractConfig = {\n  effects: Record<string, Effect>;\n  conditions?: Record<string, Condition>;\n  interactions: Interaction[];\n};\n\nexport type AnimationOptions<T extends 'time' | 'scrub'> =\n  MotionAnimationOptions<T> & EffectEffectProperty;\n\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n\nexport interface IWixInteractElement extends HTMLElement {\n  _internals: (ElementInternals & { states: Set<string> }) | null;\n  connected: boolean;\n  sheet: CSSStyleSheet | null;\n  _observers: WeakMap<HTMLElement, MutationObserver>;\n  connectedCallback(): void;\n  disconnectedCallback(): void;\n  connect(path?: string): void;\n  renderStyle(cssRules: string[]): void;\n  toggleEffect(effectId: string, method: StateParams['method']): void;\n  watchChildList(listContainer: string): void;\n}\n\nexport type InteractionParamsTypes = {\n  hover: StateParams | PointerTriggerParams;\n  click: StateParams | PointerTriggerParams;\n  viewEnter: ViewEnterParams;\n  pageVisible: ViewEnterParams;\n  animationEnd: AnimationEndParams;\n  viewProgress: ViewEnterParams;\n  pointerMove: PointerMoveParams;\n};\n\nexport type InteractionHandlerModule<T extends TriggerType> = {\n  add: (\n    source: HTMLElement,\n    target: HTMLElement,\n    effect: Effect,\n    options: InteractionParamsTypes[T],\n    reducedMotion?: boolean,\n  ) => void;\n  remove: (element: HTMLElement) => void;\n};\n\nexport type TriggerHandlerMap<T extends TriggerType> = {\n  [K in T]: InteractionHandlerModule<K>;\n};\n\nexport type HandlerObject = {\n  source: HTMLElement;\n  target: HTMLElement;\n  cleanup: () => void;\n  handler?: () => void;\n};\n\nexport type HandlerObjectMap = WeakMap<HTMLElement, Set<HandlerObject>>;\n\nexport type InteractCache = {\n  effects: {\n    [effectId: string]: Effect;\n  };\n  conditions: {\n    [conditionId: string]: Condition;\n  };\n  interactions: {\n    [path: string]: {\n      triggers: Interaction[];\n      effects: Record<\n        string,\n        (InteractionTrigger & { effect: Effect | EffectRef })[]\n      >;\n      interactionIds: Set<string>;\n      selectors: Set<string>;\n    };\n  };\n};\n\nexport type CreateTransitionCSSParams = {\n  key: string;\n  effectId: string;\n  transition?: TransitionEffect['transition'];\n  properties?: TransitionProperty[];\n  childSelector?: string;\n};\n"],"mappings":"","ignoreList":[]}

package/dist/esm/utils.js

@@ -6,11 +6,11 @@ export function generateId() {
 export function createTransitionCSS(_ref) {
   var _properties2;
   let {
-    path,
+    key,
     effectId,
     transition,
     properties,
-    childSelector = ':first-child'
+    childSelector = '> :first-child'
   } = _ref;
   let transitions = [];
   if (transition != null && transition.styleProperties) {
@@ -34,16 +34,18 @@ export function createTransitionCSS(_ref) {
     transitions = ((_properties = properties) == null ? void 0 : _properties.filter(property => property.duration).map(property => `${property.name} ${property.duration}ms ${getEasing(property.easing) || 'ease'}${property.delay ? ` ${property.delay}ms` : ''}`)) || [];
   }
   const styleProperties = ((_properties2 = properties) == null ? void 0 : _properties2.map(property => `${property.name}: ${property.value};`)) || [];
-  const escapedPath = path.replace(/"/g, "'");
-  return `
-    ${transitions.length ? `@media (prefers-reduced-motion: no-preference) { [data-wix-path="${escapedPath}"] > ${childSelector} {
-      transition: ${transitions.join(', ')};
-    } }` : ''}
-    :is(:state(${effectId}), :--${effectId}) > ${childSelector},
-    [data-wix-interact-effect~="${effectId}"] > ${childSelector} {
+  const escapedKey = key.replace(/"/g, "'");
+  const result = [`:is(:state(${effectId}), :--${effectId}) ${childSelector},
+    [data-wix-interact-effect~="${effectId}"] ${childSelector} {
       ${styleProperties.join(`
       `)}
-    }`;
+    }`];
+  if (transitions.length) {
+    result.push(`@media (prefers-reduced-motion: no-preference) { [data-wix-path="${escapedKey}"] ${childSelector} {
+      transition: ${transitions.join(', ')};
+    } }`);
+  }
+  return result;
 }
 export function getMediaQuery(conditionNames, conditions) {
   const conditionContent = (conditionNames || []).filter(conditionName => {

package/dist/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["getEasing","generateId","replace","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","_ref","_properties2","path","effectId","transition","properties","childSelector","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","map","_properties","filter","property","value","escapedPath","length","join","getMediaQuery","conditionNames","conditions","conditionContent","conditionName","_conditions$condition","type","predicate","condition","mql","window","matchMedia"],"sources":["../../src/utils.ts"],"sourcesContent":["import { getEasing } from '@wix/motion';\nimport type { Condition, CreateTransitionCSSParams } from './types';\n\nexport function generateId() {\n  return 'wi-12343210'.replace(\n    /\\d/g,\n    (c) =>\n      String.fromCharCode(\n        (+c ^\n          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))) +\n          97,\n      ), // 97 for \"a\"\n  );\n}\n\nexport function createTransitionCSS({\n  path,\n  effectId,\n  transition,\n  properties,\n  childSelector = ':first-child',\n}: CreateTransitionCSSParams): string {\n  let transitions: string[] = [];\n\n  if (transition?.styleProperties) {\n    const { duration, easing, delay } = transition;\n\n    if (duration) {\n      const hasCustomPropertiesTransition = transition.styleProperties.some(\n        (styleProperty) => styleProperty.name.startsWith('--'),\n      );\n\n      if (hasCustomPropertiesTransition) {\n        // If there are custom properties in the transition, we need to fall back to Viewer's legacy implementation\n        transitions = [\n          `all ${duration}ms ${getEasing(easing || 'ease')}${\n            delay ? ` ${delay}ms` : ''\n          }`,\n          'visibility 0s',\n        ];\n      } else {\n        transitions = transition.styleProperties.map(\n          (styleProperty) =>\n            `${styleProperty.name} ${duration}ms ${getEasing(\n              easing || 'ease',\n            )}${delay ? ` ${delay}ms` : ''}`,\n        );\n      }\n    }\n\n    properties = transition.styleProperties;\n  } else {\n    transitions =\n      properties\n        ?.filter((property) => property.duration)\n        .map(\n          (property) =>\n            `${property.name} ${property.duration}ms ${\n              getEasing(property.easing) || 'ease'\n            }${property.delay ? ` ${property.delay}ms` : ''}`,\n        ) || [];\n  }\n\n  const styleProperties =\n    properties?.map((property) => `${property.name}: ${property.value};`) || [];\n  const escapedPath = path.replace(/\"/g, \"'\");\n\n  return `\n    ${\n      transitions.length\n        ? `@media (prefers-reduced-motion: no-preference) { [data-wix-path=\"${escapedPath}\"] > ${childSelector} {\n      transition: ${transitions.join(', ')};\n    } }`\n        : ''\n    }\n    :is(:state(${effectId}), :--${effectId}) > ${childSelector},\n    [data-wix-interact-effect~=\"${effectId}\"] > ${childSelector} {\n      ${styleProperties.join(`\n      `)}\n    }`;\n}\n\nexport function getMediaQuery(\n  conditionNames: string[] | undefined,\n  conditions: Record<string, Condition>,\n) {\n  const conditionContent = (conditionNames || [])\n    .filter((conditionName) => {\n      return (\n        conditions[conditionName]?.type === 'media' &&\n        conditions[conditionName].predicate\n      );\n    })\n    .map((conditionName) => {\n      return conditions[conditionName].predicate;\n    })\n    .join(') and (');\n\n  const condition = conditionContent && `(${conditionContent})`;\n  const mql = condition && window.matchMedia(condition);\n\n  if (mql) {\n    return mql;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["getEasing","generateId","replace","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","_ref","_properties2","key","effectId","transition","properties","childSelector","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","map","_properties","filter","property","value","escapedKey","result","join","length","push","getMediaQuery","conditionNames","conditions","conditionContent","conditionName","_conditions$condition","type","predicate","condition","mql","window","matchMedia"],"sources":["../../src/utils.ts"],"sourcesContent":["import { getEasing } from '@wix/motion';\nimport type { Condition, CreateTransitionCSSParams } from './types';\n\nexport function generateId() {\n  return 'wi-12343210'.replace(\n    /\\d/g,\n    (c) =>\n      String.fromCharCode(\n        (+c ^\n          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))) +\n          97,\n      ), // 97 for \"a\"\n  );\n}\n\nexport function createTransitionCSS({\n  key,\n  effectId,\n  transition,\n  properties,\n  childSelector = '> :first-child',\n}: CreateTransitionCSSParams): string[] {\n  let transitions: string[] = [];\n\n  if (transition?.styleProperties) {\n    const { duration, easing, delay } = transition;\n\n    if (duration) {\n      const hasCustomPropertiesTransition = transition.styleProperties.some(\n        (styleProperty) => styleProperty.name.startsWith('--'),\n      );\n\n      if (hasCustomPropertiesTransition) {\n        // If there are custom properties in the transition, we need to fall back to Viewer's legacy implementation\n        transitions = [\n          `all ${duration}ms ${getEasing(easing || 'ease')}${\n            delay ? ` ${delay}ms` : ''\n          }`,\n          'visibility 0s',\n        ];\n      } else {\n        transitions = transition.styleProperties.map(\n          (styleProperty) =>\n            `${styleProperty.name} ${duration}ms ${getEasing(\n              easing || 'ease',\n            )}${delay ? ` ${delay}ms` : ''}`,\n        );\n      }\n    }\n\n    properties = transition.styleProperties;\n  } else {\n    transitions =\n      properties\n        ?.filter((property) => property.duration)\n        .map(\n          (property) =>\n            `${property.name} ${property.duration}ms ${\n              getEasing(property.easing) || 'ease'\n            }${property.delay ? ` ${property.delay}ms` : ''}`,\n        ) || [];\n  }\n\n  const styleProperties =\n    properties?.map((property) => `${property.name}: ${property.value};`) || [];\n  const escapedKey = key.replace(/\"/g, \"'\");\n\n  const result = [\n    `:is(:state(${effectId}), :--${effectId}) ${childSelector},\n    [data-wix-interact-effect~=\"${effectId}\"] ${childSelector} {\n      ${styleProperties.join(`\n      `)}\n    }`,\n  ];\n\n  if (transitions.length) {\n    result.push(`@media (prefers-reduced-motion: no-preference) { [data-wix-path=\"${escapedKey}\"] ${childSelector} {\n      transition: ${transitions.join(', ')};\n    } }`);\n  }\n  return result;\n}\n\nexport function getMediaQuery(\n  conditionNames: string[] | undefined,\n  conditions: Record<string, Condition>,\n) {\n  const conditionContent = (conditionNames || [])\n    .filter((conditionName) => {\n      return (\n        conditions[conditionName]?.type === 'media' &&\n        conditions[conditionName].predicate\n      );\n    })\n    .map((conditionName) => {\n      return conditions[conditionName].predicate;\n    })\n    .join(') and (');\n\n  const condition = conditionContent && `(${conditionContent})`;\n  const mql = condition && window.matchMedia(condition);\n\n  if (mql) {\n    return mql;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/WixInteractElement.d.ts

@@ -7,11 +7,14 @@ export declare function getWixInteractElement(): {
         }) | null;
         connected: boolean;
         sheet: CSSStyleSheet | null;
+        _observers: WeakMap<HTMLElement, MutationObserver>;
         connectedCallback(): void;
         disconnectedCallback(): void;
-        connect(path?: string): void;
-        renderStyle(cssText: string): void;
+        connect(key?: string): void;
+        renderStyle(cssRules: string[]): void;
         toggleEffect(effectId: string, method: StateParams['method']): void;
+        watchChildList(listContainer: string): void;
+        _childListChangeHandler(listContainer: string, entries: MutationRecord[]): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/dist/types/core/Interact.d.ts

@@ -0,0 +1,24 @@
+import { InteractCache, IWixInteractElement, InteractConfig, Effect, Interaction } from '../types';
+export declare class Interact {
+    dataCache: InteractCache;
+    addedInteractions: {
+        [interactionId: string]: boolean;
+    };
+    listInteractionsCache: {
+        [listContainer: string]: {
+            [interactionId: string]: boolean;
+        };
+    };
+    static forceReducedMotion: boolean;
+    static instances: Interact[];
+    static elementCache: Map<string, IWixInteractElement>;
+    constructor();
+    init(config: InteractConfig): void;
+    has(key: string): boolean;
+    clearInteractionStateForKey(key: string): void;
+    static create(config: InteractConfig): Interact;
+    static getInstance(key: string): Interact | undefined;
+    static getElement(key: string): IWixInteractElement | undefined;
+    static setElement(key: string, element: IWixInteractElement): void;
+}
+export declare function getSelector(d: Interaction | Effect, asCombinator?: boolean): string;

package/dist/types/core/add.d.ts

@@ -0,0 +1,6 @@
+import type { IWixInteractElement } from '../types';
+/**
+ * Adds all events and effects to an element based on config
+ */
+export declare function add(element: IWixInteractElement, key: string): boolean;
+export declare function addListItems(root: IWixInteractElement, key: string, listContainer: string, elements: HTMLElement[]): void;

package/dist/types/core/remove.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Removes all events and effects from an element based on config
+ */
+export declare function remove(key: string): void;
+export declare function removeListItems(elements: HTMLElement[]): void;

package/dist/types/index.d.ts

@@ -1,2 +1,4 @@
-export { Interact, add, remove } from './interact';
+export { Interact } from './core/Interact';
+export { add } from './core/add';
+export { remove } from './core/remove';
 export * from './types';

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { NamedEffect, MotionKeyframeEffect, CustomEffect, RangeOffset, ScrubTransitionEasing, MotionAnimationOptions } from '@wix/motion';
+import type { NamedEffect, CustomEffect, RangeOffset, ScrubTransitionEasing, MotionAnimationOptions } from '@wix/motion';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -31,6 +31,10 @@ export type AnimationEndParams = {
 };
 export type TriggerParams = StateParams | PointerTriggerParams | ViewEnterParams | PointerMoveParams | AnimationEndParams;
 type Fill = 'none' | 'forwards' | 'backwards' | 'both';
+type MotionKeyframeEffect = {
+    name: string;
+    keyframes: Keyframe[];
+};
 type EffectEffectProperty = {
     keyframeEffect: MotionKeyframeEffect;
 } | {
@@ -39,7 +43,7 @@ type EffectEffectProperty = {
     customEffect: CustomEffect;
 };
 export type TimeEffect = {
-    target?: string;
+    key?: string;
     duration: number;
     easing?: string;
     iterations?: number;
@@ -50,7 +54,7 @@ export type TimeEffect = {
     effectId?: string;
 } & EffectEffectProperty;
 export type ScrubEffect = {
-    target?: string;
+    key?: string;
     easing?: string;
     iterations?: number;
     alternate?: boolean;
@@ -74,7 +78,7 @@ export type StyleProperty = {
 };
 export type TransitionProperty = StyleProperty & TransitionOptions;
 export type TransitionEffect = {
-    target?: string;
+    key?: string;
     effectId?: string;
 } & {
     transition?: TransitionOptions & {
@@ -83,22 +87,28 @@ export type TransitionEffect = {
     transitionProperties?: TransitionProperty[];
 };
 export type EffectRef = {
-    target?: string;
+    key?: string;
     effectId: string;
+    listContainer?: string;
     conditions?: string[];
+    selector?: string;
 };
 export type Effect = (TimeEffect | ScrubEffect | TransitionEffect) & {
+    listContainer?: string;
     conditions?: string[];
+    selector?: string;
 };
 export type Condition = {
     type: 'media' | 'container';
     predicate?: string;
 };
-type InteractionTrigger = {
-    source: string;
+export type InteractionTrigger = {
+    key: string;
+    listContainer?: string;
     trigger: TriggerType;
     params?: TriggerParams;
     conditions?: string[];
+    selector?: string;
 };
 export type Interaction = InteractionTrigger & {
     effects: ((Effect | EffectRef) & {
@@ -117,11 +127,13 @@ export interface IWixInteractElement extends HTMLElement {
     }) | null;
     connected: boolean;
     sheet: CSSStyleSheet | null;
+    _observers: WeakMap<HTMLElement, MutationObserver>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     connect(path?: string): void;
-    renderStyle(cssText: string): void;
+    renderStyle(cssRules: string[]): void;
     toggleEffect(effectId: string, method: StateParams['method']): void;
+    watchChildList(listContainer: string): void;
 }
 export type InteractionParamsTypes = {
     hover: StateParams | PointerTriggerParams;
@@ -160,11 +172,12 @@ export type InteractCache = {
                 effect: Effect | EffectRef;
             })[]>;
             interactionIds: Set<string>;
+            selectors: Set<string>;
         };
     };
 };
 export type CreateTransitionCSSParams = {
-    path: string;
+    key: string;
     effectId: string;
     transition?: TransitionEffect['transition'];
     properties?: TransitionProperty[];

package/dist/types/utils.d.ts

@@ -1,4 +1,4 @@
 import type { Condition, CreateTransitionCSSParams } from './types';
 export declare function generateId(): string;
-export declare function createTransitionCSS({ path, effectId, transition, properties, childSelector, }: CreateTransitionCSSParams): string;
+export declare function createTransitionCSS({ key, effectId, transition, properties, childSelector, }: CreateTransitionCSSParams): string[];
 export declare function getMediaQuery(conditionNames: string[] | undefined, conditions: Record<string, Condition>): MediaQueryList | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/interact",
-  "version": "1.74.0",
+  "version": "1.76.0",
   "author": {
     "name": "wow!Team",
     "email": "wow-dev@wix.com"
@@ -23,6 +23,7 @@
     "build": "yoshi-library build",
     "start": "yoshi-library start",
     "test": "yoshi-library test",
+    "test:coverage": "yoshi-library test --coverage",
     "playground": "yarn workspace @wix/interact-playground dev",
     "lint": "yoshi-library lint"
   },
@@ -31,16 +32,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@wix/motion": "1.606.0",
+    "@wix/motion": "1.616.0",
     "fizban": "^0.7.0",
     "kuliso": "^0.4.13"
   },
   "devDependencies": {
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.123",
-    "@wix/eslint-config-yoshi": "^6.158.0",
-    "@wix/jest-yoshi-preset": "^6.158.0",
-    "@wix/yoshi-flow-library": "^6.158.0",
+    "@wix/eslint-config-yoshi": "^6.160.0",
+    "@wix/jest-yoshi-preset": "^6.160.0",
+    "@wix/yoshi-flow-library": "^6.160.0",
     "ts-jest": "^29.2.5",
     "typescript": "~4.9.5"
   },
@@ -67,5 +68,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "79b58e789386f0d9344f376b1779f782a5e2e32fe7e6a2aeade5aa18"
+  "falconPackageHash": "29f21fca1d7aa915ccd4ea1064cb917658e67ed2e333594929a7a111"
 }

package/dist/cjs/interact.js

@@ -1,308 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.Interact = void 0;
-exports.add = add;
-exports.remove = remove;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _WixInteractElement = require("./WixInteractElement");
-var _utils = require("./utils");
-var _handlers = _interopRequireDefault(require("./handlers"));
-var _Interact;
-function registerWixInteractElement() {
-  if (!customElements.get('wix-interact-element')) {
-    const wixInteractElement = (0, _WixInteractElement.getWixInteractElement)();
-    customElements.define('wix-interact-element', wixInteractElement);
-    return true;
-  }
-  return false;
-}
-class Interact {
-  constructor() {
-    (0, _defineProperty2.default)(this, "dataCache", void 0);
-    (0, _defineProperty2.default)(this, "addedInteractions", void 0);
-    this.dataCache = {
-      effects: {},
-      conditions: {},
-      interactions: {}
-    };
-    this.addedInteractions = {};
-  }
-  init(config) {
-    if (typeof window === 'undefined' || !window.customElements) {
-      return;
-    }
-    this.dataCache = parseConfig(config);
-    const didRegister = registerWixInteractElement();
-    if (!didRegister) {
-      Interact.elementCache.forEach((element, path) => element.connect(path));
-    }
-  }
-  has(path) {
-    return !!this.dataCache.interactions[path];
-  }
-  clearInteractionStateForPath(path) {
-    var _this$dataCache$inter;
-    const interactionIds = ((_this$dataCache$inter = this.dataCache.interactions[path]) == null ? void 0 : _this$dataCache$inter.interactionIds) || [];
-    interactionIds.forEach(interactionId => {
-      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete this.addedInteractions[interactionId];
-    });
-  }
-  static create(config) {
-    const instance = new Interact();
-    Interact.instances.push(instance);
-    instance.init(config);
-    return instance;
-  }
-  static getInstance(path) {
-    return Interact.instances.find(instance => instance.has(path));
-  }
-  static getElement(path) {
-    return Interact.elementCache.get(path);
-  }
-  static setElement(path, element) {
-    Interact.elementCache.set(path, element);
-  }
-}
-exports.Interact = Interact;
-_Interact = Interact;
-(0, _defineProperty2.default)(Interact, "forceReducedMotion", false);
-(0, _defineProperty2.default)(Interact, "instances", []);
-(0, _defineProperty2.default)(Interact, "elementCache", new Map());
-let interactionIdCounter = 0;
-
-/**
- * Parses the config object and caches interactions, effects, and conditions
- */
-function parseConfig(config) {
-  var _config$interactions;
-  const conditions = config.conditions || {};
-  const interactions = {};
-  (_config$interactions = config.interactions) == null || _config$interactions.forEach(interaction => {
-    var _interaction$effects, _interaction$effects2;
-    const source = interaction.source;
-    const interactionIdx = ++interactionIdCounter;
-    if (!source) {
-      console.error(`Interaction ${interactionIdx} is missing a source element.`);
-      return;
-    }
-    if (!interactions[source]) {
-      interactions[source] = {
-        triggers: [],
-        effects: {},
-        interactionIds: new Set()
-      };
-    }
-
-    /*
-     * Cache interaction trigger by source element
-     */
-    (_interaction$effects = interaction.effects) == null || _interaction$effects.reverse(); // reverse to ensure the first effect is the one that will be applied first
-
-    interactions[source].triggers.push(interaction);
-    (_interaction$effects2 = interaction.effects) == null || _interaction$effects2.forEach(effect => {
-      /*
-       * Target cascade order is the first of:
-       *  -> Config.interactions.effects.effect.target
-       *  -> Config.effects.effect.target
-       *  -> Config.interactions.interaction.source
-       */
-      let target = effect.target;
-      if (!target && effect.effectId) {
-        const referencedEffect = config.effects[effect.effectId];
-        if (referencedEffect) {
-          target = referencedEffect.target;
-        }
-      }
-      if (!effect.effectId) {
-        effect.effectId = (0, _utils.generateId)();
-      }
-
-      // if no target is specified, use the source element as the target
-      target = target || source;
-      effect.target = target;
-      const effectId = effect.effectId;
-      const interactionId = `${target}::${effectId}::${interactionIdx}`;
-      effect.interactionId = interactionId;
-      interactions[source].interactionIds.add(interactionId);
-      if (target === source) {
-        // if target is the source element, no need to add an interaction to `effects`
-        return;
-      }
-
-      /*
-       * Cache interaction effect by target element
-       */
-      if (!interactions[target]) {
-        interactions[target] = {
-          triggers: [],
-          effects: {
-            [interactionId]: []
-          },
-          interactionIds: new Set()
-        };
-      } else if (!interactions[target].effects[interactionId]) {
-        interactions[target].effects[interactionId] = [];
-        interactions[target].interactionIds.add(interactionId);
-      }
-      const {
-        effects,
-        ...rest
-      } = interaction;
-      interactions[target].effects[interactionId].push({
-        ...rest,
-        effect
-      });
-    });
-  });
-  return {
-    effects: config.effects || {},
-    conditions,
-    interactions
-  };
-}
-function _addInteraction(instance, interaction, sourceElement) {
-  const interactionVariations = {};
-  interaction.effects.forEach(effect => {
-    const effectId = effect.effectId;
-    const interactionId = effect.interactionId;
-    if (interactionVariations[interactionId]) {
-      // Skip this effect if it has already been added
-      return;
-    }
-    const effectOptions = {
-      ...(instance.dataCache.effects[effectId] || {}),
-      ...effect,
-      effectId
-    };
-    if (instance.addedInteractions[effectOptions.interactionId]) {
-      // Skip this interaction if it has already been added
-      return;
-    }
-
-    // TODO: implement watching for condition `change` events and add/remove interactions accordingly
-    const mql = (0, _utils.getMediaQuery)(effectOptions.conditions || [], instance.dataCache.conditions);
-    if (!mql || mql.matches) {
-      var _instance$dataCache$e, _Interact$getElement;
-      interactionVariations[effect.interactionId] = true;
-      const target = effect.target || effectId && ((_instance$dataCache$e = instance.dataCache.effects[effect.effectId]) == null ? void 0 : _instance$dataCache$e.target) || interaction.source;
-      const targetElement = (_Interact$getElement = Interact.getElement(target)) == null ? void 0 : _Interact$getElement.firstElementChild;
-      if (!targetElement) {
-        // Bail out :: no target element in cache
-        return;
-      }
-      instance.addedInteractions[effectOptions.interactionId] = true;
-      addInteraction(target, sourceElement, interaction.trigger, targetElement, effectOptions, interaction.params);
-    }
-  });
-}
-
-/**
- * Adds all events and effects to an element based on config
- */
-function add(element, path) {
-  const instance = Interact.getInstance(path);
-  const {
-    triggers = []
-  } = (instance == null ? void 0 : instance.dataCache.interactions[path]) || {};
-  const hasTriggers = triggers.length > 0;
-
-  // even if we don't find a matching instance, we still want to cache the element
-  Interact.setElement(path, element);
-  const triggerSourceElement = element.firstElementChild;
-  triggers.forEach(interaction => {
-    const mql = (0, _utils.getMediaQuery)(interaction.conditions, instance.dataCache.conditions);
-
-    // TODO: implement watching for condition `change` events and add/remove interactions accordingly
-    if (!mql || mql.matches) {
-      _addInteraction(instance, interaction, triggerSourceElement);
-    }
-  });
-  let hasEffects = false;
-  if (instance) {
-    hasEffects = addEffectsForTarget(path, element, instance);
-  }
-  return hasTriggers || hasEffects;
-}
-function addEffectsForTarget(path, element, instance) {
-  var _instance$dataCache$i;
-  const effects = ((_instance$dataCache$i = instance.dataCache.interactions[path]) == null ? void 0 : _instance$dataCache$i.effects) || {};
-  const interactionIds = Object.keys(effects);
-  interactionIds.forEach(interactionId => {
-    if (instance.addedInteractions[interactionId]) {
-      // Skip this interaction if it has already been added
-      return;
-    }
-    const effectVariations = effects[interactionId];
-
-    // use `some` to short-circuit after the first effect that matches the conditions
-    // eslint-disable-next-line array-callback-return
-    effectVariations.some(({
-      effect,
-      ...options
-    }) => {
-      const effectId = effect.effectId;
-      const effectOptions = {
-        ...(instance.dataCache.effects[effectId] || {}),
-        ...effect,
-        effectId
-      };
-
-      // TODO: implement watching for condition `change` events and add/remove interactions accordingly
-      const mql = (0, _utils.getMediaQuery)(effectOptions.conditions || [], instance.dataCache.conditions);
-      if (!mql || mql.matches) {
-        var _Interact$getElement2;
-        const targetElement = element.firstElementChild;
-        const sourceElement = (_Interact$getElement2 = Interact.getElement(options.source)) == null ? void 0 : _Interact$getElement2.firstElementChild;
-        if (!sourceElement) {
-          // Bail out :: no source or target elements in cache
-          return true;
-        }
-        instance.addedInteractions[interactionId] = true;
-        addInteraction(path, sourceElement, options.trigger, targetElement, effectOptions, options.params);
-
-        // short-circuit the loop since we have a match
-        return true;
-      }
-    });
-  });
-  return interactionIds.length > 0;
-}
-
-/**
- * Registers a handler to an event on a given element.
- */
-function addInteraction(path, source, trigger, target, effect, options) {
-  var _TRIGGER_TO_HANDLER_M;
-  if (effect.transition || effect.transitionProperties) {
-    const args = {
-      path,
-      effectId: effect.effectId,
-      transition: effect.transition,
-      properties: effect.transitionProperties
-    };
-    if (target.id) {
-      // temporarily allow using the target's id as the element selector to override default styles in cases ids are used
-      args.childSelector = `#${target.id}`;
-    }
-    target.parentElement.renderStyle((0, _utils.createTransitionCSS)(args));
-  }
-  (_TRIGGER_TO_HANDLER_M = _handlers.default[trigger]) == null || _TRIGGER_TO_HANDLER_M.add(source, target, effect, options, Interact.forceReducedMotion);
-}
-
-/**
- * Removes all events and effects from an element based on config
- */
-function remove(path) {
-  var _Interact$getElement3, _Interact$getInstance;
-  const element = (_Interact$getElement3 = Interact.getElement(path)) == null ? void 0 : _Interact$getElement3.firstElementChild;
-  if (!element) {
-    return;
-  }
-  Object.values(_handlers.default).forEach(module => module.remove(element));
-  (_Interact$getInstance = Interact.getInstance(path)) == null || _Interact$getInstance.clearInteractionStateForPath(path);
-  Interact.elementCache.delete(path);
-}
-//# sourceMappingURL=interact.js.map