motion 12.18.0 → 12.18.2

package/dist/es/framer-motion/dist/es/animation/sequence/utils/sort.mjs

@@ -1,14 +0,0 @@
-function compareByTime(a, b) {
-    if (a.at === b.at) {
-        if (a.value === null)
-            return 1;
-        if (b.value === null)
-            return -1;
-        return 0;
-    }
-    else {
-        return a.at - b.at;
-    }
-}
-
-export { compareByTime };

package/dist/es/framer-motion/dist/es/animation/utils/create-visual-element.mjs

@@ -1,45 +0,0 @@
-import { HTMLVisualElement } from '../../render/html/HTMLVisualElement.mjs';
-import { ObjectVisualElement } from '../../render/object/ObjectVisualElement.mjs';
-import { visualElementStore } from '../../render/store.mjs';
-import { SVGVisualElement } from '../../render/svg/SVGVisualElement.mjs';
-import { isSVGElement } from '../../../../../motion-dom/dist/es/utils/is-svg-element.mjs';
-import { isSVGSVGElement } from '../../../../../motion-dom/dist/es/utils/is-svg-svg-element.mjs';
-
-function createDOMVisualElement(element) {
-    const options = {
-        presenceContext: null,
-        props: {},
-        visualState: {
-            renderState: {
-                transform: {},
-                transformOrigin: {},
-                style: {},
-                vars: {},
-                attrs: {},
-            },
-            latestValues: {},
-        },
-    };
-    const node = isSVGElement(element) && !isSVGSVGElement(element)
-        ? new SVGVisualElement(options)
-        : new HTMLVisualElement(options);
-    node.mount(element);
-    visualElementStore.set(element, node);
-}
-function createObjectVisualElement(subject) {
-    const options = {
-        presenceContext: null,
-        props: {},
-        visualState: {
-            renderState: {
-                output: {},
-            },
-            latestValues: {},
-        },
-    };
-    const node = new ObjectVisualElement(options);
-    node.mount(subject);
-    visualElementStore.set(subject, node);
-}
-
-export { createDOMVisualElement, createObjectVisualElement };

package/dist/es/framer-motion/dist/es/animation/utils/default-transitions.mjs

@@ -1,40 +0,0 @@
-import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
-
-const underDampedSpring = {
-    type: "spring",
-    stiffness: 500,
-    damping: 25,
-    restSpeed: 10,
-};
-const criticallyDampedSpring = (target) => ({
-    type: "spring",
-    stiffness: 550,
-    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
-    restSpeed: 10,
-});
-const keyframesTransition = {
-    type: "keyframes",
-    duration: 0.8,
-};
-/**
- * Default easing curve is a slightly shallower version of
- * the default browser easing curve.
- */
-const ease = {
-    type: "keyframes",
-    ease: [0.25, 0.1, 0.35, 1],
-    duration: 0.3,
-};
-const getDefaultTransition = (valueKey, { keyframes }) => {
-    if (keyframes.length > 2) {
-        return keyframesTransition;
-    }
-    else if (transformProps.has(valueKey)) {
-        return valueKey.startsWith("scale")
-            ? criticallyDampedSpring(keyframes[1])
-            : underDampedSpring;
-    }
-    return ease;
-};
-
-export { getDefaultTransition };

package/dist/es/framer-motion/dist/es/animation/utils/is-animation-controls.mjs

@@ -1,7 +0,0 @@
-function isAnimationControls(v) {
-    return (v !== null &&
-        typeof v === "object" &&
-        typeof v.start === "function");
-}
-
-export { isAnimationControls };

package/dist/es/framer-motion/dist/es/animation/utils/is-dom-keyframes.mjs

@@ -1,5 +0,0 @@
-function isDOMKeyframes(keyframes) {
-    return typeof keyframes === "object" && !Array.isArray(keyframes);
-}
-
-export { isDOMKeyframes };

package/dist/es/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs

@@ -1,5 +0,0 @@
-const isKeyframesTarget = (v) => {
-    return Array.isArray(v);
-};
-
-export { isKeyframesTarget };

package/dist/es/framer-motion/dist/es/animation/utils/is-transition-defined.mjs

@@ -1,10 +0,0 @@
-/**
- * Decide whether a transition is defined on a given Transition.
- * This filters out orchestration options and returns true
- * if any options are left.
- */
-function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
-    return !!Object.keys(transition).length;
-}
-
-export { isTransitionDefined };

package/dist/es/framer-motion/dist/es/animation/utils/stagger.mjs

@@ -1,26 +0,0 @@
-import { easingDefinitionToFunction } from '../../../../../motion-utils/dist/es/easing/utils/map.mjs';
-
-function getOriginIndex(from, total) {
-    if (from === "first") {
-        return 0;
-    }
-    else {
-        const lastIndex = total - 1;
-        return from === "last" ? lastIndex : lastIndex / 2;
-    }
-}
-function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
-    return (i, total) => {
-        const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
-        const distance = Math.abs(fromIndex - i);
-        let delay = duration * distance;
-        if (ease) {
-            const maxDelay = total * duration;
-            const easingFunction = easingDefinitionToFunction(ease);
-            delay = easingFunction(delay / maxDelay) * maxDelay;
-        }
-        return startDelay + delay;
-    };
-}
-
-export { getOriginIndex, stagger };

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

@@ -1,87 +0,0 @@
-"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';
-import { isHTMLElement } from '../../../../../motion-dom/dist/es/utils/is-html-element.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 parent = element.offsetParent;
-            const parentWidth = isHTMLElement(parent)
-                ? parent.offsetWidth || 0
-                : 0;
-            const size = this.props.sizeRef.current;
-            size.height = element.offsetHeight || 0;
-            size.width = element.offsetWidth || 0;
-            size.top = element.offsetTop;
-            size.left = element.offsetLeft;
-            size.right = parentWidth - size.width - size.left;
-        }
-        return null;
-    }
-    /**
-     * Required with getSnapshotBeforeUpdate to stop React complaining.
-     */
-    componentDidUpdate() { }
-    render() {
-        return this.props.children;
-    }
-}
-function PopChild({ children, isPresent, anchorX }) {
-    const id = useId();
-    const ref = useRef(null);
-    const size = useRef({
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        right: 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, right } = size.current;
-        if (isPresent || !ref.current || !width || !height)
-            return;
-        const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
-        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;
-            ${x}px !important;
-            top: ${top}px !important;
-          }
-        `);
-        }
-        return () => {
-            if (document.head.contains(style)) {
-                document.head.removeChild(style);
-            }
-        };
-    }, [isPresent]);
-    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));
-}
-
-export { PopChild };

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

@@ -1,64 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useId, useMemo } from 'react';
-import { PresenceContext } from '../../context/PresenceContext.mjs';
-import { useConstant } from '../../utils/use-constant.mjs';
-import { PopChild } from './PopChild.mjs';
-
-const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
-    const presenceChildren = useConstant(newChildrenMap);
-    const id = useId();
-    let isReusedContext = true;
-    let context = useMemo(() => {
-        isReusedContext = false;
-        return {
-            id,
-            initial,
-            isPresent,
-            custom,
-            onExitComplete: (childId) => {
-                presenceChildren.set(childId, true);
-                for (const isComplete of presenceChildren.values()) {
-                    if (!isComplete)
-                        return; // can stop searching when any is incomplete
-                }
-                onExitComplete && onExitComplete();
-            },
-            register: (childId) => {
-                presenceChildren.set(childId, false);
-                return () => presenceChildren.delete(childId);
-            },
-        };
-    }, [isPresent, presenceChildren, onExitComplete]);
-    /**
-     * If the presence of a child affects the layout of the components around it,
-     * we want to make a new context value to ensure they get re-rendered
-     * so they can detect that layout change.
-     */
-    if (presenceAffectsLayout && isReusedContext) {
-        context = { ...context };
-    }
-    useMemo(() => {
-        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
-    }, [isPresent]);
-    /**
-     * If there's no `motion` components to fire exit animations, we want to remove this
-     * component immediately.
-     */
-    React.useEffect(() => {
-        !isPresent &&
-            !presenceChildren.size &&
-            onExitComplete &&
-            onExitComplete();
-    }, [isPresent]);
-    if (mode === "popLayout") {
-        children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, children: children }));
-    }
-    return (jsx(PresenceContext.Provider, { value: context, children: children }));
-};
-function newChildrenMap() {
-    return new Map();
-}
-
-export { PresenceChild };

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

@@ -1,166 +0,0 @@
-"use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo, useRef, useState, useContext } from 'react';
-import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
-import { useConstant } from '../../utils/use-constant.mjs';
-import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
-import { PresenceChild } from './PresenceChild.mjs';
-import { usePresence } from './use-presence.mjs';
-import { onlyElements, getChildKey } from './utils.mjs';
-
-/**
- * `AnimatePresence` enables the animation of components that have been removed from the tree.
- *
- * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
- *
- * Any `motion` components that have an `exit` property defined will animate out when removed from
- * the tree.
- *
- * ```jsx
- * import { motion, AnimatePresence } from 'framer-motion'
- *
- * export const Items = ({ items }) => (
- *   <AnimatePresence>
- *     {items.map(item => (
- *       <motion.div
- *         key={item.id}
- *         initial={{ opacity: 0 }}
- *         animate={{ opacity: 1 }}
- *         exit={{ opacity: 0 }}
- *       />
- *     ))}
- *   </AnimatePresence>
- * )
- * ```
- *
- * You can sequence exit animations throughout a tree using variants.
- *
- * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
- * once all `motion` components have finished animating out. Likewise, any components using
- * `usePresence` all need to call `safeToRemove`.
- *
- * @public
- */
-const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", }) => {
-    const [isParentPresent, safeToRemove] = usePresence(propagate);
-    /**
-     * Filter any children that aren't ReactElements. We can only track components
-     * between renders with a props.key.
-     */
-    const presentChildren = useMemo(() => onlyElements(children), [children]);
-    /**
-     * Track the keys of the currently rendered children. This is used to
-     * determine which children are exiting.
-     */
-    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
-    /**
-     * If `initial={false}` we only want to pass this to components in the first render.
-     */
-    const isInitialRender = useRef(true);
-    /**
-     * A ref containing the currently present children. When all exit animations
-     * are complete, we use this to re-render the component with the latest children
-     * *committed* rather than the latest children *rendered*.
-     */
-    const pendingPresentChildren = useRef(presentChildren);
-    /**
-     * Track which exiting children have finished animating out.
-     */
-    const exitComplete = useConstant(() => new Map());
-    /**
-     * Save children to render as React state. To ensure this component is concurrent-safe,
-     * we check for exiting children via an effect.
-     */
-    const [diffedChildren, setDiffedChildren] = useState(presentChildren);
-    const [renderedChildren, setRenderedChildren] = useState(presentChildren);
-    useIsomorphicLayoutEffect(() => {
-        isInitialRender.current = false;
-        pendingPresentChildren.current = presentChildren;
-        /**
-         * Update complete status of exiting children.
-         */
-        for (let i = 0; i < renderedChildren.length; i++) {
-            const key = getChildKey(renderedChildren[i]);
-            if (!presentKeys.includes(key)) {
-                if (exitComplete.get(key) !== true) {
-                    exitComplete.set(key, false);
-                }
-            }
-            else {
-                exitComplete.delete(key);
-            }
-        }
-    }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
-    const exitingChildren = [];
-    if (presentChildren !== diffedChildren) {
-        let nextChildren = [...presentChildren];
-        /**
-         * Loop through all the currently rendered components and decide which
-         * are exiting.
-         */
-        for (let i = 0; i < renderedChildren.length; i++) {
-            const child = renderedChildren[i];
-            const key = getChildKey(child);
-            if (!presentKeys.includes(key)) {
-                nextChildren.splice(i, 0, child);
-                exitingChildren.push(child);
-            }
-        }
-        /**
-         * If we're in "wait" mode, and we have exiting children, we want to
-         * only render these until they've all exited.
-         */
-        if (mode === "wait" && exitingChildren.length) {
-            nextChildren = exitingChildren;
-        }
-        setRenderedChildren(onlyElements(nextChildren));
-        setDiffedChildren(presentChildren);
-        /**
-         * Early return to ensure once we've set state with the latest diffed
-         * children, we can immediately re-render.
-         */
-        return null;
-    }
-    if (process.env.NODE_ENV !== "production" &&
-        mode === "wait" &&
-        renderedChildren.length > 1) {
-        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
-    }
-    /**
-     * If we've been provided a forceRender function by the LayoutGroupContext,
-     * we can use it to force a re-render amongst all surrounding components once
-     * all components have finished animating out.
-     */
-    const { forceRender } = useContext(LayoutGroupContext);
-    return (jsx(Fragment, { children: renderedChildren.map((child) => {
-            const key = getChildKey(child);
-            const isPresent = propagate && !isParentPresent
-                ? false
-                : presentChildren === renderedChildren ||
-                    presentKeys.includes(key);
-            const onExit = () => {
-                if (exitComplete.has(key)) {
-                    exitComplete.set(key, true);
-                }
-                else {
-                    return;
-                }
-                let isEveryExitComplete = true;
-                exitComplete.forEach((isExitComplete) => {
-                    if (!isExitComplete)
-                        isEveryExitComplete = false;
-                });
-                if (isEveryExitComplete) {
-                    forceRender?.();
-                    setRenderedChildren(pendingPresentChildren.current);
-                    propagate && safeToRemove?.();
-                    onExitComplete && onExitComplete();
-                }
-            };
-            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
-                    ? undefined
-                    : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
-        }) }));
-};
-
-export { AnimatePresence };

package/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence-data.mjs

@@ -1,9 +0,0 @@
-import { useContext } from 'react';
-import { PresenceContext } from '../../context/PresenceContext.mjs';
-
-function usePresenceData() {
-    const context = useContext(PresenceContext);
-    return context ? context.custom : undefined;
-}
-
-export { usePresenceData };

package/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs

@@ -1,70 +0,0 @@
-import { useContext, useId, useEffect, useCallback } from 'react';
-import { PresenceContext } from '../../context/PresenceContext.mjs';
-
-/**
- * When a component is the child of `AnimatePresence`, it can use `usePresence`
- * to access information about whether it's still present in the React tree.
- *
- * ```jsx
- * import { usePresence } from "framer-motion"
- *
- * export const Component = () => {
- *   const [isPresent, safeToRemove] = usePresence()
- *
- *   useEffect(() => {
- *     !isPresent && setTimeout(safeToRemove, 1000)
- *   }, [isPresent])
- *
- *   return <div />
- * }
- * ```
- *
- * If `isPresent` is `false`, it means that a component has been removed the tree, but
- * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
- *
- * @public
- */
-function usePresence(subscribe = true) {
-    const context = useContext(PresenceContext);
-    if (context === null)
-        return [true, null];
-    const { isPresent, onExitComplete, register } = context;
-    // It's safe to call the following hooks conditionally (after an early return) because the context will always
-    // either be null or non-null for the lifespan of the component.
-    const id = useId();
-    useEffect(() => {
-        if (subscribe) {
-            return register(id);
-        }
-    }, [subscribe]);
-    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
-    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
-}
-/**
- * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
- * There is no `safeToRemove` function.
- *
- * ```jsx
- * import { useIsPresent } from "framer-motion"
- *
- * export const Component = () => {
- *   const isPresent = useIsPresent()
- *
- *   useEffect(() => {
- *     !isPresent && console.log("I've been removed!")
- *   }, [isPresent])
- *
- *   return <div />
- * }
- * ```
- *
- * @public
- */
-function useIsPresent() {
-    return isPresent(useContext(PresenceContext));
-}
-function isPresent(context) {
-    return context === null ? true : context.isPresent;
-}
-
-export { isPresent, useIsPresent, usePresence };

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

@@ -1,14 +0,0 @@
-import { Children, isValidElement } from 'react';
-
-const getChildKey = (child) => child.key || "";
-function onlyElements(children) {
-    const filtered = [];
-    // We use forEach here instead of map as map mutates the component key by preprending `.$`
-    Children.forEach(children, (child) => {
-        if (isValidElement(child))
-            filtered.push(child);
-    });
-    return filtered;
-}
-
-export { getChildKey, onlyElements };

package/dist/es/framer-motion/dist/es/components/AnimateSharedLayout.mjs

@@ -1,15 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useConstant } from '../utils/use-constant.mjs';
-import { LayoutGroup } from './LayoutGroup/index.mjs';
-import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
-
-let id = 0;
-const AnimateSharedLayout = ({ children }) => {
-    React.useEffect(() => {
-        invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
-    }, []);
-    return (jsx(LayoutGroup, { id: useConstant(() => `asl-${id++}`), children: children }));
-};
-
-export { AnimateSharedLayout };

package/dist/es/framer-motion/dist/es/components/LayoutGroup/index.mjs

@@ -1,32 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { useContext, useRef, useMemo } from 'react';
-import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
-import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGroupContext.mjs';
-import { useForceUpdate } from '../../utils/use-force-update.mjs';
-import { nodeGroup } from '../../projection/node/group.mjs';
-
-const shouldInheritGroup = (inherit) => inherit === true;
-const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
-const LayoutGroup = ({ children, id, inherit = true }) => {
-    const layoutGroupContext = useContext(LayoutGroupContext);
-    const deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
-    const [forceRender, key] = useForceUpdate();
-    const context = useRef(null);
-    const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
-    if (context.current === null) {
-        if (shouldInheritId(inherit) && upstreamId) {
-            id = id ? upstreamId + "-" + id : upstreamId;
-        }
-        context.current = {
-            id,
-            group: shouldInheritGroup(inherit)
-                ? layoutGroupContext.group || nodeGroup()
-                : nodeGroup(),
-        };
-    }
-    const memoizedContext = useMemo(() => ({ ...context.current, forceRender }), [key]);
-    return (jsx(LayoutGroupContext.Provider, { value: memoizedContext, children: children }));
-};
-
-export { LayoutGroup };