@wix/interact 1.83.0 → 1.85.0

package/dist/esm/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n  NamedEffect,\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: (element: HTMLElement, progress: any) => void;\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  disconnect(): 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":[]}
+{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n  NamedEffect,\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: (element: Element, progress: any) => void;\n    };\n\nexport type TimeEffect = {\n  duration: number;\n  easing?: string;\n  iterations?: number;\n  alternate?: boolean;\n  fill?: Fill;\n  reversed?: boolean;\n  delay?: number;\n} & EffectEffectProperty;\n\nexport type ScrubEffect = {\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 EffectBase = {\n  key?: string;\n  listContainer?: string;\n  listItemSelector?: string;\n  conditions?: string[];\n  selector?: string;\n  effectId?: string;\n};\n\nexport type EffectRef = EffectBase & { effectId: string };\n\nexport type Effect = EffectBase & (TimeEffect | ScrubEffect | TransitionEffect);\n\nexport type Condition = {\n  type: 'media' | 'container';\n  predicate?: string;\n};\n\nexport type InteractionTrigger = {\n  key: string;\n  listContainer?: string;\n  listItemSelector?: 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  disconnect(): void;\n  renderStyle(cssRules: string[]): void;\n  toggleEffect(\n    effectId: string,\n    method: StateParams['method'],\n    item?: HTMLElement | null,\n  ): 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/types/WixInteractElement.d.ts

@@ -13,7 +13,7 @@ export declare function getWixInteractElement(): {
         disconnect(): void;
         connect(key?: string): void;
         renderStyle(cssRules: string[]): void;
-        toggleEffect(effectId: string, method: StateParams['method']): void;
+        toggleEffect(effectId: string, method: StateParams['method'], item?: HTMLElement | null): void;
         getActiveEffects(): string[];
         watchChildList(listContainer: string): void;
         _childListChangeHandler(listContainer: string, entries: MutationRecord[]): void;

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

@@ -19,11 +19,15 @@ export declare class Interact {
     setElement(key: string, element: IWixInteractElement): void;
     deleteElement(key: string): void;
     has(key: string): boolean;
+    get(key: string): InteractCache['interactions'][string] | undefined;
     clearInteractionStateForKey(key: string): void;
     static create(config: InteractConfig): Interact;
     static destroy(): void;
     static getInstance(key: string): Interact | undefined;
-    static getElement(key: string): IWixInteractElement | undefined;
+    static getElement(key: string | undefined): IWixInteractElement | undefined;
     static setElement(key: string, element: IWixInteractElement): void;
 }
-export declare function getSelector(d: Interaction | Effect, asCombinator?: boolean): string;
+export declare function getSelector(d: Interaction | Effect, { asCombinator, addItemFilter, }?: {
+    asCombinator?: boolean;
+    addItemFilter?: boolean;
+}): string;

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

@@ -0,0 +1,2 @@
+export declare function _processKeysForInterpolation(key: string): string[];
+export declare function getInterpolatedKey(template: string, key: string): string;

package/dist/types/handlers/click.d.ts

@@ -1,5 +1,5 @@
-import type { TimeEffect, TransitionEffect, StateParams, PointerTriggerParams } from '../types';
-declare function addClickHandler(source: HTMLElement, target: HTMLElement, effect: TimeEffect | TransitionEffect, options?: StateParams | PointerTriggerParams, reducedMotion?: boolean): void;
+import type { TimeEffect, TransitionEffect, StateParams, PointerTriggerParams, EffectBase } from '../types';
+declare function addClickHandler(source: HTMLElement, target: HTMLElement, effect: (TimeEffect | TransitionEffect) & EffectBase, options?: StateParams | PointerTriggerParams, reducedMotion?: boolean): void;
 declare function removeClickHandler(element: HTMLElement): void;
 declare const _default: {
     add: typeof addClickHandler;

package/dist/types/handlers/hover.d.ts

@@ -1,5 +1,5 @@
-import type { TimeEffect, TransitionEffect, StateParams, PointerTriggerParams } from '../types';
-declare function addHoverHandler(source: HTMLElement, target: HTMLElement, effect: TransitionEffect | TimeEffect, options?: StateParams | PointerTriggerParams, reducedMotion?: boolean): void;
+import type { TimeEffect, TransitionEffect, StateParams, PointerTriggerParams, EffectBase } from '../types';
+declare function addHoverHandler(source: HTMLElement, target: HTMLElement, effect: (TransitionEffect | TimeEffect) & EffectBase, options?: StateParams | PointerTriggerParams, reducedMotion?: boolean): void;
 declare function removeHoverHandler(element: HTMLElement): void;
 declare const _default: {
     add: typeof addHoverHandler;

package/dist/types/types.d.ts

@@ -40,10 +40,9 @@ type EffectEffectProperty = {
 } | {
     namedEffect: NamedEffect;
 } | {
-    customEffect: (element: HTMLElement, progress: any) => void;
+    customEffect: (element: Element, progress: any) => void;
 };
 export type TimeEffect = {
-    key?: string;
     duration: number;
     easing?: string;
     iterations?: number;
@@ -51,10 +50,8 @@ export type TimeEffect = {
     fill?: Fill;
     reversed?: boolean;
     delay?: number;
-    effectId?: string;
 } & EffectEffectProperty;
 export type ScrubEffect = {
-    key?: string;
     easing?: string;
     iterations?: number;
     alternate?: boolean;
@@ -86,18 +83,18 @@ export type TransitionEffect = {
     };
     transitionProperties?: TransitionProperty[];
 };
-export type EffectRef = {
+export type EffectBase = {
     key?: string;
-    effectId: string;
     listContainer?: string;
+    listItemSelector?: string;
     conditions?: string[];
     selector?: string;
+    effectId?: string;
 };
-export type Effect = (TimeEffect | ScrubEffect | TransitionEffect) & {
-    listContainer?: string;
-    conditions?: string[];
-    selector?: string;
+export type EffectRef = EffectBase & {
+    effectId: string;
 };
+export type Effect = EffectBase & (TimeEffect | ScrubEffect | TransitionEffect);
 export type Condition = {
     type: 'media' | 'container';
     predicate?: string;
@@ -105,6 +102,7 @@ export type Condition = {
 export type InteractionTrigger = {
     key: string;
     listContainer?: string;
+    listItemSelector?: string;
     trigger: TriggerType;
     params?: TriggerParams;
     conditions?: string[];
@@ -133,7 +131,7 @@ export interface IWixInteractElement extends HTMLElement {
     connect(path?: string): void;
     disconnect(): void;
     renderStyle(cssRules: string[]): void;
-    toggleEffect(effectId: string, method: StateParams['method']): void;
+    toggleEffect(effectId: string, method: StateParams['method'], item?: HTMLElement | null): void;
     watchChildList(listContainer: string): void;
 }
 export type InteractionParamsTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/interact",
-  "version": "1.83.0",
+  "version": "1.85.0",
   "author": {
     "name": "wow!Team",
     "email": "wow-dev@wix.com"
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@wix/motion": "1.638.0",
+    "@wix/motion": "1.644.0",
     "fizban": "^0.7.0",
     "kuliso": "^0.4.13"
   },
@@ -68,5 +68,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "1c70ef92876fd31c94d4ae11f2d12fb3843baab2f238cbae6ee5288b"
+  "falconPackageHash": "35f45841475e6394652519a9d4346a1b4276fa35248c8f9f59aafaf0"
 }