@vaadin/context-menu 22.0.0-beta1 → 22.0.1

package/README.md

@@ -1,13 +1,10 @@
-# <vaadin-context-menu>
+# @vaadin/context-menu
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-context-menu/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-context-menu/html-api)
+A web component that can be attached to any component to display a context menu.
 
-[<vaadin-context-menu>](https://vaadin.com/components/vaadin-context-menu) is a Web Component providing a contextual menu, part of the [Vaadin components](https://vaadin.com/components).
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/context-menu)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/context-menu)](https://www.npmjs.com/package/@vaadin/context-menu)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-context-menu)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
@@ -36,50 +33,50 @@
 </script>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-context-menu/master/screenshot.png" width="493" alt="Screenshot of vaadin-context-menu">](https://vaadin.com/components/vaadin-context-menu)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/context-menu/screenshot.png" width="493" alt="Screenshot of vaadin-context-menu">](https://vaadin.com/docs/latest/ds/components/context-menu)
 
 **Note:** [`<vaadin-list-box>`](https://github.com/vaadin/vaadin-list-box) component used in the above example should be installed and imported separately.
 
 ## Installation
 
-Install `vaadin-context-menu`:
+Install the component:
 
 ```sh
-npm i @vaadin/context-menu --save
+npm i @vaadin/context-menu
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/context-menu/vaadin-context-menu.js';
+import '@vaadin/context-menu';
 ```
 
-## Getting started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/context-menu/vaadin-context-menu.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the component from the `theme/material` folder:
 
-## Entry points
-
-- The component with the Lumo theme:
-
-  `theme/lumo/vaadin-context-menu.js`
-
-- The component with the Material theme:
-
-  `theme/material/vaadin-context-menu.js`
+```js
+import '@vaadin/context-menu/theme/material/vaadin-context-menu.js';
+```
 
-- Alias for `theme/lumo/vaadin-context-menu.js`:
+You can also import the Lumo version of the component explicitly:
 
-  `vaadin-context-menu.js`
+```js
+import '@vaadin/context-menu/theme/lumo/vaadin-context-menu.js';
+```
 
-## Contributing
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+```js
+import '@vaadin/context-menu/src/vaadin-context-menu.js';
+```
 
 ## License
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "22.0.0-beta1",
+  "version": "22.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -32,21 +32,22 @@
     "polymer"
   ],
   "dependencies": {
+    "@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-beta1",
-    "@vaadin/item": "22.0.0-beta1",
-    "@vaadin/list-box": "22.0.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-overlay": "22.0.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
+    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/item": "^22.0.1",
+    "@vaadin/list-box": "^22.0.1",
+    "@vaadin/vaadin-lumo-styles": "^22.0.1",
+    "@vaadin/vaadin-material-styles": "^22.0.1",
+    "@vaadin/vaadin-overlay": "^22.0.1",
+    "@vaadin/vaadin-themable-mixin": "^22.0.1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-beta1",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/polymer-legacy-adapter": "^22.0.1",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
+  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
 }

package/src/vaadin-context-menu-overlay.js

@@ -3,8 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
+import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-context-menu-overlay',
@@ -36,7 +37,7 @@ registerStyles(
  * @extends OverlayElement
  * @protected
  */
-class ContextMenuOverlay extends OverlayElement {
+class ContextMenuOverlay extends PositionMixin(OverlayElement) {
   static get is() {
     return 'vaadin-context-menu-overlay';
   }
@@ -101,13 +102,36 @@ class ContextMenuOverlay extends OverlayElement {
     return {
       xMax: overlayRect.right - contentRect.width,
       xMin: overlayRect.left + contentRect.width,
-      yMax,
-      left: overlayRect.left,
-      right: overlayRect.right,
-      top: overlayRect.top,
-      width: contentRect.width
+      yMax
     };
   }
+
+  _updatePosition() {
+    super._updatePosition();
+
+    if (this.positionTarget && this.parentOverlay) {
+      // This overlay is positioned by a parent menu item,
+      // adjust the position by the overlay content paddings
+      const content = this.$.content;
+      const style = getComputedStyle(content);
+
+      // Horizontal adjustment
+      const isLeftAligned = !!this.style.left;
+      if (isLeftAligned) {
+        this.style.left = parseFloat(this.style.left) + parseFloat(style.paddingLeft) + 'px';
+      } else {
+        this.style.right = parseFloat(this.style.right) + parseFloat(style.paddingRight) + 'px';
+      }
+
+      // Vertical adjustment
+      const isBottomAligned = !!this.style.bottom;
+      if (isBottomAligned) {
+        this.style.bottom = parseFloat(this.style.bottom) - parseFloat(style.paddingBottom) + 'px';
+      } else {
+        this.style.top = parseFloat(this.style.top) - parseFloat(style.paddingTop) + 'px';
+      }
+    }
+  }
 }
 
 customElements.define(ContextMenuOverlay.is, ContextMenuOverlay);

package/src/vaadin-context-menu.js

@@ -3,16 +3,16 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { gestures, addListener, removeListener } from '@polymer/polymer/lib/utils/gestures.js';
+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 { 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';
-import './vaadin-contextmenu-event.js';
-import './vaadin-device-detector.js';
-import './vaadin-context-menu-overlay.js';
 
 /**
  * `<vaadin-context-menu>` is a Web Component for creating context menus.
@@ -552,6 +552,16 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEven
   /** @private */
   __alignOverlayPosition() {
     const overlay = this.$.overlay;
+
+    if (overlay.positionTarget) {
+      // The overlay is positioned relative to another node, for example, a
+      // menu item in a nested submenu structure where this overlay lists
+      // the items for another submenu.
+      // It means that the overlay positioning is controlled by
+      // vaadin-overlay-position-mixin so no manual alignment is needed.
+      return;
+    }
+
     const style = overlay.style;
 
     // Reset all properties before measuring
@@ -559,89 +569,39 @@ class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(GestureEven
     ['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, xMin, yMax, left, right, top, width } = overlay.getBoundaries();
+    const { xMax, xMin, yMax } = 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 || (!this.__isRTL ? left : right);
-    const y = this.__y || top;
+    // 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 y = this.__y;
 
     // Select one overlay corner and move to the event x/y position.
     // Then set styling attrs for flex-aligning the content appropriately.
     const wdthVport = document.documentElement.clientWidth;
     const hghtVport = document.documentElement.clientHeight;
 
-    // Align to the parent menu overlay, if any.
-    const parent = overlay.parentOverlay;
-    let alignedToParent = false;
-    let parentContentRect;
-    if (parent) {
-      parentContentRect = parent.$.overlay.getBoundingClientRect();
-      if (parent.hasAttribute('right-aligned') || parent.hasAttribute('end-aligned')) {
-        const parentStyle = getComputedStyle(parent);
-        const getPadding = (el, direction) => {
-          return parseFloat(getComputedStyle(el.$.content)['padding' + direction]);
-        };
-        const dimensionToSet = parseFloat(parentStyle[this.__isRTL ? 'left' : 'right']) + parentContentRect.width;
-        const padding = getPadding(parent, 'Left') + getPadding(overlay, 'Right');
-
-        // Preserve end-aligned, if possible.
-        if (wdthVport - (dimensionToSet - padding) > width) {
-          this._setEndAligned(overlay);
-          style[this.__isRTL ? 'left' : 'right'] = dimensionToSet + '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);
+    if (!this.__isRTL) {
+      if (x < wdthVport / 2 || x < xMax) {
+        // Menu is displayed in the right side of the anchor
+        style.left = x + 'px';
+      } else {
+        // Menu is displayed in the left side of the anchor
+        style.right = Math.max(0, wdthVport - x) + 'px';
+        this._setEndAligned(overlay);
       }
-    }
-
-    if (!alignedToParent) {
-      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 {
+      // 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 {
-        // 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);
-        }
+        // Menu is displayed in the left side of the anchor
+        style.left = x + 'px';
+        this._setEndAligned(overlay);
       }
     }
+
     if (y < hghtVport / 2 || y < yMax) {
       style.top = y + 'px';
     } else {

package/src/vaadin-contextmenu-event.js

@@ -3,7 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { register, prevent } from '@polymer/polymer/lib/utils/gestures.js';
+import { prevent, register } from '@polymer/polymer/lib/utils/gestures.js';
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 
 register({
   name: 'vaadin-contextmenu',
@@ -16,10 +17,7 @@ register({
   emits: ['vaadin-contextmenu'],
 
   info: {
-    sourceEvent: null,
-    _ios:
-      (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
-      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+    sourceEvent: null
   },
 
   reset: function () {
@@ -50,7 +48,7 @@ register({
     this._timerId = setTimeout(() => {
       const ct = e.changedTouches[0];
       if (!e.shiftKey) {
-        if (this.info._ios) {
+        if (isIOS) {
           this._fired = true;
           this.fire(t, ct.clientX, ct.clientY);
         }

package/src/vaadin-contextmenu-items-mixin.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { Constructor } from '@open-wc/dedupe-mixin';
 import { Item } from '@vaadin/item/src/vaadin-item.js';
 import { ListBox } from '@vaadin/list-box/src/vaadin-list-box.js';
 
@@ -36,14 +37,10 @@ declare global {
  */
 declare class ContextMenuListBox extends ListBox {}
 
-declare function ItemsMixin<T extends new (...args: any[]) => {}>(base: T): T & ItemsMixinConstructor;
+export declare function ItemsMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ItemsMixinClass>;
 
-interface ItemsMixinConstructor {
-  new (...args: any[]): ItemsMixin;
-}
-
-interface ItemsMixin {
-  readonly __isRTL: boolean;
+export declare class ItemsMixinClass {
+  protected readonly __isRTL: boolean;
 
   /**
    * Defines a (hierarchical) menu structure for the component.
@@ -75,5 +72,3 @@ interface ItemsMixin {
    */
   items: ContextMenuItem[] | undefined;
 }
-
-export { ItemsMixin, ItemsMixinConstructor };

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

@@ -156,17 +156,13 @@ export const ItemsMixin = (superClass) =>
       subMenu.items = itemElement._item.children;
       subMenu.listenOn = itemElement;
 
-      const itemRect = itemElement.getBoundingClientRect();
-
-      const content = subMenu.$.overlay.$.content;
-      const style = getComputedStyle(content);
       const parent = this.$.overlay;
-      const y = parent.hasAttribute('bottom-aligned')
-        ? itemRect.bottom + parseFloat(style.paddingBottom)
-        : itemRect.top - parseFloat(style.paddingTop);
 
-      // Store the reference to align based on parent overlay coordinates
-      subMenu.$.overlay._setParentOverlay(parent);
+      const subMenuOverlay = subMenu.$.overlay;
+      subMenuOverlay.positionTarget = itemElement;
+      subMenuOverlay.noHorizontalOverlap = true;
+      // Store the reference parent overlay
+      subMenuOverlay._setParentOverlay(parent);
 
       // Set theme attribute from parent element
       if (parent.theme) {
@@ -175,24 +171,12 @@ export const ItemsMixin = (superClass) =>
         subMenu.removeAttribute('theme');
       }
 
-      let x;
+      const content = subMenu.$.overlay.$.content;
       content.style.minWidth = '';
-      if (document.documentElement.clientWidth - itemRect.right > itemRect.width) {
-        // There's room on the right side
-        x = itemRect.right;
-      } else {
-        // Open on the left side
-        x = itemRect.left - itemRect.width;
-        // Make sure there's no gaps between the menus
-        content.style.minWidth = parent.$.content.clientWidth + 'px';
-      }
-      x = Math.max(x, 0);
 
       itemElement.dispatchEvent(
         new CustomEvent('opensubmenu', {
           detail: {
-            x,
-            y,
             children: itemElement._item.children
           }
         })

package/src/vaadin-device-detector.js

@@ -3,8 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 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.
@@ -38,7 +39,7 @@ class DeviceDetector extends PolymerElement {
       touch: {
         type: Boolean,
         notify: true,
-        value: () => this._touch()
+        value: isTouch
       },
 
       /**
@@ -51,15 +52,6 @@ class DeviceDetector extends PolymerElement {
     };
   }
 
-  static _touch() {
-    try {
-      document.createEvent('TouchEvent');
-      return true;
-    } catch (err) {
-      return false;
-    }
-  }
-
   _phone(wide, touch) {
     return !wide && touch;
   }

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

@@ -1,11 +1,11 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
-import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const contextMenuOverlay = css`
   :host([phone]) {
@@ -90,13 +90,14 @@ 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;
     }
 
-    :host(.vaadin-menu-item[menu-item-checked])::before {
+    :host(.vaadin-menu-item[menu-item-checked]) [part='checkmark']::before {
       opacity: 1;
     }
 

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

@@ -1,8 +1,8 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/color.js';
-import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const contextMenuOverlay = css`
   [part='overlay'] {
@@ -71,7 +71,7 @@ registerStyles(
       display: block;
     }
 
-    :host(.vaadin-menu-item[menu-item-checked])::before {
+    :host(.vaadin-menu-item[menu-item-checked]) [part='checkmark']::before {
       content: var(--material-icons-check);
     }