framer-motion 11.3.16 → 11.3.18-alpha.0

package/dist/cjs/dom-entry.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.3.16";
+        this.version = "11.3.18-alpha.0";
         /**
          * 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
@@ -3237,6 +3237,8 @@ class AcceleratedAnimation extends BaseAnimation {
         this.isStopped = true;
         if (this.state === "idle")
             return;
+        this.resolveFinishedPromise();
+        this.updateFinishedPromise();
         const { resolved } = this;
         if (!resolved)
             return;
@@ -3752,7 +3754,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.16", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.16 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.18-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.18-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -4468,6 +4468,8 @@ class AcceleratedAnimation extends BaseAnimation {
         this.isStopped = true;
         if (this.state === "idle")
             return;
+        this.resolveFinishedPromise();
+        this.updateFinishedPromise();
         const { resolved } = this;
         if (!resolved)
             return;
@@ -4813,7 +4815,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.3.16";
+        this.version = "11.3.18-alpha.0";
         /**
          * 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
@@ -7277,7 +7279,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.3.16", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.16 may not work as expected.`);
+                warnOnce(nextValue.version === "11.3.18-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.18-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -10818,31 +10820,6 @@ function createDomMotionComponent(key) {
  */
 const m = createMotionProxy(createDomMotionConfig);
 
-function useIsMounted() {
-    const isMounted = React.useRef(false);
-    useIsomorphicLayoutEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    return isMounted;
-}
-
-function useForceUpdate() {
-    const isMounted = useIsMounted();
-    const [forcedRenderCount, setForcedRenderCount] = React.useState(0);
-    const forceRender = React.useCallback(() => {
-        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
-    }, [forcedRenderCount]);
-    /**
-     * Defer this to the end of the next animation frame in case there are multiple
-     * synchronous calls.
-     */
-    const deferredForceRender = React.useCallback(() => frame.postRender(forceRender), [forceRender]);
-    return [deferredForceRender, forcedRenderCount];
-}
-
 /**
  * Measurement functionality has to be within a separate component
  * to leverage snapshot lifecycle.
@@ -10966,13 +10943,32 @@ function useUnmountEffect(callback) {
     return React.useEffect(() => () => callback(), []);
 }
 
-const getChildKey = (child) => child.key || "";
-function updateChildLookup(children, allChildren) {
-    children.forEach((child) => {
-        const key = getChildKey(child);
-        allChildren.set(key, child);
-    });
+function useIsMounted() {
+    const isMounted = React.useRef(false);
+    useIsomorphicLayoutEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+
+function useForceUpdate() {
+    const isMounted = useIsMounted();
+    const [forcedRenderCount, setForcedRenderCount] = React.useState(0);
+    const forceRender = React.useCallback(() => {
+        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount]);
+    /**
+     * Defer this to the end of the next animation frame in case there are multiple
+     * synchronous calls.
+     */
+    const deferredForceRender = React.useCallback(() => frame.postRender(forceRender), [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
 }
+
+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 `.$`
@@ -10982,6 +10978,16 @@ function onlyElements(children) {
     });
     return filtered;
 }
+function arrayEquals(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
+
 /**
  * `AnimatePresence` enables the animation of components that have been removed from the tree.
  *
@@ -11015,113 +11021,127 @@ function onlyElements(children) {
  *
  * @public
  */
-const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
+const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", }) => {
     exports.invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
-    // We want to force a re-render once all exiting animations have finished. We
-    // either use a local forceRender function, or one from a parent context if it exists.
-    const forceRender = React.useContext(LayoutGroupContext).forceRender || useForceUpdate()[0];
-    const isMounted = useIsMounted();
-    // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
-    const filteredChildren = onlyElements(children);
-    let childrenToRender = filteredChildren;
-    const exitingChildren = React.useRef(new Map()).current;
-    // Keep a living record of the children we're actually rendering so we
-    // can diff to figure out which are entering and exiting
-    const presentChildren = React.useRef(childrenToRender);
-    // A lookup table to quickly reference components by key
-    const allChildren = React.useRef(new Map()).current;
-    // If this is the initial component render, just deal with logic surrounding whether
-    // we play onMount animations or not.
+    /**
+     * Filter any children that aren't ReactElements. We can only track components
+     * between renders with a props.key.
+     */
+    const presentChildren = React.useMemo(() => onlyElements(children), [children]);
+    /**
+     * Track the keys of the currently rendered children. This is used to
+     * determine which children are exiting.
+     */
+    const presentKeys = presentChildren.map(getChildKey);
+    /**
+     * If `initial={false}` we only want to pass this to components in the first render.
+     */
     const isInitialRender = React.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 = React.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] = React.useState(presentChildren);
+    const [renderedChildren, setRenderedChildren] = React.useState(presentChildren);
     useIsomorphicLayoutEffect(() => {
         isInitialRender.current = false;
-        updateChildLookup(filteredChildren, allChildren);
-        presentChildren.current = childrenToRender;
-    });
-    useUnmountEffect(() => {
-        isInitialRender.current = true;
-        allChildren.clear();
-        exitingChildren.clear();
-    });
-    if (isInitialRender.current) {
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: childrenToRender.map((child) => (jsxRuntime.jsx(PresenceChild, { isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child)))) }));
-    }
-    // If this is a subsequent render, deal with entering and exiting children
-    childrenToRender = [...childrenToRender];
-    // Diff the keys of the currently-present and target children to update our
-    // exiting list.
-    const presentKeys = presentChildren.current.map(getChildKey);
-    const targetKeys = filteredChildren.map(getChildKey);
-    // Diff the present children with our target children and mark those that are exiting
-    const numPresent = presentKeys.length;
-    for (let i = 0; i < numPresent; i++) {
-        const key = presentKeys[i];
-        if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
-            exitingChildren.set(key, undefined);
-        }
-    }
-    // If we currently have exiting children, and we're deferring rendering incoming children
-    // until after all current children have exiting, empty the childrenToRender array
-    if (mode === "wait" && exitingChildren.size) {
-        childrenToRender = [];
-    }
-    // Loop through all currently exiting components and clone them to overwrite `animate`
-    // with any `exit` prop they might have defined.
-    exitingChildren.forEach((component, key) => {
-        // If this component is actually entering again, early return
-        if (targetKeys.indexOf(key) !== -1)
-            return;
-        const child = allChildren.get(key);
-        if (!child)
-            return;
-        const insertionIndex = presentKeys.indexOf(key);
-        let exitingComponent = component;
-        if (!exitingComponent) {
-            const onExit = () => {
-                // clean up the exiting children map
-                exitingChildren.delete(key);
-                // compute the keys of children that were rendered once but are no longer present
-                // this could happen in case of too many fast consequent renderings
-                // @link https://github.com/framer/motion/issues/2023
-                const leftOverKeys = Array.from(allChildren.keys()).filter((childKey) => !targetKeys.includes(childKey));
-                // clean up the all children map
-                leftOverKeys.forEach((leftOverKey) => allChildren.delete(leftOverKey));
-                // make sure to render only the children that are actually visible
-                presentChildren.current = filteredChildren.filter((presentChild) => {
-                    const presentChildKey = getChildKey(presentChild);
-                    return (
-                    // filter out the node exiting
-                    presentChildKey === key ||
-                        // filter out the leftover children
-                        leftOverKeys.includes(presentChildKey));
-                });
-                // Defer re-rendering until all exiting children have indeed left
-                if (!exitingChildren.size) {
-                    if (isMounted.current === false)
-                        return;
-                    forceRender();
-                    onExitComplete && onExitComplete();
+        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);
                 }
-            };
-            exitingComponent = (jsxRuntime.jsx(PresenceChild, { isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child)));
-            exitingChildren.set(key, exitingComponent);
+            }
+            else {
+                exitComplete.delete(key);
+            }
         }
-        childrenToRender.splice(insertionIndex, 0, exitingComponent);
-    });
-    // Add `MotionContext` even to children that don't need it to ensure we're rendering
-    // the same tree between renders
-    childrenToRender = childrenToRender.map((child) => {
-        const key = child.key;
-        return exitingChildren.has(key) ? (child) : (jsxRuntime.jsx(PresenceChild, { isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child)));
-    });
+    }, [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;
+        }
+        nextChildren = onlyElements(nextChildren);
+        const childrenHaveChanged = !arrayEquals(nextChildren.map(getChildKey), renderedChildren.map(getChildKey));
+        if (childrenHaveChanged) {
+            setRenderedChildren(nextChildren);
+        }
+        setDiffedChildren(presentChildren);
+        /**
+         * Early return to ensure once we've set state with the latest diffed
+         * children, we can immediately re-render.
+         */
+        return;
+    }
     if (process.env.NODE_ENV !== "production" &&
         mode === "wait" &&
-        childrenToRender.length > 1) {
+        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.`);
     }
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: exitingChildren.size
-            ? childrenToRender
-            : childrenToRender.map((child) => React.cloneElement(child)) }));
+    /**
+     * 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 } = React.useContext(LayoutGroupContext);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedChildren.map((child) => {
+            const key = getChildKey(child);
+            const isPresent = 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 === null || forceRender === void 0 ? void 0 : forceRender();
+                    setRenderedChildren(pendingPresentChildren.current);
+                    onExitComplete && onExitComplete();
+                }
+            };
+            return (jsxRuntime.jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
+                    ? undefined
+                    : false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));
+        }) }));
 };
 
 /**
@@ -11445,6 +11465,14 @@ const Reorder = {
     Item,
 };
 
+/**
+ * @public
+ */
+const domMin = {
+    renderer: createDomVisualElement,
+    ...animations,
+};
+
 /**
  * @public
  */
@@ -12442,6 +12470,7 @@ exports.distance = distance;
 exports.distance2D = distance2D;
 exports.domAnimation = domAnimation;
 exports.domMax = domMax;
+exports.domMin = domMin;
 exports.easeIn = easeIn;
 exports.easeInOut = easeInOut;
 exports.easeOut = easeOut;