mantine-contextmenu 7.1.2 → 7.1.4
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 +22 -9
- package/dist/cjs/ContextMenu.js +2 -2
- package/dist/cjs/ContextMenu.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/ContextMenu.js +1 -1
- package/dist/esm/ContextMenu.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/types/types.d.ts +4 -0
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
[![Language][language-image]][repo-url]
|
|
11
11
|
[![Sponsor the author][sponsor-image]][sponsor-url]
|
|
12
12
|
|
|
13
|
-
The "dark-theme aware" **context-menu** for your Mantine UI applications, built by the creator of [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/).
|
|
13
|
+
The "dark-theme aware" [**context-menu**](https://icflorescu.github.io/mantine-contextmenu/) for your Mantine UI applications, built by the creator of [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/).
|
|
14
14
|
|
|
15
15
|
[](https://icflorescu.github.io/mantine-contextmenu/)
|
|
16
16
|
|
|
@@ -20,7 +20,7 @@ The "dark-theme aware" **context-menu** for your Mantine UI applications, built
|
|
|
20
20
|
## Features
|
|
21
21
|
|
|
22
22
|
- **Lightweight** - no external dependencies, [no bloat](https://bundlephobia.com/package/mantine-contextmenu)
|
|
23
|
-
- **Dark-theme aware** - automatically adapts to the current Mantine
|
|
23
|
+
- **Dark-theme aware** - automatically adapts to the current [Mantine color scheme](https://mantine.dev/theming/color-schemes/)
|
|
24
24
|
- **[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
|
|
25
25
|
- **[Custom content support](https://icflorescu.github.io/mantine-contextmenu/examples/custom-content)** - use any Mantine component as context menu content
|
|
26
26
|
- **[Highly customizable styling](https://icflorescu.github.io/mantine-contextmenu/examples/styling)** - use the `className`/`classNames` and `style`/`styles` props to customize the context menu appearance
|
|
@@ -33,19 +33,30 @@ Visit [icflorescu.github.io/mantine-contextmenu](https://icflorescu.github.io/ma
|
|
|
33
33
|
## Quickstart
|
|
34
34
|
|
|
35
35
|
Create a new [Mantine application](https://mantine.dev/pages/getting-started/), make sure to have the `clsx` peer dependency installed,
|
|
36
|
-
then install the package with `npm i mantine-contextmenu` or `yarn add mantine-contextmenu
|
|
36
|
+
then install the package with `npm i mantine-contextmenu` or `yarn add mantine-contextmenu`.
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
Import the necessary CSS files:
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import '@mantine/core/styles.layer.css';
|
|
42
|
+
import 'mantine-contextmenu/styles.layer.css';
|
|
43
|
+
import './layout.css';
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Make sure to [apply the styles in the correct order](https://mantine.dev/styles/mantine-styles/):
|
|
47
|
+
|
|
48
|
+
```css
|
|
49
|
+
/* layout.css */
|
|
50
|
+
/* 👇 Apply Mantine core styles first, ContextMenu styles second */
|
|
51
|
+
@layer mantine, mantine-contextmenu;
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Wrap your application in a `ContextMenuProvider` **inside** the `MantineProvider`:
|
|
39
55
|
|
|
40
56
|
```tsx
|
|
41
57
|
import { MantineProvider } from '@mantine/core';
|
|
42
58
|
import { ContextMenuProvider } from 'mantine-contextmenu';
|
|
43
59
|
|
|
44
|
-
// 👇 Mantine core first
|
|
45
|
-
import '@mantine/core/styles.css';
|
|
46
|
-
// 👇 Mantine context menu second
|
|
47
|
-
import 'mantine-contextmenu/styles.css';
|
|
48
|
-
|
|
49
60
|
function App() {
|
|
50
61
|
return (
|
|
51
62
|
<MantineProvider>
|
|
@@ -58,6 +69,8 @@ function App() {
|
|
|
58
69
|
Use the `showContextMenu` function geenrated by the `useContextMenu` in your code:
|
|
59
70
|
|
|
60
71
|
```tsx
|
|
72
|
+
'use client';
|
|
73
|
+
|
|
61
74
|
import { IconCopy, IconDownload } from '@tabler/icons-react';
|
|
62
75
|
import { useContextMenu } from 'mantine-contextmenu';
|
|
63
76
|
import Picture from '~/components/Picture';
|
package/dist/cjs/ContextMenu.js
CHANGED
|
@@ -65,8 +65,8 @@ function ContextMenu(_a) {
|
|
|
65
65
|
styles === null || styles === void 0 ? void 0 : styles.root,
|
|
66
66
|
], children: Array.isArray(content)
|
|
67
67
|
? content.map(function (_a) {
|
|
68
|
-
var key = _a.key, className = _a.className, style = _a.style, onClick = _a.onClick, items = _a.items, title = _a.title, otherOptions = __rest(_a, ["key", "className", "style", "onClick", "items", "title"]);
|
|
69
|
-
return onClick || items ? ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, __assign({ className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.item, className), style: [styles === null || styles === void 0 ? void 0 : styles.item, style], title: title !== null && title !== void 0 ? title : (0, utils_1.humanize)(key), onClick: onClick, onHide: onHide, items: items }, otherOptions), key)) : ((0, jsx_runtime_1.jsx)(ContextMenuDivider_1.ContextMenuDivider, { className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.divider, className), style: [styles === null || styles === void 0 ? void 0 : styles.divider, style] }, key));
|
|
68
|
+
var key = _a.key, hidden = _a.hidden, className = _a.className, style = _a.style, onClick = _a.onClick, items = _a.items, title = _a.title, otherOptions = __rest(_a, ["key", "hidden", "className", "style", "onClick", "items", "title"]);
|
|
69
|
+
return hidden ? null : onClick || items ? ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, __assign({ className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.item, className), style: [styles === null || styles === void 0 ? void 0 : styles.item, style], title: title !== null && title !== void 0 ? title : (0, utils_1.humanize)(key), onClick: onClick, onHide: onHide, items: items }, otherOptions), key)) : ((0, jsx_runtime_1.jsx)(ContextMenuDivider_1.ContextMenuDivider, { className: (0, clsx_1.default)(classNames === null || classNames === void 0 ? void 0 : classNames.divider, className), style: [styles === null || styles === void 0 ? void 0 : styles.divider, style] }, key));
|
|
70
70
|
})
|
|
71
71
|
: content(onHide) }));
|
|
72
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,sCAAwD;AACxD,wCAAmD;AACnD,8CAAwB;AACxB,+BAAmC;AACnC,2DAA0D;AAC1D,qDAAoD;AACpD,6DAA+D;AAE/D,iCAAmC;AAanC,SAAgB,WAAW,CAAC,EAAyF;;QAAvF,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,MAAM,YAAA;IACzF,IAAA,KAA2B,IAAA,kBAAU,EAAC,4CAAsB,CAAC,EAA3D,MAAM,YAAA,EAAE,YAAY,kBAAuC,CAAC;IAC7D,IAAA,QAAQ,GAAI,IAAA,yBAAiB,GAAkB,GAAvC,CAAwC;IACjD,IAAA,KAAoB,CAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,qBAAqB,EAAE,KAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAtF,KAAK,WAAA,EAAE,MAAM,YAAyE,CAAC;IAE/F,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,CAAe,WAAW,GAAgC,MAAM,WAAtC,EAAe,YAAY,GAAK,MAAM,YAAX,CAAY,CAAC;IAE7F,IAAA,GAAG,GAAK,IAAA,mBAAY,GAAE,IAAnB,CAAoB;IAE/B,OAAO,CACL,uBAAC,YAAK,IACJ,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,SAAS,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,CAAC,EACnE,KAAK,EAAE;YACL,UAAC,EAAmB;oBAAN,EAAE,gBAAA;gBACd,IAAM,SAAS,GAAG,IAAA,SAAE,EAAC,EAAE,CAAW,CAAC;gBACnC,OAAO;oBACL,MAAM,QAAA;oBACN,GAAG,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;oBAClF,IAAI,EACF,GAAG,KAAK,KAAK;wBACX,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW;4BACnC,CAAC,CAAC,WAAW,GAAG,KAAK,GAAG,SAAS;4BACjC,CAAC,CAAC,CAAC;wBACL,CAAC,CAAC,WAAW,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;iBACpF,CAAC;YACJ,CAAC;YACD,KAAK;YACL,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI;SACb,YAEA,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YACrB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,
|
|
1
|
+
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n x: number;\n y: number;\n content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n const [paperRef] = useResizeObserver<HTMLDivElement>();\n const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n let windowWidth = 0;\n let windowHeight = 0;\n if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n const { dir } = useDirection();\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={clsx('mantine-contextmenu', className, classNames?.root)}\n style={[\n ({ spacing: { md } }) => {\n const mdSpacing = px(md) as number;\n return {\n zIndex,\n top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n left:\n dir === 'ltr'\n ? x + width + mdSpacing > windowWidth\n ? windowWidth - width - mdSpacing\n : x\n : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n };\n },\n style,\n styles?.root,\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) =>\n hidden ? null : onClick || items ? (\n <ContextMenuItem\n key={key}\n className={clsx(classNames?.item, className)}\n style={[styles?.item, style]}\n title={title ?? humanize(key)}\n onClick={onClick}\n onHide={onHide}\n items={items}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={clsx(classNames?.divider, className)}\n style={[styles?.divider, style]}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n"]}
|
package/dist/cjs/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n /**\n * The z-index of context menu.\n * @default 9999\n */\n zIndex?: number;\n\n /**\n * Context menu container class name.\n */\n className?: string;\n\n /**\n * Context menu container style.\n */\n style?: MantineStyleProp;\n\n /**\n * Context menu elements class names.\n */\n classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n /**\n * Context menu styles.\n * Can be an object with `root`, `item` and `divider` keys and style objects as values,\n * or a function that accepts the current theme and returns a similarly structured object.\n */\n styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;\n};\n\n/**\n * Generic context menu settings\n */\nexport type ContextMenuSettings = {\n /**\n * Context menu shadow.\n * @default 'sm'\n */\n shadow?: MantineShadow;\n\n /**\n * Context menu border radius.\n * @default 'xs'\n */\n borderRadius?: MantineRadius;\n\n /**\n * Delay in ms to use when showing and hiding submenus.\n * @default 500\n */\n submenuDelay?: number;\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuSettings &\n ContextMenuOptions & {\n children: React.ReactNode;\n };\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n /**\n * Unique key of the context menu item or divider.\n */\n key: string;\n /**\n * Context menu item or divider className.\n */\n className?: string;\n\n /**\n * Context menu item or divider style.\n */\n style?: MantineStyleProp;\n} & (\n | ({\n /**\n * Optional context menu item icon.\n */\n icon?: React.ReactNode;\n\n /**\n * Optional context menu item title.\n * If not provided, one will be generated automatically by \"humanizing\" the key.\n * @default humanize(key)\n */\n title?: React.ReactNode;\n\n /**\n * Optional context menu item color.\n */\n color?: MantineColor;\n\n /**\n * Boolean indicating whether the context menu item is disabled.\n */\n disabled?: boolean;\n } & (\n | {\n /**\n * Optional context menu item `onClick` handler.\n * If not provided, a divider will be rendered instead.\n */\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n items?: never;\n }\n | {\n onClick?: never;\n\n /**\n * Optional items.\n * If provided, a submenu will be rendered.\n */\n items: ContextMenuItemOptions[];\n }\n ))\n | {\n icon?: never;\n title?: never;\n color?: never;\n disabled?: never;\n onClick?: never;\n items?: never;\n }\n);\n\n/**\n * Context menu content.\n * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Show context menu function\n */\nexport type ShowContextMenuFunction = (\n /**\n * Context menu content.\n * Either an array of context menu items or a function that accepts a close callback and returns context menu content.\n */\n content: ContextMenuContent,\n\n /**\n * Context menu options (overrides provider props).\n */\n options?: ContextMenuOptions\n) => React.MouseEventHandler;\n\n/**\n * Hide context menu function\n */\nexport type HideContextMenuFunction = () => void;\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n /**\n * The z-index of context menu.\n * @default 9999\n */\n zIndex?: number;\n\n /**\n * Context menu container class name.\n */\n className?: string;\n\n /**\n * Context menu container style.\n */\n style?: MantineStyleProp;\n\n /**\n * Context menu elements class names.\n */\n classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n /**\n * Context menu styles.\n * Can be an object with `root`, `item` and `divider` keys and style objects as values,\n * or a function that accepts the current theme and returns a similarly structured object.\n */\n styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;\n};\n\n/**\n * Generic context menu settings\n */\nexport type ContextMenuSettings = {\n /**\n * Context menu shadow.\n * @default 'sm'\n */\n shadow?: MantineShadow;\n\n /**\n * Context menu border radius.\n * @default 'xs'\n */\n borderRadius?: MantineRadius;\n\n /**\n * Delay in ms to use when showing and hiding submenus.\n * @default 500\n */\n submenuDelay?: number;\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuSettings &\n ContextMenuOptions & {\n children: React.ReactNode;\n };\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n /**\n * Unique key of the context menu item or divider.\n */\n key: string;\n /**\n * Context menu item or divider className.\n */\n className?: string;\n\n /**\n * Context menu item or divider style.\n */\n style?: MantineStyleProp;\n\n /**\n * Boolean indicating whether the context menu item is hidden.\n */\n hidden?: boolean;\n} & (\n | ({\n /**\n * Optional context menu item icon.\n */\n icon?: React.ReactNode;\n\n /**\n * Optional context menu item title.\n * If not provided, one will be generated automatically by \"humanizing\" the key.\n * @default humanize(key)\n */\n title?: React.ReactNode;\n\n /**\n * Optional context menu item color.\n */\n color?: MantineColor;\n\n /**\n * Boolean indicating whether the context menu item is disabled.\n */\n disabled?: boolean;\n } & (\n | {\n /**\n * Optional context menu item `onClick` handler.\n * If not provided, a divider will be rendered instead.\n */\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n items?: never;\n }\n | {\n onClick?: never;\n\n /**\n * Optional items.\n * If provided, a submenu will be rendered.\n */\n items: ContextMenuItemOptions[];\n }\n ))\n | {\n icon?: never;\n title?: never;\n color?: never;\n disabled?: never;\n onClick?: never;\n items?: never;\n }\n);\n\n/**\n * Context menu content.\n * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Show context menu function\n */\nexport type ShowContextMenuFunction = (\n /**\n * Context menu content.\n * Either an array of context menu items or a function that accepts a close callback and returns context menu content.\n */\n content: ContextMenuContent,\n\n /**\n * Context menu options (overrides provider props).\n */\n options?: ContextMenuOptions\n) => React.MouseEventHandler;\n\n/**\n * Hide context menu function\n */\nexport type HideContextMenuFunction = () => void;\n"]}
|
package/dist/esm/ContextMenu.js
CHANGED
|
@@ -33,7 +33,7 @@ export function ContextMenu({ x, y, content, zIndex, onHide, className, style, c
|
|
|
33
33
|
style,
|
|
34
34
|
styles?.root,
|
|
35
35
|
], children: Array.isArray(content)
|
|
36
|
-
? content.map(({ key, className, style, onClick, items, title, ...otherOptions }) => onClick || items ? (_jsx(ContextMenuItem, { className: clsx(classNames?.item, className), style: [styles?.item, style], title: title ?? humanize(key), onClick: onClick, onHide: onHide, items: items, ...otherOptions }, key)) : (_jsx(ContextMenuDivider, { className: clsx(classNames?.divider, className), style: [styles?.divider, style] }, key)))
|
|
36
|
+
? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) => hidden ? null : onClick || items ? (_jsx(ContextMenuItem, { className: clsx(classNames?.item, className), style: [styles?.item, style], title: title ?? humanize(key), onClick: onClick, onHide: onHide, items: items, ...otherOptions }, key)) : (_jsx(ContextMenuDivider, { className: clsx(classNames?.divider, className), style: [styles?.divider, style] }, key)))
|
|
37
37
|
: content(onHide) }));
|
|
38
38
|
}
|
|
39
39
|
//# sourceMappingURL=ContextMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAanC,MAAM,UAAU,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAoB;IACnH,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACpE,MAAM,CAAC,QAAQ,CAAC,GAAG,iBAAiB,EAAkB,CAAC;IACvD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,qBAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IAE/F,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,CAAC;IAErG,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,KAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,EACnE,KAAK,EAAE;YACL,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;gBACtB,MAAM,SAAS,GAAG,EAAE,CAAC,EAAE,CAAW,CAAC;gBACnC,OAAO;oBACL,MAAM;oBACN,GAAG,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;oBAClF,IAAI,EACF,GAAG,KAAK,KAAK;wBACX,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW;4BACnC,CAAC,CAAC,WAAW,GAAG,KAAK,GAAG,SAAS;4BACjC,CAAC,CAAC,CAAC;wBACL,CAAC,CAAC,WAAW,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;iBACpF,CAAC;YACJ,CAAC;YACD,KAAK;YACL,MAAM,EAAE,IAAI;SACb,YAEA,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YACrB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../package/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAanC,MAAM,UAAU,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAoB;IACnH,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACpE,MAAM,CAAC,QAAQ,CAAC,GAAG,iBAAiB,EAAkB,CAAC;IACvD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,qBAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IAE/F,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,CAAC;IAErG,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,KAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,EACnE,KAAK,EAAE;YACL,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;gBACtB,MAAM,SAAS,GAAG,EAAE,CAAC,EAAE,CAAW,CAAC;gBACnC,OAAO;oBACL,MAAM;oBACN,GAAG,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;oBAClF,IAAI,EACF,GAAG,KAAK,KAAK;wBACX,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW;4BACnC,CAAC,CAAC,WAAW,GAAG,KAAK,GAAG,SAAS;4BACjC,CAAC,CAAC,CAAC;wBACL,CAAC,CAAC,WAAW,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;iBACpF,CAAC;YACJ,CAAC;YACD,KAAK;YACL,MAAM,EAAE,IAAI;SACb,YAEA,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YACrB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,EAAE,EAAE,CACxF,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CACjC,KAAC,eAAe,IAEd,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,EAC5C,KAAK,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,EAC5B,KAAK,EAAE,KAAK,IAAI,QAAQ,CAAC,GAAG,CAAC,EAC7B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,YAAY,IAPX,GAAG,CAQR,CACH,CAAC,CAAC,CAAC,CACF,KAAC,kBAAkB,IAEjB,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,EAC/C,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,IAF1B,GAAG,CAGR,CACH,CACF;YACH,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,GACb,CACT,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { Paper, px, useDirection } from '@mantine/core';\nimport { useResizeObserver } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport { useContext } from 'react';\nimport { ContextMenuDivider } from './ContextMenuDivider';\nimport { ContextMenuItem } from './ContextMenuItem';\nimport { ContextMenuSettingsCtx } from './ContextMenuProvider';\nimport type { ContextMenuContent, ContextMenuOptions } from './types';\nimport { humanize } from './utils';\n\nexport type ContextMenuInstanceOptions = {\n x: number;\n y: number;\n content: ContextMenuContent;\n};\n\nexport type ContextMenuProps = ContextMenuOptions &\n ContextMenuInstanceOptions & {\n onHide: () => void;\n };\n\nexport function ContextMenu({ x, y, content, zIndex, onHide, className, style, classNames, styles }: ContextMenuProps) {\n const { shadow, borderRadius } = useContext(ContextMenuSettingsCtx);\n const [paperRef] = useResizeObserver<HTMLDivElement>();\n const { width, height } = paperRef.current?.getBoundingClientRect() || { width: 0, height: 0 };\n\n let windowWidth = 0;\n let windowHeight = 0;\n if (typeof window !== 'undefined') ({ innerWidth: windowWidth, innerHeight: windowHeight } = window);\n\n const { dir } = useDirection();\n\n return (\n <Paper\n ref={paperRef}\n shadow={shadow}\n radius={borderRadius}\n className={clsx('mantine-contextmenu', className, classNames?.root)}\n style={[\n ({ spacing: { md } }) => {\n const mdSpacing = px(md) as number;\n return {\n zIndex,\n top: y + height + mdSpacing > windowHeight ? windowHeight - height - mdSpacing : y,\n left:\n dir === 'ltr'\n ? x + width + mdSpacing > windowWidth\n ? windowWidth - width - mdSpacing\n : x\n : windowWidth - mdSpacing - (x - width - mdSpacing < 0 ? width + mdSpacing : x),\n };\n },\n style,\n styles?.root,\n ]}\n >\n {Array.isArray(content)\n ? content.map(({ key, hidden, className, style, onClick, items, title, ...otherOptions }) =>\n hidden ? null : onClick || items ? (\n <ContextMenuItem\n key={key}\n className={clsx(classNames?.item, className)}\n style={[styles?.item, style]}\n title={title ?? humanize(key)}\n onClick={onClick}\n onHide={onHide}\n items={items}\n {...otherOptions}\n />\n ) : (\n <ContextMenuDivider\n key={key}\n className={clsx(classNames?.divider, className)}\n style={[styles?.divider, style]}\n />\n )\n )\n : content(onHide)}\n </Paper>\n );\n}\n"]}
|
package/dist/esm/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n /**\n * The z-index of context menu.\n * @default 9999\n */\n zIndex?: number;\n\n /**\n * Context menu container class name.\n */\n className?: string;\n\n /**\n * Context menu container style.\n */\n style?: MantineStyleProp;\n\n /**\n * Context menu elements class names.\n */\n classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n /**\n * Context menu styles.\n * Can be an object with `root`, `item` and `divider` keys and style objects as values,\n * or a function that accepts the current theme and returns a similarly structured object.\n */\n styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;\n};\n\n/**\n * Generic context menu settings\n */\nexport type ContextMenuSettings = {\n /**\n * Context menu shadow.\n * @default 'sm'\n */\n shadow?: MantineShadow;\n\n /**\n * Context menu border radius.\n * @default 'xs'\n */\n borderRadius?: MantineRadius;\n\n /**\n * Delay in ms to use when showing and hiding submenus.\n * @default 500\n */\n submenuDelay?: number;\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuSettings &\n ContextMenuOptions & {\n children: React.ReactNode;\n };\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n /**\n * Unique key of the context menu item or divider.\n */\n key: string;\n /**\n * Context menu item or divider className.\n */\n className?: string;\n\n /**\n * Context menu item or divider style.\n */\n style?: MantineStyleProp;\n} & (\n | ({\n /**\n * Optional context menu item icon.\n */\n icon?: React.ReactNode;\n\n /**\n * Optional context menu item title.\n * If not provided, one will be generated automatically by \"humanizing\" the key.\n * @default humanize(key)\n */\n title?: React.ReactNode;\n\n /**\n * Optional context menu item color.\n */\n color?: MantineColor;\n\n /**\n * Boolean indicating whether the context menu item is disabled.\n */\n disabled?: boolean;\n } & (\n | {\n /**\n * Optional context menu item `onClick` handler.\n * If not provided, a divider will be rendered instead.\n */\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n items?: never;\n }\n | {\n onClick?: never;\n\n /**\n * Optional items.\n * If provided, a submenu will be rendered.\n */\n items: ContextMenuItemOptions[];\n }\n ))\n | {\n icon?: never;\n title?: never;\n color?: never;\n disabled?: never;\n onClick?: never;\n items?: never;\n }\n);\n\n/**\n * Context menu content.\n * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Show context menu function\n */\nexport type ShowContextMenuFunction = (\n /**\n * Context menu content.\n * Either an array of context menu items or a function that accepts a close callback and returns context menu content.\n */\n content: ContextMenuContent,\n\n /**\n * Context menu options (overrides provider props).\n */\n options?: ContextMenuOptions\n) => React.MouseEventHandler;\n\n/**\n * Hide context menu function\n */\nexport type HideContextMenuFunction = () => void;\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../package/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MantineColor, MantineRadius, MantineShadow, MantineStyleProp, StylesRecord } from '@mantine/core';\n\n/**\n * Utility type that makes a property required\n */\nexport type WithRequiredProperty<Type, Key extends keyof Type> = Type & {\n [Property in Key]-?: Type[Property];\n};\n\n/**\n * Utility type that makes a property optional\n */\nexport type WithOptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Context menu options\n */\nexport type ContextMenuOptions = {\n /**\n * The z-index of context menu.\n * @default 9999\n */\n zIndex?: number;\n\n /**\n * Context menu container class name.\n */\n className?: string;\n\n /**\n * Context menu container style.\n */\n style?: MantineStyleProp;\n\n /**\n * Context menu elements class names.\n */\n classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;\n\n /**\n * Context menu styles.\n * Can be an object with `root`, `item` and `divider` keys and style objects as values,\n * or a function that accepts the current theme and returns a similarly structured object.\n */\n styles?: StylesRecord<'root' | 'item' | 'divider', MantineStyleProp>;\n};\n\n/**\n * Generic context menu settings\n */\nexport type ContextMenuSettings = {\n /**\n * Context menu shadow.\n * @default 'sm'\n */\n shadow?: MantineShadow;\n\n /**\n * Context menu border radius.\n * @default 'xs'\n */\n borderRadius?: MantineRadius;\n\n /**\n * Delay in ms to use when showing and hiding submenus.\n * @default 500\n */\n submenuDelay?: number;\n};\n\n/**\n * Context menu provider props\n */\nexport type ContextMenuProviderProps = ContextMenuSettings &\n ContextMenuOptions & {\n children: React.ReactNode;\n };\n\n/**\n * Context menu item options\n */\nexport type ContextMenuItemOptions = {\n /**\n * Unique key of the context menu item or divider.\n */\n key: string;\n /**\n * Context menu item or divider className.\n */\n className?: string;\n\n /**\n * Context menu item or divider style.\n */\n style?: MantineStyleProp;\n\n /**\n * Boolean indicating whether the context menu item is hidden.\n */\n hidden?: boolean;\n} & (\n | ({\n /**\n * Optional context menu item icon.\n */\n icon?: React.ReactNode;\n\n /**\n * Optional context menu item title.\n * If not provided, one will be generated automatically by \"humanizing\" the key.\n * @default humanize(key)\n */\n title?: React.ReactNode;\n\n /**\n * Optional context menu item color.\n */\n color?: MantineColor;\n\n /**\n * Boolean indicating whether the context menu item is disabled.\n */\n disabled?: boolean;\n } & (\n | {\n /**\n * Optional context menu item `onClick` handler.\n * If not provided, a divider will be rendered instead.\n */\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n items?: never;\n }\n | {\n onClick?: never;\n\n /**\n * Optional items.\n * If provided, a submenu will be rendered.\n */\n items: ContextMenuItemOptions[];\n }\n ))\n | {\n icon?: never;\n title?: never;\n color?: never;\n disabled?: never;\n onClick?: never;\n items?: never;\n }\n);\n\n/**\n * Context menu content.\n * Either an array of context menu items, or a function that accepts a close callback and returns context menu content.\n */\nexport type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => JSX.Element);\n\n/**\n * Show context menu function\n */\nexport type ShowContextMenuFunction = (\n /**\n * Context menu content.\n * Either an array of context menu items or a function that accepts a close callback and returns context menu content.\n */\n content: ContextMenuContent,\n\n /**\n * Context menu options (overrides provider props).\n */\n options?: ContextMenuOptions\n) => React.MouseEventHandler;\n\n/**\n * Hide context menu function\n */\nexport type HideContextMenuFunction = () => void;\n"]}
|
package/dist/types/types.d.ts
CHANGED
|
@@ -80,6 +80,10 @@ export type ContextMenuItemOptions = {
|
|
|
80
80
|
* Context menu item or divider style.
|
|
81
81
|
*/
|
|
82
82
|
style?: MantineStyleProp;
|
|
83
|
+
/**
|
|
84
|
+
* Boolean indicating whether the context menu item is hidden.
|
|
85
|
+
*/
|
|
86
|
+
hidden?: boolean;
|
|
83
87
|
} & (({
|
|
84
88
|
/**
|
|
85
89
|
* Optional context menu item icon.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-contextmenu",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.4",
|
|
4
4
|
"description": "Enhance your Mantine UI applications usability with customizable context menus",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"build:package": "rm -rf dist; tsc -p package/tsconfig.esm.json; tsc -p package/tsconfig.cjs.json; postcss package/styles*.css --dir dist/css",
|
|
65
65
|
"build:docs": "next build",
|
|
66
66
|
"build": "yarn build:package && yarn build:docs",
|
|
67
|
-
"lint": "eslint .",
|
|
67
|
+
"lint": "eslint . && tsc --noEmit --pretty",
|
|
68
68
|
"format": "prettier --write ."
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
@@ -73,19 +73,19 @@
|
|
|
73
73
|
"@mantine/core": "^7.1.7",
|
|
74
74
|
"@mantine/hooks": "^7.1.7",
|
|
75
75
|
"@mantine/notifications": "^7.1.7",
|
|
76
|
-
"@tabler/icons-react": "^2.
|
|
76
|
+
"@tabler/icons-react": "^2.40.0",
|
|
77
77
|
"@types/lodash": "^4.14.200",
|
|
78
78
|
"@types/node": "^20.8.9",
|
|
79
79
|
"@types/react": "^18.2.33",
|
|
80
80
|
"@types/react-dom": "^18.2.14",
|
|
81
|
-
"@typescript-eslint/eslint-plugin": "^6.9.
|
|
82
|
-
"@typescript-eslint/parser": "^6.9.
|
|
81
|
+
"@typescript-eslint/eslint-plugin": "^6.9.1",
|
|
82
|
+
"@typescript-eslint/parser": "^6.9.1",
|
|
83
83
|
"clsx": "^2.0.0",
|
|
84
84
|
"eslint": "^8.52.0",
|
|
85
|
-
"eslint-config-next": "^
|
|
85
|
+
"eslint-config-next": "^14.0.1",
|
|
86
86
|
"eslint-config-prettier": "^9.0.0",
|
|
87
87
|
"lodash": "^4.17.21",
|
|
88
|
-
"next": "
|
|
88
|
+
"next": "14.0.1",
|
|
89
89
|
"postcss": "^8.4.31",
|
|
90
90
|
"postcss-cli": "^10.1.0",
|
|
91
91
|
"postcss-import": "^15.1.0",
|