@vuu-ui/vuu-popups 0.6.3 → 0.6.10-debug

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "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&&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&&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})};
1
+ "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,isGroupMenuItemDescriptor:()=>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=>e!==void 0&&"children"in e,At=({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]),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&&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})};
2
2
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,5 @@
1
1
  {
2
2
  "name": "@vuu-ui/vuu-popups",
3
- "version": "0.6.3",
4
3
  "description": "VUU popup components - Context Menu, Dialog etc",
5
4
  "author": "heswell",
6
5
  "license": "Apache-2.0",
@@ -8,7 +7,7 @@
8
7
  "@salt-ds/core": "1.0.0",
9
8
  "@salt-ds/icons": "1.0.0",
10
9
  "@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
11
- "@vuu-ui/vuu-utils": "0.6.3",
10
+ "@vuu-ui/vuu-utils": "0.6.10-debug",
12
11
  "classnames": "^2.2.6",
13
12
  "react": "^17.0.2",
14
13
  "react-dom": "^17.0.2"
@@ -18,10 +17,9 @@
18
17
  "index.css",
19
18
  "index.js.map",
20
19
  "index.css.map",
21
- "/src",
22
- "/types"
20
+ "/src"
23
21
  ],
24
22
  "module": "esm/index.js",
25
23
  "main": "cjs/index.js",
26
- "types": "types/index.d.ts"
24
+ "version": "0.6.10-debug"
27
25
  }
@@ -1,7 +0,0 @@
1
- import { HTMLAttributes } from "react";
2
- import "./Dialog.css";
3
- export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
4
- isOpen?: boolean;
5
- onClose?: () => void;
6
- }
7
- export declare const Dialog: ({ children, className, isOpen, onClose, title, ...props }: DialogProps) => JSX.Element | null;
@@ -1 +0,0 @@
1
- export * from "./Dialog";
package/types/index.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export * from "./dialog";
2
- export * from "./menu";
3
- export * from "./popup";
4
- export * from "./portal";
@@ -1,14 +0,0 @@
1
- /// <reference types="react" />
2
- import { MenuListProps } from "./MenuList";
3
- export interface ContextMenuProps extends Omit<MenuListProps, "onCloseMenu"> {
4
- onClose?: (menuId?: string, options?: unknown) => void;
5
- position?: {
6
- x: number;
7
- y: number;
8
- };
9
- withPortal?: boolean;
10
- }
11
- export declare const ContextMenu: {
12
- ({ activatedByKeyboard, children: childrenProp, className, id: idProp, onClose, position, style, ...menuListProps }: ContextMenuProps): JSX.Element;
13
- displayName: string;
14
- };
@@ -1,32 +0,0 @@
1
- import { FC, HTMLAttributes, ReactElement } from "react";
2
- import "./MenuList.css";
3
- export declare const Separator: () => JSX.Element;
4
- export interface MenuItemGroupProps {
5
- children: ReactElement<MenuItemProps>[];
6
- label: string;
7
- }
8
- export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
9
- action?: string;
10
- idx?: number;
11
- options?: unknown;
12
- }
13
- export declare const MenuItemGroup: FC<MenuItemGroupProps>;
14
- export declare const MenuItem: ({ children, idx, ...props }: MenuItemProps) => JSX.Element;
15
- export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
16
- activatedByKeyboard?: boolean;
17
- children: ReactElement[];
18
- childMenuShowing?: number;
19
- highlightedIdx?: number;
20
- isRoot?: boolean;
21
- listItemProps?: Partial<MenuItemProps>;
22
- menuId?: string;
23
- onActivate?: (menuId: string) => void;
24
- onCloseMenu: (idx: number) => void;
25
- onOpenMenu?: (menuId: string) => void;
26
- onHighlightMenuItem?: (idx: number) => void;
27
- }
28
- declare const MenuList: {
29
- ({ activatedByKeyboard, childMenuShowing, children, className, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, menuId, onHighlightMenuItem, onActivate, onCloseMenu, onOpenMenu, ...props }: MenuListProps): JSX.Element;
30
- displayName: string;
31
- };
32
- export default MenuList;
@@ -1,13 +0,0 @@
1
- import { Corner } from "./corners";
2
- export declare type Point = [number, number];
3
- export declare type Position = {
4
- x: number;
5
- y: number;
6
- };
7
- export declare type Positions = [Position, Position];
8
- export declare function distance(source: Position, target: Position): number;
9
- export declare function pointInPolygon(point: Point, vs: Point[]): boolean;
10
- export declare type Side = "right" | "top-right" | "top" | "top-left" | "left" | "bottom-left" | "bottom" | "bottom-right";
11
- export declare function side(corners: [Corner, Corner] | []): Side;
12
- export declare function bullseye(corners: [Corner, Corner] | [], boundaries: [Position, Position], mousePosition: Position): Position;
13
- export declare function aiming(e: MouseEvent, mousePosition: Position, prevMousePosition: Position, target: HTMLElement, alreadyAiming: boolean): number | false;
@@ -1,9 +0,0 @@
1
- import { Position, Positions } from "./aim";
2
- export declare type Corner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
3
- export declare function findCorners(sourceEvt: MouseEvent, targetElement: HTMLElement): [Corner, Corner] | [];
4
- declare type Source = {
5
- left: number;
6
- top: number;
7
- };
8
- export declare function boundaries(corners: [Corner, Corner] | [], sourcePos: Position | MouseEvent | Source, targetElement: HTMLElement | SVGElement, adjustment?: false | number): Positions;
9
- export {};
@@ -1,4 +0,0 @@
1
- export declare function mousePosition(event: MouseEvent): {
2
- x: number;
3
- y: number;
4
- };
@@ -1,29 +0,0 @@
1
- import { ReactNode } from "react";
2
- export declare type MenuActionHandler = (type: string, options: unknown) => boolean | undefined;
3
- export declare type MenuBuilder<L = string, O = unknown> = (location: L, options: O) => ContextMenuItemDescriptor[];
4
- export interface ContextMenuContext {
5
- menuBuilders: MenuBuilder[];
6
- menuActionHandler: MenuActionHandler;
7
- }
8
- export declare const ContextMenuContext: import("react").Context<ContextMenuContext | null>;
9
- export interface ContextMenuItemBase {
10
- icon?: string;
11
- label: string;
12
- location?: string;
13
- }
14
- export interface ContextMenuLeafItemDescriptor extends ContextMenuItemBase {
15
- action: string;
16
- options?: unknown;
17
- }
18
- export interface ContextMenuGroupItemDescriptor extends ContextMenuItemBase {
19
- children: ContextMenuItemDescriptor[];
20
- }
21
- export declare type ContextMenuItemDescriptor = ContextMenuLeafItemDescriptor | ContextMenuGroupItemDescriptor;
22
- export declare const isGroupMenuItem: (menuItem: ContextMenuItemDescriptor) => menuItem is ContextMenuGroupItemDescriptor;
23
- export interface ContextMenuProviderProps {
24
- children: ReactNode;
25
- label?: string;
26
- menuActionHandler?: MenuActionHandler;
27
- menuBuilder: MenuBuilder;
28
- }
29
- export declare const ContextMenuProvider: ({ children, label, menuActionHandler, menuBuilder, }: ContextMenuProviderProps) => JSX.Element;
@@ -1,4 +0,0 @@
1
- export * from "./ContextMenu";
2
- export * from "./MenuList";
3
- export * from "./context-menu-provider";
4
- export * from "./useContextMenu";
@@ -1,12 +0,0 @@
1
- export declare const ArrowUp = "ArrowUp";
2
- export declare const ArrowDown = "ArrowDown";
3
- export declare const ArrowLeft = "ArrowLeft";
4
- export declare const Backspace = "Backspace";
5
- export declare const ArrowRight = "ArrowRight";
6
- export declare const Enter = "Enter";
7
- export declare const Escape = "Escape";
8
- export declare const Delete = "Delete";
9
- export declare const isCharacterKey: (evt: KeyboardEvent) => boolean | undefined;
10
- export declare const isNavigationKey: ({ key }: {
11
- key: string;
12
- }, orientation?: string) => boolean;
@@ -1,4 +0,0 @@
1
- export declare function listItemIndex(listItemEl: HTMLElement): number | undefined;
2
- export declare const closestListItem: (el: HTMLElement | null | undefined) => HTMLElement;
3
- export declare const closestListItemId: (el: HTMLElement) => string | undefined;
4
- export declare const closestListItemIndex: (el: HTMLElement) => number | undefined;
@@ -1,26 +0,0 @@
1
- import { MouseEvent } from "react";
2
- import { MenuItemProps } from "./MenuList";
3
- export declare type RuntimeMenuDescriptor = {
4
- id: string;
5
- left: number;
6
- top: number;
7
- };
8
- export declare const getItemId: (id: string) => string;
9
- export declare const getMenuId: (id: string) => string;
10
- export interface CascadeHookProps {
11
- id: string;
12
- onActivate: (menuId: string) => void;
13
- onMouseEnterItem: (evt: MouseEvent, itemId: string) => void;
14
- position: {
15
- x: number;
16
- y: number;
17
- };
18
- }
19
- export interface CascadeHooksResult {
20
- closeMenu: () => void;
21
- handleRender: () => void;
22
- listItemProps: Partial<MenuItemProps>;
23
- openMenu: (menuId?: string, itemId?: string) => void;
24
- openMenus: RuntimeMenuDescriptor[];
25
- }
26
- export declare const useCascade: ({ id, onActivate, onMouseEnterItem, position: { x: posX, y: posY }, }: CascadeHookProps) => CascadeHooksResult;
@@ -1,6 +0,0 @@
1
- export interface ClickAwayHookProps {
2
- containerClassName: string;
3
- isOpen: boolean;
4
- onClose?: (target: string) => void;
5
- }
6
- export declare const useClickAway: ({ containerClassName, isOpen, onClose, }: ClickAwayHookProps) => void;
@@ -1,13 +0,0 @@
1
- import { ReactElement } from "react";
2
- export declare const isMenuItemGroup: (child: ReactElement) => boolean;
3
- declare type Menus = {
4
- [key: string]: ReactElement[];
5
- };
6
- declare type Actions = {
7
- [key: string]: {
8
- action: string;
9
- options?: unknown;
10
- };
11
- };
12
- export declare const useItemsWithIds: (childrenProp: ReactElement[]) => [Menus, Actions];
13
- export {};
@@ -1,26 +0,0 @@
1
- import { FocusEvent, KeyboardEvent } from "react";
2
- export interface KeyboardNavigationProps {
3
- autoHighlightFirstItem?: boolean;
4
- count: number;
5
- highlightedIndex?: number;
6
- onActivate: (idx: number) => void;
7
- onHighlight?: (idx: number) => void;
8
- onCloseMenu: (idx: number) => void;
9
- onOpenMenu: (idx: number) => void;
10
- }
11
- export interface KeyboardHookListProps {
12
- onFocus: (evt: FocusEvent) => void;
13
- onKeyDown: (evt: KeyboardEvent) => void;
14
- onMouseDownCapture: () => void;
15
- onMouseMove: () => void;
16
- onMouseLeave: () => void;
17
- }
18
- export interface NavigationHookResult {
19
- focusVisible: number;
20
- controlledHighlighting: boolean;
21
- highlightedIndex: number;
22
- setHighlightedIndex: (idx: number) => void;
23
- listProps: KeyboardHookListProps;
24
- setIgnoreFocus: (ignoreFocus: boolean) => void;
25
- }
26
- export declare const useKeyboardNavigation: ({ autoHighlightFirstItem, count, highlightedIndex: highlightedIndexProp, onActivate, onHighlight, onCloseMenu, onOpenMenu, }: KeyboardNavigationProps) => NavigationHookResult;
@@ -1,2 +0,0 @@
1
- import { MouseEvent } from "react";
2
- export declare const useContextMenu: () => (e: MouseEvent<HTMLElement>, location: string, options: unknown) => void;
@@ -1,2 +0,0 @@
1
- export declare const isRoot: (el: HTMLElement) => boolean;
2
- export declare const hasPopup: (el: HTMLElement, idx: number) => boolean;
@@ -1 +0,0 @@
1
- export * from "./popup-service";
@@ -1,34 +0,0 @@
1
- import React, { ReactElement } from "react";
2
- import "./popup-service.css";
3
- export declare class PopupService {
4
- static showPopup({ name, group, position, left, right, top, width, component, }: {
5
- depth?: number;
6
- name?: string;
7
- group?: string;
8
- position?: "above" | "below" | "";
9
- left?: number;
10
- right?: "auto" | number;
11
- top?: number;
12
- component: ReactElement;
13
- width?: number | "auto";
14
- }): void;
15
- static hidePopup(name?: string, group?: string): void;
16
- static keepWithinThePage(el: HTMLElement, right?: number | "auto"): void;
17
- }
18
- export declare class DialogService {
19
- static showDialog(dialog: ReactElement): void;
20
- static closeDialog(): void;
21
- }
22
- export interface PopupProps {
23
- children: ReactElement;
24
- close?: boolean;
25
- depth: number;
26
- group?: string;
27
- name: string;
28
- position?: "above" | "below" | "";
29
- width: number;
30
- }
31
- export declare const Popup: (props: PopupProps) => React.DetailedReactHTMLElement<{
32
- className: string;
33
- ref: React.RefObject<HTMLElement>;
34
- }, HTMLElement>;
@@ -1,8 +0,0 @@
1
- import { ReactElement } from "react";
2
- export interface PortalProps {
3
- children: ReactElement;
4
- onRender?: () => void;
5
- x?: number;
6
- y?: number;
7
- }
8
- export declare const Portal: ({ children, x, y, onRender, }: PortalProps) => null;
@@ -1,3 +0,0 @@
1
- export * from "./Portal";
2
- export * from "./render-portal";
3
- export * from "./portal-utils";
@@ -1 +0,0 @@
1
- export declare const installTheme: (themeId: string) => void;
@@ -1,3 +0,0 @@
1
- import { ReactElement } from "react";
2
- export declare const renderPortal: (component: ReactElement, container: HTMLElement, x: number, y: number, onRender?: () => void) => void;
3
- export declare const createContainer: (x?: number, y?: number) => HTMLDivElement;