example/app.tsx

@@ -41,6 +41,18 @@ export default ()=>
                 <p>hello!</p>
                 <p>hello!</p>
                 <p>hello!</p>
+                <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>

example/tree-menu.tsx

@@ -17,31 +17,19 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     const [stateGet, stateSet] = React.useContext(CTX);
     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 border";
+    const classOpen = "h-auto w-auto top-10 px-4 ";
+    const classShut = "h-0 w-[300px] top-0 px-0";
 
-    type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string};
+    window.TwindInst(classDefault);
-    const Classes:MenuClassStates =
+    window.TwindInst(classOpen);
-    {
+    window.TwindInst(classShut);
-      Keep: "relative transition-all border",
-      Open: "h-auto w-auto    top-10 duration-700",
-      Shut: "h-0    w-[300px] top-0  duration-300",
-      Move: "",
-      Exit: "h-auto w-auto top-36 px-4 opacity-0"
-    };
-    const Window = window as {TwindInst?:(c:string)=>string};
-    if(Window.TwindInst)
-    {
-      for(let stateName in Classes)
-      {
-        Classes[stateName as keyof MenuClassStates] = Window.TwindInst(Classes[stateName as keyof MenuClassStates]);
-      }
-    }
 
     React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, true), []);
     React.useEffect(()=> {refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}))}, [stateGet.open])
 
-    return <div class={Classes.Keep} data-class-keep={Classes.Keep} data-class-open={Classes.Open} data-class-shut={Classes.Shut} ref={refElement as React.Ref<HTMLDivElement>}>
+    return <div class={classDefault} data-class={classDefault} data-class-open={classOpen} data-class-shut={classShut} ref={refElement as React.Ref<HTMLDivElement>}>{props.children}</div>;
-      { (!stateGet.open && stateGet.done) ? null : props.children}
-    </div>;
 };
 
 export const Button =()=>
@@ -61,54 +49,22 @@ export function Collapser(inElement:HTMLElement, initialState = false)
     let userDone:DoneCallback = (openState) => {};
     let userMode = initialState;
     let frameRequest = 0;
-    let inTransition = false;
 
-    let transitions = new Set();
+    const done = (inEvent:TransitionEvent)=>
-    let measurements = false;
-
-    const run = (inEvent:TransitionEvent)=>
     {
-      if (inEvent.target == inElement)
+      if (inEvent.propertyName == "height" && inEvent.target == inElement)
       {
-        transitions.add(inEvent.propertyName);
+        inEvent.stopPropagation();
-      }
+        if (userMode)
-    };
-
-    const end = (inEvent:TransitionEvent)=>
-    {
-      if (inEvent.target == inElement)
-      {
-        transitions.delete(inEvent.propertyName);
-        if(transitions.size === 0)
         {
-          if (userMode)
+          inElement.style.height = "";
-          {
+          inElement.style.width = "";
-            inElement.setAttribute("style", "");
+          inElement.style.overflow = "visible";
-          }
-          inTransition = false;
-          userDone(userMode);          
         }
-
+        userDone(userMode);
       }
     };
-
+    inElement.addEventListener("transitionend", done);
-    const getMeasurements =(inClasses:Record<string, string>)=>
-    {
-      inElement.setAttribute("style", `transition: none;`);
-      const initialClasses = inElement.getAttribute("class")||"";
-      const output = {} as Record<string, {width:number, height:number}>;
-      Object.entries(inClasses).forEach(([key, value])=>
-      {
-        inElement.setAttribute("class", value);
-        output[key] = { width: inElement.clientWidth, height: inElement.clientHeight };
-      });
-      inElement.removeAttribute("style");
-      inElement.setAttribute("class", initialClasses);
-      return output;
-    };
-  
-    inElement.addEventListener("transitionend", end);
-    inElement.addEventListener("transitionrun", run);
 
     return function(inOpen, inMs, inDone)
     {
@@ -119,37 +75,47 @@ export function Collapser(inElement:HTMLElement, initialState = false)
         userDone = inDone|| ((m)=>{}) as DoneCallback;
         userMode = inOpen === true;
 
-        if((inOpen || !measurements) && !inTransition)
+        // 1) capture current state and possible classes
-        {
+        const h1 = inElement.clientHeight;
-          measurements = getMeasurements({
+        const w1 = inElement.clientWidth;
-            Open: inElement.getAttribute("data-class-open")||"",
+        const classesInitial = inElement.getAttribute("class");
-            Shut: inElement.getAttribute("data-class-shut")||"",
+        const classesStart = inElement.getAttribute("data-class");
-          });
+        const classesEnd = inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
-        }
+      
-        else
+        // 2) disable transitions to get immediate results
-        {
+        inElement.style.transition = "none";
-          console.log("inbterrupt");
+        inElement.style.height = "";
-        }
+        inElement.style.width = "";
 
-        inElement.style.width = inElement.clientWidth + "px";
+        // 3) add new classes and capture new height
-        inElement.style.height = inElement.clientHeight + "px";
+        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;
 
-        inTransition = true;
+        console.log(`BEFORE classes:"${inElement.className}" width:"${w1}" height:"${h1}"`);
 
         frameRequest = requestAnimationFrame(()=>
         {
-          const measure = inOpen ? measurements.Open : measurements.Shut;
+          inElement.style.transition = "";
-          inElement.style.width = measure.width + "px";
+          frameRequest = requestAnimationFrame(()=>
-          inElement.style.height = measure.height + "px";
+          {
-          inElement.className = inElement.getAttribute("data-class-keep") + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
+              inElement.style.height = `${h2}px`;
+              inElement.style.width = `${w2}px`;
+              inElement.className = classesStart + " " + classesEnd;
+              console.log(`AFTER classes:"${inElement.className}" width:"${w2}" height:"${h2}"`);
+          });
           
         });
       }
       else
       {
-        inElement.removeEventListener("transitionrun", run);
+        inElement.removeEventListener("transitionend", done);
-        inElement.removeEventListener("transitionend", end);
       }
     } as CollapseControls;
 }