framer-motion 11.16.7 → 11.17.0

package/dist/cjs/client.js

@@ -409,7 +409,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.16.7";
+        this.version = "11.17.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
@@ -5201,7 +5201,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.16.7", `Attempting to mix Motion versions ${nextValue.version} with 11.16.7 may not work as expected.`);
+                warnOnce(nextValue.version === "11.17.0", `Attempting to mix Motion versions ${nextValue.version} with 11.17.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8204,7 +8204,7 @@ const PresenceContext = react.createContext(null);
  *
  * @public
  */
-function usePresence() {
+function usePresence(subscribe = true) {
     const context = react.useContext(PresenceContext);
     if (context === null)
         return [true, null];
@@ -8212,8 +8212,11 @@ function usePresence() {
     // 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 = react.useId();
-    react.useEffect(() => register(id), []);
-    const safeToRemove = react.useCallback(() => onExitComplete && onExitComplete(id), [id, onExitComplete]);
+    react.useEffect(() => {
+        if (subscribe)
+            register(id);
+    }, [subscribe]);
+    const safeToRemove = react.useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
 }
 

package/dist/cjs/dom.js

@@ -994,7 +994,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.16.7";
+        this.version = "11.17.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
@@ -3924,7 +3924,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.16.7", `Attempting to mix Motion versions ${nextValue.version} with 11.16.7 may not work as expected.`);
+                warnOnce(nextValue.version === "11.17.0", `Attempting to mix Motion versions ${nextValue.version} with 11.17.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -26,157 +26,6 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-/**
- * @public
- */
-const PresenceContext = React.createContext(null);
-
-/**
- * Creates a constant value over the lifecycle of a component.
- *
- * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
- * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
- * you can ensure that initialisers don't execute twice or more.
- */
-function useConstant(init) {
-    const ref = React.useRef(null);
-    if (ref.current === null) {
-        ref.current = init();
-    }
-    return ref.current;
-}
-
-/**
- * @public
- */
-const MotionConfigContext = React.createContext({
-    transformPagePoint: (p) => p,
-    isStatic: false,
-    reducedMotion: "never",
-});
-
-/**
- * Measurement functionality has to be within a separate component
- * to leverage snapshot lifecycle.
- */
-class PopChildMeasure extends React__namespace.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 = React.useId();
-    const ref = React.useRef(null);
-    const size = React.useRef({
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-    });
-    const { nonce } = React.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.
-     */
-    React.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 (jsxRuntime.jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
-}
-
-const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
-    const presenceChildren = useConstant(newChildrenMap);
-    const id = React.useId();
-    const memoizedOnExitComplete = React.useCallback((childId) => {
-        presenceChildren.set(childId, true);
-        for (const isComplete of presenceChildren.values()) {
-            if (!isComplete)
-                return; // can stop searching when any is incomplete
-        }
-        onExitComplete && onExitComplete();
-    }, [presenceChildren, onExitComplete]);
-    const context = React.useMemo(() => ({
-        id,
-        initial,
-        isPresent,
-        custom,
-        onExitComplete: memoizedOnExitComplete,
-        register: (childId) => {
-            presenceChildren.set(childId, false);
-            return () => presenceChildren.delete(childId);
-        },
-    }), 
-    /**
-     * 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.
-     */
-    presenceAffectsLayout
-        ? [Math.random(), memoizedOnExitComplete]
-        : [isPresent, memoizedOnExitComplete]);
-    React.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__namespace.useEffect(() => {
-        !isPresent &&
-            !presenceChildren.size &&
-            onExitComplete &&
-            onExitComplete();
-    }, [isPresent]);
-    if (mode === "popLayout") {
-        children = jsxRuntime.jsx(PopChild, { isPresent: isPresent, children: children });
-    }
-    return (jsxRuntime.jsx(PresenceContext.Provider, { value: context, children: children }));
-};
-function newChildrenMap() {
-    return new Map();
-}
-
 const LayoutGroupContext = React.createContext({});
 
 function isAnimationControls(v) {
@@ -596,7 +445,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.16.7";
+        this.version = "11.17.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
@@ -4401,6 +4250,26 @@ function filterProps(props, isDom, forwardMotionProps) {
     return filteredProps;
 }
 
+/**
+ * @public
+ */
+const PresenceContext = React.createContext(null);
+
+/**
+ * Creates a constant value over the lifecycle of a component.
+ *
+ * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
+ * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
+ * you can ensure that initialisers don't execute twice or more.
+ */
+function useConstant(init) {
+    const ref = React.useRef(null);
+    if (ref.current === null) {
+        ref.current = init();
+    }
+    return ref.current;
+}
+
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
@@ -4547,6 +4416,202 @@ function useForceUpdate() {
     return [deferredForceRender, forcedRenderCount];
 }
 
+/**
+ * @public
+ */
+const MotionConfigContext = React.createContext({
+    transformPagePoint: (p) => p,
+    isStatic: false,
+    reducedMotion: "never",
+});
+
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React__namespace.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 = React.useId();
+    const ref = React.useRef(null);
+    const size = React.useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    });
+    const { nonce } = React.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.
+     */
+    React.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 (jsxRuntime.jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
+}
+
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
+    const presenceChildren = useConstant(newChildrenMap);
+    const id = React.useId();
+    const memoizedOnExitComplete = React.useCallback((childId) => {
+        presenceChildren.set(childId, true);
+        for (const isComplete of presenceChildren.values()) {
+            if (!isComplete)
+                return; // can stop searching when any is incomplete
+        }
+        onExitComplete && onExitComplete();
+    }, [presenceChildren, onExitComplete]);
+    const context = React.useMemo(() => ({
+        id,
+        initial,
+        isPresent,
+        custom,
+        onExitComplete: memoizedOnExitComplete,
+        register: (childId) => {
+            presenceChildren.set(childId, false);
+            return () => presenceChildren.delete(childId);
+        },
+    }), 
+    /**
+     * 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.
+     */
+    presenceAffectsLayout
+        ? [Math.random(), memoizedOnExitComplete]
+        : [isPresent, memoizedOnExitComplete]);
+    React.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__namespace.useEffect(() => {
+        !isPresent &&
+            !presenceChildren.size &&
+            onExitComplete &&
+            onExitComplete();
+    }, [isPresent]);
+    if (mode === "popLayout") {
+        children = jsxRuntime.jsx(PopChild, { isPresent: isPresent, children: children });
+    }
+    return (jsxRuntime.jsx(PresenceContext.Provider, { value: context, children: children }));
+};
+function newChildrenMap() {
+    return new Map();
+}
+
+/**
+ * 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 = React.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 = React.useId();
+    React.useEffect(() => {
+        if (subscribe)
+            register(id);
+    }, [subscribe]);
+    const safeToRemove = React.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(React.useContext(PresenceContext));
+}
+function isPresent(context) {
+    return context === null ? true : context.isPresent;
+}
+
 const getChildKey = (child) => child.key || "";
 function onlyElements(children) {
     const filtered = [];
@@ -4591,8 +4656,8 @@ function onlyElements(children) {
  *
  * @public
  */
-const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", }) => {
-    motionUtils.invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, }) => {
+    const [isParentPresent, safeToRemove] = usePresence(propagate);
     /**
      * Filter any children that aren't ReactElements. We can only track components
      * between renders with a props.key.
@@ -4602,7 +4667,7 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
      * Track the keys of the currently rendered children. This is used to
      * determine which children are exiting.
      */
-    const presentKeys = presentChildren.map(getChildKey);
+    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
     /**
      * If `initial={false}` we only want to pass this to components in the first render.
      */
@@ -4684,8 +4749,10 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
     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 isPresent = propagate && !isParentPresent
+                ? false
+                : presentChildren === renderedChildren ||
+                    presentKeys.includes(key);
             const onExit = () => {
                 if (exitComplete.has(key)) {
                     exitComplete.set(key, true);
@@ -4701,6 +4768,7 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
                 if (isEveryExitComplete) {
                     forceRender === null || forceRender === void 0 ? void 0 : forceRender();
                     setRenderedChildren(pendingPresentChildren.current);
+                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());
                     onExitComplete && onExitComplete();
                 }
             };
@@ -5141,7 +5209,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.16.7", `Attempting to mix Motion versions ${nextValue.version} with 11.16.7 may not work as expected.`);
+                warnOnce(nextValue.version === "11.17.0", `Attempting to mix Motion versions ${nextValue.version} with 11.17.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -10274,68 +10342,6 @@ class PanGesture extends Feature {
     }
 }
 
-/**
- * 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() {
-    const context = React.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 = React.useId();
-    React.useEffect(() => register(id), []);
-    const safeToRemove = React.useCallback(() => onExitComplete && onExitComplete(id), [id, onExitComplete]);
-    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(React.useContext(PresenceContext));
-}
-function isPresent(context) {
-    return context === null ? true : context.isPresent;
-}
-
 /**
  * Internal, exported only for usage in Framer
  */