framer-motion 1.9.1 → 1.10.3

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.10.3] 2020-03-23
+
+### Fix
+
+-   Replacing the functionality of `DragControls` `e.preventDefault()` with CSS and HTML attributes. ([@inventingwithmonster](https://github.com/inventingwithmonster) in [#495](https://github.com/framer/motion/pull/495))
+
+## [1.10.2] 2020-03-23
+
+### Fix
+
+-   Fixing `PresenceChild` losing correct count of exiting children if it re-renders. ([@inventingwithmonster](https://github.com/inventingwithmonster) in [#490](https://github.com/framer/motion/pull/490))
+
+## [1.10.1] 2020-03-23
+
+### Fix
+
+-   Fixing `AnimatePresence` children not re-rendering when their exiting siblings have been removed from the tree (which broke siblings `positionTransition` and `layoutTransition`). ([@inventingwithmonster](https://github.com/inventingwithmonster) in [#489](https://github.com/framer/motion/pull/489))
+-   Adding `null` check for `getTranslateFromMatrix` ([@JoyalJoyMadeckal](https://github.com/JoyalJoyMadeckal) in [#482](https://github.com/framer/motion/pull/482))
+
+## [1.10.0] 2020-03-19
+
+### Added
+
+-   `AnimatePresence` now supports multiple `usePresence` children within a given sub-tree.
+
 ## [1.9.1] 2020-03-06
 
 ### Fixed

package/dist/framer-motion.api.json

@@ -15,7 +15,7 @@
       "members": [
         {
           "kind": "Variable",
-          "docComment": "/**\n * The `AnimatePresence` component enables the use of the `exit` prop to animate components when they're removed from the component tree.\n *\n * When adding/removing more than a single child component, every component **must** be given a unique `key` prop.\n *\n * You can propagate exit animations throughout a tree by using variants.\n *\n * @library\n *\n * You can use any component(s) within `AnimatePresence`, but the first `Frame` in each should have an `exit` property defined.\n * ```jsx\n * import { Frame, AnimatePresence } from 'framer'\n *\n * // As items are added and removed from `items`\n * export function Items({ items }) {\n *   return (\n *     <AnimatePresence>\n *       {items.map(item => (\n *         <Frame\n *           key={item.id}\n *           initial={{ opacity: 0 }}\n *           animate={{ opacity: 1 }}\n *           exit={{ opacity: 0 }}\n *         />\n *       ))}\n *     </AnimatePresence>\n *   )\n * }\n * ```\n *\n * @motion\n *\n * You can use any component(s) within `AnimatePresence`, but the first `motion` component in each should have an `exit` property defined.\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * @public\n */\n",
+          "docComment": "/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * @library\n *\n * Any `Frame` components that have an `exit` property defined will animate out when removed from the tree.\n * ```jsx\n * import { Frame, AnimatePresence } from 'framer'\n *\n * // As items are added and removed from `items`\n * export function Items({ items }) {\n *   return (\n *     <AnimatePresence>\n *       {items.map(item => (\n *         <Frame\n *           key={item.id}\n *           initial={{ opacity: 0 }}\n *           animate={{ opacity: 1 }}\n *           exit={{ opacity: 0 }}\n *         />\n *       ))}\n *     </AnimatePresence>\n *   )\n * }\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * @motion\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from the tree.\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * 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`.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Reference",
@@ -13330,7 +13330,7 @@
         },
         {
           "kind": "Function",
-          "docComment": "/**\n * When a component is the child of an `AnimatePresence` component, it has access to information about whether it's still present the React tree. `usePresence` can be used to access that data and perform operations before the component can be considered safe to remove.\n *\n * It returns two values. `isPresent` is a boolean that is `true` when the component is present within the React tree. It is `false` when it's been removed, but still visible.\n *\n * When `isPresent` is `false`, the `safeToRemove` callback can be used to tell `AnimatePresence` that it's safe to remove the component from the DOM, for instance after a animation has completed.\n * ```jsx\n * const [isPresent, safeToRemove] = usePresence()\n *\n * useEffect(() => {\n *   !isPresent setTimeout(safeToRemove, 1000)\n * }, [isPresent])\n * ```\n *\n * @public\n */\n",
+          "docComment": "/**\n * 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.\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const [isPresent, safeToRemove] = usePresence()\n *\n *   useEffect(() => {\n *     !isPresent setTimeout(safeToRemove, 1000)\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * 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.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",

package/dist/framer-motion.cjs.js

@@ -1605,6 +1605,8 @@ var AnimationControls = /** @class */ (function () {
  */
 var animationControls = function () { return new AnimationControls(); };
 
+var PresenceContext = React.createContext(null);
+
 /**
  * @internal
  */
@@ -1625,10 +1627,11 @@ var isAnimationControls = function (v) {
 var useMotionContext = function (parentContext, controls, values, isStatic, _a) {
     if (isStatic === void 0) { isStatic = false; }
     var initial = _a.initial, animate = _a.animate, variants = _a.variants, whileTap = _a.whileTap, whileHover = _a.whileHover;
+    var _b;
+    var presenceContext = React.useContext(PresenceContext);
     // Override initial with that from a parent context, if defined
-    if (parentContext.exitProps &&
-        parentContext.exitProps.initial !== undefined) {
-        initial = parentContext.exitProps.initial;
+    if (((_b = presenceContext) === null || _b === void 0 ? void 0 : _b.initial) !== undefined) {
+        initial = presenceContext.initial;
     }
     var initialState;
     if (initial === false && !isAnimationControls(animate)) {
@@ -1708,14 +1711,13 @@ var useMotionContext = function (parentContext, controls, values, isStatic, _a)
  *
  * @internal
  */
-function useValueAnimationControls(config, props, subscribeToParentControls, parentContext) {
+function useValueAnimationControls(config, props, subscribeToParentControls) {
     var variants = props.variants, transition = props.transition;
     var parentControls = React.useContext(MotionContext).controls;
+    var presenceContext = React.useContext(PresenceContext);
     var controls = useConstant(function () { return new ValueAnimationControls(config); });
     // Reset and resubscribe children every render to ensure stagger order is correct
-    if (!parentContext ||
-        !parentContext.exitProps ||
-        !parentContext.exitProps.isExiting) {
+    if (!presenceContext || presenceContext.isPresent) {
         controls.resetChildren();
         controls.setProps(props);
         controls.setVariants(variants);
@@ -1790,7 +1792,7 @@ var createMotionComponent = function (_a) {
         var controlsConfig = useConstant(function () {
             return getValueControlsConfig(ref, values);
         });
-        var controls = useValueAnimationControls(controlsConfig, props, shouldInheritVariant, parentContext);
+        var controls = useValueAnimationControls(controlsConfig, props, shouldInheritVariant);
         var context = useMotionContext(parentContext, controls, values, isStatic, props);
         var functionality = isStatic
             ? null
@@ -2587,10 +2589,6 @@ var isRefObject = function (ref) {
 };
 
 var noop = function (v) { return v; };
-/**
- * Don't block the default pointerdown behaviour of these elements.
- */
-var allowDefaultPointerDown = new Set(["INPUT", "TEXTAREA", "SELECT"]);
 var ComponentDragControls = /** @class */ (function () {
     function ComponentDragControls(_a) {
         var ref = _a.ref, values = _a.values, controls = _a.controls;
@@ -2670,20 +2668,7 @@ var ComponentDragControls = /** @class */ (function () {
         var _this = this;
         var _b = (_a === void 0 ? {} : _a).snapToCursor, snapToCursor = _b === void 0 ? false : _b;
         snapToCursor && this.snapToCursor(originEvent);
-        var onSessionStart = function (event) {
-            // Prevent browser-specific behaviours like text selection or Chrome's image dragging.
-            if (event.target &&
-                !allowDefaultPointerDown.has(event.target.tagName)) {
-                // On iOS it's important to not `preventDefault` the `touchstart`
-                // event, as otherwise clicks won't fire inside the draggable element.
-                if (!supportsTouchEvents()) {
-                    event.preventDefault();
-                    // Make sure input elements loose focus when we prevent the default.
-                    if (document.activeElement instanceof HTMLElement) {
-                        document.activeElement.blur();
-                    }
-                }
-            }
+        var onSessionStart = function () {
             // Initiate viewport scroll blocking on touch start. This is a very aggressive approach
             // which has come out of the difficulty in us being able to do this once a scroll gesture
             // has initiated in mobile browsers. This means if there's a horizontally-scrolling carousel
@@ -3228,7 +3213,12 @@ var getTranslateFromMatrix = function (pos2, pos3) { return function (_bbox, _a)
     }
     else {
         var matrix = transform.match(/^matrix\((.+)\)$/);
-        return getPosFromMatrix(matrix[1], pos2);
+        if (matrix) {
+            return getPosFromMatrix(matrix[1], pos2);
+        }
+        else {
+            return 0;
+        }
     }
 }; };
 var transformKeys = new Set(["x", "y", "z"]);
@@ -4007,28 +3997,54 @@ var getAnimationComponent = function (props) {
     return animatePropType ? AnimatePropComponents[animatePropType] : undefined;
 };
 
+/**
+ * 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() {
+    var context = React.useContext(PresenceContext);
+    if (context === null)
+        return [true];
+    var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
+    React.useEffect(register, []);
+    return !isPresent && onExitComplete ? [false, onExitComplete] : [true];
+}
+
 var Exit = {
     key: "exit",
-    shouldRender: function (_a, _b) {
-        var exit = _a.exit;
-        var exitProps = _b.exitProps;
-        var hasExitProps = !!exitProps;
-        var hasExitAnimation = !!exit;
-        heyListen.invariant(!hasExitProps || (hasExitProps && hasExitAnimation), "No exit prop defined on a child of AnimatePresence.");
-        return hasExitProps && hasExitAnimation;
-    },
+    shouldRender: function (props) { return !!props.exit && !checkShouldInheritVariant(props); },
     Component: makeRenderlessComponent(function (props) {
-        var animate = props.animate, controls = props.controls, parentContext = props.parentContext, exit = props.exit;
-        var exitProps = parentContext.exitProps;
+        var _a;
+        var animate = props.animate, controls = props.controls, exit = props.exit;
+        var _b = usePresence(), isPresent = _b[0], onExitComplete = _b[1];
+        var presenceContext = React.useContext(PresenceContext);
         var isPlayingExitAnimation = React.useRef(false);
-        // This early return is more for types - it won't actually run because of the `shouldRender` above.
-        if (!exitProps || !exit)
-            return;
-        var isExiting = exitProps.isExiting, custom = exitProps.custom, onExitComplete = exitProps.onExitComplete;
+        var custom = ((_a = presenceContext) === null || _a === void 0 ? void 0 : _a.custom) !== undefined
+            ? presenceContext.custom
+            : props.custom;
         React.useEffect(function () {
-            if (isExiting) {
+            if (!isPresent) {
                 if (!isPlayingExitAnimation.current && exit) {
-                    controls.setProps(tslib.__assign(tslib.__assign({}, props), { custom: custom !== undefined ? custom : props.custom }));
+                    controls.setProps(tslib.__assign(tslib.__assign({}, props), { custom: custom }));
                     controls.start(exit).then(onExitComplete);
                 }
                 isPlayingExitAnimation.current = true;
@@ -4038,10 +4054,10 @@ var Exit = {
                 !(animate instanceof AnimationControls)) {
                 controls.start(animate);
             }
-            if (!isExiting) {
+            if (isPresent) {
                 isPlayingExitAnimation.current = false;
             }
-        }, [isExiting]);
+        }, [isPresent]);
     }),
 };
 
@@ -4083,6 +4099,19 @@ function filterValidProps(props) {
     }
     return domProps;
 }
+var buildHTMLProps = function (values, style, isStatic, isDrag) {
+    // The `any` isn't ideal but it is the type of createElement props argument
+    var props = {
+        style: buildStyleAttr(values, style, isStatic),
+    };
+    if (isDrag) {
+        // Disable text selection
+        props.style.userSelect = "none";
+        // Disable the ghost element when a user drags
+        props.draggable = false;
+    }
+    return props;
+};
 var buildSVGProps = function (values, style) {
     var motionValueStyles = resolveCurrent(values);
     var props = styler.buildSVGAttrs(motionValueStyles, undefined, undefined, undefined, undefined, false);
@@ -4104,7 +4133,7 @@ function createDomMotionConfig(Component) {
             var forwardedProps = isDOM ? filterValidProps(props) : props;
             var staticVisualStyles = isSVG
                 ? buildSVGProps(values, style)
-                : { style: buildStyleAttr(values, style, isStatic) };
+                : buildHTMLProps(values, style, isStatic, !!props.drag);
             return React.createElement(Component, tslib.__assign(tslib.__assign(tslib.__assign({}, forwardedProps), { ref: ref }), staticVisualStyles));
         },
         /**
@@ -4778,13 +4807,29 @@ function useDragControls() {
 }
 
 var PresenceChild = function (_a) {
-    var children = _a.children, exitProps = _a.exitProps;
-    var context = React.useContext(MotionContext);
-    // Create a new `value` in all instances to ensure `motion` children re-render
-    // and detect any layout changes that might have occurred.
-    context = tslib.__assign(tslib.__assign({}, context), { exitProps: exitProps || {} });
-    return (React.createElement(MotionContext.Provider, { value: context }, children));
-};
+    var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom;
+    var numPresenceChildren = React.useRef(0);
+    var numExitComplete = React.useRef(0);
+    var context = {
+        initial: initial,
+        isPresent: isPresent,
+        custom: custom,
+        onExitComplete: function () {
+            numExitComplete.current++;
+            var allComplete = numExitComplete.current >= numPresenceChildren.current;
+            onExitComplete && allComplete && onExitComplete();
+        },
+    };
+    var register = React.useMemo(function () {
+        numExitComplete.current = 0;
+        return function () {
+            numPresenceChildren.current++;
+            return function () { return numPresenceChildren.current--; };
+        };
+    }, [isPresent]);
+    return (React.createElement(PresenceContext.Provider, { value: tslib.__assign(tslib.__assign({}, context), { register: register }) }, children));
+};
+
 function getChildKey(child) {
     return child.key || "";
 }
@@ -4811,18 +4856,14 @@ function onlyElements(children) {
     return filtered;
 }
 /**
- * The `AnimatePresence` component enables the use of the `exit` prop to animate components
- * when they're removed from the component tree.
- *
- * When adding/removing more than a single child component, every component
- * **must** be given a unique `key` prop.
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
  *
- * You can propagate exit animations throughout a tree by using variants.
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
  *
  * @library
  *
- * You can use any component(s) within `AnimatePresence`, but the first `Frame` in each should
- * have an `exit` property defined.
+ * Any `Frame` components that have an `exit` property defined will animate out when removed from
+ * the tree.
  *
  * ```jsx
  * import { Frame, AnimatePresence } from 'framer'
@@ -4844,10 +4885,12 @@ function onlyElements(children) {
  * }
  * ```
  *
+ * You can sequence exit animations throughout a tree using variants.
+ *
  * @motion
  *
- * You can use any component(s) within `AnimatePresence`, but the first `motion` component in each should
- * have an `exit` property defined.
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
  *
  * ```jsx
  * import { motion, AnimatePresence } from 'framer-motion'
@@ -4866,6 +4909,12 @@ function onlyElements(children) {
  * )
  * ```
  *
+ * 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
  */
 var AnimatePresence = function (_a) {
@@ -4891,7 +4940,7 @@ var AnimatePresence = function (_a) {
     // we play onMount animations or not.
     if (isInitialRender.current) {
         isInitialRender.current = false;
-        return (React.createElement(React.Fragment, null, filteredChildren.map(function (child) { return (React.createElement(PresenceChild, { key: getChildKey(child), exitProps: initial ? undefined : { initial: false } }, child)); })));
+        return (React.createElement(React.Fragment, null, filteredChildren.map(function (child) { return (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
     var childrenToRender = tslib.__spreadArrays(filteredChildren);
@@ -4938,18 +4987,13 @@ var AnimatePresence = function (_a) {
                 onExitComplete && onExitComplete();
             }
         };
-        var exitProps = {
-            custom: custom,
-            isExiting: true,
-            onExitComplete: onExit,
-        };
-        childrenToRender.splice(insertionIndex, 0, React.createElement(PresenceChild, { key: getChildKey(child), exitProps: exitProps }, child));
+        childrenToRender.splice(insertionIndex, 0, React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom }, child));
     });
     // Add `MotionContext` even to children that don't need it to ensure we're rendering
     // the same tree between renders
     childrenToRender = childrenToRender.map(function (child) {
         var key = child.key;
-        return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child) }, child));
+        return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true }, child));
     });
     presentChildren.current = childrenToRender;
     if (process.env.NODE_ENV !== "production" &&
@@ -4962,36 +5006,6 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return React.cloneElement(child); })));
 };
 
-/**
- * When a component is the child of an `AnimatePresence` component, it has access to
- * information about whether it's still present the React tree. `usePresence` can be
- * used to access that data and perform operations before the component can be considered
- * safe to remove.
- *
- * It returns two values. `isPresent` is a boolean that is `true` when the component
- * is present within the React tree. It is `false` when it's been removed, but still visible.
- *
- * When `isPresent` is `false`, the `safeToRemove` callback can be used to tell `AnimatePresence`
- * that it's safe to remove the component from the DOM, for instance after a animation has completed.
- *
- * ```jsx
- * const [isPresent, safeToRemove] = usePresence()
- *
- * useEffect(() => {
- *   !isPresent setTimeout(safeToRemove, 1000)
- * }, [isPresent])
- * ```
- *
- * @public
- */
-function usePresence() {
-    var exitProps = React.useContext(MotionContext).exitProps;
-    if (!exitProps)
-        return [true];
-    var isExiting = exitProps.isExiting, onExitComplete = exitProps.onExitComplete;
-    return isExiting && onExitComplete ? [false, onExitComplete] : [true];
-}
-
 // Does this device prefer reduced motion? Returns `null` server-side.
 var prefersReducedMotion = motionValue(null);
 if (typeof window !== "undefined") {

package/dist/framer-motion.d.ts

@@ -17,18 +17,14 @@ import { SpringProps } from 'popmotion';
 import { SVGAttributes } from 'react';
 
 /**
- * The `AnimatePresence` component enables the use of the `exit` prop to animate components
- * when they're removed from the component tree.
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
  *
- * When adding/removing more than a single child component, every component
- * **must** be given a unique `key` prop.
- *
- * You can propagate exit animations throughout a tree by using variants.
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
  *
  * @library
  *
- * You can use any component(s) within `AnimatePresence`, but the first `Frame` in each should
- * have an `exit` property defined.
+ * Any `Frame` components that have an `exit` property defined will animate out when removed from
+ * the tree.
  *
  * ```jsx
  * import { Frame, AnimatePresence } from 'framer'
@@ -50,10 +46,12 @@ import { SVGAttributes } from 'react';
  * }
  * ```
  *
+ * You can sequence exit animations throughout a tree using variants.
+ *
  * @motion
  *
- * You can use any component(s) within `AnimatePresence`, but the first `motion` component in each should
- * have an `exit` property defined.
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
  *
  * ```jsx
  * import { motion, AnimatePresence } from 'framer-motion'
@@ -72,6 +70,12 @@ import { SVGAttributes } from 'react';
  * )
  * ```
  *
+ * 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
  */
 export declare const AnimatePresence: FunctionComponent<AnimatePresenceProps>;
@@ -1406,13 +1410,6 @@ export declare interface EventInfo {
     point: Point;
 }
 
-declare interface ExitProps {
-    initial?: false | VariantLabels;
-    isExiting?: boolean;
-    onExitComplete?: () => void;
-    custom?: any;
-}
-
 /**
  * @public
  */
@@ -2417,7 +2414,6 @@ declare interface MotionContextProps {
     animate?: VariantLabels;
     static?: boolean;
     hasMounted?: RefObject<boolean>;
-    exitProps?: ExitProps;
     isReducedMotion?: boolean | undefined;
 }
 
@@ -4944,25 +4940,26 @@ export declare function useMotionValue<T>(initial: T): MotionValue<T>;
 export declare function usePanGesture({ onPan, onPanStart, onPanEnd, onPanSessionStart }: PanHandlers, ref: RefObject<Element>): void;
 
 /**
- * When a component is the child of an `AnimatePresence` component, it has access to
- * information about whether it's still present the React tree. `usePresence` can be
- * used to access that data and perform operations before the component can be considered
- * safe to remove.
+ * 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.
  *
- * It returns two values. `isPresent` is a boolean that is `true` when the component
- * is present within the React tree. It is `false` when it's been removed, but still visible.
+ * ```jsx
+ * import { usePresence } from "framer-motion"
  *
- * When `isPresent` is `false`, the `safeToRemove` callback can be used to tell `AnimatePresence`
- * that it's safe to remove the component from the DOM, for instance after a animation has completed.
+ * export const Component = () => {
+ *   const [isPresent, safeToRemove] = usePresence()
  *
- * ```jsx
- * const [isPresent, safeToRemove] = usePresence()
+ *   useEffect(() => {
+ *     !isPresent setTimeout(safeToRemove, 1000)
+ *   }, [isPresent])
  *
- * 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
  */
 export declare function usePresence(): Present | NotPresent;