@vaadin/context-menu 24.0.0-alpha9 → 24.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -39,18 +39,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/item": "24.0.0-alpha9",
-    "@vaadin/list-box": "24.0.0-alpha9",
-    "@vaadin/lit-renderer": "24.0.0-alpha9",
-    "@vaadin/overlay": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/component-base": "24.0.0-beta2",
+    "@vaadin/item": "24.0.0-beta2",
+    "@vaadin/list-box": "24.0.0-beta2",
+    "@vaadin/lit-renderer": "24.0.0-beta2",
+    "@vaadin/overlay": "24.0.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ */
+declare class ContextMenuItem extends ItemMixin(DirMixin(ThemableMixin(HTMLElement))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-context-menu-item': ContextMenuItem;
+  }
+}
+
+export { ContextMenuItem };

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

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ItemMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class ContextMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
+  static get is() {
+    return 'vaadin-context-menu-item';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('role', 'menuitem');
+  }
+}
+
+customElements.define(ContextMenuItem.is, ContextMenuItem);
+
+export { ContextMenuItem };

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

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ */
+declare class ContextMenuListBox extends ListMixin(DirMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-context-menu-list-box': ContextMenuListBox;
+  }
+}
+
+export { ContextMenuListBox };

package/src/vaadin-context-menu-list-box.js

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ControllerMixin
+ * @mixes DirMixin
+ * @mixes ListMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class ContextMenuListBox extends ListMixin(ThemableMixin(DirMixin(ControllerMixin(PolymerElement)))) {
+  static get is() {
+    return 'vaadin-context-menu-list-box';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        [part='items'] {
+          height: 100%;
+          width: 100%;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+      </style>
+      <div part="items">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      // We don't need to define this property since super default is vertical,
+      // but we don't want it to be modified, or be shown in the API docs.
+      /** @private */
+      orientation: {
+        readOnly: true,
+      },
+    };
+  }
+
+  /**
+   * @return {!HTMLElement}
+   * @protected
+   * @override
+   */
+  get _scrollerElement() {
+    return this.shadowRoot.querySelector('[part="items"]');
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('role', 'menu');
+  }
+}
+
+customElements.define(ContextMenuListBox.is, ContextMenuListBox);
+
+export { ContextMenuListBox };

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { MenuOverlayMixin } from './vaadin-menu-overlay-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ */
+declare class ContextMenuOverlay extends MenuOverlayMixin(Overlay) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-context-menu-overlay': ContextMenuOverlay;
+  }
+}
+
+export { ContextMenuOverlay };

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

@@ -4,134 +4,23 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
-import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MenuOverlayMixin } from './vaadin-menu-overlay-mixin.js';
+import { styles } from './vaadin-menu-overlay-styles.js';
 
-registerStyles(
-  'vaadin-context-menu-overlay',
-  css`
-    :host {
-      align-items: flex-start;
-      justify-content: flex-start;
-    }
-
-    :host([right-aligned]),
-    :host([end-aligned]) {
-      align-items: flex-end;
-    }
-
-    :host([bottom-aligned]) {
-      justify-content: flex-end;
-    }
-
-    [part='overlay'] {
-      background-color: #fff;
-    }
-  `,
-  { moduleId: 'vaadin-context-menu-overlay-styles' },
-);
+registerStyles('vaadin-context-menu-overlay', styles, { moduleId: 'vaadin-context-menu-overlay-styles' });
 
 /**
  * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
  *
  * @extends Overlay
+ * @mixes MenuOverlayMixin
  * @protected
  */
-class ContextMenuOverlay extends PositionMixin(Overlay) {
+export class ContextMenuOverlay extends MenuOverlayMixin(Overlay) {
   static get is() {
     return 'vaadin-context-menu-overlay';
   }
-
-  static get properties() {
-    return {
-      /**
-       * @protected
-       */
-      parentOverlay: {
-        type: Object,
-        readOnly: true,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['_themeChanged(_theme)'];
-  }
-
-  ready() {
-    super.ready();
-
-    this.addEventListener('keydown', (e) => {
-      if (!e.defaultPrevented && e.composedPath()[0] === this.$.overlay && [38, 40].indexOf(e.keyCode) > -1) {
-        const child = this.getFirstChild();
-        if (child && Array.isArray(child.items) && child.items.length) {
-          e.preventDefault();
-          if (e.keyCode === 38) {
-            child.items[child.items.length - 1].focus();
-          } else {
-            child.focus();
-          }
-        }
-      }
-    });
-  }
-
-  getFirstChild() {
-    return this.querySelector(':not(style):not(slot)');
-  }
-
-  _themeChanged() {
-    this.close();
-  }
-
-  getBoundaries() {
-    // Measure actual overlay and content sizes
-    const overlayRect = this.getBoundingClientRect();
-    const contentRect = this.$.overlay.getBoundingClientRect();
-
-    // Maximum x and y values are imposed by content size and overlay limits.
-    let yMax = overlayRect.bottom - contentRect.height;
-
-    // Adjust constraints to ensure bottom-aligned applies to sub-menu.
-    const parent = this.parentOverlay;
-    if (parent && parent.hasAttribute('bottom-aligned')) {
-      const parentStyle = getComputedStyle(parent);
-      yMax = yMax - parseFloat(parentStyle.bottom) - parseFloat(parentStyle.height);
-    }
-
-    return {
-      xMax: overlayRect.right - contentRect.width,
-      xMin: overlayRect.left + 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.d.ts

@@ -57,20 +57,20 @@ export interface ContextMenuEventMap extends HTMLElementEventMap, ContextMenuCus
  *
  * ```javascript
  * contextMenu.items = [
- *   {text: 'Menu Item 1', theme: 'primary', children:
+ *   { text: 'Menu Item 1', theme: 'primary', children:
  *     [
- *       {text: 'Menu Item 1-1', checked: true},
- *       {text: 'Menu Item 1-2'}
+ *       { text: 'Menu Item 1-1', checked: true },
+ *       { text: 'Menu Item 1-2' }
  *     ]
  *   },
- *   {component: 'hr'},
- *   {text: 'Menu Item 2', children:
+ *   { component: 'hr' },
+ *   { text: 'Menu Item 2', children:
  *     [
- *       {text: 'Menu Item 2-1'},
- *       {text: 'Menu Item 2-2', disabled: true}
+ *       { text: 'Menu Item 2-1' },
+ *       { text: 'Menu Item 2-2', disabled: true }
  *     ]
  *   },
- *   {text: 'Menu Item 3', disabled: true}
+ *   { text: 'Menu Item 3', disabled: true }
  * ];
  *
  * contextMenu.addEventListener('item-selected', e => {
@@ -121,7 +121,7 @@ export interface ContextMenuEventMap extends HTMLElementEventMap, ContextMenuCus
  * in the next renderer call and will be provided with the `root` argument.
  * On first call it will be empty.
  *
- * ### “vaadin-contextmenu” Gesture Event
+ * ### `vaadin-contextmenu` Gesture Event
  *
  * `vaadin-contextmenu` is a gesture event (a custom event),
  * which is dispatched after either `contextmenu` or long touch events.
@@ -267,6 +267,11 @@ declare class ContextMenu extends OverlayClassMixin(ElementMixin(ThemePropertyMi
    */
   renderer: ContextMenuRenderer | null | undefined;
 
+  /**
+   * When true, the menu overlay is modeless.
+   */
+  protected _modeless: boolean;
+
   /**
    * Requests an update for the content of the menu overlay.
    * While performing the update, it invokes the renderer passed in the `renderer` property.

package/src/vaadin-context-menu.js

@@ -30,20 +30,20 @@ import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
  *
  * ```javascript
  * contextMenu.items = [
- *   {text: 'Menu Item 1', theme: 'primary', children:
+ *   { text: 'Menu Item 1', theme: 'primary', children:
  *     [
- *       {text: 'Menu Item 1-1', checked: true},
- *       {text: 'Menu Item 1-2'}
+ *       { text: 'Menu Item 1-1', checked: true },
+ *       { text: 'Menu Item 1-2' }
  *     ]
  *   },
- *   {component: 'hr'},
- *   {text: 'Menu Item 2', children:
+ *   { component: 'hr' },
+ *   { text: 'Menu Item 2', children:
  *     [
- *       {text: 'Menu Item 2-1'},
- *       {text: 'Menu Item 2-2', disabled: true}
+ *       { text: 'Menu Item 2-1' },
+ *       { text: 'Menu Item 2-2', disabled: true }
  *     ]
  *   },
- *   {text: 'Menu Item 3', disabled: true}
+ *   { text: 'Menu Item 3', disabled: true }
  * ];
  *
  * contextMenu.addEventListener('item-selected', e => {
@@ -94,7 +94,7 @@ import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
  * in the next renderer call and will be provided with the `root` argument.
  * On first call it will be empty.
  *
- * ### “vaadin-contextmenu” Gesture Event
+ * ### `vaadin-contextmenu` Gesture Event
  *
  * `vaadin-contextmenu` is a gesture event (a custom event),
  * which is dispatched after either `contextmenu` or long touch events.
@@ -225,12 +225,12 @@ class ContextMenu extends OverlayClassMixin(
         id="overlay"
         on-opened-changed="_onOverlayOpened"
         on-vaadin-overlay-open="_onVaadinOverlayOpen"
+        modeless="[[_modeless]]"
         with-backdrop="[[_phone]]"
         phone$="[[_phone]]"
         model="[[_context]]"
         theme$="[[_theme]]"
-      >
-      </vaadin-context-menu-overlay>
+      ></vaadin-context-menu-overlay>
     `;
   }
 
@@ -309,6 +309,14 @@ class ContextMenu extends OverlayClassMixin(
         type: Function,
       },
 
+      /**
+       * When true, the menu overlay is modeless.
+       * @protected
+       */
+      _modeless: {
+        type: Boolean,
+      },
+
       /** @private */
       _context: Object,
 

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

@@ -3,9 +3,9 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-context-menu-item.js';
+import './vaadin-context-menu-list-box.js';
 import type { 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';
 
 export interface ContextMenuItem {
   text?: string;
@@ -16,27 +16,6 @@ export interface ContextMenuItem {
   children?: ContextMenuItem[];
 }
 
-/**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
- *
- * @protected
- */
-declare class ContextMenuItemElement extends Item {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-context-menu-item': ContextMenuItemElement;
-    'vaadin-context-menu-list-box': ContextMenuListBox;
-  }
-}
-
-/**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
- *
- * @protected
- */
-declare class ContextMenuListBox extends ListBox {}
-
 export declare function ItemsMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ItemsMixinClass> & T;
 
 export declare class ItemsMixinClass {
@@ -51,22 +30,27 @@ export declare class ItemsMixinClass {
    *
    * ```javascript
    * contextMenu.items = [
-   *   {text: 'Menu Item 1', theme: 'primary', children:
+   *   { text: 'Menu Item 1', theme: 'primary', children:
    *     [
-   *       {text: 'Menu Item 1-1', checked: true},
-   *       {text: 'Menu Item 1-2'}
+   *       { text: 'Menu Item 1-1', checked: true },
+   *       { text: 'Menu Item 1-2' }
    *     ]
    *   },
-   *   {component: 'hr'},
-   *   {text: 'Menu Item 2', children:
+   *   { component: 'hr' },
+   *   { text: 'Menu Item 2', children:
    *     [
-   *       {text: 'Menu Item 2-1'},
-   *       {text: 'Menu Item 2-2', disabled: true}
+   *       { text: 'Menu Item 2-1' },
+   *       { text: 'Menu Item 2-2', disabled: true }
    *     ]
    *   },
-   *   {text: 'Menu Item 3', disabled: true}
+   *   { text: 'Menu Item 3', disabled: true }
    * ];
    * ```
    */
   items: ContextMenuItem[] | undefined;
+
+  /**
+   * Tag name prefix used by overlay, list-box and items.
+   */
+  protected readonly _tagNamePrefix: string;
 }