mantine-contextmenu 6.0.5 → 6.1.0
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/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenuItem.d.ts +5 -3
- package/dist/ContextMenuItem.d.ts.map +1 -1
- package/dist/ContextMenuProvider.d.ts +6 -3
- package/dist/ContextMenuProvider.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +3 -3
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +3 -3
- package/dist/types.d.ts +21 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../ContextMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AActE,MAAM,MAAM,0BAA0B,GAAG;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAC/C,0BAA0B,GAAG;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAC1B,CAAC,EACD,CAAC,EACD,OAAO,EACP,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EACF,UAAU,EACV,MAAM,GACP,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../ContextMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AActE,MAAM,MAAM,0BAA0B,GAAG;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAC/C,0BAA0B,GAAG;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAC1B,CAAC,EACD,CAAC,EACD,OAAO,EACP,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EACF,UAAU,EACV,MAAM,GACP,EAAE,gBAAgB,2CAmElB"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { type MantineNumberSize } from '@mantine/core';
|
|
2
|
+
import type { ContextMenuItemOptions } from './types';
|
|
3
|
+
import type { WithRequiredProperty } from './utils';
|
|
4
|
+
export declare function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, borderRadius, items, }: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {
|
|
5
|
+
borderRadius: MantineNumberSize | undefined;
|
|
4
6
|
onHide: () => void;
|
|
5
7
|
}): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
//# sourceMappingURL=ContextMenuItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItem.d.ts","sourceRoot":"","sources":["../ContextMenuItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContextMenuItem.d.ts","sourceRoot":"","sources":["../ContextMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvH,OAAO,KAAK,EAAsB,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAuCpD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,YAAY,EACZ,KAAK,GACN,EAAE,oBAAoB,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,YAAY,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC5C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,2CA2DA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ContextMenuProviderProps,
|
|
1
|
+
import type { ContextMenuProviderProps, ShowContextMenuFunctionObject } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* Provider that allows to show a context menu anywhere in your application.
|
|
4
4
|
* If you wrap your application with this provider, you can use the `useContextMenu` hook
|
|
@@ -6,7 +6,10 @@ import type { ContextMenuProviderProps, ShowContextMenuFunction } from './types'
|
|
|
6
6
|
*/
|
|
7
7
|
export declare function ContextMenuProvider({ zIndex, shadow, borderRadius, children, }: ContextMenuProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
/**
|
|
9
|
-
* Hook returning a function that shows a context menu.
|
|
9
|
+
* Hook returning a function object that shows a context menu.
|
|
10
|
+
* The returned object can also be destructured into
|
|
11
|
+
* `showContextMenu`, `hideContextMenu` functions and a `isContextMenuVisible` boolean,
|
|
12
|
+
* which can be used for finer-grained control (such as imperatively hiding the context menu).
|
|
10
13
|
*/
|
|
11
|
-
export declare function useContextMenu():
|
|
14
|
+
export declare function useContextMenu(): ShowContextMenuFunctionObject;
|
|
12
15
|
//# sourceMappingURL=ContextMenuProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuProvider.d.ts","sourceRoot":"","sources":["../ContextMenuProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAsB,wBAAwB,EAAE,
|
|
1
|
+
{"version":3,"file":"ContextMenuProvider.d.ts","sourceRoot":"","sources":["../ContextMenuProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAsB,wBAAwB,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAU3G;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAa,EACb,MAAa,EACb,YAAmB,EACnB,QAAQ,GACT,EAAE,wBAAwB,2CAmC1B;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,kCAE7B"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var re=Object.create;var R=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var de=(e,t)=>{for(var o in t)R(e,o,{get:t[o],enumerable:!0})},G=(e,t,o,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ie(t))!ae.call(e,n)&&n!==o&&R(e,n,{get:()=>t[n],enumerable:!(u=se(t,n))||u.enumerable});return e};var pe=(e,t,o)=>(o=e!=null?re(ue(e)):{},G(t||!e||!e.__esModule?R(o,"default",{value:e,enumerable:!0}):o,e)),le=e=>G(R({},"__esModule",{value:!0}),e);var Me={};de(Me,{ContextMenuDivider:()=>A,ContextMenuItem:()=>$,ContextMenuPortal:()=>F,ContextMenuProvider:()=>fe,humanize:()=>z,useContextMenu:()=>Ce});module.exports=le(Me);var m=pe(require("react"),1);var I=require("@mantine/core"),J=require("react/jsx-runtime"),ce=(0,I.createStyles)(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function A({className:e,sx:t,style:o}){let{cx:u,classes:n}=ce();return(0,J.jsx)(I.Box,{className:u(n.root,e),sx:t,style:o})}var i=require("@mantine/core"),E=require("react");var l=require("@mantine/core"),Z=require("@mantine/hooks"),B=require("react");function z(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 T=require("react/jsx-runtime"),X={},xe=(0,l.createStyles)(e=>({root:{position:"fixed",border:`1px solid ${e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3]}`,overflow:"hidden",transition:"all .15s ease"}}));function N({x:e,y:t,content:o,zIndex:u,shadow:n,borderRadius:d,onHide:p,className:a,style:P,sx:r,classNames:s,styles:f}){let[b]=(0,Z.useResizeObserver)(),{width:C,height:k}=b.current?.getBoundingClientRect()||{width:0,height:0},M=0,y=0;typeof window<"u"&&({innerWidth:M,innerHeight:y}=window);let[,H]=(0,B.useState)(!1);(0,B.useEffect)(()=>{H(!0)},[]);let{cx:S,classes:v,theme:O}=xe(),{dir:ee,spacing:te}=O,W=typeof f=="function"?f(O,X,X):f,x=(0,l.px)(te.md);return(0,T.jsx)(l.Paper,{ref:b,shadow:n,radius:d,className:S(v.root,a,s?.root),style:{...W?.root,...P},sx:[{zIndex:u,top:t+k+x>y?y-k-x:t,left:ee==="ltr"?e+C+x>M?M-C-x:e:M-x-(e-C-x<0?C+x:e)},...(0,l.packSx)(r)],children:Array.isArray(o)?o.map(({key:L,className:U,sx:V,style:K,onClick:Y,items:_,title:oe,...ne})=>Y||_?(0,T.jsx)($,{className:S(s?.item,U),sx:V,style:{...W?.item,...K},title:oe??z(L),onClick:Y,onHide:p,borderRadius:d,items:_,...ne},L):(0,T.jsx)(A,{className:S(s?.divider,U),sx:V,style:{...W?.divider,...K}},L)):o(p)})}var c=require("react/jsx-runtime"),me=(0,i.createStyles)((e,{color:t})=>{let o=(0,i.px)(e.spacing.sm)/2;return{button:{width:"100%",display:"flex",alignItems:"center",paddingTop:o,paddingBottom:o,paddingLeft:e.spacing.sm,paddingRight:e.spacing.sm,color:t&&e.colors[t][6],transition:"background .15s ease","&[disabled]":{cursor:"not-allowed",color:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[5]},"&:hover:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.15:.08:.25)},"&:active:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.3:.2:.5)}},title:{whiteSpace:"nowrap",flexGrow:1}}});function $({className:e,style:t,icon:o,title:u,color:n,disabled:d,onClick:p,onHide:a,borderRadius:P,items:r}){let s=(0,E.useRef)(null),[f,b]=(0,E.useState)(null),C=p?v=>{a(),p(v)}:void 0,k=()=>{let{top:v,right:O}=s.current.getBoundingClientRect();b({x:O,y:v})},M=()=>{b(null)},y=r&&!d,{cx:H,classes:S}=me({color:n});return(0,c.jsxs)("div",{onMouseOver:y?k:void 0,onMouseOut:y?M:void 0,children:[(0,c.jsxs)(i.UnstyledButton,{ref:s,className:H(S.button,e),style:t,disabled:d,onClick:C,children:[o&&(0,c.jsx)(i.Box,{fz:0,mr:"xs",children:o}),(0,c.jsx)(i.Text,{className:S.title,size:"sm",children:u}),r&&(0,c.jsx)(i.Box,{fz:10,mt:-2,ml:"xs",children:"\u25B6"})]}),f&&(0,c.jsx)(N,{content:r,borderRadius:P,onHide:a,...f})]})}var Q=require("@mantine/core"),w=require("@mantine/hooks");var q=require("react/jsx-runtime");function F({onHide:e,...t}){(0,w.useWindowEvent)("resize",e),(0,w.useWindowEvent)("scroll",e);let o=(0,w.useClickOutside)(e);return(0,q.jsx)(Q.Portal,{innerRef:o,children:(0,q.jsx)(N,{...t,onHide:e})})}var g=require("react");var D=require("react/jsx-runtime"),h=()=>()=>{};h.showContextMenu=h;h.hideContextMenu=()=>{};h.isContextMenuVisible=!1;var j=(0,g.createContext)(h);function fe({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:u}){let[n,d]=(0,g.useState)(null),p=()=>{d(null)},a=(P,r)=>s=>{s.preventDefault(),s.stopPropagation(),d({x:s.clientX,y:s.clientY,content:P,zIndex:r?.zIndex||e,shadow:r?.shadow||t,borderRadius:r?.borderRadius||o,className:r?.className,style:r?.style,sx:r?.sx,classNames:r?.classNames,styles:r?.styles})};return a.showContextMenu=a,a.hideContextMenu=p,a.isContextMenuVisible=!!n,(0,D.jsxs)(j.Provider,{value:a,children:[u,n&&(0,D.jsx)(F,{onHide:p,...n})]})}function Ce(){return(0,g.useContext)(j)}
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../index.ts", "../react-shim.mjs", "../ContextMenuDivider.tsx", "../ContextMenuItem.tsx", "../ContextMenu.tsx", "../utils.ts", "../ContextMenuPortal.tsx", "../ContextMenuProvider.tsx"],
|
|
4
|
-
"sourcesContent": ["export * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport { humanize } from './utils';\n", "import * as React from 'react';\nexport { React };\n", "import { Box, createStyles, type Sx } from '@mantine/core';\nimport type { CSSProperties } from 'react';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n height: 1,\n background: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n },\n}));\n\nexport type ContextMenuDividerProps = {\n className: string;\n sx: Sx | (Sx | undefined)[] | undefined;\n style: CSSProperties;\n};\n\nexport function ContextMenuDivider({ className, sx, style }: ContextMenuDividerProps) {\n const { cx, classes } = useStyles();\n return <Box className={cx(classes.root, className)} sx={sx} style={style} />;\n}\n", "import { Box, Text, UnstyledButton, createStyles, px, type MantineColor } from '@mantine/core';\nimport { MouseEventHandler, useRef, useState } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuContent, ContextMenuItemOptions } from './types';\nimport { WithRequiredProperty } from './utils';\n\nconst useStyles = createStyles((theme, { color }: { color?: MantineColor }) => {\n const verticalPadding = px(theme.spacing.sm) / 2;\n return {\n button: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingTop: verticalPadding,\n paddingBottom: verticalPadding,\n paddingLeft: theme.spacing.sm,\n paddingRight: theme.spacing.sm,\n color: color && theme.colors[color][6],\n transition: 'background .15s ease',\n '&[disabled]': {\n cursor: 'not-allowed',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n '&:hover:not([disabled])': {\n background: theme.fn.rgba(\n color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n color ? (theme.colorScheme === 'dark' ? 0.15 : 0.08) : 0.25\n ),\n },\n '&:active:not([disabled])': {\n background: theme.fn.rgba(\n color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n color ? (theme.colorScheme === 'dark' ? 0.3 : 0.2) : 0.5\n ),\n },\n },\n title: {\n whiteSpace: 'nowrap',\n flexGrow: 1,\n },\n };\n});\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 [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n const showSubmenu = () => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n };\n\n const hideSubmenu = () => {\n setSubmenuPosition(null);\n };\n\n const hasItemsAndIsNotDisabled = items && !disabled;\n const { cx, classes } = useStyles({ color });\n\n return (\n <div\n onMouseOver={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseOut={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n className={cx(classes.button, className)}\n style={style}\n disabled={disabled}\n onClick={handleClick}\n >\n {icon && (\n <Box fz={0} mr=\"xs\">\n {icon}\n </Box>\n )}\n <Text className={classes.title} size=\"sm\">\n {title}\n </Text>\n {items && (\n <Box fz={10} mt={-2} ml=\"xs\">\n \u25B6\n </Box>\n )}\n </UnstyledButton>\n {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n </div>\n );\n}\n", "import { Paper, createStyles, packSx, px } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport { CSSProperties, useEffect, useState } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nconst EMPTY_OBJECT = {};\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'fixed',\n border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,\n overflow: 'hidden',\n transition: 'all .15s ease',\n },\n}));\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({\n x,\n y,\n content,\n zIndex,\n shadow,\n borderRadius,\n onHide,\n className,\n style,\n sx,\n classNames,\n styles,\n}: ContextMenuProps) {\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 // trigger a rerender to make sure that context menu is positioned correctly\n const [, setRendered] = useState(false);\n useEffect(() => {\n setRendered(true);\n }, []);\n\n const { cx, classes, theme } = useStyles();\n const { dir, spacing } = theme;\n const styleProperties = typeof styles === 'function' ? styles(theme, EMPTY_OBJECT, EMPTY_OBJECT) : styles;\n const mdSpacing = px(spacing.md);\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={cx(classes.root, className, classNames?.root)}\n style={{ ...styleProperties?.root, ...style } as CSSProperties}\n sx={[\n {\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 ...packSx(sx),\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, className, sx, style, onClick, items, title, ...otherOptions }) =>\n onClick || items ? (\n <ContextMenuItem\n key={key}\n className={cx(classNames?.item, className)}\n sx={sx}\n style={{ ...styleProperties?.item, ...style } as CSSProperties}\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={cx(classNames?.divider, className)}\n sx={sx}\n style={{ ...styleProperties?.divider, ...style } as CSSProperties}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n", "export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\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", "import { Portal } from '@mantine/core';\nimport { useClickOutside, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\n\nexport function ContextMenuPortal({ onHide, ...otherProps }: ContextMenuProps) {\n useWindowEvent('resize', onHide);\n useWindowEvent('scroll', onHide);\n const portalInnerRef = useClickOutside<HTMLDivElement>(onHide);\n\n return (\n <Portal innerRef={portalInnerRef}>\n <ContextMenu {...otherProps} onHide={onHide} />\n </Portal>\n );\n}\n", "import { createContext, useContext, useState } from 'react';\nimport { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type { ContextMenuOptions, ContextMenuProviderProps, ShowContextMenuFunction } from './types';\n\nconst MenuContext = createContext<ShowContextMenuFunction>(() => () => undefined);\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 = 'sm',\n borderRadius = 'xs',\n children,\n}: ContextMenuProviderProps) {\n const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n const destroy = () => {\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 shadow: options?.shadow || shadow,\n borderRadius: options?.borderRadius || borderRadius,\n className: options?.className,\n style: options?.style,\n sx: options?.sx,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n return (\n <MenuContext.Provider value={showContextMenu}>\n {children}\n {data && <ContextMenuPortal onHide={destroy} {...data} />}\n </MenuContext.Provider>\n );\n}\n\n/**\n * Hook returning a function that shows a context menu.\n */\nexport function useContextMenu() {\n return useContext(MenuContext);\n}\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,wBAAAE,EAAA,oBAAAC,EAAA,sBAAAC,EAAA,wBAAAC,GAAA,aAAAC,EAAA,mBAAAC,KAAA,eAAAC,GAAAR,ICAA,IAAAS,EAAuB,uBCAvB,IAAAC,EAA2C,yBAkBlCC,EAAA,6BAfHC,MAAY,gBAAcC,IAAW,CACzC,KAAM,CACJ,OAAQ,EACR,WAAYA,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,CACvF,CACF,EAAE,EAQK,SAASC,EAAmB,CAAE,UAAAC,EAAW,GAAAC,EAAI,MAAAC,CAAM,EAA4B,CACpF,GAAM,CAAE,GAAAC,EAAI,QAAAC,CAAQ,EAAIP,GAAU,EAClC,SAAO,OAAC,OAAI,UAAWM,EAAGC,EAAQ,KAAMJ,CAAS,EAAG,GAAIC,EAAI,MAAOC,EAAO,CAC5E,CCnBA,IAAAG,
|
|
6
|
-
"names": ["package_exports", "__export", "ContextMenuDivider", "ContextMenuItem", "ContextMenuPortal", "ContextMenuProvider", "humanize", "useContextMenu", "__toCommonJS", "React", "import_core", "import_jsx_runtime", "useStyles", "theme", "ContextMenuDivider", "className", "sx", "style", "cx", "classes", "import_core", "import_react", "import_core", "import_hooks", "import_react", "humanize", "value", "str", "import_jsx_runtime", "EMPTY_OBJECT", "useStyles", "theme", "ContextMenu", "x", "y", "content", "zIndex", "shadow", "borderRadius", "onHide", "className", "style", "sx", "classNames", "styles", "paperRef", "width", "height", "windowWidth", "windowHeight", "setRendered", "cx", "classes", "dir", "spacing", "styleProperties", "mdSpacing", "key", "onClick", "items", "title", "otherOptions", "ContextMenuItem", "humanize", "ContextMenuDivider", "import_jsx_runtime", "useStyles", "theme", "color", "verticalPadding", "ContextMenuItem", "className", "style", "icon", "title", "disabled", "onClick", "onHide", "items", "ref", "submenuPosition", "setSubmenuPosition", "handleClick", "e", "showSubmenu", "y", "x", "hideSubmenu", "hasItemsAndIsNotDisabled", "cx", "classes", "ContextMenu", "import_core", "import_hooks", "import_jsx_runtime", "ContextMenuPortal", "onHide", "otherProps", "portalInnerRef", "ContextMenu", "import_react", "import_jsx_runtime", "MenuContext", "ContextMenuProvider", "zIndex", "shadow", "borderRadius", "children", "data", "setData", "
|
|
4
|
+
"sourcesContent": ["export * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport { humanize } from './utils';\n", "import * as React from 'react';\nexport { React };\n", "import { Box, createStyles, type Sx } from '@mantine/core';\nimport type { CSSProperties } from 'react';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n height: 1,\n background: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n },\n}));\n\nexport type ContextMenuDividerProps = {\n className: string;\n sx: Sx | (Sx | undefined)[] | undefined;\n style: CSSProperties;\n};\n\nexport function ContextMenuDivider({ className, sx, style }: ContextMenuDividerProps) {\n const { cx, classes } = useStyles();\n return <Box className={cx(classes.root, className)} sx={sx} style={style} />;\n}\n", "import { Box, Text, UnstyledButton, createStyles, px, type MantineColor, type MantineNumberSize } from '@mantine/core';\nimport { useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport type { ContextMenuContent, ContextMenuItemOptions } from './types';\nimport type { WithRequiredProperty } from './utils';\n\nconst useStyles = createStyles((theme, { color }: { color?: MantineColor }) => {\n const verticalPadding = px(theme.spacing.sm) / 2;\n return {\n button: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingTop: verticalPadding,\n paddingBottom: verticalPadding,\n paddingLeft: theme.spacing.sm,\n paddingRight: theme.spacing.sm,\n color: color && theme.colors[color][6],\n transition: 'background .15s ease',\n '&[disabled]': {\n cursor: 'not-allowed',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n '&:hover:not([disabled])': {\n background: theme.fn.rgba(\n color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n color ? (theme.colorScheme === 'dark' ? 0.15 : 0.08) : 0.25\n ),\n },\n '&:active:not([disabled])': {\n background: theme.fn.rgba(\n color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n color ? (theme.colorScheme === 'dark' ? 0.3 : 0.2) : 0.5\n ),\n },\n },\n title: {\n whiteSpace: 'nowrap',\n flexGrow: 1,\n },\n };\n});\n\nexport function ContextMenuItem({\n className,\n style,\n icon,\n title,\n color,\n disabled,\n onClick,\n onHide,\n borderRadius,\n items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {\n borderRadius: MantineNumberSize | undefined;\n onHide: () => void;\n}) {\n const ref = useRef<HTMLButtonElement>(null);\n const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n const showSubmenu = () => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n };\n\n const hideSubmenu = () => {\n setSubmenuPosition(null);\n };\n\n const hasItemsAndIsNotDisabled = items && !disabled;\n const { cx, classes } = useStyles({ color });\n\n return (\n <div\n onMouseOver={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseOut={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n className={cx(classes.button, className)}\n style={style}\n disabled={disabled}\n onClick={handleClick}\n >\n {icon && (\n <Box fz={0} mr=\"xs\">\n {icon}\n </Box>\n )}\n <Text className={classes.title} size=\"sm\">\n {title}\n </Text>\n {items && (\n <Box fz={10} mt={-2} ml=\"xs\">\n \u25B6\n </Box>\n )}\n </UnstyledButton>\n {submenuPosition && (\n <ContextMenu\n content={items as ContextMenuContent}\n borderRadius={borderRadius}\n onHide={onHide}\n {...submenuPosition}\n />\n )}\n </div>\n );\n}\n", "import { Paper, createStyles, packSx, px } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport { CSSProperties, useEffect, useState } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nconst EMPTY_OBJECT = {};\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'fixed',\n border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,\n overflow: 'hidden',\n transition: 'all .15s ease',\n },\n}));\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({\n x,\n y,\n content,\n zIndex,\n shadow,\n borderRadius,\n onHide,\n className,\n style,\n sx,\n classNames,\n styles,\n}: ContextMenuProps) {\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 // trigger a rerender to make sure that context menu is positioned correctly\n const [, setRendered] = useState(false);\n useEffect(() => {\n setRendered(true);\n }, []);\n\n const { cx, classes, theme } = useStyles();\n const { dir, spacing } = theme;\n const styleProperties = typeof styles === 'function' ? styles(theme, EMPTY_OBJECT, EMPTY_OBJECT) : styles;\n const mdSpacing = px(spacing.md);\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={cx(classes.root, className, classNames?.root)}\n style={{ ...styleProperties?.root, ...style } as CSSProperties}\n sx={[\n {\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 ...packSx(sx),\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, className, sx, style, onClick, items, title, ...otherOptions }) =>\n onClick || items ? (\n <ContextMenuItem\n key={key}\n className={cx(classNames?.item, className)}\n sx={sx}\n style={{ ...styleProperties?.item, ...style } as CSSProperties}\n title={title ?? humanize(key)}\n onClick={onClick}\n onHide={onHide}\n borderRadius={borderRadius}\n items={items}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={cx(classNames?.divider, className)}\n sx={sx}\n style={{ ...styleProperties?.divider, ...style } as CSSProperties}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n", "export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\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", "import { Portal } from '@mantine/core';\nimport { useClickOutside, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\n\nexport function ContextMenuPortal({ onHide, ...otherProps }: ContextMenuProps) {\n useWindowEvent('resize', onHide);\n useWindowEvent('scroll', onHide);\n const portalInnerRef = useClickOutside<HTMLDivElement>(onHide);\n\n return (\n <Portal innerRef={portalInnerRef}>\n <ContextMenu {...otherProps} onHide={onHide} />\n </Portal>\n );\n}\n", "import { createContext, useContext, useState } from 'react';\nimport { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type { ContextMenuOptions, ContextMenuProviderProps, ShowContextMenuFunctionObject } from './types';\n\nconst defaultMenuContextValue = () => () => undefined;\n\ndefaultMenuContextValue.showContextMenu = defaultMenuContextValue;\ndefaultMenuContextValue.hideContextMenu = () => undefined;\ndefaultMenuContextValue.isContextMenuVisible = false;\n\nconst MenuContext = createContext<ShowContextMenuFunctionObject>(defaultMenuContextValue);\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 = 'sm',\n borderRadius = 'xs',\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: ShowContextMenuFunctionObject = (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 shadow: options?.shadow || shadow,\n borderRadius: options?.borderRadius || borderRadius,\n className: options?.className,\n style: options?.style,\n sx: options?.sx,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n showContextMenu.showContextMenu = showContextMenu;\n showContextMenu.hideContextMenu = hideContextMenu;\n showContextMenu.isContextMenuVisible = !!data;\n\n return (\n <MenuContext.Provider value={showContextMenu}>\n {children}\n {data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}\n </MenuContext.Provider>\n );\n}\n\n/**\n * Hook returning a function object that shows a context menu.\n * The returned object can also be destructured into\n * `showContextMenu`, `hideContextMenu` functions and a `isContextMenuVisible` boolean,\n * which can be used for finer-grained control (such as imperatively hiding the context menu).\n */\nexport function useContextMenu() {\n return useContext(MenuContext);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["package_exports", "__export", "ContextMenuDivider", "ContextMenuItem", "ContextMenuPortal", "ContextMenuProvider", "humanize", "useContextMenu", "__toCommonJS", "React", "import_core", "import_jsx_runtime", "useStyles", "theme", "ContextMenuDivider", "className", "sx", "style", "cx", "classes", "import_core", "import_react", "import_core", "import_hooks", "import_react", "humanize", "value", "str", "import_jsx_runtime", "EMPTY_OBJECT", "useStyles", "theme", "ContextMenu", "x", "y", "content", "zIndex", "shadow", "borderRadius", "onHide", "className", "style", "sx", "classNames", "styles", "paperRef", "width", "height", "windowWidth", "windowHeight", "setRendered", "cx", "classes", "dir", "spacing", "styleProperties", "mdSpacing", "key", "onClick", "items", "title", "otherOptions", "ContextMenuItem", "humanize", "ContextMenuDivider", "import_jsx_runtime", "useStyles", "theme", "color", "verticalPadding", "ContextMenuItem", "className", "style", "icon", "title", "disabled", "onClick", "onHide", "borderRadius", "items", "ref", "submenuPosition", "setSubmenuPosition", "handleClick", "e", "showSubmenu", "y", "x", "hideSubmenu", "hasItemsAndIsNotDisabled", "cx", "classes", "ContextMenu", "import_core", "import_hooks", "import_jsx_runtime", "ContextMenuPortal", "onHide", "otherProps", "portalInnerRef", "ContextMenu", "import_react", "import_jsx_runtime", "defaultMenuContextValue", "MenuContext", "ContextMenuProvider", "zIndex", "shadow", "borderRadius", "children", "data", "setData", "hideContextMenu", "showContextMenu", "content", "options", "e", "ContextMenuPortal", "useContextMenu"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as l from"react";import{Box as G,createStyles as J}from"@mantine/core";import{jsx as Z}from"react/jsx-runtime";var X=J(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function D({className:e,sx:t,style:o}){let{cx:d,classes:i}=X();return Z(G,{className:d(i.root,e),sx:t,style:o})}import{Box as L,Text as ie,UnstyledButton as ue,createStyles as ae,px as de}from"@mantine/core";import{useRef as pe,useState as le}from"react";import{Paper as Q,createStyles as j,packSx as ee,px as te}from"@mantine/core";import{useResizeObserver as oe}from"@mantine/hooks";import{useEffect as ne,useState as re}from"react";function R(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 I}from"react/jsx-runtime";var H={},se=j(e=>({root:{position:"fixed",border:`1px solid ${e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3]}`,overflow:"hidden",transition:"all .15s ease"}}));function v({x:e,y:t,content:o,zIndex:d,shadow:i,borderRadius:u,onHide:a,className:s,style:M,sx:n,classNames:r,styles:c}){let[y]=oe(),{width:x,height:P}=y.current?.getBoundingClientRect()||{width:0,height:0},m=0,f=0;typeof window<"u"&&({innerWidth:m,innerHeight:f}=window);let[,h]=re(!1);ne(()=>{h(!0)},[]);let{cx:C,classes:S,theme:b}=se(),{dir:V,spacing:K}=b,k=typeof c=="function"?c(b,H,H):c,p=te(K.md);return I(Q,{ref:y,shadow:i,radius:u,className:C(S.root,s,r?.root),style:{...k?.root,...M},sx:[{zIndex:d,top:t+P+p>f?f-P-p:t,left:V==="ltr"?e+x+p>m?m-x-p:e:m-p-(e-x-p<0?x+p:e)},...ee(n)],children:Array.isArray(o)?o.map(({key:O,className:z,sx:T,style:B,onClick:N,items:E,title:Y,..._})=>N||E?I(W,{className:C(r?.item,z),sx:T,style:{...k?.item,...B},title:Y??R(O),onClick:N,onHide:a,borderRadius:u,items:E,..._},O):I(D,{className:C(r?.divider,z),sx:T,style:{...k?.divider,...B}},O)):o(a)})}import{jsx as w,jsxs as A}from"react/jsx-runtime";var ce=ae((e,{color:t})=>{let o=de(e.spacing.sm)/2;return{button:{width:"100%",display:"flex",alignItems:"center",paddingTop:o,paddingBottom:o,paddingLeft:e.spacing.sm,paddingRight:e.spacing.sm,color:t&&e.colors[t][6],transition:"background .15s ease","&[disabled]":{cursor:"not-allowed",color:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[5]},"&:hover:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.15:.08:.25)},"&:active:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.3:.2:.5)}},title:{whiteSpace:"nowrap",flexGrow:1}}});function W({className:e,style:t,icon:o,title:d,color:i,disabled:u,onClick:a,onHide:s,borderRadius:M,items:n}){let r=pe(null),[c,y]=le(null),x=a?S=>{s(),a(S)}:void 0,P=()=>{let{top:S,right:b}=r.current.getBoundingClientRect();y({x:b,y:S})},m=()=>{y(null)},f=n&&!u,{cx:h,classes:C}=ce({color:i});return A("div",{onMouseOver:f?P:void 0,onMouseOut:f?m:void 0,children:[A(ue,{ref:r,className:h(C.button,e),style:t,disabled:u,onClick:x,children:[o&&w(L,{fz:0,mr:"xs",children:o}),w(ie,{className:C.title,size:"sm",children:d}),n&&w(L,{fz:10,mt:-2,ml:"xs",children:"\u25B6"})]}),c&&w(v,{content:n,borderRadius:M,onHide:s,...c})]})}import{Portal as xe}from"@mantine/core";import{useClickOutside as me,useWindowEvent as $}from"@mantine/hooks";import{jsx as q}from"react/jsx-runtime";function F({onHide:e,...t}){$("resize",e),$("scroll",e);let o=me(e);return q(xe,{innerRef:o,children:q(v,{...t,onHide:e})})}import{createContext as fe,useContext as Ce,useState as Me}from"react";import{jsx as ye,jsxs as Se}from"react/jsx-runtime";var g=()=>()=>{};g.showContextMenu=g;g.hideContextMenu=()=>{};g.isContextMenuVisible=!1;var U=fe(g);function Ze({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:d}){let[i,u]=Me(null),a=()=>{u(null)},s=(M,n)=>r=>{r.preventDefault(),r.stopPropagation(),u({x:r.clientX,y:r.clientY,content:M,zIndex:n?.zIndex||e,shadow:n?.shadow||t,borderRadius:n?.borderRadius||o,className:n?.className,style:n?.style,sx:n?.sx,classNames:n?.classNames,styles:n?.styles})};return s.showContextMenu=s,s.hideContextMenu=a,s.isContextMenuVisible=!!i,Se(U.Provider,{value:s,children:[d,i&&ye(F,{onHide:a,...i})]})}function Qe(){return Ce(U)}export{D as ContextMenuDivider,W as ContextMenuItem,F as ContextMenuPortal,Ze as ContextMenuProvider,R as humanize,Qe as useContextMenu};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../react-shim.mjs", "../ContextMenuDivider.tsx", "../ContextMenuItem.tsx", "../ContextMenu.tsx", "../utils.ts", "../ContextMenuPortal.tsx", "../ContextMenuProvider.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Box, createStyles, type Sx } from '@mantine/core';\nimport type { CSSProperties } from 'react';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n height: 1,\n background: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n },\n}));\n\nexport type ContextMenuDividerProps = {\n className: string;\n sx: Sx | (Sx | undefined)[] | undefined;\n style: CSSProperties;\n};\n\nexport function ContextMenuDivider({ className, sx, style }: ContextMenuDividerProps) {\n const { cx, classes } = useStyles();\n return <Box className={cx(classes.root, className)} sx={sx} style={style} />;\n}\n", "import { Box, Text, UnstyledButton, createStyles, px, type MantineColor } from '@mantine/core';\nimport { MouseEventHandler, useRef, useState } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuContent, ContextMenuItemOptions } from './types';\nimport { WithRequiredProperty } from './utils';\n\nconst useStyles = createStyles((theme, { color }: { color?: MantineColor }) => {\n const verticalPadding = px(theme.spacing.sm) / 2;\n return {\n button: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingTop: verticalPadding,\n paddingBottom: verticalPadding,\n paddingLeft: theme.spacing.sm,\n paddingRight: theme.spacing.sm,\n color: color && theme.colors[color][6],\n transition: 'background .15s ease',\n '&[disabled]': {\n cursor: 'not-allowed',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n '&:hover:not([disabled])': {\n background: theme.fn.rgba(\n color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n color ? (theme.colorScheme === 'dark' ? 0.15 : 0.08) : 0.25\n ),\n },\n '&:active:not([disabled])': {\n background: theme.fn.rgba(\n color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n color ? (theme.colorScheme === 'dark' ? 0.3 : 0.2) : 0.5\n ),\n },\n },\n title: {\n whiteSpace: 'nowrap',\n flexGrow: 1,\n },\n };\n});\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 [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n const showSubmenu = () => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n };\n\n const hideSubmenu = () => {\n setSubmenuPosition(null);\n };\n\n const hasItemsAndIsNotDisabled = items && !disabled;\n const { cx, classes } = useStyles({ color });\n\n return (\n <div\n onMouseOver={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseOut={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n className={cx(classes.button, className)}\n style={style}\n disabled={disabled}\n onClick={handleClick}\n >\n {icon && (\n <Box fz={0} mr=\"xs\">\n {icon}\n </Box>\n )}\n <Text className={classes.title} size=\"sm\">\n {title}\n </Text>\n {items && (\n <Box fz={10} mt={-2} ml=\"xs\">\n \u25B6\n </Box>\n )}\n </UnstyledButton>\n {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n </div>\n );\n}\n", "import { Paper, createStyles, packSx, px } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport { CSSProperties, useEffect, useState } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nconst EMPTY_OBJECT = {};\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'fixed',\n border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,\n overflow: 'hidden',\n transition: 'all .15s ease',\n },\n}));\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({\n x,\n y,\n content,\n zIndex,\n shadow,\n borderRadius,\n onHide,\n className,\n style,\n sx,\n classNames,\n styles,\n}: ContextMenuProps) {\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 // trigger a rerender to make sure that context menu is positioned correctly\n const [, setRendered] = useState(false);\n useEffect(() => {\n setRendered(true);\n }, []);\n\n const { cx, classes, theme } = useStyles();\n const { dir, spacing } = theme;\n const styleProperties = typeof styles === 'function' ? styles(theme, EMPTY_OBJECT, EMPTY_OBJECT) : styles;\n const mdSpacing = px(spacing.md);\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={cx(classes.root, className, classNames?.root)}\n style={{ ...styleProperties?.root, ...style } as CSSProperties}\n sx={[\n {\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 ...packSx(sx),\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, className, sx, style, onClick, items, title, ...otherOptions }) =>\n onClick || items ? (\n <ContextMenuItem\n key={key}\n className={cx(classNames?.item, className)}\n sx={sx}\n style={{ ...styleProperties?.item, ...style } as CSSProperties}\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={cx(classNames?.divider, className)}\n sx={sx}\n style={{ ...styleProperties?.divider, ...style } as CSSProperties}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n", "export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\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", "import { Portal } from '@mantine/core';\nimport { useClickOutside, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\n\nexport function ContextMenuPortal({ onHide, ...otherProps }: ContextMenuProps) {\n useWindowEvent('resize', onHide);\n useWindowEvent('scroll', onHide);\n const portalInnerRef = useClickOutside<HTMLDivElement>(onHide);\n\n return (\n <Portal innerRef={portalInnerRef}>\n <ContextMenu {...otherProps} onHide={onHide} />\n </Portal>\n );\n}\n", "import { createContext, useContext, useState } from 'react';\nimport { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type { ContextMenuOptions, ContextMenuProviderProps, ShowContextMenuFunction } from './types';\n\nconst MenuContext = createContext<ShowContextMenuFunction>(() => () => undefined);\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 = 'sm',\n borderRadius = 'xs',\n children,\n}: ContextMenuProviderProps) {\n const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n const destroy = () => {\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 shadow: options?.shadow || shadow,\n borderRadius: options?.borderRadius || borderRadius,\n className: options?.className,\n style: options?.style,\n sx: options?.sx,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n return (\n <MenuContext.Provider value={showContextMenu}>\n {children}\n {data && <ContextMenuPortal onHide={destroy} {...data} />}\n </MenuContext.Provider>\n );\n}\n\n/**\n * Hook returning a function that shows a context menu.\n */\nexport function useContextMenu() {\n return useContext(MenuContext);\n}\n"],
|
|
5
|
-
"mappings": "AAAA,UAAYA,MAAW,QCAvB,OAAS,OAAAC,EAAK,gBAAAC,MAA6B,gBAkBlC,cAAAC,MAAA,oBAfT,IAAMC,EAAYF,EAAcG,IAAW,CACzC,KAAM,CACJ,OAAQ,EACR,WAAYA,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,CACvF,CACF,EAAE,EAQK,SAASC,EAAmB,CAAE,UAAAC,EAAW,GAAAC,EAAI,MAAAC,CAAM,EAA4B,CACpF,GAAM,CAAE,GAAAC,EAAI,QAAAC,CAAQ,EAAIP,EAAU,EAClC,OAAOD,EAACF,EAAA,CAAI,UAAWS,EAAGC,EAAQ,KAAMJ,CAAS,EAAG,GAAIC,EAAI,MAAOC,EAAO,CAC5E,CCnBA,OAAS,OAAAG,EAAK,QAAAC,GAAM,kBAAAC,GAAgB,gBAAAC,GAAc,MAAAC,
|
|
6
|
-
"names": ["React", "Box", "createStyles", "jsx", "useStyles", "theme", "ContextMenuDivider", "className", "sx", "style", "cx", "classes", "Box", "Text", "UnstyledButton", "createStyles", "px", "useRef", "useState", "Paper", "createStyles", "packSx", "px", "useResizeObserver", "useEffect", "useState", "humanize", "value", "str", "jsx", "EMPTY_OBJECT", "useStyles", "createStyles", "theme", "ContextMenu", "x", "y", "content", "zIndex", "shadow", "borderRadius", "onHide", "className", "style", "sx", "classNames", "styles", "paperRef", "useResizeObserver", "width", "height", "windowWidth", "windowHeight", "setRendered", "useState", "useEffect", "cx", "classes", "dir", "spacing", "styleProperties", "mdSpacing", "px", "Paper", "packSx", "key", "onClick", "items", "title", "otherOptions", "ContextMenuItem", "humanize", "ContextMenuDivider", "jsx", "jsxs", "useStyles", "createStyles", "theme", "color", "verticalPadding", "px", "ContextMenuItem", "className", "style", "icon", "title", "disabled", "onClick", "onHide", "items", "ref", "useRef", "submenuPosition", "setSubmenuPosition", "useState", "handleClick", "e", "showSubmenu", "y", "x", "hideSubmenu", "hasItemsAndIsNotDisabled", "cx", "classes", "UnstyledButton", "Box", "Text", "ContextMenu", "Portal", "useClickOutside", "useWindowEvent", "jsx", "ContextMenuPortal", "onHide", "otherProps", "useWindowEvent", "portalInnerRef", "useClickOutside", "Portal", "ContextMenu", "createContext", "useContext", "useState", "jsx", "jsxs", "MenuContext", "createContext", "ContextMenuProvider", "zIndex", "shadow", "borderRadius", "children", "data", "setData", "useState", "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Box, createStyles, type Sx } from '@mantine/core';\nimport type { CSSProperties } from 'react';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n height: 1,\n background: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n },\n}));\n\nexport type ContextMenuDividerProps = {\n className: string;\n sx: Sx | (Sx | undefined)[] | undefined;\n style: CSSProperties;\n};\n\nexport function ContextMenuDivider({ className, sx, style }: ContextMenuDividerProps) {\n const { cx, classes } = useStyles();\n return <Box className={cx(classes.root, className)} sx={sx} style={style} />;\n}\n", "import { Box, Text, UnstyledButton, createStyles, px, type MantineColor, type MantineNumberSize } from '@mantine/core';\nimport { useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport type { ContextMenuContent, ContextMenuItemOptions } from './types';\nimport type { WithRequiredProperty } from './utils';\n\nconst useStyles = createStyles((theme, { color }: { color?: MantineColor }) => {\n const verticalPadding = px(theme.spacing.sm) / 2;\n return {\n button: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingTop: verticalPadding,\n paddingBottom: verticalPadding,\n paddingLeft: theme.spacing.sm,\n paddingRight: theme.spacing.sm,\n color: color && theme.colors[color][6],\n transition: 'background .15s ease',\n '&[disabled]': {\n cursor: 'not-allowed',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n '&:hover:not([disabled])': {\n background: theme.fn.rgba(\n color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n color ? (theme.colorScheme === 'dark' ? 0.15 : 0.08) : 0.25\n ),\n },\n '&:active:not([disabled])': {\n background: theme.fn.rgba(\n color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n color ? (theme.colorScheme === 'dark' ? 0.3 : 0.2) : 0.5\n ),\n },\n },\n title: {\n whiteSpace: 'nowrap',\n flexGrow: 1,\n },\n };\n});\n\nexport function ContextMenuItem({\n className,\n style,\n icon,\n title,\n color,\n disabled,\n onClick,\n onHide,\n borderRadius,\n items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {\n borderRadius: MantineNumberSize | undefined;\n onHide: () => void;\n}) {\n const ref = useRef<HTMLButtonElement>(null);\n const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n const showSubmenu = () => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n };\n\n const hideSubmenu = () => {\n setSubmenuPosition(null);\n };\n\n const hasItemsAndIsNotDisabled = items && !disabled;\n const { cx, classes } = useStyles({ color });\n\n return (\n <div\n onMouseOver={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseOut={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n className={cx(classes.button, className)}\n style={style}\n disabled={disabled}\n onClick={handleClick}\n >\n {icon && (\n <Box fz={0} mr=\"xs\">\n {icon}\n </Box>\n )}\n <Text className={classes.title} size=\"sm\">\n {title}\n </Text>\n {items && (\n <Box fz={10} mt={-2} ml=\"xs\">\n \u25B6\n </Box>\n )}\n </UnstyledButton>\n {submenuPosition && (\n <ContextMenu\n content={items as ContextMenuContent}\n borderRadius={borderRadius}\n onHide={onHide}\n {...submenuPosition}\n />\n )}\n </div>\n );\n}\n", "import { Paper, createStyles, packSx, px } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport { CSSProperties, useEffect, useState } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nconst EMPTY_OBJECT = {};\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'fixed',\n border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,\n overflow: 'hidden',\n transition: 'all .15s ease',\n },\n}));\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({\n x,\n y,\n content,\n zIndex,\n shadow,\n borderRadius,\n onHide,\n className,\n style,\n sx,\n classNames,\n styles,\n}: ContextMenuProps) {\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 // trigger a rerender to make sure that context menu is positioned correctly\n const [, setRendered] = useState(false);\n useEffect(() => {\n setRendered(true);\n }, []);\n\n const { cx, classes, theme } = useStyles();\n const { dir, spacing } = theme;\n const styleProperties = typeof styles === 'function' ? styles(theme, EMPTY_OBJECT, EMPTY_OBJECT) : styles;\n const mdSpacing = px(spacing.md);\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={cx(classes.root, className, classNames?.root)}\n style={{ ...styleProperties?.root, ...style } as CSSProperties}\n sx={[\n {\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 ...packSx(sx),\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, className, sx, style, onClick, items, title, ...otherOptions }) =>\n onClick || items ? (\n <ContextMenuItem\n key={key}\n className={cx(classNames?.item, className)}\n sx={sx}\n style={{ ...styleProperties?.item, ...style } as CSSProperties}\n title={title ?? humanize(key)}\n onClick={onClick}\n onHide={onHide}\n borderRadius={borderRadius}\n items={items}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={cx(classNames?.divider, className)}\n sx={sx}\n style={{ ...styleProperties?.divider, ...style } as CSSProperties}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n", "export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\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", "import { Portal } from '@mantine/core';\nimport { useClickOutside, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\n\nexport function ContextMenuPortal({ onHide, ...otherProps }: ContextMenuProps) {\n useWindowEvent('resize', onHide);\n useWindowEvent('scroll', onHide);\n const portalInnerRef = useClickOutside<HTMLDivElement>(onHide);\n\n return (\n <Portal innerRef={portalInnerRef}>\n <ContextMenu {...otherProps} onHide={onHide} />\n </Portal>\n );\n}\n", "import { createContext, useContext, useState } from 'react';\nimport { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type { ContextMenuOptions, ContextMenuProviderProps, ShowContextMenuFunctionObject } from './types';\n\nconst defaultMenuContextValue = () => () => undefined;\n\ndefaultMenuContextValue.showContextMenu = defaultMenuContextValue;\ndefaultMenuContextValue.hideContextMenu = () => undefined;\ndefaultMenuContextValue.isContextMenuVisible = false;\n\nconst MenuContext = createContext<ShowContextMenuFunctionObject>(defaultMenuContextValue);\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 = 'sm',\n borderRadius = 'xs',\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: ShowContextMenuFunctionObject = (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 shadow: options?.shadow || shadow,\n borderRadius: options?.borderRadius || borderRadius,\n className: options?.className,\n style: options?.style,\n sx: options?.sx,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n showContextMenu.showContextMenu = showContextMenu;\n showContextMenu.hideContextMenu = hideContextMenu;\n showContextMenu.isContextMenuVisible = !!data;\n\n return (\n <MenuContext.Provider value={showContextMenu}>\n {children}\n {data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}\n </MenuContext.Provider>\n );\n}\n\n/**\n * Hook returning a function object that shows a context menu.\n * The returned object can also be destructured into\n * `showContextMenu`, `hideContextMenu` functions and a `isContextMenuVisible` boolean,\n * which can be used for finer-grained control (such as imperatively hiding the context menu).\n */\nexport function useContextMenu() {\n return useContext(MenuContext);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "Box", "createStyles", "jsx", "useStyles", "theme", "ContextMenuDivider", "className", "sx", "style", "cx", "classes", "Box", "Text", "UnstyledButton", "createStyles", "px", "useRef", "useState", "Paper", "createStyles", "packSx", "px", "useResizeObserver", "useEffect", "useState", "humanize", "value", "str", "jsx", "EMPTY_OBJECT", "useStyles", "createStyles", "theme", "ContextMenu", "x", "y", "content", "zIndex", "shadow", "borderRadius", "onHide", "className", "style", "sx", "classNames", "styles", "paperRef", "useResizeObserver", "width", "height", "windowWidth", "windowHeight", "setRendered", "useState", "useEffect", "cx", "classes", "dir", "spacing", "styleProperties", "mdSpacing", "px", "Paper", "packSx", "key", "onClick", "items", "title", "otherOptions", "ContextMenuItem", "humanize", "ContextMenuDivider", "jsx", "jsxs", "useStyles", "createStyles", "theme", "color", "verticalPadding", "px", "ContextMenuItem", "className", "style", "icon", "title", "disabled", "onClick", "onHide", "borderRadius", "items", "ref", "useRef", "submenuPosition", "setSubmenuPosition", "useState", "handleClick", "e", "showSubmenu", "y", "x", "hideSubmenu", "hasItemsAndIsNotDisabled", "cx", "classes", "UnstyledButton", "Box", "Text", "ContextMenu", "Portal", "useClickOutside", "useWindowEvent", "jsx", "ContextMenuPortal", "onHide", "otherProps", "useWindowEvent", "portalInnerRef", "useClickOutside", "Portal", "ContextMenu", "createContext", "useContext", "useState", "jsx", "jsxs", "defaultMenuContextValue", "MenuContext", "createContext", "ContextMenuProvider", "zIndex", "shadow", "borderRadius", "children", "data", "setData", "useState", "hideContextMenu", "showContextMenu", "content", "options", "e", "ContextMenuPortal", "useContextMenu", "useContext"]
|
|
7
7
|
}
|
package/dist/types.d.ts
CHANGED
|
@@ -100,6 +100,9 @@ export type ContextMenuItemOptions = {
|
|
|
100
100
|
items?: never;
|
|
101
101
|
});
|
|
102
102
|
export type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);
|
|
103
|
+
/**
|
|
104
|
+
* Show context menu function
|
|
105
|
+
*/
|
|
103
106
|
export type ShowContextMenuFunction = (
|
|
104
107
|
/**
|
|
105
108
|
* Context menu content - either an array of context menu items
|
|
@@ -110,4 +113,22 @@ content: ContextMenuContent,
|
|
|
110
113
|
* Context menu options (overrides provider options)
|
|
111
114
|
*/
|
|
112
115
|
options?: ContextMenuOptions) => MouseEventHandler;
|
|
116
|
+
/**
|
|
117
|
+
* Hide context menu function
|
|
118
|
+
*/
|
|
119
|
+
export type HideContextMenuFunction = () => void;
|
|
120
|
+
export interface ShowContextMenuFunctionObject extends ShowContextMenuFunction {
|
|
121
|
+
/**
|
|
122
|
+
* A function that shows the context menu
|
|
123
|
+
*/
|
|
124
|
+
showContextMenu: ShowContextMenuFunction;
|
|
125
|
+
/**
|
|
126
|
+
* A function that hides the context menu
|
|
127
|
+
*/
|
|
128
|
+
hideContextMenu: HideContextMenuFunction;
|
|
129
|
+
/**
|
|
130
|
+
* Boolean indicating whether the context menu is visible
|
|
131
|
+
*/
|
|
132
|
+
isContextMenuVisible: boolean;
|
|
133
|
+
}
|
|
113
134
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IAEvB;;;OAGG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC;IAE7B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAErD;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,GAAG;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,CACA,CAAC;IACC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,CACA;IACE;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAE9C,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,sBAAsB,EAAE,CAAC;CACjC,CACJ,CAAC,GACF;IACE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACJ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAEjG,MAAM,MAAM,uBAAuB,GAAG;AACpC;;;GAGG;AACH,OAAO,EAAE,kBAAkB;AAE3B;;GAEG;AACH,OAAO,CAAC,EAAE,kBAAkB,KACzB,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-contextmenu",
|
|
3
|
-
"version": "6.0
|
|
3
|
+
"version": "6.1.0",
|
|
4
4
|
"description": "Enhance your Mantine UI applications usability with customizable context menus",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@mantine/core": "^6.0.21",
|
|
57
57
|
"@mantine/hooks": "^6.0.21",
|
|
58
|
-
"@types/react": "^18.2.
|
|
59
|
-
"@types/react-dom": "^18.2.
|
|
58
|
+
"@types/react": "^18.2.37",
|
|
59
|
+
"@types/react-dom": "^18.2.15",
|
|
60
60
|
"esbuild": "^0.19.5",
|
|
61
61
|
"react": "^18.2.0",
|
|
62
62
|
"typescript": "^5.2.2"
|