@vaadin/menu-bar 24.8.0-alpha14 → 24.8.0-alpha16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "24.8.0-alpha14",
+  "version": "24.8.0-alpha16",
   "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-alpha14",
-    "@vaadin/button": "24.8.0-alpha14",
-    "@vaadin/component-base": "24.8.0-alpha14",
-    "@vaadin/context-menu": "24.8.0-alpha14",
-    "@vaadin/item": "24.8.0-alpha14",
-    "@vaadin/list-box": "24.8.0-alpha14",
-    "@vaadin/overlay": "24.8.0-alpha14",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha14",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha14",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha14",
+    "@vaadin/a11y-base": "24.8.0-alpha16",
+    "@vaadin/button": "24.8.0-alpha16",
+    "@vaadin/component-base": "24.8.0-alpha16",
+    "@vaadin/context-menu": "24.8.0-alpha16",
+    "@vaadin/item": "24.8.0-alpha16",
+    "@vaadin/list-box": "24.8.0-alpha16",
+    "@vaadin/overlay": "24.8.0-alpha16",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha16",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha16",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha16",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha14",
-    "@vaadin/icon": "24.8.0-alpha14",
-    "@vaadin/test-runner-commands": "24.8.0-alpha14",
+    "@vaadin/chai-plugins": "24.8.0-alpha16",
+    "@vaadin/icon": "24.8.0-alpha16",
+    "@vaadin/test-runner-commands": "24.8.0-alpha16",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "c8a33608cf1ab377529afd0650360e349886384c"
+  "gitHead": "ac26cb142cd3d6374423ca699677d47557399d47"
 }

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

@@ -3,6 +3,9 @@
  * Copyright (c) 2019 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { html, noChange, nothing, render } from 'lit';
+import { Directive, directive } from 'lit/directive.js';
+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, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
@@ -12,6 +15,41 @@ import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
+/**
+ * Custom Lit directive for rendering item components
+ * inspired by the `flowComponentDirective` logic.
+ */
+class ItemComponentDirective extends Directive {
+  update(part, [{ component, text }]) {
+    const { parentNode, startNode } = part;
+
+    const newNode = component || (text ? document.createTextNode(text) : null);
+    const oldNode = this.getOldNode(part);
+
+    if (oldNode === newNode) {
+      return noChange;
+    } else if (oldNode && newNode) {
+      parentNode.replaceChild(newNode, oldNode);
+    } else if (oldNode) {
+      parentNode.removeChild(oldNode);
+    } else if (newNode) {
+      startNode.after(newNode);
+    }
+
+    return noChange;
+  }
+
+  getOldNode(part) {
+    const { startNode, endNode } = part;
+    if (startNode.nextSibling === endNode) {
+      return null;
+    }
+    return startNode.nextSibling;
+  }
+}
+
+const componentDirective = directive(ItemComponentDirective);
+
 const DEFAULT_I18N = {
   moreOptions: 'More options',
 };
@@ -112,6 +150,7 @@ export const MenuBarMixin = (superClass) =>
          */
         items: {
           type: Array,
+          sync: true,
           value: () => [],
         },
 
@@ -140,6 +179,7 @@ export const MenuBarMixin = (superClass) =>
          */
         reverseCollapse: {
           type: Boolean,
+          sync: true,
         },
 
         /**
@@ -149,6 +189,7 @@ export const MenuBarMixin = (superClass) =>
          */
         tabNavigation: {
           type: Boolean,
+          sync: true,
         },
 
         /**
@@ -169,6 +210,7 @@ export const MenuBarMixin = (superClass) =>
         /** @protected */
         _container: {
           type: Object,
+          sync: true,
         },
       };
     }
@@ -178,7 +220,7 @@ export const MenuBarMixin = (superClass) =>
         '_themeChanged(_theme, _overflow, _container)',
         '__hasOverflowChanged(_hasOverflow, _overflow)',
         '__i18nChanged(__effectiveI18n, _overflow)',
-        '_menuItemsChanged(items, _overflow, _container)',
+        '__updateButtons(items, disabled, _overflow, _container)',
         '_reverseCollapseChanged(reverseCollapse, _overflow, _container)',
         '_tabNavigationChanged(tabNavigation, _overflow, _container)',
       ];
@@ -284,8 +326,11 @@ 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);
@@ -340,23 +385,6 @@ export const MenuBarMixin = (superClass) =>
       this.__detectOverflow();
     }
 
-    /**
-     * 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);
-      }
-    }
-
     /**
      * A callback for the `_theme` property observer.
      * It propagates the host theme to the buttons and the sub menu.
@@ -366,14 +394,16 @@ export const MenuBarMixin = (superClass) =>
      */
     _themeChanged(theme, overflow, container) {
       if (overflow && container) {
-        this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
+        this.__renderButtons(this.items);
         this.__detectOverflow();
-      }
 
-      if (theme) {
-        this._subMenu.setAttribute('theme', theme);
-      } else {
-        this._subMenu.removeAttribute('theme');
+        if (theme) {
+          overflow.setAttribute('theme', theme);
+          this._subMenu.setAttribute('theme', theme);
+        } else {
+          overflow.removeAttribute('theme');
+          this._subMenu.removeAttribute('theme');
+        }
       }
     }
 
@@ -413,7 +443,7 @@ export const MenuBarMixin = (superClass) =>
     }
 
     /** @private */
-    _menuItemsChanged(items, overflow, container) {
+    __updateButtons(items, disabled, overflow, container) {
       if (!overflow || !container) {
         return;
       }
@@ -421,11 +451,24 @@ export const MenuBarMixin = (superClass) =>
       if (items !== this._oldItems) {
         this._oldItems = items;
         this.__renderButtons(items);
+        this.__detectOverflow();
+      }
+
+      if (disabled !== this._oldDisabled) {
+        this._oldDisabled = disabled;
+        this.__renderButtons(items);
+        overflow.toggleAttribute('disabled', disabled);
       }
 
       const subMenu = this._subMenu;
       if (subMenu && subMenu.opened) {
-        subMenu.close();
+        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();
+        }
       }
     }
 
@@ -449,9 +492,9 @@ export const MenuBarMixin = (superClass) =>
     /** @private */
     __restoreButtons(buttons) {
       buttons.forEach((button) => {
-        button.disabled = (button.item && button.item.disabled) || this.disabled;
         button.style.visibility = '';
         button.style.position = '';
+        button.style.width = '';
 
         // Teleport item component back from "overflow" sub-menu
         const item = button.item && button.item.component;
@@ -471,14 +514,6 @@ export const MenuBarMixin = (superClass) =>
       item.removeAttribute('tabindex');
     }
 
-    /** @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);
-      });
-    }
-
     /** @private */
     __updateOverflow(items) {
       this._overflow.item = { children: items };
@@ -512,7 +547,6 @@ export const MenuBarMixin = (superClass) =>
 
           // Save width for buttons with component
           btn.style.width = getComputedStyle(btn).width;
-          btn.disabled = true;
           btn.style.visibility = 'hidden';
           btn.style.position = 'absolute';
         }
@@ -561,66 +595,17 @@ export const MenuBarMixin = (superClass) =>
         });
     }
 
-    /** @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) {
+    /** @private */
+    __getButtonTheme(item, 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 = btn.item && btn.item.theme;
+      const itemTheme = item && item.theme;
       if (itemTheme != null) {
         theme = Array.isArray(itemTheme) ? itemTheme.join(' ') : itemTheme;
       }
 
-      if (theme) {
-        btn.setAttribute('theme', theme);
-      } else {
-        btn.removeAttribute('theme');
-      }
+      return theme;
     }
 
     /** @private */
@@ -645,21 +630,47 @@ export const MenuBarMixin = (superClass) =>
 
     /** @private */
     __renderButtons(items = []) {
-      this._removeButtons();
-
-      /* Empty array, do nothing */
-      if (items.length === 0) {
-        return;
-      }
+      render(
+        html`
+          ${items.map((item) => {
+            const itemCopy = { ...item };
+            const hasChildren = Boolean(item && item.children);
+
+            if (itemCopy.component) {
+              const component = this.__getComponent(itemCopy);
+              itemCopy.component = component;
+              component.item = itemCopy;
+            }
 
-      items.forEach((item) => {
-        const button = this._initButton(item);
-        this.insertBefore(button, this._overflow);
-        this._initButtonAttrs(button);
-        this._setButtonTheme(button, this._theme);
-      });
+            return html`
+              <vaadin-menu-bar-button
+                .item="${itemCopy}"
+                .disabled="${this.disabled || item.disabled}"
+                role="${this.tabNavigation ? 'button' : 'menuitem'}"
+                aria-haspopup="${ifDefined(hasChildren ? 'true' : nothing)}"
+                aria-expanded="${ifDefined(hasChildren ? 'false' : nothing)}"
+                class="${ifDefined(item.className || nothing)}"
+                theme="${ifDefined(this.__getButtonTheme(item, this._theme) || nothing)}"
+                @click="${this.__onRootButtonClick}"
+                >${componentDirective(itemCopy)}</vaadin-menu-bar-button
+              >
+            `;
+          })}
+        `,
+        this,
+        { renderBefore: this._overflow },
+      );
+    }
 
-      this.__detectOverflow();
+    /** @private */
+    __onRootButtonClick(event) {
+      const button = event.target;
+      // Propagate click event from button to the item component if it was outside
+      // it e.g. by calling `click()` on the button (used by the Flow counterpart).
+      if (button.item && button.item.component && !event.composedPath().includes(button.item.component)) {
+        event.stopPropagation();
+        button.item.component.click();
+      }
     }
 
     /**

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.8.0-alpha14",
+  "version": "24.8.0-alpha16",
   "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-alpha14/#/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-alpha14/#/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-alpha14/#/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-alpha14/#/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-alpha14/#/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-alpha16/#/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-alpha16/#/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-alpha16/#/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-alpha16/#/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-alpha16/#/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-alpha14",
+  "version": "24.8.0-alpha16",
   "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-alpha14/#/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-alpha14/#/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-alpha14/#/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-alpha14/#/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-alpha14/#/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-alpha16/#/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-alpha16/#/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-alpha16/#/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-alpha16/#/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-alpha16/#/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": [
             {