@vaadin/context-menu 25.0.0-alpha8 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,9 +23,6 @@
     "lit.d.ts",
     "lit.js",
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -39,25 +36,25 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/component-base": "25.0.0-alpha8",
-    "@vaadin/item": "25.0.0-alpha8",
-    "@vaadin/list-box": "25.0.0-alpha8",
-    "@vaadin/lit-renderer": "25.0.0-alpha8",
-    "@vaadin/overlay": "25.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/item": "25.0.0-beta1",
+    "@vaadin/list-box": "25.0.0-beta1",
+    "@vaadin/lit-renderer": "25.0.0-beta1",
+    "@vaadin/overlay": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha8",
-    "@vaadin/test-runner-commands": "25.0.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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

@@ -3,17 +3,17 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-base-styles.js';
 
 const menuItemStyles = css`
   :host::after {
-    background: var(--vaadin-color-subtle);
+    background: var(--vaadin-text-color-secondary);
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     rotate: -90deg;
     visibility: hidden;
     width: var(--vaadin-icon-size, 1lh);

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

@@ -3,7 +3,34 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { css } from 'lit';
 import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 import { menuOverlayStyles } from './vaadin-menu-overlay-base-styles.js';
 
-export const contextMenuOverlayStyles = [overlayStyles, menuOverlayStyles];
+const contextMenuOverlay = css`
+  :host {
+    --_default-offset: 4px;
+  }
+
+  :host([position^='top'][top-aligned]) [part='overlay'],
+  :host([position^='bottom'][top-aligned]) [part='overlay'] {
+    margin-top: var(--vaadin-context-menu-offset-top, var(--_default-offset));
+  }
+
+  :host([position^='top'][bottom-aligned]) [part='overlay'],
+  :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--vaadin-context-menu-offset-bottom, var(--_default-offset));
+  }
+
+  :host([position^='start'][start-aligned]) [part='overlay'],
+  :host([position^='end'][start-aligned]) [part='overlay'] {
+    margin-inline-start: var(--vaadin-context-menu-offset-start, var(--_default-offset));
+  }
+
+  :host([position^='start'][end-aligned]) [part='overlay'],
+  :host([position^='end'][end-aligned]) [part='overlay'] {
+    margin-inline-end: var(--vaadin-context-menu-offset-end, var(--_default-offset));
+  }
+`;
+
+export const contextMenuOverlayStyles = [overlayStyles, menuOverlayStyles, contextMenuOverlay];

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

@@ -10,7 +10,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { contextMenuItemStyles } from './styles/vaadin-context-menu-item-core-styles.js';
+import { contextMenuItemStyles } from './styles/vaadin-context-menu-item-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.

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

@@ -8,7 +8,7 @@ import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { listBoxStyles } from '@vaadin/list-box/src/styles/vaadin-list-box-core-styles.js';
+import { listBoxStyles } from '@vaadin/list-box/src/styles/vaadin-list-box-base-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

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

@@ -31,6 +31,8 @@ export const ContextMenuMixin = (superClass) =>
          */
         opened: {
           type: Boolean,
+          reflectToAttribute: true,
+          observer: '_openedChanged',
           value: false,
           notify: true,
           readOnly: true,
@@ -123,22 +125,15 @@ export const ContextMenuMixin = (superClass) =>
 
     static get observers() {
       return [
-        '_openedChanged(opened)',
         '_targetOrOpenOnChanged(listenOn, openOn)',
         '_rendererChanged(renderer, items)',
         '_fullscreenChanged(_fullscreen)',
-        '_overlayContextChanged(_overlayElement, _context)',
-        '_overlayModelessChanged(_overlayElement, _modeless)',
-        '_overlayPhoneChanged(_overlayElement, _phone)',
-        '_overlayThemeChanged(_overlayElement, _theme)',
       ];
     }
 
     constructor() {
       super();
 
-      this._createOverlay();
-
       this._boundOpen = this.open.bind(this);
       this._boundClose = this.close.bind(this);
       this._boundPreventDefault = this._preventDefault.bind(this);
@@ -170,8 +165,10 @@ export const ContextMenuMixin = (superClass) =>
     }
 
     /** @protected */
-    ready() {
-      super.ready();
+    firstUpdated() {
+      super.firstUpdated();
+
+      this._overlayElement = this.$.overlay;
 
       this.addController(
         new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
@@ -180,29 +177,17 @@ export const ContextMenuMixin = (superClass) =>
       );
     }
 
-    /** @private */
-    _createOverlay() {
-      // Create an overlay in the constructor to use in observers before `ready()`
-      const overlay = document.createElement(`${this._tagNamePrefix}-overlay`);
-      overlay.owner = this;
-
-      overlay.addEventListener('opened-changed', (e) => {
-        this._onOverlayOpened(e);
-      });
-
-      overlay.addEventListener('vaadin-overlay-open', (e) => {
-        this._onVaadinOverlayOpen(e);
-      });
-
-      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,43 +198,23 @@ 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();
     }
 
-    /** @private */
-    _overlayContextChanged(overlay, context) {
-      if (overlay) {
-        overlay.model = context;
-      }
-    }
-
-    /** @private */
-    _overlayModelessChanged(overlay, modeless) {
-      if (overlay) {
-        overlay.modeless = modeless;
-      }
-    }
-
-    /** @private */
-    _overlayPhoneChanged(overlay, phone) {
-      if (overlay) {
-        overlay.toggleAttribute('phone', phone);
-        overlay.withBackdrop = phone;
-      }
-    }
-
-    /** @private */
-    _overlayThemeChanged(overlay, theme) {
-      if (overlay) {
-        if (theme) {
-          overlay.setAttribute('theme', theme);
-        } else {
-          overlay.removeAttribute('theme');
-        }
-      }
+    /**
+     * Runs after overlay's closing animation is finished
+     * @private
+     */
+    _onVaadinOverlayClosed() {
+      this.dispatchEvent(new CustomEvent('closed'));
     }
 
     /** @private */
@@ -318,17 +283,14 @@ export const ContextMenuMixin = (superClass) =>
     }
 
     /** @private */
-    _openedChanged(opened) {
+    _openedChanged(opened, oldOpened) {
       if (opened) {
         document.documentElement.addEventListener('contextmenu', this._boundOnGlobalContextMenu, true);
-      } else {
+      } else if (oldOpened) {
         document.documentElement.removeEventListener('contextmenu', this._boundOnGlobalContextMenu, true);
       }
 
       this.__setListenOnUserSelect(opened);
-
-      // Has to be set after instance has been created
-      this._overlayElement.opened = opened;
     }
 
     /**
@@ -362,11 +324,7 @@ export const ContextMenuMixin = (superClass) =>
         if (this.closeOn === 'click') {
           this.closeOn = '';
         }
-
-        renderer = this.__itemsRenderer;
       }
-
-      this._overlayElement.renderer = renderer;
     }
 
     /**
@@ -384,6 +342,9 @@ export const ContextMenuMixin = (superClass) =>
         return Array.prototype.filter.call(targets, (el) => {
           return e.composedPath().indexOf(el) > -1;
         })[0];
+      } else if (this.listenOn && this.listenOn !== this && this.position) {
+        // If listenOn has been set on a different element than the context menu root, then use listenOn as the target.
+        return this.listenOn;
       }
       return e.target;
     }
@@ -393,6 +354,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,
@@ -472,17 +438,13 @@ export const ContextMenuMixin = (superClass) =>
     /** @private */
     __focusItem(item) {
       if (item) {
-        item.focus();
-
-        if (isKeyboardActive()) {
-          item.setAttribute('focus-ring', '');
-        }
+        item.focus({ focusVisible: isKeyboardActive() });
       }
     }
 
     /** @private */
     __onScroll() {
-      if (!this.opened) {
+      if (!this.opened || this.position) {
         return;
       }
 
@@ -671,7 +633,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,
             },
@@ -682,4 +648,10 @@ export const ContextMenuMixin = (superClass) =>
         this.close();
       }
     }
+
+    /**
+     * Fired when the context menu is closed.
+     *
+     * @event closed
+     */
   };

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

@@ -10,7 +10,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { contextMenuOverlayStyles } from './styles/vaadin-context-menu-overlay-core-styles.js';
+import { contextMenuOverlayStyles } from './styles/vaadin-context-menu-overlay-base-styles.js';
 import { MenuOverlayMixin } from './vaadin-menu-overlay-mixin.js';
 
 /**
@@ -31,10 +31,64 @@ export class ContextMenuOverlay extends MenuOverlayMixin(
     return 'vaadin-context-menu-overlay';
   }
 
+  static get properties() {
+    return {
+      /**
+       * Position of the overlay with respect to the target.
+       * Supported values: null, `top-start`, `top`, `top-end`,
+       * `bottom-start`, `bottom`, `bottom-end`, `start-top`,
+       * `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
+       */
+      position: {
+        type: String,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
   static get styles() {
     return contextMenuOverlayStyles;
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  _updatePosition() {
+    super._updatePosition();
+
+    if (this.parentOverlay == null && this.positionTarget && this.position && this.opened) {
+      if (this.position === 'bottom' || this.position === 'top') {
+        const targetRect = this.positionTarget.getBoundingClientRect();
+        const overlayRect = this.$.overlay.getBoundingClientRect();
+
+        const offset = targetRect.width / 2 - overlayRect.width / 2;
+
+        if (this.style.left) {
+          const left = overlayRect.left + offset;
+          if (left > 0) {
+            this.style.left = `${left}px`;
+          }
+        }
+
+        if (this.style.right) {
+          const right = parseFloat(this.style.right) + offset;
+          if (right > 0) {
+            this.style.right = `${right}px`;
+          }
+        }
+      }
+
+      if (this.position === 'start' || this.position === 'end') {
+        const targetRect = this.positionTarget.getBoundingClientRect();
+        const overlayRect = this.$.overlay.getBoundingClientRect();
+
+        const offset = targetRect.height / 2 - overlayRect.height / 2;
+        this.style.top = `${overlayRect.top + offset}px`;
+      }
+    }
+  }
+
   /** @protected */
   render() {
     return html`
@@ -42,6 +96,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>
     `;

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

@@ -4,13 +4,26 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import type { ContextMenuMixinClass } from './vaadin-context-menu-mixin.js';
 import type { ContextMenuItem } from './vaadin-contextmenu-items-mixin.js';
 
 export { ContextMenuItem };
 
+export type ContextMenuPosition =
+  | 'bottom-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'end-bottom'
+  | 'end-top'
+  | 'end'
+  | 'start-bottom'
+  | 'start-top'
+  | 'start'
+  | 'top-end'
+  | 'top-start'
+  | 'top';
+
 export interface ContextMenuRendererContext {
   target: HTMLElement;
   detail?: { sourceEvent: Event };
@@ -34,6 +47,11 @@ export type ContextMenuItemSelectedEvent<TItem extends ContextMenuItem = Context
   value: TItem;
 }>;
 
+/**
+ * Fired when the context menu is closed.
+ */
+export type ContextMenuClosedEvent = CustomEvent;
+
 export interface ContextMenuCustomEventMap<TItem extends ContextMenuItem = ContextMenuItem> {
   'opened-changed': ContextMenuOpenedChangedEvent;
 
@@ -42,6 +60,8 @@ export interface ContextMenuCustomEventMap<TItem extends ContextMenuItem = Conte
   'close-all-menus': Event;
 
   'items-outside-click': Event;
+
+  closed: ContextMenuClosedEvent;
 }
 
 export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenuItem>
@@ -208,18 +228,30 @@ 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
+ *
+ * ### Custom CSS Properties
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                   | Description
+ * --------------------------------------|-------------
+ * `--vaadin-context-menu-offset-top`    | Used as an offset when using `position` and the context menu is aligned vertically below the target
+ * `--vaadin-context-menu-offset-bottom` | Used as an offset when using `position` and the context menu is aligned vertically above the target
+ * `--vaadin-context-menu-offset-start`  | Used as an offset when using `position` and the context menu is aligned horizontally after the target
+ * `--vaadin-context-menu-offset-end`    | Used as an offset when using `position` and the context menu is aligned horizontally before the target
  *
  * 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).
@@ -231,13 +263,19 @@ export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenu
  * ---------- |-------------
  * `expanded` | Expanded parent item.
  *
- * Note: the `theme` attribute value set on `<vaadin-context-menu>` is
- * propagated to the internal components listed above.
- *
  * @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.
+ * @fires {CustomEvent} closed - Fired when the context menu is closed.
  */
 declare class ContextMenu<TItem extends ContextMenuItem = ContextMenuItem> extends HTMLElement {
+  /**
+   * Position of the overlay with respect to the target.
+   * Supported values: null, `top-start`, `top`, `top-end`,
+   * `bottom-start`, `bottom`, `bottom-end`, `start-top`,
+   * `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
+   */
+  position: ContextMenuPosition | null | undefined;
+
   addEventListener<K extends keyof ContextMenuEventMap>(
     type: K,
     listener: (this: ContextMenu<TItem>, ev: ContextMenuEventMap<TItem>[K]) => void,
@@ -253,7 +291,6 @@ declare class ContextMenu<TItem extends ContextMenuItem = ContextMenuItem> exten
 
 interface ContextMenu<TItem extends ContextMenuItem = ContextMenuItem>
   extends ContextMenuMixinClass<TItem>,
-    OverlayClassMixinClass,
     ElementMixinClass,
     ThemePropertyMixinClass {}