mantine-contextmenu/dist/index.js

Craft your applications for productivity and meet your users’ expectations by enhancing your Mantine-based UIs with a desktop-grade, lightweight yet fully-featured, dark-theme aware context-menu component, built by the creator of Mantine DataTable

"use strict";"use client";var ie=Object.create;var k=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var se=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var xe=(e,t)=>{for(var n in t)k(e,n,{get:t[n],enumerable:!0})},G=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of se(t))!ae.call(e,i)&&i!==n&&k(e,i,{get:()=>t[i],enumerable:!(a=ue(t,i))||a.enumerable});return e};var U=(e,t,n)=>(n=e!=null?ie(me(e)):{},G(t||!e||!e.__esModule?k(n,"default",{value:e,enumerable:!0}):n,e)),pe=e=>G(k({},"__esModule",{value:!0}),e);var ce={};xe(ce,{ContextMenuCtx:()=>X,ContextMenuDivider:()=>$,ContextMenuItem:()=>_,ContextMenuPortal:()=>V,ContextMenuProvider:()=>le,ContextMenuSettingsCtx:()=>M,humanize:()=>Y,useContextMenu:()=>de});module.exports=pe(ce);var Q=require("@mantine/core"),Z=U(require("clsx")),J=require("react/jsx-runtime");function $({className:e,style:t}){return(0,J.jsx)(Q.Box,{className:(0,Z.default)("mantine-contextmenu-divider",e),style:t})}var o=require("@mantine/core"),B=require("@mantine/hooks"),re=U(require("clsx")),S=require("react");var w=require("@mantine/core"),ne=require("@mantine/hooks"),F=U(require("clsx")),oe=require("react");var b=require("react");var te=require("@mantine/core"),I=require("@mantine/hooks");var K=require("react");var ee=require("react/jsx-runtime");function j({zIndex:e,children:t,onHide:n}){let{repositionOnRepeat:a}=(0,K.useContext)(M);return(0,ee.jsx)("div",{className:"mantine-contextmenu-overlay",style:{zIndex:e},onClick:u=>{u.preventDefault(),n()},onContextMenu:async u=>{if(u.preventDefault(),a){let{clientX:s,clientY:m}=u;try{document.elementsFromPoint(s,m)[1].dispatchEvent(new MouseEvent("contextmenu",{bubbles:!0,clientX:s,clientY:m}))}catch{}}else n()},children:t})}var T=require("react/jsx-runtime");function V({onHide:e,zIndex:t,...n}){return(0,I.useWindowEvent)("resize",e),(0,I.useWindowEvent)("scroll",e),(0,I.useHotkeys)([["Escape",e]]),(0,T.jsx)(te.Portal,{children:(0,T.jsx)(j,{zIndex:t,onHide:e,children:(0,T.jsx)(W,{...n,onHide:e})})})}var z=require("react/jsx-runtime"),D={shadow:"sm",borderRadius:"xs",submenuDelay:500,repositionOnRepeat:!1},M=(0,b.createContext)(D),X=(0,b.createContext)({showContextMenu:()=>()=>{},hideContextMenu:()=>{},isContextMenuVisible:!1});function le({zIndex:e=9999,shadow:t=D.shadow,borderRadius:n=D.borderRadius,submenuDelay:a=D.submenuDelay,repositionOnRepeat:i=D.repositionOnRepeat,children:f}){let[u,s]=(0,b.useState)(null),m=()=>{s(null)},h=(P,x)=>r=>{r.preventDefault(),r.stopPropagation();let{x:v,y:c}="touches"in r?{x:r.touches.item(0).clientX,y:r.touches.item(0).clientY}:{x:r.clientX,y:r.clientY};s({x:v,y:c,content:P,zIndex:x?.zIndex||e,className:x?.className,style:x?.style,classNames:x?.classNames,styles:x?.styles})};return(0,z.jsx)(M.Provider,{value:{shadow:t,borderRadius:n,submenuDelay:a,repositionOnRepeat:i},children:(0,z.jsxs)(X.Provider,{value:{showContextMenu:h,hideContextMenu:m,isContextMenuVisible:!!u},children:[f,u&&(0,z.jsx)(V,{onHide:m,...u})]})})}function de(){return(0,b.useContext)(X)}function Y(e){let t=e.replace(/([a-z\d])([A-Z]+)/g,"$1 $2").replace(/\W|_/g," ").trim().toLowerCase();return`${t.charAt(0).toUpperCase()}${t.slice(1)}`}var A=require("react/jsx-runtime");function W({x:e,y:t,content:n,zIndex:a,onHide:i,className:f,style:u,classNames:s,styles:m}){let{shadow:h,borderRadius:P}=(0,oe.useContext)(M),[x]=(0,ne.useResizeObserver)(),{width:r,height:v}=x.current?.getBoundingClientRect()||{width:0,height:0},c=0,O=0;typeof window<"u"&&({innerWidth:c,innerHeight:O}=window);let{dir:L}=(0,w.useDirection)();return(0,A.jsx)(w.Paper,{ref:x,shadow:h,radius:P,className:(0,F.default)("mantine-contextmenu",f,s?.root),style:[({spacing:{md:y}})=>{let p=(0,w.px)(y);return{zIndex:a,top:t+v+p>O?O-v-p:t,left:L==="ltr"?e+r+p>c?c-r-p:e:c-p-(e-r-p<0?r+p:e)}},u,m?.root],children:Array.isArray(n)?n.map(({key:y,hidden:p,className:R,style:N,onClick:E,items:H,title:q,...l})=>p?null:E||H?(0,A.jsx)(_,{className:(0,F.default)(s?.item,R),style:[m?.item,N],title:q??Y(y),onClick:E,onHide:i,items:H,...l},y):(0,A.jsx)($,{className:(0,F.default)(s?.divider,R),style:[m?.divider,N]},y)):n(i)})}var C=require("react/jsx-runtime");function _({className:e,style:t,icon:n,iconRight:a,title:i,color:f,disabled:u,onClick:s,onHide:m,items:h}){let P=(0,S.useRef)(null),{submenuDelay:x}=(0,S.useContext)(M),r=(0,B.useMediaQuery)("(hover: hover)"),[v,c]=(0,S.useState)(null),{start:O,clear:L}=(0,B.useTimeout)(()=>{let{top:l,right:g}=P.current.getBoundingClientRect();c({x:g,y:l})},x),{start:y,clear:p}=(0,B.useTimeout)(()=>{c(null)},x),R=()=>{p(),O()},N=()=>{L(),y()},E=h&&!u,H=E&&r,q=E?l=>{l.stopPropagation(),R()}:s?l=>{m(),s(l)}:void 0;return(0,C.jsxs)("div",{onMouseEnter:H?R:void 0,onMouseLeave:H?N:void 0,children:[(0,C.jsxs)(o.UnstyledButton,{ref:P,style:[l=>{let{colors:g}=l,d=f?(0,o.parseThemeColor)({color:f,theme:l}).value:void 0;return{"--mantine-contextmenu-item-button-color":d||"var(--mantine-color-text)","--mantine-contextmenu-item-button-hover-bg-color-light":d?(0,o.rgba)(d,.08):(0,o.rgba)(g.gray[4],.25),"--mantine-contextmenu-item-button-hover-bg-color-dark":d?(0,o.rgba)(d,.15):(0,o.rgba)(g.dark[3],.25),"--mantine-contextmenu-item-button-pressed-bg-color-light":d?(0,o.rgba)(d,.2):(0,o.rgba)(g.gray[4],.5),"--mantine-contextmenu-item-button-pressed-bg-color-dark":d?(0,o.rgba)(d,.3):(0,o.rgba)(g.dark[3],.5)}},t],className:(0,re.default)("mantine-contextmenu-item-button",e),disabled:u,onClick:q,children:[n&&(0,C.jsx)(o.Box,{fz:0,mr:"xs",mt:-2,children:n}),(0,C.jsx)("div",{className:"mantine-contextmenu-item-button-title",children:i}),a?(0,C.jsx)(o.Box,{fz:0,ml:"xs",mt:-2,children:a}):h&&(0,C.jsx)(o.Box,{fz:10,mt:-2,ml:"xs",children:"\u25B6"})]}),v&&(0,C.jsx)(W,{content:h,onHide:m,...v})]})}0&&(module.exports={ContextMenuCtx,ContextMenuDivider,ContextMenuItem,ContextMenuPortal,ContextMenuProvider,ContextMenuSettingsCtx,humanize,useContextMenu});
//# sourceMappingURL=index.js.map