mantine-contextmenu 6.0.3 → 7.0.0-alpha.2

package/README.md

@@ -1,10 +1,6 @@
-# Mantine ContextMenu V6
+# Mantine ContextMenu
 
-**⚠️ Mantine-ContextMenu V6 is compatible with Mantine V6.**  
-**⏳ Mantine V7 support is in the roadmap.**  
-**❤️ If you want to speed up the process, please consider [sponsoring my work](https://github.com/sponsors/icflorescu).**
-
-![Publish NPM & deploy docs workflow](https://github.com/icflorescu/mantine-contextmenu-v6/actions/workflows/publish-and-deploy.yml/badge.svg)  
+![Publish NPM & deploy docs workflow](https://github.com/icflorescu/mantine-contextmenu/actions/workflows/publish-and-deploy.yml/badge.svg)  
 [![NPM version][npm-image]][npm-url]
 [![License][license-image]][license-url]
 [![Stars][stars-image]][stars-url]
@@ -16,43 +12,47 @@
 
 The "dark-theme aware" **context-menu** for your Mantine UI applications, built by the creator of [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/).
 
-[![Mantine ContextMenu](https://user-images.githubusercontent.com/581999/231230506-3278ea99-dfb3-4edc-ad67-d47f1626a298.png)](https://icflorescu.github.io/mantine-contextmenu-v6/)
+[![Mantine ContextMenu](https://user-images.githubusercontent.com/581999/231230506-3278ea99-dfb3-4edc-ad67-d47f1626a298.png)](https://icflorescu.github.io/mantine-contextmenu/)
+
+**⚠️ NOTE: Mantine ContextMenu V7 is compatible with Mantine V7.**  
+**💡 If you're looking for an older version that works with Mantine V6, head over to [Mantine ContextMenu V6](https://icflorescu.github.io/mantine-contextmenu-v6).**
 
 ## Features
 
-- **Lightweight** - no external dependencies, [no bloat](https://bundlephobia.com/package/mantine-contextmenu@6)
+- **Lightweight** - no external dependencies, [no bloat](https://bundlephobia.com/package/mantine-contextmenu)
 - **Dark-theme aware** - automatically adapts to the current Mantine theme
-- **[Simple API](https://icflorescu.github.io/mantine-contextmenu-v6/getting-started)** - just wrap your application in the `ContextMenuProvider` component and use the hook-generated function in your code
-- **[Custom content support](https://icflorescu.github.io/mantine-contextmenu-v6/examples/custom-content)** - use any Mantine component as context menu content
-- **[Highly customizable styling](https://icflorescu.github.io/mantine-contextmenu-v6/examples/styling)** - use the `className`/`classNames`, `style`/`styles` and `sx` props to customize the context menu appearance
-- **[Written in Typescript and well-documented](https://icflorescu.github.io/mantine-contextmenu-v6/type-definitions)** - with detailed JSDoc annotations for each exported function and component
+- **[Simple API](https://icflorescu.github.io/mantine-contextmenu/getting-started)** - just wrap your application in the `ContextMenuProvider` component and use the hook-generated function in your code
+- **[Custom content support](https://icflorescu.github.io/mantine-contextmenu/examples/custom-content)** - use any Mantine component as context menu content
+- **[Highly customizable styling](https://icflorescu.github.io/mantine-contextmenu/examples/styling)** - use the `className`/`classNames` and `style`/`styles` props to customize the context menu appearance
+- **[Written in Typescript and well-documented](https://icflorescu.github.io/mantine-contextmenu/type-definitions)** - with detailed JSDoc annotations for each exported function and component
 
 ## Full documentation and examples
 
-Visit [icflorescu.github.io/mantine-contextmenu-v6](https://icflorescu.github.io/mantine-contextmenu-v6/) to view the full documentation and learn how to use it by browsing the list of usage examples.
+Visit [icflorescu.github.io/mantine-contextmenu](https://icflorescu.github.io/mantine-contextmenu/) to view the full documentation and learn how to use it by browsing the list of usage examples.
 
 ## Quickstart
 
-Install the package and its dependencies:
+Create a new [Mantine application](https://mantine.dev/pages/getting-started/), then install the package:
 
 ```sh
-npm i @mantine/core@6 @mantine/hooks@6 @emotion/react mantine-contextmenu@6
+npm i mantine-contextmenu
 ```
 
-If you're using Next.js, Vite, CRA, Remix or Gatsby, you might need to install additional dependencies. Please refer to Mantine's [getting started page](https://mantine.dev/pages/getting-started/) for more details.
-
-Wrap your application in the `ContextMenuProvider` components:
+Wrap your application in a `ContextMenuProvider` **inside** the `MantineProvider` and don't forget to import the necessary CSS files [in the correct order](https://mantine.dev/styles/mantine-styles/) (you [might need to use CSS layers](https://mantine.dev/styles/mantine-styles/#css-layers)):
 
 ```tsx
 import { MantineProvider } from '@mantine/core';
 import { ContextMenuProvider } from 'mantine-contextmenu';
 
+// 👇 Mantine core first
+import '@mantine/core/styles.css';
+// 👇 Mantine context menu second
+import 'mantine-contextmenu/styles.css';
+
 function App() {
   return (
     <MantineProvider>
-      <ContextMenuProvider>
-        {/* your app code here... */}
-      </ContextMenuProvider>
+      <ContextMenuProvider>{/* your app code here... */}</ContextMenuProvider>
     </MantineProvider>
   );
 }
@@ -94,7 +94,7 @@ export default function GettingStartedExample() {
 }
 ```
 
-Make sure to browse the list of [usage examples](https://icflorescu.github.io/mantine-contextmenu-v6/examples/basic-usage) to learn how to unleash the full power of Mantine ContextMenu.
+Make sure to browse the list of [usage examples](https://icflorescu.github.io/mantine-contextmenu/examples/basic-usage) to learn how to unleash the full power of Mantine ContextMenu.
 
 ## Other useful resources
 
@@ -102,9 +102,9 @@ Make sure to browse the list of [usage examples](https://icflorescu.github.io/ma
 
 ## Code contributors
 
-[![Contributors list](https://contrib.rocks/image?repo=icflorescu/mantine-contextmenu-v6)](https://github.com/icflorescu/mantine-contextmenu-v6/graphs/contributors)
+[![Contributors list](https://contrib.rocks/image?repo=icflorescu/mantine-contextmenu)](https://github.com/icflorescu/mantine-contextmenu/graphs/contributors)
 
-Want to [become a code contributor](https://icflorescu.github.io/mantine-contextmenu-v6/contribute-and-support)?
+Want to [become a code contributor](https://icflorescu.github.io/mantine-contextmenu/contribute-and-support)?
 
 ## Sponsor the project
 
@@ -129,19 +129,19 @@ Mentioning “Mantine ContextMenu” in your text would help me prioritize your
 
 ## License
 
-The [MIT License](https://github.com/icflorescu/mantine-contextmenu-v6/blob/master/LICENSE).
+The [MIT License](https://github.com/icflorescu/mantine-contextmenu/blob/master/LICENSE).
 
 [npm-url]: https://npmjs.org/package/mantine-contextmenu
-[repo-url]: https://github.com/icflorescu/mantine-contextmenu-v6
-[stars-url]: https://github.com/icflorescu/mantine-contextmenu-v6/stargazers
-[closed-issues-url]: https://github.com/icflorescu/mantine-contextmenu-v6/issues?q=is%3Aissue+is%3Aclosed
+[repo-url]: https://github.com/icflorescu/mantine-contextmenu
+[stars-url]: https://github.com/icflorescu/mantine-contextmenu/stargazers
+[closed-issues-url]: https://github.com/icflorescu/mantine-contextmenu/issues?q=is%3Aissue+is%3Aclosed
 [license-url]: LICENSE
 [npm-image]: https://img.shields.io/npm/v/mantine-contextmenu.svg?style=flat-square
 [license-image]: http://img.shields.io/npm/l/mantine-contextmenu.svg?style=flat-square
 [downloads-image]: http://img.shields.io/npm/dm/mantine-contextmenu.svg?style=flat-square
 [stars-image]: https://img.shields.io/github/stars/icflorescu/mantine-contextmenu?style=flat-square
-[last-commit-image]: https://img.shields.io/github/last-commit/icflorescu/mantine-contextmenu-v6?style=flat-square
-[closed-issues-image]: https://img.shields.io/github/issues-closed-raw/icflorescu/mantine-contextmenu-v6?style=flat-square
-[language-image]: https://img.shields.io/github/languages/top/icflorescu/mantine-contextmenu-v6?style=flat-square
+[last-commit-image]: https://img.shields.io/github/last-commit/icflorescu/mantine-contextmenu?style=flat-square
+[closed-issues-image]: https://img.shields.io/github/issues-closed-raw/icflorescu/mantine-contextmenu?style=flat-square
+[language-image]: https://img.shields.io/github/languages/top/icflorescu/mantine-contextmenu?style=flat-square
 [sponsor-image]: https://img.shields.io/badge/sponsor-violet?style=flat-square
 [sponsor-url]: https://github.com/sponsors/icflorescu

package/dist/cjs/ContextMenu.js

@@ -0,0 +1,64 @@
+'use client';
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var core_1 = require("@mantine/core");
+var hooks_1 = require("@mantine/hooks");
+var clsx_1 = __importDefault(require("clsx"));
+var ContextMenuDivider_1 = require("./ContextMenuDivider");
+var ContextMenuItem_1 = require("./ContextMenuItem");
+var utils_1 = require("./utils");
+function ContextMenu(_a) {
+    var _b;
+    var x = _a.x, y = _a.y, content = _a.content, zIndex = _a.zIndex, shadow = _a.shadow, borderRadius = _a.borderRadius, onHide = _a.onHide, className = _a.className, style = _a.style, classNames = _a.classNames, styles = _a.styles;
+    var paperRef = (0, hooks_1.useResizeObserver)()[0];
+    var _c = ((_b = paperRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || { width: 0, height: 0 }, width = _c.width, height = _c.height;
+    var windowWidth = 0;
+    var windowHeight = 0;
+    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)
+            ? 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));
+            })
+            : content(onHide) }));
+}
+exports.ContextMenu = ContextMenu;
+//# sourceMappingURL=ContextMenu.js.map

package/dist/cjs/ContextMenu.js.map

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

package/dist/cjs/ContextMenuDivider.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenuDivider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+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 }));
+}
+exports.ContextMenuDivider = ContextMenuDivider;
+//# sourceMappingURL=ContextMenuDivider.js.map

package/dist/cjs/ContextMenuDivider.js.map

@@ -0,0 +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"]}

package/dist/cjs/ContextMenuItem.js

@@ -0,0 +1,58 @@
+'use client';
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenuItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var core_1 = require("@mantine/core");
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = require("react");
+var ContextMenu_1 = require("./ContextMenu");
+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 _b = (0, react_1.useState)(null), submenuPosition = _b[0], setSubmenuPosition = _b[1];
+    var handleClick = onClick
+        ? function (e) {
+            onHide();
+            onClick(e);
+        }
+        : undefined;
+    var showSubmenu = function () {
+        var _a = ref.current.getBoundingClientRect(), y = _a.top, x = _a.right;
+        setSubmenuPosition({ x: x, y: y });
+    };
+    var hideSubmenu = function () {
+        setSubmenuPosition(null);
+    };
+    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;
+    if (color === 'red')
+        console.log(parsedColor);
+    return ((0, jsx_runtime_1.jsxs)("div", { onMouseOver: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseOut: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [(0, jsx_runtime_1.jsxs)(core_1.UnstyledButton, { ref: ref, style: __assign({ '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)', '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
+                        ? (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))] }));
+}
+exports.ContextMenuItem = ContextMenuItem;
+//# sourceMappingURL=ContextMenuItem.js.map

package/dist/cjs/ContextMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;AAEb,sCAA4F;AAC5F,8CAAwB;AACxB,+BAAiE;AACjE,6CAA4C;AAG5C,SAAgB,eAAe,CAAC,EAU8D;QAT5F,SAAS,eAAA,EACT,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,MAAM,YAAA,EACN,KAAK,WAAA;IAEL,IAAM,GAAG,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IACtC,IAAA,KAAwC,IAAA,gBAAQ,EAAkC,IAAI,CAAC,EAAtF,eAAe,QAAA,EAAE,kBAAkB,QAAmD,CAAC;IAE9F,IAAM,WAAW,GAAqD,OAAO;QAC3E,CAAC,CAAC,UAAC,CAAC;YACA,MAAM,EAAE,CAAC;YACT,OAAQ,CAAC,CAAC,CAAC,CAAC;QACd,CAAC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,IAAM,WAAW,GAAG;QACZ,IAAA,KAAuB,GAAG,CAAC,OAAQ,CAAC,qBAAqB,EAAE,EAApD,CAAC,SAAA,EAAS,CAAC,WAAyC,CAAC;QAClE,kBAAkB,CAAC,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,IAAM,wBAAwB,GAAG,KAAK,IAAI,CAAC,QAAQ,CAAC;IAEpD,IAAM,KAAK,GAAG,IAAA,sBAAe,GAAE,CAAC;IACxB,IAAA,MAAM,GAAK,KAAK,OAAV,CAAW;IACzB,IAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,IAAA,sBAAe,EAAC,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,IAAI,KAAK,KAAK,KAAK;QAAE,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE9C,OAAO,CACL,iCACE,WAAW,EAAE,wBAAwB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC/D,UAAU,EAAE,wBAAwB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,aAE9D,wBAAC,qBAAc,IACb,GAAG,EAAE,GAAG,EACR,KAAK,aACH,yCAAyC,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,2BAA2B,EAClG,wDAAwD,EAAE,WAAW;wBACnE,CAAC,CAAC,IAAA,WAAI,EAAC,WAAW,EAAE,IAAI,CAAC;wBACzB,CAAC,CAAC,IAAA,WAAI,EAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAC9B,uDAAuD,EAAE,WAAW;wBAClE,CAAC,CAAC,IAAA,WAAI,EAAC,WAAW,EAAE,IAAI,CAAC;wBACzB,CAAC,CAAC,IAAA,WAAI,EAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAC9B,0DAA0D,EAAE,WAAW;wBACrE,CAAC,CAAC,IAAA,WAAI,EAAC,WAAW,EAAE,GAAG,CAAC;wBACxB,CAAC,CAAC,IAAA,WAAI,EAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAC7B,yDAAyD,EAAE,WAAW;wBACpE,CAAC,CAAC,IAAA,WAAI,EAAC,WAAW,EAAE,GAAG,CAAC;wBACxB,CAAC,CAAC,IAAA,WAAI,EAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,IAC1B,CAAC,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAEzD,SAAS,EAAE,IAAA,cAAI,EAAC,iCAAiC,EAAE,SAAS,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,aAEnB,IAAI,IAAI,CACP,uBAAC,UAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,CAAC,YACvB,IAAI,GACD,CACP,EACD,gCAAK,SAAS,EAAC,uCAAuC,YAAE,KAAK,GAAO,EACnE,KAAK,IAAI,CACR,uBAAC,UAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAC,IAAI,uBAEtB,CACP,IACc,EAChB,eAAe,IAAI,uBAAC,yBAAW,aAAC,OAAO,EAAE,KAA2B,EAAE,MAAM,EAAE,MAAM,IAAM,eAAe,EAAI,IAC1G,CACP,CAAC;AACJ,CAAC;AA/ED,0CA+EC","sourcesContent":["'use client';\n\nimport { Box, UnstyledButton, parseThemeColor, rgba, useMantineTheme } from '@mantine/core';\nimport clsx from 'clsx';\nimport { useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n  className,\n  style,\n  icon,\n  title,\n  color,\n  disabled,\n  onClick,\n  onHide,\n  items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n    ? (e) => {\n        onHide();\n        onClick!(e);\n      }\n    : undefined;\n\n  const showSubmenu = () => {\n    const { top: y, right: x } = ref.current!.getBoundingClientRect();\n    setSubmenuPosition({ x, y });\n  };\n\n  const hideSubmenu = () => {\n    setSubmenuPosition(null);\n  };\n\n  const hasItemsAndIsNotDisabled = items && !disabled;\n\n  const theme = useMantineTheme();\n  const { colors } = theme;\n  const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n  if (color === 'red') console.log(parsedColor);\n\n  return (\n    <div\n      onMouseOver={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n      onMouseOut={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n    >\n      <UnstyledButton\n        ref={ref}\n        style={{\n          '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n          '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n            ? rgba(parsedColor, 0.08)\n            : rgba(colors.gray[4], 0.25),\n          '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n            ? rgba(parsedColor, 0.15)\n            : rgba(colors.dark[3], 0.25),\n          '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n            ? rgba(parsedColor, 0.2)\n            : rgba(colors.gray[4], 0.5),\n          '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n            ? rgba(parsedColor, 0.3)\n            : rgba(colors.dark[3], 0.5),\n          ...(typeof style === 'function' ? style(theme) : style),\n        }}\n        className={clsx('mantine-contextmenu-item-button', className)}\n        disabled={disabled}\n        onClick={handleClick}\n      >\n        {icon && (\n          <Box fz={0} mr=\"xs\" mt={-2}>\n            {icon}\n          </Box>\n        )}\n        <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n        {items && (\n          <Box fz={10} mt={-2} ml=\"xs\">\n            ▶\n          </Box>\n        )}\n      </UnstyledButton>\n      {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n    </div>\n  );\n}\n"]}

package/dist/cjs/ContextMenuPortal.js

@@ -0,0 +1,39 @@
+'use client';
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenuPortal = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var core_1 = require("@mantine/core");
+var hooks_1 = require("@mantine/hooks");
+var ContextMenu_1 = require("./ContextMenu");
+function ContextMenuPortal(_a) {
+    var onHide = _a.onHide, otherProps = __rest(_a, ["onHide"]);
+    (0, hooks_1.useWindowEvent)('resize', onHide);
+    (0, hooks_1.useWindowEvent)('scroll', onHide);
+    var ref = (0, hooks_1.useClickOutside)(onHide);
+    return ((0, jsx_runtime_1.jsx)(core_1.Portal, { ref: ref, children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({}, otherProps, { onHide: onHide })) }));
+}
+exports.ContextMenuPortal = ContextMenuPortal;
+//# sourceMappingURL=ContextMenuPortal.js.map

package/dist/cjs/ContextMenuPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuPortal.js","sourceRoot":"","sources":["../../package/ContextMenuPortal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,sCAAuC;AACvC,wCAAiE;AACjE,6CAAmE;AAEnE,SAAgB,iBAAiB,CAAC,EAA2C;IAAzC,IAAA,MAAM,YAAA,EAAK,UAAU,cAAvB,UAAyB,CAAF;IACvD,IAAA,sBAAc,EAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACjC,IAAA,sBAAc,EAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACjC,IAAM,GAAG,GAAG,IAAA,uBAAe,EAAC,MAAM,CAAC,CAAC;IAEpC,OAAO,CACL,uBAAC,aAAM,IAAC,GAAG,EAAE,GAAG,YACd,uBAAC,yBAAW,eAAK,UAAU,IAAE,MAAM,EAAE,MAAM,IAAI,GACxC,CACV,CAAC;AACJ,CAAC;AAVD,8CAUC","sourcesContent":["'use client';\n\nimport { Portal } from '@mantine/core';\nimport { useClickOutside, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\n\nexport function ContextMenuPortal({ onHide, ...otherProps }: ContextMenuProps) {\n  useWindowEvent('resize', onHide);\n  useWindowEvent('scroll', onHide);\n  const ref = useClickOutside(onHide);\n\n  return (\n    <Portal ref={ref}>\n      <ContextMenu {...otherProps} onHide={onHide} />\n    </Portal>\n  );\n}\n"]}

package/dist/cjs/ContextMenuProvider.js

@@ -0,0 +1,58 @@
+'use client';
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextMenu = exports.ContextMenuProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var core_1 = require("@mantine/core");
+var react_1 = require("react");
+var ContextMenuPortal_1 = require("./ContextMenuPortal");
+var MenuContext = (0, react_1.createContext)(function () { return 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
+ * anywhere in the component tree to access a function that shows the context menu.
+ */
+function ContextMenuProvider(_a) {
+    var _b = _a.zIndex, zIndex = _b === void 0 ? 9999 : _b, _c = _a.shadow, shadow = _c === void 0 ? 'sm' : _c, _d = _a.borderRadius, borderRadius = _d === void 0 ? 'xs' : _d, children = _a.children;
+    var _e = (0, react_1.useState)(null), data = _e[0], setData = _e[1];
+    var destroy = function () {
+        setData(null);
+    };
+    var showContextMenu = function (content, options) { return function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setData({
+            x: e.clientX,
+            y: e.clientY,
+            content: content,
+            zIndex: (options === null || options === void 0 ? void 0 : options.zIndex) || zIndex,
+            shadow: (options === null || options === void 0 ? void 0 : options.shadow) || shadow,
+            borderRadius: (options === null || options === void 0 ? void 0 : options.borderRadius) || borderRadius,
+            className: options === null || options === void 0 ? void 0 : options.className,
+            style: options === null || options === void 0 ? void 0 : options.style,
+            classNames: options === null || options === void 0 ? void 0 : options.classNames,
+            styles: options === null || options === void 0 ? void 0 : options.styles,
+        });
+    }; };
+    return ((0, jsx_runtime_1.jsxs)(MenuContext.Provider, { value: showContextMenu, children: [children, (0, jsx_runtime_1.jsx)(core_1.MantineProvider, { children: data && (0, jsx_runtime_1.jsx)(ContextMenuPortal_1.ContextMenuPortal, __assign({ onHide: destroy }, data)) })] }));
+}
+exports.ContextMenuProvider = ContextMenuProvider;
+/**
+ * Hook returning a function that shows a context menu.
+ */
+function useContextMenu() {
+    return (0, react_1.useContext)(MenuContext);
+}
+exports.useContextMenu = useContextMenu;
+//# sourceMappingURL=ContextMenuProvider.js.map

package/dist/cjs/ContextMenuProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuProvider.js","sourceRoot":"","sources":["../../package/ContextMenuProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;AAEb,sCAAgD;AAChD,+BAA4D;AAE5D,yDAAwD;AAGxD,IAAM,WAAW,GAAG,IAAA,qBAAa,EAA0B,cAAM,OAAA,cAAM,OAAA,SAAS,EAAT,CAAS,EAAf,CAAe,CAAC,CAAC;AAElF;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,EAKT;QAJzB,cAAa,EAAb,MAAM,mBAAG,IAAI,KAAA,EACb,cAAa,EAAb,MAAM,mBAAG,IAAI,KAAA,EACb,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,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,MAAM,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,KAAI,MAAM;YACjC,YAAY,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,KAAI,YAAY;YACnD,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,EAfsE,CAetE,CAAC;IAEF,OAAO,CACL,wBAAC,WAAW,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,CACxB,CAAC;AACJ,CAAC;AAnCD,kDAmCC;AAED;;GAEG;AACH,SAAgB,cAAc;IAC5B,OAAO,IAAA,kBAAU,EAAC,WAAW,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 { ContextMenuOptions, ContextMenuProviderProps, ShowContextMenuFunction } from './types';\n\nconst MenuContext = createContext<ShowContextMenuFunction>(() => () => undefined);\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n  zIndex = 9999,\n  shadow = 'sm',\n  borderRadius = 'xs',\n  children,\n}: ContextMenuProviderProps) {\n  const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n  const destroy = () => {\n    setData(null);\n  };\n\n  const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setData({\n      x: e.clientX,\n      y: e.clientY,\n      content,\n      zIndex: options?.zIndex || zIndex,\n      shadow: options?.shadow || shadow,\n      borderRadius: options?.borderRadius || borderRadius,\n      className: options?.className,\n      style: options?.style,\n      classNames: options?.classNames,\n      styles: options?.styles,\n    });\n  };\n\n  return (\n    <MenuContext.Provider value={showContextMenu}>\n      {children}\n      <MantineProvider>{data && <ContextMenuPortal onHide={destroy} {...data} />}</MantineProvider>\n    </MenuContext.Provider>\n  );\n}\n\n/**\n * Hook returning a function that shows a context menu.\n */\nexport function useContextMenu() {\n  return useContext(MenuContext);\n}\n"]}

package/dist/cjs/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ContextMenuDivider"), exports);
+__exportStar(require("./ContextMenuItem"), exports);
+__exportStar(require("./ContextMenuPortal"), exports);
+__exportStar(require("./ContextMenuProvider"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../package/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,oDAAkC;AAClC,sDAAoC;AACpC,wDAAsC;AACtC,0CAAwB;AACxB,0CAAwB","sourcesContent":["export * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './types';\nexport * from './utils';\n"]}

package/dist/cjs/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineShadow, MantineSize, MantineTheme } from '@mantine/core';\nimport type { CSSProperties, MouseEventHandler, ReactNode } from 'react';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n  [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n  /**\n   * zIndex of context menu\n   * @default 9999\n   */\n  zIndex?: number;\n\n  /**\n   * Context menu shadow\n   * @default 'sm'\n   */\n  shadow?: MantineShadow;\n\n  /**\n   * Context menu border radius\n   * @default 'xs'\n   */\n  borderRadius?: MantineSize;\n\n  /**\n   * Context menu container className\n   */\n  className?: string;\n\n  /**\n   * Context menu container style; can be a function that accepts theme and returns a style object\n   */\n  style?: CSSProperties | ((theme: MantineTheme) => CSSProperties);\n\n  /**\n   * Context menu elements classNames; an object with `root`, `item` and `divider` keys and class names as values\n   * @see https://mantine.dev/styles/styles-api/\n   */\n  classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n  /**\n   * Context menu styles; can be an object with `root`, `item` and `divider` keys and `CSSProperties` as values,\n   * or a function that accepts the current theme and returns a similarly structured object\n   */\n  styles?:\n    | Partial<Record<'root' | 'item' | 'divider', CSSProperties>>\n    | ((theme: MantineTheme) => Partial<Record<'root' | 'item' | 'divider', CSSProperties>>);\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuOptions & {\n  children: ReactNode;\n};\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n  /**\n   * Unique key of the context menu item or divider\n   */\n  key: string;\n  /**\n   * Context menu item or divider className\n   */\n  className?: string;\n\n  /**\n   * Context menu item or divider style\n   */\n  style?: CSSProperties | ((theme: MantineTheme) => CSSProperties);\n} & (\n  | ({\n      /**\n       * Optional context menu item icon\n       */\n      icon?: ReactNode;\n\n      /**\n       * Optional context menu item title; if not provided, one will be generated automatically by \"humanizing\" the key\n       * @default humanize(key)\n       */\n      title?: ReactNode;\n\n      /**\n       * Optional context menu item color\n       */\n      color?: MantineColor;\n\n      /**\n       * Boolean indicating whether the context menu item is disabled\n       */\n      disabled?: boolean;\n    } & (\n      | {\n          /**\n           * Optional context menu item `onClick` handler; if not provided, a divider will be rendered instead\n           */\n          onClick: MouseEventHandler<HTMLButtonElement>;\n\n          items?: never;\n        }\n      | {\n          onClick?: never;\n\n          /**\n           * Optional items; if provided, a submenu will be rendered\n           */\n          items: ContextMenuItemOptions[];\n        }\n    ))\n  | {\n      icon?: never;\n      title?: never;\n      color?: never;\n      disabled?: never;\n      onClick?: never;\n      items?: never;\n    }\n);\n\n/**\n * Context menu content - either an array of context menu items or a function that accepts a close callback and returns context menu content\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Context menu hook return value\n */\nexport type ShowContextMenuFunction = (\n  /**\n   * Context menu content - either an array of context menu items\n   * or a function that accepts a close callback and returns context menu content\n   */\n  content: ContextMenuContent,\n\n  /**\n   * Context menu options (overrides provider options)\n   */\n  options?: ContextMenuOptions\n) => MouseEventHandler;\n"]}

package/dist/cjs/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.humanize = void 0;
+/**
+ * Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
+ */
+function humanize(value) {
+    var str = value
+        .replace(/([a-z\d])([A-Z]+)/g, '$1 $2')
+        .replace(/\W|_/g, ' ')
+        .trim()
+        .toLowerCase();
+    return "".concat(str.charAt(0).toUpperCase()).concat(str.slice(1));
+}
+exports.humanize = humanize;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../package/utils.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,SAAgB,QAAQ,CAAC,KAAa;IACpC,IAAM,GAAG,GAAG,KAAK;SACd,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;SACtC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;SACrB,IAAI,EAAE;SACN,WAAW,EAAE,CAAC;IACjB,OAAO,UAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,SAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAE,CAAC;AACzD,CAAC;AAPD,4BAOC","sourcesContent":["/**\n * Utility function that returns a humanized version of a string, e.g. \"camelCase\" -> \"Camel Case\"\n */\nexport function humanize(value: string) {\n  const str = value\n    .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n    .replace(/\\W|_/g, ' ')\n    .trim()\n    .toLowerCase();\n  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n}\n"]}

package/dist/css/styles.css

@@ -0,0 +1,53 @@
+.mantine-contextmenu {
+  position: fixed;
+  border: 1px solid var(--mantine-color-gray-3);
+}
+  [data-mantine-color-scheme='dark'] .mantine-contextmenu {
+  border: 1px solid var(--mantine-color-dark-4);
+}
+  .mantine-contextmenu {
+  overflow: hidden;
+  transition: all 0.15s ease;
+}
+.mantine-contextmenu-divider {
+  height: calc(0.0625rem * var(--mantine-scale));
+  background: var(--mantine-color-gray-1);
+}
+[data-mantine-color-scheme='dark'] .mantine-contextmenu-divider {
+  background: var(--mantine-color-dark-5);
+}
+.mantine-contextmenu-item-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-top: calc(var(--mantine-spacing-sm) / 2);
+  padding-bottom: calc(var(--mantine-spacing-sm) / 2);
+  padding-left: var(--mantine-spacing-sm);
+  padding-right: var(--mantine-spacing-sm);
+  color: var(--mantine-contextmenu-item-button-color);
+  transition: background 0.15s ease;
+}
+.mantine-contextmenu-item-button[disabled] {
+    cursor: not-allowed;
+    color: var(--mantine-color-gray-5);
+  }
+[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button[disabled] {
+    color: var(--mantine-color-dark-3);
+}
+.mantine-contextmenu-item-button:hover:not([disabled]) {
+    background: var(--mantine-contextmenu-item-button-hover-bg-color-light);
+  }
+[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:hover:not([disabled]) {
+    background: var(--mantine-contextmenu-item-button-hover-bg-color-dark);
+}
+.mantine-contextmenu-item-button:active:not([disabled]) {
+    background: var(--mantine-contextmenu-item-button-pressed-bg-color-light);
+  }
+[data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:active:not([disabled]) {
+    background: var(--mantine-contextmenu-item-button-pressed-bg-color-dark);
+}
+.mantine-contextmenu-item-button-title {
+  font-size: var(--mantine-font-size-sm);
+  white-space: nowrap;
+  flex-grow: 1;
+}

package/dist/css/styles.layer.css

@@ -0,0 +1,61 @@
+@layer mantine-contextmenu {
+.mantine-contextmenu {
+  position: fixed;
+  border: 1px solid var(--mantine-color-gray-3);
+}
+  [data-mantine-color-scheme='dark'] .mantine-contextmenu {
+  border: 1px solid var(--mantine-color-dark-4);
+}
+  .mantine-contextmenu {
+  overflow: hidden;
+  transition: all 0.15s ease;
+}
+}
+@layer mantine-contextmenu {
+.mantine-contextmenu-divider {
+  height: calc(0.0625rem * var(--mantine-scale));
+  background: var(--mantine-color-gray-1);
+}
+  [data-mantine-color-scheme='dark'] .mantine-contextmenu-divider {
+  background: var(--mantine-color-dark-5);
+}
+}
+@layer mantine-contextmenu {
+
+.mantine-contextmenu-item-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-top: calc(var(--mantine-spacing-sm) / 2);
+  padding-bottom: calc(var(--mantine-spacing-sm) / 2);
+  padding-left: var(--mantine-spacing-sm);
+  padding-right: var(--mantine-spacing-sm);
+  color: var(--mantine-contextmenu-item-button-color);
+  transition: background 0.15s ease;
+}
+  .mantine-contextmenu-item-button[disabled] {
+    cursor: not-allowed;
+    color: var(--mantine-color-gray-5);
+  }
+    [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button[disabled] {
+    color: var(--mantine-color-dark-3);
+}
+  .mantine-contextmenu-item-button:hover:not([disabled]) {
+    background: var(--mantine-contextmenu-item-button-hover-bg-color-light);
+  }
+    [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:hover:not([disabled]) {
+    background: var(--mantine-contextmenu-item-button-hover-bg-color-dark);
+}
+  .mantine-contextmenu-item-button:active:not([disabled]) {
+    background: var(--mantine-contextmenu-item-button-pressed-bg-color-light);
+  }
+    [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:active:not([disabled]) {
+    background: var(--mantine-contextmenu-item-button-pressed-bg-color-dark);
+}
+
+.mantine-contextmenu-item-button-title {
+  font-size: var(--mantine-font-size-sm);
+  white-space: nowrap;
+  flex-grow: 1;
+}
+}