@tamagui/animate-presence 1.0.1-beta.193 → 1.0.1-beta.194

package/dist/cjs/AnimatePresence.js

@@ -79,23 +79,27 @@ const AnimatePresence = ({
   const forceRenderLayoutGroup = (0, import_react.useContext)(import_LayoutGroupContext.LayoutGroupContext).forceRender;
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
-  const isMounted = (0, import_core.useIsMounted)();
+  const isMounted = (0, import_react.useRef)(false);
   const filteredChildren = onlyElements(children);
   let childrenToRender = filteredChildren;
   const exiting = /* @__PURE__ */ new Set();
   const presentChildren = (0, import_react.useRef)(childrenToRender);
   const allChildren = (0, import_react.useRef)(/* @__PURE__ */ new Map()).current;
   const isInitialRender = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+      isInitialRender.current = true;
+      allChildren.clear();
+      exiting.clear();
+    };
+  }, []);
   (0, import_core.useIsomorphicLayoutEffect)(() => {
     isInitialRender.current = false;
     updateChildLookup(filteredChildren, allChildren);
     presentChildren.current = childrenToRender;
   });
-  (0, import_core.useUnmountEffect)(() => {
-    isInitialRender.current = true;
-    allChildren.clear();
-    exiting.clear();
-  });
   if (isInitialRender.current) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
       children: childrenToRender.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PresenceChild.PresenceChild, {

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 React, {\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'\nimport { AnimatePresenceProps } from './types'\n\nReact['keep']\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      // eslint-disable-next-line no-console\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, index) => {\n    if (isValidElement(child)) {\n      if (!child.key) {\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.warn(`No key given to AnimatePresence child, assigning index as key`)\n        }\n        filtered.push(\n          React.cloneElement(child, {\n            key: index,\n          })\n        )\n      } else {\n        filtered.push(child)\n      }\n    }\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 * ```tsx\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 * `usePresence` 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 = 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            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    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        isPresent={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.current === 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        isPresent\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    // eslint-disable-next-line no-console\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\nAnimatePresence.displayName = 'AnimatePresence'\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport React, {\n  Children,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\nimport { AnimatePresenceProps } from './types'\n\nReact['keep']\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      // eslint-disable-next-line no-console\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, index) => {\n    if (isValidElement(child)) {\n      if (!child.key) {\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.warn(`No key given to AnimatePresence child, assigning index as key`)\n        }\n        filtered.push(\n          React.cloneElement(child, {\n            key: index,\n          })\n        )\n      } else {\n        filtered.push(child)\n      }\n    }\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 * ```tsx\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 * `usePresence` 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 = useRef(false)\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  useEffect(() => {\n    isMounted.current = true\n    return () => {\n      isMounted.current = false\n      isInitialRender.current = true\n      allChildren.clear()\n      exiting.clear()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useIsomorphicLayoutEffect(() => {\n    isInitialRender.current = false\n    updateChildLookup(filteredChildren, allChildren)\n    presentChildren.current = childrenToRender\n  })\n\n  if (isInitialRender.current) {\n    return (\n      <>\n        {childrenToRender.map((child) => (\n          <PresenceChild\n            key={getChildKey(child)}\n            isPresent\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    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        isPresent={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.current === 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        isPresent\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    // eslint-disable-next-line no-console\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\nAnimatePresence.displayName = 'AnimatePresence'\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/PresenceChild.js

@@ -28,9 +28,9 @@ __export(PresenceChild_exports, {
 });
 module.exports = __toCommonJS(PresenceChild_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_core = require("@tamagui/core");
+var import_use_presence = require("@tamagui/use-presence");
 var React = __toESM(require("react"));
-var import_PresenceContext = require("./PresenceContext");
+var import_react = require("react");
 const PresenceChild = ({
   children,
   initial,
@@ -40,8 +40,8 @@ const PresenceChild = ({
   enterVariant,
   presenceAffectsLayout
 }) => {
-  const presenceChildren = (0, import_core.useConstant)(newChildrenMap);
-  const id = (0, import_core.useId)() || "";
+  const presenceChildren = React.useMemo(newChildrenMap, []);
+  const id = (0, import_react.useId)() || "";
   const context = React.useMemo(
     () => {
       return {
@@ -73,7 +73,7 @@ const PresenceChild = ({
   React.useEffect(() => {
     !isPresent && !presenceChildren.size && (onExitComplete == null ? void 0 : onExitComplete());
   }, [isPresent]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PresenceContext.PresenceContext.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_use_presence.PresenceContext.Provider, {
     value: context,
     children
   });

package/dist/cjs/PresenceChild.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PresenceChild.tsx"],
-  "sourcesContent": ["import { useConstant, useId } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { PresenceContext, PresenceContextProps } from './PresenceContext'\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  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isPresent,\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    (): PresenceContextProps => {\n      return {\n        id,\n        initial,\n        isPresent,\n        exitVariant,\n        enterVariant,\n        onExitComplete: (id: string) => {\n          presenceChildren.set(id, 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: (id: string) => {\n          presenceChildren.set(id, false)\n          return () => presenceChildren.delete(id)\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n    presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]\n  )\n\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    !isPresent && !presenceChildren.size && onExitComplete?.()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isPresent])\n\n  return <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2ES;AA3ET,kBAAmC;AACnC,YAAuB;AAEvB,6BAAsD;AAc/C,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,uBAAmB,yBAAY,cAAc;AACnD,QAAM,SAAK,mBAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA;AAAA,QACF;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,KAAC,aAAa,CAAC,iBAAiB,SAAQ;AAAA,EAE1C,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO,4CAAC,uCAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAAU;AAAA,GAAS;AAC7D;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
+  "sourcesContent": ["import { PresenceContext, PresenceContextProps } from '@tamagui/use-presence'\nimport * as React from 'react'\nimport { useId } from 'react'\n\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  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isPresent,\n  onExitComplete,\n  exitVariant,\n  enterVariant,\n  presenceAffectsLayout,\n}: PresenceChildProps) => {\n  const presenceChildren = React.useMemo(newChildrenMap, [])\n  const id = useId() || ''\n\n  const context = React.useMemo(\n    (): PresenceContextProps => {\n      return {\n        id,\n        initial,\n        isPresent,\n        exitVariant,\n        enterVariant,\n        onExitComplete: (id: string) => {\n          presenceChildren.set(id, 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: (id: string) => {\n          presenceChildren.set(id, false)\n          return () => presenceChildren.delete(id)\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n    presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]\n  )\n\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    !isPresent && !presenceChildren.size && onExitComplete?.()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isPresent])\n\n  return <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2ES;AA3ET,0BAAsD;AACtD,YAAuB;AACvB,mBAAsB;AAef,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC;AACzD,QAAM,SAAK,oBAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA;AAAA,QACF;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,KAAC,aAAa,CAAC,iBAAiB,SAAQ;AAAA,EAE1C,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO,4CAAC,oCAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAAU;AAAA,GAAS;AAC7D;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
   "names": ["id"]
 }

package/dist/cjs/index.js

@@ -3,10 +3,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -18,15 +14,7 @@ var __copyProps = (to, from, except, desc) => {
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
-__export(src_exports, {
-  PresenceContext: () => import_PresenceContext.PresenceContext
-});
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./AnimatePresence"), module.exports);
-__reExport(src_exports, require("./usePresence"), module.exports);
-var import_PresenceContext = require("./PresenceContext");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PresenceContext
-});
+__reExport(src_exports, require("@tamagui/use-presence"), module.exports);
 //# 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 { PresenceContext } from './PresenceContext'\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,8BAAd;AACA,wBAAc,0BADd;AAEA,6BAAgC;",
+  "sourcesContent": ["export * from './AnimatePresence'\nexport * from '@tamagui/use-presence'\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,8BAAd;AACA,wBAAc,kCADd;",
   "names": []
 }

package/dist/esm/AnimatePresence.js

@@ -1,15 +1,11 @@
 import { Fragment, jsx } from "react/jsx-runtime";
-import {
-  useForceUpdate,
-  useIsMounted,
-  useIsomorphicLayoutEffect,
-  useUnmountEffect
-} from "@tamagui/core";
+import { useForceUpdate, useIsomorphicLayoutEffect } from "@tamagui/core";
 import React, {
   Children,
   cloneElement,
   isValidElement,
   useContext,
+  useEffect,
   useRef
 } from "react";
 import { LayoutGroupContext } from "./LayoutGroupContext";
@@ -61,23 +57,27 @@ const AnimatePresence = ({
   const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
-  const isMounted = useIsMounted();
+  const isMounted = useRef(false);
   const filteredChildren = onlyElements(children);
   let childrenToRender = filteredChildren;
   const exiting = /* @__PURE__ */ new Set();
   const presentChildren = useRef(childrenToRender);
   const allChildren = useRef(/* @__PURE__ */ new Map()).current;
   const isInitialRender = useRef(true);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+      isInitialRender.current = true;
+      allChildren.clear();
+      exiting.clear();
+    };
+  }, []);
   useIsomorphicLayoutEffect(() => {
     isInitialRender.current = false;
     updateChildLookup(filteredChildren, allChildren);
     presentChildren.current = childrenToRender;
   });
-  useUnmountEffect(() => {
-    isInitialRender.current = true;
-    allChildren.clear();
-    exiting.clear();
-  });
   if (isInitialRender.current) {
     return /* @__PURE__ */ jsx(Fragment, {
       children: childrenToRender.map((child) => /* @__PURE__ */ jsx(PresenceChild, {

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 React, {\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'\nimport { AnimatePresenceProps } from './types'\n\nReact['keep']\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      // eslint-disable-next-line no-console\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, index) => {\n    if (isValidElement(child)) {\n      if (!child.key) {\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.warn(`No key given to AnimatePresence child, assigning index as key`)\n        }\n        filtered.push(\n          React.cloneElement(child, {\n            key: index,\n          })\n        )\n      } else {\n        filtered.push(child)\n      }\n    }\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 * ```tsx\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 * `usePresence` 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 = 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            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    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        isPresent={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.current === 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        isPresent\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    // eslint-disable-next-line no-console\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\nAnimatePresence.displayName = 'AnimatePresence'\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport React, {\n  Children,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\nimport { AnimatePresenceProps } from './types'\n\nReact['keep']\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      // eslint-disable-next-line no-console\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, index) => {\n    if (isValidElement(child)) {\n      if (!child.key) {\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.warn(`No key given to AnimatePresence child, assigning index as key`)\n        }\n        filtered.push(\n          React.cloneElement(child, {\n            key: index,\n          })\n        )\n      } else {\n        filtered.push(child)\n      }\n    }\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 * ```tsx\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 * `usePresence` 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 = useRef(false)\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  useEffect(() => {\n    isMounted.current = true\n    return () => {\n      isMounted.current = false\n      isInitialRender.current = true\n      allChildren.clear()\n      exiting.clear()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useIsomorphicLayoutEffect(() => {\n    isInitialRender.current = false\n    updateChildLookup(filteredChildren, allChildren)\n    presentChildren.current = childrenToRender\n  })\n\n  if (isInitialRender.current) {\n    return (\n      <>\n        {childrenToRender.map((child) => (\n          <PresenceChild\n            key={getChildKey(child)}\n            isPresent\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    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        isPresent={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.current === 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        isPresent\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    // eslint-disable-next-line no-console\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\nAnimatePresence.displayName = 'AnimatePresence'\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/PresenceChild.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { useConstant, useId } from "@tamagui/core";
+import { PresenceContext } from "@tamagui/use-presence";
 import * as React from "react";
-import { PresenceContext } from "./PresenceContext";
+import { useId } from "react";
 const PresenceChild = ({
   children,
   initial,
@@ -11,7 +11,7 @@ const PresenceChild = ({
   enterVariant,
   presenceAffectsLayout
 }) => {
-  const presenceChildren = useConstant(newChildrenMap);
+  const presenceChildren = React.useMemo(newChildrenMap, []);
   const id = useId() || "";
   const context = React.useMemo(
     () => {

package/dist/esm/PresenceChild.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PresenceChild.tsx"],
-  "sourcesContent": ["import { useConstant, useId } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { PresenceContext, PresenceContextProps } from './PresenceContext'\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  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isPresent,\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    (): PresenceContextProps => {\n      return {\n        id,\n        initial,\n        isPresent,\n        exitVariant,\n        enterVariant,\n        onExitComplete: (id: string) => {\n          presenceChildren.set(id, 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: (id: string) => {\n          presenceChildren.set(id, false)\n          return () => presenceChildren.delete(id)\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n    presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]\n  )\n\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    !isPresent && !presenceChildren.size && onExitComplete?.()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isPresent])\n\n  return <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
-  "mappings": "AA2ES;AA3ET,SAAS,aAAa,aAAa;AACnC,YAAY,WAAW;AAEvB,SAAS,uBAA6C;AAc/C,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,YAAY,cAAc;AACnD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA;AAAA,QACF;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,KAAC,aAAa,CAAC,iBAAiB,SAAQ;AAAA,EAE1C,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO,oBAAC,gBAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAAU;AAAA,GAAS;AAC7D;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
+  "sourcesContent": ["import { PresenceContext, PresenceContextProps } from '@tamagui/use-presence'\nimport * as React from 'react'\nimport { useId } from 'react'\n\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  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isPresent,\n  onExitComplete,\n  exitVariant,\n  enterVariant,\n  presenceAffectsLayout,\n}: PresenceChildProps) => {\n  const presenceChildren = React.useMemo(newChildrenMap, [])\n  const id = useId() || ''\n\n  const context = React.useMemo(\n    (): PresenceContextProps => {\n      return {\n        id,\n        initial,\n        isPresent,\n        exitVariant,\n        enterVariant,\n        onExitComplete: (id: string) => {\n          presenceChildren.set(id, 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: (id: string) => {\n          presenceChildren.set(id, false)\n          return () => presenceChildren.delete(id)\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n    presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]\n  )\n\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    !isPresent && !presenceChildren.size && onExitComplete?.()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isPresent])\n\n  return <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
+  "mappings": "AA2ES;AA3ET,SAAS,uBAA6C;AACtD,YAAY,WAAW;AACvB,SAAS,aAAa;AAef,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC;AACzD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA;AAAA,QACF;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,KAAC,aAAa,CAAC,iBAAiB,SAAQ;AAAA,EAE1C,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO,oBAAC,gBAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAAU;AAAA,GAAS;AAC7D;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
   "names": ["id"]
 }

package/dist/esm/index.js

@@ -1,7 +1,3 @@
 export * from "./AnimatePresence";
-export * from "./usePresence";
-import { PresenceContext } from "./PresenceContext";
-export {
-  PresenceContext
-};
+export * from "@tamagui/use-presence";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './AnimatePresence'\nexport * from './usePresence'\nexport { PresenceContext } from './PresenceContext'\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,SAAS,uBAAuB;",
+  "sourcesContent": ["export * from './AnimatePresence'\nexport * from '@tamagui/use-presence'\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/jsx/AnimatePresence.js

@@ -1,14 +1,10 @@
-import {
-  useForceUpdate,
-  useIsMounted,
-  useIsomorphicLayoutEffect,
-  useUnmountEffect
-} from "@tamagui/core";
+import { useForceUpdate, useIsomorphicLayoutEffect } from "@tamagui/core";
 import React, {
   Children,
   cloneElement,
   isValidElement,
   useContext,
+  useEffect,
   useRef
 } from "react";
 import { LayoutGroupContext } from "./LayoutGroupContext";
@@ -60,23 +56,27 @@ const AnimatePresence = ({
   const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
-  const isMounted = useIsMounted();
+  const isMounted = useRef(false);
   const filteredChildren = onlyElements(children);
   let childrenToRender = filteredChildren;
   const exiting = /* @__PURE__ */ new Set();
   const presentChildren = useRef(childrenToRender);
   const allChildren = useRef(/* @__PURE__ */ new Map()).current;
   const isInitialRender = useRef(true);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+      isInitialRender.current = true;
+      allChildren.clear();
+      exiting.clear();
+    };
+  }, []);
   useIsomorphicLayoutEffect(() => {
     isInitialRender.current = false;
     updateChildLookup(filteredChildren, allChildren);
     presentChildren.current = childrenToRender;
   });
-  useUnmountEffect(() => {
-    isInitialRender.current = true;
-    allChildren.clear();
-    exiting.clear();
-  });
   if (isInitialRender.current) {
     return <>{childrenToRender.map((child) => <PresenceChild key={getChildKey(child)} isPresent exitVariant={exitVariant} enterVariant={enterVariant} initial={initial ? void 0 : false} presenceAffectsLayout={presenceAffectsLayout}>{child}</PresenceChild>)}</>;
   }

package/dist/jsx/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 React, {\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'\nimport { AnimatePresenceProps } from './types'\n\nReact['keep']\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      // eslint-disable-next-line no-console\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, index) => {\n    if (isValidElement(child)) {\n      if (!child.key) {\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.warn(`No key given to AnimatePresence child, assigning index as key`)\n        }\n        filtered.push(\n          React.cloneElement(child, {\n            key: index,\n          })\n        )\n      } else {\n        filtered.push(child)\n      }\n    }\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 * ```tsx\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 * `usePresence` 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 = 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            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    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        isPresent={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.current === 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        isPresent\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    // eslint-disable-next-line no-console\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\nAnimatePresence.displayName = 'AnimatePresence'\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport React, {\n  Children,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react'\n\nimport { LayoutGroupContext } from './LayoutGroupContext'\nimport { PresenceChild } from './PresenceChild'\nimport { AnimatePresenceProps } from './types'\n\nReact['keep']\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      // eslint-disable-next-line no-console\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, index) => {\n    if (isValidElement(child)) {\n      if (!child.key) {\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.warn(`No key given to AnimatePresence child, assigning index as key`)\n        }\n        filtered.push(\n          React.cloneElement(child, {\n            key: index,\n          })\n        )\n      } else {\n        filtered.push(child)\n      }\n    }\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 * ```tsx\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 * `usePresence` 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 = useRef(false)\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  useEffect(() => {\n    isMounted.current = true\n    return () => {\n      isMounted.current = false\n      isInitialRender.current = true\n      allChildren.clear()\n      exiting.clear()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useIsomorphicLayoutEffect(() => {\n    isInitialRender.current = false\n    updateChildLookup(filteredChildren, allChildren)\n    presentChildren.current = childrenToRender\n  })\n\n  if (isInitialRender.current) {\n    return (\n      <>\n        {childrenToRender.map((child) => (\n          <PresenceChild\n            key={getChildKey(child)}\n            isPresent\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    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        isPresent={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.current === 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        isPresent\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    // eslint-disable-next-line no-console\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\nAnimatePresence.displayName = 'AnimatePresence'\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/PresenceChild.js

@@ -1,6 +1,6 @@
-import { useConstant, useId } from "@tamagui/core";
+import { PresenceContext } from "@tamagui/use-presence";
 import * as React from "react";
-import { PresenceContext } from "./PresenceContext";
+import { useId } from "react";
 const PresenceChild = ({
   children,
   initial,
@@ -10,7 +10,7 @@ const PresenceChild = ({
   enterVariant,
   presenceAffectsLayout
 }) => {
-  const presenceChildren = useConstant(newChildrenMap);
+  const presenceChildren = React.useMemo(newChildrenMap, []);
   const id = useId() || "";
   const context = React.useMemo(
     () => {

package/dist/jsx/PresenceChild.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PresenceChild.tsx"],
-  "sourcesContent": ["import { useConstant, useId } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { PresenceContext, PresenceContextProps } from './PresenceContext'\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  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isPresent,\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    (): PresenceContextProps => {\n      return {\n        id,\n        initial,\n        isPresent,\n        exitVariant,\n        enterVariant,\n        onExitComplete: (id: string) => {\n          presenceChildren.set(id, 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: (id: string) => {\n          presenceChildren.set(id, false)\n          return () => presenceChildren.delete(id)\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n    presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]\n  )\n\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    !isPresent && !presenceChildren.size && onExitComplete?.()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isPresent])\n\n  return <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,aAAa;AACnC,YAAY,WAAW;AAEvB,SAAS,uBAA6C;AAc/C,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,YAAY,cAAc;AACnD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA,2BAAiB;AAAA,QACnB;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,KAAC,aAAa,CAAC,iBAAiB,QAAQ,iBAAiB;AAAA,EAE3D,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO,CAAC,gBAAgB,SAAS,OAAO,UAAU,SAAS,EAAnD,gBAAgB;AAC1B;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
+  "sourcesContent": ["import { PresenceContext, PresenceContextProps } from '@tamagui/use-presence'\nimport * as React from 'react'\nimport { useId } from 'react'\n\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  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\nexport const PresenceChild = ({\n  children,\n  initial,\n  isPresent,\n  onExitComplete,\n  exitVariant,\n  enterVariant,\n  presenceAffectsLayout,\n}: PresenceChildProps) => {\n  const presenceChildren = React.useMemo(newChildrenMap, [])\n  const id = useId() || ''\n\n  const context = React.useMemo(\n    (): PresenceContextProps => {\n      return {\n        id,\n        initial,\n        isPresent,\n        exitVariant,\n        enterVariant,\n        onExitComplete: (id: string) => {\n          presenceChildren.set(id, 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: (id: string) => {\n          presenceChildren.set(id, false)\n          return () => presenceChildren.delete(id)\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n    presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]\n  )\n\n  React.useMemo(() => {\n    presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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    !isPresent && !presenceChildren.size && onExitComplete?.()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isPresent])\n\n  return <PresenceContext.Provider value={context}>{children}</PresenceContext.Provider>\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n  return new Map()\n}\n"],
+  "mappings": "AAAA,SAAS,uBAA6C;AACtD,YAAY,WAAW;AACvB,SAAS,aAAa;AAef,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,mBAAmB,MAAM,QAAQ,gBAAgB,CAAC,CAAC;AACzD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM;AAAA,IACpB,MAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,CAACA,QAAe;AAC9B,2BAAiB,IAAIA,KAAI,IAAI;AAC7B,qBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,gBAAI,CAAC,YAAY;AACf;AAAA,YACF;AAAA,UACF;AACA,2BAAiB;AAAA,QACnB;AAAA,QACA,UAAU,CAACA,QAAe;AACxB,2BAAiB,IAAIA,KAAI,KAAK;AAC9B,iBAAO,MAAM,iBAAiB,OAAOA,GAAE;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IAOA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY;AAAA,EAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EAEvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,KAAC,aAAa,CAAC,iBAAiB,QAAQ,iBAAiB;AAAA,EAE3D,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO,CAAC,gBAAgB,SAAS,OAAO,UAAU,SAAS,EAAnD,gBAAgB;AAC1B;AAEA,SAAS,iBAAuC;AAC9C,SAAO,oBAAI,IAAI;AACjB;",
   "names": ["id"]
 }

package/dist/jsx/index.js

@@ -1,7 +1,3 @@
 export * from "./AnimatePresence";
-export * from "./usePresence";
-import { PresenceContext } from "./PresenceContext";
-export {
-  PresenceContext
-};
+export * from "@tamagui/use-presence";
 //# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './AnimatePresence'\nexport * from './usePresence'\nexport { PresenceContext } from './PresenceContext'\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,SAAS,uBAAuB;",
+  "sourcesContent": ["export * from './AnimatePresence'\nexport * from '@tamagui/use-presence'\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animate-presence",
-  "version": "1.0.1-beta.193",
+  "version": "1.0.1-beta.194",
   "source": "src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -14,10 +14,11 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.193"
+    "@tamagui/core": "^1.0.1-beta.194",
+    "@tamagui/use-presence": "^1.0.1-beta.194"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.193"
+    "@tamagui/build": "^1.0.1-beta.194"
   },
   "scripts": {
     "build": "tamagui-build",

package/src/AnimatePresence.tsx

@@ -1,9 +1,4 @@
-import {
-  useForceUpdate,
-  useIsMounted,
-  useIsomorphicLayoutEffect,
-  useUnmountEffect,
-} from '@tamagui/core'
+import { useForceUpdate, useIsomorphicLayoutEffect } from '@tamagui/core'
 import React, {
   Children,
   ReactElement,
@@ -11,6 +6,7 @@ import React, {
   cloneElement,
   isValidElement,
   useContext,
+  useEffect,
   useRef,
 } from 'react'
 
@@ -121,7 +117,7 @@ export const AnimatePresence: React.FunctionComponent<
   const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender
   if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup
 
-  const isMounted = useIsMounted()
+  const isMounted = useRef(false)
 
   // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
   const filteredChildren = onlyElements(children)
@@ -140,18 +136,23 @@ export const AnimatePresence: React.FunctionComponent<
   // we play onMount animations or not.
   const isInitialRender = useRef(true)
 
+  useEffect(() => {
+    isMounted.current = true
+    return () => {
+      isMounted.current = false
+      isInitialRender.current = true
+      allChildren.clear()
+      exiting.clear()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   useIsomorphicLayoutEffect(() => {
     isInitialRender.current = false
     updateChildLookup(filteredChildren, allChildren)
     presentChildren.current = childrenToRender
   })
 
-  useUnmountEffect(() => {
-    isInitialRender.current = true
-    allChildren.clear()
-    exiting.clear()
-  })
-
   if (isInitialRender.current) {
     return (
       <>

package/src/PresenceChild.tsx

@@ -1,7 +1,7 @@
-import { useConstant, useId } from '@tamagui/core'
+import { PresenceContext, PresenceContextProps } from '@tamagui/use-presence'
 import * as React from 'react'
+import { useId } from 'react'
 
-import { PresenceContext, PresenceContextProps } from './PresenceContext'
 import { VariantLabels } from './types'
 
 interface PresenceChildProps {
@@ -24,7 +24,7 @@ export const PresenceChild = ({
   enterVariant,
   presenceAffectsLayout,
 }: PresenceChildProps) => {
-  const presenceChildren = useConstant(newChildrenMap)
+  const presenceChildren = React.useMemo(newChildrenMap, [])
   const id = useId() || ''
 
   const context = React.useMemo(

package/src/index.ts

@@ -1,3 +1,2 @@
 export * from './AnimatePresence'
-export * from './usePresence'
-export { PresenceContext } from './PresenceContext'
+export * from '@tamagui/use-presence'

package/types/index.d.ts

@@ -1,4 +1,3 @@
 export * from './AnimatePresence';
-export * from './usePresence';
-export { PresenceContext } from './PresenceContext';
+export * from '@tamagui/use-presence';
 //# sourceMappingURL=index.d.ts.map

package/src/PresenceContext.tsx

@@ -1,16 +0,0 @@
-import { createContext } from 'react'
-
-import { VariantLabels } from './types'
-
-export interface PresenceContextProps {
-  id: string
-  isPresent: boolean
-  register: (id: string) => () => void
-  onExitComplete?: (id: string) => void
-  initial?: false | VariantLabels
-  custom?: any
-  exitVariant?: string | null
-  enterVariant?: string | null
-}
-
-export const PresenceContext = createContext<PresenceContextProps | null>(null)

package/src/usePresence.ts

@@ -1,37 +0,0 @@
-import { useId } from '@tamagui/core'
-import { useContext, useEffect } from 'react'
-
-import { PresenceContext, PresenceContextProps } from './PresenceContext'
-
-export type SafeToRemove = () => void
-type AlwaysPresent = [true, null]
-type Present = [true]
-type NotPresent = [false, SafeToRemove]
-
-export function usePresence(): AlwaysPresent | Present | NotPresent {
-  const context = useContext(PresenceContext)
-
-  if (context === null) {
-    return [true, null]
-  }
-
-  const { isPresent, onExitComplete, register } = context
-  const id = useId() || ''
-  useEffect(() => register(id), [id, register])
-
-  const safeToRemove = () => onExitComplete?.(id)
-
-  return !isPresent && onExitComplete ? [false, safeToRemove] : [true]
-}
-
-/**
- * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
- * There is no `safeToRemove` function. ```
- */
-export function useIsPresent() {
-  return isPresent(useContext(PresenceContext))
-}
-
-export function isPresent(context: PresenceContextProps | null) {
-  return context === null ? true : context.isPresent
-}