framer-motion 7.10.2 → 8.0.0

package/dist/cjs/index.js

@@ -80,7 +80,12 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     useIsomorphicLayoutEffect(() => {
         visualElement && visualElement.render();
     });
-    React.useEffect(() => {
+    /**
+     * If we have optimised appear animations to handoff from, trigger animateChanges
+     * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
+     * styled component in the event of a hydration error.
+     */
+    useIsomorphicLayoutEffect(() => {
         if (visualElement && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
@@ -1363,99 +1368,32 @@ function useFocusGesture({ whileFocus, visualElement, }) {
     useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
 }
 
-function isMouseEvent(event) {
-    // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.
-    if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) {
-        return !!(event.pointerType === "mouse");
-    }
-    return event instanceof MouseEvent;
-}
-function isTouchEvent(event) {
-    const hasTouches = !!event.touches;
-    return hasTouches;
-}
-
 /**
- * Filters out events not attached to the primary pointer (currently left mouse button)
- * @param eventHandler
+ * Specifically match against false here as incomplete versions of
+ * PointerEvents in very old browser might have it set as undefined.
  */
-function filterPrimaryPointer(eventHandler) {
-    return (event) => {
-        const isMouseEvent = event instanceof MouseEvent;
-        const isPrimaryPointer = !isMouseEvent ||
-            (isMouseEvent && event.button === 0);
-        if (isPrimaryPointer) {
-            eventHandler(event);
-        }
-    };
-}
-const defaultPagePoint = { pageX: 0, pageY: 0 };
-function pointFromTouch(e, pointType = "page") {
-    const primaryTouch = e.touches[0] || e.changedTouches[0];
-    const point = primaryTouch || defaultPagePoint;
-    return {
-        x: point[pointType + "X"],
-        y: point[pointType + "Y"],
-    };
-}
-function pointFromMouse(point, pointType = "page") {
-    return {
-        x: point[pointType + "X"],
-        y: point[pointType + "Y"],
-    };
-}
+const isPrimaryPointer = (event) => event.isPrimary !== false;
+
 function extractEventInfo(event, pointType = "page") {
     return {
-        point: isTouchEvent(event)
-            ? pointFromTouch(event, pointType)
-            : pointFromMouse(event, pointType),
+        point: {
+            x: event[pointType + "X"],
+            y: event[pointType + "Y"],
+        },
     };
 }
 const wrapHandler = (handler, shouldFilterPrimaryPointer = false) => {
     const listener = (event) => handler(event, extractEventInfo(event));
     return shouldFilterPrimaryPointer
-        ? filterPrimaryPointer(listener)
+        ? (event) => isPrimaryPointer(event) && listener(event)
         : listener;
 };
 
-// We check for event support via functions in case they've been mocked by a testing suite.
-const supportsPointerEvents = () => isBrowser && window.onpointerdown === null;
-const supportsTouchEvents = () => isBrowser && window.ontouchstart === null;
-const supportsMouseEvents = () => isBrowser && window.onmousedown === null;
-
-const mouseEventNames = {
-    pointerdown: "mousedown",
-    pointermove: "mousemove",
-    pointerup: "mouseup",
-    pointercancel: "mousecancel",
-    pointerover: "mouseover",
-    pointerout: "mouseout",
-    pointerenter: "mouseenter",
-    pointerleave: "mouseleave",
-};
-const touchEventNames = {
-    pointerdown: "touchstart",
-    pointermove: "touchmove",
-    pointerup: "touchend",
-    pointercancel: "touchcancel",
-};
-function getPointerEventName(name) {
-    if (supportsPointerEvents()) {
-        return name;
-    }
-    else if (supportsTouchEvents()) {
-        return touchEventNames[name];
-    }
-    else if (supportsMouseEvents()) {
-        return mouseEventNames[name];
-    }
-    return name;
-}
 function addPointerEvent(target, eventName, handler, options) {
-    return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
+    return addDomEvent(target, eventName, wrapHandler(handler, eventName === "pointerdown"), options);
 }
 function usePointerEvent(ref, eventName, handler, options) {
-    return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === "pointerdown"), options);
+    return useDomEvent(ref, eventName, handler && wrapHandler(handler, eventName === "pointerdown"), options);
 }
 
 function createLock(name) {
@@ -1510,6 +1448,9 @@ function isDragActive() {
     return false;
 }
 
+function isMouseEvent(event) {
+    return event.type !== "pen" && event.type !== "touch";
+}
 function createHoverEvent(visualElement, isActive, callback) {
     return (event, info) => {
         if (!isMouseEvent(event) || isDragActive())
@@ -2124,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 = "7.10.2";
+        this.version = "8.0.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4631,11 +4572,6 @@ class PanSession {
         this.handlePointerMove = (event, info) => {
             this.lastMoveEvent = event;
             this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
-            // Because Safari doesn't trigger mouseup events when it's above a `<select>`
-            if (isMouseEvent(event) && event.buttons === 0) {
-                this.handlePointerUp(event, info);
-                return;
-            }
             // Throttle mouse move event to once per frame
             sync.update(this.updatePoint, true);
         };
@@ -4649,7 +4585,7 @@ class PanSession {
             onSessionEnd && onSessionEnd(event, panInfo);
         };
         // If we have more than one touch, don't start detecting this gesture
-        if (isTouchEvent(event) && event.touches.length > 1)
+        if (!isPrimaryPointer(event))
             return;
         this.handlers = handlers;
         this.transformPagePoint = transformPagePoint;
@@ -5086,7 +5022,7 @@ const elementDragControls = new WeakMap();
 /**
  *
  */
-// let latestPointerEvent: AnyPointerEvent
+// let latestPointerEvent: PointerEvent
 class VisualElementDragControls {
     constructor(visualElement) {
         // This is a reference to the global drag gesture lock, ensuring only one component
@@ -5932,7 +5868,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.10.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.2 may not work as expected.`);
+                warnOnce(nextValue.version === "8.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/events/event-info.mjs

@@ -1,45 +1,17 @@
-import { isTouchEvent } from '../gestures/utils/event-type.mjs';
+import { isPrimaryPointer } from './utils/is-primary-pointer.mjs';
 
-/**
- * Filters out events not attached to the primary pointer (currently left mouse button)
- * @param eventHandler
- */
-function filterPrimaryPointer(eventHandler) {
-    return (event) => {
-        const isMouseEvent = event instanceof MouseEvent;
-        const isPrimaryPointer = !isMouseEvent ||
-            (isMouseEvent && event.button === 0);
-        if (isPrimaryPointer) {
-            eventHandler(event);
-        }
-    };
-}
-const defaultPagePoint = { pageX: 0, pageY: 0 };
-function pointFromTouch(e, pointType = "page") {
-    const primaryTouch = e.touches[0] || e.changedTouches[0];
-    const point = primaryTouch || defaultPagePoint;
-    return {
-        x: point[pointType + "X"],
-        y: point[pointType + "Y"],
-    };
-}
-function pointFromMouse(point, pointType = "page") {
-    return {
-        x: point[pointType + "X"],
-        y: point[pointType + "Y"],
-    };
-}
 function extractEventInfo(event, pointType = "page") {
     return {
-        point: isTouchEvent(event)
-            ? pointFromTouch(event, pointType)
-            : pointFromMouse(event, pointType),
+        point: {
+            x: event[pointType + "X"],
+            y: event[pointType + "Y"],
+        },
     };
 }
 const wrapHandler = (handler, shouldFilterPrimaryPointer = false) => {
     const listener = (event) => handler(event, extractEventInfo(event));
     return shouldFilterPrimaryPointer
-        ? filterPrimaryPointer(listener)
+        ? (event) => isPrimaryPointer(event) && listener(event)
         : listener;
 };
 

package/dist/es/events/use-pointer-event.mjs

@@ -1,40 +1,11 @@
 import { addDomEvent, useDomEvent } from './use-dom-event.mjs';
 import { wrapHandler } from './event-info.mjs';
-import { supportsPointerEvents, supportsTouchEvents, supportsMouseEvents } from './utils.mjs';
 
-const mouseEventNames = {
-    pointerdown: "mousedown",
-    pointermove: "mousemove",
-    pointerup: "mouseup",
-    pointercancel: "mousecancel",
-    pointerover: "mouseover",
-    pointerout: "mouseout",
-    pointerenter: "mouseenter",
-    pointerleave: "mouseleave",
-};
-const touchEventNames = {
-    pointerdown: "touchstart",
-    pointermove: "touchmove",
-    pointerup: "touchend",
-    pointercancel: "touchcancel",
-};
-function getPointerEventName(name) {
-    if (supportsPointerEvents()) {
-        return name;
-    }
-    else if (supportsTouchEvents()) {
-        return touchEventNames[name];
-    }
-    else if (supportsMouseEvents()) {
-        return mouseEventNames[name];
-    }
-    return name;
-}
 function addPointerEvent(target, eventName, handler, options) {
-    return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
+    return addDomEvent(target, eventName, wrapHandler(handler, eventName === "pointerdown"), options);
 }
 function usePointerEvent(ref, eventName, handler, options) {
-    return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === "pointerdown"), options);
+    return useDomEvent(ref, eventName, handler && wrapHandler(handler, eventName === "pointerdown"), options);
 }
 
 export { addPointerEvent, usePointerEvent };

package/dist/es/events/utils/is-primary-pointer.mjs

@@ -0,0 +1,7 @@
+/**
+ * Specifically match against false here as incomplete versions of
+ * PointerEvents in very old browser might have it set as undefined.
+ */
+const isPrimaryPointer = (event) => event.isPrimary !== false;
+
+export { isPrimaryPointer };

package/dist/es/gestures/PanSession.mjs

@@ -1,4 +1,3 @@
-import { isMouseEvent, isTouchEvent } from './utils/event-type.mjs';
 import { extractEventInfo } from '../events/event-info.mjs';
 import { sync, cancelSync } from '../frameloop/index.mjs';
 import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
@@ -6,6 +5,7 @@ import { addPointerEvent } from '../events/use-pointer-event.mjs';
 import { pipe } from '../utils/pipe.mjs';
 import { distance2D } from '../utils/distance.mjs';
 import { frameData } from '../frameloop/data.mjs';
+import { isPrimaryPointer } from '../events/utils/is-primary-pointer.mjs';
 
 /**
  * @internal
@@ -52,11 +52,6 @@ class PanSession {
         this.handlePointerMove = (event, info) => {
             this.lastMoveEvent = event;
             this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
-            // Because Safari doesn't trigger mouseup events when it's above a `<select>`
-            if (isMouseEvent(event) && event.buttons === 0) {
-                this.handlePointerUp(event, info);
-                return;
-            }
             // Throttle mouse move event to once per frame
             sync.update(this.updatePoint, true);
         };
@@ -70,7 +65,7 @@ class PanSession {
             onSessionEnd && onSessionEnd(event, panInfo);
         };
         // If we have more than one touch, don't start detecting this gesture
-        if (isTouchEvent(event) && event.touches.length > 1)
+        if (!isPrimaryPointer(event))
             return;
         this.handlers = handlers;
         this.transformPagePoint = transformPagePoint;

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -20,7 +20,7 @@ const elementDragControls = new WeakMap();
 /**
  *
  */
-// let latestPointerEvent: AnyPointerEvent
+// let latestPointerEvent: PointerEvent
 class VisualElementDragControls {
     constructor(visualElement) {
         // This is a reference to the global drag gesture lock, ensuring only one component

package/dist/es/gestures/use-hover-gesture.mjs

@@ -1,8 +1,10 @@
-import { isMouseEvent } from './utils/event-type.mjs';
 import { AnimationType } from '../render/utils/types.mjs';
 import { usePointerEvent } from '../events/use-pointer-event.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 
+function isMouseEvent(event) {
+    return event.type !== "pen" && event.type !== "touch";
+}
 function createHoverEvent(visualElement, isActive, callback) {
     return (event, info) => {
         if (!isMouseEvent(event) || isDragActive())

package/dist/es/motion/utils/use-visual-element.mjs

@@ -1,4 +1,4 @@
-import { useContext, useRef, useEffect } from 'react';
+import { useContext, useRef } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
@@ -31,7 +31,12 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     useIsomorphicLayoutEffect(() => {
         visualElement && visualElement.render();
     });
-    useEffect(() => {
+    /**
+     * If we have optimised appear animations to handoff from, trigger animateChanges
+     * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
+     * styled component in the event of a hydration error.
+     */
+    useIsomorphicLayoutEffect(() => {
         if (visualElement && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }

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 === "7.10.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.2 may not work as expected.`);
+                warnOnce(nextValue.version === "8.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.0 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 = "7.10.2";
+        this.version = "8.0.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -78,7 +78,12 @@
         useIsomorphicLayoutEffect(() => {
             visualElement && visualElement.render();
         });
-        React.useEffect(() => {
+        /**
+         * If we have optimised appear animations to handoff from, trigger animateChanges
+         * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
+         * styled component in the event of a hydration error.
+         */
+        useIsomorphicLayoutEffect(() => {
             if (visualElement && visualElement.animationState) {
                 visualElement.animationState.animateChanges();
             }
@@ -1361,99 +1366,32 @@
         useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
     }
 
-    function isMouseEvent(event) {
-        // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.
-        if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) {
-            return !!(event.pointerType === "mouse");
-        }
-        return event instanceof MouseEvent;
-    }
-    function isTouchEvent(event) {
-        const hasTouches = !!event.touches;
-        return hasTouches;
-    }
-
     /**
-     * Filters out events not attached to the primary pointer (currently left mouse button)
-     * @param eventHandler
+     * Specifically match against false here as incomplete versions of
+     * PointerEvents in very old browser might have it set as undefined.
      */
-    function filterPrimaryPointer(eventHandler) {
-        return (event) => {
-            const isMouseEvent = event instanceof MouseEvent;
-            const isPrimaryPointer = !isMouseEvent ||
-                (isMouseEvent && event.button === 0);
-            if (isPrimaryPointer) {
-                eventHandler(event);
-            }
-        };
-    }
-    const defaultPagePoint = { pageX: 0, pageY: 0 };
-    function pointFromTouch(e, pointType = "page") {
-        const primaryTouch = e.touches[0] || e.changedTouches[0];
-        const point = primaryTouch || defaultPagePoint;
-        return {
-            x: point[pointType + "X"],
-            y: point[pointType + "Y"],
-        };
-    }
-    function pointFromMouse(point, pointType = "page") {
-        return {
-            x: point[pointType + "X"],
-            y: point[pointType + "Y"],
-        };
-    }
+    const isPrimaryPointer = (event) => event.isPrimary !== false;
+
     function extractEventInfo(event, pointType = "page") {
         return {
-            point: isTouchEvent(event)
-                ? pointFromTouch(event, pointType)
-                : pointFromMouse(event, pointType),
+            point: {
+                x: event[pointType + "X"],
+                y: event[pointType + "Y"],
+            },
         };
     }
     const wrapHandler = (handler, shouldFilterPrimaryPointer = false) => {
         const listener = (event) => handler(event, extractEventInfo(event));
         return shouldFilterPrimaryPointer
-            ? filterPrimaryPointer(listener)
+            ? (event) => isPrimaryPointer(event) && listener(event)
             : listener;
     };
 
-    // We check for event support via functions in case they've been mocked by a testing suite.
-    const supportsPointerEvents = () => isBrowser && window.onpointerdown === null;
-    const supportsTouchEvents = () => isBrowser && window.ontouchstart === null;
-    const supportsMouseEvents = () => isBrowser && window.onmousedown === null;
-
-    const mouseEventNames = {
-        pointerdown: "mousedown",
-        pointermove: "mousemove",
-        pointerup: "mouseup",
-        pointercancel: "mousecancel",
-        pointerover: "mouseover",
-        pointerout: "mouseout",
-        pointerenter: "mouseenter",
-        pointerleave: "mouseleave",
-    };
-    const touchEventNames = {
-        pointerdown: "touchstart",
-        pointermove: "touchmove",
-        pointerup: "touchend",
-        pointercancel: "touchcancel",
-    };
-    function getPointerEventName(name) {
-        if (supportsPointerEvents()) {
-            return name;
-        }
-        else if (supportsTouchEvents()) {
-            return touchEventNames[name];
-        }
-        else if (supportsMouseEvents()) {
-            return mouseEventNames[name];
-        }
-        return name;
-    }
     function addPointerEvent(target, eventName, handler, options) {
-        return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
+        return addDomEvent(target, eventName, wrapHandler(handler, eventName === "pointerdown"), options);
     }
     function usePointerEvent(ref, eventName, handler, options) {
-        return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === "pointerdown"), options);
+        return useDomEvent(ref, eventName, handler && wrapHandler(handler, eventName === "pointerdown"), options);
     }
 
     function createLock(name) {
@@ -1508,6 +1446,9 @@
         return false;
     }
 
+    function isMouseEvent(event) {
+        return event.type !== "pen" && event.type !== "touch";
+    }
     function createHoverEvent(visualElement, isActive, callback) {
         return (event, info) => {
             if (!isMouseEvent(event) || isDragActive())
@@ -2122,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 = "7.10.2";
+            this.version = "8.0.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4644,11 +4585,6 @@
             this.handlePointerMove = (event, info) => {
                 this.lastMoveEvent = event;
                 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
-                // Because Safari doesn't trigger mouseup events when it's above a `<select>`
-                if (isMouseEvent(event) && event.buttons === 0) {
-                    this.handlePointerUp(event, info);
-                    return;
-                }
                 // Throttle mouse move event to once per frame
                 sync.update(this.updatePoint, true);
             };
@@ -4662,7 +4598,7 @@
                 onSessionEnd && onSessionEnd(event, panInfo);
             };
             // If we have more than one touch, don't start detecting this gesture
-            if (isTouchEvent(event) && event.touches.length > 1)
+            if (!isPrimaryPointer(event))
                 return;
             this.handlers = handlers;
             this.transformPagePoint = transformPagePoint;
@@ -5099,7 +5035,7 @@
     /**
      *
      */
-    // let latestPointerEvent: AnyPointerEvent
+    // let latestPointerEvent: PointerEvent
     class VisualElementDragControls {
         constructor(visualElement) {
             // This is a reference to the global drag gesture lock, ensuring only one component
@@ -5945,7 +5881,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.10.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.2 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {