From 31c1455fcb830464e8668ca2e6e349243e651161 Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Sun, 28 May 2023 07:34:45 -0400
Subject: [PATCH] fix initial state

---
 example/app.tsx       | 13 +++++++++++++
 example/tree-menu.tsx | 35 ++++++++++++++++++++++++++++-------
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/example/app.tsx b/example/app.tsx
index 383000c..53ab8de 100644
--- a/example/app.tsx
+++ b/example/app.tsx
@@ -37,10 +37,23 @@ export default ()=>
         <C.Group>
             <C.Button></C.Button>
             <C.Menu>
+            <C.Group>
+                <C.Button></C.Button>
+                    <C.Menu>
+                        <p>hello!</p>
+                        <p>hello!</p>
+                        <p>hello!</p>
+                        <p>hello!</p>
+                        <p>hello!</p>
+                        <p>hello!</p>
+                        <p>hello!</p>
+                    </C.Menu>
+                </C.Group>
                 <p>hello!</p>
                 <p>hello!</p>
                 <p>hello!</p>
                 <p>hello!</p>
+
                 <p>hello!</p>
                 <p>hello!</p>
                 <p>hello!</p>
diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx
index 7bd5373..ff92c59 100644
--- a/example/tree-menu.tsx
+++ b/example/tree-menu.tsx
@@ -23,7 +23,7 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     const Classes:MenuClassStates =
     {
       Shut: `${base} h-0    top-0  w-1/2  duration-300`,
-      Open: `${base} h-auto top-8  w-full  duration-700`,
+      Open: `${base} h-auto top-8  w-full  duration-1000`,
       lol: `${base} h-auto top-36 bg-yellow-500  w-2/3  duration-700`,
     };
     const Window = window as {TwindInst?:(c:string)=>string};
@@ -35,10 +35,15 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
       }
     }
 
-    React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, "Shut", Classes), []);
-    React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
+    const initialKey = stateGet.open ? "Open" : "Shut";
 
-    return <div ref={refElement as React.Ref<HTMLDivElement>}>
+    React.useEffect(()=> {
+      refElement.current?.setAttribute("style", "");
+      refControl.current = refElement.current && Collapser(refElement.current, initialKey, Classes);
+    }, []);
+    React.useEffect(()=> {refControl.current && refControl.current(initialKey, ()=>stateSet({done:true}))}, [stateGet.open])
+
+    return <div ref={refElement as React.Ref<HTMLDivElement>} class={Classes.Shut} style="transition:none;">
       { (!stateGet.open && stateGet.done) ? null : props.children}
     </div>;
 };
@@ -111,9 +116,21 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         }
       }
     };
-  
+
+    const child =(e:CustomEvent)=>
+    {
+      if(e.target == inElement || !inTransition){ return; }
+      console.log("resize", e.detail);
+      const oldWidth = inElement.offsetWidth;
+      const oldHeight = inElement.offsetHeight;
+      //inElement.style.overflow = "hidden";
+      inElement.style.width  = oldWidth  + e.detail[0] + "px";
+      inElement.style.height = oldHeight + e.detail[1] + "px";
+    }
+
     inElement.addEventListener("transitionend", end);
     inElement.addEventListener("transitionrun", run);
+    inElement.addEventListener("childresize", child);
 
     return function(inState:string, inDone)
     {
@@ -135,12 +152,16 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         if(measurements)
         {
             const [classes, width, height] = measurements[inState] as StyleSize;
+            const oldWidth = inElement.offsetWidth;
+            const oldHeight = inElement.offsetHeight;
             //inElement.style.overflow = "hidden";
-            inElement.style.width = inElement.offsetWidth + "px";
-            inElement.style.height = inElement.offsetHeight + "px";
+            inElement.style.width  = oldWidth  + "px";
+            inElement.style.height = oldHeight + "px";
             inTransition = true;
             console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`);
 
+            inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]}))
+
             frameRequest = requestAnimationFrame(()=>
             {
               inElement.style.height = height + "px";