@wix/interact 1.92.0 → 2.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/dist/cjs/index.js +2 -23
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/react.js +15 -0
  4. package/dist/cjs/react.js.map +1 -0
  5. package/dist/cjs/web.js +2 -0
  6. package/dist/cjs/web.js.map +1 -0
  7. package/dist/es/index.js +8 -0
  8. package/dist/es/index.js.map +1 -0
  9. package/dist/es/react.js +650 -0
  10. package/dist/es/react.js.map +1 -0
  11. package/dist/es/web.js +56 -0
  12. package/dist/es/web.js.map +1 -0
  13. package/dist/index-C8QxOkui.mjs +7940 -0
  14. package/dist/index-C8QxOkui.mjs.map +1 -0
  15. package/dist/index-DEPRHaUt.js +18 -0
  16. package/dist/index-DEPRHaUt.js.map +1 -0
  17. package/dist/tsconfig.build.tsbuildinfo +1 -0
  18. package/dist/types/core/Interact.d.ts +17 -7
  19. package/dist/types/core/Interact.d.ts.map +1 -0
  20. package/dist/types/core/InteractionController.d.ts +19 -0
  21. package/dist/types/core/InteractionController.d.ts.map +1 -0
  22. package/dist/types/core/add.d.ts +4 -3
  23. package/dist/types/core/add.d.ts.map +1 -0
  24. package/dist/types/core/css.d.ts +3 -0
  25. package/dist/types/core/css.d.ts.map +1 -0
  26. package/dist/types/core/remove.d.ts +3 -1
  27. package/dist/types/core/remove.d.ts.map +1 -0
  28. package/dist/types/core/utilities.d.ts +1 -0
  29. package/dist/types/core/utilities.d.ts.map +1 -0
  30. package/dist/types/dom/api.d.ts +3 -0
  31. package/dist/types/dom/api.d.ts.map +1 -0
  32. package/dist/types/handlers/animationEnd.d.ts +3 -2
  33. package/dist/types/handlers/animationEnd.d.ts.map +1 -0
  34. package/dist/types/handlers/click.d.ts +3 -2
  35. package/dist/types/handlers/click.d.ts.map +1 -0
  36. package/dist/types/handlers/hover.d.ts +3 -2
  37. package/dist/types/handlers/hover.d.ts.map +1 -0
  38. package/dist/types/handlers/index.d.ts +1 -0
  39. package/dist/types/handlers/index.d.ts.map +1 -0
  40. package/dist/types/handlers/pointerMove.d.ts +3 -2
  41. package/dist/types/handlers/pointerMove.d.ts.map +1 -0
  42. package/dist/types/handlers/utilities.d.ts +1 -0
  43. package/dist/types/handlers/utilities.d.ts.map +1 -0
  44. package/dist/types/handlers/viewEnter.d.ts +3 -2
  45. package/dist/types/handlers/viewEnter.d.ts.map +1 -0
  46. package/dist/types/handlers/viewProgress.d.ts +4 -3
  47. package/dist/types/handlers/viewProgress.d.ts.map +1 -0
  48. package/dist/types/index.d.ts +3 -2
  49. package/dist/types/index.d.ts.map +1 -0
  50. package/dist/types/react/Interaction.d.ts +10 -0
  51. package/dist/types/react/Interaction.d.ts.map +1 -0
  52. package/dist/types/react/index.d.ts +8 -0
  53. package/dist/types/react/index.d.ts.map +1 -0
  54. package/dist/types/react/interactRef.d.ts +3 -0
  55. package/dist/types/react/interactRef.d.ts.map +1 -0
  56. package/dist/types/types.d.ts +25 -10
  57. package/dist/types/types.d.ts.map +1 -0
  58. package/dist/types/utils.d.ts +4 -2
  59. package/dist/types/utils.d.ts.map +1 -0
  60. package/dist/types/{InteractElement.d.ts → web/InteractElement.d.ts} +115 -77
  61. package/dist/types/web/InteractElement.d.ts.map +1 -0
  62. package/dist/types/web/defineInteractElement.d.ts +2 -0
  63. package/dist/types/web/defineInteractElement.d.ts.map +1 -0
  64. package/dist/types/web/index.d.ts +6 -0
  65. package/dist/types/web/index.d.ts.map +1 -0
  66. package/docs/README.md +211 -0
  67. package/docs/advanced/README.md +164 -0
  68. package/docs/api/README.md +157 -0
  69. package/docs/api/element-selection.md +607 -0
  70. package/docs/api/functions.md +638 -0
  71. package/docs/api/interact-class.md +663 -0
  72. package/docs/api/interact-element.md +565 -0
  73. package/docs/api/interaction-controller.md +450 -0
  74. package/docs/api/types.md +957 -0
  75. package/docs/examples/README.md +212 -0
  76. package/docs/examples/click-interactions.md +977 -0
  77. package/docs/examples/entrance-animations.md +935 -0
  78. package/docs/examples/hover-effects.md +930 -0
  79. package/docs/examples/list-patterns.md +737 -0
  80. package/docs/guides/README.md +49 -0
  81. package/docs/guides/conditions-and-media-queries.md +1068 -0
  82. package/docs/guides/configuration-structure.md +726 -0
  83. package/docs/guides/custom-elements.md +327 -0
  84. package/docs/guides/effects-and-animations.md +634 -0
  85. package/docs/guides/getting-started.md +379 -0
  86. package/docs/guides/lists-and-dynamic-content.md +713 -0
  87. package/docs/guides/state-management.md +747 -0
  88. package/docs/guides/understanding-triggers.md +690 -0
  89. package/docs/integration/README.md +264 -0
  90. package/docs/integration/react.md +605 -0
  91. package/package.json +73 -56
  92. package/rules/Integration.md +255 -0
  93. package/rules/click-rules.md +533 -0
  94. package/rules/full-lean.md +346 -0
  95. package/rules/hover-rules.md +593 -0
  96. package/rules/pointermove-rules.md +1341 -0
  97. package/rules/scroll-list-rules.md +900 -0
  98. package/rules/viewenter-rules.md +1015 -0
  99. package/rules/viewprogress-rules.md +1044 -0
  100. package/dist/cjs/InteractElement.js +0 -162
  101. package/dist/cjs/InteractElement.js.map +0 -1
  102. package/dist/cjs/__tests__/interact.spec.js +0 -1930
  103. package/dist/cjs/__tests__/interact.spec.js.map +0 -1
  104. package/dist/cjs/__tests__/viewEnter.spec.js +0 -207
  105. package/dist/cjs/__tests__/viewEnter.spec.js.map +0 -1
  106. package/dist/cjs/core/Interact.js +0 -257
  107. package/dist/cjs/core/Interact.js.map +0 -1
  108. package/dist/cjs/core/add.js +0 -246
  109. package/dist/cjs/core/add.js.map +0 -1
  110. package/dist/cjs/core/remove.js +0 -35
  111. package/dist/cjs/core/remove.js.map +0 -1
  112. package/dist/cjs/core/utilities.js +0 -16
  113. package/dist/cjs/core/utilities.js.map +0 -1
  114. package/dist/cjs/external-types.d.js +0 -2
  115. package/dist/cjs/external-types.d.js.map +0 -1
  116. package/dist/cjs/handlers/animationEnd.js +0 -33
  117. package/dist/cjs/handlers/animationEnd.js.map +0 -1
  118. package/dist/cjs/handlers/click.js +0 -116
  119. package/dist/cjs/handlers/click.js.map +0 -1
  120. package/dist/cjs/handlers/hover.js +0 -141
  121. package/dist/cjs/handlers/hover.js.map +0 -1
  122. package/dist/cjs/handlers/index.js +0 -32
  123. package/dist/cjs/handlers/index.js.map +0 -1
  124. package/dist/cjs/handlers/pointerMove.js +0 -49
  125. package/dist/cjs/handlers/pointerMove.js.map +0 -1
  126. package/dist/cjs/handlers/utilities.js +0 -49
  127. package/dist/cjs/handlers/utilities.js.map +0 -1
  128. package/dist/cjs/handlers/viewEnter.js +0 -127
  129. package/dist/cjs/handlers/viewEnter.js.map +0 -1
  130. package/dist/cjs/handlers/viewProgress.js +0 -65
  131. package/dist/cjs/handlers/viewProgress.js.map +0 -1
  132. package/dist/cjs/test-types.d.js +0 -2
  133. package/dist/cjs/test-types.d.js.map +0 -1
  134. package/dist/cjs/types.js +0 -2
  135. package/dist/cjs/types.js.map +0 -1
  136. package/dist/cjs/utils.js +0 -68
  137. package/dist/cjs/utils.js.map +0 -1
  138. package/dist/esm/InteractElement.js +0 -156
  139. package/dist/esm/InteractElement.js.map +0 -1
  140. package/dist/esm/__tests__/interact.spec.js +0 -1937
  141. package/dist/esm/__tests__/interact.spec.js.map +0 -1
  142. package/dist/esm/__tests__/viewEnter.spec.js +0 -210
  143. package/dist/esm/__tests__/viewEnter.spec.js.map +0 -1
  144. package/dist/esm/core/Interact.js +0 -251
  145. package/dist/esm/core/Interact.js.map +0 -1
  146. package/dist/esm/core/add.js +0 -241
  147. package/dist/esm/core/add.js.map +0 -1
  148. package/dist/esm/core/remove.js +0 -30
  149. package/dist/esm/core/remove.js.map +0 -1
  150. package/dist/esm/core/utilities.js +0 -14
  151. package/dist/esm/core/utilities.js.map +0 -1
  152. package/dist/esm/external-types.d.js +0 -2
  153. package/dist/esm/external-types.d.js.map +0 -1
  154. package/dist/esm/handlers/animationEnd.js +0 -29
  155. package/dist/esm/handlers/animationEnd.js.map +0 -1
  156. package/dist/esm/handlers/click.js +0 -116
  157. package/dist/esm/handlers/click.js.map +0 -1
  158. package/dist/esm/handlers/hover.js +0 -141
  159. package/dist/esm/handlers/hover.js.map +0 -1
  160. package/dist/esm/handlers/index.js +0 -27
  161. package/dist/esm/handlers/index.js.map +0 -1
  162. package/dist/esm/handlers/pointerMove.js +0 -48
  163. package/dist/esm/handlers/pointerMove.js.map +0 -1
  164. package/dist/esm/handlers/utilities.js +0 -43
  165. package/dist/esm/handlers/utilities.js.map +0 -1
  166. package/dist/esm/handlers/viewEnter.js +0 -129
  167. package/dist/esm/handlers/viewEnter.js.map +0 -1
  168. package/dist/esm/handlers/viewProgress.js +0 -61
  169. package/dist/esm/handlers/viewProgress.js.map +0 -1
  170. package/dist/esm/index.js +0 -5
  171. package/dist/esm/index.js.map +0 -1
  172. package/dist/esm/test-types.d.js +0 -2
  173. package/dist/esm/test-types.d.js.map +0 -1
  174. package/dist/esm/types.js +0 -2
  175. package/dist/esm/types.js.map +0 -1
  176. package/dist/esm/utils.js +0 -63
  177. package/dist/esm/utils.js.map +0 -1
  178. package/dist/types/__tests__/interact.spec.d.ts +0 -1
  179. package/dist/types/__tests__/viewEnter.spec.d.ts +0 -0
@@ -1,61 +0,0 @@
1
- import { getWebAnimation, getScrubScene } from '@wix/motion';
2
- import { Scroll } from 'fizban';
3
- import { effectToAnimationOptions, addHandlerToMap, removeElementFromHandlerMap } from './utilities';
4
- const scrollManagerMap = new WeakMap();
5
- let scrollOptionsGetter = () => ({});
6
- function registerOptionsGetter(getter) {
7
- scrollOptionsGetter = getter;
8
- }
9
- function addViewProgressHandler(source, target, effect, __, globalOptions) {
10
- if (globalOptions != null && globalOptions.reducedMotion) {
11
- return;
12
- }
13
- const triggerParams = {
14
- trigger: 'view-progress',
15
- element: source
16
- };
17
- const effectOptions = effectToAnimationOptions(effect);
18
- if ('ViewTimeline' in window) {
19
- // Use ViewTimeline for modern browsers
20
- const animationGroup = getWebAnimation(target, effectOptions, triggerParams);
21
- if (animationGroup) {
22
- animationGroup.play();
23
- }
24
- } else {
25
- const scene = getScrubScene(target, effectOptions, triggerParams);
26
- if (scene) {
27
- const scenes = Array.isArray(scene) ? scene : [scene];
28
- const scroll = new Scroll({
29
- viewSource: source,
30
- scenes,
31
- observeViewportEntry: false,
32
- observeViewportResize: false,
33
- observeSourcesResize: true,
34
- root: document.body,
35
- ...scrollOptionsGetter()
36
- });
37
- const cleanup = () => {
38
- scroll.destroy();
39
- };
40
- const handlerObj = {
41
- source,
42
- target,
43
- cleanup
44
- };
45
- addHandlerToMap(scrollManagerMap, source, handlerObj);
46
- addHandlerToMap(scrollManagerMap, target, handlerObj);
47
- Promise.all(scenes.map(s => s.ready || Promise.resolve())).then(() => {
48
- scroll.start();
49
- });
50
- }
51
- }
52
- }
53
- function removeViewProgressHandler(element) {
54
- removeElementFromHandlerMap(scrollManagerMap, element);
55
- }
56
- export default {
57
- add: addViewProgressHandler,
58
- remove: removeViewProgressHandler,
59
- registerOptionsGetter
60
- };
61
- //# sourceMappingURL=viewProgress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["getWebAnimation","getScrubScene","Scroll","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","globalOptions","reducedMotion","triggerParams","trigger","element","effectOptions","window","animationGroup","play","scene","scenes","Array","isArray","scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","cleanup","destroy","handlerObj","Promise","all","map","s","ready","resolve","then","start","removeViewProgressHandler","add","remove"],"sources":["../../../src/handlers/viewProgress.ts"],"sourcesContent":["import type { ScrubScrollScene } from '@wix/motion';\nimport { getWebAnimation, getScrubScene } from '@wix/motion';\nimport { Scroll, scrollConfig } from 'fizban';\nimport type {\n ViewEnterParams,\n ScrubEffect,\n HandlerObjectMap,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst scrollManagerMap = new WeakMap() as HandlerObjectMap;\nlet scrollOptionsGetter: () => Partial<scrollConfig> = () => ({});\n\nfunction registerOptionsGetter(getter: () => scrollConfig) {\n scrollOptionsGetter = getter;\n}\n\nfunction addViewProgressHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n __: ViewEnterParams,\n globalOptions?: InteractionGlobalOptions,\n): void {\n if (globalOptions?.reducedMotion) {\n return;\n }\n\n const triggerParams = {\n trigger: 'view-progress' as const,\n element: source,\n };\n\n const effectOptions = effectToAnimationOptions(effect);\n\n if ('ViewTimeline' in window) {\n // Use ViewTimeline for modern browsers\n const animationGroup = getWebAnimation(\n target,\n effectOptions,\n triggerParams,\n );\n\n if (animationGroup) {\n (animationGroup as any).play();\n }\n } else {\n const scene = getScrubScene(target, effectOptions, triggerParams);\n\n if (scene) {\n const scenes = Array.isArray(scene) ? scene : [scene];\n const scroll = new Scroll({\n viewSource: source,\n scenes,\n observeViewportEntry: false,\n observeViewportResize: false,\n observeSourcesResize: true,\n root: document.body,\n ...scrollOptionsGetter(),\n });\n\n const cleanup = () => {\n scroll.destroy();\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(scrollManagerMap, source, handlerObj);\n addHandlerToMap(scrollManagerMap, target, handlerObj);\n\n Promise.all(\n (scenes as ScrubScrollScene[]).map((s) => s.ready || Promise.resolve()),\n ).then(() => {\n scroll.start();\n });\n }\n }\n}\n\nfunction removeViewProgressHandler(element: HTMLElement): void {\n removeElementFromHandlerMap(scrollManagerMap, element);\n}\n\nexport default {\n add: addViewProgressHandler,\n remove: removeViewProgressHandler,\n registerOptionsGetter,\n};\n"],"mappings":"AACA,SAASA,eAAe,EAAEC,aAAa,QAAQ,aAAa;AAC5D,SAASC,MAAM,QAAsB,QAAQ;AAO7C,SACEC,wBAAwB,EACxBC,eAAe,EACfC,2BAA2B,QACtB,aAAa;AAEpB,MAAMC,gBAAgB,GAAG,IAAIC,OAAO,CAAC,CAAqB;AAC1D,IAAIC,mBAAgD,GAAGA,CAAA,MAAO,CAAC,CAAC,CAAC;AAEjE,SAASC,qBAAqBA,CAACC,MAA0B,EAAE;EACzDF,mBAAmB,GAAGE,MAAM;AAC9B;AAEA,SAASC,sBAAsBA,CAC7BC,MAAmB,EACnBC,MAAmB,EACnBC,MAAmB,EACnBC,EAAmB,EACnBC,aAAwC,EAClC;EACN,IAAIA,aAAa,YAAbA,aAAa,CAAEC,aAAa,EAAE;IAChC;EACF;EAEA,MAAMC,aAAa,GAAG;IACpBC,OAAO,EAAE,eAAwB;IACjCC,OAAO,EAAER;EACX,CAAC;EAED,MAAMS,aAAa,GAAGlB,wBAAwB,CAACW,MAAM,CAAC;EAEtD,IAAI,cAAc,IAAIQ,MAAM,EAAE;IAC5B;IACA,MAAMC,cAAc,GAAGvB,eAAe,CACpCa,MAAM,EACNQ,aAAa,EACbH,aACF,CAAC;IAED,IAAIK,cAAc,EAAE;MACjBA,cAAc,CAASC,IAAI,CAAC,CAAC;IAChC;EACF,CAAC,MAAM;IACL,MAAMC,KAAK,GAAGxB,aAAa,CAACY,MAAM,EAAEQ,aAAa,EAAEH,aAAa,CAAC;IAEjE,IAAIO,KAAK,EAAE;MACT,MAAMC,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;MACrD,MAAMI,MAAM,GAAG,IAAI3B,MAAM,CAAC;QACxB4B,UAAU,EAAElB,MAAM;QAClBc,MAAM;QACNK,oBAAoB,EAAE,KAAK;QAC3BC,qBAAqB,EAAE,KAAK;QAC5BC,oBAAoB,EAAE,IAAI;QAC1BC,IAAI,EAAEC,QAAQ,CAACC,IAAI;QACnB,GAAG5B,mBAAmB,CAAC;MACzB,CAAC,CAAC;MAEF,MAAM6B,OAAO,GAAGA,CAAA,KAAM;QACpBR,MAAM,CAACS,OAAO,CAAC,CAAC;MAClB,CAAC;MAED,MAAMC,UAAU,GAAG;QAAE3B,MAAM;QAAEC,MAAM;QAAEwB;MAAQ,CAAC;MAE9CjC,eAAe,CAACE,gBAAgB,EAAEM,MAAM,EAAE2B,UAAU,CAAC;MACrDnC,eAAe,CAACE,gBAAgB,EAAEO,MAAM,EAAE0B,UAAU,CAAC;MAErDC,OAAO,CAACC,GAAG,CACRf,MAAM,CAAwBgB,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,KAAK,IAAIJ,OAAO,CAACK,OAAO,CAAC,CAAC,CACxE,CAAC,CAACC,IAAI,CAAC,MAAM;QACXjB,MAAM,CAACkB,KAAK,CAAC,CAAC;MAChB,CAAC,CAAC;IACJ;EACF;AACF;AAEA,SAASC,yBAAyBA,CAAC5B,OAAoB,EAAQ;EAC7Df,2BAA2B,CAACC,gBAAgB,EAAEc,OAAO,CAAC;AACxD;AAEA,eAAe;EACb6B,GAAG,EAAEtC,sBAAsB;EAC3BuC,MAAM,EAAEF,yBAAyB;EACjCvC;AACF,CAAC","ignoreList":[]}
package/dist/esm/index.js DELETED
@@ -1,5 +0,0 @@
1
- export { Interact } from './core/Interact';
2
- export { add } from './core/add';
3
- export { remove } from './core/remove';
4
- export * from './types';
5
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["Interact","add","remove"],"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,SAASA,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,YAAY;AAChC,SAASC,MAAM,QAAQ,eAAe;AAEtC,cAAc,SAAS","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- /// <reference types="@wix/jest-yoshi-preset/types" />
2
- //# sourceMappingURL=test-types.d.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":[],"sources":["../../src/test-types.d.ts"],"sourcesContent":["/// <reference types=\"@wix/jest-yoshi-preset/types\" />\n"],"mappings":"AAAA","ignoreList":[]}
package/dist/esm/types.js DELETED
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
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 | 'activate'\n | 'interest';\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 activate: StateParams | PointerTriggerParams;\n interest: StateParams | PointerTriggerParams;\n};\n\nexport type InteractionGlobalOptions = {\n reducedMotion?: boolean;\n allowA11yTriggers?: boolean;\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 globalOptions?: InteractionGlobalOptions,\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/esm/utils.js DELETED
@@ -1,63 +0,0 @@
1
- import { getEasing } from '@wix/motion';
2
- export function generateId() {
3
- return 'wi-12343210'.replace(/\d/g, c => String.fromCharCode((+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4) + 97) // 97 for "a"
4
- );
5
- }
6
- export function createTransitionCSS(_ref) {
7
- var _properties2;
8
- let {
9
- key,
10
- effectId,
11
- transition,
12
- properties,
13
- childSelector = '> :first-child'
14
- } = _ref;
15
- let transitions = [];
16
- if (transition != null && transition.styleProperties) {
17
- const {
18
- duration,
19
- easing,
20
- delay
21
- } = transition;
22
- if (duration) {
23
- const hasCustomPropertiesTransition = transition.styleProperties.some(styleProperty => styleProperty.name.startsWith('--'));
24
- if (hasCustomPropertiesTransition) {
25
- // If there are custom properties in the transition, we need to fall back to Viewer's legacy implementation
26
- transitions = [`all ${duration}ms ${getEasing(easing || 'ease')}${delay ? ` ${delay}ms` : ''}`, 'visibility 0s'];
27
- } else {
28
- transitions = transition.styleProperties.map(styleProperty => `${styleProperty.name} ${duration}ms ${getEasing(easing || 'ease')}${delay ? ` ${delay}ms` : ''}`);
29
- }
30
- }
31
- properties = transition.styleProperties;
32
- } else {
33
- var _properties;
34
- 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` : ''}`)) || [];
35
- }
36
- const styleProperties = ((_properties2 = properties) == null ? void 0 : _properties2.map(property => `${property.name}: ${property.value};`)) || [];
37
- const escapedKey = key.replace(/"/g, "'");
38
- const result = [`:is(:state(${effectId}), :--${effectId}) ${childSelector},
39
- [data-interact-effect~="${effectId}"] ${childSelector} {
40
- ${styleProperties.join(`
41
- `)}
42
- }`];
43
- if (transitions.length) {
44
- result.push(`@media (prefers-reduced-motion: no-preference) { [data-interact-key="${escapedKey}"] ${childSelector} {
45
- transition: ${transitions.join(', ')};
46
- } }`);
47
- }
48
- return result;
49
- }
50
- export function getMediaQuery(conditionNames, conditions) {
51
- const conditionContent = (conditionNames || []).filter(conditionName => {
52
- var _conditions$condition;
53
- return ((_conditions$condition = conditions[conditionName]) == null ? void 0 : _conditions$condition.type) === 'media' && conditions[conditionName].predicate;
54
- }).map(conditionName => {
55
- return conditions[conditionName].predicate;
56
- }).join(') and (');
57
- const condition = conditionContent && `(${conditionContent})`;
58
- const mql = condition && window.matchMedia(condition);
59
- if (mql) {
60
- return mql;
61
- }
62
- }
63
- //# sourceMappingURL=utils.js.map
@@ -1 +0,0 @@
1
- {"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-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-interact-key=\"${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":[]}
@@ -1 +0,0 @@
1
- export {};
File without changes