@vuu-ui/vuu-popups 0.6.21 → 0.6.22-debug

package/esm/index.js

@@ -1,2 +1,1297 @@
-import{Scrim as nt,Toolbar as ot,ToolbarButton as rt}from"@heswell/salt-lab";import{Text as st}from"@salt-ds/core";import it from"classnames";import{useCallback as fe,useRef as ut,useState as ge}from"react";import{useLayoutEffect as de,useMemo as tt}from"react";import*as me from"react-dom";import*as ae from"react-dom";import{SaltProvider as Ye}from"@salt-ds/core";import{jsx as et}from"react/jsx-runtime";var Ze=1,_e=(e=0,t=0,n=window)=>{let o=n.document.createElement("div");return o.className="vuuPopup "+Ze++,o.style.cssText=`left:${e}px; top:${t}px;`,n.document.body.appendChild(o),o},je=(e,t)=>_e(e,t),F=(e,t,n,o,r)=>{t.style.cssText=`left:${n}px; top:${o}px;position: absolute;`,ae.render(et(Ye,{applyClassesTo:"child",children:e}),t,r)},pe=je;var G=function({children:t,x:n=0,y:o=0,onRender:r}){let c=tt(()=>pe(),[]);return de(()=>{F(t,c,n,o,r)},[t,r,c,n,o]),de(()=>()=>{var i;c&&(me.unmountComponentAtNode(c),c.classList.contains("vuuPopup")&&((i=c.parentElement)==null||i.removeChild(c)))},[c]),null};var un=e=>{let t=getComputedStyle(document.body).getPropertyValue("--installed-themes");document.body.style.setProperty("--installed-themes",`${t} ${e}`)};import{jsx as W,jsxs as Me}from"react/jsx-runtime";var Z="vuuDialog",In=({children:e,className:t,isOpen:n=!1,onClose:o,title:r,...c})=>{let i=ut(null),[u]=ge(0),[a]=ge(0),d=fe(()=>{o==null||o()},[o]),l=fe(()=>{},[]);return n?W(G,{onRender:l,x:u,y:a,children:W(nt,{className:`${Z}-scrim`,open:n,children:Me("div",{...c,className:it(Z,t),ref:i,children:[Me(ot,{className:`${Z}-header`,children:[W(st,{children:r}),W(rt,{onClick:d,"data-align-end":!0,"data-icon":"close"},"close")]}),e]})})}):null};import{useIdMemo as Kt}from"@salt-ds/core";import{useCallback as ne,useRef as Se}from"react";import vt,{useLayoutEffect as yt,useMemo as It,useRef as Ct}from"react";import Le from"classnames";import{useIdMemo as wt}from"@salt-ds/core";import{useCallback as q,useMemo as gt,useRef as _,useState as Mt}from"react";var he=e=>e.closest("[data-root='true']")!==null,xe=(e,t)=>{var n;return e.ariaHasPopup==="true"&&((n=e.dataset)==null?void 0:n.idx)===`${t}`||e.querySelector(`:scope > [data-idx='${t}'][aria-haspopup='true']`)!==null};function ct(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var lt="Enter";var at="Delete",pt=new Set([lt,at]),dt=new Set(["Tab"]),mt=new Set(["ArrowRight","ArrowLeft"]),be=new Set(["Home","End","ArrowDown","ArrowUp"]),ve=new Set(["Home","End","ArrowRight","ArrowLeft"]),ft=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),Rn=ct(pt,ve,be,mt,ft,dt);var ye=({key:e},t="vertical")=>(t==="vertical"?be:ve).has(e);var Ie=({autoHighlightFirstItem:e=!1,count:t,highlightedIndex:n,onActivate:o,onHighlight:r,onCloseMenu:c,onOpenMenu:i})=>{let u=_((n!=null?n:e)?0:-1),[,a]=Mt(null),d=n!==void 0,l=q(s=>{u.current=s,r==null||r(s),a({})},[r]),h=q(s=>{s!==u.current&&(d||l(s))},[d,l]),f=_(!0),C=_(!1),v=s=>C.current=s,g=d?n:u.current,E=q(s=>{let m=ht(t,s.key,u.current);m!==u.current&&h(m)},[t,h]),R=q(s=>{ye(s)?(s.preventDefault(),s.stopPropagation(),f.current=!0,E(s)):(s.key==="ArrowRight"||s.key==="Enter")&&xe(s.target,g)?i(g):s.key==="ArrowLeft"&&!he(s.target)?c(g):s.key==="Enter"&&o&&o(g)},[g,E,o,c,i]),L=gt(()=>({onFocus:()=>{g===-1&&l(0)},onKeyDown:R,onMouseDownCapture:()=>{f.current=!1,v(!0)},onMouseMove:()=>{f.current&&(f.current=!1)},onMouseLeave:()=>{f.current=!0,v(!1),h(-1)}}),[g,h,E,o,c,i,l]);return{focusVisible:f.current?g:-1,controlledHighlighting:d,highlightedIndex:g,setHighlightedIndex:h,listProps:L,setIgnoreFocus:v}};function ht(e,t,n){return t==="ArrowUp"?n>0?n-1:n:n===null?0:n===e-1?n:n+1}import Ce,{useCallback as xt,useMemo as bt}from"react";var j=e=>e.type===V||!!e.props["data-group"],we=e=>{let t=xt(()=>{let r=(i,u="root",a={},d={})=>{let l=a[u]=[],h=0,f=!1;return Ce.Children.forEach(i,C=>{if(C.type===Ee)f=!0;else{let v=j(C),g=u==="root"?`${h}`:`${u}.${h}`,{props:{action:E,options:R}}=C,{childWithId:L,grandChildren:s}=c(C,g,v,f);l.push(L),s?r(s,g,a,d):d[g]={action:E,options:R},h+=1,f=!1}}),[a,d]},c=(i,u,a,d=!1)=>{let{props:{children:l}}=i;return{childWithId:Ce.cloneElement(i,{hasSeparator:d,id:`${u}`,key:u,children:a?void 0:l}),grandChildren:a?l:void 0}};return r(e)},[e]),[n,o]=bt(()=>t(),[t]);return[n,o]};import{jsx as K}from"react/jsx-runtime";var Pe="vuuMenuList",Ee=()=>K("li",{className:"vuuMenuItem-divider"}),V=()=>null,ee=({children:e,idx:t,...n})=>K("div",{...n,children:e}),Et=e=>e.props["data-icon"],Re=({activatedByKeyboard:e,childMenuShowing:t=-1,children:n,className:o,highlightedIdx:r,id:c,isRoot:i,listItemProps:u,menuId:a,onHighlightMenuItem:d,onActivate:l,onCloseMenu:h,onOpenMenu:f,...C})=>{let v=wt(c),g=Ct(null),E=It(()=>new Map,[]),R=y=>{var b;let M=(b=g.current)==null?void 0:b.querySelector(`:scope > [data-idx='${y}']`);M!=null&&M.id&&(f==null||f(M.id))},L=y=>{var b;let M=(b=g.current)==null?void 0:b.querySelector(`:scope > [data-idx='${y}']`);M!=null&&M.id&&(l==null||l(M.id))},{focusVisible:s,highlightedIndex:m,listProps:p}=Ie({count:vt.Children.count(n),highlightedIndex:r,onActivate:L,onHighlight:d,onOpenMenu:R,onCloseMenu:h}),x=t==-1?s:-1;return yt(()=>{var y;t===-1&&e&&((y=g.current)==null||y.focus())},[e,t]),K("div",{...C,...p,"aria-activedescendant":(()=>m===void 0||m===-1?void 0:E.get(m))(),className:Le(Pe,o,{[`${Pe}-childMenuShowing`]:t!==-1}),"data-root":i||void 0,id:`${v}-${a}`,ref:g,role:"menu",tabIndex:0,children:k()});function k(){let y={...u,role:"menuitem"},M=(I,D,$)=>D?[K("span",{className:"vuuIconContainer","data-icon":$},"icon")].concat(I):I;function b(I,D,$,ie){var le;let{children:Ve,className:Ue,"data-icon":ue,id:X,hasSeparator:ze,label:Je,...Qe}=D.props,Y=j(D),ce=Y&&t===$,Xe=ce?`${v}-${X}`:void 0;I.push(K(ee,{...Qe,...y,...Pt(`${v}-${a}`,X,$,(le=D.key)!=null?le:X,m,x,Ue,ze),"aria-controls":Xe,"aria-haspopup":Y||void 0,"aria-expanded":ce||void 0,children:M(Y?Je:Ve,ie,ue)}))}let P=[];if(n.length>0){let I=n.some(Et);n.forEach((D,$)=>{b(P,D,$,I)})}return P}},Pt=(e,t,n,o,r,c,i,u)=>({id:`${e}-${t}`,key:o!=null?o:n,"data-idx":n,"data-highlighted":n===r||void 0,className:Le("vuuMenuItem",i,{"vuuMenuItem-separator":u,focusVisible:c===n})});Re.displayName="MenuList";var He=Re;import{useCallback as A,useMemo as Lt,useRef as N,useState as Rt}from"react";function ke(e){if(e){let t=e.dataset.idx;if(t)return parseInt(t,10);if(e.ariaPosInSet)return parseInt(e.ariaPosInSet,10)-1}}var te=e=>e==null?void 0:e.closest("[data-idx],[aria-posinset]");var Te=(e,t,n)=>e.map((o,r)=>r===e.length-1?{...o,[n]:o[n]-t}:o),Ht=(e,t)=>Te(e,t,"left"),kt=(e,t)=>Te(e,t,"top"),Tt=(e,t)=>{let[n,o]=t.slice(-2),r=document.getElementById(`${e}-${o.id}`);if(r===null)throw Error(`useCascade.flipSides element with id ${o.id} not found`);let{width:c}=r.getBoundingClientRect();return t.map(i=>i===o?{...i,left:n.left-(c-2)}:i)},Dt=(e,t)=>{let[{left:n,top:o}]=t.slice(-1),{offsetWidth:r,offsetTop:c}=e;return{left:n+r,top:c+o}},O=e=>{let t=e.lastIndexOf("-");return t===-1?e:e.slice(t+1)},U=e=>{let t=O(e),n=t.lastIndexOf(".");return n>-1?t.slice(0,n):"root"},At=e=>{let t=0,n=e.indexOf(".",0);for(;n!==-1;)t+=1,n=e.indexOf(".",n+1);return t},St=e=>({menuId:U(e.id),itemId:O(e.id),isGroup:e.ariaHasPopup==="true",isOpen:e.ariaExpanded==="true",level:At(e.id)}),De=({id:e,onActivate:t,onMouseEnterItem:n,position:{x:o,y:r}})=>{let[,c]=Rt({}),i=N([{id:"root",left:o,top:r}]),u=A(s=>{i.current=s,c({})},[]),a=N(),d=N(),l=N({root:"no-popup"}),h=N(0),f=A((s="root",m=null,p=null)=>{if(s==="root"&&m===null)u([{id:"root",left:o,top:r}]);else{l.current[s]="popup-open";let w=(p?p.ownerDocument:document).getElementById(`${e}-${s}-${m}`),{left:k,top:y}=Dt(w,i.current);u(i.current.concat({id:m,left:k,top:y}))}},[e,o,r,u]),C=A(s=>{u(s==="root"?[]:i.current.slice(0,-1))},[u]),v=A((s,m)=>{let p=i.current.slice(),{id:x}=p[p.length-1];for(;p.length>1&&!m.startsWith(x);){let w=U(x);p.pop(),l.current[x]="no-popup",l.current[w]="no-popup",{id:x}=p[p.length-1]}p.length<i.current.length&&u(p)},[u]),g=A((s,m,p)=>{a.current&&clearTimeout(a.current),a.current=window.setTimeout(()=>{console.log(`scheduleOpen timed out opening ${m}`),v(s,m),l.current[s]="popup-open",l.current[m]="no-popup",f(s,m,p)},400)},[v,f]),E=A((s,m,p)=>{console.log(`scheduleClose openMenuId ${s} menuId ${m} itemId ${p}`),l.current[s]="pending-close",d.current=window.setTimeout(()=>{v(m,p)},400)},[v]),R=A(()=>{let{current:s}=i,[m]=s.slice(-1),p=document.getElementById(`${e}-${m.id}`);if(p){let{right:x,bottom:w}=p.getBoundingClientRect(),{clientHeight:k,clientWidth:y}=document.body;if(x>y){let M=s.length>1?Tt(e,s):Ht(s,x-y);u(M)}else if(w>k){let M=kt(s,w-k);u(M)}}},[e,u]),L=Lt(()=>({onMouseEnter:s=>{let m=te(s.target),{menuId:p,itemId:x,isGroup:w,isOpen:k,level:y}=St(m),M=h.current===y,{current:{[p]:b}}=l;if(h.current=y,b==="no-popup"&&w)l.current[p]="popup-pending",g(p,x,m);else if(b==="popup-pending"&&!w)l.current[p]="no-popup",clearTimeout(a.current),a.current=void 0;else if(b==="popup-pending"&&w)clearTimeout(a.current),g(p,x,m);else if(b==="popup-open"){let[{id:P},{id:I}]=i.current.slice(-2);P===p&&l.current[I]!=="pending-close"&&M?(E(I,p,x),w&&!k&&g(p,x,m)):P===p&&w&&x!==I&&l.current[I]==="pending-close"?g(p,x,m):w?(v(p,x),g(p,x,m)):l.current[I]==="pending-close"&&M||v(p,x)}b==="pending-close"&&(a.current&&(clearTimeout(a.current),a.current=void 0),clearTimeout(d.current),d.current=void 0,l.current[p]="popup-open"),n(s,x)},onClick:s=>{let m=s.target,p=te(m),x=ke(p);console.log(`list item click [${x}] hasPopup ${p.ariaHasPopup}`),p.ariaHasPopup==="true"?p.ariaExpanded!=="true"&&f(x):t(O(p.id))}}),[v,t,n,f,E,g]);return{closeMenu:C,handleRender:R,listItemProps:L,openMenu:f,openMenus:i.current}};import{useEffect as $t}from"react";var Ae=({containerClassName:e,isOpen:t,onClose:n})=>{$t(()=>{let o;return t&&(o=r=>{r.target.closest(`.${e}`)===null&&(n==null||n("root"))},document.body.addEventListener("click",o,!0)),()=>{o&&document.body.removeEventListener("click",o,!0)}},[e,t,n])};import{Fragment as Bt,jsx as $e}from"react/jsx-runtime";import{createElement as Ot}from"react";var Nt=()=>{},oe=({activatedByKeyboard:e,children:t,className:n,id:o,onClose:r=()=>{},position:c={x:0,y:0},style:i,...u})=>{let a=Kt(o),d=Se(Nt),[l,h]=we(t),f=Se(e),C=ne(()=>{f.current=!1},[]),v=ne(M=>{let{action:b,options:P}=h[M];d.current("root"),r(b,P)},[h,r]),{closeMenu:g,listItemProps:E,openMenu:R,openMenus:L,handleRender:s}=De({id:a,onActivate:v,onMouseEnterItem:C,position:c});d.current=g,console.log({openMenus:L});let m=ne(()=>{g(),r()},[g,r]);Ae({containerClassName:"vuuMenuList",onClose:m,isOpen:L.length>0});let p=M=>{let b=O(M),P=U(b);f.current=!0,R(P,b)},x=()=>{f.current=!0,g()},w=()=>{},k=L.length-1,y=M=>{if(M>=k)return-1;{let{id:b}=L[M+1],P=b.lastIndexOf(".");return parseInt(P===-1?b:b.slice(-P),10)}};return $e(Bt,{children:L.map(({id:M,left:b,top:P},I)=>{let D=y(I);return $e(G,{x:b,y:P,onRender:s,children:Ot(He,{...u,activatedByKeyboard:f.current,childMenuShowing:D,className:n,id:a,menuId:M,isRoot:I===0,key:I,listItemProps:E,onActivate:v,onHighlightMenuItem:w,onCloseMenu:x,onOpenMenu:p,style:i},l[M])},I)})})};oe.displayName="ContextMenu";import{createContext as Ft,useCallback as Gt,useMemo as Wt}from"react";import{jsx as re}from"react/jsx-runtime";var z=Ft(null),Ke=e=>e!==void 0&&"children"in e,qt=({children:e,context:t,menuActionHandler:n,menuBuilder:o})=>{let r=Wt(()=>t!=null&&t.menuBuilders&&o?t.menuBuilders.concat(o):o?[o]:(t==null?void 0:t.menuBuilders)||[],[t,o]),c=Gt((i,u)=>{var a;if(n!=null&&n(i,u)||(a=t==null?void 0:t.menuActionHandler)!=null&&a.call(t,i,u))return!0},[t,n]);return re(z.Provider,{value:{menuActionHandler:c,menuBuilders:r},children:e})},yo=({children:e,label:t,menuActionHandler:n,menuBuilder:o})=>re(z.Consumer,{children:r=>re(qt,{context:r,label:t,menuActionHandler:n,menuBuilder:o,children:e})});import{useCallback as qe,useContext as Zt}from"react";import Vt from"classnames";import Oe,{createElement as Be,useEffect as Ut,useRef as Ne}from"react";import B from"react-dom";var S=!1,H=[];function Q(e){if(e.key==="Esc"){if(H.length)Ge();else if(S){let t=document.body.querySelector(".vuuDialog");t&&B.unmountComponentAtNode(t)}}}function Fe(e){if(H.length){let t=document.body.querySelectorAll(".vuuPopup");for(let n=0;n<t.length;n++)if(t[n].contains(e.target))return;Ge()}}function Ge(){if(H.length){let e=document.body.querySelectorAll(".vuuPopup");for(let t=0;t<e.length;t++)B.unmountComponentAtNode(e[t]);We("*")}}function zt(){S===!1&&(S=!0,window.addEventListener("keydown",Q,!0))}function Jt(){S&&(S=!1,window.removeEventListener("keydown",Q,!0))}function Qt(e){H.indexOf(e)===-1&&(H.push(e),S===!1&&(window.addEventListener("keydown",Q,!0),window.addEventListener("click",Fe,!0)))}function We(e){if(H.length){if(e==="*")H.length=0;else{let t=H.indexOf(e);t!==-1&&H.splice(t,1)}H.length===0&&S===!1&&(window.removeEventListener("keydown",Q,!0),window.removeEventListener("click",Fe,!0))}}var Xt=({children:e,position:t,style:n})=>{let o=Vt("hwPopup","hwPopupContainer",t);return Be("div",{className:o,style:n},e)},Yt=1,T=class{static showPopup({name:t="anon",group:n="all",position:o="",left:r=0,right:c="auto",top:i=0,width:u="auto",component:a}){if(!a)throw Error("PopupService showPopup, no component supplied");Qt(t);let d=document.body.querySelector(".vuuPopup."+n);d===null&&(d=document.createElement("div"),d.className="vuuPopup "+n,document.body.appendChild(d));let l={width:u};F(Be(Xt,{key:Yt++,position:o,style:l},a),d,r,i,()=>{T.keepWithinThePage(d,c)})}static hidePopup(t="anon",n="all"){if(H.indexOf(t)!==-1){We(t);let o=document.body.querySelector(`.vuuPopup.${n}`);o&&B.unmountComponentAtNode(o)}}static keepWithinThePage(t,n="auto"){let o=t.querySelector(".vuuPopupContainer > *");if(o){let{top:r,left:c,width:i,height:u,right:a}=o.getBoundingClientRect(),d=window.innerWidth,h=window.innerHeight-(r+u);h<0&&(o.style.top=Math.round(r)+h+"px");let f=d-(c+i);if(f<0&&(o.style.left=Math.round(c)+f+"px"),typeof n=="number"&&n!==a){let C=n-a;o.style.left=c+C+"px"}}}},J=class{static showDialog(t){let n=".vuuDialog",o=t.props.onClose;zt(),B.render(Oe.cloneElement(t,{container:n,onClose:()=>{J.closeDialog(),o&&o()}}),document.body.querySelector(n))}static closeDialog(){Jt();let t=document.body.querySelector(".vuuDialog");t&&B.unmountComponentAtNode(t)}},So=e=>{let t=Ne(),n=Ne(null),o=(r,c)=>{let{name:i,group:u,depth:a,width:d}=r,l,h;if(t.current&&(window.clearTimeout(t.current),t.current=void 0),r.close===!0)T.hidePopup(i,u);else{let{position:f,children:C}=r,{left:v,top:g,width:E,bottom:R}=c;f==="below"?(l=v,h=R):f==="above"&&(l=v,h=g),t.current=window.setTimeout(()=>{T.showPopup({name:i,group:u,depth:a,position:f,left:l,top:h,width:d||E,component:C})},10)}};return Ut(()=>{if(n.current){let r=n.current.parentElement,c=r==null?void 0:r.getBoundingClientRect();c&&o(e,c)}return()=>{T.hidePopup(e.name,e.group)}},[e]),Oe.createElement("div",{className:"popup-proxy",ref:n})};import{jsx as se}from"react/jsx-runtime";var Jo=()=>{let e=Zt(z),t=qe((o,r,c)=>{let i=[];for(let u of o)i=i.concat(u(r,c));return i},[]);return qe((o,r,c)=>{var a;o.stopPropagation(),o.preventDefault();let i=(a=e==null?void 0:e.menuBuilders)!=null?a:[],u=t(i,r,c);console.log({menuItemDescriptors:u}),u.length&&(e!=null&&e.menuActionHandler)&&(console.log(`showContextMenu ${r}`,{options:c}),_t(o,u,e.menuActionHandler))},[t,e])},_t=(e,t,n)=>{let{clientX:o,clientY:r}=e,u=se(oe,{onClose:(a,d)=>{a&&(n(a,d),T.hidePopup())},position:{x:o,y:r},children:(a=>{let d=(l,h)=>Ke(l)?se(V,{label:l.label,children:l.children.map(d)},h):se(ee,{action:l.action,"data-icon":l.icon,options:l.options,children:l.label},h);return a.map(d)})(t)});T.showPopup({left:0,top:0,component:u})};export{oe as ContextMenu,z as ContextMenuContext,yo as ContextMenuProvider,In as Dialog,J as DialogService,ee as MenuItem,V as MenuItemGroup,So as Popup,T as PopupService,G as Portal,Ee as Separator,pe as createContainer,un as installTheme,Ke as isGroupMenuItemDescriptor,F as renderPortal,Jo as useContextMenu};
+// src/dialog/Dialog.tsx
+import { Scrim, Toolbar, ToolbarButton } from "@heswell/salt-lab";
+import { Text } from "@salt-ds/core";
+import cx from "classnames";
+import { useCallback, useRef, useState } from "react";
+
+// src/portal/Portal.tsx
+import { useLayoutEffect, useMemo } from "react";
+import * as ReactDOM2 from "react-dom";
+
+// src/portal/render-portal.tsx
+import * as ReactDOM from "react-dom";
+import { SaltProvider } from "@salt-ds/core";
+import { jsx } from "react/jsx-runtime";
+var containerId = 1;
+var getPortalContainer = (x = 0, y = 0, win = window) => {
+  const el = win.document.createElement("div");
+  el.className = "vuuPopup " + containerId++;
+  el.style.cssText = `left:${x}px; top:${y}px;`;
+  win.document.body.appendChild(el);
+  return el;
+};
+var createDOMContainer = (x, y) => getPortalContainer(x, y);
+var renderPortal = (component, container, x, y, onRender) => {
+  container.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;
+  ReactDOM.render(
+    /* @__PURE__ */ jsx(SaltProvider, { applyClassesTo: "child", children: component }),
+    container,
+    onRender
+  );
+};
+var createContainer = createDOMContainer;
+
+// src/portal/Portal.tsx
+var Portal = function Portal2({
+  children,
+  x = 0,
+  y = 0,
+  onRender
+}) {
+  const renderContainer = useMemo(() => {
+    return createContainer();
+  }, []);
+  useLayoutEffect(() => {
+    renderPortal(children, renderContainer, x, y, onRender);
+  }, [children, onRender, renderContainer, x, y]);
+  useLayoutEffect(() => {
+    return () => {
+      var _a;
+      if (renderContainer) {
+        ReactDOM2.unmountComponentAtNode(renderContainer);
+        if (renderContainer.classList.contains("vuuPopup")) {
+          (_a = renderContainer.parentElement) == null ? void 0 : _a.removeChild(renderContainer);
+        }
+      }
+    };
+  }, [renderContainer]);
+  return null;
+};
+
+// src/portal/portal-utils.ts
+var installTheme = (themeId) => {
+  const installedThemes = getComputedStyle(document.body).getPropertyValue(
+    "--installed-themes"
+  );
+  document.body.style.setProperty(
+    "--installed-themes",
+    `${installedThemes} ${themeId}`
+  );
+};
+
+// src/dialog/Dialog.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var classBase = "vuuDialog";
+var Dialog = ({
+  children,
+  className,
+  isOpen = false,
+  onClose,
+  title,
+  ...props
+}) => {
+  const root = useRef(null);
+  const [posX] = useState(0);
+  const [posY] = useState(0);
+  const close = useCallback(() => {
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  const handleRender = useCallback(() => {
+  }, []);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(Portal, { onRender: handleRender, x: posX, y: posY, children: /* @__PURE__ */ jsx2(Scrim, { className: `${classBase}-scrim`, open: isOpen, children: /* @__PURE__ */ jsxs("div", { ...props, className: cx(classBase, className), ref: root, children: [
+    /* @__PURE__ */ jsxs(Toolbar, { className: `${classBase}-header`, children: [
+      /* @__PURE__ */ jsx2(Text, { children: title }),
+      /* @__PURE__ */ jsx2(
+        ToolbarButton,
+        {
+          onClick: close,
+          "data-align-end": true,
+          "data-icon": "close"
+        },
+        "close"
+      )
+    ] }),
+    children
+  ] }) }) });
+};
+
+// src/menu/ContextMenu.tsx
+import { useIdMemo as useId2 } from "@salt-ds/core";
+import { useCallback as useCallback5, useRef as useRef5 } from "react";
+
+// src/menu/MenuList.tsx
+import React2, {
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo4,
+  useRef as useRef3
+} from "react";
+import cx2 from "classnames";
+import { useIdMemo as useId } from "@salt-ds/core";
+
+// src/menu/use-keyboard-navigation.ts
+import {
+  useCallback as useCallback2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/menu/utils.ts
+var isRoot = (el) => el.closest(`[data-root='true']`) !== null;
+var hasPopup = (el, idx) => {
+  var _a;
+  return el.ariaHasPopup === "true" && ((_a = el.dataset) == null ? void 0 : _a.idx) === `${idx}` || el.querySelector(`:scope > [data-idx='${idx}'][aria-haspopup='true']`) !== null;
+};
+
+// src/menu/key-code.ts
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (const set of sets) {
+    for (const element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+var Enter = "Enter";
+var Delete = "Delete";
+var actionKeys = /* @__PURE__ */ new Set([Enter, Delete]);
+var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+var verticalNavigationKeys = /* @__PURE__ */ new Set(["Home", "End", "ArrowDown", "ArrowUp"]);
+var horizontalNavigationKeys = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "ArrowRight",
+  "ArrowLeft"
+]);
+var functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+var specialKeys = union(
+  actionKeys,
+  horizontalNavigationKeys,
+  verticalNavigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+var isNavigationKey = ({ key }, orientation = "vertical") => {
+  const navigationKeys = orientation === "vertical" ? verticalNavigationKeys : horizontalNavigationKeys;
+  return navigationKeys.has(key);
+};
+
+// src/menu/use-keyboard-navigation.ts
+var useKeyboardNavigation = ({
+  autoHighlightFirstItem = false,
+  count,
+  highlightedIndex: highlightedIndexProp,
+  onActivate,
+  onHighlight,
+  // onKeyDown,
+  onCloseMenu,
+  onOpenMenu
+}) => {
+  const highlightedIndexRef = useRef2(
+    (highlightedIndexProp != null ? highlightedIndexProp : autoHighlightFirstItem) ? 0 : -1
+  );
+  const [, forceRender] = useState2(null);
+  const controlledHighlighting = highlightedIndexProp !== void 0;
+  const setHighlightedIdx = useCallback2(
+    (idx) => {
+      highlightedIndexRef.current = idx;
+      onHighlight == null ? void 0 : onHighlight(idx);
+      forceRender({});
+    },
+    [onHighlight]
+  );
+  const setHighlightedIndex = useCallback2(
+    (idx) => {
+      if (idx !== highlightedIndexRef.current) {
+        if (!controlledHighlighting) {
+          setHighlightedIdx(idx);
+        }
+      }
+    },
+    [controlledHighlighting, setHighlightedIdx]
+  );
+  const keyBoardNavigation = useRef2(true);
+  const ignoreFocus = useRef2(false);
+  const setIgnoreFocus = (value) => ignoreFocus.current = value;
+  const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
+  const navigateChildldItems = useCallback2(
+    (e) => {
+      const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
+      if (nextIdx !== highlightedIndexRef.current) {
+        setHighlightedIndex(nextIdx);
+      }
+    },
+    [count, setHighlightedIndex]
+  );
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (isNavigationKey(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        keyBoardNavigation.current = true;
+        navigateChildldItems(e);
+      } else if ((e.key === "ArrowRight" || e.key === "Enter") && hasPopup(e.target, highlightedIndex)) {
+        onOpenMenu(highlightedIndex);
+      } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
+        onCloseMenu(highlightedIndex);
+      } else if (e.key === "Enter") {
+        onActivate && onActivate(highlightedIndex);
+      }
+    },
+    [
+      highlightedIndex,
+      navigateChildldItems,
+      onActivate,
+      onCloseMenu,
+      onOpenMenu
+    ]
+  );
+  const listProps = useMemo2(
+    () => ({
+      onFocus: () => {
+        if (highlightedIndex === -1) {
+          setHighlightedIdx(0);
+        }
+      },
+      onKeyDown: handleKeyDown,
+      onMouseDownCapture: () => {
+        keyBoardNavigation.current = false;
+        setIgnoreFocus(true);
+      },
+      // onMouseEnter would seem less expensive but it misses some cases
+      onMouseMove: () => {
+        if (keyBoardNavigation.current) {
+          keyBoardNavigation.current = false;
+        }
+      },
+      onMouseLeave: () => {
+        keyBoardNavigation.current = true;
+        setIgnoreFocus(false);
+        setHighlightedIndex(-1);
+      }
+    }),
+    [
+      highlightedIndex,
+      setHighlightedIndex,
+      navigateChildldItems,
+      onActivate,
+      onCloseMenu,
+      onOpenMenu,
+      setHighlightedIdx
+    ]
+  );
+  return {
+    focusVisible: keyBoardNavigation.current ? highlightedIndex : -1,
+    controlledHighlighting,
+    highlightedIndex,
+    setHighlightedIndex,
+    // keyBoardNavigation,
+    listProps,
+    setIgnoreFocus
+  };
+};
+function nextItemIdx(count, key, idx) {
+  if (key === "ArrowUp") {
+    if (idx > 0) {
+      return idx - 1;
+    } else {
+      return idx;
+    }
+  } else {
+    if (idx === null) {
+      return 0;
+    } else if (idx === count - 1) {
+      return idx;
+    } else {
+      return idx + 1;
+    }
+  }
+}
+
+// src/menu/use-items-with-ids.ts
+import React, { useCallback as useCallback3, useMemo as useMemo3 } from "react";
+var isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
+var useItemsWithIds = (childrenProp) => {
+  const normalizeChildren = useCallback3(() => {
+    const collectChildren = (children, path = "root", menus2 = {}, actions2 = {}) => {
+      const list = menus2[path] = [];
+      let idx = 0;
+      let hasSeparator = false;
+      React.Children.forEach(children, (child) => {
+        if (child.type === Separator) {
+          hasSeparator = true;
+        } else {
+          const group = isMenuItemGroup(child);
+          const childPath = path === "root" ? `${idx}` : `${path}.${idx}`;
+          const {
+            props: { action, options }
+          } = child;
+          const { childWithId, grandChildren } = assignId(
+            child,
+            childPath,
+            group,
+            hasSeparator
+          );
+          list.push(childWithId);
+          if (grandChildren) {
+            collectChildren(grandChildren, childPath, menus2, actions2);
+          } else {
+            actions2[childPath] = { action, options };
+          }
+          idx += 1;
+          hasSeparator = false;
+        }
+      });
+      return [menus2, actions2];
+    };
+    const assignId = (child, path, group, hasSeparator = false) => {
+      const {
+        props: { children }
+      } = child;
+      return {
+        childWithId: React.cloneElement(child, {
+          hasSeparator,
+          id: `${path}`,
+          key: path,
+          children: group ? void 0 : children
+        }),
+        grandChildren: group ? children : void 0
+      };
+    };
+    return collectChildren(childrenProp);
+  }, [childrenProp]);
+  const [menus, actions] = useMemo3(
+    () => normalizeChildren(),
+    [normalizeChildren]
+  );
+  return [menus, actions];
+};
+
+// src/menu/MenuList.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var classBase2 = "vuuMenuList";
+var Separator = () => /* @__PURE__ */ jsx3("li", { className: "vuuMenuItem-divider" });
+var MenuItemGroup = () => null;
+var MenuItem = ({ children, idx, ...props }) => {
+  return /* @__PURE__ */ jsx3("div", { ...props, children });
+};
+var hasIcon = (child) => child.props["data-icon"];
+var MenuList = ({
+  activatedByKeyboard,
+  childMenuShowing = -1,
+  children,
+  className,
+  highlightedIdx: highlightedIdxProp,
+  id: idProp,
+  isRoot: isRoot2,
+  listItemProps,
+  menuId,
+  onHighlightMenuItem,
+  onActivate,
+  onCloseMenu,
+  onOpenMenu,
+  ...props
+}) => {
+  const id = useId(idProp);
+  const root = useRef3(null);
+  const mapIdxToId = useMemo4(() => /* @__PURE__ */ new Map(), []);
+  const handleOpenMenu = (idx) => {
+    var _a;
+    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-idx='${idx}']`);
+    (el == null ? void 0 : el.id) && (onOpenMenu == null ? void 0 : onOpenMenu(el.id));
+  };
+  const handleActivate = (idx) => {
+    var _a;
+    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-idx='${idx}']`);
+    (el == null ? void 0 : el.id) && (onActivate == null ? void 0 : onActivate(el.id));
+  };
+  const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation({
+    count: React2.Children.count(children),
+    highlightedIndex: highlightedIdxProp,
+    onActivate: handleActivate,
+    onHighlight: onHighlightMenuItem,
+    onOpenMenu: handleOpenMenu,
+    onCloseMenu
+  });
+  const appliedFocusVisible = childMenuShowing == -1 ? focusVisible : -1;
+  useLayoutEffect2(() => {
+    var _a;
+    if (childMenuShowing === -1 && activatedByKeyboard) {
+      (_a = root.current) == null ? void 0 : _a.focus();
+    }
+  }, [activatedByKeyboard, childMenuShowing]);
+  const getActiveDescendant = () => highlightedIndex === void 0 || highlightedIndex === -1 ? void 0 : mapIdxToId.get(highlightedIndex);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...props,
+      ...listProps,
+      "aria-activedescendant": getActiveDescendant(),
+      className: cx2(classBase2, className, {
+        [`${classBase2}-childMenuShowing`]: childMenuShowing !== -1
+      }),
+      "data-root": isRoot2 || void 0,
+      id: `${id}-${menuId}`,
+      ref: root,
+      role: "menu",
+      tabIndex: 0,
+      children: renderContent()
+    }
+  );
+  function renderContent() {
+    const propsCommonToAllListItems = {
+      ...listItemProps,
+      role: "menuitem"
+    };
+    const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "vuuIconContainer",
+          "data-icon": iconName
+        },
+        "icon"
+      )
+    ].concat(childElement) : childElement;
+    function addClonedChild(list, child, idx, withIcon) {
+      var _a;
+      const {
+        children: children2,
+        className: className2,
+        "data-icon": iconName,
+        id: itemId,
+        hasSeparator,
+        label,
+        ...props2
+      } = child.props;
+      const hasSubMenu = isMenuItemGroup(child);
+      const subMenuShowing = hasSubMenu && childMenuShowing === idx;
+      const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
+      list.push(
+        /* @__PURE__ */ jsx3(
+          MenuItem,
+          {
+            ...props2,
+            ...propsCommonToAllListItems,
+            ...getMenuItemProps(
+              `${id}-${menuId}`,
+              itemId,
+              idx,
+              (_a = child.key) != null ? _a : itemId,
+              highlightedIndex,
+              appliedFocusVisible,
+              className2,
+              hasSeparator
+            ),
+            "aria-controls": ariaControls,
+            "aria-haspopup": hasSubMenu || void 0,
+            "aria-expanded": subMenuShowing || void 0,
+            children: hasSubMenu ? maybeIcon(label, withIcon, iconName) : maybeIcon(children2, withIcon, iconName)
+          }
+        )
+      );
+    }
+    const listItems = [];
+    if (children.length > 0) {
+      const withIcon = children.some(hasIcon);
+      children.forEach((child, idx) => {
+        addClonedChild(listItems, child, idx, withIcon);
+      });
+    }
+    return listItems;
+  }
+};
+var getMenuItemProps = (baseId, itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
+  id: `${baseId}-${itemId}`,
+  key: key != null ? key : idx,
+  "data-idx": idx,
+  "data-highlighted": idx === highlightedIdx || void 0,
+  className: cx2("vuuMenuItem", className, {
+    "vuuMenuItem-separator": hasSeparator,
+    focusVisible: focusVisible === idx
+  })
+});
+MenuList.displayName = "MenuList";
+var MenuList_default = MenuList;
+
+// src/menu/use-cascade.ts
+import {
+  useCallback as useCallback4,
+  useMemo as useMemo5,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+
+// src/menu/list-dom-utils.ts
+function listItemIndex(listItemEl) {
+  if (listItemEl) {
+    const idx = listItemEl.dataset.idx;
+    if (idx) {
+      return parseInt(idx, 10);
+    } else if (listItemEl.ariaPosInSet) {
+      return parseInt(listItemEl.ariaPosInSet, 10) - 1;
+    }
+  }
+}
+var closestListItem = (el) => el == null ? void 0 : el.closest("[data-idx],[aria-posinset]");
+
+// src/menu/use-cascade.ts
+var nudge = (menus, distance, pos) => {
+  return menus.map(
+    (m, i) => i === menus.length - 1 ? {
+      ...m,
+      [pos]: m[pos] - distance
+    } : m
+  );
+};
+var nudgeLeft = (menus, distance) => nudge(menus, distance, "left");
+var nudgeUp = (menus, distance) => nudge(menus, distance, "top");
+var flipSides = (id, menus) => {
+  const [parentMenu, menu] = menus.slice(-2);
+  const el = document.getElementById(`${id}-${menu.id}`);
+  if (el === null) {
+    throw Error(`useCascade.flipSides element with id ${menu.id} not found`);
+  }
+  const { width } = el.getBoundingClientRect();
+  return menus.map(
+    (m) => m === menu ? {
+      ...m,
+      left: parentMenu.left - (width - 2)
+    } : m
+  );
+};
+var getPosition = (el, openMenus) => {
+  const [{ left, top: menuTop }] = openMenus.slice(-1);
+  const { offsetWidth: width, offsetTop: top } = el;
+  return { left: left + width, top: top + menuTop };
+};
+var getItemId = (id) => {
+  const pos = id.lastIndexOf("-");
+  return pos === -1 ? id : id.slice(pos + 1);
+};
+var getMenuId = (id) => {
+  const itemId = getItemId(id);
+  const pos = itemId.lastIndexOf(".");
+  return pos > -1 ? itemId.slice(0, pos) : "root";
+};
+var getMenuDepth = (id) => {
+  let count = 0, pos = id.indexOf(".", 0);
+  while (pos !== -1) {
+    count += 1;
+    pos = id.indexOf(".", pos + 1);
+  }
+  return count;
+};
+var identifyItem = (el) => ({
+  menuId: getMenuId(el.id),
+  itemId: getItemId(el.id),
+  isGroup: el.ariaHasPopup === "true",
+  isOpen: el.ariaExpanded === "true",
+  level: getMenuDepth(el.id)
+});
+var useCascade = ({
+  id,
+  onActivate,
+  onMouseEnterItem,
+  position: { x: posX, y: posY }
+}) => {
+  const [, forceRefresh] = useState3({});
+  const openMenus = useRef4([
+    { id: "root", left: posX, top: posY }
+  ]);
+  const setOpenMenus = useCallback4((menus) => {
+    openMenus.current = menus;
+    forceRefresh({});
+  }, []);
+  const menuOpenPendingTimeout = useRef4();
+  const menuClosePendingTimeout = useRef4();
+  const menuState = useRef4({ root: "no-popup" });
+  const prevLevel = useRef4(0);
+  const openMenu = useCallback4(
+    (menuId = "root", itemId = null, listItemEl = null) => {
+      if (menuId === "root" && itemId === null) {
+        setOpenMenus([{ id: "root", left: posX, top: posY }]);
+      } else {
+        menuState.current[menuId] = "popup-open";
+        const doc = listItemEl ? listItemEl.ownerDocument : document;
+        const el = doc.getElementById(`${id}-${menuId}-${itemId}`);
+        const { left, top } = getPosition(el, openMenus.current);
+        setOpenMenus(openMenus.current.concat({ id: itemId, left, top }));
+      }
+    },
+    [id, posX, posY, setOpenMenus]
+  );
+  const closeMenu = useCallback4(
+    (menuId) => {
+      if (menuId === "root") {
+        setOpenMenus([]);
+      } else {
+        setOpenMenus(openMenus.current.slice(0, -1));
+      }
+    },
+    [setOpenMenus]
+  );
+  const closeMenus = useCallback4(
+    (menuId, itemId) => {
+      const menus = openMenus.current.slice();
+      let { id: lastMenuId } = menus[menus.length - 1];
+      while (menus.length > 1 && !itemId.startsWith(lastMenuId)) {
+        const parentMenuId = getMenuId(lastMenuId);
+        menus.pop();
+        menuState.current[lastMenuId] = "no-popup";
+        menuState.current[parentMenuId] = "no-popup";
+        ({ id: lastMenuId } = menus[menus.length - 1]);
+      }
+      if (menus.length < openMenus.current.length) {
+        setOpenMenus(menus);
+      }
+    },
+    [setOpenMenus]
+  );
+  const scheduleOpen = useCallback4(
+    (menuId, itemId, listItemEl) => {
+      if (menuOpenPendingTimeout.current) {
+        clearTimeout(menuOpenPendingTimeout.current);
+      }
+      menuOpenPendingTimeout.current = window.setTimeout(() => {
+        console.log(`scheduleOpen timed out opening ${itemId}`);
+        closeMenus(menuId, itemId);
+        menuState.current[menuId] = "popup-open";
+        menuState.current[itemId] = "no-popup";
+        openMenu(menuId, itemId, listItemEl);
+      }, 400);
+    },
+    [closeMenus, openMenu]
+  );
+  const scheduleClose = useCallback4(
+    (openMenuId, menuId, itemId) => {
+      console.log(
+        `scheduleClose openMenuId ${openMenuId} menuId ${menuId} itemId ${itemId}`
+      );
+      menuState.current[openMenuId] = "pending-close";
+      menuClosePendingTimeout.current = window.setTimeout(() => {
+        closeMenus(menuId, itemId);
+      }, 400);
+    },
+    [closeMenus]
+  );
+  const handleRender = useCallback4(() => {
+    const { current: menus } = openMenus;
+    const [menu] = menus.slice(-1);
+    const el = document.getElementById(`${id}-${menu.id}`);
+    if (el) {
+      const { right, bottom } = el.getBoundingClientRect();
+      const { clientHeight, clientWidth } = document.body;
+      if (right > clientWidth) {
+        const newMenus = menus.length > 1 ? flipSides(id, menus) : nudgeLeft(menus, right - clientWidth);
+        setOpenMenus(newMenus);
+      } else if (bottom > clientHeight) {
+        const newMenus = nudgeUp(menus, bottom - clientHeight);
+        setOpenMenus(newMenus);
+      }
+    }
+  }, [id, setOpenMenus]);
+  const listItemProps = useMemo5(
+    () => ({
+      onMouseEnter: (evt) => {
+        const listItemEl = closestListItem(evt.target);
+        const { menuId, itemId, isGroup, isOpen, level } = identifyItem(listItemEl);
+        const sameLevel = prevLevel.current === level;
+        const {
+          current: { [menuId]: state }
+        } = menuState;
+        prevLevel.current = level;
+        if (state === "no-popup" && isGroup) {
+          menuState.current[menuId] = "popup-pending";
+          scheduleOpen(menuId, itemId, listItemEl);
+        } else if (state === "popup-pending" && !isGroup) {
+          menuState.current[menuId] = "no-popup";
+          clearTimeout(menuOpenPendingTimeout.current);
+          menuOpenPendingTimeout.current = void 0;
+        } else if (state === "popup-pending" && isGroup) {
+          clearTimeout(menuOpenPendingTimeout.current);
+          scheduleOpen(menuId, itemId, listItemEl);
+        } else if (state === "popup-open") {
+          const [{ id: parentMenuId }, { id: openMenuId }] = openMenus.current.slice(-2);
+          if (parentMenuId === menuId && menuState.current[openMenuId] !== "pending-close" && sameLevel) {
+            scheduleClose(openMenuId, menuId, itemId);
+            if (isGroup && !isOpen) {
+              scheduleOpen(menuId, itemId, listItemEl);
+            }
+          } else if (parentMenuId === menuId && isGroup && itemId !== openMenuId && menuState.current[openMenuId] === "pending-close") {
+            scheduleOpen(menuId, itemId, listItemEl);
+          } else if (isGroup) {
+            closeMenus(menuId, itemId);
+            scheduleOpen(menuId, itemId, listItemEl);
+          } else if (!(menuState.current[openMenuId] === "pending-close" && sameLevel)) {
+            closeMenus(menuId, itemId);
+          }
+        }
+        if (state === "pending-close") {
+          if (menuOpenPendingTimeout.current) {
+            clearTimeout(menuOpenPendingTimeout.current);
+            menuOpenPendingTimeout.current = void 0;
+          }
+          clearTimeout(menuClosePendingTimeout.current);
+          menuClosePendingTimeout.current = void 0;
+          menuState.current[menuId] = "popup-open";
+        }
+        onMouseEnterItem(evt, itemId);
+      },
+      onClick: (evt) => {
+        const targetElement = evt.target;
+        const listItemEl = closestListItem(targetElement);
+        const idx = listItemIndex(listItemEl);
+        console.log(
+          `list item click [${idx}] hasPopup ${listItemEl.ariaHasPopup}`
+        );
+        if (listItemEl.ariaHasPopup === "true") {
+          if (listItemEl.ariaExpanded !== "true") {
+            openMenu(idx);
+          } else {
+          }
+        } else {
+          onActivate(getItemId(listItemEl.id));
+        }
+      }
+    }),
+    [
+      closeMenus,
+      onActivate,
+      onMouseEnterItem,
+      openMenu,
+      scheduleClose,
+      scheduleOpen
+    ]
+  );
+  return {
+    closeMenu,
+    handleRender,
+    listItemProps,
+    openMenu,
+    openMenus: openMenus.current
+  };
+};
+
+// src/menu/use-click-away.ts
+import { useEffect } from "react";
+var useClickAway = ({
+  containerClassName,
+  isOpen,
+  onClose
+}) => {
+  useEffect(() => {
+    let clickHandler;
+    if (isOpen) {
+      clickHandler = (evt) => {
+        const target = evt.target;
+        const container = target.closest(`.${containerClassName}`);
+        if (container === null) {
+          onClose == null ? void 0 : onClose("root");
+        }
+      };
+      document.body.addEventListener("click", clickHandler, true);
+    }
+    return () => {
+      if (clickHandler) {
+        document.body.removeEventListener("click", clickHandler, true);
+      }
+    };
+  }, [containerClassName, isOpen, onClose]);
+};
+
+// src/menu/ContextMenu.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import { createElement } from "react";
+var noop = () => void 0;
+var ContextMenu = ({
+  activatedByKeyboard,
+  children: childrenProp,
+  className,
+  id: idProp,
+  onClose = () => void 0,
+  position = { x: 0, y: 0 },
+  style,
+  ...menuListProps
+}) => {
+  const id = useId2(idProp);
+  const closeMenuRef = useRef5(noop);
+  const [menus, actions] = useItemsWithIds(childrenProp);
+  const navigatingWithKeyboard = useRef5(activatedByKeyboard);
+  const handleMouseEnterItem = useCallback5(() => {
+    navigatingWithKeyboard.current = false;
+  }, []);
+  const handleActivate = useCallback5(
+    (menuId) => {
+      const { action, options } = actions[menuId];
+      closeMenuRef.current("root");
+      onClose(action, options);
+    },
+    [actions, onClose]
+  );
+  const { closeMenu, listItemProps, openMenu, openMenus, handleRender } = useCascade({
+    id,
+    onActivate: handleActivate,
+    onMouseEnterItem: handleMouseEnterItem,
+    position
+  });
+  closeMenuRef.current = closeMenu;
+  console.log({ openMenus });
+  const handleClose = useCallback5(() => {
+    closeMenu();
+    onClose();
+  }, [closeMenu, onClose]);
+  useClickAway({
+    containerClassName: "vuuMenuList",
+    onClose: handleClose,
+    isOpen: openMenus.length > 0
+  });
+  const handleOpenMenu = (id2) => {
+    const itemId = getItemId(id2);
+    const menuId = getMenuId(itemId);
+    navigatingWithKeyboard.current = true;
+    openMenu(menuId, itemId);
+  };
+  const handleCloseMenu = () => {
+    navigatingWithKeyboard.current = true;
+    closeMenu();
+  };
+  const handleHighlightMenuItem = () => {
+  };
+  const lastMenu = openMenus.length - 1;
+  const getChildMenuIndex = (i) => {
+    if (i >= lastMenu) {
+      return -1;
+    } else {
+      const { id: menuId } = openMenus[i + 1];
+      const pos = menuId.lastIndexOf(".");
+      const idx = pos === -1 ? parseInt(menuId, 10) : parseInt(menuId.slice(-pos), 10);
+      return idx;
+    }
+  };
+  return /* @__PURE__ */ jsx4(Fragment, { children: openMenus.map(({ id: menuId, left, top }, i) => {
+    const childMenuIndex = getChildMenuIndex(i);
+    return /* @__PURE__ */ jsx4(Portal, { x: left, y: top, onRender: handleRender, children: /* @__PURE__ */ createElement(
+      MenuList_default,
+      {
+        ...menuListProps,
+        activatedByKeyboard: navigatingWithKeyboard.current,
+        childMenuShowing: childMenuIndex,
+        className,
+        id,
+        menuId,
+        isRoot: i === 0,
+        key: i,
+        listItemProps,
+        onActivate: handleActivate,
+        onHighlightMenuItem: handleHighlightMenuItem,
+        onCloseMenu: handleCloseMenu,
+        onOpenMenu: handleOpenMenu,
+        style
+      },
+      menus[menuId]
+    ) }, i);
+  }) });
+};
+ContextMenu.displayName = "ContextMenu";
+
+// src/menu/context-menu-provider.tsx
+import { createContext, useCallback as useCallback6, useMemo as useMemo6 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ContextMenuContext = createContext(
+  null
+);
+var isGroupMenuItemDescriptor = (menuItem) => menuItem !== void 0 && "children" in menuItem;
+var Provider = ({
+  children,
+  context,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  const menuBuilders = useMemo6(() => {
+    if ((context == null ? void 0 : context.menuBuilders) && menuBuilder) {
+      return context.menuBuilders.concat(menuBuilder);
+    } else if (menuBuilder) {
+      return [menuBuilder];
+    } else {
+      return (context == null ? void 0 : context.menuBuilders) || [];
+    }
+  }, [context, menuBuilder]);
+  const handleMenuAction = useCallback6(
+    (type, options) => {
+      var _a;
+      if (menuActionHandler == null ? void 0 : menuActionHandler(type, options)) {
+        return true;
+      }
+      if ((_a = context == null ? void 0 : context.menuActionHandler) == null ? void 0 : _a.call(context, type, options)) {
+        return true;
+      }
+    },
+    [context, menuActionHandler]
+  );
+  return /* @__PURE__ */ jsx5(
+    ContextMenuContext.Provider,
+    {
+      value: {
+        menuActionHandler: handleMenuAction,
+        menuBuilders
+      },
+      children
+    }
+  );
+};
+var ContextMenuProvider = ({
+  children,
+  label,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  return /* @__PURE__ */ jsx5(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ jsx5(
+    Provider,
+    {
+      context: parentContext,
+      label,
+      menuActionHandler,
+      menuBuilder,
+      children
+    }
+  ) });
+};
+
+// src/menu/useContextMenu.tsx
+import { useCallback as useCallback7, useContext } from "react";
+
+// src/popup/popup-service.ts
+import cx3 from "classnames";
+import React3, {
+  createElement as createElement2,
+  useEffect as useEffect2,
+  useRef as useRef6
+} from "react";
+import ReactDOM3 from "react-dom";
+var _dialogOpen = false;
+var _popups = [];
+function specialKeyHandler(e) {
+  if (e.key === "Esc") {
+    if (_popups.length) {
+      closeAllPopups();
+    } else if (_dialogOpen) {
+      const dialogRoot = document.body.querySelector(".vuuDialog");
+      if (dialogRoot) {
+        ReactDOM3.unmountComponentAtNode(dialogRoot);
+      }
+    }
+  }
+}
+function outsideClickHandler(e) {
+  if (_popups.length) {
+    const popupContainers = document.body.querySelectorAll(".vuuPopup");
+    for (let i = 0; i < popupContainers.length; i++) {
+      if (popupContainers[i].contains(e.target)) {
+        return;
+      }
+    }
+    closeAllPopups();
+  }
+}
+function closeAllPopups() {
+  if (_popups.length) {
+    const popupContainers = document.body.querySelectorAll(".vuuPopup");
+    for (let i = 0; i < popupContainers.length; i++) {
+      ReactDOM3.unmountComponentAtNode(popupContainers[i]);
+    }
+    popupClosed("*");
+  }
+}
+function dialogOpened() {
+  if (_dialogOpen === false) {
+    _dialogOpen = true;
+    window.addEventListener("keydown", specialKeyHandler, true);
+  }
+}
+function dialogClosed() {
+  if (_dialogOpen) {
+    _dialogOpen = false;
+    window.removeEventListener("keydown", specialKeyHandler, true);
+  }
+}
+function popupOpened(name) {
+  if (_popups.indexOf(name) === -1) {
+    _popups.push(name);
+    if (_dialogOpen === false) {
+      window.addEventListener("keydown", specialKeyHandler, true);
+      window.addEventListener("click", outsideClickHandler, true);
+    }
+  }
+}
+function popupClosed(name) {
+  if (_popups.length) {
+    if (name === "*") {
+      _popups.length = 0;
+    } else {
+      const pos = _popups.indexOf(name);
+      if (pos !== -1) {
+        _popups.splice(pos, 1);
+      }
+    }
+    if (_popups.length === 0 && _dialogOpen === false) {
+      window.removeEventListener("keydown", specialKeyHandler, true);
+      window.removeEventListener("click", outsideClickHandler, true);
+    }
+  }
+}
+var PopupComponent = ({
+  children,
+  position,
+  style
+}) => {
+  const className = cx3("hwPopup", "hwPopupContainer", position);
+  return createElement2("div", { className, style }, children);
+};
+var incrementingKey = 1;
+var PopupService = class {
+  static showPopup({
+    name = "anon",
+    group = "all",
+    position = "",
+    left = 0,
+    right = "auto",
+    top = 0,
+    width = "auto",
+    component
+  }) {
+    if (!component) {
+      throw Error(`PopupService showPopup, no component supplied`);
+    }
+    popupOpened(name);
+    let el = document.body.querySelector(".vuuPopup." + group);
+    if (el === null) {
+      el = document.createElement("div");
+      el.className = "vuuPopup " + group;
+      document.body.appendChild(el);
+    }
+    const style = { width };
+    renderPortal(
+      createElement2(
+        PopupComponent,
+        { key: incrementingKey++, position, style },
+        component
+      ),
+      el,
+      left,
+      top,
+      () => {
+        PopupService.keepWithinThePage(el, right);
+      }
+    );
+  }
+  static hidePopup(name = "anon", group = "all") {
+    if (_popups.indexOf(name) !== -1) {
+      popupClosed(name);
+      const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);
+      if (popupRoot) {
+        ReactDOM3.unmountComponentAtNode(popupRoot);
+      }
+    }
+  }
+  static keepWithinThePage(el, right = "auto") {
+    const target = el.querySelector(".vuuPopupContainer > *");
+    if (target) {
+      const {
+        top,
+        left,
+        width,
+        height,
+        right: currentRight
+      } = target.getBoundingClientRect();
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      const overflowH = h - (top + height);
+      if (overflowH < 0) {
+        target.style.top = Math.round(top) + overflowH + "px";
+      }
+      const overflowW = w - (left + width);
+      if (overflowW < 0) {
+        target.style.left = Math.round(left) + overflowW + "px";
+      }
+      if (typeof right === "number" && right !== currentRight) {
+        const adjustment = right - currentRight;
+        target.style.left = left + adjustment + "px";
+      }
+    }
+  }
+};
+var DialogService = class {
+  static showDialog(dialog) {
+    const containerEl = ".vuuDialog";
+    const onClose = dialog.props.onClose;
+    dialogOpened();
+    ReactDOM3.render(
+      React3.cloneElement(dialog, {
+        container: containerEl,
+        onClose: () => {
+          DialogService.closeDialog();
+          if (onClose) {
+            onClose();
+          }
+        }
+      }),
+      document.body.querySelector(containerEl)
+    );
+  }
+  static closeDialog() {
+    dialogClosed();
+    const dialogRoot = document.body.querySelector(".vuuDialog");
+    if (dialogRoot) {
+      ReactDOM3.unmountComponentAtNode(dialogRoot);
+    }
+  }
+};
+var Popup = (props) => {
+  const pendingTask = useRef6();
+  const ref = useRef6(null);
+  const show = (props2, boundingClientRect) => {
+    const { name, group, depth, width } = props2;
+    let left;
+    let top;
+    if (pendingTask.current) {
+      window.clearTimeout(pendingTask.current);
+      pendingTask.current = void 0;
+    }
+    if (props2.close === true) {
+      PopupService.hidePopup(name, group);
+    } else {
+      const { position, children: component } = props2;
+      const {
+        left: targetLeft,
+        top: targetTop,
+        width: clientWidth,
+        bottom: targetBottom
+      } = boundingClientRect;
+      if (position === "below") {
+        left = targetLeft;
+        top = targetBottom;
+      } else if (position === "above") {
+        left = targetLeft;
+        top = targetTop;
+      }
+      pendingTask.current = window.setTimeout(() => {
+        PopupService.showPopup({
+          name,
+          group,
+          depth,
+          position,
+          left,
+          top,
+          width: width || clientWidth,
+          component
+        });
+      }, 10);
+    }
+  };
+  useEffect2(() => {
+    if (ref.current) {
+      const el = ref.current.parentElement;
+      const boundingClientRect = el == null ? void 0 : el.getBoundingClientRect();
+      if (boundingClientRect) {
+        show(props, boundingClientRect);
+      }
+    }
+    return () => {
+      PopupService.hidePopup(props.name, props.group);
+    };
+  }, [props]);
+  return React3.createElement("div", { className: "popup-proxy", ref });
+};
+
+// src/menu/useContextMenu.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var useContextMenu = () => {
+  const ctx = useContext(ContextMenuContext);
+  const buildMenuOptions = useCallback7(
+    (menuBuilders, location, options) => {
+      let results = [];
+      for (const menuBuilder of menuBuilders) {
+        results = results.concat(menuBuilder(location, options));
+      }
+      return results;
+    },
+    []
+  );
+  const handleShowContextMenu = useCallback7(
+    (e, location, options) => {
+      var _a;
+      e.stopPropagation();
+      e.preventDefault();
+      const menuBuilders = (_a = ctx == null ? void 0 : ctx.menuBuilders) != null ? _a : [];
+      const menuItemDescriptors = buildMenuOptions(
+        menuBuilders,
+        location,
+        options
+      );
+      console.log({
+        menuItemDescriptors
+      });
+      if (menuItemDescriptors.length && (ctx == null ? void 0 : ctx.menuActionHandler)) {
+        console.log(`showContextMenu ${location}`, {
+          options
+        });
+        showContextMenu(e, menuItemDescriptors, ctx.menuActionHandler);
+      }
+    },
+    [buildMenuOptions, ctx]
+  );
+  return handleShowContextMenu;
+};
+var showContextMenu = (e, menuDescriptors, handleContextMenuAction) => {
+  const { clientX: left, clientY: top } = e;
+  const menuItems = (menuDescriptors2) => {
+    const fromDescriptor = (menuItem, i) => isGroupMenuItemDescriptor(menuItem) ? /* @__PURE__ */ jsx6(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ jsx6(
+      MenuItem,
+      {
+        action: menuItem.action,
+        "data-icon": menuItem.icon,
+        options: menuItem.options,
+        children: menuItem.label
+      },
+      i
+    );
+    return menuDescriptors2.map(fromDescriptor);
+  };
+  const handleClose = (menuId, options) => {
+    if (menuId) {
+      handleContextMenuAction(menuId, options);
+      PopupService.hidePopup();
+    }
+  };
+  const component = /* @__PURE__ */ jsx6(ContextMenu, { onClose: handleClose, position: { x: left, y: top }, children: menuItems(menuDescriptors) });
+  PopupService.showPopup({ left: 0, top: 0, component });
+};
+export {
+  ContextMenu,
+  ContextMenuContext,
+  ContextMenuProvider,
+  Dialog,
+  DialogService,
+  MenuItem,
+  MenuItemGroup,
+  Popup,
+  PopupService,
+  Portal,
+  Separator,
+  createContainer,
+  installTheme,
+  isGroupMenuItemDescriptor,
+  renderPortal,
+  useContextMenu
+};
 //# sourceMappingURL=index.js.map