@vaadin/menu-bar 23.1.0-beta1 → 23.1.0-beta2

package/package.json

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

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

@@ -28,6 +28,16 @@ export const ButtonsMixin = (superClass) =>
       return ['_menuItemsChanged(items, items.splices)'];
     }
 
+    /**
+     * Override getter from `ResizeMixin` to observe parent.
+     *
+     * @protected
+     * @override
+     */
+    get _observeParent() {
+      return true;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -88,15 +98,20 @@ export const ButtonsMixin = (superClass) =>
         btn.style.visibility = '';
         btn.style.position = '';
 
-        // teleport item component back from "overflow" sub-menu
+        // Teleport item component back from "overflow" sub-menu
         const item = btn.item && btn.item.component;
         if (item instanceof HTMLElement && item.classList.contains('vaadin-menu-item')) {
           btn.appendChild(item);
           item.classList.remove('vaadin-menu-item');
         }
       }
-      this._overflow.item = { children: [] };
-      this._hasOverflow = false;
+      this.__updateOverflow([]);
+    }
+
+    /** @private */
+    __updateOverflow(items) {
+      this._overflow.item = { children: items };
+      this._hasOverflow = items.length > 0;
     }
 
     /** @private */
@@ -113,7 +128,7 @@ export const ButtonsMixin = (superClass) =>
           const btn = buttons[i - 1];
           const btnStyle = getComputedStyle(btn);
 
-          // if this button isn't overflowing, then the rest aren't either
+          // If this button isn't overflowing, then the rest aren't either
           if (
             (!isRTL && btn.offsetLeft + btn.offsetWidth < container.offsetWidth - overflow.offsetWidth) ||
             (isRTL && btn.offsetLeft >= overflow.offsetWidth)
@@ -124,12 +139,11 @@ export const ButtonsMixin = (superClass) =>
           btn.disabled = true;
           btn.style.visibility = 'hidden';
           btn.style.position = 'absolute';
-          // save width for buttons with component
+          // Save width for buttons with component
           btn.style.width = btnStyle.width;
         }
-        overflow.item = {
-          children: buttons.filter((b, idx) => idx >= i).map((b) => b.item),
-        };
+        const items = buttons.filter((_, idx) => idx >= i).map((b) => b.item);
+        this.__updateOverflow(items);
       }
     }
 
@@ -139,10 +153,10 @@ export const ButtonsMixin = (superClass) =>
       const buttons = this._buttons.filter((btn) => btn !== overflow);
       const oldOverflowCount = this.__getOverflowCount(overflow);
 
-      // reset all buttons in the menu bar and the overflow button
+      // Reset all buttons in the menu bar and the overflow button
       this.__restoreButtons(buttons);
 
-      // hide any overflowing buttons and put them in the 'overflow' button
+      // Hide any overflowing buttons and put them in the 'overflow' button
       this.__setOverflowItems(buttons, overflow);
 
       const newOverflowCount = this.__getOverflowCount(overflow);
@@ -171,7 +185,7 @@ export const ButtonsMixin = (superClass) =>
       if (item.component) {
         const component = this.__getComponent(itemCopy);
         itemCopy.component = component;
-        // save item for overflow menu
+        // Save item for overflow menu
         component.item = itemCopy;
         button.appendChild(component);
       } else if (item.text) {
@@ -201,7 +215,7 @@ export const ButtonsMixin = (superClass) =>
     _setButtonTheme(btn, hostTheme) {
       let theme = hostTheme;
 
-      // item theme takes precedence over host theme even if it's empty, as long as it's not undefined or null
+      // Item theme takes precedence over host theme even if it's empty, as long as it's not undefined or null
       const itemTheme = btn.item && btn.item.theme;
       if (itemTheme != null) {
         theme = Array.isArray(itemTheme) ? itemTheme.join(' ') : itemTheme;
@@ -225,7 +239,7 @@ export const ButtonsMixin = (superClass) =>
       let component;
 
       const isElement = itemComponent instanceof HTMLElement;
-      // use existing item component, if any
+      // Use existing item component, if any
       if (isElement && itemComponent.localName === 'vaadin-context-menu-item') {
         component = itemComponent;
       } else {

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

@@ -160,7 +160,7 @@ export const InteractionsMixin = (superClass) =>
           idx = buttons.length - 1;
           break;
         default:
-        // do nothing.
+        // Do nothing.
       }
 
       idx = this._getAvailableIndex(idx, increment, buttons);
@@ -334,7 +334,7 @@ export const InteractionsMixin = (superClass) =>
       }
 
       this.__onceOpened(() => {
-        // do not focus item when open not from keyboard
+        // Do not focus item when open not from keyboard
         if (event.type !== 'keydown') {
           subMenu.$.overlay.$.overlay.focus();
         }

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

@@ -35,7 +35,7 @@ class MenuBarSubmenu extends ContextMenu {
   close() {
     super.close();
 
-    // only handle 1st level submenu
+    // Only handle 1st level submenu
     if (this.hasAttribute('is-root')) {
       this.getRootNode().host._close();
     }

package/src/vaadin-menu-bar.js

@@ -245,7 +245,7 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
   /** @private */
   __updateButtonsDisabled(disabled) {
     this._buttons.forEach((btn) => {
-      // disable the button if the entire menu-bar is disabled or the item alone is disabled
+      // Disable the button if the entire menu-bar is disabled or the item alone is disabled
       btn.disabled = disabled || (btn.item && btn.item.disabled);
     });
   }