click away

example/tree-menu.tsx

@@ -35,13 +35,13 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
       }
     }
 
-    const initialKey = stateGet.open ? "Open" : "Shut";
-
     React.useEffect(()=> {
       refElement.current?.setAttribute("style", "");
-      refControl.current = refElement.current && Collapser(refElement.current, initialKey, Classes);
+      refControl.current = refElement.current && Collapser(refElement.current, stateGet.open ? "Open" : "Shut", Classes);
     }, []);
-    React.useEffect(()=> {refControl.current && refControl.current(initialKey, ()=>stateSet({done:true}))}, [stateGet.open])
+    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}
@@ -58,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>;
@@ -74,7 +96,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
     output[key] =  [value, inElement.offsetWidth, inElement.offsetHeight];
   });
   inElement.setAttribute("class", initialClass);
-  inElement.offsetHeight;
+  inElement.offsetHeight; // this has be be exactly here
   inElement.setAttribute("style", initialStyle);
 
   return output;
@@ -92,27 +114,18 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
     let measurements:StyleCalc;
     const transitions:Set<string> = new Set();
 
-    const run = (inEvent:TransitionEvent)=>
-    {
-      //console.log("+", inEvent.propertyName);
-      (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
-    };
+    const run = (inEvent:TransitionEvent)=> (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
     const end = (inEvent:TransitionEvent)=>
     {
-      //console.log("-", inEvent.propertyName);
       if (inEvent.target == inElement)
       {
         transitions.delete(inEvent.propertyName);
         if(transitions.size === 0)
         {
-          console.log("--done--", userMode, "interrupted?", interrupted);
-
           measurements = StyleCalc(inElement, library);
           const [, w, h] = measurements[userMode];
-          
           if(inElement.offsetHeight != h || inElement.offsetWidth != w)
           {
-            console.log(inElement.offsetHeight, "VERSUS", h);
             anim(userMode, userDone);
           }
           else
@@ -127,18 +140,6 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         }
       }
     };
-
-    const child =(e:CustomEvent)=>
-    {
-      if(e.target == inElement || !inTransition){ return; }
-      interrupted = true;
-      //console.log("resize", e.detail);
-    }
-
-    inElement.addEventListener("transitionend", end);
-    inElement.addEventListener("transitionrun", run);
-    inElement.addEventListener("childresize", child);
-
     const anim = function(inState:string, inDone)
     {
       cancelAnimationFrame(frameRequest);
@@ -153,7 +154,6 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         if(!inTransition)
         {
           measurements = StyleCalc(inElement, library);
-         //console.log("measurements taken", measurements)
         }
 
         if(measurements)
@@ -161,19 +161,15 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
             const [classes, width, height] = measurements[inState] as StyleSize;
             const oldWidth = inElement.offsetWidth;
             const oldHeight = inElement.offsetHeight;
-            //inElement.style.overflow = "hidden";
             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";
               inElement.style.width = width + "px";
               inElement.className = classes;
-              //console.log(`  to: {${width} ${height}}`)
             });
         }
       }
@@ -184,5 +180,8 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
       }
     } as CollapseControls;
 
+    inElement.addEventListener("transitionend", end);
+    inElement.addEventListener("transitionrun", run);
+
     return anim;
 }