motion 10.18.0 → 11.11.12

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 (320) hide show
  1. package/.turbo/turbo-build.log +29 -0
  2. package/{LICENSE → LICENSE.md} +2 -2
  3. package/README.md +99 -7
  4. package/dist/cjs/index.js +6117 -0
  5. package/dist/cjs/react-client.js +10003 -0
  6. package/dist/cjs/react-m.js +1852 -0
  7. package/dist/es/framer-motion/dist/es/animation/GroupPlaybackControls.mjs +78 -0
  8. package/dist/es/framer-motion/dist/es/animation/animate/index.mjs +34 -0
  9. package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs +19 -0
  10. package/dist/es/framer-motion/dist/es/animation/animate/sequence.mjs +14 -0
  11. package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs +11 -0
  12. package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs +52 -0
  13. package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs +318 -0
  14. package/dist/es/framer-motion/dist/es/animation/animators/BaseAnimation.mjs +112 -0
  15. package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs +380 -0
  16. package/dist/es/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs +17 -0
  17. package/dist/es/framer-motion/dist/es/animation/animators/utils/accelerated-values.mjs +14 -0
  18. package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs +42 -0
  19. package/dist/es/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs +169 -0
  20. package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs +36 -0
  21. package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs +12 -0
  22. package/dist/es/framer-motion/dist/es/animation/animators/waapi/easing.mjs +44 -0
  23. package/dist/es/framer-motion/dist/es/animation/animators/waapi/index.mjs +23 -0
  24. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/attach-timeline.mjs +6 -0
  25. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs +12 -0
  26. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/linear.mjs +15 -0
  27. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/memo-supports.mjs +9 -0
  28. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/style.mjs +8 -0
  29. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-flags.mjs +9 -0
  30. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-linear-easing.mjs +15 -0
  31. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs +13 -0
  32. package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs +5 -0
  33. package/dist/es/framer-motion/dist/es/animation/generators/inertia.mjs +87 -0
  34. package/dist/es/framer-motion/dist/es/animation/generators/keyframes.mjs +51 -0
  35. package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs +89 -0
  36. package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs +129 -0
  37. package/dist/es/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs +17 -0
  38. package/dist/es/framer-motion/dist/es/animation/generators/utils/is-generator.mjs +5 -0
  39. package/dist/es/framer-motion/dist/es/animation/generators/utils/velocity.mjs +9 -0
  40. package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs +105 -0
  41. package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs +75 -0
  42. package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs +66 -0
  43. package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element.mjs +26 -0
  44. package/dist/es/framer-motion/dist/es/animation/optimized-appear/data-id.mjs +6 -0
  45. package/dist/es/framer-motion/dist/es/animation/optimized-appear/get-appear-id.mjs +7 -0
  46. package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs +230 -0
  47. package/dist/es/framer-motion/dist/es/animation/sequence/utils/calc-time.mjs +21 -0
  48. package/dist/es/framer-motion/dist/es/animation/sequence/utils/edit.mjs +31 -0
  49. package/dist/es/framer-motion/dist/es/animation/sequence/utils/sort.mjs +14 -0
  50. package/dist/es/framer-motion/dist/es/animation/utils/create-visual-element.mjs +44 -0
  51. package/dist/es/framer-motion/dist/es/animation/utils/default-transitions.mjs +40 -0
  52. package/dist/es/framer-motion/dist/es/animation/utils/get-value-transition.mjs +9 -0
  53. package/dist/es/framer-motion/dist/es/animation/utils/is-animatable.mjs +30 -0
  54. package/dist/es/framer-motion/dist/es/animation/utils/is-animation-controls.mjs +7 -0
  55. package/dist/es/framer-motion/dist/es/animation/utils/is-dom-keyframes.mjs +5 -0
  56. package/dist/es/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs +5 -0
  57. package/dist/es/framer-motion/dist/es/animation/utils/is-none.mjs +15 -0
  58. package/dist/es/framer-motion/dist/es/animation/utils/is-transition-defined.mjs +10 -0
  59. package/dist/es/framer-motion/dist/es/animation/utils/stagger.mjs +26 -0
  60. package/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs +40 -0
  61. package/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs +6 -0
  62. package/dist/es/framer-motion/dist/es/context/LazyContext.mjs +6 -0
  63. package/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs +13 -0
  64. package/dist/es/framer-motion/dist/es/context/MotionContext/create.mjs +13 -0
  65. package/dist/es/framer-motion/dist/es/context/MotionContext/index.mjs +6 -0
  66. package/dist/es/framer-motion/dist/es/context/MotionContext/utils.mjs +17 -0
  67. package/dist/es/framer-motion/dist/es/context/PresenceContext.mjs +9 -0
  68. package/dist/es/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs +9 -0
  69. package/dist/es/framer-motion/dist/es/easing/anticipate.mjs +5 -0
  70. package/dist/es/framer-motion/dist/es/easing/back.mjs +9 -0
  71. package/dist/es/framer-motion/dist/es/easing/circ.mjs +8 -0
  72. package/dist/es/framer-motion/dist/es/easing/cubic-bezier.mjs +51 -0
  73. package/dist/es/framer-motion/dist/es/easing/ease.mjs +7 -0
  74. package/dist/es/framer-motion/dist/es/easing/modifiers/mirror.mjs +5 -0
  75. package/dist/es/framer-motion/dist/es/easing/modifiers/reverse.mjs +5 -0
  76. package/dist/es/framer-motion/dist/es/easing/steps.mjs +15 -0
  77. package/dist/es/framer-motion/dist/es/easing/utils/create-generator-easing.mjs +17 -0
  78. package/dist/es/framer-motion/dist/es/easing/utils/get-easing-for-segment.mjs +8 -0
  79. package/dist/es/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs +3 -0
  80. package/dist/es/framer-motion/dist/es/easing/utils/is-easing-array.mjs +5 -0
  81. package/dist/es/framer-motion/dist/es/easing/utils/map.mjs +38 -0
  82. package/dist/es/framer-motion/dist/es/events/add-dom-event.mjs +6 -0
  83. package/dist/es/framer-motion/dist/es/events/add-pointer-event.mjs +8 -0
  84. package/dist/es/framer-motion/dist/es/events/event-info.mjs +15 -0
  85. package/dist/es/framer-motion/dist/es/events/utils/is-primary-pointer.mjs +18 -0
  86. package/dist/es/framer-motion/dist/es/frameloop/batcher.mjs +71 -0
  87. package/dist/es/framer-motion/dist/es/frameloop/frame.mjs +6 -0
  88. package/dist/es/framer-motion/dist/es/frameloop/index-legacy.mjs +20 -0
  89. package/dist/es/framer-motion/dist/es/frameloop/microtask.mjs +5 -0
  90. package/dist/es/framer-motion/dist/es/frameloop/render-step.mjs +80 -0
  91. package/dist/es/framer-motion/dist/es/frameloop/sync-time.mjs +31 -0
  92. package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs +487 -0
  93. package/dist/es/framer-motion/dist/es/gestures/drag/index.mjs +27 -0
  94. package/dist/es/framer-motion/dist/es/gestures/drag/utils/constraints.mjs +129 -0
  95. package/dist/es/framer-motion/dist/es/gestures/drag/utils/lock.mjs +53 -0
  96. package/dist/es/framer-motion/dist/es/gestures/focus.mjs +41 -0
  97. package/dist/es/framer-motion/dist/es/gestures/hover.mjs +33 -0
  98. package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs +156 -0
  99. package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs +50 -0
  100. package/dist/es/framer-motion/dist/es/gestures/press.mjs +130 -0
  101. package/dist/es/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs +20 -0
  102. package/dist/es/framer-motion/dist/es/motion/features/Feature.mjs +9 -0
  103. package/dist/es/framer-motion/dist/es/motion/features/animation/exit.mjs +31 -0
  104. package/dist/es/framer-motion/dist/es/motion/features/animation/index.mjs +41 -0
  105. package/dist/es/framer-motion/dist/es/motion/features/animations.mjs +13 -0
  106. package/dist/es/framer-motion/dist/es/motion/features/definitions.mjs +28 -0
  107. package/dist/es/framer-motion/dist/es/motion/features/drag.mjs +17 -0
  108. package/dist/es/framer-motion/dist/es/motion/features/gestures.mjs +21 -0
  109. package/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs +134 -0
  110. package/dist/es/framer-motion/dist/es/motion/features/layout.mjs +11 -0
  111. package/dist/es/framer-motion/dist/es/motion/features/load-features.mjs +12 -0
  112. package/dist/es/framer-motion/dist/es/motion/features/viewport/index.mjs +72 -0
  113. package/dist/es/framer-motion/dist/es/motion/features/viewport/observers.mjs +49 -0
  114. package/dist/es/framer-motion/dist/es/motion/index.mjs +98 -0
  115. package/dist/es/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs +11 -0
  116. package/dist/es/framer-motion/dist/es/motion/utils/symbol.mjs +3 -0
  117. package/dist/es/framer-motion/dist/es/motion/utils/use-motion-ref.mjs +36 -0
  118. package/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs +134 -0
  119. package/dist/es/framer-motion/dist/es/motion/utils/use-visual-state.mjs +82 -0
  120. package/dist/es/framer-motion/dist/es/motion/utils/valid-prop.mjs +57 -0
  121. package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs +93 -0
  122. package/dist/es/framer-motion/dist/es/projection/geometry/conversion.mjs +33 -0
  123. package/dist/es/framer-motion/dist/es/projection/geometry/copy.mjs +31 -0
  124. package/dist/es/framer-motion/dist/es/projection/geometry/delta-apply.mjs +119 -0
  125. package/dist/es/framer-motion/dist/es/projection/geometry/delta-calc.mjs +52 -0
  126. package/dist/es/framer-motion/dist/es/projection/geometry/delta-remove.mjs +54 -0
  127. package/dist/es/framer-motion/dist/es/projection/geometry/models.mjs +17 -0
  128. package/dist/es/framer-motion/dist/es/projection/geometry/utils.mjs +31 -0
  129. package/dist/es/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs +13 -0
  130. package/dist/es/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs +27 -0
  131. package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs +1583 -0
  132. package/dist/es/framer-motion/dist/es/projection/node/state.mjs +19 -0
  133. package/dist/es/framer-motion/dist/es/projection/shared/stack.mjs +112 -0
  134. package/dist/es/framer-motion/dist/es/projection/styles/scale-border-radius.mjs +41 -0
  135. package/dist/es/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs +35 -0
  136. package/dist/es/framer-motion/dist/es/projection/styles/scale-correction.mjs +6 -0
  137. package/dist/es/framer-motion/dist/es/projection/styles/transform.mjs +49 -0
  138. package/dist/es/framer-motion/dist/es/projection/utils/each-axis.mjs +5 -0
  139. package/dist/es/framer-motion/dist/es/projection/utils/has-transform.mjs +26 -0
  140. package/dist/es/framer-motion/dist/es/projection/utils/measure.mjs +17 -0
  141. package/dist/es/framer-motion/dist/es/render/VisualElement.mjs +477 -0
  142. package/dist/es/framer-motion/dist/es/render/components/create-factory.mjs +23 -0
  143. package/dist/es/framer-motion/dist/es/render/components/m/create.mjs +6 -0
  144. package/dist/es/framer-motion/dist/es/render/components/m/elements.mjs +227 -0
  145. package/dist/es/framer-motion/dist/es/render/components/motion/create.mjs +15 -0
  146. package/dist/es/framer-motion/dist/es/render/components/motion/elements.mjs +194 -0
  147. package/dist/es/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs +130 -0
  148. package/dist/es/framer-motion/dist/es/render/dom/DOMVisualElement.mjs +28 -0
  149. package/dist/es/framer-motion/dist/es/render/dom/create-visual-element.mjs +14 -0
  150. package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs +64 -0
  151. package/dist/es/framer-motion/dist/es/render/dom/resize/handle-window.mjs +30 -0
  152. package/dist/es/framer-motion/dist/es/render/dom/resize/index.mjs +8 -0
  153. package/dist/es/framer-motion/dist/es/render/dom/scroll/index.mjs +80 -0
  154. package/dist/es/framer-motion/dist/es/render/dom/scroll/info.mjs +56 -0
  155. package/dist/es/framer-motion/dist/es/render/dom/scroll/observe.mjs +18 -0
  156. package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/edge.mjs +45 -0
  157. package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/index.mjs +59 -0
  158. package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/inset.mjs +45 -0
  159. package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/offset.mjs +35 -0
  160. package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/presets.mjs +20 -0
  161. package/dist/es/framer-motion/dist/es/render/dom/scroll/on-scroll-handler.mjs +48 -0
  162. package/dist/es/framer-motion/dist/es/render/dom/scroll/supports.mjs +5 -0
  163. package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs +84 -0
  164. package/dist/es/framer-motion/dist/es/render/dom/use-render.mjs +33 -0
  165. package/dist/es/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs +6 -0
  166. package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs +42 -0
  167. package/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs +59 -0
  168. package/dist/es/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs +15 -0
  169. package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs +30 -0
  170. package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs +5 -0
  171. package/dist/es/framer-motion/dist/es/render/dom/utils/resolve-element.mjs +28 -0
  172. package/dist/es/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs +65 -0
  173. package/dist/es/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs +15 -0
  174. package/dist/es/framer-motion/dist/es/render/dom/value-types/defaults.mjs +30 -0
  175. package/dist/es/framer-motion/dist/es/render/dom/value-types/dimensions.mjs +15 -0
  176. package/dist/es/framer-motion/dist/es/render/dom/value-types/find.mjs +15 -0
  177. package/dist/es/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs +10 -0
  178. package/dist/es/framer-motion/dist/es/render/dom/value-types/number-browser.mjs +41 -0
  179. package/dist/es/framer-motion/dist/es/render/dom/value-types/number.mjs +18 -0
  180. package/dist/es/framer-motion/dist/es/render/dom/value-types/test.mjs +6 -0
  181. package/dist/es/framer-motion/dist/es/render/dom/value-types/transform.mjs +31 -0
  182. package/dist/es/framer-motion/dist/es/render/dom/value-types/type-auto.mjs +9 -0
  183. package/dist/es/framer-motion/dist/es/render/dom/value-types/type-int.mjs +8 -0
  184. package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs +43 -0
  185. package/dist/es/framer-motion/dist/es/render/html/HTMLVisualElement.mjs +57 -0
  186. package/dist/es/framer-motion/dist/es/render/html/config-motion.mjs +12 -0
  187. package/dist/es/framer-motion/dist/es/render/html/use-props.mjs +57 -0
  188. package/dist/es/framer-motion/dist/es/render/html/utils/build-styles.mjs +65 -0
  189. package/dist/es/framer-motion/dist/es/render/html/utils/build-transform.mjs +62 -0
  190. package/dist/es/framer-motion/dist/es/render/html/utils/create-render-state.mjs +8 -0
  191. package/dist/es/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs +30 -0
  192. package/dist/es/framer-motion/dist/es/render/html/utils/render.mjs +9 -0
  193. package/dist/es/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs +20 -0
  194. package/dist/es/framer-motion/dist/es/render/html/utils/transform.mjs +28 -0
  195. package/dist/es/framer-motion/dist/es/render/object/ObjectVisualElement.mjs +41 -0
  196. package/dist/es/framer-motion/dist/es/render/store.mjs +3 -0
  197. package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs +45 -0
  198. package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs +40 -0
  199. package/dist/es/framer-motion/dist/es/render/svg/lowercase-elements.mjs +33 -0
  200. package/dist/es/framer-motion/dist/es/render/svg/use-props.mjs +24 -0
  201. package/dist/es/framer-motion/dist/es/render/svg/utils/build-attrs.mjs +52 -0
  202. package/dist/es/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs +30 -0
  203. package/dist/es/framer-motion/dist/es/render/svg/utils/create-render-state.mjs +8 -0
  204. package/dist/es/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs +3 -0
  205. package/dist/es/framer-motion/dist/es/render/svg/utils/path.mjs +32 -0
  206. package/dist/es/framer-motion/dist/es/render/svg/utils/render.mjs +12 -0
  207. package/dist/es/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs +19 -0
  208. package/dist/es/framer-motion/dist/es/render/svg/utils/transform-origin.mjs +18 -0
  209. package/dist/es/framer-motion/dist/es/render/utils/KeyframesResolver.mjs +164 -0
  210. package/dist/es/framer-motion/dist/es/render/utils/animation-state.mjs +332 -0
  211. package/dist/es/framer-motion/dist/es/render/utils/compare-by-depth.mjs +3 -0
  212. package/dist/es/framer-motion/dist/es/render/utils/flat-tree.mjs +24 -0
  213. package/dist/es/framer-motion/dist/es/render/utils/get-variant-context.mjs +28 -0
  214. package/dist/es/framer-motion/dist/es/render/utils/is-controlling-variants.mjs +13 -0
  215. package/dist/es/framer-motion/dist/es/render/utils/is-variant-label.mjs +8 -0
  216. package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs +59 -0
  217. package/dist/es/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs +8 -0
  218. package/dist/es/framer-motion/dist/es/render/utils/resolve-variants.mjs +36 -0
  219. package/dist/es/framer-motion/dist/es/render/utils/setters.mjs +27 -0
  220. package/dist/es/framer-motion/dist/es/render/utils/variant-props.mjs +12 -0
  221. package/dist/es/framer-motion/dist/es/utils/GlobalConfig.mjs +6 -0
  222. package/dist/es/framer-motion/dist/es/utils/array.mjs +11 -0
  223. package/dist/es/framer-motion/dist/es/utils/clamp.mjs +9 -0
  224. package/dist/es/framer-motion/dist/es/utils/delay.mjs +24 -0
  225. package/dist/es/framer-motion/dist/es/utils/distance.mjs +9 -0
  226. package/dist/es/framer-motion/dist/es/utils/errors.mjs +18 -0
  227. package/dist/es/framer-motion/dist/es/utils/get-context-window.mjs +6 -0
  228. package/dist/es/framer-motion/dist/es/utils/hsla-to-rgba.mjs +42 -0
  229. package/dist/es/framer-motion/dist/es/utils/interpolate.mjs +75 -0
  230. package/dist/es/framer-motion/dist/es/utils/is-browser.mjs +3 -0
  231. package/dist/es/framer-motion/dist/es/utils/is-numerical-string.mjs +6 -0
  232. package/dist/es/framer-motion/dist/es/utils/is-ref-object.mjs +7 -0
  233. package/dist/es/framer-motion/dist/es/utils/is-zero-value-string.mjs +6 -0
  234. package/dist/es/framer-motion/dist/es/utils/memo.mjs +10 -0
  235. package/dist/es/framer-motion/dist/es/utils/mix/color.mjs +47 -0
  236. package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs +94 -0
  237. package/dist/es/framer-motion/dist/es/utils/mix/immediate.mjs +5 -0
  238. package/dist/es/framer-motion/dist/es/utils/mix/index.mjs +14 -0
  239. package/dist/es/framer-motion/dist/es/utils/mix/number.mjs +26 -0
  240. package/dist/es/framer-motion/dist/es/utils/mix/visibility.mjs +16 -0
  241. package/dist/es/framer-motion/dist/es/utils/noop.mjs +3 -0
  242. package/dist/es/framer-motion/dist/es/utils/offsets/default.mjs +9 -0
  243. package/dist/es/framer-motion/dist/es/utils/offsets/fill.mjs +12 -0
  244. package/dist/es/framer-motion/dist/es/utils/offsets/time.mjs +5 -0
  245. package/dist/es/framer-motion/dist/es/utils/pipe.mjs +11 -0
  246. package/dist/es/framer-motion/dist/es/utils/progress.mjs +18 -0
  247. package/dist/es/framer-motion/dist/es/utils/reduced-motion/index.mjs +19 -0
  248. package/dist/es/framer-motion/dist/es/utils/reduced-motion/state.mjs +5 -0
  249. package/dist/es/framer-motion/dist/es/utils/resolve-value.mjs +11 -0
  250. package/dist/es/framer-motion/dist/es/utils/shallow-compare.mjs +14 -0
  251. package/dist/es/framer-motion/dist/es/utils/subscription-manager.mjs +40 -0
  252. package/dist/es/framer-motion/dist/es/utils/time-conversion.mjs +10 -0
  253. package/dist/es/framer-motion/dist/es/utils/transform.mjs +21 -0
  254. package/dist/es/framer-motion/dist/es/utils/use-constant.mjs +18 -0
  255. package/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs +6 -0
  256. package/dist/es/framer-motion/dist/es/utils/velocity-per-second.mjs +11 -0
  257. package/dist/es/framer-motion/dist/es/utils/warn-once.mjs +11 -0
  258. package/dist/es/framer-motion/dist/es/utils/wrap.mjs +6 -0
  259. package/dist/es/framer-motion/dist/es/value/index.mjs +313 -0
  260. package/dist/es/framer-motion/dist/es/value/types/color/hex.mjs +40 -0
  261. package/dist/es/framer-motion/dist/es/value/types/color/hsla.mjs +22 -0
  262. package/dist/es/framer-motion/dist/es/value/types/color/index.mjs +27 -0
  263. package/dist/es/framer-motion/dist/es/value/types/color/rgba.mjs +25 -0
  264. package/dist/es/framer-motion/dist/es/value/types/color/utils.mjs +29 -0
  265. package/dist/es/framer-motion/dist/es/value/types/complex/filter.mjs +30 -0
  266. package/dist/es/framer-motion/dist/es/value/types/complex/index.mjs +92 -0
  267. package/dist/es/framer-motion/dist/es/value/types/numbers/index.mjs +17 -0
  268. package/dist/es/framer-motion/dist/es/value/types/numbers/units.mjs +17 -0
  269. package/dist/es/framer-motion/dist/es/value/types/utils/color-regex.mjs +3 -0
  270. package/dist/es/framer-motion/dist/es/value/types/utils/float-regex.mjs +3 -0
  271. package/dist/es/framer-motion/dist/es/value/types/utils/is-nullish.mjs +5 -0
  272. package/dist/es/framer-motion/dist/es/value/types/utils/sanitize.mjs +5 -0
  273. package/dist/es/framer-motion/dist/es/value/types/utils/single-color-regex.mjs +3 -0
  274. package/dist/es/framer-motion/dist/es/value/use-will-change/add-will-change.mjs +14 -0
  275. package/dist/es/framer-motion/dist/es/value/use-will-change/is.mjs +7 -0
  276. package/dist/es/framer-motion/dist/es/value/utils/is-motion-value.mjs +3 -0
  277. package/dist/es/framer-motion/dist/es/value/utils/resolve-motion-value.mjs +16 -0
  278. package/dist/es/motion/lib/index.mjs +30 -0
  279. package/dist/es/motion/lib/react-client.mjs +3 -0
  280. package/dist/es/motion/lib/react-m.mjs +3 -0
  281. package/dist/index.d.ts +1 -0
  282. package/dist/motion.dev.js +6121 -0
  283. package/dist/motion.js +1 -0
  284. package/dist/react-client.d.ts +1 -0
  285. package/dist/react-m.d.ts +1 -0
  286. package/lib/index.js +1 -3
  287. package/lib/index.js.map +1 -1
  288. package/lib/react-client.js +3 -0
  289. package/lib/react-client.js.map +1 -0
  290. package/lib/react-m.js +3 -0
  291. package/lib/react-m.js.map +1 -0
  292. package/lib/react.js +3 -0
  293. package/lib/react.js.map +1 -0
  294. package/package.json +79 -29
  295. package/react/package.json +6 -0
  296. package/react-client/package.json +6 -0
  297. package/react-m/package.json +6 -0
  298. package/rollup.config.mjs +174 -0
  299. package/src/index.ts +1 -0
  300. package/src/react-client.ts +3 -0
  301. package/src/react-m.ts +3 -0
  302. package/src/react.ts +3 -0
  303. package/tsconfig.json +25 -0
  304. package/types/index.d.ts +1 -4
  305. package/types/react-client.d.ts +1 -0
  306. package/types/react-m.d.ts +1 -0
  307. package/types/react.d.ts +1 -0
  308. package/CHANGELOG.md +0 -378
  309. package/dist/animate.cjs.js +0 -22
  310. package/dist/animate.es.js +0 -19
  311. package/dist/main.cjs.js +0 -21
  312. package/dist/main.es.js +0 -3
  313. package/dist/motion.min.js +0 -1
  314. package/dist/motion.umd.js +0 -2364
  315. package/dist/size-index.js +0 -1
  316. package/lib/animate.js +0 -17
  317. package/lib/animate.js.map +0 -1
  318. package/types/animate.d.ts +0 -6
  319. package/types/animate.d.ts.map +0 -1
  320. package/types/index.d.ts.map +0 -1
@@ -0,0 +1,487 @@
1
+ import { invariant } from '../../utils/errors.mjs';
2
+ import { PanSession } from '../pan/PanSession.mjs';
3
+ import { getGlobalLock } from './utils/lock.mjs';
4
+ import { isRefObject } from '../../utils/is-ref-object.mjs';
5
+ import { addPointerEvent } from '../../events/add-pointer-event.mjs';
6
+ import { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, rebaseAxisConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';
7
+ import { createBox } from '../../projection/geometry/models.mjs';
8
+ import { eachAxis } from '../../projection/utils/each-axis.mjs';
9
+ import { measurePageBox } from '../../projection/utils/measure.mjs';
10
+ import { extractEventInfo } from '../../events/event-info.mjs';
11
+ import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
12
+ import { addDomEvent } from '../../events/add-dom-event.mjs';
13
+ import { calcLength } from '../../projection/geometry/delta-calc.mjs';
14
+ import { mixNumber } from '../../utils/mix/number.mjs';
15
+ import { percent } from '../../value/types/numbers/units.mjs';
16
+ import { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';
17
+ import { getContextWindow } from '../../utils/get-context-window.mjs';
18
+ import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
19
+ import { frame } from '../../frameloop/frame.mjs';
20
+
21
+ const elementDragControls = new WeakMap();
22
+ /**
23
+ *
24
+ */
25
+ // let latestPointerEvent: PointerEvent
26
+ class VisualElementDragControls {
27
+ constructor(visualElement) {
28
+ // This is a reference to the global drag gesture lock, ensuring only one component
29
+ // can "capture" the drag of one or both axes.
30
+ // TODO: Look into moving this into pansession?
31
+ this.openGlobalLock = null;
32
+ this.isDragging = false;
33
+ this.currentDirection = null;
34
+ this.originPoint = { x: 0, y: 0 };
35
+ /**
36
+ * The permitted boundaries of travel, in pixels.
37
+ */
38
+ this.constraints = false;
39
+ this.hasMutatedConstraints = false;
40
+ /**
41
+ * The per-axis resolved elastic values.
42
+ */
43
+ this.elastic = createBox();
44
+ this.visualElement = visualElement;
45
+ }
46
+ start(originEvent, { snapToCursor = false } = {}) {
47
+ /**
48
+ * Don't start dragging if this component is exiting
49
+ */
50
+ const { presenceContext } = this.visualElement;
51
+ if (presenceContext && presenceContext.isPresent === false)
52
+ return;
53
+ const onSessionStart = (event) => {
54
+ const { dragSnapToOrigin } = this.getProps();
55
+ // Stop or pause any animations on both axis values immediately. This allows the user to throw and catch
56
+ // the component.
57
+ dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation();
58
+ if (snapToCursor) {
59
+ this.snapToCursor(extractEventInfo(event, "page").point);
60
+ }
61
+ };
62
+ const onStart = (event, info) => {
63
+ // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
64
+ const { drag, dragPropagation, onDragStart } = this.getProps();
65
+ if (drag && !dragPropagation) {
66
+ if (this.openGlobalLock)
67
+ this.openGlobalLock();
68
+ this.openGlobalLock = getGlobalLock(drag);
69
+ // If we don 't have the lock, don't start dragging
70
+ if (!this.openGlobalLock)
71
+ return;
72
+ }
73
+ this.isDragging = true;
74
+ this.currentDirection = null;
75
+ this.resolveConstraints();
76
+ if (this.visualElement.projection) {
77
+ this.visualElement.projection.isAnimationBlocked = true;
78
+ this.visualElement.projection.target = undefined;
79
+ }
80
+ /**
81
+ * Record gesture origin
82
+ */
83
+ eachAxis((axis) => {
84
+ let current = this.getAxisMotionValue(axis).get() || 0;
85
+ /**
86
+ * If the MotionValue is a percentage value convert to px
87
+ */
88
+ if (percent.test(current)) {
89
+ const { projection } = this.visualElement;
90
+ if (projection && projection.layout) {
91
+ const measuredAxis = projection.layout.layoutBox[axis];
92
+ if (measuredAxis) {
93
+ const length = calcLength(measuredAxis);
94
+ current = length * (parseFloat(current) / 100);
95
+ }
96
+ }
97
+ }
98
+ this.originPoint[axis] = current;
99
+ });
100
+ // Fire onDragStart event
101
+ if (onDragStart) {
102
+ frame.postRender(() => onDragStart(event, info));
103
+ }
104
+ addValueToWillChange(this.visualElement, "transform");
105
+ const { animationState } = this.visualElement;
106
+ animationState && animationState.setActive("whileDrag", true);
107
+ };
108
+ const onMove = (event, info) => {
109
+ // latestPointerEvent = event
110
+ const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
111
+ // If we didn't successfully receive the gesture lock, early return.
112
+ if (!dragPropagation && !this.openGlobalLock)
113
+ return;
114
+ const { offset } = info;
115
+ // Attempt to detect drag direction if directionLock is true
116
+ if (dragDirectionLock && this.currentDirection === null) {
117
+ this.currentDirection = getCurrentDirection(offset);
118
+ // If we've successfully set a direction, notify listener
119
+ if (this.currentDirection !== null) {
120
+ onDirectionLock && onDirectionLock(this.currentDirection);
121
+ }
122
+ return;
123
+ }
124
+ // Update each point with the latest position
125
+ this.updateAxis("x", info.point, offset);
126
+ this.updateAxis("y", info.point, offset);
127
+ /**
128
+ * Ideally we would leave the renderer to fire naturally at the end of
129
+ * this frame but if the element is about to change layout as the result
130
+ * of a re-render we want to ensure the browser can read the latest
131
+ * bounding box to ensure the pointer and element don't fall out of sync.
132
+ */
133
+ this.visualElement.render();
134
+ /**
135
+ * This must fire after the render call as it might trigger a state
136
+ * change which itself might trigger a layout update.
137
+ */
138
+ onDrag && onDrag(event, info);
139
+ };
140
+ const onSessionEnd = (event, info) => this.stop(event, info);
141
+ const resumeAnimation = () => eachAxis((axis) => {
142
+ var _a;
143
+ return this.getAnimationState(axis) === "paused" &&
144
+ ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
145
+ });
146
+ const { dragSnapToOrigin } = this.getProps();
147
+ this.panSession = new PanSession(originEvent, {
148
+ onSessionStart,
149
+ onStart,
150
+ onMove,
151
+ onSessionEnd,
152
+ resumeAnimation,
153
+ }, {
154
+ transformPagePoint: this.visualElement.getTransformPagePoint(),
155
+ dragSnapToOrigin,
156
+ contextWindow: getContextWindow(this.visualElement),
157
+ });
158
+ }
159
+ stop(event, info) {
160
+ const isDragging = this.isDragging;
161
+ this.cancel();
162
+ if (!isDragging)
163
+ return;
164
+ const { velocity } = info;
165
+ this.startAnimation(velocity);
166
+ const { onDragEnd } = this.getProps();
167
+ if (onDragEnd) {
168
+ frame.postRender(() => onDragEnd(event, info));
169
+ }
170
+ }
171
+ cancel() {
172
+ this.isDragging = false;
173
+ const { projection, animationState } = this.visualElement;
174
+ if (projection) {
175
+ projection.isAnimationBlocked = false;
176
+ }
177
+ this.panSession && this.panSession.end();
178
+ this.panSession = undefined;
179
+ const { dragPropagation } = this.getProps();
180
+ if (!dragPropagation && this.openGlobalLock) {
181
+ this.openGlobalLock();
182
+ this.openGlobalLock = null;
183
+ }
184
+ animationState && animationState.setActive("whileDrag", false);
185
+ }
186
+ updateAxis(axis, _point, offset) {
187
+ const { drag } = this.getProps();
188
+ // If we're not dragging this axis, do an early return.
189
+ if (!offset || !shouldDrag(axis, drag, this.currentDirection))
190
+ return;
191
+ const axisValue = this.getAxisMotionValue(axis);
192
+ let next = this.originPoint[axis] + offset[axis];
193
+ // Apply constraints
194
+ if (this.constraints && this.constraints[axis]) {
195
+ next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
196
+ }
197
+ axisValue.set(next);
198
+ }
199
+ resolveConstraints() {
200
+ var _a;
201
+ const { dragConstraints, dragElastic } = this.getProps();
202
+ const layout = this.visualElement.projection &&
203
+ !this.visualElement.projection.layout
204
+ ? this.visualElement.projection.measure(false)
205
+ : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;
206
+ const prevConstraints = this.constraints;
207
+ if (dragConstraints && isRefObject(dragConstraints)) {
208
+ if (!this.constraints) {
209
+ this.constraints = this.resolveRefConstraints();
210
+ }
211
+ }
212
+ else {
213
+ if (dragConstraints && layout) {
214
+ this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
215
+ }
216
+ else {
217
+ this.constraints = false;
218
+ }
219
+ }
220
+ this.elastic = resolveDragElastic(dragElastic);
221
+ /**
222
+ * If we're outputting to external MotionValues, we want to rebase the measured constraints
223
+ * from viewport-relative to component-relative.
224
+ */
225
+ if (prevConstraints !== this.constraints &&
226
+ layout &&
227
+ this.constraints &&
228
+ !this.hasMutatedConstraints) {
229
+ eachAxis((axis) => {
230
+ if (this.constraints !== false &&
231
+ this.getAxisMotionValue(axis)) {
232
+ this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);
233
+ }
234
+ });
235
+ }
236
+ }
237
+ resolveRefConstraints() {
238
+ const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
239
+ if (!constraints || !isRefObject(constraints))
240
+ return false;
241
+ const constraintsElement = constraints.current;
242
+ invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
243
+ const { projection } = this.visualElement;
244
+ // TODO
245
+ if (!projection || !projection.layout)
246
+ return false;
247
+ const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
248
+ let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
249
+ /**
250
+ * If there's an onMeasureDragConstraints listener we call it and
251
+ * if different constraints are returned, set constraints to that
252
+ */
253
+ if (onMeasureDragConstraints) {
254
+ const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
255
+ this.hasMutatedConstraints = !!userConstraints;
256
+ if (userConstraints) {
257
+ measuredConstraints = convertBoundingBoxToBox(userConstraints);
258
+ }
259
+ }
260
+ return measuredConstraints;
261
+ }
262
+ startAnimation(velocity) {
263
+ const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
264
+ const constraints = this.constraints || {};
265
+ const momentumAnimations = eachAxis((axis) => {
266
+ if (!shouldDrag(axis, drag, this.currentDirection)) {
267
+ return;
268
+ }
269
+ let transition = (constraints && constraints[axis]) || {};
270
+ if (dragSnapToOrigin)
271
+ transition = { min: 0, max: 0 };
272
+ /**
273
+ * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
274
+ * of spring animations so we should look into adding a disable spring option to `inertia`.
275
+ * We could do something here where we affect the `bounceStiffness` and `bounceDamping`
276
+ * using the value of `dragElastic`.
277
+ */
278
+ const bounceStiffness = dragElastic ? 200 : 1000000;
279
+ const bounceDamping = dragElastic ? 40 : 10000000;
280
+ const inertia = {
281
+ type: "inertia",
282
+ velocity: dragMomentum ? velocity[axis] : 0,
283
+ bounceStiffness,
284
+ bounceDamping,
285
+ timeConstant: 750,
286
+ restDelta: 1,
287
+ restSpeed: 10,
288
+ ...dragTransition,
289
+ ...transition,
290
+ };
291
+ // If we're not animating on an externally-provided `MotionValue` we can use the
292
+ // component's animation controls which will handle interactions with whileHover (etc),
293
+ // otherwise we just have to animate the `MotionValue` itself.
294
+ return this.startAxisValueAnimation(axis, inertia);
295
+ });
296
+ // Run all animations and then resolve the new drag constraints.
297
+ return Promise.all(momentumAnimations).then(onDragTransitionEnd);
298
+ }
299
+ startAxisValueAnimation(axis, transition) {
300
+ const axisValue = this.getAxisMotionValue(axis);
301
+ addValueToWillChange(this.visualElement, axis);
302
+ return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false));
303
+ }
304
+ stopAnimation() {
305
+ eachAxis((axis) => this.getAxisMotionValue(axis).stop());
306
+ }
307
+ pauseAnimation() {
308
+ eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); });
309
+ }
310
+ getAnimationState(axis) {
311
+ var _a;
312
+ return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
313
+ }
314
+ /**
315
+ * Drag works differently depending on which props are provided.
316
+ *
317
+ * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
318
+ * - Otherwise, we apply the delta to the x/y motion values.
319
+ */
320
+ getAxisMotionValue(axis) {
321
+ const dragKey = `_drag${axis.toUpperCase()}`;
322
+ const props = this.visualElement.getProps();
323
+ const externalMotionValue = props[dragKey];
324
+ return externalMotionValue
325
+ ? externalMotionValue
326
+ : this.visualElement.getValue(axis, (props.initial
327
+ ? props.initial[axis]
328
+ : undefined) || 0);
329
+ }
330
+ snapToCursor(point) {
331
+ eachAxis((axis) => {
332
+ const { drag } = this.getProps();
333
+ // If we're not dragging this axis, do an early return.
334
+ if (!shouldDrag(axis, drag, this.currentDirection))
335
+ return;
336
+ const { projection } = this.visualElement;
337
+ const axisValue = this.getAxisMotionValue(axis);
338
+ if (projection && projection.layout) {
339
+ const { min, max } = projection.layout.layoutBox[axis];
340
+ axisValue.set(point[axis] - mixNumber(min, max, 0.5));
341
+ }
342
+ });
343
+ }
344
+ /**
345
+ * When the viewport resizes we want to check if the measured constraints
346
+ * have changed and, if so, reposition the element within those new constraints
347
+ * relative to where it was before the resize.
348
+ */
349
+ scalePositionWithinConstraints() {
350
+ if (!this.visualElement.current)
351
+ return;
352
+ const { drag, dragConstraints } = this.getProps();
353
+ const { projection } = this.visualElement;
354
+ if (!isRefObject(dragConstraints) || !projection || !this.constraints)
355
+ return;
356
+ /**
357
+ * Stop current animations as there can be visual glitching if we try to do
358
+ * this mid-animation
359
+ */
360
+ this.stopAnimation();
361
+ /**
362
+ * Record the relative position of the dragged element relative to the
363
+ * constraints box and save as a progress value.
364
+ */
365
+ const boxProgress = { x: 0, y: 0 };
366
+ eachAxis((axis) => {
367
+ const axisValue = this.getAxisMotionValue(axis);
368
+ if (axisValue && this.constraints !== false) {
369
+ const latest = axisValue.get();
370
+ boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
371
+ }
372
+ });
373
+ /**
374
+ * Update the layout of this element and resolve the latest drag constraints
375
+ */
376
+ const { transformTemplate } = this.visualElement.getProps();
377
+ this.visualElement.current.style.transform = transformTemplate
378
+ ? transformTemplate({}, "")
379
+ : "none";
380
+ projection.root && projection.root.updateScroll();
381
+ projection.updateLayout();
382
+ this.resolveConstraints();
383
+ /**
384
+ * For each axis, calculate the current progress of the layout axis
385
+ * within the new constraints.
386
+ */
387
+ eachAxis((axis) => {
388
+ if (!shouldDrag(axis, drag, null))
389
+ return;
390
+ /**
391
+ * Calculate a new transform based on the previous box progress
392
+ */
393
+ const axisValue = this.getAxisMotionValue(axis);
394
+ const { min, max } = this.constraints[axis];
395
+ axisValue.set(mixNumber(min, max, boxProgress[axis]));
396
+ });
397
+ }
398
+ addListeners() {
399
+ if (!this.visualElement.current)
400
+ return;
401
+ elementDragControls.set(this.visualElement, this);
402
+ const element = this.visualElement.current;
403
+ /**
404
+ * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
405
+ */
406
+ const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
407
+ const { drag, dragListener = true } = this.getProps();
408
+ drag && dragListener && this.start(event);
409
+ });
410
+ const measureDragConstraints = () => {
411
+ const { dragConstraints } = this.getProps();
412
+ if (isRefObject(dragConstraints) && dragConstraints.current) {
413
+ this.constraints = this.resolveRefConstraints();
414
+ }
415
+ };
416
+ const { projection } = this.visualElement;
417
+ const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
418
+ if (projection && !projection.layout) {
419
+ projection.root && projection.root.updateScroll();
420
+ projection.updateLayout();
421
+ }
422
+ frame.read(measureDragConstraints);
423
+ /**
424
+ * Attach a window resize listener to scale the draggable target within its defined
425
+ * constraints as the window resizes.
426
+ */
427
+ const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
428
+ /**
429
+ * If the element's layout changes, calculate the delta and apply that to
430
+ * the drag gesture's origin point.
431
+ */
432
+ const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
433
+ if (this.isDragging && hasLayoutChanged) {
434
+ eachAxis((axis) => {
435
+ const motionValue = this.getAxisMotionValue(axis);
436
+ if (!motionValue)
437
+ return;
438
+ this.originPoint[axis] += delta[axis].translate;
439
+ motionValue.set(motionValue.get() + delta[axis].translate);
440
+ });
441
+ this.visualElement.render();
442
+ }
443
+ }));
444
+ return () => {
445
+ stopResizeListener();
446
+ stopPointerListener();
447
+ stopMeasureLayoutListener();
448
+ stopLayoutUpdateListener && stopLayoutUpdateListener();
449
+ };
450
+ }
451
+ getProps() {
452
+ const props = this.visualElement.getProps();
453
+ const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;
454
+ return {
455
+ ...props,
456
+ drag,
457
+ dragDirectionLock,
458
+ dragPropagation,
459
+ dragConstraints,
460
+ dragElastic,
461
+ dragMomentum,
462
+ };
463
+ }
464
+ }
465
+ function shouldDrag(direction, drag, currentDirection) {
466
+ return ((drag === true || drag === direction) &&
467
+ (currentDirection === null || currentDirection === direction));
468
+ }
469
+ /**
470
+ * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower
471
+ * than the provided threshold, return `null`.
472
+ *
473
+ * @param offset - The x/y offset from origin.
474
+ * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.
475
+ */
476
+ function getCurrentDirection(offset, lockThreshold = 10) {
477
+ let direction = null;
478
+ if (Math.abs(offset.y) > lockThreshold) {
479
+ direction = "y";
480
+ }
481
+ else if (Math.abs(offset.x) > lockThreshold) {
482
+ direction = "x";
483
+ }
484
+ return direction;
485
+ }
486
+
487
+ export { VisualElementDragControls, elementDragControls };
@@ -0,0 +1,27 @@
1
+ import { Feature } from '../../motion/features/Feature.mjs';
2
+ import { noop } from '../../utils/noop.mjs';
3
+ import { VisualElementDragControls } from './VisualElementDragControls.mjs';
4
+
5
+ class DragGesture extends Feature {
6
+ constructor(node) {
7
+ super(node);
8
+ this.removeGroupControls = noop;
9
+ this.removeListeners = noop;
10
+ this.controls = new VisualElementDragControls(node);
11
+ }
12
+ mount() {
13
+ // If we've been provided a DragControls for manual control over the drag gesture,
14
+ // subscribe this component to it on mount.
15
+ const { dragControls } = this.node.getProps();
16
+ if (dragControls) {
17
+ this.removeGroupControls = dragControls.subscribe(this.controls);
18
+ }
19
+ this.removeListeners = this.controls.addListeners() || noop;
20
+ }
21
+ unmount() {
22
+ this.removeGroupControls();
23
+ this.removeListeners();
24
+ }
25
+ }
26
+
27
+ export { DragGesture };
@@ -0,0 +1,129 @@
1
+ import { progress } from '../../../utils/progress.mjs';
2
+ import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
3
+ import { clamp } from '../../../utils/clamp.mjs';
4
+ import { mixNumber } from '../../../utils/mix/number.mjs';
5
+
6
+ /**
7
+ * Apply constraints to a point. These constraints are both physical along an
8
+ * axis, and an elastic factor that determines how much to constrain the point
9
+ * by if it does lie outside the defined parameters.
10
+ */
11
+ function applyConstraints(point, { min, max }, elastic) {
12
+ if (min !== undefined && point < min) {
13
+ // If we have a min point defined, and this is outside of that, constrain
14
+ point = elastic
15
+ ? mixNumber(min, point, elastic.min)
16
+ : Math.max(point, min);
17
+ }
18
+ else if (max !== undefined && point > max) {
19
+ // If we have a max point defined, and this is outside of that, constrain
20
+ point = elastic
21
+ ? mixNumber(max, point, elastic.max)
22
+ : Math.min(point, max);
23
+ }
24
+ return point;
25
+ }
26
+ /**
27
+ * Calculate constraints in terms of the viewport when defined relatively to the
28
+ * measured axis. This is measured from the nearest edge, so a max constraint of 200
29
+ * on an axis with a max value of 300 would return a constraint of 500 - axis length
30
+ */
31
+ function calcRelativeAxisConstraints(axis, min, max) {
32
+ return {
33
+ min: min !== undefined ? axis.min + min : undefined,
34
+ max: max !== undefined
35
+ ? axis.max + max - (axis.max - axis.min)
36
+ : undefined,
37
+ };
38
+ }
39
+ /**
40
+ * Calculate constraints in terms of the viewport when
41
+ * defined relatively to the measured bounding box.
42
+ */
43
+ function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
44
+ return {
45
+ x: calcRelativeAxisConstraints(layoutBox.x, left, right),
46
+ y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
47
+ };
48
+ }
49
+ /**
50
+ * Calculate viewport constraints when defined as another viewport-relative axis
51
+ */
52
+ function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
53
+ let min = constraintsAxis.min - layoutAxis.min;
54
+ let max = constraintsAxis.max - layoutAxis.max;
55
+ // If the constraints axis is actually smaller than the layout axis then we can
56
+ // flip the constraints
57
+ if (constraintsAxis.max - constraintsAxis.min <
58
+ layoutAxis.max - layoutAxis.min) {
59
+ [min, max] = [max, min];
60
+ }
61
+ return { min, max };
62
+ }
63
+ /**
64
+ * Calculate viewport constraints when defined as another viewport-relative box
65
+ */
66
+ function calcViewportConstraints(layoutBox, constraintsBox) {
67
+ return {
68
+ x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
69
+ y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
70
+ };
71
+ }
72
+ /**
73
+ * Calculate a transform origin relative to the source axis, between 0-1, that results
74
+ * in an asthetically pleasing scale/transform needed to project from source to target.
75
+ */
76
+ function calcOrigin(source, target) {
77
+ let origin = 0.5;
78
+ const sourceLength = calcLength(source);
79
+ const targetLength = calcLength(target);
80
+ if (targetLength > sourceLength) {
81
+ origin = progress(target.min, target.max - sourceLength, source.min);
82
+ }
83
+ else if (sourceLength > targetLength) {
84
+ origin = progress(source.min, source.max - targetLength, target.min);
85
+ }
86
+ return clamp(0, 1, origin);
87
+ }
88
+ /**
89
+ * Rebase the calculated viewport constraints relative to the layout.min point.
90
+ */
91
+ function rebaseAxisConstraints(layout, constraints) {
92
+ const relativeConstraints = {};
93
+ if (constraints.min !== undefined) {
94
+ relativeConstraints.min = constraints.min - layout.min;
95
+ }
96
+ if (constraints.max !== undefined) {
97
+ relativeConstraints.max = constraints.max - layout.min;
98
+ }
99
+ return relativeConstraints;
100
+ }
101
+ const defaultElastic = 0.35;
102
+ /**
103
+ * Accepts a dragElastic prop and returns resolved elastic values for each axis.
104
+ */
105
+ function resolveDragElastic(dragElastic = defaultElastic) {
106
+ if (dragElastic === false) {
107
+ dragElastic = 0;
108
+ }
109
+ else if (dragElastic === true) {
110
+ dragElastic = defaultElastic;
111
+ }
112
+ return {
113
+ x: resolveAxisElastic(dragElastic, "left", "right"),
114
+ y: resolveAxisElastic(dragElastic, "top", "bottom"),
115
+ };
116
+ }
117
+ function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
118
+ return {
119
+ min: resolvePointElastic(dragElastic, minLabel),
120
+ max: resolvePointElastic(dragElastic, maxLabel),
121
+ };
122
+ }
123
+ function resolvePointElastic(dragElastic, label) {
124
+ return typeof dragElastic === "number"
125
+ ? dragElastic
126
+ : dragElastic[label] || 0;
127
+ }
128
+
129
+ export { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };