mantine-contextmenu 7.0.0-alpha.5 → 7.0.0-alpha.6
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/README.md +1 -1
- package/dist/cjs/ContextMenu.js +19 -12
- package/dist/cjs/ContextMenu.js.map +1 -1
- package/dist/cjs/ContextMenuDivider.js +1 -3
- package/dist/cjs/ContextMenuDivider.js.map +1 -1
- package/dist/cjs/ContextMenuItem.js +23 -13
- package/dist/cjs/ContextMenuItem.js.map +1 -1
- package/dist/cjs/ContextMenuProvider.js +7 -7
- package/dist/cjs/ContextMenuProvider.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/ContextMenu.js +20 -22
- package/dist/esm/ContextMenu.js.map +1 -1
- package/dist/esm/ContextMenuDivider.js +2 -4
- package/dist/esm/ContextMenuDivider.js.map +1 -1
- package/dist/esm/ContextMenuItem.js +25 -22
- package/dist/esm/ContextMenuItem.js.map +1 -1
- package/dist/esm/ContextMenuProvider.js +6 -6
- package/dist/esm/ContextMenuProvider.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/types/ContextMenuProvider.d.ts +11 -5
- package/dist/types/types.d.ts +40 -35
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -64,7 +64,7 @@ import Picture from '~/components/Picture';
|
|
|
64
64
|
import { copyImageToClipboard, downloadImage, unsplashImages } from '~/lib/image';
|
|
65
65
|
|
|
66
66
|
export default function GettingStartedExample() {
|
|
67
|
-
const showContextMenu = useContextMenu();
|
|
67
|
+
const { showContextMenu } = useContextMenu();
|
|
68
68
|
|
|
69
69
|
const image = unsplashImages[0];
|
|
70
70
|
const { src } = image.file;
|
package/dist/cjs/ContextMenu.js
CHANGED
|
@@ -39,7 +39,7 @@ var utils_1 = require("./utils");
|
|
|
39
39
|
function ContextMenu(_a) {
|
|
40
40
|
var _b;
|
|
41
41
|
var x = _a.x, y = _a.y, content = _a.content, zIndex = _a.zIndex, onHide = _a.onHide, className = _a.className, style = _a.style, classNames = _a.classNames, styles = _a.styles;
|
|
42
|
-
var _c = (0, react_1.useContext)(ContextMenuProvider_1.
|
|
42
|
+
var _c = (0, react_1.useContext)(ContextMenuProvider_1.ContextMenuSettingsCtx), shadow = _c.shadow, borderRadius = _c.borderRadius;
|
|
43
43
|
var paperRef = (0, hooks_1.useResizeObserver)()[0];
|
|
44
44
|
var _d = ((_b = paperRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || { width: 0, height: 0 }, width = _d.width, height = _d.height;
|
|
45
45
|
var windowWidth = 0;
|
|
@@ -47,19 +47,26 @@ function ContextMenu(_a) {
|
|
|
47
47
|
if (typeof window !== 'undefined')
|
|
48
48
|
(windowWidth = window.innerWidth, windowHeight = window.innerHeight);
|
|
49
49
|
var dir = (0, core_1.useDirection)().dir;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
:
|
|
58
|
-
|
|
50
|
+
return ((0, jsx_runtime_1.jsx)(core_1.Paper, { ref: paperRef, shadow: shadow, radius: borderRadius, className: (0, clsx_1.default)('mantine-contextmenu', className, classNames === null || classNames === void 0 ? void 0 : classNames.root), style: [
|
|
51
|
+
styles === null || styles === void 0 ? void 0 : styles.root,
|
|
52
|
+
style,
|
|
53
|
+
function (_a) {
|
|
54
|
+
var md = _a.spacing.md;
|
|
55
|
+
var mdSpacing = (0, core_1.px)(md);
|
|
56
|
+
return {
|
|
57
|
+
zIndex: zIndex,
|
|
58
|
+
top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,
|
|
59
|
+
left: dir === 'ltr'
|
|
60
|
+
? x + width + mdSpacing > windowWidth
|
|
61
|
+
? windowWidth - width - mdSpacing
|
|
62
|
+
: x
|
|
63
|
+
: windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),
|
|
64
|
+
};
|
|
65
|
+
},
|
|
66
|
+
], children: Array.isArray(content)
|
|
59
67
|
? content.map(function (_a) {
|
|
60
68
|
var key = _a.key, className = _a.className, style = _a.style, onClick = _a.onClick, items = _a.items, title = _a.title, otherOptions = __rest(_a, ["key", "className", "style", "onClick", "items", "title"]);
|
|
61
|
-
|
|
62
|
-
return onClick || items ? ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, __assign({ className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.item, className), style: __assign(__assign({}, resolvedStyles === null || resolvedStyles === void 0 ? void 0 : resolvedStyles.item), resolvedItemStyle), title: title !== null && title !== void 0 ? title : (0, utils_1.humanize)(key), onClick: onClick, onHide: onHide, items: items }, otherOptions), key)) : ((0, jsx_runtime_1.jsx)(ContextMenuDivider_1.ContextMenuDivider, { className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.divider, className), style: __assign(__assign({}, resolvedStyles === null || resolvedStyles === void 0 ? void 0 : resolvedStyles.divider), resolvedItemStyle) }, key));
|
|
69
|
+
return onClick || items ? ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, __assign({ className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.item, className), style: [styles === null || styles === void 0 ? void 0 : styles.item, style], title: title !== null && title !== void 0 ? title : (0, utils_1.humanize)(key), onClick: onClick, onHide: onHide, items: items }, otherOptions), key)) : ((0, jsx_runtime_1.jsx)(ContextMenuDivider_1.ContextMenuDivider, { className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.divider, className), style: [styles === null || styles === void 0 ? void 0 : styles.divider, style] }, key));
|
|
63
70
|
})
|
|
64
71
|
: content(onHide) }));
|
|
65
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,
|
|
1
|
+
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,sCAAwD;AACxD,wCAAmD;AACnD,8CAAwB;AACxB,+BAAmC;AACnC,2DAA0D;AAC1D,qDAAoD;AACpD,6DAA+D;AAE/D,iCAAmC;AAanC,SAAgB,WAAW,CAAC,EAAyF;;QAAvF,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,MAAM,YAAA;IACzF,IAAA,KAA2B,IAAA,kBAAU,EAAC,4CAAsB,CAAC,EAA3D,MAAM,YAAA,EAAE,YAAY,kBAAuC,CAAC;IAC7D,IAAA,QAAQ,GAAI,IAAA,yBAAiB,GAAkB,GAAvC,CAAwC;IACjD,IAAA,KAAoB,CAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,qBAAqB,EAAE,KAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAtF,KAAK,WAAA,EAAE,MAAM,YAAyE,CAAC;IAE/F,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,CAAe,WAAW,GAAgC,MAAM,WAAtC,EAAe,YAAY,GAAK,MAAM,YAAX,CAAY,CAAC;IAE7F,IAAA,GAAG,GAAK,IAAA,mBAAY,GAAE,IAAnB,CAAoB;IAE/B,OAAO,CACL,uBAAC,YAAK,IACJ,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,SAAS,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,CAAC,EACnE,KAAK,EAAE;YACL,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI;YACZ,KAAK;YACL,UAAC,EAAmB;oBAAN,EAAE,gBAAA;gBACd,IAAM,SAAS,GAAG,IAAA,SAAE,EAAC,EAAE,CAAW,CAAC;gBACnC,OAAO;oBACL,MAAM,QAAA;oBACN,GAAG,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;oBAClF,IAAI,EACF,GAAG,KAAK,KAAK;wBACX,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW;4BACnC,CAAC,CAAC,WAAW,GAAG,KAAK,GAAG,SAAS;4BACjC,CAAC,CAAC,CAAC;wBACL,CAAC,CAAC,WAAW,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;iBACpF,CAAC;YACJ,CAAC;SACF,YAEA,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YACrB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,EAAiE;gBAA/D,IAAA,GAAG,SAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAK,YAAY,cAA/D,0DAAiE,CAAF;gBAC1E,OAAA,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CACjB,uBAAC,iCAAe,aAEd,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,EAAE,SAAS,CAAC,EAC5C,KAAK,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,EAC5B,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAA,gBAAQ,EAAC,GAAG,CAAC,EAC7B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,IACR,YAAY,GAPX,GAAG,CAQR,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,uCAAkB,IAEjB,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,EAAE,SAAS,CAAC,EAC/C,KAAK,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE,KAAK,CAAC,IAF1B,GAAG,CAGR,CACH,CAAA;aAAA,CACF;YACH,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,GACb,CACT,CAAC;AACJ,CAAC;AA3DD,kCA2DC","sourcesContent":["'use client';\n\nimport { 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 styles?.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 ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) =>\n 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"]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
"use strict";
|
|
3
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
@@ -10,8 +9,7 @@ var core_1 = require("@mantine/core");
|
|
|
10
9
|
var clsx_1 = __importDefault(require("clsx"));
|
|
11
10
|
function ContextMenuDivider(_a) {
|
|
12
11
|
var className = _a.className, style = _a.style;
|
|
13
|
-
|
|
14
|
-
return ((0, jsx_runtime_1.jsx)(core_1.Box, { className: (0, clsx_1.default)('mantine-contextmenu-divider', className), style: typeof style === 'function' ? style(theme) : style }));
|
|
12
|
+
return (0, jsx_runtime_1.jsx)(core_1.Box, { className: (0, clsx_1.default)('mantine-contextmenu-divider', className), style: style });
|
|
15
13
|
}
|
|
16
14
|
exports.ContextMenuDivider = ContextMenuDivider;
|
|
17
15
|
//# sourceMappingURL=ContextMenuDivider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,sCAAoC;AACpC,8CAAwB;AAKxB,SAAgB,kBAAkB,CAAC,EAA6C;QAA3C,SAAS,eAAA,EAAE,KAAK,WAAA;IACnD,OAAO,uBAAC,UAAG,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,6BAA6B,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AAC1F,CAAC;AAFD,gDAEC","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"]}
|
|
@@ -26,7 +26,7 @@ var ContextMenuProvider_1 = require("./ContextMenuProvider");
|
|
|
26
26
|
function ContextMenuItem(_a) {
|
|
27
27
|
var className = _a.className, style = _a.style, icon = _a.icon, title = _a.title, color = _a.color, disabled = _a.disabled, onClick = _a.onClick, onHide = _a.onHide, items = _a.items;
|
|
28
28
|
var ref = (0, react_1.useRef)(null);
|
|
29
|
-
var submenuDelay = (0, react_1.useContext)(ContextMenuProvider_1.
|
|
29
|
+
var submenuDelay = (0, react_1.useContext)(ContextMenuProvider_1.ContextMenuSettingsCtx).submenuDelay;
|
|
30
30
|
var _b = (0, react_1.useState)(null), submenuPosition = _b[0], setSubmenuPosition = _b[1];
|
|
31
31
|
var handleClick = onClick
|
|
32
32
|
? function (e) {
|
|
@@ -50,18 +50,28 @@ function ContextMenuItem(_a) {
|
|
|
50
50
|
startHidingSubmenu();
|
|
51
51
|
};
|
|
52
52
|
var hasItemsAndIsNotDisabled = items && !disabled;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
53
|
+
return ((0, jsx_runtime_1.jsxs)("div", { onMouseEnter: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseLeave: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [(0, jsx_runtime_1.jsxs)(core_1.UnstyledButton, { ref: ref, style: [
|
|
54
|
+
function (theme) {
|
|
55
|
+
var colors = theme.colors;
|
|
56
|
+
var parsedColor = color ? (0, core_1.parseThemeColor)({ color: color, theme: theme }).value : undefined;
|
|
57
|
+
return {
|
|
58
|
+
'--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',
|
|
59
|
+
'--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
|
|
60
|
+
? (0, core_1.rgba)(parsedColor, 0.08)
|
|
61
|
+
: (0, core_1.rgba)(colors.gray[4], 0.25),
|
|
62
|
+
'--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
|
|
63
|
+
? (0, core_1.rgba)(parsedColor, 0.15)
|
|
64
|
+
: (0, core_1.rgba)(colors.dark[3], 0.25),
|
|
65
|
+
'--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
|
|
66
|
+
? (0, core_1.rgba)(parsedColor, 0.2)
|
|
67
|
+
: (0, core_1.rgba)(colors.gray[4], 0.5),
|
|
68
|
+
'--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
|
|
69
|
+
? (0, core_1.rgba)(parsedColor, 0.3)
|
|
70
|
+
: (0, core_1.rgba)(colors.dark[3], 0.5),
|
|
71
|
+
};
|
|
72
|
+
},
|
|
73
|
+
style,
|
|
74
|
+
], className: (0, clsx_1.default)('mantine-contextmenu-item-button', className), disabled: disabled, onClick: handleClick, children: [icon && ((0, jsx_runtime_1.jsx)(core_1.Box, { fz: 0, mr: "xs", mt: -2, children: icon })), (0, jsx_runtime_1.jsx)("div", { className: "mantine-contextmenu-item-button-title", children: title }), items && ((0, jsx_runtime_1.jsx)(core_1.Box, { fz: 10, mt: -2, ml: "xs", children: "\u25B6" }))] }), submenuPosition && (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ content: items, onHide: onHide }, submenuPosition))] }));
|
|
65
75
|
}
|
|
66
76
|
exports.ContextMenuItem = ContextMenuItem;
|
|
67
77
|
//# sourceMappingURL=ContextMenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;AAEb,
|
|
1
|
+
{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { 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 [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 { 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 hasItemsAndIsNotDisabled = items && !disabled;\n\n return (\n <div\n onMouseEnter={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseLeave={hasItemsAndIsNotDisabled ? 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"]}
|
|
@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
return __assign.apply(this, arguments);
|
|
13
13
|
};
|
|
14
14
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
-
exports.useContextMenu = exports.ContextMenuProvider = exports.
|
|
15
|
+
exports.useContextMenu = exports.ContextMenuProvider = exports.ContextMenuCtx = exports.ContextMenuSettingsCtx = void 0;
|
|
16
16
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
17
|
var core_1 = require("@mantine/core");
|
|
18
18
|
var react_1 = require("react");
|
|
@@ -22,8 +22,8 @@ var DEFAULT_SETTINGS = {
|
|
|
22
22
|
borderRadius: 'xs',
|
|
23
23
|
submenuDelay: 500,
|
|
24
24
|
};
|
|
25
|
-
exports.
|
|
26
|
-
exports.
|
|
25
|
+
exports.ContextMenuSettingsCtx = (0, react_1.createContext)(DEFAULT_SETTINGS);
|
|
26
|
+
exports.ContextMenuCtx = (0, react_1.createContext)({ showContextMenu: function () { return function () { return undefined; }; }, hideContextMenu: function () { return undefined; } });
|
|
27
27
|
/**
|
|
28
28
|
* Provider that allows to show a context menu anywhere in your application.
|
|
29
29
|
* If you wrap your application with this provider, you can use the `useContextMenu` hook
|
|
@@ -32,7 +32,7 @@ exports.MenuContext = (0, react_1.createContext)(function () { return function (
|
|
|
32
32
|
function ContextMenuProvider(_a) {
|
|
33
33
|
var _b = _a.zIndex, zIndex = _b === void 0 ? 9999 : _b, _c = _a.shadow, shadow = _c === void 0 ? DEFAULT_SETTINGS.shadow : _c, _d = _a.borderRadius, borderRadius = _d === void 0 ? DEFAULT_SETTINGS.borderRadius : _d, _e = _a.submenuDelay, submenuDelay = _e === void 0 ? DEFAULT_SETTINGS.submenuDelay : _e, children = _a.children;
|
|
34
34
|
var _f = (0, react_1.useState)(null), data = _f[0], setData = _f[1];
|
|
35
|
-
var
|
|
35
|
+
var hideContextMenu = function () {
|
|
36
36
|
setData(null);
|
|
37
37
|
};
|
|
38
38
|
var showContextMenu = function (content, options) { return function (e) {
|
|
@@ -49,14 +49,14 @@ function ContextMenuProvider(_a) {
|
|
|
49
49
|
styles: options === null || options === void 0 ? void 0 : options.styles,
|
|
50
50
|
});
|
|
51
51
|
}; };
|
|
52
|
-
return ((0, jsx_runtime_1.jsx)(exports.
|
|
52
|
+
return ((0, jsx_runtime_1.jsx)(exports.ContextMenuSettingsCtx.Provider, { value: { shadow: shadow, borderRadius: borderRadius, submenuDelay: submenuDelay }, children: (0, jsx_runtime_1.jsxs)(exports.ContextMenuCtx.Provider, { value: { showContextMenu: showContextMenu, hideContextMenu: hideContextMenu }, children: [children, (0, jsx_runtime_1.jsx)(core_1.MantineProvider, { children: data && (0, jsx_runtime_1.jsx)(ContextMenuPortal_1.ContextMenuPortal, __assign({ onHide: hideContextMenu }, data)) })] }) }));
|
|
53
53
|
}
|
|
54
54
|
exports.ContextMenuProvider = ContextMenuProvider;
|
|
55
55
|
/**
|
|
56
|
-
* Hook returning
|
|
56
|
+
* Hook returning functions that show and hide the context menu.
|
|
57
57
|
*/
|
|
58
58
|
function useContextMenu() {
|
|
59
|
-
return (0, react_1.useContext)(exports.
|
|
59
|
+
return (0, react_1.useContext)(exports.ContextMenuCtx);
|
|
60
60
|
}
|
|
61
61
|
exports.useContextMenu = useContextMenu;
|
|
62
62
|
//# sourceMappingURL=ContextMenuProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuProvider.js","sourceRoot":"","sources":["../../package/ContextMenuProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;AAEb,sCAAgD;AAChD,+BAA4D;AAE5D,yDAAwD;
|
|
1
|
+
{"version":3,"file":"ContextMenuProvider.js","sourceRoot":"","sources":["../../package/ContextMenuProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;AAEb,sCAAgD;AAChD,+BAA4D;AAE5D,yDAAwD;AAUxD,IAAM,gBAAgB,GAA0F;IAC9G,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,GAAG;CAClB,CAAC;AAEW,QAAA,sBAAsB,GAAG,IAAA,qBAAa,EAAC,gBAAgB,CAAC,CAAC;AACzD,QAAA,cAAc,GAAG,IAAA,qBAAa,EAGxC,EAAE,eAAe,EAAE,cAAM,OAAA,cAAM,OAAA,SAAS,EAAT,CAAS,EAAf,CAAe,EAAE,eAAe,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS,EAAE,CAAC,CAAC;AAEjF;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,EAMT;QALzB,cAAa,EAAb,MAAM,mBAAG,IAAI,KAAA,EACb,cAAgC,EAAhC,MAAM,mBAAG,gBAAgB,CAAC,MAAM,KAAA,EAChC,oBAA4C,EAA5C,YAAY,mBAAG,gBAAgB,CAAC,YAAY,KAAA,EAC5C,oBAA4C,EAA5C,YAAY,mBAAG,gBAAgB,CAAC,YAAY,KAAA,EAC5C,QAAQ,cAAA;IAEF,IAAA,KAAkB,IAAA,gBAAQ,EAA2D,IAAI,CAAC,EAAzF,IAAI,QAAA,EAAE,OAAO,QAA4E,CAAC;IAEjG,IAAM,eAAe,GAAG;QACtB,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,IAAM,eAAe,GAA4B,UAAC,OAAO,EAAE,OAAO,IAAK,OAAA,UAAC,CAAC;QACvE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC;YACN,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,OAAO,SAAA;YACP,MAAM,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,KAAI,MAAM;YACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS;YAC7B,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK;YACrB,UAAU,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU;YAC/B,MAAM,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;SACxB,CAAC,CAAC;IACL,CAAC,EAbsE,CAatE,CAAC;IAEF,OAAO,CACL,uBAAC,8BAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,QAAA,EAAE,YAAY,cAAA,EAAE,YAAY,cAAA,EAAE,YAC5E,wBAAC,sBAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,eAAe,iBAAA,EAAE,eAAe,iBAAA,EAAE,aACjE,QAAQ,EACT,uBAAC,sBAAe,cAAE,IAAI,IAAI,uBAAC,qCAAiB,aAAC,MAAM,EAAE,eAAe,IAAM,IAAI,EAAI,GAAmB,IAC7E,GACM,CACnC,CAAC;AACJ,CAAC;AApCD,kDAoCC;AAED;;GAEG;AACH,SAAgB,cAAc;IAC5B,OAAO,IAAA,kBAAU,EAAC,sBAAc,CAAC,CAAC;AACpC,CAAC;AAFD,wCAEC","sourcesContent":["'use client';\n\nimport { MantineProvider } from '@mantine/core';\nimport { createContext, useContext, useState } from 'react';\nimport { 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 showContextMenu: ShowContextMenuFunction;\n hideContextMenu: HideContextMenuFunction;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => 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 = 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 }}>\n {children}\n <MantineProvider>{data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}</MantineProvider>\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"]}
|
package/dist/cjs/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineShadow,
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n /**\n * The z-index of context menu.\n * @default 9999\n */\n zIndex?: number;\n\n /**\n * Context menu container className.\n */\n className?: string;\n\n /**\n * Context menu container style.\n */\n style?: MantineStyleProp;\n\n /**\n * Context menu elements classNames.\n */\n classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n /**\n * Context menu styles.\n * Can be an object with `root`, `item` and `divider` keys and `CSSProperties` as values,\n * or a function that accepts the current theme and returns a similarly structured object.\n */\n styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;\n};\n\n/**\n * Generic context menu settings\n */\nexport type ContextMenuSettings = {\n /**\n * Context menu shadow.\n * @default 'sm'\n */\n shadow?: MantineShadow;\n\n /**\n * Context menu border radius.\n * @default 'xs'\n */\n borderRadius?: MantineRadius;\n\n /**\n * Delay in ms to use when showing and hiding submenus.\n * @default 500\n */\n submenuDelay?: number;\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuSettings &\n ContextMenuOptions & {\n children: React.ReactNode;\n };\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n /**\n * Unique key of the context menu item or divider.\n */\n key: string;\n /**\n * Context menu item or divider className.\n */\n className?: string;\n\n /**\n * Context menu item or divider style.\n */\n style?: MantineStyleProp;\n} & (\n | ({\n /**\n * Optional context menu item icon.\n */\n icon?: React.ReactNode;\n\n /**\n * Optional context menu item title.\n * If not provided, one will be generated automatically by \"humanizing\" the key.\n * @default humanize(key)\n */\n title?: React.ReactNode;\n\n /**\n * Optional context menu item color.\n */\n color?: MantineColor;\n\n /**\n * Boolean indicating whether the context menu item is disabled.\n */\n disabled?: boolean;\n } & (\n | {\n /**\n * Optional context menu item `onClick` handler.\n * If not provided, a divider will be rendered instead.\n */\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n items?: never;\n }\n | {\n onClick?: never;\n\n /**\n * Optional items.\n * If provided, a submenu will be rendered.\n */\n items: ContextMenuItemOptions[];\n }\n ))\n | {\n icon?: never;\n title?: never;\n color?: never;\n disabled?: never;\n onClick?: never;\n items?: never;\n }\n);\n\n/**\n * Context menu content.\n * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Show context menu function\n */\nexport type ShowContextMenuFunction = (\n /**\n * Context menu content.\n * Either an array of context menu items or a function that accepts a close callback and returns context menu content.\n */\n content: ContextMenuContent,\n\n /**\n * Context menu options (overrides provider props).\n */\n options?: ContextMenuOptions\n) => React.MouseEventHandler;\n\nexport type HideContextMenuFunction = () => void;\n"]}
|
package/dist/esm/ContextMenu.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Paper, px, useDirection
|
|
3
|
+
import { Paper, px, useDirection } from '@mantine/core';
|
|
4
4
|
import { useResizeObserver } from '@mantine/hooks';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useContext } from 'react';
|
|
7
7
|
import { ContextMenuDivider } from './ContextMenuDivider';
|
|
8
8
|
import { ContextMenuItem } from './ContextMenuItem';
|
|
9
|
-
import {
|
|
9
|
+
import { ContextMenuSettingsCtx } from './ContextMenuProvider';
|
|
10
10
|
import { humanize } from './utils';
|
|
11
11
|
export function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }) {
|
|
12
|
-
const { shadow, borderRadius } = useContext(
|
|
12
|
+
const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);
|
|
13
13
|
const [paperRef] = useResizeObserver();
|
|
14
14
|
const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };
|
|
15
15
|
let windowWidth = 0;
|
|
@@ -17,25 +17,23 @@ export function ContextMenu({ x, y, content, zIndex, onHide, className, style, c
|
|
|
17
17
|
if (typeof window !== 'undefined')
|
|
18
18
|
({ innerWidth: windowWidth, innerHeight: windowHeight } = window);
|
|
19
19
|
const { dir } = useDirection();
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return onClick || items ? (_jsx(ContextMenuItem, { className: clsx(classNames?.item, className), style: { ...resolvedStyles?.item, ...resolvedItemStyle }, title: title ?? humanize(key), onClick: onClick, onHide: onHide, items: items, ...otherOptions }, key)) : (_jsx(ContextMenuDivider, { className: clsx(classNames?.divider, className), style: { ...resolvedStyles?.divider, ...resolvedItemStyle } }, key));
|
|
38
|
-
})
|
|
20
|
+
return (_jsx(Paper, { ref: paperRef, shadow: shadow, radius: borderRadius, className: clsx('mantine-contextmenu', className, classNames?.root), style: [
|
|
21
|
+
styles?.root,
|
|
22
|
+
style,
|
|
23
|
+
({ spacing: { md } }) => {
|
|
24
|
+
const mdSpacing = px(md);
|
|
25
|
+
return {
|
|
26
|
+
zIndex,
|
|
27
|
+
top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,
|
|
28
|
+
left: dir === 'ltr'
|
|
29
|
+
? x + width + mdSpacing > windowWidth
|
|
30
|
+
? windowWidth - width - mdSpacing
|
|
31
|
+
: x
|
|
32
|
+
: windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),
|
|
33
|
+
};
|
|
34
|
+
},
|
|
35
|
+
], children: Array.isArray(content)
|
|
36
|
+
? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) => onClick || items ? (_jsx(ContextMenuItem, { className: clsx(classNames?.item, className), style: [styles?.item, style], title: title ?? humanize(key), onClick: onClick, onHide: onHide, items: items, ...otherOptions }, key)) : (_jsx(ContextMenuDivider, { className: clsx(classNames?.divider, className), style: [styles?.divider, style] }, key)))
|
|
39
37
|
: content(onHide) }));
|
|
40
38
|
}
|
|
41
39
|
//# sourceMappingURL=ContextMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { 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 styles?.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 ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) =>\n 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"]}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Box
|
|
2
|
+
import { Box } from '@mantine/core';
|
|
4
3
|
import clsx from 'clsx';
|
|
5
4
|
export function ContextMenuDivider({ className, style }) {
|
|
6
|
-
|
|
7
|
-
return (_jsx(Box, { className: clsx('mantine-contextmenu-divider', className), style: typeof style === 'function' ? style(theme) : style }));
|
|
5
|
+
return _jsx(Box, { className: clsx('mantine-contextmenu-divider', className), style: style });
|
|
8
6
|
}
|
|
9
7
|
//# sourceMappingURL=ContextMenuDivider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AAKxB,MAAM,UAAU,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAA2B;IAC9E,OAAO,KAAC,GAAG,IAAC,SAAS,EAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AAC1F,CAAC","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"]}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Box, UnstyledButton, parseThemeColor, rgba
|
|
3
|
+
import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';
|
|
4
4
|
import { useTimeout } from '@mantine/hooks';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useContext, useRef, useState } from 'react';
|
|
7
7
|
import { ContextMenu } from './ContextMenu';
|
|
8
|
-
import {
|
|
8
|
+
import { ContextMenuSettingsCtx } from './ContextMenuProvider';
|
|
9
9
|
export function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }) {
|
|
10
10
|
const ref = useRef(null);
|
|
11
|
-
const { submenuDelay } = useContext(
|
|
11
|
+
const { submenuDelay } = useContext(ContextMenuSettingsCtx);
|
|
12
12
|
const [submenuPosition, setSubmenuPosition] = useState(null);
|
|
13
13
|
const handleClick = onClick
|
|
14
14
|
? (e) => {
|
|
@@ -32,24 +32,27 @@ export function ContextMenuItem({ className, style, icon, title, color, disabled
|
|
|
32
32
|
startHidingSubmenu();
|
|
33
33
|
};
|
|
34
34
|
const hasItemsAndIsNotDisabled = items && !disabled;
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
35
|
+
return (_jsxs("div", { onMouseEnter: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseLeave: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [_jsxs(UnstyledButton, { ref: ref, style: [
|
|
36
|
+
(theme) => {
|
|
37
|
+
const { colors } = theme;
|
|
38
|
+
const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;
|
|
39
|
+
return {
|
|
40
|
+
'--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',
|
|
41
|
+
'--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
|
|
42
|
+
? rgba(parsedColor, 0.08)
|
|
43
|
+
: rgba(colors.gray[4], 0.25),
|
|
44
|
+
'--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
|
|
45
|
+
? rgba(parsedColor, 0.15)
|
|
46
|
+
: rgba(colors.dark[3], 0.25),
|
|
47
|
+
'--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
|
|
48
|
+
? rgba(parsedColor, 0.2)
|
|
49
|
+
: rgba(colors.gray[4], 0.5),
|
|
50
|
+
'--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
|
|
51
|
+
? rgba(parsedColor, 0.3)
|
|
52
|
+
: rgba(colors.dark[3], 0.5),
|
|
53
|
+
};
|
|
54
|
+
},
|
|
55
|
+
style,
|
|
56
|
+
], className: clsx('mantine-contextmenu-item-button', className), disabled: disabled, onClick: handleClick, children: [icon && (_jsx(Box, { fz: 0, mr: "xs", mt: -2, children: icon })), _jsx("div", { className: "mantine-contextmenu-item-button-title", children: title }), items && (_jsx(Box, { fz: 10, mt: -2, ml: "xs", children: "\u25B6" }))] }), submenuPosition && _jsx(ContextMenu, { content: items, onHide: onHide, ...submenuPosition })] }));
|
|
54
57
|
}
|
|
55
58
|
//# sourceMappingURL=ContextMenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,eAAe,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { 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 [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 { 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 hasItemsAndIsNotDisabled = items && !disabled;\n\n return (\n <div\n onMouseEnter={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseLeave={hasItemsAndIsNotDisabled ? 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"]}
|
|
@@ -8,8 +8,8 @@ const DEFAULT_SETTINGS = {
|
|
|
8
8
|
borderRadius: 'xs',
|
|
9
9
|
submenuDelay: 500,
|
|
10
10
|
};
|
|
11
|
-
export const
|
|
12
|
-
export const
|
|
11
|
+
export const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);
|
|
12
|
+
export const ContextMenuCtx = createContext({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined });
|
|
13
13
|
/**
|
|
14
14
|
* Provider that allows to show a context menu anywhere in your application.
|
|
15
15
|
* If you wrap your application with this provider, you can use the `useContextMenu` hook
|
|
@@ -17,7 +17,7 @@ export const MenuContext = createContext(() => () => undefined);
|
|
|
17
17
|
*/
|
|
18
18
|
export function ContextMenuProvider({ zIndex = 9999, shadow = DEFAULT_SETTINGS.shadow, borderRadius = DEFAULT_SETTINGS.borderRadius, submenuDelay = DEFAULT_SETTINGS.submenuDelay, children, }) {
|
|
19
19
|
const [data, setData] = useState(null);
|
|
20
|
-
const
|
|
20
|
+
const hideContextMenu = () => {
|
|
21
21
|
setData(null);
|
|
22
22
|
};
|
|
23
23
|
const showContextMenu = (content, options) => (e) => {
|
|
@@ -34,12 +34,12 @@ export function ContextMenuProvider({ zIndex = 9999, shadow = DEFAULT_SETTINGS.s
|
|
|
34
34
|
styles: options?.styles,
|
|
35
35
|
});
|
|
36
36
|
};
|
|
37
|
-
return (_jsx(
|
|
37
|
+
return (_jsx(ContextMenuSettingsCtx.Provider, { value: { shadow, borderRadius, submenuDelay }, children: _jsxs(ContextMenuCtx.Provider, { value: { showContextMenu, hideContextMenu }, children: [children, _jsx(MantineProvider, { children: data && _jsx(ContextMenuPortal, { onHide: hideContextMenu, ...data }) })] }) }));
|
|
38
38
|
}
|
|
39
39
|
/**
|
|
40
|
-
* Hook returning
|
|
40
|
+
* Hook returning functions that show and hide the context menu.
|
|
41
41
|
*/
|
|
42
42
|
export function useContextMenu() {
|
|
43
|
-
return useContext(
|
|
43
|
+
return useContext(ContextMenuCtx);
|
|
44
44
|
}
|
|
45
45
|
//# sourceMappingURL=ContextMenuProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuProvider.js","sourceRoot":"","sources":["../../package/ContextMenuProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenuProvider.js","sourceRoot":"","sources":["../../package/ContextMenuProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,gBAAgB,GAA0F;IAC9G,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,GAAG;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;AACtE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAGxC,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;AAEjF;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,MAAM,GAAG,IAAI,EACb,MAAM,GAAG,gBAAgB,CAAC,MAAM,EAChC,YAAY,GAAG,gBAAgB,CAAC,YAAY,EAC5C,YAAY,GAAG,gBAAgB,CAAC,YAAY,EAC5C,QAAQ,GACiB;IACzB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2D,IAAI,CAAC,CAAC;IAEjG,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,eAAe,GAA4B,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;QAC3E,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC;YACN,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,OAAO;YACP,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,MAAM;YACjC,SAAS,EAAE,OAAO,EAAE,SAAS;YAC7B,KAAK,EAAE,OAAO,EAAE,KAAK;YACrB,UAAU,EAAE,OAAO,EAAE,UAAU;YAC/B,MAAM,EAAE,OAAO,EAAE,MAAM;SACxB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,YAC5E,MAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,aACjE,QAAQ,EACT,KAAC,eAAe,cAAE,IAAI,IAAI,KAAC,iBAAiB,IAAC,MAAM,EAAE,eAAe,KAAM,IAAI,GAAI,GAAmB,IAC7E,GACM,CACnC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,UAAU,CAAC,cAAc,CAAC,CAAC;AACpC,CAAC","sourcesContent":["'use client';\n\nimport { MantineProvider } from '@mantine/core';\nimport { createContext, useContext, useState } from 'react';\nimport { 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 showContextMenu: ShowContextMenuFunction;\n hideContextMenu: HideContextMenuFunction;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => 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 = 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 }}>\n {children}\n <MantineProvider>{data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}</MantineProvider>\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"]}
|
package/dist/esm/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineShadow,
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n /**\n * The z-index of context menu.\n * @default 9999\n */\n zIndex?: number;\n\n /**\n * Context menu container className.\n */\n className?: string;\n\n /**\n * Context menu container style.\n */\n style?: MantineStyleProp;\n\n /**\n * Context menu elements classNames.\n */\n classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n /**\n * Context menu styles.\n * Can be an object with `root`, `item` and `divider` keys and `CSSProperties` as values,\n * or a function that accepts the current theme and returns a similarly structured object.\n */\n styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;\n};\n\n/**\n * Generic context menu settings\n */\nexport type ContextMenuSettings = {\n /**\n * Context menu shadow.\n * @default 'sm'\n */\n shadow?: MantineShadow;\n\n /**\n * Context menu border radius.\n * @default 'xs'\n */\n borderRadius?: MantineRadius;\n\n /**\n * Delay in ms to use when showing and hiding submenus.\n * @default 500\n */\n submenuDelay?: number;\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuSettings &\n ContextMenuOptions & {\n children: React.ReactNode;\n };\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n /**\n * Unique key of the context menu item or divider.\n */\n key: string;\n /**\n * Context menu item or divider className.\n */\n className?: string;\n\n /**\n * Context menu item or divider style.\n */\n style?: MantineStyleProp;\n} & (\n | ({\n /**\n * Optional context menu item icon.\n */\n icon?: React.ReactNode;\n\n /**\n * Optional context menu item title.\n * If not provided, one will be generated automatically by \"humanizing\" the key.\n * @default humanize(key)\n */\n title?: React.ReactNode;\n\n /**\n * Optional context menu item color.\n */\n color?: MantineColor;\n\n /**\n * Boolean indicating whether the context menu item is disabled.\n */\n disabled?: boolean;\n } & (\n | {\n /**\n * Optional context menu item `onClick` handler.\n * If not provided, a divider will be rendered instead.\n */\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n items?: never;\n }\n | {\n onClick?: never;\n\n /**\n * Optional items.\n * If provided, a submenu will be rendered.\n */\n items: ContextMenuItemOptions[];\n }\n ))\n | {\n icon?: never;\n title?: never;\n color?: never;\n disabled?: never;\n onClick?: never;\n items?: never;\n }\n);\n\n/**\n * Context menu content.\n * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Show context menu function\n */\nexport type ShowContextMenuFunction = (\n /**\n * Context menu content.\n * Either an array of context menu items or a function that accepts a close callback and returns context menu content.\n */\n content: ContextMenuContent,\n\n /**\n * Context menu options (overrides provider props).\n */\n options?: ContextMenuOptions\n) => React.MouseEventHandler;\n\nexport type HideContextMenuFunction = () => void;\n"]}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { ContextMenuProviderProps, ContextMenuSettings, ShowContextMenuFunction, WithRequiredProperty } from './types';
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
2
|
+
import type { ContextMenuProviderProps, ContextMenuSettings, HideContextMenuFunction, ShowContextMenuFunction, WithRequiredProperty } from './types';
|
|
3
|
+
export declare const ContextMenuSettingsCtx: import("react").Context<WithRequiredProperty<ContextMenuSettings, "shadow" | "borderRadius" | "submenuDelay">>;
|
|
4
|
+
export declare const ContextMenuCtx: import("react").Context<{
|
|
5
|
+
showContextMenu: ShowContextMenuFunction;
|
|
6
|
+
hideContextMenu: HideContextMenuFunction;
|
|
7
|
+
}>;
|
|
5
8
|
/**
|
|
6
9
|
* Provider that allows to show a context menu anywhere in your application.
|
|
7
10
|
* If you wrap your application with this provider, you can use the `useContextMenu` hook
|
|
@@ -9,6 +12,9 @@ export declare const MenuContext: import("react").Context<ShowContextMenuFunctio
|
|
|
9
12
|
*/
|
|
10
13
|
export declare function ContextMenuProvider({ zIndex, shadow, borderRadius, submenuDelay, children, }: ContextMenuProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
11
14
|
/**
|
|
12
|
-
* Hook returning
|
|
15
|
+
* Hook returning functions that show and hide the context menu.
|
|
13
16
|
*/
|
|
14
|
-
export declare function useContextMenu():
|
|
17
|
+
export declare function useContextMenu(): {
|
|
18
|
+
showContextMenu: ShowContextMenuFunction;
|
|
19
|
+
hideContextMenu: HideContextMenuFunction;
|
|
20
|
+
};
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import type {
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';
|
|
3
3
|
/**
|
|
4
4
|
* Utility type that makes a property required
|
|
5
5
|
*/
|
|
@@ -15,45 +15,45 @@ export type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pi
|
|
|
15
15
|
*/
|
|
16
16
|
export type ContextMenuOptions = {
|
|
17
17
|
/**
|
|
18
|
-
*
|
|
18
|
+
* The z-index of context menu.
|
|
19
19
|
* @default 9999
|
|
20
20
|
*/
|
|
21
21
|
zIndex?: number;
|
|
22
22
|
/**
|
|
23
|
-
* Context menu container className
|
|
23
|
+
* Context menu container className.
|
|
24
24
|
*/
|
|
25
25
|
className?: string;
|
|
26
26
|
/**
|
|
27
|
-
* Context menu container style
|
|
27
|
+
* Context menu container style.
|
|
28
28
|
*/
|
|
29
|
-
style?:
|
|
29
|
+
style?: MantineStyleProp;
|
|
30
30
|
/**
|
|
31
|
-
* Context menu elements classNames
|
|
32
|
-
* @see https://mantine.dev/styles/styles-api/
|
|
31
|
+
* Context menu elements classNames.
|
|
33
32
|
*/
|
|
34
33
|
classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;
|
|
35
34
|
/**
|
|
36
|
-
* Context menu styles
|
|
37
|
-
*
|
|
35
|
+
* Context menu styles.
|
|
36
|
+
* Can be an object with `root`, `item` and `divider` keys and `CSSProperties` as values,
|
|
37
|
+
* or a function that accepts the current theme and returns a similarly structured object.
|
|
38
38
|
*/
|
|
39
|
-
styles?:
|
|
39
|
+
styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;
|
|
40
40
|
};
|
|
41
41
|
/**
|
|
42
42
|
* Generic context menu settings
|
|
43
43
|
*/
|
|
44
44
|
export type ContextMenuSettings = {
|
|
45
45
|
/**
|
|
46
|
-
* Context menu shadow
|
|
46
|
+
* Context menu shadow.
|
|
47
47
|
* @default 'sm'
|
|
48
48
|
*/
|
|
49
49
|
shadow?: MantineShadow;
|
|
50
50
|
/**
|
|
51
|
-
* Context menu border radius
|
|
51
|
+
* Context menu border radius.
|
|
52
52
|
* @default 'xs'
|
|
53
53
|
*/
|
|
54
|
-
borderRadius?:
|
|
54
|
+
borderRadius?: MantineRadius;
|
|
55
55
|
/**
|
|
56
|
-
* Delay in ms to use when showing and hiding submenus
|
|
56
|
+
* Delay in ms to use when showing and hiding submenus.
|
|
57
57
|
* @default 500
|
|
58
58
|
*/
|
|
59
59
|
submenuDelay?: number;
|
|
@@ -62,52 +62,55 @@ export type ContextMenuSettings = {
|
|
|
62
62
|
* Context menu provider props
|
|
63
63
|
*/
|
|
64
64
|
export type ContextMenuProviderProps = ContextMenuSettings & ContextMenuOptions & {
|
|
65
|
-
children: ReactNode;
|
|
65
|
+
children: React.ReactNode;
|
|
66
66
|
};
|
|
67
67
|
/**
|
|
68
68
|
* Context menu item options
|
|
69
69
|
*/
|
|
70
70
|
export type ContextMenuItemOptions = {
|
|
71
71
|
/**
|
|
72
|
-
* Unique key of the context menu item or divider
|
|
72
|
+
* Unique key of the context menu item or divider.
|
|
73
73
|
*/
|
|
74
74
|
key: string;
|
|
75
75
|
/**
|
|
76
|
-
* Context menu item or divider className
|
|
76
|
+
* Context menu item or divider className.
|
|
77
77
|
*/
|
|
78
78
|
className?: string;
|
|
79
79
|
/**
|
|
80
|
-
* Context menu item or divider style
|
|
80
|
+
* Context menu item or divider style.
|
|
81
81
|
*/
|
|
82
|
-
style?:
|
|
82
|
+
style?: MantineStyleProp;
|
|
83
83
|
} & (({
|
|
84
84
|
/**
|
|
85
|
-
* Optional context menu item icon
|
|
85
|
+
* Optional context menu item icon.
|
|
86
86
|
*/
|
|
87
|
-
icon?: ReactNode;
|
|
87
|
+
icon?: React.ReactNode;
|
|
88
88
|
/**
|
|
89
|
-
* Optional context menu item title
|
|
89
|
+
* Optional context menu item title.
|
|
90
|
+
* If not provided, one will be generated automatically by "humanizing" the key.
|
|
90
91
|
* @default humanize(key)
|
|
91
92
|
*/
|
|
92
|
-
title?: ReactNode;
|
|
93
|
+
title?: React.ReactNode;
|
|
93
94
|
/**
|
|
94
|
-
* Optional context menu item color
|
|
95
|
+
* Optional context menu item color.
|
|
95
96
|
*/
|
|
96
97
|
color?: MantineColor;
|
|
97
98
|
/**
|
|
98
|
-
* Boolean indicating whether the context menu item is disabled
|
|
99
|
+
* Boolean indicating whether the context menu item is disabled.
|
|
99
100
|
*/
|
|
100
101
|
disabled?: boolean;
|
|
101
102
|
} & ({
|
|
102
103
|
/**
|
|
103
|
-
* Optional context menu item `onClick` handler
|
|
104
|
+
* Optional context menu item `onClick` handler.
|
|
105
|
+
* If not provided, a divider will be rendered instead.
|
|
104
106
|
*/
|
|
105
|
-
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
107
|
+
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
106
108
|
items?: never;
|
|
107
109
|
} | {
|
|
108
110
|
onClick?: never;
|
|
109
111
|
/**
|
|
110
|
-
* Optional items
|
|
112
|
+
* Optional items.
|
|
113
|
+
* If provided, a submenu will be rendered.
|
|
111
114
|
*/
|
|
112
115
|
items: ContextMenuItemOptions[];
|
|
113
116
|
})) | {
|
|
@@ -119,19 +122,21 @@ export type ContextMenuItemOptions = {
|
|
|
119
122
|
items?: never;
|
|
120
123
|
});
|
|
121
124
|
/**
|
|
122
|
-
* Context menu content
|
|
125
|
+
* Context menu content.
|
|
126
|
+
* Either an array of context menu items, or a function that accepts a close callback and returns context menu content.
|
|
123
127
|
*/
|
|
124
128
|
export type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);
|
|
125
129
|
/**
|
|
126
|
-
*
|
|
130
|
+
* Show context menu function
|
|
127
131
|
*/
|
|
128
132
|
export type ShowContextMenuFunction = (
|
|
129
133
|
/**
|
|
130
|
-
* Context menu content
|
|
131
|
-
* or a function that accepts a close callback and returns context menu content
|
|
134
|
+
* Context menu content.
|
|
135
|
+
* Either an array of context menu items or a function that accepts a close callback and returns context menu content.
|
|
132
136
|
*/
|
|
133
137
|
content: ContextMenuContent,
|
|
134
138
|
/**
|
|
135
|
-
* Context menu options (overrides provider
|
|
139
|
+
* Context menu options (overrides provider props).
|
|
136
140
|
*/
|
|
137
|
-
options?: ContextMenuOptions) => MouseEventHandler;
|
|
141
|
+
options?: ContextMenuOptions) => React.MouseEventHandler;
|
|
142
|
+
export type HideContextMenuFunction = () => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-contextmenu",
|
|
3
|
-
"version": "7.0.0-alpha.
|
|
3
|
+
"version": "7.0.0-alpha.6",
|
|
4
4
|
"description": "Enhance your Mantine UI applications usability with customizable context menus",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"@tabler/icons-react": "^2.39.0",
|
|
77
77
|
"@types/lodash": "^4.14.200",
|
|
78
78
|
"@types/node": "^20.8.7",
|
|
79
|
-
"@types/react": "^18.2.
|
|
79
|
+
"@types/react": "^18.2.31",
|
|
80
80
|
"@types/react-dom": "^18.2.14",
|
|
81
81
|
"@typescript-eslint/eslint-plugin": "^6.8.0",
|
|
82
82
|
"@typescript-eslint/parser": "^6.8.0",
|