@vuu-ui/vuu-popups 0.5.6 → 0.5.17

package/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var tt=Object.create;var te=Object.defineProperty;var ot=Object.getOwnPropertyDescriptor;var nt=Object.getOwnPropertyNames;var rt=Object.getPrototypeOf,st=Object.prototype.hasOwnProperty;var ct=(e,t)=>{for(var o in t)te(e,o,{get:t[o],enumerable:!0})},Me=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of nt(t))!st.call(e,r)&&r!==o&&te(e,r,{get:()=>t[r],enumerable:!(n=ot(t,r))||n.enumerable});return e};var N=(e,t,o)=>(o=e!=null?tt(rt(e)):{},Me(t||!e||!e.__esModule?te(o,"default",{value:e,enumerable:!0}):o,e)),ut=e=>Me(te({},"__esModule",{value:!0}),e);var Bt={};ct(Bt,{ContextMenu:()=>ce,ContextMenuContext:()=>ie,ContextMenuProvider:()=>qt,Dialog:()=>dt,DialogService:()=>ee,MenuItem:()=>re,MenuItemGroup:()=>Z,Popup:()=>Nt,PopupService:()=>S,Portal:()=>Q,Separator:()=>fe,createContainer:()=>ae,installTheme:()=>pt,renderPortal:()=>Y,useContextMenu:()=>Kt});module.exports=ut(Bt);var F=require("react"),be=N(require("classnames"));var J=require("react"),Pe=N(require("react-dom"));var we=N(require("react-dom")),Ce=require("@salt-ds/core"),ve=require("react/jsx-runtime"),it=1,lt=(e=0,t=0,o=window)=>{let n=o.document.createElement("div");return n.className="vuuPopup "+it++,n.style.cssText=`left:${e}px; top:${t}px;`,o.document.body.appendChild(n),n},at=(e,t)=>lt(e,t),Y=(e,t,o,n,r)=>{t.style.cssText=`left:${o}px; top:${n}px;position: absolute;`,we.render((0,ve.jsx)(Ce.SaltProvider,{applyClassesTo:"child",children:e}),t,r)},ae=at;var Q=function({children:t,x:o=0,y:n=0,onRender:r}){let c=(0,J.useMemo)(()=>ae(),[]);return(0,J.useLayoutEffect)(()=>{Y(t,c,o,n,r)},[t,r,c,o,n]),(0,J.useLayoutEffect)(()=>()=>{var a;c&&(Pe.unmountComponentAtNode(c),c.classList.contains("vuuPopup")&&((a=c.parentElement)==null||a.removeChild(c)))},[c]),null};var pt=e=>{let t=getComputedStyle(document.body).getPropertyValue("--installed-themes");document.body.style.setProperty("--installed-themes",`${t} ${e}`)};var Ee=require("@heswell/salt-lab"),Re=require("@salt-ds/core"),oe=require("@heswell/salt-lab");var K=require("react/jsx-runtime"),pe="vuuDialog",dt=({children:e,className:t,isOpen:o=!1,onClose:n,title:r,...c})=>{let a=(0,F.useRef)(null),[l,u]=(0,F.useState)(0),[p,d]=(0,F.useState)(0),g=(0,F.useCallback)(()=>{n==null||n()},[n]),m=(0,F.useCallback)(()=>{},[]);return o?(0,K.jsx)(Q,{onRender:m,x:l,y:p,children:(0,K.jsx)(Ee.Scrim,{className:`${pe}-scrim`,open:o,children:(0,K.jsxs)("div",{...c,className:(0,be.default)(pe,t),ref:a,children:[(0,K.jsxs)(oe.Toolbar,{className:`${pe}-header`,children:[(0,K.jsx)(Re.Text,{children:r}),(0,K.jsx)(oe.ToolbarButton,{onClick:g,"data-align-end":!0,"data-icon":"close"},"close")]}),e]})})}):null};var Ue=require("@salt-ds/core"),B=require("react");var z=require("react"),me=N(require("classnames")),Oe=require("@salt-ds/core");var O=require("react");var ke=e=>e.closest("[data-root='true']")!==null,$e=(e,t)=>{var o;return e.ariaHasPopup==="true"&&((o=e.dataset)==null?void 0:o.idx)===`${t}`||e.querySelector(`:scope > [data-idx='${t}'][aria-haspopup='true']`)!==null};var ne=(e,t,...o)=>{let n=()=>{var r,c;return(c=o==null?void 0:(r=o[0]).isPropagationStopped)==null?void 0:c.call(r)};if(e.length>0&&!n()){let r=e.filter(c=>c[t]).map(c=>c[t]);for(let c of r){if(n())break;c(...o)}}};function ft(e,...t){let o=new Set(e);for(let n of t)for(let r of n)o.add(r);return o}var mt="Enter";var gt="Delete",ht=new Set([mt,gt]),xt=new Set(["Tab"]),yt=new Set(["ArrowRight","ArrowLeft"]),Ae=new Set(["Home","End","ArrowDown","ArrowUp"]),Le=new Set(["Home","End","ArrowRight","ArrowLeft"]),It=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),lo=ft(ht,Le,Ae,yt,It,xt);var Se=({key:e},t="vertical")=>(t==="vertical"?Ae:Le).has(e);var Te=({autoHighlightFirstItem:e=!1,count:t,highlightedIdx:o,onActivate:n,onHighlight:r,onKeyDown:c,onCloseMenu:a,onOpenMenu:l},...u)=>{let p=(0,O.useRef)((o!=null?o:e)?0:-1),[,d]=(0,O.useState)(null),g=o!==void 0,m=(0,O.useCallback)(s=>{p.current=s,r&&r(s),ne(u,"onHighlight",s),d({})},[u,r]),y=(0,O.useRef)(!0),h=(0,O.useRef)(!1),x=s=>h.current=s,b=(0,O.useCallback)(s=>{s!==p.current&&(g||m(s))},[g,m]),P=g?o:p.current,$={onFocus:()=>{P===-1&&m(0)},onKeyDown:s=>{if(Se(s)?(s.preventDefault(),s.stopPropagation(),y.current=!0,f(s)):(s.key==="ArrowRight"||s.key==="Enter")&&$e(s.target,P)?l(P):s.key==="ArrowLeft"&&!ke(s.target)?a(P):s.key==="Enter"&&n&&n(P),Array.isArray(c))for(let i of c){if(s.isPropagationStopped())break;i(s)}else c&&!s.isPropagationStopped()&&c(s);ne(u,"onKeyDown",s)},onMouseDownCapture:()=>{y.current=!1,x(!0)},onMouseMove:()=>{y.current&&(y.current=!1)},onMouseLeave:()=>{y.current=!0,x(!1),b(-1)}},f=s=>{let i=Mt(t,s.key,p.current);i!==p.current&&(b(i),ne(u,"onKeyboardNavigation",s,i))};return{focusVisible:y.current?P:-1,controlledHighlighting:g,highlightedIdx:P,hiliteItemAtIndex:b,keyBoardNavigation:y,listProps:$,setIgnoreFocus:x}};function Mt(e,t,o){return t==="Up"?o>0?o-1:o:o===null?0:o===e-1?o:o+1}var q=N(require("react"));var de=e=>e.type===Z||!!e.props["data-group"],De=(e,t)=>{let o=(0,q.useCallback)(()=>{if(t===void 0)return;let c=(l,u="root",p={},d={})=>{let g=p[u]=[],m=0,y=!1;return q.default.Children.forEach(l,h=>{if(h.type===fe)y=!0;else{let x=de(h),b=u==="root"?`${m}`:`${u}.${m}`,{props:{action:P,options:$}}=h,[f,s]=a(h,b,x,y);g.push(f),s?c(s,b,p,d):d[b]={action:P,options:$},m+=1,y=!1}}),[p,d]},a=(l,u,p,d=!1)=>{let{props:{children:g}}=l;return[q.default.cloneElement(l,{hasSeparator:d,id:`${u}`,key:u,children:p?void 0:g}),p?g:void 0]};return c(t)},[t]),[n,r]=(0,q.useMemo)(()=>o(),[o]);return[n,r]};var V=require("react/jsx-runtime"),Ne="vuuMenuList",fe=()=>(0,V.jsx)("li",{className:"vuuMenuItem-divider"}),Z=()=>null,re=({children:e,idx:t,...o})=>(0,V.jsx)("div",{...o,children:e}),wt=e=>e.props["data-icon"],He=({activatedByKeyboard:e,childMenuShowing:t=-1,children:o,className:n,highlightedIdx:r,id:c,isRoot:a,listItemProps:l,menuId:u,onHighlightMenuItem:p,onActivate:d,onCloseMenu:g,onOpenMenu:m,...y})=>{let h=(0,Oe.useIdMemo)(c),x=(0,z.useRef)(null),b=(0,z.useMemo)(()=>new Map,[]),P=R=>{let M=x.current.querySelector(`:scope > [data-idx='${R}']`);m(M.id)},$=R=>{let M=x.current.querySelector(`:scope > [data-idx='${R}']`);d(M.id)},{focusVisible:f,highlightedIdx:s,listProps:i}=Te({count:o.length,highlightedIdx:r,onActivate:$,onHighlight:p,onOpenMenu:P,onCloseMenu:g,id:h}),I=t==-1?f:-1;return(0,z.useLayoutEffect)(()=>{t===-1&&e&&x.current.focus()},[e,t]),(0,V.jsx)("div",{...y,...i,"aria-activedescendant":(()=>s===void 0||s===-1?void 0:b.get(s))(),className:(0,me.default)(Ne,n,{[`${Ne}-childMenuShowing`]:t!==-1}),"data-root":a||void 0,id:`${h}-${u}`,ref:x,role:"menu",tabIndex:0,children:T()});function T(){let R={...l,role:"menuitem"},M=(C,D,U)=>D?[(0,V.jsx)("span",{className:"vuuIconContainer","data-icon":U},"icon")].concat(C):C;function w(C,D,U,he){let{children:Ye,className:Je,"data-icon":xe,id:ye,hasSeparator:Qe,label:Ze,...je}=D.props,le=de(D),Ie=le&&t===U,et=Ie?`${h}-${ye}`:void 0;C.push((0,V.jsx)(re,{...je,...R,...Ct(`${h}-${u}`,ye,U,D.key,s,I,Je,Qe),"aria-controls":et,"aria-haspopup":le||void 0,"aria-expanded":Ie||void 0,children:M(le?Ze:Ye,he,xe)}))}let k=[];if(o&&o.length>0){let C=o.some(wt);o.forEach((D,U)=>{w(k,D,U,C)})}return k}},Ct=(e,t,o,n,r,c,a,l)=>({id:`${e}-${t}`,key:n!=null?n:o,"data-idx":o,"data-highlighted":o===r||void 0,className:(0,me.default)("vuuMenuItem",a,{"vuuMenuItem-separator":l,focusVisible:c===o})});He.displayName="MenuList";var Ke=He;var v=require("react");function Fe(e){if(e){let t=e.dataset.idx;if(t)return parseInt(t,10);if(t=e.ariaPosInSet)return parseInt(t,10)-1}}var ge=e=>e.closest("[data-idx],[aria-posinset]");var qe=(e,t,o)=>e.map((n,r)=>r===e.length-1?{...n,[o]:n[o]-t}:n),vt=(e,t)=>qe(e,t,"left"),Pt=(e,t)=>qe(e,t,"top"),bt=(e,t)=>{let[o,n]=t.slice(-2),r=document.getElementById(`${e}-${n.id}`),{width:c}=r.getBoundingClientRect();return t.map(a=>a===n?{...a,left:o.left-(c-2)}:a)},Et=e=>e.ariaHasPopup==="true"&&e.ariaExpanded!=="true",Rt=(e,t)=>{let[{left:o,top:n}]=t.slice(-1),{offsetWidth:r,offsetTop:c}=e;return{left:o+r,top:c+n}},j=e=>{let t=e.lastIndexOf("-");return t===-1?e:e.slice(t+1)},se=e=>{let t=j(e),o=t.lastIndexOf(".");return o>-1?t.slice(0,o):"root"},kt=e=>{let t=0,o=e.indexOf(".",0);for(;o!==-1;)t+=1,o=e.indexOf(".",o+1);return t},$t=e=>[se(e.id),j(e.id),e.ariaHasPopup==="true",e.ariaExpanded==="true",kt(e.id)],Be=({id:e,onActivate:t,onMouseEnterItem:o,position:{x:n,y:r}})=>{let[,c]=(0,v.useState)({}),a=(0,v.useRef)([{id:"root",left:n,top:r}]),l=(0,v.useCallback)(f=>{a.current=f,c({})},[]),u=(0,v.useRef)(null),p=(0,v.useRef)(null),d=(0,v.useRef)({root:"no-popup"}),g=(0,v.useRef)(0),m=(0,v.useCallback)((f="root",s=null,i=null)=>{if(f==="root"&&s===null)l([{id:"root",left:n,top:r}]);else{d.current[f]="popup-open";let E=(i?i.ownerDocument:document).getElementById(`${e}-${f}-${s}`),{left:T,top:R}=Rt(E,a.current);l(a.current.concat({id:s,left:T,top:R}))}},[e,n,r,l]),y=(0,v.useCallback)(f=>{l(f==="root"?[]:a.current.slice(0,-1))},[l]),h=(0,v.useCallback)((f,s)=>{let i=a.current.slice(),{id:I}=i[i.length-1];for(;i.length>1&&!s.startsWith(I);){let E=se(I);i.pop(),d.current[I]="no-popup",d.current[E]="no-popup",{id:I}=i[i.length-1]}i.length<a.current.length&&l(i)},[l]),x=(0,v.useCallback)((f,s,i)=>{u.current&&clearTimeout(u.current),u.current=setTimeout(()=>{console.log(`scheduleOpen timed out opening ${s}`),h(f,s),d.current[f]="popup-open",d.current[s]="no-popup",m(f,s,i)},400)},[h,m]),b=(0,v.useCallback)((f,s,i)=>{console.log(`scheduleClose openMenuId ${f} menuId ${s} itemId ${i}`),d.current[f]="pending-close",p.current=setTimeout(()=>{h(s,i)},400)},[h]),P=(0,v.useCallback)(()=>{let{current:f}=a,[s]=f.slice(-1),i=document.getElementById(`${e}-${s.id}`);if(i){let{right:I,bottom:E}=i.getBoundingClientRect(),{clientHeight:T,clientWidth:R}=document.body;if(I>R){let M=f.length>1?bt(e,f):vt(f,I-R);l(M)}else if(E>T){let M=Pt(f,E-T);l(M)}}},[e,l]),$=(0,v.useMemo)(()=>({onMouseEnter:f=>{let s=ge(f.target),[i,I,E,T,R]=$t(s),M=g.current===R,{current:{[i]:w}}=d;if(g.current=R,w==="no-popup"&&E)d.current[i]="popup-pending",x(i,I,s);else if(w==="popup-pending"&&!E)d.current[i]="no-popup",clearTimeout(u.current),u.current=null;else if(w==="popup-pending"&&E)clearTimeout(u.current),x(i,I,s);else if(w==="popup-open"){let[{id:k},{id:C}]=a.current.slice(-2);k===i&&d.current[C]!=="pending-close"&&M?(b(C,i,I),E&&!T&&x(i,I,s)):k===i&&E&&I!==C&&d.current[C]==="pending-close"?x(i,I,s):E?(h(i,I),x(i,I,s)):d.current[C]==="pending-close"&&M||h(i,I)}w==="pending-close"&&(u.current&&(clearTimeout(u.current),u.current=null),clearTimeout(p.current),p.current=null,d.current[i]="popup-open"),o(f,I)},onClick:f=>{let s=ge(f.target),i=Fe(s);Et(s).ariaHasPopup==="true"?s.ariaExpanded!=="true"&&m(i):t(j(s.id))}}),[h,t,o,m,b,x]);return{closeMenu:y,handleRender:P,listItemProps:$,openMenu:m,openMenus:a.current}};var We=require("react"),Ge=({containerClassName:e,isOpen:t,onClose:o})=>{(0,We.useEffect)(()=>{let n=t?r=>{r.target.closest(`.${e}`)===null&&o("root")}:null;return document.body.addEventListener("click",n,!0),()=>{n&&document.body.removeEventListener("click",n,!0)}},[e,t,o])};var X=require("react/jsx-runtime"),ce=({activatedWithKeyboard:e=!1,children:t,className:o,id:n,onClose:r=()=>{},position:c={x:0,y:0},source:a,style:l})=>{let u=(0,Ue.useIdMemo)(n),p=(0,B.useRef)(null),[d,g]=De(a,t),m=(0,B.useRef)(e),y=(0,B.useCallback)(()=>{m.current=!1},[]),h=(0,B.useCallback)(M=>{let{action:w,options:k}=g[M];p.current("root"),r(w,k)},[g,r]),{closeMenu:x,listItemProps:b,openMenu:P,openMenus:$,handleRender:f}=Be({id:u,onActivate:h,onMouseEnterItem:y,position:c});p.current=x,console.log({openMenus:$});let s=(0,B.useCallback)(()=>{x(),r()},[x,r]);Ge({containerClassName:"vuuMenuList",onClose:s,isOpen:$.length>0});let i=M=>{let w=j(M),k=se(w);m.current=!0,P(k,w)},I=()=>{m.current=!0,x()},E=()=>{},T=$.length-1,R=M=>{if(M>=T)return-1;{let{id:w}=$[M+1],k=w.lastIndexOf(".");return parseInt(k===-1?w:w.slice(-k),10)}};return(0,X.jsx)(X.Fragment,{children:$.map(({id:M,left:w,top:k},C)=>{let D=R(C);return(0,X.jsx)(Q,{x:w,y:k,onRender:f,children:(0,X.jsx)(Ke,{activatedByKeyboard:m.current,childMenuShowing:D,className:o,id:u,menuId:M,isRoot:C===0,listItemProps:b,onActivate:h,onHighlightMenuItem:E,onCloseMenu:I,onOpenMenu:i,style:l,children:d[M]},C)},C)})})};ce.displayName="ContextMenu";var H=N(require("react"));var Ve=N(require("classnames")),A=N(require("react")),_=N(require("react-dom"));window.popupReact=A.default;var W=!1,L=[];function ue(e){e.keyCode===27&&(L.length?Xe():W&&_.default.unmountComponentAtNode(document.body.querySelector(".vuuDialog")))}function ze(e){if(L.length){let t=document.body.querySelectorAll(".vuuPopup");for(let o=0;o<t.length;o++)if(t[o].contains(e.target))return;Xe()}}function Xe(){if(L.length){let e=document.body.querySelectorAll(".vuuPopup");for(let t=0;t<e.length;t++)_.default.unmountComponentAtNode(e[t]);_e("*")}}function At(){W===!1&&(W=!0,window.addEventListener("keydown",ue,!0))}function Lt(){W&&(W=!1,window.removeEventListener("keydown",ue,!0))}function St(e){L.indexOf(e)===-1&&(L.push(e),W===!1&&(window.addEventListener("keydown",ue,!0),window.addEventListener("click",ze,!0)))}function _e(e){if(L.length){if(e==="*")L.length=0;else{let t=L.indexOf(e);t!==-1&&L.splice(t,1)}L.length===0&&W===!1&&(window.removeEventListener("keydown",ue,!0),window.removeEventListener("click",ze,!0))}}var Tt=({children:e,position:t,style:o})=>{let n=(0,Ve.default)("hwPopup","hwPopupContainer",t);return(0,A.createElement)("div",{className:n,style:o},e)},Dt=1,S=class{static showPopup({name:t="anon",group:o="all",position:n="",left:r=0,right:c="auto",top:a=0,width:l="auto",component:u}){if(!u)throw Error("PopupService showPopup, no component supplied");St(t,o);let p=document.body.querySelector(".vuuPopup."+o);p===null&&(p=document.createElement("div"),p.className="vuuPopup "+o,document.body.appendChild(p));let d={width:l};Y((0,A.createElement)(Tt,{key:Dt++,position:n,style:d},u),p,r,a,()=>{S.keepWithinThePage(p,c)})}static hidePopup(t="anon",o="all"){L.indexOf(t)!==-1&&(_e(t,o),_.default.unmountComponentAtNode(document.body.querySelector(`.vuuPopup.${o}`)))}static keepWithinThePage(t,o="auto"){let n=t.querySelector(".vuuPopupContainer > *");if(n){let{top:r,left:c,width:a,height:l,right:u}=n.getBoundingClientRect(),p=window.innerWidth,g=window.innerHeight-(r+l);g<0&&(n.style.top=parseInt(r,10)+g+"px");let m=p-(c+a);if(m<0&&(n.style.left=parseInt(c,10)+m+"px"),typeof o=="number"&&o!==u){let y=o-u;n.style.left=c+y+"px"}}}},ee=class{static showDialog(t){let o=".vuuDialog",n=t.props.onClose;At(),_.default.render(A.default.cloneElement(t,{container:o,onClose:()=>{ee.closeDialog(),n&&n()}}),document.body.querySelector(o))}static closeDialog(){Lt(),_.default.unmountComponentAtNode(document.body.querySelector(".vuuDialog"))}},Nt=e=>{let t=(0,A.useRef)(null),o=(0,A.useRef)(null),n=(r,c)=>{let{name:a,group:l,depth:u,width:p}=r,d,g;if(t.current&&(clearTimeout(t.current),t.current=null),r.close===!0)S.hidePopup(a,l);else{let{position:m,children:y}=r,{left:h,top:x,width:b,bottom:P}=c;m==="below"?(d=h,g=P):m==="above"&&(d=h,g=x),t.current=setTimeout(()=>{S.showPopup({name:a,group:l,depth:u,position:m,left:d,top:g,width:p||b,component:y})},10)}};return(0,A.useEffect)(()=>{if(o.current){let c=o.current.parentElement.getBoundingClientRect();n(e,c)}return()=>{S.hidePopup(e.name,e.group)}},[e]),A.default.createElement("div",{className:"popup-proxy",ref:o})};var G=require("react/jsx-runtime"),Ot=(e,t,o)=>{let{clientX:n,clientY:r}=e,l=(0,G.jsx)(ce,{onClose:(u,p)=>{u&&(o(u,p),S.hidePopup())},position:{x:n,y:r},children:(u=>{let p=({children:d,label:g,icon:m,action:y,options:h},x)=>d?(0,G.jsx)(Z,{label:g,children:d.map(p)},x):(0,G.jsx)(re,{action:y,"data-icon":m,options:h,children:g},x);return u.map(p)})(t)});S.showPopup({left:0,top:0,component:l})},ie=H.default.createContext(null),Ht={menuItemDescriptors:[]},Kt=()=>{let{menuActionHandler:e,menuBuilders:t}=(0,H.useContext)(ie),o=(0,H.useCallback)((r,c,a)=>{let l=[];for(let u of r)l=l.concat(u(c,a));return l},[]);return(r,c,a)=>{r.stopPropagation(),r.preventDefault();let l=o(t,c,a);l.length&&Ot(r,l,e)}},Ft=({children:e,context:{menuBuilders:t,menuActionHandler:o},menuActionHandler:n,menuBuilder:r})=>{let c=(0,H.useMemo)(()=>t&&r?t.concat(r):r?[r]:t||[],[t,r]),a=(0,H.useCallback)((l,u)=>{if(n&&n(l,u)||o&&o(l,u))return!0},[o,n]);return(0,G.jsx)(ie.Provider,{value:{menuActionHandler:a,menuBuilders:c},children:e})},qt=({children:e,menuActionHandler:t,menuBuilder:o,menuItemDescriptors:n,label:r})=>(0,G.jsx)(ie.Consumer,{children:c=>(0,G.jsx)(Ft,{context:c||Ht,label:r,menuActionHandler:t,menuBuilder:o,menuItemDescriptors:n,children:e})});
+"use strict";var rt=Object.create;var oe=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var it=Object.getOwnPropertyNames;var ut=Object.getPrototypeOf,ct=Object.prototype.hasOwnProperty;var lt=(e,t)=>{for(var n in t)oe(e,n,{get:t[n],enumerable:!0})},Ce=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of it(t))!ct.call(e,r)&&r!==n&&oe(e,r,{get:()=>t[r],enumerable:!(o=st(t,r))||o.enumerable});return e};var K=(e,t,n)=>(n=e!=null?rt(ut(e)):{},Ce(t||!e||!e.__esModule?oe(n,"default",{value:e,enumerable:!0}):n,e)),at=e=>Ce(oe({},"__esModule",{value:!0}),e);var qt={};lt(qt,{ContextMenu:()=>ie,ContextMenuContext:()=>ee,ContextMenuProvider:()=>St,Dialog:()=>gt,DialogService:()=>te,MenuItem:()=>re,MenuItemGroup:()=>Z,Popup:()=>Ft,PopupService:()=>D,Portal:()=>Y,Separator:()=>ge,createContainer:()=>de,installTheme:()=>ft,isGroupMenuItem:()=>xe,renderPortal:()=>Q,useContextMenu:()=>Gt});module.exports=at(qt);var V=require("@heswell/salt-lab"),Re=require("@salt-ds/core"),He=K(require("classnames")),O=require("react");var X=require("react"),Le=K(require("react-dom"));var we=K(require("react-dom")),Ee=require("@salt-ds/core"),Pe=require("react/jsx-runtime"),pt=1,dt=(e=0,t=0,n=window)=>{let o=n.document.createElement("div");return o.className="vuuPopup "+pt++,o.style.cssText=`left:${e}px; top:${t}px;`,n.document.body.appendChild(o),o},mt=(e,t)=>dt(e,t),Q=(e,t,n,o,r)=>{t.style.cssText=`left:${n}px; top:${o}px;position: absolute;`,we.render((0,Pe.jsx)(Ee.SaltProvider,{applyClassesTo:"child",children:e}),t,r)},de=mt;var Y=function({children:t,x:n=0,y:o=0,onRender:r}){let c=(0,X.useMemo)(()=>de(),[]);return(0,X.useLayoutEffect)(()=>{Q(t,c,n,o,r)},[t,r,c,n,o]),(0,X.useLayoutEffect)(()=>()=>{var i;c&&(Le.unmountComponentAtNode(c),c.classList.contains("vuuPopup")&&((i=c.parentElement)==null||i.removeChild(c)))},[c]),null};var ft=e=>{let t=getComputedStyle(document.body).getPropertyValue("--installed-themes");document.body.style.setProperty("--installed-themes",`${t} ${e}`)};var N=require("react/jsx-runtime"),me="vuuDialog",gt=({children:e,className:t,isOpen:n=!1,onClose:o,title:r,...c})=>{let i=(0,O.useRef)(null),[u]=(0,O.useState)(0),[a]=(0,O.useState)(0),d=(0,O.useCallback)(()=>{o==null||o()},[o]),l=(0,O.useCallback)(()=>{},[]);return n?(0,N.jsx)(Y,{onRender:l,x:u,y:a,children:(0,N.jsx)(V.Scrim,{className:`${me}-scrim`,open:n,children:(0,N.jsxs)("div",{...c,className:(0,He.default)(me,t),ref:i,children:[(0,N.jsxs)(V.Toolbar,{className:`${me}-header`,children:[(0,N.jsx)(Re.Text,{children:r}),(0,N.jsx)(V.ToolbarButton,{onClick:d,"data-align-end":!0,"data-icon":"close"},"close")]}),e]})})}):null};var ze=require("@salt-ds/core"),G=require("react");var B=K(require("react")),Me=K(require("classnames")),Oe=require("@salt-ds/core");var H=require("react");var ke=e=>e.closest("[data-root='true']")!==null,Te=(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 Mt(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var ht="Enter";var xt="Delete",bt=new Set([ht,xt]),vt=new Set(["Tab"]),yt=new Set(["ArrowRight","ArrowLeft"]),De=new Set(["Home","End","ArrowDown","ArrowUp"]),Ae=new Set(["Home","End","ArrowRight","ArrowLeft"]),It=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),an=Mt(bt,Ae,De,yt,It,vt);var Se=({key:e},t="vertical")=>(t==="vertical"?De:Ae).has(e);var $e=({autoHighlightFirstItem:e=!1,count:t,highlightedIndex:n,onActivate:o,onHighlight:r,onCloseMenu:c,onOpenMenu:i})=>{let u=(0,H.useRef)((n!=null?n:e)?0:-1),[,a]=(0,H.useState)(null),d=n!==void 0,l=(0,H.useCallback)(s=>{u.current=s,r==null||r(s),a({})},[r]),h=(0,H.useCallback)(s=>{s!==u.current&&(d||l(s))},[d,l]),f=(0,H.useRef)(!0),w=(0,H.useRef)(!1),v=s=>w.current=s,g=d?n:u.current,P=(0,H.useCallback)(s=>{let m=Ct(t,s.key,u.current);m!==u.current&&h(m)},[t,h]),k=(0,H.useCallback)(s=>{Se(s)?(s.preventDefault(),s.stopPropagation(),f.current=!0,P(s)):(s.key==="ArrowRight"||s.key==="Enter")&&Te(s.target,g)?i(g):s.key==="ArrowLeft"&&!ke(s.target)?c(g):s.key==="Enter"&&o&&o(g)},[g,P,o,c,i]),R=(0,H.useMemo)(()=>({onFocus:()=>{g===-1&&l(0)},onKeyDown:k,onMouseDownCapture:()=>{f.current=!1,v(!0)},onMouseMove:()=>{f.current&&(f.current=!1)},onMouseLeave:()=>{f.current=!0,v(!1),h(-1)}}),[g,h,P,o,c,i,l]);return{focusVisible:f.current?g:-1,controlledHighlighting:d,highlightedIndex:g,setHighlightedIndex:h,listProps:R,setIgnoreFocus:v}};function Ct(e,t,n){return t==="ArrowUp"?n>0?n-1:n:n===null?0:n===e-1?n:n+1}var F=K(require("react"));var fe=e=>e.type===Z||!!e.props["data-group"],Ke=e=>{let t=(0,F.useCallback)(()=>{let r=(i,u="root",a={},d={})=>{let l=a[u]=[],h=0,f=!1;return F.default.Children.forEach(i,w=>{if(w.type===ge)f=!0;else{let v=fe(w),g=u==="root"?`${h}`:`${u}.${h}`,{props:{action:P,options:k}}=w,{childWithId:R,grandChildren:s}=c(w,g,v,f);l.push(R),s?r(s,g,a,d):d[g]={action:P,options:k},h+=1,f=!1}}),[a,d]},c=(i,u,a,d=!1)=>{let{props:{children:l}}=i;return{childWithId:F.default.cloneElement(i,{hasSeparator:d,id:`${u}`,key:u,children:a?void 0:l}),grandChildren:a?l:void 0}};return r(e)},[e]),[n,o]=(0,F.useMemo)(()=>t(),[t]);return[n,o]};var U=require("react/jsx-runtime"),Ne="vuuMenuList",ge=()=>(0,U.jsx)("li",{className:"vuuMenuItem-divider"}),Z=()=>null,re=({children:e,idx:t,...n})=>(0,U.jsx)("div",{...n,children:e}),wt=e=>e.props["data-icon"],Be=({activatedByKeyboard:e,childMenuShowing:t=-1,children:n,className:o,highlightedIdx:r,id:c,isRoot:i,listItemProps:u,menuId:a,onHighlightMenuItem:d,onActivate:l,onCloseMenu:h,onOpenMenu:f,...w})=>{let v=(0,Oe.useIdMemo)(c),g=(0,B.useRef)(null),P=(0,B.useMemo)(()=>new Map,[]),k=y=>{var b;let M=(b=g.current)==null?void 0:b.querySelector(`:scope > [data-idx='${y}']`);M!=null&&M.id&&(f==null||f(M.id))},R=y=>{var b;let M=(b=g.current)==null?void 0:b.querySelector(`:scope > [data-idx='${y}']`);M!=null&&M.id&&(l==null||l(M.id))},{focusVisible:s,highlightedIndex:m,listProps:p}=$e({count:B.default.Children.count(n),highlightedIndex:r,onActivate:R,onHighlight:d,onOpenMenu:k,onCloseMenu:h}),x=t==-1?s:-1;return(0,B.useLayoutEffect)(()=>{var y;t===-1&&e&&((y=g.current)==null||y.focus())},[e,t]),(0,U.jsx)("div",{...w,...p,"aria-activedescendant":(()=>m===void 0||m===-1?void 0:P.get(m))(),className:(0,Me.default)(Ne,o,{[`${Ne}-childMenuShowing`]:t!==-1}),"data-root":i||void 0,id:`${v}-${a}`,ref:g,role:"menu",tabIndex:0,children:S()});function S(){let y={...u,role:"menuitem"},M=(I,$,q)=>$?[(0,U.jsx)("span",{className:"vuuIconContainer","data-icon":q},"icon")].concat(I):I;function b(I,$,q,be){var Ie;let{children:_e,className:je,"data-icon":ve,id:ae,hasSeparator:et,label:tt,...nt}=$.props,pe=fe($),ye=pe&&t===q,ot=ye?`${v}-${ae}`:void 0;I.push((0,U.jsx)(re,{...nt,...y,...Et(`${v}-${a}`,ae,q,(Ie=$.key)!=null?Ie:ae,m,x,je,et),"aria-controls":ot,"aria-haspopup":pe||void 0,"aria-expanded":ye||void 0,children:M(pe?tt:_e,be,ve)}))}let L=[];if(n.length>0){let I=n.some(wt);n.forEach(($,q)=>{b(L,$,q,I)})}return L}},Et=(e,t,n,o,r,c,i,u)=>({id:`${e}-${t}`,key:o!=null?o:n,"data-idx":n,"data-highlighted":n===r||void 0,className:(0,Me.default)("vuuMenuItem",i,{"vuuMenuItem-separator":u,focusVisible:c===n})});Be.displayName="MenuList";var Fe=Be;var C=require("react");function Ge(e){if(e){let t=e.dataset.idx;if(t)return parseInt(t,10);if(e.ariaPosInSet)return parseInt(e.ariaPosInSet,10)-1}}var he=e=>e==null?void 0:e.closest("[data-idx],[aria-posinset]");var We=(e,t,n)=>e.map((o,r)=>r===e.length-1?{...o,[n]:o[n]-t}:o),Pt=(e,t)=>We(e,t,"left"),Lt=(e,t)=>We(e,t,"top"),Rt=(e,t)=>{let[n,o]=t.slice(-2),r=document.getElementById(`${e}-${o.id}`);if(r===null)throw Error(`useCascade.flipSides element with id ${o.id} not found`);let{width:c}=r.getBoundingClientRect();return t.map(i=>i===o?{...i,left:n.left-(c-2)}:i)},Ht=(e,t)=>{let[{left:n,top:o}]=t.slice(-1),{offsetWidth:r,offsetTop:c}=e;return{left:n+r,top:c+o}},_=e=>{let t=e.lastIndexOf("-");return t===-1?e:e.slice(t+1)},se=e=>{let t=_(e),n=t.lastIndexOf(".");return n>-1?t.slice(0,n):"root"},kt=e=>{let t=0,n=e.indexOf(".",0);for(;n!==-1;)t+=1,n=e.indexOf(".",n+1);return t},Tt=e=>({menuId:se(e.id),itemId:_(e.id),isGroup:e.ariaHasPopup==="true",isOpen:e.ariaExpanded==="true",level:kt(e.id)}),qe=({id:e,onActivate:t,onMouseEnterItem:n,position:{x:o,y:r}})=>{let[,c]=(0,C.useState)({}),i=(0,C.useRef)([{id:"root",left:o,top:r}]),u=(0,C.useCallback)(s=>{i.current=s,c({})},[]),a=(0,C.useRef)(),d=(0,C.useRef)(),l=(0,C.useRef)({root:"no-popup"}),h=(0,C.useRef)(0),f=(0,C.useCallback)((s="root",m=null,p=null)=>{if(s==="root"&&m===null)u([{id:"root",left:o,top:r}]);else{l.current[s]="popup-open";let E=(p?p.ownerDocument:document).getElementById(`${e}-${s}-${m}`),{left:S,top:y}=Ht(E,i.current);u(i.current.concat({id:m,left:S,top:y}))}},[e,o,r,u]),w=(0,C.useCallback)(s=>{u(s==="root"?[]:i.current.slice(0,-1))},[u]),v=(0,C.useCallback)((s,m)=>{let p=i.current.slice(),{id:x}=p[p.length-1];for(;p.length>1&&!m.startsWith(x);){let E=se(x);p.pop(),l.current[x]="no-popup",l.current[E]="no-popup",{id:x}=p[p.length-1]}p.length<i.current.length&&u(p)},[u]),g=(0,C.useCallback)((s,m,p)=>{a.current&&clearTimeout(a.current),a.current=window.setTimeout(()=>{console.log(`scheduleOpen timed out opening ${m}`),v(s,m),l.current[s]="popup-open",l.current[m]="no-popup",f(s,m,p)},400)},[v,f]),P=(0,C.useCallback)((s,m,p)=>{console.log(`scheduleClose openMenuId ${s} menuId ${m} itemId ${p}`),l.current[s]="pending-close",d.current=window.setTimeout(()=>{v(m,p)},400)},[v]),k=(0,C.useCallback)(()=>{let{current:s}=i,[m]=s.slice(-1),p=document.getElementById(`${e}-${m.id}`);if(p){let{right:x,bottom:E}=p.getBoundingClientRect(),{clientHeight:S,clientWidth:y}=document.body;if(x>y){let M=s.length>1?Rt(e,s):Pt(s,x-y);u(M)}else if(E>S){let M=Lt(s,E-S);u(M)}}},[e,u]),R=(0,C.useMemo)(()=>({onMouseEnter:s=>{let m=he(s.target),{menuId:p,itemId:x,isGroup:E,isOpen:S,level:y}=Tt(m),M=h.current===y,{current:{[p]:b}}=l;if(h.current=y,b==="no-popup"&&E)l.current[p]="popup-pending",g(p,x,m);else if(b==="popup-pending"&&!E)l.current[p]="no-popup",clearTimeout(a.current),a.current=void 0;else if(b==="popup-pending"&&E)clearTimeout(a.current),g(p,x,m);else if(b==="popup-open"){let[{id:L},{id:I}]=i.current.slice(-2);L===p&&l.current[I]!=="pending-close"&&M?(P(I,p,x),E&&!S&&g(p,x,m)):L===p&&E&&x!==I&&l.current[I]==="pending-close"?g(p,x,m):E?(v(p,x),g(p,x,m)):l.current[I]==="pending-close"&&M||v(p,x)}b==="pending-close"&&(a.current&&(clearTimeout(a.current),a.current=void 0),clearTimeout(d.current),d.current=void 0,l.current[p]="popup-open"),n(s,x)},onClick:s=>{let m=s.target,p=he(m),x=Ge(p);console.log(`list item click [${x}] hasPopup ${p.ariaHasPopup}`),p.ariaHasPopup==="true"?p.ariaExpanded!=="true"&&f(x):t(_(p.id))}}),[v,t,n,f,P,g]);return{closeMenu:w,handleRender:k,listItemProps:R,openMenu:f,openMenus:i.current}};var Ve=require("react"),Ue=({containerClassName:e,isOpen:t,onClose:n})=>{(0,Ve.useEffect)(()=>{let o;return t&&(o=r=>{r.target.closest(`.${e}`)===null&&(n==null||n("root"))},document.body.addEventListener("click",o,!0)),()=>{o&&document.body.removeEventListener("click",o,!0)}},[e,t,n])};var j=require("react/jsx-runtime"),Je=require("react"),Dt=()=>{},ie=({activatedByKeyboard:e,children:t,className:n,id:o,onClose:r=()=>{},position:c={x:0,y:0},style:i,...u})=>{let a=(0,ze.useIdMemo)(o),d=(0,G.useRef)(Dt),[l,h]=Ke(t),f=(0,G.useRef)(e),w=(0,G.useCallback)(()=>{f.current=!1},[]),v=(0,G.useCallback)(M=>{let{action:b,options:L}=h[M];d.current("root"),r(b,L)},[h,r]),{closeMenu:g,listItemProps:P,openMenu:k,openMenus:R,handleRender:s}=qe({id:a,onActivate:v,onMouseEnterItem:w,position:c});d.current=g,console.log({openMenus:R});let m=(0,G.useCallback)(()=>{g(),r()},[g,r]);Ue({containerClassName:"vuuMenuList",onClose:m,isOpen:R.length>0});let p=M=>{let b=_(M),L=se(b);f.current=!0,k(L,b)},x=()=>{f.current=!0,g()},E=()=>{},S=R.length-1,y=M=>{if(M>=S)return-1;{let{id:b}=R[M+1],L=b.lastIndexOf(".");return parseInt(L===-1?b:b.slice(-L),10)}};return(0,j.jsx)(j.Fragment,{children:R.map(({id:M,left:b,top:L},I)=>{let $=y(I);return(0,j.jsx)(Y,{x:b,y:L,onRender:s,children:(0,Je.createElement)(Fe,{...u,activatedByKeyboard:f.current,childMenuShowing:$,className:n,id:a,menuId:M,isRoot:I===0,key:I,listItemProps:P,onActivate:v,onHighlightMenuItem:E,onCloseMenu:x,onOpenMenu:p,style:i},l[M])},I)})})};ie.displayName="ContextMenu";var z=require("react"),ue=require("react/jsx-runtime"),ee=(0,z.createContext)(null),xe=e=>"children"in e,At=({children:e,context:t,menuActionHandler:n,menuBuilder:o})=>{let r=(0,z.useMemo)(()=>(t==null?void 0:t.menuBuilders)&&o?t.menuBuilders.concat(o):o?[o]:(t==null?void 0:t.menuBuilders)||[],[t,o]),c=(0,z.useCallback)((i,u)=>{var a;if(n!=null&&n(i,u)||(a=t==null?void 0:t.menuActionHandler)!=null&&a.call(t,i,u))return!0},[t,n]);return(0,ue.jsx)(ee.Provider,{value:{menuActionHandler:c,menuBuilders:r},children:e})},St=({children:e,label:t,menuActionHandler:n,menuBuilder:o})=>(0,ue.jsx)(ee.Consumer,{children:r=>(0,ue.jsx)(At,{context:r,label:t,menuActionHandler:n,menuBuilder:o,children:e})});var ne=require("react");var Qe=K(require("classnames")),A=K(require("react")),J=K(require("react-dom"));var W=!1,T=[];function ce(e){if(e.key==="Esc"){if(T.length)Ye();else if(W){let t=document.body.querySelector(".vuuDialog");t&&J.default.unmountComponentAtNode(t)}}}function Xe(e){if(T.length){let t=document.body.querySelectorAll(".vuuPopup");for(let n=0;n<t.length;n++)if(t[n].contains(e.target))return;Ye()}}function Ye(){if(T.length){let e=document.body.querySelectorAll(".vuuPopup");for(let t=0;t<e.length;t++)J.default.unmountComponentAtNode(e[t]);Ze("*")}}function $t(){W===!1&&(W=!0,window.addEventListener("keydown",ce,!0))}function Kt(){W&&(W=!1,window.removeEventListener("keydown",ce,!0))}function Nt(e){T.indexOf(e)===-1&&(T.push(e),W===!1&&(window.addEventListener("keydown",ce,!0),window.addEventListener("click",Xe,!0)))}function Ze(e){if(T.length){if(e==="*")T.length=0;else{let t=T.indexOf(e);t!==-1&&T.splice(t,1)}T.length===0&&W===!1&&(window.removeEventListener("keydown",ce,!0),window.removeEventListener("click",Xe,!0))}}var Ot=({children:e,position:t,style:n})=>{let o=(0,Qe.default)("hwPopup","hwPopupContainer",t);return(0,A.createElement)("div",{className:o,style:n},e)},Bt=1,D=class{static showPopup({name:t="anon",group:n="all",position:o="",left:r=0,right:c="auto",top:i=0,width:u="auto",component:a}){if(!a)throw Error("PopupService showPopup, no component supplied");Nt(t);let d=document.body.querySelector(".vuuPopup."+n);d===null&&(d=document.createElement("div"),d.className="vuuPopup "+n,document.body.appendChild(d));let l={width:u};Q((0,A.createElement)(Ot,{key:Bt++,position:o,style:l},a),d,r,i,()=>{D.keepWithinThePage(d,c)})}static hidePopup(t="anon",n="all"){if(T.indexOf(t)!==-1){Ze(t);let o=document.body.querySelector(`.vuuPopup.${n}`);o&&J.default.unmountComponentAtNode(o)}}static keepWithinThePage(t,n="auto"){let o=t.querySelector(".vuuPopupContainer > *");if(o){let{top:r,left:c,width:i,height:u,right:a}=o.getBoundingClientRect(),d=window.innerWidth,h=window.innerHeight-(r+u);h<0&&(o.style.top=Math.round(r)+h+"px");let f=d-(c+i);if(f<0&&(o.style.left=Math.round(c)+f+"px"),typeof n=="number"&&n!==a){let w=n-a;o.style.left=c+w+"px"}}}},te=class{static showDialog(t){let n=".vuuDialog",o=t.props.onClose;$t(),J.default.render(A.default.cloneElement(t,{container:n,onClose:()=>{te.closeDialog(),o&&o()}}),document.body.querySelector(n))}static closeDialog(){Kt();let t=document.body.querySelector(".vuuDialog");t&&J.default.unmountComponentAtNode(t)}},Ft=e=>{let t=(0,A.useRef)(),n=(0,A.useRef)(null),o=(r,c)=>{let{name:i,group:u,depth:a,width:d}=r,l,h;if(t.current&&(window.clearTimeout(t.current),t.current=void 0),r.close===!0)D.hidePopup(i,u);else{let{position:f,children:w}=r,{left:v,top:g,width:P,bottom:k}=c;f==="below"?(l=v,h=k):f==="above"&&(l=v,h=g),t.current=window.setTimeout(()=>{D.showPopup({name:i,group:u,depth:a,position:f,left:l,top:h,width:d||P,component:w})},10)}};return(0,A.useEffect)(()=>{if(n.current){let r=n.current.parentElement,c=r==null?void 0:r.getBoundingClientRect();c&&o(e,c)}return()=>{D.hidePopup(e.name,e.group)}},[e]),A.default.createElement("div",{className:"popup-proxy",ref:n})};var le=require("react/jsx-runtime"),Gt=()=>{let e=(0,ne.useContext)(ee),t=(0,ne.useCallback)((o,r,c)=>{let i=[];for(let u of o)i=i.concat(u(r,c));return i},[]);return(0,ne.useCallback)((o,r,c)=>{var a;o.stopPropagation(),o.preventDefault();let i=(a=e==null?void 0:e.menuBuilders)!=null?a:[],u=t(i,r,c);console.log({menuItemDescriptors:u}),u.length&&(e==null?void 0:e.menuActionHandler)&&(console.log(`showContextMenu ${r}`,{options:c}),Wt(o,u,e.menuActionHandler))},[t,e])},Wt=(e,t,n)=>{let{clientX:o,clientY:r}=e,u=(0,le.jsx)(ie,{onClose:(a,d)=>{a&&(n(a,d),D.hidePopup())},position:{x:o,y:r},children:(a=>{let d=(l,h)=>xe(l)?(0,le.jsx)(Z,{label:l.label,children:l.children.map(d)},h):(0,le.jsx)(re,{action:l.action,"data-icon":l.icon,options:l.options,children:l.label},h);return a.map(d)})(t)});D.showPopup({left:0,top:0,component:u})};
 //# sourceMappingURL=index.js.map

package/index.css

@@ -1,2 +1,2 @@
-.vuuDialog{background:var(--salt-container-primary-background);border:var(--vuuDialog-border, solid 1px #ccc);border-radius:5px;padding:var(--vuuDialog-padding, 0);box-shadow:var(--salt-overlayable-shadow, none);height:var(--vuuDialog-height, fit-content);width:var(--vuuDialog-width, fit-content)}.vuuDialog-header{--saltButton-height: 28px;--saltButton-width: 28px;--saltToolbar-background: transparent;--saltToolbar-height: calc(var(--salt-size-base) + 5px);border-bottom:solid 1px var(--salt-container-primary-borderColor)}.vuuDialog-header>.Responsive-inner{align-items:center}.vuuDialog-header>.Responsive-inner>:last-child{right:2px}.vuuMenuList{--context-menu-color: #161616;--context-menu-padding: var(--hw-list-item-padding, 0 6px);--context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, .175));--focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));--context-menu-highlight-bg: #a4d5f4;--context-menu-blur-focus-bg: #e0e4e9;--menu-item-height: var(--hw-list-item-height, 24px);--menu-item-icon-color: black;--menu-item-twisty-color: black;--menu-item-twisty-content: "";--menu-item-twisty-top: 50%;--menu-item-twisty-left: auto;--menu-item-twisty-right: 0px;--menu-icon-size: 12px;background-clip:padding-box;background-color:#fff;border-radius:4px;border:solid 1px rgba(0,0,0,.15);box-shadow:var(--context-menu-shadow);font-size:13px;list-style:none;margin:2px 0 0;outline:0;padding:0;position:absolute}.vuuMenuItem{align-items:center;color:var(--context-menu-color);display:flex;gap:6px;height:var(--menu-item-height);padding:var(--context-menu-padding);padding-right:24px;position:relative;white-space:nowrap}.vuuIconContainer{display:inline-block;flex:12px 0 0;height:var(--menu-icon-size);mask-repeat:no-repeat;width:var(--menu-icon-size)}.vuuMenuItem[aria-expanded=true]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem-separator{border-top:solid 1px var(--context-menu-blur-focus-bg)}.vuuMenuItem[aria-haspopup=true]:after{content:var(--menu-item-twisty-content);-webkit-mask:var(--svg-chevron-right) center center/12px 12px;mask:var(--svg-chevron-down) center center/12px 12px;mask-repeat:no-repeat;background-color:var(--menu-item-twisty-color);height:16px;left:var(--menu-item-twisty-left);right:var(--menu-item-twisty-right);margin-top:-8px;position:absolute;top:var(--menu-item-twisty-top);transition:transform .3s;width:16px}.vuuMenuItem[data-highlighted]{background-color:var(--context-menu-highlight-bg)}.vuuMenuItem:hover{background-color:var(--context-menu-highlight-bg);cursor:default}.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem.focusVisible:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0px;border:dotted var(--focus-visible-border-color) 2px}.vuuPopupContainer.top-bottom-right-right .popup-menu{left:auto;right:0}.vuuMenuItem-button:active,.hwMenuItem-button:hover{outline:0}.hwPopupContainer.top-bottom-right-right .popup-menu{left:auto;right:0}.popup-menu .menu-item.showing>button,.popup-menu .menu-item>button:focus,.popup-menu .menu-item>button:hover{text-decoration:none;color:#000;background-color:#dcdcdc}.popup-menu .menu-item.disabled>button{clear:both;font-weight:400;line-height:1.5;color:#787878;white-space:nowrap;text-decoration:none;cursor:default}.vuuPopup{box-shadow:0 6px 12px #0000002d;position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:1000}.vuuPopup{position:absolute}
+.vuuDialog{background:var(--salt-container-primary-background);border:var(--vuuDialog-border, solid 1px #ccc);border-radius:5px;padding:var(--vuuDialog-padding, 0);box-shadow:var(--salt-overlayable-shadow, none);height:var(--vuuDialog-height, fit-content);width:var(--vuuDialog-width, fit-content)}.vuuDialog-header{--saltButton-height: 28px;--saltButton-width: 28px;--saltToolbar-background: transparent;--saltToolbar-height: calc(var(--salt-size-base) + 5px);border-bottom:solid 1px var(--salt-container-primary-borderColor)}.vuuDialog-header>.Responsive-inner{align-items:center}.vuuDialog-header>.Responsive-inner>:last-child{right:2px}.vuuMenuList{--context-menu-color: #161616;--context-menu-padding: var(--hw-list-item-padding, 0 6px);--context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, .175));--focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));--context-menu-highlight-bg: #a4d5f4;--context-menu-blur-focus-bg: #e0e4e9;--menu-item-height: var(--hw-list-item-height, 24px);--menu-item-icon-color: black;--menu-item-twisty-color: black;--menu-item-twisty-content: "";--menu-item-twisty-top: 50%;--menu-item-twisty-left: auto;--menu-item-twisty-right: 0px;--menu-icon-size: 12px;background-clip:padding-box;background-color:#fff;border-radius:4px;border:solid 1px rgba(0,0,0,.15);box-shadow:var(--context-menu-shadow);font-size:var(--salt-text-label-fontSize);font-weight:var(--salt-typography-fontWeight-semiBold);list-style:none;margin:2px 0 0;outline:0;padding:0;position:absolute}.vuuMenuItem{align-items:center;color:var(--context-menu-color);display:flex;gap:6px;height:var(--menu-item-height);padding:var(--context-menu-padding);padding-right:24px;position:relative;white-space:nowrap}.vuuIconContainer{display:inline-block;flex:12px 0 0;height:var(--menu-icon-size);mask-repeat:no-repeat;width:var(--menu-icon-size)}.vuuMenuItem[aria-expanded=true]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem-separator{border-top:solid 1px var(--context-menu-blur-focus-bg)}.vuuMenuItem[aria-haspopup=true]:after{content:var(--menu-item-twisty-content);-webkit-mask:var(--svg-chevron-right) center center/12px 12px;mask:var(--svg-chevron-down) center center/12px 12px;mask-repeat:no-repeat;background-color:var(--menu-item-twisty-color);height:16px;left:var(--menu-item-twisty-left);right:var(--menu-item-twisty-right);margin-top:-8px;position:absolute;top:var(--menu-item-twisty-top);transition:transform .3s;width:16px}.vuuMenuItem[data-highlighted]{background-color:var(--context-menu-highlight-bg)}.vuuMenuItem:hover{background-color:var(--context-menu-highlight-bg);cursor:default}.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem.focusVisible:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0px;border:dotted var(--focus-visible-border-color) 2px}.vuuPopupContainer.top-bottom-right-right .popup-menu{left:auto;right:0}.popup-menu .menu-item.showing>button,.popup-menu .menu-item>button:focus,.popup-menu .menu-item>button:hover{text-decoration:none;color:#000;background-color:#dcdcdc}.vuuMenuItem-button:active,.hwMenuItem-button:hover{outline:0}.popup-menu .menu-item.disabled>button{clear:both;font-weight:400;line-height:1.5;color:#787878;white-space:nowrap;text-decoration:none;cursor:default}.vuuPopup{box-shadow:0 6px 12px #0000002d;position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:1000}.vuuPopup{position:absolute}
 /*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/menu/ContextMenu.css", "../../../packages/vuu-popups/src/popup/popup-service.css"],
-  "sourcesContent": [".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  padding: var(--vuuDialog-padding, 0);\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n\n  --saltToolbar-background: transparent;\n  --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n  align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n  right: 2px;\n}\n\n\n", ".vuuMenuList {\n  --context-menu-color: #161616;\n  --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n  --context-menu-highlight-bg: #a4d5f4;\n  --context-menu-blur-focus-bg: #e0e4e9;\n  --menu-item-height: var(--hw-list-item-height, 24px);\n  --menu-item-icon-color: black;\n  --menu-item-twisty-color: black;\n  --menu-item-twisty-content: '';\n  --menu-item-twisty-top: 50%;\n  --menu-item-twisty-left: auto;\n  --menu-item-twisty-right: 0px;\n  --menu-icon-size: 12px;\n\n  background-clip: padding-box;\n  background-color: white;\n  border-radius: 4px;\n  border: solid 1px rgba(0, 0, 0, 0.15);\n  box-shadow: var(--context-menu-shadow);\n  font-size: 13px;\n  list-style: none;\n  margin: 2px 0 0;\n  outline: 0;\n  padding: 0;\n  position: absolute;\n}\n\n.vuuMenuItem {\n  align-items: center;\n  color: var(--context-menu-color);\n  display: flex;\n  gap: 6px;\n  height: var(--menu-item-height);\n  padding: var(--context-menu-padding);\n  padding-right: 24px;\n  position: relative;\n  white-space: nowrap;\n}\n\n.vuuIconContainer {\n  display: inline-block;\n  flex: 12px 0 0;\n  height: var(--menu-icon-size);\n  mask-repeat: no-repeat;\n  width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n  border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n  content: var(--menu-item-twisty-content);\n  -webkit-mask: var(--svg-chevron-right) center center/12px 12px;\n  mask: var(--svg-chevron-down) center center/12px 12px;\n  mask-repeat: no-repeat;\n  background-color: var(--menu-item-twisty-color);\n  height: 16px;\n  left: var(--menu-item-twisty-left);\n  right: var(--menu-item-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--menu-item-twisty-top);\n  transition: transform 0.3s;\n  width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n  background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n  background-color: var(--context-menu-highlight-bg);\n  cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.hwMenuItem-button:hover {\n  outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".hwPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".vuuPopup {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.vuuPopup {\n  position: absolute;\n}\n"],
-  "mappings": "AAAA,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,aACE,8BACA,2DACA,+EACA,uFACA,qCACA,sCACA,qDACA,8BACA,gCACA,+BACA,4BACA,8BACA,8BACA,uBAEA,4BACA,sBAjBF,kBAmBE,iCACA,sCACA,eACA,gBAtBF,eAwBE,UAxBF,UA0BE,kBAGF,aACE,mBACA,gCACA,aACA,QACA,+BACA,oCACA,mBACA,kBACA,mBAGF,kBACE,qBACA,cACA,6BACA,sBACA,4BAGF,iCACE,mDAGF,uBACE,uDAGF,uCACE,wCACA,8DACA,qDACA,sBACA,+CACA,YACA,kCACA,oCACA,gBACA,kBACA,gCACA,yBACA,WAGF,+BACE,kDAGF,mBACE,kDACA,eAGF,4DACE,mDAGF,iCACE,WACA,kBACA,MACA,OACA,QACA,WACA,oDAGF,sDACE,UACA,QAUF,oDAEE,UC9GF,qDACE,UACA,QAGF,8GAGE,qBACA,WACA,yBAGF,uCACE,WACA,gBACA,gBACA,cACA,mBACA,qBACA,eCpBF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE",
+  "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css"],
+  "sourcesContent": [".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  padding: var(--vuuDialog-padding, 0);\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n\n  --saltToolbar-background: transparent;\n  --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n  align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n  right: 2px;\n}\n\n\n", ".vuuMenuList {\n  --context-menu-color: #161616;\n  --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n  --context-menu-highlight-bg: #a4d5f4;\n  --context-menu-blur-focus-bg: #e0e4e9;\n  --menu-item-height: var(--hw-list-item-height, 24px);\n  --menu-item-icon-color: black;\n  --menu-item-twisty-color: black;\n  --menu-item-twisty-content: '';\n  --menu-item-twisty-top: 50%;\n  --menu-item-twisty-left: auto;\n  --menu-item-twisty-right: 0px;\n  --menu-icon-size: 12px;\n\n  background-clip: padding-box;\n  background-color: white;\n  border-radius: 4px;\n  border: solid 1px rgba(0, 0, 0, 0.15);\n  box-shadow: var(--context-menu-shadow);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  list-style: none;\n  margin: 2px 0 0;\n  outline: 0;\n  padding: 0;\n  position: absolute;\n}\n\n.vuuMenuItem {\n  align-items: center;\n  color: var(--context-menu-color);\n  display: flex;\n  gap: 6px;\n  height: var(--menu-item-height);\n  padding: var(--context-menu-padding);\n  padding-right: 24px;\n  position: relative;\n  white-space: nowrap;\n}\n\n.vuuIconContainer {\n  display: inline-block;\n  flex: 12px 0 0;\n  height: var(--menu-icon-size);\n  mask-repeat: no-repeat;\n  width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n  border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n  content: var(--menu-item-twisty-content);\n  -webkit-mask: var(--svg-chevron-right) center center/12px 12px;\n  mask: var(--svg-chevron-down) center center/12px 12px;\n  mask-repeat: no-repeat;\n  background-color: var(--menu-item-twisty-color);\n  height: 16px;\n  left: var(--menu-item-twisty-left);\n  right: var(--menu-item-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--menu-item-twisty-top);\n  transition: transform 0.3s;\n  width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n  background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n  background-color: var(--context-menu-highlight-bg);\n  cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.hwMenuItem-button:hover {\n  outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".vuuPopup {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.vuuPopup {\n  position: absolute;\n}\n"],
+  "mappings": "AAAA,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,aACE,8BACA,2DACA,+EACA,uFACA,qCACA,sCACA,qDACA,8BACA,gCACA,+BACA,4BACA,8BACA,8BACA,uBAEA,4BACA,sBAjBF,kBAmBE,iCACA,sCACA,0CACA,uDACA,gBAvBF,eAyBE,UAzBF,UA2BE,kBAGF,aACE,mBACA,gCACA,aACA,QACA,+BACA,oCACA,mBACA,kBACA,mBAGF,kBACE,qBACA,cACA,6BACA,sBACA,4BAGF,iCACE,mDAGF,uBACE,uDAGF,uCACE,wCACA,8DACA,qDACA,sBACA,+CACA,YACA,kCACA,oCACA,gBACA,kBACA,gCACA,yBACA,WAGF,+BACE,kDAGF,mBACE,kDACA,eAGF,4DACE,mDAGF,iCACE,WACA,kBACA,MACA,OACA,QACA,WACA,oDAGF,sDACE,UACA,QAGF,8GAGE,qBACA,WACA,yBAEF,oDAEE,UAGF,uCACE,WACA,gBACA,gBACA,cACA,mBACA,qBACA,eCzHF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuu-ui/vuu-popups",
-  "version": "0.5.6",
+  "version": "0.5.17",
   "description": "VUU popup components - Context Menu, Dialog etc",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -8,7 +8,7 @@
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0",
-    "@vuu-ui/vuu-utils": "0.5.6",
+    "@vuu-ui/vuu-utils": "0.5.17",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -18,8 +18,10 @@
     "index.css",
     "index.js.map",
     "index.css.map",
-    "/src"
+    "/src",
+    "/types"
   ],
   "module": "esm/index.js",
-  "main": "cjs/index.js"
+  "main": "cjs/index.js",
+  "types": "types/index.d.ts"
 }

package/types/dialog/Dialog.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+import "./Dialog.css";
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
+    isOpen?: boolean;
+    onClose?: () => void;
+}
+export declare const Dialog: ({ children, className, isOpen, onClose, title, ...props }: DialogProps) => JSX.Element | null;

package/types/dialog/index.d.ts

@@ -0,0 +1 @@
+export * from "./Dialog";

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./dialog";
+export * from "./menu";
+export * from "./popup";
+export * from "./portal";

package/types/menu/ContextMenu.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { MenuListProps } from "./MenuList";
+export interface ContextMenuProps extends Omit<MenuListProps, "onCloseMenu"> {
+    onClose?: (menuId?: string, options?: unknown) => void;
+    position?: {
+        x: number;
+        y: number;
+    };
+    withPortal?: boolean;
+}
+export declare const ContextMenu: {
+    ({ activatedByKeyboard, children: childrenProp, className, id: idProp, onClose, position, style, ...menuListProps }: ContextMenuProps): JSX.Element;
+    displayName: string;
+};

package/types/menu/MenuList.d.ts

@@ -0,0 +1,32 @@
+import { FC, HTMLAttributes, ReactElement } from "react";
+import "./MenuList.css";
+export declare const Separator: () => JSX.Element;
+export interface MenuItemGroupProps {
+    children: ReactElement<MenuItemProps>[];
+    label: string;
+}
+export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
+    action?: string;
+    idx?: number;
+    options?: unknown;
+}
+export declare const MenuItemGroup: FC<MenuItemGroupProps>;
+export declare const MenuItem: ({ children, idx, ...props }: MenuItemProps) => JSX.Element;
+export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
+    activatedByKeyboard?: boolean;
+    children: ReactElement[];
+    childMenuShowing?: number;
+    highlightedIdx?: number;
+    isRoot?: boolean;
+    listItemProps?: Partial<MenuItemProps>;
+    menuId?: string;
+    onActivate?: (menuId: string) => void;
+    onCloseMenu: (idx: number) => void;
+    onOpenMenu?: (menuId: string) => void;
+    onHighlightMenuItem?: (idx: number) => void;
+}
+declare const MenuList: {
+    ({ activatedByKeyboard, childMenuShowing, children, className, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, menuId, onHighlightMenuItem, onActivate, onCloseMenu, onOpenMenu, ...props }: MenuListProps): JSX.Element;
+    displayName: string;
+};
+export default MenuList;

package/types/menu/aim/aim.d.ts

@@ -0,0 +1,13 @@
+import { Corner } from "./corners";
+export declare type Point = [number, number];
+export declare type Position = {
+    x: number;
+    y: number;
+};
+export declare type Positions = [Position, Position];
+export declare function distance(source: Position, target: Position): number;
+export declare function pointInPolygon(point: Point, vs: Point[]): boolean;
+export declare type Side = "right" | "top-right" | "top" | "top-left" | "left" | "bottom-left" | "bottom" | "bottom-right";
+export declare function side(corners: [Corner, Corner] | []): Side;
+export declare function bullseye(corners: [Corner, Corner] | [], boundaries: [Position, Position], mousePosition: Position): Position;
+export declare function aiming(e: MouseEvent, mousePosition: Position, prevMousePosition: Position, target: HTMLElement, alreadyAiming: boolean): number | false;

package/types/menu/aim/corners.d.ts

@@ -0,0 +1,9 @@
+import { Position, Positions } from "./aim";
+export declare type Corner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+export declare function findCorners(sourceEvt: MouseEvent, targetElement: HTMLElement): [Corner, Corner] | [];
+declare type Source = {
+    left: number;
+    top: number;
+};
+export declare function boundaries(corners: [Corner, Corner] | [], sourcePos: Position | MouseEvent | Source, targetElement: HTMLElement | SVGElement, adjustment?: false | number): Positions;
+export {};

package/types/menu/aim/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function mousePosition(event: MouseEvent): {
+    x: number;
+    y: number;
+};

package/types/menu/context-menu-provider.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+export declare type MenuActionHandler = (type: string, options: unknown) => boolean | undefined;
+export declare type MenuBuilder<L = string, O = unknown> = (location: L, options: O) => ContextMenuItemDescriptor[];
+export interface ContextMenuContext {
+    menuBuilders: MenuBuilder[];
+    menuActionHandler: MenuActionHandler;
+}
+export declare const ContextMenuContext: import("react").Context<ContextMenuContext | null>;
+export interface ContextMenuItemBase {
+    icon?: string;
+    label: string;
+    location?: string;
+}
+export interface ContextMenuLeafItemDescriptor extends ContextMenuItemBase {
+    action: string;
+    options?: unknown;
+}
+export interface ContextMenuGroupItemDescriptor extends ContextMenuItemBase {
+    children: ContextMenuItemDescriptor[];
+}
+export declare type ContextMenuItemDescriptor = ContextMenuLeafItemDescriptor | ContextMenuGroupItemDescriptor;
+export declare const isGroupMenuItem: (menuItem: ContextMenuItemDescriptor) => menuItem is ContextMenuGroupItemDescriptor;
+export interface ContextMenuProviderProps {
+    children: ReactNode;
+    label?: string;
+    menuActionHandler?: MenuActionHandler;
+    menuBuilder: MenuBuilder;
+}
+export declare const ContextMenuProvider: ({ children, label, menuActionHandler, menuBuilder, }: ContextMenuProviderProps) => JSX.Element;

package/types/menu/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ContextMenu";
+export * from "./MenuList";
+export * from "./context-menu-provider";
+export * from "./useContextMenu";

package/types/menu/key-code.d.ts

@@ -0,0 +1,12 @@
+export declare const ArrowUp = "ArrowUp";
+export declare const ArrowDown = "ArrowDown";
+export declare const ArrowLeft = "ArrowLeft";
+export declare const Backspace = "Backspace";
+export declare const ArrowRight = "ArrowRight";
+export declare const Enter = "Enter";
+export declare const Escape = "Escape";
+export declare const Delete = "Delete";
+export declare const isCharacterKey: (evt: KeyboardEvent) => boolean | undefined;
+export declare const isNavigationKey: ({ key }: {
+    key: string;
+}, orientation?: string) => boolean;

package/types/menu/list-dom-utils.d.ts

@@ -0,0 +1,4 @@
+export declare function listItemIndex(listItemEl: HTMLElement): number | undefined;
+export declare const closestListItem: (el: HTMLElement | null | undefined) => HTMLElement;
+export declare const closestListItemId: (el: HTMLElement) => string | undefined;
+export declare const closestListItemIndex: (el: HTMLElement) => number | undefined;

package/types/menu/use-cascade.d.ts

@@ -0,0 +1,26 @@
+import { MouseEvent } from "react";
+import { MenuItemProps } from "./MenuList";
+export declare type RuntimeMenuDescriptor = {
+    id: string;
+    left: number;
+    top: number;
+};
+export declare const getItemId: (id: string) => string;
+export declare const getMenuId: (id: string) => string;
+export interface CascadeHookProps {
+    id: string;
+    onActivate: (menuId: string) => void;
+    onMouseEnterItem: (evt: MouseEvent, itemId: string) => void;
+    position: {
+        x: number;
+        y: number;
+    };
+}
+export interface CascadeHooksResult {
+    closeMenu: () => void;
+    handleRender: () => void;
+    listItemProps: Partial<MenuItemProps>;
+    openMenu: (menuId?: string, itemId?: string) => void;
+    openMenus: RuntimeMenuDescriptor[];
+}
+export declare const useCascade: ({ id, onActivate, onMouseEnterItem, position: { x: posX, y: posY }, }: CascadeHookProps) => CascadeHooksResult;

package/types/menu/use-click-away.d.ts

@@ -0,0 +1,6 @@
+export interface ClickAwayHookProps {
+    containerClassName: string;
+    isOpen: boolean;
+    onClose?: (target: string) => void;
+}
+export declare const useClickAway: ({ containerClassName, isOpen, onClose, }: ClickAwayHookProps) => void;

package/types/menu/use-items-with-ids.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+export declare const isMenuItemGroup: (child: ReactElement) => boolean;
+declare type Menus = {
+    [key: string]: ReactElement[];
+};
+declare type Actions = {
+    [key: string]: {
+        action: string;
+        options?: unknown;
+    };
+};
+export declare const useItemsWithIds: (childrenProp: ReactElement[]) => [Menus, Actions];
+export {};

package/types/menu/use-keyboard-navigation.d.ts

@@ -0,0 +1,26 @@
+import { FocusEvent, KeyboardEvent } from "react";
+export interface KeyboardNavigationProps {
+    autoHighlightFirstItem?: boolean;
+    count: number;
+    highlightedIndex?: number;
+    onActivate: (idx: number) => void;
+    onHighlight?: (idx: number) => void;
+    onCloseMenu: (idx: number) => void;
+    onOpenMenu: (idx: number) => void;
+}
+export interface KeyboardHookListProps {
+    onFocus: (evt: FocusEvent) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    onMouseDownCapture: () => void;
+    onMouseMove: () => void;
+    onMouseLeave: () => void;
+}
+export interface NavigationHookResult {
+    focusVisible: number;
+    controlledHighlighting: boolean;
+    highlightedIndex: number;
+    setHighlightedIndex: (idx: number) => void;
+    listProps: KeyboardHookListProps;
+    setIgnoreFocus: (ignoreFocus: boolean) => void;
+}
+export declare const useKeyboardNavigation: ({ autoHighlightFirstItem, count, highlightedIndex: highlightedIndexProp, onActivate, onHighlight, onCloseMenu, onOpenMenu, }: KeyboardNavigationProps) => NavigationHookResult;

package/types/menu/useContextMenu.d.ts

@@ -0,0 +1,2 @@
+import { MouseEvent } from "react";
+export declare const useContextMenu: () => (e: MouseEvent<HTMLElement>, location: string, options: unknown) => void;

package/types/menu/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isRoot: (el: HTMLElement) => boolean;
+export declare const hasPopup: (el: HTMLElement, idx: number) => boolean;

package/types/popup/index.d.ts

@@ -0,0 +1 @@
+export * from "./popup-service";

package/types/popup/popup-service.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactElement } from "react";
+import "./popup-service.css";
+export declare class PopupService {
+    static showPopup({ name, group, position, left, right, top, width, component, }: {
+        depth?: number;
+        name?: string;
+        group?: string;
+        position?: "above" | "below" | "";
+        left?: number;
+        right?: "auto" | number;
+        top?: number;
+        component: ReactElement;
+        width?: number | "auto";
+    }): void;
+    static hidePopup(name?: string, group?: string): void;
+    static keepWithinThePage(el: HTMLElement, right?: number | "auto"): void;
+}
+export declare class DialogService {
+    static showDialog(dialog: ReactElement): void;
+    static closeDialog(): void;
+}
+export interface PopupProps {
+    children: ReactElement;
+    close?: boolean;
+    depth: number;
+    group?: string;
+    name: string;
+    position?: "above" | "below" | "";
+    width: number;
+}
+export declare const Popup: (props: PopupProps) => React.DetailedReactHTMLElement<{
+    className: string;
+    ref: React.RefObject<HTMLElement>;
+}, HTMLElement>;

package/types/portal/Portal.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+export interface PortalProps {
+    children: ReactElement;
+    onRender?: () => void;
+    x?: number;
+    y?: number;
+}
+export declare const Portal: ({ children, x, y, onRender, }: PortalProps) => null;

package/types/portal/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Portal";
+export * from "./render-portal";
+export * from "./portal-utils";

package/types/portal/portal-utils.d.ts

@@ -0,0 +1 @@
+export declare const installTheme: (themeId: string) => void;

package/types/portal/render-portal.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+export declare const renderPortal: (component: ReactElement, container: HTMLElement, x: number, y: number, onRender?: () => void) => void;
+export declare const createContainer: (x?: number, y?: number) => HTMLDivElement;