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

A simple and powerful JavaScript animation library

{"version":3,"file":"use-motion-ref.mjs","sources":["../../../../src/motion/utils/use-motion-ref.ts"],"sourcesContent":["\"use client\"\n\nimport type { VisualElement } from \"motion-dom\"\nimport * as React from \"react\"\nimport { useCallback, useInsertionEffect, useRef } from \"react\"\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;;"}