initial ssr visibility toggle

app.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as Iso from "@eno/iso";
-import Collapse from "$/collapse.tsx";
+import Collapse, {CollapseButton, CollapseGroup, CollapseMenu} from "$/collapse.tsx";
 
 const Comp = React.lazy(()=>import("./deep/component.tsx"));
 
@@ -16,11 +16,19 @@ export default ()=>
                 <a href="/details">Details</a>
                 <a href="/data">Data Fetching</a>
             </nav>
-            <Collapse open={false}>
-                <p>Hello!</p>
-            </Collapse>
         </header>
-
+        <div class="self-start">
+            <CollapseGroup>
+                <CollapseButton></CollapseButton>
+                <CollapseMenu>
+                    <p>collapsedable!</p>
+                    <p>collapsedable!</p>
+                    <p>collapsedable!</p>
+                    <p>collapsedable!</p>
+                    <p>collapsedable!</p>
+                </CollapseMenu>
+            </CollapseGroup>
+        </div>
         <main class="layout-middle">
         <Iso.Switch>
             <Iso.Case value="/">

components/collapse.tsx

@@ -1,9 +1,55 @@
 import React from "react";
 
-export default (props:{open:boolean, children:React.JSX.Element|React.JSX.Element[]})=>
+export function useAway(inRef:React.Ref<HTMLElement>, inHandler:(inAway:boolean)=>void)
 {
-  const [openGet, openSet] = React.useState(props.open);
+  const handlerRef = React.useRef(inHandler);
-  const [doneGet, doneSet] = React.useState(true);
+  handlerRef.current = inHandler;
+  React.useEffect(()=>
+  {
+    const iterate = (element:EventTarget)=>element === inRef.current;
+    const handler = (event:MouseEvent)=> handlerRef.current( event.composedPath().find(iterate) ? false : true );
+    document.body.addEventListener("click", handler);
+    return ()=> document.body.removeEventListener("click", handler);
+  }
+  , []);
+}
+
+type CollapseStateGet = {Done:boolean, Open:boolean, Away:boolean};
+type CollapseStateSet = (args:{Done?:boolean, Open?:boolean, Away?:boolean})=>void;
+type CollapseStateBinding = [state:CollapseStateGet, update:CollapseStateSet];
+const CollapseContext = React.createContext([{Done:true, Open:true, Away:false}, (args)=>{}] as CollapseStateBinding);
+export const CollapseGroup =({children}:{children:React.JSX.Element|React.JSX.Element[]})=>
+{
+  const [stateGet, stateSet] = React.useState({Done:true, Open:false, Away:false} as CollapseStateGet);
+  const setAny:CollapseStateSet =(params)=> stateSet((old)=> ({...old, ...params}));
+  React.useEffect(()=>{stateGet.Away && setAny({Open:false})}, [stateGet.Away]);
+  return <CollapseContext.Provider value={[stateGet, setAny]}>{children}</CollapseContext.Provider>;
+};
+
+export const CollapseButton =()=>
+{
+  const [stateGet, stateSet] = React.useContext(CollapseContext);
+  const buttonRef:React.Ref<HTMLElement> = React.useRef(null);
+  useAway(buttonRef, (Away)=>
+  {
+    if(Away)
+    {
+      stateGet.Open && stateSet({Open:!stateGet.Open, Done:false});
+    }
+    else
+    {
+      stateSet({Open:!stateGet.Open, Done:false})
+    }
+    
+  });
+  return <button ref={buttonRef as React.Ref<HTMLButtonElement>}>
+    click it! {JSON.stringify(stateGet)}
+  </button>
+}
+
+export const CollapseMenu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
+{
+  const [stateGet, stateSet] = React.useContext(CollapseContext);
   const refEl:React.RefObject<HTMLElement> = React.useRef(null);
   const refCollapse:React.RefObject<CollapseControls> = React.useRef(null);
 
@@ -11,41 +57,35 @@ export default (props:{open:boolean, children:React.JSX.Element|React.JSX.Elemen
   {
     if(refEl.current)
     {
-      refCollapse.current = Collapser(refEl.current, openGet);
+      refCollapse.current = Collapser(refEl.current, stateGet.Open);
     }
     return ()=> refCollapse.current && refCollapse.current();
   }
   , []);
-  const Handler =()=>
-  {
-      openSet((old)=>
-      {
-        if(refCollapse.current)
-        {
-          doneSet(false);
-          refCollapse.current(!old, 1000, ()=>doneSet(true));
-        }
-        return !old;
-      });
-  };
 
-  return <div>
+  React.useEffect(()=>
-    <button onClick={Handler}>{openGet ? "Close this" : "Open it"}{doneGet ? "." : "..."}</button>
+  {
-    <div ref={refEl as React.RefObject<HTMLDivElement>}>
+    refCollapse.current && refCollapse.current(stateGet.Open, 500, (state, id)=>
-      {!(!openGet && doneGet) && props.children}
+    {
-    </div>
+      stateSet({Done:true});
+    }
+    );
+  }, [stateGet.Open, stateGet.Done]);
+
+  return <div ref={refEl as React.RefObject<HTMLDivElement>}>
+    { (stateGet.Done && !stateGet.Open) ? null : props.children}
   </div>
 };
 
-type DoneCallback =(openState:boolean)=>void;
+type DoneCallback =(openState:boolean, id:number)=>void;
 type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
-
 export function Collapser(inElement:HTMLElement, initialState = false)
 {
     let userDone:DoneCallback = (openState) => {};
     let userMode = initialState;
     let frameRequest = 0;
-  
+    let id = Math.random();
+
     const done = (inEvent:TransitionEvent)=>
     {
       if (inEvent.propertyName == "height" && inEvent.target == inElement)
@@ -56,12 +96,11 @@ export function Collapser(inElement:HTMLElement, initialState = false)
           inElement.style.height = "auto";
           inElement.style.overflow = "visible";
         }
-        userDone(userMode);
+        userDone(userMode, id);
       }
     };
     inElement.addEventListener("transitionend", done);
 
-    /** @type Toggler */
     return function(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)
     {
       cancelAnimationFrame(frameRequest);
@@ -69,7 +108,7 @@ export function Collapser(inElement:HTMLElement, initialState = false)
       if(arguments.length)
       {
         userDone = inDone|| ((m)=>{}) as DoneCallback;
-        userMode = inOpen||!userMode;
+        userMode = inOpen === true;
         inElement.style.height = inElement.clientHeight + "px";
         inElement.style.overflow = "hidden";
         inElement.style.transition = "none";