refactor!: update context-menu overlay to use native popover (#9839)

Author: sissbruecker

packages/context-menu/src/vaadin-context-menu-mixin.js

@@ -31,6 +31,7 @@ export const ContextMenuMixin = (superClass) =>
          */
         opened: {
           type: Boolean,
+          reflectToAttribute: true,
           value: false,
           notify: true,
           readOnly: true,
@@ -185,6 +186,7 @@ export const ContextMenuMixin = (superClass) =>
       // Create an overlay in the constructor to use in observers before `ready()`
       const overlay = document.createElement(`${this._tagNamePrefix}-overlay`);
       overlay.owner = this;
+      overlay.setAttribute('exportparts', 'backdrop, overlay, content');
 
       overlay.addEventListener('opened-changed', (e) => {
         this._onOverlayOpened(e);
@@ -194,15 +196,29 @@ export const ContextMenuMixin = (superClass) =>
         this._onVaadinOverlayOpen(e);
       });
 
+      const overlaySlot = document.createElement('slot');
+      overlaySlot.name = 'overlay';
+      overlay.append(overlaySlot);
+
+      const subMenuSlot = document.createElement('slot');
+      subMenuSlot.name = 'submenu';
+      subMenuSlot.slot = 'submenu';
+      overlay.append(subMenuSlot);
+
       this._overlayElement = overlay;
     }
 
     /**
      * Runs before overlay is fully rendered
      * @private
      */
-    _onOverlayOpened(e) {
-      const opened = e.detail.value;
+    _onOverlayOpened(event) {
+      // Ignore events from submenus
+      if (event.target !== this._overlayElement) {
+        return;
+      }
+
+      const opened = event.detail.value;
       this._setOpened(opened);
       if (opened) {
         this.__alignOverlayPosition();
@@ -213,7 +229,12 @@ export const ContextMenuMixin = (superClass) =>
      * Runs after overlay is fully rendered
      * @private
      */
-    _onVaadinOverlayOpen() {
+    _onVaadinOverlayOpen(event) {
+      // Ignore events from submenus
+      if (event.target !== this._overlayElement) {
+        return;
+      }
+
       this.__alignOverlayPosition();
       this._overlayElement.style.visibility = '';
       this.__forwardFocus();
@@ -393,6 +414,11 @@ export const ContextMenuMixin = (superClass) =>
      * @param {!Event | undefined} e used as the context for the menu. Overlay coordinates are taken from this event.
      */
     open(e) {
+      // Ignore events from the overlay
+      if (this._overlayElement && e.composedPath().includes(this._overlayElement)) {
+        return;
+      }
+
       if (e && !this.opened) {
         this._context = {
           detail: e.detail,
@@ -671,7 +697,11 @@ export const ContextMenuMixin = (superClass) =>
           // Dispatch another contextmenu at the same coordinates after the overlay is closed
           this._overlayElement.addEventListener(
             'vaadin-overlay-closed',
-            () => this.__contextMenuAt(e.clientX, e.clientY),
+            (closeEvent) => {
+              if (closeEvent.target === this._overlayElement) {
+                this.__contextMenuAt(e.clientX, e.clientY);
+              }
+            },
             {
               once: true,
             },

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

@@ -42,6 +42,7 @@ export class ContextMenuOverlay extends MenuOverlayMixin(
       <div part="overlay" id="overlay" tabindex="0">
         <div part="content" id="content">
           <slot></slot>
+          <slot name="submenu"></slot>
         </div>
       </div>
     `;

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

@@ -208,18 +208,19 @@ export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenu
  *
  * ### Styling
  *
- * `<vaadin-context-menu>` uses `<vaadin-context-menu-overlay>` internal
- * themable component as the actual visible context menu overlay.
+ * The following shadow DOM parts are available for styling:
  *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay)
- * documentation for `<vaadin-context-menu-overlay>` stylable parts.
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * ### Internal components
  *
- * When using `items` API, in addition `<vaadin-context-menu-overlay>`, the following
- * internal components are themable:
+ * When using `items` API the following internal components are themable:
  *
  * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  * - `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).

packages/context-menu/src/vaadin-context-menu.js

@@ -175,18 +175,19 @@ import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
  *
  * ### Styling
  *
- * `<vaadin-context-menu>` uses `<vaadin-context-menu-overlay>` internal
- * themable component as the actual visible context menu overlay.
+ * The following shadow DOM parts are available for styling:
  *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay)
- * documentation for `<vaadin-context-menu-overlay>` stylable parts.
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * ### Internal components
  *
- * When using `items` API, in addition `<vaadin-context-menu-overlay>`, the following
- * internal components are themable:
+ * When using `items` API the following internal components are themable:
  *
  * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  * - `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).

packages/context-menu/src/vaadin-contextmenu-items-mixin.js

@@ -116,10 +116,10 @@ export const ItemsMixin = (superClass) =>
     /** @protected */
     __forwardFocus() {
       const overlay = this._overlayElement;
-      const child = overlay.getFirstChild();
+      const child = overlay._contentRoot.firstElementChild;
       // If parent item is not focused, do not focus submenu
       if (overlay.parentOverlay) {
-        const parent = overlay.parentOverlay.querySelector('[expanded]');
+        const parent = overlay.parentOverlay._contentRoot.querySelector('[expanded]');
         if (parent && parent.hasAttribute('focused') && child) {
           child.focus();
         } else {
@@ -253,10 +253,20 @@ export const ItemsMixin = (superClass) =>
       // Open a submenu on click event when a touch device is used.
       // On desktop, a submenu opens on hover.
       overlay.addEventListener(isTouch ? 'click' : 'mouseover', (event) => {
+        // Ignore events from the submenus
+        if (event.composedPath().includes(this._subMenu)) {
+          return;
+        }
+
         this.__showSubMenu(event);
       });
 
       overlay.addEventListener('keydown', (event) => {
+        // Ignore events from the submenus
+        if (event.composedPath().includes(this._subMenu)) {
+          return;
+        }
+
         const { key } = event;
         const isRTL = this.__isRTL;
 
@@ -288,10 +298,6 @@ export const ItemsMixin = (superClass) =>
       subMenu._modeless = true;
       subMenu.openOn = 'opensubmenu';
 
-      // Sub-menu doesn't have a target to wrap,
-      // so there is no need to keep it visible.
-      subMenu.setAttribute('hidden', '');
-
       // Close sub-menu when the parent menu closes.
       this.addEventListener('opened-changed', (event) => {
         if (!event.detail.value) {
@@ -366,7 +372,7 @@ export const ItemsMixin = (superClass) =>
         const { children } = item._item;
 
         // Check if the sub-menu was focused before closing it.
-        const child = subMenu._overlayElement.getFirstChild();
+        const child = subMenu._overlayElement._contentRoot.firstElementChild;
         const isSubmenuFocused = child && child.focused;
 
         if (subMenu.items !== children) {
@@ -394,7 +400,7 @@ export const ItemsMixin = (superClass) =>
 
     /** @protected */
     __getListBox() {
-      return this._overlayElement.querySelector(`${this._tagNamePrefix}-list-box`);
+      return this._overlayElement._contentRoot.querySelector(`${this._tagNamePrefix}-list-box`);
     }
 
     /**
@@ -406,15 +412,12 @@ export const ItemsMixin = (superClass) =>
     __itemsRenderer(root, menu) {
       this.__initMenu(root, menu);
 
-      const subMenu = root.querySelector(this.constructor.is);
-      subMenu.closeOn = menu.closeOn;
-
-      const listBox = this.__getListBox();
-      listBox.innerHTML = '';
+      this._subMenu.closeOn = menu.closeOn;
+      this._listBox.innerHTML = '';
 
       menu.items.forEach((item) => {
         const component = this.__createComponent(item);
-        listBox.appendChild(component);
+        this._listBox.appendChild(component);
       });
     }
 
@@ -455,8 +458,9 @@ export const ItemsMixin = (superClass) =>
         root.appendChild(listBox);
 
         const subMenu = this.__initSubMenu();
+        subMenu.slot = 'submenu';
         this._subMenu = subMenu;
-        root.appendChild(subMenu);
+        this.appendChild(subMenu);
 
         requestAnimationFrame(() => {
           this.__openListenerActive = true;

packages/context-menu/src/vaadin-menu-overlay-mixin.d.ts

@@ -18,9 +18,4 @@ export declare class MenuOverlayMixinClass {
    * Returns the adjusted boundaries of the overlay.
    */
   getBoundaries(): { xMax: number; xMin: number; yMax: number };
-
-  /**
-   * Returns the first element in the overlay content.
-   */
-  getFirstChild(): HTMLElement;
 }

packages/context-menu/src/vaadin-menu-overlay-mixin.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { OverlayFocusMixin } from '@vaadin/overlay/src/vaadin-overlay-focus-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 
@@ -37,15 +36,33 @@ export const MenuOverlayMixin = (superClass) =>
       return ['_themeChanged(_theme)'];
     }
 
+    /**
+     * Override method from OverlayFocusMixin to use slotted div as the content root.
+     * @protected
+     * @override
+     */
+    get _contentRoot() {
+      if (!this.__savedRoot) {
+        const root = document.createElement('div');
+        root.setAttribute('slot', 'overlay');
+        root.style.display = 'contents';
+        this.owner.appendChild(root);
+        this.__savedRoot = root;
+      }
+
+      return this.__savedRoot;
+    }
+
     /** @protected */
     ready() {
       super.ready();
 
+      this.popover = 'manual';
       this.restoreFocusOnClose = true;
 
       this.addEventListener('keydown', (e) => {
         if (!e.defaultPrevented && e.composedPath()[0] === this.$.overlay && [38, 40].indexOf(e.keyCode) > -1) {
-          const child = this.getFirstChild();
+          const child = this._contentRoot.firstElementChild;
           if (child && Array.isArray(child.items) && child.items.length) {
             e.preventDefault();
             if (e.keyCode === 38) {
@@ -58,15 +75,6 @@ export const MenuOverlayMixin = (superClass) =>
       });
     }
 
-    /**
-     * Returns the first element in the overlay content.
-     *
-     * @returns {HTMLElement}
-     */
-    getFirstChild() {
-      return this.querySelector(':not(style):not(slot)');
-    }
-
     /** @private */
     _themeChanged() {
       this.close();
@@ -149,28 +157,32 @@ export const MenuOverlayMixin = (superClass) =>
     }
 
     /**
-     * Override method inherited from `OverlayFocusMixin` to return
-     * true if the overlay contains the given node, including
-     * those within descendant menu overlays.
+     * Override method inherited from `OverlayFocusMixin` to check if the
+     * node is contained within the overlay's owner element (the menu),
+     * where all content (overlay content, sub-menus, etc.) is slotted.
      *
      * @protected
      * @override
      * @param {Node} node
      * @return {boolean}
      */
     _deepContains(node) {
-      // Find the closest menu overlay for the given node.
-      let overlay = getClosestElement(this.localName, node);
-      while (overlay) {
-        if (overlay === this) {
-          // The node is inside a descendant menu overlay.
-          return true;
-        }
+      return this.owner.contains(node);
+    }
 
-        // Traverse the overlay hierarchy to check parent overlays.
-        overlay = overlay.parentOverlay;
-      }
+    /**
+     * @protected
+     * @override
+     */
+    _attachOverlay() {
+      this.showPopover();
+    }
 
-      return false;
+    /**
+     * @protected
+     * @override
+     */
+    _detachOverlay() {
+      this.hidePopover();
     }
   };

packages/context-menu/test/context.test.js

@@ -20,7 +20,7 @@ class XFoo extends HTMLElement {
 customElements.define('x-foo', XFoo);
 
 describe('context', () => {
-  let menu, foo, fooContent, target, another;
+  let menu, overlayContent, foo, fooContent, target, another;
 
   beforeEach(async () => {
     menu = fixtureSync(`
@@ -40,6 +40,7 @@ describe('context', () => {
       `;
     };
     await nextRender();
+    overlayContent = menu._overlayElement._contentRoot;
     foo = document.querySelector('x-foo');
     fooContent = foo.shadowRoot.querySelector('#content');
     target = document.querySelector('#target');
@@ -51,15 +52,15 @@ describe('context', () => {
     await nextRender();
 
     expect(menu._context.target).to.eql(target);
-    expect(menu._overlayElement.textContent).to.contain(target.textContent);
+    expect(overlayContent.textContent).to.contain(target.textContent);
 
     menu.close();
 
     fire(another, 'vaadin-contextmenu');
     await nextRender();
 
     expect(menu._context.target).to.eql(another);
-    expect(menu._overlayElement.textContent).to.contain(another.textContent);
+    expect(overlayContent.textContent).to.contain(another.textContent);
   });
 
   it('should use details as context details', () => {