@tamagui/animate-presence 2.0.0-rc.9 → 2.1.0

package/dist/esm/PresenceChild.native.js

@@ -5,69 +5,79 @@ import * as React from "react";
 import { useId } from "react";
 var PresenceChild = /* @__PURE__ */React.memo(function (param) {
   var {
-      children,
+    children,
+    initial,
+    isPresent,
+    onExitComplete,
+    exitVariant,
+    enterVariant,
+    enterExitVariant,
+    presenceAffectsLayout,
+    custom
+  } = param;
+  var presenceChildren = useConstant(newChildrenMap);
+  var id = useId() || "";
+  var context = React.useMemo(function () {
+    return {
+      id,
       initial,
       isPresent,
-      onExitComplete,
+      custom,
       exitVariant,
       enterVariant,
       enterExitVariant,
-      presenceAffectsLayout,
-      custom
-    } = param,
-    presenceChildren = useConstant(newChildrenMap),
-    id = useId() || "",
-    context = React.useMemo(function () {
-      return {
-        id,
-        initial,
-        isPresent,
-        custom,
-        exitVariant,
-        enterVariant,
-        enterExitVariant,
-        onExitComplete: function () {
-          presenceChildren.set(id, !0);
-          var _iteratorNormalCompletion = !0,
-            _didIteratorError = !1,
-            _iteratorError = void 0;
+      onExitComplete: function () {
+        presenceChildren.set(id, true);
+        var _iteratorNormalCompletion = true,
+          _didIteratorError = false,
+          _iteratorError = void 0;
+        try {
+          for (var _iterator = presenceChildren.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var isComplete = _step.value;
+            if (!isComplete) {
+              return;
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
           try {
-            for (var _iterator = presenceChildren.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-              var isComplete = _step.value;
-              if (!isComplete) return;
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+              _iterator.return();
             }
-          } catch (err) {
-            _didIteratorError = !0, _iteratorError = err;
           } finally {
-            try {
-              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-            } finally {
-              if (_didIteratorError) throw _iteratorError;
+            if (_didIteratorError) {
+              throw _iteratorError;
             }
           }
-          onExitComplete?.();
-        },
-        register: function () {
-          return presenceChildren.set(id, !1), function () {
-            return presenceChildren.delete(id);
-          };
         }
-      };
-    },
-    /**
-    * 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.
-    */
-    // @ts-expect-error its ok
-    presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]);
-  return React.useMemo(function () {
+        onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+      },
+      register: function () {
+        presenceChildren.set(id, false);
+        return function () {
+          return presenceChildren.delete(id);
+        };
+      }
+    };
+  },
+  /**
+  * 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.
+  */
+  // @ts-expect-error its ok
+  presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]);
+  React.useMemo(function () {
     presenceChildren.forEach(function (_, key) {
-      return presenceChildren.set(key, !1);
+      return presenceChildren.set(key, false);
     });
-  }, [isPresent]), React.useEffect(function () {
-    !isPresent && !presenceChildren.size && onExitComplete?.();
-  }, [isPresent]), /* @__PURE__ */_jsx(PresenceContext.Provider, {
+  }, [isPresent]);
+  React.useEffect(function () {
+    !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
+  }, [isPresent]);
+  return /* @__PURE__ */_jsx(PresenceContext.Provider, {
     value: context,
     children
   });

package/dist/esm/PresenceChild.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","useConstant","PresenceContext","React","useId","PresenceChild","memo","param","children","initial","isPresent","onExitComplete","exitVariant","enterVariant","enterExitVariant","presenceAffectsLayout","custom","presenceChildren","newChildrenMap","id","context","useMemo","set","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","values","Symbol","iterator","_step","next","done","isComplete","value","err","return","register","delete"],"sources":["../../src/PresenceChild.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAmB;AAC5B,SAASC,WAAA,+BAAuB;AAEhC,SAAAC,eAAuB;AACvB,YAASC,KAAA,MAAa;AA+EX,SAAAC,KAAA;AA9DJ,IAAAC,aAAM,kBAAsBF,KAAA,CAAAG,IAAA,WAAAC,KAAA;EACjC,IAAC;MAAAC,QAAA;MAAAC,OAAA;MAAAC,SAAA;MAAAC,cAAA;MAAAC,WAAA;MAAAC,YAAA;MAAAC,gBAAA;MAAAC,qBAAA;MAAAC;IAAA,IAAAT,KAAA;IAAAU,gBAAA,GAAAhB,WAAA,CAAAiB,cAAA;IAAAC,EAAA,GAAAf,KAAA;IAAAgB,OAAA,GAAAjB,KAAA,CAAAkB,OAAA,CACC;MACA;QACAF,EAAA;QACAV,OAAA;QACAC,SAAA;QACAM,MAAA;QACAJ,WAAA;QACAC,YAAA;QACAC,gBAAA;QACwBH,cAAA,WAAAA,CAAA;UAClBM,gBAAA,CAAAK,GAAmB,CAAAH,EAAA;UAIvB,IACSI,yBAAA;YAAAC,iBAAA;YAAAC,cAAA;UACL;YACA,SAAAC,SAAA,GAAAT,gBAAA,CAAAU,MAAA,GAAAC,MAAA,CAAAC,QAAA,KAAAC,KAAA,IAAAP,yBAAA,IAAAO,KAAA,GAAAJ,SAAA,CAAAK,IAAA,IAAAC,IAAA,GAAAT,yBAAA;cACA,IAAAU,UAAA,GAAAH,KAAA,CAAAI,KAAA;cACA,KAAAD,UAAA,EACA;YACA;UACA,SAAAE,GAAA;YACAX,iBAAgB,GAAM,IAAAC,cAAA,GAAAU,GAAA;UACpB;YACA;cACE,CAAAZ,yBAAK,IAAAG,SAAA,CAAAU,MAAA,YAAAV,SAAA,CAAAU,MAAA;YACH;cAGJ,IAAAZ,iBAAiB,EACnB,MAAAC,cAAA;YACA;UAIF;UAAAd,cAAA;QAAA;QAAA0B,QAAA,WAAAA,CAAA;UAAA,OAAApB,gBAAA,CAAAK,GAAA,CAAAH,EAAA;YAAA,OAAAF,gBAAA,CAAAqB,MAAA,CAAAnB,EAAA;UAAA;QASF;MACF;IAEA;IACE;AAAqE;AAQrE;AAAyD;AAGA;IAE/D;IAEAJ,qBAAS,GAAuC,UAC9CL,SAAO,EACTE,WAAA,E","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","useConstant","PresenceContext","React","useId","PresenceChild","memo","param","children","initial","isPresent","onExitComplete","exitVariant","enterVariant","enterExitVariant","presenceAffectsLayout","custom","presenceChildren","newChildrenMap","id","context","useMemo","set","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","values","Symbol","iterator","_step","next","done","isComplete","value","err","return","register","delete"],"sources":["../../src/PresenceChild.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAmB;AAC5B,SAASC,WAAA,+BAAuB;AAEhC,SAAAC,eAAuB;AACvB,YAASC,KAAA,MAAa;AA+EX,SAAAC,KAAA;AA9DJ,IAAAC,aAAM,kBAAsBF,KAAA,CAAAG,IAAA,WAAAC,KAAA;EACjC,IAAC;IAAAC,QAAA;IAAAC,OAAA;IAAAC,SAAA;IAAAC,cAAA;IAAAC,WAAA;IAAAC,YAAA;IAAAC,gBAAA;IAAAC,qBAAA;IAAAC;EAAA,IAAAT,KAAA;EAAA,IACCU,gBAAA,GAAAhB,WAAA,CAAAiB,cAAA;EAAA,IACAC,EAAA,GAAAf,KAAA;EAAA,IACAgB,OAAA,GAAAjB,KAAA,CAAAkB,OAAA,CACA;IACA;MACAF,EAAA;MACAV,OAAA;MACAC,SAAA;MACAM,MAAA;MACwBJ,WAAA;MACxBC,YAAM;MACNC,gBAAiB;MAEjBH,cAAgB,WAAAA,CAAA,EAAM;QACpBM,gBAA4B,CAAAK,GAAA,CAAAH,EAAA;QAC1B,IAAAI,yBAAO;UAAAC,iBAAA;UAAAC,cAAA;QACL;UACA,SAAAC,SAAA,GAAAT,gBAAA,CAAAU,MAAA,GAAAC,MAAA,CAAAC,QAAA,KAAAC,KAAA,IAAAP,yBAAA,IAAAO,KAAA,GAAAJ,SAAA,CAAAK,IAAA,IAAAC,IAAA,GAAAT,yBAAA;YACA,IAAAU,UAAA,GAAAH,KAAA,CAAAI,KAAA;YACA,KAAAD,UAAA;cACA;YACA;UACA;QACA,SAAAE,GAAA;UACEX,iBAAiB,OAAI;UACrBC,cAAW,GAAAU,GAAA;QACT,UAAK;UACH;YACF,KAAAZ,yBAAA,IAAAG,SAAA,CAAAU,MAAA;cACFV,SAAA,CAAAU,MAAA;YACA;UACF;YACA,IAAAZ,iBAAgB;cACd,MAAAC,cAAqB;YACrB;UACF;QACF;QACFd,cAAA,aAAAA,cAAA,uBAAAA,cAAA;MAAA;MAAA0B,QAAA,WAAAA,CAAA;QAAApB,gBAAA,CAAAK,GAAA,CAAAH,EAAA;QAAA;UAAA,OAAAF,gBAAA,CAAAqB,MAAA,CAAAnB,EAAA;QAAA;MAQA;IACF;EAEA;EACE;AAAqE;AAOvE;AACE;AAAyD;EAG3D;EACFJ,qBAAA,aACFL,SAAA,EAEAE,WAAS,EACPC,YAAO,C","ignoreList":[]}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-export * from "./AnimatePresence";
+export * from "./AnimatePresence.mjs";
 export * from "@tamagui/use-presence";
-export * from "./types";
-export * from "./PresenceChild";
+export * from "./types.mjs";
+export * from "./PresenceChild.mjs";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,6 +1 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.ts"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
-  "names": []
-}
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animate-presence",
-  "version": "2.0.0-rc.9",
+  "version": "2.1.0",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "source": "src/index.ts",
@@ -21,10 +21,11 @@
     ".": {
       "types": "./types/index.d.ts",
       "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
       "module": "./dist/esm/index.mjs",
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
-      "default": "./dist/cjs/index.native.js"
+      "default": "./dist/esm/index.mjs"
     }
   },
   "publishConfig": {
@@ -37,15 +38,15 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/constants": "2.0.0-rc.9",
-    "@tamagui/helpers": "2.0.0-rc.9",
-    "@tamagui/use-constant": "2.0.0-rc.9",
-    "@tamagui/use-force-update": "2.0.0-rc.9",
-    "@tamagui/use-presence": "2.0.0-rc.9",
-    "@tamagui/web": "2.0.0-rc.9"
+    "@tamagui/constants": "2.1.0",
+    "@tamagui/helpers": "2.1.0",
+    "@tamagui/use-constant": "2.1.0",
+    "@tamagui/use-force-update": "2.1.0",
+    "@tamagui/use-presence": "2.1.0",
+    "@tamagui/web": "2.1.0"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-rc.9",
+    "@tamagui/build": "2.1.0",
     "react": ">=19"
   },
   "peerDependencies": {

package/src/AnimatePresence.tsx

@@ -1,7 +1,8 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { useInsertionEffect } from 'react'
+import { useConstant } from '@tamagui/use-constant'
 import { useForceUpdate } from '@tamagui/use-force-update'
 import type { FunctionComponent, PropsWithChildren, ReactElement, ReactNode } from 'react'
-import { Children, cloneElement, isValidElement, useContext, useRef } from 'react'
+import { Children, isValidElement, useContext, useMemo, useRef, useState } from 'react'
 import { LayoutGroupContext } from './LayoutGroupContext'
 import { PresenceChild } from './PresenceChild'
 import type { AnimatePresenceProps } from './types'
@@ -24,16 +25,6 @@ const getChildKey = (child: ReactElement<any>): ComponentKey => {
   )
 }
 
-function updateChildLookup(
-  children: ReactElement<any>[],
-  allChildren: Map<ComponentKey, ReactElement<any>>
-) {
-  children.forEach((child) => {
-    const key = getChildKey(child)
-    allChildren.set(key, child)
-  })
-}
-
 function onlyElements(children: ReactNode): ReactElement<any>[] {
   const filtered: ReactElement<any>[] = []
   // We use forEach here instead of map as map mutates the component key by preprending `.$`
@@ -53,158 +44,174 @@ export const AnimatePresence: FunctionComponent<
   initial = true,
   onExitComplete,
   exitBeforeEnter,
+  mode,
   presenceAffectsLayout = true,
   custom,
   passThrough,
 }) => {
-  // 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.
-  let forceRender = useContext(LayoutGroupContext).forceRender ?? useForceUpdate()
-
-  // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
-  const filteredChildren = onlyElements(children)
-
-  // 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 = useRef(filteredChildren)
-
-  // A lookup table to quickly reference components by key
-  const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current
-
-  const exiting = useRef(new Set<ComponentKey>()).current
-  updateChildLookup(filteredChildren, allChildren)
-
-  // If this is the initial component render, just deal with logic surrounding whether
-  // we play onMount animations or not.
+  // Determine effective mode: mode prop takes precedence, then exitBeforeEnter for backwards compatibility
+  const effectiveMode = mode ?? (exitBeforeEnter ? 'wait' : 'sync')
+
+  /**
+   * Filter any children that aren't ReactElements. We can only track components
+   * between renders with a props.key.
+   * IMPORTANT: useMemo ensures reference stability for the comparison below
+   */
+  const presentChildren = useMemo(() => onlyElements(children), [children])
+
+  /**
+   * Track the keys of the currently rendered children.
+   */
+  const presentKeys = presentChildren.map(getChildKey)
+
+  /**
+   * If `initial={false}` we only want to pass this to components in the first render.
+   */
   const isInitialRender = useRef(true)
 
+  /**
+   * Freeze custom prop for exiting children so direction doesn't reverse mid-exit.
+   */
+  const frozenCustomRef = useRef(new Map<ComponentKey, any>())
+
+  /**
+   * A ref containing the currently present children. When all exit animations
+   * are complete, we use this to re-render 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<ComponentKey, boolean>())
+
+  /**
+   * 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)
+
+  /**
+   * 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).forceRender ?? useForceUpdate()
+
   if (passThrough) {
-    // match structure returned below
     return <>{children}</>
   }
 
-  useIsomorphicLayoutEffect(() => {
+  // useInsertionEffect runs before ALL useLayoutEffects (including children's)
+  // this ensures pendingPresentChildren and exitComplete are set before
+  // animation drivers call sendExitComplete() in their layout effects
+  // (critical for immediate completions like animateOnly=[])
+  useInsertionEffect(() => {
     isInitialRender.current = false
-  }, [])
-
-  if (isInitialRender.current) {
-    return (
-      <>
-        {filteredChildren.map((child) => (
-          <PresenceChild
-            key={getChildKey(child)}
-            isPresent
-            enterExitVariant={enterExitVariant}
-            exitVariant={exitVariant}
-            enterVariant={enterVariant}
-            initial={initial ? undefined : false}
-            presenceAffectsLayout={presenceAffectsLayout}
-            custom={custom}
-          >
-            {child}
-          </PresenceChild>
-        ))}
-      </>
-    )
-  }
-
-  let childrenToRender = [...filteredChildren]
-
-  // 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) {
-      exiting.add(key)
-    } else {
-      // In case this key has re-entered, remove from the exiting list
-      exiting.delete(key)
+    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)
+        frozenCustomRef.current.delete(key)
+      }
     }
-  }
-
-  // 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 (exitBeforeEnter && exiting.size) {
-    childrenToRender = []
-  }
-
-  // Loop through all currently exiting components and clone them to overwrite `animate`
-  // with any `exit` prop they might have defined.
-  exiting.forEach((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)
-
-    const onExit = () => {
-      allChildren.delete(key)
-      exiting.delete(key)
-      const removeIndex = presentChildren.current.findIndex(
-        (presentChild) => presentChild.key === key
-      )
-      presentChildren.current.splice(removeIndex, 1)
-
-      if (!exiting.size) {
-        presentChildren.current = filteredChildren
-        forceRender()
-        onExitComplete?.()
+  }, [renderedChildren, presentKeys.length, presentKeys.join('-')])
+
+  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)
+        // freeze custom at the moment of exit so direction doesn't reverse
+        if (!frozenCustomRef.current.has(key)) {
+          frozenCustomRef.current.set(key, custom)
+        }
       }
     }
 
-    const exitingComponent = (
-      <PresenceChild
-        key={getChildKey(child)}
-        isPresent={false}
-        onExitComplete={onExit}
-        presenceAffectsLayout={presenceAffectsLayout}
-        enterExitVariant={enterExitVariant}
-        enterVariant={enterVariant}
-        exitVariant={exitVariant}
-        custom={custom}
-      >
-        {child}
-      </PresenceChild>
+    /**
+     * If we're in "wait" mode, and we have exiting children, we want to
+     * only render these until they've all exited.
+     */
+    const exitingChildren = renderedChildren.filter(
+      (child) => !presentKeys.includes(getChildKey(child))
     )
+    if (effectiveMode === 'wait' && exitingChildren.length) {
+      nextChildren = exitingChildren
+    }
 
-    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 as ComponentKey
-    return exiting.has(key) ? (
-      child
-    ) : (
-      <PresenceChild
-        key={getChildKey(child)}
-        isPresent
-        exitVariant={exitVariant}
-        enterVariant={enterVariant}
-        enterExitVariant={enterExitVariant}
-        presenceAffectsLayout={presenceAffectsLayout}
-        custom={custom}
-      >
-        {child}
-      </PresenceChild>
-    )
-  })
+    setRenderedChildren(onlyElements(nextChildren))
+    setDiffedChildren(presentChildren)
 
-  presentChildren.current = childrenToRender
+    /**
+     * Early return to ensure once we've set state with the latest diffed
+     * children, we can immediately re-render.
+     */
+    return null
+  }
 
   return (
     <>
-      {exiting.size
-        ? childrenToRender
-        : childrenToRender.map((child) => cloneElement(child))}
+      {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?.()
+            setRenderedChildren(pendingPresentChildren.current)
+            onExitComplete?.()
+          }
+        }
+
+        return (
+          <PresenceChild
+            key={key}
+            isPresent={isPresent}
+            initial={!isInitialRender.current || initial ? undefined : false}
+            custom={isPresent ? custom : (frozenCustomRef.current.get(key) ?? custom)}
+            presenceAffectsLayout={presenceAffectsLayout}
+            enterExitVariant={enterExitVariant}
+            enterVariant={enterVariant}
+            exitVariant={exitVariant}
+            onExitComplete={isPresent ? undefined : onExit}
+          >
+            {child}
+          </PresenceChild>
+        )
+      })}
     </>
   )
 }

package/src/types.ts

@@ -14,6 +14,15 @@ export type VariantLabels = string | string[]
  * @public
  */
 export interface AnimatePresenceProps {
+  /**
+   * Determines how to handle entering and exiting elements.
+   * - "sync": Default. Elements animate in and out simultaneously.
+   * - "wait": Wait for exit to finish before entering.
+   *
+   * @public
+   */
+  mode?: 'sync' | 'wait'
+
   /**
    * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children
    * that are present when the component is first rendered.
@@ -66,15 +75,7 @@ export interface AnimatePresenceProps {
    * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component
    * will finish its exit animation before the entering component is rendered.
    *
-   * ```jsx
-   * const MyComponent = ({ currentItem }) => (
-   *   <AnimatePresence exitBeforeEnter>
-   *     <motion.div key={currentItem} exit={{ opacity: 0 }} />
-   *   </AnimatePresence>
-   * )
-   * ```
-   *
-   * @beta
+   * @deprecated Use `mode="wait"` instead.
    */
   exitBeforeEnter?: boolean
 

package/types/AnimatePresence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatePresence.d.ts","sourceRoot":"","sources":["../src/AnimatePresence.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAA;AAI1F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAuCnD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAC7C,iBAAiB,CAAC,oBAAoB,CAAC,CAmKxC,CAAA"}
+{"version":3,"file":"AnimatePresence.d.ts","sourceRoot":"","sources":["../src/AnimatePresence.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAA;AAI1F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA6BnD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAC7C,iBAAiB,CAAC,oBAAoB,CAAC,CAmLxC,CAAA"}

package/types/types.d.ts

@@ -11,6 +11,14 @@ export type VariantLabels = string | string[];
  * @public
  */
 export interface AnimatePresenceProps {
+    /**
+     * Determines how to handle entering and exiting elements.
+     * - "sync": Default. Elements animate in and out simultaneously.
+     * - "wait": Wait for exit to finish before entering.
+     *
+     * @public
+     */
+    mode?: 'sync' | 'wait';
     /**
      * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children
      * that are present when the component is first rendered.
@@ -60,15 +68,7 @@ export interface AnimatePresenceProps {
      * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component
      * will finish its exit animation before the entering component is rendered.
      *
-     * ```jsx
-     * const MyComponent = ({ currentItem }) => (
-     *   <AnimatePresence exitBeforeEnter>
-     *     <motion.div key={currentItem} exit={{ opacity: 0 }} />
-     *   </AnimatePresence>
-     * )
-     * ```
-     *
-     * @beta
+     * @deprecated Use `mode="wait"` instead.
      */
     exitBeforeEnter?: boolean;
     /**

package/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,IAAI,CAAA;IACP,CAAC,EAAE,IAAI,CAAA;CACR;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAE7C;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;;;;;;;;;;;;;OAiBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAE5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEhC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,IAAI,CAAA;IACP,CAAC,EAAE,IAAI,CAAA;CACR;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAE7C;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;;;;;;;;;;;;;OAiBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAE5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEhC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}