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

Comparing version 4.3.15 to 4.4.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-context-menu",
-  "version": "4.3.15",
+  "version": "4.4.0-alpha1",
   "main": "vaadin-context-menu.js",
@@ -36,9 +36,9 @@ "author": "Vaadin Ltd",
     "@polymer/iron-media-query": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.3.2",
-    "@vaadin/vaadin-overlay": "^3.2.9",
-    "@vaadin/vaadin-lumo-styles": "^1.1.1",
-    "@vaadin/vaadin-material-styles": "^1.1.1",
-    "@vaadin/vaadin-element-mixin": "^2.1.1",
-    "@vaadin/vaadin-item": "^2.1.0",
-    "@vaadin/vaadin-list-box": "^1.1.0"
+    "@vaadin/vaadin-themable-mixin": "^1.5.2",
+    "@vaadin/vaadin-overlay": "^3.4.0",
+    "@vaadin/vaadin-lumo-styles": "^1.6.0",
+    "@vaadin/vaadin-material-styles": "^1.3.2",
+    "@vaadin/vaadin-element-mixin": "^2.3.1",
+    "@vaadin/vaadin-item": "^2.2.0-alpha1",
+    "@vaadin/vaadin-list-box": "^1.3.0-alpha3"
   },
@@ -52,4 +52,4 @@ "devDependencies": {
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^3.0.0"
+    "@vaadin/vaadin-demo-helpers": "^3.1.0-alpha1"
   }
 }

src/vaadin-context-menu-overlay.js

@@ -19,3 +19,4 @@ /**
 
-      :host([right-aligned]) {
+      :host([right-aligned]),
+      :host([end-aligned]) {
         align-items: flex-end;
@@ -44,2 +45,5 @@ }
  *
+ * #### Deprecated
+ * `right-aligned` is deprecated in favor of `end-aligned`
+ *
  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
@@ -124,4 +128,6 @@ *
       xMax: overlayRect.right - contentRect.width,
+      xMin: overlayRect.left + contentRect.width,
       yMax,
       left: overlayRect.left,
+      right: overlayRect.right,
       top: overlayRect.top,
@@ -128,0 +134,0 @@ width: contentRect.width

src/vaadin-context-menu.js

@@ -266,3 +266,3 @@ /**
   static get version() {
-    return '4.3.15';
+    return '4.4.0-alpha1';
   }
@@ -606,9 +606,9 @@
     ['top', 'right', 'bottom', 'left'].forEach(prop => style.removeProperty(prop));
-    ['right-aligned', 'bottom-aligned'].forEach(attr => overlay.removeAttribute(attr));
+    ['right-aligned', 'end-aligned', 'bottom-aligned'].forEach(attr => overlay.removeAttribute(attr));
 
     // Maximum x and y values are imposed by content size and overlay limits.
-    const {xMax, yMax, left, top, width} = overlay.getBoundaries();
+    const {xMax, xMin, yMax, left, right, top, width} = overlay.getBoundaries();
     // Reuse saved x and y event values, in order to this method be used async
     // in the `vaadin-overlay-change` which guarantees that overlay is ready
-    let x = this.__x || left;
+    let x = this.__x || (!this.__isRTL ? left : right);
     const y = this.__y || top;
@@ -627,3 +627,3 @@
       parentContentRect = parent.$.overlay.getBoundingClientRect();
-      if (parent.hasAttribute('right-aligned')) {
+      if (parent.hasAttribute('right-aligned') || parent.hasAttribute('end-aligned')) {
         const parentStyle = getComputedStyle(parent);
@@ -633,9 +633,9 @@ const getPadding = (el, direction) => {
         };
-        const right = parseFloat(parentStyle.right) + parentContentRect.width;
+        const dimensionToSet = parseFloat(parentStyle[this.__isRTL ? 'left' : 'right']) + parentContentRect.width;
         const padding = getPadding(parent, 'Left') + getPadding(overlay, 'Right');
 
-        // Preserve right-aligned, if possible.
-        if ((wdthVport - (right - padding)) > width) {
-          overlay.setAttribute('right-aligned', '');
-          style.right = right + 'px';
+        // Preserve end-aligned, if possible.
+        if ((wdthVport - (dimensionToSet - padding)) > width) {
+          this._setEndAligned(overlay);
+          style[this.__isRTL ? 'left' : 'right'] = dimensionToSet + 'px';
           alignedToParent = true;
@@ -651,16 +651,34 @@ }
     if (!alignedToParent) {
-      // Sub-menu is displayed in the right side of root menu
-      if ((x < wdthVport / 2 || x < xMax) && !parent) {
-        style.left = x + 'px';
-      } 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';
-        overlay.setAttribute('right-aligned', '');
+      if (!this.__isRTL) {
+        // Sub-menu is displayed in the right side of root menu
+        if ((x < wdthVport / 2 || x < xMax) && !parent) {
+          style.left = x + 'px';
+        } 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';
+          this._setEndAligned(overlay);
+        } else { // Sub-menu is displayed in the left side of root menu
+          style.right = Math.max(0, (wdthVport - x)) + 'px';
+          this._setEndAligned(overlay);
+        }
+      } else {
+        // Sub-menu is displayed in the left side of root menu
+        if ((x > wdthVport / 2 || x > xMin) && !parent) {
+          style.right = Math.max(0, (wdthVport - x)) + 'px';
+        } else if (parent && (parentContentRect.left >= parentContentRect.width)) {
+          // Sub-menu is displayed in the left side of root menu If it is nested menu
+          style.right = (wdthVport - parentContentRect.right + parentContentRect.width) + 'px';
+        } else if (parent) { // Sub-menu is displayed in the right side of root menu If it is nested menu
+          style.right = 'auto';
+          style.left = Math.max(overlay.getBoundingClientRect().left - overlay.getBoundingClientRect().width,
+            parentContentRect.right) + 'px';
+          this._setEndAligned(overlay);
+        } else { // Sub-menu is displayed in the left side of root menu
+          style.left = x + 'px';
+          this._setEndAligned(overlay);
+        }
       }
@@ -676,2 +694,9 @@ }
 
+  _setEndAligned(element) {
+    element.setAttribute('end-aligned', '');
+    if (!this.__isRTL) {
+      element.setAttribute('right-aligned', '');
+    }
+  }
+
   _getEventCoordinate(event, coord) {
@@ -678,0 +703,0 @@ if (event.detail instanceof Object) {

src/vaadin-contextmenu-items-mixin.js

 import { ItemElement } from '@vaadin/vaadin-item/src/vaadin-item.js';
 import { ListBoxElement } from '@vaadin/vaadin-list-box/src/vaadin-list-box.js';
+import '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
 import { flush } from '@polymer/polymer/lib/utils/flush.js';
@@ -116,2 +117,6 @@ /**
 
+  get __isRTL() {
+    return this.getAttribute('dir') === 'rtl';
+  }
+
   __forwardFocus() {
@@ -285,3 +290,4 @@ const overlay = this.$.overlay;
       menu.$.overlay.addEventListener('keydown', e => {
-        if (e.keyCode === 37) {
+        const isRTL = this.__isRTL;
+        if ((!isRTL && e.keyCode === 37) || (isRTL && e.keyCode === 39)) {
           menu.close();
@@ -325,4 +331,11 @@ menu.listenOn.focus();
       menu.$.overlay.addEventListener('mouseover', openSubMenu);
-      menu.$.overlay.addEventListener('keydown', e =>
-        (e.keyCode === 39 || e.keyCode === 13 || e.keyCode === 32) && openSubMenu(e));
+      menu.$.overlay.addEventListener('keydown', e => {
+        const isRTL = this.__isRTL;
+        const shouldOpenSubMenu = (!isRTL && e.keyCode === 39)
+            || (isRTL && e.keyCode === 37)
+            || e.keyCode === 13
+            || e.keyCode === 32;
+
+        shouldOpenSubMenu && openSubMenu(e);
+      });
     } else {
@@ -329,0 +342,0 @@ const listBox = root.querySelector('vaadin-context-menu-list-box');

theme/lumo/vaadin-context-menu-styles.js

@@ -74,2 +74,13 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 
+      /* RTL styles */
+      :host([dir="rtl"])[part="items"] ::slotted(.vaadin-menu-item) {
+        padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+        padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
+      }
+
+      :host([dir="rtl"].vaadin-menu-list-box) [part="items"] ::slotted(.vaadin-menu-item) {
+        padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+        padding-right: calc(var(--lumo-border-radius) / 4);
+      }
+
       /* Focused item */
@@ -102,2 +113,5 @@
         color: var(--lumo-tertiary-text-color);
+      }
+
+      :host(:not([dir="rtl"]).vaadin-menu-item.vaadin-context-menu-parent-item)::after {
         margin-right: calc(var(--lumo-space-m) * -1);
@@ -110,2 +124,10 @@ padding-left: var(--lumo-space-m);
       }
+
+      /* RTL styles */
+      :host([dir="rtl"].vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+        content: var(--lumo-icons-angle-left);
+        margin-left: calc(var(--lumo-space-m) * -1);
+        padding-right: var(--lumo-space-m);
+      }
+
     </style>
@@ -112,0 +134,0 @@ </template>

theme/material/vaadin-context-menu-styles.js

@@ -30,2 +30,6 @@ import '@vaadin/vaadin-material-styles/font-icons.js';
 
+      :host([dir="rtl"]) [part="items"] ::slotted(.vaadin-menu-item:not(hr)) {
+        padding: 8px 10px 8px 32px;
+      }
+
       [part="items"] ::slotted(.vaadin-menu-item:hover:not([disabled])) {
@@ -52,4 +56,7 @@ background-color: var(--material-secondary-background-color);
         font-family: material-icons;
+        font-size: var(--material-icon-font-size);
+      }
+
+      :host(:not([dir="rtl"]).vaadin-menu-item.vaadin-context-menu-parent-item)::after {
         content: var(--material-icons-chevron-right);
-        font-size: var(--material-icon-font-size);
         padding-left: 9px;
@@ -59,2 +66,8 @@ margin-right: -9px;
 
+      :host([dir="rtl"].vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+        content: var(--material-icons-chevron-left);
+        padding-right: 9px;
+        margin-left: -9px;
+      }
+
       :host(.vaadin-menu-item)::before {
@@ -61,0 +74,0 @@ display: block;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70529

increased by4.79%

Lines of code

1439

increased by4.96%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/vaadin-element-mixin@^2.3.1

• Updated@vaadin/vaadin-item@^2.2.0-alpha1

• Updated@vaadin/vaadin-list-box@^1.3.0-alpha3

• Updated@vaadin/vaadin-lumo-styles@^1.6.0

• Updated@vaadin/vaadin-material-styles@^1.3.2

• Updated@vaadin/vaadin-overlay@^3.4.0

• Updated@vaadin/vaadin-themable-mixin@^1.5.2