@tamagui/animate-presence 1.0.0-beta.0.209 → 1.0.0-beta.1

package/dist/cjs/AnimatePresence.js

@@ -66,7 +66,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
   const [isMounted, setIsMounted] = (0, import_react.useState)(false);
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_core.useIsomorphicLayoutEffect)(() => {
     setIsMounted(true);
   }, []);
   const filteredChildren = onlyElements(children);

package/dist/cjs/AnimatePresence.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimatePresence.tsx"],
-  "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  useLayoutEffect,\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\n  useLayoutEffect(() => {\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\nAnimatePresence.displayName = 'AnimatePresence'\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  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\n  useIsomorphicLayoutEffect(() => {\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\nAnimatePresence.displayName = 'AnimatePresence'\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/AnimatePresence.js

@@ -6,7 +6,6 @@ import React, {
   cloneElement,
   isValidElement,
   useContext,
-  useLayoutEffect,
   useRef,
   useState
 } from "react";
@@ -50,7 +49,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
   const [isMounted, setIsMounted] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setIsMounted(true);
   }, []);
   const filteredChildren = onlyElements(children);

package/dist/esm/AnimatePresence.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimatePresence.tsx"],
-  "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  useLayoutEffect,\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\n  useLayoutEffect(() => {\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\nAnimatePresence.displayName = 'AnimatePresence'\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  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\n  useIsomorphicLayoutEffect(() => {\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\nAnimatePresence.displayName = 'AnimatePresence'\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/AnimatePresence.js

@@ -6,7 +6,6 @@ import React, {
   cloneElement,
   isValidElement,
   useContext,
-  useLayoutEffect,
   useRef,
   useState
 } from "react";
@@ -50,7 +49,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
   if (forceRenderLayoutGroup)
     forceRender = forceRenderLayoutGroup;
   const [isMounted, setIsMounted] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setIsMounted(true);
   }, []);
   const filteredChildren = onlyElements(children);

package/package.json

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

package/types/AnimatePresence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatePresence.d.ts","sourceRoot":"","sources":["../src/AnimatePresence.tsx"],"names":[],"mappings":"AACA,OAAO,KAWN,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,oBAAoB;IAKnC,OAAO,CAAC,EAAE,OAAO,CAAA;IAOjB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAE3B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAK5B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAM3B,eAAe,CAAC,EAAE,OAAO,CAAA;IAMzB,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAuED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CACnD,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAwK9C,CAAA"}
+{"version":3,"file":"AnimatePresence.d.ts","sourceRoot":"","sources":["../src/AnimatePresence.tsx"],"names":[],"mappings":"AACA,OAAO,KASN,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,oBAAoB;IAKnC,OAAO,CAAC,EAAE,OAAO,CAAA;IAOjB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAE3B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAK5B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAM3B,eAAe,CAAC,EAAE,OAAO,CAAA;IAMzB,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAuED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CACnD,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAwK9C,CAAA"}