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