click away

example/tree-menu.tsx

@@ -34,13 +34,15 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
         Classes[stateName as keyof MenuClassStates] = Window.TwindInst(Classes[stateName as keyof MenuClassStates]);
       }
     }
-    
+
     React.useEffect(()=> {
       refElement.current?.setAttribute("style", "");
       refControl.current = refElement.current && Collapser(refElement.current, stateGet.open ? "Open" : "Shut", Classes);
     }, []);
     React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
 
+    useAway(refElement, ()=>stateSet({open:false, done:false}));
+
     return <div ref={refElement as React.Ref<HTMLDivElement>} class={Classes.Shut} style="transition:none;">
       { (!stateGet.open && stateGet.done) ? null : props.children}
     </div>;
@@ -56,6 +58,28 @@ export const Button =()=>
     </>;
 };
 
+type Handler = (e:MouseEvent)=>void
+const Refs:Map<HTMLElement, React.Ref<Handler>> = new Map();
+window.innerWidth && document.addEventListener("click", e=>
+{
+  const path = e.composedPath();
+  Refs.forEach( (handlerRef, element)=> handlerRef.current && (path.includes(element) ? null : handlerRef.current(e)) );
+}
+, true);
+const useAway =(inRef:React.Ref<HTMLElement>, handleAway:Handler)=>
+{
+  const refHandler:React.MutableRefObject<Handler> = React.useRef(handleAway);
+  refHandler.current = handleAway;
+
+  React.useEffect(()=>
+  {
+    inRef.current && Refs.set(inRef.current, refHandler);
+    return ()=> inRef.current && Refs.delete(inRef.current);
+  }
+  , []);
+};
+
+
 type StyleSize = [classes:string, width:number, height:number];
 type StylePack = Record<string, string>;
 type StyleCalc = Record<string, StyleSize>;