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