mantine-contextmenu 7.0.0-alpha.1 → 7.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ContextMenu.js +6 -2
- package/dist/cjs/ContextMenu.js.map +1 -1
- package/dist/cjs/ContextMenuDivider.js +5 -2
- package/dist/cjs/ContextMenuDivider.js.map +1 -1
- package/dist/cjs/ContextMenuItem.js +12 -7
- package/dist/cjs/ContextMenuItem.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/utils.js +1 -12
- package/dist/cjs/utils.js.map +1 -1
- package/dist/css/styles.css +18 -18
- package/dist/css/styles.layer.css +21 -21
- package/dist/esm/ContextMenu.js +4 -3
- package/dist/esm/ContextMenu.js.map +1 -1
- package/dist/esm/ContextMenuDivider.js +2 -2
- package/dist/esm/ContextMenuDivider.js.map +1 -1
- package/dist/esm/ContextMenuItem.js +11 -9
- package/dist/esm/ContextMenuItem.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/esm/utils.js +0 -6
- package/dist/esm/utils.js.map +1 -1
- package/dist/types/ContextMenuDivider.d.ts +1 -1
- package/dist/types/ContextMenuItem.d.ts +1 -2
- package/dist/types/index.d.ts +1 -0
- package/dist/types/types.d.ts +25 -0
- package/dist/types/utils.d.ts +0 -14
- package/package.json +4 -4
package/dist/cjs/ContextMenu.js
CHANGED
|
@@ -22,11 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
}
|
|
23
23
|
return t;
|
|
24
24
|
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
25
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
29
|
exports.ContextMenu = void 0;
|
|
27
30
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
28
31
|
var core_1 = require("@mantine/core");
|
|
29
32
|
var hooks_1 = require("@mantine/hooks");
|
|
33
|
+
var clsx_1 = __importDefault(require("clsx"));
|
|
30
34
|
var ContextMenuDivider_1 = require("./ContextMenuDivider");
|
|
31
35
|
var ContextMenuItem_1 = require("./ContextMenuItem");
|
|
32
36
|
var utils_1 = require("./utils");
|
|
@@ -44,7 +48,7 @@ function ContextMenu(_a) {
|
|
|
44
48
|
var resolvedStyle = typeof style === 'function' ? style(theme) : style;
|
|
45
49
|
var resolvedStyles = typeof styles === 'function' ? styles(theme) : styles;
|
|
46
50
|
var mdSpacing = (0, core_1.px)(theme.spacing.md);
|
|
47
|
-
return ((0, jsx_runtime_1.jsx)(core_1.Paper, { ref: paperRef, shadow: shadow, radius: borderRadius, className: (0,
|
|
51
|
+
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: __assign(__assign(__assign({}, resolvedStyles === null || resolvedStyles === void 0 ? void 0 : resolvedStyles.root), resolvedStyle), { zIndex: zIndex, top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y, left: dir === 'ltr'
|
|
48
52
|
? x + width + mdSpacing > windowWidth
|
|
49
53
|
? windowWidth - width - mdSpacing
|
|
50
54
|
: x
|
|
@@ -52,7 +56,7 @@ function ContextMenu(_a) {
|
|
|
52
56
|
? content.map(function (_a) {
|
|
53
57
|
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"]);
|
|
54
58
|
var resolvedItemStyle = typeof style === 'function' ? style(theme) : style;
|
|
55
|
-
return onClick || items ? ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, __assign({ className: (0,
|
|
59
|
+
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));
|
|
56
60
|
})
|
|
57
61
|
: content(onHide) }));
|
|
58
62
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,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 { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\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({\n x,\n y,\n content,\n zIndex,\n shadow,\n borderRadius,\n onHide,\n className,\n style,\n classNames,\n styles,\n}: ContextMenuProps) {\n const [paperRef] = useResizeObserver<HTMLDivElement>();\n const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n let windowWidth = 0;\n let windowHeight = 0;\n if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n 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,14 +1,17 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
"use strict";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
3
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
7
|
exports.ContextMenuDivider = void 0;
|
|
5
8
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
9
|
var core_1 = require("@mantine/core");
|
|
7
|
-
var
|
|
10
|
+
var clsx_1 = __importDefault(require("clsx"));
|
|
8
11
|
function ContextMenuDivider(_a) {
|
|
9
12
|
var className = _a.className, style = _a.style;
|
|
10
13
|
var theme = (0, core_1.useMantineTheme)();
|
|
11
|
-
return ((0, jsx_runtime_1.jsx)(core_1.Box, { className: (0,
|
|
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
15
|
}
|
|
13
16
|
exports.ContextMenuDivider = ContextMenuDivider;
|
|
14
17
|
//# sourceMappingURL=ContextMenuDivider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC
|
|
1
|
+
{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,sCAAqD;AACrD,8CAAwB;AAKxB,SAAgB,kBAAkB,CAAC,EAA6C;QAA3C,SAAS,eAAA,EAAE,KAAK,WAAA;IACnD,IAAM,KAAK,GAAG,IAAA,sBAAe,GAAE,CAAC;IAChC,OAAO,CACL,uBAAC,UAAG,IACF,SAAS,EAAE,IAAA,cAAI,EAAC,6BAA6B,EAAE,SAAS,CAAC,EACzD,KAAK,EAAE,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GACzD,CACH,CAAC;AACJ,CAAC;AARD,gDAQC","sourcesContent":["'use client';\n\nimport { Box, useMantineTheme } 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 const theme = useMantineTheme();\n return (\n <Box\n className={clsx('mantine-contextmenu-divider', className)}\n style={typeof style === 'function' ? style(theme) : style}\n />\n );\n}\n"]}
|
|
@@ -11,13 +11,16 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
return __assign.apply(this, arguments);
|
|
13
13
|
};
|
|
14
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
15
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
16
|
+
};
|
|
14
17
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
18
|
exports.ContextMenuItem = void 0;
|
|
16
19
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
20
|
var core_1 = require("@mantine/core");
|
|
21
|
+
var clsx_1 = __importDefault(require("clsx"));
|
|
18
22
|
var react_1 = require("react");
|
|
19
23
|
var ContextMenu_1 = require("./ContextMenu");
|
|
20
|
-
var utils_1 = require("./utils");
|
|
21
24
|
function ContextMenuItem(_a) {
|
|
22
25
|
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;
|
|
23
26
|
var ref = (0, react_1.useRef)(null);
|
|
@@ -38,16 +41,18 @@ function ContextMenuItem(_a) {
|
|
|
38
41
|
var hasItemsAndIsNotDisabled = items && !disabled;
|
|
39
42
|
var theme = (0, core_1.useMantineTheme)();
|
|
40
43
|
var colors = theme.colors;
|
|
41
|
-
var parsedColor = color ? (0, core_1.
|
|
42
|
-
|
|
44
|
+
var parsedColor = color ? (0, core_1.parseThemeColor)({ color: color, theme: theme }).value : undefined;
|
|
45
|
+
if (color === 'red')
|
|
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
|
|
43
48
|
? (0, core_1.rgba)(parsedColor, 0.08)
|
|
44
|
-
: (0, core_1.rgba)(colors.gray[4], 0.25), '--mantine-
|
|
49
|
+
: (0, core_1.rgba)(colors.gray[4], 0.25), '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
|
|
45
50
|
? (0, core_1.rgba)(parsedColor, 0.15)
|
|
46
|
-
: (0, core_1.rgba)(colors.dark[3], 0.25), '--mantine-
|
|
51
|
+
: (0, core_1.rgba)(colors.dark[3], 0.25), '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
|
|
47
52
|
? (0, core_1.rgba)(parsedColor, 0.2)
|
|
48
|
-
: (0, core_1.rgba)(colors.gray[4], 0.5), '--mantine-
|
|
53
|
+
: (0, core_1.rgba)(colors.gray[4], 0.5), '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
|
|
49
54
|
? (0, core_1.rgba)(parsedColor, 0.3)
|
|
50
|
-
: (0, core_1.rgba)(colors.dark[3], 0.5) }, (typeof style === 'function' ? style(theme) : style)), className: (0,
|
|
55
|
+
: (0, core_1.rgba)(colors.dark[3], 0.5) }, (typeof style === 'function' ? style(theme) : style)), 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))] }));
|
|
51
56
|
}
|
|
52
57
|
exports.ContextMenuItem = ContextMenuItem;
|
|
53
58
|
//# sourceMappingURL=ContextMenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"AAAA,YAAY,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 clsx from 'clsx';\nimport { useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\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 [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n const showSubmenu = () => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n };\n\n const hideSubmenu = () => {\n setSubmenuPosition(null);\n };\n\n const hasItemsAndIsNotDisabled = items && !disabled;\n\n const theme = useMantineTheme();\n const { colors } = theme;\n const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n if (color === 'red') console.log(parsedColor);\n\n return (\n <div\n onMouseOver={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseOut={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"]}
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,5 +18,6 @@ __exportStar(require("./ContextMenuDivider"), exports);
|
|
|
18
18
|
__exportStar(require("./ContextMenuItem"), exports);
|
|
19
19
|
__exportStar(require("./ContextMenuPortal"), exports);
|
|
20
20
|
__exportStar(require("./ContextMenuProvider"), exports);
|
|
21
|
+
__exportStar(require("./types"), exports);
|
|
21
22
|
__exportStar(require("./utils"), exports);
|
|
22
23
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../package/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,oDAAkC;AAClC,sDAAoC;AACpC,wDAAsC;AACtC,0CAAwB","sourcesContent":["export * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './utils';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../package/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,oDAAkC;AAClC,sDAAoC;AACpC,wDAAsC;AACtC,0CAAwB;AACxB,0CAAwB","sourcesContent":["export * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './types';\nexport * from './utils';\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\nexport type ContextMenuOptions = {\n /**\n * zIndex of context menu\n * @default 9999\n */\n zIndex?: number;\n\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 * 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\nexport type ContextMenuProviderProps = ContextMenuOptions & {\n children: ReactNode;\n};\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\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\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"]}
|
|
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 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 * 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 * Context menu provider props\n */\nexport type ContextMenuProviderProps = 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/cjs/utils.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.humanize = void 0;
|
|
4
4
|
/**
|
|
5
5
|
* Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
|
|
6
6
|
*/
|
|
@@ -13,15 +13,4 @@ function humanize(value) {
|
|
|
13
13
|
return "".concat(str.charAt(0).toUpperCase()).concat(str.slice(1));
|
|
14
14
|
}
|
|
15
15
|
exports.humanize = humanize;
|
|
16
|
-
/**
|
|
17
|
-
* A very simple utility function that returns a concatenated string of non-empty class names
|
|
18
|
-
*/
|
|
19
|
-
function cs() {
|
|
20
|
-
var args = [];
|
|
21
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
22
|
-
args[_i] = arguments[_i];
|
|
23
|
-
}
|
|
24
|
-
return args.filter(Boolean).join(' ');
|
|
25
|
-
}
|
|
26
|
-
exports.cs = cs;
|
|
27
16
|
//# sourceMappingURL=utils.js.map
|
package/dist/cjs/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../package/utils.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../package/utils.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,SAAgB,QAAQ,CAAC,KAAa;IACpC,IAAM,GAAG,GAAG,KAAK;SACd,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;SACtC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;SACrB,IAAI,EAAE;SACN,WAAW,EAAE,CAAC;IACjB,OAAO,UAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,SAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAE,CAAC;AACzD,CAAC;AAPD,4BAOC","sourcesContent":["/**\n * Utility function that returns a humanized version of a string, e.g. \"camelCase\" -> \"Camel Case\"\n */\nexport function humanize(value: string) {\n const str = value\n .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n .replace(/\\W|_/g, ' ')\n .trim()\n .toLowerCase();\n return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n}\n"]}
|
package/dist/css/styles.css
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
.mantine-
|
|
1
|
+
.mantine-contextmenu {
|
|
2
2
|
position: fixed;
|
|
3
3
|
border: 1px solid var(--mantine-color-gray-3);
|
|
4
4
|
}
|
|
5
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
5
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu {
|
|
6
6
|
border: 1px solid var(--mantine-color-dark-4);
|
|
7
7
|
}
|
|
8
|
-
.mantine-
|
|
8
|
+
.mantine-contextmenu {
|
|
9
9
|
overflow: hidden;
|
|
10
10
|
transition: all 0.15s ease;
|
|
11
11
|
}
|
|
12
|
-
.mantine-
|
|
12
|
+
.mantine-contextmenu-divider {
|
|
13
13
|
height: calc(0.0625rem * var(--mantine-scale));
|
|
14
14
|
background: var(--mantine-color-gray-1);
|
|
15
15
|
}
|
|
16
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
16
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu-divider {
|
|
17
17
|
background: var(--mantine-color-dark-5);
|
|
18
18
|
}
|
|
19
|
-
.mantine-
|
|
19
|
+
.mantine-contextmenu-item-button {
|
|
20
20
|
width: 100%;
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: center;
|
|
@@ -24,29 +24,29 @@
|
|
|
24
24
|
padding-bottom: calc(var(--mantine-spacing-sm) / 2);
|
|
25
25
|
padding-left: var(--mantine-spacing-sm);
|
|
26
26
|
padding-right: var(--mantine-spacing-sm);
|
|
27
|
-
color: var(--mantine-
|
|
27
|
+
color: var(--mantine-contextmenu-item-button-color);
|
|
28
28
|
transition: background 0.15s ease;
|
|
29
29
|
}
|
|
30
|
-
.mantine-
|
|
30
|
+
.mantine-contextmenu-item-button[disabled] {
|
|
31
31
|
cursor: not-allowed;
|
|
32
32
|
color: var(--mantine-color-gray-5);
|
|
33
33
|
}
|
|
34
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
34
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button[disabled] {
|
|
35
35
|
color: var(--mantine-color-dark-3);
|
|
36
36
|
}
|
|
37
|
-
.mantine-
|
|
38
|
-
background: var(--mantine-
|
|
37
|
+
.mantine-contextmenu-item-button:hover:not([disabled]) {
|
|
38
|
+
background: var(--mantine-contextmenu-item-button-hover-bg-color-light);
|
|
39
39
|
}
|
|
40
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
41
|
-
background: var(--mantine-
|
|
40
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:hover:not([disabled]) {
|
|
41
|
+
background: var(--mantine-contextmenu-item-button-hover-bg-color-dark);
|
|
42
42
|
}
|
|
43
|
-
.mantine-
|
|
44
|
-
background: var(--mantine-
|
|
43
|
+
.mantine-contextmenu-item-button:active:not([disabled]) {
|
|
44
|
+
background: var(--mantine-contextmenu-item-button-pressed-bg-color-light);
|
|
45
45
|
}
|
|
46
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
47
|
-
background: var(--mantine-
|
|
46
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:active:not([disabled]) {
|
|
47
|
+
background: var(--mantine-contextmenu-item-button-pressed-bg-color-dark);
|
|
48
48
|
}
|
|
49
|
-
.mantine-
|
|
49
|
+
.mantine-contextmenu-item-button-title {
|
|
50
50
|
font-size: var(--mantine-font-size-sm);
|
|
51
51
|
white-space: nowrap;
|
|
52
52
|
flex-grow: 1;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
@layer mantine-
|
|
2
|
-
.mantine-
|
|
1
|
+
@layer mantine-contextmenu {
|
|
2
|
+
.mantine-contextmenu {
|
|
3
3
|
position: fixed;
|
|
4
4
|
border: 1px solid var(--mantine-color-gray-3);
|
|
5
5
|
}
|
|
6
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
6
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu {
|
|
7
7
|
border: 1px solid var(--mantine-color-dark-4);
|
|
8
8
|
}
|
|
9
|
-
.mantine-
|
|
9
|
+
.mantine-contextmenu {
|
|
10
10
|
overflow: hidden;
|
|
11
11
|
transition: all 0.15s ease;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
-
@layer mantine-
|
|
15
|
-
.mantine-
|
|
14
|
+
@layer mantine-contextmenu {
|
|
15
|
+
.mantine-contextmenu-divider {
|
|
16
16
|
height: calc(0.0625rem * var(--mantine-scale));
|
|
17
17
|
background: var(--mantine-color-gray-1);
|
|
18
18
|
}
|
|
19
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
19
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu-divider {
|
|
20
20
|
background: var(--mantine-color-dark-5);
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
@layer mantine-
|
|
23
|
+
@layer mantine-contextmenu {
|
|
24
24
|
|
|
25
|
-
.mantine-
|
|
25
|
+
.mantine-contextmenu-item-button {
|
|
26
26
|
width: 100%;
|
|
27
27
|
display: flex;
|
|
28
28
|
align-items: center;
|
|
@@ -30,30 +30,30 @@
|
|
|
30
30
|
padding-bottom: calc(var(--mantine-spacing-sm) / 2);
|
|
31
31
|
padding-left: var(--mantine-spacing-sm);
|
|
32
32
|
padding-right: var(--mantine-spacing-sm);
|
|
33
|
-
color: var(--mantine-
|
|
33
|
+
color: var(--mantine-contextmenu-item-button-color);
|
|
34
34
|
transition: background 0.15s ease;
|
|
35
35
|
}
|
|
36
|
-
.mantine-
|
|
36
|
+
.mantine-contextmenu-item-button[disabled] {
|
|
37
37
|
cursor: not-allowed;
|
|
38
38
|
color: var(--mantine-color-gray-5);
|
|
39
39
|
}
|
|
40
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
40
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button[disabled] {
|
|
41
41
|
color: var(--mantine-color-dark-3);
|
|
42
42
|
}
|
|
43
|
-
.mantine-
|
|
44
|
-
background: var(--mantine-
|
|
43
|
+
.mantine-contextmenu-item-button:hover:not([disabled]) {
|
|
44
|
+
background: var(--mantine-contextmenu-item-button-hover-bg-color-light);
|
|
45
45
|
}
|
|
46
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
47
|
-
background: var(--mantine-
|
|
46
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:hover:not([disabled]) {
|
|
47
|
+
background: var(--mantine-contextmenu-item-button-hover-bg-color-dark);
|
|
48
48
|
}
|
|
49
|
-
.mantine-
|
|
50
|
-
background: var(--mantine-
|
|
49
|
+
.mantine-contextmenu-item-button:active:not([disabled]) {
|
|
50
|
+
background: var(--mantine-contextmenu-item-button-pressed-bg-color-light);
|
|
51
51
|
}
|
|
52
|
-
[data-mantine-color-scheme='dark'] .mantine-
|
|
53
|
-
background: var(--mantine-
|
|
52
|
+
[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:active:not([disabled]) {
|
|
53
|
+
background: var(--mantine-contextmenu-item-button-pressed-bg-color-dark);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
.mantine-
|
|
56
|
+
.mantine-contextmenu-item-button-title {
|
|
57
57
|
font-size: var(--mantine-font-size-sm);
|
|
58
58
|
white-space: nowrap;
|
|
59
59
|
flex-grow: 1;
|
package/dist/esm/ContextMenu.js
CHANGED
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
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
|
+
import clsx from 'clsx';
|
|
5
6
|
import { ContextMenuDivider } from './ContextMenuDivider';
|
|
6
7
|
import { ContextMenuItem } from './ContextMenuItem';
|
|
7
|
-
import {
|
|
8
|
+
import { humanize } from './utils';
|
|
8
9
|
export function ContextMenu({ x, y, content, zIndex, shadow, borderRadius, onHide, className, style, classNames, styles, }) {
|
|
9
10
|
const [paperRef] = useResizeObserver();
|
|
10
11
|
const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };
|
|
@@ -17,7 +18,7 @@ export function ContextMenu({ x, y, content, zIndex, shadow, borderRadius, onHid
|
|
|
17
18
|
const resolvedStyle = typeof style === 'function' ? style(theme) : style;
|
|
18
19
|
const resolvedStyles = typeof styles === 'function' ? styles(theme) : styles;
|
|
19
20
|
const mdSpacing = px(theme.spacing.md);
|
|
20
|
-
return (_jsx(Paper, { ref: paperRef, shadow: shadow, radius: borderRadius, className:
|
|
21
|
+
return (_jsx(Paper, { ref: paperRef, shadow: shadow, radius: borderRadius, className: clsx('mantine-contextmenu', className, classNames?.root), style: {
|
|
21
22
|
...resolvedStyles?.root,
|
|
22
23
|
...resolvedStyle,
|
|
23
24
|
zIndex,
|
|
@@ -30,7 +31,7 @@ export function ContextMenu({ x, y, content, zIndex, shadow, borderRadius, onHid
|
|
|
30
31
|
}, children: Array.isArray(content)
|
|
31
32
|
? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) => {
|
|
32
33
|
const resolvedItemStyle = typeof style === 'function' ? style(theme) : style;
|
|
33
|
-
return onClick || items ? (_jsx(ContextMenuItem, { className:
|
|
34
|
+
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));
|
|
34
35
|
})
|
|
35
36
|
: content(onHide) }));
|
|
36
37
|
}
|
|
@@ -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,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,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, useMantineTheme } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\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({\n x,\n y,\n content,\n zIndex,\n shadow,\n borderRadius,\n onHide,\n className,\n style,\n classNames,\n styles,\n}: ContextMenuProps) {\n const [paperRef] = useResizeObserver<HTMLDivElement>();\n const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n let windowWidth = 0;\n let windowHeight = 0;\n if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n 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,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Box, useMantineTheme } from '@mantine/core';
|
|
4
|
-
import
|
|
4
|
+
import clsx from 'clsx';
|
|
5
5
|
export function ContextMenuDivider({ className, style }) {
|
|
6
6
|
const theme = useMantineTheme();
|
|
7
|
-
return (_jsx(Box, { className:
|
|
7
|
+
return (_jsx(Box, { className: clsx('mantine-contextmenu-divider', className), style: typeof style === 'function' ? style(theme) : style }));
|
|
8
8
|
}
|
|
9
9
|
//# sourceMappingURL=ContextMenuDivider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,IAAI,MAAM,MAAM,CAAC;AAKxB,MAAM,UAAU,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAA2B;IAC9E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,CAAC,EACzD,KAAK,EAAE,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GACzD,CACH,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { Box, useMantineTheme } 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 const theme = useMantineTheme();\n return (\n <Box\n className={clsx('mantine-contextmenu-divider', className)}\n style={typeof style === 'function' ? style(theme) : style}\n />\n );\n}\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Box, UnstyledButton,
|
|
3
|
+
import { Box, UnstyledButton, parseThemeColor, rgba, useMantineTheme } from '@mantine/core';
|
|
4
|
+
import clsx from 'clsx';
|
|
4
5
|
import { useRef, useState } from 'react';
|
|
5
6
|
import { ContextMenu } from './ContextMenu';
|
|
6
|
-
import { cs } from './utils';
|
|
7
7
|
export function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }) {
|
|
8
8
|
const ref = useRef(null);
|
|
9
9
|
const [submenuPosition, setSubmenuPosition] = useState(null);
|
|
@@ -23,22 +23,24 @@ export function ContextMenuItem({ className, style, icon, title, color, disabled
|
|
|
23
23
|
const hasItemsAndIsNotDisabled = items && !disabled;
|
|
24
24
|
const theme = useMantineTheme();
|
|
25
25
|
const { colors } = theme;
|
|
26
|
-
const parsedColor = color ?
|
|
26
|
+
const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;
|
|
27
|
+
if (color === 'red')
|
|
28
|
+
console.log(parsedColor);
|
|
27
29
|
return (_jsxs("div", { onMouseOver: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseOut: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [_jsxs(UnstyledButton, { ref: ref, style: {
|
|
28
|
-
'--mantine-
|
|
29
|
-
'--mantine-
|
|
30
|
+
'--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',
|
|
31
|
+
'--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
|
|
30
32
|
? rgba(parsedColor, 0.08)
|
|
31
33
|
: rgba(colors.gray[4], 0.25),
|
|
32
|
-
'--mantine-
|
|
34
|
+
'--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
|
|
33
35
|
? rgba(parsedColor, 0.15)
|
|
34
36
|
: rgba(colors.dark[3], 0.25),
|
|
35
|
-
'--mantine-
|
|
37
|
+
'--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
|
|
36
38
|
? rgba(parsedColor, 0.2)
|
|
37
39
|
: rgba(colors.gray[4], 0.5),
|
|
38
|
-
'--mantine-
|
|
40
|
+
'--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
|
|
39
41
|
? rgba(parsedColor, 0.3)
|
|
40
42
|
: rgba(colors.dark[3], 0.5),
|
|
41
43
|
...(typeof style === 'function' ? style(theme) : style),
|
|
42
|
-
}, className:
|
|
44
|
+
}, 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 })] }));
|
|
43
45
|
}
|
|
44
46
|
//# 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,
|
|
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 clsx from 'clsx';\nimport { useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\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 [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n ? (e) => {\n onHide();\n onClick!(e);\n }\n : undefined;\n\n const showSubmenu = () => {\n const { top: y, right: x } = ref.current!.getBoundingClientRect();\n setSubmenuPosition({ x, y });\n };\n\n const hideSubmenu = () => {\n setSubmenuPosition(null);\n };\n\n const hasItemsAndIsNotDisabled = items && !disabled;\n\n const theme = useMantineTheme();\n const { colors } = theme;\n const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n if (color === 'red') console.log(parsedColor);\n\n return (\n <div\n onMouseOver={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n onMouseOut={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"]}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../package/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC","sourcesContent":["export * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './utils';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../package/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC","sourcesContent":["export * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './types';\nexport * from './utils';\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\nexport type ContextMenuOptions = {\n /**\n * zIndex of context menu\n * @default 9999\n */\n zIndex?: number;\n\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 * 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\nexport type ContextMenuProviderProps = ContextMenuOptions & {\n children: ReactNode;\n};\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\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\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"]}
|
|
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 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 * 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 * Context menu provider props\n */\nexport type ContextMenuProviderProps = 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/esm/utils.js
CHANGED
|
@@ -9,10 +9,4 @@ export function humanize(value) {
|
|
|
9
9
|
.toLowerCase();
|
|
10
10
|
return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
|
|
11
11
|
}
|
|
12
|
-
/**
|
|
13
|
-
* A very simple utility function that returns a concatenated string of non-empty class names
|
|
14
|
-
*/
|
|
15
|
-
export function cs(...args) {
|
|
16
|
-
return args.filter(Boolean).join(' ');
|
|
17
|
-
}
|
|
18
12
|
//# sourceMappingURL=utils.js.map
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../package/utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../package/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAa;IACpC,MAAM,GAAG,GAAG,KAAK;SACd,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;SACtC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;SACrB,IAAI,EAAE;SACN,WAAW,EAAE,CAAC;IACjB,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;AACzD,CAAC","sourcesContent":["/**\n * Utility function that returns a humanized version of a string, e.g. \"camelCase\" -> \"Camel Case\"\n */\nexport function humanize(value: string) {\n const str = value\n .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n .replace(/\\W|_/g, ' ')\n .trim()\n .toLowerCase();\n return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n}\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { ContextMenuItemOptions } from './types';
|
|
1
|
+
import type { ContextMenuItemOptions } from './types';
|
|
2
2
|
export type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;
|
|
3
3
|
export declare function ContextMenuDivider({ className, style }: ContextMenuDividerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { ContextMenuItemOptions } from './types';
|
|
2
|
-
import { type WithRequiredProperty } from './utils';
|
|
1
|
+
import type { ContextMenuItemOptions, WithRequiredProperty } from './types';
|
|
3
2
|
export declare function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {
|
|
4
3
|
onHide: () => void;
|
|
5
4
|
}): import("react/jsx-runtime").JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
package/dist/types/types.d.ts
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import type { MantineColor, MantineShadow, MantineSize, MantineTheme } from '@mantine/core';
|
|
2
2
|
import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Utility type that makes a property required
|
|
5
|
+
*/
|
|
6
|
+
export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
|
|
7
|
+
[Property in Key]-?: Type[Property];
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Utility type that makes a property optional
|
|
11
|
+
*/
|
|
12
|
+
export type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
|
13
|
+
/**
|
|
14
|
+
* Context menu options
|
|
15
|
+
*/
|
|
3
16
|
export type ContextMenuOptions = {
|
|
4
17
|
/**
|
|
5
18
|
* zIndex of context menu
|
|
@@ -35,9 +48,15 @@ export type ContextMenuOptions = {
|
|
|
35
48
|
*/
|
|
36
49
|
styles?: Partial<Record<'root' | 'item' | 'divider', CSSProperties>> | ((theme: MantineTheme) => Partial<Record<'root' | 'item' | 'divider', CSSProperties>>);
|
|
37
50
|
};
|
|
51
|
+
/**
|
|
52
|
+
* Context menu provider props
|
|
53
|
+
*/
|
|
38
54
|
export type ContextMenuProviderProps = ContextMenuOptions & {
|
|
39
55
|
children: ReactNode;
|
|
40
56
|
};
|
|
57
|
+
/**
|
|
58
|
+
* Context menu item options
|
|
59
|
+
*/
|
|
41
60
|
export type ContextMenuItemOptions = {
|
|
42
61
|
/**
|
|
43
62
|
* Unique key of the context menu item or divider
|
|
@@ -89,7 +108,13 @@ export type ContextMenuItemOptions = {
|
|
|
89
108
|
onClick?: never;
|
|
90
109
|
items?: never;
|
|
91
110
|
});
|
|
111
|
+
/**
|
|
112
|
+
* Context menu content - either an array of context menu items or a function that accepts a close callback and returns context menu content
|
|
113
|
+
*/
|
|
92
114
|
export type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);
|
|
115
|
+
/**
|
|
116
|
+
* Context menu hook return value
|
|
117
|
+
*/
|
|
93
118
|
export type ShowContextMenuFunction = (
|
|
94
119
|
/**
|
|
95
120
|
* Context menu content - either an array of context menu items
|
package/dist/types/utils.d.ts
CHANGED
|
@@ -1,18 +1,4 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Utility type that makes a property required
|
|
3
|
-
*/
|
|
4
|
-
export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
|
|
5
|
-
[Property in Key]-?: Type[Property];
|
|
6
|
-
};
|
|
7
|
-
/**
|
|
8
|
-
* Utility type that makes a property optional
|
|
9
|
-
*/
|
|
10
|
-
export type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
|
11
1
|
/**
|
|
12
2
|
* Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
|
|
13
3
|
*/
|
|
14
4
|
export declare function humanize(value: string): string;
|
|
15
|
-
/**
|
|
16
|
-
* A very simple utility function that returns a concatenated string of non-empty class names
|
|
17
|
-
*/
|
|
18
|
-
export declare function cs(...args: (string | undefined | null)[]): string;
|
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.2",
|
|
4
4
|
"description": "Enhance your Mantine UI applications usability with customizable context menus",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"format": "prettier --write ."
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
|
-
"@ducanh2912/next-pwa": "^9.7.
|
|
71
|
+
"@ducanh2912/next-pwa": "^9.7.2",
|
|
72
72
|
"@mantine/code-highlight": "^7.1.3",
|
|
73
73
|
"@mantine/core": "^7.1.3",
|
|
74
74
|
"@mantine/hooks": "^7.1.3",
|
|
@@ -78,8 +78,8 @@
|
|
|
78
78
|
"@types/node": "^20.8.6",
|
|
79
79
|
"@types/react": "^18.2.28",
|
|
80
80
|
"@types/react-dom": "^18.2.13",
|
|
81
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
|
82
|
-
"@typescript-eslint/parser": "^6.
|
|
81
|
+
"@typescript-eslint/eslint-plugin": "^6.8.0",
|
|
82
|
+
"@typescript-eslint/parser": "^6.8.0",
|
|
83
83
|
"clsx": "^2.0.0",
|
|
84
84
|
"eslint": "^8.51.0",
|
|
85
85
|
"eslint-config-next": "^13.5.5",
|