@vaadin/menu-bar 23.3.3 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~23.3.3",
-    "@vaadin/component-base": "~23.3.3",
-    "@vaadin/context-menu": "~23.3.3",
-    "@vaadin/vaadin-lumo-styles": "~23.3.3",
-    "@vaadin/vaadin-material-styles": "~23.3.3",
-    "@vaadin/vaadin-themable-mixin": "~23.3.3"
+    "@vaadin/button": "24.0.0-alpha10",
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/context-menu": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "~23.3.3",
+    "@vaadin/icon": "24.0.0-alpha10",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1529ed623e053d28a3c1c66af55ebe402743ddd0"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 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';
@@ -9,6 +9,14 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-menu-bar-button',
   css`
+    :host {
+      flex-shrink: 0;
+    }
+
+    :host([slot='overflow']) {
+      margin-inline-end: 0;
+    }
+
     [part='label'] ::slotted(vaadin-context-menu-item) {
       position: relative;
       z-index: 1;

package/src/{vaadin-menu-bar-interactions-mixin.d.ts → vaadin-menu-bar-mixin.d.ts}

@@ -1,31 +1,37 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardDirectionMixinClass } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 
-export declare function InteractionsMixin<T extends Constructor<HTMLElement>>(
+export declare function MenuBarMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<FocusMixinClass> &
-  Constructor<InteractionsMixinClass> &
+): Constructor<ControllerMixinClass> &
+  Constructor<FocusMixinClass> &
   Constructor<KeyboardDirectionMixinClass> &
   Constructor<KeyboardMixinClass> &
+  Constructor<MenuBarMixinClass> &
+  Constructor<ResizeMixinClass> &
   T;
 
-export declare class InteractionsMixinClass {
+export declare class MenuBarMixinClass {
   /**
    * If true, the submenu will open on hover (mouseover) instead of click.
    * @attr {boolean} open-on-hover
    */
   openOnHover: boolean | null | undefined;
 
-  /**
-   * @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;
+  protected readonly _buttons: HTMLElement[];
+
+  protected readonly _container: HTMLElement;
+
+  protected readonly _overflow: HTMLElement;
+
+  protected _hasOverflow: boolean;
 }

package/src/{vaadin-menu-bar-interactions-mixin.js → vaadin-menu-bar-mixin.js}

@@ -1,19 +1,24 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { isKeyboardActive } from '@vaadin/component-base/src/focus-utils.js';
+import { isElementFocused, isKeyboardActive } from '@vaadin/component-base/src/focus-utils.js';
 import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * @polymerMixin
+ * @mixes ControllerMixin
  * @mixes FocusMixin
- * @mixes KeyboardDirectionMixinClass
+ * @mixes KeyboardDirectionMixin
+ * @mixes ResizeMixin
  */
-export const InteractionsMixin = (superClass) =>
-  class InteractionsMixin extends KeyboardDirectionMixin(FocusMixin(superClass)) {
+export const MenuBarMixin = (superClass) =>
+  class MenuBarMixinClass extends KeyboardDirectionMixin(ResizeMixin(FocusMixin(ControllerMixin(superClass)))) {
     static get properties() {
       return {
         /**
@@ -23,22 +28,110 @@ export const InteractionsMixin = (superClass) =>
         openOnHover: {
           type: Boolean,
         },
+
+        /**
+         * @type {boolean}
+         * @protected
+         */
+        _hasOverflow: {
+          type: Boolean,
+          value: false,
+        },
+
+        /** @protected */
+        _overflow: {
+          type: Object,
+        },
+
+        /** @protected */
+        _container: {
+          type: Object,
+        },
       };
     }
 
+    static get observers() {
+      return [
+        '_itemsChanged(items, items.splices)',
+        '__hasOverflowChanged(_hasOverflow, _overflow)',
+        '__i18nChanged(i18n, _overflow)',
+        '_menuItemsChanged(items, _overflow, _container, items.splices)',
+      ];
+    }
+
     constructor() {
       super();
       this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
     }
 
-    static get observers() {
-      return ['_itemsChanged(items, items.splices)'];
+    /**
+     * Override getter from `KeyboardDirectionMixin`
+     * to use expanded button for arrow navigation
+     * when the sub-menu is opened and has focus.
+     *
+     * @return {Element | null}
+     * @protected
+     * @override
+     */
+    get focused() {
+      return (this._getItems() || []).find(isElementFocused) || this._expandedButton;
+    }
+
+    /**
+     * Override getter from `KeyboardDirectionMixin`.
+     *
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    get _vertical() {
+      return false;
+    }
+
+    /**
+     * Override getter from `ResizeMixin` to observe parent.
+     *
+     * @protected
+     * @override
+     */
+    get _observeParent() {
+      return true;
+    }
+
+    /**
+     * @return {!Array<!HTMLElement>}
+     * @protected
+     */
+    get _buttons() {
+      return Array.from(this.querySelectorAll('vaadin-menu-bar-button'));
+    }
+
+    /** @private */
+    get _subMenu() {
+      return this.shadowRoot.querySelector('vaadin-menu-bar-submenu');
     }
 
     /** @protected */
     ready() {
       super.ready();
 
+      this.setAttribute('role', 'menubar');
+
+      this._overflowController = new SlotController(this, 'overflow', 'vaadin-menu-bar-button', {
+        initializer: (btn) => {
+          btn.setAttribute('hidden', '');
+
+          const dots = document.createElement('div');
+          dots.setAttribute('aria-hidden', 'true');
+          dots.textContent = '···';
+          btn.appendChild(dots);
+
+          this._overflow = btn;
+          this._initButtonAttrs(btn);
+        },
+      });
+      this.addController(this._overflowController);
+
       this.addEventListener('mousedown', () => this._hideTooltip());
       this.addEventListener('mouseleave', () => this._hideTooltip());
 
@@ -48,56 +141,257 @@ export const InteractionsMixin = (superClass) =>
       const overlay = this._subMenu.$.overlay;
       overlay.addEventListener('keydown', this.__boundOnContextMenuKeydown);
 
-      const container = this._container;
+      const container = this.shadowRoot.querySelector('[part="container"]');
       container.addEventListener('click', this.__onButtonClick.bind(this));
       container.addEventListener('mouseover', (e) => this._onMouseOver(e));
+
+      this._container = container;
     }
 
     /**
-     * Override getter from `KeyboardDirectionMixin`
-     * to look for activeElement in shadow root, or
-     * use the expanded button as a fallback.
+     * Override method inherited from `KeyboardDirectionMixin`
+     * to use the list of menu-bar buttons as items.
      *
-     * @return {Element | null}
+     * @return {Element[]}
      * @protected
      * @override
      */
-    get focused() {
-      return this.shadowRoot.activeElement || this._expandedButton;
+    _getItems() {
+      return this._buttons;
     }
 
-    /**
-     * Override getter from `KeyboardDirectionMixin`.
-     *
-     * @return {boolean}
-     * @protected
-     * @override
-     */
-    get _vertical() {
-      return false;
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this._hideTooltip(true);
     }
 
     /**
-     * Override method inherited from `KeyboardDirectionMixin`
-     * to use the list of menu-bar buttons as items.
+     * Implement callback from `ResizeMixin` to update buttons
+     * and detect whether to show or hide the overflow button.
      *
-     * @return {Element[]}
      * @protected
      * @override
      */
-    _getItems() {
-      return this._buttons;
+    _onResize() {
+      this.__detectOverflow();
+    }
+
+    /** @private */
+    __hasOverflowChanged(hasOverflow, overflow) {
+      if (overflow) {
+        overflow.toggleAttribute('hidden', !hasOverflow);
+      }
+    }
+
+    /** @private */
+    _menuItemsChanged(items, overflow, container) {
+      if (!overflow || !container) {
+        return;
+      }
+
+      if (items !== this._oldItems) {
+        this._oldItems = items;
+        this.__renderButtons(items);
+      }
+    }
+
+    /** @private */
+    __i18nChanged(i18n, overflow) {
+      if (overflow && i18n && i18n.moreOptions !== undefined) {
+        if (i18n.moreOptions) {
+          overflow.setAttribute('aria-label', i18n.moreOptions);
+        } else {
+          overflow.removeAttribute('aria-label');
+        }
+      }
+    }
+
+    /** @private */
+    __getOverflowCount(overflow) {
+      // We can't use optional chaining due to webpack 4
+      return (overflow.item && overflow.item.children && overflow.item.children.length) || 0;
+    }
+
+    /** @private */
+    __restoreButtons(buttons) {
+      for (let i = 0; i < buttons.length; i++) {
+        const btn = buttons[i];
+        btn.disabled = (btn.item && btn.item.disabled) || this.disabled;
+        btn.style.visibility = '';
+        btn.style.position = '';
+
+        // Teleport item component back from "overflow" sub-menu
+        const item = btn.item && btn.item.component;
+        if (item instanceof HTMLElement && item.getAttribute('role') === 'menuitem') {
+          btn.appendChild(item);
+          item.removeAttribute('role');
+        }
+      }
+      this.__updateOverflow([]);
+    }
+
+    /** @private */
+    __updateOverflow(items) {
+      this._overflow.item = { children: items };
+      this._hasOverflow = items.length > 0;
+    }
+
+    /** @private */
+    __setOverflowItems(buttons, overflow) {
+      const container = this._container;
+
+      if (container.offsetWidth < container.scrollWidth) {
+        this._hasOverflow = true;
+
+        const isRTL = this.__isRTL;
+
+        let i;
+        for (i = buttons.length; i > 0; i--) {
+          const btn = buttons[i - 1];
+          const btnStyle = getComputedStyle(btn);
+
+          // 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)
+          ) {
+            break;
+          }
+
+          btn.disabled = true;
+          btn.style.visibility = 'hidden';
+          btn.style.position = 'absolute';
+          // Save width for buttons with component
+          btn.style.width = btnStyle.width;
+        }
+        const items = buttons.filter((_, idx) => idx >= i).map((b) => b.item);
+        this.__updateOverflow(items);
+      }
     }
 
     /** @private */
-    get __isRTL() {
-      return this.getAttribute('dir') === 'rtl';
+    __detectOverflow() {
+      const overflow = this._overflow;
+      const buttons = this._buttons.filter((btn) => btn !== overflow);
+      const oldOverflowCount = this.__getOverflowCount(overflow);
+
+      // 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
+      this.__setOverflowItems(buttons, overflow);
+
+      const newOverflowCount = this.__getOverflowCount(overflow);
+      if (oldOverflowCount !== newOverflowCount && this._subMenu.opened) {
+        this._subMenu.close();
+      }
+
+      const isSingleButton = newOverflowCount === buttons.length || (newOverflowCount === 0 && buttons.length === 1);
+      this.toggleAttribute('has-single-button', isSingleButton);
     }
 
     /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this._hideTooltip(true);
+    _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;
+      }
+
+      return button;
+    }
+
+    /** @protected */
+    _initButtonAttrs(button) {
+      button.setAttribute('role', 'menuitem');
+
+      if (button === this._overflow || (button.item && button.item.children)) {
+        button.setAttribute('aria-haspopup', 'true');
+        button.setAttribute('aria-expanded', 'false');
+      }
+    }
+
+    /** @protected */
+    _setButtonDisabled(button, disabled) {
+      button.disabled = disabled;
+      button.setAttribute('tabindex', disabled ? '-1' : '0');
+    }
+
+    /** @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 = btn.item && btn.item.theme;
+      if (itemTheme != null) {
+        theme = Array.isArray(itemTheme) ? itemTheme.join(' ') : itemTheme;
+      }
+
+      if (theme) {
+        btn.setAttribute('theme', theme);
+      } else {
+        btn.removeAttribute('theme');
+      }
+    }
+
+    /** @private */
+    __getComponent(item) {
+      const itemComponent = item.component;
+      let component;
+
+      const isElement = itemComponent instanceof HTMLElement;
+      // Use existing item component, if any
+      if (isElement && itemComponent.localName === 'vaadin-context-menu-item') {
+        component = itemComponent;
+      } else {
+        component = document.createElement('vaadin-context-menu-item');
+        component.appendChild(isElement ? itemComponent : document.createElement(itemComponent));
+      }
+      if (item.text) {
+        const node = component.firstChild || component;
+        node.textContent = item.text;
+      }
+      component.setAttribute('theme', 'menu-bar-item');
+      return component;
+    }
+
+    /** @private */
+    __renderButtons(items = []) {
+      this._removeButtons();
+
+      /* Empty array, do nothing */
+      if (items.length === 0) {
+        return;
+      }
+
+      items.forEach((item) => {
+        const button = this._initButton(item);
+        this.insertBefore(button, this._overflow);
+        this._setButtonDisabled(button, item.disabled);
+        this._initButtonAttrs(button);
+        this._setButtonTheme(button, this._theme);
+      });
+
+      this.__detectOverflow();
     }
 
     /**
@@ -129,7 +423,7 @@ export const InteractionsMixin = (superClass) =>
 
     /** @protected */
     _hideTooltip(immediate) {
-      const tooltip = this._tooltipController.node;
+      const tooltip = this._tooltipController && this._tooltipController.node;
       if (tooltip) {
         tooltip._stateController.close(immediate);
       }
@@ -192,7 +486,7 @@ export const InteractionsMixin = (superClass) =>
      */
     _setFocused(focused) {
       if (focused) {
-        const target = this.shadowRoot.querySelector('[part$="button"][tabindex="0"]');
+        const target = this.querySelector('[tabindex="0"]');
         if (target) {
           this._buttons.forEach((btn) => {
             this._setTabindex(btn, btn === target);
@@ -278,11 +572,6 @@ export const InteractionsMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    get _subMenu() {
-      return this.shadowRoot.querySelector('vaadin-menu-bar-submenu');
-    }
-
     /** @private */
     _itemsChanged() {
       const subMenu = this._subMenu;

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ContextMenu } from '@vaadin/context-menu/src/vaadin-context-menu.js';

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

@@ -1,14 +1,12 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.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';
-import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
+import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
 
 export interface MenuBarItem {
   /**
@@ -87,8 +85,6 @@ export interface MenuBarEventMap extends HTMLElementEventMap, MenuBarCustomEvent
  * Part name         | Description
  * ------------------|----------------
  * `container`       | The container wrapping menu bar buttons.
- * `menu-bar-button` | The menu bar button.
- * `overflow-button` | The "overflow" button appearing when menu bar width is not enough to fit all the buttons.
  *
  * The following state attributes are available for styling:
  *
@@ -111,9 +107,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(
-  DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))),
-) {
+declare class MenuBar extends MenuBarMixin(DisabledMixin(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
@@ -166,6 +160,14 @@ declare class MenuBar extends ButtonsMixin(
    */
   i18n: MenuBarI18n;
 
+  /**
+   * A space-delimited list of CSS class names
+   * to set on each sub-menu overlay element.
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
+
   addEventListener<K extends keyof MenuBarEventMap>(
     type: K,
     listener: (this: MenuBar, ev: MenuBarEventMap[K]) => void,