From 52c731c7943152f58ce41015c6c02cb11067fd15 Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Sat, 20 May 2023 07:20:30 -0400
Subject: [PATCH] allow for width transitions

---
 example/tree-menu.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx
index dba09e3..d626f8f 100644
--- a/example/tree-menu.tsx
+++ b/example/tree-menu.tsx
@@ -18,9 +18,9 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null );
     const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
 
-    const classDefault = "relative transition-all duration-700";
-    const classOpen = "h-auto top-10 px-4";
-    const classShut = "h-0 top-0 px-0";
+    const classDefault = "relative transition-all duration-700 border";
+    const classOpen = "h-auto w-auto top-10 px-4 ";
+    const classShut = "h-0 w-[300px] top-0 px-0";
 
     window.TwindInst(classDefault);
     window.TwindInst(classOpen);
@@ -74,8 +74,9 @@ export function Collapser(inElement:HTMLElement, initialState = false)
         userDone = inDone|| ((m)=>{}) as DoneCallback;
         userMode = inOpen === true;
 
-        // 1) capture current height and possible classes
+        // 1) capture current state and possible classes
         const h1 = inElement.clientHeight;
+        const w1 = inElement.clientWidth;
         const classesInitial = inElement.getAttribute("class");
         const classesStart = inElement.getAttribute("data-class");
         const classesEnd = inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
@@ -83,19 +84,20 @@ export function Collapser(inElement:HTMLElement, initialState = false)
         // 2) disable transitions to get immediate results
         inElement.style.transition = "none";
         inElement.style.height = "";
+        inElement.style.width = "";
 
         // 3) add new classes and capture new height
         inElement.className = classesStart + " " + classesEnd;
         const h2 = inElement.clientHeight;
+        const w2 = inElement.clientWidth;
 
         // 4) put everything back (and turn on overflow hidden)
         inElement.style.height = h1+"px";
+        inElement.style.width = w1+"px";
         inElement.style.overflow = "hidden";
         inElement.className = classesInitial;
 
-        console.log(`before: classes are "${inElement.className}"`);
-
-        console.log("LOOK", h1, h2);
+        console.log(`BEFORE classes:"${inElement.className}" width:"${w1}" height:"${h1}"`);
 
         frameRequest = requestAnimationFrame(()=>
         {
@@ -103,8 +105,9 @@ export function Collapser(inElement:HTMLElement, initialState = false)
           frameRequest = requestAnimationFrame(()=>
           {
               inElement.style.height = `${h2}px`;
+              inElement.style.width = `${w2}px`;
               inElement.className = classesStart + " " + classesEnd;
-              console.log(`after: classes are "${inElement.className}"`);
+              console.log(`AFTER classes:"${inElement.className}" width:"${w2}" height:"${h2}"`);
           });
           
         });