@tamagui/animate-presence 1.0.1-beta.167 → 1.0.1-beta.168

package/package.json

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

package/types/AnimatePresence.d.ts

@@ -1,4 +1,37 @@
 import React from 'react';
 import { AnimatePresenceProps } from './types';
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```tsx
+ * import { motion, AnimatePresence } from 'framer-motion'
+ *
+ * export const Items = ({ items }) => (
+ *   <AnimatePresence>
+ *     {items.map(item => (
+ *       <motion.div
+ *         key={item.id}
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *     ))}
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `usePresence` all need to call `safeToRemove`.
+ *
+ * @public
+ */
 export declare const AnimatePresence: React.FunctionComponent<React.PropsWithChildren<AnimatePresenceProps>>;
 //# sourceMappingURL=AnimatePresence.d.ts.map

package/types/types.d.ts

@@ -7,11 +7,65 @@ export interface Box {
     y: Axis;
 }
 export declare type VariantLabels = string | string[];
+/**
+ * @public
+ */
 export interface AnimatePresenceProps {
+    /**
+     * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children
+     * that are present when the component is first rendered.
+     *
+     * ```jsx
+     * <AnimatePresence initial={false}>
+     *   {isVisible && (
+     *     <motion.div
+     *       key="modal"
+     *       initial={{ opacity: 0 }}
+     *       animate={{ opacity: 1 }}
+     *       exit={{ opacity: 0 }}
+     *     />
+     *   )}
+     * </AnimatePresence>
+     * ```
+     *
+     * @public
+     */
     initial?: boolean;
+    /**
+     * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`
+     * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.
+     * This will ensure all leaving components animate using the latest data.
+     *
+     * @public
+     */
     custom?: any;
+    /**
+     * Fires when all exiting nodes have completed animating out.
+     *
+     * @public
+     */
     onExitComplete?: () => void;
+    /**
+     * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component
+     * will finish its exit animation before the entering component is rendered.
+     *
+     * ```jsx
+     * const MyComponent = ({ currentItem }) => (
+     *   <AnimatePresence exitBeforeEnter>
+     *     <motion.div key={currentItem} exit={{ opacity: 0 }} />
+     *   </AnimatePresence>
+     * )
+     * ```
+     *
+     * @beta
+     */
     exitBeforeEnter?: boolean;
+    /**
+     * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a
+     * child being removed.
+     *
+     * @internal
+     */
     presenceAffectsLayout?: boolean;
     exitVariant?: string | null;
     enterVariant?: string | null;

package/types/usePresence.d.ts

@@ -4,6 +4,10 @@ declare type AlwaysPresent = [true, null];
 declare type Present = [true];
 declare type NotPresent = [false, SafeToRemove];
 export declare function usePresence(): AlwaysPresent | Present | NotPresent;
+/**
+ * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
+ * There is no `safeToRemove` function. ```
+ */
 export declare function useIsPresent(): boolean;
 export declare function isPresent(context: PresenceContextProps | null): boolean;
 export {};