@tamagui/animate-presence 1.0.1-beta.69 → 1.0.1-beta.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/cjs/AnimatePresence.js +5 -8
  2. package/dist/cjs/AnimatePresence.js.map +2 -2
  3. package/dist/cjs/PresenceChild.js +13 -15
  4. package/dist/cjs/PresenceChild.js.map +2 -2
  5. package/dist/cjs/{AnimatePresenceContext.js → PresenceContext.js} +7 -7
  6. package/dist/cjs/PresenceContext.js.map +7 -0
  7. package/dist/cjs/index.js +4 -4
  8. package/dist/cjs/index.js.map +2 -2
  9. package/dist/cjs/types.js.map +1 -1
  10. package/dist/cjs/{useEntering.js → usePresence.js} +24 -26
  11. package/dist/cjs/usePresence.js.map +7 -0
  12. package/dist/esm/AnimatePresence.js +12 -11
  13. package/dist/esm/AnimatePresence.js.map +2 -2
  14. package/dist/esm/PresenceChild.js +13 -15
  15. package/dist/esm/PresenceChild.js.map +2 -2
  16. package/dist/esm/PresenceContext.js +6 -0
  17. package/dist/esm/PresenceContext.js.map +7 -0
  18. package/dist/esm/index.js +3 -3
  19. package/dist/esm/index.js.map +1 -1
  20. package/dist/esm/usePresence.js +31 -0
  21. package/dist/esm/usePresence.js.map +7 -0
  22. package/dist/jsx/AnimatePresence.js +12 -11
  23. package/dist/jsx/PresenceChild.js +13 -15
  24. package/dist/jsx/PresenceContext.js +5 -0
  25. package/dist/jsx/index.js +3 -3
  26. package/dist/jsx/usePresence.js +30 -0
  27. package/package.json +4 -3
  28. package/src/AnimatePresence.tsx +13 -47
  29. package/src/PresenceChild.tsx +17 -21
  30. package/src/{AnimatePresenceContext.tsx → PresenceContext.tsx} +4 -3
  31. package/src/index.ts +2 -2
  32. package/src/types.ts +70 -0
  33. package/src/usePresence.ts +37 -0
  34. package/types/AnimatePresence.d.ts +1 -8
  35. package/types/AnimatePresence.d.ts.map +1 -1
  36. package/types/LayoutGroupContext.d.ts +0 -0
  37. package/types/LayoutGroupContext.d.ts.map +0 -0
  38. package/types/PresenceChild.d.ts +4 -3
  39. package/types/PresenceChild.d.ts.map +1 -1
  40. package/types/{AnimatePresenceContext.d.ts → PresenceContext.d.ts} +5 -4
  41. package/types/PresenceContext.d.ts.map +1 -0
  42. package/types/index.d.ts +2 -2
  43. package/types/index.d.ts.map +1 -1
  44. package/types/types.d.ts +9 -0
  45. package/types/types.d.ts.map +1 -1
  46. package/types/usePresence.d.ts +10 -0
  47. package/types/usePresence.d.ts.map +1 -0
  48. package/dist/cjs/AnimatePresenceContext.js.map +0 -7
  49. package/dist/cjs/useEntering.js.map +0 -7
  50. package/dist/esm/AnimatePresenceContext.js +0 -6
  51. package/dist/esm/AnimatePresenceContext.js.map +0 -7
  52. package/dist/esm/useEntering.js +0 -33
  53. package/dist/esm/useEntering.js.map +0 -7
  54. package/dist/jsx/AnimatePresenceContext.js +0 -5
  55. package/dist/jsx/useEntering.js +0 -32
  56. package/src/useEntering.ts +0 -43
  57. package/types/AnimatePresenceContext.d.ts.map +0 -1
  58. package/types/useEntering.d.ts +0 -6
  59. package/types/useEntering.d.ts.map +0 -1
@@ -75,10 +75,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
75
75
  const forceRenderLayoutGroup = (0, import_react.useContext)(import_LayoutGroupContext.LayoutGroupContext).forceRender;
76
76
  if (forceRenderLayoutGroup)
77
77
  forceRender = forceRenderLayoutGroup;
78
- const [isMounted, setIsMounted] = (0, import_react.useState)(false);
79
- (0, import_core.useIsomorphicLayoutEffect)(() => {
80
- setIsMounted(true);
81
- }, []);
78
+ const isMounted = (0, import_core.useIsMounted)();
82
79
  const filteredChildren = onlyElements(children);
83
80
  let childrenToRender = filteredChildren;
84
81
  const exiting = /* @__PURE__ */ new Set();
@@ -98,7 +95,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
98
95
  if (isInitialRender.current) {
99
96
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, childrenToRender.map((child) => /* @__PURE__ */ import_react.default.createElement(import_PresenceChild.PresenceChild, {
100
97
  key: getChildKey(child),
101
- isEntering: true,
98
+ isPresent: true,
102
99
  exitVariant,
103
100
  enterVariant,
104
101
  initial: initial ? void 0 : false,
@@ -127,7 +124,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
127
124
  const insertionIndex = presentKeys.indexOf(key);
128
125
  childrenToRender.splice(insertionIndex, 0, /* @__PURE__ */ import_react.default.createElement(import_PresenceChild.PresenceChild, {
129
126
  key: getChildKey(child),
130
- isEntering: false,
127
+ isPresent: false,
131
128
  onExitComplete: () => {
132
129
  allChildren.delete(key);
133
130
  exiting.delete(key);
@@ -135,7 +132,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
135
132
  presentChildren.current.splice(removeIndex, 1);
136
133
  if (!exiting.size) {
137
134
  presentChildren.current = filteredChildren;
138
- if (isMounted === false)
135
+ if (isMounted.current === false)
139
136
  return;
140
137
  forceRender();
141
138
  onExitComplete == null ? void 0 : onExitComplete();
@@ -150,7 +147,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
150
147
  const key = child.key;
151
148
  return exiting.has(key) ? child : /* @__PURE__ */ import_react.default.createElement(import_PresenceChild.PresenceChild, {
152
149
  key: getChildKey(child),
153
- isEntering: void 0,
150
+ isPresent: true,
154
151
  exitVariant,
155
152
  enterVariant,
156
153
  presenceAffectsLayout
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/AnimatePresence.tsx"],
4
- "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, index) => {\n if (isValidElement(child)) {\n if (!child.key) {\n if (process.env.NODE_ENV === 'development') {\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 * `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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA4E;AAC5E,mBASO;AAEP,gCAAmC;AACnC,2BAA8B;AAE9B,qBAAM;AAsCN,MAAM,cAAc,wBAAC,UAA2C,MAAM,OAAO,IAAzD;AAEpB,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,2BACE,UACA,aACA;AACA,QAAM,eAAe,QAAQ,oBAAI,IAAkB,IAAI;AAEvD,WAAS,QAAQ,CAAC,UAAU;AAC1B,UAAM,MAAM,YAAY,KAAK;AAE7B,QAAI,SAAS,gBAAgB,aAAa,IAAI,GAAG,GAAG;AAClD,cAAQ,KAAK,qDAAqD,sBAAsB;AAExF,mBAAa,IAAI,GAAG;AAAA,IACtB;AAEA,gBAAY,IAAI,KAAK,KAAK;AAAA,EAC5B,CAAC;AACH;AAjBS;AAmBT,sBAAsB,UAA0C;AAC9D,QAAM,WAAgC,CAAC;AAGvC,wBAAS,QAAQ,UAAU,CAAC,OAAO,UAAU;AAC3C,QAAI,iCAAe,KAAK,GAAG;AACzB,UAAI,CAAC,MAAM,KAAK;AACd,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,kBAAQ,KAAK,+DAA+D;AAAA,QAC9E;AACA,iBAAS,KACP,qBAAM,aAAa,OAAO;AAAA,UACxB,KAAK;AAAA,QACP,CAAC,CACH;AAAA,MACF,OAAO;AACL,iBAAS,KAAK,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAtBS;AAyDF,MAAM,kBAET,wBAAC;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,MACpB;AAGJ,MAAI,cAAc,gCAAe;AACjC,QAAM,yBAAyB,6BAAW,4CAAkB,EAAE;AAC9D,MAAI;AAAwB,kBAAc;AAE1C,QAAM,CAAC,WAAW,gBAAgB,2BAAS,KAAK;AAEhD,6CAA0B,MAAM;AAC9B,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,CAAC;AAGL,QAAM,mBAAmB,aAAa,QAAQ;AAC9C,MAAI,mBAAmB;AAEvB,QAAM,UAAU,oBAAI,IAAkB;AAItC,QAAM,kBAAkB,yBAAO,gBAAgB;AAG/C,QAAM,cAAc,yBAAO,oBAAI,IAAqC,CAAC,EAAE;AAIvE,QAAM,kBAAkB,yBAAO,IAAI;AAEnC,6CAA0B,MAAM;AAC9B,oBAAgB,UAAU;AAC1B,sBAAkB,kBAAkB,WAAW;AAC/C,oBAAgB,UAAU;AAAA,EAC5B,CAAC;AAED,oCAAiB,MAAM;AACrB,oBAAgB,UAAU;AAC1B,gBAAY,MAAM;AAClB,YAAQ,MAAM;AAAA,EAChB,CAAC;AAED,MAAI,gBAAgB,SAAS;AAC3B,WACE,wFACG,iBAAiB,IAAI,CAAC,UACrB,mDAAC;AAAA,MACC,KAAK,YAAY,KAAK;AAAA,MACtB,YAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS,UAAU,SAAY;AAAA,MAC/B;AAAA,OAEC,KACH,CACD,CACH;AAAA,EAEJ;AAGA,qBAAmB,CAAC,GAAG,gBAAgB;AAIvC,QAAM,cAAc,gBAAgB,QAAQ,IAAI,WAAW;AAC3D,QAAM,aAAa,iBAAiB,IAAI,WAAW;AAGnD,QAAM,aAAa,YAAY;AAC/B,WAAS,IAAI,GAAG,IAAI,YAAY,KAAK;AACnC,UAAM,MAAM,YAAY;AAExB,QAAI,WAAW,QAAQ,GAAG,MAAM,IAAI;AAClC,cAAQ,IAAI,GAAG;AAAA,IACjB;AAAA,EACF;AAIA,MAAI,mBAAmB,QAAQ,MAAM;AACnC,uBAAmB,CAAC;AAAA,EACtB;AAIA,UAAQ,QAAQ,CAAC,QAAQ;AAEvB,QAAI,WAAW,QAAQ,GAAG,MAAM;AAAI;AAEpC,UAAM,QAAQ,YAAY,IAAI,GAAG;AACjC,QAAI,CAAC;AAAO;AAEZ,UAAM,iBAAiB,YAAY,QAAQ,GAAG;AAE9C,qBAAiB,OACf,gBACA,GACA,mDAAC;AAAA,MACC,KAAK,YAAY,KAAK;AAAA,MACtB,YAAY;AAAA,MACZ,gBAAgB,MAAM;AACpB,oBAAY,OAAO,GAAG;AACtB,gBAAQ,OAAO,GAAG;AAGlB,cAAM,cAAc,gBAAgB,QAAQ,UAC1C,CAAC,iBAAiB,aAAa,QAAQ,GACzC;AACA,wBAAgB,QAAQ,OAAO,aAAa,CAAC;AAG7C,YAAI,CAAC,QAAQ,MAAM;AACjB,0BAAgB,UAAU;AAE1B,cAAI,cAAc;AAAO;AAEzB,sBAAY;AACZ;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OAEC,KACH,CACF;AAAA,EACF,CAAC;AAID,qBAAmB,iBAAiB,IAAI,CAAC,UAAU;AACjD,UAAM,MAAM,MAAM;AAClB,WAAO,QAAQ,IAAI,GAAG,IACpB,QAEA,mDAAC;AAAA,MACC,KAAK,YAAY,KAAK;AAAA,MACtB,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,OAEC,KACH;AAAA,EAEJ,CAAC;AAED,MAAI,QAAQ,IAAI,aAAa,gBAAgB,mBAAmB,iBAAiB,SAAS,GAAG;AAC3F,YAAQ,KACN,6JACF;AAAA,EACF;AAEA,SACE,wFAAG,QAAQ,OAAO,mBAAmB,iBAAiB,IAAI,CAAC,UAAU,+BAAa,KAAK,CAAC,CAAE;AAE9F,GAvKI;AAyKJ,gBAAgB,cAAc;",
4
+ "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 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 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 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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -26,11 +26,11 @@ __export(PresenceChild_exports, {
26
26
  module.exports = __toCommonJS(PresenceChild_exports);
27
27
  var import_core = require("@tamagui/core");
28
28
  var React = __toESM(require("react"));
29
- var import_AnimatePresenceContext = require("./AnimatePresenceContext");
29
+ var import_PresenceContext = require("./PresenceContext");
30
30
  const PresenceChild = /* @__PURE__ */ __name(({
31
31
  children,
32
32
  initial,
33
- isEntering,
33
+ isPresent,
34
34
  onExitComplete,
35
35
  exitVariant,
36
36
  enterVariant,
@@ -42,11 +42,11 @@ const PresenceChild = /* @__PURE__ */ __name(({
42
42
  return {
43
43
  id,
44
44
  initial,
45
- isEntering,
45
+ isPresent,
46
46
  exitVariant,
47
47
  enterVariant,
48
- onExitComplete: (childId) => {
49
- presenceChildren.set(childId, true);
48
+ onExitComplete: (id2) => {
49
+ presenceChildren.set(id2, true);
50
50
  for (const isComplete of presenceChildren.values()) {
51
51
  if (!isComplete) {
52
52
  return;
@@ -54,21 +54,19 @@ const PresenceChild = /* @__PURE__ */ __name(({
54
54
  }
55
55
  onExitComplete == null ? void 0 : onExitComplete();
56
56
  },
57
- register: (childId) => {
58
- presenceChildren.set(childId, false);
59
- return () => presenceChildren.delete(childId);
57
+ register: (id2) => {
58
+ presenceChildren.set(id2, false);
59
+ return () => presenceChildren.delete(id2);
60
60
  }
61
61
  };
62
- }, presenceAffectsLayout ? void 0 : [isEntering, onExitComplete, exitVariant, enterVariant]);
62
+ }, presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]);
63
63
  React.useMemo(() => {
64
64
  presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
65
- }, [isEntering]);
65
+ }, [isPresent]);
66
66
  React.useEffect(() => {
67
- if (isEntering === false && !presenceChildren.size) {
68
- onExitComplete == null ? void 0 : onExitComplete();
69
- }
70
- }, [isEntering]);
71
- return /* @__PURE__ */ React.createElement(import_AnimatePresenceContext.AnimatePresenceContext.Provider, {
67
+ !isPresent && !presenceChildren.size && (onExitComplete == null ? void 0 : onExitComplete());
68
+ }, [isPresent]);
69
+ return /* @__PURE__ */ React.createElement(import_PresenceContext.PresenceContext.Provider, {
72
70
  value: context
73
71
  }, children);
74
72
  }, "PresenceChild");
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PresenceChild.tsx"],
4
- "sourcesContent": ["import { useConstant, useId } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { AnimatePresenceContext, AnimatePresenceContextProps } from './AnimatePresenceContext'\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n children: React.ReactElement<any>\n isEntering: boolean | undefined\n onExitComplete?: () => void\n initial?: false | VariantLabels\n exitVariant?: string | null\n enterVariant?: string | null\n presenceAffectsLayout: boolean\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isEntering,\n onExitComplete,\n exitVariant,\n enterVariant,\n presenceAffectsLayout,\n}: PresenceChildProps) => {\n const presenceChildren = useConstant(newChildrenMap)\n const id = useId() || ''\n\n const context = React.useMemo(\n (): AnimatePresenceContextProps => {\n return {\n id,\n initial,\n isEntering,\n exitVariant,\n enterVariant,\n onExitComplete: (childId: string) => {\n presenceChildren.set(childId, true)\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) {\n return // can stop searching when any is incomplete\n }\n }\n onExitComplete?.()\n },\n register: (childId: string) => {\n presenceChildren.set(childId, false)\n return () => presenceChildren.delete(childId)\n },\n }\n },\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n presenceAffectsLayout ? undefined : [isEntering, onExitComplete, exitVariant, enterVariant]\n )\n\n // cant this be a useEffect?\n React.useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n }, [isEntering])\n\n /**\n * If there's no animated components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n if (isEntering === false && !presenceChildren.size) {\n onExitComplete?.()\n }\n }, [isEntering])\n\n return (\n <AnimatePresenceContext.Provider value={context}>{children}</AnimatePresenceContext.Provider>\n )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n return new Map()\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,YAAuB;AAEvB,oCAAoE;AAa7D,MAAM,gBAAgB,wBAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,mBAAmB,6BAAY,cAAc;AACnD,QAAM,KAAK,uBAAM,KAAK;AAEtB,QAAM,UAAU,MAAM,QACpB,MAAmC;AACjC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC,YAAoB;AACnC,yBAAiB,IAAI,SAAS,IAAI;AAClC,mBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AAAA,QACF;AACA;AAAA,MACF;AAAA,MACA,UAAU,CAAC,YAAoB;AAC7B,yBAAiB,IAAI,SAAS,KAAK;AACnC,eAAO,MAAM,iBAAiB,OAAO,OAAO;AAAA,MAC9C;AAAA,IACF;AAAA,EACF,GAMA,wBAAwB,SAAY,CAAC,YAAY,gBAAgB,aAAa,YAAY,CAC5F;AAGA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EACvE,GAAG,CAAC,UAAU,CAAC;AAMf,QAAM,UAAU,MAAM;AACpB,QAAI,eAAe,SAAS,CAAC,iBAAiB,MAAM;AAClD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,oCAAC,qDAAuB,UAAvB;AAAA,IAAgC,OAAO;AAAA,KAAU,QAAS;AAE/D,GA7D6B;AA+D7B,0BAAgD;AAC9C,SAAO,oBAAI,IAAI;AACjB;AAFS;",
4
+ "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 presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]\n )\n\n React.useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n }, [isPresent])\n\n /**\n * If there's no animated components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent && !presenceChildren.size && onExitComplete?.()\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,YAAuB;AAEvB,6BAAsD;AAc/C,MAAM,gBAAgB,wBAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,mBAAmB,6BAAY,cAAc;AACnD,QAAM,KAAK,uBAAM,KAAK;AAEtB,QAAM,UAAU,MAAM,QACpB,MAA4B;AAC1B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC,QAAe;AAC9B,yBAAiB,IAAI,KAAI,IAAI;AAC7B,mBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AAAA,QACF;AACA;AAAA,MACF;AAAA,MACA,UAAU,CAAC,QAAe;AACxB,yBAAiB,IAAI,KAAI,KAAK;AAC9B,eAAO,MAAM,iBAAiB,OAAO,GAAE;AAAA,MACzC;AAAA,IACF;AAAA,EACF,GAMA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY,CAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EACvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,KAAC,aAAa,CAAC,iBAAiB,QAAQ;AAAA,EAC1C,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO,oCAAC,uCAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,KAAU,QAAS;AAC7D,GAxD6B;AA0D7B,0BAAgD;AAC9C,SAAO,oBAAI,IAAI;AACjB;AAFS;",
6
6
  "names": []
7
7
  }
@@ -15,15 +15,15 @@ var __copyProps = (to, from, except, desc) => {
15
15
  return to;
16
16
  };
17
17
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
- var AnimatePresenceContext_exports = {};
19
- __export(AnimatePresenceContext_exports, {
20
- AnimatePresenceContext: () => AnimatePresenceContext
18
+ var PresenceContext_exports = {};
19
+ __export(PresenceContext_exports, {
20
+ PresenceContext: () => PresenceContext
21
21
  });
22
- module.exports = __toCommonJS(AnimatePresenceContext_exports);
22
+ module.exports = __toCommonJS(PresenceContext_exports);
23
23
  var import_react = require("react");
24
- const AnimatePresenceContext = (0, import_react.createContext)(null);
24
+ const PresenceContext = (0, import_react.createContext)(null);
25
25
  // Annotate the CommonJS export names for ESM import in node:
26
26
  0 && (module.exports = {
27
- AnimatePresenceContext
27
+ PresenceContext
28
28
  });
29
- //# sourceMappingURL=AnimatePresenceContext.js.map
29
+ //# sourceMappingURL=PresenceContext.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/PresenceContext.tsx"],
4
+ "sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface PresenceContextProps {\n id: string\n isPresent: boolean\n register: (id: string) => () => void\n onExitComplete?: (id: string) => void\n initial?: false | VariantLabels\n custom?: any\n exitVariant?: string | null\n enterVariant?: string | null\n}\n\nexport const PresenceContext = createContext<PresenceContextProps | null>(null)\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAevB,MAAM,kBAAkB,gCAA2C,IAAI;",
6
+ "names": []
7
+ }
package/dist/cjs/index.js CHANGED
@@ -18,14 +18,14 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
19
  var src_exports = {};
20
20
  __export(src_exports, {
21
- AnimatePresenceContext: () => import_AnimatePresenceContext.AnimatePresenceContext
21
+ PresenceContext: () => import_PresenceContext.PresenceContext
22
22
  });
23
23
  module.exports = __toCommonJS(src_exports);
24
24
  __reExport(src_exports, require("./AnimatePresence"), module.exports);
25
- __reExport(src_exports, require("./useEntering"), module.exports);
26
- var import_AnimatePresenceContext = require("./AnimatePresenceContext");
25
+ __reExport(src_exports, require("./usePresence"), module.exports);
26
+ var import_PresenceContext = require("./PresenceContext");
27
27
  // Annotate the CommonJS export names for ESM import in node:
28
28
  0 && (module.exports = {
29
- AnimatePresenceContext
29
+ PresenceContext
30
30
  });
31
31
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts"],
4
- "sourcesContent": ["export * from './AnimatePresence'\nexport * from './useEntering'\nexport { AnimatePresenceContext } from './AnimatePresenceContext'\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,8BAAd;AACA,wBAAc,0BADd;AAEA,oCAAuC;",
4
+ "sourcesContent": ["export * from './AnimatePresence'\nexport * from './usePresence'\nexport { PresenceContext } from './PresenceContext'\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,8BAAd;AACA,wBAAc,0BADd;AAEA,6BAAgC;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/types.ts"],
4
- "sourcesContent": ["export interface Axis {\n min: number\n max: number\n}\n\nexport interface Box {\n x: Axis\n y: Axis\n}\n\nexport type VariantLabels = string | string[]\n"],
4
+ "sourcesContent": ["export interface Axis {\n min: number\n max: number\n}\n\nexport interface Box {\n x: Axis\n y: Axis\n}\n\nexport type VariantLabels = string | string[]\n\n/**\n * @public\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 * ```jsx\n * <AnimatePresence initial={false}>\n * {isVisible && (\n * <motion.div\n * key=\"modal\"\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * )}\n * </AnimatePresence>\n * ```\n *\n * @public\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 * @public\n */\n custom?: any\n\n /**\n * Fires when all exiting nodes have completed animating out.\n *\n * @public\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 * ```jsx\n * const MyComponent = ({ currentItem }) => (\n * <AnimatePresence exitBeforeEnter>\n * <motion.div key={currentItem} exit={{ opacity: 0 }} />\n * </AnimatePresence>\n * )\n * ```\n *\n * @beta\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 * @internal\n */\n presenceAffectsLayout?: boolean\n\n exitVariant?: string | null\n\n enterVariant?: string | null\n}\n"],
5
5
  "mappings": ";;;;;;;;;;;;;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -16,42 +16,40 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var useEntering_exports = {};
20
- __export(useEntering_exports, {
21
- isEntering: () => isEntering,
22
- useEntering: () => useEntering,
23
- useIsEntering: () => useIsEntering
19
+ var usePresence_exports = {};
20
+ __export(usePresence_exports, {
21
+ isPresent: () => isPresent,
22
+ useIsPresent: () => useIsPresent,
23
+ usePresence: () => usePresence
24
24
  });
25
- module.exports = __toCommonJS(useEntering_exports);
25
+ module.exports = __toCommonJS(usePresence_exports);
26
26
  var import_core = require("@tamagui/core");
27
27
  var import_react = require("react");
28
- var import_AnimatePresenceContext = require("./AnimatePresenceContext");
29
- function useEntering() {
30
- const context = (0, import_react.useContext)(import_AnimatePresenceContext.AnimatePresenceContext);
28
+ var import_PresenceContext = require("./PresenceContext");
29
+ function usePresence() {
30
+ const context = (0, import_react.useContext)(import_PresenceContext.PresenceContext);
31
31
  if (context === null) {
32
- return [void 0, void 0];
32
+ return [true, null];
33
33
  }
34
- const { isEntering: isEntering2, onExitComplete, register } = context;
34
+ const { isPresent: isPresent2, onExitComplete, register } = context;
35
35
  const id = (0, import_core.useId)() || "";
36
+ (0, import_react.useEffect)(() => register(id), []);
36
37
  const safeToRemove = /* @__PURE__ */ __name(() => onExitComplete == null ? void 0 : onExitComplete(id), "safeToRemove");
37
- (0, import_react.useEffect)(() => {
38
- register(id);
39
- }, []);
40
- return isEntering2 === false ? [false, safeToRemove] : isEntering2 === true ? [true, safeToRemove] : [void 0, safeToRemove];
38
+ return !isPresent2 && onExitComplete ? [false, safeToRemove] : [true];
41
39
  }
42
- __name(useEntering, "useEntering");
43
- function useIsEntering() {
44
- return isEntering((0, import_react.useContext)(import_AnimatePresenceContext.AnimatePresenceContext));
40
+ __name(usePresence, "usePresence");
41
+ function useIsPresent() {
42
+ return isPresent((0, import_react.useContext)(import_PresenceContext.PresenceContext));
45
43
  }
46
- __name(useIsEntering, "useIsEntering");
47
- function isEntering(context) {
48
- return context === null ? void 0 : context.isEntering;
44
+ __name(useIsPresent, "useIsPresent");
45
+ function isPresent(context) {
46
+ return context === null ? true : context.isPresent;
49
47
  }
50
- __name(isEntering, "isEntering");
48
+ __name(isPresent, "isPresent");
51
49
  // Annotate the CommonJS export names for ESM import in node:
52
50
  0 && (module.exports = {
53
- isEntering,
54
- useEntering,
55
- useIsEntering
51
+ isPresent,
52
+ useIsPresent,
53
+ usePresence
56
54
  });
57
- //# sourceMappingURL=useEntering.js.map
55
+ //# sourceMappingURL=usePresence.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/usePresence.ts"],
4
+ "sourcesContent": ["import { useId } from '@tamagui/core'\nimport { useContext, useEffect } from 'react'\n\nimport { PresenceContext, PresenceContextProps } from './PresenceContext'\n\nexport type SafeToRemove = () => void\ntype AlwaysPresent = [true, null]\ntype Present = [true]\ntype NotPresent = [false, SafeToRemove]\n\nexport function usePresence(): AlwaysPresent | Present | NotPresent {\n const context = useContext(PresenceContext)\n\n if (context === null) {\n return [true, null]\n }\n\n const { isPresent, onExitComplete, register } = context\n const id = useId() || ''\n useEffect(() => register(id), [])\n\n const safeToRemove = () => onExitComplete?.(id)\n\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true]\n}\n\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function. ```\n */\nexport function useIsPresent() {\n return isPresent(useContext(PresenceContext))\n}\n\nexport function isPresent(context: PresenceContextProps | null) {\n return context === null ? true : context.isPresent\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAsB;AACtB,mBAAsC;AAEtC,6BAAsD;AAO/C,uBAA6D;AAClE,QAAM,UAAU,6BAAW,sCAAe;AAE1C,MAAI,YAAY,MAAM;AACpB,WAAO,CAAC,MAAM,IAAI;AAAA,EACpB;AAEA,QAAM,EAAE,uBAAW,gBAAgB,aAAa;AAChD,QAAM,KAAK,uBAAM,KAAK;AACtB,8BAAU,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC;AAEhC,QAAM,eAAe,6BAAM,iDAAiB,KAAvB;AAErB,SAAO,CAAC,cAAa,iBAAiB,CAAC,OAAO,YAAY,IAAI,CAAC,IAAI;AACrE;AAdgB;AAoBT,wBAAwB;AAC7B,SAAO,UAAU,6BAAW,sCAAe,CAAC;AAC9C;AAFgB;AAIT,mBAAmB,SAAsC;AAC9D,SAAO,YAAY,OAAO,OAAO,QAAQ;AAC3C;AAFgB;",
6
+ "names": []
7
+ }
@@ -1,13 +1,17 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
- import { useForceUpdate, useIsomorphicLayoutEffect, useUnmountEffect } from "@tamagui/core";
3
+ import {
4
+ useForceUpdate,
5
+ useIsMounted,
6
+ useIsomorphicLayoutEffect,
7
+ useUnmountEffect
8
+ } from "@tamagui/core";
4
9
  import React, {
5
10
  Children,
6
11
  cloneElement,
7
12
  isValidElement,
8
13
  useContext,
9
- useRef,
10
- useState
14
+ useRef
11
15
  } from "react";
12
16
  import { LayoutGroupContext } from "./LayoutGroupContext";
13
17
  import { PresenceChild } from "./PresenceChild";
@@ -58,10 +62,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
58
62
  const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
59
63
  if (forceRenderLayoutGroup)
60
64
  forceRender = forceRenderLayoutGroup;
61
- const [isMounted, setIsMounted] = useState(false);
62
- useIsomorphicLayoutEffect(() => {
63
- setIsMounted(true);
64
- }, []);
65
+ const isMounted = useIsMounted();
65
66
  const filteredChildren = onlyElements(children);
66
67
  let childrenToRender = filteredChildren;
67
68
  const exiting = /* @__PURE__ */ new Set();
@@ -81,7 +82,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
81
82
  if (isInitialRender.current) {
82
83
  return /* @__PURE__ */ React.createElement(React.Fragment, null, childrenToRender.map((child) => /* @__PURE__ */ React.createElement(PresenceChild, {
83
84
  key: getChildKey(child),
84
- isEntering: true,
85
+ isPresent: true,
85
86
  exitVariant,
86
87
  enterVariant,
87
88
  initial: initial ? void 0 : false,
@@ -110,7 +111,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
110
111
  const insertionIndex = presentKeys.indexOf(key);
111
112
  childrenToRender.splice(insertionIndex, 0, /* @__PURE__ */ React.createElement(PresenceChild, {
112
113
  key: getChildKey(child),
113
- isEntering: false,
114
+ isPresent: false,
114
115
  onExitComplete: () => {
115
116
  allChildren.delete(key);
116
117
  exiting.delete(key);
@@ -118,7 +119,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
118
119
  presentChildren.current.splice(removeIndex, 1);
119
120
  if (!exiting.size) {
120
121
  presentChildren.current = filteredChildren;
121
- if (isMounted === false)
122
+ if (isMounted.current === false)
122
123
  return;
123
124
  forceRender();
124
125
  onExitComplete == null ? void 0 : onExitComplete();
@@ -133,7 +134,7 @@ const AnimatePresence = /* @__PURE__ */ __name(({
133
134
  const key = child.key;
134
135
  return exiting.has(key) ? child : /* @__PURE__ */ React.createElement(PresenceChild, {
135
136
  key: getChildKey(child),
136
- isEntering: void 0,
137
+ isPresent: true,
137
138
  exitVariant,
138
139
  enterVariant,
139
140
  presenceAffectsLayout
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/AnimatePresence.tsx"],
4
- "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, index) => {\n if (isValidElement(child)) {\n if (!child.key) {\n if (process.env.NODE_ENV === 'development') {\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 * `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"],
5
- "mappings": "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",
4
+ "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 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 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 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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
3
  import { useConstant, useId } from "@tamagui/core";
4
4
  import * as React from "react";
5
- import { AnimatePresenceContext } from "./AnimatePresenceContext";
5
+ import { PresenceContext } from "./PresenceContext";
6
6
  const PresenceChild = /* @__PURE__ */ __name(({
7
7
  children,
8
8
  initial,
9
- isEntering,
9
+ isPresent,
10
10
  onExitComplete,
11
11
  exitVariant,
12
12
  enterVariant,
@@ -18,11 +18,11 @@ const PresenceChild = /* @__PURE__ */ __name(({
18
18
  return {
19
19
  id,
20
20
  initial,
21
- isEntering,
21
+ isPresent,
22
22
  exitVariant,
23
23
  enterVariant,
24
- onExitComplete: (childId) => {
25
- presenceChildren.set(childId, true);
24
+ onExitComplete: (id2) => {
25
+ presenceChildren.set(id2, true);
26
26
  for (const isComplete of presenceChildren.values()) {
27
27
  if (!isComplete) {
28
28
  return;
@@ -30,21 +30,19 @@ const PresenceChild = /* @__PURE__ */ __name(({
30
30
  }
31
31
  onExitComplete == null ? void 0 : onExitComplete();
32
32
  },
33
- register: (childId) => {
34
- presenceChildren.set(childId, false);
35
- return () => presenceChildren.delete(childId);
33
+ register: (id2) => {
34
+ presenceChildren.set(id2, false);
35
+ return () => presenceChildren.delete(id2);
36
36
  }
37
37
  };
38
- }, presenceAffectsLayout ? void 0 : [isEntering, onExitComplete, exitVariant, enterVariant]);
38
+ }, presenceAffectsLayout ? void 0 : [isPresent, exitVariant, enterVariant]);
39
39
  React.useMemo(() => {
40
40
  presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
41
- }, [isEntering]);
41
+ }, [isPresent]);
42
42
  React.useEffect(() => {
43
- if (isEntering === false && !presenceChildren.size) {
44
- onExitComplete == null ? void 0 : onExitComplete();
45
- }
46
- }, [isEntering]);
47
- return /* @__PURE__ */ React.createElement(AnimatePresenceContext.Provider, {
43
+ !isPresent && !presenceChildren.size && (onExitComplete == null ? void 0 : onExitComplete());
44
+ }, [isPresent]);
45
+ return /* @__PURE__ */ React.createElement(PresenceContext.Provider, {
48
46
  value: context
49
47
  }, children);
50
48
  }, "PresenceChild");
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PresenceChild.tsx"],
4
- "sourcesContent": ["import { useConstant, useId } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { AnimatePresenceContext, AnimatePresenceContextProps } from './AnimatePresenceContext'\nimport { VariantLabels } from './types'\n\ninterface PresenceChildProps {\n children: React.ReactElement<any>\n isEntering: boolean | undefined\n onExitComplete?: () => void\n initial?: false | VariantLabels\n exitVariant?: string | null\n enterVariant?: string | null\n presenceAffectsLayout: boolean\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isEntering,\n onExitComplete,\n exitVariant,\n enterVariant,\n presenceAffectsLayout,\n}: PresenceChildProps) => {\n const presenceChildren = useConstant(newChildrenMap)\n const id = useId() || ''\n\n const context = React.useMemo(\n (): AnimatePresenceContextProps => {\n return {\n id,\n initial,\n isEntering,\n exitVariant,\n enterVariant,\n onExitComplete: (childId: string) => {\n presenceChildren.set(childId, true)\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) {\n return // can stop searching when any is incomplete\n }\n }\n onExitComplete?.()\n },\n register: (childId: string) => {\n presenceChildren.set(childId, false)\n return () => presenceChildren.delete(childId)\n },\n }\n },\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n presenceAffectsLayout ? undefined : [isEntering, onExitComplete, exitVariant, enterVariant]\n )\n\n // cant this be a useEffect?\n React.useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n }, [isEntering])\n\n /**\n * If there's no animated components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n if (isEntering === false && !presenceChildren.size) {\n onExitComplete?.()\n }\n }, [isEntering])\n\n return (\n <AnimatePresenceContext.Provider value={context}>{children}</AnimatePresenceContext.Provider>\n )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n return new Map()\n}\n"],
5
- "mappings": ";;AAAA;AACA;AAEA;AAaO,MAAM,gBAAgB,wBAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,mBAAmB,YAAY,cAAc;AACnD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM,QACpB,MAAmC;AACjC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC,YAAoB;AACnC,yBAAiB,IAAI,SAAS,IAAI;AAClC,mBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AAAA,QACF;AACA;AAAA,MACF;AAAA,MACA,UAAU,CAAC,YAAoB;AAC7B,yBAAiB,IAAI,SAAS,KAAK;AACnC,eAAO,MAAM,iBAAiB,OAAO,OAAO;AAAA,MAC9C;AAAA,IACF;AAAA,EACF,GAMA,wBAAwB,SAAY,CAAC,YAAY,gBAAgB,aAAa,YAAY,CAC5F;AAGA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EACvE,GAAG,CAAC,UAAU,CAAC;AAMf,QAAM,UAAU,MAAM;AACpB,QAAI,eAAe,SAAS,CAAC,iBAAiB,MAAM;AAClD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,oCAAC,uBAAuB,UAAvB;AAAA,IAAgC,OAAO;AAAA,KAAU,QAAS;AAE/D,GA7D6B;AA+D7B,0BAAgD;AAC9C,SAAO,oBAAI,IAAI;AACjB;AAFS;",
4
+ "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 presenceAffectsLayout ? undefined : [isPresent, exitVariant, enterVariant]\n )\n\n React.useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n }, [isPresent])\n\n /**\n * If there's no animated components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent && !presenceChildren.size && onExitComplete?.()\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"],
5
+ "mappings": ";;AAAA;AACA;AAEA;AAcO,MAAM,gBAAgB,wBAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,mBAAmB,YAAY,cAAc;AACnD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,UAAU,MAAM,QACpB,MAA4B;AAC1B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC,QAAe;AAC9B,yBAAiB,IAAI,KAAI,IAAI;AAC7B,mBAAW,cAAc,iBAAiB,OAAO,GAAG;AAClD,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AAAA,QACF;AACA;AAAA,MACF;AAAA,MACA,UAAU,CAAC,QAAe;AACxB,yBAAiB,IAAI,KAAI,KAAK;AAC9B,eAAO,MAAM,iBAAiB,OAAO,GAAE;AAAA,MACzC;AAAA,IACF;AAAA,EACF,GAMA,wBAAwB,SAAY,CAAC,WAAW,aAAa,YAAY,CAC3E;AAEA,QAAM,QAAQ,MAAM;AAClB,qBAAiB,QAAQ,CAAC,GAAG,QAAQ,iBAAiB,IAAI,KAAK,KAAK,CAAC;AAAA,EACvE,GAAG,CAAC,SAAS,CAAC;AAMd,QAAM,UAAU,MAAM;AACpB,KAAC,aAAa,CAAC,iBAAiB,QAAQ;AAAA,EAC1C,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO,oCAAC,gBAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,KAAU,QAAS;AAC7D,GAxD6B;AA0D7B,0BAAgD;AAC9C,SAAO,oBAAI,IAAI;AACjB;AAFS;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,6 @@
1
+ import { createContext } from "react";
2
+ const PresenceContext = createContext(null);
3
+ export {
4
+ PresenceContext
5
+ };
6
+ //# sourceMappingURL=PresenceContext.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/PresenceContext.tsx"],
4
+ "sourcesContent": ["import { createContext } from 'react'\n\nimport { VariantLabels } from './types'\n\nexport interface PresenceContextProps {\n id: string\n isPresent: boolean\n register: (id: string) => () => void\n onExitComplete?: (id: string) => void\n initial?: false | VariantLabels\n custom?: any\n exitVariant?: string | null\n enterVariant?: string | null\n}\n\nexport const PresenceContext = createContext<PresenceContextProps | null>(null)\n"],
5
+ "mappings": "AAAA;AAeO,MAAM,kBAAkB,cAA2C,IAAI;",
6
+ "names": []
7
+ }
package/dist/esm/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export * from "./AnimatePresence";
2
- export * from "./useEntering";
3
- import { AnimatePresenceContext } from "./AnimatePresenceContext";
2
+ export * from "./usePresence";
3
+ import { PresenceContext } from "./PresenceContext";
4
4
  export {
5
- AnimatePresenceContext
5
+ PresenceContext
6
6
  };
7
7
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts"],
4
- "sourcesContent": ["export * from './AnimatePresence'\nexport * from './useEntering'\nexport { AnimatePresenceContext } from './AnimatePresenceContext'\n"],
4
+ "sourcesContent": ["export * from './AnimatePresence'\nexport * from './usePresence'\nexport { PresenceContext } from './PresenceContext'\n"],
5
5
  "mappings": "AAAA;AACA;AACA;",
6
6
  "names": []
7
7
  }