Merge pull request #647 from tryshowtime/add-animate-presence

Add AnimatePresence to SelectList on web

packages/design-system/select/lib/select-list.web.tsx

@@ -1,4 +1,4 @@
-import { MotiView } from "moti";
+import { MotiView, AnimatePresence } from "moti";
 import { forwardRef, useMemo } from "react";
 import { tw } from "../../tailwind";
 
@@ -13,30 +13,35 @@ export const SelectList: React.FC<SelectListProps> = forwardRef(
         tw`z-20 absolute w-full top-100% p-1 mt-2 bg-white dark:bg-black rounded-2xl`,
       []
     );
-    return open ? (
-      <MotiView
-        ref={ref}
-        from={{
-          opacity: 0,
-          translateY: -24,
-        }}
-        animate={{
-          opacity: 1,
-          translateY: 0,
-        }}
-        exit={{
-          opacity: 0,
-          translateY: -24,
-        }}
-        transition={{
-          type: "timing",
-          duration: 250,
-        }}
-        style={containerStyle}
-        {...rest}
-      >
-        {children}
-      </MotiView>
-    ) : null;
+
+    return (
+      <AnimatePresence>
+        {open ? (
+          <MotiView
+            ref={ref}
+            from={{
+              opacity: 0,
+              translateY: -24,
+            }}
+            animate={{
+              opacity: 1,
+              translateY: 0,
+            }}
+            exit={{
+              opacity: 0,
+              translateY: -24,
+            }}
+            transition={{
+              type: "timing",
+              duration: 250,
+            }}
+            style={containerStyle}
+            {...rest}
+          >
+            {children}
+          </MotiView>
+        ) : null}
+      </AnimatePresence>
+    );
   }
 );