@vuu-ui/vuu-popups 0.8.10 → 0.8.11-debug

package/cjs/index.js

@@ -1,2 +1,1986 @@
-"use strict";var Bt=Object.create;var ae=Object.defineProperty;var St=Object.getOwnPropertyDescriptor;var Ot=Object.getOwnPropertyNames;var $t=Object.getPrototypeOf,Kt=Object.prototype.hasOwnProperty;var Ft=(e,t)=>{for(var n in t)ae(e,n,{get:t[n],enumerable:!0})},We=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Ot(t))!Kt.call(e,r)&&r!==n&&ae(e,r,{get:()=>t[r],enumerable:!(o=St(t,r))||o.enumerable});return e};var k=(e,t,n)=>(n=e!=null?Bt($t(e)):{},We(t||!e||!e.__esModule?ae(n,"default",{value:e,enumerable:!0}):n,e)),Wt=e=>We(ae({},"__esModule",{value:!0}),e);var Bn={};Ft(Bn,{ContextMenu:()=>fe,ContextMenuContext:()=>re,ContextMenuProvider:()=>dn,Dialog:()=>Ut,DialogService:()=>se,MenuItem:()=>ne,MenuItemGroup:()=>te,MenuList:()=>de,Popup:()=>yn,PopupComponent:()=>Cn,PopupMenu:()=>Rn,PopupService:()=>L,Portal:()=>De,PortalDeprecated:()=>ee,Prompt:()=>kn,Separator:()=>Le,Tooltip:()=>Nn,createContainer:()=>ve,installTheme:()=>Vt,isMenuItemLabel:()=>me,reasonIsClickAway:()=>ke,reasonIsMenuAction:()=>He,renderPortal:()=>Z,useAnchoredPosition:()=>ie,useContextMenu:()=>Ae,useTooltip:()=>Dn});module.exports=Wt(Bn);var Ye=require("@salt-ds/lab"),le=require("@salt-ds/core"),we=k(require("classnames")),q=require("react");var _=require("react"),Ve=k(require("react-dom"));var qe=k(require("react-dom")),Ge=k(require("classnames")),qt=1,Gt=({className:e,dataMode:t,x:n=0,y:o=0,win:r=window})=>{let s=r.document.createElement("div");return s.className=(0,Ge.default)(`vuuPopup ${qt++}`,e),s.style.cssText=`left:${n}px; top:${o}px;`,t&&(s.dataset.mode=t),r.document.body.appendChild(s),s},ve=e=>Gt(e),Z=(e,t,n,o,r)=>{t.style.cssText=`left:${n}px; top:${o}px;position: absolute;`,qe.render(e,t,r)};var Ue=require("@vuu-ui/vuu-shell"),Xe=k(require("classnames")),ee=function({children:t,x:n=0,y:o=0,onRender:r}){let[s,u,p]=(0,Ue.useThemeAttributes)(),a=(0,_.useMemo)(()=>ve({className:(0,Xe.default)(s,u),dataMode:p}),[p,u,s]);return(0,_.useLayoutEffect)(()=>{Z(t,a,n,o,r)},[t,r,a,n,o]),(0,_.useLayoutEffect)(()=>()=>{var i;a&&(Ve.unmountComponentAtNode(a),a.classList.contains("vuuPopup")&&((i=a.parentElement)==null||i.removeChild(a)))},[a]),null};var Vt=e=>{let t=getComputedStyle(document.body).getPropertyValue("--installed-themes");document.body.style.setProperty("--installed-themes",`${t} ${e}`)};var W=require("react/jsx-runtime"),Ee="vuuDialog",Ut=({children:e,className:t,isOpen:n=!1,onClose:o,title:r,hideCloseButton:s=!1,...u})=>{let p=(0,q.useRef)(null),[a]=(0,q.useState)(0),[i]=(0,q.useState)(0),m=(0,q.useCallback)(()=>{o==null||o()},[o]),l=(0,q.useCallback)(()=>{},[]);return n?(0,W.jsx)(ee,{onRender:l,x:a,y:i,children:(0,W.jsx)(Ye.Scrim,{className:`${Ee}-scrim`,open:n,autoFocusRef:p,children:(0,W.jsxs)("div",{...u,className:(0,we.default)(Ee,t),ref:p,children:[(0,W.jsxs)("div",{className:(0,we.default)("vuuToolbarProxy",`${Ee}-header`),children:[(0,W.jsx)(le.Text,{className:"dialogHeader",children:r}),!s&&(0,W.jsx)(le.Button,{onClick:m,"data-align":"end","data-icon":"close"},"close")]}),e]})})}):null};var X=require("react");var K=k(require("react")),Te=k(require("classnames")),nt=require("@vuu-ui/vuu-layout");var B=require("react");var ze=e=>e.closest("[data-root='true']")!==null,Je=(e,t)=>{var n;return e.ariaHasPopup==="true"&&((n=e.dataset)==null?void 0:n.idx)===`${t}`||e.querySelector(`:scope > [data-idx='${t}'][aria-haspopup='true']`)!==null};function Xt(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var Yt="Enter";var zt="Delete",Jt=new Set([Yt,zt]),jt=new Set(["Tab"]),Qt=new Set(["ArrowRight","ArrowLeft"]),je=new Set(["Home","End","ArrowDown","ArrowUp"]),Qe=new Set(["Home","End","ArrowRight","ArrowLeft"]),Zt=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),to=Xt(Jt,Qe,je,Qt,Zt,jt);var Ze=({key:e},t="vertical")=>(t==="vertical"?je:Qe).has(e);var pe=require("@vuu-ui/vuu-utils"),_e=({autoHighlightFirstItem:e=!1,count:t,defaultHighlightedIdx:n,highlightedIndex:o,onActivate:r,onHighlight:s,onCloseMenu:u,onOpenMenu:p})=>{var I;if((0,pe.isValidNumber)(o)&&(0,pe.isValidNumber)(n))throw Error("useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx");let a=(0,pe.isValidNumber)(o),i=(0,B.useRef)((I=n!=null?n:o)!=null?I:e?0:-1),[,m]=(0,B.useState)(null),l=(0,B.useCallback)(C=>{i.current=C,s==null||s(C),m({})},[s]),c=(0,B.useCallback)(C=>{C!==i.current&&(a||l(C))},[a,l]),f=(0,B.useRef)(!0),v=(0,B.useRef)(!1),b=C=>v.current=C,P=a?o:i.current,y=(0,B.useCallback)(C=>{let g=_t(t,C.key,i.current);g!==i.current&&c(g)},[t,c]),E=(0,B.useCallback)(C=>{if(Ze(C))C.preventDefault(),C.stopPropagation(),f.current=!0,y(C);else if((C.key==="ArrowRight"||C.key==="Enter")&&Je(C.target,P)){let d=C.target.querySelector(`:scope > [data-idx='${P}']`);d&&(p==null||p(d))}else C.key==="ArrowLeft"&&!ze(C.target)?u(P):C.key==="Enter"?(C.preventDefault(),C.stopPropagation(),r&&r(P)):C.key==="Tab"&&u(-1)},[P,y,r,u,p]),x=(0,B.useMemo)(()=>({onFocus:()=>{P===-1&&l(0)},onKeyDown:E,onMouseDownCapture:()=>{f.current=!1,b(!0)},onMouseMove:()=>{f.current&&(f.current=!1)},onMouseLeave:()=>{f.current=!0,b(!1),c(-1)}}),[E,P,l,c]);return{focusVisible:f.current?P:-1,controlledHighlighting:a,highlightedIndex:P,setHighlightedIndex:c,listProps:x,setIgnoreFocus:b}};function _t(e,t,n){return t==="ArrowUp"?n>0?n-1:n:n===null?0:n===e-1?n:n+1}var U=k(require("react"));var Re=e=>e.type===te||!!e.props["data-group"],en=e=>{if(Array.isArray(e)&&me(e[0]))return e[0]},tn=(e,t,n,o=!1)=>{let{props:{children:r}}=e;return{childWithId:U.default.cloneElement(e,{hasSeparator:o,id:`${t}`,key:t,children:n?en(r):r}),grandChildren:n?r:void 0}},et=(e,t)=>{let n=(0,U.useCallback)(()=>{let s=(u,p=t,a={},i={})=>{let m=a[p]=[],l=0,c=!1;return U.default.Children.forEach(u,f=>{if(!me(f))if(f.type===Le)c=!0;else{let v=Re(f),b=`${p}-${l}`,{props:{action:P,options:y}}=f,{childWithId:E,grandChildren:x}=tn(f,b,v,c);m.push(E),x?s(x,b,a,i):i[b]={action:P,options:y},l+=1,c=!1}}),[a,i]};return s(e)},[t,e]),[o,r]=(0,U.useMemo)(()=>n(),[n]);return[o,r]};var $=require("react/jsx-runtime"),tt="vuuMenuList",Le=()=>(0,$.jsx)("li",{className:"vuuMenuItem-divider"}),te=()=>null,ne=({children:e,idx:t,...n})=>(0,$.jsx)("div",{...n,children:e}),ot=({children:e})=>(0,$.jsx)($.Fragment,{children:e});ot.displayName="MenuItemLabel";ne.Label=ot;var nn=e=>K.default.isValidElement(e)&&typeof e.type!="string"&&"displayName"in e.type?e.type.displayName:void 0,me=e=>nn(e)==="MenuItemLabel",on=e=>e.props["data-icon"],de=({activatedByKeyboard:e,childMenuShowing:t,children:n,className:o,defaultHighlightedIdx:r,highlightedIdx:s,id:u,isRoot:p,listItemProps:a,onHighlightMenuItem:i,onActivate:m,onCloseMenu:l,onOpenMenu:c,...f})=>{let v=(0,nt.useId)(u),b=(0,K.useRef)(null),P=(0,K.useMemo)(()=>new Map,[]),y=h=>{var w;let M=(w=b.current)==null?void 0:w.querySelector(`:scope > [data-idx='${h}']`);M!=null&&M.id&&(m==null||m(M.id))},{focusVisible:E,highlightedIndex:x,listProps:I}=_e({count:K.default.Children.count(n),defaultHighlightedIdx:r,highlightedIndex:s,onActivate:y,onHighlight:i,onOpenMenu:c,onCloseMenu:l}),C=t==null?E:-1;(0,K.useLayoutEffect)(()=>{var h;t===void 0&&e&&((h=b.current)==null||h.focus())},[e,t]);let g=()=>x===void 0||x===-1?void 0:P.get(x);function d(){let h={...a,role:"menuitem"},M=(R,H,D)=>H?[(0,$.jsx)("span",{className:"vuuIconContainer","data-icon":D},"icon")].concat(R):R;function w(R,H,D,Se){var Fe;let{children:Oe,className:kt,"data-icon":$e,id:ce,hasSeparator:At,label:Ce,...Nt}=H.props,xe=Re(H),Ke=xe&&t===ce,Dt=Ke?`${v}-${ce}`:void 0;R.push((0,$.jsx)(ne,{...Nt,...h,...rn(ce,D,(Fe=H.key)!=null?Fe:ce,x,C,kt,At),"aria-controls":Dt,"aria-haspopup":xe||void 0,"aria-expanded":Ke||void 0,children:M(xe&&Ce!=null?Ce:Oe,Se,$e)}))}let N=[];if(n.length>0){let R=n.some(on);n.forEach((H,D)=>{w(N,H,D,R)})}return N}return(0,$.jsx)("div",{...f,...I,"aria-activedescendant":g(),className:(0,Te.default)(tt,o,{[`${tt}-childMenuShowing`]:t!==void 0}),"data-root":p||void 0,id:v,ref:b,role:"menu",children:d()})},rn=(e,t,n,o,r,s,u)=>({id:`menuitem-${e}`,key:n!=null?n:t,"data-idx":t,"data-highlighted":t===o||void 0,className:(0,Te.default)("vuuMenuItem",s,{"vuuMenuItem-separator":u,focusVisible:r===t})});de.displayName="MenuList";var T=require("react");var Ie=e=>e==null?void 0:e.closest("[data-idx],[aria-posinset]");var st=(e,t,n)=>e.map((o,r)=>r===e.length-1?{...o,[n]:o[n]-t}:o),sn=(e,t)=>st(e,t,"left"),un=(e,t)=>st(e,t,"top"),cn=(e,t)=>{let[n,o]=t.slice(-2),r=document.getElementById(`${e}-${o.id}`);if(r===null)throw Error(`useCascade.flipSides element with id ${o.id} not found`);let{width:s}=r.getBoundingClientRect();return t.map(u=>u===o?{...u,left:n.left-(s-2)}:u)},an=(e,t)=>{let[{left:n,top:o}]=t.slice(-1),{offsetWidth:r,offsetTop:s}=e;return{left:n+r,top:s+o}},it=(e,t)=>{let n=e.lastIndexOf("-");return n>-1?e.slice(9,n):t},ln=e=>e.slice(9),rt=({ariaExpanded:e,ariaHasPopup:t,id:n},o)=>{if(n.startsWith("menuitem"))return{hostMenuId:it(n,o),targetMenuId:ln(n),menuItemId:n,isGroup:t==="true",isOpen:e==="true"};throw Error(`getMenuItemDetails #${n} is not a menuitem`)},ut=({id:e,onActivate:t,onMouseEnterItem:n,position:{x:o,y:r}})=>{let[,s]=(0,T.useState)({}),u=(0,T.useRef)([{id:e,left:o,top:r}]),p=(0,T.useCallback)(g=>u.current.findIndex(d=>d.id===g)!==-1,[]),a=(0,T.useCallback)(g=>{let d=c.current[g];if(d===void 0)throw Error(`getOpenMenuState no entry for menu ${g}`);return d},[]),i=(0,T.useCallback)(g=>{u.current=g,s({})},[]),m=(0,T.useRef)(),l=(0,T.useRef)(),c=(0,T.useRef)({[e]:"no-popup"}),f=(0,T.useCallback)((g=e,d,h=null)=>{if(g===e&&h===null)i([{id:e,left:o,top:r}]);else{c.current[g]="popup-open";let M=document.getElementById(h);if(M!==null){let{left:w,top:N}=an(M,u.current);i(u.current.concat({id:d,left:w,top:N}))}else throw Error(`openMenu no menuItem ${h}`)}},[e,o,r,i]),v=(0,T.useCallback)(g=>{if(g===e)i([]);else{let d=u.current.slice(),h=d.pop();c.current[h.id]="no-popup";let M=d.at(-1);M&&(c.current[M.id]="no-popup"),i(d)}},[e,i]),b=(0,T.useCallback)(g=>{let d=u.current.slice(),h=g.slice(9),{id:M}=d.at(-1);for(;d.length>1&&!h.startsWith(M);){let w=it(M,e);d.pop(),c.current[M]="no-popup",c.current[w]="no-popup",{id:M}=d[d.length-1]}d.length<u.current.length&&i(d)},[e,i]),P=(0,T.useCallback)(()=>{m.current&&(clearTimeout(m.current),m.current=void 0)},[]),y=(0,T.useCallback)((g,d,h)=>{P(),m.current=window.setTimeout(()=>{b(h),c.current[g]="popup-open",c.current[d]="no-popup",f(g,d,h)},400)},[P,b,f]),E=(0,T.useCallback)((g,d,h)=>{c.current[d]="pending-close",l.current=window.setTimeout(()=>{b(h)},400)},[b]),x=(0,T.useCallback)(()=>{let{current:g}=u,[d]=g.slice(-1),h=document.getElementById(d.id);if(h){let{right:M,bottom:w}=h.getBoundingClientRect(),{clientHeight:N,clientWidth:R}=document.body;if(M>R){let H=g.length>1?cn(e,g):sn(g,M-R);i(H)}else if(w>N){let H=un(g,w-N);i(H)}typeof h.tabIndex=="number"&&h.focus()}else console.log(`no element found with if ${d.id}`)},[e,i]),I=(0,T.useCallback)(g=>{let{hostMenuId:d,targetMenuId:h,menuItemId:M,isGroup:w,isOpen:N}=rt(g,e),{current:{[d]:R}}=c;if(R==="no-popup"&&w)c.current[d]="popup-pending",y(d,h,M);else if(R==="popup-pending"&&!w)c.current[d]="no-popup",clearTimeout(m.current),m.current=void 0;else if(R==="popup-pending"&&w)clearTimeout(m.current),y(d,h,M);else if(R==="popup-open")if(p(h)){let H=a(h);switch(b(M),H){case"pending-close":clearTimeout(l.current),l.current=void 0,c.current[h]="no-popup",P();break;default:}}else{let[H,D]=u.current.slice(-2);H.id===d&&c.current[D.id]!=="pending-close"?(E(d,D.id,M),w&&!N&&y(d,h,M)):H.id===d&&w&&M!==D.id&&c.current[D.id]==="pending-close"||w?y(d,h,M):c.current[D.id]!=="pending-close"&&b(M)}R==="pending-close"&&(P(),clearTimeout(l.current),l.current=void 0,c.current[d]="popup-open")},[P,b,a,p,e,E,y]),C=(0,T.useMemo)(()=>({onMouseEnter:g=>{let d=Ie(g.target);I(d),n(g,d.id)},onClick:g=>{let d=Ie(g.target),{isGroup:h,menuItemId:M}=rt(d,e);h?I(d):t(M)}}),[t,n,e,I]);return{closeMenu:v,handleRender:x,listItemProps:C,openMenu:I,openMenus:u.current}};var ct=require("@vuu-ui/vuu-layout");var oe=require("react/jsx-runtime"),at=require("react"),pn=()=>{},fe=({activatedByKeyboard:e,children:t,className:n,id:o,onClose:r=()=>{},position:s={x:0,y:0},style:u,...p})=>{let a=(0,X.useRef)(r);a.current=r;let i=(0,ct.useId)(o),m=(0,X.useRef)(pn),[l,c]=et(t,i),f=(0,X.useRef)(e),v=(0,X.useCallback)(()=>{f.current=!1},[]),b=(0,X.useCallback)(M=>{let w=M.slice(9),{action:N,options:R}=c[w];m.current(i),r({type:"menu-action",menuId:N,options:R})},[c,i,r]),{closeMenu:P,listItemProps:y,openMenu:E,openMenus:x,handleRender:I}=ut({id:`${i}`,onActivate:b,onMouseEnterItem:v,position:s});m.current=P;let C=()=>{f.current=!0,P()},g=()=>{},d=x.length-1,h=M=>{if(!(M>=d)){let{id:w}=x[M+1];return w}};return(0,oe.jsx)(oe.Fragment,{children:x.map(({id:M,left:w,top:N},R,H)=>{let D=h(R);return(0,oe.jsx)(ee,{x:w,y:N,onRender:I,children:(0,at.createElement)(de,{...p,activatedByKeyboard:f.current,childMenuShowing:D,className:n,id:M,isRoot:R===0,key:R,listItemProps:y,onActivate:b,onHighlightMenuItem:g,onCloseMenu:C,onOpenMenu:E,style:u,tabIndex:R===H.length-1?0:void 0},l[M])},R)})})};fe.displayName="ContextMenu";var z=require("react"),Me=require("react/jsx-runtime"),re=(0,z.createContext)(null),mn=({children:e,context:t,menuActionHandler:n,menuBuilder:o})=>{let r=(0,z.useMemo)(()=>t!=null&&t.menuBuilders&&o?t.menuBuilders.concat(o):o?[o]:(t==null?void 0:t.menuBuilders)||[],[t,o]),s=(0,z.useCallback)(u=>{var p;if(n!=null&&n(u)||(p=t==null?void 0:t.menuActionHandler)!=null&&p.call(t,u))return!0},[t,n]);return(0,Me.jsx)(re.Provider,{value:{menuActionHandler:s,menuBuilders:r},children:e})},dn=({children:e,label:t,menuActionHandler:n,menuBuilder:o})=>(0,Me.jsx)(re.Consumer,{children:r=>(0,Me.jsx)(mn,{context:r,label:t,menuActionHandler:n,menuBuilder:o,children:e})});var ht=require("@vuu-ui/vuu-shell"),bt=require("@vuu-ui/vuu-utils"),yt=k(require("classnames")),G=require("react");var lt=k(require("classnames")),O=k(require("react")),J=k(require("react-dom"));var Y=!1,S=[],He=e=>(e==null?void 0:e.type)==="menu-action",ke=e=>(e==null?void 0:e.type)==="click-away";function ge(e){if(e.key==="Esc"){if(S.length)mt();else if(Y){let t=document.body.querySelector(".vuuDialog");t&&J.default.unmountComponentAtNode(t)}}}function pt(e){if(S.length){let t=document.body.querySelectorAll(".vuuPopup");for(let n=0;n<t.length;n++)if(t[n].contains(e.target))return;mt({mouseEvt:e,type:"click-away"})}}function mt(e){if(S.length===1)L.hidePopup(e,"anon","all");else if(S.length){let t=document.body.querySelectorAll(".vuuPopup");for(let n=0;n<t.length;n++)J.default.unmountComponentAtNode(t[n]);dt("*")}}function fn(){Y===!1&&(Y=!0,window.addEventListener("keydown",ge,!0))}function Mn(){Y&&(Y=!1,window.removeEventListener("keydown",ge,!0))}function gn(e){S.indexOf(e)===-1&&(S.push(e),Y===!1&&(window.addEventListener("keydown",ge,!0),window.addEventListener("click",pt,!0)))}function dt(e){if(S.length){if(e==="*")S.length=0;else{let t=S.indexOf(e);t!==-1&&S.splice(t,1)}S.length===0&&Y===!1&&(window.removeEventListener("keydown",ge,!0),window.removeEventListener("click",pt,!0))}}var hn=({children:e,position:t,style:n})=>{let o=(0,lt.default)("hwPopup","hwPopupContainer",t);return(0,O.createElement)("div",{className:o,style:n},e)},bn=1,L=class{static showPopup({group:t="all",name:n="anon",left:o=0,position:r="",right:s="auto",top:u=0,width:p="auto",component:a}){if(!a)throw Error("PopupService showPopup, no component supplied");typeof a.props.onClose=="function"?L.onClose=a.props.onClose:L.onClose=void 0,gn(n),document.addEventListener("keydown",L.escapeKeyListener,!0);let i=document.body.querySelector(".vuuPopup."+t);i===null&&(i=document.createElement("div"),i.className="vuuPopup "+t,document.body.appendChild(i));let m={width:p};Z((0,O.createElement)(hn,{key:bn++,position:r,style:m},a),i,o,u,()=>{L.keepWithinThePage(i,s)})}static escapeKeyListener(t){t.key==="Escape"&&L.hidePopup({type:"escape",event:t})}static hidePopup(t,n="anon",o="all"){var r;if(S.indexOf(n)!==-1){dt(n);let s=document.body.querySelector(`.vuuPopup.${o}`);s&&J.default.unmountComponentAtNode(s)}document.removeEventListener("keydown",L.escapeKeyListener,!0),(r=L==null?void 0:L.onClose)==null||r.call(L,t)}static keepWithinThePage(t,n="auto"){let o=t.querySelector(".vuuPopupContainer > *");if(o){let{top:r,left:s,width:u,height:p,right:a}=o.getBoundingClientRect(),i=window.innerWidth,l=window.innerHeight-(r+p);l<0&&(o.style.top=Math.round(r)+l+"px");let c=i-(s+u);if(c<0&&(o.style.left=Math.round(s)+c+"px"),typeof n=="number"&&n!==a){let f=n-a;o.style.left=s+f+"px"}}}},se=class{static showDialog(t){let n=".vuuDialog",o=t.props.onClose;fn(),J.default.render(O.default.cloneElement(t,{container:n,onClose:()=>{se.closeDialog(),o&&o()}}),document.body.querySelector(n))}static closeDialog(){Mn();let t=document.body.querySelector(".vuuDialog");t&&J.default.unmountComponentAtNode(t)}},yn=e=>{let t=(0,O.useRef)(),n=(0,O.useRef)(null),o=(r,s)=>{let{name:u,group:p,depth:a,width:i}=r,m,l;if(t.current&&(window.clearTimeout(t.current),t.current=void 0),r.close===!0)L.hidePopup(void 0,u,p);else{let{position:c,children:f}=r,{left:v,top:b,width:P,bottom:y}=s;c==="below"?(m=v,l=y):c==="above"&&(m=v,l=b),t.current=window.setTimeout(()=>{L.showPopup({name:u,group:p,depth:a,position:c,left:m,top:l,width:i||P,component:f})},10)}};return(0,O.useEffect)(()=>{if(n.current){let r=n.current.parentElement,s=r==null?void 0:r.getBoundingClientRect();s&&o(e,s)}return()=>{L.hidePopup(void 0,e.name,e.group)}},[e]),O.default.createElement("div",{className:"popup-proxy",ref:n})};var ft=k(require("classnames")),Mt=require("@vuu-ui/vuu-shell");var he=require("react"),Pn=(e,t,n,o)=>{let{bottom:r,left:s,right:u,top:p,width:a}=e.getBoundingClientRect();switch(t){case"below":return{left:s+n,top:r+o};case"right":return{left:u+n,top:p+o};case"below-center":return{left:s+a/2+n,top:r+o};case"below-full-width":return{left:s+n,top:r+o,width:a};default:throw Error("Popup getPositionRelativeToAnchor only supported placement values are below and right")}},ie=({anchorElement:e,offsetLeft:t=0,offsetTop:n=0,placement:o})=>{let[r,s]=(0,he.useState)();return(0,he.useLayoutEffect)(()=>{if(e.current){let u=Pn(e.current,o,t,n);s(u)}},[e,t,n,o]),r};var gt=require("react/jsx-runtime"),Cn=({children:e,className:t,anchorElement:n,placement:o})=>{let[r,s,u]=(0,Mt.useThemeAttributes)(),p=ie({anchorElement:n,placement:o});return p===void 0?null:(0,gt.jsx)("div",{className:(0,ft.default)("vuuPortal",t,r,s),"data-mode":u,style:p,children:e})};var be=require("react/jsx-runtime"),Ae=(e,t)=>{let n=(0,G.useContext)(re),[o,r,s]=(0,ht.useThemeAttributes)(),u=(0,G.useCallback)((i,m,l)=>{let c=[];for(let f of i)c=c.concat(f(m,l));return c},[]),p=(0,G.useCallback)((i,m,{ContextMenuProps:l,contextMenu:c,...f})=>{var b,P;if((b=i.stopPropagation)==null||b.call(i),(P=i.preventDefault)==null||P.call(i),c)return vn({x:i.clientX,y:i.clientY},c);let v=[];if(e&&v.push(e),n&&Array.isArray(n==null?void 0:n.menuBuilders)&&n.menuBuilders.length>0&&v.push(...n.menuBuilders),v.length>0){let y=u(v,m,f),E=x=>(t==null?void 0:t(x))===!0?!0:n==null?void 0:n.menuActionHandler(x);y.length&&E&&En(i,y,E,{...l,className:(0,yt.default)(l==null?void 0:l.className,o,r),"data-mode":s})}else console.warn("useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)")},[u,n,s,r,t,e,o]),a=(0,G.useCallback)(()=>{console.log("hide comnytext menu")},[]);return[p,a]},xn={},vn=(e,t)=>{L.showPopup({focus:!0,left:0,top:0,component:(0,G.cloneElement)(t,{position:e})})},En=(e,t,n,{position:o,...r}=xn)=>{let s=i=>{let m=(l,c)=>(0,bt.isGroupMenuItemDescriptor)(l)?(0,be.jsx)(te,{label:l.label,children:l.children.map(m)},c):(0,be.jsx)(ne,{action:l.action,className:l.className,"data-icon":l.icon,options:l.options,children:l.label},c);return i.map(m)},u=i=>{var m;He(i)&&(n(i),L.hidePopup()),(m=r==null?void 0:r.onClose)==null||m.call(r,i)},p=o!=null?o:{x:e.clientX,y:e.clientY},a=(0,be.jsx)(fe,{...r,className:"vuuContextMenu",onClose:u,position:p,children:s(t)});L.showPopup({left:0,top:0,component:a,focus:!0})};var V=require("react");var Pt=k(require("classnames")),Ct=require("@salt-ds/core"),xt=require("@vuu-ui/vuu-layout");var vt=require("react/jsx-runtime"),Ne="vuuPopupMenu",wn=e=>{if(e){let{bottom:t,left:n}=e.getBoundingClientRect();return{x:n,y:t+6}}},Rn=({className:e,label:t,icon:n=t?"chevron-down":"more-vert",id:o,menuActionHandler:r,menuBuilder:s,menuLocation:u="header",menuOptions:p,onMenuClose:a,tabIndex:i=0,...m})=>{let l=(0,V.useRef)(null),c=(0,V.useRef)(!1),[f,v]=(0,V.useState)(!1),b=(0,xt.useId)(o),[P]=Ae(s,r),y=(0,V.useCallback)(x=>{v(!1),ke(x)?x.mouseEvt.target===l.current&&(c.current=!0):requestAnimationFrame(()=>{var I;a==null||a(x),i!==-1&&((I=l.current)==null||I.focus())})},[a,i]),E=(0,V.useCallback)(x=>{c.current?c.current=!1:(v(!0),P(x,u,{ContextMenuProps:{className:"vuuPopupMenuList",id:`${b}-menu`,onClose:y,position:wn(l.current)},...p}))},[y,b,u,p,P]);return(0,vt.jsx)(Ct.Button,{...m,"aria-controls":`${b}-menu-root`,"aria-expanded":f,"aria-haspopup":"menu",className:(0,Pt.default)(Ne,e,{[`${Ne}-withCaption`]:t!==void 0,[`${Ne}-open`]:f}),"data-icon":n,id:b,onClick:E,ref:l,tabIndex:i,variant:"secondary",children:t})};var Et=require("@vuu-ui/vuu-shell"),j=require("react"),wt=require("react-dom");function Ln(e){return typeof e=="function"?e():e}var Tn="vuu-portal-root",De=({children:e,container:t=document.body,id:n=Tn,open:o=!0})=>{var l;let[r,s]=(0,j.useState)(!1),u=(0,j.useRef)(null),p=(l=Ln(t))!=null?l:document.body,[a,i,m]=(0,Et.useThemeAttributes)();return(0,j.useLayoutEffect)(()=>{let c=document.getElementById(n);c?u.current=c:(u.current=document.createElement("div"),u.current.id=n);let f=u.current;p.contains(f)||p.appendChild(f),f.classList.add(a,i),f.dataset.mode=m,s(!0)},[n,p,a,i,m]),o&&r&&u.current&&e?(0,wt.createPortal)(e,u.current):null};var Rt=require("@vuu-ui/vuu-shell"),Be=require("@salt-ds/core"),Lt=k(require("classnames")),ue=require("react");var F=require("react/jsx-runtime"),Q="vuuPrompt",In={current:document.body},Hn={},kn=({PopupProps:e=Hn,cancelButtonLabel:t="Cancel",confirmButtonLabel:n="Confirm",icon:o,onCancel:r,onConfirm:s,style:u,text:p,title:a,variant:i="info",...m})=>{let{anchorElement:l=In,offsetLeft:c=0,offsetTop:f=0,placement:v="below"}=e,[b,P,y]=(0,Rt.useThemeAttributes)(),E=ie({anchorElement:l,offsetLeft:c,offsetTop:f,placement:v}),x=(0,ue.useRef)(null),I=(0,ue.useRef)(null);return(0,ue.useLayoutEffect)(()=>{if(x.current&&(x.current.showModal(),I.current&&I.current.focus(),v.endsWith("center"))){let{width:C}=x.current.getBoundingClientRect();x.current.style.marginLeft=`-${C/2}px`}},[v]),(0,F.jsx)("dialog",{...m,className:(0,Lt.default)(Q,`${Q}-${i}`,b),"data-mode":y,ref:x,style:{...u,...E},children:(0,F.jsxs)("form",{className:`${Q}-form`,children:[(0,F.jsx)("div",{className:`${Q}-header`,"data-icon":o,children:a}),(0,F.jsx)("div",{className:`${Q}-text`,children:p}),(0,F.jsxs)("div",{className:`${Q}-buttonBar`,children:[(0,F.jsx)(Be.Button,{onClick:r,variant:"secondary",children:t}),(0,F.jsx)(Be.Button,{onClick:s,ref:I,value:"default",children:n})]})]})})};var ye=require("react"),An=(e,t,n,o)=>{let{bottom:r,height:s,left:u,right:p,top:a,width:i}=e.getBoundingClientRect(),m=u+i/2,l=a+s/2;switch(t){case"above":return{left:m+n,top:a+o};case"below":return{left:m+n,top:r+o};case"right":return{left:p+n,top:l+n};case"left":return{left:u+n,top:l+n};default:throw Error("Tooltip getPositionRelativeToAnchor only supported placement values are left, right, below and right")}},Tt=({anchorElement:e,offsetLeft:t=0,offsetTop:n=0,placement:o})=>{let[r,s]=(0,ye.useState)();return(0,ye.useLayoutEffect)(()=>{if(e.current){let u=An(e.current,o,t,n);s(u)}},[e,t,n,o]),r};var Pe=require("react/jsx-runtime"),It="vuuTooltip",Nn=({anchorElement:e,children:t,id:n,onMouseEnter:o,onMouseLeave:r,placement:s})=>{let u=Tt({anchorElement:e,placement:s});return u===void 0?null:(0,Pe.jsx)(De,{children:(0,Pe.jsx)("div",{className:It,"data-align":s,id:n,style:u,children:(0,Pe.jsx)("span",{className:`${It}-content`,onMouseEnter:o,onMouseLeave:r,children:t})})})};var A=require("react"),Ht=require("@vuu-ui/vuu-layout"),Dn=({id:e,placement:t="right",tooltipContent:n})=>{let o=(0,A.useRef)(),r=(0,A.useRef)(null),s=(0,A.useRef)(),u=(0,A.useRef)(),[p,a]=(0,A.useState)(),i=(0,Ht.useId)(e),m=(0,A.useCallback)(y=>{var E;y.key==="Escape"&&((E=o.current)==null||E.call(o))},[]);o.current=(0,A.useCallback)(()=>{a(void 0),document.removeEventListener("keydown",m)},[m]);let l=(0,A.useCallback)(()=>{window.clearTimeout(u.current)},[]),c=(0,A.useCallback)(()=>{var y;(y=o.current)==null||y.call(o)},[]),f=(0,A.useCallback)(()=>{let{current:y}=r;y&&(a({anchorElement:r,children:n,id:`${i}-tooltip`,onMouseEnter:l,onMouseLeave:c,placement:t}),document.addEventListener("keydown",m)),s.current=void 0},[m,l,c,i,t,n]),v=(0,A.useCallback)(y=>{let E=y.target;E&&(r.current=E,s.current=window.setTimeout(f,800))},[f]),b=(0,A.useCallback)(()=>{r.current&&(s.current?(window.clearTimeout(s.current),s.current=void 0):o.current&&(u.current=window.setTimeout(o.current,200)))},[]);return{anchorProps:{"aria-describedby":`${i}-tooltip`,onMouseEnter:v,onMouseLeave:b},tooltipProps:p}};
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ContextMenu: () => ContextMenu,
+  ContextMenuContext: () => ContextMenuContext,
+  ContextMenuProvider: () => ContextMenuProvider,
+  Dialog: () => Dialog,
+  DialogHeader: () => DialogHeader,
+  DialogService: () => DialogService,
+  MenuItem: () => MenuItem,
+  MenuItemGroup: () => MenuItemGroup,
+  MenuList: () => MenuList,
+  NotificationLevel: () => NotificationLevel,
+  NotificationsContext: () => NotificationsContext,
+  NotificationsProvider: () => NotificationsProvider,
+  PopupComponent: () => PopupComponent,
+  PopupMenu: () => PopupMenu,
+  PopupService: () => PopupService,
+  Portal: () => Portal,
+  Prompt: () => Prompt,
+  Separator: () => Separator,
+  ToastNotification: () => ToastNotification,
+  Tooltip: () => Tooltip,
+  createContainer: () => createContainer,
+  isMenuItemLabel: () => isMenuItemLabel,
+  reasonIsClickAway: () => reasonIsClickAway,
+  reasonIsMenuAction: () => reasonIsMenuAction,
+  renderPortal: () => renderPortal,
+  useAnchoredPosition: () => useAnchoredPosition,
+  useContextMenu: () => useContextMenu,
+  useNotifications: () => useNotifications,
+  useTooltip: () => useTooltip
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/dialog/Dialog.tsx
+var import_lab = require("@salt-ds/lab");
+var import_classnames2 = __toESM(require("classnames"));
+var import_react2 = require("react");
+
+// src/portal/Portal.tsx
+var import_vuu_shell = require("@vuu-ui/vuu-shell");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+}
+var DEFAULT_ID = "vuu-portal-root";
+var Portal = ({
+  children,
+  container: containerProp = document.body,
+  id = DEFAULT_ID,
+  onRender,
+  open = true,
+  themeAttributes
+}) => {
+  var _a;
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const portalRef = (0, import_react.useRef)(null);
+  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell.useThemeAttributes)(themeAttributes);
+  (0, import_react.useLayoutEffect)(() => {
+    const root = document.getElementById(id);
+    if (root) {
+      portalRef.current = root;
+    } else {
+      portalRef.current = document.createElement("div");
+      portalRef.current.id = id;
+    }
+    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]);
+  (0, import_react.useLayoutEffect)(() => {
+    requestAnimationFrame(() => {
+      onRender == null ? void 0 : onRender();
+    });
+  }, [onRender]);
+  if (open && mounted && portalRef.current && children) {
+    return (0, import_react_dom.createPortal)(children, portalRef.current);
+  }
+  return null;
+};
+
+// src/dialog-header/DialogHeader.tsx
+var import_core = require("@salt-ds/core");
+var import_classnames = __toESM(require("classnames"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var classBase = "vuuDialogHeader";
+var DialogHeader = ({
+  hideCloseButton = false,
+  title,
+  onClose,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames.default)(classBase, "vuuToolbarProxy"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { className: "dialogHeader", children: title }),
+    !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.Button,
+      {
+        onClick: onClose,
+        "data-align": "end",
+        "data-icon": "close",
+        variant: "secondary"
+      },
+      "close"
+    )
+  ] });
+};
+
+// src/dialog/Dialog.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var classBase2 = "vuuDialog";
+var Dialog = ({
+  children,
+  className,
+  isOpen = false,
+  onClose,
+  title,
+  hideCloseButton = false,
+  ...props
+}) => {
+  const root = (0, import_react2.useRef)(null);
+  const close = (0, import_react2.useCallback)(() => {
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lab.Scrim, { className: `${classBase2}-scrim`, open: isOpen, autoFocusRef: root, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ...props, className: (0, import_classnames2.default)(classBase2, className), ref: root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      DialogHeader,
+      {
+        hideCloseButton,
+        onClose: close,
+        title
+      }
+    ),
+    children
+  ] }) }) });
+};
+
+// src/menu/ContextMenu.tsx
+var import_react7 = require("react");
+
+// src/menu/MenuList.tsx
+var import_react5 = __toESM(require("react"));
+var import_classnames3 = __toESM(require("classnames"));
+var import_vuu_layout = require("@vuu-ui/vuu-layout");
+
+// src/menu/use-keyboard-navigation.ts
+var import_react3 = require("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
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
+var useKeyboardNavigation = ({
+  autoHighlightFirstItem = false,
+  count,
+  defaultHighlightedIdx,
+  highlightedIndex: highlightedIndexProp,
+  onActivate,
+  onHighlight,
+  // onKeyDown,
+  onCloseMenu,
+  onOpenMenu
+}) => {
+  var _a;
+  if ((0, import_vuu_utils.isValidNumber)(highlightedIndexProp) && (0, import_vuu_utils.isValidNumber)(defaultHighlightedIdx)) {
+    throw Error(
+      "useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx"
+    );
+  }
+  const controlledHighlighting = (0, import_vuu_utils.isValidNumber)(highlightedIndexProp);
+  const highlightedIndexRef = (0, import_react3.useRef)(
+    (_a = defaultHighlightedIdx != null ? defaultHighlightedIdx : highlightedIndexProp) != null ? _a : autoHighlightFirstItem ? 0 : -1
+  );
+  const [, forceRender] = (0, import_react3.useState)(null);
+  const setHighlightedIdx = (0, import_react3.useCallback)(
+    (idx) => {
+      highlightedIndexRef.current = idx;
+      onHighlight == null ? void 0 : onHighlight(idx);
+      forceRender({});
+    },
+    [onHighlight]
+  );
+  const setHighlightedIndex = (0, import_react3.useCallback)(
+    (idx) => {
+      if (idx !== highlightedIndexRef.current) {
+        if (!controlledHighlighting) {
+          setHighlightedIdx(idx);
+        }
+      }
+    },
+    [controlledHighlighting, setHighlightedIdx]
+  );
+  const keyBoardNavigation = (0, import_react3.useRef)(true);
+  const ignoreFocus = (0, import_react3.useRef)(false);
+  const setIgnoreFocus = (value) => ignoreFocus.current = value;
+  const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
+  const navigateChildldItems = (0, import_react3.useCallback)(
+    (e) => {
+      const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
+      if (nextIdx !== highlightedIndexRef.current) {
+        setHighlightedIndex(nextIdx);
+      }
+    },
+    [count, setHighlightedIndex]
+  );
+  const handleKeyDown = (0, import_react3.useCallback)(
+    (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(highlightedIndex);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        onActivate && onActivate(highlightedIndex);
+      } else if (e.key === "Tab") {
+        onCloseMenu(-1);
+      }
+    },
+    [
+      highlightedIndex,
+      navigateChildldItems,
+      onActivate,
+      onCloseMenu,
+      onOpenMenu
+    ]
+  );
+  const listProps = (0, import_react3.useMemo)(
+    () => ({
+      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/use-items-with-ids-next.ts
+var import_react4 = __toESM(require("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: import_react4.default.cloneElement(child, {
+      hasSeparator,
+      id: `${path}`,
+      key: path,
+      children: group ? getLabelFromChildren(children) : children
+    }),
+    grandChildren: group ? children : void 0
+  };
+};
+var useItemsWithIdsNext = (childrenProp, rootId) => {
+  const normalizeChildren = (0, import_react4.useCallback)(() => {
+    const collectChildren = (children, path = rootId, menus2 = {}, actions2 = {}) => {
+      const list = menus2[path] = [];
+      let idx = 0;
+      let hasSeparator = false;
+      import_react4.default.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] = (0, import_react4.useMemo)(
+    () => normalizeChildren(),
+    [normalizeChildren]
+  );
+  return [menus, actions];
+};
+
+// src/menu/MenuList.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var classBase3 = "vuuMenuList";
+var Separator = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "vuuMenuItem-divider" });
+var MenuItemGroup = () => null;
+var MenuItem = ({
+  children,
+  idx,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...props, children });
+};
+var MenuItemLabel = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+MenuItemLabel.displayName = "MenuItemLabel";
+MenuItem.Label = MenuItemLabel;
+var getDisplayName = (item) => import_react5.default.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 = (0, import_vuu_layout.useId)(idProp);
+  const root = (0, import_react5.useRef)(null);
+  const mapIdxToId = (0, import_react5.useMemo)(() => /* @__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: import_react5.default.Children.count(children),
+    defaultHighlightedIdx,
+    highlightedIndex: highlightedIdxProp,
+    onActivate: handleActivate,
+    onHighlight: onHighlightMenuItem,
+    onOpenMenu,
+    onCloseMenu
+  });
+  const appliedFocusVisible = childMenuShowing == void 0 ? focusVisible : -1;
+  (0, import_react5.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime3.jsx)(
+        "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;
+      list.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          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,
+            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__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ...props,
+      ...listProps,
+      "aria-activedescendant": getActiveDescendant(),
+      className: (0, import_classnames3.default)(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,
+  "data-highlighted": idx === highlightedIdx || void 0,
+  className: (0, import_classnames3.default)("vuuMenuItem", className, {
+    "vuuMenuItem-separator": hasSeparator,
+    focusVisible: focusVisible === idx
+  })
+});
+MenuList.displayName = "MenuList";
+
+// src/menu/use-cascade.ts
+var import_react6 = require("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) => {
+  console.log(`getHostMenuId from ${id} and ${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] = (0, import_react6.useState)({});
+  const openMenus = (0, import_react6.useRef)([
+    { id: rootId, left: posX, top: posY }
+  ]);
+  const menuIsOpen = (0, import_react6.useCallback)(
+    (menuId) => openMenus.current.findIndex((menu) => menu.id === menuId) !== -1,
+    []
+  );
+  const getOpenMenuStatus = (0, import_react6.useCallback)((menuId) => {
+    const state = menuState.current[menuId];
+    if (state === void 0) {
+      throw Error(`getOpenMenuState no entry for menu ${menuId}`);
+    }
+    return state;
+  }, []);
+  const setOpenMenus = (0, import_react6.useCallback)((menus) => {
+    console.log(`setOpenMenus`, {
+      menus
+    });
+    openMenus.current = menus;
+    forceRefresh({});
+  }, []);
+  const menuOpenPendingTimeout = (0, import_react6.useRef)();
+  const menuClosePendingTimeout = (0, import_react6.useRef)();
+  const menuState = (0, import_react6.useRef)({ [rootId]: "no-popup" });
+  const openMenu = (0, import_react6.useCallback)(
+    (hostMenuId = rootId, targetMenuId, itemId = null) => {
+      console.log(
+        `open menu hostMenuId ${hostMenuId} targetMenuId ${targetMenuId} itemId ${itemId}`
+      );
+      if (hostMenuId === rootId && itemId === null) {
+        setOpenMenus([{ id: rootId, left: posX, top: posY }]);
+      } else {
+        console.log(`openMenu set ${hostMenuId} status to popup-open`);
+        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 = (0, import_react6.useCallback)(
+    (menuId) => {
+      console.log(`closeMenu ${menuId}`);
+      if (menuId === rootId) {
+        console.log("close child menu of root");
+        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";
+        }
+        console.log(`closeMenu setOpenMenus`, {
+          menus
+        });
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const closeMenus = (0, import_react6.useCallback)(
+    (menuItemId) => {
+      console.log(`closeMenus ${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);
+        console.log(
+          `parentMenuId of lastMenuId ${lastMenuId} and rootId ${rootId} is ${parentMenuId}`
+        );
+        menus.pop();
+        console.log(
+          `set state to no-popup for ${lastMenuId} and ${parentMenuId}`
+        );
+        menuState.current[lastMenuId] = "no-popup";
+        menuState.current[parentMenuId] = "no-popup";
+        ({ id: lastMenuId } = menus[menus.length - 1]);
+      }
+      if (menus.length < openMenus.current.length) {
+        console.log(`closeMenus setOpenMenus`, {
+          menus
+        });
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const clearAnyScheduledOpenTasks = (0, import_react6.useCallback)(() => {
+    if (menuOpenPendingTimeout.current) {
+      clearTimeout(menuOpenPendingTimeout.current);
+      menuOpenPendingTimeout.current = void 0;
+    }
+  }, []);
+  const scheduleOpen = (0, import_react6.useCallback)(
+    (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 = (0, import_react6.useCallback)(
+    (hostMenuId, openMenuId, itemId) => {
+      menuState.current[openMenuId] = "pending-close";
+      menuClosePendingTimeout.current = window.setTimeout(() => {
+        closeMenus(itemId);
+      }, 400);
+    },
+    [closeMenus]
+  );
+  const handleRender = (0, import_react6.useCallback)(() => {
+    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();
+      }
+    } else {
+      console.log(`useCascade no element found with if ${menu == null ? void 0 : menu.id}`);
+    }
+  }, [rootId, setOpenMenus]);
+  const triggerChildMenu = (0, import_react6.useCallback)(
+    (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);
+          console.log(`about to check id on `, {
+            openMenus,
+            parentOfLastOpenedMenu,
+            lastOpenedMenu
+          });
+          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 = (0, import_react6.useMemo)(
+    () => ({
+      onMouseEnter: (evt) => {
+        const menuItemEl = closestListItem(evt.target);
+        console.log(`onMouseEnter ${menuItemEl == null ? void 0 : menuItemEl.id}`);
+        triggerChildMenu(menuItemEl);
+        onMouseEnterItem(evt, menuItemEl.id);
+      },
+      onClick: (evt) => {
+        console.log("click");
+        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
+var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react8 = require("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 closeHandlerRef = (0, import_react7.useRef)(onClose);
+  closeHandlerRef.current = onClose;
+  const id = (0, import_vuu_layout2.useId)(idProp);
+  const closeMenuRef = (0, import_react7.useRef)(noop);
+  const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
+  const navigatingWithKeyboard = (0, import_react7.useRef)(activatedByKeyboard);
+  const handleMouseEnterItem = (0, import_react7.useCallback)(() => {
+    navigatingWithKeyboard.current = false;
+  }, []);
+  const handleActivate = (0, import_react7.useCallback)(
+    (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 = () => {
+    navigatingWithKeyboard.current = true;
+    closeMenu();
+  };
+  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__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
+    const childMenuId = getChildMenuId(i);
+    return /* @__PURE__ */ (0, import_react8.createElement)(Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      PopupComponent,
+      {
+        anchorElement: { current: document.body },
+        placement: "absolute",
+        position: { left, top },
+        children: /* @__PURE__ */ (0, import_react8.createElement)(
+          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
+var import_react9 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ContextMenuContext = (0, import_react9.createContext)(
+  null
+);
+var Provider = ({
+  children,
+  context,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  const menuBuilders = (0, import_react9.useMemo)(() => {
+    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 = (0, import_react9.useCallback)(
+    (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__ */ (0, import_jsx_runtime5.jsx)(
+    ContextMenuContext.Provider,
+    {
+      value: {
+        menuActionHandler: handleMenuAction,
+        menuBuilders
+      },
+      children
+    }
+  );
+};
+var ContextMenuProvider = ({
+  children,
+  label,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Provider,
+    {
+      context: parentContext,
+      label,
+      menuActionHandler,
+      menuBuilder,
+      children
+    }
+  ) });
+};
+
+// src/menu/useContextMenu.tsx
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_react12 = require("react");
+
+// src/popup/popup-service.ts
+var import_classnames5 = __toESM(require("classnames"));
+var import_react10 = __toESM(require("react"));
+var import_react_dom2 = __toESM(require("react-dom"));
+
+// src/portal-deprecated/render-portal.tsx
+var ReactDOM = __toESM(require("react-dom"));
+var import_classnames4 = __toESM(require("classnames"));
+var containerId = 1;
+var getPortalContainer = ({
+  className,
+  dataMode,
+  x = 0,
+  y = 0,
+  win = window
+}) => {
+  const el = win.document.createElement("div");
+  el.className = (0, import_classnames4.default)(`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) {
+        import_react_dom2.default.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++) {
+      import_react_dom2.default.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 PopupComponent2 = ({
+  children,
+  position,
+  style
+}) => {
+  const className = (0, import_classnames5.default)("hwPopup", "hwPopupContainer", position);
+  return (0, import_react10.createElement)("div", { className, style }, children);
+};
+var incrementingKey = 1;
+var PopupService = class {
+  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(
+      (0, import_react10.createElement)(
+        PopupComponent2,
+        { 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) {
+        import_react_dom2.default.unmountComponentAtNode(popupRoot);
+      }
+    }
+    document.removeEventListener(
+      "keydown",
+      PopupService.escapeKeyListener,
+      true
+    );
+    (_a = PopupService == null ? void 0 : PopupService.onClose) == null ? void 0 : _a.call(PopupService, reason);
+  }
+  static keepWithinThePage(el, right = "auto") {
+    const target = el.querySelector(".vuuPopupContainer > *");
+    if (target) {
+      const {
+        top,
+        left,
+        width,
+        height,
+        right: currentRight
+      } = target.getBoundingClientRect();
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      const overflowH = h - (top + height);
+      if (overflowH < 0) {
+        target.style.top = Math.round(top) + overflowH + "px";
+      }
+      const overflowW = w - (left + width);
+      if (overflowW < 0) {
+        target.style.left = Math.round(left) + overflowW + "px";
+      }
+      if (typeof right === "number" && right !== currentRight) {
+        const adjustment = right - currentRight;
+        target.style.left = left + adjustment + "px";
+      }
+    }
+  }
+};
+var DialogService = class {
+  static showDialog(dialog) {
+    const containerEl = ".vuuDialog";
+    const onClose = dialog.props.onClose;
+    dialogOpened();
+    import_react_dom2.default.render(
+      import_react10.default.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) {
+      import_react_dom2.default.unmountComponentAtNode(dialogRoot);
+    }
+  }
+};
+
+// src/popup/Popup.tsx
+var import_classnames6 = __toESM(require("classnames"));
+
+// src/popup/useAnchoredPosition.ts
+var import_react11 = require("react");
+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-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 only supported placement values are below and right"
+      );
+  }
+};
+var useAnchoredPosition = ({
+  anchorElement,
+  minWidth,
+  offsetLeft = 0,
+  offsetTop = 0,
+  placement,
+  position: positionProp
+}) => {
+  const popupRef = (0, import_react11.useRef)(null);
+  const [position, setPosition] = (0, import_react11.useState)(positionProp);
+  (0, import_react11.useLayoutEffect)(() => {
+    if (placement === "absolute" && positionProp) {
+      setPosition(positionProp);
+    } else if (anchorElement.current) {
+      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 = (0, import_react11.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
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PopupComponent = ({
+  children,
+  className,
+  anchorElement,
+  minWidth,
+  placement,
+  position: positionProp
+}) => {
+  const { popupRef, position } = useAnchoredPosition({
+    anchorElement,
+    minWidth,
+    placement,
+    position: positionProp
+  });
+  return position === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_classnames6.default)(`vuuPortal`, className), ref: popupRef, style: position, children });
+};
+
+// src/menu/useContextMenu.tsx
+var import_vuu_shell2 = require("@vuu-ui/vuu-shell");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var useContextMenu = (menuBuilder, menuActionHandler) => {
+  const ctx = (0, import_react12.useContext)(ContextMenuContext);
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell2.useThemeAttributes)();
+  const themeAttributes = (0, import_react12.useMemo)(
+    () => ({
+      themeClass,
+      densityClass,
+      dataMode
+    }),
+    [dataMode, densityClass, themeClass]
+  );
+  const buildMenuOptions = (0, import_react12.useCallback)(
+    (menuBuilders, location, options) => {
+      let results = [];
+      for (const menuBuilder2 of menuBuilders) {
+        results = results.concat(menuBuilder2(location, options));
+      }
+      return results;
+    },
+    []
+  );
+  const handleShowContextMenu = (0, import_react12.useCallback)(
+    (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 = (0, import_react12.useCallback)(() => {
+    console.log("hide context menu");
+  }, []);
+  return [handleShowContextMenu, hideContextMenu];
+};
+var NO_OPTIONS = {};
+var showContextMenuComponent = (position, contextMenu) => {
+  PopupService.showPopup({
+    focus: true,
+    left: 0,
+    top: 0,
+    component: (0, import_react12.cloneElement)(contextMenu, { position })
+  });
+};
+var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
+  position: positionProp,
+  ...contextMenuProps
+} = NO_OPTIONS) => {
+  const menuItems = (menuDescriptors2) => {
+    const fromDescriptor = (menuItem, i) => (0, import_vuu_utils2.isGroupMenuItemDescriptor)(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      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)) {
+      handleContextMenuAction(reason);
+      PopupService.hidePopup();
+    }
+    (_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__ */ (0, import_jsx_runtime7.jsx)(
+    ContextMenu,
+    {
+      ...contextMenuProps,
+      onClose: handleClose,
+      position,
+      children: menuItems(menuDescriptors)
+    }
+  );
+  PopupService.showPopup({ left: 0, top: 0, component, focus: true });
+};
+
+// src/popup-menu/PopupMenu.tsx
+var import_react13 = require("react");
+var import_classnames7 = __toESM(require("classnames"));
+var import_core2 = require("@salt-ds/core");
+var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase4 = "vuuPopupMenu";
+var getPosition2 = (element) => {
+  if (element) {
+    const { bottom, left } = element.getBoundingClientRect();
+    return { x: left, y: bottom + 6 };
+  }
+};
+var PopupMenu = ({
+  className,
+  label,
+  icon = label ? "chevron-down" : "more-vert",
+  id: idProp,
+  menuActionHandler,
+  menuBuilder,
+  menuLocation = "header",
+  menuOptions,
+  onMenuClose,
+  tabIndex = 0,
+  ...htmlAttributes
+}) => {
+  const rootRef = (0, import_react13.useRef)(null);
+  const suppressShowMenuRef = (0, import_react13.useRef)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react13.useState)(false);
+  const id = (0, import_vuu_layout3.useId)(idProp);
+  const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
+  const handleOpenMenu = (0, import_react13.useCallback)((el) => {
+    console.log(`menu Open `, {
+      el
+    });
+  }, []);
+  const handleMenuClose = (0, import_react13.useCallback)(
+    (reason) => {
+      setMenuOpen(false);
+      if (reasonIsClickAway(reason)) {
+        const target = reason.mouseEvt.target;
+        if (target === rootRef.current) {
+          suppressShowMenuRef.current = true;
+        }
+      } else {
+        requestAnimationFrame(() => {
+          var _a;
+          onMenuClose == null ? void 0 : onMenuClose(reason);
+          if (tabIndex !== -1) {
+            (_a = rootRef.current) == null ? void 0 : _a.focus();
+          }
+        });
+      }
+    },
+    [onMenuClose, tabIndex]
+  );
+  const showMenu = (0, import_react13.useCallback)(
+    (e) => {
+      if (suppressShowMenuRef.current) {
+        suppressShowMenuRef.current = false;
+      } else {
+        setMenuOpen(true);
+        showContextMenu2(e, menuLocation, {
+          ContextMenuProps: {
+            id: `${id}-menu`,
+            onClose: handleMenuClose,
+            openMenu: handleOpenMenu,
+            position: getPosition2(rootRef.current)
+          },
+          ...menuOptions
+        });
+      }
+    },
+    [
+      handleMenuClose,
+      handleOpenMenu,
+      id,
+      menuLocation,
+      menuOptions,
+      showContextMenu2
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_core2.Button,
+    {
+      ...htmlAttributes,
+      "aria-controls": `${id}-menu-root`,
+      "aria-expanded": menuOpen,
+      "aria-haspopup": "menu",
+      className: (0, import_classnames7.default)(classBase4, className, {
+        [`${classBase4}-withCaption`]: label !== void 0,
+        [`${classBase4}-open`]: menuOpen
+      }),
+      "data-icon": icon,
+      id,
+      onClick: showMenu,
+      ref: rootRef,
+      tabIndex,
+      variant: "secondary",
+      children: label
+    }
+  );
+};
+
+// src/prompt/Prompt.tsx
+var import_vuu_shell3 = require("@vuu-ui/vuu-shell");
+var import_core3 = require("@salt-ds/core");
+var import_classnames8 = __toESM(require("classnames"));
+var import_react14 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase5 = "vuuPrompt";
+var AnchorBody = { current: document.body };
+var EMPTY_PROPS = {};
+var Prompt = ({
+  PopupProps = EMPTY_PROPS,
+  cancelButtonLabel = "Cancel",
+  confirmButtonLabel = "Confirm",
+  icon,
+  onCancel,
+  onConfirm,
+  style,
+  text,
+  title,
+  variant = "info",
+  ...htmlAttributes
+}) => {
+  const {
+    anchorElement = AnchorBody,
+    offsetLeft = 0,
+    offsetTop = 0,
+    placement = "below"
+  } = PopupProps;
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell3.useThemeAttributes)();
+  const { position } = useAnchoredPosition({
+    anchorElement,
+    offsetLeft,
+    offsetTop,
+    placement
+  });
+  const rootRef = (0, import_react14.useRef)(null);
+  const confirmRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime9.jsx)(
+    "dialog",
+    {
+      ...htmlAttributes,
+      className: (0, import_classnames8.default)(classBase5, `${classBase5}-${variant}`, themeClass),
+      "data-mode": dataMode,
+      ref: rootRef,
+      style: { ...style, ...position },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { className: `${classBase5}-form`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${classBase5}-header`, "data-icon": icon, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${classBase5}-text`, children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${classBase5}-buttonBar`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.Button, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.Button, { onClick: onConfirm, ref: confirmRef, value: "default", children: confirmButtonLabel })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/tooltip/useAnchoredPosition.ts
+var import_react15 = require("react");
+var getPositionRelativeToAnchor2 = (anchorElement, placement, offsetLeft, offsetTop) => {
+  const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
+  const midX = left + width / 2;
+  const midY = top + height / 2;
+  switch (placement) {
+    case "above":
+      return { left: midX + offsetLeft, top: top + offsetTop };
+    case "below":
+      return { left: midX + offsetLeft, top: bottom + offsetTop };
+    case "right":
+      return { left: right + offsetLeft, top: midY + offsetLeft };
+    case "left":
+      return { left: left + offsetLeft, top: midY + offsetLeft };
+    default:
+      throw Error(
+        "Tooltip getPositionRelativeToAnchor only supported placement values are left, right, below and right"
+      );
+  }
+};
+var useAnchoredPosition2 = ({
+  anchorElement,
+  offsetLeft = 0,
+  offsetTop = 0,
+  placement
+}) => {
+  const [position, setPosition] = (0, import_react15.useState)();
+  (0, import_react15.useLayoutEffect)(() => {
+    if (anchorElement.current) {
+      const position2 = getPositionRelativeToAnchor2(
+        anchorElement.current,
+        placement,
+        offsetLeft,
+        offsetTop
+      );
+      setPosition(position2);
+    }
+  }, [anchorElement, offsetLeft, offsetTop, placement]);
+  return position;
+};
+
+// src/tooltip/Tooltip.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase6 = "vuuTooltip";
+var Tooltip = ({
+  anchorElement,
+  children,
+  id,
+  onMouseEnter,
+  onMouseLeave,
+  placement
+}) => {
+  const position = useAnchoredPosition2({ anchorElement, placement });
+  if (position === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      className: classBase6,
+      "data-align": placement,
+      id,
+      style: position,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "span",
+        {
+          className: `${classBase6}-content`,
+          onMouseEnter,
+          onMouseLeave,
+          children
+        }
+      )
+    }
+  ) });
+};
+
+// src/tooltip/useTooltip.ts
+var import_react16 = require("react");
+var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
+var useTooltip = ({
+  id: idProp,
+  placement = "right",
+  tooltipContent
+}) => {
+  const hideTooltipRef = (0, import_react16.useRef)();
+  const anchorElementRef = (0, import_react16.useRef)(null);
+  const mouseEnterTimerRef = (0, import_react16.useRef)();
+  const mouseLeaveTimerRef = (0, import_react16.useRef)();
+  const [tooltipProps, setTooltipProps] = (0, import_react16.useState)();
+  const id = (0, import_vuu_layout4.useId)(idProp);
+  const escapeListener = (0, import_react16.useCallback)((evt) => {
+    var _a;
+    if (evt.key === "Escape") {
+      (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
+    }
+  }, []);
+  hideTooltipRef.current = (0, import_react16.useCallback)(() => {
+    setTooltipProps(void 0);
+    document.removeEventListener("keydown", escapeListener);
+  }, [escapeListener]);
+  const handleMouseEnterTooltip = (0, import_react16.useCallback)(() => {
+    window.clearTimeout(mouseLeaveTimerRef.current);
+  }, []);
+  const handleMouseLeaveTooltip = (0, import_react16.useCallback)(() => {
+    var _a;
+    (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
+  }, []);
+  const showTooltip = (0, import_react16.useCallback)(() => {
+    const { current: anchorEl } = anchorElementRef;
+    if (anchorEl) {
+      setTooltipProps({
+        anchorElement: anchorElementRef,
+        children: tooltipContent,
+        id: `${id}-tooltip`,
+        onMouseEnter: handleMouseEnterTooltip,
+        onMouseLeave: handleMouseLeaveTooltip,
+        placement
+      });
+      document.addEventListener("keydown", escapeListener);
+    }
+    mouseEnterTimerRef.current = void 0;
+  }, [
+    escapeListener,
+    handleMouseEnterTooltip,
+    handleMouseLeaveTooltip,
+    id,
+    placement,
+    tooltipContent
+  ]);
+  const handleMouseEnter = (0, import_react16.useCallback)(
+    (evt) => {
+      const el = evt.target;
+      if (el) {
+        anchorElementRef.current = el;
+        mouseEnterTimerRef.current = window.setTimeout(showTooltip, 800);
+      }
+    },
+    [showTooltip]
+  );
+  const handleMouseLeave = (0, import_react16.useCallback)(() => {
+    if (anchorElementRef.current)
+      if (mouseEnterTimerRef.current) {
+        window.clearTimeout(mouseEnterTimerRef.current);
+        mouseEnterTimerRef.current = void 0;
+      } else {
+        if (hideTooltipRef.current) {
+          mouseLeaveTimerRef.current = window.setTimeout(
+            hideTooltipRef.current,
+            200
+          );
+        }
+      }
+  }, []);
+  const anchorProps = {
+    "aria-describedby": `${id}-tooltip`,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  };
+  return {
+    anchorProps,
+    tooltipProps
+  };
+};
+
+// src/notifications/NotificationsProvider.tsx
+var import_react17 = __toESM(require("react"));
+var import_classnames9 = __toESM(require("classnames"));
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var toastDisplayDuration = 6e3;
+var horizontalTransitionDuration = 1e3;
+var verticalTransitionDuration = 300;
+var toastHeight = 56;
+var toastWidth = 300;
+var toastContainerContentGap = 10;
+var toastContainerLeftPadding = 10;
+var toastContainerRightPadding = 50;
+var classBase7 = "vuuToastNotifications";
+var NotificationLevel = /* @__PURE__ */ ((NotificationLevel2) => {
+  NotificationLevel2["Info"] = "info";
+  NotificationLevel2["Success"] = "success";
+  NotificationLevel2["Warning"] = "warning";
+  NotificationLevel2["Error"] = "error";
+  return NotificationLevel2;
+})(NotificationLevel || {});
+var NotificationsContext = import_react17.default.createContext({
+  notify: () => "have you forgotten to provide a NotificationProvider?"
+});
+var NotificationsProvider = (props) => {
+  const [notifications, setNotifications] = (0, import_react17.useState)([]);
+  const notify = (0, import_react17.useCallback)((notification) => {
+    const newNotification = { ...notification, id: (0, import_vuu_utils3.getUniqueId)() };
+    setNotifications((prev) => [...prev, newNotification]);
+    setTimeout(() => {
+      setNotifications((prev) => prev.filter((n) => n !== newNotification));
+    }, toastDisplayDuration + horizontalTransitionDuration * 2);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(NotificationsContext.Provider, { value: { notify }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        className: `${classBase7}-toastContainer`,
+        style: {
+          width: toastWidth + toastContainerRightPadding + toastContainerLeftPadding
+        },
+        children: notifications.map((notification, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ToastNotification,
+          {
+            top: (toastHeight + toastContainerContentGap) * i,
+            notification
+          },
+          notification.id
+        ))
+      }
+    ),
+    props.children
+  ] });
+};
+var useNotifications = () => (0, import_react17.useContext)(NotificationsContext);
+var ToastNotification = (props) => {
+  const { top, notification, animated = true } = props;
+  const [right, setRight] = (0, import_react17.useState)(-toastWidth - toastContainerRightPadding);
+  (0, import_react17.useEffect)(() => {
+    setRight(toastContainerRightPadding);
+    if (animated) {
+      setTimeout(
+        () => setRight(-toastWidth - toastContainerRightPadding),
+        toastDisplayDuration + horizontalTransitionDuration
+      );
+    }
+  }, [animated]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames9.default)(`${classBase7}-toast`, notification.type),
+      style: {
+        height: toastHeight,
+        right,
+        width: toastWidth,
+        top,
+        transition: animated ? `right ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: (0, import_classnames9.default)(
+              `${classBase7}-toastIcon`,
+              `${notification.type}-icon`
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase7}-toastContent`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { className: `${classBase7}-toastHeader`, children: notification.header }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: notification.body })
+        ] })
+      ]
+    }
+  );
+};
 //# sourceMappingURL=index.js.map