framer-motion 12.24.3 → 12.24.4

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

@@ -1,12 +1,27 @@
 "use client";
-import { useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
 
+/**
+ * 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);
     return useCallback((instance) => {
         if (instance) {
             visualState.onMount && visualState.onMount(instance);
@@ -20,19 +35,30 @@ function useMotionRef(visualState, visualElement, externalRef) {
             }
         }
         if (externalRef) {
-            if (typeof externalRef === "function") {
-                externalRef(instance);
+            if (instance) {
+                // Mount: call the external ref and store any cleanup function
+                const cleanup = setRef(externalRef, instance);
+                if (typeof cleanup === "function") {
+                    externalRefCleanupRef.current = cleanup;
+                }
             }
-            else if (isRefObject(externalRef)) {
-                externalRef.current = instance;
+            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);
+                }
             }
         }
     }, 
     /**
-     * Include externalRef in dependencies to ensure the callback updates
-     * when the ref changes, allowing proper ref forwarding.
+     * Include all dependencies to ensure the callback updates correctly
      */
-    [visualElement]);
+    [visualElement, visualState, externalRef]);
 }
 
 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 } from \"react\"\nimport type { VisualElement } from \"../../render/VisualElement\"\nimport { isRefObject } from \"../../utils/is-ref-object\"\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    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 (typeof externalRef === \"function\") {\n                    externalRef(instance)\n                } else if (isRefObject(externalRef)) {\n                    ;(externalRef as any).current = instance\n                }\n            }\n        },\n        /**\n         * Include externalRef in dependencies to ensure the callback updates\n         * when the ref changes, allowing proper ref forwarding.\n         */\n        [visualElement]\n    )\n}\n"],"names":[],"mappings":";;;;AAQA;;;AAGG;;AAMC;;;;;;AAQgB;;;;;;;AAOJ;;;AAEO;AACD;;;;AAId;;;AAGG;;AAGX;;"}
+{"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;;"}

package/dist/framer-motion.dev.js

@@ -5108,7 +5108,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(ref, value) {
+    function setRef$1(ref, value) {
         if (typeof ref === "function") {
             return ref(value);
         }
@@ -5124,7 +5124,7 @@
         return (node) => {
             let hasCleanup = false;
             const cleanups = refs.map((ref) => {
-                const cleanup = setRef(ref, node);
+                const cleanup = setRef$1(ref, node);
                 if (!hasCleanup && typeof cleanup === "function") {
                     hasCleanup = true;
                 }
@@ -5142,7 +5142,7 @@
                             cleanup();
                         }
                         else {
-                            setRef(refs[i], null);
+                            setRef$1(refs[i], null);
                         }
                     }
                 };
@@ -9702,11 +9702,26 @@
             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);
         return React$1.useCallback((instance) => {
             if (instance) {
                 visualState.onMount && visualState.onMount(instance);
@@ -9720,19 +9735,30 @@
                 }
             }
             if (externalRef) {
-                if (typeof externalRef === "function") {
-                    externalRef(instance);
+                if (instance) {
+                    // Mount: call the external ref and store any cleanup function
+                    const cleanup = setRef(externalRef, instance);
+                    if (typeof cleanup === "function") {
+                        externalRefCleanupRef.current = cleanup;
+                    }
                 }
-                else if (isRefObject(externalRef)) {
-                    externalRef.current = instance;
+                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);
+                    }
                 }
             }
         }, 
         /**
-         * Include externalRef in dependencies to ensure the callback updates
-         * when the ref changes, allowing proper ref forwarding.
+         * Include all dependencies to ensure the callback updates correctly
          */
-        [visualElement]);
+        [visualElement, visualState, externalRef]);
     }
 
     /**