mantine-contextmenu 6.0.3 → 7.0.0-alpha.2

package/dist/esm/ContextMenu.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Paper, px, useDirection, useMantineTheme } from '@mantine/core';
+import { useResizeObserver } from '@mantine/hooks';
+import clsx from 'clsx';
+import { ContextMenuDivider } from './ContextMenuDivider';
+import { ContextMenuItem } from './ContextMenuItem';
+import { humanize } from './utils';
+export function ContextMenu({ x, y, content, zIndex, shadow, borderRadius, onHide, className, style, classNames, styles, }) {
+    const [paperRef] = useResizeObserver();
+    const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };
+    let windowWidth = 0;
+    let windowHeight = 0;
+    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));
+            })
+            : content(onHide) }));
+}
+//# sourceMappingURL=ContextMenu.js.map

package/dist/esm/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/esm/ContextMenuDivider.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, useMantineTheme } 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 }));
+}
+//# sourceMappingURL=ContextMenuDivider.js.map

package/dist/esm/ContextMenuDivider.js.map

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

package/dist/esm/ContextMenuItem.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, UnstyledButton, parseThemeColor, rgba, useMantineTheme } from '@mantine/core';
+import clsx from 'clsx';
+import { useRef, useState } from 'react';
+import { ContextMenu } from './ContextMenu';
+export function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }) {
+    const ref = useRef(null);
+    const [submenuPosition, setSubmenuPosition] = useState(null);
+    const handleClick = onClick
+        ? (e) => {
+            onHide();
+            onClick(e);
+        }
+        : undefined;
+    const showSubmenu = () => {
+        const { top: y, right: x } = ref.current.getBoundingClientRect();
+        setSubmenuPosition({ x, y });
+    };
+    const hideSubmenu = () => {
+        setSubmenuPosition(null);
+    };
+    const hasItemsAndIsNotDisabled = items && !disabled;
+    const theme = useMantineTheme();
+    const { colors } = theme;
+    const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;
+    if (color === 'red')
+        console.log(parsedColor);
+    return (_jsxs("div", { onMouseOver: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseOut: 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 })] }));
+}
+//# sourceMappingURL=ContextMenuItem.js.map

package/dist/esm/ContextMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuItem.js","sourceRoot":"","sources":["../../package/ContextMenuItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,eAAe,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,QAAQ,EAA0B,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,GACuF;IAC5F,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAkC,IAAI,CAAC,CAAC;IAE9F,MAAM,WAAW,GAAqD,OAAO;QAC3E,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACJ,MAAM,EAAE,CAAC;YACT,OAAQ,CAAC,CAAC,CAAC,CAAC;QACd,CAAC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,OAAQ,CAAC,qBAAqB,EAAE,CAAC;QAClE,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,KAAK,IAAI,CAAC,QAAQ,CAAC;IAEpD,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,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,eACE,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,MAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;oBACL,yCAAyC,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,2BAA2B;oBAClG,wDAAwD,EAAE,WAAW;wBACnE,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;wBACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC;oBAC9B,uDAAuD,EAAE,WAAW;wBAClE,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;wBACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC;oBAC9B,0DAA0D,EAAE,WAAW;wBACrE,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;wBACxB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;oBAC7B,yDAAyD,EAAE,WAAW;wBACpE,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;wBACxB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;oBAC7B,GAAG,CAAC,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;iBACxD,EACD,SAAS,EAAE,IAAI,CAAC,iCAAiC,EAAE,SAAS,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,aAEnB,IAAI,IAAI,CACP,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,CAAC,YACvB,IAAI,GACD,CACP,EACD,cAAK,SAAS,EAAC,uCAAuC,YAAE,KAAK,GAAO,EACnE,KAAK,IAAI,CACR,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAC,IAAI,uBAEtB,CACP,IACc,EAChB,eAAe,IAAI,KAAC,WAAW,IAAC,OAAO,EAAE,KAA2B,EAAE,MAAM,EAAE,MAAM,KAAM,eAAe,GAAI,IAC1G,CACP,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { Box, UnstyledButton, parseThemeColor, rgba, useMantineTheme } from '@mantine/core';\nimport clsx from 'clsx';\nimport { useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n  className,\n  style,\n  icon,\n  title,\n  color,\n  disabled,\n  onClick,\n  onHide,\n  items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n    ? (e) => {\n        onHide();\n        onClick!(e);\n      }\n    : undefined;\n\n  const showSubmenu = () => {\n    const { top: y, right: x } = ref.current!.getBoundingClientRect();\n    setSubmenuPosition({ x, y });\n  };\n\n  const hideSubmenu = () => {\n    setSubmenuPosition(null);\n  };\n\n  const hasItemsAndIsNotDisabled = items && !disabled;\n\n  const theme = useMantineTheme();\n  const { colors } = theme;\n  const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n  if (color === 'red') console.log(parsedColor);\n\n  return (\n    <div\n      onMouseOver={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n      onMouseOut={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n    >\n      <UnstyledButton\n        ref={ref}\n        style={{\n          '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n          '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n            ? rgba(parsedColor, 0.08)\n            : rgba(colors.gray[4], 0.25),\n          '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n            ? rgba(parsedColor, 0.15)\n            : rgba(colors.dark[3], 0.25),\n          '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n            ? rgba(parsedColor, 0.2)\n            : rgba(colors.gray[4], 0.5),\n          '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n            ? rgba(parsedColor, 0.3)\n            : rgba(colors.dark[3], 0.5),\n          ...(typeof style === 'function' ? style(theme) : style),\n        }}\n        className={clsx('mantine-contextmenu-item-button', className)}\n        disabled={disabled}\n        onClick={handleClick}\n      >\n        {icon && (\n          <Box fz={0} mr=\"xs\" mt={-2}>\n            {icon}\n          </Box>\n        )}\n        <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n        {items && (\n          <Box fz={10} mt={-2} ml=\"xs\">\n            ▶\n          </Box>\n        )}\n      </UnstyledButton>\n      {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n    </div>\n  );\n}\n"]}

package/dist/esm/ContextMenuPortal.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Portal } from '@mantine/core';
+import { useClickOutside, useWindowEvent } from '@mantine/hooks';
+import { ContextMenu } from './ContextMenu';
+export function ContextMenuPortal({ onHide, ...otherProps }) {
+    useWindowEvent('resize', onHide);
+    useWindowEvent('scroll', onHide);
+    const ref = useClickOutside(onHide);
+    return (_jsx(Portal, { ref: ref, children: _jsx(ContextMenu, { ...otherProps, onHide: onHide }) }));
+}
+//# sourceMappingURL=ContextMenuPortal.js.map

package/dist/esm/ContextMenuPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuPortal.js","sourceRoot":"","sources":["../../package/ContextMenuPortal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AAEnE,MAAM,UAAU,iBAAiB,CAAC,EAAE,MAAM,EAAE,GAAG,UAAU,EAAoB;IAC3E,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACjC,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACjC,MAAM,GAAG,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAEpC,OAAO,CACL,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,YACd,KAAC,WAAW,OAAK,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,GACxC,CACV,CAAC;AACJ,CAAC","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/esm/ContextMenuProvider.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MantineProvider } from '@mantine/core';
+import { createContext, useContext, useState } from 'react';
+import { ContextMenuPortal } from './ContextMenuPortal';
+const MenuContext = createContext(() => () => 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.
+ */
+export function ContextMenuProvider({ zIndex = 9999, shadow = 'sm', borderRadius = 'xs', children, }) {
+    const [data, setData] = useState(null);
+    const destroy = () => {
+        setData(null);
+    };
+    const showContextMenu = (content, options) => (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setData({
+            x: e.clientX,
+            y: e.clientY,
+            content,
+            zIndex: options?.zIndex || zIndex,
+            shadow: options?.shadow || shadow,
+            borderRadius: options?.borderRadius || borderRadius,
+            className: options?.className,
+            style: options?.style,
+            classNames: options?.classNames,
+            styles: options?.styles,
+        });
+    };
+    return (_jsxs(MenuContext.Provider, { value: showContextMenu, children: [children, _jsx(MantineProvider, { children: data && _jsx(ContextMenuPortal, { onHide: destroy, ...data }) })] }));
+}
+/**
+ * Hook returning a function that shows a context menu.
+ */
+export function useContextMenu() {
+    return useContext(MenuContext);
+}
+//# sourceMappingURL=ContextMenuProvider.js.map

package/dist/esm/ContextMenuProvider.js.map

@@ -0,0 +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;AAGxD,MAAM,WAAW,GAAG,aAAa,CAA0B,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAElF;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,MAAM,GAAG,IAAI,EACb,MAAM,GAAG,IAAI,EACb,YAAY,GAAG,IAAI,EACnB,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,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,MAAM;YACjC,YAAY,EAAE,OAAO,EAAE,YAAY,IAAI,YAAY;YACnD,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,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,CACxB,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 { 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/esm/index.js

@@ -0,0 +1,7 @@
+export * from './ContextMenuDivider';
+export * from './ContextMenuItem';
+export * from './ContextMenuPortal';
+export * from './ContextMenuProvider';
+export * from './types';
+export * from './utils';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../package/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC","sourcesContent":["export * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './types';\nexport * from './utils';\n"]}

package/dist/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/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/esm/utils.js

@@ -0,0 +1,12 @@
+/**
+ * Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
+ */
+export function humanize(value) {
+    const str = value
+        .replace(/([a-z\d])([A-Z]+)/g, '$1 $2')
+        .replace(/\W|_/g, ' ')
+        .trim()
+        .toLowerCase();
+    return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
+}
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

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

package/dist/{ContextMenu.d.ts → types/ContextMenu.d.ts}

@@ -7,5 +7,4 @@ export type ContextMenuInstanceOptions = {
 export type ContextMenuProps = ContextMenuOptions & ContextMenuInstanceOptions & {
     onHide: () => void;
 };
-export declare function ContextMenu({ x, y, content, zIndex, shadow, borderRadius, onHide, className, style, sx, classNames, styles, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ContextMenu.d.ts.map
+export declare function ContextMenu({ x, y, content, zIndex, shadow, borderRadius, onHide, className, style, classNames, styles, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ContextMenuDivider.d.ts

@@ -0,0 +1,3 @@
+import type { ContextMenuItemOptions } from './types';
+export type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;
+export declare function ContextMenuDivider({ className, style }: ContextMenuDividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/{ContextMenuItem.d.ts → types/ContextMenuItem.d.ts}

@@ -1,6 +1,4 @@
-import { ContextMenuItemOptions } from './types';
-import { WithRequiredProperty } from './utils';
+import type { ContextMenuItemOptions, WithRequiredProperty } from './types';
 export declare function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {
     onHide: () => void;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ContextMenuItem.d.ts.map

package/dist/{ContextMenuPortal.d.ts → types/ContextMenuPortal.d.ts}

@@ -1,3 +1,2 @@
 import { type ContextMenuProps } from './ContextMenu';
 export declare function ContextMenuPortal({ onHide, ...otherProps }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ContextMenuPortal.d.ts.map

package/dist/{ContextMenuProvider.d.ts → types/ContextMenuProvider.d.ts}

@@ -9,4 +9,3 @@ export declare function ContextMenuProvider({ zIndex, shadow, borderRadius, chil
  * Hook returning a function that shows a context menu.
  */
 export declare function useContextMenu(): ShowContextMenuFunction;
-//# sourceMappingURL=ContextMenuProvider.d.ts.map

package/dist/{index.d.ts → types/index.d.ts}

@@ -2,5 +2,5 @@ export * from './ContextMenuDivider';
 export * from './ContextMenuItem';
 export * from './ContextMenuPortal';
 export * from './ContextMenuProvider';
-export { humanize } from './utils';
-//# sourceMappingURL=index.d.ts.map
+export * from './types';
+export * from './utils';

package/dist/{types.d.ts → types/types.d.ts}

@@ -1,5 +1,18 @@
-import type { ClassNames, MantineColor, MantineNumberSize, MantineShadow, Styles, Sx } from '@mantine/core';
+import type { MantineColor, MantineShadow, MantineSize, MantineTheme } from '@mantine/core';
 import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+/**
+ * Utility type that makes a property required
+ */
+export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
+    [Property in Key]-?: Type[Property];
+};
+/**
+ * Utility type that makes a property optional
+ */
+export type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Context menu options
+ */
 export type ContextMenuOptions = {
     /**
      * zIndex of context menu
@@ -15,34 +28,35 @@ export type ContextMenuOptions = {
      * Context menu border radius
      * @default 'xs'
      */
-    borderRadius?: MantineNumberSize;
+    borderRadius?: MantineSize;
     /**
      * Context menu container className
      */
     className?: string;
     /**
-     * Context menu container style
+     * Context menu container style; can be a function that accepts theme and returns a style object
      */
-    style?: CSSProperties;
-    /**
-     * Context menu container sx
-     * @see https://mantine.dev/styles/sx/
-     */
-    sx?: Sx | (Sx | undefined)[];
+    style?: CSSProperties | ((theme: MantineTheme) => CSSProperties);
     /**
      * Context menu elements classNames; an object with `root`, `item` and `divider` keys and class names as values
      * @see https://mantine.dev/styles/styles-api/
      */
-    classNames?: ClassNames<'root' | 'item' | 'divider'>;
+    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 styles object
+     * or a function that accepts the current theme and returns a similarly structured object
      */
-    styles?: Styles<'root' | 'item' | 'divider', CSSProperties>;
+    styles?: Partial<Record<'root' | 'item' | 'divider', CSSProperties>> | ((theme: MantineTheme) => Partial<Record<'root' | 'item' | 'divider', CSSProperties>>);
 };
+/**
+ * Context menu provider props
+ */
 export type ContextMenuProviderProps = ContextMenuOptions & {
     children: ReactNode;
 };
+/**
+ * Context menu item options
+ */
 export type ContextMenuItemOptions = {
     /**
      * Unique key of the context menu item or divider
@@ -52,15 +66,10 @@ export type ContextMenuItemOptions = {
      * Context menu item or divider className
      */
     className?: string;
-    /**
-     * Context menu item or divider sx
-     * @see https://mantine.dev/styles/sx/
-     */
-    sx?: Sx | (Sx | undefined)[];
     /**
      * Context menu item or divider style
      */
-    style?: CSSProperties;
+    style?: CSSProperties | ((theme: MantineTheme) => CSSProperties);
 } & (({
     /**
      * Optional context menu item icon
@@ -99,7 +108,13 @@ export type ContextMenuItemOptions = {
     onClick?: never;
     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
+ */
 export type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);
+/**
+ * Context menu hook return value
+ */
 export type ShowContextMenuFunction = (
 /**
  * Context menu content - either an array of context menu items
@@ -110,4 +125,3 @@ content: ContextMenuContent,
  * Context menu options (overrides provider options)
  */
 options?: ContextMenuOptions) => MouseEventHandler;
-//# sourceMappingURL=types.d.ts.map

package/dist/{utils.d.ts → types/utils.d.ts}

@@ -1,8 +1,4 @@
-export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
-    [Property in Key]-?: Type[Property];
-};
 /**
  * Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
  */
 export declare function humanize(value: string): string;
-//# sourceMappingURL=utils.d.ts.map

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "mantine-contextmenu",
-  "version": "6.0.3",
+  "version": "7.0.0-alpha.2",
   "description": "Enhance your Mantine UI applications usability with customizable context menus",
   "keywords": [
     "ui",
     "mantine",
-    "mantine-v6",
     "context",
     "menu",
     "context-menu",
@@ -38,32 +37,70 @@
     "type": "github",
     "url": "https://github.com/sponsors/icflorescu"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./styles.css": "./dist/css/styles.css",
+    "./styles.layer.css": "./dist/css/styles.layer.css"
+  },
   "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
+    "./dist",
+    "./README.md",
+    "./LICENSE"
   ],
   "scripts": {
-    "dev": "rm -rf dist",
-    "build": "rm -rf dist && NODE_NO_WARNINGS=1 node build.mjs && tsc --emitDeclarationOnly",
-    "postbuild": "cp -f ../LICENSE LICENSE && cp -f ../README.md README.md",
-    "lint": "eslint . --ext=.ts,.tsx && tsc --noEmit"
+    "dev": "next dev",
+    "build:package": "rm -rf dist; tsc -p package/tsconfig.esm.json; tsc -p package/tsconfig.cjs.json; postcss package/styles*.css --dir dist/css",
+    "build:docs": "next build",
+    "build": "yarn build:package && yarn build:docs",
+    "lint": "eslint .",
+    "format": "prettier --write ."
   },
   "devDependencies": {
-    "@mantine/core": "^6.0.21",
-    "@mantine/hooks": "^6.0.21",
+    "@ducanh2912/next-pwa": "^9.7.2",
+    "@mantine/code-highlight": "^7.1.3",
+    "@mantine/core": "^7.1.3",
+    "@mantine/hooks": "^7.1.3",
+    "@mantine/notifications": "^7.1.3",
+    "@tabler/icons-react": "^2.39.0",
+    "@types/lodash": "^4.14.199",
+    "@types/node": "^20.8.6",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
-    "esbuild": "^0.19.4",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "clsx": "^2.0.0",
+    "eslint": "^8.51.0",
+    "eslint-config-next": "^13.5.5",
+    "eslint-config-prettier": "^9.0.0",
+    "lodash": "^4.17.21",
+    "next": "13.5.5",
+    "postcss": "^8.4.31",
+    "postcss-cli": "^10.1.0",
+    "postcss-import": "^15.1.0",
+    "postcss-preset-mantine": "^1.9.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
-    "typescript": "^5.2.2"
+    "react-dom": "^18.2.0",
+    "sharp": "^0.32.6",
+    "swr": "^2.2.4",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0"
   },
   "peerDependencies": {
-    "@mantine/core": ">=6 <=6.0.17 || >=6.0.19 < 7",
-    "@mantine/hooks": ">=6 <=6.0.17 || >=6.0.19 < 7",
-    "react": ">=18"
+    "@mantine/core": ">=7",
+    "@mantine/hooks": ">=7"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-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/dist/ContextMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../ContextMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AActE,MAAM,MAAM,0BAA0B,GAAG;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAC/C,0BAA0B,GAAG;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAC1B,CAAC,EACD,CAAC,EACD,OAAO,EACP,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EACF,UAAU,EACV,MAAM,GACP,EAAE,gBAAgB,2CAkElB"}

package/dist/ContextMenuDivider.d.ts

@@ -1,9 +0,0 @@
-import { type Sx } from '@mantine/core';
-import type { CSSProperties } from 'react';
-export type ContextMenuDividerProps = {
-    className: string;
-    sx: Sx | (Sx | undefined)[] | undefined;
-    style: CSSProperties;
-};
-export declare function ContextMenuDivider({ className, sx, style }: ContextMenuDividerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ContextMenuDivider.d.ts.map

package/dist/ContextMenuDivider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContextMenuDivider.d.ts","sourceRoot":"","sources":["../ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAS3C,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC;IACxC,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,uBAAuB,2CAGnF"}

package/dist/ContextMenuItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContextMenuItem.d.ts","sourceRoot":"","sources":["../ContextMenuItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsB,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAuC/C,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,GACN,EAAE,oBAAoB,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IAAE,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,2CAoD7F"}

package/dist/ContextMenuPortal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContextMenuPortal.d.ts","sourceRoot":"","sources":["../ContextMenuPortal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,GAAG,UAAU,EAAE,EAAE,gBAAgB,2CAU5E"}

package/dist/ContextMenuProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContextMenuProvider.d.ts","sourceRoot":"","sources":["../ContextMenuProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAsB,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAIrG;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAa,EACb,MAAa,EACb,YAAmB,EACnB,QAAQ,GACT,EAAE,wBAAwB,2CA+B1B;AAED;;GAEG;AACH,wBAAgB,cAAc,4BAE7B"}

package/dist/index.cjs

@@ -1,2 +0,0 @@
-"use strict";var ne=Object.create;var k=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var se=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var ae=(e,t)=>{for(var o in t)k(e,o,{get:t[o],enumerable:!0})},G=(e,t,o,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of se(t))!ue.call(e,n)&&n!==o&&k(e,n,{get:()=>t[n],enumerable:!(u=re(t,n))||u.enumerable});return e};var de=(e,t,o)=>(o=e!=null?ne(ie(e)):{},G(t||!e||!e.__esModule?k(o,"default",{value:e,enumerable:!0}):o,e)),pe=e=>G(k({},"__esModule",{value:!0}),e);var Ce={};ae(Ce,{ContextMenuDivider:()=>W,ContextMenuItem:()=>L,ContextMenuPortal:()=>$,ContextMenuProvider:()=>me,humanize:()=>R,useContextMenu:()=>fe});module.exports=pe(Ce);var C=de(require("react"),1);var O=require("@mantine/core"),J=require("react/jsx-runtime"),le=(0,O.createStyles)(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function W({className:e,sx:t,style:o}){let{cx:u,classes:n}=le();return(0,J.jsx)(O.Box,{className:u(n.root,e),sx:t,style:o})}var i=require("@mantine/core"),z=require("react");var a=require("@mantine/core"),Z=require("@mantine/hooks"),T=require("react");function R(e){let t=e.replace(/([a-z\d])([A-Z]+)/g,"$1 $2").replace(/\W|_/g," ").trim().toLowerCase();return`${t.charAt(0).toUpperCase()}${t.slice(1)}`}var I=require("react/jsx-runtime"),X={},ce=(0,a.createStyles)(e=>({root:{position:"fixed",border:`1px solid ${e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3]}`,overflow:"hidden",transition:"all .15s ease"}}));function B({x:e,y:t,content:o,zIndex:u,shadow:n,borderRadius:p,onHide:l,className:y,style:c,sx:r,classNames:s,styles:M}){let[w]=(0,Z.useResizeObserver)(),{width:S,height:b}=w.current?.getBoundingClientRect()||{width:0,height:0},x=0,P=0;typeof window<"u"&&({innerWidth:x,innerHeight:P}=window);let[,h]=(0,T.useState)(!1);(0,T.useEffect)(()=>{h(!0)},[]);let{cx:m,classes:D,theme:q}=ce(),{dir:j,spacing:ee}=q,H=typeof M=="function"?M(q,X,X):M,f=(0,a.px)(ee.md);return(0,I.jsx)(a.Paper,{ref:w,shadow:n,radius:p,className:m(D.root,y,s?.root),style:{...H?.root,...c},sx:[{zIndex:u,top:t+b+f>P?P-b-f:t,left:j==="ltr"?e+S+f>x?x-S-f:e:x-f-(e-S-f<0?S+f:e)},...(0,a.packSx)(r)],children:Array.isArray(o)?o.map(({key:N,className:F,sx:U,style:K,onClick:Y,items:_,title:te,...oe})=>Y||_?(0,I.jsx)(L,{className:m(s?.item,F),sx:U,style:{...H?.item,...K},title:te??R(N),onClick:Y,onHide:l,items:_,...oe},N):(0,I.jsx)(W,{className:m(s?.divider,F),sx:U,style:{...H?.divider,...K}},N)):o(l)})}var d=require("react/jsx-runtime"),xe=(0,i.createStyles)((e,{color:t})=>{let o=(0,i.px)(e.spacing.sm)/2;return{button:{width:"100%",display:"flex",alignItems:"center",paddingTop:o,paddingBottom:o,paddingLeft:e.spacing.sm,paddingRight:e.spacing.sm,color:t&&e.colors[t][6],transition:"background .15s ease","&[disabled]":{cursor:"not-allowed",color:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[5]},"&:hover:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.15:.08:.25)},"&:active:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.3:.2:.5)}},title:{whiteSpace:"nowrap",flexGrow:1}}});function L({className:e,style:t,icon:o,title:u,color:n,disabled:p,onClick:l,onHide:y,items:c}){let r=(0,z.useRef)(null),[s,M]=(0,z.useState)(null),w=l?m=>{y(),l(m)}:void 0,S=()=>{let{top:m,right:D}=r.current.getBoundingClientRect();M({x:D,y:m})},b=()=>{M(null)},x=c&&!p,{cx:P,classes:h}=xe({color:n});return(0,d.jsxs)("div",{onMouseOver:x?S:void 0,onMouseOut:x?b:void 0,children:[(0,d.jsxs)(i.UnstyledButton,{ref:r,className:P(h.button,e),style:t,disabled:p,onClick:w,children:[o&&(0,d.jsx)(i.Box,{fz:0,mr:"xs",children:o}),(0,d.jsx)(i.Text,{className:h.title,size:"sm",children:u}),c&&(0,d.jsx)(i.Box,{fz:10,mt:-2,ml:"xs",children:"\u25B6"})]}),s&&(0,d.jsx)(B,{content:c,onHide:y,...s})]})}var Q=require("@mantine/core"),v=require("@mantine/hooks");var A=require("react/jsx-runtime");function $({onHide:e,...t}){(0,v.useWindowEvent)("resize",e),(0,v.useWindowEvent)("scroll",e);let o=(0,v.useClickOutside)(e);return(0,A.jsx)(Q.Portal,{innerRef:o,children:(0,A.jsx)(B,{...t,onHide:e})})}var g=require("react");var E=require("react/jsx-runtime"),V=(0,g.createContext)(()=>()=>{});function me({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:u}){let[n,p]=(0,g.useState)(null),l=()=>{p(null)},y=(c,r)=>s=>{s.preventDefault(),s.stopPropagation(),p({x:s.clientX,y:s.clientY,content:c,zIndex:r?.zIndex||e,shadow:r?.shadow||t,borderRadius:r?.borderRadius||o,className:r?.className,style:r?.style,sx:r?.sx,classNames:r?.classNames,styles:r?.styles})};return(0,E.jsxs)(V.Provider,{value:y,children:[u,n&&(0,E.jsx)($,{onHide:l,...n})]})}function fe(){return(0,g.useContext)(V)}
-//# sourceMappingURL=index.cjs.map