context started

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} from "$/collapse.tsx";
 
 const Comp = React.lazy(()=>import("./deep/component.tsx"));
 
@@ -20,7 +20,11 @@ export default ()=>
                 <p>Hello!</p>
             </Collapse>
         </header>
-
+        <div>
+            <CollapseGroup>
+                <CollapseButton></CollapseButton>
+            </CollapseGroup>
+        </div>
         <main class="layout-middle">
         <Iso.Switch>
             <Iso.Case value="/">

components/collapse.tsx

@@ -37,9 +37,44 @@ export default (props:{open:boolean, children:React.JSX.Element|React.JSX.Elemen
   </div>
 };
 
+export function useAway(inRef:React.Ref<HTMLElement>, inHandler:(inAway:boolean)=>void)
+{
+  const handlerRef = React.useRef(inHandler);
+  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)=>stateSet({Away}));
+  return <button onClick={e=>stateSet({Open:!stateGet.Open})} ref={buttonRef as React.Ref<HTMLButtonElement>}>
+    click it! {JSON.stringify(stateGet)}
+  </button>
+}
+
 type DoneCallback =(openState:boolean)=>void;
 type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
-
 export function Collapser(inElement:HTMLElement, initialState = false)
 {
     let userDone:DoneCallback = (openState) => {};
@@ -61,7 +96,6 @@ export function Collapser(inElement:HTMLElement, initialState = false)
     };
     inElement.addEventListener("transitionend", done);
 
-    /** @type Toggler */
     return function(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)
     {
       cancelAnimationFrame(frameRequest);