refactor: extract common sub-menu logic into reusable mixin

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

@@ -8,22 +8,20 @@ import './vaadin-lit-menu-bar-list-box.js';
 import './vaadin-lit-menu-bar-overlay.js';
 import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.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 ContextMenuMixin
- * @mixes OverlayClassMixin
+ * @mixes SubMenuMixin
  * @mixes ThemePropertyMixin
  * @protected
  */
-class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
+class MenuBarSubmenu extends SubMenuMixin(ThemePropertyMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-menu-bar-submenu';
   }
@@ -40,21 +38,6 @@ class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ThemePropertyMix
     `;
   }
 
-  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`<slot id="slot"></slot>`;
@@ -69,25 +52,6 @@ class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ThemePropertyMix
     root.appendChild(this._overlayElement);
     return root;
   }
-
-  /**
-   * Overriding the observer to not add global "contextmenu" listener.
-   */
-  _openedChanged(opened) {
-    this._overlayElement.opened = opened;
-  }
-
-  /**
-   * Overriding the public method to reset expanded button state.
-   */
-  close() {
-    super.close();
-
-    // Only handle 1st level submenu
-    if (this.hasAttribute('is-root')) {
-      this.getRootNode().host._close();
-    }
-  }
 }
 
 defineCustomElement(MenuBarSubmenu);

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { ContextMenuMixin } from '@vaadin/context-menu/src/vaadin-context-menu-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes ContextMenuMixin
+ * @mixes OverlayClassMixin
+ */
+export const SubMenuMixin = (superClass) =>
+  class SubMenuMixinClass extends ContextMenuMixin(OverlayClassMixin(superClass)) {
+    constructor() {
+      super();
+
+      this.openOn = 'opensubmenu';
+    }
+
+    /**
+     * Tag name prefix used by overlay, list-box and items.
+     * @protected
+     * @return {string}
+     */
+    get _tagNamePrefix() {
+      return 'vaadin-menu-bar';
+    }
+
+    /**
+     * Overriding the observer to not add global "contextmenu" listener.
+     */
+    _openedChanged(opened) {
+      this._overlayElement.opened = opened;
+    }
+
+    /**
+     * Overriding the public method to reset expanded button state.
+     */
+    close() {
+      super.close();
+
+      // Only handle 1st level submenu
+      if (this.hasAttribute('is-root')) {
+        this.getRootNode().host._close();
+      }
+    }
+  };

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

@@ -9,22 +9,20 @@ import './vaadin-menu-bar-overlay.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-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 ContextMenuMixin
  * @mixes ControllerMixin
- * @mixes OverlayClassMixin
+ * @mixes SubMenuMixin
  * @mixes ThemePropertyMixin
  * @protected
  */
-class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ControllerMixin(ThemePropertyMixin(PolymerElement)))) {
+class MenuBarSubmenu extends SubMenuMixin(ControllerMixin(ThemePropertyMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-menu-bar-submenu';
   }
@@ -45,21 +43,6 @@ class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ControllerMixin(
     `;
   }
 
-  constructor() {
-    super();
-
-    this.openOn = 'opensubmenu';
-  }
-
-  /**
-   * Tag name prefix used by overlay, list-box and items.
-   * @protected
-   * @return {string}
-   */
-  get _tagNamePrefix() {
-    return 'vaadin-menu-bar';
-  }
-
   /**
    * @param {DocumentFragment} dom
    * @return {ShadowRoot}
@@ -72,25 +55,6 @@ class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ControllerMixin(
     root.appendChild(this._overlayElement);
     return root;
   }
-
-  /**
-   * Overriding the observer to not add global "contextmenu" listener.
-   */
-  _openedChanged(opened) {
-    this._overlayElement.opened = opened;
-  }
-
-  /**
-   * Overriding the public method to reset expanded button state.
-   */
-  close() {
-    super.close();
-
-    // Only handle 1st level submenu
-    if (this.hasAttribute('is-root')) {
-      this.getRootNode().host._close();
-    }
-  }
 }
 
 defineCustomElement(MenuBarSubmenu);