mantine-contextmenu 7.0.0-alpha.3 → 7.0.0-alpha.5
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/LICENSE +21 -0
- package/dist/cjs/ContextMenu.js +5 -2
- package/dist/cjs/ContextMenu.js.map +1 -1
- package/dist/cjs/ContextMenuItem.js +14 -5
- package/dist/cjs/ContextMenuItem.js.map +1 -1
- package/dist/cjs/ContextMenuProvider.js +12 -8
- package/dist/cjs/ContextMenuProvider.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/css/styles.css +2 -2
- package/dist/css/styles.layer.css +2 -2
- package/dist/esm/ContextMenu.js +4 -1
- package/dist/esm/ContextMenu.js.map +1 -1
- package/dist/esm/ContextMenuItem.js +15 -6
- package/dist/esm/ContextMenuItem.js.map +1 -1
- package/dist/esm/ContextMenuProvider.js +9 -5
- package/dist/esm/ContextMenuProvider.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/types/ContextMenu.d.ts +1 -1
- package/dist/types/ContextMenuProvider.d.ts +5 -2
- package/dist/types/types.d.ts +21 -11
- package/package.json +10 -10
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Ionuț-Cristian Florescu
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/cjs/ContextMenu.js
CHANGED
|
@@ -31,14 +31,17 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
31
31
|
var core_1 = require("@mantine/core");
|
|
32
32
|
var hooks_1 = require("@mantine/hooks");
|
|
33
33
|
var clsx_1 = __importDefault(require("clsx"));
|
|
34
|
+
var react_1 = require("react");
|
|
34
35
|
var ContextMenuDivider_1 = require("./ContextMenuDivider");
|
|
35
36
|
var ContextMenuItem_1 = require("./ContextMenuItem");
|
|
37
|
+
var ContextMenuProvider_1 = require("./ContextMenuProvider");
|
|
36
38
|
var utils_1 = require("./utils");
|
|
37
39
|
function ContextMenu(_a) {
|
|
38
40
|
var _b;
|
|
39
|
-
var x = _a.x, y = _a.y, content = _a.content, zIndex = _a.zIndex,
|
|
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.MenuSettingsContext), shadow = _c.shadow, borderRadius = _c.borderRadius;
|
|
40
43
|
var paperRef = (0, hooks_1.useResizeObserver)()[0];
|
|
41
|
-
var
|
|
44
|
+
var _d = ((_b = paperRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || { width: 0, height: 0 }, width = _d.width, height = _d.height;
|
|
42
45
|
var windowWidth = 0;
|
|
43
46
|
var windowHeight = 0;
|
|
44
47
|
if (typeof window !== 'undefined')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,sCAAyE;AACzE,wCAAmD;AACnD,8CAAwB;AACxB,2DAA0D;AAC1D,qDAAoD;
|
|
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, useMantineTheme } 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 { MenuSettingsContext } 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(MenuSettingsContext);\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 const theme = useMantineTheme();\n const resolvedStyle = typeof style === 'function' ? style(theme) : style;\n const resolvedStyles = typeof styles === 'function' ? styles(theme) : styles;\n const mdSpacing = px(theme.spacing.md) as number;\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 ...resolvedStyles?.root,\n ...resolvedStyle,\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 {Array.isArray(content)\n ? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) => {\n const resolvedItemStyle = typeof style === 'function' ? style(theme) : style;\n return onClick || items ? (\n <ContextMenuItem\n key={key}\n className={clsx(classNames?.item, className)}\n style={{ ...resolvedStyles?.item, ...resolvedItemStyle }}\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={{ ...resolvedStyles?.divider, ...resolvedItemStyle }}\n />\n );\n })\n : content(onHide)}\n </Paper>\n );\n}\n"]}
|
|
@@ -18,12 +18,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
18
18
|
exports.ContextMenuItem = void 0;
|
|
19
19
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
20
20
|
var core_1 = require("@mantine/core");
|
|
21
|
+
var hooks_1 = require("@mantine/hooks");
|
|
21
22
|
var clsx_1 = __importDefault(require("clsx"));
|
|
22
23
|
var react_1 = require("react");
|
|
23
24
|
var ContextMenu_1 = require("./ContextMenu");
|
|
25
|
+
var ContextMenuProvider_1 = require("./ContextMenuProvider");
|
|
24
26
|
function ContextMenuItem(_a) {
|
|
25
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;
|
|
26
28
|
var ref = (0, react_1.useRef)(null);
|
|
29
|
+
var submenuDelay = (0, react_1.useContext)(ContextMenuProvider_1.MenuSettingsContext).submenuDelay;
|
|
27
30
|
var _b = (0, react_1.useState)(null), submenuPosition = _b[0], setSubmenuPosition = _b[1];
|
|
28
31
|
var handleClick = onClick
|
|
29
32
|
? function (e) {
|
|
@@ -31,20 +34,26 @@ function ContextMenuItem(_a) {
|
|
|
31
34
|
onClick(e);
|
|
32
35
|
}
|
|
33
36
|
: undefined;
|
|
34
|
-
var
|
|
37
|
+
var _c = (0, hooks_1.useTimeout)(function () {
|
|
35
38
|
var _a = ref.current.getBoundingClientRect(), y = _a.top, x = _a.right;
|
|
36
39
|
setSubmenuPosition({ x: x, y: y });
|
|
40
|
+
}, submenuDelay), startShowingSubmenu = _c.start, stopShowingSubmenu = _c.clear;
|
|
41
|
+
var _d = (0, hooks_1.useTimeout)(function () {
|
|
42
|
+
setSubmenuPosition(null);
|
|
43
|
+
}, submenuDelay), startHidingSubmenu = _d.start, stopHidingSubmenu = _d.clear;
|
|
44
|
+
var showSubmenu = function () {
|
|
45
|
+
stopHidingSubmenu();
|
|
46
|
+
startShowingSubmenu();
|
|
37
47
|
};
|
|
38
48
|
var hideSubmenu = function () {
|
|
39
|
-
|
|
49
|
+
stopShowingSubmenu();
|
|
50
|
+
startHidingSubmenu();
|
|
40
51
|
};
|
|
41
52
|
var hasItemsAndIsNotDisabled = items && !disabled;
|
|
42
53
|
var theme = (0, core_1.useMantineTheme)();
|
|
43
54
|
var colors = theme.colors;
|
|
44
55
|
var parsedColor = color ? (0, core_1.parseThemeColor)({ color: color, theme: theme }).value : undefined;
|
|
45
|
-
|
|
46
|
-
console.log(parsedColor);
|
|
47
|
-
return ((0, jsx_runtime_1.jsxs)("div", { onMouseOver: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseOut: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [(0, jsx_runtime_1.jsxs)(core_1.UnstyledButton, { ref: ref, style: __assign({ '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)', '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
|
|
56
|
+
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: __assign({ '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)', '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
|
|
48
57
|
? (0, core_1.rgba)(parsedColor, 0.08)
|
|
49
58
|
: (0, core_1.rgba)(colors.gray[4], 0.25), '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
|
|
50
59
|
? (0, core_1.rgba)(parsedColor, 0.15)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;AAEb,sCAA4F;AAC5F,8CAAwB;AACxB,+
|
|
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, useMantineTheme } 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 { MenuSettingsContext } 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(MenuSettingsContext);\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 const theme = useMantineTheme();\n const { colors } = theme;\n const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n\n return (\n <div\n onMouseEnter={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseLeave={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n style={{\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 ...(typeof style === 'function' ? style(theme) : 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,20 +12,26 @@ 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 = void 0;
|
|
15
|
+
exports.useContextMenu = exports.ContextMenuProvider = exports.MenuContext = exports.MenuSettingsContext = 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");
|
|
19
19
|
var ContextMenuPortal_1 = require("./ContextMenuPortal");
|
|
20
|
-
var
|
|
20
|
+
var DEFAULT_SETTINGS = {
|
|
21
|
+
shadow: 'sm',
|
|
22
|
+
borderRadius: 'xs',
|
|
23
|
+
submenuDelay: 500,
|
|
24
|
+
};
|
|
25
|
+
exports.MenuSettingsContext = (0, react_1.createContext)(DEFAULT_SETTINGS);
|
|
26
|
+
exports.MenuContext = (0, react_1.createContext)(function () { return function () { return undefined; }; });
|
|
21
27
|
/**
|
|
22
28
|
* Provider that allows to show a context menu anywhere in your application.
|
|
23
29
|
* If you wrap your application with this provider, you can use the `useContextMenu` hook
|
|
24
30
|
* anywhere in the component tree to access a function that shows the context menu.
|
|
25
31
|
*/
|
|
26
32
|
function ContextMenuProvider(_a) {
|
|
27
|
-
var _b = _a.zIndex, zIndex = _b === void 0 ? 9999 : _b, _c = _a.shadow, shadow = _c === void 0 ?
|
|
28
|
-
var
|
|
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
|
+
var _f = (0, react_1.useState)(null), data = _f[0], setData = _f[1];
|
|
29
35
|
var destroy = function () {
|
|
30
36
|
setData(null);
|
|
31
37
|
};
|
|
@@ -37,22 +43,20 @@ function ContextMenuProvider(_a) {
|
|
|
37
43
|
y: e.clientY,
|
|
38
44
|
content: content,
|
|
39
45
|
zIndex: (options === null || options === void 0 ? void 0 : options.zIndex) || zIndex,
|
|
40
|
-
shadow: (options === null || options === void 0 ? void 0 : options.shadow) || shadow,
|
|
41
|
-
borderRadius: (options === null || options === void 0 ? void 0 : options.borderRadius) || borderRadius,
|
|
42
46
|
className: options === null || options === void 0 ? void 0 : options.className,
|
|
43
47
|
style: options === null || options === void 0 ? void 0 : options.style,
|
|
44
48
|
classNames: options === null || options === void 0 ? void 0 : options.classNames,
|
|
45
49
|
styles: options === null || options === void 0 ? void 0 : options.styles,
|
|
46
50
|
});
|
|
47
51
|
}; };
|
|
48
|
-
return ((0, jsx_runtime_1.jsxs)(MenuContext.Provider, { value: showContextMenu, children: [children, (0, jsx_runtime_1.jsx)(core_1.MantineProvider, { children: data && (0, jsx_runtime_1.jsx)(ContextMenuPortal_1.ContextMenuPortal, __assign({ onHide: destroy }, data)) })] }));
|
|
52
|
+
return ((0, jsx_runtime_1.jsx)(exports.MenuSettingsContext.Provider, { value: { shadow: shadow, borderRadius: borderRadius, submenuDelay: submenuDelay }, children: (0, jsx_runtime_1.jsxs)(exports.MenuContext.Provider, { value: showContextMenu, children: [children, (0, jsx_runtime_1.jsx)(core_1.MantineProvider, { children: data && (0, jsx_runtime_1.jsx)(ContextMenuPortal_1.ContextMenuPortal, __assign({ onHide: destroy }, data)) })] }) }));
|
|
49
53
|
}
|
|
50
54
|
exports.ContextMenuProvider = ContextMenuProvider;
|
|
51
55
|
/**
|
|
52
56
|
* Hook returning a function that shows a context menu.
|
|
53
57
|
*/
|
|
54
58
|
function useContextMenu() {
|
|
55
|
-
return (0, react_1.useContext)(MenuContext);
|
|
59
|
+
return (0, react_1.useContext)(exports.MenuContext);
|
|
56
60
|
}
|
|
57
61
|
exports.useContextMenu = useContextMenu;
|
|
58
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;AASxD,IAAM,gBAAgB,GAA0F;IAC9G,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,GAAG;CAClB,CAAC;AAEW,QAAA,mBAAmB,GAAG,IAAA,qBAAa,EAAC,gBAAgB,CAAC,CAAC;AACtD,QAAA,WAAW,GAAG,IAAA,qBAAa,EAA0B,cAAM,OAAA,cAAM,OAAA,SAAS,EAAT,CAAS,EAAf,CAAe,CAAC,CAAC;AAEzF;;;;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,OAAO,GAAG;QACd,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,2BAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,QAAA,EAAE,YAAY,cAAA,EAAE,YAAY,cAAA,EAAE,YACzE,wBAAC,mBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,aACzC,QAAQ,EACT,uBAAC,sBAAe,cAAE,IAAI,IAAI,uBAAC,qCAAiB,aAAC,MAAM,EAAE,OAAO,IAAM,IAAI,EAAI,GAAmB,IACxE,GACM,CAChC,CAAC;AACJ,CAAC;AApCD,kDAoCC;AAED;;GAEG;AACH,SAAgB,cAAc;IAC5B,OAAO,IAAA,kBAAU,EAAC,mBAAW,CAAC,CAAC;AACjC,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 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 MenuSettingsContext = createContext(DEFAULT_SETTINGS);\nexport const 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 = 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 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 className: options?.className,\n style: options?.style,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n return (\n <MenuSettingsContext.Provider value={{ shadow, borderRadius, submenuDelay }}>\n <MenuContext.Provider value={showContextMenu}>\n {children}\n <MantineProvider>{data && <ContextMenuPortal onHide={destroy} {...data} />}</MantineProvider>\n </MenuContext.Provider>\n </MenuSettingsContext.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"]}
|
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, MantineSize, MantineTheme } from '@mantine/core';\nimport type { CSSProperties, MouseEventHandler, ReactNode } from 'react';\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 * zIndex of context menu\n * @default 9999\n */\n zIndex?: number;\n\n /**\n * Context menu
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineShadow, MantineSize, MantineTheme } from '@mantine/core';\nimport type { CSSProperties, MouseEventHandler, ReactNode } from 'react';\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 * zIndex 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; can be a function that accepts theme and returns a style object\n */\n style?: CSSProperties | ((theme: MantineTheme) => CSSProperties);\n\n /**\n * Context menu elements classNames; an object with `root`, `item` and `divider` keys and class names as values\n * @see https://mantine.dev/styles/styles-api/\n */\n classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n /**\n * Context menu styles; 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?:\n | Partial<Record<'root' | 'item' | 'divider', CSSProperties>>\n | ((theme: MantineTheme) => Partial<Record<'root' | 'item' | 'divider', CSSProperties>>);\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?: MantineSize;\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: 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?: CSSProperties | ((theme: MantineTheme) => CSSProperties);\n} & (\n | ({\n /**\n * Optional context menu item icon\n */\n icon?: ReactNode;\n\n /**\n * Optional context menu item title; if not provided, one will be generated automatically by \"humanizing\" the key\n * @default humanize(key)\n */\n title?: 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; if not provided, a divider will be rendered instead\n */\n onClick: MouseEventHandler<HTMLButtonElement>;\n\n items?: never;\n }\n | {\n onClick?: never;\n\n /**\n * Optional items; 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 - 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 * Context menu hook return value\n */\nexport type ShowContextMenuFunction = (\n /**\n * Context menu content - either an array of context menu items\n * 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 options)\n */\n options?: ContextMenuOptions\n) => MouseEventHandler;\n"]}
|
package/dist/css/styles.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
}
|
|
8
8
|
.mantine-contextmenu {
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
transition: all 0.
|
|
10
|
+
transition: all 0.2s;
|
|
11
11
|
}
|
|
12
12
|
.mantine-contextmenu-divider {
|
|
13
13
|
height: calc(0.0625rem * var(--mantine-scale));
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
padding-left: var(--mantine-spacing-sm);
|
|
26
26
|
padding-right: var(--mantine-spacing-sm);
|
|
27
27
|
color: var(--mantine-contextmenu-item-button-color);
|
|
28
|
-
transition: background 0.
|
|
28
|
+
transition: background 0.2s;
|
|
29
29
|
}
|
|
30
30
|
.mantine-contextmenu-item-button[disabled] {
|
|
31
31
|
cursor: not-allowed;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
}
|
|
9
9
|
.mantine-contextmenu {
|
|
10
10
|
overflow: hidden;
|
|
11
|
-
transition: all 0.
|
|
11
|
+
transition: all 0.2s;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
@layer mantine-contextmenu {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
padding-left: var(--mantine-spacing-sm);
|
|
32
32
|
padding-right: var(--mantine-spacing-sm);
|
|
33
33
|
color: var(--mantine-contextmenu-item-button-color);
|
|
34
|
-
transition: background 0.
|
|
34
|
+
transition: background 0.2s;
|
|
35
35
|
}
|
|
36
36
|
.mantine-contextmenu-item-button[disabled] {
|
|
37
37
|
cursor: not-allowed;
|
package/dist/esm/ContextMenu.js
CHANGED
|
@@ -3,10 +3,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { Paper, px, useDirection, useMantineTheme } from '@mantine/core';
|
|
4
4
|
import { useResizeObserver } from '@mantine/hooks';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
|
+
import { useContext } from 'react';
|
|
6
7
|
import { ContextMenuDivider } from './ContextMenuDivider';
|
|
7
8
|
import { ContextMenuItem } from './ContextMenuItem';
|
|
9
|
+
import { MenuSettingsContext } from './ContextMenuProvider';
|
|
8
10
|
import { humanize } from './utils';
|
|
9
|
-
export function ContextMenu({ x, y, content, zIndex,
|
|
11
|
+
export function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }) {
|
|
12
|
+
const { shadow, borderRadius } = useContext(MenuSettingsContext);
|
|
10
13
|
const [paperRef] = useResizeObserver();
|
|
11
14
|
const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };
|
|
12
15
|
let windowWidth = 0;
|
|
@@ -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,eAAe,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;
|
|
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, useMantineTheme } 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 { MenuSettingsContext } 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(MenuSettingsContext);\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 const theme = useMantineTheme();\n const resolvedStyle = typeof style === 'function' ? style(theme) : style;\n const resolvedStyles = typeof styles === 'function' ? styles(theme) : styles;\n const mdSpacing = px(theme.spacing.md) as number;\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 ...resolvedStyles?.root,\n ...resolvedStyle,\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 {Array.isArray(content)\n ? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) => {\n const resolvedItemStyle = typeof style === 'function' ? style(theme) : style;\n return onClick || items ? (\n <ContextMenuItem\n key={key}\n className={clsx(classNames?.item, className)}\n style={{ ...resolvedStyles?.item, ...resolvedItemStyle }}\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={{ ...resolvedStyles?.divider, ...resolvedItemStyle }}\n />\n );\n })\n : content(onHide)}\n </Paper>\n );\n}\n"]}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Box, UnstyledButton, parseThemeColor, rgba, useMantineTheme } from '@mantine/core';
|
|
4
|
+
import { useTimeout } from '@mantine/hooks';
|
|
4
5
|
import clsx from 'clsx';
|
|
5
|
-
import { useRef, useState } from 'react';
|
|
6
|
+
import { useContext, useRef, useState } from 'react';
|
|
6
7
|
import { ContextMenu } from './ContextMenu';
|
|
8
|
+
import { MenuSettingsContext } from './ContextMenuProvider';
|
|
7
9
|
export function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }) {
|
|
8
10
|
const ref = useRef(null);
|
|
11
|
+
const { submenuDelay } = useContext(MenuSettingsContext);
|
|
9
12
|
const [submenuPosition, setSubmenuPosition] = useState(null);
|
|
10
13
|
const handleClick = onClick
|
|
11
14
|
? (e) => {
|
|
@@ -13,20 +16,26 @@ export function ContextMenuItem({ className, style, icon, title, color, disabled
|
|
|
13
16
|
onClick(e);
|
|
14
17
|
}
|
|
15
18
|
: undefined;
|
|
16
|
-
const
|
|
19
|
+
const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {
|
|
17
20
|
const { top: y, right: x } = ref.current.getBoundingClientRect();
|
|
18
21
|
setSubmenuPosition({ x, y });
|
|
22
|
+
}, submenuDelay);
|
|
23
|
+
const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {
|
|
24
|
+
setSubmenuPosition(null);
|
|
25
|
+
}, submenuDelay);
|
|
26
|
+
const showSubmenu = () => {
|
|
27
|
+
stopHidingSubmenu();
|
|
28
|
+
startShowingSubmenu();
|
|
19
29
|
};
|
|
20
30
|
const hideSubmenu = () => {
|
|
21
|
-
|
|
31
|
+
stopShowingSubmenu();
|
|
32
|
+
startHidingSubmenu();
|
|
22
33
|
};
|
|
23
34
|
const hasItemsAndIsNotDisabled = items && !disabled;
|
|
24
35
|
const theme = useMantineTheme();
|
|
25
36
|
const { colors } = theme;
|
|
26
37
|
const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;
|
|
27
|
-
|
|
28
|
-
console.log(parsedColor);
|
|
29
|
-
return (_jsxs("div", { onMouseOver: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseOut: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [_jsxs(UnstyledButton, { ref: ref, style: {
|
|
38
|
+
return (_jsxs("div", { onMouseEnter: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseLeave: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [_jsxs(UnstyledButton, { ref: ref, style: {
|
|
30
39
|
'--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',
|
|
31
40
|
'--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
|
|
32
41
|
? rgba(parsedColor, 0.08)
|
|
@@ -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,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,QAAQ,EAA0B,MAAM,OAAO,CAAC;
|
|
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, useMantineTheme } 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 { MenuSettingsContext } 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(MenuSettingsContext);\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 const theme = useMantineTheme();\n const { colors } = theme;\n const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n\n return (\n <div\n onMouseEnter={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseLeave={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n >\n <UnstyledButton\n ref={ref}\n style={{\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 ...(typeof style === 'function' ? style(theme) : 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"]}
|
|
@@ -3,13 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { MantineProvider } from '@mantine/core';
|
|
4
4
|
import { createContext, useContext, useState } from 'react';
|
|
5
5
|
import { ContextMenuPortal } from './ContextMenuPortal';
|
|
6
|
-
const
|
|
6
|
+
const DEFAULT_SETTINGS = {
|
|
7
|
+
shadow: 'sm',
|
|
8
|
+
borderRadius: 'xs',
|
|
9
|
+
submenuDelay: 500,
|
|
10
|
+
};
|
|
11
|
+
export const MenuSettingsContext = createContext(DEFAULT_SETTINGS);
|
|
12
|
+
export const MenuContext = createContext(() => () => undefined);
|
|
7
13
|
/**
|
|
8
14
|
* Provider that allows to show a context menu anywhere in your application.
|
|
9
15
|
* If you wrap your application with this provider, you can use the `useContextMenu` hook
|
|
10
16
|
* anywhere in the component tree to access a function that shows the context menu.
|
|
11
17
|
*/
|
|
12
|
-
export function ContextMenuProvider({ zIndex = 9999, shadow =
|
|
18
|
+
export function ContextMenuProvider({ zIndex = 9999, shadow = DEFAULT_SETTINGS.shadow, borderRadius = DEFAULT_SETTINGS.borderRadius, submenuDelay = DEFAULT_SETTINGS.submenuDelay, children, }) {
|
|
13
19
|
const [data, setData] = useState(null);
|
|
14
20
|
const destroy = () => {
|
|
15
21
|
setData(null);
|
|
@@ -22,15 +28,13 @@ export function ContextMenuProvider({ zIndex = 9999, shadow = 'sm', borderRadius
|
|
|
22
28
|
y: e.clientY,
|
|
23
29
|
content,
|
|
24
30
|
zIndex: options?.zIndex || zIndex,
|
|
25
|
-
shadow: options?.shadow || shadow,
|
|
26
|
-
borderRadius: options?.borderRadius || borderRadius,
|
|
27
31
|
className: options?.className,
|
|
28
32
|
style: options?.style,
|
|
29
33
|
classNames: options?.classNames,
|
|
30
34
|
styles: options?.styles,
|
|
31
35
|
});
|
|
32
36
|
};
|
|
33
|
-
return (_jsxs(MenuContext.Provider, { value: showContextMenu, children: [children, _jsx(MantineProvider, { children: data && _jsx(ContextMenuPortal, { onHide: destroy, ...data }) })] }));
|
|
37
|
+
return (_jsx(MenuSettingsContext.Provider, { value: { shadow, borderRadius, submenuDelay }, children: _jsxs(MenuContext.Provider, { value: showContextMenu, children: [children, _jsx(MantineProvider, { children: data && _jsx(ContextMenuPortal, { onHide: destroy, ...data }) })] }) }));
|
|
34
38
|
}
|
|
35
39
|
/**
|
|
36
40
|
* Hook returning a function that shows a context menu.
|
|
@@ -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;AASxD,MAAM,gBAAgB,GAA0F;IAC9G,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,GAAG;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;AACnE,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAEzF;;;;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,OAAO,GAAG,GAAG,EAAE;QACnB,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,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,YACzE,MAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,aACzC,QAAQ,EACT,KAAC,eAAe,cAAE,IAAI,IAAI,KAAC,iBAAiB,IAAC,MAAM,EAAE,OAAO,KAAM,IAAI,GAAI,GAAmB,IACxE,GACM,CAChC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,UAAU,CAAC,WAAW,CAAC,CAAC;AACjC,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 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 MenuSettingsContext = createContext(DEFAULT_SETTINGS);\nexport const 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 = 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 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 className: options?.className,\n style: options?.style,\n classNames: options?.classNames,\n styles: options?.styles,\n });\n };\n\n return (\n <MenuSettingsContext.Provider value={{ shadow, borderRadius, submenuDelay }}>\n <MenuContext.Provider value={showContextMenu}>\n {children}\n <MantineProvider>{data && <ContextMenuPortal onHide={destroy} {...data} />}</MantineProvider>\n </MenuContext.Provider>\n </MenuSettingsContext.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"]}
|
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, MantineSize, MantineTheme } from '@mantine/core';\nimport type { CSSProperties, MouseEventHandler, ReactNode } from 'react';\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 * zIndex of context menu\n * @default 9999\n */\n zIndex?: number;\n\n /**\n * Context menu
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineShadow, MantineSize, MantineTheme } from '@mantine/core';\nimport type { CSSProperties, MouseEventHandler, ReactNode } from 'react';\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 * zIndex 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; can be a function that accepts theme and returns a style object\n */\n style?: CSSProperties | ((theme: MantineTheme) => CSSProperties);\n\n /**\n * Context menu elements classNames; an object with `root`, `item` and `divider` keys and class names as values\n * @see https://mantine.dev/styles/styles-api/\n */\n classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n /**\n * Context menu styles; 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?:\n | Partial<Record<'root' | 'item' | 'divider', CSSProperties>>\n | ((theme: MantineTheme) => Partial<Record<'root' | 'item' | 'divider', CSSProperties>>);\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?: MantineSize;\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: 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?: CSSProperties | ((theme: MantineTheme) => CSSProperties);\n} & (\n | ({\n /**\n * Optional context menu item icon\n */\n icon?: ReactNode;\n\n /**\n * Optional context menu item title; if not provided, one will be generated automatically by \"humanizing\" the key\n * @default humanize(key)\n */\n title?: 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; if not provided, a divider will be rendered instead\n */\n onClick: MouseEventHandler<HTMLButtonElement>;\n\n items?: never;\n }\n | {\n onClick?: never;\n\n /**\n * Optional items; 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 - 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 * Context menu hook return value\n */\nexport type ShowContextMenuFunction = (\n /**\n * Context menu content - either an array of context menu items\n * 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 options)\n */\n options?: ContextMenuOptions\n) => MouseEventHandler;\n"]}
|
|
@@ -7,4 +7,4 @@ export type ContextMenuInstanceOptions = {
|
|
|
7
7
|
export type ContextMenuProps = ContextMenuOptions & ContextMenuInstanceOptions & {
|
|
8
8
|
onHide: () => void;
|
|
9
9
|
};
|
|
10
|
-
export declare function ContextMenu({ x, y, content, zIndex,
|
|
10
|
+
export declare function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ContextMenuProviderProps, ContextMenuSettings, ShowContextMenuFunction, WithRequiredProperty } from './types';
|
|
3
|
+
export declare const MenuSettingsContext: import("react").Context<WithRequiredProperty<ContextMenuSettings, "shadow" | "borderRadius" | "submenuDelay">>;
|
|
4
|
+
export declare const MenuContext: import("react").Context<ShowContextMenuFunction>;
|
|
2
5
|
/**
|
|
3
6
|
* Provider that allows to show a context menu anywhere in your application.
|
|
4
7
|
* If you wrap your application with this provider, you can use the `useContextMenu` hook
|
|
5
8
|
* anywhere in the component tree to access a function that shows the context menu.
|
|
6
9
|
*/
|
|
7
|
-
export declare function ContextMenuProvider({ zIndex, shadow, borderRadius, children, }: ContextMenuProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function ContextMenuProvider({ zIndex, shadow, borderRadius, submenuDelay, children, }: ContextMenuProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
8
11
|
/**
|
|
9
12
|
* Hook returning a function that shows a context menu.
|
|
10
13
|
*/
|
package/dist/types/types.d.ts
CHANGED
|
@@ -19,16 +19,6 @@ export type ContextMenuOptions = {
|
|
|
19
19
|
* @default 9999
|
|
20
20
|
*/
|
|
21
21
|
zIndex?: number;
|
|
22
|
-
/**
|
|
23
|
-
* Context menu shadow
|
|
24
|
-
* @default 'sm'
|
|
25
|
-
*/
|
|
26
|
-
shadow?: MantineShadow;
|
|
27
|
-
/**
|
|
28
|
-
* Context menu border radius
|
|
29
|
-
* @default 'xs'
|
|
30
|
-
*/
|
|
31
|
-
borderRadius?: MantineSize;
|
|
32
22
|
/**
|
|
33
23
|
* Context menu container className
|
|
34
24
|
*/
|
|
@@ -48,10 +38,30 @@ export type ContextMenuOptions = {
|
|
|
48
38
|
*/
|
|
49
39
|
styles?: Partial<Record<'root' | 'item' | 'divider', CSSProperties>> | ((theme: MantineTheme) => Partial<Record<'root' | 'item' | 'divider', CSSProperties>>);
|
|
50
40
|
};
|
|
41
|
+
/**
|
|
42
|
+
* Generic context menu settings
|
|
43
|
+
*/
|
|
44
|
+
export type ContextMenuSettings = {
|
|
45
|
+
/**
|
|
46
|
+
* Context menu shadow
|
|
47
|
+
* @default 'sm'
|
|
48
|
+
*/
|
|
49
|
+
shadow?: MantineShadow;
|
|
50
|
+
/**
|
|
51
|
+
* Context menu border radius
|
|
52
|
+
* @default 'xs'
|
|
53
|
+
*/
|
|
54
|
+
borderRadius?: MantineSize;
|
|
55
|
+
/**
|
|
56
|
+
* Delay in ms to use when showing and hiding submenus
|
|
57
|
+
* @default 500
|
|
58
|
+
*/
|
|
59
|
+
submenuDelay?: number;
|
|
60
|
+
};
|
|
51
61
|
/**
|
|
52
62
|
* Context menu provider props
|
|
53
63
|
*/
|
|
54
|
-
export type ContextMenuProviderProps = ContextMenuOptions & {
|
|
64
|
+
export type ContextMenuProviderProps = ContextMenuSettings & ContextMenuOptions & {
|
|
55
65
|
children: ReactNode;
|
|
56
66
|
};
|
|
57
67
|
/**
|
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.5",
|
|
4
4
|
"description": "Enhance your Mantine UI applications usability with customizable context menus",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -69,23 +69,23 @@
|
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@ducanh2912/next-pwa": "^9.7.2",
|
|
72
|
-
"@mantine/code-highlight": "^7.1.
|
|
73
|
-
"@mantine/core": "^7.1.
|
|
74
|
-
"@mantine/hooks": "^7.1.
|
|
75
|
-
"@mantine/notifications": "^7.1.
|
|
72
|
+
"@mantine/code-highlight": "^7.1.5",
|
|
73
|
+
"@mantine/core": "^7.1.5",
|
|
74
|
+
"@mantine/hooks": "^7.1.5",
|
|
75
|
+
"@mantine/notifications": "^7.1.5",
|
|
76
76
|
"@tabler/icons-react": "^2.39.0",
|
|
77
77
|
"@types/lodash": "^4.14.200",
|
|
78
|
-
"@types/node": "^20.8.
|
|
79
|
-
"@types/react": "^18.2.
|
|
80
|
-
"@types/react-dom": "^18.2.
|
|
78
|
+
"@types/node": "^20.8.7",
|
|
79
|
+
"@types/react": "^18.2.29",
|
|
80
|
+
"@types/react-dom": "^18.2.14",
|
|
81
81
|
"@typescript-eslint/eslint-plugin": "^6.8.0",
|
|
82
82
|
"@typescript-eslint/parser": "^6.8.0",
|
|
83
83
|
"clsx": "^2.0.0",
|
|
84
84
|
"eslint": "^8.51.0",
|
|
85
|
-
"eslint-config-next": "^13.5.
|
|
85
|
+
"eslint-config-next": "^13.5.6",
|
|
86
86
|
"eslint-config-prettier": "^9.0.0",
|
|
87
87
|
"lodash": "^4.17.21",
|
|
88
|
-
"next": "13.5.
|
|
88
|
+
"next": "13.5.6",
|
|
89
89
|
"postcss": "^8.4.31",
|
|
90
90
|
"postcss-cli": "^10.1.0",
|
|
91
91
|
"postcss-import": "^15.1.0",
|