@tamagui/animate-presence 1.0.0-beta.202 → 1.0.0-beta.208

package/dist/cjs/AnimatePresence.js

@@ -25,22 +25,22 @@ __export(AnimatePresence_exports, {
 });
 module.exports = __toCommonJS(AnimatePresence_exports);
 var import_core = require("@tamagui/core");
-var React = __toESM(require("react"));
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_LayoutGroupContext = require("./LayoutGroupContext");
 var import_PresenceChild = require("./PresenceChild");
+import_react.default["keep"];
 const getChildKey = /* @__PURE__ */ __name((child) => child.key || "", "getChildKey");
 const isDev = process.env.NODE_ENV !== "production";
 function updateChildLookup(children, allChildren) {
   const seenChildren = isDev ? /* @__PURE__ */ new Set() : null;
-  for (const child of children) {
+  children.forEach((child) => {
     const key = getChildKey(child);
     if (isDev && seenChildren && seenChildren.has(key)) {
       console.warn(`Children of AnimatePresence require unique keys. "${key}" is a duplicate.`);
       seenChildren.add(key);
     }
     allChildren.set(key, child);
-  }
+  });
 }
 __name(updateChildLookup, "updateChildLookup");
 function onlyElements(children) {
@@ -54,7 +54,8 @@ function onlyElements(children) {
 __name(onlyElements, "onlyElements");
 const AnimatePresence = /* @__PURE__ */ __name(({
   children,
-  custom,
+  enterVariant,
+  exitVariant,
   initial = true,
   onExitComplete,
   exitBeforeEnter,
@@ -64,7 +65,10 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   const forceRenderLayoutGroup = (0, import_react.useContext)(import_LayoutGroupContext.LayoutGroupContext).forceRender;
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
-  const isMounted = (0, import_core.useIsMounted)();
+  const [isMounted, setIsMounted] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
   const filteredChildren = onlyElements(children);
   let childrenToRender = filteredChildren;
   const exiting = /* @__PURE__ */ new Set();
@@ -82,9 +86,11 @@ const AnimatePresence = /* @__PURE__ */ __name(({
     exiting.clear();
   });
   if (isInitialRender.current) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, childrenToRender.map((child) => /* @__PURE__ */ React.createElement(import_PresenceChild.PresenceChild, {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, childrenToRender.map((child) => /* @__PURE__ */ import_react.default.createElement(import_PresenceChild.PresenceChild, {
       key: getChildKey(child),
-      isPresent: true,
+      isEntering: true,
+      exitVariant,
+      enterVariant,
       initial: initial ? void 0 : false,
       presenceAffectsLayout
     }, child)));
@@ -102,48 +108,47 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   if (exitBeforeEnter && exiting.size) {
     childrenToRender = [];
   }
-  for (const key of exiting) {
-    if (targetKeys.indexOf(key) !== -1) {
-      continue;
-    }
+  exiting.forEach((key) => {
+    if (targetKeys.indexOf(key) !== -1)
+      return;
     const child = allChildren.get(key);
-    if (!child) {
-      continue;
-    }
+    if (!child)
+      return;
     const insertionIndex = presentKeys.indexOf(key);
-    const onExit = /* @__PURE__ */ __name(() => {
-      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;
-        if (isMounted.current === false) {
-          return;
-        }
-        forceRender();
-        onExitComplete == null ? void 0 : onExitComplete();
-      }
-    }, "onExit");
-    childrenToRender.splice(insertionIndex, 0, /* @__PURE__ */ React.createElement(import_PresenceChild.PresenceChild, {
+    childrenToRender.splice(insertionIndex, 0, /* @__PURE__ */ import_react.default.createElement(import_PresenceChild.PresenceChild, {
       key: getChildKey(child),
-      isPresent: false,
-      onExitComplete: onExit,
-      custom,
+      isEntering: false,
+      onExitComplete: () => {
+        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;
+          if (isMounted === false)
+            return;
+          forceRender();
+          onExitComplete == null ? void 0 : onExitComplete();
+        }
+      },
+      exitVariant,
+      enterVariant,
       presenceAffectsLayout
     }, child));
-  }
+  });
   childrenToRender = childrenToRender.map((child) => {
     const key = child.key;
-    return exiting.has(key) ? child : /* @__PURE__ */ React.createElement(import_PresenceChild.PresenceChild, {
+    return exiting.has(key) ? child : /* @__PURE__ */ import_react.default.createElement(import_PresenceChild.PresenceChild, {
       key: getChildKey(child),
-      isPresent: true,
+      isEntering: void 0,
+      exitVariant,
+      enterVariant,
       presenceAffectsLayout
     }, child);
   });
   if (process.env.NODE_ENV !== "production" && exitBeforeEnter && childrenToRender.length > 1) {
     console.warn(`You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, exiting.size ? childrenToRender : childrenToRender.map((child) => (0, import_react.cloneElement)(child)));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, exiting.size ? childrenToRender : childrenToRender.map((child) => (0, import_react.cloneElement)(child)));
 }, "AnimatePresence");
 //# sourceMappingURL=AnimatePresence.js.map

package/dist/cjs/AnimatePresence.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimatePresence.tsx"],
-  "sourcesContent": ["import {\n  useForceUpdate,\n  useIsMounted,\n  useIsomorphicLayoutEffect,\n  useUnmountEffect,\n} from '@tamagui/core'\nimport * as React from 'react'\nimport {\n  Children,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  useRef,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\n\nexport interface AnimatePresenceProps {\n  /**\n   * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children\n   * that are present when the component is first rendered.\n   */\n  initial?: boolean\n\n  /**\n   * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`\n   * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.\n   * This will ensure all leaving components animate using the latest data.\n   */\n  custom?: any\n\n  /**\n   * Fires when all exiting nodes have completed animating out.\n   */\n  onExitComplete?: () => void\n\n  /**\n   * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component\n   * will finish its exit animation before the entering component is rendered.\n   */\n  exitBeforeEnter?: boolean\n\n  /**\n   * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a\n   * child being removed.\n   */\n  presenceAffectsLayout?: boolean\n}\n\ntype ComponentKey = string | number\n\nconst getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\nconst isDev = process.env.NODE_ENV !== 'production'\n\nfunction updateChildLookup(\n  children: ReactElement<any>[],\n  allChildren: Map<ComponentKey, ReactElement<any>>\n) {\n  const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n  for (const child of children) {\n    const key = getChildKey(child)\n    if (isDev && seenChildren && seenChildren.has(key)) {\n      console.warn(`Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`)\n      seenChildren.add(key)\n    }\n    allChildren.set(key, child)\n  }\n}\n\nfunction onlyElements(children: ReactNode): ReactElement<any>[] {\n  const filtered: ReactElement<any>[] = []\n\n  // We use forEach here instead of map as map mutates the component key by preprending `.$`\n  Children.forEach(children, (child) => {\n    if (isValidElement(child)) filtered.push(child)\n  })\n\n  return filtered\n}\n\n/**\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 * Any animated components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\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 animated components with `exit` props, it will only unmount the child\n * once all animated components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nexport const AnimatePresence: React.FunctionComponent<AnimatePresenceProps> = ({\n  children,\n  custom,\n  initial = true,\n  onExitComplete,\n  exitBeforeEnter,\n  presenceAffectsLayout = true,\n}) => {\n  // We want to force a re-render once all exiting animations have finished. We\n  // either use a local forceRender function, or one from a parent context if it exists.\n  let forceRender = useForceUpdate()\n  const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n  if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n  const isMounted = useIsMounted()\n\n  // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n  const filteredChildren = onlyElements(children)\n  let childrenToRender = filteredChildren\n\n  const exiting = new Set<ComponentKey>()\n\n  // Keep a living record of the children we're actually rendering so we\n  // can diff to figure out which are entering and exiting\n  const presentChildren = useRef(childrenToRender)\n\n  // A lookup table to quickly reference components by key\n  const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n  // If this is the initial component render, just deal with logic surrounding whether\n  // we play onMount animations or not.\n  const isInitialRender = useRef(true)\n\n  useIsomorphicLayoutEffect(() => {\n    isInitialRender.current = false\n    updateChildLookup(filteredChildren, allChildren)\n    presentChildren.current = childrenToRender\n  })\n\n  useUnmountEffect(() => {\n    isInitialRender.current = true\n    allChildren.clear()\n    exiting.clear()\n  })\n\n  if (isInitialRender.current) {\n    return (\n      <>\n        {childrenToRender.map((child) => (\n          <PresenceChild\n            key={getChildKey(child)}\n            isPresent\n            initial={initial ? undefined : false}\n            presenceAffectsLayout={presenceAffectsLayout}\n          >\n            {child}\n          </PresenceChild>\n        ))}\n      </>\n    )\n  }\n\n  // If this is a subsequent render, deal with entering and exiting children\n  childrenToRender = [...childrenToRender]\n\n  // Diff the keys of the currently-present and target children to update our\n  // exiting list.\n  const presentKeys = presentChildren.current.map(getChildKey)\n  const targetKeys = filteredChildren.map(getChildKey)\n\n  // Diff the present children with our target children and mark those that are exiting\n  const numPresent = presentKeys.length\n  for (let i = 0; i < numPresent; i++) {\n    const key = presentKeys[i]\n    if (targetKeys.indexOf(key) === -1) {\n      exiting.add(key)\n    }\n  }\n\n  // If we currently have exiting children, and we're deferring rendering incoming children\n  // until after all current children have exiting, empty the childrenToRender array\n  if (exitBeforeEnter && exiting.size) {\n    childrenToRender = []\n  }\n\n  // Loop through all currently exiting components and clone them to overwrite `animate`\n  // with any `exit` prop they might have defined.\n  for (const key of exiting) {\n    // If this component is actually entering again, early return\n    if (targetKeys.indexOf(key) !== -1) {\n      continue\n    }\n\n    const child = allChildren.get(key)\n    if (!child) {\n      continue\n    }\n\n    const insertionIndex = presentKeys.indexOf(key)\n\n    const onExit = () => {\n      allChildren.delete(key)\n      exiting.delete(key)\n\n      // Remove this child from the present children\n      const removeIndex = presentChildren.current.findIndex(\n        (presentChild) => presentChild.key === key\n      )\n      presentChildren.current.splice(removeIndex, 1)\n\n      // Defer re-rendering until all exiting children have indeed left\n      if (!exiting.size) {\n        presentChildren.current = filteredChildren\n        if (isMounted.current === false) {\n          return\n        }\n        forceRender()\n        onExitComplete?.()\n      }\n    }\n\n    childrenToRender.splice(\n      insertionIndex,\n      0,\n      <PresenceChild\n        key={getChildKey(child)}\n        isPresent={false}\n        onExitComplete={onExit}\n        custom={custom}\n        presenceAffectsLayout={presenceAffectsLayout}\n      >\n        {child}\n      </PresenceChild>\n    )\n  }\n\n  // Add `MotionContext` even to children that don't need it to ensure we're rendering\n  // the same tree between renders\n  childrenToRender = childrenToRender.map((child) => {\n    const key = child.key as string | number\n    return exiting.has(key) ? (\n      child\n    ) : (\n      <PresenceChild\n        key={getChildKey(child)}\n        isPresent\n        presenceAffectsLayout={presenceAffectsLayout}\n      >\n        {child}\n      </PresenceChild>\n    )\n  })\n\n  if (process.env.NODE_ENV !== 'production' && exitBeforeEnter && childrenToRender.length > 1) {\n    console.warn(\n      `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`\n    )\n  }\n\n  return (\n    <>{exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child))}</>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate, useIsomorphicLayoutEffect, useUnmountEffect } from '@tamagui/core'\nimport React, {\n  Children,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\n\nReact['keep']\n\nexport interface AnimatePresenceProps {\n  /**\n   * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children\n   * that are present when the component is first rendered.\n   */\n  initial?: boolean\n\n  /**\n   * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`\n   * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.\n   * This will ensure all leaving components animate using the latest data.\n   */\n  exitVariant?: string | null\n\n  enterVariant?: string | null\n\n  /**\n   * Fires when all exiting nodes have completed animating out.\n   */\n  onExitComplete?: () => void\n\n  /**\n   * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component\n   * will finish its exit animation before the entering component is rendered.\n   */\n  exitBeforeEnter?: boolean\n\n  /**\n   * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a\n   * child being removed.\n   */\n  presenceAffectsLayout?: boolean\n}\n\ntype ComponentKey = string | number\n\nconst getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\nfunction updateChildLookup(\n  children: ReactElement<any>[],\n  allChildren: Map<ComponentKey, ReactElement<any>>\n) {\n  const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n  children.forEach((child) => {\n    const key = getChildKey(child)\n\n    if (isDev && seenChildren && seenChildren.has(key)) {\n      console.warn(`Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`)\n\n      seenChildren.add(key)\n    }\n\n    allChildren.set(key, child)\n  })\n}\n\nfunction onlyElements(children: ReactNode): ReactElement<any>[] {\n  const filtered: ReactElement<any>[] = []\n\n  // We use forEach here instead of map as map mutates the component key by preprending `.$`\n  Children.forEach(children, (child) => {\n    if (isValidElement(child)) filtered.push(child)\n  })\n\n  return filtered\n}\n\n/**\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 * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\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\n * once all `motion` components have finished animating out. Likewise, any components using\n * `useEntering` all need to call `safeToRemove`.\n *\n * @public\n */\nexport const AnimatePresence: React.FunctionComponent<\n  React.PropsWithChildren<AnimatePresenceProps>\n> = ({\n  children,\n  enterVariant,\n  exitVariant,\n  initial = true,\n  onExitComplete,\n  exitBeforeEnter,\n  presenceAffectsLayout = true,\n}) => {\n  // We want to force a re-render once all exiting animations have finished. We\n  // either use a local forceRender function, or one from a parent context if it exists.\n  let forceRender = useForceUpdate()\n  const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n  if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n  const [isMounted, setIsMounted] = useState(false)\n  useEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n  const filteredChildren = onlyElements(children)\n  let childrenToRender = filteredChildren\n\n  const exiting = new Set<ComponentKey>()\n\n  // Keep a living record of the children we're actually rendering so we\n  // can diff to figure out which are entering and exiting\n  const presentChildren = useRef(childrenToRender)\n\n  // A lookup table to quickly reference components by key\n  const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n  // If this is the initial component render, just deal with logic surrounding whether\n  // we play onMount animations or not.\n  const isInitialRender = useRef(true)\n\n  useIsomorphicLayoutEffect(() => {\n    isInitialRender.current = false\n    updateChildLookup(filteredChildren, allChildren)\n    presentChildren.current = childrenToRender\n  })\n\n  useUnmountEffect(() => {\n    isInitialRender.current = true\n    allChildren.clear()\n    exiting.clear()\n  })\n\n  if (isInitialRender.current) {\n    return (\n      <>\n        {childrenToRender.map((child) => (\n          <PresenceChild\n            key={getChildKey(child)}\n            isEntering\n            exitVariant={exitVariant}\n            enterVariant={enterVariant}\n            initial={initial ? undefined : false}\n            presenceAffectsLayout={presenceAffectsLayout}\n          >\n            {child}\n          </PresenceChild>\n        ))}\n      </>\n    )\n  }\n\n  // If this is a subsequent render, deal with entering and exiting children\n  childrenToRender = [...childrenToRender]\n\n  // Diff the keys of the currently-present and target children to update our\n  // exiting list.\n  const presentKeys = presentChildren.current.map(getChildKey)\n  const targetKeys = filteredChildren.map(getChildKey)\n\n  // Diff the present children with our target children and mark those that are exiting\n  const numPresent = presentKeys.length\n  for (let i = 0; i < numPresent; i++) {\n    const key = presentKeys[i]\n\n    if (targetKeys.indexOf(key) === -1) {\n      exiting.add(key)\n    }\n  }\n\n  // If we currently have exiting children, and we're deferring rendering incoming children\n  // until after all current children have exiting, empty the childrenToRender array\n  if (exitBeforeEnter && exiting.size) {\n    childrenToRender = []\n  }\n\n  // Loop through all currently exiting components and clone them to overwrite `animate`\n  // with any `exit` prop they might have defined.\n  exiting.forEach((key) => {\n    // If this component is actually entering again, early return\n    if (targetKeys.indexOf(key) !== -1) return\n\n    const child = allChildren.get(key)\n    if (!child) return\n\n    const insertionIndex = presentKeys.indexOf(key)\n\n    childrenToRender.splice(\n      insertionIndex,\n      0,\n      <PresenceChild\n        key={getChildKey(child)}\n        isEntering={false}\n        onExitComplete={() => {\n          allChildren.delete(key)\n          exiting.delete(key)\n\n          // Remove this child from the present children\n          const removeIndex = presentChildren.current.findIndex(\n            (presentChild) => presentChild.key === key\n          )\n          presentChildren.current.splice(removeIndex, 1)\n\n          // Defer re-rendering until all exiting children have indeed left\n          if (!exiting.size) {\n            presentChildren.current = filteredChildren\n\n            if (isMounted === false) return\n\n            forceRender()\n            onExitComplete?.()\n          }\n        }}\n        exitVariant={exitVariant}\n        enterVariant={enterVariant}\n        presenceAffectsLayout={presenceAffectsLayout}\n      >\n        {child}\n      </PresenceChild>\n    )\n  })\n\n  // Add `MotionContext` even to children that don't need it to ensure we're rendering\n  // the same tree between renders\n  childrenToRender = childrenToRender.map((child) => {\n    const key = child.key as string | number\n    return exiting.has(key) ? (\n      child\n    ) : (\n      <PresenceChild\n        key={getChildKey(child)}\n        isEntering={undefined}\n        exitVariant={exitVariant}\n        enterVariant={enterVariant}\n        presenceAffectsLayout={presenceAffectsLayout}\n      >\n        {child}\n      </PresenceChild>\n    )\n  })\n\n  if (process.env.NODE_ENV !== 'production' && exitBeforeEnter && childrenToRender.length > 1) {\n    console.warn(\n      `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`\n    )\n  }\n\n  return (\n    <>{exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child))}</>\n  )\n}\n\n// import { useForceUpdate, useIsomorphicLayoutEffect, useUnmountEffect } from '@tamagui/core'\n// import React, {\n//   Children,\n//   ReactElement,\n//   ReactNode,\n//   cloneElement,\n//   isValidElement,\n//   useContext,\n//   useEffect,\n//   useRef,\n//   useState,\n// } from 'react'\n\n// import { LayoutGroupContext } from './LayoutGroupContext'\n// import { PresenceChild } from './PresenceChild'\n\n// React['keep']\n\n// export interface AnimatePresenceProps {\n//   /**\n//    * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children\n//    * that are present when the component is first rendered.\n//    */\n//   initial?: boolean\n\n//   /**\n//    * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`\n//    * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.\n//    * This will ensure all leaving components animate using the latest data.\n//    */\n//   exitVariant?: string | null\n\n//   enterVariant?: string | null\n\n//   /**\n//    * Fires when all exiting nodes have completed animating out.\n//    */\n//   onExitComplete?: () => void\n\n//   /**\n//    * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component\n//    * will finish its exit animation before the entering component is rendered.\n//    */\n//   exitBeforeEnter?: boolean\n\n//   /**\n//    * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a\n//    * child being removed.\n//    */\n//   presenceAffectsLayout?: boolean\n// }\n\n// type ComponentKey = string | number\n\n// const getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\n// const isDev = process.env.NODE_ENV !== 'production'\n\n// function updateChildLookup(\n//   children: ReactElement<any>[],\n//   allChildren: Map<ComponentKey, ReactElement<any>>\n// ) {\n//   const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n//   for (const child of children) {\n//     const key = getChildKey(child)\n//     if (isDev && seenChildren && seenChildren.has(key)) {\n//       console.warn(`Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`)\n//       seenChildren.add(key)\n//     }\n//     allChildren.set(key, child)\n//   }\n// }\n\n// function onlyElements(children: ReactNode): ReactElement<any>[] {\n//   const filtered: ReactElement<any>[] = []\n\n//   // We use forEach here instead of map as map mutates the component key by preprending `.$`\n//   Children.forEach(children, (child) => {\n//     if (isValidElement(child)) filtered.push(child)\n//   })\n\n//   return filtered\n// }\n\n// /**\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//  * Any animated components that have an `exit` property defined will animate out when removed from\n//  * the tree.\n//  *\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 animated components with `exit` props, it will only unmount the child\n//  * once all animated components have finished animating out. Likewise, any components using\n//  * `useEntering` all need to call `safeToRemove`.\n//  *\n//  * @public\n//  */\n// export const AnimatePresence: React.FunctionComponent<AnimatePresenceProps> = ({\n//   children,\n//   exitVariant,\n//   enterVariant,\n//   initial = true,\n//   onExitComplete,\n//   exitBeforeEnter,\n//   presenceAffectsLayout = true,\n// }) => {\n//   // We want to force a re-render once all exiting animations have finished. We\n//   // either use a local forceRender function, or one from a parent context if it exists.\n//   let forceRender = useForceUpdate()\n//   const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n//   if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n//   const [isMounted, setIsMounted] = useState(false)\n//   useEffect(() => {\n//     setIsMounted(true)\n//   }, [])\n\n//   // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n//   const filteredChildren = onlyElements(children)\n//   let childrenToRender = filteredChildren\n\n//   const exiting = new Set<ComponentKey>()\n\n//   // Keep a living record of the children we're actually rendering so we\n//   // can diff to figure out which are entering and exiting\n//   const presentChildren = useRef(childrenToRender)\n\n//   // A lookup table to quickly reference components by key\n//   const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n//   // If this is the initial component render, just deal with logic surrounding whether\n//   // we play onMount animations or not.\n//   const isInitialRender = useRef(true)\n\n//   useIsomorphicLayoutEffect(() => {\n//     isInitialRender.current = false\n//     updateChildLookup(filteredChildren, allChildren)\n//     presentChildren.current = childrenToRender\n//   })\n\n//   useUnmountEffect(() => {\n//     isInitialRender.current = true\n//     allChildren.clear()\n//     exiting.clear()\n//   })\n\n//   if (isInitialRender.current) {\n//     console.log('AnimatePresence (iniital)', isInitialRender.current, {\n//       isMounted,\n//       childrenToRender,\n//     })\n//     return (\n//       <>\n//         {childrenToRender.map((child) => (\n//           <PresenceChild\n//             key={getChildKey(child)}\n//             isEntering\n//             initial={initial ? undefined : false}\n//             presenceAffectsLayout={presenceAffectsLayout}\n//             exitVariant={exitVariant}\n//             enterVariant={enterVariant}\n//           >\n//             {child}\n//           </PresenceChild>\n//         ))}\n//       </>\n//     )\n//   }\n\n//   // If this is a subsequent render, deal with entering and exiting children\n//   childrenToRender = [...childrenToRender]\n\n//   // Diff the keys of the currently-present and target children to update our\n//   // exiting list.\n//   const presentKeys = presentChildren.current.map(getChildKey)\n//   const targetKeys = filteredChildren.map(getChildKey)\n\n//   // Diff the present children with our target children and mark those that are exiting\n//   const numPresent = presentKeys.length\n//   for (let i = 0; i < numPresent; i++) {\n//     const key = presentKeys[i]\n//     if (targetKeys.indexOf(key) === -1) {\n//       exiting.add(key)\n//     }\n//   }\n\n//   // If we currently have exiting children, and we're deferring rendering incoming children\n//   // until after all current children have exiting, empty the childrenToRender array\n//   if (exitBeforeEnter && exiting.size) {\n//     childrenToRender = []\n//   }\n\n//   // Loop through all currently exiting components and clone them to overwrite `animate`\n//   // with any `exit` prop they might have defined.\n//   for (const key of exiting) {\n//     // If this component is actually entering again, early return\n//     if (targetKeys.indexOf(key) !== -1) {\n//       continue\n//     }\n\n//     const child = allChildren.get(key)\n//     if (!child) {\n//       continue\n//     }\n\n//     const insertionIndex = presentKeys.indexOf(key)\n\n//     const onExit = () => {\n//       allChildren.delete(key)\n//       exiting.delete(key)\n\n//       // Remove this child from the present children\n//       const removeIndex = presentChildren.current.findIndex(\n//         (presentChild) => presentChild.key === key\n//       )\n//       presentChildren.current.splice(removeIndex, 1)\n\n//       // Defer re-rendering until all exiting children have indeed left\n//       if (!exiting.size) {\n//         presentChildren.current = filteredChildren\n//         if (isMounted === false) {\n//           return\n//         }\n//         forceRender()\n//         onExitComplete?.()\n//       }\n//     }\n\n//     childrenToRender.splice(\n//       insertionIndex,\n//       0,\n//       <PresenceChild\n//         key={getChildKey(child)}\n//         isEntering={false}\n//         onExitComplete={onExit}\n//         exitVariant={exitVariant}\n//         enterVariant={enterVariant}\n//         presenceAffectsLayout={presenceAffectsLayout}\n//       >\n//         {child}\n//       </PresenceChild>\n//     )\n//   }\n\n//   // Add `MotionContext` even to children that don't need it to ensure we're rendering\n//   // the same tree between renders\n//   childrenToRender = childrenToRender.map((child) => {\n//     const key = child.key as string | number\n//     return exiting.has(key) ? (\n//       child\n//     ) : (\n//       <PresenceChild\n//         key={getChildKey(child)}\n//         isEntering={undefined}\n//         exitVariant={exitVariant}\n//         enterVariant={enterVariant}\n//         presenceAffectsLayout={presenceAffectsLayout}\n//       >\n//         {child}\n//       </PresenceChild>\n//     )\n//   })\n\n//   console.log(\n//     'AnimatePresence ()',\n//     isInitialRender.current,\n//     {\n//       isMounted,\n//     },\n//     childrenToRender.map((x) => x.props.children.props.children.props.src)\n//   )\n\n//   if (process.env.NODE_ENV !== 'production' && exitBeforeEnter && childrenToRender.length > 1) {\n//     console.warn(\n//       `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`\n//     )\n//   }\n\n//   return (\n//     <>{exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child))}</>\n//   )\n// }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/AnimatePresenceContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimatePresenceContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface AnimatePresenceContextProps {\n  id: string\n  isPresent: boolean\n  register: (id: string) => () => void\n  onExitComplete?: (id: string) => void\n  initial?: false | VariantLabels\n  custom?: any\n}\n\nexport const AnimatePresenceContext = createContext<AnimatePresenceContextProps | null>(null)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAavB,MAAM,yBAAyB,gCAAkD,IAAI;",
+  "sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface AnimatePresenceContextProps {\n  id: string\n  isEntering: boolean | undefined\n  register: (id: string) => () => void\n  onExitComplete?: (id: string) => void\n  initial?: false | VariantLabels\n  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\nexport const AnimatePresenceContext = createContext<AnimatePresenceContextProps | null>(null)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAcvB,MAAM,yBAAyB,gCAAkD,IAAI;",
   "names": []
 }

package/dist/cjs/PresenceChild.js

@@ -31,41 +31,45 @@ var import_AnimatePresenceContext = require("./AnimatePresenceContext");
 const PresenceChild = /* @__PURE__ */ __name(({
   children,
   initial,
-  isPresent,
+  isEntering,
   onExitComplete,
-  custom,
+  exitVariant,
+  enterVariant,
   presenceAffectsLayout
 }) => {
   const presenceChildren = (0, import_core.useConstant)(newChildrenMap);
   const id = (0, import_utils.useId)();
-  const context = React.useMemo(() => ({
-    id,
-    initial,
-    isPresent,
-    custom,
-    onExitComplete: (childId) => {
-      presenceChildren.set(childId, true);
-      for (const isComplete of presenceChildren.values()) {
-        if (!isComplete) {
-          return;
+  const context = React.useMemo(() => {
+    return {
+      id,
+      initial,
+      isEntering,
+      exitVariant,
+      enterVariant,
+      onExitComplete: (childId) => {
+        console.log("on exist complete", childId);
+        presenceChildren.set(childId, true);
+        for (const isComplete of presenceChildren.values()) {
+          if (!isComplete) {
+            return;
+          }
         }
+        onExitComplete == null ? void 0 : onExitComplete();
+      },
+      register: (childId) => {
+        presenceChildren.set(childId, false);
+        return () => presenceChildren.delete(childId);
       }
-      onExitComplete == null ? void 0 : onExitComplete();
-    },
-    register: (childId) => {
-      presenceChildren.set(childId, false);
-      return () => presenceChildren.delete(childId);
-    }
-  }), presenceAffectsLayout ? void 0 : [isPresent]);
+    };
+  }, presenceAffectsLayout ? void 0 : [isEntering, onExitComplete, exitVariant, enterVariant]);
   React.useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
-  }, [isPresent]);
+  }, [isEntering]);
   React.useEffect(() => {
-    if (!isPresent && !presenceChildren.size) {
-      console.log("on exit complete");
+    if (isEntering === false && !presenceChildren.size) {
       onExitComplete == null ? void 0 : onExitComplete();
     }
-  }, [isPresent]);
+  }, [isEntering]);
   return /* @__PURE__ */ React.createElement(import_AnimatePresenceContext.AnimatePresenceContext.Provider, {
     value: context
   }, children);

package/dist/cjs/PresenceChild.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PresenceChild.tsx"],
-  "sourcesContent": ["import { useId } from '@react-aria/utils'\nimport { useConstant } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { AnimatePresenceContext, AnimatePresenceContextProps } from './AnimatePresenceContext'\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n  children: React.ReactElement<any>\n  isPresent: boolean\n  onExitComplete?: () => void\n  initial?: false | VariantLabels\n  custom?: any\n  presenceAffectsLayout: boolean\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isPresent,\n  onExitComplete,\n  custom,\n  presenceAffectsLayout,\n}: PresenceChildProps) => {\n  const presenceChildren = useConstant(newChildrenMap)\n  const id = useId()\n\n  const context = React.useMemo(\n    (): AnimatePresenceContextProps => ({\n      id,\n      initial,\n      isPresent,\n      custom,\n      onExitComplete: (childId: string) => {\n        presenceChildren.set(childId, true)\n        for (const isComplete of presenceChildren.values()) {\n          if (!isComplete) {\n            return // can stop searching when any is incomplete\n          }\n        }\n        onExitComplete?.()\n      },\n      register: (childId: string) => {\n        presenceChildren.set(childId, false)\n        return () => presenceChildren.delete(childId)\n      },\n    }),\n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout ? undefined : [isPresent]\n  )\n\n  // cant this be a useEffect?\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n  }, [isPresent])\n\n  /**\n   * If there's no animated components to fire exit animations, we want to remove this\n   * component immediately.\n   */\n  React.useEffect(() => {\n    if (!isPresent && !presenceChildren.size) {\n      console.log('on exit complete')\n      onExitComplete?.()\n    }\n  }, [isPresent])\n\n  return (\n    <AnimatePresenceContext.Provider value={context}>{children}</AnimatePresenceContext.Provider>\n  )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,kBAA4B;AAC5B,YAAuB;AAEvB,oCAAoE;AAY7D,MAAM,gBAAgB,wBAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,mBAAmB,6BAAY,cAAc;AACnD,QAAM,KAAK,wBAAM;AAEjB,QAAM,UAAU,MAAM,QACpB,MAAoC;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,CAAC,YAAoB;AACnC,uBAAiB,IAAI,SAAS,IAAI;AAClC,iBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,YAAI,CAAC,YAAY;AACf;AAAA,QACF;AAAA,MACF;AACA;AAAA,IACF;AAAA,IACA,UAAU,CAAC,YAAoB;AAC7B,uBAAiB,IAAI,SAAS,KAAK;AACnC,aAAO,MAAM,iBAAiB,OAAO,OAAO;AAAA,IAC9C;AAAA,EACF,IAMA,wBAAwB,SAAY,CAAC,SAAS,CAChD;AAGA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EACvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,aAAa,CAAC,iBAAiB,MAAM;AACxC,cAAQ,IAAI,kBAAkB;AAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,oCAAC,qDAAuB,UAAvB;AAAA,IAAgC,OAAO;AAAA,KAAU,QAAS;AAE/D,GA1D6B;AA4D7B,0BAAgD;AAC9C,SAAO,oBAAI,IAAI;AACjB;AAFS;",
+  "sourcesContent": ["import { useId } from '@react-aria/utils'\nimport { useConstant } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { AnimatePresenceContext, AnimatePresenceContextProps } from './AnimatePresenceContext'\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n  children: React.ReactElement<any>\n  isEntering: boolean | undefined\n  onExitComplete?: () => void\n  initial?: false | VariantLabels\n  exitVariant?: string | null\n  enterVariant?: string | null\n  presenceAffectsLayout: boolean\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isEntering,\n  onExitComplete,\n  exitVariant,\n  enterVariant,\n  presenceAffectsLayout,\n}: PresenceChildProps) => {\n  const presenceChildren = useConstant(newChildrenMap)\n  const id = useId()\n\n  const context = React.useMemo(\n    (): AnimatePresenceContextProps => {\n      return {\n        id,\n        initial,\n        isEntering,\n        exitVariant,\n        enterVariant,\n        onExitComplete: (childId: string) => {\n          console.log('on exist complete', childId)\n          presenceChildren.set(childId, true)\n          for (const isComplete of presenceChildren.values()) {\n            if (!isComplete) {\n              return // can stop searching when any is incomplete\n            }\n          }\n          onExitComplete?.()\n        },\n        register: (childId: string) => {\n          presenceChildren.set(childId, false)\n          return () => presenceChildren.delete(childId)\n        },\n      }\n    },\n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout ? undefined : [isEntering, onExitComplete, exitVariant, enterVariant]\n  )\n\n  // cant this be a useEffect?\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n  }, [isEntering])\n\n  /**\n   * If there's no animated components to fire exit animations, we want to remove this\n   * component immediately.\n   */\n  React.useEffect(() => {\n    if (isEntering === false && !presenceChildren.size) {\n      onExitComplete?.()\n    }\n  }, [isEntering])\n\n  return (\n    <AnimatePresenceContext.Provider value={context}>{children}</AnimatePresenceContext.Provider>\n  )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,kBAA4B;AAC5B,YAAuB;AAEvB,oCAAoE;AAa7D,MAAM,gBAAgB,wBAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,mBAAmB,6BAAY,cAAc;AACnD,QAAM,KAAK,wBAAM;AAEjB,QAAM,UAAU,MAAM,QACpB,MAAmC;AACjC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC,YAAoB;AACnC,gBAAQ,IAAI,qBAAqB,OAAO;AACxC,yBAAiB,IAAI,SAAS,IAAI;AAClC,mBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AAAA,QACF;AACA;AAAA,MACF;AAAA,MACA,UAAU,CAAC,YAAoB;AAC7B,yBAAiB,IAAI,SAAS,KAAK;AACnC,eAAO,MAAM,iBAAiB,OAAO,OAAO;AAAA,MAC9C;AAAA,IACF;AAAA,EACF,GAMA,wBAAwB,SAAY,CAAC,YAAY,gBAAgB,aAAa,YAAY,CAC5F;AAGA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EACvE,GAAG,CAAC,UAAU,CAAC;AAMf,QAAM,UAAU,MAAM;AACpB,QAAI,eAAe,SAAS,CAAC,iBAAiB,MAAM;AAClD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,oCAAC,qDAAuB,UAAvB;AAAA,IAAgC,OAAO;AAAA,KAAU,QAAS;AAE/D,GA9D6B;AAgE7B,0BAAgD;AAC9C,SAAO,oBAAI,IAAI;AACjB;AAFS;",
   "names": []
 }

package/dist/cjs/index.js

@@ -22,6 +22,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./AnimatePresence"), module.exports);
-__reExport(src_exports, require("./usePresence"), module.exports);
+__reExport(src_exports, require("./useEntering"), module.exports);
 var import_AnimatePresenceContext = require("./AnimatePresenceContext");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './AnimatePresence'\nexport * from './usePresence'\nexport { AnimatePresenceContext } from './AnimatePresenceContext'\n"],
+  "sourcesContent": ["export * from './AnimatePresence'\nexport * from './useEntering'\nexport { AnimatePresenceContext } from './AnimatePresenceContext'\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,8BAAd;AACA,wBAAc,0BADd;AAEA,oCAAuC;",
   "names": []
 }

package/dist/esm/AnimatePresence.js

@@ -1,33 +1,30 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import {
-  useForceUpdate,
-  useIsMounted,
-  useIsomorphicLayoutEffect,
-  useUnmountEffect
-} from "@tamagui/core";
-import * as React from "react";
-import {
+import { useForceUpdate, useIsomorphicLayoutEffect, useUnmountEffect } from "@tamagui/core";
+import React, {
   Children,
   cloneElement,
   isValidElement,
   useContext,
-  useRef
+  useEffect,
+  useRef,
+  useState
 } from "react";
 import { LayoutGroupContext } from "./LayoutGroupContext";
 import { PresenceChild } from "./PresenceChild";
+React["keep"];
 const getChildKey = /* @__PURE__ */ __name((child) => child.key || "", "getChildKey");
 const isDev = process.env.NODE_ENV !== "production";
 function updateChildLookup(children, allChildren) {
   const seenChildren = isDev ? /* @__PURE__ */ new Set() : null;
-  for (const child of children) {
+  children.forEach((child) => {
     const key = getChildKey(child);
     if (isDev && seenChildren && seenChildren.has(key)) {
       console.warn(`Children of AnimatePresence require unique keys. "${key}" is a duplicate.`);
       seenChildren.add(key);
     }
     allChildren.set(key, child);
-  }
+  });
 }
 __name(updateChildLookup, "updateChildLookup");
 function onlyElements(children) {
@@ -41,7 +38,8 @@ function onlyElements(children) {
 __name(onlyElements, "onlyElements");
 const AnimatePresence = /* @__PURE__ */ __name(({
   children,
-  custom,
+  enterVariant,
+  exitVariant,
   initial = true,
   onExitComplete,
   exitBeforeEnter,
@@ -51,7 +49,10 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
-  const isMounted = useIsMounted();
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
   const filteredChildren = onlyElements(children);
   let childrenToRender = filteredChildren;
   const exiting = /* @__PURE__ */ new Set();
@@ -71,7 +72,9 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   if (isInitialRender.current) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, childrenToRender.map((child) => /* @__PURE__ */ React.createElement(PresenceChild, {
       key: getChildKey(child),
-      isPresent: true,
+      isEntering: true,
+      exitVariant,
+      enterVariant,
       initial: initial ? void 0 : false,
       presenceAffectsLayout
     }, child)));
@@ -89,42 +92,41 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   if (exitBeforeEnter && exiting.size) {
     childrenToRender = [];
   }
-  for (const key of exiting) {
-    if (targetKeys.indexOf(key) !== -1) {
-      continue;
-    }
+  exiting.forEach((key) => {
+    if (targetKeys.indexOf(key) !== -1)
+      return;
     const child = allChildren.get(key);
-    if (!child) {
-      continue;
-    }
+    if (!child)
+      return;
     const insertionIndex = presentKeys.indexOf(key);
-    const onExit = /* @__PURE__ */ __name(() => {
-      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;
-        if (isMounted.current === false) {
-          return;
-        }
-        forceRender();
-        onExitComplete == null ? void 0 : onExitComplete();
-      }
-    }, "onExit");
     childrenToRender.splice(insertionIndex, 0, /* @__PURE__ */ React.createElement(PresenceChild, {
       key: getChildKey(child),
-      isPresent: false,
-      onExitComplete: onExit,
-      custom,
+      isEntering: false,
+      onExitComplete: () => {
+        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;
+          if (isMounted === false)
+            return;
+          forceRender();
+          onExitComplete == null ? void 0 : onExitComplete();
+        }
+      },
+      exitVariant,
+      enterVariant,
       presenceAffectsLayout
     }, child));
-  }
+  });
   childrenToRender = childrenToRender.map((child) => {
     const key = child.key;
     return exiting.has(key) ? child : /* @__PURE__ */ React.createElement(PresenceChild, {
       key: getChildKey(child),
-      isPresent: true,
+      isEntering: void 0,
+      exitVariant,
+      enterVariant,
       presenceAffectsLayout
     }, child);
   });

package/dist/esm/AnimatePresence.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimatePresence.tsx"],
-  "sourcesContent": ["import {\n  useForceUpdate,\n  useIsMounted,\n  useIsomorphicLayoutEffect,\n  useUnmountEffect,\n} from '@tamagui/core'\nimport * as React from 'react'\nimport {\n  Children,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  useRef,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\n\nexport interface AnimatePresenceProps {\n  /**\n   * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children\n   * that are present when the component is first rendered.\n   */\n  initial?: boolean\n\n  /**\n   * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`\n   * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.\n   * This will ensure all leaving components animate using the latest data.\n   */\n  custom?: any\n\n  /**\n   * Fires when all exiting nodes have completed animating out.\n   */\n  onExitComplete?: () => void\n\n  /**\n   * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component\n   * will finish its exit animation before the entering component is rendered.\n   */\n  exitBeforeEnter?: boolean\n\n  /**\n   * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a\n   * child being removed.\n   */\n  presenceAffectsLayout?: boolean\n}\n\ntype ComponentKey = string | number\n\nconst getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\nconst isDev = process.env.NODE_ENV !== 'production'\n\nfunction updateChildLookup(\n  children: ReactElement<any>[],\n  allChildren: Map<ComponentKey, ReactElement<any>>\n) {\n  const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n  for (const child of children) {\n    const key = getChildKey(child)\n    if (isDev && seenChildren && seenChildren.has(key)) {\n      console.warn(`Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`)\n      seenChildren.add(key)\n    }\n    allChildren.set(key, child)\n  }\n}\n\nfunction onlyElements(children: ReactNode): ReactElement<any>[] {\n  const filtered: ReactElement<any>[] = []\n\n  // We use forEach here instead of map as map mutates the component key by preprending `.$`\n  Children.forEach(children, (child) => {\n    if (isValidElement(child)) filtered.push(child)\n  })\n\n  return filtered\n}\n\n/**\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 * Any animated components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\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 animated components with `exit` props, it will only unmount the child\n * once all animated components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nexport const AnimatePresence: React.FunctionComponent<AnimatePresenceProps> = ({\n  children,\n  custom,\n  initial = true,\n  onExitComplete,\n  exitBeforeEnter,\n  presenceAffectsLayout = true,\n}) => {\n  // We want to force a re-render once all exiting animations have finished. We\n  // either use a local forceRender function, or one from a parent context if it exists.\n  let forceRender = useForceUpdate()\n  const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n  if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n  const isMounted = useIsMounted()\n\n  // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n  const filteredChildren = onlyElements(children)\n  let childrenToRender = filteredChildren\n\n  const exiting = new Set<ComponentKey>()\n\n  // Keep a living record of the children we're actually rendering so we\n  // can diff to figure out which are entering and exiting\n  const presentChildren = useRef(childrenToRender)\n\n  // A lookup table to quickly reference components by key\n  const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n  // If this is the initial component render, just deal with logic surrounding whether\n  // we play onMount animations or not.\n  const isInitialRender = useRef(true)\n\n  useIsomorphicLayoutEffect(() => {\n    isInitialRender.current = false\n    updateChildLookup(filteredChildren, allChildren)\n    presentChildren.current = childrenToRender\n  })\n\n  useUnmountEffect(() => {\n    isInitialRender.current = true\n    allChildren.clear()\n    exiting.clear()\n  })\n\n  if (isInitialRender.current) {\n    return (\n      <>\n        {childrenToRender.map((child) => (\n          <PresenceChild\n            key={getChildKey(child)}\n            isPresent\n            initial={initial ? undefined : false}\n            presenceAffectsLayout={presenceAffectsLayout}\n          >\n            {child}\n          </PresenceChild>\n        ))}\n      </>\n    )\n  }\n\n  // If this is a subsequent render, deal with entering and exiting children\n  childrenToRender = [...childrenToRender]\n\n  // Diff the keys of the currently-present and target children to update our\n  // exiting list.\n  const presentKeys = presentChildren.current.map(getChildKey)\n  const targetKeys = filteredChildren.map(getChildKey)\n\n  // Diff the present children with our target children and mark those that are exiting\n  const numPresent = presentKeys.length\n  for (let i = 0; i < numPresent; i++) {\n    const key = presentKeys[i]\n    if (targetKeys.indexOf(key) === -1) {\n      exiting.add(key)\n    }\n  }\n\n  // If we currently have exiting children, and we're deferring rendering incoming children\n  // until after all current children have exiting, empty the childrenToRender array\n  if (exitBeforeEnter && exiting.size) {\n    childrenToRender = []\n  }\n\n  // Loop through all currently exiting components and clone them to overwrite `animate`\n  // with any `exit` prop they might have defined.\n  for (const key of exiting) {\n    // If this component is actually entering again, early return\n    if (targetKeys.indexOf(key) !== -1) {\n      continue\n    }\n\n    const child = allChildren.get(key)\n    if (!child) {\n      continue\n    }\n\n    const insertionIndex = presentKeys.indexOf(key)\n\n    const onExit = () => {\n      allChildren.delete(key)\n      exiting.delete(key)\n\n      // Remove this child from the present children\n      const removeIndex = presentChildren.current.findIndex(\n        (presentChild) => presentChild.key === key\n      )\n      presentChildren.current.splice(removeIndex, 1)\n\n      // Defer re-rendering until all exiting children have indeed left\n      if (!exiting.size) {\n        presentChildren.current = filteredChildren\n        if (isMounted.current === false) {\n          return\n        }\n        forceRender()\n        onExitComplete?.()\n      }\n    }\n\n    childrenToRender.splice(\n      insertionIndex,\n      0,\n      <PresenceChild\n        key={getChildKey(child)}\n        isPresent={false}\n        onExitComplete={onExit}\n        custom={custom}\n        presenceAffectsLayout={presenceAffectsLayout}\n      >\n        {child}\n      </PresenceChild>\n    )\n  }\n\n  // Add `MotionContext` even to children that don't need it to ensure we're rendering\n  // the same tree between renders\n  childrenToRender = childrenToRender.map((child) => {\n    const key = child.key as string | number\n    return exiting.has(key) ? (\n      child\n    ) : (\n      <PresenceChild\n        key={getChildKey(child)}\n        isPresent\n        presenceAffectsLayout={presenceAffectsLayout}\n      >\n        {child}\n      </PresenceChild>\n    )\n  })\n\n  if (process.env.NODE_ENV !== 'production' && exitBeforeEnter && childrenToRender.length > 1) {\n    console.warn(\n      `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`\n    )\n  }\n\n  return (\n    <>{exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child))}</>\n  )\n}\n"],
-  "mappings": ";;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AAoCA,MAAM,cAAc,wBAAC,UAA2C,MAAM,OAAO,IAAzD;AACpB,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,2BACE,UACA,aACA;AACA,QAAM,eAAe,QAAQ,oBAAI,IAAkB,IAAI;AAEvD,aAAW,SAAS,UAAU;AAC5B,UAAM,MAAM,YAAY,KAAK;AAC7B,QAAI,SAAS,gBAAgB,aAAa,IAAI,GAAG,GAAG;AAClD,cAAQ,KAAK,qDAAqD,sBAAsB;AACxF,mBAAa,IAAI,GAAG;AAAA,IACtB;AACA,gBAAY,IAAI,KAAK,KAAK;AAAA,EAC5B;AACF;AAdS;AAgBT,sBAAsB,UAA0C;AAC9D,QAAM,WAAgC,CAAC;AAGvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,eAAe,KAAK;AAAG,eAAS,KAAK,KAAK;AAAA,EAChD,CAAC;AAED,SAAO;AACT;AATS;AA4CF,MAAM,kBAAiE,wBAAC;AAAA,EAC7E;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,MACpB;AAGJ,MAAI,cAAc,eAAe;AACjC,QAAM,yBAAyB,WAAW,kBAAkB,EAAE;AAC9D,MAAI;AAAwB,kBAAc;AAE1C,QAAM,YAAY,aAAa;AAG/B,QAAM,mBAAmB,aAAa,QAAQ;AAC9C,MAAI,mBAAmB;AAEvB,QAAM,UAAU,oBAAI,IAAkB;AAItC,QAAM,kBAAkB,OAAO,gBAAgB;AAG/C,QAAM,cAAc,OAAO,oBAAI,IAAqC,CAAC,EAAE;AAIvE,QAAM,kBAAkB,OAAO,IAAI;AAEnC,4BAA0B,MAAM;AAC9B,oBAAgB,UAAU;AAC1B,sBAAkB,kBAAkB,WAAW;AAC/C,oBAAgB,UAAU;AAAA,EAC5B,CAAC;AAED,mBAAiB,MAAM;AACrB,oBAAgB,UAAU;AAC1B,gBAAY,MAAM;AAClB,YAAQ,MAAM;AAAA,EAChB,CAAC;AAED,MAAI,gBAAgB,SAAS;AAC3B,WACE,0DACG,iBAAiB,IAAI,CAAC,UACrB,oCAAC;AAAA,MACC,KAAK,YAAY,KAAK;AAAA,MACtB,WAAS;AAAA,MACT,SAAS,UAAU,SAAY;AAAA,MAC/B;AAAA,OAEC,KACH,CACD,CACH;AAAA,EAEJ;AAGA,qBAAmB,CAAC,GAAG,gBAAgB;AAIvC,QAAM,cAAc,gBAAgB,QAAQ,IAAI,WAAW;AAC3D,QAAM,aAAa,iBAAiB,IAAI,WAAW;AAGnD,QAAM,aAAa,YAAY;AAC/B,WAAS,IAAI,GAAG,IAAI,YAAY,KAAK;AACnC,UAAM,MAAM,YAAY;AACxB,QAAI,WAAW,QAAQ,GAAG,MAAM,IAAI;AAClC,cAAQ,IAAI,GAAG;AAAA,IACjB;AAAA,EACF;AAIA,MAAI,mBAAmB,QAAQ,MAAM;AACnC,uBAAmB,CAAC;AAAA,EACtB;AAIA,aAAW,OAAO,SAAS;AAEzB,QAAI,WAAW,QAAQ,GAAG,MAAM,IAAI;AAClC;AAAA,IACF;AAEA,UAAM,QAAQ,YAAY,IAAI,GAAG;AACjC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,UAAM,iBAAiB,YAAY,QAAQ,GAAG;AAE9C,UAAM,SAAS,6BAAM;AACnB,kBAAY,OAAO,GAAG;AACtB,cAAQ,OAAO,GAAG;AAGlB,YAAM,cAAc,gBAAgB,QAAQ,UAC1C,CAAC,iBAAiB,aAAa,QAAQ,GACzC;AACA,sBAAgB,QAAQ,OAAO,aAAa,CAAC;AAG7C,UAAI,CAAC,QAAQ,MAAM;AACjB,wBAAgB,UAAU;AAC1B,YAAI,UAAU,YAAY,OAAO;AAC/B;AAAA,QACF;AACA,oBAAY;AACZ;AAAA,MACF;AAAA,IACF,GAnBe;AAqBf,qBAAiB,OACf,gBACA,GACA,oCAAC;AAAA,MACC,KAAK,YAAY,KAAK;AAAA,MACtB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,OAEC,KACH,CACF;AAAA,EACF;AAIA,qBAAmB,iBAAiB,IAAI,CAAC,UAAU;AACjD,UAAM,MAAM,MAAM;AAClB,WAAO,QAAQ,IAAI,GAAG,IACpB,QAEA,oCAAC;AAAA,MACC,KAAK,YAAY,KAAK;AAAA,MACtB,WAAS;AAAA,MACT;AAAA,OAEC,KACH;AAAA,EAEJ,CAAC;AAED,MAAI,QAAQ,IAAI,aAAa,gBAAgB,mBAAmB,iBAAiB,SAAS,GAAG;AAC3F,YAAQ,KACN,6JACF;AAAA,EACF;AAEA,SACE,0DAAG,QAAQ,OAAO,mBAAmB,iBAAiB,IAAI,CAAC,UAAU,aAAa,KAAK,CAAC,CAAE;AAE9F,GAlK8E;",
+  "sourcesContent": ["import { useForceUpdate, useIsomorphicLayoutEffect, useUnmountEffect } from '@tamagui/core'\nimport React, {\n  Children,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\n\nReact['keep']\n\nexport interface AnimatePresenceProps {\n  /**\n   * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children\n   * that are present when the component is first rendered.\n   */\n  initial?: boolean\n\n  /**\n   * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`\n   * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.\n   * This will ensure all leaving components animate using the latest data.\n   */\n  exitVariant?: string | null\n\n  enterVariant?: string | null\n\n  /**\n   * Fires when all exiting nodes have completed animating out.\n   */\n  onExitComplete?: () => void\n\n  /**\n   * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component\n   * will finish its exit animation before the entering component is rendered.\n   */\n  exitBeforeEnter?: boolean\n\n  /**\n   * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a\n   * child being removed.\n   */\n  presenceAffectsLayout?: boolean\n}\n\ntype ComponentKey = string | number\n\nconst getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\nfunction updateChildLookup(\n  children: ReactElement<any>[],\n  allChildren: Map<ComponentKey, ReactElement<any>>\n) {\n  const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n  children.forEach((child) => {\n    const key = getChildKey(child)\n\n    if (isDev && seenChildren && seenChildren.has(key)) {\n      console.warn(`Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`)\n\n      seenChildren.add(key)\n    }\n\n    allChildren.set(key, child)\n  })\n}\n\nfunction onlyElements(children: ReactNode): ReactElement<any>[] {\n  const filtered: ReactElement<any>[] = []\n\n  // We use forEach here instead of map as map mutates the component key by preprending `.$`\n  Children.forEach(children, (child) => {\n    if (isValidElement(child)) filtered.push(child)\n  })\n\n  return filtered\n}\n\n/**\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 * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\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\n * once all `motion` components have finished animating out. Likewise, any components using\n * `useEntering` all need to call `safeToRemove`.\n *\n * @public\n */\nexport const AnimatePresence: React.FunctionComponent<\n  React.PropsWithChildren<AnimatePresenceProps>\n> = ({\n  children,\n  enterVariant,\n  exitVariant,\n  initial = true,\n  onExitComplete,\n  exitBeforeEnter,\n  presenceAffectsLayout = true,\n}) => {\n  // We want to force a re-render once all exiting animations have finished. We\n  // either use a local forceRender function, or one from a parent context if it exists.\n  let forceRender = useForceUpdate()\n  const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n  if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n  const [isMounted, setIsMounted] = useState(false)\n  useEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n  const filteredChildren = onlyElements(children)\n  let childrenToRender = filteredChildren\n\n  const exiting = new Set<ComponentKey>()\n\n  // Keep a living record of the children we're actually rendering so we\n  // can diff to figure out which are entering and exiting\n  const presentChildren = useRef(childrenToRender)\n\n  // A lookup table to quickly reference components by key\n  const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n  // If this is the initial component render, just deal with logic surrounding whether\n  // we play onMount animations or not.\n  const isInitialRender = useRef(true)\n\n  useIsomorphicLayoutEffect(() => {\n    isInitialRender.current = false\n    updateChildLookup(filteredChildren, allChildren)\n    presentChildren.current = childrenToRender\n  })\n\n  useUnmountEffect(() => {\n    isInitialRender.current = true\n    allChildren.clear()\n    exiting.clear()\n  })\n\n  if (isInitialRender.current) {\n    return (\n      <>\n        {childrenToRender.map((child) => (\n          <PresenceChild\n            key={getChildKey(child)}\n            isEntering\n            exitVariant={exitVariant}\n            enterVariant={enterVariant}\n            initial={initial ? undefined : false}\n            presenceAffectsLayout={presenceAffectsLayout}\n          >\n            {child}\n          </PresenceChild>\n        ))}\n      </>\n    )\n  }\n\n  // If this is a subsequent render, deal with entering and exiting children\n  childrenToRender = [...childrenToRender]\n\n  // Diff the keys of the currently-present and target children to update our\n  // exiting list.\n  const presentKeys = presentChildren.current.map(getChildKey)\n  const targetKeys = filteredChildren.map(getChildKey)\n\n  // Diff the present children with our target children and mark those that are exiting\n  const numPresent = presentKeys.length\n  for (let i = 0; i < numPresent; i++) {\n    const key = presentKeys[i]\n\n    if (targetKeys.indexOf(key) === -1) {\n      exiting.add(key)\n    }\n  }\n\n  // If we currently have exiting children, and we're deferring rendering incoming children\n  // until after all current children have exiting, empty the childrenToRender array\n  if (exitBeforeEnter && exiting.size) {\n    childrenToRender = []\n  }\n\n  // Loop through all currently exiting components and clone them to overwrite `animate`\n  // with any `exit` prop they might have defined.\n  exiting.forEach((key) => {\n    // If this component is actually entering again, early return\n    if (targetKeys.indexOf(key) !== -1) return\n\n    const child = allChildren.get(key)\n    if (!child) return\n\n    const insertionIndex = presentKeys.indexOf(key)\n\n    childrenToRender.splice(\n      insertionIndex,\n      0,\n      <PresenceChild\n        key={getChildKey(child)}\n        isEntering={false}\n        onExitComplete={() => {\n          allChildren.delete(key)\n          exiting.delete(key)\n\n          // Remove this child from the present children\n          const removeIndex = presentChildren.current.findIndex(\n            (presentChild) => presentChild.key === key\n          )\n          presentChildren.current.splice(removeIndex, 1)\n\n          // Defer re-rendering until all exiting children have indeed left\n          if (!exiting.size) {\n            presentChildren.current = filteredChildren\n\n            if (isMounted === false) return\n\n            forceRender()\n            onExitComplete?.()\n          }\n        }}\n        exitVariant={exitVariant}\n        enterVariant={enterVariant}\n        presenceAffectsLayout={presenceAffectsLayout}\n      >\n        {child}\n      </PresenceChild>\n    )\n  })\n\n  // Add `MotionContext` even to children that don't need it to ensure we're rendering\n  // the same tree between renders\n  childrenToRender = childrenToRender.map((child) => {\n    const key = child.key as string | number\n    return exiting.has(key) ? (\n      child\n    ) : (\n      <PresenceChild\n        key={getChildKey(child)}\n        isEntering={undefined}\n        exitVariant={exitVariant}\n        enterVariant={enterVariant}\n        presenceAffectsLayout={presenceAffectsLayout}\n      >\n        {child}\n      </PresenceChild>\n    )\n  })\n\n  if (process.env.NODE_ENV !== 'production' && exitBeforeEnter && childrenToRender.length > 1) {\n    console.warn(\n      `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`\n    )\n  }\n\n  return (\n    <>{exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child))}</>\n  )\n}\n\n// import { useForceUpdate, useIsomorphicLayoutEffect, useUnmountEffect } from '@tamagui/core'\n// import React, {\n//   Children,\n//   ReactElement,\n//   ReactNode,\n//   cloneElement,\n//   isValidElement,\n//   useContext,\n//   useEffect,\n//   useRef,\n//   useState,\n// } from 'react'\n\n// import { LayoutGroupContext } from './LayoutGroupContext'\n// import { PresenceChild } from './PresenceChild'\n\n// React['keep']\n\n// export interface AnimatePresenceProps {\n//   /**\n//    * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children\n//    * that are present when the component is first rendered.\n//    */\n//   initial?: boolean\n\n//   /**\n//    * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`\n//    * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.\n//    * This will ensure all leaving components animate using the latest data.\n//    */\n//   exitVariant?: string | null\n\n//   enterVariant?: string | null\n\n//   /**\n//    * Fires when all exiting nodes have completed animating out.\n//    */\n//   onExitComplete?: () => void\n\n//   /**\n//    * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component\n//    * will finish its exit animation before the entering component is rendered.\n//    */\n//   exitBeforeEnter?: boolean\n\n//   /**\n//    * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a\n//    * child being removed.\n//    */\n//   presenceAffectsLayout?: boolean\n// }\n\n// type ComponentKey = string | number\n\n// const getChildKey = (child: ReactElement<any>): ComponentKey => child.key || ''\n// const isDev = process.env.NODE_ENV !== 'production'\n\n// function updateChildLookup(\n//   children: ReactElement<any>[],\n//   allChildren: Map<ComponentKey, ReactElement<any>>\n// ) {\n//   const seenChildren = isDev ? new Set<ComponentKey>() : null\n\n//   for (const child of children) {\n//     const key = getChildKey(child)\n//     if (isDev && seenChildren && seenChildren.has(key)) {\n//       console.warn(`Children of AnimatePresence require unique keys. \"${key}\" is a duplicate.`)\n//       seenChildren.add(key)\n//     }\n//     allChildren.set(key, child)\n//   }\n// }\n\n// function onlyElements(children: ReactNode): ReactElement<any>[] {\n//   const filtered: ReactElement<any>[] = []\n\n//   // We use forEach here instead of map as map mutates the component key by preprending `.$`\n//   Children.forEach(children, (child) => {\n//     if (isValidElement(child)) filtered.push(child)\n//   })\n\n//   return filtered\n// }\n\n// /**\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//  * Any animated components that have an `exit` property defined will animate out when removed from\n//  * the tree.\n//  *\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 animated components with `exit` props, it will only unmount the child\n//  * once all animated components have finished animating out. Likewise, any components using\n//  * `useEntering` all need to call `safeToRemove`.\n//  *\n//  * @public\n//  */\n// export const AnimatePresence: React.FunctionComponent<AnimatePresenceProps> = ({\n//   children,\n//   exitVariant,\n//   enterVariant,\n//   initial = true,\n//   onExitComplete,\n//   exitBeforeEnter,\n//   presenceAffectsLayout = true,\n// }) => {\n//   // We want to force a re-render once all exiting animations have finished. We\n//   // either use a local forceRender function, or one from a parent context if it exists.\n//   let forceRender = useForceUpdate()\n//   const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender\n//   if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup\n\n//   const [isMounted, setIsMounted] = useState(false)\n//   useEffect(() => {\n//     setIsMounted(true)\n//   }, [])\n\n//   // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n//   const filteredChildren = onlyElements(children)\n//   let childrenToRender = filteredChildren\n\n//   const exiting = new Set<ComponentKey>()\n\n//   // Keep a living record of the children we're actually rendering so we\n//   // can diff to figure out which are entering and exiting\n//   const presentChildren = useRef(childrenToRender)\n\n//   // A lookup table to quickly reference components by key\n//   const allChildren = useRef(new Map<ComponentKey, ReactElement<any>>()).current\n\n//   // If this is the initial component render, just deal with logic surrounding whether\n//   // we play onMount animations or not.\n//   const isInitialRender = useRef(true)\n\n//   useIsomorphicLayoutEffect(() => {\n//     isInitialRender.current = false\n//     updateChildLookup(filteredChildren, allChildren)\n//     presentChildren.current = childrenToRender\n//   })\n\n//   useUnmountEffect(() => {\n//     isInitialRender.current = true\n//     allChildren.clear()\n//     exiting.clear()\n//   })\n\n//   if (isInitialRender.current) {\n//     console.log('AnimatePresence (iniital)', isInitialRender.current, {\n//       isMounted,\n//       childrenToRender,\n//     })\n//     return (\n//       <>\n//         {childrenToRender.map((child) => (\n//           <PresenceChild\n//             key={getChildKey(child)}\n//             isEntering\n//             initial={initial ? undefined : false}\n//             presenceAffectsLayout={presenceAffectsLayout}\n//             exitVariant={exitVariant}\n//             enterVariant={enterVariant}\n//           >\n//             {child}\n//           </PresenceChild>\n//         ))}\n//       </>\n//     )\n//   }\n\n//   // If this is a subsequent render, deal with entering and exiting children\n//   childrenToRender = [...childrenToRender]\n\n//   // Diff the keys of the currently-present and target children to update our\n//   // exiting list.\n//   const presentKeys = presentChildren.current.map(getChildKey)\n//   const targetKeys = filteredChildren.map(getChildKey)\n\n//   // Diff the present children with our target children and mark those that are exiting\n//   const numPresent = presentKeys.length\n//   for (let i = 0; i < numPresent; i++) {\n//     const key = presentKeys[i]\n//     if (targetKeys.indexOf(key) === -1) {\n//       exiting.add(key)\n//     }\n//   }\n\n//   // If we currently have exiting children, and we're deferring rendering incoming children\n//   // until after all current children have exiting, empty the childrenToRender array\n//   if (exitBeforeEnter && exiting.size) {\n//     childrenToRender = []\n//   }\n\n//   // Loop through all currently exiting components and clone them to overwrite `animate`\n//   // with any `exit` prop they might have defined.\n//   for (const key of exiting) {\n//     // If this component is actually entering again, early return\n//     if (targetKeys.indexOf(key) !== -1) {\n//       continue\n//     }\n\n//     const child = allChildren.get(key)\n//     if (!child) {\n//       continue\n//     }\n\n//     const insertionIndex = presentKeys.indexOf(key)\n\n//     const onExit = () => {\n//       allChildren.delete(key)\n//       exiting.delete(key)\n\n//       // Remove this child from the present children\n//       const removeIndex = presentChildren.current.findIndex(\n//         (presentChild) => presentChild.key === key\n//       )\n//       presentChildren.current.splice(removeIndex, 1)\n\n//       // Defer re-rendering until all exiting children have indeed left\n//       if (!exiting.size) {\n//         presentChildren.current = filteredChildren\n//         if (isMounted === false) {\n//           return\n//         }\n//         forceRender()\n//         onExitComplete?.()\n//       }\n//     }\n\n//     childrenToRender.splice(\n//       insertionIndex,\n//       0,\n//       <PresenceChild\n//         key={getChildKey(child)}\n//         isEntering={false}\n//         onExitComplete={onExit}\n//         exitVariant={exitVariant}\n//         enterVariant={enterVariant}\n//         presenceAffectsLayout={presenceAffectsLayout}\n//       >\n//         {child}\n//       </PresenceChild>\n//     )\n//   }\n\n//   // Add `MotionContext` even to children that don't need it to ensure we're rendering\n//   // the same tree between renders\n//   childrenToRender = childrenToRender.map((child) => {\n//     const key = child.key as string | number\n//     return exiting.has(key) ? (\n//       child\n//     ) : (\n//       <PresenceChild\n//         key={getChildKey(child)}\n//         isEntering={undefined}\n//         exitVariant={exitVariant}\n//         enterVariant={enterVariant}\n//         presenceAffectsLayout={presenceAffectsLayout}\n//       >\n//         {child}\n//       </PresenceChild>\n//     )\n//   })\n\n//   console.log(\n//     'AnimatePresence ()',\n//     isInitialRender.current,\n//     {\n//       isMounted,\n//     },\n//     childrenToRender.map((x) => x.props.children.props.children.props.src)\n//   )\n\n//   if (process.env.NODE_ENV !== 'production' && exitBeforeEnter && childrenToRender.length > 1) {\n//     console.warn(\n//       `You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`\n//     )\n//   }\n\n//   return (\n//     <>{exiting.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child))}</>\n//   )\n// }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/AnimatePresenceContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimatePresenceContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface AnimatePresenceContextProps {\n  id: string\n  isPresent: boolean\n  register: (id: string) => () => void\n  onExitComplete?: (id: string) => void\n  initial?: false | VariantLabels\n  custom?: any\n}\n\nexport const AnimatePresenceContext = createContext<AnimatePresenceContextProps | null>(null)\n"],
-  "mappings": "AAAA;AAaO,MAAM,yBAAyB,cAAkD,IAAI;",
+  "sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface AnimatePresenceContextProps {\n  id: string\n  isEntering: boolean | undefined\n  register: (id: string) => () => void\n  onExitComplete?: (id: string) => void\n  initial?: false | VariantLabels\n  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\nexport const AnimatePresenceContext = createContext<AnimatePresenceContextProps | null>(null)\n"],
+  "mappings": "AAAA;AAcO,MAAM,yBAAyB,cAAkD,IAAI;",
   "names": []
 }

package/dist/esm/PresenceChild.js

@@ -7,41 +7,45 @@ import { AnimatePresenceContext } from "./AnimatePresenceContext";
 const PresenceChild = /* @__PURE__ */ __name(({
   children,
   initial,
-  isPresent,
+  isEntering,
   onExitComplete,
-  custom,
+  exitVariant,
+  enterVariant,
   presenceAffectsLayout
 }) => {
   const presenceChildren = useConstant(newChildrenMap);
   const id = useId();
-  const context = React.useMemo(() => ({
-    id,
-    initial,
-    isPresent,
-    custom,
-    onExitComplete: (childId) => {
-      presenceChildren.set(childId, true);
-      for (const isComplete of presenceChildren.values()) {
-        if (!isComplete) {
-          return;
+  const context = React.useMemo(() => {
+    return {
+      id,
+      initial,
+      isEntering,
+      exitVariant,
+      enterVariant,
+      onExitComplete: (childId) => {
+        console.log("on exist complete", childId);
+        presenceChildren.set(childId, true);
+        for (const isComplete of presenceChildren.values()) {
+          if (!isComplete) {
+            return;
+          }
         }
+        onExitComplete == null ? void 0 : onExitComplete();
+      },
+      register: (childId) => {
+        presenceChildren.set(childId, false);
+        return () => presenceChildren.delete(childId);
       }
-      onExitComplete == null ? void 0 : onExitComplete();
-    },
-    register: (childId) => {
-      presenceChildren.set(childId, false);
-      return () => presenceChildren.delete(childId);
-    }
-  }), presenceAffectsLayout ? void 0 : [isPresent]);
+    };
+  }, presenceAffectsLayout ? void 0 : [isEntering, onExitComplete, exitVariant, enterVariant]);
   React.useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
-  }, [isPresent]);
+  }, [isEntering]);
   React.useEffect(() => {
-    if (!isPresent && !presenceChildren.size) {
-      console.log("on exit complete");
+    if (isEntering === false && !presenceChildren.size) {
       onExitComplete == null ? void 0 : onExitComplete();
     }
-  }, [isPresent]);
+  }, [isEntering]);
   return /* @__PURE__ */ React.createElement(AnimatePresenceContext.Provider, {
     value: context
   }, children);

package/dist/esm/PresenceChild.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PresenceChild.tsx"],
-  "sourcesContent": ["import { useId } from '@react-aria/utils'\nimport { useConstant } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { AnimatePresenceContext, AnimatePresenceContextProps } from './AnimatePresenceContext'\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n  children: React.ReactElement<any>\n  isPresent: boolean\n  onExitComplete?: () => void\n  initial?: false | VariantLabels\n  custom?: any\n  presenceAffectsLayout: boolean\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isPresent,\n  onExitComplete,\n  custom,\n  presenceAffectsLayout,\n}: PresenceChildProps) => {\n  const presenceChildren = useConstant(newChildrenMap)\n  const id = useId()\n\n  const context = React.useMemo(\n    (): AnimatePresenceContextProps => ({\n      id,\n      initial,\n      isPresent,\n      custom,\n      onExitComplete: (childId: string) => {\n        presenceChildren.set(childId, true)\n        for (const isComplete of presenceChildren.values()) {\n          if (!isComplete) {\n            return // can stop searching when any is incomplete\n          }\n        }\n        onExitComplete?.()\n      },\n      register: (childId: string) => {\n        presenceChildren.set(childId, false)\n        return () => presenceChildren.delete(childId)\n      },\n    }),\n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout ? undefined : [isPresent]\n  )\n\n  // cant this be a useEffect?\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n  }, [isPresent])\n\n  /**\n   * If there's no animated components to fire exit animations, we want to remove this\n   * component immediately.\n   */\n  React.useEffect(() => {\n    if (!isPresent && !presenceChildren.size) {\n      console.log('on exit complete')\n      onExitComplete?.()\n    }\n  }, [isPresent])\n\n  return (\n    <AnimatePresenceContext.Provider value={context}>{children}</AnimatePresenceContext.Provider>\n  )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
-  "mappings": ";;AAAA;AACA;AACA;AAEA;AAYO,MAAM,gBAAgB,wBAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,mBAAmB,YAAY,cAAc;AACnD,QAAM,KAAK,MAAM;AAEjB,QAAM,UAAU,MAAM,QACpB,MAAoC;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,CAAC,YAAoB;AACnC,uBAAiB,IAAI,SAAS,IAAI;AAClC,iBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,YAAI,CAAC,YAAY;AACf;AAAA,QACF;AAAA,MACF;AACA;AAAA,IACF;AAAA,IACA,UAAU,CAAC,YAAoB;AAC7B,uBAAiB,IAAI,SAAS,KAAK;AACnC,aAAO,MAAM,iBAAiB,OAAO,OAAO;AAAA,IAC9C;AAAA,EACF,IAMA,wBAAwB,SAAY,CAAC,SAAS,CAChD;AAGA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EACvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,aAAa,CAAC,iBAAiB,MAAM;AACxC,cAAQ,IAAI,kBAAkB;AAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,oCAAC,uBAAuB,UAAvB;AAAA,IAAgC,OAAO;AAAA,KAAU,QAAS;AAE/D,GA1D6B;AA4D7B,0BAAgD;AAC9C,SAAO,oBAAI,IAAI;AACjB;AAFS;",
+  "sourcesContent": ["import { useId } from '@react-aria/utils'\nimport { useConstant } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { AnimatePresenceContext, AnimatePresenceContextProps } from './AnimatePresenceContext'\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n  children: React.ReactElement<any>\n  isEntering: boolean | undefined\n  onExitComplete?: () => void\n  initial?: false | VariantLabels\n  exitVariant?: string | null\n  enterVariant?: string | null\n  presenceAffectsLayout: boolean\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isEntering,\n  onExitComplete,\n  exitVariant,\n  enterVariant,\n  presenceAffectsLayout,\n}: PresenceChildProps) => {\n  const presenceChildren = useConstant(newChildrenMap)\n  const id = useId()\n\n  const context = React.useMemo(\n    (): AnimatePresenceContextProps => {\n      return {\n        id,\n        initial,\n        isEntering,\n        exitVariant,\n        enterVariant,\n        onExitComplete: (childId: string) => {\n          console.log('on exist complete', childId)\n          presenceChildren.set(childId, true)\n          for (const isComplete of presenceChildren.values()) {\n            if (!isComplete) {\n              return // can stop searching when any is incomplete\n            }\n          }\n          onExitComplete?.()\n        },\n        register: (childId: string) => {\n          presenceChildren.set(childId, false)\n          return () => presenceChildren.delete(childId)\n        },\n      }\n    },\n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout ? undefined : [isEntering, onExitComplete, exitVariant, enterVariant]\n  )\n\n  // cant this be a useEffect?\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n  }, [isEntering])\n\n  /**\n   * If there's no animated components to fire exit animations, we want to remove this\n   * component immediately.\n   */\n  React.useEffect(() => {\n    if (isEntering === false && !presenceChildren.size) {\n      onExitComplete?.()\n    }\n  }, [isEntering])\n\n  return (\n    <AnimatePresenceContext.Provider value={context}>{children}</AnimatePresenceContext.Provider>\n  )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
+  "mappings": ";;AAAA;AACA;AACA;AAEA;AAaO,MAAM,gBAAgB,wBAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,mBAAmB,YAAY,cAAc;AACnD,QAAM,KAAK,MAAM;AAEjB,QAAM,UAAU,MAAM,QACpB,MAAmC;AACjC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC,YAAoB;AACnC,gBAAQ,IAAI,qBAAqB,OAAO;AACxC,yBAAiB,IAAI,SAAS,IAAI;AAClC,mBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AAAA,QACF;AACA;AAAA,MACF;AAAA,MACA,UAAU,CAAC,YAAoB;AAC7B,yBAAiB,IAAI,SAAS,KAAK;AACnC,eAAO,MAAM,iBAAiB,OAAO,OAAO;AAAA,MAC9C;AAAA,IACF;AAAA,EACF,GAMA,wBAAwB,SAAY,CAAC,YAAY,gBAAgB,aAAa,YAAY,CAC5F;AAGA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EACvE,GAAG,CAAC,UAAU,CAAC;AAMf,QAAM,UAAU,MAAM;AACpB,QAAI,eAAe,SAAS,CAAC,iBAAiB,MAAM;AAClD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,oCAAC,uBAAuB,UAAvB;AAAA,IAAgC,OAAO;AAAA,KAAU,QAAS;AAE/D,GA9D6B;AAgE7B,0BAAgD;AAC9C,SAAO,oBAAI,IAAI;AACjB;AAFS;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 export * from "./AnimatePresence";
-export * from "./usePresence";
+export * from "./useEntering";
 import { AnimatePresenceContext } from "./AnimatePresenceContext";
 export {
   AnimatePresenceContext

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './AnimatePresence'\nexport * from './usePresence'\nexport { AnimatePresenceContext } from './AnimatePresenceContext'\n"],
+  "sourcesContent": ["export * from './AnimatePresence'\nexport * from './useEntering'\nexport { AnimatePresenceContext } from './AnimatePresenceContext'\n"],
   "mappings": "AAAA;AACA;AACA;",
   "names": []
 }

package/dist/jsx/AnimatePresence.js

@@ -1,32 +1,30 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import {
-  useForceUpdate,
-  useIsMounted,
-  useIsomorphicLayoutEffect,
-  useUnmountEffect
-} from "@tamagui/core";
-import {
+import { useForceUpdate, useIsomorphicLayoutEffect, useUnmountEffect } from "@tamagui/core";
+import React, {
   Children,
   cloneElement,
   isValidElement,
   useContext,
-  useRef
+  useEffect,
+  useRef,
+  useState
 } from "react";
 import { LayoutGroupContext } from "./LayoutGroupContext";
 import { PresenceChild } from "./PresenceChild";
+React["keep"];
 const getChildKey = /* @__PURE__ */ __name((child) => child.key || "", "getChildKey");
 const isDev = process.env.NODE_ENV !== "production";
 function updateChildLookup(children, allChildren) {
   const seenChildren = isDev ? /* @__PURE__ */ new Set() : null;
-  for (const child of children) {
+  children.forEach((child) => {
     const key = getChildKey(child);
     if (isDev && seenChildren && seenChildren.has(key)) {
       console.warn(`Children of AnimatePresence require unique keys. "${key}" is a duplicate.`);
       seenChildren.add(key);
     }
     allChildren.set(key, child);
-  }
+  });
 }
 __name(updateChildLookup, "updateChildLookup");
 function onlyElements(children) {
@@ -40,7 +38,8 @@ function onlyElements(children) {
 __name(onlyElements, "onlyElements");
 const AnimatePresence = /* @__PURE__ */ __name(({
   children,
-  custom,
+  enterVariant,
+  exitVariant,
   initial = true,
   onExitComplete,
   exitBeforeEnter,
@@ -50,7 +49,10 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
-  const isMounted = useIsMounted();
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
   const filteredChildren = onlyElements(children);
   let childrenToRender = filteredChildren;
   const exiting = /* @__PURE__ */ new Set();
@@ -68,7 +70,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
     exiting.clear();
   });
   if (isInitialRender.current) {
-    return <>{childrenToRender.map((child) => <PresenceChild key={getChildKey(child)} isPresent initial={initial ? void 0 : false} presenceAffectsLayout={presenceAffectsLayout}>{child}</PresenceChild>)}</>;
+    return <>{childrenToRender.map((child) => <PresenceChild key={getChildKey(child)} isEntering exitVariant={exitVariant} enterVariant={enterVariant} initial={initial ? void 0 : false} presenceAffectsLayout={presenceAffectsLayout}>{child}</PresenceChild>)}</>;
   }
   childrenToRender = [...childrenToRender];
   const presentKeys = presentChildren.current.map(getChildKey);
@@ -83,34 +85,30 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   if (exitBeforeEnter && exiting.size) {
     childrenToRender = [];
   }
-  for (const key of exiting) {
-    if (targetKeys.indexOf(key) !== -1) {
-      continue;
-    }
+  exiting.forEach((key) => {
+    if (targetKeys.indexOf(key) !== -1)
+      return;
     const child = allChildren.get(key);
-    if (!child) {
-      continue;
-    }
+    if (!child)
+      return;
     const insertionIndex = presentKeys.indexOf(key);
-    const onExit = /* @__PURE__ */ __name(() => {
+    childrenToRender.splice(insertionIndex, 0, <PresenceChild key={getChildKey(child)} isEntering={false} onExitComplete={() => {
       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;
-        if (isMounted.current === false) {
+        if (isMounted === false)
           return;
-        }
         forceRender();
         onExitComplete == null ? void 0 : onExitComplete();
       }
-    }, "onExit");
-    childrenToRender.splice(insertionIndex, 0, <PresenceChild key={getChildKey(child)} isPresent={false} onExitComplete={onExit} custom={custom} presenceAffectsLayout={presenceAffectsLayout}>{child}</PresenceChild>);
-  }
+    }} exitVariant={exitVariant} enterVariant={enterVariant} presenceAffectsLayout={presenceAffectsLayout}>{child}</PresenceChild>);
+  });
   childrenToRender = childrenToRender.map((child) => {
     const key = child.key;
-    return exiting.has(key) ? child : <PresenceChild key={getChildKey(child)} isPresent presenceAffectsLayout={presenceAffectsLayout}>{child}</PresenceChild>;
+    return exiting.has(key) ? child : <PresenceChild key={getChildKey(child)} isEntering={void 0} exitVariant={exitVariant} enterVariant={enterVariant} presenceAffectsLayout={presenceAffectsLayout}>{child}</PresenceChild>;
   });
   if (process.env.NODE_ENV !== "production" && exitBeforeEnter && childrenToRender.length > 1) {
     console.warn(`You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.`);

package/dist/jsx/PresenceChild.js

@@ -7,41 +7,45 @@ import { AnimatePresenceContext } from "./AnimatePresenceContext";
 const PresenceChild = /* @__PURE__ */ __name(({
   children,
   initial,
-  isPresent,
+  isEntering,
   onExitComplete,
-  custom,
+  exitVariant,
+  enterVariant,
   presenceAffectsLayout
 }) => {
   const presenceChildren = useConstant(newChildrenMap);
   const id = useId();
-  const context = React.useMemo(() => ({
-    id,
-    initial,
-    isPresent,
-    custom,
-    onExitComplete: (childId) => {
-      presenceChildren.set(childId, true);
-      for (const isComplete of presenceChildren.values()) {
-        if (!isComplete) {
-          return;
+  const context = React.useMemo(() => {
+    return {
+      id,
+      initial,
+      isEntering,
+      exitVariant,
+      enterVariant,
+      onExitComplete: (childId) => {
+        console.log("on exist complete", childId);
+        presenceChildren.set(childId, true);
+        for (const isComplete of presenceChildren.values()) {
+          if (!isComplete) {
+            return;
+          }
         }
+        onExitComplete == null ? void 0 : onExitComplete();
+      },
+      register: (childId) => {
+        presenceChildren.set(childId, false);
+        return () => presenceChildren.delete(childId);
       }
-      onExitComplete == null ? void 0 : onExitComplete();
-    },
-    register: (childId) => {
-      presenceChildren.set(childId, false);
-      return () => presenceChildren.delete(childId);
-    }
-  }), presenceAffectsLayout ? void 0 : [isPresent]);
+    };
+  }, presenceAffectsLayout ? void 0 : [isEntering, onExitComplete, exitVariant, enterVariant]);
   React.useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
-  }, [isPresent]);
+  }, [isEntering]);
   React.useEffect(() => {
-    if (!isPresent && !presenceChildren.size) {
-      console.log("on exit complete");
+    if (isEntering === false && !presenceChildren.size) {
       onExitComplete == null ? void 0 : onExitComplete();
     }
-  }, [isPresent]);
+  }, [isEntering]);
   return <AnimatePresenceContext.Provider value={context}>{children}</AnimatePresenceContext.Provider>;
 }, "PresenceChild");
 function newChildrenMap() {

package/dist/jsx/index.js

@@ -1,5 +1,5 @@
 export * from "./AnimatePresence";
-export * from "./usePresence";
+export * from "./useEntering";
 import { AnimatePresenceContext } from "./AnimatePresenceContext";
 export {
   AnimatePresenceContext

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animate-presence",
-  "version": "1.0.0-beta.202+a1a54793",
+  "version": "1.0.0-beta.208+f5ae07b4",
   "source": "src/index.ts",
   "license": "MIT",
   "typings": "types",
@@ -12,10 +12,10 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/core": "^1.0.0-beta.202+a1a54793"
+    "@tamagui/core": "^1.0.0-beta.208+f5ae07b4"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-beta.202+a1a54793"
+    "@tamagui/build": "^1.0.0-beta.208+f5ae07b4"
   },
   "scripts": {
     "build": "tamagui-build",
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a1a54793ee1890507fc934f42f2eb3a4020b57c5"
+  "gitHead": "f5ae07b474577e5546139d5a187dde4e1d08df4b"
 }