Changing popLayout to mode

motiondivision · Aug 16, 2022 · 070efea · 070efea
1 parent 98d8812
commit 070efea
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/dev/examples/AnimatePresence-notifications-list-pop.tsx b/dev/examples/AnimatePresence-notifications-list-pop.tsx
@@ -35,7 +35,7 @@ export const App = () => {
     return (
         <div className="container">
             <ul>
-                <AnimatePresence popLayout initial={false}>
+                <AnimatePresence mode="popLayout" initial={false}>
                     {notifications.map((id) => (
                         <Notification
                             id={id}

diff --git a/dev/tests/animate-presence-pop.tsx b/dev/tests/animate-presence-pop.tsx
@@ -25,7 +25,7 @@ export const App = () => {
 
     return (
         <Container onClick={() => setState(!state)}>
-            <AnimatePresence popLayout>
+            <AnimatePresence mode="popLayout">
                 <motion.div
                     key="a"
                     id="a"

diff --git a/packages/framer-motion/src/components/AnimatePresence/PresenceChild.tsx b/packages/framer-motion/src/components/AnimatePresence/PresenceChild.tsx
@@ -15,7 +15,7 @@ interface PresenceChildProps {
     initial?: false | VariantLabels
     custom?: any
     presenceAffectsLayout: boolean
-    popLayout: boolean
+    mode: "sync" | "popLayout" | "wait"
 }
 
 export const PresenceChild = ({
@@ -25,7 +25,7 @@ export const PresenceChild = ({
     onExitComplete,
     custom,
     presenceAffectsLayout,
-    popLayout,
+    mode,
 }: PresenceChildProps) => {
     const presenceChildren = useConstant(newChildrenMap)
     const id = useId()
@@ -70,7 +70,7 @@ export const PresenceChild = ({
         !isPresent && !presenceChildren.size && onExitComplete?.()
     }, [isPresent])
 
-    if (popLayout) {
+    if (mode === "popLayout") {
         children = <PopChild isPresent={isPresent}>{children}</PopChild>
     }
 

diff --git a/packages/framer-motion/src/components/AnimatePresence/index.tsx b/packages/framer-motion/src/components/AnimatePresence/index.tsx
@@ -84,7 +84,7 @@ export const AnimatePresence: React.FunctionComponent<
     onExitComplete,
     exitBeforeEnter,
     presenceAffectsLayout = true,
-    popLayout = false,
+    mode = "sync",
 }) => {
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
@@ -135,7 +135,7 @@ export const AnimatePresence: React.FunctionComponent<
                         isPresent
                         initial={initial ? undefined : false}
                         presenceAffectsLayout={presenceAffectsLayout}
-                        popLayout={popLayout}
+                        mode={mode}
                     >
                         {child}
                     </PresenceChild>
@@ -164,7 +164,7 @@ export const AnimatePresence: React.FunctionComponent<
 
     // If we currently have exiting children, and we're deferring rendering incoming children
     // until after all current children have exiting, empty the childrenToRender array
-    if (exitBeforeEnter && exiting.size) {
+    if (mode === "wait" && exiting.size) {
         childrenToRender = []
     }
 
@@ -209,7 +209,7 @@ export const AnimatePresence: React.FunctionComponent<
                 onExitComplete={onExit}
                 custom={custom}
                 presenceAffectsLayout={presenceAffectsLayout}
-                popLayout={popLayout}
+                mode={mode}
             >
                 {child}
             </PresenceChild>
@@ -227,7 +227,7 @@ export const AnimatePresence: React.FunctionComponent<
                 key={getChildKey(child)}
                 isPresent
                 presenceAffectsLayout={presenceAffectsLayout}
-                popLayout={popLayout}
+                mode={mode}
             >
                 {child}
             </PresenceChild>

diff --git a/packages/framer-motion/src/components/AnimatePresence/types.ts b/packages/framer-motion/src/components/AnimatePresence/types.ts
@@ -51,17 +51,24 @@ export interface AnimatePresenceProps {
      * )
      * ```
      *
-     * @public
+     * @deprecated
+     *
+     * Replace with `mode="popLayout"`
      */
     exitBeforeEnter?: boolean
 
     /**
-     * If set to `true`, top-level `exit` components will be "popped" out of the DOM layout,
-     * so surrounding elements can animate to their new layout immediately.
+     * Determines how to handle entering and exiting elements.
+     *
+     * - `"sync"`: Default. Elements animate in and out as soon as they're added/removed.
+     * - `"popLayout"`: Exiting elements are "popped" from the page layout, allowing sibling
+     *      elements to immediately occupy their new layouts.
+     * - `"wait"`: Only renders one component at a time. Wait for the exiting component to animate out
+     *      before animating the next component in.
      *
      * @public
      */
-    popLayout?: boolean
+    mode?: "sync" | "popLayout" | "wait"
 
     /**
      * Internal. Used in Framer to flag that sibling children *shouldn't* re-render as a result of a