@vaadin/menu-bar 23.0.0-alpha2 → 23.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "23.0.0-alpha2",
+  "version": "23.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-menu-bar.js",
   "module": "vaadin-menu-bar.js",
+  "type": "module",
   "files": [
     "src",
     "theme",
@@ -34,18 +35,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.0.0-alpha2",
-    "@vaadin/component-base": "23.0.0-alpha2",
-    "@vaadin/vaadin-context-menu": "23.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha2"
+    "@vaadin/button": "23.0.0-beta1",
+    "@vaadin/component-base": "23.0.0-beta1",
+    "@vaadin/vaadin-context-menu": "23.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "23.0.0-alpha2",
+    "@vaadin/icon": "23.0.0-beta1",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
+  "gitHead": "467244b76021176c109df675799b07029b293e58"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2019 - 2022 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';

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

@@ -1,11 +1,14 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2019 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
+import { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 
-export declare function ButtonsMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ButtonsMixinClass>;
+export declare function ButtonsMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<ButtonsMixinClass> & Constructor<ResizeMixinClass>;
 
 export declare class ButtonsMixinClass {
   protected readonly _buttons: HTMLElement[];

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

@@ -1,16 +1,16 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2019 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { animationFrame } from '@vaadin/component-base/src/async.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 /**
  * @polymerMixin
+ * @mixes ResizeMixin
  */
 export const ButtonsMixin = (superClass) =>
-  class extends superClass {
+  class extends ResizeMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -33,9 +33,6 @@ export const ButtonsMixin = (superClass) =>
       super.ready();
 
       this.setAttribute('role', 'menubar');
-
-      this.__resizeObserver = new ResizeObserver(() => this.__onResize());
-      this.__resizeObserver.observe(this);
     }
 
     /** @protected */
@@ -87,7 +84,7 @@ export const ButtonsMixin = (superClass) =>
     __restoreButtons(buttons) {
       for (let i = 0; i < buttons.length; i++) {
         const btn = buttons[i];
-        btn.disabled = btn.item && btn.item.disabled;
+        btn.disabled = (btn.item && btn.item.disabled) || this.disabled;
         btn.style.visibility = '';
         btn.style.position = '';
 
@@ -285,12 +282,11 @@ export const ButtonsMixin = (superClass) =>
       this.__applyTheme(this.theme);
     }
 
-    /** @private */
-    __onResize() {
-      this.__debounceOverflow = Debouncer.debounce(
-        this.__debounceOverflow,
-        animationFrame,
-        this.__detectOverflow.bind(this)
-      );
+    /**
+     * @protected
+     * @override
+     */
+    _onResize() {
+      this.__detectOverflow();
     }
   };

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2019 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2019 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -408,14 +408,4 @@ export const InteractionsMixin = (superClass) =>
       this.__deactivateButton(restoreFocus);
       this._subMenu.opened && this._subMenu.close();
     }
-
-    /**
-     * @deprecated Since Vaadin 23, `notifyResize()` is deprecated. The component uses a
-     * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
-     */
-    notifyResize() {
-      console.warn(
-        `WARNING: Since Vaadin 23, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`
-      );
-    }
   };

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2019 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ContextMenu } from '@vaadin/vaadin-context-menu/src/vaadin-context-menu.js';

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

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2019 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ButtonsMixin } from './vaadin-menu-bar-buttons-mixin.js';
@@ -81,7 +82,7 @@ export interface MenuBarEventMap extends HTMLElementEventMap, MenuBarCustomEvent
  *
  * @fires {CustomEvent} item-selected - Fired when a submenu item or menu bar button without children is clicked.
  */
-declare class MenuBar extends ButtonsMixin(InteractionsMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
+declare class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
   /**
    * Defines a hierarchical structure, where root level items represent menu bar buttons,
    * and `children` property configures a submenu with items to be opened below

package/src/vaadin-menu-bar.js

@@ -1,11 +1,12 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2019 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-menu-bar-submenu.js';
 import './vaadin-menu-bar-button.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ButtonsMixin } from './vaadin-menu-bar-buttons-mixin.js';
@@ -58,12 +59,13 @@ import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class MenuBar extends ButtonsMixin(InteractionsMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
+class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
   static get template() {
     return html`
       <style>
         :host {
           display: block;
+          width: 100%; /* make overflow work in flex */
         }
 
         :host([hidden]) {
@@ -200,6 +202,31 @@ class MenuBar extends ButtonsMixin(InteractionsMixin(ElementMixin(ThemableMixin(
     };
   }
 
+  /**
+   * Override method inherited from `DisabledMixin`
+   * to update the `disabled` property for the buttons
+   * whenever the property changes on the menu bar.
+   *
+   * @param {boolean} newValue the new disabled value
+   * @param {boolean} oldValue the previous disabled value
+   * @override
+   * @protected
+   */
+  _disabledChanged(newValue, oldValue) {
+    super._disabledChanged(newValue, oldValue);
+    if (oldValue !== newValue) {
+      this.__updateButtonsDisabled(newValue);
+    }
+  }
+
+  /** @private */
+  __updateButtonsDisabled(disabled) {
+    this._buttons.forEach((btn) => {
+      // disable the button if the entire menu-bar is disabled or the item alone is disabled
+      btn.disabled = disabled || (btn.item && btn.item.disabled);
+    });
+  }
+
   /**
    * Fired when either a submenu item or menu bar button without nested children is clicked.
    *