@vaadin/context-menu 22.0.0-rc1 → 23.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "22.0.0-rc1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,19 +35,19 @@
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-rc1",
-    "@vaadin/item": "22.0.0-rc1",
-    "@vaadin/list-box": "22.0.0-rc1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-material-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-overlay": "22.0.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-rc1"
+    "@vaadin/component-base": "23.0.0-alpha2",
+    "@vaadin/item": "23.0.0-alpha2",
+    "@vaadin/list-box": "23.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-overlay": "23.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-rc1",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha2",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "7b6f44bcd2c0fd415028ace666feeb0fedb1d540"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

package/src/vaadin-context-menu.d.ts

@@ -3,7 +3,6 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { ContextMenuItem, ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
@@ -224,7 +223,7 @@ export interface ContextMenuEventMap extends HTMLElementEventMap, ContextMenuCus
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} item-selected - Fired when an item is selected when the context menu is populated using the `items` API.
  */
-declare class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEventListeners(HTMLElement)))) {
+declare class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(HTMLElement))) {
   /**
    * CSS selector that can be used to target any child element
    * of the context menu to listen for `openOn` events.

package/src/vaadin-context-menu.js

@@ -6,10 +6,9 @@
 import './vaadin-contextmenu-event.js';
 import './vaadin-device-detector.js';
 import './vaadin-context-menu-overlay.js';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { addListener, gestures, removeListener } from '@polymer/polymer/lib/utils/gestures.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { addListener, gestures, removeListener } from '@vaadin/component-base/src/gestures.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
@@ -199,9 +198,8 @@ import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemePropertyMixin
  * @mixes ItemsMixin
- * @mixes GestureEventListeners
  */
-class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEventListeners(PolymerElement)))) {
+class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -489,9 +487,8 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEven
       return Array.prototype.filter.call(targets, (el) => {
         return e.composedPath().indexOf(el) > -1;
       })[0];
-    } else {
-      return e.target;
     }
+    return e.target;
   }
 
   /**
@@ -574,7 +571,7 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEven
     // in the `vaadin-overlay-change` which guarantees that overlay is ready.
     // The valus represent an anchor position on the page where the contextmenu
     // event took place.
-    let x = this.__x;
+    const x = this.__x;
     const y = this.__y;
 
     // Select one overlay corner and move to the event x/y position.
@@ -591,15 +588,13 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEven
         style.right = Math.max(0, wdthVport - x) + 'px';
         this._setEndAligned(overlay);
       }
+    } else if (x > wdthVport / 2 || x > xMin) {
+      // Menu is displayed in the right side of the anchor
+      style.right = Math.max(0, wdthVport - x) + 'px';
     } else {
       // Menu is displayed in the left side of the anchor
-      if (x > wdthVport / 2 || x > xMin) {
-        style.right = Math.max(0, wdthVport - x) + 'px';
-      } else {
-        // Menu is displayed in the left side of the anchor
-        style.left = x + 'px';
-        this._setEndAligned(overlay);
-      }
+      style.left = x + 'px';
+      this._setEndAligned(overlay);
     }
 
     if (y < hghtVport / 2 || y < yMax) {
@@ -636,10 +631,9 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEven
         // Native keyboard event
         const rect = event.target.getBoundingClientRect();
         return coord === 'x' ? rect.left : rect.top + rect.height;
-      } else {
-        // Native mouse or touch event
-        return position;
       }
+      // Native mouse or touch event
+      return position;
     }
   }
 

package/src/vaadin-contextmenu-event.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { prevent, register } from '@polymer/polymer/lib/utils/gestures.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
+import { prevent, register } from '@vaadin/component-base/src/gestures.js';
 
 register({
   name: 'vaadin-contextmenu',

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

@@ -90,7 +90,8 @@ registerStyles(
 registerStyles(
   'vaadin-context-menu-item',
   css`
-    :host {
+    /* :hover needed to workaround https://github.com/vaadin/web-components/issues/3133 */
+    :host(:hover) {
       user-select: none;
       -ms-user-select: none;
       -webkit-user-select: none;