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