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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-beta1",
   "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-alpha8",
-    "@vaadin/item": "24.0.0-alpha8",
-    "@vaadin/list-box": "24.0.0-alpha8",
-    "@vaadin/lit-renderer": "24.0.0-alpha8",
-    "@vaadin/overlay": "24.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
+    "@vaadin/component-base": "24.0.0-beta1",
+    "@vaadin/item": "24.0.0-beta1",
+    "@vaadin/list-box": "24.0.0-beta1",
+    "@vaadin/lit-renderer": "24.0.0-beta1",
+    "@vaadin/overlay": "24.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta1"
   },
   "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": "476752249bb12295c500980d98a3256ad3b22b73"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { ContextMenuItem, ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
 
@@ -56,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 => {
@@ -120,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.
@@ -223,7 +224,7 @@ export interface ContextMenuEventMap extends HTMLElementEventMap, ContextMenuCus
  * @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.
  */
-declare class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(HTMLElement))) {
+declare class ContextMenu extends OverlayClassMixin(ElementMixin(ThemePropertyMixin(ItemsMixin(HTMLElement)))) {
   /**
    * CSS selector that can be used to target any child element
    * of the context menu to listen for `openOn` events.

package/src/vaadin-context-menu.js

@@ -11,6 +11,7 @@ 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 { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-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';
@@ -29,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 => {
@@ -93,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.
@@ -199,10 +200,13 @@ import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ControllerMixin
+ * @mixes OverlayClassMixin
  * @mixes ThemePropertyMixin
  * @mixes ItemsMixin
  */
-class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElement)))) {
+class ContextMenu extends OverlayClassMixin(
+  ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsMixin(PolymerElement)))),
+) {
   static get template() {
     return html`
       <style>
@@ -308,12 +312,6 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
       /** @private */
       _context: Object,
 
-      /** @private */
-      _boundClose: Object,
-
-      /** @private */
-      _boundOpen: Object,
-
       /** @private */
       _phone: {
         type: Boolean,
@@ -351,6 +349,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
     super();
     this._boundOpen = this.open.bind(this);
     this._boundClose = this.close.bind(this);
+    this._boundPreventDefault = this._preventDefault.bind(this);
     this._boundOnGlobalContextMenu = this._onGlobalContextMenu.bind(this);
   }
 
@@ -374,6 +373,8 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
   ready() {
     super.ready();
 
+    this._overlayElement = this.$.overlay;
+
     this.addController(
       new MediaQueryController(this._wideMediaQuery, (matches) => {
         this._wide = matches;
@@ -443,22 +444,19 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
 
   /** @private */
   _closeOnChanged(closeOn, oldCloseOn) {
-    // Listen on this.$.overlay.root to workaround issue on
-    //  ShadyDOM polyfill: https://github.com/webcomponents/shadydom/issues/159
-
     // Outside click event from overlay
     const evtOverlay = 'vaadin-overlay-outside-click';
 
+    const overlay = this.$.overlay;
+
     if (oldCloseOn) {
-      this._unlisten(this.$.overlay, oldCloseOn, this._boundClose);
-      this._unlisten(this.$.overlay.root, oldCloseOn, this._boundClose);
+      this._unlisten(overlay, oldCloseOn, this._boundClose);
     }
     if (closeOn) {
-      this._listen(this.$.overlay, closeOn, this._boundClose);
-      this._listen(this.$.overlay.root, closeOn, this._boundClose);
-      this._unlisten(this.$.overlay, evtOverlay, this._preventDefault);
+      this._listen(overlay, closeOn, this._boundClose);
+      overlay.removeEventListener(evtOverlay, this._boundPreventDefault);
     } else {
-      this._listen(this.$.overlay, evtOverlay, this._preventDefault);
+      overlay.addEventListener(evtOverlay, this._boundPreventDefault);
     }
   }
 
@@ -488,7 +486,11 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
    */
   requestContentUpdate() {
-    this.$.overlay.requestContentUpdate();
+    if (!this._overlayElement || !this.renderer) {
+      return;
+    }
+
+    this._overlayElement.requestContentUpdate();
   }
 
   /** @private */
@@ -539,7 +541,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
       };
 
       if (this._context.target) {
-        this._preventDefault(e);
+        e.preventDefault();
         e.stopPropagation();
 
         // Used in alignment which is delayed until overlay is rendered

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;
 }