framer-motion 8.0.0 → 8.0.2

package/dist/cjs/index.js

@@ -2065,7 +2065,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "8.0.0";
+        this.version = "8.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3590,7 +3590,7 @@ function animateStyle(element, valueName, keyframes, { delay = 0, duration, repe
  */
 const sampleDelta = 10; //ms
 function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
-    let { keyframes, duration = 0.3, elapsed = 0, ease } = options;
+    let { keyframes, duration = 300, elapsed = 0, ease } = options;
     /**
      * If this animation needs pre-generated keyframes then generate.
      */
@@ -3845,7 +3845,7 @@ const isAnimatable = (key, value) => {
  * This filters out orchestration options and returns true
  * if any options are left.
  */
-function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
     return !!Object.keys(transition).length;
 }
 function isZero(value) {
@@ -4570,12 +4570,16 @@ class PanSession {
             onMove && onMove(this.lastMoveEvent, info);
         };
         this.handlePointerMove = (event, info) => {
+            if (!isPrimaryPointer(event))
+                return;
             this.lastMoveEvent = event;
             this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
             // Throttle mouse move event to once per frame
             sync.update(this.updatePoint, true);
         };
         this.handlePointerUp = (event, info) => {
+            if (!isPrimaryPointer(event))
+                return;
             this.end();
             const { onEnd, onSessionEnd } = this.handlers;
             const panInfo = getPanInfo(transformPoint(info, this.transformPagePoint), this.history);
@@ -5868,7 +5872,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.0 may not work as expected.`);
+                warnOnce(nextValue.version === "8.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9208,6 +9212,9 @@ function useVelocity(value) {
     return velocity;
 }
 
+function refWarning(name, ref) {
+    heyListen.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
+}
 const createScrollMotionValues = () => ({
     scrollX: motionValue(0),
     scrollY: motionValue(0),
@@ -9220,6 +9227,8 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
         ? useIsomorphicLayoutEffect
         : React.useEffect;
     useLifecycleEffect(() => {
+        refWarning("target", target);
+        refWarning("container", container);
         return dom.scroll(({ x, y }) => {
             values.scrollX.set(x.current);
             values.scrollXProgress.set(x.progress);

package/dist/es/animation/utils/transitions.mjs

@@ -5,7 +5,7 @@ import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.
  * This filters out orchestration options and returns true
  * if any options are left.
  */
-function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
     return !!Object.keys(transition).length;
 }
 function isZero(value) {

package/dist/es/animation/waapi/create-accelerated-animation.mjs

@@ -10,7 +10,7 @@ import { isWaapiSupportedEasing } from './easing.mjs';
  */
 const sampleDelta = 10; //ms
 function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
-    let { keyframes, duration = 0.3, elapsed = 0, ease } = options;
+    let { keyframes, duration = 300, elapsed = 0, ease } = options;
     /**
      * If this animation needs pre-generated keyframes then generate.
      */

package/dist/es/gestures/PanSession.mjs

@@ -50,12 +50,16 @@ class PanSession {
             onMove && onMove(this.lastMoveEvent, info);
         };
         this.handlePointerMove = (event, info) => {
+            if (!isPrimaryPointer(event))
+                return;
             this.lastMoveEvent = event;
             this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
             // Throttle mouse move event to once per frame
             sync.update(this.updatePoint, true);
         };
         this.handlePointerUp = (event, info) => {
+            if (!isPrimaryPointer(event))
+                return;
             this.end();
             const { onEnd, onSessionEnd } = this.handlers;
             const panInfo = getPanInfo(transformPoint(info, this.transformPagePoint), this.history);

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.0 may not work as expected.`);
+                warnOnce(nextValue.version === "8.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "8.0.0";
+        this.version = "8.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/use-scroll.mjs

@@ -2,8 +2,12 @@ import { scroll } from '@motionone/dom';
 import { motionValue } from './index.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
 import { useEffect } from 'react';
+import { warning } from 'hey-listen';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
+function refWarning(name, ref) {
+    warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
+}
 const createScrollMotionValues = () => ({
     scrollX: motionValue(0),
     scrollY: motionValue(0),
@@ -16,6 +20,8 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
         ? useIsomorphicLayoutEffect
         : useEffect;
     useLifecycleEffect(() => {
+        refWarning("target", target);
+        refWarning("container", container);
         return scroll(({ x, y }) => {
             values.scrollX.set(x.current);
             values.scrollXProgress.set(x.progress);

package/dist/framer-motion.dev.js

@@ -2063,7 +2063,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "8.0.0";
+            this.version = "8.0.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3603,7 +3603,7 @@
      */
     const sampleDelta = 10; //ms
     function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
-        let { keyframes, duration = 0.3, elapsed = 0, ease } = options;
+        let { keyframes, duration = 300, elapsed = 0, ease } = options;
         /**
          * If this animation needs pre-generated keyframes then generate.
          */
@@ -3858,7 +3858,7 @@
      * This filters out orchestration options and returns true
      * if any options are left.
      */
-    function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
+    function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
         return !!Object.keys(transition).length;
     }
     function isZero(value) {
@@ -4583,12 +4583,16 @@
                 onMove && onMove(this.lastMoveEvent, info);
             };
             this.handlePointerMove = (event, info) => {
+                if (!isPrimaryPointer(event))
+                    return;
                 this.lastMoveEvent = event;
                 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
                 // Throttle mouse move event to once per frame
                 sync.update(this.updatePoint, true);
             };
             this.handlePointerUp = (event, info) => {
+                if (!isPrimaryPointer(event))
+                    return;
                 this.end();
                 const { onEnd, onSessionEnd } = this.handlers;
                 const panInfo = getPanInfo(transformPoint(info, this.transformPagePoint), this.history);
@@ -5881,7 +5885,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -9829,6 +9833,9 @@
         };
     }
 
+    function refWarning(name, ref) {
+        warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
+    }
     const createScrollMotionValues = () => ({
         scrollX: motionValue(0),
         scrollY: motionValue(0),
@@ -9841,6 +9848,8 @@
             ? useIsomorphicLayoutEffect
             : React.useEffect;
         useLifecycleEffect(() => {
+            refWarning("target", target);
+            refWarning("container", container);
             return scroll(({ x, y }) => {
                 values.scrollX.set(x.current);
                 values.scrollXProgress.set(x.progress);