@vuu-ui/vuu-popups 0.8.30 → 0.8.31-debug

package/esm/index.js

@@ -1,2 +1,2210 @@
-import Qt from"clsx";import{useThemeAttributes as Zt}from"@vuu-ui/vuu-utils";import{useCallback as jt,useLayoutEffect as _t,useRef as Ke}from"react";import{Button as Lt,Text as Ht}from"@salt-ds/core";import It from"clsx";import{jsx as ke,jsxs as At}from"react/jsx-runtime";var Nt="vuuDialogHeader",Re=({hideCloseButton:e=!1,title:t,onClose:o,...n})=>At("div",{...n,className:It(Nt,"vuuToolbarProxy"),children:[ke(Ht,{className:"dialogHeader",children:t}),!e&&ke(Lt,{onClick:o,"data-align":"end","data-icon":"close",variant:"secondary"},"close")]});import Ot from"clsx";import $t,{createElement as Ne}from"react";import q from"react-dom";import*as Le from"react-dom";import Dt from"clsx";var St=1,Bt=({className:e,dataMode:t,x:o=0,y:n=0,win:r=window})=>{let i=r.document.createElement("div");return i.className=Dt(`vuuPopup ${St++}`,e),i.style.cssText=`left:${o}px; top:${n}px;`,t&&(i.dataset.mode=t),r.document.body.appendChild(i),i},tr=e=>Bt(e),He=(e,t,o,n,r)=>{t.style.cssText=`left:${o}px; top:${n}px;position: absolute;`,Le.render(e,t,r)};var B=!1,I=[],Ae=e=>(e==null?void 0:e.type)==="menu-action",De=e=>(e==null?void 0:e.type)==="click-away";function J(e){if(e.key==="Esc"){if(I.length)Be();else if(B){let t=document.body.querySelector(".vuuDialog");t&&q.unmountComponentAtNode(t)}}}function Se(e){if(I.length){let t=document.body.querySelectorAll(".vuuPopup,#vuu-portal-root");for(let o=0;o<t.length;o++)if(t[o].contains(e.target))return;Be({mouseEvt:e,type:"click-away"})}}function Be(e){if(I.length===1)O.hidePopup(e,"anon","all");else if(I.length){let t=document.body.querySelectorAll(".vuuPopup");for(let o=0;o<t.length;o++)q.unmountComponentAtNode(t[o]);Oe("*")}}function Kt(){B===!1&&(B=!0,window.addEventListener("keydown",J,!0))}function Ft(){B&&(B=!1,window.removeEventListener("keydown",J,!0))}function zt(e){I.indexOf(e)===-1&&(I.push(e),B===!1&&(window.addEventListener("keydown",J,!0),window.addEventListener("click",Se,!0)))}function Oe(e){if(I.length){if(e==="*")I.length=0;else{let t=I.indexOf(e);t!==-1&&I.splice(t,1)}I.length===0&&B===!1&&(window.removeEventListener("keydown",J,!0),window.removeEventListener("click",Se,!0))}}var Wt=({children:e,position:t,style:o})=>{let n=Ot("hwPopup","hwPopupContainer",t);return Ne("div",{className:n,style:o},e)},qt=1,O=class e{static showPopup({group:t="all",name:o="anon",left:n=0,position:r="",right:i="auto",top:u=0,width:d="auto",component:l}){if(!l)throw Error("PopupService showPopup, no component supplied");typeof l.props.onClose=="function"?e.onClose=l.props.onClose:e.onClose=void 0,zt(o),document.addEventListener("keydown",e.escapeKeyListener,!0);let s=document.body.querySelector(".vuuPopup."+t);s===null&&(s=document.createElement("div"),s.className="vuuPopup "+t,document.body.appendChild(s));let a={width:d};He(Ne(Wt,{key:qt++,position:r,style:a},l),s,n,u,()=>{e.keepWithinThePage(s,i)})}static escapeKeyListener(t){t.key==="Escape"&&e.hidePopup({type:"escape",event:t})}static hidePopup(t,o="anon",n="all"){var r;if(I.indexOf(o)!==-1){Oe(o);let i=document.body.querySelector(`.vuuPopup.${n}`);i&&q.unmountComponentAtNode(i)}document.removeEventListener("keydown",e.escapeKeyListener,!0),(r=e==null?void 0:e.onClose)==null||r.call(e,t?{...t,closedBy:"popup-service"}:void 0)}static keepWithinThePage(t,o="auto"){let n=t.querySelector(".vuuPopupContainer > *");if(n){let{top:r,left:i,width:u,height:d,right:l}=n.getBoundingClientRect(),s=window.innerWidth,p=window.innerHeight-(r+d);p<0&&(n.style.top=Math.round(r)+p+"px");let c=s-(i+u);if(c<0&&(n.style.left=Math.round(i)+c+"px"),typeof o=="number"&&o!==l){let f=o-l;n.style.left=i+f+"px"}}}},Ie=class e{static showDialog(t){let o=".vuuDialog",n=t.props.onClose;Kt(),q.render($t.cloneElement(t,{container:o,onClose:()=>{e.closeDialog(),n&&n()}}),document.body.querySelector(o))}static closeDialog(){Ft();let t=document.body.querySelector(".vuuDialog");t&&q.unmountComponentAtNode(t)}};import Jt from"clsx";import{useCallback as Gt,useLayoutEffect as Vt,useRef as Ut,useState as Xt}from"react";var G=(e,t,o,n,r,i)=>{let{bottom:u,height:d,left:l,right:s,top:a,width:p}=e.getBoundingClientRect();switch(t){case"below":return{left:l+o,top:u+n};case"right":return{left:s+o,top:a+n};case"below-center":return{left:l+p/2+o,top:u+n};case"below-right":return{left:l,minWidth:r,top:u+n};case"below-full-width":return{left:l+o,minWidth:r,top:u+n,width:p};case"center":return i?{left:p/2-i.width/2+o,top:d/2-i.height/2+n,visibility:"visible"}:{left:p/2+o,top:d/2+n,visibility:"hidden"};default:throw Error(`Popup getPositionRelativeToAnchor non-supported placement value ${t}`)}};var K=({anchorElement:e,minWidth:t,offsetLeft:o=0,offsetTop:n=0,placement:r,position:i})=>{let u=Ut(null),[d,l]=Xt(i);Vt(()=>{if(r==="absolute"&&i)l(i);else if(e.current&&r!=="auto"){let a=u.current===null?void 0:u.current.getBoundingClientRect(),p=G(e.current,r,o,n,t,a);l(p)}},[e,t,o,n,r,i]);let s=Gt(a=>{if(u.current=a,a&&r==="center"&&e.current){let{height:p,width:c}=a.getBoundingClientRect();l(G(e.current,r,o,n,void 0,{height:p,width:c}))}},[e,o,n,r]);return{position:d,popupRef:r==="center"?s:void 0}};import{jsx as Yt}from"react/jsx-runtime";var $e=({children:e,className:t,anchorElement:o,minWidth:n,offsetLeft:r,offsetTop:i,placement:u,position:d})=>{let{popupRef:l,position:s}=K({anchorElement:o,minWidth:n,offsetLeft:r,offsetTop:i,placement:u,position:d});return s===void 0?null:Yt("div",{className:Jt("vuuPortal",t),ref:l,style:s,children:e})};import{jsx as ie,jsxs as oo}from"react/jsx-runtime";var Fe="vuuDialog",eo={current:document.body},to={},ze=({PopupProps:e=to,children:t,className:o,isOpen:n=!1,onClose:r,style:i,title:u,hideCloseButton:d=!1,...l})=>{let{anchorElement:s=eo,offsetLeft:a=0,offsetTop:p=0,placement:c="auto"}=e,f=Ke(null),P=Ke(null),[g,M,E]=Zt(),{position:T}=K({anchorElement:s,offsetLeft:a,offsetTop:p,placement:c}),C=jt(()=>{r==null||r()},[r]);return _t(()=>{if(f.current){if(n){f.current.showModal();let{left:y,top:v}=f.current.getBoundingClientRect();P.current&&(P.current.style.cssText=`left:-${y}px;position:absolute;top:-${v}px;`)}else f.current.close();if(c.endsWith("center")){let{width:y}=f.current.getBoundingClientRect();f.current.style.marginLeft=`-${y/2}px`}}},[n,c]),oo("dialog",{...l,className:Qt(Fe,g),"data-mode":E,onClose:C,id:"vuu-dialog",ref:f,style:{...i,...T},children:[ie(Re,{hideCloseButton:d,onClose:C,title:u}),ie("div",{className:`${Fe}-body`,children:t}),ie("div",{id:"vuu-dialog-portal-root",ref:P})]})};import{useCallback as no,useState as ro}from"react";import{jsx as io}from"react/jsx-runtime";var Fr=()=>{let[e,t]=ro(),o=no(()=>{t(void 0)},[]);return{dialog:e?io(ze,{className:"vuDialog",isOpen:!0,onClose:o,style:{maxHeight:500},title:e.title,hideCloseButton:e.hideCloseButton,children:e.content}):null,setDialogState:t}};import{useId as qo}from"@vuu-ui/vuu-utils";import{useCallback as de,useRef as st}from"react";import{useThemeAttributes as so}from"@vuu-ui/vuu-utils";import{useLayoutEffect as We,useRef as uo,useState as ao}from"react";import{createPortal as lo}from"react-dom";function po(e){return typeof e=="function"?e():e}var co=["vuu-dialog-portal-root","vuu-portal-root"],mo=e=>{if(Array.isArray(e))for(let t of e){let o=document.getElementById(t);if(o)return o}else return document.getElementById(e);return null},F=({children:e,container:t=document.body,id:o=co,onRender:n,open:r=!0,themeAttributes:i})=>{var f;let[u,d]=ao(!1),l=uo(null),s=(f=po(t))!=null?f:document.body,[a,p,c]=so(i);return We(()=>{let P=mo(o);P?l.current=P:(l.current=document.createElement("div"),l.current.id=typeof o=="string"?o:o.length>0?o.at(-1):"vuu-portal-root");let g=l.current;s.contains(g)||s.appendChild(g),g.classList.add(a,p),g.dataset.mode=c,d(!0)},[o,s,a,p,c]),We(()=>{requestAnimationFrame(()=>{n==null||n()})},[n]),r&&u&&l.current&&e?lo(e,l.current):null};import _e from"clsx";import et,{useLayoutEffect as Ro,useMemo as Lo,useRef as Ho}from"react";import{useId as Io}from"@vuu-ui/vuu-utils";import qe,{useCallback as fo,useMemo as go}from"react";var se=e=>e.type===Y||!!e.props["data-group"],vo=e=>{if(Array.isArray(e)&&ue(e[0]))return e[0]},bo=(e,t,o,n=!1)=>{let{props:{children:r}}=e;return{childWithId:qe.cloneElement(e,{hasSeparator:n,id:`${t}`,key:t,children:o?vo(r):r}),grandChildren:o?r:void 0}},Ge=(e,t)=>{let o=fo(()=>{let i=(u,d=t,l={},s={})=>{let a=l[d]=[],p=0,c=!1;return qe.Children.forEach(u,f=>{if(!ue(f))if(f.type===Ve)c=!0;else{let P=se(f),g=`${d}-${p}`,{props:{action:M,options:E}}=f,{childWithId:T,grandChildren:C}=bo(f,g,P,c);a.push(T),C?i(C,g,l,s):s[g]={action:M,options:E},p+=1,c=!1}}),[l,s]};return i(e)},[t,e]),[n,r]=go(()=>o(),[o]);return[n,r]};import{useCallback as Q,useMemo as Eo,useRef as ae,useState as To}from"react";var Ue=e=>e.closest("[data-root='true']")!==null,Xe=(e,t)=>{var o;return e.ariaHasPopup==="true"&&((o=e.dataset)==null?void 0:o.idx)===`${t}`||e.querySelector(`:scope > [data-index='${t}'][aria-haspopup='true']`)!==null};function ho(e,...t){let o=new Set(e);for(let n of t)for(let r of n)o.add(r);return o}var xo="Enter";var yo="Delete",Mo=new Set([xo,yo]),Po=new Set(["Tab"]),Co=new Set(["ArrowRight","ArrowLeft"]),Je=new Set(["Home","End","ArrowDown","ArrowUp"]),Ye=new Set(["Home","End","ArrowRight","ArrowLeft"]),wo=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),ri=ho(Mo,Ye,Je,Co,wo,Po);var Qe=({key:e},t="vertical")=>(t==="vertical"?Je:Ye).has(e);import{isValidNumber as le}from"@vuu-ui/vuu-utils";var Ze=({autoHighlightFirstItem:e=!1,count:t,defaultHighlightedIdx:o,highlightedIndex:n,onActivate:r,onHighlight:i,onCloseMenu:u,onOpenMenu:d})=>{var y;if(le(n)&&le(o))throw Error("useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx");let l=le(n),s=ae((y=o!=null?o:n)!=null?y:e?0:-1),[,a]=To(null),p=Q(v=>{s.current=v,i==null||i(v),a({})},[i]),c=Q(v=>{v!==s.current&&(l||p(v))},[l,p]),f=ae(!0),P=ae(!1),g=v=>P.current=v,M=l?n:s.current,E=Q(v=>{let m=ko(t,v.key,s.current);m!==s.current&&c(m)},[t,c]),T=Q(v=>{if(Qe(v))v.preventDefault(),v.stopPropagation(),f.current=!0,E(v);else if((v.key==="ArrowRight"||v.key==="Enter")&&Xe(v.target,M)){let b=v.target.querySelector(`:scope > [data-index='${M}']`);b&&(d==null||d(b,!0))}else v.key==="ArrowLeft"&&!Ue(v.target)?u(v,"close-child-menu"):v.key==="Enter"?(v.preventDefault(),v.stopPropagation(),r&&r(M)):v.key==="Tab"&&u(v,"tab-away")},[M,E,r,u,d]),C=Eo(()=>({onFocus:()=>{M===-1&&p(0)},onKeyDown:T,onMouseDownCapture:()=>{f.current=!1,g(!0)},onMouseMove:()=>{f.current&&(f.current=!1)},onMouseLeave:()=>{f.current=!0,g(!1),c(-1)}}),[T,M,p,c]);return{focusVisible:f.current?M:-1,controlledHighlighting:l,highlightedIndex:M,setHighlightedIndex:c,listProps:C,setIgnoreFocus:g}};function ko(e,t,o){return t==="ArrowUp"?o>0?o-1:o:o===null?0:o===e-1?o:o+1}import{Fragment as So,jsx as z}from"react/jsx-runtime";var je="vuuMenuList",Ve=()=>z("li",{className:"vuuMenuItem-divider"}),Y=()=>null,Z=({children:e,idx:t,options:o,...n})=>z("div",{...n,children:e}),tt=({children:e})=>z(So,{children:e});tt.displayName="MenuItemLabel";Z.Label=tt;var No=e=>et.isValidElement(e)&&typeof e.type!="string"&&"displayName"in e.type?e.type.displayName:void 0,ue=e=>No(e)==="MenuItemLabel",Ao=e=>e.props["data-icon"],pe=({activatedByKeyboard:e,childMenuShowing:t,children:o,className:n,defaultHighlightedIdx:r,highlightedIdx:i,id:u,isRoot:d,listItemProps:l,onHighlightMenuItem:s,onActivate:a,onCloseMenu:p,openMenu:c,...f})=>{let P=Io(u),g=Ho(null),M=Lo(()=>new Map,[]),E=x=>{var w;let h=(w=g.current)==null?void 0:w.querySelector(`:scope > [data-index='${x}']`);h!=null&&h.id&&(a==null||a(h.id))},{focusVisible:T,highlightedIndex:C,listProps:y}=Ze({count:et.Children.count(o),defaultHighlightedIdx:r,highlightedIndex:i,onActivate:E,onHighlight:s,onOpenMenu:c,onCloseMenu:p}),v=t==null?T:-1;Ro(()=>{var x;t===void 0&&e&&((x=g.current)==null||x.focus())},[e,t]);let m=()=>C===void 0||C===-1?void 0:M.get(C);function b(){let x={...l,role:"menuitem"},h=(R,L,H)=>L?[z("span",{className:"vuuIconContainer","data-icon":H},"icon")].concat(R):R;function w(R,L,H,S){var Te;let{children:A,className:wt,"data-icon":we,id:X,hasSeparator:Et,label:$,...Tt}=L.props,re=se(L),Ee=re&&t===X,kt=Ee?`${P}-${X}`:void 0,Rt=($!=null?$:typeof A=="string")?A:void 0;R.push(z(Z,{...Tt,...x,...Do(X,H,(Te=L.key)!=null?Te:X,C,v,wt,Et),"aria-controls":kt,"aria-haspopup":re||void 0,"aria-expanded":Ee||void 0,"aria-label":Rt,children:h(re&&$!=null?$:A,S,we)}))}let k=[];if(o.length>0){let R=o.some(Ao);o.forEach((L,H)=>{w(k,L,H,R)})}return k}return z("div",{...f,...y,"aria-activedescendant":m(),className:_e(je,n,{[`${je}-childMenuShowing`]:t!==void 0}),"data-root":d||void 0,id:P,ref:g,role:"menu",children:b()})},Do=(e,t,o,n,r,i,u)=>({id:`menuitem-${e}`,key:o!=null?o:t,"data-index":t,className:_e("vuuMenuItem",i,{"vuuMenuItem-separator":u,vuuHighlighted:t===n,focusVisible:r===t})});pe.displayName="MenuList";import{useCallback as N,useMemo as Bo,useRef as j,useState as Oo}from"react";var ce=e=>e==null?void 0:e.closest("[data-index],[aria-posinset]");var nt=(e,t,o)=>e.map((n,r)=>r===e.length-1?{...n,[o]:n[o]-t}:n),$o=(e,t)=>nt(e,t,"left"),Ko=(e,t)=>nt(e,t,"top"),Fo=(e,t)=>{let[o,n]=t.slice(-2),r=document.getElementById(`${e}-${n.id}`);if(r===null)throw Error(`useCascade.flipSides element with id ${n.id} not found`);let{width:i}=r.getBoundingClientRect();return t.map(u=>u===n?{...u,left:o.left-(i-2)}:u)},zo=(e,t)=>{let[{left:o,top:n}]=t.slice(-1),{offsetWidth:r,offsetTop:i}=e;return{left:o+r,top:i+n}},rt=(e,t)=>{let o=e.lastIndexOf("-");return e.startsWith("menuitem")?o>-1?e.slice(9,o):t:o>-1?e.slice(0,o):t},Wo=e=>e.slice(9),ot=({ariaExpanded:e,ariaHasPopup:t,id:o},n)=>{if(o.startsWith("menuitem"))return{hostMenuId:rt(o,n),targetMenuId:Wo(o),menuItemId:o,isGroup:t==="true",isOpen:e==="true"};throw Error(`getMenuItemDetails #${o} is not a menuitem`)},it=({id:e,onActivate:t,onMouseEnterItem:o,position:{x:n,y:r}})=>{let[,i]=Oo({}),u=j([{id:e,left:n,top:r}]),d=N(m=>u.current.findIndex(b=>b.id===m)!==-1,[]),l=N(m=>{let b=c.current[m];if(b===void 0)throw Error(`getOpenMenuState no entry for menu ${m}`);return b},[]),s=N(m=>{u.current=m,i({})},[]),a=j(),p=j(),c=j({[e]:"no-popup"}),f=N((m=e,b,x=null)=>{if(m===e&&x===null)s([{id:e,left:n,top:r}]);else{c.current[m]="popup-open";let h=document.getElementById(x);if(h!==null){let{left:w,top:k}=zo(h,u.current);s(u.current.concat({id:b,left:w,top:k}))}else throw Error(`openMenu no menuItem ${x}`)}},[e,n,r,s]),P=N(m=>{if(m===e)s([]);else{let b=u.current.slice(),x=b.pop();c.current[x.id]="no-popup";let h=b.at(-1);h&&(c.current[h.id]="no-popup"),s(b)}},[e,s]),g=N(m=>{let b=u.current.slice(),x=m.slice(9),{id:h}=b.at(-1);for(;b.length>1&&!x.startsWith(h);){let w=rt(h,e);b.pop(),c.current[h]="no-popup",c.current[w]="no-popup",{id:h}=b[b.length-1]}b.length<u.current.length&&s(b)},[e,s]),M=N(()=>{a.current&&(clearTimeout(a.current),a.current=void 0)},[]),E=N((m,b,x,h=300)=>{M(),a.current=window.setTimeout(()=>{g(x),c.current[m]="popup-open",c.current[b]="no-popup",f(m,b,x)},h)},[M,g,f]),T=N((m,b,x)=>{c.current[b]="pending-close",p.current=window.setTimeout(()=>{g(x)},400)},[g]),C=N(()=>{let{current:m}=u,b=m.at(-1),x=b?document.getElementById(b.id):void 0;if(x){let{right:h,bottom:w}=x.getBoundingClientRect(),{clientHeight:k,clientWidth:R}=document.body;if(h>R){let L=m.length>1?Fo(e,m):$o(m,h-R);s(L)}else if(w>k){let L=Ko(m,w-k);s(L)}typeof x.tabIndex=="number"&&x.focus()}},[e,s]),y=N((m,b=!1)=>{let{hostMenuId:x,targetMenuId:h,menuItemId:w,isGroup:k,isOpen:R}=ot(m,e),{current:{[x]:L}}=c,H=b?0:void 0;if(L==="no-popup"&&k)c.current[x]="popup-pending",E(x,h,w,H);else if(L==="popup-pending"&&!k)c.current[x]="no-popup",clearTimeout(a.current),a.current=void 0;else if(L==="popup-pending"&&k)clearTimeout(a.current),E(x,h,w,H);else if(L==="popup-open")if(d(h)){let S=l(h);switch(g(w),S){case"pending-close":clearTimeout(p.current),p.current=void 0,c.current[h]="no-popup",M();break;default:}}else{let[S,A]=u.current.slice(-2);S.id===x&&c.current[A.id]!=="pending-close"?(T(x,A.id,w),k&&!R&&E(x,h,w,H)):S.id===x&&k&&w!==A.id&&c.current[A.id]==="pending-close"||k?E(x,h,w,H):c.current[A.id]!=="pending-close"&&g(w)}L==="pending-close"&&(M(),clearTimeout(p.current),p.current=void 0,c.current[x]="popup-open")},[M,g,l,d,e,T,E]),v=Bo(()=>({onMouseEnter:m=>{let b=ce(m.target);y(b),o(m,b.id)},onClick:m=>{let b=ce(m.target),{isGroup:x,menuItemId:h}=ot(b,e);x?y(b):t(h)}}),[t,o,e,y]);return{closeMenu:P,handleRender:C,listItemProps:v,openMenu:y,openMenus:u.current}};import{Fragment as Vo,jsx as at}from"react/jsx-runtime";import{createElement as ut}from"react";var Go=()=>{},me=({PortalProps:e,activatedByKeyboard:t,children:o,className:n,id:r,onClose:i=()=>{},position:u={x:0,y:0},style:d,...l})=>{let s=qo(r),a=st(Go),[p,c]=Ge(o,s),f=st(t),P=de(()=>{f.current=!1},[]),g=de(h=>{let w=h.slice(9),{action:k,options:R}=c[w];a.current(s),i({type:"menu-action",menuId:k,options:R})},[c,s,i]),{closeMenu:M,listItemProps:E,openMenu:T,openMenus:C,handleRender:y}=it({id:`${s}`,onActivate:g,onMouseEnterItem:P,position:u});a.current=M;let v=de((h,w)=>{f.current=!0,M(),w==="tab-away"&&i({event:h,type:"tab-away"})},[M,i]),m=()=>{},b=C.length-1,x=h=>{if(!(h>=b)){let{id:w}=C[h+1];return w}};return at(Vo,{children:C.map(({id:h,left:w,top:k},R,L)=>{let H=x(R);return ut(F,{...e,key:R,onRender:y},at($e,{anchorElement:{current:document.body},placement:"absolute",position:{left:w,top:k},children:ut(pe,{...l,activatedByKeyboard:f.current,childMenuShowing:H,className:n,id:h,isRoot:R===0,key:R,listItemProps:E,onActivate:g,onHighlightMenuItem:m,onCloseMenu:v,openMenu:T,style:d,tabIndex:R===L.length-1?0:void 0},p[h])}))})})};me.displayName="ContextMenu";import{createContext as Uo,useCallback as Xo,useMemo as Jo}from"react";import{jsx as fe}from"react/jsx-runtime";var _=Uo(null),Yo=({children:e,context:t,menuActionHandler:o,menuBuilder:n})=>{let r=Jo(()=>t!=null&&t.menuBuilders&&n?t.menuBuilders.concat(n):n?[n]:(t==null?void 0:t.menuBuilders)||[],[t,n]),i=Xo(u=>{var d;if(o!=null&&o(u)||(d=t==null?void 0:t.menuActionHandler)!=null&&d.call(t,u))return!0},[t,o]);return fe(_.Provider,{value:{menuActionHandler:i,menuBuilders:r},children:e})},Yi=({children:e,label:t,menuActionHandler:o,menuBuilder:n})=>fe(_.Consumer,{children:r=>fe(Yo,{context:r,label:t,menuActionHandler:o,menuBuilder:n,children:e})});import{isGroupMenuItemDescriptor as Qo,useThemeAttributes as Zo}from"@vuu-ui/vuu-utils";import{cloneElement as jo,useCallback as ge,useContext as _o,useMemo as en}from"react";import{jsx as ve}from"react/jsx-runtime";var lt=(e,t)=>{let o=_o(_),[n,r,i]=Zo(),u=en(()=>({themeClass:n,densityClass:r,dataMode:i}),[i,r,n]),d=ge((a,p,c)=>{let f=[];for(let P of a)f=f.concat(P(p,c));return f},[]),l=ge((a,p,{ContextMenuProps:c,contextMenu:f,...P})=>{var M,E;if((M=a.stopPropagation)==null||M.call(a),(E=a.preventDefault)==null||E.call(a),f)return on({x:a.clientX,y:a.clientY},f);let g=[];if(e&&g.push(e),o&&Array.isArray(o==null?void 0:o.menuBuilders)&&o.menuBuilders.length>0&&g.push(...o.menuBuilders),g.length>0){let T=d(g,p,P),C=y=>(t==null?void 0:t(y))===!0?!0:o==null?void 0:o.menuActionHandler(y);T.length&&C&&nn(a,T,C,{PortalProps:{themeAttributes:u},...c})}else console.warn("useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)")},[d,o,t,e,u]),s=ge(()=>{console.log("hide context menu")},[]);return[l,s]},tn={},on=(e,t)=>{O.showPopup({focus:!0,left:0,top:0,component:jo(t,{position:e})})},nn=(e,t,o,{position:n,...r}=tn)=>{let i=s=>{let a=(p,c)=>Qo(p)?ve(Y,{label:p.label,children:p.children.map(a)},c):ve(Z,{action:p.action,className:p.className,"data-icon":p.icon,options:p.options,children:p.label},c);return s.map(a)},u=s=>{var a;if(Ae(s)){if((s==null?void 0:s.closedBy)==="popup-service")return;o(s),O.hidePopup(s)}(a=r==null?void 0:r.onClose)==null||a.call(r,s)},d=n!=null?n:{x:e.clientX,y:e.clientY},l=ve(me,{...r,onClose:u,position:d,children:i(t)});O.showPopup({left:0,top:0,component:l,focus:!0})};import{Icon as sn,IconButton as un}from"@vuu-ui/vuu-ui-controls";import{useId as an}from"@vuu-ui/vuu-utils";import{Button as ln}from"@salt-ds/core";import dt from"clsx";import{useCallback as ee,useRef as pt,useState as rn}from"react";var ct=({anchorElement:e,id:t,menuActionHandler:o,menuBuilder:n,menuClassName:r,menuLocation:i,menuOptions:u,onMenuClose:d,onMenuOpen:l,popupPlacement:s,tabIndex:a})=>{let[p,c]=rn(!1),f=pt(!1),P=pt(null),g=ee(m=>{c(m),m&&(l==null||l())},[l]),[M]=lt(n,o),E=ee(m=>{console.log("menu Open ",{el:m})},[]),T=ee(m=>{console.log("onClose"),g(!1),De(m)?(m.mouseEvt.target===P.current&&(f.current=!0),d==null||d(m)):requestAnimationFrame(()=>{var b;d==null||d(m),a!==-1&&(m==null?void 0:m.type)!=="tab-away"&&((b=P.current)==null||b.focus())})},[d,g,a]),C=ee(m=>{var b;if(f.current)f.current=!1;else{let x=(b=e==null?void 0:e.current)!=null?b:P.current;if(x){let{left:h,top:w,width:k}=G(x,s,0,0);g(!0),M(m,i,{ContextMenuProps:{className:r,id:`${t}-menu`,onClose:T,openMenu:E,position:{x:h,y:w},style:{width:k?k-2:void 0}},...u})}}},[e,T,E,t,r,i,u,s,g,M]);return{ariaAttributes:{"aria-controls":p?`${t}-menu`:void 0,"aria-expanded":p,"aria-haspopup":"menu"},buttonProps:{id:t,onClick:C,tabIndex:a},menuOpen:p,rootRef:P}};import{jsx as mt,jsxs as pn}from"react/jsx-runtime";var be="vuuPopupMenu",Ts=({anchorElement:e,className:t,disabled:o=!1,label:n,icon:r=n?"chevron-down":"more-vert",id:i,menuActionHandler:u,menuBuilder:d,menuClassName:l,menuLocation:s="header",menuOptions:a,onMenuClose:p,onMenuOpen:c,popupPlacement:f="below-right",tabIndex:P=0,variant:g="secondary",...M})=>{let E=an(i),{ariaAttributes:T,buttonProps:C,menuOpen:y,rootRef:v}=ct({anchorElement:e,id:E,menuActionHandler:u,menuBuilder:d,menuClassName:l,menuLocation:s,onMenuClose:p,onMenuOpen:c,menuOptions:a,popupPlacement:f,tabIndex:P});return n?pn(ln,{...M,...T,...C,className:dt(be,t,`${be}-withCaption`,{"saltButton-active":y}),disabled:o,ref:v,variant:"secondary",children:[r?mt(sn,{name:r}):null,n]}):r?mt(un,{...M,...T,...C,className:dt(be,t,{"saltButton-active":y}),disabled:o,icon:r,ref:v,variant:g}):(console.error("PopupMenu must have a label or an icon (or both)"),null)};import{useThemeAttributes as cn}from"@vuu-ui/vuu-utils";import{Button as ft}from"@salt-ds/core";import dn from"clsx";import{useLayoutEffect as mn,useRef as gt}from"react";import{jsx as V,jsxs as vt}from"react/jsx-runtime";var W="vuuPrompt",fn={current:document.body},gn={},Ks=({PopupProps:e=gn,cancelButtonLabel:t="Cancel",confirmButtonLabel:o="Confirm",icon:n,onCancel:r,onConfirm:i,style:u,text:d,title:l,variant:s="info",...a})=>{let{anchorElement:p=fn,offsetLeft:c=0,offsetTop:f=0,placement:P="below"}=e,[g,M,E]=cn(),{position:T}=K({anchorElement:p,offsetLeft:c,offsetTop:f,placement:P}),C=gt(null),y=gt(null);return mn(()=>{if(C.current&&(C.current.showModal(),y.current&&y.current.focus(),P.endsWith("center"))){let{width:v}=C.current.getBoundingClientRect();C.current.style.marginLeft=`-${v/2}px`}},[P]),V("dialog",{...a,className:dn(W,`${W}-${s}`,g),"data-mode":E,ref:C,style:{...u,...T},children:vt("form",{className:`${W}-form`,children:[V("div",{className:`${W}-header`,"data-icon":n,children:l}),V("div",{className:`${W}-text`,children:d}),vt("div",{className:`${W}-buttonBar`,children:[V(ft,{onClick:r,variant:"secondary",children:t}),V(ft,{onClick:i,ref:y,value:"default",children:o})]})]})})};import{useCallback as vn,useLayoutEffect as bn}from"react";var te=12,hn=(e,t)=>t<e.top,xn=(e,t)=>document.body.clientHeight-e.bottom>t,yn=e=>Array.isArray(e)?e.length===0?[void 0,e]:[e[0],e.slice(1)]:[e,[]],bt=({anchorElement:e,offsetLeft:t=0,offsetTop:o=0,placement:n})=>{let r=vn(i=>{if(i&&e.current){let u=e.current.getBoundingClientRect(),{height:d,width:l}=i.getBoundingClientRect(),s,a=n;do switch([s,a]=yn(a),s){case"above":if(hn(u,d+te)){let p=(l-u.width)/2;i.style.cssText=`left:${u.left-p}px;top:${u.top-d-te}px;opacity: 1;`,i.dataset.align="above";return}break;case"below":if(xn(u,d+te)){let p=(l-u.width)/2;i.style.cssText=`left:${u.left-p}px;top:${u.bottom+te}px;opacity: 1;`,i.dataset.align="below";return}break;case"right":console.log("place the fucker right");break;case"left":console.log("place the fucker left");break;default:console.warn(`unklnown tooltip placement ${n}`)}while(s)}},[e,n]);return bn(()=>{},[e,t,o,n]),r};import Mn from"clsx";import{jsx as xe}from"react/jsx-runtime";var he="vuuTooltip",_s=({anchorElement:e,children:t,className:o,id:n,onMouseEnter:r,onMouseLeave:i,placement:u,status:d,style:l})=>{let s=bt({anchorElement:e,placement:u});return xe(F,{children:xe("div",{className:Mn(he,o,"vuuHidden",{[`${he}-error`]:d==="error"}),id:n,ref:s,style:{...l,left:0,top:0},children:xe("span",{className:`${he}-content`,onMouseEnter:r,onMouseLeave:i,children:t})})})};import{queryClosest as Pn,useId as Cn}from"@vuu-ui/vuu-utils";import{useCallback as D,useRef as U,useState as wn}from"react";var su=({anchorQuery:e="*",id:t,placement:o="right",tooltipContent:n})=>{let r=U(),i=U(!1),u=U(null),d=U(),l=U(),[s,a]=wn(),p=Cn(t),c=D(y=>{var v;y.key==="Escape"&&((v=r.current)==null||v.call(r))},[]);r.current=D(()=>{a(void 0),document.removeEventListener("keydown",c)},[c]);let f=D(()=>{window.clearTimeout(l.current)},[]),P=D(()=>{var y;(y=r.current)==null||y.call(r)},[]),g=D((y=0)=>{d.current?(window.clearTimeout(d.current),d.current=void 0):r.current&&(y===0?r.current():l.current=window.setTimeout(r.current,y))},[]),M=D((y=u)=>{let{current:v}=y;v&&(a({anchorElement:y,children:n,id:`${p}-tooltip`,onMouseEnter:f,onMouseLeave:P,placement:o}),document.addEventListener("keydown",c)),d.current=void 0,g(i.current?3e3:1e3)},[c,f,P,g,p,o,n]),E=D(y=>{i.current=!0;let v=Pn(y.target,e);v&&(console.log(`el ${v.classList}`),u.current=v,d.current=window.setTimeout(M,800))},[e,M]),T=D(()=>{i.current=!1,g(200)},[g]);return{anchorProps:{"aria-describedby":`${p}-tooltip`,onMouseEnter:E,onMouseLeave:T},hideTooltip:g,showTooltip:M,tooltipProps:s}};import Wn,{useContext as Ct}from"react";import{useMemo as An,useState as Dn}from"react";import{getUniqueId as Sn}from"@vuu-ui/vuu-utils";import{Icon as En}from"@vuu-ui/vuu-ui-controls";import Tn from"clsx";import{useEffect as kn,useState as Rn}from"react";import{jsx as ne,jsxs as xt}from"react/jsx-runtime";var ye=300,Me=50,Ln=6e3,ht=1e3,Hn=56,In=300,oe="vuuToastNotification",Nn={error:"error",info:"info-circle",success:"tick",warning:"warn-triangle"},yt=e=>{let{top:t,notification:o,animated:n=!0}=e,[r,i]=Rn(-ye-Me);return kn(()=>{setTimeout(()=>i(Me)),n&&setTimeout(()=>i(-ye-Me),Ln+ht)},[n]),ne(F,{children:xt("div",{className:Tn(oe,`${oe}-${o.type}`),style:{height:Hn,right:r,width:ye,top:t,transition:n?`right ${ht}ms, top ${In}ms `:"none"},children:[ne(En,{name:Nn[o.type]}),xt("div",{className:`${oe}-toastContent`,children:[ne("strong",{className:`${oe}-toastHeader`,children:o.header}),ne("div",{children:o.body})]})]})})};import{Fragment as zn,jsx as Mt}from"react/jsx-runtime";var Bn=60,On=6e3,$n=1e3,Kn=56,Fn=10,Pt=({notificationsContext:e})=>{let[t,o]=Dn([]);return An(()=>{e.setNotify(n=>{let r={...n,id:Sn()};o(i=>i.concat(r)),setTimeout(()=>{o(i=>i.filter(u=>u!==r))},On+$n*2)})},[e]),Mt(zn,{children:t.map((n,r)=>Mt(yt,{top:Bn+(Kn+Fn)*r,notification:n},n.id))})};import{jsx as qn,jsxs as Gn}from"react/jsx-runtime";var Pe=class{constructor(){this.notify=()=>"have you forgotten to provide a NotificationsCenter?";this.setNotify=t=>{this.notify=t}}},Ce=Wn.createContext(new Pe),wu=e=>{let t=Ct(Ce);return Gn(Ce.Provider,{value:t,children:[qn(Pt,{notificationsContext:t}),e.children]})},Eu=()=>{let{notify:e}=Ct(Ce);return e};export{me as ContextMenu,_ as ContextMenuContext,Yi as ContextMenuProvider,ze as Dialog,Re as DialogHeader,Ie as DialogService,Z as MenuItem,Y as MenuItemGroup,pe as MenuList,wu as NotificationsProvider,$e as PopupComponent,Ts as PopupMenu,O as PopupService,F as Portal,Ks as Prompt,Ve as Separator,yt as ToastNotification,_s as Tooltip,tr as createContainer,ue as isMenuItemLabel,De as reasonIsClickAway,Ae as reasonIsMenuAction,He as renderPortal,K as useAnchoredPosition,lt as useContextMenu,Fr as useDialog,Eu as useNotifications,su as useTooltip};
+// src/dialog/Dialog.tsx
+import cx5 from "clsx";
+import { useThemeAttributes } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+
+// src/dialog-header/DialogHeader.tsx
+import { Button, Text } from "@salt-ds/core";
+import cx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var classBase = "vuuDialogHeader";
+var DialogHeader = ({
+  hideCloseButton = false,
+  title,
+  onClose,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuToolbarProxy"), children: [
+    /* @__PURE__ */ jsx(Text, { className: "dialogHeader", children: title }),
+    !hideCloseButton && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onClose,
+        "data-align": "end",
+        "data-icon": "close",
+        variant: "secondary"
+      },
+      "close"
+    )
+  ] });
+};
+
+// src/popup/popup-service.ts
+import cx3 from "clsx";
+import React, {
+  createElement
+} from "react";
+import ReactDOM2 from "react-dom";
+
+// src/portal-deprecated/render-portal.tsx
+import * as ReactDOM from "react-dom";
+import cx2 from "clsx";
+var containerId = 1;
+var getPortalContainer = ({
+  className,
+  dataMode,
+  x = 0,
+  y = 0,
+  win = window
+}) => {
+  const el = win.document.createElement("div");
+  el.className = cx2(`vuuPopup ${containerId++}`, className);
+  el.style.cssText = `left:${x}px; top:${y}px;`;
+  if (dataMode) {
+    el.dataset.mode = dataMode;
+  }
+  win.document.body.appendChild(el);
+  return el;
+};
+var createContainer = (props) => getPortalContainer(props);
+var renderPortal = (component, container, x, y, onRender) => {
+  container.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;
+  ReactDOM.render(component, container, onRender);
+};
+
+// src/popup/popup-service.ts
+var _dialogOpen = false;
+var _popups = [];
+var reasonIsMenuAction = (reason) => (reason == null ? void 0 : reason.type) === "menu-action";
+var reasonIsClickAway = (reason) => (reason == null ? void 0 : reason.type) === "click-away";
+function specialKeyHandler(e) {
+  if (e.key === "Esc") {
+    if (_popups.length) {
+      closeAllPopups();
+    } else if (_dialogOpen) {
+      const dialogRoot = document.body.querySelector(".vuuDialog");
+      if (dialogRoot) {
+        ReactDOM2.unmountComponentAtNode(dialogRoot);
+      }
+    }
+  }
+}
+function outsideClickHandler(e) {
+  if (_popups.length) {
+    const popupContainers = document.body.querySelectorAll(
+      ".vuuPopup,#vuu-portal-root"
+    );
+    for (let i = 0; i < popupContainers.length; i++) {
+      if (popupContainers[i].contains(e.target)) {
+        return;
+      }
+    }
+    closeAllPopups({ mouseEvt: e, type: "click-away" });
+  }
+}
+function closeAllPopups(reason) {
+  if (_popups.length === 1) {
+    PopupService.hidePopup(reason, "anon", "all");
+  } else if (_popups.length) {
+    const popupContainers = document.body.querySelectorAll(".vuuPopup");
+    for (let i = 0; i < popupContainers.length; i++) {
+      ReactDOM2.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 createElement("div", { className, style }, children);
+};
+var incrementingKey = 1;
+var PopupService = class _PopupService {
+  static showPopup({
+    group = "all",
+    name = "anon",
+    left = 0,
+    position = "",
+    right = "auto",
+    top = 0,
+    width = "auto",
+    component
+  }) {
+    if (!component) {
+      throw Error(`PopupService showPopup, no component supplied`);
+    }
+    if (typeof component.props.onClose === "function") {
+      _PopupService.onClose = component.props.onClose;
+    } else {
+      _PopupService.onClose = void 0;
+    }
+    popupOpened(name);
+    document.addEventListener("keydown", _PopupService.escapeKeyListener, true);
+    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(
+      createElement(
+        PopupComponent,
+        { key: incrementingKey++, position, style },
+        component
+      ),
+      el,
+      left,
+      top,
+      () => {
+        _PopupService.keepWithinThePage(el, right);
+      }
+    );
+  }
+  static escapeKeyListener(evt) {
+    if (evt.key === "Escape") {
+      _PopupService.hidePopup({ type: "escape", event: evt });
+    }
+  }
+  static hidePopup(reason, name = "anon", group = "all") {
+    var _a;
+    if (_popups.indexOf(name) !== -1) {
+      popupClosed(name);
+      const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);
+      if (popupRoot) {
+        ReactDOM2.unmountComponentAtNode(popupRoot);
+      }
+    }
+    document.removeEventListener(
+      "keydown",
+      _PopupService.escapeKeyListener,
+      true
+    );
+    (_a = _PopupService == null ? void 0 : _PopupService.onClose) == null ? void 0 : _a.call(
+      _PopupService,
+      reason ? {
+        ...reason,
+        closedBy: "popup-service"
+      } : void 0
+    );
+  }
+  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 _DialogService {
+  static showDialog(dialog) {
+    const containerEl = ".vuuDialog";
+    const onClose = dialog.props.onClose;
+    dialogOpened();
+    ReactDOM2.render(
+      React.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) {
+      ReactDOM2.unmountComponentAtNode(dialogRoot);
+    }
+  }
+};
+
+// src/popup/Popup.tsx
+import cx4 from "clsx";
+
+// src/popup/useAnchoredPosition.ts
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+
+// src/popup/getPositionRelativeToAnchor.ts
+var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop, minWidth, dimensions) => {
+  const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
+  switch (placement) {
+    case "below":
+      return { left: left + offsetLeft, top: bottom + offsetTop };
+    case "right":
+      return { left: right + offsetLeft, top: top + offsetTop };
+    case "below-center":
+      return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };
+    case "below-right":
+      return { left, minWidth, top: bottom + offsetTop };
+    case "below-full-width":
+      return {
+        left: left + offsetLeft,
+        minWidth,
+        top: bottom + offsetTop,
+        width
+      };
+    case "center":
+      if (dimensions) {
+        return {
+          left: width / 2 - dimensions.width / 2 + offsetLeft,
+          top: height / 2 - dimensions.height / 2 + offsetTop,
+          visibility: "visible"
+        };
+      } else {
+        return {
+          left: width / 2 + offsetLeft,
+          top: height / 2 + offsetTop,
+          visibility: "hidden"
+        };
+      }
+    default:
+      throw Error(
+        `Popup getPositionRelativeToAnchor non-supported placement value ${placement}`
+      );
+  }
+};
+
+// src/popup/useAnchoredPosition.ts
+var useAnchoredPosition = ({
+  anchorElement,
+  minWidth,
+  offsetLeft = 0,
+  offsetTop = 0,
+  placement,
+  position: positionProp
+}) => {
+  const popupRef = useRef(null);
+  const [position, setPosition] = useState(positionProp);
+  useLayoutEffect(() => {
+    if (placement === "absolute" && positionProp) {
+      setPosition(positionProp);
+    } else if (anchorElement.current && placement !== "auto") {
+      const dimensions = popupRef.current === null ? void 0 : popupRef.current.getBoundingClientRect();
+      const position2 = getPositionRelativeToAnchor(
+        anchorElement.current,
+        placement,
+        offsetLeft,
+        offsetTop,
+        minWidth,
+        dimensions
+      );
+      setPosition(position2);
+    }
+  }, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);
+  const popupCallbackRef = useCallback(
+    (el) => {
+      popupRef.current = el;
+      if (el && placement === "center" && anchorElement.current) {
+        const { height, width } = el.getBoundingClientRect();
+        setPosition(
+          getPositionRelativeToAnchor(
+            anchorElement.current,
+            placement,
+            offsetLeft,
+            offsetTop,
+            void 0,
+            { height, width }
+          )
+        );
+      }
+    },
+    [anchorElement, offsetLeft, offsetTop, placement]
+  );
+  return {
+    position,
+    popupRef: placement === "center" ? popupCallbackRef : void 0
+  };
+};
+
+// src/popup/Popup.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PopupComponent2 = ({
+  children,
+  className,
+  anchorElement,
+  minWidth,
+  offsetLeft,
+  offsetTop,
+  placement,
+  position: positionProp
+}) => {
+  const { popupRef, position } = useAnchoredPosition({
+    anchorElement,
+    minWidth,
+    offsetLeft,
+    offsetTop,
+    placement,
+    position: positionProp
+  });
+  return position === void 0 ? null : /* @__PURE__ */ jsx2("div", { className: cx4(`vuuPortal`, className), ref: popupRef, style: position, children });
+};
+
+// src/dialog/Dialog.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var classBase2 = "vuuDialog";
+var AnchorBody = { current: document.body };
+var EMPTY_PROPS = {};
+var Dialog = ({
+  PopupProps = EMPTY_PROPS,
+  children,
+  className,
+  isOpen = false,
+  onClose,
+  style,
+  title,
+  hideCloseButton = false,
+  ...htmlAttributes
+}) => {
+  const {
+    anchorElement = AnchorBody,
+    offsetLeft = 0,
+    offsetTop = 0,
+    placement = "auto"
+  } = PopupProps;
+  const rootRef = useRef2(null);
+  const portalRef = useRef2(null);
+  const [themeClass, _, dataMode] = useThemeAttributes();
+  const { position } = useAnchoredPosition({
+    anchorElement,
+    offsetLeft,
+    offsetTop,
+    placement
+  });
+  const close = useCallback2(() => {
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  useLayoutEffect2(() => {
+    if (rootRef.current) {
+      if (isOpen) {
+        rootRef.current.showModal();
+        const { left, top } = rootRef.current.getBoundingClientRect();
+        if (portalRef.current) {
+          portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`;
+        }
+      } else {
+        rootRef.current.close();
+      }
+      if (placement.endsWith("center")) {
+        const { width } = rootRef.current.getBoundingClientRect();
+        rootRef.current.style.marginLeft = `-${width / 2}px`;
+      }
+    }
+  }, [isOpen, placement]);
+  return /* @__PURE__ */ jsxs2(
+    "dialog",
+    {
+      ...htmlAttributes,
+      className: cx5(classBase2, themeClass),
+      "data-mode": dataMode,
+      onClose: close,
+      id: "vuu-dialog",
+      ref: rootRef,
+      style: { ...style, ...position },
+      children: [
+        /* @__PURE__ */ jsx3(
+          DialogHeader,
+          {
+            hideCloseButton,
+            onClose: close,
+            title
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: `${classBase2}-body`, children }),
+        /* @__PURE__ */ jsx3("div", { id: "vuu-dialog-portal-root", ref: portalRef })
+      ]
+    }
+  );
+};
+
+// src/dialog/useDialog.tsx
+import { useCallback as useCallback3, useState as useState2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var useDialog = () => {
+  const [dialogState, setDialogState] = useState2();
+  const handleClose = useCallback3(() => {
+    setDialogState(void 0);
+  }, []);
+  const dialog = dialogState ? /* @__PURE__ */ jsx4(
+    Dialog,
+    {
+      className: "vuDialog",
+      isOpen: true,
+      onClose: handleClose,
+      style: { maxHeight: 500 },
+      title: dialogState.title,
+      hideCloseButton: dialogState.hideCloseButton,
+      children: dialogState.content
+    }
+  ) : null;
+  return {
+    dialog,
+    setDialogState
+  };
+};
+
+// src/menu/ContextMenu.tsx
+import { useId as useId2 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback7, useRef as useRef7 } from "react";
+
+// src/portal/Portal.tsx
+import { useThemeAttributes as useThemeAttributes2 } from "@vuu-ui/vuu-utils";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+}
+var DEFAULT_ID = ["vuu-dialog-portal-root", "vuu-portal-root"];
+var getFirstAvailableElementById = (id) => {
+  if (Array.isArray(id)) {
+    for (const i of id) {
+      const element = document.getElementById(i);
+      if (element) {
+        return element;
+      }
+    }
+  } else {
+    return document.getElementById(id);
+  }
+  return null;
+};
+var Portal = ({
+  children,
+  container: containerProp = document.body,
+  id = DEFAULT_ID,
+  onRender,
+  open = true,
+  themeAttributes
+}) => {
+  var _a;
+  const [mounted, setMounted] = useState3(false);
+  const portalRef = useRef3(null);
+  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const [themeClass, densityClass, dataMode] = useThemeAttributes2(themeAttributes);
+  useLayoutEffect3(() => {
+    const root = getFirstAvailableElementById(id);
+    if (root) {
+      portalRef.current = root;
+    } else {
+      portalRef.current = document.createElement("div");
+      portalRef.current.id = typeof id === "string" ? id : id.length > 0 ? id.at(-1) : "vuu-portal-root";
+    }
+    const el = portalRef.current;
+    if (!container.contains(el)) {
+      container.appendChild(el);
+    }
+    el.classList.add(themeClass, densityClass);
+    el.dataset.mode = dataMode;
+    setMounted(true);
+  }, [id, container, themeClass, densityClass, dataMode]);
+  useLayoutEffect3(() => {
+    requestAnimationFrame(() => {
+      onRender == null ? void 0 : onRender();
+    });
+  }, [onRender]);
+  if (open && mounted && portalRef.current && children) {
+    return createPortal(children, portalRef.current);
+  }
+  return null;
+};
+
+// src/menu/MenuList.tsx
+import cx6 from "clsx";
+import React3, {
+  useLayoutEffect as useLayoutEffect4,
+  useMemo as useMemo3,
+  useRef as useRef5
+} from "react";
+import { useId } from "@vuu-ui/vuu-utils";
+
+// src/menu/use-items-with-ids-next.ts
+import React2, { useCallback as useCallback4, useMemo } from "react";
+var isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
+var getLabelFromChildren = (children) => {
+  if (Array.isArray(children) && isMenuItemLabel(children[0])) {
+    return children[0];
+  }
+};
+var assignId = (child, path, group, hasSeparator = false) => {
+  const {
+    props: { children }
+  } = child;
+  return {
+    childWithId: React2.cloneElement(child, {
+      hasSeparator,
+      id: `${path}`,
+      key: path,
+      children: group ? getLabelFromChildren(children) : children
+    }),
+    grandChildren: group ? children : void 0
+  };
+};
+var useItemsWithIdsNext = (childrenProp, rootId) => {
+  const normalizeChildren = useCallback4(() => {
+    const collectChildren = (children, path = rootId, menus2 = {}, actions2 = {}) => {
+      const list = menus2[path] = [];
+      let idx = 0;
+      let hasSeparator = false;
+      React2.Children.forEach(children, (child) => {
+        if (isMenuItemLabel(child)) {
+        } else if (child.type === Separator) {
+          hasSeparator = true;
+        } else {
+          const hasChildItems = isMenuItemGroup(child);
+          const childPath = `${path}-${idx}`;
+          const {
+            props: { action, options }
+          } = child;
+          const { childWithId, grandChildren } = assignId(
+            child,
+            childPath,
+            hasChildItems,
+            hasSeparator
+          );
+          list.push(childWithId);
+          if (grandChildren) {
+            collectChildren(grandChildren, childPath, menus2, actions2);
+          } else {
+            actions2[childPath] = { action, options };
+          }
+          idx += 1;
+          hasSeparator = false;
+        }
+      });
+      return [menus2, actions2];
+    };
+    return collectChildren(childrenProp);
+  }, [rootId, childrenProp]);
+  const [menus, actions] = useMemo(
+    () => normalizeChildren(),
+    [normalizeChildren]
+  );
+  return [menus, actions];
+};
+
+// src/menu/use-keyboard-navigation.ts
+import {
+  useCallback as useCallback5,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState4
+} 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-index='${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
+import { isValidNumber } from "@vuu-ui/vuu-utils";
+var useKeyboardNavigation = ({
+  autoHighlightFirstItem = false,
+  count,
+  defaultHighlightedIdx,
+  highlightedIndex: highlightedIndexProp,
+  onActivate,
+  onHighlight,
+  // onKeyDown,
+  onCloseMenu,
+  onOpenMenu
+}) => {
+  var _a;
+  if (isValidNumber(highlightedIndexProp) && isValidNumber(defaultHighlightedIdx)) {
+    throw Error(
+      "useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx"
+    );
+  }
+  const controlledHighlighting = isValidNumber(highlightedIndexProp);
+  const highlightedIndexRef = useRef4(
+    (_a = defaultHighlightedIdx != null ? defaultHighlightedIdx : highlightedIndexProp) != null ? _a : autoHighlightFirstItem ? 0 : -1
+  );
+  const [, forceRender] = useState4(null);
+  const setHighlightedIdx = useCallback5(
+    (idx) => {
+      highlightedIndexRef.current = idx;
+      onHighlight == null ? void 0 : onHighlight(idx);
+      forceRender({});
+    },
+    [onHighlight]
+  );
+  const setHighlightedIndex = useCallback5(
+    (idx) => {
+      if (idx !== highlightedIndexRef.current) {
+        if (!controlledHighlighting) {
+          setHighlightedIdx(idx);
+        }
+      }
+    },
+    [controlledHighlighting, setHighlightedIdx]
+  );
+  const keyBoardNavigation = useRef4(true);
+  const ignoreFocus = useRef4(false);
+  const setIgnoreFocus = (value) => ignoreFocus.current = value;
+  const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
+  const navigateChildldItems = useCallback5(
+    (e) => {
+      const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
+      if (nextIdx !== highlightedIndexRef.current) {
+        setHighlightedIndex(nextIdx);
+      }
+    },
+    [count, setHighlightedIndex]
+  );
+  const handleKeyDown = useCallback5(
+    (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)) {
+        const menuEl = e.target;
+        const menuItemEl = menuEl.querySelector(
+          `:scope > [data-index='${highlightedIndex}']`
+        );
+        if (menuItemEl) {
+          onOpenMenu == null ? void 0 : onOpenMenu(menuItemEl, true);
+        }
+      } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
+        onCloseMenu(e, "close-child-menu");
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        onActivate && onActivate(highlightedIndex);
+      } else if (e.key === "Tab") {
+        onCloseMenu(e, "tab-away");
+      }
+    },
+    [
+      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);
+      }
+    }),
+    [handleKeyDown, highlightedIndex, setHighlightedIdx, setHighlightedIndex]
+  );
+  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/MenuList.tsx
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+var classBase3 = "vuuMenuList";
+var Separator = () => /* @__PURE__ */ jsx5("li", { className: "vuuMenuItem-divider" });
+var MenuItemGroup = () => null;
+var MenuItem = ({
+  children,
+  idx,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx5("div", { ...props, children });
+};
+var MenuItemLabel = ({ children }) => /* @__PURE__ */ jsx5(Fragment, { children });
+MenuItemLabel.displayName = "MenuItemLabel";
+MenuItem.Label = MenuItemLabel;
+var getDisplayName = (item) => React3.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
+var isMenuItemLabel = (item) => getDisplayName(item) === "MenuItemLabel";
+var hasIcon = (child) => child.props["data-icon"];
+var MenuList = ({
+  activatedByKeyboard,
+  childMenuShowing,
+  children,
+  className,
+  defaultHighlightedIdx,
+  highlightedIdx: highlightedIdxProp,
+  id: idProp,
+  isRoot: isRoot2,
+  listItemProps,
+  onHighlightMenuItem,
+  onActivate,
+  onCloseMenu,
+  openMenu: onOpenMenu,
+  ...props
+}) => {
+  const id = useId(idProp);
+  const root = useRef5(null);
+  const mapIdxToId = useMemo3(() => /* @__PURE__ */ new Map(), []);
+  const handleActivate = (idx) => {
+    var _a;
+    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-index='${idx}']`);
+    (el == null ? void 0 : el.id) && (onActivate == null ? void 0 : onActivate(el.id));
+  };
+  const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation({
+    count: React3.Children.count(children),
+    defaultHighlightedIdx,
+    highlightedIndex: highlightedIdxProp,
+    onActivate: handleActivate,
+    onHighlight: onHighlightMenuItem,
+    onOpenMenu,
+    onCloseMenu
+  });
+  const appliedFocusVisible = childMenuShowing == void 0 ? focusVisible : -1;
+  useLayoutEffect4(() => {
+    var _a;
+    if (childMenuShowing === void 0 && activatedByKeyboard) {
+      (_a = root.current) == null ? void 0 : _a.focus();
+    }
+  }, [activatedByKeyboard, childMenuShowing]);
+  const getActiveDescendant = () => highlightedIndex === void 0 || highlightedIndex === -1 ? void 0 : mapIdxToId.get(highlightedIndex);
+  function renderContent() {
+    const propsCommonToAllListItems = {
+      ...listItemProps,
+      role: "menuitem"
+    };
+    const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
+      /* @__PURE__ */ jsx5(
+        "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 === itemId;
+      const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
+      const ariaLabel = (label != null ? label : typeof children2 === "string") ? children2 : void 0;
+      list.push(
+        /* @__PURE__ */ jsx5(
+          MenuItem,
+          {
+            ...props2,
+            ...propsCommonToAllListItems,
+            ...getMenuItemProps(
+              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,
+            "aria-label": ariaLabel,
+            children: hasSubMenu ? maybeIcon(label != null ? label : children2, 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;
+  }
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ...props,
+      ...listProps,
+      "aria-activedescendant": getActiveDescendant(),
+      className: cx6(classBase3, className, {
+        [`${classBase3}-childMenuShowing`]: childMenuShowing !== void 0
+      }),
+      "data-root": isRoot2 || void 0,
+      id,
+      ref: root,
+      role: "menu",
+      children: renderContent()
+    }
+  );
+};
+var getMenuItemProps = (itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
+  id: `menuitem-${itemId}`,
+  key: key != null ? key : idx,
+  "data-index": idx,
+  className: cx6("vuuMenuItem", className, {
+    "vuuMenuItem-separator": hasSeparator,
+    vuuHighlighted: idx === highlightedIdx,
+    focusVisible: focusVisible === idx
+  })
+});
+MenuList.displayName = "MenuList";
+
+// src/menu/use-cascade.ts
+import {
+  useCallback as useCallback6,
+  useMemo as useMemo4,
+  useRef as useRef6,
+  useState as useState5
+} from "react";
+
+// src/menu/list-dom-utils.ts
+var closestListItem = (el) => el == null ? void 0 : el.closest("[data-index],[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 getHostMenuId = (id, rootId) => {
+  const pos = id.lastIndexOf("-");
+  if (id.startsWith("menuitem")) {
+    return pos > -1 ? id.slice(9, pos) : rootId;
+  } else {
+    return pos > -1 ? id.slice(0, pos) : rootId;
+  }
+};
+var getTargetMenuId = (id) => id.slice(9);
+var getMenuItemDetails = ({ ariaExpanded, ariaHasPopup, id }, rootId) => {
+  if (id.startsWith("menuitem")) {
+    return {
+      hostMenuId: getHostMenuId(id, rootId),
+      targetMenuId: getTargetMenuId(id),
+      menuItemId: id,
+      isGroup: ariaHasPopup === "true",
+      isOpen: ariaExpanded === "true"
+    };
+  } else {
+    throw Error(`getMenuItemDetails #${id} is not a menuitem`);
+  }
+};
+var useCascade = ({
+  id: rootId,
+  onActivate,
+  onMouseEnterItem,
+  position: { x: posX, y: posY }
+}) => {
+  const [, forceRefresh] = useState5({});
+  const openMenus = useRef6([
+    { id: rootId, left: posX, top: posY }
+  ]);
+  const menuIsOpen = useCallback6(
+    (menuId) => openMenus.current.findIndex((menu) => menu.id === menuId) !== -1,
+    []
+  );
+  const getOpenMenuStatus = useCallback6((menuId) => {
+    const state = menuState.current[menuId];
+    if (state === void 0) {
+      throw Error(`getOpenMenuState no entry for menu ${menuId}`);
+    }
+    return state;
+  }, []);
+  const setOpenMenus = useCallback6((menus) => {
+    openMenus.current = menus;
+    forceRefresh({});
+  }, []);
+  const menuOpenPendingTimeout = useRef6();
+  const menuClosePendingTimeout = useRef6();
+  const menuState = useRef6({ [rootId]: "no-popup" });
+  const openMenu = useCallback6(
+    (hostMenuId = rootId, targetMenuId, itemId = null) => {
+      if (hostMenuId === rootId && itemId === null) {
+        setOpenMenus([{ id: rootId, left: posX, top: posY }]);
+      } else {
+        menuState.current[hostMenuId] = "popup-open";
+        const el = document.getElementById(itemId);
+        if (el !== null) {
+          const { left, top } = getPosition(el, openMenus.current);
+          setOpenMenus(
+            openMenus.current.concat({ id: targetMenuId, left, top })
+          );
+        } else {
+          throw Error(`openMenu no menuItem ${itemId}`);
+        }
+      }
+    },
+    [rootId, posX, posY, setOpenMenus]
+  );
+  const closeMenu = useCallback6(
+    (menuId) => {
+      if (menuId === rootId) {
+        setOpenMenus([]);
+      } else {
+        const menus = openMenus.current.slice();
+        const lastMenu = menus.pop();
+        menuState.current[lastMenu.id] = "no-popup";
+        const parentMenu = menus.at(-1);
+        if (parentMenu) {
+          menuState.current[parentMenu.id] = "no-popup";
+        }
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const closeMenus = useCallback6(
+    (menuItemId) => {
+      const menus = openMenus.current.slice();
+      const menuItemMenuId = menuItemId.slice(9);
+      let { id: lastMenuId } = menus.at(-1);
+      while (menus.length > 1 && !menuItemMenuId.startsWith(lastMenuId)) {
+        const parentMenuId = getHostMenuId(lastMenuId, rootId);
+        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);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const clearAnyScheduledOpenTasks = useCallback6(() => {
+    if (menuOpenPendingTimeout.current) {
+      clearTimeout(menuOpenPendingTimeout.current);
+      menuOpenPendingTimeout.current = void 0;
+    }
+  }, []);
+  const scheduleOpen = useCallback6(
+    (hostMenuId, targetMenuId, menuItemId, delay = 300) => {
+      clearAnyScheduledOpenTasks();
+      menuOpenPendingTimeout.current = window.setTimeout(() => {
+        closeMenus(menuItemId);
+        menuState.current[hostMenuId] = "popup-open";
+        menuState.current[targetMenuId] = "no-popup";
+        openMenu(hostMenuId, targetMenuId, menuItemId);
+      }, delay);
+    },
+    [clearAnyScheduledOpenTasks, closeMenus, openMenu]
+  );
+  const scheduleClose = useCallback6(
+    (hostMenuId, openMenuId, itemId) => {
+      menuState.current[openMenuId] = "pending-close";
+      menuClosePendingTimeout.current = window.setTimeout(() => {
+        closeMenus(itemId);
+      }, 400);
+    },
+    [closeMenus]
+  );
+  const handleRender = useCallback6(() => {
+    const { current: menus } = openMenus;
+    const menu = menus.at(-1);
+    const el = menu ? document.getElementById(menu.id) : void 0;
+    if (el) {
+      const { right, bottom } = el.getBoundingClientRect();
+      const { clientHeight, clientWidth } = document.body;
+      if (right > clientWidth) {
+        const newMenus = menus.length > 1 ? flipSides(rootId, menus) : nudgeLeft(menus, right - clientWidth);
+        setOpenMenus(newMenus);
+      } else if (bottom > clientHeight) {
+        const newMenus = nudgeUp(menus, bottom - clientHeight);
+        setOpenMenus(newMenus);
+      }
+      if (typeof el.tabIndex === "number") {
+        el.focus();
+      }
+    }
+  }, [rootId, setOpenMenus]);
+  const triggerChildMenu = useCallback6(
+    (menuItemEl, immediate = false) => {
+      const { hostMenuId, targetMenuId, menuItemId, isGroup, isOpen } = getMenuItemDetails(menuItemEl, rootId);
+      const {
+        current: { [hostMenuId]: state }
+      } = menuState;
+      const delay = immediate ? 0 : void 0;
+      if (state === "no-popup" && isGroup) {
+        menuState.current[hostMenuId] = "popup-pending";
+        scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+      } else if (state === "popup-pending" && !isGroup) {
+        menuState.current[hostMenuId] = "no-popup";
+        clearTimeout(menuOpenPendingTimeout.current);
+        menuOpenPendingTimeout.current = void 0;
+      } else if (state === "popup-pending" && isGroup) {
+        clearTimeout(menuOpenPendingTimeout.current);
+        scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+      } else if (state === "popup-open") {
+        if (menuIsOpen(targetMenuId)) {
+          const menuStatus = getOpenMenuStatus(targetMenuId);
+          closeMenus(menuItemId);
+          switch (menuStatus) {
+            case "pending-close":
+              clearTimeout(menuClosePendingTimeout.current);
+              menuClosePendingTimeout.current = void 0;
+              menuState.current[targetMenuId] = "no-popup";
+              clearAnyScheduledOpenTasks();
+              break;
+            default:
+          }
+        } else {
+          const [parentOfLastOpenedMenu, lastOpenedMenu] = openMenus.current.slice(-2);
+          if (parentOfLastOpenedMenu.id === hostMenuId && menuState.current[lastOpenedMenu.id] !== "pending-close") {
+            scheduleClose(hostMenuId, lastOpenedMenu.id, menuItemId);
+            if (isGroup && !isOpen) {
+              scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+            }
+          } else if (parentOfLastOpenedMenu.id === hostMenuId && isGroup && menuItemId !== lastOpenedMenu.id && menuState.current[lastOpenedMenu.id] === "pending-close") {
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+          } else if (isGroup) {
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+          } else if (!(menuState.current[lastOpenedMenu.id] === "pending-close")) {
+            closeMenus(menuItemId);
+          }
+        }
+      }
+      if (state === "pending-close") {
+        clearAnyScheduledOpenTasks();
+        clearTimeout(menuClosePendingTimeout.current);
+        menuClosePendingTimeout.current = void 0;
+        menuState.current[hostMenuId] = "popup-open";
+      }
+    },
+    [
+      clearAnyScheduledOpenTasks,
+      closeMenus,
+      getOpenMenuStatus,
+      menuIsOpen,
+      rootId,
+      scheduleClose,
+      scheduleOpen
+    ]
+  );
+  const listItemProps = useMemo4(
+    () => ({
+      onMouseEnter: (evt) => {
+        const menuItemEl = closestListItem(evt.target);
+        triggerChildMenu(menuItemEl);
+        onMouseEnterItem(evt, menuItemEl.id);
+      },
+      onClick: (evt) => {
+        const listItemEl = closestListItem(evt.target);
+        const { isGroup, menuItemId } = getMenuItemDetails(listItemEl, rootId);
+        if (isGroup) {
+          triggerChildMenu(listItemEl);
+        } else {
+          onActivate(menuItemId);
+        }
+      }
+    }),
+    [onActivate, onMouseEnterItem, rootId, triggerChildMenu]
+  );
+  return {
+    closeMenu,
+    handleRender,
+    listItemProps,
+    openMenu: triggerChildMenu,
+    openMenus: openMenus.current
+  };
+};
+
+// src/menu/ContextMenu.tsx
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
+var noop = () => void 0;
+var ContextMenu = ({
+  PortalProps: PortalProps2,
+  activatedByKeyboard,
+  children: childrenProp,
+  className,
+  id: idProp,
+  onClose = () => void 0,
+  position = { x: 0, y: 0 },
+  style,
+  ...menuListProps
+}) => {
+  const id = useId2(idProp);
+  const closeMenuRef = useRef7(noop);
+  const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
+  const navigatingWithKeyboard = useRef7(activatedByKeyboard);
+  const handleMouseEnterItem = useCallback7(() => {
+    navigatingWithKeyboard.current = false;
+  }, []);
+  const handleActivate = useCallback7(
+    (menuItemId) => {
+      const actionId = menuItemId.slice(9);
+      const { action, options } = actions[actionId];
+      closeMenuRef.current(id);
+      onClose({
+        type: "menu-action",
+        menuId: action,
+        options
+      });
+    },
+    [actions, id, onClose]
+  );
+  const {
+    closeMenu,
+    listItemProps,
+    openMenu: onOpenMenu,
+    openMenus,
+    handleRender
+  } = useCascade({
+    // FIXME
+    id: `${id}`,
+    onActivate: handleActivate,
+    onMouseEnterItem: handleMouseEnterItem,
+    position
+  });
+  closeMenuRef.current = closeMenu;
+  const handleCloseMenu = useCallback7(
+    (evt, reason) => {
+      navigatingWithKeyboard.current = true;
+      closeMenu();
+      if (reason === "tab-away") {
+        onClose({
+          event: evt,
+          type: "tab-away"
+        });
+      }
+    },
+    [closeMenu, onClose]
+  );
+  const handleHighlightMenuItem = () => {
+  };
+  const lastMenu = openMenus.length - 1;
+  const getChildMenuId = (i) => {
+    if (i >= lastMenu) {
+      return void 0;
+    } else {
+      const { id: id2 } = openMenus[i + 1];
+      return id2;
+    }
+  };
+  return /* @__PURE__ */ jsx6(Fragment2, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
+    const childMenuId = getChildMenuId(i);
+    return /* @__PURE__ */ createElement2(Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ jsx6(
+      PopupComponent2,
+      {
+        anchorElement: { current: document.body },
+        placement: "absolute",
+        position: { left, top },
+        children: /* @__PURE__ */ createElement2(
+          MenuList,
+          {
+            ...menuListProps,
+            activatedByKeyboard: navigatingWithKeyboard.current,
+            childMenuShowing: childMenuId,
+            className,
+            id: menuId,
+            isRoot: i === 0,
+            key: i,
+            listItemProps,
+            onActivate: handleActivate,
+            onHighlightMenuItem: handleHighlightMenuItem,
+            onCloseMenu: handleCloseMenu,
+            openMenu: onOpenMenu,
+            style,
+            tabIndex: i === all.length - 1 ? 0 : void 0
+          },
+          menus[menuId]
+        )
+      }
+    ));
+  }) });
+};
+ContextMenu.displayName = "ContextMenu";
+
+// src/menu/context-menu-provider.tsx
+import { createContext, useCallback as useCallback8, useMemo as useMemo5 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ContextMenuContext = createContext(
+  null
+);
+var Provider = ({
+  children,
+  context,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  const menuBuilders = useMemo5(() => {
+    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 = useCallback8(
+    (reason) => {
+      var _a;
+      if (menuActionHandler == null ? void 0 : menuActionHandler(reason)) {
+        return true;
+      }
+      if ((_a = context == null ? void 0 : context.menuActionHandler) == null ? void 0 : _a.call(context, reason)) {
+        return true;
+      }
+    },
+    [context, menuActionHandler]
+  );
+  return /* @__PURE__ */ jsx7(
+    ContextMenuContext.Provider,
+    {
+      value: {
+        menuActionHandler: handleMenuAction,
+        menuBuilders
+      },
+      children
+    }
+  );
+};
+var ContextMenuProvider = ({
+  children,
+  label,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  return /* @__PURE__ */ jsx7(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ jsx7(
+    Provider,
+    {
+      context: parentContext,
+      label,
+      menuActionHandler,
+      menuBuilder,
+      children
+    }
+  ) });
+};
+
+// src/menu/useContextMenu.tsx
+import {
+  isGroupMenuItemDescriptor,
+  useThemeAttributes as useThemeAttributes3
+} from "@vuu-ui/vuu-utils";
+import { cloneElement, useCallback as useCallback9, useContext, useMemo as useMemo6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var useContextMenu = (menuBuilder, menuActionHandler) => {
+  const ctx = useContext(ContextMenuContext);
+  const [themeClass, densityClass, dataMode] = useThemeAttributes3();
+  const themeAttributes = useMemo6(
+    () => ({
+      themeClass,
+      densityClass,
+      dataMode
+    }),
+    [dataMode, densityClass, themeClass]
+  );
+  const buildMenuOptions = useCallback9(
+    (menuBuilders, location, options) => {
+      let results = [];
+      for (const menuBuilder2 of menuBuilders) {
+        results = results.concat(menuBuilder2(location, options));
+      }
+      return results;
+    },
+    []
+  );
+  const handleShowContextMenu = useCallback9(
+    (e, location, { ContextMenuProps: ContextMenuProps2, contextMenu, ...options }) => {
+      var _a, _b;
+      (_a = e.stopPropagation) == null ? void 0 : _a.call(e);
+      (_b = e.preventDefault) == null ? void 0 : _b.call(e);
+      if (contextMenu) {
+        return showContextMenuComponent(
+          {
+            x: e.clientX,
+            y: e.clientY
+          },
+          contextMenu
+        );
+      }
+      const menuBuilders = [];
+      if (menuBuilder) {
+        menuBuilders.push(menuBuilder);
+      }
+      if (ctx && Array.isArray(ctx == null ? void 0 : ctx.menuBuilders) && ctx.menuBuilders.length > 0) {
+        menuBuilders.push(...ctx.menuBuilders);
+      }
+      if (menuBuilders.length > 0) {
+        const menuItemDescriptors = buildMenuOptions(
+          menuBuilders,
+          location,
+          options
+        );
+        const menuHandler = (action) => {
+          if ((menuActionHandler == null ? void 0 : menuActionHandler(action)) === true) {
+            return true;
+          } else {
+            return ctx == null ? void 0 : ctx.menuActionHandler(action);
+          }
+        };
+        if (menuItemDescriptors.length && menuHandler) {
+          showContextMenu(e, menuItemDescriptors, menuHandler, {
+            PortalProps: {
+              themeAttributes
+            },
+            ...ContextMenuProps2
+          });
+        }
+      } else {
+        console.warn(
+          "useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)"
+        );
+      }
+    },
+    [buildMenuOptions, ctx, menuActionHandler, menuBuilder, themeAttributes]
+  );
+  const hideContextMenu = useCallback9(() => {
+    console.log("hide context menu");
+  }, []);
+  return [handleShowContextMenu, hideContextMenu];
+};
+var NO_OPTIONS = {};
+var showContextMenuComponent = (position, contextMenu) => {
+  PopupService.showPopup({
+    focus: true,
+    left: 0,
+    top: 0,
+    component: cloneElement(contextMenu, { position })
+  });
+};
+var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
+  position: positionProp,
+  ...contextMenuProps
+} = NO_OPTIONS) => {
+  const menuItems = (menuDescriptors2) => {
+    const fromDescriptor = (menuItem, i) => isGroupMenuItemDescriptor(menuItem) ? /* @__PURE__ */ jsx8(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ jsx8(
+      MenuItem,
+      {
+        action: menuItem.action,
+        className: menuItem.className,
+        "data-icon": menuItem.icon,
+        options: menuItem.options,
+        children: menuItem.label
+      },
+      i
+    );
+    return menuDescriptors2.map(fromDescriptor);
+  };
+  const handleClose = (reason) => {
+    var _a;
+    if (reasonIsMenuAction(reason)) {
+      if ((reason == null ? void 0 : reason.closedBy) === "popup-service") {
+        return;
+      }
+      handleContextMenuAction(reason);
+      PopupService.hidePopup(reason);
+    }
+    (_a = contextMenuProps == null ? void 0 : contextMenuProps.onClose) == null ? void 0 : _a.call(contextMenuProps, reason);
+  };
+  const position = positionProp != null ? positionProp : {
+    x: e.clientX,
+    y: e.clientY
+  };
+  const component = /* @__PURE__ */ jsx8(
+    ContextMenu,
+    {
+      ...contextMenuProps,
+      onClose: handleClose,
+      position,
+      children: menuItems(menuDescriptors)
+    }
+  );
+  PopupService.showPopup({ left: 0, top: 0, component, focus: true });
+};
+
+// src/popup-menu/PopupMenu.tsx
+import { Icon, IconButton } from "@vuu-ui/vuu-ui-controls";
+import { useId as useId3 } from "@vuu-ui/vuu-utils";
+import { Button as Button2 } from "@salt-ds/core";
+import cx7 from "clsx";
+
+// src/popup-menu/usePopupMenu.ts
+import {
+  useCallback as useCallback10,
+  useRef as useRef8,
+  useState as useState6
+} from "react";
+var usePopupMenu = ({
+  anchorElement,
+  id,
+  menuActionHandler,
+  menuBuilder,
+  menuClassName,
+  menuLocation,
+  menuOptions,
+  onMenuClose,
+  onMenuOpen,
+  popupPlacement,
+  tabIndex
+}) => {
+  const [menuOpen, _setMenuOpen] = useState6(false);
+  const suppressShowMenuRef = useRef8(false);
+  const rootRef = useRef8(null);
+  const setMenuOpen = useCallback10(
+    (isOpen) => {
+      _setMenuOpen(isOpen);
+      if (isOpen) {
+        onMenuOpen == null ? void 0 : onMenuOpen();
+      }
+    },
+    [onMenuOpen]
+  );
+  const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
+  const handleOpenMenu = useCallback10((el) => {
+    console.log(`menu Open `, {
+      el
+    });
+  }, []);
+  const handleMenuClose = useCallback10(
+    (reason) => {
+      console.log("onClose");
+      setMenuOpen(false);
+      if (reasonIsClickAway(reason)) {
+        const target = reason.mouseEvt.target;
+        if (target === rootRef.current) {
+          suppressShowMenuRef.current = true;
+        }
+        onMenuClose == null ? void 0 : onMenuClose(reason);
+      } else {
+        requestAnimationFrame(() => {
+          var _a;
+          onMenuClose == null ? void 0 : onMenuClose(reason);
+          if (tabIndex !== -1 && (reason == null ? void 0 : reason.type) !== "tab-away") {
+            (_a = rootRef.current) == null ? void 0 : _a.focus();
+          }
+        });
+      }
+    },
+    [onMenuClose, setMenuOpen, tabIndex]
+  );
+  const showMenu = useCallback10(
+    (e) => {
+      var _a;
+      if (suppressShowMenuRef.current) {
+        suppressShowMenuRef.current = false;
+      } else {
+        const anchorEl = (_a = anchorElement == null ? void 0 : anchorElement.current) != null ? _a : rootRef.current;
+        if (anchorEl) {
+          const {
+            left: x,
+            top: y,
+            width
+          } = getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);
+          setMenuOpen(true);
+          showContextMenu2(e, menuLocation, {
+            ContextMenuProps: {
+              className: menuClassName,
+              id: `${id}-menu`,
+              onClose: handleMenuClose,
+              openMenu: handleOpenMenu,
+              position: {
+                x,
+                y
+              },
+              style: { width: width ? width - 2 : void 0 }
+            },
+            ...menuOptions
+          });
+        }
+      }
+    },
+    [
+      anchorElement,
+      handleMenuClose,
+      handleOpenMenu,
+      id,
+      menuClassName,
+      menuLocation,
+      menuOptions,
+      popupPlacement,
+      setMenuOpen,
+      showContextMenu2
+    ]
+  );
+  const ariaAttributes = {
+    "aria-controls": menuOpen ? `${id}-menu` : void 0,
+    "aria-expanded": menuOpen,
+    "aria-haspopup": "menu"
+  };
+  const buttonProps = {
+    id,
+    onClick: showMenu,
+    tabIndex
+  };
+  return { ariaAttributes, buttonProps, menuOpen, rootRef };
+};
+
+// src/popup-menu/PopupMenu.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase4 = "vuuPopupMenu";
+var PopupMenu = ({
+  anchorElement,
+  className,
+  disabled = false,
+  label,
+  icon: icon2 = label ? "chevron-down" : "more-vert",
+  id: idProp,
+  menuActionHandler,
+  menuBuilder,
+  menuClassName,
+  menuLocation = "header",
+  menuOptions,
+  onMenuClose,
+  onMenuOpen,
+  popupPlacement = "below-right",
+  tabIndex = 0,
+  variant = "secondary",
+  ...htmlAttributes
+}) => {
+  const id = useId3(idProp);
+  const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({
+    anchorElement,
+    id,
+    menuActionHandler,
+    menuBuilder,
+    menuClassName,
+    menuLocation,
+    onMenuClose,
+    onMenuOpen,
+    menuOptions,
+    popupPlacement,
+    tabIndex
+  });
+  if (label) {
+    return /* @__PURE__ */ jsxs3(
+      Button2,
+      {
+        ...htmlAttributes,
+        ...ariaAttributes,
+        ...buttonProps,
+        className: cx7(classBase4, className, `${classBase4}-withCaption`, {
+          "saltButton-active": menuOpen
+        }),
+        disabled,
+        ref: rootRef,
+        variant: "secondary",
+        children: [
+          icon2 ? /* @__PURE__ */ jsx9(Icon, { name: icon2 }) : null,
+          label
+        ]
+      }
+    );
+  } else if (icon2) {
+    return /* @__PURE__ */ jsx9(
+      IconButton,
+      {
+        ...htmlAttributes,
+        ...ariaAttributes,
+        ...buttonProps,
+        className: cx7(classBase4, className, {
+          "saltButton-active": menuOpen
+        }),
+        disabled,
+        icon: icon2,
+        ref: rootRef,
+        variant
+      }
+    );
+  } else {
+    console.error("PopupMenu must have a label or an icon (or both)");
+    return null;
+  }
+};
+
+// src/prompt/Prompt.tsx
+import { useThemeAttributes as useThemeAttributes4 } from "@vuu-ui/vuu-utils";
+import { Button as Button3 } from "@salt-ds/core";
+import cx8 from "clsx";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef9 } from "react";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var classBase5 = "vuuPrompt";
+var AnchorBody2 = { current: document.body };
+var EMPTY_PROPS2 = {};
+var Prompt = ({
+  PopupProps = EMPTY_PROPS2,
+  cancelButtonLabel = "Cancel",
+  confirmButtonLabel = "Confirm",
+  icon: icon2,
+  onCancel,
+  onConfirm,
+  style,
+  text,
+  title,
+  variant = "info",
+  ...htmlAttributes
+}) => {
+  const {
+    anchorElement = AnchorBody2,
+    offsetLeft = 0,
+    offsetTop = 0,
+    placement = "below"
+  } = PopupProps;
+  const [themeClass, _, dataMode] = useThemeAttributes4();
+  const { position } = useAnchoredPosition({
+    anchorElement,
+    offsetLeft,
+    offsetTop,
+    placement
+  });
+  const rootRef = useRef9(null);
+  const confirmRef = useRef9(null);
+  useLayoutEffect5(() => {
+    if (rootRef.current) {
+      rootRef.current.showModal();
+      if (confirmRef.current) {
+        confirmRef.current.focus();
+      }
+      if (placement.endsWith("center")) {
+        const { width } = rootRef.current.getBoundingClientRect();
+        rootRef.current.style.marginLeft = `-${width / 2}px`;
+      }
+    }
+  }, [placement]);
+  return /* @__PURE__ */ jsx10(
+    "dialog",
+    {
+      ...htmlAttributes,
+      className: cx8(classBase5, `${classBase5}-${variant}`, themeClass),
+      "data-mode": dataMode,
+      ref: rootRef,
+      style: { ...style, ...position },
+      children: /* @__PURE__ */ jsxs4("form", { className: `${classBase5}-form`, children: [
+        /* @__PURE__ */ jsx10("div", { className: `${classBase5}-header`, "data-icon": icon2, children: title }),
+        /* @__PURE__ */ jsx10("div", { className: `${classBase5}-text`, children: text }),
+        /* @__PURE__ */ jsxs4("div", { className: `${classBase5}-buttonBar`, children: [
+          /* @__PURE__ */ jsx10(Button3, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
+          /* @__PURE__ */ jsx10(Button3, { onClick: onConfirm, ref: confirmRef, value: "default", children: confirmButtonLabel })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/tooltip/useAnchoredPosition.ts
+import { useCallback as useCallback11, useLayoutEffect as useLayoutEffect6 } from "react";
+var pointerSize = 12;
+var roomAbove = (anchor, height) => height < anchor.top;
+var roomBelow = (anchor, height) => document.body.clientHeight - anchor.bottom > height;
+var getNextPlacement = (placement) => {
+  if (Array.isArray(placement)) {
+    if (placement.length === 0) {
+      return [void 0, placement];
+    } else {
+      return [placement[0], placement.slice(1)];
+    }
+  } else {
+    return [placement, []];
+  }
+};
+var useAnchoredPosition2 = ({
+  anchorElement,
+  offsetLeft = 0,
+  offsetTop = 0,
+  placement
+}) => {
+  const ref = useCallback11(
+    (el) => {
+      if (el && anchorElement.current) {
+        const anchor = anchorElement.current.getBoundingClientRect();
+        const { height, width } = el.getBoundingClientRect();
+        let nextPlacement;
+        let placements = placement;
+        do {
+          [nextPlacement, placements] = getNextPlacement(placements);
+          switch (nextPlacement) {
+            case "above":
+              if (roomAbove(anchor, height + pointerSize)) {
+                const midDiff = (width - anchor.width) / 2;
+                el.style.cssText = `left:${anchor.left - midDiff}px;top:${anchor.top - height - pointerSize}px;opacity: 1;`;
+                el.dataset.align = "above";
+                return;
+              }
+              break;
+            case "below":
+              if (roomBelow(anchor, height + pointerSize)) {
+                const midDiff = (width - anchor.width) / 2;
+                el.style.cssText = `left:${anchor.left - midDiff}px;top:${anchor.bottom + pointerSize}px;opacity: 1;`;
+                el.dataset.align = "below";
+                return;
+              }
+              break;
+            case "right":
+              console.log("place the fucker right");
+              break;
+            case "left":
+              console.log("place the fucker left");
+              break;
+            default:
+              console.warn(`unklnown tooltip placement ${placement}`);
+          }
+        } while (nextPlacement);
+      }
+    },
+    [anchorElement, placement]
+  );
+  useLayoutEffect6(() => {
+  }, [anchorElement, offsetLeft, offsetTop, placement]);
+  return ref;
+};
+
+// src/tooltip/Tooltip.tsx
+import cx9 from "clsx";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var classBase6 = "vuuTooltip";
+var Tooltip = ({
+  anchorElement,
+  children,
+  className,
+  id,
+  onMouseEnter,
+  onMouseLeave,
+  placement: placementProp,
+  status,
+  style: styleProp
+}) => {
+  const ref = useAnchoredPosition2({
+    anchorElement,
+    placement: placementProp
+  });
+  return /* @__PURE__ */ jsx11(Portal, { children: /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: cx9(classBase6, className, "vuuHidden", {
+        [`${classBase6}-error`]: status === "error"
+      }),
+      id,
+      ref,
+      style: { ...styleProp, left: 0, top: 0 },
+      children: /* @__PURE__ */ jsx11(
+        "span",
+        {
+          className: `${classBase6}-content`,
+          onMouseEnter,
+          onMouseLeave,
+          children
+        }
+      )
+    }
+  ) });
+};
+
+// src/tooltip/useTooltip.ts
+import { queryClosest, useId as useId4 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback12, useRef as useRef10, useState as useState7 } from "react";
+var useTooltip = ({
+  anchorQuery = "*",
+  id: idProp,
+  placement = "right",
+  tooltipContent
+}) => {
+  const hideTooltipRef = useRef10();
+  const isHoveringRef = useRef10(false);
+  const anchorElementRef = useRef10(null);
+  const mouseEnterTimerRef = useRef10();
+  const mouseLeaveTimerRef = useRef10();
+  const [tooltipProps, setTooltipProps] = useState7();
+  const id = useId4(idProp);
+  const escapeListener = useCallback12((evt) => {
+    var _a;
+    if (evt.key === "Escape") {
+      (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
+    }
+  }, []);
+  hideTooltipRef.current = useCallback12(() => {
+    setTooltipProps(void 0);
+    document.removeEventListener("keydown", escapeListener);
+  }, [escapeListener]);
+  const handleMouseEnterTooltip = useCallback12(() => {
+    window.clearTimeout(mouseLeaveTimerRef.current);
+  }, []);
+  const handleMouseLeaveTooltip = useCallback12(() => {
+    var _a;
+    (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
+  }, []);
+  const hideTooltip = useCallback12((defer = 0) => {
+    if (mouseEnterTimerRef.current) {
+      window.clearTimeout(mouseEnterTimerRef.current);
+      mouseEnterTimerRef.current = void 0;
+    } else if (hideTooltipRef.current) {
+      if (defer === 0) {
+        hideTooltipRef.current();
+      } else {
+        mouseLeaveTimerRef.current = window.setTimeout(
+          hideTooltipRef.current,
+          defer
+        );
+      }
+    }
+  }, []);
+  const showTooltip = useCallback12(
+    (ref = anchorElementRef) => {
+      const { current: anchorEl } = ref;
+      if (anchorEl) {
+        setTooltipProps({
+          anchorElement: ref,
+          children: tooltipContent,
+          id: `${id}-tooltip`,
+          onMouseEnter: handleMouseEnterTooltip,
+          onMouseLeave: handleMouseLeaveTooltip,
+          placement
+        });
+        document.addEventListener("keydown", escapeListener);
+      }
+      mouseEnterTimerRef.current = void 0;
+      hideTooltip(isHoveringRef.current ? 3e3 : 1e3);
+    },
+    [
+      escapeListener,
+      handleMouseEnterTooltip,
+      handleMouseLeaveTooltip,
+      hideTooltip,
+      id,
+      placement,
+      tooltipContent
+    ]
+  );
+  const handleMouseEnter = useCallback12(
+    (evt) => {
+      isHoveringRef.current = true;
+      const el = queryClosest(evt.target, anchorQuery);
+      if (el) {
+        console.log(`el ${el.classList}`);
+        anchorElementRef.current = el;
+        mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);
+      }
+    },
+    [anchorQuery, showTooltip]
+  );
+  const handleMouseLeave = useCallback12(() => {
+    isHoveringRef.current = false;
+    hideTooltip(200);
+  }, [hideTooltip]);
+  const anchorProps = {
+    "aria-describedby": `${id}-tooltip`,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  };
+  return {
+    anchorProps,
+    hideTooltip,
+    showTooltip,
+    tooltipProps
+  };
+};
+
+// src/notifications/NotificationsProvider.tsx
+import React4, { useContext as useContext2 } from "react";
+
+// src/notifications/NotificationsCenter.tsx
+import { useMemo as useMemo7, useState as useState9 } from "react";
+import { getUniqueId } from "@vuu-ui/vuu-utils";
+
+// src/notifications/ToastNotification.tsx
+import { Icon as Icon2 } from "@vuu-ui/vuu-ui-controls";
+import cx10 from "clsx";
+import { useEffect, useState as useState8 } from "react";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var toastWidth = 300;
+var toastContainerRightPadding = 50;
+var toastDisplayDuration = 6e3;
+var horizontalTransitionDuration = 1e3;
+var toastHeight = 56;
+var verticalTransitionDuration = 300;
+var classBase7 = "vuuToastNotification";
+var icon = {
+  error: "error",
+  info: "info-circle",
+  success: "tick",
+  warning: "warn-triangle"
+};
+var ToastNotification = (props) => {
+  const { top, notification, animated = true } = props;
+  const [right, setRight] = useState8(-toastWidth - toastContainerRightPadding);
+  useEffect(() => {
+    setTimeout(() => setRight(toastContainerRightPadding));
+    if (animated) {
+      setTimeout(
+        () => setRight(-toastWidth - toastContainerRightPadding),
+        toastDisplayDuration + horizontalTransitionDuration
+      );
+    }
+  }, [animated]);
+  return /* @__PURE__ */ jsx12(Portal, { children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cx10(classBase7, `${classBase7}-${notification.type}`),
+      style: {
+        height: toastHeight,
+        right,
+        width: toastWidth,
+        top,
+        transition: animated ? `right ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx12(Icon2, { name: icon[notification.type] }),
+        /* @__PURE__ */ jsxs5("div", { className: `${classBase7}-toastContent`, children: [
+          /* @__PURE__ */ jsx12("strong", { className: `${classBase7}-toastHeader`, children: notification.header }),
+          /* @__PURE__ */ jsx12("div", { children: notification.body })
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/notifications/NotificationsCenter.tsx
+import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
+var toastOffsetTop = 60;
+var toastDisplayDuration2 = 6e3;
+var horizontalTransitionDuration2 = 1e3;
+var toastHeight2 = 56;
+var toastContainerContentGap = 10;
+var NotificationsCenter = ({
+  notificationsContext
+}) => {
+  const [notifications, setNotifications] = useState9([]);
+  useMemo7(() => {
+    notificationsContext.setNotify((notification) => {
+      const newNotification = {
+        ...notification,
+        id: getUniqueId()
+      };
+      setNotifications((prev) => prev.concat(newNotification));
+      setTimeout(() => {
+        setNotifications((prev) => prev.filter((n) => n !== newNotification));
+      }, toastDisplayDuration2 + horizontalTransitionDuration2 * 2);
+    });
+  }, [notificationsContext]);
+  return /* @__PURE__ */ jsx13(Fragment3, { children: notifications.map((notification, i) => /* @__PURE__ */ jsx13(
+    ToastNotification,
+    {
+      top: toastOffsetTop + (toastHeight2 + toastContainerContentGap) * i,
+      notification
+    },
+    notification.id
+  )) });
+};
+
+// src/notifications/NotificationsProvider.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var NotificationsContextObject = class {
+  constructor() {
+    this.notify = () => "have you forgotten to provide a NotificationsCenter?";
+    this.setNotify = (dispatcher) => {
+      this.notify = dispatcher;
+    };
+  }
+};
+var NotificationsContext = React4.createContext(
+  new NotificationsContextObject()
+);
+var NotificationsProvider = (props) => {
+  const context = useContext2(NotificationsContext);
+  return /* @__PURE__ */ jsxs6(NotificationsContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsx14(NotificationsCenter, { notificationsContext: context }),
+    props.children
+  ] });
+};
+var useNotifications = () => {
+  const { notify } = useContext2(NotificationsContext);
+  return notify;
+};
+export {
+  ContextMenu,
+  ContextMenuContext,
+  ContextMenuProvider,
+  Dialog,
+  DialogHeader,
+  DialogService,
+  MenuItem,
+  MenuItemGroup,
+  MenuList,
+  NotificationsProvider,
+  PopupComponent2 as PopupComponent,
+  PopupMenu,
+  PopupService,
+  Portal,
+  Prompt,
+  Separator,
+  ToastNotification,
+  Tooltip,
+  createContainer,
+  isMenuItemLabel,
+  reasonIsClickAway,
+  reasonIsMenuAction,
+  renderPortal,
+  useAnchoredPosition,
+  useContextMenu,
+  useDialog,
+  useNotifications,
+  useTooltip
+};
 //# sourceMappingURL=index.js.map