@wix/interact 1.86.0 → 1.89.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      'interact-element': React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement>,\n        HTMLElement\n      > & {\n        'data-interact-key'?: 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 IInteractElement 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":[]}
+{"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      'interact-element': React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement>,\n        HTMLElement\n      > & {\n        'data-interact-key'?: 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  useSafeViewEnter?: boolean;\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 IInteractElement 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  registerOptionsGetter?: (getter: () => any) => void;\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 ViewEnterHandlerModule = InteractionHandlerModule<'viewEnter'> & {\n  setOptions: (options: Partial<ViewEnterParams>) => 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/core/Interact.d.ts

@@ -1,4 +1,4 @@
-import { InteractCache, IInteractElement, InteractConfig, Effect, Interaction } from '../types';
+import { InteractCache, IInteractElement, InteractConfig, Effect, Interaction, ViewEnterParams } from '../types';
 export declare class Interact {
     dataCache: InteractCache;
     addedInteractions: {
@@ -23,6 +23,11 @@ export declare class Interact {
     clearInteractionStateForKey(key: string): void;
     static create(config: InteractConfig): Interact;
     static destroy(): void;
+    static setup(options: {
+        scrollOptionsGetter?: () => Partial<scrollConfig>;
+        pointerOptionsGetter?: () => Partial<PointerConfig>;
+        viewEnter?: Partial<ViewEnterParams>;
+    }): void;
     static getInstance(key: string): Interact | undefined;
     static getElement(key: string | undefined): IInteractElement | undefined;
     static setElement(key: string, element: IInteractElement): void;

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

@@ -1,8 +1,10 @@
 import type { PointerMoveParams, ScrubEffect } from '../types';
+declare function registerOptionsGetter(getter: () => Partial<PointerConfig>): void;
 declare function addPointerMoveHandler(source: HTMLElement, target: HTMLElement, effect: ScrubEffect, options?: PointerMoveParams, reducedMotion?: boolean): void;
 declare function removePointerMoveHandler(element: HTMLElement): void;
 declare const _default: {
     add: typeof addPointerMoveHandler;
     remove: typeof removePointerMoveHandler;
+    registerOptionsGetter: typeof registerOptionsGetter;
 };
 export default _default;

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

@@ -1,8 +1,10 @@
 import type { TimeEffect, ViewEnterParams } from '../types';
+declare function setOptions(options: Partial<ViewEnterParams>): void;
 declare function addViewEnterHandler(source: HTMLElement, target: HTMLElement, effect: TimeEffect, options?: ViewEnterParams, reducedMotion?: boolean): void;
 declare function removeViewEnterHandler(element: HTMLElement): void;
 declare const _default: {
     add: typeof addViewEnterHandler;
     remove: typeof removeViewEnterHandler;
+    setOptions: typeof setOptions;
 };
 export default _default;

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

@@ -1,8 +1,10 @@
 import type { ViewEnterParams, ScrubEffect } from '../types';
+declare function registerOptionsGetter(getter: () => scrollConfig): void;
 declare function addViewProgressHandler(source: HTMLElement, target: HTMLElement, effect: ScrubEffect, __: ViewEnterParams, reducedMotion?: boolean): void;
 declare function removeViewProgressHandler(element: HTMLElement): void;
 declare const _default: {
     add: typeof addViewProgressHandler;
     remove: typeof removeViewProgressHandler;
+    registerOptionsGetter: typeof registerOptionsGetter;
 };
 export default _default;

package/dist/types/types.d.ts

@@ -22,6 +22,7 @@ export type ViewEnterParams = {
     type?: ViewEnterType;
     threshold?: number;
     inset?: string;
+    useSafeViewEnter?: boolean;
 };
 export type PointerMoveParams = {
     hitArea?: 'root' | 'self';
@@ -144,9 +145,13 @@ export type InteractionParamsTypes = {
     pointerMove: PointerMoveParams;
 };
 export type InteractionHandlerModule<T extends TriggerType> = {
+    registerOptionsGetter?: (getter: () => any) => void;
     add: (source: HTMLElement, target: HTMLElement, effect: Effect, options: InteractionParamsTypes[T], reducedMotion?: boolean) => void;
     remove: (element: HTMLElement) => void;
 };
+export type ViewEnterHandlerModule = InteractionHandlerModule<'viewEnter'> & {
+    setOptions: (options: Partial<ViewEnterParams>) => void;
+};
 export type TriggerHandlerMap<T extends TriggerType> = {
     [K in T]: InteractionHandlerModule<K>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/interact",
-  "version": "1.86.0",
+  "version": "1.89.0",
   "author": {
     "name": "wow!Team",
     "email": "wow-dev@wix.com"
@@ -32,16 +32,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@wix/motion": "1.646.0",
+    "@wix/motion": "1.655.0",
+    "fastdom": "^1.0.12",
     "fizban": "^0.7.0",
     "kuliso": "^0.4.13"
   },
   "devDependencies": {
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.123",
-    "@wix/eslint-config-yoshi": "^6.162.0",
-    "@wix/jest-yoshi-preset": "^6.162.0",
-    "@wix/yoshi-flow-library": "^6.162.0",
+    "@wix/eslint-config-yoshi": "^6.163.0",
+    "@wix/jest-yoshi-preset": "^6.163.0",
+    "@wix/yoshi-flow-library": "^6.163.0",
     "ts-jest": "^29.2.5",
     "typescript": "~4.9.5"
   },
@@ -68,5 +69,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "9147100cac5b54e70fd42196ea60c4913d4e231e7e78b313ad311a90"
+  "falconPackageHash": "30a4b08c0940ff16d531c1707cd5c2523c58d09d75e91b9eec2f1630"
 }