framer-motion 12.24.9 → 12.24.10

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

@@ -1,64 +1,51 @@
 "use client";
-import { useRef, useCallback } from 'react';
-import { isRefObject } from '../../utils/is-ref-object.mjs';
+import { useRef, useInsertionEffect, useCallback } from 'react';
 
-/**
- * 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 = 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 = useRef(externalRef);
+    useInsertionEffect(() => {
+        externalRefContainer.current = externalRef;
+    });
+    // Store cleanup function returned by callback refs (React 19 feature)
+    const refCleanup = useRef(null);
     return 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]);
 }
 
 export { useMotionRef };

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

@@ -5137,7 +5137,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 +5153,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 +5171,7 @@
                             cleanup();
                         }
                         else {
-                            setRef$1(refs[i], null);
+                            setRef(refs[i], null);
                         }
                     }
                 };
@@ -9748,69 +9748,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 +9800,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);