mantine-contextmenu/dist/index.mjs

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