mantine-contextmenu 1.0.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,95 @@
+# Mantine ContextMenu
+
+![Publish NPM & deploy docs workflow](https://github.com/icflorescu/mantine-contextmenu/actions/workflows/publish-and-deploy.yml/badge.svg)  
+[![NPM version][npm-image]][npm-url]
+[![License][license-image]][license-url]
+[![Stars][stars-image]][stars-url]
+[![Last commit][last-commit-image]][repo-url]
+[![Closed issues][closed-issues-image]][closed-issues-url]
+[![Downloads][downloads-image]][npm-url]
+[![Language][language-image]][repo-url]
+
+A "dark-theme aware" **context-menu** for your Mantine UI applications.
+
+<!-- [![Mantine ContextMenu](https://user-images.githubusercontent.com/...png)](https://icflorescu.github.io/mantine-contextmenu/) -->
+
+## Full documentation and examples
+
+Visit [icflorescu.github.io/mantine-contextmenu](https://icflorescu.github.io/mantine-contextmenu/) to view the full documentation and learn how to use it by browsing a comprehensive list of examples.
+
+## Quickstart
+
+Install the package and its dependencies:
+
+```sh
+npm i @mantine/core @mantine/hooks @emotion/react mantine-contextmenu
+```
+
+Wrap your application in the `ContextMenuProvider` components:
+
+```tsx
+import { MantineProvider } from '@mantine/core';
+import { ContextMenuProvider } from 'mantine-contextmenu';
+
+function App() {
+  return (
+    <MantineProvider>
+      <ContextMenuProvider>
+        {/* your app code here... */}
+      </ContextMenuProvider>
+    </MantineProvider>
+  );
+}
+```
+
+Use the `useContextMenu` hook in your code:
+
+```ts
+// @todo add example here...
+```
+
+Have a look at the available [type definitions](https://icflorescu.github.io/mantine-contextmenu/type-definitions) and make sure to browse the list of [usage examples](https://icflorescu.github.io/mantine-contextmenu/examples/basic-usage).
+
+## Code contributors
+
+[![Contributors list](https://contrib.rocks/image?repo=icflorescu/mantine-contextmenu)](https://github.com/icflorescu/mantine-contextmenu/graphs/contributors)
+
+Want to [become a code contributor](https://icflorescu.github.io/mantine-contextmenu/contribute-and-support)?
+
+## Sponsor the project
+
+If you find this package useful, please consider ❤️ [sponsoring my work](https://github.com/sponsors/icflorescu). Your sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs. If you're a company using Mantine ContextMenu in a commercial project, you can also [hire my services](https://github.com/icflorescu).
+
+## Other means of support
+
+If you find this package useful, please 🙏 star the repository, 💕 [tweet about it](https://twitter.com/share?text=Check%20out%20the%20missing%20context-menu%20for%20Mantine%20UI%20applications!&url=https%3A%2F%2Fgithub.com%2Ficflorescu%2Fmantine-contextmenu&hashtags=react%2Cmantine%2Cui%2Ccontextmenu%2Cfrontend%2Copensource&via=icflorescu), 👍 [endorse me on LinkedIn](https://www.linkedin.com/in/icflorescu) or consider hiring my services.
+
+The more stars this repository gets, the more visibility it gains among the Mantine users community. The more
+users it gets, the more chances that some of those users will become active code contributors willing to put
+their effort into bringing new features to life and/or fixing bugs.
+
+As the repository gain awareness, my chances of getting hired to work on Mantine-based projects will increase,
+which in turn will help maintain my vested interest in keeping the project alive.
+
+## Hiring the author
+
+If you want to hire my services, don’t hesitate to drop me a line at the email address listed in my [GitHub profile](https://github.com/icflorescu).
+I’m currently getting a constant flow of approaches, some of them relevant, others not so relevant.
+Mentioning “Mantine ContextMenu” in your text would help me prioritize your message.
+
+## License
+
+The [MIT License](https://github.com/icflorescu/mantine-contextmenu/blob/master/LICENSE).
+
+[npm-url]: https://npmjs.org/package/mantine-contextmenu
+[repo-url]: https://github.com/icflorescu/mantine-contextmenu
+[stars-url]: https://github.com/icflorescu/mantine-contextmenu/stargazers
+[closed-issues-url]: https://github.com/icflorescu/mantine-contextmenu/issues?q=is%3Aissue+is%3Aclosed
+[license-url]: LICENSE
+[npm-image]: https://img.shields.io/npm/v/mantine-contextmenu.svg?style=flat-square
+[license-image]: http://img.shields.io/npm/l/mantine-contextmenu.svg?style=flat-square
+[downloads-image]: http://img.shields.io/npm/dm/mantine-contextmenu.svg?style=flat-square
+[stars-image]: https://img.shields.io/github/stars/icflorescu/mantine-contextmenu?style=flat-square
+[last-commit-image]: https://img.shields.io/github/last-commit/icflorescu/mantine-contextmenu?style=flat-square
+[closed-issues-image]: https://img.shields.io/github/issues-closed-raw/icflorescu/mantine-contextmenu?style=flat-square
+[language-image]: https://img.shields.io/github/languages/top/icflorescu/mantine-contextmenu?style=flat-square

package/dist/ContextMenu.d.ts

@@ -0,0 +1,12 @@
+import { ContextMenuItemOptions, ContextMenuOptions } from './types';
+export type ContextMenuInstanceOptions = {
+    x: number;
+    y: number;
+    items: ContextMenuItemOptions[];
+};
+type ContextMenuProps = ContextMenuOptions & ContextMenuInstanceOptions & {
+    onHide: () => void;
+};
+export declare function ContextMenu({ x, y, items, zIndex, shadow, borderRadius, onHide }: ContextMenuProps): JSX.Element;
+export {};
+//# sourceMappingURL=ContextMenu.d.ts.map

package/dist/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../ContextMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAYrE,MAAM,MAAM,0BAA0B,GAAG;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,sBAAsB,EAAE,CAAC;CACjC,CAAC;AAEF,KAAK,gBAAgB,GAAG,kBAAkB,GACxC,0BAA0B,GAAG;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,gBAAgB,eAmDlG"}

package/dist/ContextMenuDivider.d.ts

@@ -0,0 +1,2 @@
+export default function ContextMenuDivider(): JSX.Element;
+//# sourceMappingURL=ContextMenuDivider.d.ts.map

package/dist/ContextMenuDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuDivider.d.ts","sourceRoot":"","sources":["../ContextMenuDivider.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,kBAAkB,gBAGzC"}

package/dist/ContextMenuItem.d.ts

@@ -0,0 +1,4 @@
+import { ContextMenuItemOptions } from './types';
+import { WithRequiredProperty } from './utils';
+export default function ContextMenuItem({ icon, title, color, disabled, onClick, }: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title' | 'onClick'>): JSX.Element;
+//# sourceMappingURL=ContextMenuItem.d.ts.map

package/dist/ContextMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuItem.d.ts","sourceRoot":"","sources":["../ContextMenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA0C/C,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE,oBAAoB,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,eAUhF"}

package/dist/ContextMenuProvider.d.ts

@@ -0,0 +1,12 @@
+import type { ContextMenuProviderProps, ShowContextMenuFunction } from './types';
+/**
+ * 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, children, }: ContextMenuProviderProps): JSX.Element;
+/**
+ * Hook returning a function that shows a context menu.
+ */
+export declare function useContextMenu(): ShowContextMenuFunction;
+//# sourceMappingURL=ContextMenuProvider.d.ts.map

package/dist/ContextMenuProvider.d.ts.map

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

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var q=Object.create;var g=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},I=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of U(t))!K.call(e,n)&&n!==o&&g(e,n,{get:()=>t[n],enumerable:!(i=F(t,n))||i.enumerable});return e};var Y=(e,t,o)=>(o=e!=null?q(A(e)):{},I(t||!e||!e.__esModule?g(o,"default",{value:e,enumerable:!0}):o,e)),Z=e=>I(g({},"__esModule",{value:!0}),e);var j={};X(j,{ContextMenuProvider:()=>Q,humanize:()=>k,useContextMenu:()=>V});module.exports=Z(j);var p=Y(require("react"),1);var m=require("react");var x=require("@mantine/core"),s=require("@mantine/hooks");var z=require("@mantine/core"),R=require("react/jsx-runtime"),_=(0,z.createStyles)(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function h(){let{classes:e}=_();return(0,R.jsx)("div",{className:e.root})}var r=require("@mantine/core"),C=require("react/jsx-runtime"),G=(0,r.createStyles)((e,{color:t})=>{let o=(0,r.px)(e.spacing.sm)/2;return{root:{width:"100%",display:"flex",alignItems:"center",paddingTop:o,paddingBottom:o,paddingLeft:e.spacing.sm,paddingRight:e.spacing.sm,color:t&&e.colors[t][6],transition:"background .15s ease","&[disabled]":{cursor:"not-allowed",color:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[5]},"&:hover:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.15:.08:.25)},"&:active:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.3:.2:.5)}},icon:{fontSize:0,marginRight:e.spacing.xs},title:{whiteSpace:"nowrap"}}});function O({icon:e,title:t,color:o,disabled:i,onClick:n}){let{classes:a}=G({color:o});return(0,C.jsxs)(r.UnstyledButton,{className:a.root,disabled:i,onClick:n,children:[e&&(0,C.jsx)(r.Box,{className:a.icon,children:e}),(0,C.jsx)(r.Text,{className:a.title,size:"sm",children:t})]})}function k(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"),J=(0,x.createStyles)(e=>({root:{position:"fixed",border:`1px solid ${e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3]}`,overflow:"hidden",transition:"all .15s ease"}}));function T({x:e,y:t,items:o,zIndex:i,shadow:n,borderRadius:a,onHide:l}){(0,s.useWindowEvent)("resize",l),(0,s.useWindowEvent)("scroll",l);let v=(0,s.useClickOutside)(l),{ref:P,width:d,height:u}=(0,s.useElementSize)(),B=(0,s.useMergedRef)(v,P),M=0,b=0;typeof window<"u"&&({innerWidth:M,innerHeight:b}=window);let{classes:H,theme:{dir:W,spacing:D}}=J(),c=(0,x.px)(D.md),L=f=>y=>{l(),f(y)};return(0,w.jsx)(x.Paper,{ref:B,shadow:n,radius:a,className:H.root,sx:{zIndex:i,top:t+u+c>b?b-u-c:t,left:W==="ltr"?e+d+c>M?M-d-c:e:M-c-(e-d-c<0?d+c:e)},children:o.map(({key:f,onClick:y,title:N,...$})=>y?(0,w.jsx)(O,{title:N??k(f),onClick:L(y),...$},f):(0,w.jsx)(h,{},f))})}var S=require("react/jsx-runtime"),E=(0,m.createContext)(()=>()=>{});function Q({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:i}){let[n,a]=(0,m.useState)(null),l=()=>{a(null)},v=(P,d)=>u=>{u.preventDefault(),a({x:u.clientX,y:u.clientY,items:P,zIndex:d?.zIndex||e,shadow:d?.shadow||t,borderRadius:d?.borderRadius||o})};return(0,S.jsxs)(E.Provider,{value:v,children:[i,n&&(0,S.jsx)(T,{onHide:l,...n})]})}function V(){return(0,m.useContext)(E)}
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../index.ts", "../react-shim.mjs", "../ContextMenuProvider.tsx", "../ContextMenu.tsx", "../ContextMenuDivider.tsx", "../ContextMenuItem.tsx", "../utils.ts"],
+  "sourcesContent": ["export * from './ContextMenuProvider';\nexport { humanize } from './utils';\n", "import * as React from 'react';\nexport { React };\n", "import { createContext, useContext, useState } from 'react';\nimport { ContextMenu, ContextMenuInstanceOptions } from './ContextMenu';\nimport type { ContextMenuOptions, ContextMenuProviderProps, ShowContextMenuFunction } from './types';\n\nconst MenuContext = createContext<ShowContextMenuFunction>(() => () => undefined);\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n  zIndex = 9999,\n  shadow = 'sm',\n  borderRadius = 'xs',\n  children,\n}: ContextMenuProviderProps) {\n  const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n  const destroy = () => {\n    setData(null);\n  };\n\n  const showContextMenu: ShowContextMenuFunction = (items, options) => (e) => {\n    e.preventDefault();\n    setData({\n      x: e.clientX,\n      y: e.clientY,\n      items,\n      zIndex: options?.zIndex || zIndex,\n      shadow: options?.shadow || shadow,\n      borderRadius: options?.borderRadius || borderRadius,\n    });\n  };\n\n  return (\n    <MenuContext.Provider value={showContextMenu}>\n      {children}\n      {data && <ContextMenu onHide={destroy} {...data} />}\n    </MenuContext.Provider>\n  );\n}\n\n/**\n * Hook returning a function that shows a context menu.\n */\nexport function useContextMenu() {\n  return useContext(MenuContext);\n}\n", "import { Paper, createStyles, px } from '@mantine/core';\nimport { useClickOutside, useElementSize, useMergedRef, useWindowEvent } from '@mantine/hooks';\nimport { MouseEventHandler } from 'react';\nimport ContextMenuDivider from './ContextMenuDivider';\nimport ContextMenuItem from './ContextMenuItem';\nimport { ContextMenuItemOptions, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nconst useStyles = createStyles((theme) => ({\n  root: {\n    position: 'fixed',\n    border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,\n    overflow: 'hidden',\n    transition: 'all .15s ease',\n  },\n}));\n\nexport type ContextMenuInstanceOptions = {\n  x: number;\n  y: number;\n  items: ContextMenuItemOptions[];\n};\n\ntype ContextMenuProps = ContextMenuOptions &\n  ContextMenuInstanceOptions & {\n    onHide: () => void;\n  };\n\nexport function ContextMenu({ x, y, items, zIndex, shadow, borderRadius, onHide }: ContextMenuProps) {\n  useWindowEvent('resize', onHide);\n  useWindowEvent('scroll', onHide);\n\n  const clickOutsideRef = useClickOutside<HTMLDivElement>(onHide);\n  const { ref: sizeRef, width, height } = useElementSize();\n  const ref = useMergedRef(clickOutsideRef, sizeRef);\n\n  let windowWidth = 0;\n  let windowHeight = 0;\n  if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n  const {\n    classes,\n    theme: { dir, spacing },\n  } = useStyles();\n\n  const mdSpacing = px(spacing.md);\n\n  const handleClick: (onClick: MouseEventHandler<HTMLButtonElement>) => MouseEventHandler<HTMLButtonElement> =\n    (onClick) => (e) => {\n      onHide();\n      onClick(e);\n    };\n\n  return (\n    <Paper\n      ref={ref}\n      shadow={shadow}\n      radius={borderRadius}\n      className={classes.root}\n      sx={{\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      {items.map(({ key, onClick, title, ...otherOptions }) =>\n        onClick ? (\n          <ContextMenuItem key={key} title={title ?? humanize(key)} onClick={handleClick(onClick)} {...otherOptions} />\n        ) : (\n          <ContextMenuDivider key={key} />\n        )\n      )}\n    </Paper>\n  );\n}\n", "import { createStyles } from '@mantine/core';\n\nconst useStyles = createStyles((theme) => ({\n  root: {\n    height: 1,\n    background: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n  },\n}));\n\nexport default function ContextMenuDivider() {\n  const { classes } = useStyles();\n  return <div className={classes.root} />;\n}\n", "import { Box, Text, UnstyledButton, createStyles, px, type MantineColor } from '@mantine/core';\nimport { ContextMenuItemOptions } from './types';\nimport { WithRequiredProperty } from './utils';\n\nconst useStyles = createStyles((theme, { color }: { color?: MantineColor }) => {\n  const verticalPadding = px(theme.spacing.sm) / 2;\n  return {\n    root: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      paddingTop: verticalPadding,\n      paddingBottom: verticalPadding,\n      paddingLeft: theme.spacing.sm,\n      paddingRight: theme.spacing.sm,\n      color: color && theme.colors[color][6],\n      transition: 'background .15s ease',\n      '&[disabled]': {\n        cursor: 'not-allowed',\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n      },\n      '&:hover:not([disabled])': {\n        background: theme.fn.rgba(\n          color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n          color ? (theme.colorScheme === 'dark' ? 0.15 : 0.08) : 0.25\n        ),\n      },\n      '&:active:not([disabled])': {\n        background: theme.fn.rgba(\n          color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n          color ? (theme.colorScheme === 'dark' ? 0.3 : 0.2) : 0.5\n        ),\n      },\n    },\n    icon: {\n      fontSize: 0,\n      marginRight: theme.spacing.xs,\n    },\n    title: {\n      whiteSpace: 'nowrap',\n    },\n  };\n});\n\nexport default function ContextMenuItem({\n  icon,\n  title,\n  color,\n  disabled,\n  onClick,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title' | 'onClick'>) {\n  const { classes } = useStyles({ color });\n  return (\n    <UnstyledButton className={classes.root} disabled={disabled} onClick={onClick}>\n      {icon && <Box className={classes.icon}>{icon}</Box>}\n      <Text className={classes.title} size=\"sm\">\n        {title}\n      </Text>\n    </UnstyledButton>\n  );\n}\n", "export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n  [Property in Key]-?: Type[Property];\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", "ContextMenuProvider", "humanize", "useContextMenu", "__toCommonJS", "React", "import_react", "import_core", "import_hooks", "import_core", "import_jsx_runtime", "useStyles", "theme", "ContextMenuDivider", "classes", "import_core", "import_jsx_runtime", "useStyles", "theme", "color", "verticalPadding", "ContextMenuItem", "icon", "title", "disabled", "onClick", "classes", "humanize", "value", "str", "import_jsx_runtime", "useStyles", "theme", "ContextMenu", "x", "y", "items", "zIndex", "shadow", "borderRadius", "onHide", "clickOutsideRef", "sizeRef", "width", "height", "ref", "windowWidth", "windowHeight", "classes", "dir", "spacing", "mdSpacing", "handleClick", "onClick", "e", "key", "title", "otherOptions", "ContextMenuItem", "humanize", "ContextMenuDivider", "import_jsx_runtime", "MenuContext", "ContextMenuProvider", "zIndex", "shadow", "borderRadius", "children", "data", "setData", "destroy", "showContextMenu", "items", "options", "e", "ContextMenu", "useContextMenu"]
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ContextMenuProvider';
+export { humanize } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import*as c from"react";import{createContext as G,useContext as J,useState as Q}from"react";import{Paper as U,createStyles as A,px as K}from"@mantine/core";import{useClickOutside as X,useElementSize as Y,useMergedRef as Z,useWindowEvent as S}from"@mantine/hooks";import{createStyles as E}from"@mantine/core";import{jsx as H}from"react/jsx-runtime";var B=E(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function M(){let{classes:e}=B();return H("div",{className:e.root})}import{Box as W,Text as D,UnstyledButton as L,createStyles as N,px as $}from"@mantine/core";import{jsx as w,jsxs as F}from"react/jsx-runtime";var q=N((e,{color:t})=>{let o=$(e.spacing.sm)/2;return{root:{width:"100%",display:"flex",alignItems:"center",paddingTop:o,paddingBottom:o,paddingLeft:e.spacing.sm,paddingRight:e.spacing.sm,color:t&&e.colors[t][6],transition:"background .15s ease","&[disabled]":{cursor:"not-allowed",color:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[5]},"&:hover:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.15:.08:.25)},"&:active:not([disabled])":{background:e.fn.rgba(t?e.colors[t][6]:e.colorScheme==="dark"?e.colors.dark[3]:e.colors.gray[4],t?e.colorScheme==="dark"?.3:.2:.5)}},icon:{fontSize:0,marginRight:e.spacing.xs},title:{whiteSpace:"nowrap"}}});function y({icon:e,title:t,color:o,disabled:l,onClick:i}){let{classes:n}=q({color:o});return F(L,{className:n.root,disabled:l,onClick:i,children:[e&&w(W,{className:n.icon,children:e}),w(D,{className:n.title,size:"sm",children:t})]})}function g(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 k}from"react/jsx-runtime";var _=A(e=>({root:{position:"fixed",border:`1px solid ${e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3]}`,overflow:"hidden",transition:"all .15s ease"}}));function v({x:e,y:t,items:o,zIndex:l,shadow:i,borderRadius:n,onHide:a}){S("resize",a),S("scroll",a);let m=X(a),{ref:f,width:r,height:d}=Y(),b=Z(m,f),p=0,C=0;typeof window<"u"&&({innerWidth:p,innerHeight:C}=window);let{classes:h,theme:{dir:O,spacing:I}}=_(),s=K(I.md),z=u=>x=>{a(),u(x)};return k(U,{ref:b,shadow:i,radius:n,className:h.root,sx:{zIndex:l,top:t+d+s>C?C-d-s:t,left:O==="ltr"?e+r+s>p?p-r-s:e:p-s-(e-r-s<0?r+s:e)},children:o.map(({key:u,onClick:x,title:R,...T})=>x?k(y,{title:R??g(u),onClick:z(x),...T},u):k(M,{},u))})}import{jsx as V,jsxs as j}from"react/jsx-runtime";var P=G(()=>()=>{});function Se({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:l}){let[i,n]=Q(null),a=()=>{n(null)},m=(f,r)=>d=>{d.preventDefault(),n({x:d.clientX,y:d.clientY,items:f,zIndex:r?.zIndex||e,shadow:r?.shadow||t,borderRadius:r?.borderRadius||o})};return j(P.Provider,{value:m,children:[l,i&&V(v,{onHide:a,...i})]})}function ve(){return J(P)}export{Se as ContextMenuProvider,g as humanize,ve as useContextMenu};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../react-shim.mjs", "../ContextMenuProvider.tsx", "../ContextMenu.tsx", "../ContextMenuDivider.tsx", "../ContextMenuItem.tsx", "../utils.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, useContext, useState } from 'react';\nimport { ContextMenu, ContextMenuInstanceOptions } from './ContextMenu';\nimport type { ContextMenuOptions, ContextMenuProviderProps, ShowContextMenuFunction } from './types';\n\nconst MenuContext = createContext<ShowContextMenuFunction>(() => () => undefined);\n\n/**\n * Provider that allows to show a context menu anywhere in your application.\n * If you wrap your application with this provider, you can use the `useContextMenu` hook\n * anywhere in the component tree to access a function that shows the context menu.\n */\nexport function ContextMenuProvider({\n  zIndex = 9999,\n  shadow = 'sm',\n  borderRadius = 'xs',\n  children,\n}: ContextMenuProviderProps) {\n  const [data, setData] = useState<(ContextMenuInstanceOptions & ContextMenuOptions) | null>(null);\n\n  const destroy = () => {\n    setData(null);\n  };\n\n  const showContextMenu: ShowContextMenuFunction = (items, options) => (e) => {\n    e.preventDefault();\n    setData({\n      x: e.clientX,\n      y: e.clientY,\n      items,\n      zIndex: options?.zIndex || zIndex,\n      shadow: options?.shadow || shadow,\n      borderRadius: options?.borderRadius || borderRadius,\n    });\n  };\n\n  return (\n    <MenuContext.Provider value={showContextMenu}>\n      {children}\n      {data && <ContextMenu onHide={destroy} {...data} />}\n    </MenuContext.Provider>\n  );\n}\n\n/**\n * Hook returning a function that shows a context menu.\n */\nexport function useContextMenu() {\n  return useContext(MenuContext);\n}\n", "import { Paper, createStyles, px } from '@mantine/core';\nimport { useClickOutside, useElementSize, useMergedRef, useWindowEvent } from '@mantine/hooks';\nimport { MouseEventHandler } from 'react';\nimport ContextMenuDivider from './ContextMenuDivider';\nimport ContextMenuItem from './ContextMenuItem';\nimport { ContextMenuItemOptions, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nconst useStyles = createStyles((theme) => ({\n  root: {\n    position: 'fixed',\n    border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,\n    overflow: 'hidden',\n    transition: 'all .15s ease',\n  },\n}));\n\nexport type ContextMenuInstanceOptions = {\n  x: number;\n  y: number;\n  items: ContextMenuItemOptions[];\n};\n\ntype ContextMenuProps = ContextMenuOptions &\n  ContextMenuInstanceOptions & {\n    onHide: () => void;\n  };\n\nexport function ContextMenu({ x, y, items, zIndex, shadow, borderRadius, onHide }: ContextMenuProps) {\n  useWindowEvent('resize', onHide);\n  useWindowEvent('scroll', onHide);\n\n  const clickOutsideRef = useClickOutside<HTMLDivElement>(onHide);\n  const { ref: sizeRef, width, height } = useElementSize();\n  const ref = useMergedRef(clickOutsideRef, sizeRef);\n\n  let windowWidth = 0;\n  let windowHeight = 0;\n  if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n  const {\n    classes,\n    theme: { dir, spacing },\n  } = useStyles();\n\n  const mdSpacing = px(spacing.md);\n\n  const handleClick: (onClick: MouseEventHandler<HTMLButtonElement>) => MouseEventHandler<HTMLButtonElement> =\n    (onClick) => (e) => {\n      onHide();\n      onClick(e);\n    };\n\n  return (\n    <Paper\n      ref={ref}\n      shadow={shadow}\n      radius={borderRadius}\n      className={classes.root}\n      sx={{\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      {items.map(({ key, onClick, title, ...otherOptions }) =>\n        onClick ? (\n          <ContextMenuItem key={key} title={title ?? humanize(key)} onClick={handleClick(onClick)} {...otherOptions} />\n        ) : (\n          <ContextMenuDivider key={key} />\n        )\n      )}\n    </Paper>\n  );\n}\n", "import { createStyles } from '@mantine/core';\n\nconst useStyles = createStyles((theme) => ({\n  root: {\n    height: 1,\n    background: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n  },\n}));\n\nexport default function ContextMenuDivider() {\n  const { classes } = useStyles();\n  return <div className={classes.root} />;\n}\n", "import { Box, Text, UnstyledButton, createStyles, px, type MantineColor } from '@mantine/core';\nimport { ContextMenuItemOptions } from './types';\nimport { WithRequiredProperty } from './utils';\n\nconst useStyles = createStyles((theme, { color }: { color?: MantineColor }) => {\n  const verticalPadding = px(theme.spacing.sm) / 2;\n  return {\n    root: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      paddingTop: verticalPadding,\n      paddingBottom: verticalPadding,\n      paddingLeft: theme.spacing.sm,\n      paddingRight: theme.spacing.sm,\n      color: color && theme.colors[color][6],\n      transition: 'background .15s ease',\n      '&[disabled]': {\n        cursor: 'not-allowed',\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n      },\n      '&:hover:not([disabled])': {\n        background: theme.fn.rgba(\n          color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n          color ? (theme.colorScheme === 'dark' ? 0.15 : 0.08) : 0.25\n        ),\n      },\n      '&:active:not([disabled])': {\n        background: theme.fn.rgba(\n          color ? theme.colors[color][6] : theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],\n          color ? (theme.colorScheme === 'dark' ? 0.3 : 0.2) : 0.5\n        ),\n      },\n    },\n    icon: {\n      fontSize: 0,\n      marginRight: theme.spacing.xs,\n    },\n    title: {\n      whiteSpace: 'nowrap',\n    },\n  };\n});\n\nexport default function ContextMenuItem({\n  icon,\n  title,\n  color,\n  disabled,\n  onClick,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title' | 'onClick'>) {\n  const { classes } = useStyles({ color });\n  return (\n    <UnstyledButton className={classes.root} disabled={disabled} onClick={onClick}>\n      {icon && <Box className={classes.icon}>{icon}</Box>}\n      <Text className={classes.title} size=\"sm\">\n        {title}\n      </Text>\n    </UnstyledButton>\n  );\n}\n", "export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n  [Property in Key]-?: Type[Property];\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": ["React", "createContext", "useContext", "useState", "Paper", "createStyles", "px", "useClickOutside", "useElementSize", "useMergedRef", "useWindowEvent", "createStyles", "jsx", "useStyles", "theme", "ContextMenuDivider", "classes", "Box", "Text", "UnstyledButton", "createStyles", "px", "jsx", "jsxs", "useStyles", "theme", "color", "verticalPadding", "ContextMenuItem", "icon", "title", "disabled", "onClick", "classes", "humanize", "value", "str", "jsx", "useStyles", "createStyles", "theme", "ContextMenu", "x", "y", "items", "zIndex", "shadow", "borderRadius", "onHide", "useWindowEvent", "clickOutsideRef", "useClickOutside", "sizeRef", "width", "height", "useElementSize", "ref", "useMergedRef", "windowWidth", "windowHeight", "classes", "dir", "spacing", "mdSpacing", "px", "handleClick", "onClick", "e", "Paper", "key", "title", "otherOptions", "ContextMenuItem", "humanize", "ContextMenuDivider", "jsx", "jsxs", "MenuContext", "createContext", "ContextMenuProvider", "zIndex", "shadow", "borderRadius", "children", "data", "setData", "useState", "destroy", "showContextMenu", "items", "options", "e", "ContextMenu", "useContextMenu", "useContext"]
+}

package/dist/types.d.ts

@@ -0,0 +1,66 @@
+import type { MantineColor, MantineNumberSize, MantineShadow } from '@mantine/core';
+import type { MouseEventHandler, ReactNode } from 'react';
+export type ContextMenuOptions = {
+    /**
+     * zIndex of context menu
+     * @default 9999
+     */
+    zIndex?: number;
+    /**
+     * Context menu shadow
+     * @default 'sm'
+     */
+    shadow?: MantineShadow;
+    /**
+     * Context menu border radius
+     * @default 'xs'
+     */
+    borderRadius?: MantineNumberSize;
+};
+export type ContextMenuProviderProps = ContextMenuOptions & {
+    children: ReactNode;
+};
+export type ContextMenuItemOptions = {
+    /**
+     * Unique key of the context menu item
+     */
+    key: string;
+} & ({
+    /**
+     * Optional context menu item icon
+     */
+    icon?: ReactNode;
+    /**
+     * Optional context menu item title; if not provided, one will be generated automatically by "humanizing" the key
+     * @default humanize(key)
+     */
+    title?: 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: MouseEventHandler<HTMLButtonElement>;
+} | {
+    icon?: never;
+    title?: never;
+    color?: never;
+    disabled?: never;
+    onClick?: never;
+});
+export type ShowContextMenuFunction = (
+/**
+ * Context menu items
+ */
+items: ContextMenuItemOptions[], 
+/**
+ * Context menu options (overrides provider options)
+ */
+options?: ContextMenuOptions) => MouseEventHandler;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IAEvB;;;OAGG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,GAAG;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,CACA;IACE;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAC/C,GACD;IACE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CACJ,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;AACpC;;GAEG;AACH,KAAK,EAAE,sBAAsB,EAAE;AAE/B;;GAEG;AACH,OAAO,CAAC,EAAE,kBAAkB,KACzB,iBAAiB,CAAC"}

package/dist/utils.d.ts

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

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,CAAC,IAAI,EAAE,GAAG,SAAS,MAAM,IAAI,IAAI,IAAI,GAAG;KACrE,QAAQ,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;CACpC,CAAC;AAEF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,UAOrC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "mantine-contextmenu",
+  "version": "1.0.0",
+  "description": "ContextMenu for Mantine UI",
+  "keywords": [
+    "ui",
+    "mantine",
+    "datatable",
+    "datagrid",
+    "async",
+    "sorting",
+    "pagination",
+    "context menu",
+    "react",
+    "typescript"
+  ],
+  "repository": "icflorescu/mantine-contextmenu",
+  "homepage": "https://icflorescu.github.io/mantine-contextmenu/",
+  "bugs": {
+    "url": "https://github.com/icflorescu/mantine-contextmenu/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ionut-Cristian Florescu",
+    "email": "ionut.florescu@gmail.com",
+    "url": "https://github.com/icflorescu"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "rm -rf dist",
+    "build": "rm -rf dist && NODE_NO_WARNINGS=1 node build.mjs && tsc --emitDeclarationOnly",
+    "postbuild": "cp -f ../LICENSE LICENSE && cp -f ../README.md README.md",
+    "lint": "eslint . --ext=.ts,.tsx && tsc --noEmit"
+  },
+  "devDependencies": {
+    "@mantine/core": "^6.0.6",
+    "@mantine/hooks": "^6.0.6",
+    "@tabler/icons-react": "^2.14.0",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "esbuild": "^0.17.15",
+    "react": "^18.2.0",
+    "typescript": "^5.0.4"
+  },
+  "peerDependencies": {
+    "@mantine/core": "^6.0.5",
+    "@mantine/hooks": "^6.0.5",
+    "react": "^18.2.0"
+  }
+}