framer-motion 12.23.15 → 12.23.18

package/dist/framer-motion.dev.js

@@ -5037,6 +5037,60 @@
         reducedMotion: "never",
     });
 
+    /**
+     * Set a given ref to a given value
+     * This utility takes care of different types of refs: callback refs and RefObject(s)
+     */
+    function setRef(ref, value) {
+        if (typeof ref === "function") {
+            return ref(value);
+        }
+        else if (ref !== null && ref !== undefined) {
+            ref.current = value;
+        }
+    }
+    /**
+     * A utility to compose multiple refs together
+     * Accepts callback refs and RefObject(s)
+     */
+    function composeRefs(...refs) {
+        return (node) => {
+            let hasCleanup = false;
+            const cleanups = refs.map((ref) => {
+                const cleanup = setRef(ref, node);
+                if (!hasCleanup && typeof cleanup === "function") {
+                    hasCleanup = true;
+                }
+                return cleanup;
+            });
+            // React <19 will log an error to the console if a callback ref returns a
+            // value. We don't use ref cleanups internally so this will only happen if a
+            // user's ref callback returns a value, which we only expect if they are
+            // using the cleanup functionality added in React 19.
+            if (hasCleanup) {
+                return () => {
+                    for (let i = 0; i < cleanups.length; i++) {
+                        const cleanup = cleanups[i];
+                        if (typeof cleanup === "function") {
+                            cleanup();
+                        }
+                        else {
+                            setRef(refs[i], null);
+                        }
+                    }
+                };
+            }
+        };
+    }
+    /**
+     * A custom hook that composes multiple refs
+     * Accepts callback refs and RefObject(s)
+     */
+    function useComposedRefs(...refs) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        return React__namespace.useCallback(composeRefs(...refs), refs);
+    }
+
     /**
      * Measurement functionality has to be within a separate component
      * to leverage snapshot lifecycle.
@@ -5077,6 +5131,7 @@
             right: 0,
         });
         const { nonce } = React$1.useContext(MotionConfigContext);
+        const composedRef = useComposedRefs(ref, children?.ref);
         /**
          * We create and inject a style block so we can apply this explicit
          * sizing in a non-destructive manner by just deleting the style block.
@@ -5114,7 +5169,7 @@
                 }
             };
         }, [isPresent]);
-        return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
+        return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref: composedRef }) }));
     }
 
     const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
@@ -9546,16 +9601,22 @@
      * external ref and VisualElement.
      */
     function useMotionRef(visualState, visualElement, externalRef) {
+        const currentInstanceRef = React__namespace.useRef(null);
         return React$1.useCallback((instance) => {
-            if (instance) {
-                visualState.onMount && visualState.onMount(instance);
-            }
-            if (visualElement) {
+            const prevInstance = currentInstanceRef.current;
+            currentInstanceRef.current = instance;
+            // Only run mount/unmount logic when the instance actually changes
+            if (instance !== prevInstance) {
                 if (instance) {
-                    visualElement.mount(instance);
+                    visualState.onMount && visualState.onMount(instance);
                 }
-                else {
-                    visualElement.unmount();
+                if (visualElement) {
+                    if (instance) {
+                        visualElement.mount(instance);
+                    }
+                    else {
+                        visualElement.unmount();
+                    }
                 }
             }
             if (externalRef) {
@@ -9571,7 +9632,7 @@
          * Include externalRef in dependencies to ensure the callback updates
          * when the ref changes, allowing proper ref forwarding.
          */
-        [visualElement]);
+        [visualElement, externalRef]);
     }
 
     /**
@@ -12412,13 +12473,22 @@
          */
         function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
             let animations = [];
+            let animationOnComplete;
             if (isSequence(subjectOrSequence)) {
                 animations = animateSequence(subjectOrSequence, optionsOrKeyframes, scope);
             }
             else {
-                animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
+                // Extract top-level onComplete so it doesn't get applied per-value
+                const { onComplete, ...rest } = options || {};
+                if (typeof onComplete === "function") {
+                    animationOnComplete = onComplete;
+                }
+                animations = animateSubject(subjectOrSequence, optionsOrKeyframes, rest, scope);
             }
             const animation = new GroupAnimationWithThen(animations);
+            if (animationOnComplete) {
+                animation.finished.then(animationOnComplete);
+            }
             if (scope) {
                 scope.animations.push(animation);
                 animation.finished.then(() => {