mantine-contextmenu 7.1.8 → 7.1.10

package/README.md

@@ -66,10 +66,12 @@ function App() {
 }
 ```
 
-Use the `showContextMenu` function geenrated by the `useContextMenu` in your code:
+Use the `showContextMenu` function generated by the `useContextMenu` in your code:
 
 ```tsx
 'use client';
+// 👆 Since 'useContextMenu' is a hook, don't forget to add the 'use client' directive
+//    at the top of your file if you're using it in a RSC context
 
 import { IconCopy, IconDownload } from '@tabler/icons-react';
 import { useContextMenu } from 'mantine-contextmenu';

package/dist/index.d.ts

@@ -0,0 +1,217 @@
+import * as react from 'react';
+import { MantineStyleProp, StylesRecord, MantineShadow, MantineRadius, MantineColor } from '@mantine/core';
+
+/**
+ * Utility type that makes a property required
+ */
+type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
+    [Property in Key]-?: Type[Property];
+};
+/**
+ * Utility type that makes a property optional
+ */
+type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Context menu options
+ */
+type ContextMenuOptions = {
+    /**
+     * The z-index of context menu.
+     * @default 9999
+     */
+    zIndex?: number;
+    /**
+     * Context menu container class name.
+     */
+    className?: string;
+    /**
+     * Context menu container style.
+     */
+    style?: MantineStyleProp;
+    /**
+     * Context menu elements class names.
+     */
+    classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;
+    /**
+     * Context menu styles.
+     * Can be an object with `root`, `item` and `divider` keys and style objects as values,
+     * or a function that accepts the current theme and returns a similarly structured object.
+     */
+    styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;
+};
+/**
+ * Generic context menu settings
+ */
+type ContextMenuSettings = {
+    /**
+     * Context menu shadow.
+     * @default 'sm'
+     */
+    shadow?: MantineShadow;
+    /**
+     * Context menu border radius.
+     * @default 'xs'
+     */
+    borderRadius?: MantineRadius;
+    /**
+     * Delay in ms to use when showing and hiding submenus.
+     * @default 500
+     */
+    submenuDelay?: number;
+};
+/**
+ * Context menu provider props
+ */
+type ContextMenuProviderProps = ContextMenuSettings & ContextMenuOptions & {
+    children: React.ReactNode;
+};
+/**
+ * Context menu item options
+ */
+type ContextMenuItemOptions = {
+    /**
+     * Unique key of the context menu item or divider.
+     */
+    key: string;
+    /**
+     * Context menu item or divider className.
+     */
+    className?: string;
+    /**
+     * Context menu item or divider style.
+     */
+    style?: MantineStyleProp;
+    /**
+     * Boolean indicating whether the context menu item is hidden.
+     */
+    hidden?: boolean;
+} & (({
+    /**
+     * Optional context menu item icon.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional context menu item title.
+     * If not provided, one will be generated automatically by "humanizing" the key.
+     * @default humanize(key)
+     */
+    title?: React.ReactNode;
+    /**
+     * Optional context menu item color.
+     */
+    color?: MantineColor;
+    /**
+     * Boolean indicating whether the context menu item is disabled.
+     */
+    disabled?: boolean;
+} & ({
+    /**
+     * Optional context menu item `onClick` handler.
+     * If not provided, a divider will be rendered instead.
+     */
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    items?: never;
+} | {
+    onClick?: never;
+    /**
+     * Optional items.
+     * If provided, a submenu will be rendered.
+     */
+    items: ContextMenuItemOptions[];
+})) | {
+    icon?: never;
+    title?: never;
+    color?: never;
+    disabled?: never;
+    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.
+ */
+type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);
+/**
+ * Show context menu function
+ */
+type ShowContextMenuFunction = (
+/**
+ * Context menu content.
+ * Either an array of context menu items or a function that accepts a close callback and returns context menu content.
+ */
+content: ContextMenuContent, 
+/**
+ * Context menu options (overrides provider props).
+ */
+options?: ContextMenuOptions) => React.MouseEventHandler;
+/**
+ * Hide context menu function
+ */
+type HideContextMenuFunction = () => void;
+
+type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;
+declare function ContextMenuDivider({ className, style }: ContextMenuDividerProps): react.JSX.Element;
+
+declare function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {
+    onHide: () => void;
+}): react.JSX.Element;
+
+type ContextMenuInstanceOptions = {
+    x: number;
+    y: number;
+    content: ContextMenuContent;
+};
+type ContextMenuProps = ContextMenuOptions & ContextMenuInstanceOptions & {
+    onHide: () => void;
+};
+
+type ContextMenuPortalProps = ContextMenuProps & {
+    zIndex?: number;
+};
+declare function ContextMenuPortal({ onHide, zIndex, ...otherProps }: ContextMenuPortalProps): react.JSX.Element;
+
+declare const ContextMenuSettingsCtx: react.Context<WithRequiredProperty<ContextMenuSettings, "shadow" | "borderRadius" | "submenuDelay">>;
+declare const ContextMenuCtx: react.Context<{
+    /**
+     * Function that shows the context menu.
+     */
+    showContextMenu: ShowContextMenuFunction;
+    /**
+     * Function that hides the context menu.
+     */
+    hideContextMenu: HideContextMenuFunction;
+    /**
+     * Boolean indicating whether the context menu is currently visible.
+     */
+    isContextMenuVisible: boolean;
+}>;
+/**
+ * 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.
+ */
+declare function ContextMenuProvider({ zIndex, shadow, borderRadius, submenuDelay, children, }: ContextMenuProviderProps): react.JSX.Element;
+/**
+ * Hook returning functions that show and hide the context menu.
+ */
+declare function useContextMenu(): {
+    /**
+     * Function that shows the context menu.
+     */
+    showContextMenu: ShowContextMenuFunction;
+    /**
+     * Function that hides the context menu.
+     */
+    hideContextMenu: HideContextMenuFunction;
+    /**
+     * Boolean indicating whether the context menu is currently visible.
+     */
+    isContextMenuVisible: boolean;
+};
+
+/**
+ * Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
+ */
+declare function humanize(value: string): string;
+
+export { ContextMenuContent, ContextMenuCtx, ContextMenuDivider, ContextMenuDividerProps, ContextMenuItem, ContextMenuItemOptions, ContextMenuOptions, ContextMenuPortal, ContextMenuPortalProps, ContextMenuProvider, ContextMenuProviderProps, ContextMenuSettings, ContextMenuSettingsCtx, HideContextMenuFunction, ShowContextMenuFunction, WithOptionalProperty, WithRequiredProperty, humanize, useContextMenu };

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";"use client";var ne=Object.create;var z=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var se=(e,t)=>{for(var n in t)z(e,n,{get:t[n],enumerable:!0})},_=(e,t,n,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of re(t))!ue.call(e,r)&&r!==n&&z(e,r,{get:()=>t[r],enumerable:!(u=oe(t,r))||u.enumerable});return e};var A=(e,t,n)=>(n=e!=null?ne(ie(e)):{},_(t||!e||!e.__esModule?z(n,"default",{value:e,enumerable:!0}):n,e)),me=e=>_(z({},"__esModule",{value:!0}),e);var ae={};se(ae,{ContextMenuCtx:()=>q,ContextMenuDivider:()=>F,ContextMenuItem:()=>$,ContextMenuPortal:()=>L,ContextMenuProvider:()=>xe,ContextMenuSettingsCtx:()=>P,humanize:()=>U,useContextMenu:()=>pe});module.exports=me(ae);var G=require("@mantine/core"),X=A(require("clsx")),Y=require("react/jsx-runtime");function F({className:e,style:t}){return(0,Y.jsx)(G.Box,{className:(0,X.default)("mantine-contextmenu-divider",e),style:t})}var o=require("@mantine/core"),V=require("@mantine/hooks"),ee=A(require("clsx")),w=require("react");var g=require("@mantine/core"),Q=require("@mantine/hooks"),k=A(require("clsx")),j=require("react");var h=require("react");var K=require("@mantine/core"),I=require("@mantine/hooks");var J=require("react/jsx-runtime");function Z({zIndex:e,children:t,onHide:n}){let u=r=>{r.preventDefault(),n()};return(0,J.jsx)("div",{className:"mantine-contextmenu-overlay",style:{zIndex:e},onClick:u,onContextMenu:u,children:t})}var E=require("react/jsx-runtime");function L({onHide:e,zIndex:t,...n}){return(0,I.useWindowEvent)("resize",e),(0,I.useWindowEvent)("scroll",e),(0,I.useHotkeys)([["Escape",e]]),(0,E.jsx)(K.Portal,{children:(0,E.jsx)(Z,{zIndex:t,onHide:e,children:(0,E.jsx)(N,{...n,onHide:e})})})}var D=require("react/jsx-runtime"),B={shadow:"sm",borderRadius:"xs",submenuDelay:500},P=(0,h.createContext)(B),q=(0,h.createContext)({showContextMenu:()=>()=>{},hideContextMenu:()=>{},isContextMenuVisible:!1});function xe({zIndex:e=9999,shadow:t=B.shadow,borderRadius:n=B.borderRadius,submenuDelay:u=B.submenuDelay,children:r}){let[C,M]=(0,h.useState)(null),p=()=>{M(null)},a=(v,m)=>x=>{x.preventDefault(),x.stopPropagation(),M({x:x.clientX,y:x.clientY,content:v,zIndex:m?.zIndex||e,className:m?.className,style:m?.style,classNames:m?.classNames,styles:m?.styles})};return(0,D.jsx)(P.Provider,{value:{shadow:t,borderRadius:n,submenuDelay:u},children:(0,D.jsxs)(q.Provider,{value:{showContextMenu:a,hideContextMenu:p,isContextMenuVisible:!!C},children:[r,C&&(0,D.jsx)(L,{onHide:p,...C})]})})}function pe(){return(0,h.useContext)(q)}function U(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 W=require("react/jsx-runtime");function N({x:e,y:t,content:n,zIndex:u,onHide:r,className:C,style:M,classNames:p,styles:a}){let{shadow:v,borderRadius:m}=(0,j.useContext)(P),[x]=(0,Q.useResizeObserver)(),{width:f,height:H}=x.current?.getBoundingClientRect()||{width:0,height:0},b=0,S=0;typeof window<"u"&&({innerWidth:b,innerHeight:S}=window);let{dir:T}=(0,g.useDirection)();return(0,W.jsx)(g.Paper,{ref:x,shadow:v,radius:m,className:(0,k.default)("mantine-contextmenu",C,p?.root),style:[({spacing:{md:y}})=>{let s=(0,g.px)(y);return{zIndex:u,top:t+H+s>S?S-H-s:t,left:T==="ltr"?e+f+s>b?b-f-s:e:b-s-(e-f-s<0?f+s:e)}},M,a?.root],children:Array.isArray(n)?n.map(({key:y,hidden:s,className:R,style:O,onClick:d,items:l,title:i,...te})=>s?null:d||l?(0,W.jsx)($,{className:(0,k.default)(p?.item,R),style:[a?.item,O],title:i??U(y),onClick:d,onHide:r,items:l,...te},y):(0,W.jsx)(F,{className:(0,k.default)(p?.divider,R),style:[a?.divider,O]},y)):n(r)})}var c=require("react/jsx-runtime");function $({className:e,style:t,icon:n,title:u,color:r,disabled:C,onClick:M,onHide:p,items:a}){let v=(0,w.useRef)(null),{submenuDelay:m}=(0,w.useContext)(P),[x,f]=(0,w.useState)(null),H=M?d=>{p(),M(d)}:void 0,{start:b,clear:S}=(0,V.useTimeout)(()=>{let{top:d,right:l}=v.current.getBoundingClientRect();f({x:l,y:d})},m),{start:T,clear:y}=(0,V.useTimeout)(()=>{f(null)},m),s=()=>{y(),b()},R=()=>{S(),T()},O=a&&!C;return(0,c.jsxs)("div",{onMouseEnter:O?s:void 0,onMouseLeave:O?R:void 0,children:[(0,c.jsxs)(o.UnstyledButton,{ref:v,style:[d=>{let{colors:l}=d,i=r?(0,o.parseThemeColor)({color:r,theme:d}).value:void 0;return{"--mantine-contextmenu-item-button-color":i||"var(--mantine-color-text)","--mantine-contextmenu-item-button-hover-bg-color-light":i?(0,o.rgba)(i,.08):(0,o.rgba)(l.gray[4],.25),"--mantine-contextmenu-item-button-hover-bg-color-dark":i?(0,o.rgba)(i,.15):(0,o.rgba)(l.dark[3],.25),"--mantine-contextmenu-item-button-pressed-bg-color-light":i?(0,o.rgba)(i,.2):(0,o.rgba)(l.gray[4],.5),"--mantine-contextmenu-item-button-pressed-bg-color-dark":i?(0,o.rgba)(i,.3):(0,o.rgba)(l.dark[3],.5)}},t],className:(0,ee.default)("mantine-contextmenu-item-button",e),disabled:C,onClick:H,children:[n&&(0,c.jsx)(o.Box,{fz:0,mr:"xs",mt:-2,children:n}),(0,c.jsx)("div",{className:"mantine-contextmenu-item-button-title",children:u}),a&&(0,c.jsx)(o.Box,{fz:10,mt:-2,ml:"xs",children:"\u25B6"})]}),x&&(0,c.jsx)(N,{content:a,onHide:p,...x})]})}0&&(module.exports={ContextMenuCtx,ContextMenuDivider,ContextMenuItem,ContextMenuPortal,ContextMenuProvider,ContextMenuSettingsCtx,humanize,useContextMenu});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../package/index.ts","../package/ContextMenuDivider.tsx","../package/ContextMenuItem.tsx","../package/ContextMenu.tsx","../package/ContextMenuProvider.tsx","../package/ContextMenuPortal.tsx","../package/ContextMenuOverlay.tsx","../package/utils.ts"],"sourcesContent":["'use client';\n\nexport * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuPortal';\nexport * from './ContextMenuProvider';\nexport * from './types';\nexport * from './utils';\n","import { Box } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { ContextMenuItemOptions } from './types';\n\nexport type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;\n\nexport function ContextMenuDivider({ className, style }: ContextMenuDividerProps) {\n  return <Box className={clsx('mantine-contextmenu-divider', className)} style={style} />;\n}\n","import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { useTimeout } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext, useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n  className,\n  style,\n  icon,\n  title,\n  color,\n  disabled,\n  onClick,\n  onHide,\n  items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const { submenuDelay } = useContext(ContextMenuSettingsCtx);\n\n  const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n    ? (e) => {\n        onHide();\n        onClick!(e);\n      }\n    : undefined;\n\n  const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {\n    const { top: y, right: x } = ref.current!.getBoundingClientRect();\n    setSubmenuPosition({ x, y });\n  }, submenuDelay);\n\n  const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {\n    setSubmenuPosition(null);\n  }, submenuDelay);\n\n  const showSubmenu = () => {\n    stopHidingSubmenu();\n    startShowingSubmenu();\n  };\n\n  const hideSubmenu = () => {\n    stopShowingSubmenu();\n    startHidingSubmenu();\n  };\n\n  const hasItemsAndIsNotDisabled = items && !disabled;\n\n  return (\n    <div\n      onMouseEnter={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n      onMouseLeave={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n    >\n      <UnstyledButton\n        ref={ref}\n        style={[\n          (theme) => {\n            const { colors } = theme;\n            const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n            return {\n              '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n              '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n                ? rgba(parsedColor, 0.08)\n                : rgba(colors.gray[4], 0.25),\n              '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n                ? rgba(parsedColor, 0.15)\n                : rgba(colors.dark[3], 0.25),\n              '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n                ? rgba(parsedColor, 0.2)\n                : rgba(colors.gray[4], 0.5),\n              '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n                ? rgba(parsedColor, 0.3)\n                : rgba(colors.dark[3], 0.5),\n            };\n          },\n          style,\n        ]}\n        className={clsx('mantine-contextmenu-item-button', className)}\n        disabled={disabled}\n        onClick={handleClick}\n      >\n        {icon && (\n          <Box fz={0} mr=\"xs\" mt={-2}>\n            {icon}\n          </Box>\n        )}\n        <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n        {items && (\n          <Box fz={10} mt={-2} ml=\"xs\">\n            ▶\n          </Box>\n        )}\n      </UnstyledButton>\n      {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n    </div>\n  );\n}\n","import { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n  x: number;\n  y: number;\n  content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n  ContextMenuInstanceOptions & {\n    onHide: () => void;\n  };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n  const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n  const [paperRef] = useResizeObserver<HTMLDivElement>();\n  const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n  let windowWidth = 0;\n  let windowHeight = 0;\n  if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n  const { dir } = useDirection();\n\n  return (\n    <Paper\n      ref={paperRef}\n      shadow={shadow}\n      radius={borderRadius}\n      className={clsx('mantine-contextmenu', className, classNames?.root)}\n      style={[\n        ({ spacing: { md } }) => {\n          const mdSpacing = px(md) as number;\n          return {\n            zIndex,\n            top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n            left:\n              dir === 'ltr'\n                ? x + width + mdSpacing > windowWidth\n                  ? windowWidth - width - mdSpacing\n                  : x\n                : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n          };\n        },\n        style,\n        styles?.root,\n      ]}\n    >\n      {Array.isArray(content)\n        ? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) =>\n            hidden ? null : onClick || items ? (\n              <ContextMenuItem\n                key={key}\n                className={clsx(classNames?.item, className)}\n                style={[styles?.item, style]}\n                title={title ?? humanize(key)}\n                onClick={onClick}\n                onHide={onHide}\n                items={items}\n                {...otherOptions}\n              />\n            ) : (\n              <ContextMenuDivider\n                key={key}\n                className={clsx(classNames?.divider, className)}\n                style={[styles?.divider, style]}\n              />\n            )\n          )\n        : content(onHide)}\n    </Paper>\n  );\n}\n","import { createContext, useContext, useState } from 'react';\nimport type { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type {\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ContextMenuSettings,\n  HideContextMenuFunction,\n  ShowContextMenuFunction,\n  WithRequiredProperty,\n} from './types';\n\nconst DEFAULT_SETTINGS: WithRequiredProperty<ContextMenuSettings, 'shadow' | 'borderRadius' | 'submenuDelay'> = {\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n};\n\nexport const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);\nexport const ContextMenuCtx = createContext<{\n  /**\n   * Function that shows the context menu.\n   */\n  showContextMenu: ShowContextMenuFunction;\n\n  /**\n   * Function that hides the context menu.\n   */\n  hideContextMenu: HideContextMenuFunction;\n\n  /**\n   * Boolean indicating whether the context menu is currently visible.\n   */\n  isContextMenuVisible: boolean;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined, isContextMenuVisible: false });\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n  zIndex = 9999,\n  shadow = DEFAULT_SETTINGS.shadow,\n  borderRadius = DEFAULT_SETTINGS.borderRadius,\n  submenuDelay = DEFAULT_SETTINGS.submenuDelay,\n  children,\n}: ContextMenuProviderProps) {\n  const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n  const hideContextMenu = () => {\n    setData(null);\n  };\n\n  const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setData({\n      x: e.clientX,\n      y: e.clientY,\n      content,\n      zIndex: options?.zIndex || zIndex,\n      className: options?.className,\n      style: options?.style,\n      classNames: options?.classNames,\n      styles: options?.styles,\n    });\n  };\n\n  return (\n    <ContextMenuSettingsCtx.Provider value={{ shadow, borderRadius, submenuDelay }}>\n      <ContextMenuCtx.Provider value={{ showContextMenu, hideContextMenu, isContextMenuVisible: !!data }}>\n        {children}\n        {data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}\n      </ContextMenuCtx.Provider>\n    </ContextMenuSettingsCtx.Provider>\n  );\n}\n\n/**\n * Hook returning functions that show and hide the context menu.\n */\nexport function useContextMenu() {\n  return useContext(ContextMenuCtx);\n}\n","import { Portal } from '@mantine/core';\nimport { useHotkeys, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\nimport { ContextMenuOverlay } from './ContextMenuOverlay';\n\nexport type ContextMenuPortalProps = ContextMenuProps & {\n  zIndex?: number;\n};\n\nexport function ContextMenuPortal({ onHide, zIndex, ...otherProps }: ContextMenuPortalProps) {\n  useWindowEvent('resize', onHide);\n  useWindowEvent('scroll', onHide);\n  useHotkeys([['Escape', onHide]]);\n\n  return (\n    <Portal>\n      <ContextMenuOverlay zIndex={zIndex} onHide={onHide}>\n        <ContextMenu {...otherProps} onHide={onHide} />\n      </ContextMenuOverlay>\n    </Portal>\n  );\n}\n","export type ContextMenuOverlayProps = React.PropsWithChildren<{\n  zIndex: number | undefined;\n  onHide: () => void;\n}>;\n\nexport function ContextMenuOverlay({ zIndex, children, onHide }: ContextMenuOverlayProps) {\n  const handleHide = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onHide();\n  };\n  return (\n    <div className=\"mantine-contextmenu-overlay\" style={{ zIndex }} onClick={handleHide} onContextMenu={handleHide}>\n      {children}\n    </div>\n  );\n}\n","/**\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"],"mappings":"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","names":["package_exports","__export","ContextMenuCtx","ContextMenuDivider","ContextMenuItem","ContextMenuPortal","ContextMenuProvider","ContextMenuSettingsCtx","humanize","useContextMenu","__toCommonJS","import_core","import_clsx","import_jsx_runtime","ContextMenuDivider","className","style","clsx","import_core","import_hooks","import_clsx","import_react","import_core","import_hooks","import_clsx","import_react","import_react","import_core","import_hooks","import_jsx_runtime","ContextMenuOverlay","zIndex","children","onHide","handleHide","e","import_jsx_runtime","ContextMenuPortal","onHide","zIndex","otherProps","ContextMenuOverlay","ContextMenu","import_jsx_runtime","DEFAULT_SETTINGS","ContextMenuSettingsCtx","ContextMenuCtx","ContextMenuProvider","zIndex","shadow","borderRadius","submenuDelay","children","data","setData","hideContextMenu","showContextMenu","content","options","e","ContextMenuPortal","useContextMenu","humanize","value","str","import_jsx_runtime","ContextMenu","x","y","content","zIndex","onHide","className","style","classNames","styles","shadow","borderRadius","ContextMenuSettingsCtx","paperRef","width","height","windowWidth","windowHeight","dir","clsx","md","mdSpacing","key","hidden","onClick","items","title","otherOptions","ContextMenuItem","humanize","ContextMenuDivider","import_jsx_runtime","ContextMenuItem","className","style","icon","title","color","disabled","onClick","onHide","items","ref","submenuDelay","ContextMenuSettingsCtx","submenuPosition","setSubmenuPosition","handleClick","e","startShowingSubmenu","stopShowingSubmenu","y","x","startHidingSubmenu","stopHidingSubmenu","showSubmenu","hideSubmenu","hasItemsAndIsNotDisabled","theme","colors","parsedColor","clsx","ContextMenu"]}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+"use client";import{Box as _}from"@mantine/core";import G from"clsx";import{jsx as X}from"react/jsx-runtime";function E({className:e,style:t}){return X(_,{className:G("mantine-contextmenu-divider",e),style:t})}import{Box as q,UnstyledButton as ie,parseThemeColor as ue,rgba as C}from"@mantine/core";import{useTimeout as U}from"@mantine/hooks";import se from"clsx";import{useContext as me,useRef as xe,useState as pe}from"react";import{Paper as ee,px as te,useDirection as ne}from"@mantine/core";import{useResizeObserver as oe}from"@mantine/hooks";import R from"clsx";import{useContext as re}from"react";import{createContext as T,useContext as K,useState as Q}from"react";import{Portal as Z}from"@mantine/core";import{useHotkeys as J,useWindowEvent as B}from"@mantine/hooks";import{jsx as Y}from"react/jsx-runtime";function N({zIndex:e,children:t,onHide:n}){let d=s=>{s.preventDefault(),n()};return Y("div",{className:"mantine-contextmenu-overlay",style:{zIndex:e},onClick:d,onContextMenu:d,children:t})}import{jsx as H}from"react/jsx-runtime";function k({onHide:e,zIndex:t,...n}){return B("resize",e),B("scroll",e),J([["Escape",e]]),H(Z,{children:H(N,{zIndex:t,onHide:e,children:H(S,{...n,onHide:e})})})}import{jsx as W,jsxs as j}from"react/jsx-runtime";var O={shadow:"sm",borderRadius:"xs",submenuDelay:500},P=T(O),A=T({showContextMenu:()=>()=>{},hideContextMenu:()=>{},isContextMenuVisible:!1});function Se({zIndex:e=9999,shadow:t=O.shadow,borderRadius:n=O.borderRadius,submenuDelay:d=O.submenuDelay,children:s}){let[l,c]=Q(null),m=()=>{c(null)},x=(y,i)=>u=>{u.preventDefault(),u.stopPropagation(),c({x:u.clientX,y:u.clientY,content:y,zIndex:i?.zIndex||e,className:i?.className,style:i?.style,classNames:i?.classNames,styles:i?.styles})};return W(P.Provider,{value:{shadow:t,borderRadius:n,submenuDelay:d},children:j(A.Provider,{value:{showContextMenu:x,hideContextMenu:m,isContextMenuVisible:!!l},children:[s,l&&W(k,{onHide:m,...l})]})})}function Oe(){return K(A)}function F(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)}`}import{jsx as z}from"react/jsx-runtime";function S({x:e,y:t,content:n,zIndex:d,onHide:s,className:l,style:c,classNames:m,styles:x}){let{shadow:y,borderRadius:i}=re(P),[u]=oe(),{width:M,height:g}=u.current?.getBoundingClientRect()||{width:0,height:0},h=0,v=0;typeof window<"u"&&({innerWidth:h,innerHeight:v}=window);let{dir:D}=ne();return z(ee,{ref:u,shadow:y,radius:i,className:R("mantine-contextmenu",l,m?.root),style:[({spacing:{md:f}})=>{let r=te(f);return{zIndex:d,top:t+g+r>v?v-g-r:t,left:D==="ltr"?e+M+r>h?h-M-r:e:h-r-(e-M-r<0?M+r:e)}},c,x?.root],children:Array.isArray(n)?n.map(({key:f,hidden:r,className:w,style:b,onClick:p,items:a,title:o,...V})=>r?null:p||a?z(L,{className:R(m?.item,w),style:[x?.item,b],title:o??F(f),onClick:p,onHide:s,items:a,...V},f):z(E,{className:R(m?.divider,w),style:[x?.divider,b]},f)):n(s)})}import{jsx as I,jsxs as $}from"react/jsx-runtime";function L({className:e,style:t,icon:n,title:d,color:s,disabled:l,onClick:c,onHide:m,items:x}){let y=xe(null),{submenuDelay:i}=me(P),[u,M]=pe(null),g=c?p=>{m(),c(p)}:void 0,{start:h,clear:v}=U(()=>{let{top:p,right:a}=y.current.getBoundingClientRect();M({x:a,y:p})},i),{start:D,clear:f}=U(()=>{M(null)},i),r=()=>{f(),h()},w=()=>{v(),D()},b=x&&!l;return $("div",{onMouseEnter:b?r:void 0,onMouseLeave:b?w:void 0,children:[$(ie,{ref:y,style:[p=>{let{colors:a}=p,o=s?ue({color:s,theme:p}).value:void 0;return{"--mantine-contextmenu-item-button-color":o||"var(--mantine-color-text)","--mantine-contextmenu-item-button-hover-bg-color-light":o?C(o,.08):C(a.gray[4],.25),"--mantine-contextmenu-item-button-hover-bg-color-dark":o?C(o,.15):C(a.dark[3],.25),"--mantine-contextmenu-item-button-pressed-bg-color-light":o?C(o,.2):C(a.gray[4],.5),"--mantine-contextmenu-item-button-pressed-bg-color-dark":o?C(o,.3):C(a.dark[3],.5)}},t],className:se("mantine-contextmenu-item-button",e),disabled:l,onClick:g,children:[n&&I(q,{fz:0,mr:"xs",mt:-2,children:n}),I("div",{className:"mantine-contextmenu-item-button-title",children:d}),x&&I(q,{fz:10,mt:-2,ml:"xs",children:"\u25B6"})]}),u&&I(S,{content:x,onHide:m,...u})]})}export{A as ContextMenuCtx,E as ContextMenuDivider,L as ContextMenuItem,k as ContextMenuPortal,Se as ContextMenuProvider,P as ContextMenuSettingsCtx,F as humanize,Oe as useContextMenu};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../package/ContextMenuDivider.tsx","../package/ContextMenuItem.tsx","../package/ContextMenu.tsx","../package/ContextMenuProvider.tsx","../package/ContextMenuPortal.tsx","../package/ContextMenuOverlay.tsx","../package/utils.ts"],"sourcesContent":["import { Box } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { ContextMenuItemOptions } from './types';\n\nexport type ContextMenuDividerProps = Pick<ContextMenuItemOptions, 'className' | 'style'>;\n\nexport function ContextMenuDivider({ className, style }: ContextMenuDividerProps) {\n  return <Box className={clsx('mantine-contextmenu-divider', className)} style={style} />;\n}\n","import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';\nimport { useTimeout } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext, useRef, useState, type MouseEventHandler } from 'react';\nimport { ContextMenu } from './ContextMenu';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuItemOptions, WithRequiredProperty } from './types';\n\nexport function ContextMenuItem({\n  className,\n  style,\n  icon,\n  title,\n  color,\n  disabled,\n  onClick,\n  onHide,\n  items,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & { onHide: () => void }) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const { submenuDelay } = useContext(ContextMenuSettingsCtx);\n\n  const [submenuPosition, setSubmenuPosition] = useState<{ x: number; y: number } | null>(null);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> | undefined = onClick\n    ? (e) => {\n        onHide();\n        onClick!(e);\n      }\n    : undefined;\n\n  const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {\n    const { top: y, right: x } = ref.current!.getBoundingClientRect();\n    setSubmenuPosition({ x, y });\n  }, submenuDelay);\n\n  const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {\n    setSubmenuPosition(null);\n  }, submenuDelay);\n\n  const showSubmenu = () => {\n    stopHidingSubmenu();\n    startShowingSubmenu();\n  };\n\n  const hideSubmenu = () => {\n    stopShowingSubmenu();\n    startHidingSubmenu();\n  };\n\n  const hasItemsAndIsNotDisabled = items && !disabled;\n\n  return (\n    <div\n      onMouseEnter={hasItemsAndIsNotDisabled ? showSubmenu : undefined}\n      onMouseLeave={hasItemsAndIsNotDisabled ? hideSubmenu : undefined}\n    >\n      <UnstyledButton\n        ref={ref}\n        style={[\n          (theme) => {\n            const { colors } = theme;\n            const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;\n            return {\n              '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',\n              '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor\n                ? rgba(parsedColor, 0.08)\n                : rgba(colors.gray[4], 0.25),\n              '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor\n                ? rgba(parsedColor, 0.15)\n                : rgba(colors.dark[3], 0.25),\n              '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor\n                ? rgba(parsedColor, 0.2)\n                : rgba(colors.gray[4], 0.5),\n              '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor\n                ? rgba(parsedColor, 0.3)\n                : rgba(colors.dark[3], 0.5),\n            };\n          },\n          style,\n        ]}\n        className={clsx('mantine-contextmenu-item-button', className)}\n        disabled={disabled}\n        onClick={handleClick}\n      >\n        {icon && (\n          <Box fz={0} mr=\"xs\" mt={-2}>\n            {icon}\n          </Box>\n        )}\n        <div className=\"mantine-contextmenu-item-button-title\">{title}</div>\n        {items && (\n          <Box fz={10} mt={-2} ml=\"xs\">\n            ▶\n          </Box>\n        )}\n      </UnstyledButton>\n      {submenuPosition && <ContextMenu content={items as ContextMenuContent} onHide={onHide} {...submenuPosition} />}\n    </div>\n  );\n}\n","import { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n  x: number;\n  y: number;\n  content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n  ContextMenuInstanceOptions & {\n    onHide: () => void;\n  };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n  const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n  const [paperRef] = useResizeObserver<HTMLDivElement>();\n  const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n  let windowWidth = 0;\n  let windowHeight = 0;\n  if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n  const { dir } = useDirection();\n\n  return (\n    <Paper\n      ref={paperRef}\n      shadow={shadow}\n      radius={borderRadius}\n      className={clsx('mantine-contextmenu', className, classNames?.root)}\n      style={[\n        ({ spacing: { md } }) => {\n          const mdSpacing = px(md) as number;\n          return {\n            zIndex,\n            top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n            left:\n              dir === 'ltr'\n                ? x + width + mdSpacing > windowWidth\n                  ? windowWidth - width - mdSpacing\n                  : x\n                : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n          };\n        },\n        style,\n        styles?.root,\n      ]}\n    >\n      {Array.isArray(content)\n        ? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) =>\n            hidden ? null : onClick || items ? (\n              <ContextMenuItem\n                key={key}\n                className={clsx(classNames?.item, className)}\n                style={[styles?.item, style]}\n                title={title ?? humanize(key)}\n                onClick={onClick}\n                onHide={onHide}\n                items={items}\n                {...otherOptions}\n              />\n            ) : (\n              <ContextMenuDivider\n                key={key}\n                className={clsx(classNames?.divider, className)}\n                style={[styles?.divider, style]}\n              />\n            )\n          )\n        : content(onHide)}\n    </Paper>\n  );\n}\n","import { createContext, useContext, useState } from 'react';\nimport type { ContextMenuInstanceOptions } from './ContextMenu';\nimport { ContextMenuPortal } from './ContextMenuPortal';\nimport type {\n  ContextMenuOptions,\n  ContextMenuProviderProps,\n  ContextMenuSettings,\n  HideContextMenuFunction,\n  ShowContextMenuFunction,\n  WithRequiredProperty,\n} from './types';\n\nconst DEFAULT_SETTINGS: WithRequiredProperty<ContextMenuSettings, 'shadow' | 'borderRadius' | 'submenuDelay'> = {\n  shadow: 'sm',\n  borderRadius: 'xs',\n  submenuDelay: 500,\n};\n\nexport const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);\nexport const ContextMenuCtx = createContext<{\n  /**\n   * Function that shows the context menu.\n   */\n  showContextMenu: ShowContextMenuFunction;\n\n  /**\n   * Function that hides the context menu.\n   */\n  hideContextMenu: HideContextMenuFunction;\n\n  /**\n   * Boolean indicating whether the context menu is currently visible.\n   */\n  isContextMenuVisible: boolean;\n}>({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined, isContextMenuVisible: false });\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n  zIndex = 9999,\n  shadow = DEFAULT_SETTINGS.shadow,\n  borderRadius = DEFAULT_SETTINGS.borderRadius,\n  submenuDelay = DEFAULT_SETTINGS.submenuDelay,\n  children,\n}: ContextMenuProviderProps) {\n  const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n  const hideContextMenu = () => {\n    setData(null);\n  };\n\n  const showContextMenu: ShowContextMenuFunction = (content, options) => (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setData({\n      x: e.clientX,\n      y: e.clientY,\n      content,\n      zIndex: options?.zIndex || zIndex,\n      className: options?.className,\n      style: options?.style,\n      classNames: options?.classNames,\n      styles: options?.styles,\n    });\n  };\n\n  return (\n    <ContextMenuSettingsCtx.Provider value={{ shadow, borderRadius, submenuDelay }}>\n      <ContextMenuCtx.Provider value={{ showContextMenu, hideContextMenu, isContextMenuVisible: !!data }}>\n        {children}\n        {data && <ContextMenuPortal onHide={hideContextMenu} {...data} />}\n      </ContextMenuCtx.Provider>\n    </ContextMenuSettingsCtx.Provider>\n  );\n}\n\n/**\n * Hook returning functions that show and hide the context menu.\n */\nexport function useContextMenu() {\n  return useContext(ContextMenuCtx);\n}\n","import { Portal } from '@mantine/core';\nimport { useHotkeys, useWindowEvent } from '@mantine/hooks';\nimport { ContextMenu, type ContextMenuProps } from './ContextMenu';\nimport { ContextMenuOverlay } from './ContextMenuOverlay';\n\nexport type ContextMenuPortalProps = ContextMenuProps & {\n  zIndex?: number;\n};\n\nexport function ContextMenuPortal({ onHide, zIndex, ...otherProps }: ContextMenuPortalProps) {\n  useWindowEvent('resize', onHide);\n  useWindowEvent('scroll', onHide);\n  useHotkeys([['Escape', onHide]]);\n\n  return (\n    <Portal>\n      <ContextMenuOverlay zIndex={zIndex} onHide={onHide}>\n        <ContextMenu {...otherProps} onHide={onHide} />\n      </ContextMenuOverlay>\n    </Portal>\n  );\n}\n","export type ContextMenuOverlayProps = React.PropsWithChildren<{\n  zIndex: number | undefined;\n  onHide: () => void;\n}>;\n\nexport function ContextMenuOverlay({ zIndex, children, onHide }: ContextMenuOverlayProps) {\n  const handleHide = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onHide();\n  };\n  return (\n    <div className=\"mantine-contextmenu-overlay\" style={{ zIndex }} onClick={handleHide} onContextMenu={handleHide}>\n      {children}\n    </div>\n  );\n}\n","/**\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"],"mappings":"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","names":["Box","clsx","jsx","ContextMenuDivider","className","style","Box","UnstyledButton","parseThemeColor","rgba","useTimeout","clsx","useContext","useRef","useState","Paper","px","useDirection","useResizeObserver","clsx","useContext","createContext","useContext","useState","Portal","useHotkeys","useWindowEvent","jsx","ContextMenuOverlay","zIndex","children","onHide","handleHide","e","jsx","ContextMenuPortal","onHide","zIndex","otherProps","useWindowEvent","useHotkeys","Portal","ContextMenuOverlay","ContextMenu","jsx","jsxs","DEFAULT_SETTINGS","ContextMenuSettingsCtx","createContext","ContextMenuCtx","ContextMenuProvider","zIndex","shadow","borderRadius","submenuDelay","children","data","setData","useState","hideContextMenu","showContextMenu","content","options","e","ContextMenuPortal","useContextMenu","useContext","humanize","value","str","jsx","ContextMenu","x","y","content","zIndex","onHide","className","style","classNames","styles","shadow","borderRadius","useContext","ContextMenuSettingsCtx","paperRef","useResizeObserver","width","height","windowWidth","windowHeight","dir","useDirection","Paper","clsx","md","mdSpacing","px","key","hidden","onClick","items","title","otherOptions","ContextMenuItem","humanize","ContextMenuDivider","jsx","jsxs","ContextMenuItem","className","style","icon","title","color","disabled","onClick","onHide","items","ref","useRef","submenuDelay","useContext","ContextMenuSettingsCtx","submenuPosition","setSubmenuPosition","useState","handleClick","e","startShowingSubmenu","stopShowingSubmenu","useTimeout","y","x","startHidingSubmenu","stopHidingSubmenu","showSubmenu","hideSubmenu","hasItemsAndIsNotDisabled","UnstyledButton","theme","colors","parsedColor","parseThemeColor","rgba","clsx","Box","ContextMenu"]}

package/dist/styles.css

@@ -0,0 +1,2 @@
+.mantine-contextmenu{border:1px solid var(--mantine-color-gray-3);position:fixed}[data-mantine-color-scheme=dark] .mantine-contextmenu{border:1px solid var(--mantine-color-dark-4)}.mantine-contextmenu{overflow:hidden;transition:all .2s}.mantine-contextmenu-divider{background:var(--mantine-color-gray-1);height:calc(.0625rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .mantine-contextmenu-divider{background:var(--mantine-color-dark-5)}.mantine-contextmenu-item-button{align-items:center;color:var(--mantine-contextmenu-item-button-color);display:flex;padding:calc(var(--mantine-spacing-sm)/2) var(--mantine-spacing-sm);transition:background .2s;width:100%}.mantine-contextmenu-item-button[disabled]{color:var(--mantine-color-gray-5);cursor:not-allowed}[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{flex-grow:1;font-size:var(--mantine-font-size-sm);white-space:nowrap}.mantine-contextmenu-overlay{background-color:transparent;height:100%;left:0;position:fixed;top:0;width:100%}
+/*# sourceMappingURL=styles.css.map */

package/dist/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../package/ContextMenu.css","<no source>","../package/ContextMenuDivider.css","../package/ContextMenuItem.css","../package/ContextMenuOverlay.css"],"names":[],"mappings":"AAAA,qBAEE,4CAAsF,CADtF,cAIF,CCLA,sDDEE,6CCFF,qBDGE,eAAgB,CAChB,mBCJF,ACAA,6BAEE,sCAAgF,CADhF,0CAEF,CDHA,8DCEE,uCDFF,AEAA,iCAGE,kBAAmB,CAKnB,kDAAmD,CANnD,YAAa,CAKb,mEAAwC,CAExC,yBAA2B,CAR3B,UAyBF,CAhBE,2CAEE,iCAA2E,CAD3E,kBAEF,CFbF,4EEYI,kCFZJ,AEcE,uDACE,sEAIF,CFnBF,wFEeI,sEFfJ,AEoBE,wDACE,wEAIF,CFzBF,yFEqBI,wEFrBJ,AE4BA,uCAGE,WAAY,CAFZ,qCAAsC,CACtC,kBAEF,CChCA,6BAME,4BAA6B,CAD7B,WAAY,CAFZ,MAAO,CAFP,cAAe,CACf,KAAM,CAEN,UAGF","file":"styles.css","sourcesContent":[".mantine-contextmenu {\n  position: fixed;\n  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));\n  overflow: hidden;\n  transition: all 0.2s;\n}\n",null,".mantine-contextmenu-divider {\n  height: rem(1px);\n  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));\n}\n",".mantine-contextmenu-item-button {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding-top: calc(var(--mantine-spacing-sm) / 2);\n  padding-bottom: calc(var(--mantine-spacing-sm) / 2);\n  padding-left: var(--mantine-spacing-sm);\n  padding-right: var(--mantine-spacing-sm);\n  color: var(--mantine-contextmenu-item-button-color);\n  transition: background 0.2s;\n  &[disabled] {\n    cursor: not-allowed;\n    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));\n  }\n  &:hover:not([disabled]) {\n    background: light-dark(\n      var(--mantine-contextmenu-item-button-hover-bg-color-light),\n      var(--mantine-contextmenu-item-button-hover-bg-color-dark)\n    );\n  }\n  &:active:not([disabled]) {\n    background: light-dark(\n      var(--mantine-contextmenu-item-button-pressed-bg-color-light),\n      var(--mantine-contextmenu-item-button-pressed-bg-color-dark)\n    );\n  }\n}\n\n.mantine-contextmenu-item-button-title {\n  font-size: var(--mantine-font-size-sm);\n  white-space: nowrap;\n  flex-grow: 1;\n}\n",".mantine-contextmenu-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n}\n"]}

package/dist/styles.layer.css

@@ -0,0 +1,2 @@
+@layer mantine-contextmenu{.mantine-contextmenu{border:1px solid var(--mantine-color-gray-3);position:fixed}[data-mantine-color-scheme=dark] .mantine-contextmenu{border:1px solid var(--mantine-color-dark-4)}.mantine-contextmenu{overflow:hidden;transition:all .2s}.mantine-contextmenu-divider{background:var(--mantine-color-gray-1);height:calc(.0625rem*var(--mantine-scale))}}@layer mantine-contextmenu{[data-mantine-color-scheme=dark] .mantine-contextmenu-divider{background:var(--mantine-color-dark-5)}}@layer mantine-contextmenu{.mantine-contextmenu-item-button{align-items:center;color:var(--mantine-contextmenu-item-button-color);display:flex;padding:calc(var(--mantine-spacing-sm)/2) var(--mantine-spacing-sm);transition:background .2s;width:100%}.mantine-contextmenu-item-button[disabled]{color:var(--mantine-color-gray-5);cursor:not-allowed}[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{flex-grow:1;font-size:var(--mantine-font-size-sm);white-space:nowrap}.mantine-contextmenu-overlay{background-color:transparent;height:100%;left:0;position:fixed;top:0;width:100%}}
+/*# sourceMappingURL=styles.layer.css.map */

package/dist/styles.layer.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../package/ContextMenu.css","<no source>","../package/ContextMenuDivider.css","../package/ContextMenuItem.css","../package/ContextMenuOverlay.css"],"names":[],"mappings":"AAAA,2BAAA,qBAEE,4CAAsF,CADtF,cAIF,CCLA,sDDEE,6CCFF,qBDGE,eAAgB,CAChB,mBCJF,ACAA,6BAEE,sCAAgF,CADhF,0CAEF,CFGA,CENA,2BDAA,8DCEE,uCDFF,ACIA,CCJA,2BAAA,iCAGE,kBAAmB,CAKnB,kDAAmD,CANnD,YAAa,CAKb,mEAAwC,CAExC,yBAA2B,CAR3B,UAyBF,CAhBE,2CAEE,iCAA2E,CAD3E,kBAEF,CFbF,4EEYI,kCFZJ,AEcE,uDACE,sEAIF,CFnBF,wFEeI,sEFfJ,AEoBE,wDACE,wEAIF,CFzBF,yFEqBI,wEFrBJ,AE4BA,uCAGE,WAAY,CAFZ,qCAAsC,CACtC,kBAEF,CChCA,6BAME,4BAA6B,CAD7B,WAAY,CAFZ,MAAO,CAFP,cAAe,CACf,KAAM,CAEN,UAGF,CD0BA","file":"styles.layer.css","sourcesContent":[".mantine-contextmenu {\n  position: fixed;\n  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));\n  overflow: hidden;\n  transition: all 0.2s;\n}\n",null,".mantine-contextmenu-divider {\n  height: rem(1px);\n  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));\n}\n",".mantine-contextmenu-item-button {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding-top: calc(var(--mantine-spacing-sm) / 2);\n  padding-bottom: calc(var(--mantine-spacing-sm) / 2);\n  padding-left: var(--mantine-spacing-sm);\n  padding-right: var(--mantine-spacing-sm);\n  color: var(--mantine-contextmenu-item-button-color);\n  transition: background 0.2s;\n  &[disabled] {\n    cursor: not-allowed;\n    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));\n  }\n  &:hover:not([disabled]) {\n    background: light-dark(\n      var(--mantine-contextmenu-item-button-hover-bg-color-light),\n      var(--mantine-contextmenu-item-button-hover-bg-color-dark)\n    );\n  }\n  &:active:not([disabled]) {\n    background: light-dark(\n      var(--mantine-contextmenu-item-button-pressed-bg-color-light),\n      var(--mantine-contextmenu-item-button-pressed-bg-color-dark)\n    );\n  }\n}\n\n.mantine-contextmenu-item-button-title {\n  font-size: var(--mantine-font-size-sm);\n  white-space: nowrap;\n  flex-grow: 1;\n}\n",".mantine-contextmenu-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-contextmenu",
-  "version": "7.1.8",
+  "version": "7.1.10",
   "description": "Craft your applications for productivity and meet your users’ expectations by enhancing your Mantine-based UIs with a desktop-grade, lightweight yet fully-featured, dark-theme aware context-menu component, built by the creator of Mantine DataTable",
   "keywords": [
     "ui",
@@ -38,25 +38,34 @@
     "type": "github",
     "url": "https://github.com/sponsors/icflorescu"
   },
-  "types": "./dist/types/index.d.ts",
+  "files": [
+    "./dist",
+    "./README.md",
+    "./LICENSE"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/esm/index.js"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
-    "./styles.css": "./dist/css/styles.css",
-    "./styles.layer.css": "./dist/css/styles.layer.css"
+    "./styles.css": "./dist/styles.css",
+    "./styles.layer.css": "./dist/styles.layer.css"
   },
-  "files": [
-    "./dist",
-    "./README.md",
-    "./LICENSE"
+  "sideEffects": [
+    "*.css"
   ],
   "scripts": {
     "dev": "next dev",
-    "build:package": "rm -rf dist; tsc -p package/tsconfig.build.json; postcss package/styles*.css --dir dist/css",
+    "build:package": "rm -rf dist; tsup --config scripts/tsup.esm.ts; tsup --config scripts/tsup.cjs.ts; tsup --config scripts/tsup.dts.ts; postcss package/styles*.css -d dist -m",
     "build:docs": "next build",
     "build": "yarn build:package && yarn build:docs",
     "lint": "eslint . && tsc --noEmit --pretty",
@@ -64,19 +73,20 @@
   },
   "devDependencies": {
     "@ducanh2912/next-pwa": "^9.7.2",
-    "@mantine/code-highlight": "^7.1.7",
-    "@mantine/core": "^7.1.7",
-    "@mantine/hooks": "^7.1.7",
-    "@mantine/notifications": "^7.1.7",
+    "@mantine/code-highlight": "^7.2.0",
+    "@mantine/core": "^7.2.0",
+    "@mantine/hooks": "^7.2.0",
+    "@mantine/notifications": "^7.2.0",
     "@tabler/icons-react": "^2.40.0",
     "@types/lodash": "^4.14.200",
     "@types/node": "^20.8.10",
-    "@types/react": "^18.2.34",
+    "@types/react": "^18.2.36",
     "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "clsx": "^2.0.0",
-    "eslint": "^8.52.0",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.53.0",
     "eslint-config-next": "^14.0.1",
     "eslint-config-prettier": "^9.0.0",
     "lodash": "^4.17.21",
@@ -84,19 +94,21 @@
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "postcss-preset-mantine": "^1.9.0",
+    "postcss-preset-mantine": "^1.9.1",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.32.6",
     "swr": "^2.2.4",
+    "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "webpack": "^5.89.0"
   },
   "peerDependencies": {
-    "@mantine/core": ">=7.1",
-    "@mantine/hooks": ">=7.1",
-    "clsx": ">=2"
+    "@mantine/core": ">=7",
+    "@mantine/hooks": ">=7",
+    "clsx": ">=2",
+    "react": ">=18.2"
   }
 }

package/dist/css/styles.css

@@ -1,53 +0,0 @@
-.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.2s;
-}
-.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.2s;
-}
-.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

@@ -1,61 +0,0 @@
-@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.2s;
-}
-}
-@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.2s;
-}
-  .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/esm/ContextMenu.js

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

package/dist/esm/ContextMenu.js.map

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

package/dist/esm/ContextMenuDivider.js

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

package/dist/esm/ContextMenuDivider.js.map

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

package/dist/esm/ContextMenuItem.js

@@ -1,58 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, UnstyledButton, parseThemeColor, rgba } from '@mantine/core';
-import { useTimeout } from '@mantine/hooks';
-import clsx from 'clsx';
-import { useContext, useRef, useState } from 'react';
-import { ContextMenu } from './ContextMenu';
-import { ContextMenuSettingsCtx } from './ContextMenuProvider';
-export function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, onHide, items, }) {
-    const ref = useRef(null);
-    const { submenuDelay } = useContext(ContextMenuSettingsCtx);
-    const [submenuPosition, setSubmenuPosition] = useState(null);
-    const handleClick = onClick
-        ? (e) => {
-            onHide();
-            onClick(e);
-        }
-        : undefined;
-    const { start: startShowingSubmenu, clear: stopShowingSubmenu } = useTimeout(() => {
-        const { top: y, right: x } = ref.current.getBoundingClientRect();
-        setSubmenuPosition({ x, y });
-    }, submenuDelay);
-    const { start: startHidingSubmenu, clear: stopHidingSubmenu } = useTimeout(() => {
-        setSubmenuPosition(null);
-    }, submenuDelay);
-    const showSubmenu = () => {
-        stopHidingSubmenu();
-        startShowingSubmenu();
-    };
-    const hideSubmenu = () => {
-        stopShowingSubmenu();
-        startHidingSubmenu();
-    };
-    const hasItemsAndIsNotDisabled = items && !disabled;
-    return (_jsxs("div", { onMouseEnter: hasItemsAndIsNotDisabled ? showSubmenu : undefined, onMouseLeave: hasItemsAndIsNotDisabled ? hideSubmenu : undefined, children: [_jsxs(UnstyledButton, { ref: ref, style: [
-                    (theme) => {
-                        const { colors } = theme;
-                        const parsedColor = color ? parseThemeColor({ color, theme }).value : undefined;
-                        return {
-                            '--mantine-contextmenu-item-button-color': parsedColor ? parsedColor : 'var(--mantine-color-text)',
-                            '--mantine-contextmenu-item-button-hover-bg-color-light': parsedColor
-                                ? rgba(parsedColor, 0.08)
-                                : rgba(colors.gray[4], 0.25),
-                            '--mantine-contextmenu-item-button-hover-bg-color-dark': parsedColor
-                                ? rgba(parsedColor, 0.15)
-                                : rgba(colors.dark[3], 0.25),
-                            '--mantine-contextmenu-item-button-pressed-bg-color-light': parsedColor
-                                ? rgba(parsedColor, 0.2)
-                                : rgba(colors.gray[4], 0.5),
-                            '--mantine-contextmenu-item-button-pressed-bg-color-dark': parsedColor
-                                ? rgba(parsedColor, 0.3)
-                                : rgba(colors.dark[3], 0.5),
-                        };
-                    },
-                    style,
-                ], className: clsx('mantine-contextmenu-item-button', className), disabled: disabled, onClick: handleClick, children: [icon && (_jsx(Box, { fz: 0, mr: "xs", mt: -2, children: icon })), _jsx("div", { className: "mantine-contextmenu-item-button-title", children: title }), items && (_jsx(Box, { fz: 10, mt: -2, ml: "xs", children: "\u25B6" }))] }), submenuPosition && _jsx(ContextMenu, { content: items, onHide: onHide, ...submenuPosition })] }));
-}
-//# sourceMappingURL=ContextMenuItem.js.map

package/dist/esm/ContextMenuItem.js.map

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

package/dist/esm/ContextMenuPortal.js

@@ -1,13 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Portal } from '@mantine/core';
-import { useClickOutside, useHotkeys, useWindowEvent } from '@mantine/hooks';
-import { ContextMenu } from './ContextMenu';
-export function ContextMenuPortal({ onHide, ...otherProps }) {
-    useWindowEvent('resize', onHide);
-    useWindowEvent('scroll', onHide);
-    useHotkeys([['Escape', 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

@@ -1 +0,0 @@
-{"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,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC7E,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,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,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, useHotkeys, 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  useHotkeys([['Escape', 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

@@ -1,44 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
-import { ContextMenuPortal } from './ContextMenuPortal';
-const DEFAULT_SETTINGS = {
-    shadow: 'sm',
-    borderRadius: 'xs',
-    submenuDelay: 500,
-};
-export const ContextMenuSettingsCtx = createContext(DEFAULT_SETTINGS);
-export const ContextMenuCtx = createContext({ showContextMenu: () => () => undefined, hideContextMenu: () => undefined, isContextMenuVisible: false });
-/**
- * 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 = DEFAULT_SETTINGS.shadow, borderRadius = DEFAULT_SETTINGS.borderRadius, submenuDelay = DEFAULT_SETTINGS.submenuDelay, children, }) {
-    const [data, setData] = useState(null);
-    const hideContextMenu = () => {
-        setData(null);
-    };
-    const showContextMenu = (content, options) => (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setData({
-            x: e.clientX,
-            y: e.clientY,
-            content,
-            zIndex: options?.zIndex || zIndex,
-            className: options?.className,
-            style: options?.style,
-            classNames: options?.classNames,
-            styles: options?.styles,
-        });
-    };
-    return (_jsx(ContextMenuSettingsCtx.Provider, { value: { shadow, borderRadius, submenuDelay }, children: _jsxs(ContextMenuCtx.Provider, { value: { showContextMenu, hideContextMenu, isContextMenuVisible: !!data }, children: [children, data && _jsx(ContextMenuPortal, { onHide: hideContextMenu, ...data })] }) }));
-}
-/**
- * Hook returning functions that show and hide the context menu.
- */
-export function useContextMenu() {
-    return useContext(ContextMenuCtx);
-}
-//# sourceMappingURL=ContextMenuProvider.js.map

package/dist/esm/ContextMenuProvider.js.map

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

package/dist/esm/index.js

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

package/dist/esm/types.js.map

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

package/dist/esm/utils.js

@@ -1,12 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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/types/ContextMenu.d.ts

@@ -1,10 +0,0 @@
-import type { ContextMenuContent, ContextMenuOptions } from './types';
-export type ContextMenuInstanceOptions = {
-    x: number;
-    y: number;
-    content: ContextMenuContent;
-};
-export type ContextMenuProps = ContextMenuOptions & ContextMenuInstanceOptions & {
-    onHide: () => void;
-};
-export declare function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ContextMenuDivider.d.ts

@@ -1,3 +0,0 @@
-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/types/ContextMenuItem.d.ts

@@ -1,4 +0,0 @@
-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;

package/dist/types/ContextMenuPortal.d.ts

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

package/dist/types/ContextMenuProvider.d.ts

@@ -1,40 +0,0 @@
-/// <reference types="react" />
-import type { ContextMenuProviderProps, ContextMenuSettings, HideContextMenuFunction, ShowContextMenuFunction, WithRequiredProperty } from './types';
-export declare const ContextMenuSettingsCtx: import("react").Context<WithRequiredProperty<ContextMenuSettings, "shadow" | "borderRadius" | "submenuDelay">>;
-export declare const ContextMenuCtx: import("react").Context<{
-    /**
-     * Function that shows the context menu.
-     */
-    showContextMenu: ShowContextMenuFunction;
-    /**
-     * Function that hides the context menu.
-     */
-    hideContextMenu: HideContextMenuFunction;
-    /**
-     * Boolean indicating whether the context menu is currently visible.
-     */
-    isContextMenuVisible: boolean;
-}>;
-/**
- * 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 declare function ContextMenuProvider({ zIndex, shadow, borderRadius, submenuDelay, children, }: ContextMenuProviderProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Hook returning functions that show and hide the context menu.
- */
-export declare function useContextMenu(): {
-    /**
-     * Function that shows the context menu.
-     */
-    showContextMenu: ShowContextMenuFunction;
-    /**
-     * Function that hides the context menu.
-     */
-    hideContextMenu: HideContextMenuFunction;
-    /**
-     * Boolean indicating whether the context menu is currently visible.
-     */
-    isContextMenuVisible: boolean;
-};

package/dist/types/index.d.ts

@@ -1,6 +0,0 @@
-export * from './ContextMenuDivider';
-export * from './ContextMenuItem';
-export * from './ContextMenuPortal';
-export * from './ContextMenuProvider';
-export * from './types';
-export * from './utils';

package/dist/types/types.d.ts

@@ -1,149 +0,0 @@
-/// <reference types="react" />
-import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';
-/**
- * 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 = {
-    /**
-     * The z-index of context menu.
-     * @default 9999
-     */
-    zIndex?: number;
-    /**
-     * Context menu container class name.
-     */
-    className?: string;
-    /**
-     * Context menu container style.
-     */
-    style?: MantineStyleProp;
-    /**
-     * Context menu elements class names.
-     */
-    classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;
-    /**
-     * Context menu styles.
-     * Can be an object with `root`, `item` and `divider` keys and style objects as values,
-     * or a function that accepts the current theme and returns a similarly structured object.
-     */
-    styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;
-};
-/**
- * Generic context menu settings
- */
-export type ContextMenuSettings = {
-    /**
-     * Context menu shadow.
-     * @default 'sm'
-     */
-    shadow?: MantineShadow;
-    /**
-     * Context menu border radius.
-     * @default 'xs'
-     */
-    borderRadius?: MantineRadius;
-    /**
-     * Delay in ms to use when showing and hiding submenus.
-     * @default 500
-     */
-    submenuDelay?: number;
-};
-/**
- * Context menu provider props
- */
-export type ContextMenuProviderProps = ContextMenuSettings & ContextMenuOptions & {
-    children: React.ReactNode;
-};
-/**
- * Context menu item options
- */
-export type ContextMenuItemOptions = {
-    /**
-     * Unique key of the context menu item or divider.
-     */
-    key: string;
-    /**
-     * Context menu item or divider className.
-     */
-    className?: string;
-    /**
-     * Context menu item or divider style.
-     */
-    style?: MantineStyleProp;
-    /**
-     * Boolean indicating whether the context menu item is hidden.
-     */
-    hidden?: boolean;
-} & (({
-    /**
-     * Optional context menu item icon.
-     */
-    icon?: React.ReactNode;
-    /**
-     * Optional context menu item title.
-     * If not provided, one will be generated automatically by "humanizing" the key.
-     * @default humanize(key)
-     */
-    title?: React.ReactNode;
-    /**
-     * Optional context menu item color.
-     */
-    color?: MantineColor;
-    /**
-     * Boolean indicating whether the context menu item is disabled.
-     */
-    disabled?: boolean;
-} & ({
-    /**
-     * Optional context menu item `onClick` handler.
-     * If not provided, a divider will be rendered instead.
-     */
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    items?: never;
-} | {
-    onClick?: never;
-    /**
-     * Optional items.
-     * If provided, a submenu will be rendered.
-     */
-    items: ContextMenuItemOptions[];
-})) | {
-    icon?: never;
-    title?: never;
-    color?: never;
-    disabled?: never;
-    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);
-/**
- * Show context menu function
- */
-export type ShowContextMenuFunction = (
-/**
- * Context menu content.
- * Either an array of context menu items or a function that accepts a close callback and returns context menu content.
- */
-content: ContextMenuContent, 
-/**
- * Context menu options (overrides provider props).
- */
-options?: ContextMenuOptions) => React.MouseEventHandler;
-/**
- * Hide context menu function
- */
-export type HideContextMenuFunction = () => void;

package/dist/types/utils.d.ts

@@ -1,4 +0,0 @@
-/**
- * Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
- */
-export declare function humanize(value: string): string;