mantine-contextmenu 1.0.4 → 1.1.1
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/dist/ContextMenu.d.ts +3 -3
- package/dist/ContextMenu.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +3 -3
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +3 -3
- package/dist/types.d.ts +4 -2
- package/dist/types.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/ContextMenu.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { ContextMenuContent, ContextMenuOptions } from './types';
|
|
2
2
|
export type ContextMenuInstanceOptions = {
|
|
3
3
|
x: number;
|
|
4
4
|
y: number;
|
|
5
|
-
|
|
5
|
+
content: ContextMenuContent;
|
|
6
6
|
};
|
|
7
7
|
type ContextMenuProps = ContextMenuOptions & ContextMenuInstanceOptions & {
|
|
8
8
|
onHide: () => void;
|
|
9
9
|
};
|
|
10
|
-
export declare function ContextMenu({ x, y,
|
|
10
|
+
export declare function ContextMenu({ x, y, content, zIndex, shadow, borderRadius, onHide }: ContextMenuProps): JSX.Element;
|
|
11
11
|
export {};
|
|
12
12
|
//# sourceMappingURL=ContextMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../ContextMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../ContextMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAYtE,MAAM,MAAM,0BAA0B,GAAG;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,kBAAkB,CAAC;CAC7B,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,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,gBAAgB,eA0DpG"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var A=Object.create;var g=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},z=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of F(t))!K.call(e,n)&&n!==o&&g(e,n,{get:()=>t[n],enumerable:!(i=q(t,n))||i.enumerable});return e};var Y=(e,t,o)=>(o=e!=null?A(U(e)):{},z(t||!e||!e.__esModule?g(o,"default",{value:e,enumerable:!0}):o,e)),Z=e=>z(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 f=require("react");var x=require("@mantine/core"),s=require("@mantine/hooks");var I=require("@mantine/core"),R=require("react/jsx-runtime"),_=(0,I.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,content:o,zIndex:i,shadow:n,borderRadius:a,onHide:c}){(0,s.useWindowEvent)("resize",c),(0,s.useWindowEvent)("scroll",c);let v=(0,s.useClickOutside)(c),{ref:P,width:d,height:u}=(0,s.useElementSize)(),B=(0,s.useMergedRef)(v,P),y=0,b=0;typeof window<"u"&&({innerWidth:y,innerHeight:b}=window);let{classes:W,theme:{dir:H,spacing:D}}=J(),l=(0,x.px)(D.md),L=m=>M=>{c(),m(M)};return(0,w.jsx)(x.Paper,{ref:B,shadow:n,radius:a,className:W.root,sx:{zIndex:i,top:t+u+l>b?b-u-l:t,left:H==="ltr"?e+d+l>y?y-d-l:e:y-l-(e-d-l<0?d+l:e)},children:Array.isArray(o)?o.map(({key:m,onClick:M,title:N,...$})=>M?(0,w.jsx)(O,{title:N??k(m),onClick:L(M),...$},m):(0,w.jsx)(h,{},m)):o(c)})}var S=require("react/jsx-runtime"),E=(0,f.createContext)(()=>()=>{});function Q({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:i}){let[n,a]=(0,f.useState)(null),c=()=>{a(null)},v=(P,d)=>u=>{u.preventDefault(),a({x:u.clientX,y:u.clientY,content: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:c,...n})]})}function V(){return(0,f.useContext)(E)}
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../index.ts", "../react-shim.mjs", "../ContextMenuProvider.tsx", "../ContextMenu.tsx", "../ContextMenuDivider.tsx", "../ContextMenuItem.tsx", "../utils.ts"],
|
|
4
|
-
"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 = (
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,aAAAC,EAAA,mBAAAC,IAAA,eAAAC,EAAAL,GCAA,IAAAM,EAAuB,sBCAvB,IAAAC,EAAoD,iBCApD,IAAAC,EAAwC,yBACxCC,EAA8E,0BCD9E,IAAAC,EAA6B,yBAWpBC,EAAA,6BATHC,KAAY,gBAAcC,IAAW,CACzC,KAAM,CACJ,OAAQ,EACR,WAAYA,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,CACvF,CACF,EAAE,EAEa,SAARC,GAAsC,CAC3C,GAAM,CAAE,QAAAC,CAAQ,EAAIH,EAAU,EAC9B,SAAO,OAAC,OAAI,UAAWG,EAAQ,KAAM,CACvC,CCZA,IAAAC,EAA+E,yBAqD3EC,EAAA,6BAjDEC,KAAY,gBAAa,CAACC,EAAO,CAAE,MAAAC,CAAM,IAAgC,CAC7E,IAAMC,KAAkB,MAAGF,EAAM,QAAQ,EAAE,EAAI,EAC/C,MAAO,CACL,KAAM,CACJ,MAAO,OACP,QAAS,OACT,WAAY,SACZ,WAAYE,EACZ,cAAeA,EACf,YAAaF,EAAM,QAAQ,GAC3B,aAAcA,EAAM,QAAQ,GAC5B,MAAOC,GAASD,EAAM,OAAOC,CAAK,EAAE,CAAC,EACrC,WAAY,uBACZ,cAAe,CACb,OAAQ,cACR,MAAOD,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,CAClF,EACA,0BAA2B,CACzB,WAAYA,EAAM,GAAG,KACnBC,EAAQD,EAAM,OAAOC,CAAK,EAAE,CAAC,EAAID,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,EAC1GC,EAASD,EAAM,cAAgB,OAAS,IAAO,IAAQ,GACzD,CACF,EACA,2BAA4B,CAC1B,WAAYA,EAAM,GAAG,KACnBC,EAAQD,EAAM,OAAOC,CAAK,EAAE,CAAC,EAAID,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,EAC1GC,EAASD,EAAM,cAAgB,OAAS,GAAM,GAAO,EACvD,CACF,CACF,EACA,KAAM,CACJ,SAAU,EACV,YAAaA,EAAM,QAAQ,EAC7B,EACA,MAAO,CACL,WAAY,QACd,CACF,CACF,CAAC,EAEc,SAARG,EAAiC,CACtC,KAAAC,EACA,MAAAC,EACA,MAAAJ,EACA,SAAAK,EACA,QAAAC,CACF,EAAmF,CACjF,GAAM,CAAE,QAAAC,CAAQ,EAAIT,EAAU,CAAE,MAAAE,CAAM,CAAC,EACvC,SACE,QAAC,kBAAe,UAAWO,EAAQ,KAAM,SAAUF,EAAU,QAASC,EACnE,UAAAH,MAAQ,OAAC,OAAI,UAAWI,EAAQ,KAAO,SAAAJ,EAAK,KAC7C,OAAC,QAAK,UAAWI,EAAQ,MAAO,KAAK,KAClC,SAAAH,EACH,GACF,CAEJ,CCrDO,SAASI,EAASC,EAAe,CACtC,IAAMC,EAAMD,EACT,QAAQ,qBAAsB,OAAO,EACrC,QAAQ,QAAS,GAAG,EACpB,KAAK,EACL,YAAY,EACf,MAAO,GAAGC,EAAI,OAAO,CAAC,EAAE,YAAY,IAAIA,EAAI,MAAM,CAAC,GACrD,
|
|
6
|
-
"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", "
|
|
4
|
+
"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 = (content, options) => (e) => {\n e.preventDefault();\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 });\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 type { ContextMenuContent, 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 content: ContextMenuContent;\n};\n\ntype ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({ x, y, content, 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 {Array.isArray(content)\n ? content.map(({ key, onClick, title, ...otherOptions }) =>\n onClick ? (\n <ContextMenuItem\n key={key}\n title={title ?? humanize(key)}\n onClick={handleClick(onClick)}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider key={key} />\n )\n )\n : content(onHide)}\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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", "content", "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", "content", "options", "e", "ContextMenu", "useContextMenu"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as c from"react";import{createContext as G,useContext as J,useState as Q}from"react";import{Paper as
|
|
1
|
+
import*as c from"react";import{createContext as G,useContext as J,useState as Q}from"react";import{Paper as F,createStyles as U,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 W}from"react/jsx-runtime";var B=E(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function y(){let{classes:e}=B();return W("div",{className:e.root})}import{Box as H,Text as D,UnstyledButton as L,createStyles as N,px as $}from"@mantine/core";import{jsx as w,jsxs as q}from"react/jsx-runtime";var A=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 M({icon:e,title:t,color:o,disabled:l,onClick:a}){let{classes:n}=A({color:o});return q(L,{className:n.root,disabled:l,onClick:a,children:[e&&w(H,{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 _=U(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,content:o,zIndex:l,shadow:a,borderRadius:n,onHide:s}){S("resize",s),S("scroll",s);let f=X(s),{ref:m,width:r,height:d}=Y(),b=Z(f,m),p=0,C=0;typeof window<"u"&&({innerWidth:p,innerHeight:C}=window);let{classes:h,theme:{dir:O,spacing:z}}=_(),i=K(z.md),I=u=>x=>{s(),u(x)};return k(F,{ref:b,shadow:a,radius:n,className:h.root,sx:{zIndex:l,top:t+d+i>C?C-d-i:t,left:O==="ltr"?e+r+i>p?p-r-i:e:p-i-(e-r-i<0?r+i:e)},children:Array.isArray(o)?o.map(({key:u,onClick:x,title:R,...T})=>x?k(M,{title:R??g(u),onClick:I(x),...T},u):k(y,{},u)):o(s)})}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[a,n]=Q(null),s=()=>{n(null)},f=(m,r)=>d=>{d.preventDefault(),n({x:d.clientX,y:d.clientY,content:m,zIndex:r?.zIndex||e,shadow:r?.shadow||t,borderRadius:r?.borderRadius||o})};return j(P.Provider,{value:f,children:[l,a&&V(v,{onHide:s,...a})]})}function ve(){return J(P)}export{Se as ContextMenuProvider,g as humanize,ve 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
3
|
"sources": ["../react-shim.mjs", "../ContextMenuProvider.tsx", "../ContextMenu.tsx", "../ContextMenuDivider.tsx", "../ContextMenuItem.tsx", "../utils.ts"],
|
|
4
|
-
"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 = (
|
|
5
|
-
"mappings": "AAAA,UAAYA,MAAW,QCAvB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,YAAAC,MAAgB,QCApD,OAAS,SAAAC,EAAO,gBAAAC,EAAc,MAAAC,MAAU,gBACxC,OAAS,mBAAAC,EAAiB,kBAAAC,EAAgB,gBAAAC,EAAc,kBAAAC,MAAsB,iBCD9E,OAAS,gBAAAC,MAAoB,gBAWpB,cAAAC,MAAA,oBATT,IAAMC,EAAYF,EAAcG,IAAW,CACzC,KAAM,CACJ,OAAQ,EACR,WAAYA,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,CACvF,CACF,EAAE,EAEa,SAARC,GAAsC,CAC3C,GAAM,CAAE,QAAAC,CAAQ,EAAIH,EAAU,EAC9B,OAAOD,EAAC,OAAI,UAAWI,EAAQ,KAAM,CACvC,CCZA,OAAS,OAAAC,EAAK,QAAAC,EAAM,kBAAAC,EAAgB,gBAAAC,EAAc,MAAAC,MAA6B,gBAqD3E,OACW,OAAAC,EADX,QAAAC,MAAA,oBAjDJ,IAAMC,EAAYJ,EAAa,CAACK,EAAO,CAAE,MAAAC,CAAM,IAAgC,CAC7E,IAAMC,EAAkBN,EAAGI,EAAM,QAAQ,EAAE,EAAI,EAC/C,MAAO,CACL,KAAM,CACJ,MAAO,OACP,QAAS,OACT,WAAY,SACZ,WAAYE,EACZ,cAAeA,EACf,YAAaF,EAAM,QAAQ,GAC3B,aAAcA,EAAM,QAAQ,GAC5B,MAAOC,GAASD,EAAM,OAAOC,CAAK,EAAE,CAAC,EACrC,WAAY,uBACZ,cAAe,CACb,OAAQ,cACR,MAAOD,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,CAClF,EACA,0BAA2B,CACzB,WAAYA,EAAM,GAAG,KACnBC,EAAQD,EAAM,OAAOC,CAAK,EAAE,CAAC,EAAID,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,EAC1GC,EAASD,EAAM,cAAgB,OAAS,IAAO,IAAQ,GACzD,CACF,EACA,2BAA4B,CAC1B,WAAYA,EAAM,GAAG,KACnBC,EAAQD,EAAM,OAAOC,CAAK,EAAE,CAAC,EAAID,EAAM,cAAgB,OAASA,EAAM,OAAO,KAAK,CAAC,EAAIA,EAAM,OAAO,KAAK,CAAC,EAC1GC,EAASD,EAAM,cAAgB,OAAS,GAAM,GAAO,EACvD,CACF,CACF,EACA,KAAM,CACJ,SAAU,EACV,YAAaA,EAAM,QAAQ,EAC7B,EACA,MAAO,CACL,WAAY,QACd,CACF,CACF,CAAC,EAEc,SAARG,EAAiC,CACtC,KAAAC,EACA,MAAAC,EACA,MAAAJ,EACA,SAAAK,EACA,QAAAC,CACF,EAAmF,CACjF,GAAM,CAAE,QAAAC,CAAQ,EAAIT,EAAU,CAAE,MAAAE,CAAM,CAAC,EACvC,OACEH,EAACJ,EAAA,CAAe,UAAWc,EAAQ,KAAM,SAAUF,EAAU,QAASC,EACnE,UAAAH,GAAQP,EAACL,EAAA,CAAI,UAAWgB,EAAQ,KAAO,SAAAJ,EAAK,EAC7CP,EAACJ,EAAA,CAAK,UAAWe,EAAQ,MAAO,KAAK,KAClC,SAAAH,EACH,GACF,CAEJ,CCrDO,SAASI,EAASC,EAAe,CACtC,IAAMC,EAAMD,EACT,QAAQ,qBAAsB,OAAO,EACrC,QAAQ,QAAS,GAAG,EACpB,KAAK,EACL,YAAY,EACf,MAAO,GAAGC,EAAI,OAAO,CAAC,EAAE,YAAY,IAAIA,EAAI,MAAM,CAAC,GACrD,
|
|
6
|
-
"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", "
|
|
4
|
+
"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 = (content, options) => (e) => {\n e.preventDefault();\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 });\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 type { ContextMenuContent, 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 content: ContextMenuContent;\n};\n\ntype ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({ x, y, content, 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 {Array.isArray(content)\n ? content.map(({ key, onClick, title, ...otherOptions }) =>\n onClick ? (\n <ContextMenuItem\n key={key}\n title={title ?? humanize(key)}\n onClick={handleClick(onClick)}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider key={key} />\n )\n )\n : content(onHide)}\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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", "content", "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", "content", "options", "e", "ContextMenu", "useContextMenu", "useContext"]
|
|
7
7
|
}
|
package/dist/types.d.ts
CHANGED
|
@@ -54,11 +54,13 @@ export type ContextMenuItemOptions = {
|
|
|
54
54
|
disabled?: never;
|
|
55
55
|
onClick?: never;
|
|
56
56
|
});
|
|
57
|
+
export type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);
|
|
57
58
|
export type ShowContextMenuFunction = (
|
|
58
59
|
/**
|
|
59
|
-
* Context menu items
|
|
60
|
+
* Context menu content - either an array of context menu items
|
|
61
|
+
* or a function that accepts a close callback and returns context menu content
|
|
60
62
|
*/
|
|
61
|
-
|
|
63
|
+
content: ContextMenuContent,
|
|
62
64
|
/**
|
|
63
65
|
* Context menu options (overrides provider options)
|
|
64
66
|
*/
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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,kBAAkB,GAAG,sBAAsB,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAEjG,MAAM,MAAM,uBAAuB,GAAG;AACpC;;;GAGG;AACH,OAAO,EAAE,kBAAkB;AAE3B;;GAEG;AACH,OAAO,CAAC,EAAE,kBAAkB,KACzB,iBAAiB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-contextmenu",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "ContextMenu for Mantine UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@mantine/core": "^6.0.7",
|
|
42
42
|
"@mantine/hooks": "^6.0.7",
|
|
43
43
|
"@tabler/icons-react": "^2.15.0",
|
|
44
|
-
"@types/react": "^18.0.
|
|
44
|
+
"@types/react": "^18.0.35",
|
|
45
45
|
"@types/react-dom": "^18.0.11",
|
|
46
46
|
"esbuild": "^0.17.16",
|
|
47
47
|
"react": "^18.2.0",
|