@vaadin/menu-bar 25.0.0-alpha2 → 25.0.0-alpha21

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

@@ -10,6 +10,8 @@ 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';
 import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import { microTask } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 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';
@@ -74,10 +76,10 @@ export const MenuBarMixin = (superClass) =>
          * @property {string} text - Text to be set as the menu button component's textContent.
          * @property {string} tooltip - Text to be set as the menu button's tooltip.
          * Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
-         * @property {union: string | object} component - The component to represent the button content.
+         * @property {string | HTMLElement} component - The component to represent the button content.
          * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
          * @property {boolean} disabled - If true, the button is disabled and cannot be activated.
-         * @property {union: string | string[]} theme - Theme(s) to be set as the theme attribute of the button, overriding any theme set on the menu bar.
+         * @property {string | string[]} theme - Theme(s) to be set as the theme attribute of the button, overriding any theme set on the menu bar.
          * @property {SubMenuItem[]} children - Array of submenu items.
          */
 
@@ -85,7 +87,7 @@ export const MenuBarMixin = (superClass) =>
          * @typedef SubMenuItem
          * @type {object}
          * @property {string} text - Text to be set as the menu item component's textContent.
-         * @property {union: string | object} component - The component to represent the item.
+         * @property {string | HTMLElement} component - The component to represent the item.
          * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
          * @property {boolean} disabled - If true, the item is disabled and cannot be selected.
          * @property {boolean} checked - If true, the item shows a checkmark next to it.
@@ -134,12 +136,7 @@ export const MenuBarMixin = (superClass) =>
          * which makes disabled buttons focusable and hoverable, while still
          * preventing them from being triggered:
          *
-         * ```
-         * // Set before any menu bar is attached to the DOM.
-         * window.Vaadin.featureFlags.accessibleDisabledButtons = true;
-         * ```
-         *
-         * ```
+         * ```js
          * // Set before any menu bar is attached to the DOM.
          * window.Vaadin.featureFlags.accessibleDisabledButtons = true;
          * ```
@@ -152,16 +149,6 @@ export const MenuBarMixin = (superClass) =>
           value: () => [],
         },
 
-        /**
-         * A space-delimited list of CSS class names
-         * to set on each sub-menu overlay element.
-         *
-         * @attr {string} overlay-class
-         */
-        overlayClass: {
-          type: String,
-        },
-
         /**
          * If true, the submenu will open on hover (mouseover) instead of click.
          * @attr {boolean} open-on-hover
@@ -189,48 +176,16 @@ export const MenuBarMixin = (superClass) =>
           type: Boolean,
           sync: true,
         },
-
-        /**
-         * @type {boolean}
-         * @protected
-         */
-        _hasOverflow: {
-          type: Boolean,
-          value: false,
-          sync: true,
-        },
-
-        /** @protected */
-        _overflow: {
-          type: Object,
-        },
-
-        /** @protected */
-        _container: {
-          type: Object,
-          sync: true,
-        },
       };
     }
 
-    static get observers() {
-      return [
-        '_themeChanged(_theme, _overflow, _container)',
-        '__hasOverflowChanged(_hasOverflow, _overflow)',
-        '__i18nChanged(__effectiveI18n, _overflow)',
-        '__updateButtons(items, disabled, _overflow, _container)',
-        '_reverseCollapseChanged(reverseCollapse, _overflow, _container)',
-        '_tabNavigationChanged(tabNavigation, _overflow, _container)',
-      ];
-    }
-
     /**
      * The object used to localize this component. To change the default
      * localization, replace this with an object that provides all properties, or
      * just the individual properties you want to change.
      *
      * The object has the following JSON structure and default values:
-     * ```
+     * ```js
      * {
      *   moreOptions: 'More options'
      * }
@@ -305,8 +260,15 @@ export const MenuBarMixin = (superClass) =>
     }
 
     /** @private */
-    get _subMenu() {
-      return this.shadowRoot.querySelector('vaadin-menu-bar-submenu');
+    get _hasOverflow() {
+      return this._overflow && !this._overflow.hasAttribute('hidden');
+    }
+
+    /** @private */
+    set _hasOverflow(hasOverflow) {
+      if (this._overflow) {
+        this._overflow.toggleAttribute('hidden', !hasOverflow);
+      }
     }
 
     /** @protected */
@@ -315,6 +277,20 @@ export const MenuBarMixin = (superClass) =>
 
       this.setAttribute('role', 'menubar');
 
+      this._subMenuController = new SlotController(this, 'submenu', 'vaadin-menu-bar-submenu', {
+        initializer: (menu) => {
+          menu.setAttribute('is-root', '');
+
+          menu.addEventListener('item-selected', this.__onItemSelected.bind(this));
+          menu.addEventListener('close-all-menus', this.__onEscapeClose.bind(this));
+
+          const overlay = menu._overlayElement;
+          overlay._contentRoot.addEventListener('keydown', this.__boundOnContextMenuKeydown);
+
+          this._subMenu = menu;
+        },
+      });
+
       this._overflowController = new SlotController(this, 'overflow', 'vaadin-menu-bar-button', {
         initializer: (btn) => {
           btn.setAttribute('hidden', '');
@@ -331,27 +307,47 @@ export const MenuBarMixin = (superClass) =>
           this._overflow = btn;
         },
       });
+
+      this.addController(this._subMenuController);
       this.addController(this._overflowController);
 
       this.addEventListener('mousedown', () => this._hideTooltip(true));
       this.addEventListener('mouseleave', () => this._hideTooltip());
 
-      this._subMenu.addEventListener('item-selected', this.__onItemSelected.bind(this));
-      this._subMenu.addEventListener('close-all-menus', this.__onEscapeClose.bind(this));
+      this._container = this.shadowRoot.querySelector('[part="container"]');
+    }
 
-      const overlay = this._subMenu._overlayElement;
-      overlay.addEventListener('keydown', this.__boundOnContextMenuKeydown);
+    /** @protected */
+    updated(props) {
+      super.updated(props);
 
-      const container = this.shadowRoot.querySelector('[part="container"]');
-      container.addEventListener('click', this.__onButtonClick.bind(this));
-      container.addEventListener('mouseover', (e) => this._onMouseOver(e));
+      if (props.has('items') || props.has('_theme') || props.has('disabled')) {
+        this.__renderButtons(this.items);
+      }
 
-      // Delay setting container to avoid rendering buttons immediately,
-      // which would also trigger detecting overflow and force re-layout
-      // See https://github.com/vaadin/web-components/issues/7271
-      queueMicrotask(() => {
-        this._container = container;
-      });
+      if (props.has('items') || props.has('_theme') || props.has('reverseCollapse')) {
+        this.__scheduleOverflow();
+      }
+
+      if (props.has('items')) {
+        this.__updateSubMenu();
+      }
+
+      if (props.has('_theme')) {
+        this._themeChanged(this._theme);
+      }
+
+      if (props.has('disabled')) {
+        this._overflow.toggleAttribute('disabled', this.disabled);
+      }
+
+      if (props.has('tabNavigation')) {
+        this._tabNavigationChanged(this.tabNavigation);
+      }
+
+      if (props.has('__effectiveI18n')) {
+        this.__i18nChanged(this.__effectiveI18n);
+      }
     }
 
     /**
@@ -380,87 +376,40 @@ export const MenuBarMixin = (superClass) =>
      * @override
      */
     _onResize() {
-      this.__detectOverflow();
-    }
-
-    /**
-     * A callback for the `_theme` property observer.
-     * It propagates the host theme to the buttons and the sub menu.
-     *
-     * @param {string | null} theme
-     * @private
-     */
-    _themeChanged(theme, overflow, container) {
-      if (overflow && container) {
-        this.__renderButtons(this.items);
-        this.__detectOverflow();
-
-        if (theme) {
-          overflow.setAttribute('theme', theme);
-          this._subMenu.setAttribute('theme', theme);
-        } else {
-          overflow.removeAttribute('theme');
-          this._subMenu.removeAttribute('theme');
-        }
-      }
-    }
-
-    /**
-     * A callback for the 'reverseCollapse' property observer.
-     *
-     * @param {boolean | null} _reverseCollapse
-     * @private
-     */
-    _reverseCollapseChanged(_reverseCollapse, overflow, container) {
-      if (overflow && container) {
-        this.__detectOverflow();
-      }
+      this.__scheduleOverflow();
     }
 
     /** @private */
-    _tabNavigationChanged(tabNavigation, overflow, container) {
-      if (overflow && container) {
-        const target = this.querySelector('[tabindex="0"]');
-        this._buttons.forEach((btn) => {
-          if (target) {
-            this._setTabindex(btn, btn === target);
-          } else {
-            this._setTabindex(btn, false);
-          }
-          btn.setAttribute('role', tabNavigation ? 'button' : 'menuitem');
-        });
+    _themeChanged(theme) {
+      if (theme) {
+        this._overflow.setAttribute('theme', theme);
+        this._subMenu.setAttribute('theme', theme);
+      } else {
+        this._overflow.removeAttribute('theme');
+        this._subMenu.removeAttribute('theme');
       }
-      this.setAttribute('role', tabNavigation ? 'group' : 'menubar');
     }
 
     /** @private */
-    __hasOverflowChanged(hasOverflow, overflow) {
-      if (overflow) {
-        overflow.toggleAttribute('hidden', !hasOverflow);
-      }
+    _tabNavigationChanged(tabNavigation) {
+      const target = this.querySelector('[tabindex="0"]');
+      this._buttons.forEach((btn) => {
+        if (target) {
+          this._setTabindex(btn, btn === target);
+        } else {
+          this._setTabindex(btn, false);
+        }
+        btn.setAttribute('role', tabNavigation ? 'button' : 'menuitem');
+      });
+
+      this.setAttribute('role', tabNavigation ? 'group' : 'menubar');
     }
 
     /** @private */
-    __updateButtons(items, disabled, overflow, container) {
-      if (!overflow || !container) {
-        return;
-      }
-
-      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);
-      }
-
+    __updateSubMenu() {
       const subMenu = this._subMenu;
       if (subMenu && subMenu.opened) {
-        const button = subMenu._overlayElement.positionTarget;
+        const button = subMenu._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.
@@ -471,12 +420,12 @@ export const MenuBarMixin = (superClass) =>
     }
 
     /** @private */
-    __i18nChanged(effectiveI18n, overflow) {
-      if (overflow && effectiveI18n && effectiveI18n.moreOptions !== undefined) {
+    __i18nChanged(effectiveI18n) {
+      if (effectiveI18n && effectiveI18n.moreOptions !== undefined) {
         if (effectiveI18n.moreOptions) {
-          overflow.setAttribute('aria-label', effectiveI18n.moreOptions);
+          this._overflow.setAttribute('aria-label', effectiveI18n.moreOptions);
         } else {
-          overflow.removeAttribute('aria-label');
+          this._overflow.removeAttribute('aria-label');
         }
       }
     }
@@ -561,11 +510,14 @@ export const MenuBarMixin = (superClass) =>
     }
 
     /** @private */
-    __detectOverflow() {
-      if (!this._container) {
-        return;
-      }
+    __scheduleOverflow() {
+      this._overflowDebouncer = Debouncer.debounce(this._overflowDebouncer, microTask, () => {
+        this.__detectOverflow();
+      });
+    }
 
+    /** @private */
+    __detectOverflow() {
       const overflow = this._overflow;
       const buttons = this._buttons.filter((btn) => btn !== overflow);
       const oldOverflowCount = this.__getOverflowCount(overflow);
@@ -707,6 +659,7 @@ export const MenuBarMixin = (superClass) =>
     _hideTooltip(immediate) {
       const tooltip = this._tooltipController && this._tooltipController.node;
       if (tooltip) {
+        this._tooltipController.setContext({ item: null });
         tooltip._stateController.close(immediate);
       }
     }
@@ -740,17 +693,18 @@ export const MenuBarMixin = (superClass) =>
      * and open another one for the newly focused button.
      *
      * @param {Element} item
+     * @param {FocusOptions=} options
      * @param {boolean} navigating
      * @protected
      * @override
      */
-    _focusItem(item, navigating) {
+    _focusItem(item, options, navigating) {
       const wasExpanded = navigating && this.focused === this._expandedButton;
       if (wasExpanded) {
         this._close();
       }
 
-      super._focusItem(item, navigating);
+      super._focusItem(item, options, navigating);
 
       this._buttons.forEach((btn) => {
         this._setTabindex(btn, btn === item);
@@ -770,6 +724,34 @@ export const MenuBarMixin = (superClass) =>
       return Array.from(e.composedPath()).find((el) => el.localName === 'vaadin-menu-bar-button');
     }
 
+    /**
+     * Override method inherited from `FocusMixin`
+     *
+     * @override
+     * @protected
+     */
+    _shouldSetFocus(event) {
+      // Ignore events from the submenu
+      if (event.composedPath().includes(this._subMenu)) {
+        return false;
+      }
+      return super._shouldSetFocus(event);
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     *
+     * @override
+     * @protected
+     */
+    _shouldRemoveFocus(event) {
+      // Ignore events from the submenu
+      if (event.composedPath().includes(this._subMenu)) {
+        return false;
+      }
+      return super._shouldRemoveFocus(event);
+    }
+
     /**
      * Override method inherited from `FocusMixin`
      *
@@ -779,7 +761,8 @@ export const MenuBarMixin = (superClass) =>
      */
     _setFocused(focused) {
       if (focused) {
-        const target = this.tabNavigation ? this.querySelector('[focused]') : this.querySelector('[tabindex="0"]');
+        const selector = this.tabNavigation ? '[focused]' : '[tabindex="0"]';
+        const target = this.querySelector(`vaadin-menu-bar-button${selector}`);
         if (target) {
           this._buttons.forEach((btn) => {
             this._setTabindex(btn, btn === target);
@@ -852,6 +835,16 @@ export const MenuBarMixin = (superClass) =>
      * @override
      */
     _onKeyDown(event) {
+      // Ignore events from the submenu
+      if (event.composedPath().includes(this._subMenu)) {
+        return;
+      }
+
+      this._handleKeyDown(event);
+    }
+
+    /** @private */
+    _handleKeyDown(event) {
       switch (event.key) {
         case 'ArrowDown':
           this._onArrowDown(event);
@@ -866,20 +859,25 @@ export const MenuBarMixin = (superClass) =>
     }
 
     /**
-     * @param {!MouseEvent} e
+     * @param {!MouseEvent} event
      * @protected
      */
-    _onMouseOver(e) {
-      const button = this._getButtonFromEvent(e);
+    _onMouseOver(event) {
+      // Ignore events from the submenu
+      if (event.composedPath().includes(this._subMenu)) {
+        return;
+      }
+
+      const button = this._getButtonFromEvent(event);
       if (!button) {
         // Hide tooltip on mouseover to disabled button
         this._hideTooltip();
       } else if (button !== this._expandedButton) {
-        const isOpened = this._subMenu.opened;
-        if (button.item.children && (this.openOnHover || isOpened)) {
+        // Switch sub-menu when moving cursor over another button
+        // with children, regardless of whether openOnHover is set.
+        // If the button has no children, keep the sub-menu opened.
+        if (button.item.children && (this.openOnHover || this._subMenu.opened)) {
           this.__openSubMenu(button, false);
-        } else if (isOpened) {
-          this._close();
         }
 
         if (button === this._overflow || (this.openOnHover && button.item.children)) {
@@ -902,11 +900,11 @@ export const MenuBarMixin = (superClass) =>
         if (e.keyCode === 37 || (e.keyCode === 39 && !item._item.children)) {
           // Prevent ArrowLeft from being handled in context-menu
           e.stopImmediatePropagation();
-          this._onKeyDown(e);
+          this._handleKeyDown(e);
         }
 
         if (e.key === 'Tab' && this.tabNavigation) {
-          this._onKeyDown(e);
+          this._handleKeyDown(e);
         }
       }
     }
@@ -948,6 +946,7 @@ export const MenuBarMixin = (superClass) =>
 
       subMenu.items = items;
       subMenu.listenOn = button;
+      subMenu._positionTarget = button;
       const overlay = subMenu._overlayElement;
       overlay.noVerticalOverlap = true;
 
@@ -957,7 +956,6 @@ export const MenuBarMixin = (superClass) =>
       this._setExpanded(button, true);
 
       this.style.pointerEvents = 'auto';
-      overlay.positionTarget = button;
 
       button.dispatchEvent(
         new CustomEvent('opensubmenu', {
@@ -975,7 +973,8 @@ export const MenuBarMixin = (superClass) =>
           }
 
           if (options.keepFocus) {
-            this._focusItem(this._expandedButton, false);
+            const focusOptions = { focusVisible: isKeyboardActive() };
+            this._focusItem(this._expandedButton, focusOptions, false);
           }
 
           // Do not focus item when open not from keyboard
@@ -989,13 +988,13 @@ export const MenuBarMixin = (superClass) =>
 
     /** @private */
     _focusFirstItem() {
-      const list = this._subMenu._overlayElement.firstElementChild;
+      const list = this._subMenu._overlayElement._contentRoot.firstElementChild;
       list.focus();
     }
 
     /** @private */
     _focusLastItem() {
-      const list = this._subMenu._overlayElement.firstElementChild;
+      const list = this._subMenu._overlayElement._contentRoot.firstElementChild;
       const item = list.items[list.items.length - 1];
       if (item) {
         item.focus();
@@ -1019,7 +1018,8 @@ export const MenuBarMixin = (superClass) =>
       if (button && button.hasAttribute('expanded')) {
         this._setExpanded(button, false);
         if (restoreFocus) {
-          this._focusItem(button, false);
+          const focusOptions = { focusVisible: isKeyboardActive() };
+          this._focusItem(button, focusOptions, false);
         }
         this._expandedButton = null;
       }

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

@@ -8,10 +8,10 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { MenuOverlayMixin } from '@vaadin/context-menu/src/vaadin-menu-overlay-mixin.js';
-import { styles } from '@vaadin/context-menu/src/vaadin-menu-overlay-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { menuBarOverlayStyles } from './styles/vaadin-menu-bar-overlay-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
@@ -24,13 +24,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @protected
  */
-export class MenuBarOverlay extends MenuOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+export class MenuBarOverlay extends MenuOverlayMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+) {
   static get is() {
     return 'vaadin-menu-bar-overlay';
   }
 
   static get styles() {
-    return [overlayStyles, styles];
+    return menuBarOverlayStyles;
   }
 
   /** @protected */
@@ -40,6 +42,7 @@ export class MenuBarOverlay extends MenuOverlayMixin(OverlayMixin(DirMixin(Thema
       <div part="overlay" id="overlay" tabindex="0">
         <div part="content" id="content">
           <slot></slot>
+          <slot name="submenu"></slot>
         </div>
       </div>
     `;

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ContextMenuMixin } from '@vaadin/context-menu/src/vaadin-context-menu-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ */
+declare class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(HTMLElement)) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-menu-bar-submenu': MenuBarSubmenu;
+  }
+}
+
+export { MenuBarSubmenu };