@vaadin/menu-bar 23.0.2 → 23.1.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "23.0.2",
+  "version": "23.1.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "^23.0.2",
-    "@vaadin/component-base": "^23.0.2",
-    "@vaadin/vaadin-context-menu": "^23.0.2",
-    "@vaadin/vaadin-lumo-styles": "^23.0.2",
-    "@vaadin/vaadin-material-styles": "^23.0.2",
-    "@vaadin/vaadin-themable-mixin": "^23.0.2"
+    "@vaadin/button": "23.1.0-alpha1",
+    "@vaadin/component-base": "23.1.0-alpha1",
+    "@vaadin/vaadin-context-menu": "23.1.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "^23.0.2",
+    "@vaadin/icon": "23.1.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "a50f708dc0fe7d0cc10763f413838d71b1a0788b"
+  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
 }

package/src/vaadin-menu-bar-buttons-mixin.js

@@ -197,29 +197,6 @@ export const ButtonsMixin = (superClass) =>
       button.setAttribute('tabindex', disabled ? '-1' : '0');
     }
 
-    /**
-     * @param {string | null} theme
-     * @protected
-     * @override
-     */
-    _setTheme(theme) {
-      super._setTheme(theme);
-
-      // Initializing, do nothing
-      if (!this.shadowRoot) {
-        return;
-      }
-
-      this.__applyTheme(theme);
-    }
-
-    /** @private */
-    __applyTheme(theme) {
-      this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
-
-      this.__detectOverflow();
-    }
-
     /** @protected */
     _setButtonTheme(btn, hostTheme) {
       let theme = hostTheme;
@@ -277,9 +254,10 @@ export const ButtonsMixin = (superClass) =>
         this._appendButton(button);
         this._setButtonDisabled(button, item.disabled);
         this._initButtonAttrs(button);
+        this._setButtonTheme(button, this._theme);
       });
 
-      this.__applyTheme(this.theme);
+      this.__detectOverflow();
     }
 
     /**

package/src/vaadin-menu-bar-interactions-mixin.js

@@ -27,7 +27,7 @@ export const InteractionsMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['_itemsChanged(items, items.splices)', '_themeChanged(theme)'];
+      return ['_itemsChanged(items, items.splices)'];
     }
 
     /** @protected */
@@ -54,15 +54,6 @@ export const InteractionsMixin = (superClass) =>
       return this.getAttribute('dir') === 'rtl';
     }
 
-    /** @private */
-    _themeChanged(theme) {
-      if (theme) {
-        this._subMenu.setAttribute('theme', theme);
-      } else {
-        this._subMenu.removeAttribute('theme');
-      }
-    }
-
     /** @protected */
     _setExpanded(button, expanded) {
       button.toggleAttribute('expanded', expanded);

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

@@ -135,6 +135,12 @@ declare class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(Eleme
    */
   i18n: MenuBarI18n;
 
+  /**
+   * A callback for the `_theme` property observer.
+   * It propagates the host theme to the buttons and the sub menu.
+   */
+  protected _themeChanged(theme: string | null): void;
+
   addEventListener<K extends keyof MenuBarEventMap>(
     type: K,
     listener: (this: MenuBar, ev: MenuBarEventMap[K]) => void,

package/src/vaadin-menu-bar.js

@@ -201,6 +201,10 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
     };
   }
 
+  static get observers() {
+    return ['_themeChanged(_theme)'];
+  }
+
   /**
    * Override method inherited from `DisabledMixin`
    * to update the `disabled` property for the buttons
@@ -218,6 +222,26 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
     }
   }
 
+  /**
+   * A callback for the `_theme` property observer.
+   * It propagates the host theme to the buttons and the sub menu.
+   *
+   * @param {string | null} theme
+   * @protected
+   */
+  _themeChanged(theme) {
+    if (this.shadowRoot) {
+      this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
+      this.__detectOverflow();
+    }
+
+    if (theme) {
+      this._subMenu.setAttribute('theme', theme);
+    } else {
+      this._subMenu.removeAttribute('theme');
+    }
+  }
+
   /** @private */
   __updateButtonsDisabled(disabled) {
     this._buttons.forEach((btn) => {