@vaadin/menu-bar 24.8.0-alpha4 → 24.8.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "24.8.0-alpha4",
+  "version": "24.8.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -37,22 +37,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha4",
-    "@vaadin/button": "24.8.0-alpha4",
-    "@vaadin/component-base": "24.8.0-alpha4",
-    "@vaadin/context-menu": "24.8.0-alpha4",
-    "@vaadin/item": "24.8.0-alpha4",
-    "@vaadin/list-box": "24.8.0-alpha4",
-    "@vaadin/overlay": "24.8.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha4",
+    "@vaadin/a11y-base": "24.8.0-alpha6",
+    "@vaadin/button": "24.8.0-alpha6",
+    "@vaadin/component-base": "24.8.0-alpha6",
+    "@vaadin/context-menu": "24.8.0-alpha6",
+    "@vaadin/item": "24.8.0-alpha6",
+    "@vaadin/list-box": "24.8.0-alpha6",
+    "@vaadin/overlay": "24.8.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha6",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha6",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha4",
-    "@vaadin/icon": "24.8.0-alpha4",
-    "@vaadin/test-runner-commands": "24.8.0-alpha4",
+    "@vaadin/chai-plugins": "24.8.0-alpha6",
+    "@vaadin/icon": "24.8.0-alpha6",
+    "@vaadin/test-runner-commands": "24.8.0-alpha6",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "88251b4c84ebb8849dde982acb62cc2b20eeec31"
+  "gitHead": "be9ac1686511f20dad4adf9303597c5eaa687df3"
 }

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

@@ -3,8 +3,6 @@
  * Copyright (c) 2019 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, nothing, render } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { isElementFocused, isElementHidden, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
@@ -275,11 +273,8 @@ export const MenuBarMixin = (superClass) =>
           dots.innerHTML = '·'.repeat(3);
           btn.appendChild(dots);
 
-          btn.setAttribute('aria-haspopup', 'true');
-          btn.setAttribute('aria-expanded', 'false');
-          btn.setAttribute('role', this.tabNavigation ? 'button' : 'menuitem');
-
           this._overflow = btn;
+          this._initButtonAttrs(btn);
         },
       });
       this.addController(this._overflowController);
@@ -360,16 +355,14 @@ export const MenuBarMixin = (superClass) =>
      */
     _themeChanged(theme, overflow, container) {
       if (overflow && container) {
-        this.__renderButtons(this.items);
+        this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
         this.__detectOverflow();
+      }
 
-        if (theme) {
-          overflow.setAttribute('theme', theme);
-          this._subMenu.setAttribute('theme', theme);
-        } else {
-          overflow.removeAttribute('theme');
-          this._subMenu.removeAttribute('theme');
-        }
+      if (theme) {
+        this._subMenu.setAttribute('theme', theme);
+      } else {
+        this._subMenu.removeAttribute('theme');
       }
     }
 
@@ -421,13 +414,7 @@ export const MenuBarMixin = (superClass) =>
 
       const subMenu = this._subMenu;
       if (subMenu && subMenu.opened) {
-        const button = subMenu._overlayElement.positionTarget;
-
-        // Close sub-menu if the corresponding button is no longer in the DOM,
-        // or if the item on it has been changed to no longer have children.
-        if (!button.isConnected || !Array.isArray(button.item.children) || button.item.children.length === 0) {
-          subMenu.close();
-        }
+        subMenu.close();
       }
     }
 
@@ -563,17 +550,66 @@ export const MenuBarMixin = (superClass) =>
         });
     }
 
-    /** @private */
-    __getButtonTheme(item, hostTheme) {
+    /** @protected */
+    _removeButtons() {
+      this._buttons.forEach((button) => {
+        if (button !== this._overflow) {
+          this.removeChild(button);
+        }
+      });
+    }
+
+    /** @protected */
+    _initButton(item) {
+      const button = document.createElement('vaadin-menu-bar-button');
+
+      const itemCopy = { ...item };
+      button.item = itemCopy;
+
+      if (item.component) {
+        const component = this.__getComponent(itemCopy);
+        itemCopy.component = component;
+        // Save item for overflow menu
+        component.item = itemCopy;
+        button.appendChild(component);
+      } else if (item.text) {
+        button.textContent = item.text;
+      }
+
+      if (item.className) {
+        button.className = item.className;
+      }
+
+      button.disabled = item.disabled;
+
+      return button;
+    }
+
+    /** @protected */
+    _initButtonAttrs(button) {
+      button.setAttribute('role', this.tabNavigation ? 'button' : 'menuitem');
+
+      if (button === this._overflow || (button.item && button.item.children)) {
+        button.setAttribute('aria-haspopup', 'true');
+        button.setAttribute('aria-expanded', 'false');
+      }
+    }
+
+    /** @protected */
+    _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
-      const itemTheme = item && item.theme;
+      const itemTheme = btn.item && btn.item.theme;
       if (itemTheme != null) {
         theme = Array.isArray(itemTheme) ? itemTheme.join(' ') : itemTheme;
       }
 
-      return theme;
+      if (theme) {
+        btn.setAttribute('theme', theme);
+      } else {
+        btn.removeAttribute('theme');
+      }
     }
 
     /** @private */
@@ -598,41 +634,19 @@ export const MenuBarMixin = (superClass) =>
 
     /** @private */
     __renderButtons(items = []) {
-      const renderContent = (item) => {
-        if (item.component) {
-          const component = this.__getComponent(item);
-          item.component = component;
-          // Save item for overflow menu
-          component.item = item;
-          return component;
-        } else if (item.text) {
-          return item.text;
-        }
-      };
+      this._removeButtons();
 
-      render(
-        html`
-          ${items.map((item) => {
-            const itemCopy = { ...item };
-            const hasChildren = Boolean(item && item.children);
-
-            return html`
-              <vaadin-menu-bar-button
-                .item="${itemCopy}"
-                .disabled="${item.disabled}"
-                role="${this.tabNavigation ? 'button' : 'menuitem'}"
-                aria-haspopup="${ifDefined(hasChildren ? 'true' : nothing)}"
-                aria-expanded="${ifDefined(hasChildren ? 'false' : nothing)}"
-                class="${ifDefined(item.className)}"
-                theme="${ifDefined(this.__getButtonTheme(itemCopy, this._theme) || nothing)}"
-                >${renderContent(itemCopy)}</vaadin-menu-bar-button
-              >
-            `;
-          })}
-        `,
-        this,
-        { renderBefore: this._overflow },
-      );
+      /* Empty array, do nothing */
+      if (items.length === 0) {
+        return;
+      }
+
+      items.forEach((item) => {
+        const button = this._initButton(item);
+        this.insertBefore(button, this._overflow);
+        this._initButtonAttrs(button);
+        this._setButtonTheme(button, this._theme);
+      });
 
       this.__detectOverflow();
     }
@@ -940,6 +954,13 @@ export const MenuBarMixin = (superClass) =>
       this._expandedButton = button;
 
       requestAnimationFrame(() => {
+        // After changing items, buttons are recreated so the old button is
+        // no longer in the DOM. Reset position target to null to prevent
+        // overlay from closing due to target width / height equal to 0.
+        if (overlay.positionTarget && !overlay.positionTarget.isConnected) {
+          overlay.positionTarget = null;
+        }
+
         button.dispatchEvent(
           new CustomEvent('opensubmenu', {
             detail: {

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.8.0-alpha4",
+  "version": "24.8.0-alpha6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-menu-bar",
-          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-overlay).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.\n\nNote: the `theme` attribute value set on `<vaadin-menu-bar>` is\npropagated to the internal components listed above.",
+          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-overlay).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.\n\nNote: the `theme` attribute value set on `<vaadin-menu-bar>` is\npropagated to the internal components listed above.",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.8.0-alpha4",
+  "version": "24.8.0-alpha6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-menu-bar",
-          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-overlay).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.\n\nNote: the `theme` attribute value set on `<vaadin-menu-bar>` is\npropagated to the internal components listed above.",
+          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha6/#/elements/vaadin-overlay).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.\n\nNote: the `theme` attribute value set on `<vaadin-menu-bar>` is\npropagated to the internal components listed above.",
           "extension": true,
           "attributes": [
             {