@vaadin/vaadin-context-menu - npm Package Compare versions

Comparing version 4.3.14 to 4.3.15

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-context-menu",
-  "version": "4.3.14",
+  "version": "4.3.15",
   "main": "vaadin-context-menu.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-context-menu.js

@@ -266,3 +266,3 @@ /**
   static get version() {
-    return '4.3.14';
+    return '4.3.15';
   }
@@ -396,2 +396,3 @@
     this._setOpened(e.detail.value);
+    this.__alignOverlayPosition();
   }
@@ -612,3 +613,3 @@
     // in the `vaadin-overlay-change` which guarantees that overlay is ready
-    const x = this.__x || left;
+    let x = this.__x || left;
     const y = this.__y || top;
@@ -624,7 +625,7 @@
     let alignedToParent = false;
+    let parentContentRect;
     if (parent) {
-      const parentContentRect = parent.$.overlay.getBoundingClientRect();
+      parentContentRect = parent.$.overlay.getBoundingClientRect();
       if (parent.hasAttribute('right-aligned')) {
         const parentStyle = getComputedStyle(parent);
-
         const getPadding = (el, direction) => {
@@ -639,5 +640,9 @@ return parseFloat(getComputedStyle(el.$.content)['padding' + direction]);
           overlay.setAttribute('right-aligned', '');
-          style.right = right - padding + 'px';
+          style.right = right + 'px';
           alignedToParent = true;
         }
+      } else if (x < parentContentRect.x) {
+        // Check if sub menu opens on the left side and the parent menu is not right aligned.
+        // If so, use actual width of the submenu content instead of the parent menu content.
+        x = x - (width - parentContentRect.width);
       }
@@ -647,5 +652,14 @@ }
     if (!alignedToParent) {
-      if (x < wdthVport / 2 || x < xMax) {
+      // Sub-menu is displayed in the right side of root menu
+      if ((x < wdthVport / 2 || x < xMax) && !parent) {
         style.left = x + 'px';
-      } else {
+      } else if ((parent && (wdthVport - parentContentRect.width - parentContentRect.left
+        >= parentContentRect.width))) { // Sub-menu is displayed in the right side of root menu If it is nested menu
+        style.left = parentContentRect.left + parentContentRect.width + 'px';
+      } else if (parent) { // Sub-menu is displayed in the left side of root menu If it is nested menu
+        style.right = 'auto';
+        style.left = Math.max(overlay.getBoundingClientRect().left,
+          parentContentRect.left - overlay.getBoundingClientRect().width) + 'px';
+        overlay.setAttribute('right-aligned', '');
+      } else { // Sub-menu is displayed in the left side of root menu
         style.right = Math.max(0, (wdthVport - x)) + 'px';
@@ -652,0 +666,0 @@ overlay.setAttribute('right-aligned', '');

No alert changes

Improved metrics

Total package byte prevSize

67307

increased by1.62%

Lines of code

1371

increased by1.11%

No dependency changes