refactor: inline submenu mixin, add button and submenu typings (#9928)

Author: web-padawan

packages/menu-bar/src/vaadin-menu-bar-button.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Button } from '@vaadin/button/src/vaadin-button.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ */
+declare class MenuBarButton extends Button {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-menu-bar-button': MenuBarButton;
+  }
+}
+
+export { MenuBarButton };

packages/menu-bar/src/vaadin-menu-bar-button.js

@@ -54,3 +54,5 @@ class MenuBarButton extends Button {
 }
 
 defineCustomElement(MenuBarButton);
+
+export { MenuBarButton };

packages/menu-bar/src/vaadin-menu-bar-mixin.d.ts

@@ -10,6 +10,7 @@ import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+import type { MenuBarButton } from './vaadin-menu-bar-button.js';
 
 export type MenuBarItem<TItemData extends object = object> = {
   /**
@@ -159,11 +160,11 @@ export declare class MenuBarMixinClass<TItem extends MenuBarItem = MenuBarItem>
    */
   close(): void;
 
-  protected readonly _buttons: HTMLElement[];
+  protected readonly _buttons: MenuBarButton[];
 
   protected readonly _container: HTMLElement;
 
-  protected readonly _overflow: HTMLElement;
+  protected readonly _overflow: MenuBarButton;
 
   protected _hasOverflow: boolean;
 }

packages/menu-bar/src/vaadin-menu-bar-submenu-mixin.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ContextMenuMixin } from '@vaadin/context-menu/src/vaadin-context-menu-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ */
+declare class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(HTMLElement)) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-menu-bar-submenu': MenuBarSubmenu;
+  }
+}
+
+export { MenuBarSubmenu };

packages/menu-bar/src/vaadin-menu-bar-submenu.d.ts

@@ -10,19 +10,19 @@ import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ContextMenuMixin } from '@vaadin/context-menu/src/vaadin-context-menu-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { SubMenuMixin } from './vaadin-menu-bar-submenu-mixin.js';
 
 /**
  * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
  *
  * @customElement
  * @extends HTMLElement
- * @mixes SubMenuMixin
+ * @mixes ContextMenuMixin
  * @mixes ThemePropertyMixin
  * @protected
  */
-class MenuBarSubmenu extends SubMenuMixin(ThemePropertyMixin(PolylitMixin(LitElement))) {
+class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-menu-bar-submenu';
   }
@@ -39,6 +39,21 @@ class MenuBarSubmenu extends SubMenuMixin(ThemePropertyMixin(PolylitMixin(LitEle
     `;
   }
 
+  constructor() {
+    super();
+
+    this.openOn = 'opensubmenu';
+  }
+
+  /**
+   * Tag name prefix used by overlay, list-box and items.
+   * @protected
+   * @return {string}
+   */
+  get _tagNamePrefix() {
+    return 'vaadin-menu-bar';
+  }
+
   /** @protected */
   render() {
     return html`
@@ -61,6 +76,45 @@ class MenuBarSubmenu extends SubMenuMixin(ThemePropertyMixin(PolylitMixin(LitEle
       </vaadin-menu-bar-overlay>
     `;
   }
+
+  /**
+   * Overriding the observer to not add global "contextmenu" listener.
+   * @override
+   */
+  _openedChanged() {
+    // Do nothing
+  }
+
+  /**
+   * Overriding the public method to reset expanded button state.
+   */
+  close() {
+    super.close();
+
+    // Only handle 1st level submenu
+    if (this.hasAttribute('is-root')) {
+      this.parentElement._close();
+    }
+  }
+
+  /**
+   * Override method from `ContextMenuMixin` to prevent closing
+   * sub-menu on the same click event that was used to open it.
+   *
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldCloseOnOutsideClick(event) {
+    if (this.hasAttribute('is-root') && event.composedPath().includes(this.listenOn)) {
+      return false;
+    }
+
+    return super._shouldCloseOnOutsideClick(event);
+  }
 }
 
 defineCustomElement(MenuBarSubmenu);
+
+export { MenuBarSubmenu };

packages/menu-bar/src/vaadin-menu-bar-submenu.js

@@ -7,9 +7,11 @@ import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.j
 import type { ItemMixinClass } from '@vaadin/item/src/vaadin-item-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import type { MenuBarButton } from '../../src/vaadin-menu-bar-button.js';
 import type { MenuBarItem } from '../../src/vaadin-menu-bar-item.js';
 import type { MenuBarListBox } from '../../src/vaadin-menu-bar-list-box.js';
 import type { MenuBarI18n, MenuBarMixinClass } from '../../src/vaadin-menu-bar-mixin.js';
+import type { MenuBarSubmenu } from '../../src/vaadin-menu-bar-submenu.js';
 import type { MenuBar, MenuBarItem as MenuItem, MenuBarItemSelectedEvent } from '../../vaadin-menu-bar.js';
 
 const menu = document.createElement('vaadin-menu-bar');
@@ -76,3 +78,16 @@ assertType<MenuBarListBox>(listBox);
 assertType<DirMixinClass>(listBox);
 assertType<ListMixinClass>(listBox);
 assertType<ThemableMixinClass>(listBox);
+
+// Button
+const button = document.createElement('vaadin-menu-bar-button');
+
+assertType<MenuBarButton>(button);
+assertType<ThemableMixinClass>(button);
+
+// Submenu
+const submenu = document.createElement('vaadin-menu-bar-submenu');
+
+assertType<MenuBarSubmenu>(submenu);
+assertType<ThemePropertyMixinClass>(submenu);
+assertType<boolean>(submenu.opened);