@vaadin/context-menu 24.0.0-alpha12 → 24.0.0-alpha13

package/package.json

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

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 => {

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 => {

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

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

@@ -3,37 +3,10 @@
  * 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 { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { Item } from '@vaadin/item/src/vaadin-item.js';
-import { ListBox } from '@vaadin/list-box/src/vaadin-list-box.js';
-
-/**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
- *
- * @extends Item
- * @protected
- */
-class ContextMenuItemElement extends Item {
-  static get is() {
-    return 'vaadin-context-menu-item';
-  }
-}
-
-customElements.define(ContextMenuItemElement.is, ContextMenuItemElement);
-
-/**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
- *
- * @extends ListBox
- * @protected
- */
-class ContextMenuListBox extends ListBox {
-  static get is() {
-    return 'vaadin-context-menu-list-box';
-  }
-}
-
-customElements.define(ContextMenuListBox.is, ContextMenuListBox);
 
 /**
  * @polymerMixin
@@ -65,20 +38,20 @@ export const ItemsMixin = (superClass) =>
          *
          * ```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 }
          * ];
          * ```
          *
@@ -98,6 +71,15 @@ export const ItemsMixin = (superClass) =>
       };
     }
 
+    /**
+     * Tag name prefix used by overlay, list-box and items.
+     * @protected
+     * @return {string}
+     */
+    get _tagNamePrefix() {
+      return 'vaadin-context-menu';
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -105,7 +87,7 @@ export const ItemsMixin = (superClass) =>
       // Overlay's outside click listener doesn't work with modeless
       // overlays (submenus) so we need additional logic for it
       this.__itemsOutsideClickListener = (e) => {
-        if (!e.composedPath().some((el) => el.localName === 'vaadin-context-menu-overlay')) {
+        if (!e.composedPath().some((el) => el.localName === `${this._tagNamePrefix}-overlay`)) {
           this.dispatchEvent(new CustomEvent('items-outside-click'));
         }
       };
@@ -188,7 +170,7 @@ export const ItemsMixin = (superClass) =>
       const subMenu = root.querySelector(this.constructor.is);
       subMenu.closeOn = menu.closeOn;
 
-      const listBox = root.querySelector('vaadin-context-menu-list-box');
+      const listBox = root.querySelector(`${this._tagNamePrefix}-list-box`);
 
       listBox.innerHTML = '';
 
@@ -199,7 +181,7 @@ export const ItemsMixin = (superClass) =>
         if (item.component instanceof HTMLElement) {
           component = item.component;
         } else {
-          component = document.createElement(item.component || 'vaadin-context-menu-item');
+          component = document.createElement(item.component || `${this._tagNamePrefix}-item`);
         }
 
         if (component instanceof Item) {
@@ -262,7 +244,7 @@ export const ItemsMixin = (superClass) =>
     /** @private */
     __initMenu(root, menu) {
       if (!root.firstElementChild) {
-        const listBox = document.createElement('vaadin-context-menu-list-box');
+        const listBox = document.createElement(`${this._tagNamePrefix}-list-box`);
         root.appendChild(listBox);
 
         if (this._theme) {
@@ -324,7 +306,7 @@ export const ItemsMixin = (superClass) =>
         });
         const openSubMenu = (
           e,
-          itemElement = e.composedPath().find((e) => e.localName === 'vaadin-context-menu-item'),
+          itemElement = e.composedPath().find((e) => e.localName === `${this._tagNamePrefix}-item`),
         ) => {
           // Delay enabling the mouseover listener to avoid it from triggering on parent menu open
           if (!this.__openListenerActive) {
@@ -371,7 +353,7 @@ export const ItemsMixin = (superClass) =>
           }
         });
       } else {
-        const listBox = root.querySelector('vaadin-context-menu-list-box');
+        const listBox = root.querySelector(`${this._tagNamePrefix}-list-box`);
         if (this._theme) {
           listBox.setAttribute('theme', this._theme);
         } else {

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { PositionMixinClass } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+
+export declare function MenuOverlayMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<MenuOverlayMixinClass> & Constructor<PositionMixinClass> & T;
+
+export declare class MenuOverlayMixinClass {
+  protected readonly parentOverlay: HTMLElement | undefined;
+
+  /**
+   * Returns the adjusted boundaries of the overlay.
+   */
+  getBoundaries(): { xMax: number; xMin: number; yMax: number };
+
+  /**
+   * Returns the first element in the overlay content.
+   */
+  getFirstChild(): HTMLElement;
+}