framer-motion 12.23.15 → 12.23.18

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var featureBundle = require('./feature-bundle-DzuUB-G1.js');
+var featureBundle = require('./feature-bundle-pqhrS3ID.js');
 require('react');
 require('motion-dom');
 require('motion-utils');

package/dist/cjs/dom.js

@@ -1838,13 +1838,22 @@ function createScopedAnimate(scope) {
      */
     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 motionDom.GroupAnimationWithThen(animations);
+        if (animationOnComplete) {
+            animation.finished.then(animationOnComplete);
+        }
         if (scope) {
             scope.animations.push(animation);
             animation.finished.then(() => {

package/dist/cjs/{feature-bundle-DzuUB-G1.js → feature-bundle-pqhrS3ID.js}

@@ -5,6 +5,25 @@ var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 const LayoutGroupContext = React.createContext({});
 
 /**
@@ -4069,16 +4088,22 @@ function isRefObject(ref) {
  * external ref and VisualElement.
  */
 function useMotionRef(visualState, visualElement, externalRef) {
+    const currentInstanceRef = React__namespace.useRef(null);
     return React.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) {
@@ -4094,7 +4119,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
      * Include externalRef in dependencies to ensure the callback updates
      * when the ref changes, allowing proper ref forwarding.
      */
-    [visualElement]);
+    [visualElement, externalRef]);
 }
 
 /**

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var featureBundle = require('./feature-bundle-DzuUB-G1.js');
+var featureBundle = require('./feature-bundle-pqhrS3ID.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -27,6 +27,60 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
+/**
+ * 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.
@@ -67,6 +121,7 @@ function PopChild({ children, isPresent, anchorX, root }) {
         right: 0,
     });
     const { nonce } = React.useContext(featureBundle.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.
@@ -104,7 +159,7 @@ function PopChild({ children, isPresent, anchorX, root }) {
             }
         };
     }, [isPresent]);
-    return (jsxRuntime.jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
+    return (jsxRuntime.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 }) => {
@@ -1219,13 +1274,22 @@ function createScopedAnimate(scope) {
      */
     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 motionDom.GroupAnimationWithThen(animations);
+        if (animationOnComplete) {
+            animation.finished.then(animationOnComplete);
+        }
         if (scope) {
             scope.animations.push(animation);
             animation.finished.then(() => {

package/dist/cjs/m.js

@@ -4,23 +4,42 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var motionUtils = require('motion-utils');
-var react = require('react');
+var React = require('react');
 var motionDom = require('motion-dom');
 
-const LayoutGroupContext = react.createContext({});
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const LazyContext = react.createContext({ strict: false });
+const LayoutGroupContext = React.createContext({});
+
+const LazyContext = React.createContext({ strict: false });
 
 /**
  * @public
  */
-const MotionConfigContext = react.createContext({
+const MotionConfigContext = React.createContext({
     transformPagePoint: (p) => p,
     isStatic: false,
     reducedMotion: "never",
 });
 
-const MotionContext = /* @__PURE__ */ react.createContext({});
+const MotionContext = /* @__PURE__ */ React.createContext({});
 
 function isAnimationControls(v) {
     return (v !== null &&
@@ -68,8 +87,8 @@ function getCurrentTreeVariants(props, context) {
 }
 
 function useCreateMotionContext(props) {
-    const { initial, animate } = getCurrentTreeVariants(props, react.useContext(MotionContext));
-    return react.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
+    const { initial, animate } = getCurrentTreeVariants(props, React.useContext(MotionContext));
+    return React.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
 }
 function variantLabelsAsDependency(prop) {
     return Array.isArray(prop) ? prop.join(" ") : prop;
@@ -214,7 +233,7 @@ function copyRawValuesOnly(target, source, props) {
     }
 }
 function useInitialMotionValues({ transformTemplate }, visualState) {
-    return react.useMemo(() => {
+    return React.useMemo(() => {
         const state = createHtmlRenderState();
         buildHTMLStyles(state, visualState, transformTemplate);
         return Object.assign({}, state.vars, state.style);
@@ -346,7 +365,7 @@ const createSvgRenderState = () => ({
 const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
 
 function useSVGProps(props, visualState, _isStatic, Component) {
-    const visualProps = react.useMemo(() => {
+    const visualProps = React.useMemo(() => {
         const state = createSvgRenderState();
         buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
         return {
@@ -539,15 +558,15 @@ function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMo
         : useHTMLProps;
     const visualProps = useVisualProps(props, latestValues, isStatic, Component);
     const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
-    const elementProps = Component !== react.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
+    const elementProps = Component !== React.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
     /**
      * If component has been handed a motion value as its child,
      * memoise its initial value and render that. Subsequent updates
      * will be handled by the onChange handler
      */
     const { children } = props;
-    const renderedChildren = react.useMemo(() => (motionDom.isMotionValue(children) ? children.get() : children), [children]);
-    return react.createElement(Component, {
+    const renderedChildren = React.useMemo(() => (motionDom.isMotionValue(children) ? children.get() : children), [children]);
+    return React.createElement(Component, {
         ...elementProps,
         children: renderedChildren,
     });
@@ -557,7 +576,7 @@ function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMo
  * @public
  */
 const PresenceContext = 
-/* @__PURE__ */ react.createContext(null);
+/* @__PURE__ */ React.createContext(null);
 
 function getValueState(visualElement) {
     const state = [{}, {}];
@@ -598,7 +617,7 @@ function resolveVariantFromProps(props, definition, custom, visualElement) {
  * you can ensure that initialisers don't execute twice or more.
  */
 function useConstant(init) {
-    const ref = react.useRef(null);
+    const ref = React.useRef(null);
     if (ref.current === null) {
         ref.current = init();
     }
@@ -677,8 +696,8 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     return values;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {
-    const context = react.useContext(MotionContext);
-    const presenceContext = react.useContext(PresenceContext);
+    const context = React.useContext(MotionContext);
+    const presenceContext = React.useContext(PresenceContext);
     const make = () => makeState(config, props, context, presenceContext);
     return isStatic ? make() : useConstant(make);
 };
@@ -764,16 +783,22 @@ function isRefObject(ref) {
  * external ref and VisualElement.
  */
 function useMotionRef(visualState, visualElement, externalRef) {
-    return react.useCallback((instance) => {
-        if (instance) {
-            visualState.onMount && visualState.onMount(instance);
-        }
-        if (visualElement) {
+    const currentInstanceRef = React__namespace.useRef(null);
+    return React.useCallback((instance) => {
+        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) {
@@ -789,7 +814,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
      * Include externalRef in dependencies to ensure the callback updates
      * when the ref changes, allowing proper ref forwarding.
      */
-    [visualElement]);
+    [visualElement, externalRef]);
 }
 
 /**
@@ -803,16 +828,16 @@ const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId
 /**
  * Internal, exported only for usage in Framer
  */
-const SwitchLayoutGroupContext = react.createContext({});
+const SwitchLayoutGroupContext = React.createContext({});
 
-const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
+const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    const { visualElement: parent } = react.useContext(MotionContext);
-    const lazyContext = react.useContext(LazyContext);
-    const presenceContext = react.useContext(PresenceContext);
-    const reducedMotionConfig = react.useContext(MotionConfigContext).reducedMotion;
-    const visualElementRef = react.useRef(null);
+    const { visualElement: parent } = React.useContext(MotionContext);
+    const lazyContext = React.useContext(LazyContext);
+    const presenceContext = React.useContext(PresenceContext);
+    const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
+    const visualElementRef = React.useRef(null);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */
@@ -836,15 +861,15 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      * Load Motion gesture and animation features. These are rendered as renderless
      * components so each feature can optionally make use of React lifecycle methods.
      */
-    const initialLayoutGroupConfig = react.useContext(SwitchLayoutGroupContext);
+    const initialLayoutGroupConfig = React.useContext(SwitchLayoutGroupContext);
     if (visualElement &&
         !visualElement.projection &&
         ProjectionNodeConstructor &&
         (visualElement.type === "html" || visualElement.type === "svg")) {
         createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
     }
-    const isMounted = react.useRef(false);
-    react.useInsertionEffect(() => {
+    const isMounted = React.useRef(false);
+    React.useInsertionEffect(() => {
         /**
          * Check the component has already mounted before calling
          * `update` unnecessarily. This ensures we skip the initial update.
@@ -858,7 +883,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      * was present on initial render - it will be deleted after this.
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
-    const wantsHandoff = react.useRef(Boolean(optimisedAppearId) &&
+    const wantsHandoff = React.useRef(Boolean(optimisedAppearId) &&
         !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
         window.MotionHasOptimisedAnimation?.(optimisedAppearId));
     useIsomorphicLayoutEffect(() => {
@@ -882,7 +907,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
             visualElement.animationState.animateChanges();
         }
     });
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!visualElement)
             return;
         if (!wantsHandoff.current && visualElement.animationState) {
@@ -955,7 +980,7 @@ function createMotionComponent(Component, { forwardMotionProps = false } = {}, p
          */
         let MeasureLayout;
         const configAndProps = {
-            ...react.useContext(MotionConfigContext),
+            ...React.useContext(MotionConfigContext),
             ...props,
             layoutId: useLayoutId(props),
         };
@@ -983,18 +1008,18 @@ function createMotionComponent(Component, { forwardMotionProps = false } = {}, p
     MotionDOMComponent.displayName = `motion.${typeof Component === "string"
         ? Component
         : `create(${Component.displayName ?? Component.name ?? ""})`}`;
-    const ForwardRefMotionComponent = react.forwardRef(MotionDOMComponent);
+    const ForwardRefMotionComponent = React.forwardRef(MotionDOMComponent);
     ForwardRefMotionComponent[motionComponentSymbol] = Component;
     return ForwardRefMotionComponent;
 }
 function useLayoutId({ layoutId }) {
-    const layoutGroupId = react.useContext(LayoutGroupContext).id;
+    const layoutGroupId = React.useContext(LayoutGroupContext).id;
     return layoutGroupId && layoutId !== undefined
         ? layoutGroupId + "-" + layoutId
         : layoutId;
 }
 function useStrictMode(configAndProps, preloadedFeatures) {
-    const isStrict = react.useContext(LazyContext).strict;
+    const isStrict = React.useContext(LazyContext).strict;
     /**
      * If we're in development mode, check to make sure we're not rendering a motion component
      * as a child of LazyMotion, as this will break the file-size benefits of using it.