@wix/interact 1.74.0 → 1.76.0

package/dist/cjs/index.js

@@ -7,10 +7,12 @@ var _exportNames = {
   remove: true
 };
 exports.remove = exports.add = exports.Interact = void 0;
-var _interact = require("./interact");
-exports.Interact = _interact.Interact;
-exports.add = _interact.add;
-exports.remove = _interact.remove;
+var _Interact = require("./core/Interact");
+exports.Interact = _Interact.Interact;
+var _add = require("./core/add");
+exports.add = _add.add;
+var _remove = require("./core/remove");
+exports.remove = _remove.remove;
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_interact","require","exports","Interact","add","remove","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames"],"sources":["../../src/index.ts"],"sourcesContent":["export { Interact, add, remove } from './interact';\n\nexport * from './types';\n"],"mappings":";;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAAmDC,OAAA,CAAAC,QAAA,GAAAH,SAAA,CAAAG,QAAA;AAAAD,OAAA,CAAAE,GAAA,GAAAJ,SAAA,CAAAI,GAAA;AAAAF,OAAA,CAAAG,MAAA,GAAAL,SAAA,CAAAK,MAAA;AAEnD,IAAAC,MAAA,GAAAL,OAAA;AAAAM,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAR,OAAA,IAAAA,OAAA,CAAAQ,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAR,OAAA,CAAAQ,GAAA,IAAAJ,MAAA,CAAAI,GAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["_Interact","require","exports","Interact","_add","add","_remove","remove","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames"],"sources":["../../src/index.ts"],"sourcesContent":["export { Interact } from './core/Interact';\nexport { add } from './core/add';\nexport { remove } from './core/remove';\n\nexport * from './types';\n"],"mappings":";;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAA2CC,OAAA,CAAAC,QAAA,GAAAH,SAAA,CAAAG,QAAA;AAC3C,IAAAC,IAAA,GAAAH,OAAA;AAAiCC,OAAA,CAAAG,GAAA,GAAAD,IAAA,CAAAC,GAAA;AACjC,IAAAC,OAAA,GAAAL,OAAA;AAAuCC,OAAA,CAAAK,MAAA,GAAAD,OAAA,CAAAC,MAAA;AAEvC,IAAAC,MAAA,GAAAP,OAAA;AAAAQ,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAV,OAAA,IAAAA,OAAA,CAAAU,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAV,OAAA,CAAAU,GAAA,IAAAJ,MAAA,CAAAI,GAAA;AAAA","ignoreList":[]}

package/dist/cjs/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/cjs/utils.js

@@ -10,11 +10,11 @@ function generateId() {
   );
 }
 function createTransitionCSS({
-  path,
+  key,
   effectId,
   transition,
   properties,
-  childSelector = ':first-child'
+  childSelector = '> :first-child'
 }) {
   var _properties2;
   let transitions = [];
@@ -39,16 +39,18 @@ function createTransitionCSS({
     transitions = ((_properties = properties) == null ? void 0 : _properties.filter(property => property.duration).map(property => `${property.name} ${property.duration}ms ${(0, _motion.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;
 }
 function getMediaQuery(conditionNames, conditions) {
   const conditionContent = (conditionNames || []).filter(conditionName => {

package/dist/cjs/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_motion","require","generateId","replace","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","path","effectId","transition","properties","childSelector","_properties2","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","getEasing","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":["_motion","require","generateId","replace","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","key","effectId","transition","properties","childSelector","_properties2","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","getEasing","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/esm/WixInteractElement.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { add, remove } from './interact';
+import { add, addListItems } from './core/add';
+import { remove, removeListItems } from './core/remove';
 export const WIX_INTERACT_EFFECT_DATA_ATTR = 'wixInteractEffect';
 export function getWixInteractElement() {
   let checkedForLegacyStateSyntax = false;
@@ -10,8 +11,10 @@ export function getWixInteractElement() {
       _defineProperty(this, "_internals", void 0);
       _defineProperty(this, "connected", void 0);
       _defineProperty(this, "sheet", void 0);
+      _defineProperty(this, "_observers", void 0);
       this.connected = false;
       this.sheet = null;
+      this._observers = new WeakMap();
       if (this.attachInternals) {
         this._internals = this.attachInternals();
         if (!checkedForLegacyStateSyntax) {
@@ -32,37 +35,45 @@ export function getWixInteractElement() {
       this.connect();
     }
     disconnectedCallback() {
-      const path = this.dataset.wixPath;
-      if (path) {
-        remove(path);
+      const key = this.dataset.wixPath;
+      if (key) {
+        remove(key);
       }
       if (this.sheet) {
         const index = document.adoptedStyleSheets.indexOf(this.sheet);
         document.adoptedStyleSheets.splice(index, 1);
       }
+      this._observers = new WeakMap();
       this.connected = false;
     }
-    connect(path) {
+    connect(key) {
       if (this.connected) {
         return;
       }
-      path = path || this.dataset.wixPath;
-      if (!path) {
-        console.warn('WixInteractElement: No path provided');
+      key = key || this.dataset.wixPath;
+      if (!key) {
+        console.warn('WixInteractElement: No key provided');
         return;
       }
-      if (this.firstElementChild) {
-        this.connected = add(this, path);
+      this.connected = add(this, key);
+    }
+    renderStyle(cssRules) {
+      if (!this.sheet) {
+        this.sheet = new CSSStyleSheet();
+        void this.sheet.replace(cssRules.join('\n'));
+        document.adoptedStyleSheets.push(this.sheet);
       } else {
-        console.warn('WixInteractElement: No child element found');
+        let position = this.sheet.cssRules.length;
+        for (const cssRule of cssRules) {
+          try {
+            this.sheet.insertRule(cssRule, position);
+            position++;
+          } catch (e) {
+            console.error(e);
+          }
+        }
       }
     }
-    renderStyle(cssText) {
-      const sheet = new CSSStyleSheet();
-      this.sheet = sheet;
-      sheet.replace(cssText);
-      document.adoptedStyleSheets.push(sheet);
-    }
     toggleEffect(effectId, method) {
       if (isLegacyStateSyntax) {
         effectId = `--${effectId}`;
@@ -92,6 +103,39 @@ export function getWixInteractElement() {
         this.dataset[WIX_INTERACT_EFFECT_DATA_ATTR] = Array.from(currentEffects).join(' ');
       }
     }
+    watchChildList(listContainer) {
+      const list = this.querySelector(listContainer);
+      if (list) {
+        // TODO: we can probably improve this and use less observers, this impl. uses one per container element
+        let observer = this._observers.get(list);
+        if (!observer) {
+          observer = new MutationObserver(this._childListChangeHandler.bind(this, listContainer));
+          this._observers.set(list, observer);
+          observer.observe(list, {
+            childList: true
+          });
+        }
+      }
+    }
+    _childListChangeHandler(listContainer, entries) {
+      const key = this.dataset.wixPath;
+      const removedElements = [];
+      const addedElements = [];
+      entries.forEach(entry => {
+        entry.removedNodes.forEach(el => {
+          if (el instanceof HTMLElement) {
+            removedElements.push(el);
+          }
+        });
+        entry.addedNodes.forEach(el => {
+          if (el instanceof HTMLElement) {
+            addedElements.push(el);
+          }
+        });
+      });
+      removeListItems(removedElements);
+      key && addListItems(this, key, listContainer, addedElements);
+    }
   };
 }
 //# sourceMappingURL=WixInteractElement.js.map

package/dist/esm/WixInteractElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["add","remove","WIX_INTERACT_EFFECT_DATA_ATTR","getWixInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","WixInteractElement","HTMLElement","constructor","_defineProperty","connected","sheet","attachInternals","_internals","states","delete","e","connectedCallback","connect","disconnectedCallback","path","dataset","wixPath","index","document","adoptedStyleSheets","indexOf","splice","console","warn","firstElementChild","renderStyle","cssText","CSSStyleSheet","replace","push","toggleEffect","effectId","method","has","clear","_this$dataset$WIX_INT","currentEffects","Set","split","Array","from","join"],"sources":["../../src/WixInteractElement.ts"],"sourcesContent":["import type { StateParams } from './types';\nimport { add, remove } from './interact';\n\nexport const WIX_INTERACT_EFFECT_DATA_ATTR = 'wixInteractEffect';\n\nexport function getWixInteractElement() {\n  let checkedForLegacyStateSyntax = false;\n  let isLegacyStateSyntax = false;\n\n  return class WixInteractElement extends HTMLElement {\n    _internals: (ElementInternals & { states: Set<string> }) | null;\n    connected: boolean;\n    sheet: CSSStyleSheet | null;\n\n    constructor() {\n      super();\n\n      this.connected = false;\n      this.sheet = null;\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      const path = this.dataset.wixPath;\n\n      if (path) {\n        remove(path);\n      }\n\n      if (this.sheet) {\n        const index = document.adoptedStyleSheets.indexOf(this.sheet);\n        document.adoptedStyleSheets.splice(index, 1);\n      }\n\n      this.connected = false;\n    }\n\n    connect(path?: string) {\n      if (this.connected) {\n        return;\n      }\n\n      path = path || this.dataset.wixPath;\n\n      if (!path) {\n        console.warn('WixInteractElement: No path provided');\n        return;\n      }\n\n      if (this.firstElementChild) {\n        this.connected = add(this, path);\n      } else {\n        console.warn('WixInteractElement: No child element found');\n      }\n    }\n\n    renderStyle(cssText: string) {\n      const sheet = new CSSStyleSheet();\n      this.sheet = sheet;\n\n      sheet.replace(cssText);\n\n      document.adoptedStyleSheets.push(sheet);\n    }\n\n    toggleEffect(effectId: string, method: StateParams['method']) {\n      if (isLegacyStateSyntax) {\n        effectId = `--${effectId}`;\n      }\n\n      if (this._internals) {\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[WIX_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        this.dataset[WIX_INTERACT_EFFECT_DATA_ATTR] =\n          Array.from(currentEffects).join(' ');\n      }\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["add","addListItems","remove","removeListItems","WIX_INTERACT_EFFECT_DATA_ATTR","getWixInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","WixInteractElement","HTMLElement","constructor","_defineProperty","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","delete","e","connectedCallback","connect","disconnectedCallback","key","dataset","wixPath","index","document","adoptedStyleSheets","indexOf","splice","console","warn","renderStyle","cssRules","CSSStyleSheet","replace","join","push","position","length","cssRule","insertRule","error","toggleEffect","effectId","method","has","clear","_this$dataset$WIX_INT","currentEffects","Set","split","Array","from","watchChildList","listContainer","list","querySelector","observer","get","MutationObserver","_childListChangeHandler","bind","set","observe","childList","entries","removedElements","addedElements","forEach","entry","removedNodes","el","addedNodes"],"sources":["../../src/WixInteractElement.ts"],"sourcesContent":["import type { StateParams } from './types';\nimport { add, addListItems } from './core/add';\nimport { remove, removeListItems } from './core/remove';\n\nexport const WIX_INTERACT_EFFECT_DATA_ATTR = 'wixInteractEffect';\n\nexport function getWixInteractElement() {\n  let checkedForLegacyStateSyntax = false;\n  let isLegacyStateSyntax = false;\n\n  return class WixInteractElement 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      const key = this.dataset.wixPath;\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.wixPath;\n\n      if (!key) {\n        console.warn('WixInteractElement: 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(effectId: string, method: StateParams['method']) {\n      if (isLegacyStateSyntax) {\n        effectId = `--${effectId}`;\n      }\n\n      if (this._internals) {\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[WIX_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        this.dataset[WIX_INTERACT_EFFECT_DATA_ATTR] =\n          Array.from(currentEffects).join(' ');\n      }\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.wixPath;\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":[]}