only collapse outer

example/app.tsx

@@ -61,6 +61,32 @@ export default ()=>
         </C.Group>
 
 
+        <C.Group>
+            <C.Button></C.Button>
+            <C.Menu>
+            <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>
+                <p>hello!</p>
+
+                <p>hello!</p>
+                <p>hello!</p>
+                <p>hello!</p>
+            </C.Menu>
+        </C.Group>
+
         <h1 class="my-2 font(bold serif) text(3xl)">Title!!</h1>
         <h2>suspended:</h2>
         <React.Suspense fallback={<div>Loading!</div>}>

example/tree-menu.tsx

@@ -22,8 +22,8 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     const base = `relative transition-all border(8 black) overflow-hidden`;
     const Classes:MenuClassStates =
     {
-      Shut: `${base} h-0    top-0  w-1/2  duration-300`,
+      Shut: `${base} h-0    top-0  w-1/2   duration-500`,
-      Open: `${base} h-auto top-8  w-full  duration-1000`,
+      Open: `${base} h-auto top-8  w-full  duration-500`,
       lol: `${base} h-auto top-36 bg-yellow-500  w-2/3  duration-700`,
     };
     const Window = window as {TwindInst?:(c:string)=>string};
@@ -41,7 +41,12 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     }, []);
     React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
 
-    useAway(refElement, ()=>stateSet({open:false, done:false}));
+    useAway(refElement, (e)=>
+    {
+      //e.stopPropagation();
+      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}
@@ -60,10 +65,44 @@ export const Button =()=>
 
 type Handler = (e:MouseEvent)=>void
 const Refs:Map<HTMLElement, React.Ref<Handler>> = new Map();
+function isHighest(inElement:HTMLElement, inSelection:HTMLElement[])
+{
+  let currentNode = inElement;
+  let highest:HTMLElement|false = false;
+
+  while (currentNode != document.body)
+  {
+    currentNode = currentNode.parentNode as HTMLElement;
+    if(currentNode.hasAttribute("data-use-away") && inSelection.includes(currentNode))
+    {
+      return false;
+    }    
+  }
+
+  return true;
+}
 window.innerWidth && document.addEventListener("click", e=>
 {
   const path = e.composedPath();
-  Refs.forEach( (handlerRef, element)=> handlerRef.current && (path.includes(element) ? null : handlerRef.current(e)) );
+  const away:HTMLElement[] = [];
+
+  Refs.forEach( (handlerRef, element)=>
+  {
+    if(!path.includes(element) && handlerRef.current)
+    {
+      away.push(element);
+    }
+  });
+
+  away.forEach((element)=>
+  {
+    if(isHighest(element, away))
+    {
+      const handler = Refs.get(element);
+      handler?.current && handler.current(e);
+    }
+  });
+
 }
 , true);
 const useAway =(inRef:React.Ref<HTMLElement>, handleAway:Handler)=>
@@ -73,7 +112,11 @@ const useAway =(inRef:React.Ref<HTMLElement>, handleAway:Handler)=>
 
   React.useEffect(()=>
   {
-    inRef.current && Refs.set(inRef.current, refHandler);
+    if(inRef.current)
+    {
+      inRef.current.setAttribute("data-use-away", "0");
+      Refs.set(inRef.current, refHandler);      
+    }
     return ()=> inRef.current && Refs.delete(inRef.current);
   }
   , []);