Add classname to identify expanded or collapsed nodes

dust-tt · Sep 4, 2024 · fb05e3a · fb05e3a
1 parent c302190
commit fb05e3a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.221",
+  "version": "0.2.222",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -98,4 +98,4 @@
     "tailwind-scrollbar-hide": "^1.1.7"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}
diff --git a/sparkle/src/components/Tree.tsx b/sparkle/src/components/Tree.tsx
@@ -138,6 +138,8 @@ Tree.Item = function ({
     isNavigatableSelected: "s-border-structure-200 s-bg-white",
   };
 
+  const isExpanded = childrenToRender && !effectiveCollapsed;
+
   return (
     <>
       <div
@@ -157,17 +159,15 @@ Tree.Item = function ({
             ? isSelected
               ? treeItemStyleClasses.isNavigatableSelected
               : treeItemStyleClasses.isNavigatableUnselected
-            : ""
+            : "",
+          isExpanded ? "is-expanded" : "is-collapsed",
+          type
         )}
         onClick={onItemClick ? onItemClick : undefined}
       >
         {type === "node" && (
           <IconButton
-            icon={
-              childrenToRender && !effectiveCollapsed
-                ? ArrowDownSIcon
-                : ArrowRightSIcon
-            }
+            icon={isExpanded ? ArrowDownSIcon : ArrowRightSIcon}
             size="xs"
             variant="secondary"
             onClick={(e) => {