From 2acec76afd18840fbfb58b2197a5d23dc91bbdef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cristian=20Pallar=C3=A9s?= <cristianp@wing.cloud>
Date: Fri, 12 Jul 2024 15:43:56 +0200
Subject: [PATCH] feat(console): animate tree view items when expanding and
 collapsing (#6895)

This changeset animates tree view items when expanding and collapsing.
---
 .../console/design-system/package.json             |  1 +
 .../design-system/src/headless/tree-item.tsx       | 14 +++++++++++---
 pnpm-lock.yaml                                     |  3 +++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/wing-console/console/design-system/package.json b/apps/wing-console/console/design-system/package.json
index ed5552027d6..bcfdca99a27 100644
--- a/apps/wing-console/console/design-system/package.json
+++ b/apps/wing-console/console/design-system/package.json
@@ -34,6 +34,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
     "classnames": "^2.5.1",
+    "framer-motion": "^10.18.0",
     "lodash.escape": "^4.0.1",
     "lodash.uniq": "^4.5.0",
     "nanoid": "^4.0.2",
diff --git a/apps/wing-console/console/design-system/src/headless/tree-item.tsx b/apps/wing-console/console/design-system/src/headless/tree-item.tsx
index 5a731334ef7..9b43155c040 100644
--- a/apps/wing-console/console/design-system/src/headless/tree-item.tsx
+++ b/apps/wing-console/console/design-system/src/headless/tree-item.tsx
@@ -1,4 +1,4 @@
-import type { PropsWithChildren, ReactNode, KeyboardEvent } from "react";
+import { motion } from "framer-motion";
 import {
   createContext,
   useCallback,
@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from "react";
+import type { PropsWithChildren, ReactNode, KeyboardEvent } from "react";
 
 import { useTreeContext } from "./tree-context.js";
 
@@ -162,13 +163,20 @@ export const TreeItem = ({
       )}
       {Content && typeof Content !== "function" && Content}
 
-      <ul role="group" style={{ display: expanded ? undefined : "none" }}>
+      <motion.ul
+        role="group"
+        style={{ overflow: "hidden" }}
+        initial={{ opacity: 0, height: 0 }}
+        animate={{ opacity: expanded ? 1 : 0, height: expanded ? "auto" : 0 }}
+        exit={{ opacity: 0, height: 0 }}
+        transition={{ duration: 0.15 }}
+      >
         <treeItemContext.Provider
           value={{ itemId, indentation: indentation + 1 }}
         >
           {children}
         </treeItemContext.Provider>
-      </ul>
+      </motion.ul>
     </li>
   );
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b55e48adbb..20de5dc44ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -561,6 +561,9 @@ importers:
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
+      framer-motion:
+        specifier: ^10.18.0
+        version: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       lodash.escape:
         specifier: ^4.0.1
         version: 4.0.1