@vaadin/menu-bar 24.0.0-alpha9 → 24.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,22 +37,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha9",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/context-menu": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/button": "24.0.0-beta1",
+    "@vaadin/component-base": "24.0.0-beta1",
+    "@vaadin/context-menu": "24.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "24.0.0-alpha9",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/icon": "24.0.0-beta1",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

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

@@ -17,7 +17,7 @@ registerStyles(
       margin-inline-end: 0;
     }
 
-    [part='label'] ::slotted(vaadin-context-menu-item) {
+    [part='label'] ::slotted(vaadin-menu-bar-item) {
       position: relative;
       z-index: 1;
     }

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ */
+declare class MenuBarItem extends ItemMixin(DirMixin(ThemableMixin(HTMLElement))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-menu-bar-item': MenuBarItem;
+  }
+}
+
+export { MenuBarItem };

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

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ItemMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class MenuBarItem extends ItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
+  static get is() {
+    return 'vaadin-menu-bar-item';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Set role in `connectedCallback()` instead of `ready()`
+    // because the role is removed when teleporting to button.
+    this.setAttribute('role', 'menuitem');
+  }
+}
+
+customElements.define(MenuBarItem.is, MenuBarItem);
+
+export { MenuBarItem };

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

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * 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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ */
+declare class MenuBarListBox extends ListMixin(DirMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-menu-bar-list-box': MenuBarListBox;
+  }
+}
+
+export { MenuBarListBox };

package/src/vaadin-menu-bar-list-box.js

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ControllerMixin
+ * @mixes DirMixin
+ * @mixes ListMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class MenuBarListBox extends ListMixin(ThemableMixin(DirMixin(ControllerMixin(PolymerElement)))) {
+  static get is() {
+    return 'vaadin-menu-bar-list-box';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        [part='items'] {
+          height: 100%;
+          width: 100%;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+      </style>
+      <div part="items">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      // We don't need to define this property since super default is vertical,
+      // but we don't want it to be modified, or be shown in the API docs.
+      /** @private */
+      orientation: {
+        readOnly: true,
+      },
+    };
+  }
+
+  /**
+   * @return {!HTMLElement}
+   * @protected
+   * @override
+   */
+  get _scrollerElement() {
+    return this.shadowRoot.querySelector('[part="items"]');
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('role', 'menu');
+  }
+}
+
+customElements.define(MenuBarListBox.is, MenuBarListBox);
+
+export { MenuBarListBox };

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

@@ -4,22 +4,34 @@
  * 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;
+
+  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}

@@ -3,17 +3,22 @@
  * 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 { 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,34 +28,40 @@ export const InteractionsMixin = (superClass) =>
         openOnHover: {
           type: Boolean,
         },
-      };
-    }
 
-    constructor() {
-      super();
-      this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
+        /**
+         * @type {boolean}
+         * @protected
+         */
+        _hasOverflow: {
+          type: Boolean,
+          value: false,
+        },
+
+        /** @protected */
+        _overflow: {
+          type: Object,
+        },
+
+        /** @protected */
+        _container: {
+          type: Object,
+        },
+      };
     }
 
     static get observers() {
-      return ['_itemsChanged(items, items.splices)'];
+      return [
+        '_itemsChanged(items, items.splices)',
+        '__hasOverflowChanged(_hasOverflow, _overflow)',
+        '__i18nChanged(i18n, _overflow)',
+        '_menuItemsChanged(items, _overflow, _container, items.splices)',
+      ];
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.addEventListener('mousedown', () => this._hideTooltip());
-      this.addEventListener('mouseleave', () => this._hideTooltip());
-
-      this._subMenu.addEventListener('item-selected', this.__onItemSelected.bind(this));
-      this._subMenu.addEventListener('close-all-menus', this.__onEscapeClose.bind(this));
-
-      const overlay = this._subMenu.$.overlay;
-      overlay.addEventListener('keydown', this.__boundOnContextMenuKeydown);
-
-      const container = this._container;
-      container.addEventListener('click', this.__onButtonClick.bind(this));
-      container.addEventListener('mouseover', (e) => this._onMouseOver(e));
+    constructor() {
+      super();
+      this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
     }
 
     /**
@@ -77,6 +88,66 @@ export const InteractionsMixin = (superClass) =>
       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.innerHTML = '&centerdot;'.repeat(3);
+          btn.appendChild(dots);
+
+          this._overflow = btn;
+          this._initButtonAttrs(btn);
+        },
+      });
+      this.addController(this._overflowController);
+
+      this.addEventListener('mousedown', () => this._hideTooltip());
+      this.addEventListener('mouseleave', () => this._hideTooltip());
+
+      this._subMenu.addEventListener('item-selected', this.__onItemSelected.bind(this));
+      this._subMenu.addEventListener('close-all-menus', this.__onEscapeClose.bind(this));
+
+      const overlay = this._subMenu.$.overlay;
+      overlay.addEventListener('keydown', this.__boundOnContextMenuKeydown);
+
+      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 method inherited from `KeyboardDirectionMixin`
      * to use the list of menu-bar buttons as items.
@@ -95,6 +166,232 @@ export const InteractionsMixin = (superClass) =>
       this._hideTooltip(true);
     }
 
+    /**
+     * Implement callback from `ResizeMixin` to update buttons
+     * and detect whether to show or hide the overflow button.
+     *
+     * @protected
+     * @override
+     */
+    _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) {
+      buttons.forEach((button) => {
+        button.disabled = (button.item && button.item.disabled) || this.disabled;
+        button.style.visibility = '';
+        button.style.position = '';
+
+        // Teleport item component back from "overflow" sub-menu
+        const item = button.item && button.item.component;
+        if (item instanceof HTMLElement && item.getAttribute('role') === 'menuitem') {
+          button.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 */
+    __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 */
+    _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-menu-bar-item') {
+        component = itemComponent;
+      } else {
+        component = document.createElement('vaadin-menu-bar-item');
+        component.appendChild(isElement ? itemComponent : document.createElement(itemComponent));
+      }
+      if (item.text) {
+        const node = component.firstChild || component;
+        node.textContent = item.text;
+      }
+      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();
+    }
+
     /**
      * @param {HTMLElement} button
      * @protected
@@ -273,11 +570,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-overlay.d.ts

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