motion 11.11.12 → 11.11.13

package/.turbo/turbo-build.log

@@ -1,29 +1,32 @@
-(node:2512) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:6290) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 lib/index.js → dist/motion.dev.js...
-created dist/motion.dev.js in 814ms
+created dist/motion.dev.js in 484ms
 
 lib/index.js → dist/motion.js...
-created dist/motion.js in 1.2s
+created dist/motion.js in 766ms
 
 lib/index.js → dist/cjs...
-created dist/cjs in 335ms
+created dist/cjs in 218ms
 
 lib/react-client.js → dist/cjs...
-created dist/cjs in 376ms
+created dist/cjs in 323ms
 
 lib/react-m.js → dist/cjs...
-created dist/cjs in 93ms
+created dist/cjs in 85ms
 
-lib/index.js, lib/react-client.js, lib/react-m.js → dist/es...
-created dist/es in 480ms
+lib/index.js, lib/react.js, lib/react-client.js, lib/react-m.js → dist/es...
+created dist/es in 518ms
 
 types/index.d.ts → dist/index.d.ts...
-created dist/index.d.ts in 10ms
+created dist/index.d.ts in 9ms
+
+types/react.d.ts → dist/react.d.ts...
+created dist/react.d.ts in 5ms
 
 types/react-m.d.ts → dist/react-m.d.ts...
-created dist/react-m.d.ts in 3ms
+created dist/react-m.d.ts in 2ms
 
 types/react-client.d.ts → dist/react-client.d.ts...
-created dist/react-client.d.ts in 3ms
+created dist/react-client.d.ts in 1ms

package/dist/cjs/index.js

@@ -279,7 +279,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.11.12";
+        this.version = "11.11.13";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -4089,7 +4089,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.12", `Attempting to mix Motion versions ${nextValue.version} with 11.11.12 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.13", `Attempting to mix Motion versions ${nextValue.version} with 11.11.13 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/react-client.js

@@ -3281,7 +3281,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.11.12";
+        this.version = "11.11.13";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -9024,7 +9024,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.12", `Attempting to mix Motion versions ${nextValue.version} with 11.11.12 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.13", `Attempting to mix Motion versions ${nextValue.version} with 11.11.13 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/framer-motion/dist/es/animation/animators/BaseAnimation.mjs

@@ -1,5 +1,6 @@
 import { time } from '../../frameloop/sync-time.mjs';
 import { flushKeyframeResolvers } from '../../render/utils/KeyframesResolver.mjs';
+import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { canAnimate } from './utils/can-animate.mjs';
 import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
 
@@ -72,7 +73,7 @@ class BaseAnimation {
          */
         if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
             // Finish immediately
-            if (!delay) {
+            if (instantAnimationState.current || !delay) {
                 onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
                 onComplete === null || onComplete === void 0 ? void 0 : onComplete();
                 this.resolveFinishedPromise();

package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -376,5 +376,9 @@ class MainThreadAnimation extends BaseAnimation {
         return this.tick(time, true);
     }
 }
+// Legacy interface
+function animateValue(options) {
+    return new MainThreadAnimation(options);
+}
 
-export { MainThreadAnimation };
+export { MainThreadAnimation, animateValue };

package/dist/es/framer-motion/dist/es/animation/hooks/animation-controls.mjs

@@ -0,0 +1,80 @@
+import { invariant } from '../../utils/errors.mjs';
+import { setTarget } from '../../render/utils/setters.mjs';
+import { animateVisualElement } from '../interfaces/visual-element.mjs';
+
+function stopAnimation(visualElement) {
+    visualElement.values.forEach((value) => value.stop());
+}
+function setVariants(visualElement, variantLabels) {
+    const reversedLabels = [...variantLabels].reverse();
+    reversedLabels.forEach((key) => {
+        const variant = visualElement.getVariant(key);
+        variant && setTarget(visualElement, variant);
+        if (visualElement.variantChildren) {
+            visualElement.variantChildren.forEach((child) => {
+                setVariants(child, variantLabels);
+            });
+        }
+    });
+}
+function setValues(visualElement, definition) {
+    if (Array.isArray(definition)) {
+        return setVariants(visualElement, definition);
+    }
+    else if (typeof definition === "string") {
+        return setVariants(visualElement, [definition]);
+    }
+    else {
+        setTarget(visualElement, definition);
+    }
+}
+/**
+ * @public
+ */
+function animationControls() {
+    /**
+     * Track whether the host component has mounted.
+     */
+    let hasMounted = false;
+    /**
+     * A collection of linked component animation controls.
+     */
+    const subscribers = new Set();
+    const controls = {
+        subscribe(visualElement) {
+            subscribers.add(visualElement);
+            return () => void subscribers.delete(visualElement);
+        },
+        start(definition, transitionOverride) {
+            invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            const animations = [];
+            subscribers.forEach((visualElement) => {
+                animations.push(animateVisualElement(visualElement, definition, {
+                    transitionOverride,
+                }));
+            });
+            return Promise.all(animations);
+        },
+        set(definition) {
+            invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            return subscribers.forEach((visualElement) => {
+                setValues(visualElement, definition);
+            });
+        },
+        stop() {
+            subscribers.forEach((visualElement) => {
+                stopAnimation(visualElement);
+            });
+        },
+        mount() {
+            hasMounted = true;
+            return () => {
+                hasMounted = false;
+                controls.stop();
+            };
+        },
+    };
+    return controls;
+}
+
+export { animationControls, setValues };

package/dist/es/framer-motion/dist/es/animation/hooks/use-animate-style.mjs

@@ -0,0 +1,17 @@
+import { useConstant } from '../../utils/use-constant.mjs';
+import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
+import { createScopedWaapiAnimate } from '../animators/waapi/animate-style.mjs';
+
+function useAnimateMini() {
+    const scope = useConstant(() => ({
+        current: null, // Will be hydrated by React
+        animations: [],
+    }));
+    const animate = useConstant(() => createScopedWaapiAnimate(scope));
+    useUnmountEffect(() => {
+        scope.animations.forEach((animation) => animation.stop());
+    });
+    return [scope, animate];
+}
+
+export { useAnimateMini };

package/dist/es/framer-motion/dist/es/animation/hooks/use-animate.mjs

@@ -0,0 +1,17 @@
+import { useConstant } from '../../utils/use-constant.mjs';
+import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
+import { createScopedAnimate } from '../animate/index.mjs';
+
+function useAnimate() {
+    const scope = useConstant(() => ({
+        current: null, // Will be hydrated by React
+        animations: [],
+    }));
+    const animate = useConstant(() => createScopedAnimate(scope));
+    useUnmountEffect(() => {
+        scope.animations.forEach((animation) => animation.stop());
+    });
+    return [scope, animate];
+}
+
+export { useAnimate };

package/dist/es/framer-motion/dist/es/animation/hooks/use-animated-state.mjs

@@ -0,0 +1,64 @@
+import { useState, useLayoutEffect } from 'react';
+import { useConstant } from '../../utils/use-constant.mjs';
+import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
+import { VisualElement } from '../../render/VisualElement.mjs';
+import { animateVisualElement } from '../interfaces/visual-element.mjs';
+
+const createObject = () => ({});
+class StateVisualElement extends VisualElement {
+    constructor() {
+        super(...arguments);
+        this.measureInstanceViewportBox = createBox;
+    }
+    build() { }
+    resetTransform() { }
+    restoreTransform() { }
+    removeValueFromRenderState() { }
+    renderInstance() { }
+    scrapeMotionValuesFromProps() {
+        return createObject();
+    }
+    getBaseTargetFromProps() {
+        return undefined;
+    }
+    readValueFromInstance(_state, key, options) {
+        return options.initialState[key] || 0;
+    }
+    sortInstanceNodePosition() {
+        return 0;
+    }
+}
+const useVisualState = makeUseVisualState({
+    scrapeMotionValuesFromProps: createObject,
+    createRenderState: createObject,
+});
+/**
+ * This is not an officially supported API and may be removed
+ * on any version.
+ */
+function useAnimatedState(initialState) {
+    const [animationState, setAnimationState] = useState(initialState);
+    const visualState = useVisualState({}, false);
+    const element = useConstant(() => {
+        return new StateVisualElement({
+            props: {
+                onUpdate: (v) => {
+                    setAnimationState({ ...v });
+                },
+            },
+            visualState,
+            presenceContext: null,
+        }, { initialState });
+    });
+    useLayoutEffect(() => {
+        element.mount({});
+        return () => element.unmount();
+    }, [element]);
+    const startAnimation = useConstant(() => (animationDefinition) => {
+        return animateVisualElement(element, animationDefinition);
+    });
+    return [animationState, startAnimation];
+}
+
+export { useAnimatedState };

package/dist/es/framer-motion/dist/es/animation/hooks/use-animation.mjs

@@ -0,0 +1,41 @@
+import { animationControls } from './animation-controls.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
+
+/**
+ * Creates `AnimationControls`, which can be used to manually start, stop
+ * and sequence animations on one or more components.
+ *
+ * The returned `AnimationControls` should be passed to the `animate` property
+ * of the components you want to animate.
+ *
+ * These components can then be animated with the `start` method.
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { motion, useAnimation } from 'framer-motion'
+ *
+ * export function MyComponent(props) {
+ *    const controls = useAnimation()
+ *
+ *    controls.start({
+ *        x: 100,
+ *        transition: { duration: 0.5 },
+ *    })
+ *
+ *    return <motion.div animate={controls} />
+ * }
+ * ```
+ *
+ * @returns Animation controller with `start` and `stop` methods
+ *
+ * @public
+ */
+function useAnimationControls() {
+    const controls = useConstant(animationControls);
+    useIsomorphicLayoutEffect(controls.mount, []);
+    return controls;
+}
+const useAnimation = useAnimationControls;
+
+export { useAnimation, useAnimationControls };

package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs

@@ -1,6 +1,8 @@
 import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
 import { getDefaultTransition } from '../utils/default-transitions.mjs';
 import { getValueTransition } from '../utils/get-value-transition.mjs';
+import { MotionGlobalConfig } from '../../utils/GlobalConfig.mjs';
+import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe.mjs';
 import { frame } from '../../frameloop/frame.mjs';
 import { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';
@@ -72,6 +74,12 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             shouldSkip = true;
         }
     }
+    if (instantAnimationState.current ||
+        MotionGlobalConfig.skipAnimations) {
+        shouldSkip = true;
+        options.duration = 0;
+        options.delay = 0;
+    }
     /**
      * If we can or must skip creating the animation, and apply only
      * the final keyframe, do so. We also check once keyframes are resolved but

package/dist/es/framer-motion/dist/es/animation/optimized-appear/handoff.mjs

@@ -0,0 +1,40 @@
+import { appearAnimationStore } from './store.mjs';
+import { appearStoreId } from './store-id.mjs';
+
+function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
+    var _a;
+    const storeId = appearStoreId(elementId, valueName);
+    const optimisedAnimation = appearAnimationStore.get(storeId);
+    if (!optimisedAnimation) {
+        return null;
+    }
+    const { animation, startTime } = optimisedAnimation;
+    function cancelAnimation() {
+        var _a;
+        (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, elementId, valueName, frame);
+    }
+    /**
+     * We can cancel the animation once it's finished now that we've synced
+     * with Motion.
+     *
+     * Prefer onfinish over finished as onfinish is backwards compatible with
+     * older browsers.
+     */
+    animation.onfinish = cancelAnimation;
+    if (startTime === null || ((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, elementId))) {
+        /**
+         * If the startTime is null, this animation is the Paint Ready detection animation
+         * and we can cancel it immediately without handoff.
+         *
+         * Or if we've already handed off the animation then we're now interrupting it.
+         * In which case we need to cancel it.
+         */
+        cancelAnimation();
+        return null;
+    }
+    else {
+        return startTime;
+    }
+}
+
+export { handoffOptimizedAppearAnimation };

package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs

@@ -0,0 +1,173 @@
+import { appearStoreId } from './store-id.mjs';
+import { startWaapiAnimation } from '../animators/waapi/index.mjs';
+import { optimizedAppearDataId } from './data-id.mjs';
+import { handoffOptimizedAppearAnimation } from './handoff.mjs';
+import { appearAnimationStore, appearComplete } from './store.mjs';
+import { noop } from '../../utils/noop.mjs';
+import { getOptimisedAppearId } from './get-appear-id.mjs';
+
+/**
+ * A single time to use across all animations to manually set startTime
+ * and ensure they're all in sync.
+ */
+let startFrameTime;
+/**
+ * A dummy animation to detect when Chrome is ready to start
+ * painting the page and hold off from triggering the real animation
+ * until then. We only need one animation to detect paint ready.
+ *
+ * https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
+ */
+let readyAnimation;
+/**
+ * Keep track of animations that were suspended vs cancelled so we
+ * can easily resume them when we're done measuring layout.
+ */
+const suspendedAnimations = new Set();
+function resumeSuspendedAnimations() {
+    suspendedAnimations.forEach((data) => {
+        data.animation.play();
+        data.animation.startTime = data.startTime;
+    });
+    suspendedAnimations.clear();
+}
+function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
+    // Prevent optimised appear animations if Motion has already started animating.
+    if (window.MotionIsMounted) {
+        return;
+    }
+    const id = element.dataset[optimizedAppearDataId];
+    if (!id)
+        return;
+    window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
+    const storeId = appearStoreId(id, name);
+    if (!readyAnimation) {
+        readyAnimation = startWaapiAnimation(element, name, [keyframes[0], keyframes[0]], 
+        /**
+         * 10 secs is basically just a super-safe duration to give Chrome
+         * long enough to get the animation ready.
+         */
+        { duration: 10000, ease: "linear" });
+        appearAnimationStore.set(storeId, {
+            animation: readyAnimation,
+            startTime: null,
+        });
+        /**
+         * If there's no readyAnimation then there's been no instantiation
+         * of handoff animations.
+         */
+        window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
+        window.MotionHasOptimisedAnimation = (elementId, valueName) => {
+            if (!elementId)
+                return false;
+            /**
+             * Keep a map of elementIds that have started animating. We check
+             * via ID instead of Element because of hydration errors and
+             * pre-hydration checks. We also actively record IDs as they start
+             * animating rather than simply checking for data-appear-id as
+             * this attrbute might be present but not lead to an animation, for
+             * instance if the element's appear animation is on a different
+             * breakpoint.
+             */
+            if (!valueName) {
+                return appearComplete.has(elementId);
+            }
+            const animationId = appearStoreId(elementId, valueName);
+            return Boolean(appearAnimationStore.get(animationId));
+        };
+        window.MotionHandoffMarkAsComplete = (elementId) => {
+            if (appearComplete.has(elementId)) {
+                appearComplete.set(elementId, true);
+            }
+        };
+        window.MotionHandoffIsComplete = (elementId) => {
+            return appearComplete.get(elementId) === true;
+        };
+        /**
+         * We only need to cancel transform animations as
+         * they're the ones that will interfere with the
+         * layout animation measurements.
+         */
+        window.MotionCancelOptimisedAnimation = (elementId, valueName, frame, canResume) => {
+            const animationId = appearStoreId(elementId, valueName);
+            const data = appearAnimationStore.get(animationId);
+            if (!data)
+                return;
+            if (frame && canResume === undefined) {
+                /**
+                 * Wait until the end of the subsequent frame to cancel the animation
+                 * to ensure we don't remove the animation before the main thread has
+                 * had a chance to resolve keyframes and render.
+                 */
+                frame.postRender(() => {
+                    frame.postRender(() => {
+                        data.animation.cancel();
+                    });
+                });
+            }
+            else {
+                data.animation.cancel();
+            }
+            if (frame && canResume) {
+                suspendedAnimations.add(data);
+                frame.render(resumeSuspendedAnimations);
+            }
+            else {
+                appearAnimationStore.delete(animationId);
+                /**
+                 * If there are no more animations left, we can remove the cancel function.
+                 * This will let us know when we can stop checking for conflicting layout animations.
+                 */
+                if (!appearAnimationStore.size) {
+                    window.MotionCancelOptimisedAnimation = undefined;
+                }
+            }
+        };
+        window.MotionCheckAppearSync = (visualElement, valueName, value) => {
+            var _a, _b;
+            const appearId = getOptimisedAppearId(visualElement);
+            if (!appearId)
+                return;
+            const valueIsOptimised = (_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
+            const externalAnimationValue = (_b = visualElement.props.values) === null || _b === void 0 ? void 0 : _b[valueName];
+            if (!valueIsOptimised || !externalAnimationValue)
+                return;
+            const removeSyncCheck = value.on("change", (latestValue) => {
+                var _a;
+                if (externalAnimationValue.get() !== latestValue) {
+                    (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
+                    removeSyncCheck();
+                }
+            });
+            return removeSyncCheck;
+        };
+    }
+    const startAnimation = () => {
+        readyAnimation.cancel();
+        const appearAnimation = startWaapiAnimation(element, name, keyframes, options);
+        /**
+         * Record the time of the first started animation. We call performance.now() once
+         * here and once in handoff to ensure we're getting
+         * close to a frame-locked time. This keeps all animations in sync.
+         */
+        if (startFrameTime === undefined) {
+            startFrameTime = performance.now();
+        }
+        appearAnimation.startTime = startFrameTime;
+        appearAnimationStore.set(storeId, {
+            animation: appearAnimation,
+            startTime: startFrameTime,
+        });
+        if (onReady)
+            onReady(appearAnimation);
+    };
+    appearComplete.set(id, false);
+    if (readyAnimation.ready) {
+        readyAnimation.ready.then(startAnimation).catch(noop);
+    }
+    else {
+        startAnimation();
+    }
+}
+
+export { startOptimizedAppearAnimation };

package/dist/es/framer-motion/dist/es/animation/optimized-appear/store-id.mjs

@@ -0,0 +1,8 @@
+import { transformProps } from '../../render/html/utils/transform.mjs';
+
+const appearStoreId = (elementId, valueName) => {
+    const key = transformProps.has(valueName) ? "transform" : valueName;
+    return `${elementId}: ${key}`;
+};
+
+export { appearStoreId };

package/dist/es/framer-motion/dist/es/animation/optimized-appear/store.mjs

@@ -0,0 +1,4 @@
+const appearAnimationStore = new Map();
+const appearComplete = new Map();
+
+export { appearAnimationStore, appearComplete };

package/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useId, useRef, useContext, useInsertionEffect } from 'react';
+import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
+
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+}
+function PopChild({ children, isPresent }) {
+    const id = useId();
+    const ref = useRef(null);
+    const size = useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    });
+    const { nonce } = useContext(MotionConfigContext);
+    /**
+     * 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.
+     *
+     * We can't apply size via render as the measurement happens
+     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+     * styles directly on the DOM node, we might be overwriting
+     * styles set via the style prop.
+     */
+    useInsertionEffect(() => {
+        const { width, height, top, left } = size.current;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        ref.current.dataset.motionPopId = id;
+        const style = document.createElement("style");
+        if (nonce)
+            style.nonce = nonce;
+        document.head.appendChild(style);
+        if (style.sheet) {
+            style.sheet.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            top: ${top}px !important;
+            left: ${left}px !important;
+          }
+        `);
+        }
+        return () => {
+            document.head.removeChild(style);
+        };
+    }, [isPresent]);
+    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));
+}
+
+export { PopChild };