@lemonadejs/contextmenu 5.8.0 → 5.8.3

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

@@ -70,7 +70,7 @@ if (! Modal && typeof (require) === 'function') {
         // Initialize expanded state
         self.expanded = false;
 
-        if (self.type === 'line') {
+        if (self.type === 'line' || self.type === 'divisor') {
             return `<hr role="separator" />`;
         } else if (self.type === 'inline') {
             return `<div></div>`;
@@ -145,9 +145,69 @@ if (! Modal && typeof (require) === 'function') {
                 let rect = parent.modal.el.getBoundingClientRect();
                 // Update modal
                 current.modal.open();
-                // Aria indication
-                current.modal.top = rect.y + s.el.offsetTop + 2;
-                current.modal.left = rect.x + 248;
+
+                // Calculate initial position using item's actual screen position (accounts for scroll)
+                let itemRect = s.el.getBoundingClientRect();
+                let submenuWidth = 250;
+                let submenuTop = itemRect.y;
+                let submenuLeft = rect.x + rect.width - 2; // Position to the right of parent
+
+                // Check if parent was positioned to the left (has negative margin or is on left side)
+                let parentOpenedLeft = parent.openedLeft || false;
+
+                // Check horizontal space
+                let spaceOnRight = window.innerWidth - (rect.x + rect.width);
+                let spaceOnLeft = rect.x;
+
+                // Determine which side to open the submenu
+                let openLeft = parentOpenedLeft; // Follow parent's direction by default
+
+                // If parent opened to right, check if we still have space
+                if (!parentOpenedLeft && spaceOnRight < submenuWidth + 10) {
+                    // Not enough space on right, switch to left
+                    openLeft = true;
+                }
+                // If parent opened to left, check if we still have space on left
+                if (parentOpenedLeft && spaceOnLeft < submenuWidth + 10) {
+                    // Not enough space on left, switch to right if possible
+                    if (spaceOnRight >= submenuWidth + 10) {
+                        openLeft = false;
+                    }
+                }
+
+                if (openLeft) {
+                    // Position to the left of parent menu
+                    submenuLeft = rect.x - submenuWidth + 2;
+                    // Ensure it doesn't go off the left edge
+                    if (submenuLeft < 10) {
+                        submenuLeft = 10;
+                    }
+                    current.openedLeft = true;
+                } else {
+                    current.openedLeft = false;
+                }
+
+                // Set position
+                current.modal.top = submenuTop;
+                current.modal.left = submenuLeft;
+
+                // Adjust vertical position after render
+                queueMicrotask(() => {
+                    let submenuEl = current.modal.el;
+                    let submenuRect = submenuEl.getBoundingClientRect();
+
+                    // Check if submenu goes off the bottom
+                    if (submenuRect.bottom > window.innerHeight - 10) {
+                        let overflow = submenuRect.bottom - (window.innerHeight - 10);
+                        let newTop = submenuTop - overflow;
+                        // Don't go above the top of the screen
+                        if (newTop < 10) {
+                            newTop = 10;
+                        }
+                        current.modal.top = newTop;
+                    }
+                });
+
                 // Keep current item for each modal
                 current.item = s;
                 s.expanded = true;
@@ -321,6 +381,20 @@ if (! Modal && typeof (require) === 'function') {
             return self.modals[0].modal.closed === true;
         }
 
+        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];
@@ -394,6 +468,7 @@ if (! Modal && typeof (require) === 'function') {
                         menu.item.expanded = false;
                         menu.item = null;
                     }
+                    menu.openedLeft = false;
                     menu.modal.close();
                 }
             });

package/dist/style.css

@@ -65,7 +65,8 @@
 }
 
 .lm-menu-submenu > div.lm-menu-item:hover,
-.lm-menu-submenu > div.lm-menu-item[data-cursor="true"] {
+.lm-menu-submenu > div.lm-menu-item[data-cursor="true"],
+.lm-menu-submenu > div.lm-menu-item[aria-expanded="true"] {
     background-color: var(--lm-background-color-highlight, #ebebeb);
 }
 
@@ -95,6 +96,7 @@
 }
 
 .lm-dark-mode .lm-menu-submenu > div.lm-menu-item:hover,
-.lm-dark-mode .lm-menu-submenu > div.lm-menu-item[data-cursor="true"] {
+.lm-dark-mode .lm-menu-submenu > div.lm-menu-item[data-cursor="true"],
+.lm-dark-mode .lm-menu-submenu > div.lm-menu-item[aria-expanded="true"] {
     background-color: var(--lm-background-color-highlight, #2d2d2d);
 }

package/package.json

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