@vaadin/menu-bar 24.0.0-alpha1 → 24.0.0-alpha11

package/package.json

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

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';

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 { 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.textContent = '···';
+          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,234 @@ 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) {
+      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 */
+    __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-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();
+    }
+
     /**
      * @param {HTMLElement} button
      * @protected
@@ -273,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,13 +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 { 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 {
   /**
@@ -108,7 +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(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
@@ -161,6 +160,14 @@ declare class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(Eleme
    */
   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,

package/src/vaadin-menu-bar.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 './vaadin-menu-bar-submenu.js';
@@ -10,8 +10,7 @@ import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.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';
 
 /**
  * `<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering
@@ -60,13 +59,12 @@ import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
  * @fires {CustomEvent<boolean>} item-selected - Fired when a submenu item or menu bar button without children is clicked.
  *
  * @extends HTMLElement
- * @mixes ButtonsMixin
- * @mixes InteractionsMixin
  * @mixes DisabledMixin
  * @mixes ElementMixin
+ * @mixes MenuBarMixin
  * @mixes ThemableMixin
  */
-class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
+class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -91,7 +89,7 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
         <slot></slot>
         <slot name="overflow"></slot>
       </div>
-      <vaadin-menu-bar-submenu is-root=""></vaadin-menu-bar-submenu>
+      <vaadin-menu-bar-submenu is-root overlay-class="[[overlayClass]]"></vaadin-menu-bar-submenu>
 
       <slot name="tooltip"></slot>
     `;
@@ -193,11 +191,21 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
           };
         },
       },
+
+      /**
+       * A space-delimited list of CSS class names
+       * to set on each sub-menu overlay element.
+       *
+       * @attr {string} overlay-class
+       */
+      overlayClass: {
+        type: String,
+      },
     };
   }
 
   static get observers() {
-    return ['_themeChanged(_theme, _overflow)'];
+    return ['_themeChanged(_theme, _overflow, _container)'];
   }
 
   /** @protected */
@@ -233,8 +241,8 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
    * @param {string | null} theme
    * @protected
    */
-  _themeChanged(theme, overflow) {
-    if (overflow) {
+  _themeChanged(theme, overflow, container) {
+    if (overflow && container) {
       this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
       this.__detectOverflow();
     }

package/theme/lumo/vaadin-menu-bar-item-styles.js

@@ -12,15 +12,13 @@ registerStyles(
       justify-content: inherit;
     }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon),
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(iron-icon) {
+    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon) {
       display: inline-block;
       width: var(--lumo-icon-size-m);
       height: var(--lumo-icon-size-m);
     }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']),
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(iron-icon[icon^='vaadin:']) {
+    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
       padding: var(--lumo-space-xs);
       box-sizing: border-box !important;
     }

package/theme/material/vaadin-menu-bar-item-styles.js

@@ -12,8 +12,7 @@ registerStyles(
       font-size: var(--material-button-font-size);
     }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']),
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(iron-icon[icon^='vaadin:']) {
+    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
       display: inline-block;
       width: 18px;
       height: 18px;

package/web-types.json

@@ -1,15 +1,26 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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.0.0-alpha1/#/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/custom-theme/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.0.0-alpha1/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-overlay).",
+          "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.0.0-alpha11/#/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/custom-theme/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.0.0-alpha11/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-overlay).",
           "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "open-on-hover",
               "description": "If true, the submenu will open on hover (mouseover) instead of click.",
@@ -22,11 +33,11 @@
               }
             },
             {
-              "name": "disabled",
-              "description": "If true, the user cannot interact with this element.",
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
               "value": {
                 "type": [
-                  "boolean",
+                  "string",
                   "null",
                   "undefined"
                 ]
@@ -47,8 +58,8 @@
           "js": {
             "properties": [
               {
-                "name": "openOnHover",
-                "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
                 "value": {
                   "type": [
                     "boolean",
@@ -58,8 +69,8 @@
                 }
               },
               {
-                "name": "disabled",
-                "description": "If true, the user cannot interact with this element.",
+                "name": "openOnHover",
+                "description": "If true, the submenu will open on hover (mouseover) instead of click.",
                 "value": {
                   "type": [
                     "boolean",
@@ -85,6 +96,17 @@
                     "MenuBarI18n"
                   ]
                 }
+              },
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,19 +16,19 @@
       "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.0.0-alpha1/#/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/custom-theme/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.0.0-alpha1/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-overlay).",
+          "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.0.0-alpha11/#/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/custom-theme/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.0.0-alpha11/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
             {
-              "name": "?openOnHover",
-              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?disabled",
-              "description": "If true, the user cannot interact with this element.",
+              "name": "?openOnHover",
+              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
               "value": {
                 "kind": "expression"
               }
@@ -47,6 +47,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@item-selected",
               "description": "Fired when either a submenu item or menu bar button without nested children is clicked.",

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

@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2022 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 { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
-
-export declare function ButtonsMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ButtonsMixinClass> & Constructor<ControllerMixinClass> & Constructor<ResizeMixinClass> & T;
-
-export declare class ButtonsMixinClass {
-  protected readonly _buttons: HTMLElement[];
-
-  protected readonly _container: HTMLElement;
-
-  protected readonly _overflow: HTMLElement;
-
-  protected _hasOverflow: boolean;
-}

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

@@ -1,318 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2022 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 { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-
-/**
- * @polymerMixin
- * @mixes ResizeMixin
- * @mixes ControllerMixin
- */
-export const ButtonsMixin = (superClass) =>
-  class extends ResizeMixin(ControllerMixin(superClass)) {
-    static get properties() {
-      return {
-        /**
-         * @type {boolean}
-         * @protected
-         */
-        _hasOverflow: {
-          type: Boolean,
-          value: false,
-        },
-
-        /** @protected */
-        _overflow: {
-          type: Object,
-        },
-      };
-    }
-
-    static get observers() {
-      return [
-        '__hasOverflowChanged(_hasOverflow, _overflow)',
-        '__i18nChanged(i18n, _overflow)',
-        '_menuItemsChanged(items, _overflow, items.splices)',
-      ];
-    }
-
-    /**
-     * Override getter from `ResizeMixin` to observe parent.
-     *
-     * @protected
-     * @override
-     */
-    get _observeParent() {
-      return true;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.setAttribute('role', 'menubar');
-
-      this._overflowController = new SlotController(
-        this,
-        'overflow',
-        () => document.createElement('vaadin-menu-bar-button'),
-        (_, 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);
-    }
-
-    /**
-     * @return {!Array<!HTMLElement>}
-     * @protected
-     */
-    get _buttons() {
-      return Array.from(this.querySelectorAll('vaadin-menu-bar-button'));
-    }
-
-    /**
-     * @return {!HTMLElement}
-     * @protected
-     */
-    get _container() {
-      return this.shadowRoot.querySelector('[part="container"]');
-    }
-
-    /** @private */
-    __hasOverflowChanged(hasOverflow, overflow) {
-      if (overflow) {
-        overflow.toggleAttribute('hidden', !hasOverflow);
-      }
-    }
-
-    /** @private */
-    _menuItemsChanged(items, overflow) {
-      if (!overflow) {
-        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.classList.contains('vaadin-menu-item')) {
-          btn.appendChild(item);
-          item.classList.remove('vaadin-menu-item');
-        }
-      }
-      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.getAttribute('dir') === 'rtl';
-
-        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-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();
-    }
-
-    /**
-     * @protected
-     * @override
-     */
-    _onResize() {
-      this.__detectOverflow();
-    }
-  };