motion 12.18.1 → 12.19.0

package/dist/es/framer-motion/dist/es/animation/animate/index.mjs

@@ -1,34 +0,0 @@
-import { animateSequence } from './sequence.mjs';
-import { animateSubject } from './subject.mjs';
-import { GroupAnimationWithThen } from '../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
-
-function isSequence(value) {
-    return Array.isArray(value) && value.some(Array.isArray);
-}
-/**
- * Creates an animation function that is optionally scoped
- * to a specific element.
- */
-function createScopedAnimate(scope) {
-    /**
-     * Implementation
-     */
-    function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
-        let animations = [];
-        if (isSequence(subjectOrSequence)) {
-            animations = animateSequence(subjectOrSequence, optionsOrKeyframes, scope);
-        }
-        else {
-            animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
-        }
-        const animation = new GroupAnimationWithThen(animations);
-        if (scope) {
-            scope.animations.push(animation);
-        }
-        return animation;
-    }
-    return scopedAnimate;
-}
-const animate = createScopedAnimate();
-
-export { animate, createScopedAnimate };

package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs

@@ -1,19 +0,0 @@
-import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
-import { resolveElements } from '../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
-
-function resolveSubjects(subject, keyframes, scope, selectorCache) {
-    if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
-        return resolveElements(subject, scope, selectorCache);
-    }
-    else if (subject instanceof NodeList) {
-        return Array.from(subject);
-    }
-    else if (Array.isArray(subject)) {
-        return subject;
-    }
-    else {
-        return [subject];
-    }
-}
-
-export { resolveSubjects };

package/dist/es/framer-motion/dist/es/animation/animate/sequence.mjs

@@ -1,14 +0,0 @@
-import { createAnimationsFromSequence } from '../sequence/create.mjs';
-import { animateSubject } from './subject.mjs';
-import { spring } from '../../../../../motion-dom/dist/es/animation/generators/spring/index.mjs';
-
-function animateSequence(sequence, options, scope) {
-    const animations = [];
-    const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring });
-    animationDefinitions.forEach(({ keyframes, transition }, subject) => {
-        animations.push(...animateSubject(subject, keyframes, transition));
-    });
-    return animations;
-}
-
-export { animateSequence };

package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs

@@ -1,11 +0,0 @@
-import { animateMotionValue } from '../interfaces/motion-value.mjs';
-import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
-import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
-
-function animateSingleValue(value, keyframes, options) {
-    const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
-    motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
-    return motionValue$1.animation;
-}
-
-export { animateSingleValue };

package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs

@@ -1,52 +0,0 @@
-import { visualElementStore } from '../../render/store.mjs';
-import { animateTarget } from '../interfaces/visual-element-target.mjs';
-import { createDOMVisualElement, createObjectVisualElement } from '../utils/create-visual-element.mjs';
-import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
-import { resolveSubjects } from './resolve-subjects.mjs';
-import { animateSingleValue } from './single-value.mjs';
-import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
-import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
-
-function isSingleValue(subject, keyframes) {
-    return (isMotionValue(subject) ||
-        typeof subject === "number" ||
-        (typeof subject === "string" && !isDOMKeyframes(keyframes)));
-}
-/**
- * Implementation
- */
-function animateSubject(subject, keyframes, options, scope) {
-    const animations = [];
-    if (isSingleValue(subject, keyframes)) {
-        animations.push(animateSingleValue(subject, isDOMKeyframes(keyframes)
-            ? keyframes.default || keyframes
-            : keyframes, options ? options.default || options : options));
-    }
-    else {
-        const subjects = resolveSubjects(subject, keyframes, scope);
-        const numSubjects = subjects.length;
-        invariant(Boolean(numSubjects), "No valid elements provided.");
-        for (let i = 0; i < numSubjects; i++) {
-            const thisSubject = subjects[i];
-            const createVisualElement = thisSubject instanceof Element
-                ? createDOMVisualElement
-                : createObjectVisualElement;
-            if (!visualElementStore.has(thisSubject)) {
-                createVisualElement(thisSubject);
-            }
-            const visualElement = visualElementStore.get(thisSubject);
-            const transition = { ...options };
-            /**
-             * Resolve stagger function if provided.
-             */
-            if ("delay" in transition &&
-                typeof transition.delay === "function") {
-                transition.delay = transition.delay(i, numSubjects);
-            }
-            animations.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
-        }
-    }
-    return animations;
-}
-
-export { animateSubject };

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -1,112 +0,0 @@
-import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
-import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
-import { getValueTransition } from '../../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
-import { getAnimationMap, animationMapKey } from '../../../../../../motion-dom/dist/es/animation/utils/active-animations.mjs';
-import { getComputedStyle } from '../../../../../../motion-dom/dist/es/render/dom/style-computed.mjs';
-import { fillWildcards } from '../../../../../../motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs';
-import { applyPxDefaults } from '../../../../../../motion-dom/dist/es/animation/keyframes/utils/apply-px-defaults.mjs';
-import { NativeAnimation } from '../../../../../../motion-dom/dist/es/animation/NativeAnimation.mjs';
-import { secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
-
-function animateElements(elementOrSelector, keyframes, options, scope) {
-    const elements = resolveElements(elementOrSelector, scope);
-    const numElements = elements.length;
-    invariant(Boolean(numElements), "No valid element provided.");
-    /**
-     * WAAPI doesn't support interrupting animations.
-     *
-     * Therefore, starting animations requires a three-step process:
-     * 1. Stop existing animations (write styles to DOM)
-     * 2. Resolve keyframes (read styles from DOM)
-     * 3. Create new animations (write styles to DOM)
-     *
-     * The hybrid `animate()` function uses AsyncAnimation to resolve
-     * keyframes before creating new animations, which removes style
-     * thrashing. Here, we have much stricter filesize constraints.
-     * Therefore we do this in a synchronous way that ensures that
-     * at least within `animate()` calls there is no style thrashing.
-     *
-     * In the motion-native-animate-mini-interrupt benchmark this
-     * was 80% faster than a single loop.
-     */
-    const animationDefinitions = [];
-    /**
-     * Step 1: Build options and stop existing animations (write)
-     */
-    for (let i = 0; i < numElements; i++) {
-        const element = elements[i];
-        const elementTransition = { ...options };
-        /**
-         * Resolve stagger function if provided.
-         */
-        if (typeof elementTransition.delay === "function") {
-            elementTransition.delay = elementTransition.delay(i, numElements);
-        }
-        for (const valueName in keyframes) {
-            let valueKeyframes = keyframes[valueName];
-            if (!Array.isArray(valueKeyframes)) {
-                valueKeyframes = [valueKeyframes];
-            }
-            const valueOptions = {
-                ...getValueTransition(elementTransition, valueName),
-            };
-            valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
-            valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
-            /**
-             * If there's an existing animation playing on this element then stop it
-             * before creating a new one.
-             */
-            const map = getAnimationMap(element);
-            const key = animationMapKey(valueName, valueOptions.pseudoElement || "");
-            const currentAnimation = map.get(key);
-            currentAnimation && currentAnimation.stop();
-            animationDefinitions.push({
-                map,
-                key,
-                unresolvedKeyframes: valueKeyframes,
-                options: {
-                    ...valueOptions,
-                    element,
-                    name: valueName,
-                    allowFlatten: !elementTransition.type && !elementTransition.ease,
-                },
-            });
-        }
-    }
-    /**
-     * Step 2: Resolve keyframes (read)
-     */
-    for (let i = 0; i < animationDefinitions.length; i++) {
-        const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
-        const { element, name, pseudoElement } = animationOptions;
-        if (!pseudoElement && unresolvedKeyframes[0] === null) {
-            unresolvedKeyframes[0] = getComputedStyle(element, name);
-        }
-        fillWildcards(unresolvedKeyframes);
-        applyPxDefaults(unresolvedKeyframes, name);
-        /**
-         * If we only have one keyframe, explicitly read the initial keyframe
-         * from the computed style. This is to ensure consistency with WAAPI behaviour
-         * for restarting animations, for instance .play() after finish, when it
-         * has one vs two keyframes.
-         */
-        if (!pseudoElement && unresolvedKeyframes.length < 2) {
-            unresolvedKeyframes.unshift(getComputedStyle(element, name));
-        }
-        animationOptions.keyframes = unresolvedKeyframes;
-    }
-    /**
-     * Step 3: Create new animations (write)
-     */
-    const animations = [];
-    for (let i = 0; i < animationDefinitions.length; i++) {
-        const { map, key, options: animationOptions } = animationDefinitions[i];
-        const animation = new NativeAnimation(animationOptions);
-        map.set(key, animation);
-        animation.finished.finally(() => map.delete(key));
-        animations.push(animation);
-    }
-    return animations;
-}
-
-export { animateElements };

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs

@@ -1,13 +0,0 @@
-import { createAnimationsFromSequence } from '../../sequence/create.mjs';
-import { animateElements } from './animate-elements.mjs';
-import { GroupAnimationWithThen } from '../../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
-
-function animateSequence(definition, options) {
-    const animations = [];
-    createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
-        animations.push(...animateElements(element, keyframes, transition));
-    });
-    return new GroupAnimationWithThen(animations);
-}
-
-export { animateSequence };

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs

@@ -1,12 +0,0 @@
-import { animateElements } from './animate-elements.mjs';
-import { GroupAnimationWithThen } from '../../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
-
-const createScopedWaapiAnimate = (scope) => {
-    function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
-    }
-    return scopedAnimate;
-};
-const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
-
-export { animateMini, createScopedWaapiAnimate };

package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs

@@ -1,12 +0,0 @@
-const isNotNull = (value) => value !== null;
-function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
-    const resolvedKeyframes = keyframes.filter(isNotNull);
-    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-        ? 0
-        : resolvedKeyframes.length - 1;
-    return !index || finalKeyframe === undefined
-        ? resolvedKeyframes[index]
-        : finalKeyframe;
-}
-
-export { getFinalKeyframe };

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

@@ -1,80 +0,0 @@
-import { setTarget } from '../../render/utils/setters.mjs';
-import { animateVisualElement } from '../interfaces/visual-element.mjs';
-import { invariant } from '../../../../../motion-utils/dist/es/errors.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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,64 +0,0 @@
-import { useState, useLayoutEffect } from 'react';
-import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
-import { createBox } from '../../projection/geometry/models.mjs';
-import { VisualElement } from '../../render/VisualElement.mjs';
-import { useConstant } from '../../utils/use-constant.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

@@ -1,41 +0,0 @@
-import { useConstant } from '../../utils/use-constant.mjs';
-import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
-import { animationControls } from './animation-controls.mjs';
-
-/**
- * Creates `LegacyAnimationControls`, which can be used to manually start, stop
- * and sequence animations on one or more components.
- *
- * The returned `LegacyAnimationControls` 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,102 +0,0 @@
-import { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe.mjs';
-import { getDefaultTransition } from '../utils/default-transitions.mjs';
-import { isTransitionDefined } from '../utils/is-transition-defined.mjs';
-import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
-import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
-import { MotionGlobalConfig } from '../../../../../motion-utils/dist/es/global-config.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
-import { JSAnimation } from '../../../../../motion-dom/dist/es/animation/JSAnimation.mjs';
-import { AsyncMotionValueAnimation } from '../../../../../motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs';
-
-const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
-    const valueTransition = getValueTransition(transition, name) || {};
-    /**
-     * Most transition values are currently completely overwritten by value-specific
-     * transitions. In the future it'd be nicer to blend these transitions. But for now
-     * delay actually does inherit from the root transition if not value-specific.
-     */
-    const delay = valueTransition.delay || transition.delay || 0;
-    /**
-     * Elapsed isn't a public transition option but can be passed through from
-     * optimized appear effects in milliseconds.
-     */
-    let { elapsed = 0 } = transition;
-    elapsed = elapsed - secondsToMilliseconds(delay);
-    const options = {
-        keyframes: Array.isArray(target) ? target : [null, target],
-        ease: "easeOut",
-        velocity: value.getVelocity(),
-        ...valueTransition,
-        delay: -elapsed,
-        onUpdate: (v) => {
-            value.set(v);
-            valueTransition.onUpdate && valueTransition.onUpdate(v);
-        },
-        onComplete: () => {
-            onComplete();
-            valueTransition.onComplete && valueTransition.onComplete();
-        },
-        name,
-        motionValue: value,
-        element: isHandoff ? undefined : element,
-    };
-    /**
-     * If there's no transition defined for this value, we can generate
-     * unique transition settings for this value.
-     */
-    if (!isTransitionDefined(valueTransition)) {
-        Object.assign(options, getDefaultTransition(name, options));
-    }
-    /**
-     * Both WAAPI and our internal animation functions use durations
-     * as defined by milliseconds, while our external API defines them
-     * as seconds.
-     */
-    options.duration && (options.duration = secondsToMilliseconds(options.duration));
-    options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
-    /**
-     * Support deprecated way to set initial value. Prefer keyframe syntax.
-     */
-    if (options.from !== undefined) {
-        options.keyframes[0] = options.from;
-    }
-    let shouldSkip = false;
-    if (options.type === false ||
-        (options.duration === 0 && !options.repeatDelay)) {
-        options.duration = 0;
-        if (options.delay === 0) {
-            shouldSkip = true;
-        }
-    }
-    if (MotionGlobalConfig.instantAnimations ||
-        MotionGlobalConfig.skipAnimations) {
-        shouldSkip = true;
-        options.duration = 0;
-        options.delay = 0;
-    }
-    /**
-     * If the transition type or easing has been explicitly set by the user
-     * then we don't want to allow flattening the animation.
-     */
-    options.allowFlatten = !valueTransition.type && !valueTransition.ease;
-    /**
-     * 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
-     * this early check prevents the need to create an animation at all.
-     */
-    if (shouldSkip && !isHandoff && value.get() !== undefined) {
-        const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
-        if (finalKeyframe !== undefined) {
-            frame.update(() => {
-                options.onUpdate(finalKeyframe);
-                options.onComplete();
-            });
-            return;
-        }
-    }
-    return valueTransition.isSync
-        ? new JSAnimation(options)
-        : new AsyncMotionValueAnimation(options);
-};
-
-export { animateMotionValue };