mantine-contextmenu 7.0.0-alpha.4 → 7.0.0-alpha.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Ionuț-Cristian Florescu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -64,7 +64,7 @@ import Picture from '~/components/Picture';
 import { copyImageToClipboard, downloadImage, unsplashImages } from '~/lib/image';
 
 export default function GettingStartedExample() {
-  const showContextMenu = useContextMenu();
+  const { showContextMenu } = useContextMenu();
 
   const image = unsplashImages[0];
   const { src } = image.file;

package/dist/cjs/ContextMenu.js

@@ -39,7 +39,7 @@ var utils_1 = require("./utils");
 function ContextMenu(_a) {
     var _b;
     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;
-    var _c = (0, react_1.useContext)(ContextMenuProvider_1.MenuSettingsContext), shadow = _c.shadow, borderRadius = _c.borderRadius;
+    var _c = (0, react_1.useContext)(ContextMenuProvider_1.ContextMenuSettingsCtx), shadow = _c.shadow, borderRadius = _c.borderRadius;
     var paperRef = (0, hooks_1.useResizeObserver)()[0];
     var _d = ((_b = paperRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || { width: 0, height: 0 }, width = _d.width, height = _d.height;
     var windowWidth = 0;
@@ -47,19 +47,26 @@ function ContextMenu(_a) {
     if (typeof window !== 'undefined')
         (windowWidth = window.innerWidth, windowHeight = window.innerHeight);
     var dir = (0, core_1.useDirection)().dir;
-    var theme = (0, core_1.useMantineTheme)();
-    var resolvedStyle = typeof style === 'function' ? style(theme) : style;
-    var resolvedStyles = typeof styles === 'function' ? styles(theme) : styles;
-    var mdSpacing = (0, core_1.px)(theme.spacing.md);
-    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'
-                ? x + width + mdSpacing > windowWidth
-                    ? windowWidth - width - mdSpacing
-                    : x
-                : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x) }), children: Array.isArray(content)
+    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: [
+            styles === null || styles === void 0 ? void 0 : styles.root,
+            style,
+            function (_a) {
+                var md = _a.spacing.md;
+                var mdSpacing = (0, core_1.px)(md);
+                return {
+                    zIndex: zIndex,
+                    top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,
+                    left: dir === 'ltr'
+                        ? x + width + mdSpacing > windowWidth
+                            ? windowWidth - width - mdSpacing
+                            : x
+                        : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),
+                };
+            },
+        ], children: Array.isArray(content)
             ? content.map(function (_a) {
                 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"]);
-                var resolvedItemStyle = typeof style === 'function' ? style(theme) : style;
-                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));
+                return onClick || items ? ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, __assign({ className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.item, className), style: [styles === null || styles === void 0 ? void 0 : styles.item, style], title: title !== null && title !== void 0 ? title : (0, utils_1.humanize)(key), onClick: onClick, onHide: onHide, items: items }, otherOptions), key)) : ((0, jsx_runtime_1.jsx)(ContextMenuDivider_1.ContextMenuDivider, { className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.divider, className), style: [styles === null || styles === void 0 ? void 0 : styles.divider, style] }, key));
             })
             : content(onHide) }));
 }

package/dist/cjs/ContextMenu.js.map

@@ -1 +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"]}
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n  x: number;\n  y: number;\n  content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n  ContextMenuInstanceOptions & {\n    onHide: () => void;\n  };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n  const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n  const [paperRef] = useResizeObserver<HTMLDivElement>();\n  const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n  let windowWidth = 0;\n  let windowHeight = 0;\n  if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n  const { dir } = useDirection();\n\n  return (\n    <Paper\n      ref={paperRef}\n      shadow={shadow}\n      radius={borderRadius}\n      className={clsx('mantine-contextmenu', className, classNames?.root)}\n      style={[\n        styles?.root,\n        style,\n        ({ spacing: { md } }) => {\n          const mdSpacing = px(md) as number;\n          return {\n            zIndex,\n            top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n            left:\n              dir === 'ltr'\n                ? x + width + mdSpacing > windowWidth\n                  ? windowWidth - width - mdSpacing\n                  : x\n                : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n          };\n        },\n      ]}\n    >\n      {Array.isArray(content)\n        ? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) =>\n            onClick || items ? (\n              <ContextMenuItem\n                key={key}\n                className={clsx(classNames?.item, className)}\n                style={[styles?.item, style]}\n                title={title ?? humanize(key)}\n                onClick={onClick}\n                onHide={onHide}\n                items={items}\n                {...otherOptions}\n              />\n            ) : (\n              <ContextMenuDivider\n                key={key}\n                className={clsx(classNames?.divider, className)}\n                style={[styles?.divider, style]}\n              />\n            )\n          )\n        : content(onHide)}\n    </Paper>\n  );\n}\n"]}

package/dist/cjs/ContextMenuDivider.js

@@ -1,4 +1,3 @@
-'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -10,8 +9,7 @@ var core_1 = require("@mantine/core");
 var clsx_1 = __importDefault(require("clsx"));
 function ContextMenuDivider(_a) {
     var className = _a.className, style = _a.style;
-    var theme = (0, core_1.useMantineTheme)();
-    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 }));
+    return (0, jsx_runtime_1.jsx)(core_1.Box, { className: (0, clsx_1.default)('mantine-contextmenu-divider', className), style: style });
 }
 exports.ContextMenuDivider = ContextMenuDivider;
 //# sourceMappingURL=ContextMenuDivider.js.map

package/dist/cjs/ContextMenuDivider.js.map

@@ -1 +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"]}
+{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,sCAAoC;AACpC,8CAAwB;AAKxB,SAAgB,kBAAkB,CAAC,EAA6C;QAA3C,SAAS,eAAA,EAAE,KAAK,WAAA;IACnD,OAAO,uBAAC,UAAG,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,6BAA6B,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AAC1F,CAAC;AAFD,gDAEC","sourcesContent":["import { Box } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { ContextMenuItemOptions } from './types';\n\nexport type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;\n\nexport function ContextMenuDivider({ className, style }: ContextMenuDividerProps) {\n  return <Box className={clsx('mantine-contextmenu-divider', className)} style={style} />;\n}\n"]}

package/dist/cjs/ContextMenuItem.js

@@ -26,7 +26,7 @@ var ContextMenuProvider_1 = require("./ContextMenuProvider");
 function ContextMenuItem(_a) {
     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;
     var ref = (0, react_1.useRef)(null);
-    var submenuDelay = (0, react_1.useContext)(ContextMenuProvider_1.MenuSettingsContext).submenuDelay;
+    var submenuDelay = (0, react_1.useContext)(ContextMenuProvider_1.ContextMenuSettingsCtx).submenuDelay;
     var _b = (0, react_1.useState)(null), submenuPosition = _b[0], setSubmenuPosition = _b[1];
     var handleClick = onClick
         ? function (e) {
@@ -50,18 +50,28 @@ function ContextMenuItem(_a) {
         startHidingSubmenu();
     };
     var hasItemsAndIsNotDisabled = items && !disabled;
-    var theme = (0, core_1.useMantineTheme)();
-    var colors = theme.colors;
-    var parsedColor = color ? (0, core_1.parseThemeColor)({ color: color, theme: theme }).value : undefined;
-    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
-                        ? (0, core_1.rgba)(parsedColor, 0.08)
-                        : (0, core_1.rgba)(colors.gray[4], 0.25), '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
-                        ? (0, core_1.rgba)(parsedColor, 0.15)
-                        : (0, core_1.rgba)(colors.dark[3], 0.25), '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
-                        ? (0, core_1.rgba)(parsedColor, 0.2)
-                        : (0, core_1.rgba)(colors.gray[4], 0.5), '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
-                        ? (0, core_1.rgba)(parsedColor, 0.3)
-                        : (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))] }));
+    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: [
+                    function (theme) {
+                        var colors = theme.colors;
+                        var parsedColor = color ? (0, core_1.parseThemeColor)({ color: color, theme: theme }).value : undefined;
+                        return {
+                            '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',
+                            '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
+                                ? (0, core_1.rgba)(parsedColor, 0.08)
+                                : (0, core_1.rgba)(colors.gray[4], 0.25),
+                            '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
+                                ? (0, core_1.rgba)(parsedColor, 0.15)
+                                : (0, core_1.rgba)(colors.dark[3], 0.25),
+                            '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
+                                ? (0, core_1.rgba)(parsedColor, 0.2)
+                                : (0, core_1.rgba)(colors.gray[4], 0.5),
+                            '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
+                                ? (0, core_1.rgba)(parsedColor, 0.3)
+                                : (0, core_1.rgba)(colors.dark[3], 0.5),
+                        };
+                    },
+                    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))] }));
 }
 exports.ContextMenuItem = ContextMenuItem;
 //# sourceMappingURL=ContextMenuItem.js.map

package/dist/cjs/ContextMenuItem.js.map

@@ -1 +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"]}
+{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { useTimeout } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext, useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n  className,\n  style,\n  icon,\n  title,\n  color,\n  disabled,\n  onClick,\n  onHide,\n  items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const { submenuDelay } = useContext(ContextMenuSettingsCtx);\n\n  const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n    ? (e) => {\n        onHide();\n        onClick!(e);\n      }\n    : undefined;\n\n  const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {\n    const { top: y, right: x } = ref.current!.getBoundingClientRect();\n    setSubmenuPosition({ x, y });\n  }, submenuDelay);\n\n  const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {\n    setSubmenuPosition(null);\n  }, submenuDelay);\n\n  const showSubmenu = () => {\n    stopHidingSubmenu();\n    startShowingSubmenu();\n  };\n\n  const hideSubmenu = () => {\n    stopShowingSubmenu();\n    startHidingSubmenu();\n  };\n\n  const hasItemsAndIsNotDisabled = items && !disabled;\n\n  return (\n    <div\n      onMouseEnter={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n      onMouseLeave={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n    >\n      <UnstyledButton\n        ref={ref}\n        style={[\n          (theme) => {\n            const { colors } = theme;\n            const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n            return {\n              '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n              '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n                ? rgba(parsedColor, 0.08)\n                : rgba(colors.gray[4], 0.25),\n              '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n                ? rgba(parsedColor, 0.15)\n                : rgba(colors.dark[3], 0.25),\n              '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n                ? rgba(parsedColor, 0.2)\n                : rgba(colors.gray[4], 0.5),\n              '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n                ? rgba(parsedColor, 0.3)\n                : rgba(colors.dark[3], 0.5),\n            };\n          },\n          style,\n        ]}\n        className={clsx('mantine-contextmenu-item-button', className)}\n        disabled={disabled}\n        onClick={handleClick}\n      >\n        {icon && (\n          <Box fz={0} mr=\"xs\" mt={-2}>\n            {icon}\n          </Box>\n        )}\n        <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n        {items && (\n          <Box fz={10} mt={-2} ml=\"xs\">\n            ▶\n          </Box>\n        )}\n      </UnstyledButton>\n      {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n    </div>\n  );\n}\n"]}

package/dist/cjs/ContextMenuProvider.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContextMenu = exports.ContextMenuProvider = exports.MenuContext = exports.MenuSettingsContext = void 0;
+exports.useContextMenu = exports.ContextMenuProvider = exports.ContextMenuCtx = exports.ContextMenuSettingsCtx = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var core_1 = require("@mantine/core");
 var react_1 = require("react");
@@ -22,8 +22,8 @@ var DEFAULT_SETTINGS = {
     borderRadius: 'xs',
     submenuDelay: 500,
 };
-exports.MenuSettingsContext = (0, react_1.createContext)(DEFAULT_SETTINGS);
-exports.MenuContext = (0, react_1.createContext)(function () { return function () { return undefined; }; });
+exports.ContextMenuSettingsCtx = (0, react_1.createContext)(DEFAULT_SETTINGS);
+exports.ContextMenuCtx = (0, react_1.createContext)({ showContextMenu: function () { return function () { return undefined; }; }, hideContextMenu: function () { return undefined; } });
 /**
  * Provider that allows to show a context menu anywhere in your application.
  * If you wrap your application with this provider, you can use the `useContextMenu` hook
@@ -32,7 +32,7 @@ exports.MenuContext = (0, react_1.createContext)(function () { return function (
 function ContextMenuProvider(_a) {
     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;
     var _f = (0, react_1.useState)(null), data = _f[0], setData = _f[1];
-    var destroy = function () {
+    var hideContextMenu = function () {
         setData(null);
     };
     var showContextMenu = function (content, options) { return function (e) {
@@ -49,14 +49,14 @@ function ContextMenuProvider(_a) {
             styles: options === null || options === void 0 ? void 0 : options.styles,
         });
     }; };
-    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)) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.ContextMenuSettingsCtx.Provider, { value: { shadow: shadow, borderRadius: borderRadius, submenuDelay: submenuDelay }, children: (0, jsx_runtime_1.jsxs)(exports.ContextMenuCtx.Provider, { value: { showContextMenu: showContextMenu, hideContextMenu: hideContextMenu }, children: [children, (0, jsx_runtime_1.jsx)(core_1.MantineProvider, { children: data && (0, jsx_runtime_1.jsx)(ContextMenuPortal_1.ContextMenuPortal, __assign({ onHide: hideContextMenu }, data)) })] }) }));
 }
 exports.ContextMenuProvider = ContextMenuProvider;
 /**
- * Hook returning a function that shows a context menu.
+ * Hook returning functions that show and hide the context menu.
  */
 function useContextMenu() {
-    return (0, react_1.useContext)(exports.MenuContext);
+    return (0, react_1.useContext)(exports.ContextMenuCtx);
 }
 exports.useContextMenu = useContextMenu;
 //# sourceMappingURL=ContextMenuProvider.js.map

package/dist/cjs/ContextMenuProvider.js.map

@@ -1 +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"]}
+{"version":3,"file":"ContextMenuProvider.js","sourceRoot":"","sources":["../../package/ContextMenuProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;AAEb,sCAAgD;AAChD,+BAA4D;AAE5D,yDAAwD;AAUxD,IAAM,gBAAgB,GAA0F;IAC9G,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,GAAG;CAClB,CAAC;AAEW,QAAA,sBAAsB,GAAG,IAAA,qBAAa,EAAC,gBAAgB,CAAC,CAAC;AACzD,QAAA,cAAc,GAAG,IAAA,qBAAa,EAGxC,EAAE,eAAe,EAAE,cAAM,OAAA,cAAM,OAAA,SAAS,EAAT,CAAS,EAAf,CAAe,EAAE,eAAe,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS,EAAE,CAAC,CAAC;AAEjF;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,EAMT;QALzB,cAAa,EAAb,MAAM,mBAAG,IAAI,KAAA,EACb,cAAgC,EAAhC,MAAM,mBAAG,gBAAgB,CAAC,MAAM,KAAA,EAChC,oBAA4C,EAA5C,YAAY,mBAAG,gBAAgB,CAAC,YAAY,KAAA,EAC5C,oBAA4C,EAA5C,YAAY,mBAAG,gBAAgB,CAAC,YAAY,KAAA,EAC5C,QAAQ,cAAA;IAEF,IAAA,KAAkB,IAAA,gBAAQ,EAA2D,IAAI,CAAC,EAAzF,IAAI,QAAA,EAAE,OAAO,QAA4E,CAAC;IAEjG,IAAM,eAAe,GAAG;QACtB,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,IAAM,eAAe,GAA4B,UAAC,OAAO,EAAE,OAAO,IAAK,OAAA,UAAC,CAAC;QACvE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC;YACN,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,OAAO,SAAA;YACP,MAAM,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,KAAI,MAAM;YACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS;YAC7B,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK;YACrB,UAAU,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU;YAC/B,MAAM,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;SACxB,CAAC,CAAC;IACL,CAAC,EAbsE,CAatE,CAAC;IAEF,OAAO,CACL,uBAAC,8BAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,QAAA,EAAE,YAAY,cAAA,EAAE,YAAY,cAAA,EAAE,YAC5E,wBAAC,sBAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,eAAe,iBAAA,EAAE,eAAe,iBAAA,EAAE,aACjE,QAAQ,EACT,uBAAC,sBAAe,cAAE,IAAI,IAAI,uBAAC,qCAAiB,aAAC,MAAM,EAAE,eAAe,IAAM,IAAI,EAAI,GAAmB,IAC7E,GACM,CACnC,CAAC;AACJ,CAAC;AApCD,kDAoCC;AAED;;GAEG;AACH,SAAgB,cAAc;IAC5B,OAAO,IAAA,kBAAU,EAAC,sBAAc,CAAC,CAAC;AACpC,CAAC;AAFD,wCAEC","sourcesContent":["'use client';\n\nimport { MantineProvider } from '@mantine/core';\nimport { createContext, useContext, useState } from 'react';\nimport { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type {\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ContextMenuSettings,\n  HideContextMenuFunction,\n  ShowContextMenuFunction,\n  WithRequiredProperty,\n} from './types';\n\nconst DEFAULT_SETTINGS: WithRequiredProperty<ContextMenuSettings, 'shadow' | 'borderRadius' | 'submenuDelay'> = {\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n};\n\nexport const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);\nexport const ContextMenuCtx = createContext<{\n  showContextMenu: ShowContextMenuFunction;\n  hideContextMenu: HideContextMenuFunction;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined });\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n  zIndex = 9999,\n  shadow = DEFAULT_SETTINGS.shadow,\n  borderRadius = DEFAULT_SETTINGS.borderRadius,\n  submenuDelay = DEFAULT_SETTINGS.submenuDelay,\n  children,\n}: ContextMenuProviderProps) {\n  const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n  const hideContextMenu = () => {\n    setData(null);\n  };\n\n  const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setData({\n      x: e.clientX,\n      y: e.clientY,\n      content,\n      zIndex: options?.zIndex || zIndex,\n      className: options?.className,\n      style: options?.style,\n      classNames: options?.classNames,\n      styles: options?.styles,\n    });\n  };\n\n  return (\n    <ContextMenuSettingsCtx.Provider value={{ shadow, borderRadius, submenuDelay }}>\n      <ContextMenuCtx.Provider value={{ showContextMenu, hideContextMenu }}>\n        {children}\n        <MantineProvider>{data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}</MantineProvider>\n      </ContextMenuCtx.Provider>\n    </ContextMenuSettingsCtx.Provider>\n  );\n}\n\n/**\n * Hook returning functions that show and hide the context menu.\n */\nexport function useContextMenu() {\n  return useContext(ContextMenuCtx);\n}\n"]}

package/dist/cjs/types.js.map

@@ -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 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"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n  [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n  /**\n   * The z-index of context menu.\n   * @default 9999\n   */\n  zIndex?: number;\n\n  /**\n   * Context menu container className.\n   */\n  className?: string;\n\n  /**\n   * Context menu container style.\n   */\n  style?: MantineStyleProp;\n\n  /**\n   * Context menu elements classNames.\n   */\n  classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n  /**\n   * Context menu styles.\n   * Can be an object with `root`, `item` and `divider` keys and `CSSProperties` as values,\n   * or a function that accepts the current theme and returns a similarly structured object.\n   */\n  styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;\n};\n\n/**\n * Generic context menu settings\n */\nexport type ContextMenuSettings = {\n  /**\n   * Context menu shadow.\n   * @default 'sm'\n   */\n  shadow?: MantineShadow;\n\n  /**\n   * Context menu border radius.\n   * @default 'xs'\n   */\n  borderRadius?: MantineRadius;\n\n  /**\n   * Delay in ms to use when showing and hiding submenus.\n   * @default 500\n   */\n  submenuDelay?: number;\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuSettings &\n  ContextMenuOptions & {\n    children: React.ReactNode;\n  };\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n  /**\n   * Unique key of the context menu item or divider.\n   */\n  key: string;\n  /**\n   * Context menu item or divider className.\n   */\n  className?: string;\n\n  /**\n   * Context menu item or divider style.\n   */\n  style?: MantineStyleProp;\n} & (\n  | ({\n      /**\n       * Optional context menu item icon.\n       */\n      icon?: React.ReactNode;\n\n      /**\n       * Optional context menu item title.\n       * If not provided, one will be generated automatically by \"humanizing\" the key.\n       * @default humanize(key)\n       */\n      title?: React.ReactNode;\n\n      /**\n       * Optional context menu item color.\n       */\n      color?: MantineColor;\n\n      /**\n       * Boolean indicating whether the context menu item is disabled.\n       */\n      disabled?: boolean;\n    } & (\n      | {\n          /**\n           * Optional context menu item `onClick` handler.\n           * If not provided, a divider will be rendered instead.\n           */\n          onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n          items?: never;\n        }\n      | {\n          onClick?: never;\n\n          /**\n           * Optional items.\n           * If provided, a submenu will be rendered.\n           */\n          items: ContextMenuItemOptions[];\n        }\n    ))\n  | {\n      icon?: never;\n      title?: never;\n      color?: never;\n      disabled?: never;\n      onClick?: never;\n      items?: never;\n    }\n);\n\n/**\n * Context menu content.\n * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Show context menu function\n */\nexport type ShowContextMenuFunction = (\n  /**\n   * Context menu content.\n   * Either an array of context menu items or a function that accepts a close callback and returns context menu content.\n   */\n  content: ContextMenuContent,\n\n  /**\n   * Context menu options (overrides provider props).\n   */\n  options?: ContextMenuOptions\n) => React.MouseEventHandler;\n\nexport type HideContextMenuFunction = () => void;\n"]}

package/dist/esm/ContextMenu.js

@@ -1,15 +1,15 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Paper, px, useDirection, useMantineTheme } from '@mantine/core';
+import { Paper, px, useDirection } from '@mantine/core';
 import { useResizeObserver } from '@mantine/hooks';
 import clsx from 'clsx';
 import { useContext } from 'react';
 import { ContextMenuDivider } from './ContextMenuDivider';
 import { ContextMenuItem } from './ContextMenuItem';
-import { MenuSettingsContext } from './ContextMenuProvider';
+import { ContextMenuSettingsCtx } from './ContextMenuProvider';
 import { humanize } from './utils';
 export function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }) {
-    const { shadow, borderRadius } = useContext(MenuSettingsContext);
+    const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);
     const [paperRef] = useResizeObserver();
     const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };
     let windowWidth = 0;
@@ -17,25 +17,23 @@ export function ContextMenu({ x, y, content, zIndex, onHide, className, style, c
     if (typeof window !== 'undefined')
         ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);
     const { dir } = useDirection();
-    const theme = useMantineTheme();
-    const resolvedStyle = typeof style === 'function' ? style(theme) : style;
-    const resolvedStyles = typeof styles === 'function' ? styles(theme) : styles;
-    const mdSpacing = px(theme.spacing.md);
-    return (_jsx(Paper, { ref: paperRef, shadow: shadow, radius: borderRadius, className: clsx('mantine-contextmenu', className, classNames?.root), style: {
-            ...resolvedStyles?.root,
-            ...resolvedStyle,
-            zIndex,
-            top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,
-            left: dir === 'ltr'
-                ? x + width + mdSpacing > windowWidth
-                    ? windowWidth - width - mdSpacing
-                    : x
-                : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),
-        }, children: Array.isArray(content)
-            ? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) => {
-                const resolvedItemStyle = typeof style === 'function' ? style(theme) : style;
-                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));
-            })
+    return (_jsx(Paper, { ref: paperRef, shadow: shadow, radius: borderRadius, className: clsx('mantine-contextmenu', className, classNames?.root), style: [
+            styles?.root,
+            style,
+            ({ spacing: { md } }) => {
+                const mdSpacing = px(md);
+                return {
+                    zIndex,
+                    top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,
+                    left: dir === 'ltr'
+                        ? x + width + mdSpacing > windowWidth
+                            ? windowWidth - width - mdSpacing
+                            : x
+                        : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),
+                };
+            },
+        ], children: Array.isArray(content)
+            ? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) => onClick || items ? (_jsx(ContextMenuItem, { className: clsx(classNames?.item, className), style: [styles?.item, style], title: title ?? humanize(key), onClick: onClick, onHide: onHide, items: items, ...otherOptions }, key)) : (_jsx(ContextMenuDivider, { className: clsx(classNames?.divider, className), style: [styles?.divider, style] }, key)))
             : content(onHide) }));
 }
 //# sourceMappingURL=ContextMenu.js.map

package/dist/esm/ContextMenu.js.map

@@ -1 +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"]}
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n  x: number;\n  y: number;\n  content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n  ContextMenuInstanceOptions & {\n    onHide: () => void;\n  };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n  const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n  const [paperRef] = useResizeObserver<HTMLDivElement>();\n  const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n  let windowWidth = 0;\n  let windowHeight = 0;\n  if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n  const { dir } = useDirection();\n\n  return (\n    <Paper\n      ref={paperRef}\n      shadow={shadow}\n      radius={borderRadius}\n      className={clsx('mantine-contextmenu', className, classNames?.root)}\n      style={[\n        styles?.root,\n        style,\n        ({ spacing: { md } }) => {\n          const mdSpacing = px(md) as number;\n          return {\n            zIndex,\n            top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n            left:\n              dir === 'ltr'\n                ? x + width + mdSpacing > windowWidth\n                  ? windowWidth - width - mdSpacing\n                  : x\n                : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n          };\n        },\n      ]}\n    >\n      {Array.isArray(content)\n        ? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) =>\n            onClick || items ? (\n              <ContextMenuItem\n                key={key}\n                className={clsx(classNames?.item, className)}\n                style={[styles?.item, style]}\n                title={title ?? humanize(key)}\n                onClick={onClick}\n                onHide={onHide}\n                items={items}\n                {...otherOptions}\n              />\n            ) : (\n              <ContextMenuDivider\n                key={key}\n                className={clsx(classNames?.divider, className)}\n                style={[styles?.divider, style]}\n              />\n            )\n          )\n        : content(onHide)}\n    </Paper>\n  );\n}\n"]}

package/dist/esm/ContextMenuDivider.js

@@ -1,9 +1,7 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, useMantineTheme } from '@mantine/core';
+import { Box } from '@mantine/core';
 import clsx from 'clsx';
 export function ContextMenuDivider({ className, style }) {
-    const theme = useMantineTheme();
-    return (_jsx(Box, { className: clsx('mantine-contextmenu-divider', className), style: typeof style === 'function' ? style(theme) : style }));
+    return _jsx(Box, { className: clsx('mantine-contextmenu-divider', className), style: style });
 }
 //# sourceMappingURL=ContextMenuDivider.js.map

package/dist/esm/ContextMenuDivider.js.map

@@ -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;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"]}
+{"version":3,"file":"ContextMenuDivider.js","sourceRoot":"","sources":["../../package/ContextMenuDivider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AAKxB,MAAM,UAAU,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAA2B;IAC9E,OAAO,KAAC,GAAG,IAAC,SAAS,EAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AAC1F,CAAC","sourcesContent":["import { Box } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { ContextMenuItemOptions } from './types';\n\nexport type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;\n\nexport function ContextMenuDivider({ className, style }: ContextMenuDividerProps) {\n  return <Box className={clsx('mantine-contextmenu-divider', className)} style={style} />;\n}\n"]}

package/dist/esm/ContextMenuItem.js

@@ -1,14 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, UnstyledButton, parseThemeColor, rgba, useMantineTheme } from '@mantine/core';
+import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';
 import { useTimeout } from '@mantine/hooks';
 import clsx from 'clsx';
 import { useContext, useRef, useState } from 'react';
 import { ContextMenu } from './ContextMenu';
-import { MenuSettingsContext } from './ContextMenuProvider';
+import { ContextMenuSettingsCtx } from './ContextMenuProvider';
 export function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }) {
     const ref = useRef(null);
-    const { submenuDelay } = useContext(MenuSettingsContext);
+    const { submenuDelay } = useContext(ContextMenuSettingsCtx);
     const [submenuPosition, setSubmenuPosition] = useState(null);
     const handleClick = onClick
         ? (e) => {
@@ -32,24 +32,27 @@ export function ContextMenuItem({ className, style, icon, title, color, disabled
         startHidingSubmenu();
     };
     const hasItemsAndIsNotDisabled = items && !disabled;
-    const theme = useMantineTheme();
-    const { colors } = theme;
-    const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;
-    return (_jsxs("div", { onMouseEnter: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseLeave: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [_jsxs(UnstyledButton, { ref: ref, style: {
-                    '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',
-                    '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
-                        ? rgba(parsedColor, 0.08)
-                        : rgba(colors.gray[4], 0.25),
-                    '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
-                        ? rgba(parsedColor, 0.15)
-                        : rgba(colors.dark[3], 0.25),
-                    '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
-                        ? rgba(parsedColor, 0.2)
-                        : rgba(colors.gray[4], 0.5),
-                    '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
-                        ? rgba(parsedColor, 0.3)
-                        : rgba(colors.dark[3], 0.5),
-                    ...(typeof style === 'function' ? style(theme) : style),
-                }, 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 })] }));
+    return (_jsxs("div", { onMouseEnter: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseLeave: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [_jsxs(UnstyledButton, { ref: ref, style: [
+                    (theme) => {
+                        const { colors } = theme;
+                        const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;
+                        return {
+                            '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',
+                            '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
+                                ? rgba(parsedColor, 0.08)
+                                : rgba(colors.gray[4], 0.25),
+                            '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
+                                ? rgba(parsedColor, 0.15)
+                                : rgba(colors.dark[3], 0.25),
+                            '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
+                                ? rgba(parsedColor, 0.2)
+                                : rgba(colors.gray[4], 0.5),
+                            '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
+                                ? rgba(parsedColor, 0.3)
+                                : rgba(colors.dark[3], 0.5),
+                        };
+                    },
+                    style,
+                ], 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 })] }));
 }
 //# sourceMappingURL=ContextMenuItem.js.map

package/dist/esm/ContextMenuItem.js.map

@@ -1 +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"]}
+{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { useTimeout } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext, useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n  className,\n  style,\n  icon,\n  title,\n  color,\n  disabled,\n  onClick,\n  onHide,\n  items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const { submenuDelay } = useContext(ContextMenuSettingsCtx);\n\n  const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n    ? (e) => {\n        onHide();\n        onClick!(e);\n      }\n    : undefined;\n\n  const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {\n    const { top: y, right: x } = ref.current!.getBoundingClientRect();\n    setSubmenuPosition({ x, y });\n  }, submenuDelay);\n\n  const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {\n    setSubmenuPosition(null);\n  }, submenuDelay);\n\n  const showSubmenu = () => {\n    stopHidingSubmenu();\n    startShowingSubmenu();\n  };\n\n  const hideSubmenu = () => {\n    stopShowingSubmenu();\n    startHidingSubmenu();\n  };\n\n  const hasItemsAndIsNotDisabled = items && !disabled;\n\n  return (\n    <div\n      onMouseEnter={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n      onMouseLeave={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n    >\n      <UnstyledButton\n        ref={ref}\n        style={[\n          (theme) => {\n            const { colors } = theme;\n            const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n            return {\n              '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n              '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n                ? rgba(parsedColor, 0.08)\n                : rgba(colors.gray[4], 0.25),\n              '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n                ? rgba(parsedColor, 0.15)\n                : rgba(colors.dark[3], 0.25),\n              '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n                ? rgba(parsedColor, 0.2)\n                : rgba(colors.gray[4], 0.5),\n              '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n                ? rgba(parsedColor, 0.3)\n                : rgba(colors.dark[3], 0.5),\n            };\n          },\n          style,\n        ]}\n        className={clsx('mantine-contextmenu-item-button', className)}\n        disabled={disabled}\n        onClick={handleClick}\n      >\n        {icon && (\n          <Box fz={0} mr=\"xs\" mt={-2}>\n            {icon}\n          </Box>\n        )}\n        <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n        {items && (\n          <Box fz={10} mt={-2} ml=\"xs\">\n            ▶\n          </Box>\n        )}\n      </UnstyledButton>\n      {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n    </div>\n  );\n}\n"]}

package/dist/esm/ContextMenuProvider.js

@@ -8,8 +8,8 @@ const DEFAULT_SETTINGS = {
     borderRadius: 'xs',
     submenuDelay: 500,
 };
-export const MenuSettingsContext = createContext(DEFAULT_SETTINGS);
-export const MenuContext = createContext(() => () => undefined);
+export const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);
+export const ContextMenuCtx = createContext({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined });
 /**
  * Provider that allows to show a context menu anywhere in your application.
  * If you wrap your application with this provider, you can use the `useContextMenu` hook
@@ -17,7 +17,7 @@ export const MenuContext = createContext(() => () => undefined);
  */
 export function ContextMenuProvider({ zIndex = 9999, shadow = DEFAULT_SETTINGS.shadow, borderRadius = DEFAULT_SETTINGS.borderRadius, submenuDelay = DEFAULT_SETTINGS.submenuDelay, children, }) {
     const [data, setData] = useState(null);
-    const destroy = () => {
+    const hideContextMenu = () => {
         setData(null);
     };
     const showContextMenu = (content, options) => (e) => {
@@ -34,12 +34,12 @@ export function ContextMenuProvider({ zIndex = 9999, shadow = DEFAULT_SETTINGS.s
             styles: options?.styles,
         });
     };
-    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 }) })] }) }));
+    return (_jsx(ContextMenuSettingsCtx.Provider, { value: { shadow, borderRadius, submenuDelay }, children: _jsxs(ContextMenuCtx.Provider, { value: { showContextMenu, hideContextMenu }, children: [children, _jsx(MantineProvider, { children: data && _jsx(ContextMenuPortal, { onHide: hideContextMenu, ...data }) })] }) }));
 }
 /**
- * Hook returning a function that shows a context menu.
+ * Hook returning functions that show and hide the context menu.
  */
 export function useContextMenu() {
-    return useContext(MenuContext);
+    return useContext(ContextMenuCtx);
 }
 //# sourceMappingURL=ContextMenuProvider.js.map

package/dist/esm/ContextMenuProvider.js.map

@@ -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;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"]}
+{"version":3,"file":"ContextMenuProvider.js","sourceRoot":"","sources":["../../package/ContextMenuProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,gBAAgB,GAA0F;IAC9G,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,GAAG;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;AACtE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAGxC,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;AAEjF;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,MAAM,GAAG,IAAI,EACb,MAAM,GAAG,gBAAgB,CAAC,MAAM,EAChC,YAAY,GAAG,gBAAgB,CAAC,YAAY,EAC5C,YAAY,GAAG,gBAAgB,CAAC,YAAY,EAC5C,QAAQ,GACiB;IACzB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2D,IAAI,CAAC,CAAC;IAEjG,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,eAAe,GAA4B,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;QAC3E,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC;YACN,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,OAAO;YACP,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,MAAM;YACjC,SAAS,EAAE,OAAO,EAAE,SAAS;YAC7B,KAAK,EAAE,OAAO,EAAE,KAAK;YACrB,UAAU,EAAE,OAAO,EAAE,UAAU;YAC/B,MAAM,EAAE,OAAO,EAAE,MAAM;SACxB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,YAC5E,MAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,aACjE,QAAQ,EACT,KAAC,eAAe,cAAE,IAAI,IAAI,KAAC,iBAAiB,IAAC,MAAM,EAAE,eAAe,KAAM,IAAI,GAAI,GAAmB,IAC7E,GACM,CACnC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,UAAU,CAAC,cAAc,CAAC,CAAC;AACpC,CAAC","sourcesContent":["'use client';\n\nimport { MantineProvider } from '@mantine/core';\nimport { createContext, useContext, useState } from 'react';\nimport { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type {\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ContextMenuSettings,\n  HideContextMenuFunction,\n  ShowContextMenuFunction,\n  WithRequiredProperty,\n} from './types';\n\nconst DEFAULT_SETTINGS: WithRequiredProperty<ContextMenuSettings, 'shadow' | 'borderRadius' | 'submenuDelay'> = {\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n};\n\nexport const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);\nexport const ContextMenuCtx = createContext<{\n  showContextMenu: ShowContextMenuFunction;\n  hideContextMenu: HideContextMenuFunction;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined });\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n  zIndex = 9999,\n  shadow = DEFAULT_SETTINGS.shadow,\n  borderRadius = DEFAULT_SETTINGS.borderRadius,\n  submenuDelay = DEFAULT_SETTINGS.submenuDelay,\n  children,\n}: ContextMenuProviderProps) {\n  const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n  const hideContextMenu = () => {\n    setData(null);\n  };\n\n  const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setData({\n      x: e.clientX,\n      y: e.clientY,\n      content,\n      zIndex: options?.zIndex || zIndex,\n      className: options?.className,\n      style: options?.style,\n      classNames: options?.classNames,\n      styles: options?.styles,\n    });\n  };\n\n  return (\n    <ContextMenuSettingsCtx.Provider value={{ shadow, borderRadius, submenuDelay }}>\n      <ContextMenuCtx.Provider value={{ showContextMenu, hideContextMenu }}>\n        {children}\n        <MantineProvider>{data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}</MantineProvider>\n      </ContextMenuCtx.Provider>\n    </ContextMenuSettingsCtx.Provider>\n  );\n}\n\n/**\n * Hook returning functions that show and hide the context menu.\n */\nexport function useContextMenu() {\n  return useContext(ContextMenuCtx);\n}\n"]}

package/dist/esm/types.js.map

@@ -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 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"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n  [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n  /**\n   * The z-index of context menu.\n   * @default 9999\n   */\n  zIndex?: number;\n\n  /**\n   * Context menu container className.\n   */\n  className?: string;\n\n  /**\n   * Context menu container style.\n   */\n  style?: MantineStyleProp;\n\n  /**\n   * Context menu elements classNames.\n   */\n  classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n  /**\n   * Context menu styles.\n   * Can be an object with `root`, `item` and `divider` keys and `CSSProperties` as values,\n   * or a function that accepts the current theme and returns a similarly structured object.\n   */\n  styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;\n};\n\n/**\n * Generic context menu settings\n */\nexport type ContextMenuSettings = {\n  /**\n   * Context menu shadow.\n   * @default 'sm'\n   */\n  shadow?: MantineShadow;\n\n  /**\n   * Context menu border radius.\n   * @default 'xs'\n   */\n  borderRadius?: MantineRadius;\n\n  /**\n   * Delay in ms to use when showing and hiding submenus.\n   * @default 500\n   */\n  submenuDelay?: number;\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuSettings &\n  ContextMenuOptions & {\n    children: React.ReactNode;\n  };\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n  /**\n   * Unique key of the context menu item or divider.\n   */\n  key: string;\n  /**\n   * Context menu item or divider className.\n   */\n  className?: string;\n\n  /**\n   * Context menu item or divider style.\n   */\n  style?: MantineStyleProp;\n} & (\n  | ({\n      /**\n       * Optional context menu item icon.\n       */\n      icon?: React.ReactNode;\n\n      /**\n       * Optional context menu item title.\n       * If not provided, one will be generated automatically by \"humanizing\" the key.\n       * @default humanize(key)\n       */\n      title?: React.ReactNode;\n\n      /**\n       * Optional context menu item color.\n       */\n      color?: MantineColor;\n\n      /**\n       * Boolean indicating whether the context menu item is disabled.\n       */\n      disabled?: boolean;\n    } & (\n      | {\n          /**\n           * Optional context menu item `onClick` handler.\n           * If not provided, a divider will be rendered instead.\n           */\n          onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n          items?: never;\n        }\n      | {\n          onClick?: never;\n\n          /**\n           * Optional items.\n           * If provided, a submenu will be rendered.\n           */\n          items: ContextMenuItemOptions[];\n        }\n    ))\n  | {\n      icon?: never;\n      title?: never;\n      color?: never;\n      disabled?: never;\n      onClick?: never;\n      items?: never;\n    }\n);\n\n/**\n * Context menu content.\n * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Show context menu function\n */\nexport type ShowContextMenuFunction = (\n  /**\n   * Context menu content.\n   * Either an array of context menu items or a function that accepts a close callback and returns context menu content.\n   */\n  content: ContextMenuContent,\n\n  /**\n   * Context menu options (overrides provider props).\n   */\n  options?: ContextMenuOptions\n) => React.MouseEventHandler;\n\nexport type HideContextMenuFunction = () => void;\n"]}

package/dist/types/ContextMenuProvider.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-import type { ContextMenuProviderProps, ContextMenuSettings, ShowContextMenuFunction, WithRequiredProperty } from './types';
-export declare const MenuSettingsContext: import("react").Context<WithRequiredProperty<ContextMenuSettings, "shadow" | "borderRadius" | "submenuDelay">>;
-export declare const MenuContext: import("react").Context<ShowContextMenuFunction>;
+import type { ContextMenuProviderProps, ContextMenuSettings, HideContextMenuFunction, ShowContextMenuFunction, WithRequiredProperty } from './types';
+export declare const ContextMenuSettingsCtx: import("react").Context<WithRequiredProperty<ContextMenuSettings, "shadow" | "borderRadius" | "submenuDelay">>;
+export declare const ContextMenuCtx: import("react").Context<{
+    showContextMenu: ShowContextMenuFunction;
+    hideContextMenu: HideContextMenuFunction;
+}>;
 /**
  * Provider that allows to show a context menu anywhere in your application.
  * If you wrap your application with this provider, you can use the `useContextMenu` hook
@@ -9,6 +12,9 @@ export declare const MenuContext: import("react").Context<ShowContextMenuFunctio
  */
 export declare function ContextMenuProvider({ zIndex, shadow, borderRadius, submenuDelay, children, }: ContextMenuProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Hook returning a function that shows a context menu.
+ * Hook returning functions that show and hide the context menu.
  */
-export declare function useContextMenu(): ShowContextMenuFunction;
+export declare function useContextMenu(): {
+    showContextMenu: ShowContextMenuFunction;
+    hideContextMenu: HideContextMenuFunction;
+};

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
-import type { MantineColor, MantineShadow, MantineSize, MantineTheme } from '@mantine/core';
-import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+/// <reference types="react" />
+import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';
 /**
  * Utility type that makes a property required
  */
@@ -15,45 +15,45 @@ export type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pi
  */
 export type ContextMenuOptions = {
     /**
-     * zIndex of context menu
+     * The z-index of context menu.
      * @default 9999
      */
     zIndex?: number;
     /**
-     * Context menu container className
+     * Context menu container className.
      */
     className?: string;
     /**
-     * Context menu container style; can be a function that accepts theme and returns a style object
+     * Context menu container style.
      */
-    style?: CSSProperties | ((theme: MantineTheme) => CSSProperties);
+    style?: MantineStyleProp;
     /**
-     * Context menu elements classNames; an object with `root`, `item` and `divider` keys and class names as values
-     * @see https://mantine.dev/styles/styles-api/
+     * Context menu elements classNames.
      */
     classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;
     /**
-     * Context menu styles; can be an object with `root`, `item` and `divider` keys and `CSSProperties` as values,
-     * or a function that accepts the current theme and returns a similarly structured object
+     * Context menu styles.
+     * Can be an object with `root`, `item` and `divider` keys and `CSSProperties` as values,
+     * or a function that accepts the current theme and returns a similarly structured object.
      */
-    styles?: Partial<Record<'root' | 'item' | 'divider', CSSProperties>> | ((theme: MantineTheme) => Partial<Record<'root' | 'item' | 'divider', CSSProperties>>);
+    styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;
 };
 /**
  * Generic context menu settings
  */
 export type ContextMenuSettings = {
     /**
-     * Context menu shadow
+     * Context menu shadow.
      * @default 'sm'
      */
     shadow?: MantineShadow;
     /**
-     * Context menu border radius
+     * Context menu border radius.
      * @default 'xs'
      */
-    borderRadius?: MantineSize;
+    borderRadius?: MantineRadius;
     /**
-     * Delay in ms to use when showing and hiding submenus
+     * Delay in ms to use when showing and hiding submenus.
      * @default 500
      */
     submenuDelay?: number;
@@ -62,52 +62,55 @@ export type ContextMenuSettings = {
  * Context menu provider props
  */
 export type ContextMenuProviderProps = ContextMenuSettings & ContextMenuOptions & {
-    children: ReactNode;
+    children: React.ReactNode;
 };
 /**
  * Context menu item options
  */
 export type ContextMenuItemOptions = {
     /**
-     * Unique key of the context menu item or divider
+     * Unique key of the context menu item or divider.
      */
     key: string;
     /**
-     * Context menu item or divider className
+     * Context menu item or divider className.
      */
     className?: string;
     /**
-     * Context menu item or divider style
+     * Context menu item or divider style.
      */
-    style?: CSSProperties | ((theme: MantineTheme) => CSSProperties);
+    style?: MantineStyleProp;
 } & (({
     /**
-     * Optional context menu item icon
+     * Optional context menu item icon.
      */
-    icon?: ReactNode;
+    icon?: React.ReactNode;
     /**
-     * Optional context menu item title; if not provided, one will be generated automatically by "humanizing" the key
+     * Optional context menu item title.
+     * If not provided, one will be generated automatically by "humanizing" the key.
      * @default humanize(key)
      */
-    title?: ReactNode;
+    title?: React.ReactNode;
     /**
-     * Optional context menu item color
+     * Optional context menu item color.
      */
     color?: MantineColor;
     /**
-     * Boolean indicating whether the context menu item is disabled
+     * Boolean indicating whether the context menu item is disabled.
      */
     disabled?: boolean;
 } & ({
     /**
-     * Optional context menu item `onClick` handler; if not provided, a divider will be rendered instead
+     * Optional context menu item `onClick` handler.
+     * If not provided, a divider will be rendered instead.
      */
-    onClick: MouseEventHandler<HTMLButtonElement>;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
     items?: never;
 } | {
     onClick?: never;
     /**
-     * Optional items; if provided, a submenu will be rendered
+     * Optional items.
+     * If provided, a submenu will be rendered.
      */
     items: ContextMenuItemOptions[];
 })) | {
@@ -119,19 +122,21 @@ export type ContextMenuItemOptions = {
     items?: never;
 });
 /**
- * Context menu content - either an array of context menu items or a function that accepts a close callback and returns context menu content
+ * Context menu content.
+ * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.
  */
 export type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);
 /**
- * Context menu hook return value
+ * Show context menu function
  */
 export type ShowContextMenuFunction = (
 /**
- * Context menu content - either an array of context menu items
- * or a function that accepts a close callback and returns context menu content
+ * Context menu content.
+ * Either an array of context menu items or a function that accepts a close callback and returns context menu content.
  */
 content: ContextMenuContent, 
 /**
- * Context menu options (overrides provider options)
+ * Context menu options (overrides provider props).
  */
-options?: ContextMenuOptions) => MouseEventHandler;
+options?: ContextMenuOptions) => React.MouseEventHandler;
+export type HideContextMenuFunction = () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-contextmenu",
-  "version": "7.0.0-alpha.4",
+  "version": "7.0.0-alpha.6",
   "description": "Enhance your Mantine UI applications usability with customizable context menus",
   "keywords": [
     "ui",
@@ -76,7 +76,7 @@
     "@tabler/icons-react": "^2.39.0",
     "@types/lodash": "^4.14.200",
     "@types/node": "^20.8.7",
-    "@types/react": "^18.2.29",
+    "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",