@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 +1 -1
- package/package.json +3 -5
- package/types/dialog/Dialog.d.ts +0 -7
- package/types/dialog/index.d.ts +0 -1
- package/types/index.d.ts +0 -4
- package/types/menu/ContextMenu.d.ts +0 -14
- package/types/menu/MenuList.d.ts +0 -32
- package/types/menu/aim/aim.d.ts +0 -13
- package/types/menu/aim/corners.d.ts +0 -9
- package/types/menu/aim/utils.d.ts +0 -4
- package/types/menu/context-menu-provider.d.ts +0 -29
- package/types/menu/index.d.ts +0 -4
- package/types/menu/key-code.d.ts +0 -12
- package/types/menu/list-dom-utils.d.ts +0 -4
- package/types/menu/use-cascade.d.ts +0 -26
- package/types/menu/use-click-away.d.ts +0 -6
- package/types/menu/use-items-with-ids.d.ts +0 -13
- package/types/menu/use-keyboard-navigation.d.ts +0 -26
- package/types/menu/useContextMenu.d.ts +0 -2
- package/types/menu/utils.d.ts +0 -2
- package/types/popup/index.d.ts +0 -1
- package/types/popup/popup-service.d.ts +0 -34
- package/types/portal/Portal.d.ts +0 -8
- package/types/portal/index.d.ts +0 -3
- package/types/portal/portal-utils.d.ts +0 -1
- package/types/portal/render-portal.d.ts +0 -3
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.
|
|
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
|
-
"
|
|
24
|
+
"version": "0.6.10-debug"
|
|
27
25
|
}
|
package/types/dialog/Dialog.d.ts
DELETED
|
@@ -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;
|
package/types/dialog/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Dialog";
|
package/types/index.d.ts
DELETED
|
@@ -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
|
-
};
|
package/types/menu/MenuList.d.ts
DELETED
|
@@ -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;
|
package/types/menu/aim/aim.d.ts
DELETED
|
@@ -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,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;
|
package/types/menu/index.d.ts
DELETED
package/types/menu/key-code.d.ts
DELETED
|
@@ -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,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;
|
package/types/menu/utils.d.ts
DELETED
package/types/popup/index.d.ts
DELETED
|
@@ -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>;
|
package/types/portal/Portal.d.ts
DELETED
package/types/portal/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const installTheme: (themeId: string) => void;
|