@vaadin/menu-bar 22.0.2 → 23.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "22.0.2",
+  "version": "23.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-menu-bar.js",
   "module": "vaadin-menu-bar.js",
+  "type": "module",
   "files": [
     "src",
     "theme",
@@ -33,20 +34,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "^22.0.2",
-    "@vaadin/component-base": "^22.0.2",
-    "@vaadin/vaadin-context-menu": "^22.0.2",
-    "@vaadin/vaadin-lumo-styles": "^22.0.2",
-    "@vaadin/vaadin-material-styles": "^22.0.2",
-    "@vaadin/vaadin-themable-mixin": "^22.0.2"
+    "@vaadin/button": "23.0.0-alpha4",
+    "@vaadin/component-base": "23.0.0-alpha4",
+    "@vaadin/vaadin-context-menu": "23.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "^22.0.2",
+    "@vaadin/icon": "23.0.0-alpha4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
+  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
 }

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,18 +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 { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-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 mixinBehaviors(IronResizableBehavior, superClass) {
+  class extends ResizeMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -30,12 +28,6 @@ export const ButtonsMixin = (superClass) =>
       return ['_menuItemsChanged(items, items.splices)'];
     }
 
-    constructor() {
-      super();
-
-      this.__boundOnResize = this.__onResize.bind(this);
-    }
-
     /** @protected */
     ready() {
       super.ready();
@@ -48,14 +40,6 @@ export const ButtonsMixin = (superClass) =>
       super.connectedCallback();
 
       this._initButtonAttrs(this._overflow);
-      this.addEventListener('iron-resize', this.__boundOnResize);
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      this.removeEventListener('iron-resize', this.__boundOnResize);
     }
 
     /**
@@ -100,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 = '';
 
@@ -181,7 +165,7 @@ export const ButtonsMixin = (superClass) =>
       const button = document.createElement('vaadin-menu-bar-button');
       button.setAttribute('part', 'menu-bar-button');
 
-      const itemCopy = Object.assign({}, item);
+      const itemCopy = { ...item };
       button.item = itemCopy;
 
       if (item.component) {
@@ -298,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';
@@ -17,8 +17,8 @@ export declare class InteractionsMixinClass {
   openOnHover: boolean | null | undefined;
 
   /**
-   * Can be called to manually notify a resizable and its descendant
-   * resizables of a resize change.
+   * @deprecated Since Vaadin 23, `notifyResize()` is deprecated. The component uses a
+   * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
    */
   notifyResize(): void;
 }

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/
  */
 

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,7 +59,7 @@ 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>
@@ -200,6 +201,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.
    *