mantine-contextmenu 1.3.1 → 1.3.3
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.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/package.json +2 -2
|
@@ -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,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,
|
|
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,2CA4ElB"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var ee=Object.create;var v=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var se=(e,t)=>{for(var o in t)v(e,o,{get:t[o],enumerable:!0})},A=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of oe(t))!ne.call(e,r)&&r!==o&&v(e,r,{get:()=>t[r],enumerable:!(n=te(t,r))||n.enumerable});return e};var ie=(e,t,o)=>(o=e!=null?ee(re(e)):{},A(t||!e||!e.__esModule?v(o,"default",{value:e,enumerable:!0}):o,e)),ae=e=>A(v({},"__esModule",{value:!0}),e);var xe={};se(xe,{ContextMenu:()=>N,ContextMenuDivider:()=>I,ContextMenuItem:()=>B,ContextMenuProvider:()=>pe,humanize:()=>b,useContextMenu:()=>ue});module.exports=ae(xe);var m=ie(require("react"),1);var a=require("@mantine/core"),d=require("@mantine/hooks"),h=require("react");var w=require("@mantine/core"),q=require("react/jsx-runtime"),ce=(0,w.createStyles)(e=>({root:{height:1,background:e.colorScheme==="dark"?e.colors.dark[5]:e.colors.gray[1]}}));function I({className:e,sx:t,style:o}){let{cx:n,classes:r}=ce();return(0,q.jsx)(w.Box,{className:n(r.root,e),sx:t,style:o})}var i=require("@mantine/core"),M=require("react/jsx-runtime"),de=(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 B({className:e,style:t,icon:o,title:n,color:r,disabled:x,onClick:c}){let{cx:y,classes:p}=de({color:r});return(0,M.jsxs)(i.UnstyledButton,{className:y(p.root,e),style:t,disabled:x,onClick:c,children:[o&&(0,M.jsx)(i.Box,{className:p.icon,children:o}),(0,M.jsx)(i.Text,{className:p.title,size:"sm",children:n})]})}function b(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 S=require("react/jsx-runtime"),F={},le=(0,a.createStyles)(e=>({root:{position:"fixed",border:`1px solid ${e.colorScheme==="dark"?e.colors.dark[4]:e.colors.gray[3]}`,overflow:"hidden",transition:"all .15s ease"}}));function N({x:e,y:t,content:o,zIndex:n,shadow:r,borderRadius:x,onHide:c,className:y,style:p,sx:s,classNames:l,styles:R}){(0,d.useWindowEvent)("resize",c),(0,d.useWindowEvent)("scroll",c);let K=(0,d.useClickOutside)(c),{ref:Y,width:g,height:D}=(0,d.useElementSize)(),_=(0,d.useMergedRef)(K,Y),P=0,T=0;typeof window<"u"&&({innerWidth:P,innerHeight:T}=window);let[,J]=(0,h.useState)(!1);(0,h.useEffect)(()=>{J(!0)},[]);let X=C=>k=>{c(),C(k)},{cx:z,classes:Z,theme:W}=le(),{dir:G,spacing:Q}=W,E=typeof R=="function"?R(W,F,F):R,u=(0,a.px)(Q.md);return(0,S.jsx)(a.Portal,{children:(0,S.jsx)(a.Paper,{ref:_,shadow:r,radius:x,className:z(Z.root,y,l?.root),style:{...E?.root,...p},sx:[{zIndex:n,top:t+D+u>T?T-D-u:t,left:G==="ltr"?e+g+u>P?P-g-u:e:P-u-(e-g-u<0?g+u:e)},...(0,a.packSx)(s)],children:Array.isArray(o)?o.map(({key:C,className:k,sx:H,style:L,onClick:$,title:V,...j})=>$?(0,S.jsx)(B,{className:z(l?.item,k),sx:H,style:{...E?.item,...L},title:V??b(C),onClick:X($),...j},C):(0,S.jsx)(I,{className:z(l?.divider,k),sx:H,style:{...E?.divider,...L}},C)):o(c)})})}var f=require("react");var O=require("react/jsx-runtime"),U=(0,f.createContext)(()=>()=>{});function pe({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:n}){let[r,x]=(0,f.useState)(null),c=()=>{x(null)},y=(p,s)=>l=>{l.preventDefault(),l.stopPropagation(),x({x:l.clientX,y:l.clientY,content:p,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,O.jsxs)(U.Provider,{value:y,children:[n,r&&(0,O.jsx)(N,{onHide:c,...r})]})}function ue(){return(0,f.useContext)(U)}
|
|
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", "../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
|
|
5
|
-
"mappings": "
|
|
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"]
|
|
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, Portal, createStyles, packSx, px } from '@mantine/core';\nimport { useClickOutside, useElementSize, useMergedRef, useWindowEvent } from '@mantine/hooks';\nimport { CSSProperties, MouseEventHandler, useEffect, useState } 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 // trigger a rerender to make sure that context menu is positioned correctly\n const [, setRendered] = useState(false);\n useEffect(() => {\n setRendered(true);\n }, []);\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 <Portal>\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 </Portal>\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_react", "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", "setRendered", "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.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as p from"react";import{Paper as oe,Portal as re,createStyles as ne,packSx as se,px as ie}from"@mantine/core";import{useClickOutside as ae,useElementSize as ce,useMergedRef as de,useWindowEvent as E}from"@mantine/hooks";import{useEffect as le,useState as pe}from"react";import{Box as Y,createStyles as _}from"@mantine/core";import{jsx as X}from"react/jsx-runtime";var J=_(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:a,classes:s}=J();return X(Y,{className:a(s.root,e),sx:t,style:o})}import{Box as Z,Text as G,UnstyledButton as Q,createStyles as V,px as j}from"@mantine/core";import{jsx as T,jsxs as te}from"react/jsx-runtime";var ee=V((e,{color:t})=>{let o=j(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 z({className:e,style:t,icon:o,title:a,color:s,disabled:l,onClick:n}){let{cx:u,classes:c}=ee({color:s});return te(Q,{className:u(c.root,e),style:t,disabled:l,onClick:n,children:[o&&T(Z,{className:c.icon,children:o}),T(G,{className:c.title,size:"sm",children:a})]})}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)}`}import{jsx as C}from"react/jsx-runtime";var I={},ue=ne(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:l,onHide:n,className:u,style:c,sx:r,classNames:i,styles:M}){E("resize",n),E("scroll",n);let D=ae(n),{ref:W,width:m,height:v}=ce(),H=de(D,W),f=0,S=0;typeof window<"u"&&({innerWidth:f,innerHeight:S}=window);let[,L]=pe(!1);le(()=>{L(!0)},[]);let $=x=>y=>{n(),x(y)},{cx:g,classes:A,theme:w}=ue(),{dir:q,spacing:F}=w,P=typeof M=="function"?M(w,I,I):M,d=ie(F.md);return C(re,{children:C(oe,{ref:H,shadow:s,radius:l,className:g(A.root,u,i?.root),style:{...P?.root,...c},sx:[{zIndex:a,top:t+v+d>S?S-v-d:t,left:q==="ltr"?e+m+d>f?f-m-d:e:f-d-(e-m-d<0?m+d:e)},...se(r)],children:Array.isArray(o)?o.map(({key:x,className:y,sx:b,style:h,onClick:O,title:U,...K})=>O?C(z,{className:g(i?.item,y),sx:b,style:{...P?.item,...h},title:U??k(x),onClick:$(O),...K},x):C(R,{className:g(i?.divider,y),sx:b,style:{...P?.divider,...h}},x)):o(n)})})}import{createContext as xe,useContext as me,useState as fe}from"react";import{jsx as ye,jsxs as Ce}from"react/jsx-runtime";var N=xe(()=>()=>{});function Ue({zIndex:e=9999,shadow:t="sm",borderRadius:o="xs",children:a}){let[s,l]=fe(null),n=()=>{l(null)},u=(c,r)=>i=>{i.preventDefault(),i.stopPropagation(),l({x:i.clientX,y:i.clientY,content:c,zIndex:r?.zIndex||e,shadow:r?.shadow||t,borderRadius:r?.borderRadius||o,className:r?.className,style:r?.style,sx:r?.sx,classNames:r?.classNames,styles:r?.styles})};return Ce(N.Provider,{value:u,children:[a,s&&ye(B,{onHide:n,...s})]})}function Ke(){return me(N)}export{B as ContextMenu,R as ContextMenuDivider,z as ContextMenuItem,Ue as ContextMenuProvider,k as humanize,Ke 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", "../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
|
|
5
|
-
"mappings": "AAAA,UAAYA,MAAW,QCAvB,OAAS,SAAAC,GAAO,gBAAAC,GAAc,UAAAC,GAAQ,MAAAC,OAAU,
|
|
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"]
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Paper, Portal, createStyles, packSx, px } from '@mantine/core';\nimport { useClickOutside, useElementSize, useMergedRef, useWindowEvent } from '@mantine/hooks';\nimport { CSSProperties, MouseEventHandler, useEffect, useState } 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 // trigger a rerender to make sure that context menu is positioned correctly\n const [, setRendered] = useState(false);\n useEffect(() => {\n setRendered(true);\n }, []);\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 <Portal>\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 </Portal>\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", "Portal", "createStyles", "packSx", "px", "useClickOutside", "useElementSize", "useMergedRef", "useWindowEvent", "useEffect", "useState", "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", "setRendered", "useState", "useEffect", "handleClick", "onClick", "e", "cx", "classes", "dir", "spacing", "styleProperties", "mdSpacing", "px", "Portal", "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.
|
|
3
|
+
"version": "1.3.3",
|
|
4
4
|
"description": "Enhance your Mantine UI applications usability with customizable context menus",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@types/react-dom": "^18.2.6",
|
|
59
59
|
"esbuild": "^0.18.10",
|
|
60
60
|
"react": "^18.2.0",
|
|
61
|
-
"typescript": "^5.1.
|
|
61
|
+
"typescript": "^5.1.6"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"@mantine/core": ">=6",
|