mantine-contextmenu 1.2.17 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/ContextMenu.d.ts +1 -2
- package/dist/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenuDivider.d.ts +2 -3
- package/dist/ContextMenuDivider.d.ts.map +1 -1
- package/dist/ContextMenuItem.d.ts +1 -1
- package/dist/ContextMenuItem.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +4 -4
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -19,6 +19,7 @@ The "dark-theme aware" **context-menu** for your Mantine UI applications, built
|
|
|
19
19
|
- **[Simple API](https://icflorescu.github.io/mantine-contextmenu/getting-started)** - just wrap your application in the `ContextMenuProvider` component and use the hook-generated function in your code
|
|
20
20
|
- **[Custom content support](https://icflorescu.github.io/mantine-contextmenu/examples/custom-content)** - use any Mantine component as context menu content
|
|
21
21
|
- **[Highly customizable styling](https://icflorescu.github.io/mantine-contextmenu/examples/styling)** - use the `className`/`classNames`, `style`/`styles` and `sx` props to customize the context menu appearance
|
|
22
|
+
- **[Written in Typescript and well-documented](https://icflorescu.github.io/mantine-contextmenu/type-definitions)** - with detailed JSDoc annotations for each exported function and component
|
|
22
23
|
|
|
23
24
|
## Full documentation and examples
|
|
24
25
|
|
package/dist/ContextMenu.d.ts
CHANGED
|
@@ -4,9 +4,8 @@ export type ContextMenuInstanceOptions = {
|
|
|
4
4
|
y: number;
|
|
5
5
|
content: ContextMenuContent;
|
|
6
6
|
};
|
|
7
|
-
type ContextMenuProps = ContextMenuOptions & ContextMenuInstanceOptions & {
|
|
7
|
+
export type ContextMenuProps = ContextMenuOptions & ContextMenuInstanceOptions & {
|
|
8
8
|
onHide: () => void;
|
|
9
9
|
};
|
|
10
10
|
export declare function ContextMenu({ x, y, content, zIndex, shadow, borderRadius, onHide, className, style, sx, classNames, styles, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export {};
|
|
12
11
|
//# sourceMappingURL=ContextMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../ContextMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AActE,MAAM,MAAM,0BAA0B,GAAG;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../ContextMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AActE,MAAM,MAAM,0BAA0B,GAAG;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAC/C,0BAA0B,GAAG;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAC1B,CAAC,EACD,CAAC,EACD,OAAO,EACP,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EACF,UAAU,EACV,MAAM,GACP,EAAE,gBAAgB,2CAoElB"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { type Sx } from '@mantine/core';
|
|
2
2
|
import type { CSSProperties } from 'react';
|
|
3
|
-
type ContextMenuDividerProps = {
|
|
3
|
+
export type ContextMenuDividerProps = {
|
|
4
4
|
className: string;
|
|
5
5
|
sx: Sx | (Sx | undefined)[] | undefined;
|
|
6
6
|
style: CSSProperties;
|
|
7
7
|
};
|
|
8
|
-
export
|
|
9
|
-
export {};
|
|
8
|
+
export declare function ContextMenuDivider({ className, sx, style }: ContextMenuDividerProps): import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
//# sourceMappingURL=ContextMenuDivider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuDivider.d.ts","sourceRoot":"","sources":["../ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAS3C,
|
|
1
|
+
{"version":3,"file":"ContextMenuDivider.d.ts","sourceRoot":"","sources":["../ContextMenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAS3C,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC;IACxC,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,uBAAuB,2CAGnF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ContextMenuItemOptions } from './types';
|
|
2
2
|
import { WithRequiredProperty } from './utils';
|
|
3
|
-
export
|
|
3
|
+
export declare function ContextMenuItem({ className, style, icon, title, color, disabled, onClick, }: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title' | 'onClick'>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
//# sourceMappingURL=ContextMenuItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE,oBAAoB,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,2CAUhF"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var V=Object.create;var k=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var ne=(e,t)=>{for(var o in t)k(e,o,{get:t[o],enumerable:!0})}
|
|
1
|
+
"use strict";var V=Object.create;var k=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var ne=(e,t)=>{for(var o in t)k(e,o,{get:t[o],enumerable:!0})},$=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ee(t))!oe.call(e,n)&&n!==o&&k(e,n,{get:()=>t[n],enumerable:!(r=j(t,n))||r.enumerable});return e};var re=(e,t,o)=>(o=e!=null?V(te(e)):{},$(t||!e||!e.__esModule?k(o,"default",{value:e,enumerable:!0}):o,e)),se=e=>$(k({},"__esModule",{value:!0}),e);var le={};ne(le,{ContextMenu:()=>B,ContextMenuDivider:()=>R,ContextMenuItem:()=>E,ContextMenuProvider:()=>pe,humanize:()=>w,useContextMenu:()=>de});module.exports=se(le);var m=re(require("react"),1);var d=require("@mantine/core"),c=require("@mantine/hooks");var v=require("@mantine/core"),A=require("react/jsx-runtime"),ie=(0,v.createStyles)(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function R({className:e,sx:t,style:o}){let{cx:r,classes:n}=ie();return(0,A.jsx)(v.Box,{className:r(n.root,e),sx:t,style:o})}var i=require("@mantine/core"),M=require("react/jsx-runtime"),ae=(0,i.createStyles)((e,{color:t})=>{let o=(0,i.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 E({className:e,style:t,icon:o,title:r,color:n,disabled:x,onClick:a}){let{cx:C,classes:l}=ae({color:n});return(0,M.jsxs)(i.UnstyledButton,{className:C(l.root,e),style:t,disabled:x,onClick:a,children:[o&&(0,M.jsx)(i.Box,{className:l.icon,children:o}),(0,M.jsx)(i.Text,{className:l.title,size:"sm",children:r})]})}function w(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 b=require("react/jsx-runtime"),q={},ce=(0,d.createStyles)(e=>({root:{position:"fixed",border:`1px solid ${e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3]}`,overflow:"hidden",transition:"all .15s ease"}}));function B({x:e,y:t,content:o,zIndex:r,shadow:n,borderRadius:x,onHide:a,className:C,style:l,sx:s,classNames:p,styles:O}){(0,c.useWindowEvent)("resize",a),(0,c.useWindowEvent)("scroll",a);let U=(0,c.useClickOutside)(a),{ref:K,width:S,height:N}=(0,c.useElementSize)(),Y=(0,c.useMergedRef)(U,K),g=0,T=0;typeof window<"u"&&({innerWidth:g,innerHeight:T}=window);let _=f=>P=>{a(),f(P)},{cx:z,classes:J,theme:D}=ce(),{dir:X,spacing:Z}=D,I=typeof O=="function"?O(D,q,q):O,u=(0,d.px)(Z.md);return(0,b.jsx)(d.Paper,{ref:Y,shadow:n,radius:x,className:z(J.root,C,p?.root),style:{...I?.root,...l},sx:[{zIndex:r,top:t+N+u>T?T-N-u:t,left:X==="ltr"?e+S+u>g?g-S-u:e:g-u-(e-S-u<0?S+u:e)},...(0,d.packSx)(s)],children:Array.isArray(o)?o.map(({key:f,className:P,sx:W,style:H,onClick:L,title:G,...Q})=>L?(0,b.jsx)(E,{className:z(p?.item,P),sx:W,style:{...I?.item,...H},title:G??w(f),onClick:_(L),...Q},f):(0,b.jsx)(R,{className:z(p?.divider,P),sx:W,style:{...I?.divider,...H}},f)):o(a)})}var y=require("react");var h=require("react/jsx-runtime"),F=(0,y.createContext)(()=>()=>{});function pe({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:r}){let[n,x]=(0,y.useState)(null),a=()=>{x(null)},C=(l,s)=>p=>{p.preventDefault(),p.stopPropagation(),x({x:p.clientX,y:p.clientY,content:l,zIndex:s?.zIndex||e,shadow:s?.shadow||t,borderRadius:s?.borderRadius||o,className:s?.className,style:s?.style,sx:s?.sx,classNames:s?.classNames,styles:s?.styles})};return(0,h.jsxs)(F.Provider,{value:C,children:[r,n&&(0,h.jsx)(B,{onHide:a,...n})]})}function de(){return(0,y.useContext)(F)}
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../index.ts", "../react-shim.mjs", "../
|
|
4
|
-
"sourcesContent": ["export * from './
|
|
5
|
-
"mappings": "mkBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,
|
|
6
|
-
"names": ["package_exports", "__export", "ContextMenuProvider", "humanize", "useContextMenu", "__toCommonJS", "React", "
|
|
3
|
+
"sources": ["../index.ts", "../react-shim.mjs", "../ContextMenu.tsx", "../ContextMenuDivider.tsx", "../ContextMenuItem.tsx", "../utils.ts", "../ContextMenuProvider.tsx"],
|
|
4
|
+
"sourcesContent": ["export * from './ContextMenu';\nexport * from './ContextMenuDivider';\nexport * from './ContextMenuItem';\nexport * from './ContextMenuProvider';\nexport { humanize } from './utils';\n", "import * as React from 'react';\nexport { React };\n", "import { Paper, createStyles, packSx, px } from '@mantine/core';\nimport { useClickOutside, useElementSize, useMergedRef, useWindowEvent } from '@mantine/hooks';\nimport { CSSProperties, MouseEventHandler } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nconst EMPTY_OBJECT = {};\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 content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({\n x,\n y,\n content,\n zIndex,\n shadow,\n borderRadius,\n onHide,\n className,\n style,\n sx,\n classNames,\n styles,\n}: 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 handleClick: (onClick: MouseEventHandler<HTMLButtonElement>) => MouseEventHandler<HTMLButtonElement> =\n (onClick) => (e) => {\n onHide();\n onClick(e);\n };\n\n const { cx, classes, theme } = useStyles();\n const { dir, spacing } = theme;\n const styleProperties = typeof styles === 'function' ? styles(theme, EMPTY_OBJECT, EMPTY_OBJECT) : styles;\n const mdSpacing = px(spacing.md);\n\n return (\n <Paper\n ref={ref}\n shadow={shadow}\n radius={borderRadius}\n className={cx(classes.root, className, classNames?.root)}\n style={{ ...styleProperties?.root, ...style } as CSSProperties}\n sx={[\n {\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 ...packSx(sx),\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, className, sx, style, onClick, title, ...otherOptions }) =>\n onClick ? (\n <ContextMenuItem\n key={key}\n className={cx(classNames?.item, className)}\n sx={sx}\n style={{ ...styleProperties?.item, ...style } as CSSProperties}\n title={title ?? humanize(key)}\n onClick={handleClick(onClick)}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={cx(classNames?.divider, className)}\n sx={sx}\n style={{ ...styleProperties?.divider, ...style } as CSSProperties}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n", "import { Box, createStyles, type Sx } from '@mantine/core';\nimport type { CSSProperties } from 'react';\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 type ContextMenuDividerProps = {\n className: string;\n sx: Sx | (Sx | undefined)[] | undefined;\n style: CSSProperties;\n};\n\nexport function ContextMenuDivider({ className, sx, style }: ContextMenuDividerProps) {\n const { cx, classes } = useStyles();\n return <Box className={cx(classes.root, className)} sx={sx} style={style} />;\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 function ContextMenuItem({\n className,\n style,\n icon,\n title,\n color,\n disabled,\n onClick,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title' | 'onClick'>) {\n const { cx, classes } = useStyles({ color });\n return (\n <UnstyledButton className={cx(classes.root, className)} style={style} 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", "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 = (content, options) => (e) => {\n e.preventDefault();\n e.stopPropagation();\n setData({\n x: e.clientX,\n y: e.clientY,\n content,\n zIndex: options?.zIndex || zIndex,\n shadow: options?.shadow || shadow,\n borderRadius: options?.borderRadius || borderRadius,\n className: options?.className,\n style: options?.style,\n sx: options?.sx,\n classNames: options?.classNames,\n styles: options?.styles,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["package_exports", "__export", "ContextMenu", "ContextMenuDivider", "ContextMenuItem", "ContextMenuProvider", "humanize", "useContextMenu", "__toCommonJS", "React", "import_core", "import_hooks", "import_core", "import_jsx_runtime", "useStyles", "theme", "ContextMenuDivider", "className", "sx", "style", "cx", "classes", "import_core", "import_jsx_runtime", "useStyles", "theme", "color", "verticalPadding", "ContextMenuItem", "className", "style", "icon", "title", "disabled", "onClick", "cx", "classes", "humanize", "value", "str", "import_jsx_runtime", "EMPTY_OBJECT", "useStyles", "theme", "ContextMenu", "x", "y", "content", "zIndex", "shadow", "borderRadius", "onHide", "className", "style", "sx", "classNames", "styles", "clickOutsideRef", "sizeRef", "width", "height", "ref", "windowWidth", "windowHeight", "handleClick", "onClick", "e", "cx", "classes", "dir", "spacing", "styleProperties", "mdSpacing", "key", "title", "otherOptions", "ContextMenuItem", "humanize", "ContextMenuDivider", "import_react", "import_jsx_runtime", "MenuContext", "ContextMenuProvider", "zIndex", "shadow", "borderRadius", "children", "data", "setData", "destroy", "showContextMenu", "content", "options", "e", "ContextMenu", "useContextMenu"]
|
|
7
7
|
}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as l from"react";import{Paper as te,createStyles as oe,packSx as ne,px as re}from"@mantine/core";import{useClickOutside as se,useElementSize as ie,useMergedRef as ae,useWindowEvent as R}from"@mantine/hooks";import{Box as K,createStyles as Y}from"@mantine/core";import{jsx as J}from"react/jsx-runtime";var _=Y(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function T({className:e,sx:t,style:o}){let{cx:a,classes:s}=_();return J(K,{className:a(s.root,e),sx:t,style:o})}import{Box as X,Text as Z,UnstyledButton as G,createStyles as Q,px as V}from"@mantine/core";import{jsx as z,jsxs as ee}from"react/jsx-runtime";var j=Q((e,{color:t})=>{let o=V(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 I({className:e,style:t,icon:o,title:a,color:s,disabled:d,onClick:r}){let{cx:u,classes:c}=j({color:s});return ee(G,{className:u(c.root,e),style:t,disabled:d,onClick:r,children:[o&&z(X,{className:c.icon,children:o}),z(Z,{className:c.title,size:"sm",children:a})]})}function P(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 E={},ce=oe(e=>({root:{position:"fixed",border:`1px solid ${e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3]}`,overflow:"hidden",transition:"all .15s ease"}}));function B({x:e,y:t,content:o,zIndex:a,shadow:s,borderRadius:d,onHide:r,className:u,style:c,sx:n,classNames:i,styles:f}){R("resize",r),R("scroll",r);let D=se(r),{ref:W,width:m,height:v}=ie(),H=ae(D,W),y=0,M=0;typeof window<"u"&&({innerWidth:y,innerHeight:M}=window);let L=x=>C=>{r(),x(C)},{cx:S,classes:$,theme:w}=ce(),{dir:A,spacing:q}=w,g=typeof f=="function"?f(w,E,E):f,p=re(q.md);return k(te,{ref:H,shadow:s,radius:d,className:S($.root,u,i?.root),style:{...g?.root,...c},sx:[{zIndex:a,top:t+v+p>M?M-v-p:t,left:A==="ltr"?e+m+p>y?y-m-p:e:y-p-(e-m-p<0?m+p:e)},...ne(n)],children:Array.isArray(o)?o.map(({key:x,className:C,sx:b,style:h,onClick:O,title:F,...U})=>O?k(I,{className:S(i?.item,C),sx:b,style:{...g?.item,...h},title:F??P(x),onClick:L(O),...U},x):k(T,{className:S(i?.divider,C),sx:b,style:{...g?.divider,...h}},x)):o(r)})}import{createContext as pe,useContext as de,useState as le}from"react";import{jsx as ue,jsxs as xe}from"react/jsx-runtime";var N=pe(()=>()=>{});function We({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:a}){let[s,d]=le(null),r=()=>{d(null)},u=(c,n)=>i=>{i.preventDefault(),i.stopPropagation(),d({x:i.clientX,y:i.clientY,content:c,zIndex:n?.zIndex||e,shadow:n?.shadow||t,borderRadius:n?.borderRadius||o,className:n?.className,style:n?.style,sx:n?.sx,classNames:n?.classNames,styles:n?.styles})};return xe(N.Provider,{value:u,children:[a,s&&ue(B,{onHide:r,...s})]})}function He(){return de(N)}export{B as ContextMenu,T as ContextMenuDivider,I as ContextMenuItem,We as ContextMenuProvider,P as humanize,He as useContextMenu};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../react-shim.mjs", "../
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {
|
|
5
|
-
"mappings": "AAAA,UAAYA,MAAW,QCAvB,OAAS,
|
|
6
|
-
"names": ["React", "
|
|
3
|
+
"sources": ["../react-shim.mjs", "../ContextMenu.tsx", "../ContextMenuDivider.tsx", "../ContextMenuItem.tsx", "../utils.ts", "../ContextMenuProvider.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Paper, createStyles, packSx, px } from '@mantine/core';\nimport { useClickOutside, useElementSize, useMergedRef, useWindowEvent } from '@mantine/hooks';\nimport { CSSProperties, MouseEventHandler } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nconst EMPTY_OBJECT = {};\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 content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({\n x,\n y,\n content,\n zIndex,\n shadow,\n borderRadius,\n onHide,\n className,\n style,\n sx,\n classNames,\n styles,\n}: 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 handleClick: (onClick: MouseEventHandler<HTMLButtonElement>) => MouseEventHandler<HTMLButtonElement> =\n (onClick) => (e) => {\n onHide();\n onClick(e);\n };\n\n const { cx, classes, theme } = useStyles();\n const { dir, spacing } = theme;\n const styleProperties = typeof styles === 'function' ? styles(theme, EMPTY_OBJECT, EMPTY_OBJECT) : styles;\n const mdSpacing = px(spacing.md);\n\n return (\n <Paper\n ref={ref}\n shadow={shadow}\n radius={borderRadius}\n className={cx(classes.root, className, classNames?.root)}\n style={{ ...styleProperties?.root, ...style } as CSSProperties}\n sx={[\n {\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 ...packSx(sx),\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, className, sx, style, onClick, title, ...otherOptions }) =>\n onClick ? (\n <ContextMenuItem\n key={key}\n className={cx(classNames?.item, className)}\n sx={sx}\n style={{ ...styleProperties?.item, ...style } as CSSProperties}\n title={title ?? humanize(key)}\n onClick={handleClick(onClick)}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={cx(classNames?.divider, className)}\n sx={sx}\n style={{ ...styleProperties?.divider, ...style } as CSSProperties}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n", "import { Box, createStyles, type Sx } from '@mantine/core';\nimport type { CSSProperties } from 'react';\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 type ContextMenuDividerProps = {\n className: string;\n sx: Sx | (Sx | undefined)[] | undefined;\n style: CSSProperties;\n};\n\nexport function ContextMenuDivider({ className, sx, style }: ContextMenuDividerProps) {\n const { cx, classes } = useStyles();\n return <Box className={cx(classes.root, className)} sx={sx} style={style} />;\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 function ContextMenuItem({\n className,\n style,\n icon,\n title,\n color,\n disabled,\n onClick,\n}: WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title' | 'onClick'>) {\n const { cx, classes } = useStyles({ color });\n return (\n <UnstyledButton className={cx(classes.root, className)} style={style} 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", "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 = (content, options) => (e) => {\n e.preventDefault();\n e.stopPropagation();\n setData({\n x: e.clientX,\n y: e.clientY,\n content,\n zIndex: options?.zIndex || zIndex,\n shadow: options?.shadow || shadow,\n borderRadius: options?.borderRadius || borderRadius,\n className: options?.className,\n style: options?.style,\n sx: options?.sx,\n classNames: options?.classNames,\n styles: options?.styles,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "Paper", "createStyles", "packSx", "px", "useClickOutside", "useElementSize", "useMergedRef", "useWindowEvent", "Box", "createStyles", "jsx", "useStyles", "theme", "ContextMenuDivider", "className", "sx", "style", "cx", "classes", "Box", "Text", "UnstyledButton", "createStyles", "px", "jsx", "jsxs", "useStyles", "theme", "color", "verticalPadding", "ContextMenuItem", "className", "style", "icon", "title", "disabled", "onClick", "cx", "classes", "humanize", "value", "str", "jsx", "EMPTY_OBJECT", "useStyles", "createStyles", "theme", "ContextMenu", "x", "y", "content", "zIndex", "shadow", "borderRadius", "onHide", "className", "style", "sx", "classNames", "styles", "useWindowEvent", "clickOutsideRef", "useClickOutside", "sizeRef", "width", "height", "useElementSize", "ref", "useMergedRef", "windowWidth", "windowHeight", "handleClick", "onClick", "e", "cx", "classes", "dir", "spacing", "styleProperties", "mdSpacing", "px", "Paper", "packSx", "key", "title", "otherOptions", "ContextMenuItem", "humanize", "ContextMenuDivider", "createContext", "useContext", "useState", "jsx", "jsxs", "MenuContext", "createContext", "ContextMenuProvider", "zIndex", "shadow", "borderRadius", "children", "data", "setData", "useState", "destroy", "showContextMenu", "content", "options", "e", "ContextMenu", "useContextMenu", "useContext"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-contextmenu",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Enhance your Mantine UI applications usability with customizable context menus",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -52,17 +52,17 @@
|
|
|
52
52
|
"lint": "eslint . --ext=.ts,.tsx && tsc --noEmit"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@mantine/core": "^6.0.
|
|
56
|
-
"@mantine/hooks": "^6.0.
|
|
57
|
-
"@types/react": "^18.2.
|
|
58
|
-
"@types/react-dom": "^18.2.
|
|
59
|
-
"esbuild": "^0.18.
|
|
55
|
+
"@mantine/core": "^6.0.14",
|
|
56
|
+
"@mantine/hooks": "^6.0.14",
|
|
57
|
+
"@types/react": "^18.2.14",
|
|
58
|
+
"@types/react-dom": "^18.2.6",
|
|
59
|
+
"esbuild": "^0.18.6",
|
|
60
60
|
"react": "^18.2.0",
|
|
61
61
|
"typescript": "^5.1.3"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
|
-
"@mantine/core": "^6.0.
|
|
65
|
-
"@mantine/hooks": "^6.0.
|
|
64
|
+
"@mantine/core": "^6.0.14",
|
|
65
|
+
"@mantine/hooks": "^6.0.14",
|
|
66
66
|
"react": "^18.2.0"
|
|
67
67
|
}
|
|
68
68
|
}
|