@lemonadejs/contextmenu 5.2.4 → 5.8.1

package/dist/index.d.ts

@@ -13,7 +13,7 @@ declare namespace Contextmenu {
         disabled?: boolean;
         tooltip?: string;
         shortcut?: string;
-        type: 'line' | undefined;
+        type?: 'line' | 'default';
         onclick?: (e: MouseEvent, element: HTMLElement) => void;
         icon?: string;
         render?: (e: MouseEvent, element: HTMLElement) => void;
@@ -31,6 +31,10 @@ declare namespace Contextmenu {
     interface Instance {
         options: boolean;
         open: (options: Options, x: number, y: number, e: MouseEvent) => void;
+        openAt: {
+            (event: MouseEvent | { clientX: number; clientY: number }): void;
+            (x: number, y: number): void;
+        };
         close: () => void;
     }
 }

package/dist/index.js

@@ -76,7 +76,7 @@ if (! Modal && typeof (require) === 'function') {
             return `<div></div>`;
         } else {
             return `<div class="lm-menu-item" role="menuitem" data-disabled="{{self.disabled}}" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" title="{{self.tooltip}}" data-submenu="${!!self.submenu}" aria-haspopup="${!!self.submenu}" aria-expanded="{{self.expanded}}" aria-label="{{self.title}}" tabindex="-1" onmouseup="self.parent.mouseUp" onmouseenter="self.parent.mouseEnter" onmouseleave="self.parent.mouseLeave">
-                <a>{{self.title}}</a> <div>{{self.shortcut}}</div>
+                <span>{{self.title}}</span> <div>{{self.shortcut}}</div>
             </div>`;
         }
     }
@@ -321,11 +321,28 @@ if (! Modal && typeof (require) === 'function') {
             return self.modals[0].modal.closed === true;
         }
 
-        self.open = function(options, x, y, e) {
+        self.openAt = function(a, b) {
+            let x, y;
+            if (a instanceof Event || (a && a.clientX !== undefined)) {
+                // openAt(event)
+                x = a.clientX;
+                y = a.clientY;
+            } else {
+                // openAt(x, y)
+                x = a;
+                y = b;
+            }
+            self.open(self.options, x, y, true);
+        };
+
+        self.open = function(options, x, y, adjust) {
             // Get the main modal
             let menu = self.modals[0];
             // Reset cursor
             resetCursor.call(menu);
+            // Define new position
+            menu.modal.top = y;
+            menu.modal.left = x;
             // Open
             menu.modal.open();
             // If the modal is open and the content is different from what is shown. Close modals with higher level
@@ -335,12 +352,48 @@ if (! Modal && typeof (require) === 'function') {
                 // Refresh content
                 menu.options = options;
             }
-            // Define new position
-            menu.modal.top = y;
-            menu.modal.left = x;
-
             onopen(self, options);
 
+            // Adjust position to respect mouse cursor after auto-adjust
+            // Use queueMicrotask to ensure it runs after the modal's auto-adjust
+            if (adjust === true) {
+                queueMicrotask(() => {
+                    let modalEl = menu.modal.el;
+                    let rect = modalEl.getBoundingClientRect();
+                    let marginLeft = parseFloat(modalEl.style.marginLeft) || 0;
+                    let marginTop = parseFloat(modalEl.style.marginTop) || 0;
+
+                    // Check if horizontal adjustment was applied (margin is non-zero)
+                    if (marginLeft !== 0) {
+                        // Position modal so its right edge is at x - 1 (cursor 1px to the right of modal)
+                        // Formula: left + margin + width = x - 1, where left = x
+                        // Therefore: margin = -width - 1
+                        let newMarginLeft = -rect.width - 1;
+                        // Check if this would push modal off the left edge
+                        let newLeft = x + newMarginLeft;
+                        if (newLeft < 10) {
+                            // Keep a 10px margin from the left edge
+                            newMarginLeft = 10 - x;
+                        }
+                        modalEl.style.marginLeft = newMarginLeft + 'px';
+                    }
+
+                    // Check if vertical adjustment was applied (margin is non-zero)
+                    if (marginTop !== 0) {
+                        // Position modal so its bottom edge is at y - 1 (cursor 1px below modal)
+                        // Formula: top + margin + height = y - 1, where top = y
+                        // Therefore: margin = -height - 1
+                        let newMarginTop = -rect.height - 1;
+                        // Check if this would push modal off the top edge
+                        let newTop = y + newMarginTop;
+                        if (newTop < 10) {
+                            // Keep a 10px margin from the top edge
+                            newMarginTop = 10 - y;
+                        }
+                        modalEl.style.marginTop = newMarginTop + 'px';
+                    }
+                });
+            }
             // Focus
             self.el.classList.add('lm-menu-focus');
             // Focus on the contextmenu
@@ -450,14 +503,18 @@ if (! Modal && typeof (require) === 'function') {
             });
 
             if (! self.root) {
-                self.root = self.el.parentNode;
+                if (self.tagName) {
+                    self.root = self.el.parentNode.parentNode;
+                } else {
+                    self.root = self.el.parentNode;
+                }
             }
 
             // Parent
             self.root.addEventListener("contextmenu", function(e) {
                 if (Array.isArray(self.options) && self.options.length) {
                     let [x, y] = getCoords(e);
-                    self.open(self.options, x, y, e);
+                    self.open(self.options, x, y, true);
                     e.preventDefault();
                     e.stopImmediatePropagation();
                 }

package/dist/style.css

@@ -40,7 +40,7 @@
     position: relative;
 }
 
-.lm-menu-submenu > div.lm-menu-item a {
+.lm-menu-submenu > div.lm-menu-item span {
     text-decoration: none;
     flex: 1;
     cursor: pointer;
@@ -66,7 +66,7 @@
 
 .lm-menu-submenu > div.lm-menu-item:hover,
 .lm-menu-submenu > div.lm-menu-item[data-cursor="true"] {
-    background-color: var(--lm-background-color-hover, #ebebeb);
+    background-color: var(--lm-background-color-highlight, #ebebeb);
 }
 
 .lm-menu-submenu hr {
@@ -96,5 +96,5 @@
 
 .lm-dark-mode .lm-menu-submenu > div.lm-menu-item:hover,
 .lm-dark-mode .lm-menu-submenu > div.lm-menu-item[data-cursor="true"] {
-    background-color: var(--lm-background-color-hover, #2d2d2d);
+    background-color: var(--lm-background-color-highlight, #2d2d2d);
 }

package/package.json

@@ -14,10 +14,10 @@
         "build": "webpack --config webpack.config.js"
     },
     "dependencies": {
-        "lemonadejs": "^5.2.0",
-        "@lemonadejs/modal": "^5.2.1"
+        "lemonadejs": "^5.3.6",
+        "@lemonadejs/modal": "^5.8.2"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.2.4"
+    "version": "5.8.1"
 }