mantine-contextmenu 7.6.0 → 7.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +7 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -90,6 +90,11 @@ type ContextMenuItemOptions = {
|
|
|
90
90
|
* Optional context menu item icon.
|
|
91
91
|
*/
|
|
92
92
|
icon?: React.ReactNode;
|
|
93
|
+
/**
|
|
94
|
+
* Optional context menu item icon for the right side of the title.
|
|
95
|
+
* If provided this will overwrite the submenu's ▶ icon
|
|
96
|
+
*/
|
|
97
|
+
iconRight?: React.ReactNode;
|
|
93
98
|
/**
|
|
94
99
|
* Optional context menu item title.
|
|
95
100
|
* If not provided, one will be generated automatically by "humanizing" the key.
|
|
@@ -120,6 +125,7 @@ type ContextMenuItemOptions = {
|
|
|
120
125
|
items: ContextMenuItemOptions[];
|
|
121
126
|
})) | {
|
|
122
127
|
icon?: never;
|
|
128
|
+
iconRight?: never;
|
|
123
129
|
title?: never;
|
|
124
130
|
color?: never;
|
|
125
131
|
disabled?: never;
|
|
@@ -152,7 +158,7 @@ type HideContextMenuFunction = () => void;
|
|
|
152
158
|
type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;
|
|
153
159
|
declare function ContextMenuDivider({ className, style }: ContextMenuDividerProps): react.JSX.Element;
|
|
154
160
|
|
|
155
|
-
declare function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {
|
|
161
|
+
declare function ContextMenuItem({ className, style, icon, iconRight, title, color, disabled, onClick, onHide, items, }: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {
|
|
156
162
|
onHide: () => void;
|
|
157
163
|
}): react.JSX.Element;
|
|
158
164
|
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var re=Object.create;var N=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var se=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty;var xe=(e,t)=>{for(var n in t)N(e,n,{get:t[n],enumerable:!0})},X=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ue(t))!me.call(e,r)&&r!==n&&N(e,r,{get:()=>t[r],enumerable:!(i=ie(t,r))||i.enumerable});return e};var U=(e,t,n)=>(n=e!=null?re(se(e)):{},X(t||!e||!e.__esModule?N(n,"default",{value:e,enumerable:!0}):n,e)),ae=e=>X(N({},"__esModule",{value:!0}),e);var le={};xe(le,{ContextMenuCtx:()=>_,ContextMenuDivider:()=>$,ContextMenuItem:()=>Q,ContextMenuPortal:()=>V,ContextMenuProvider:()=>pe,ContextMenuSettingsCtx:()=>P,humanize:()=>G,useContextMenu:()=>de});module.exports=ae(le);var Y=require("@mantine/core"),Z=U(require("clsx")),J=require("react/jsx-runtime");function $({className:e,style:t}){return(0,J.jsx)(Y.Box,{className:(0,Z.default)("mantine-contextmenu-divider",e),style:t})}var o=require("@mantine/core"),B=require("@mantine/hooks"),oe=U(require("clsx")),w=require("react");var g=require("@mantine/core"),te=require("@mantine/hooks"),A=U(require("clsx")),ne=require("react");var v=require("react");var ee=require("@mantine/core"),R=require("@mantine/hooks");var j=require("react/jsx-runtime");function K({zIndex:e,children:t,onHide:n}){let i=r=>{r.preventDefault(),n()};return(0,j.jsx)("div",{className:"mantine-contextmenu-overlay",style:{zIndex:e},onClick:i,onContextMenu:i,children:t})}var k=require("react/jsx-runtime");function V({onHide:e,zIndex:t,...n}){return(0,R.useWindowEvent)("resize",e),(0,R.useWindowEvent)("scroll",e),(0,R.useHotkeys)([["Escape",e]]),(0,k.jsx)(ee.Portal,{children:(0,k.jsx)(K,{zIndex:t,onHide:e,children:(0,k.jsx)(W,{...n,onHide:e})})})}var z=require("react/jsx-runtime"),T={shadow:"sm",borderRadius:"xs",submenuDelay:500},P=(0,v.createContext)(T),_=(0,v.createContext)({showContextMenu:()=>()=>{},hideContextMenu:()=>{},isContextMenuVisible:!1});function pe({zIndex:e=9999,shadow:t=T.shadow,borderRadius:n=T.borderRadius,submenuDelay:i=T.submenuDelay,children:r}){let[l,c]=(0,v.useState)(null),p=()=>{c(null)},C=(M,s)=>m=>{m.preventDefault(),m.stopPropagation(),c({x:m.clientX,y:m.clientY,content:M,zIndex:s?.zIndex||e,className:s?.className,style:s?.style,classNames:s?.classNames,styles:s?.styles})};return(0,z.jsx)(P.Provider,{value:{shadow:t,borderRadius:n,submenuDelay:i},children:(0,z.jsxs)(_.Provider,{value:{showContextMenu:C,hideContextMenu:p,isContextMenuVisible:!!l},children:[r,l&&(0,z.jsx)(V,{onHide:p,...l})]})})}function de(){return(0,v.useContext)(_)}function G(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 F=require("react/jsx-runtime");function W({x:e,y:t,content:n,zIndex:i,onHide:r,className:l,style:c,classNames:p,styles:C}){let{shadow:M,borderRadius:s}=(0,ne.useContext)(P),[m]=(0,te.useResizeObserver)(),{width:h,height:S}=m.current?.getBoundingClientRect()||{width:0,height:0},f=0,O=0;typeof window<"u"&&({innerWidth:f,innerHeight:O}=window);let{dir:L}=(0,g.useDirection)();return(0,F.jsx)(g.Paper,{ref:m,shadow:M,radius:s,className:(0,A.default)("mantine-contextmenu",l,p?.root),style:[({spacing:{md:y}})=>{let u=(0,g.px)(y);return{zIndex:i,top:t+S+u>O?O-S-u:t,left:L==="ltr"?e+h+u>f?f-h-u:e:f-u-(e-h-u<0?h+u:e)}},c,C?.root],children:Array.isArray(n)?n.map(({key:y,hidden:u,className:H,style:E,onClick:I,items:D,title:q,...x})=>u?null:I||D?(0,F.jsx)(Q,{className:(0,A.default)(p?.item,H),style:[C?.item,E],title:q??G(y),onClick:I,onHide:r,items:D,...x},y):(0,F.jsx)($,{className:(0,A.default)(p?.divider,H),style:[C?.divider,E]},y)):n(r)})}var d=require("react/jsx-runtime");function Q({className:e,style:t,icon:n,iconRight:i,title:r,color:l,disabled:c,onClick:p,onHide:C,items:M}){let s=(0,w.useRef)(null),{submenuDelay:m}=(0,w.useContext)(P),h=(0,B.useMediaQuery)("(hover: hover)"),[S,f]=(0,w.useState)(null),{start:O,clear:L}=(0,B.useTimeout)(()=>{let{top:x,right:b}=s.current.getBoundingClientRect();f({x:b,y:x})},m),{start:y,clear:u}=(0,B.useTimeout)(()=>{f(null)},m),H=()=>{u(),O()},E=()=>{L(),y()},I=M&&!c,D=I&&h,q=I?x=>{x.stopPropagation(),H()}:p?x=>{C(),p(x)}:void 0;return(0,d.jsxs)("div",{onMouseEnter:D?H:void 0,onMouseLeave:D?E:void 0,children:[(0,d.jsxs)(o.UnstyledButton,{ref:s,style:[x=>{let{colors:b}=x,a=l?(0,o.parseThemeColor)({color:l,theme:x}).value:void 0;return{"--mantine-contextmenu-item-button-color":a||"var(--mantine-color-text)","--mantine-contextmenu-item-button-hover-bg-color-light":a?(0,o.rgba)(a,.08):(0,o.rgba)(b.gray[4],.25),"--mantine-contextmenu-item-button-hover-bg-color-dark":a?(0,o.rgba)(a,.15):(0,o.rgba)(b.dark[3],.25),"--mantine-contextmenu-item-button-pressed-bg-color-light":a?(0,o.rgba)(a,.2):(0,o.rgba)(b.gray[4],.5),"--mantine-contextmenu-item-button-pressed-bg-color-dark":a?(0,o.rgba)(a,.3):(0,o.rgba)(b.dark[3],.5)}},t],className:(0,oe.default)("mantine-contextmenu-item-button",e),disabled:c,onClick:q,children:[n&&(0,d.jsx)(o.Box,{fz:0,mr:"xs",mt:-2,children:n}),(0,d.jsx)("div",{className:"mantine-contextmenu-item-button-title",children:r}),i?(0,d.jsx)(o.Box,{fz:0,ml:"xs",mt:-2,children:i}):M&&(0,d.jsx)(o.Box,{fz:10,mt:-2,ml:"xs",children:"\u25B6"})]}),S&&(0,d.jsx)(W,{content:M,onHide:C,...S})]})}0&&(module.exports={ContextMenuCtx,ContextMenuDivider,ContextMenuItem,ContextMenuPortal,ContextMenuProvider,ContextMenuSettingsCtx,humanize,useContextMenu});
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../package/index.ts","../package/ContextMenuDivider.tsx","../package/ContextMenuItem.tsx","../package/ContextMenu.tsx","../package/ContextMenuProvider.tsx","../package/ContextMenuPortal.tsx","../package/ContextMenuOverlay.tsx","../package/utils.ts"],"sourcesContent":["'use client';\n\nexport * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './types';\nexport * from './utils';\n","import { Box } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { ContextMenuItemOptions } from './types';\n\nexport type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;\n\nexport function ContextMenuDivider({ className, style }: ContextMenuDividerProps) {\n return <Box className={clsx('mantine-contextmenu-divider', className)} style={style} />;\n}\n","import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { useMediaQuery, useTimeout } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext, useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n className,\n style,\n icon,\n title,\n color,\n disabled,\n onClick,\n onHide,\n items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n const ref = useRef<HTMLButtonElement>(null);\n const { submenuDelay } = useContext(ContextMenuSettingsCtx);\n\n const hoverAvailable = useMediaQuery(`(hover: hover)`);\n\n const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n }, submenuDelay);\n\n const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {\n setSubmenuPosition(null);\n }, submenuDelay);\n\n const showSubmenu = () => {\n stopHidingSubmenu();\n startShowingSubmenu();\n };\n\n const hideSubmenu = () => {\n stopShowingSubmenu();\n startHidingSubmenu();\n };\n\n const hasSubmenu = items && !disabled;\n const showSubmenuOnHover = hasSubmenu && hoverAvailable;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = hasSubmenu\n ? (e) => {\n e.stopPropagation();\n showSubmenu();\n }\n : onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n return (\n <div\n onMouseEnter={showSubmenuOnHover ? showSubmenu : undefined}\n onMouseLeave={showSubmenuOnHover ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n style={[\n (theme) => {\n const { colors } = theme;\n const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n return {\n '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n ? rgba(parsedColor, 0.08)\n : rgba(colors.gray[4], 0.25),\n '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n ? rgba(parsedColor, 0.15)\n : rgba(colors.dark[3], 0.25),\n '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n ? rgba(parsedColor, 0.2)\n : rgba(colors.gray[4], 0.5),\n '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n ? rgba(parsedColor, 0.3)\n : rgba(colors.dark[3], 0.5),\n };\n },\n style,\n ]}\n className={clsx('mantine-contextmenu-item-button', className)}\n disabled={disabled}\n onClick={handleClick}\n >\n {icon && (\n <Box fz={0} mr=\"xs\" mt={-2}>\n {icon}\n </Box>\n )}\n <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n {items && (\n <Box fz={10} mt={-2} ml=\"xs\">\n ▶\n </Box>\n )}\n </UnstyledButton>\n {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n </div>\n );\n}\n","import { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n x: number;\n y: number;\n content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n const [paperRef] = useResizeObserver<HTMLDivElement>();\n const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n let windowWidth = 0;\n let windowHeight = 0;\n if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n const { dir } = useDirection();\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={clsx('mantine-contextmenu', className, classNames?.root)}\n style={[\n ({ spacing: { md } }) => {\n const mdSpacing = px(md) as number;\n return {\n zIndex,\n top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n left:\n dir === 'ltr'\n ? x + width + mdSpacing > windowWidth\n ? windowWidth - width - mdSpacing\n : x\n : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n };\n },\n style,\n styles?.root,\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) =>\n hidden ? null : onClick || items ? (\n <ContextMenuItem\n key={key}\n className={clsx(classNames?.item, className)}\n style={[styles?.item, style]}\n title={title ?? humanize(key)}\n onClick={onClick}\n onHide={onHide}\n items={items}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={clsx(classNames?.divider, className)}\n style={[styles?.divider, style]}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n","import { createContext, useContext, useState } from 'react';\nimport type { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type {\n ContextMenuOptions,\n ContextMenuProviderProps,\n ContextMenuSettings,\n HideContextMenuFunction,\n ShowContextMenuFunction,\n WithRequiredProperty,\n} from './types';\n\nconst DEFAULT_SETTINGS: WithRequiredProperty<ContextMenuSettings, 'shadow' | 'borderRadius' | 'submenuDelay'> = {\n shadow: 'sm',\n borderRadius: 'xs',\n submenuDelay: 500,\n};\n\nexport const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);\nexport const ContextMenuCtx = createContext<{\n /**\n * Function that shows the context menu.\n */\n showContextMenu: ShowContextMenuFunction;\n\n /**\n * Function that hides the context menu.\n */\n hideContextMenu: HideContextMenuFunction;\n\n /**\n * Boolean indicating whether the context menu is currently visible.\n */\n isContextMenuVisible: boolean;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined, isContextMenuVisible: false });\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n zIndex = 9999,\n shadow = DEFAULT_SETTINGS.shadow,\n borderRadius = DEFAULT_SETTINGS.borderRadius,\n submenuDelay = DEFAULT_SETTINGS.submenuDelay,\n children,\n}: ContextMenuProviderProps) {\n const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n const hideContextMenu = () => {\n setData(null);\n };\n\n const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n e.preventDefault();\n e.stopPropagation();\n setData({\n x: e.clientX,\n y: e.clientY,\n content,\n zIndex: options?.zIndex || zIndex,\n className: options?.className,\n style: options?.style,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n return (\n <ContextMenuSettingsCtx.Provider value={{ shadow, borderRadius, submenuDelay }}>\n <ContextMenuCtx.Provider value={{ showContextMenu, hideContextMenu, isContextMenuVisible: !!data }}>\n {children}\n {data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}\n </ContextMenuCtx.Provider>\n </ContextMenuSettingsCtx.Provider>\n );\n}\n\n/**\n * Hook returning functions that show and hide the context menu.\n */\nexport function useContextMenu() {\n return useContext(ContextMenuCtx);\n}\n","import { Portal } from '@mantine/core';\nimport { useHotkeys, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\nimport { ContextMenuOverlay } from './ContextMenuOverlay';\n\nexport type ContextMenuPortalProps = ContextMenuProps & {\n zIndex?: number;\n};\n\nexport function ContextMenuPortal({ onHide, zIndex, ...otherProps }: ContextMenuPortalProps) {\n useWindowEvent('resize', onHide);\n useWindowEvent('scroll', onHide);\n useHotkeys([['Escape', onHide]]);\n\n return (\n <Portal>\n <ContextMenuOverlay zIndex={zIndex} onHide={onHide}>\n <ContextMenu {...otherProps} onHide={onHide} />\n </ContextMenuOverlay>\n </Portal>\n );\n}\n","export type ContextMenuOverlayProps = React.PropsWithChildren<{\n zIndex: number | undefined;\n onHide: () => void;\n}>;\n\nexport function ContextMenuOverlay({ zIndex, children, onHide }: ContextMenuOverlayProps) {\n const handleHide = (e: React.MouseEvent) => {\n e.preventDefault();\n onHide();\n };\n return (\n <div className=\"mantine-contextmenu-overlay\" style={{ zIndex }} onClick={handleHide} onContextMenu={handleHide}>\n {children}\n </div>\n );\n}\n","/**\n * Utility function that returns a humanized version of a string, e.g. \"camelCase\" -> \"Camel Case\"\n */\nexport function humanize(value: string) {\n const str = value\n .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n .replace(/\\W|_/g, ' ')\n .trim()\n .toLowerCase();\n return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n}\n"],"mappings":"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","names":["package_exports","__export","ContextMenuCtx","ContextMenuDivider","ContextMenuItem","ContextMenuPortal","ContextMenuProvider","ContextMenuSettingsCtx","humanize","useContextMenu","__toCommonJS","import_core","import_clsx","import_jsx_runtime","ContextMenuDivider","className","style","clsx","import_core","import_hooks","import_clsx","import_react","import_core","import_hooks","import_clsx","import_react","import_react","import_core","import_hooks","import_jsx_runtime","ContextMenuOverlay","zIndex","children","onHide","handleHide","e","import_jsx_runtime","ContextMenuPortal","onHide","zIndex","otherProps","ContextMenuOverlay","ContextMenu","import_jsx_runtime","DEFAULT_SETTINGS","ContextMenuSettingsCtx","ContextMenuCtx","ContextMenuProvider","zIndex","shadow","borderRadius","submenuDelay","children","data","setData","hideContextMenu","showContextMenu","content","options","e","ContextMenuPortal","useContextMenu","humanize","value","str","import_jsx_runtime","ContextMenu","x","y","content","zIndex","onHide","className","style","classNames","styles","shadow","borderRadius","ContextMenuSettingsCtx","paperRef","width","height","windowWidth","windowHeight","dir","clsx","md","mdSpacing","key","hidden","onClick","items","title","otherOptions","ContextMenuItem","humanize","ContextMenuDivider","import_jsx_runtime","ContextMenuItem","className","style","icon","title","color","disabled","onClick","onHide","items","ref","submenuDelay","ContextMenuSettingsCtx","hoverAvailable","submenuPosition","setSubmenuPosition","startShowingSubmenu","stopShowingSubmenu","y","x","startHidingSubmenu","stopHidingSubmenu","showSubmenu","hideSubmenu","hasSubmenu","showSubmenuOnHover","handleClick","e","theme","colors","parsedColor","clsx","ContextMenu"]}
|
|
1
|
+
{"version":3,"sources":["../package/index.ts","../package/ContextMenuDivider.tsx","../package/ContextMenuItem.tsx","../package/ContextMenu.tsx","../package/ContextMenuProvider.tsx","../package/ContextMenuPortal.tsx","../package/ContextMenuOverlay.tsx","../package/utils.ts"],"sourcesContent":["'use client';\n\nexport * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './types';\nexport * from './utils';\n","import { Box } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { ContextMenuItemOptions } from './types';\n\nexport type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;\n\nexport function ContextMenuDivider({ className, style }: ContextMenuDividerProps) {\n return <Box className={clsx('mantine-contextmenu-divider', className)} style={style} />;\n}\n","import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { useMediaQuery, useTimeout } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext, useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n className,\n style,\n icon,\n iconRight,\n title,\n color,\n disabled,\n onClick,\n onHide,\n items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n const ref = useRef<HTMLButtonElement>(null);\n const { submenuDelay } = useContext(ContextMenuSettingsCtx);\n\n const hoverAvailable = useMediaQuery(`(hover: hover)`);\n\n const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n }, submenuDelay);\n\n const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {\n setSubmenuPosition(null);\n }, submenuDelay);\n\n const showSubmenu = () => {\n stopHidingSubmenu();\n startShowingSubmenu();\n };\n\n const hideSubmenu = () => {\n stopShowingSubmenu();\n startHidingSubmenu();\n };\n\n const hasSubmenu = items && !disabled;\n const showSubmenuOnHover = hasSubmenu && hoverAvailable;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = hasSubmenu\n ? (e) => {\n e.stopPropagation();\n showSubmenu();\n }\n : onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n return (\n <div\n onMouseEnter={showSubmenuOnHover ? showSubmenu : undefined}\n onMouseLeave={showSubmenuOnHover ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n style={[\n (theme) => {\n const { colors } = theme;\n const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n return {\n '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n ? rgba(parsedColor, 0.08)\n : rgba(colors.gray[4], 0.25),\n '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n ? rgba(parsedColor, 0.15)\n : rgba(colors.dark[3], 0.25),\n '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n ? rgba(parsedColor, 0.2)\n : rgba(colors.gray[4], 0.5),\n '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n ? rgba(parsedColor, 0.3)\n : rgba(colors.dark[3], 0.5),\n };\n },\n style,\n ]}\n className={clsx('mantine-contextmenu-item-button', className)}\n disabled={disabled}\n onClick={handleClick}\n >\n {icon && (\n <Box fz={0} mr=\"xs\" mt={-2}>\n {icon}\n </Box>\n )}\n <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n { iconRight ? (\n <Box fz={0} ml=\"xs\" mt={-2}>\n {iconRight}\n </Box>\n ) : items && (\n <Box fz={10} mt={-2} ml=\"xs\">\n ▶\n </Box>\n )}\n </UnstyledButton>\n {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n </div>\n );\n}\n","import { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n x: number;\n y: number;\n content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n const [paperRef] = useResizeObserver<HTMLDivElement>();\n const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n let windowWidth = 0;\n let windowHeight = 0;\n if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n const { dir } = useDirection();\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={clsx('mantine-contextmenu', className, classNames?.root)}\n style={[\n ({ spacing: { md } }) => {\n const mdSpacing = px(md) as number;\n return {\n zIndex,\n top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n left:\n dir === 'ltr'\n ? x + width + mdSpacing > windowWidth\n ? windowWidth - width - mdSpacing\n : x\n : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n };\n },\n style,\n styles?.root,\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) =>\n hidden ? null : onClick || items ? (\n <ContextMenuItem\n key={key}\n className={clsx(classNames?.item, className)}\n style={[styles?.item, style]}\n title={title ?? humanize(key)}\n onClick={onClick}\n onHide={onHide}\n items={items}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={clsx(classNames?.divider, className)}\n style={[styles?.divider, style]}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n","import { createContext, useContext, useState } from 'react';\nimport type { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type {\n ContextMenuOptions,\n ContextMenuProviderProps,\n ContextMenuSettings,\n HideContextMenuFunction,\n ShowContextMenuFunction,\n WithRequiredProperty,\n} from './types';\n\nconst DEFAULT_SETTINGS: WithRequiredProperty<ContextMenuSettings, 'shadow' | 'borderRadius' | 'submenuDelay'> = {\n shadow: 'sm',\n borderRadius: 'xs',\n submenuDelay: 500,\n};\n\nexport const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);\nexport const ContextMenuCtx = createContext<{\n /**\n * Function that shows the context menu.\n */\n showContextMenu: ShowContextMenuFunction;\n\n /**\n * Function that hides the context menu.\n */\n hideContextMenu: HideContextMenuFunction;\n\n /**\n * Boolean indicating whether the context menu is currently visible.\n */\n isContextMenuVisible: boolean;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined, isContextMenuVisible: false });\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n zIndex = 9999,\n shadow = DEFAULT_SETTINGS.shadow,\n borderRadius = DEFAULT_SETTINGS.borderRadius,\n submenuDelay = DEFAULT_SETTINGS.submenuDelay,\n children,\n}: ContextMenuProviderProps) {\n const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n const hideContextMenu = () => {\n setData(null);\n };\n\n const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n e.preventDefault();\n e.stopPropagation();\n setData({\n x: e.clientX,\n y: e.clientY,\n content,\n zIndex: options?.zIndex || zIndex,\n className: options?.className,\n style: options?.style,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n return (\n <ContextMenuSettingsCtx.Provider value={{ shadow, borderRadius, submenuDelay }}>\n <ContextMenuCtx.Provider value={{ showContextMenu, hideContextMenu, isContextMenuVisible: !!data }}>\n {children}\n {data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}\n </ContextMenuCtx.Provider>\n </ContextMenuSettingsCtx.Provider>\n );\n}\n\n/**\n * Hook returning functions that show and hide the context menu.\n */\nexport function useContextMenu() {\n return useContext(ContextMenuCtx);\n}\n","import { Portal } from '@mantine/core';\nimport { useHotkeys, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\nimport { ContextMenuOverlay } from './ContextMenuOverlay';\n\nexport type ContextMenuPortalProps = ContextMenuProps & {\n zIndex?: number;\n};\n\nexport function ContextMenuPortal({ onHide, zIndex, ...otherProps }: ContextMenuPortalProps) {\n useWindowEvent('resize', onHide);\n useWindowEvent('scroll', onHide);\n useHotkeys([['Escape', onHide]]);\n\n return (\n <Portal>\n <ContextMenuOverlay zIndex={zIndex} onHide={onHide}>\n <ContextMenu {...otherProps} onHide={onHide} />\n </ContextMenuOverlay>\n </Portal>\n );\n}\n","export type ContextMenuOverlayProps = React.PropsWithChildren<{\n zIndex: number | undefined;\n onHide: () => void;\n}>;\n\nexport function ContextMenuOverlay({ zIndex, children, onHide }: ContextMenuOverlayProps) {\n const handleHide = (e: React.MouseEvent) => {\n e.preventDefault();\n onHide();\n };\n return (\n <div className=\"mantine-contextmenu-overlay\" style={{ zIndex }} onClick={handleHide} onContextMenu={handleHide}>\n {children}\n </div>\n );\n}\n","/**\n * Utility function that returns a humanized version of a string, e.g. \"camelCase\" -> \"Camel Case\"\n */\nexport function humanize(value: string) {\n const str = value\n .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n .replace(/\\W|_/g, ' ')\n .trim()\n .toLowerCase();\n return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n}\n"],"mappings":"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","names":["package_exports","__export","ContextMenuCtx","ContextMenuDivider","ContextMenuItem","ContextMenuPortal","ContextMenuProvider","ContextMenuSettingsCtx","humanize","useContextMenu","__toCommonJS","import_core","import_clsx","import_jsx_runtime","ContextMenuDivider","className","style","clsx","import_core","import_hooks","import_clsx","import_react","import_core","import_hooks","import_clsx","import_react","import_react","import_core","import_hooks","import_jsx_runtime","ContextMenuOverlay","zIndex","children","onHide","handleHide","e","import_jsx_runtime","ContextMenuPortal","onHide","zIndex","otherProps","ContextMenuOverlay","ContextMenu","import_jsx_runtime","DEFAULT_SETTINGS","ContextMenuSettingsCtx","ContextMenuCtx","ContextMenuProvider","zIndex","shadow","borderRadius","submenuDelay","children","data","setData","hideContextMenu","showContextMenu","content","options","e","ContextMenuPortal","useContextMenu","humanize","value","str","import_jsx_runtime","ContextMenu","x","y","content","zIndex","onHide","className","style","classNames","styles","shadow","borderRadius","ContextMenuSettingsCtx","paperRef","width","height","windowWidth","windowHeight","dir","clsx","md","mdSpacing","key","hidden","onClick","items","title","otherOptions","ContextMenuItem","humanize","ContextMenuDivider","import_jsx_runtime","ContextMenuItem","className","style","icon","iconRight","title","color","disabled","onClick","onHide","items","ref","submenuDelay","ContextMenuSettingsCtx","hoverAvailable","submenuPosition","setSubmenuPosition","startShowingSubmenu","stopShowingSubmenu","y","x","startHidingSubmenu","stopHidingSubmenu","showSubmenu","hideSubmenu","hasSubmenu","showSubmenuOnHover","handleClick","e","theme","colors","parsedColor","clsx","ContextMenu"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Box as
|
|
1
|
+
"use client";import{Box as Q}from"@mantine/core";import X from"clsx";import{jsx as Y}from"react/jsx-runtime";function W({className:e,style:t}){return Y(Q,{className:X("mantine-contextmenu-divider",e),style:t})}import{Box as k,UnstyledButton as se,parseThemeColor as me,rgba as l}from"@mantine/core";import{useMediaQuery as xe,useTimeout as _}from"@mantine/hooks";import ae from"clsx";import{useContext as pe,useRef as de,useState as le}from"react";import{Paper as ne,px as oe,useDirection as re}from"@mantine/core";import{useResizeObserver as ie}from"@mantine/hooks";import E from"clsx";import{useContext as ue}from"react";import{createContext as q,useContext as j,useState as ee}from"react";import{Portal as J}from"@mantine/core";import{useHotkeys as K,useWindowEvent as A}from"@mantine/hooks";import{jsx as Z}from"react/jsx-runtime";function T({zIndex:e,children:t,onHide:n}){let m=a=>{a.preventDefault(),n()};return Z("div",{className:"mantine-contextmenu-overlay",style:{zIndex:e},onClick:m,onContextMenu:m,children:t})}import{jsx as B}from"react/jsx-runtime";function F({onHide:e,zIndex:t,...n}){return A("resize",e),A("scroll",e),K([["Escape",e]]),B(J,{children:B(T,{zIndex:t,onHide:e,children:B(I,{...n,onHide:e})})})}import{jsx as L,jsxs as te}from"react/jsx-runtime";var D={shadow:"sm",borderRadius:"xs",submenuDelay:500},S=q(D),U=q({showContextMenu:()=>()=>{},hideContextMenu:()=>{},isContextMenuVisible:!1});function Ie({zIndex:e=9999,shadow:t=D.shadow,borderRadius:n=D.borderRadius,submenuDelay:m=D.submenuDelay,children:a}){let[p,C]=ee(null),x=()=>{C(null)},d=(c,r)=>i=>{i.preventDefault(),i.stopPropagation(),C({x:i.clientX,y:i.clientY,content:c,zIndex:r?.zIndex||e,className:r?.className,style:r?.style,classNames:r?.classNames,styles:r?.styles})};return L(S.Provider,{value:{shadow:t,borderRadius:n,submenuDelay:m},children:te(U.Provider,{value:{showContextMenu:d,hideContextMenu:x,isContextMenuVisible:!!p},children:[a,p&&L(F,{onHide:x,...p})]})})}function De(){return j(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 I({x:e,y:t,content:n,zIndex:m,onHide:a,className:p,style:C,classNames:x,styles:d}){let{shadow:c,borderRadius:r}=ue(S),[i]=ie(),{width:y,height:h}=i.current?.getBoundingClientRect()||{width:0,height:0},M=0,b=0;typeof window<"u"&&({innerWidth:M,innerHeight:b}=window);let{dir:R}=re();return N(ne,{ref:i,shadow:c,radius:r,className:E("mantine-contextmenu",p,x?.root),style:[({spacing:{md:f}})=>{let o=oe(f);return{zIndex:m,top:t+h+o>b?b-h-o:t,left:R==="ltr"?e+y+o>M?M-y-o:e:M-o-(e-y-o<0?y+o:e)}},C,d?.root],children:Array.isArray(n)?n.map(({key:f,hidden:o,className:P,style:H,onClick:g,items:w,title:z,...u})=>o?null:g||w?N(V,{className:E(x?.item,P),style:[d?.item,H],title:z??$(f),onClick:g,onHide:a,items:w,...u},f):N(W,{className:E(x?.divider,P),style:[d?.divider,H]},f)):n(a)})}import{jsx as O,jsxs as G}from"react/jsx-runtime";function V({className:e,style:t,icon:n,iconRight:m,title:a,color:p,disabled:C,onClick:x,onHide:d,items:c}){let r=de(null),{submenuDelay:i}=pe(S),y=xe("(hover: hover)"),[h,M]=le(null),{start:b,clear:R}=_(()=>{let{top:u,right:v}=r.current.getBoundingClientRect();M({x:v,y:u})},i),{start:f,clear:o}=_(()=>{M(null)},i),P=()=>{o(),b()},H=()=>{R(),f()},g=c&&!C,w=g&&y,z=g?u=>{u.stopPropagation(),P()}:x?u=>{d(),x(u)}:void 0;return G("div",{onMouseEnter:w?P:void 0,onMouseLeave:w?H:void 0,children:[G(se,{ref:r,style:[u=>{let{colors:v}=u,s=p?me({color:p,theme:u}).value:void 0;return{"--mantine-contextmenu-item-button-color":s||"var(--mantine-color-text)","--mantine-contextmenu-item-button-hover-bg-color-light":s?l(s,.08):l(v.gray[4],.25),"--mantine-contextmenu-item-button-hover-bg-color-dark":s?l(s,.15):l(v.dark[3],.25),"--mantine-contextmenu-item-button-pressed-bg-color-light":s?l(s,.2):l(v.gray[4],.5),"--mantine-contextmenu-item-button-pressed-bg-color-dark":s?l(s,.3):l(v.dark[3],.5)}},t],className:ae("mantine-contextmenu-item-button",e),disabled:C,onClick:z,children:[n&&O(k,{fz:0,mr:"xs",mt:-2,children:n}),O("div",{className:"mantine-contextmenu-item-button-title",children:a}),m?O(k,{fz:0,ml:"xs",mt:-2,children:m}):c&&O(k,{fz:10,mt:-2,ml:"xs",children:"\u25B6"})]}),h&&O(I,{content:c,onHide:d,...h})]})}export{U as ContextMenuCtx,W as ContextMenuDivider,V as ContextMenuItem,F as ContextMenuPortal,Ie as ContextMenuProvider,S as ContextMenuSettingsCtx,$ as humanize,De as useContextMenu};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../package/ContextMenuDivider.tsx","../package/ContextMenuItem.tsx","../package/ContextMenu.tsx","../package/ContextMenuProvider.tsx","../package/ContextMenuPortal.tsx","../package/ContextMenuOverlay.tsx","../package/utils.ts"],"sourcesContent":["import { Box } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { ContextMenuItemOptions } from './types';\n\nexport type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;\n\nexport function ContextMenuDivider({ className, style }: ContextMenuDividerProps) {\n return <Box className={clsx('mantine-contextmenu-divider', className)} style={style} />;\n}\n","import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { useMediaQuery, useTimeout } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext, useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n className,\n style,\n icon,\n title,\n color,\n disabled,\n onClick,\n onHide,\n items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n const ref = useRef<HTMLButtonElement>(null);\n const { submenuDelay } = useContext(ContextMenuSettingsCtx);\n\n const hoverAvailable = useMediaQuery(`(hover: hover)`);\n\n const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n }, submenuDelay);\n\n const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {\n setSubmenuPosition(null);\n }, submenuDelay);\n\n const showSubmenu = () => {\n stopHidingSubmenu();\n startShowingSubmenu();\n };\n\n const hideSubmenu = () => {\n stopShowingSubmenu();\n startHidingSubmenu();\n };\n\n const hasSubmenu = items && !disabled;\n const showSubmenuOnHover = hasSubmenu && hoverAvailable;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = hasSubmenu\n ? (e) => {\n e.stopPropagation();\n showSubmenu();\n }\n : onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n return (\n <div\n onMouseEnter={showSubmenuOnHover ? showSubmenu : undefined}\n onMouseLeave={showSubmenuOnHover ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n style={[\n (theme) => {\n const { colors } = theme;\n const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n return {\n '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n ? rgba(parsedColor, 0.08)\n : rgba(colors.gray[4], 0.25),\n '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n ? rgba(parsedColor, 0.15)\n : rgba(colors.dark[3], 0.25),\n '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n ? rgba(parsedColor, 0.2)\n : rgba(colors.gray[4], 0.5),\n '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n ? rgba(parsedColor, 0.3)\n : rgba(colors.dark[3], 0.5),\n };\n },\n style,\n ]}\n className={clsx('mantine-contextmenu-item-button', className)}\n disabled={disabled}\n onClick={handleClick}\n >\n {icon && (\n <Box fz={0} mr=\"xs\" mt={-2}>\n {icon}\n </Box>\n )}\n <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n {items && (\n <Box fz={10} mt={-2} ml=\"xs\">\n ▶\n </Box>\n )}\n </UnstyledButton>\n {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n </div>\n );\n}\n","import { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n x: number;\n y: number;\n content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n const [paperRef] = useResizeObserver<HTMLDivElement>();\n const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n let windowWidth = 0;\n let windowHeight = 0;\n if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n const { dir } = useDirection();\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={clsx('mantine-contextmenu', className, classNames?.root)}\n style={[\n ({ spacing: { md } }) => {\n const mdSpacing = px(md) as number;\n return {\n zIndex,\n top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n left:\n dir === 'ltr'\n ? x + width + mdSpacing > windowWidth\n ? windowWidth - width - mdSpacing\n : x\n : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n };\n },\n style,\n styles?.root,\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) =>\n hidden ? null : onClick || items ? (\n <ContextMenuItem\n key={key}\n className={clsx(classNames?.item, className)}\n style={[styles?.item, style]}\n title={title ?? humanize(key)}\n onClick={onClick}\n onHide={onHide}\n items={items}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={clsx(classNames?.divider, className)}\n style={[styles?.divider, style]}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n","import { createContext, useContext, useState } from 'react';\nimport type { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type {\n ContextMenuOptions,\n ContextMenuProviderProps,\n ContextMenuSettings,\n HideContextMenuFunction,\n ShowContextMenuFunction,\n WithRequiredProperty,\n} from './types';\n\nconst DEFAULT_SETTINGS: WithRequiredProperty<ContextMenuSettings, 'shadow' | 'borderRadius' | 'submenuDelay'> = {\n shadow: 'sm',\n borderRadius: 'xs',\n submenuDelay: 500,\n};\n\nexport const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);\nexport const ContextMenuCtx = createContext<{\n /**\n * Function that shows the context menu.\n */\n showContextMenu: ShowContextMenuFunction;\n\n /**\n * Function that hides the context menu.\n */\n hideContextMenu: HideContextMenuFunction;\n\n /**\n * Boolean indicating whether the context menu is currently visible.\n */\n isContextMenuVisible: boolean;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined, isContextMenuVisible: false });\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n zIndex = 9999,\n shadow = DEFAULT_SETTINGS.shadow,\n borderRadius = DEFAULT_SETTINGS.borderRadius,\n submenuDelay = DEFAULT_SETTINGS.submenuDelay,\n children,\n}: ContextMenuProviderProps) {\n const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n const hideContextMenu = () => {\n setData(null);\n };\n\n const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n e.preventDefault();\n e.stopPropagation();\n setData({\n x: e.clientX,\n y: e.clientY,\n content,\n zIndex: options?.zIndex || zIndex,\n className: options?.className,\n style: options?.style,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n return (\n <ContextMenuSettingsCtx.Provider value={{ shadow, borderRadius, submenuDelay }}>\n <ContextMenuCtx.Provider value={{ showContextMenu, hideContextMenu, isContextMenuVisible: !!data }}>\n {children}\n {data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}\n </ContextMenuCtx.Provider>\n </ContextMenuSettingsCtx.Provider>\n );\n}\n\n/**\n * Hook returning functions that show and hide the context menu.\n */\nexport function useContextMenu() {\n return useContext(ContextMenuCtx);\n}\n","import { Portal } from '@mantine/core';\nimport { useHotkeys, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\nimport { ContextMenuOverlay } from './ContextMenuOverlay';\n\nexport type ContextMenuPortalProps = ContextMenuProps & {\n zIndex?: number;\n};\n\nexport function ContextMenuPortal({ onHide, zIndex, ...otherProps }: ContextMenuPortalProps) {\n useWindowEvent('resize', onHide);\n useWindowEvent('scroll', onHide);\n useHotkeys([['Escape', onHide]]);\n\n return (\n <Portal>\n <ContextMenuOverlay zIndex={zIndex} onHide={onHide}>\n <ContextMenu {...otherProps} onHide={onHide} />\n </ContextMenuOverlay>\n </Portal>\n );\n}\n","export type ContextMenuOverlayProps = React.PropsWithChildren<{\n zIndex: number | undefined;\n onHide: () => void;\n}>;\n\nexport function ContextMenuOverlay({ zIndex, children, onHide }: ContextMenuOverlayProps) {\n const handleHide = (e: React.MouseEvent) => {\n e.preventDefault();\n onHide();\n };\n return (\n <div className=\"mantine-contextmenu-overlay\" style={{ zIndex }} onClick={handleHide} onContextMenu={handleHide}>\n {children}\n </div>\n );\n}\n","/**\n * Utility function that returns a humanized version of a string, e.g. \"camelCase\" -> \"Camel Case\"\n */\nexport function humanize(value: string) {\n const str = value\n .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n .replace(/\\W|_/g, ' ')\n .trim()\n .toLowerCase();\n return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n}\n"],"mappings":"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","names":["Box","clsx","jsx","ContextMenuDivider","className","style","Box","UnstyledButton","parseThemeColor","rgba","useMediaQuery","useTimeout","clsx","useContext","useRef","useState","Paper","px","useDirection","useResizeObserver","clsx","useContext","createContext","useContext","useState","Portal","useHotkeys","useWindowEvent","jsx","ContextMenuOverlay","zIndex","children","onHide","handleHide","e","jsx","ContextMenuPortal","onHide","zIndex","otherProps","useWindowEvent","useHotkeys","Portal","ContextMenuOverlay","ContextMenu","jsx","jsxs","DEFAULT_SETTINGS","ContextMenuSettingsCtx","createContext","ContextMenuCtx","ContextMenuProvider","zIndex","shadow","borderRadius","submenuDelay","children","data","setData","useState","hideContextMenu","showContextMenu","content","options","e","ContextMenuPortal","useContextMenu","useContext","humanize","value","str","jsx","ContextMenu","x","y","content","zIndex","onHide","className","style","classNames","styles","shadow","borderRadius","useContext","ContextMenuSettingsCtx","paperRef","useResizeObserver","width","height","windowWidth","windowHeight","dir","useDirection","Paper","clsx","md","mdSpacing","px","key","hidden","onClick","items","title","otherOptions","ContextMenuItem","humanize","ContextMenuDivider","jsx","jsxs","ContextMenuItem","className","style","icon","title","color","disabled","onClick","onHide","items","ref","useRef","submenuDelay","useContext","ContextMenuSettingsCtx","hoverAvailable","useMediaQuery","submenuPosition","setSubmenuPosition","useState","startShowingSubmenu","stopShowingSubmenu","useTimeout","y","x","startHidingSubmenu","stopHidingSubmenu","showSubmenu","hideSubmenu","hasSubmenu","showSubmenuOnHover","handleClick","e","UnstyledButton","theme","colors","parsedColor","parseThemeColor","rgba","clsx","Box","ContextMenu"]}
|
|
1
|
+
{"version":3,"sources":["../package/ContextMenuDivider.tsx","../package/ContextMenuItem.tsx","../package/ContextMenu.tsx","../package/ContextMenuProvider.tsx","../package/ContextMenuPortal.tsx","../package/ContextMenuOverlay.tsx","../package/utils.ts"],"sourcesContent":["import { Box } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { ContextMenuItemOptions } from './types';\n\nexport type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;\n\nexport function ContextMenuDivider({ className, style }: ContextMenuDividerProps) {\n return <Box className={clsx('mantine-contextmenu-divider', className)} style={style} />;\n}\n","import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { useMediaQuery, useTimeout } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext, useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n className,\n style,\n icon,\n iconRight,\n title,\n color,\n disabled,\n onClick,\n onHide,\n items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n const ref = useRef<HTMLButtonElement>(null);\n const { submenuDelay } = useContext(ContextMenuSettingsCtx);\n\n const hoverAvailable = useMediaQuery(`(hover: hover)`);\n\n const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n }, submenuDelay);\n\n const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {\n setSubmenuPosition(null);\n }, submenuDelay);\n\n const showSubmenu = () => {\n stopHidingSubmenu();\n startShowingSubmenu();\n };\n\n const hideSubmenu = () => {\n stopShowingSubmenu();\n startHidingSubmenu();\n };\n\n const hasSubmenu = items && !disabled;\n const showSubmenuOnHover = hasSubmenu && hoverAvailable;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = hasSubmenu\n ? (e) => {\n e.stopPropagation();\n showSubmenu();\n }\n : onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n return (\n <div\n onMouseEnter={showSubmenuOnHover ? showSubmenu : undefined}\n onMouseLeave={showSubmenuOnHover ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n style={[\n (theme) => {\n const { colors } = theme;\n const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n return {\n '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n ? rgba(parsedColor, 0.08)\n : rgba(colors.gray[4], 0.25),\n '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n ? rgba(parsedColor, 0.15)\n : rgba(colors.dark[3], 0.25),\n '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n ? rgba(parsedColor, 0.2)\n : rgba(colors.gray[4], 0.5),\n '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n ? rgba(parsedColor, 0.3)\n : rgba(colors.dark[3], 0.5),\n };\n },\n style,\n ]}\n className={clsx('mantine-contextmenu-item-button', className)}\n disabled={disabled}\n onClick={handleClick}\n >\n {icon && (\n <Box fz={0} mr=\"xs\" mt={-2}>\n {icon}\n </Box>\n )}\n <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n { iconRight ? (\n <Box fz={0} ml=\"xs\" mt={-2}>\n {iconRight}\n </Box>\n ) : items && (\n <Box fz={10} mt={-2} ml=\"xs\">\n ▶\n </Box>\n )}\n </UnstyledButton>\n {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n </div>\n );\n}\n","import { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n x: number;\n y: number;\n content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n const [paperRef] = useResizeObserver<HTMLDivElement>();\n const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n let windowWidth = 0;\n let windowHeight = 0;\n if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n const { dir } = useDirection();\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={clsx('mantine-contextmenu', className, classNames?.root)}\n style={[\n ({ spacing: { md } }) => {\n const mdSpacing = px(md) as number;\n return {\n zIndex,\n top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n left:\n dir === 'ltr'\n ? x + width + mdSpacing > windowWidth\n ? windowWidth - width - mdSpacing\n : x\n : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n };\n },\n style,\n styles?.root,\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) =>\n hidden ? null : onClick || items ? (\n <ContextMenuItem\n key={key}\n className={clsx(classNames?.item, className)}\n style={[styles?.item, style]}\n title={title ?? humanize(key)}\n onClick={onClick}\n onHide={onHide}\n items={items}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={clsx(classNames?.divider, className)}\n style={[styles?.divider, style]}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n","import { createContext, useContext, useState } from 'react';\nimport type { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type {\n ContextMenuOptions,\n ContextMenuProviderProps,\n ContextMenuSettings,\n HideContextMenuFunction,\n ShowContextMenuFunction,\n WithRequiredProperty,\n} from './types';\n\nconst DEFAULT_SETTINGS: WithRequiredProperty<ContextMenuSettings, 'shadow' | 'borderRadius' | 'submenuDelay'> = {\n shadow: 'sm',\n borderRadius: 'xs',\n submenuDelay: 500,\n};\n\nexport const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);\nexport const ContextMenuCtx = createContext<{\n /**\n * Function that shows the context menu.\n */\n showContextMenu: ShowContextMenuFunction;\n\n /**\n * Function that hides the context menu.\n */\n hideContextMenu: HideContextMenuFunction;\n\n /**\n * Boolean indicating whether the context menu is currently visible.\n */\n isContextMenuVisible: boolean;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined, isContextMenuVisible: false });\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n zIndex = 9999,\n shadow = DEFAULT_SETTINGS.shadow,\n borderRadius = DEFAULT_SETTINGS.borderRadius,\n submenuDelay = DEFAULT_SETTINGS.submenuDelay,\n children,\n}: ContextMenuProviderProps) {\n const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n const hideContextMenu = () => {\n setData(null);\n };\n\n const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n e.preventDefault();\n e.stopPropagation();\n setData({\n x: e.clientX,\n y: e.clientY,\n content,\n zIndex: options?.zIndex || zIndex,\n className: options?.className,\n style: options?.style,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n return (\n <ContextMenuSettingsCtx.Provider value={{ shadow, borderRadius, submenuDelay }}>\n <ContextMenuCtx.Provider value={{ showContextMenu, hideContextMenu, isContextMenuVisible: !!data }}>\n {children}\n {data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}\n </ContextMenuCtx.Provider>\n </ContextMenuSettingsCtx.Provider>\n );\n}\n\n/**\n * Hook returning functions that show and hide the context menu.\n */\nexport function useContextMenu() {\n return useContext(ContextMenuCtx);\n}\n","import { Portal } from '@mantine/core';\nimport { useHotkeys, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\nimport { ContextMenuOverlay } from './ContextMenuOverlay';\n\nexport type ContextMenuPortalProps = ContextMenuProps & {\n zIndex?: number;\n};\n\nexport function ContextMenuPortal({ onHide, zIndex, ...otherProps }: ContextMenuPortalProps) {\n useWindowEvent('resize', onHide);\n useWindowEvent('scroll', onHide);\n useHotkeys([['Escape', onHide]]);\n\n return (\n <Portal>\n <ContextMenuOverlay zIndex={zIndex} onHide={onHide}>\n <ContextMenu {...otherProps} onHide={onHide} />\n </ContextMenuOverlay>\n </Portal>\n );\n}\n","export type ContextMenuOverlayProps = React.PropsWithChildren<{\n zIndex: number | undefined;\n onHide: () => void;\n}>;\n\nexport function ContextMenuOverlay({ zIndex, children, onHide }: ContextMenuOverlayProps) {\n const handleHide = (e: React.MouseEvent) => {\n e.preventDefault();\n onHide();\n };\n return (\n <div className=\"mantine-contextmenu-overlay\" style={{ zIndex }} onClick={handleHide} onContextMenu={handleHide}>\n {children}\n </div>\n );\n}\n","/**\n * Utility function that returns a humanized version of a string, e.g. \"camelCase\" -> \"Camel Case\"\n */\nexport function humanize(value: string) {\n const str = value\n .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n .replace(/\\W|_/g, ' ')\n .trim()\n .toLowerCase();\n return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n}\n"],"mappings":"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","names":["Box","clsx","jsx","ContextMenuDivider","className","style","Box","UnstyledButton","parseThemeColor","rgba","useMediaQuery","useTimeout","clsx","useContext","useRef","useState","Paper","px","useDirection","useResizeObserver","clsx","useContext","createContext","useContext","useState","Portal","useHotkeys","useWindowEvent","jsx","ContextMenuOverlay","zIndex","children","onHide","handleHide","e","jsx","ContextMenuPortal","onHide","zIndex","otherProps","useWindowEvent","useHotkeys","Portal","ContextMenuOverlay","ContextMenu","jsx","jsxs","DEFAULT_SETTINGS","ContextMenuSettingsCtx","createContext","ContextMenuCtx","ContextMenuProvider","zIndex","shadow","borderRadius","submenuDelay","children","data","setData","useState","hideContextMenu","showContextMenu","content","options","e","ContextMenuPortal","useContextMenu","useContext","humanize","value","str","jsx","ContextMenu","x","y","content","zIndex","onHide","className","style","classNames","styles","shadow","borderRadius","useContext","ContextMenuSettingsCtx","paperRef","useResizeObserver","width","height","windowWidth","windowHeight","dir","useDirection","Paper","clsx","md","mdSpacing","px","key","hidden","onClick","items","title","otherOptions","ContextMenuItem","humanize","ContextMenuDivider","jsx","jsxs","ContextMenuItem","className","style","icon","iconRight","title","color","disabled","onClick","onHide","items","ref","useRef","submenuDelay","useContext","ContextMenuSettingsCtx","hoverAvailable","useMediaQuery","submenuPosition","setSubmenuPosition","useState","startShowingSubmenu","stopShowingSubmenu","useTimeout","y","x","startHidingSubmenu","stopHidingSubmenu","showSubmenu","hideSubmenu","hasSubmenu","showSubmenuOnHover","handleClick","e","UnstyledButton","theme","colors","parsedColor","parseThemeColor","rgba","clsx","Box","ContextMenu"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-contextmenu",
|
|
3
|
-
"version": "7.6.
|
|
3
|
+
"version": "7.6.1",
|
|
4
4
|
"description": "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",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|