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