@vaadin/context-menu 23.0.0-alpha5 → 23.0.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "23.0.0-alpha5",
+  "version": "23.0.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,21 +34,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha5",
-    "@vaadin/item": "23.0.0-alpha5",
-    "@vaadin/list-box": "23.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha5",
-    "@vaadin/vaadin-overlay": "23.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha5"
+    "@vaadin/component-base": "23.0.0-beta4",
+    "@vaadin/item": "23.0.0-beta4",
+    "@vaadin/list-box": "23.0.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta4",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta4",
+    "@vaadin/vaadin-overlay": "23.0.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha5",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-beta4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "74f9294964eb8552d96578c14af6ad214f5257bc"
+  "gitHead": "d0b447f1c31ca4256a5e26f2dcd27784447ff79b"
 }

package/src/vaadin-context-menu.js

@@ -4,11 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-contextmenu-event.js';
-import './vaadin-device-detector.js';
 import './vaadin-context-menu-overlay.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { addListener, gestures, removeListener } from '@vaadin/component-base/src/gestures.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.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';
@@ -196,10 +198,11 @@ import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
  *
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes ControllerMixin
  * @mixes ThemePropertyMixin
  * @mixes ItemsMixin
  */
-class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElement))) {
+class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -214,8 +217,6 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElem
 
       <slot id="slot"></slot>
 
-      <vaadin-device-detector phone="{{_phone}}" touch="{{_touch}}"></vaadin-device-detector>
-
       <vaadin-context-menu-overlay
         id="overlay"
         on-opened-changed="_onOverlayOpened"
@@ -314,12 +315,36 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElem
       _boundOpen: Object,
 
       /** @private */
-      _touch: Boolean
+      _phone: {
+        type: Boolean
+      },
+
+      /** @private */
+      _touch: {
+        type: Boolean,
+        value: isTouch
+      },
+
+      /** @private */
+      _wide: {
+        type: Boolean
+      },
+
+      /** @private */
+      _wideMediaQuery: {
+        type: String,
+        value: '(min-device-width: 750px)'
+      }
     };
   }
 
   static get observers() {
-    return ['_openedChanged(opened)', '_targetOrOpenOnChanged(listenOn, openOn)', '_rendererChanged(renderer, items)'];
+    return [
+      '_openedChanged(opened)',
+      '_targetOrOpenOnChanged(listenOn, openOn)',
+      '_rendererChanged(renderer, items)',
+      '_touchOrWideChanged(_touch, _wide)'
+    ];
   }
 
   constructor() {
@@ -349,6 +374,12 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElem
   ready() {
     super.ready();
 
+    this.addController(
+      new MediaQueryController(this._wideMediaQuery, (matches) => {
+        this._wide = matches;
+      })
+    );
+
     processTemplates(this);
   }
 
@@ -392,6 +423,11 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElem
     }
   }
 
+  /** @private */
+  _touchOrWideChanged(touch, wide) {
+    this._phone = !wide && touch;
+  }
+
   /** @private */
   _setListenOnUserSelect(value) {
     // note: these styles don't seem to work in Firefox on iOS.

package/src/vaadin-contextmenu-items-mixin.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { flush } from '@polymer/polymer/lib/utils/flush.js';
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { Item } from '@vaadin/item/src/vaadin-item.js';
 import { ListBox } from '@vaadin/list-box/src/vaadin-list-box.js';
 
@@ -242,9 +243,11 @@ export const ItemsMixin = (superClass) =>
 
     /** @protected */
     _setMenuItemTheme(component, item, hostTheme) {
-      let theme = hostTheme;
+      // Use existing component theme when it is provided
+      let theme = component.getAttribute('theme') || hostTheme;
 
-      // item theme takes precedence over host theme even if it's empty, as long as it's not undefined or null
+      // Item theme takes precedence over host theme / component theme
+      // even if it's empty, as long as it's not undefined or null
       if (item.theme != null) {
         theme = Array.isArray(item.theme) ? item.theme.join(' ') : item.theme;
       }
@@ -361,7 +364,10 @@ export const ItemsMixin = (superClass) =>
           }
         };
 
-        menu.$.overlay.addEventListener('mouseover', openSubMenu);
+        // Open a submenu on click event when a touch device is used.
+        // On desktop, a submenu opens on hover.
+        menu.$.overlay.addEventListener(isTouch ? 'click' : 'mouseover', openSubMenu);
+
         menu.$.overlay.addEventListener('keydown', (e) => {
           const isRTL = this.__isRTL;
           const shouldOpenSubMenu =

package/src/vaadin-device-detector.js

@@ -1,60 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@polymer/iron-media-query/iron-media-query.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
-
-/**
- * Element for internal use only.
- *
- * @private
- */
-class DeviceDetector extends PolymerElement {
-  static get template() {
-    return html`<iron-media-query query="min-device-width: 750px" query-matches="{{wide}}"></iron-media-query>`;
-  }
-
-  static get is() {
-    return 'vaadin-device-detector';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * `true`, when running in a phone.
-       */
-      phone: {
-        type: Boolean,
-        computed: '_phone(wide, touch)',
-        notify: true
-      },
-
-      /**
-       * `true`, when running in a touch device.
-       * @default false
-       */
-      touch: {
-        type: Boolean,
-        notify: true,
-        value: isTouch
-      },
-
-      /**
-       * `true`, when running in a tablet/desktop device.
-       */
-      wide: {
-        type: Boolean,
-        notify: true
-      }
-    };
-  }
-
-  _phone(wide, touch) {
-    return !wide && touch;
-  }
-}
-
-customElements.define(DeviceDetector.is, DeviceDetector);