framer-motion 12.24.9 → 12.24.11

package/dist/es/motion/utils/use-motion-ref.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-motion-ref.mjs","sources":["../../../../src/motion/utils/use-motion-ref.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport type { VisualElement } from \"../../render/VisualElement\"\nimport { isRefObject } from \"../../utils/is-ref-object\"\nimport { VisualState } from \"./use-visual-state\"\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n * Returns a cleanup function if the ref callback returns one (React 19 feature)\n */\nfunction setRef<T>(ref: React.Ref<T>, value: T): void | (() => void) {\n    if (typeof ref === \"function\") {\n        return ref(value)\n    } else if (isRefObject(ref)) {\n        ;(ref as any).current = value\n    }\n}\n\n/**\n * Creates a ref function that, when called, hydrates the provided\n * external ref and VisualElement.\n */\nexport function useMotionRef<Instance, RenderState>(\n    visualState: VisualState<Instance, RenderState>,\n    visualElement?: VisualElement<Instance> | null,\n    externalRef?: React.Ref<Instance>\n): React.Ref<Instance> {\n    // Store the cleanup function from external ref if it returns one\n    const externalRefCleanupRef = useRef<(() => void) | null>(null)\n\n    return useCallback(\n        (instance: Instance) => {\n            if (instance) {\n                visualState.onMount && visualState.onMount(instance)\n            }\n\n            if (visualElement) {\n                if (instance) {\n                    visualElement.mount(instance)\n                } else {\n                    visualElement.unmount()\n                }\n            }\n\n            if (externalRef) {\n                if (instance) {\n                    // Mount: call the external ref and store any cleanup function\n                    const cleanup = setRef(externalRef, instance)\n                    if (typeof cleanup === \"function\") {\n                        externalRefCleanupRef.current = cleanup\n                    }\n                } else {\n                    // Unmount: call stored cleanup function if available, otherwise call ref with null\n                    if (externalRefCleanupRef.current) {\n                        externalRefCleanupRef.current()\n                        externalRefCleanupRef.current = null\n                    } else {\n                        // Fallback to React <19 behavior for refs that don't return cleanup\n                        setRef(externalRef, instance)\n                    }\n                }\n            }\n        },\n        /**\n         * Include all dependencies to ensure the callback updates correctly\n         */\n        [visualElement, visualState, externalRef]\n    )\n}\n"],"names":[],"mappings":";;;;AAQA;;;;AAIG;AACH;AACI;AACI;;AACG;AACD;;AAEV;AAEA;;;AAGG;;;AAOC;AAEA;;;;;;AAQgB;;;;;;;;;;AAUA;AACI;;;;;AAIJ;;AAEI;;;;AAGA;;;;;AAKhB;;AAEG;AACH;AAER;;"}
+{"version":3,"file":"use-motion-ref.mjs","sources":["../../../../src/motion/utils/use-motion-ref.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useCallback, useInsertionEffect, useRef } from \"react\"\nimport type { VisualElement } from \"../../render/VisualElement\"\nimport { VisualState } from \"./use-visual-state\"\n\n/**\n * Creates a ref function that, when called, hydrates the provided\n * external ref and VisualElement.\n */\nexport function useMotionRef<Instance, RenderState>(\n    visualState: VisualState<Instance, RenderState>,\n    visualElement?: VisualElement<Instance> | null,\n    externalRef?: React.Ref<Instance>\n): React.Ref<Instance> {\n    /**\n     * Store externalRef in a ref to avoid including it in the useCallback\n     * dependency array. Including externalRef in dependencies causes issues\n     * with libraries like Radix UI that create new callback refs on each render\n     * when using asChild - this would cause the callback to be recreated,\n     * triggering element remounts and breaking AnimatePresence exit animations.\n     */\n    const externalRefContainer = useRef(externalRef)\n    useInsertionEffect(() => {\n        externalRefContainer.current = externalRef\n    })\n\n    // Store cleanup function returned by callback refs (React 19 feature)\n    const refCleanup = useRef<(() => void) | null>(null)\n\n    return useCallback(\n        (instance: Instance) => {\n            if (instance) {\n                visualState.onMount?.(instance)\n            }\n\n            if (visualElement) {\n                instance ? visualElement.mount(instance) : visualElement.unmount()\n            }\n\n            const ref = externalRefContainer.current\n            if (typeof ref === \"function\") {\n                if (instance) {\n                    const cleanup = ref(instance)\n                    if (typeof cleanup === \"function\") {\n                        refCleanup.current = cleanup\n                    }\n                } else if (refCleanup.current) {\n                    refCleanup.current()\n                    refCleanup.current = null\n                } else {\n                    ref(instance)\n                }\n            } else if (ref) {\n                ;(ref as React.MutableRefObject<Instance>).current = instance\n            }\n        },\n        [visualElement]\n    )\n}\n"],"names":[],"mappings":";;;AAOA;;;AAGG;;AAMC;;;;;;AAMG;AACH;;AAEI;AACJ;;AAGA;AAEA;;AAGY;;;AAIA;;AAGJ;AACA;;AAEQ;AACA;AACI;;;AAED;;AAEH;;;;;;;AAKF;;AAEV;AAGR;;"}

package/dist/framer-motion.dev.js

@@ -2427,6 +2427,12 @@
             super();
             this.finishedTime = null;
             this.isStopped = false;
+            /**
+             * Tracks a manually-set start time that takes precedence over WAAPI's
+             * dynamic startTime. This is cleared when play() or time setter is called,
+             * allowing WAAPI to take over timing.
+             */
+            this.manualStartTime = null;
             if (!options)
                 return;
             const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
@@ -2462,6 +2468,7 @@
         play() {
             if (this.isStopped)
                 return;
+            this.manualStartTime = null;
             this.animation.play();
             if (this.state === "finished") {
                 this.updateFinished();
@@ -2525,6 +2532,7 @@
             return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
         }
         set time(newTime) {
+            this.manualStartTime = null;
             this.finishedTime = null;
             this.animation.currentTime = secondsToMilliseconds(newTime);
         }
@@ -2547,10 +2555,10 @@
                 : this.animation.playState;
         }
         get startTime() {
-            return Number(this.animation.startTime);
+            return this.manualStartTime ?? Number(this.animation.startTime);
         }
         set startTime(newStartTime) {
-            this.animation.startTime = newStartTime;
+            this.manualStartTime = this.animation.startTime = newStartTime;
         }
         /**
          * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
@@ -2612,7 +2620,7 @@
              */
             replaceTransitionType(options);
             super(options);
-            if (options.startTime) {
+            if (options.startTime !== undefined) {
                 this.startTime = options.startTime;
             }
             this.options = options;
@@ -2637,8 +2645,14 @@
                 ...options,
                 autoplay: false,
             });
-            const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
-            motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+            /**
+             * Use wall-clock elapsed time for sampling.
+             * Under CPU load, WAAPI's currentTime may not reflect actual
+             * elapsed time, causing incorrect sampling and visual jumps.
+             */
+            const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
+            const delta = clamp(0, sampleDelta, sampleTime - sampleDelta);
+            motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, sampleAnimation.sample(sampleTime).value, delta);
             sampleAnimation.stop();
         }
     }
@@ -5137,7 +5151,7 @@
      * Set a given ref to a given value
      * This utility takes care of different types of refs: callback refs and RefObject(s)
      */
-    function setRef$1(ref, value) {
+    function setRef(ref, value) {
         if (typeof ref === "function") {
             return ref(value);
         }
@@ -5153,7 +5167,7 @@
         return (node) => {
             let hasCleanup = false;
             const cleanups = refs.map((ref) => {
-                const cleanup = setRef$1(ref, node);
+                const cleanup = setRef(ref, node);
                 if (!hasCleanup && typeof cleanup === "function") {
                     hasCleanup = true;
                 }
@@ -5171,7 +5185,7 @@
                             cleanup();
                         }
                         else {
-                            setRef$1(refs[i], null);
+                            setRef(refs[i], null);
                         }
                     }
                 };
@@ -9748,69 +9762,51 @@
 
     const motionComponentSymbol = Symbol.for("motionComponentSymbol");
 
-    function isRefObject(ref) {
-        return (ref &&
-            typeof ref === "object" &&
-            Object.prototype.hasOwnProperty.call(ref, "current"));
-    }
-
-    /**
-     * Set a given ref to a given value
-     * This utility takes care of different types of refs: callback refs and RefObject(s)
-     * Returns a cleanup function if the ref callback returns one (React 19 feature)
-     */
-    function setRef(ref, value) {
-        if (typeof ref === "function") {
-            return ref(value);
-        }
-        else if (isRefObject(ref)) {
-            ref.current = value;
-        }
-    }
     /**
      * Creates a ref function that, when called, hydrates the provided
      * external ref and VisualElement.
      */
     function useMotionRef(visualState, visualElement, externalRef) {
-        // Store the cleanup function from external ref if it returns one
-        const externalRefCleanupRef = React$1.useRef(null);
+        /**
+         * Store externalRef in a ref to avoid including it in the useCallback
+         * dependency array. Including externalRef in dependencies causes issues
+         * with libraries like Radix UI that create new callback refs on each render
+         * when using asChild - this would cause the callback to be recreated,
+         * triggering element remounts and breaking AnimatePresence exit animations.
+         */
+        const externalRefContainer = React$1.useRef(externalRef);
+        React$1.useInsertionEffect(() => {
+            externalRefContainer.current = externalRef;
+        });
+        // Store cleanup function returned by callback refs (React 19 feature)
+        const refCleanup = React$1.useRef(null);
         return React$1.useCallback((instance) => {
             if (instance) {
-                visualState.onMount && visualState.onMount(instance);
+                visualState.onMount?.(instance);
             }
             if (visualElement) {
-                if (instance) {
-                    visualElement.mount(instance);
-                }
-                else {
-                    visualElement.unmount();
-                }
+                instance ? visualElement.mount(instance) : visualElement.unmount();
             }
-            if (externalRef) {
+            const ref = externalRefContainer.current;
+            if (typeof ref === "function") {
                 if (instance) {
-                    // Mount: call the external ref and store any cleanup function
-                    const cleanup = setRef(externalRef, instance);
+                    const cleanup = ref(instance);
                     if (typeof cleanup === "function") {
-                        externalRefCleanupRef.current = cleanup;
+                        refCleanup.current = cleanup;
                     }
                 }
+                else if (refCleanup.current) {
+                    refCleanup.current();
+                    refCleanup.current = null;
+                }
                 else {
-                    // Unmount: call stored cleanup function if available, otherwise call ref with null
-                    if (externalRefCleanupRef.current) {
-                        externalRefCleanupRef.current();
-                        externalRefCleanupRef.current = null;
-                    }
-                    else {
-                        // Fallback to React <19 behavior for refs that don't return cleanup
-                        setRef(externalRef, instance);
-                    }
+                    ref(instance);
                 }
             }
-        }, 
-        /**
-         * Include all dependencies to ensure the callback updates correctly
-         */
-        [visualElement, visualState, externalRef]);
+            else if (ref) {
+                ref.current = instance;
+            }
+        }, [visualElement]);
     }
 
     /**
@@ -9818,6 +9814,12 @@
      */
     const SwitchLayoutGroupContext = React$1.createContext({});
 
+    function isRefObject(ref) {
+        return (ref &&
+            typeof ref === "object" &&
+            Object.prototype.hasOwnProperty.call(ref, "current"));
+    }
+
     function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) {
         const { visualElement: parent } = React$1.useContext(MotionContext);
         const lazyContext = React$1.useContext(LazyContext);