@moises.ai/design-system 3.6.26 → 3.6.27
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/index.js +1803 -1757
- package/package.json +1 -1
- package/src/components/ContextMenu/CanvasContextMenu.jsx +73 -0
- package/src/index.jsx +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import classNames from 'classnames'
|
|
2
|
+
import { ContextMenu as ContextMenuRadix } from 'radix-ui'
|
|
3
|
+
import React, { forwardRef, memo } from 'react'
|
|
4
|
+
|
|
5
|
+
import { createRenderItem, styles } from '../../lib/menu'
|
|
6
|
+
|
|
7
|
+
const renderOption = createRenderItem(ContextMenuRadix)
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Variant of ContextMenu for programmatic opening from non-DOM event sources
|
|
11
|
+
* (e.g. Pixi canvas). Instead of wrapping a visible trigger element, it exposes
|
|
12
|
+
* a ref to an internal hidden div that can receive a synthetic `contextmenu` event.
|
|
13
|
+
*
|
|
14
|
+
* Usage:
|
|
15
|
+
* const triggerRef = useRef(null)
|
|
16
|
+
* triggerRef.current?.dispatchEvent(
|
|
17
|
+
* new MouseEvent('contextmenu', { bubbles: true, clientX: x, clientY: y })
|
|
18
|
+
* )
|
|
19
|
+
* ...
|
|
20
|
+
* <CanvasContextMenu ref={triggerRef} options={[...]}>
|
|
21
|
+
* {children} // rendered between trigger and content, inside the same Root
|
|
22
|
+
* </CanvasContextMenu>
|
|
23
|
+
*/
|
|
24
|
+
export const CanvasContextMenu = memo(
|
|
25
|
+
forwardRef(function CanvasContextMenu(
|
|
26
|
+
{
|
|
27
|
+
children,
|
|
28
|
+
options,
|
|
29
|
+
className,
|
|
30
|
+
size = '2',
|
|
31
|
+
onSelectionChange,
|
|
32
|
+
closeOnSelect = true,
|
|
33
|
+
...props
|
|
34
|
+
},
|
|
35
|
+
ref,
|
|
36
|
+
) {
|
|
37
|
+
return (
|
|
38
|
+
// The outer div catches the bubbling contextmenu event AFTER Radix has already
|
|
39
|
+
// processed it on the trigger, suppressing the browser's native context menu
|
|
40
|
+
// without interfering with Radix's own handler.
|
|
41
|
+
<div onContextMenu={(e) => e.preventDefault()} style={{ display: 'contents' }}>
|
|
42
|
+
<ContextMenuRadix.Root>
|
|
43
|
+
<ContextMenuRadix.Trigger asChild>
|
|
44
|
+
<div
|
|
45
|
+
ref={ref}
|
|
46
|
+
style={{ position: 'fixed', width: 0, height: 0, pointerEvents: 'none' }}
|
|
47
|
+
/>
|
|
48
|
+
</ContextMenuRadix.Trigger>
|
|
49
|
+
{children}
|
|
50
|
+
{options?.length > 0 && (
|
|
51
|
+
<ContextMenuRadix.Content
|
|
52
|
+
className={classNames(styles.menuContent, className)}
|
|
53
|
+
side={props.side}
|
|
54
|
+
align={props.align}
|
|
55
|
+
sideOffset={5}
|
|
56
|
+
alignOffset={0}
|
|
57
|
+
onCloseAutoFocus={(event) => {
|
|
58
|
+
event.preventDefault()
|
|
59
|
+
}}
|
|
60
|
+
onClick={(event) => event.stopPropagation()}
|
|
61
|
+
>
|
|
62
|
+
{options?.map((option) =>
|
|
63
|
+
renderOption(option, size, onSelectionChange, closeOnSelect),
|
|
64
|
+
)}
|
|
65
|
+
</ContextMenuRadix.Content>
|
|
66
|
+
)}
|
|
67
|
+
</ContextMenuRadix.Root>
|
|
68
|
+
</div>
|
|
69
|
+
)
|
|
70
|
+
}),
|
|
71
|
+
)
|
|
72
|
+
|
|
73
|
+
CanvasContextMenu.displayName = 'CanvasContextMenu'
|
package/src/index.jsx
CHANGED
|
@@ -81,6 +81,7 @@ export { Callout } from './components/Callout/Callout'
|
|
|
81
81
|
export { Card as CardWidget } from './components/Card/Card'
|
|
82
82
|
export { Checkbox } from './components/Checkbox/Checkbox'
|
|
83
83
|
export { CigarBar } from './components/CigarBar/CigarBar'
|
|
84
|
+
export { CanvasContextMenu } from './components/ContextMenu/CanvasContextMenu'
|
|
84
85
|
export { ContextMenu } from './components/ContextMenu/ContextMenu'
|
|
85
86
|
export { Countdown } from './components/Countdown/Countdown'
|
|
86
87
|
export { DataTable } from './components/DataTable/DataTable'
|