@lemonadejs/contextmenu 5.8.1 → 5.8.3

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;
@@ -408,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

@@ -19,5 +19,5 @@
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.8.1"
+    "version": "5.8.3"
 }