npm - @vaadin/menu-bar - Versions diffs - 24.3.0-beta2 → 24.3.0-rc1 - Mend

@vaadin/menu-bar 24.3.0-beta2 → 24.3.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/package.json +13 -13
package/src/vaadin-menu-bar-mixin.d.ts +111 -0
package/src/vaadin-menu-bar-mixin.js +159 -11
package/src/vaadin-menu-bar-submenu.js +0 -11
package/src/vaadin-menu-bar.d.ts +2 -115
package/src/vaadin-menu-bar.js +1 -158
package/web-types.json +19 -19
package/web-types.lit.json +2 -2

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "24.3.0-beta2",
+  "version": "24.3.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,20 +37,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.3.0-beta2",
-    "@vaadin/button": "24.3.0-beta2",
-    "@vaadin/component-base": "24.3.0-beta2",
-    "@vaadin/context-menu": "24.3.0-beta2",
-    "@vaadin/item": "24.3.0-beta2",
-    "@vaadin/list-box": "24.3.0-beta2",
-    "@vaadin/overlay": "24.3.0-beta2",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-beta2",
-    "@vaadin/vaadin-material-styles": "24.3.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-beta2"
+    "@vaadin/a11y-base": "24.3.0-rc1",
+    "@vaadin/button": "24.3.0-rc1",
+    "@vaadin/component-base": "24.3.0-rc1",
+    "@vaadin/context-menu": "24.3.0-rc1",
+    "@vaadin/item": "24.3.0-rc1",
+    "@vaadin/list-box": "24.3.0-rc1",
+    "@vaadin/overlay": "24.3.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.3.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "24.3.0-beta2",
+    "@vaadin/icon": "24.3.0-rc1",
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0bbfb24cb8dcd6e1dca8ecf2269635efac53e4d0"
+  "gitHead": "54430cfc0f52bb6fc17b0fc325b0d62e0e49c700"
 }

package/src/vaadin-menu-bar-mixin.d.ts CHANGED Viewed

@@ -4,15 +4,65 @@
  * 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 { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+export interface MenuBarItem {
+  /**
+   * Text to be set as the menu button component's textContent.
+   */
+  text?: string;
+  /**
+   * 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>`.
+   */
+  tooltip?: string;
+  /**
+   * The component to represent the button content.
+   * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
+   */
+  component?: HTMLElement | string;
+  /**
+   * If true, the button is disabled and cannot be activated.
+   */
+  disabled?: boolean;
+  /**
+   * Theme(s) to be set as the theme attribute of the button, overriding any theme set on the menu bar.
+   */
+  theme?: string[] | string;
+  /**
+   * Array of submenu items.
+   */
+  children?: SubMenuItem[];
+  /**
+   * Class/classes to be set to the class attribute of the button.
+   */
+  className?: string;
+}
+export interface SubMenuItem {
+  text?: string;
+  component?: HTMLElement | string;
+  disabled?: boolean;
+  theme?: string[] | string;
+  checked?: boolean;
+  className?: string;
+  children?: SubMenuItem[];
+}
+export interface MenuBarI18n {
+  moreOptions: string;
+}
 export declare function MenuBarMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ControllerMixinClass> &
+  Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
   Constructor<KeyboardDirectionMixinClass> &
   Constructor<KeyboardMixinClass> &
@@ -21,6 +71,67 @@ export declare function MenuBarMixin<T extends Constructor<HTMLElement>>(
   T;
 export declare class MenuBarMixinClass {
+  /**
+   * Defines a hierarchical structure, where root level items represent menu bar buttons,
+   * and `children` property configures a submenu with items to be opened below
+   * the button on click, Enter, Space, Up and Down arrow keys.
+   *
+   * #### Example
+   *
+   * ```js
+   * menubar.items = [
+   *   {
+   *     text: 'File',
+   *     className: 'file',
+   *     children: [
+   *       {text: 'Open', className: 'file open'}
+   *       {text: 'Auto Save', checked: true},
+   *     ]
+   *   },
+   *   {component: 'hr'},
+   *   {
+   *     text: 'Edit',
+   *     children: [
+   *       {text: 'Undo', disabled: true},
+   *       {text: 'Redo'}
+   *     ]
+   *   },
+   *   {text: 'Help'}
+   * ];
+   * ```
+   */
+  items: MenuBarItem[];
+  /**
+   * The object used to localize this component.
+   * To change the default localization, replace the entire
+   * `i18n` object with a custom one.
+   *
+   * To update individual properties, extend the existing i18n object like so:
+   * ```
+   * menuBar.i18n = {
+   *   ...menuBar.i18n,
+   *   moreOptions: 'More options'
+   * }
+   * ```
+   *
+   * The object has the following JSON structure and default values:
+   * ```
+   * {
+   *   moreOptions: 'More options'
+   * }
+   * ```
+   */
+  i18n: MenuBarI18n;
+  /**
+   * A space-delimited list of CSS class names
+   * to set on each sub-menu overlay element.
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
   /**
    * If true, the submenu will open on hover (mouseover) instead of click.
    * @attr {boolean} open-on-hover

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

@@ -3,6 +3,7 @@
  * 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/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';
@@ -12,15 +13,120 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 /**
  * @polymerMixin
+ * @mixes DisabledMixin
  * @mixes ControllerMixin
  * @mixes FocusMixin
  * @mixes KeyboardDirectionMixin
  * @mixes ResizeMixin
  */
 export const MenuBarMixin = (superClass) =>
-  class MenuBarMixinClass extends KeyboardDirectionMixin(ResizeMixin(FocusMixin(ControllerMixin(superClass)))) {
+  class MenuBarMixinClass extends KeyboardDirectionMixin(
+    ResizeMixin(FocusMixin(DisabledMixin(ControllerMixin(superClass)))),
+  ) {
     static get properties() {
       return {
+        /**
+         * @typedef MenuBarItem
+         * @type {object}
+         * @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.
+         * 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 {SubMenuItem[]} children - Array of submenu items.
+         */
+        /**
+         * @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.
+         * 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.
+         * @property {SubMenuItem[]} children - Array of child submenu items.
+         */
+        /**
+         * Defines a hierarchical structure, where root level items represent menu bar buttons,
+         * and `children` property configures a submenu with items to be opened below
+         * the button on click, Enter, Space, Up and Down arrow keys.
+         *
+         * #### Example
+         *
+         * ```js
+         * menubar.items = [
+         *   {
+         *     text: 'File',
+         *     className: 'file',
+         *     children: [
+         *       {text: 'Open', className: 'file open'}
+         *       {text: 'Auto Save', checked: true},
+         *     ]
+         *   },
+         *   {component: 'hr'},
+         *   {
+         *     text: 'Edit',
+         *     children: [
+         *       {text: 'Undo', disabled: true},
+         *       {text: 'Redo'}
+         *     ]
+         *   },
+         *   {text: 'Help'}
+         * ];
+         * ```
+         *
+         * @type {!Array<!MenuBarItem>}
+         */
+        items: {
+          type: Array,
+          value: () => [],
+        },
+        /**
+         * The object used to localize this component.
+         * To change the default localization, replace the entire
+         * `i18n` object with a custom one.
+         *
+         * To update individual properties, extend the existing i18n object like so:
+         * ```
+         * menuBar.i18n = {
+         *   ...menuBar.i18n,
+         *   moreOptions: 'More options'
+         * }
+         * ```
+         *
+         * The object has the following JSON structure and default values:
+         * ```
+         * {
+         *   moreOptions: 'More options'
+         * }
+         * ```
+         *
+         * @type {!MenuBarI18n}
+         * @default {English/US}
+         */
+        i18n: {
+          type: Object,
+          value: () => {
+            return {
+              moreOptions: 'More options',
+            };
+          },
+        },
+        /**
+         * 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
@@ -52,10 +158,10 @@ export const MenuBarMixin = (superClass) =>
     static get observers() {
       return [
-        '_itemsChanged(items, items.splices)',
+        '_themeChanged(_theme, _overflow, _container)',
         '__hasOverflowChanged(_hasOverflow, _overflow)',
         '__i18nChanged(i18n, _overflow)',
-        '_menuItemsChanged(items, _overflow, _container, items.splices)',
+        '_menuItemsChanged(items, _overflow, _container)',
       ];
     }
@@ -177,6 +283,43 @@ export const MenuBarMixin = (superClass) =>
       this.__detectOverflow();
     }
+    /**
+     * Override method inherited from `DisabledMixin`
+     * to update the `disabled` property for the buttons
+     * whenever the property changes on the menu bar.
+     *
+     * @param {boolean} newValue the new disabled value
+     * @param {boolean} oldValue the previous disabled value
+     * @override
+     * @protected
+     */
+    _disabledChanged(newValue, oldValue) {
+      super._disabledChanged(newValue, oldValue);
+      if (oldValue !== newValue) {
+        this.__updateButtonsDisabled(newValue);
+      }
+    }
+    /**
+     * A callback for the `_theme` property observer.
+     * It propagates the host theme to the buttons and the sub menu.
+     *
+     * @param {string | null} theme
+     * @private
+     */
+    _themeChanged(theme, overflow, container) {
+      if (overflow && container) {
+        this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
+        this.__detectOverflow();
+      }
+      if (theme) {
+        this._subMenu.setAttribute('theme', theme);
+      } else {
+        this._subMenu.removeAttribute('theme');
+      }
+    }
     /** @private */
     __hasOverflowChanged(hasOverflow, overflow) {
       if (overflow) {
@@ -194,6 +337,11 @@ export const MenuBarMixin = (superClass) =>
         this._oldItems = items;
         this.__renderButtons(items);
       }
+      const subMenu = this._subMenu;
+      if (subMenu && subMenu.opened) {
+        subMenu.close();
+      }
     }
     /** @private */
@@ -238,6 +386,14 @@ export const MenuBarMixin = (superClass) =>
       item.removeAttribute('tabindex');
     }
+    /** @private */
+    __updateButtonsDisabled(disabled) {
+      this._buttons.forEach((btn) => {
+        // Disable the button if the entire menu-bar is disabled or the item alone is disabled
+        btn.disabled = disabled || (btn.item && btn.item.disabled);
+      });
+    }
     /** @private */
     __updateOverflow(items) {
       this._overflow.item = { children: items };
@@ -591,14 +747,6 @@ export const MenuBarMixin = (superClass) =>
       }
     }
-    /** @private */
-    _itemsChanged() {
-      const subMenu = this._subMenu;
-      if (subMenu && subMenu.opened) {
-        subMenu.close();
-      }
-    }
     /**
      * @param {!MouseEvent} e
      * @protected

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

@@ -35,17 +35,6 @@ class MenuBarSubmenu extends ContextMenu {
       </style>
       <slot id="slot"></slot>
-      <vaadin-menu-bar-overlay
-        id="overlay"
-        on-opened-changed="_onOverlayOpened"
-        on-vaadin-overlay-open="_onVaadinOverlayOpen"
-        modeless="[[_modeless]]"
-        with-backdrop="[[_phone]]"
-        phone$="[[_phone]]"
-        model="[[_context]]"
-        theme$="[[_theme]]"
-      ></vaadin-menu-bar-overlay>
     `;
   }

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

@@ -6,55 +6,9 @@
 import { DisabledMixin } from '@vaadin/a11y-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 { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
+import { type MenuBarItem, MenuBarMixin } from './vaadin-menu-bar-mixin.js';
-export interface MenuBarItem {
-  /**
-   * Text to be set as the menu button component's textContent.
-   */
-  text?: string;
-  /**
-   * 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>`.
-   */
-  tooltip?: string;
-  /**
-   * The component to represent the button content.
-   * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
-   */
-  component?: HTMLElement | string;
-  /**
-   * If true, the button is disabled and cannot be activated.
-   */
-  disabled?: boolean;
-  /**
-   * Theme(s) to be set as the theme attribute of the button, overriding any theme set on the menu bar.
-   */
-  theme?: string[] | string;
-  /**
-   * Array of submenu items.
-   */
-  children?: SubMenuItem[];
-  /**
-   * Class/classes to be set to the class attribute of the button.
-   */
-  className?: string;
-}
-export interface SubMenuItem {
-  text?: string;
-  component?: HTMLElement | string;
-  disabled?: boolean;
-  theme?: string[] | string;
-  checked?: boolean;
-  className?: string;
-  children?: SubMenuItem[];
-}
-export interface MenuBarI18n {
-  moreOptions: string;
-}
+export { MenuBarItem, MenuBarI18n, SubMenuItem } from './vaadin-menu-bar-mixin.js';
 /**
  * Fired when a submenu item or menu bar button without children is clicked.
@@ -114,67 +68,6 @@ 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 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
-   * the button on click, Enter, Space, Up and Down arrow keys.
-   *
-   * #### Example
-   *
-   * ```js
-   * menubar.items = [
-   *   {
-   *     text: 'File',
-   *     className: 'file',
-   *     children: [
-   *       {text: 'Open', className: 'file open'}
-   *       {text: 'Auto Save', checked: true},
-   *     ]
-   *   },
-   *   {component: 'hr'},
-   *   {
-   *     text: 'Edit',
-   *     children: [
-   *       {text: 'Undo', disabled: true},
-   *       {text: 'Redo'}
-   *     ]
-   *   },
-   *   {text: 'Help'}
-   * ];
-   * ```
-   */
-  items: MenuBarItem[];
-  /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * `i18n` object with a custom one.
-   *
-   * To update individual properties, extend the existing i18n object like so:
-   * ```
-   * menuBar.i18n = {
-   *   ...menuBar.i18n,
-   *   moreOptions: 'More options'
-   * }
-   * ```
-   *
-   * The object has the following JSON structure and default values:
-   * ```
-   * {
-   *   moreOptions: 'More options'
-   * }
-   * ```
-   */
-  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,
@@ -186,12 +79,6 @@ declare class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMi
     listener: (this: MenuBar, ev: MenuBarEventMap[K]) => void,
     options?: EventListenerOptions | boolean,
   ): void;
-  /**
-   * A callback for the `_theme` property observer.
-   * It propagates the host theme to the buttons and the sub menu.
-   */
-  protected _themeChanged(theme: string | null): void;
 }
 declare global {

package/src/vaadin-menu-bar.js CHANGED Viewed

@@ -6,7 +6,6 @@
 import './vaadin-menu-bar-submenu.js';
 import './vaadin-menu-bar-button.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -61,12 +60,11 @@ import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
  *
  * @customElement
  * @extends HTMLElement
- * @mixes DisabledMixin
  * @mixes ElementMixin
  * @mixes MenuBarMixin
  * @mixes ThemableMixin
  */
-class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
+class MenuBar extends MenuBarMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -101,116 +99,6 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
     return 'vaadin-menu-bar';
   }
-  static get properties() {
-    return {
-      /**
-       * @typedef MenuBarItem
-       * @type {object}
-       * @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.
-       * 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 {SubMenuItem[]} children - Array of submenu items.
-       */
-      /**
-       * @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.
-       * 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.
-       * @property {SubMenuItem[]} children - Array of child submenu items.
-       */
-      /**
-       * Defines a hierarchical structure, where root level items represent menu bar buttons,
-       * and `children` property configures a submenu with items to be opened below
-       * the button on click, Enter, Space, Up and Down arrow keys.
-       *
-       * #### Example
-       *
-       * ```js
-       * menubar.items = [
-       *   {
-       *     text: 'File',
-       *     className: 'file',
-       *     children: [
-       *       {text: 'Open', className: 'file open'}
-       *       {text: 'Auto Save', checked: true},
-       *     ]
-       *   },
-       *   {component: 'hr'},
-       *   {
-       *     text: 'Edit',
-       *     children: [
-       *       {text: 'Undo', disabled: true},
-       *       {text: 'Redo'}
-       *     ]
-       *   },
-       *   {text: 'Help'}
-       * ];
-       * ```
-       *
-       * @type {!Array<!MenuBarItem>}
-       */
-      items: {
-        type: Array,
-        value: () => [],
-      },
-      /**
-       * The object used to localize this component.
-       * To change the default localization, replace the entire
-       * `i18n` object with a custom one.
-       *
-       * To update individual properties, extend the existing i18n object like so:
-       * ```
-       * menuBar.i18n = {
-       *   ...menuBar.i18n,
-       *   moreOptions: 'More options'
-       * }
-       * ```
-       *
-       * The object has the following JSON structure and default values:
-       * ```
-       * {
-       *   moreOptions: 'More options'
-       * }
-       * ```
-       *
-       * @type {!MenuBarI18n}
-       * @default {English/US}
-       */
-      i18n: {
-        type: Object,
-        value: () => {
-          return {
-            moreOptions: 'More options',
-          };
-        },
-      },
-      /**
-       * 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, _container)'];
-  }
   /** @protected */
   ready() {
     super.ready();
@@ -220,51 +108,6 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
     this.addController(this._tooltipController);
   }
-  /**
-   * Override method inherited from `DisabledMixin`
-   * to update the `disabled` property for the buttons
-   * whenever the property changes on the menu bar.
-   *
-   * @param {boolean} newValue the new disabled value
-   * @param {boolean} oldValue the previous disabled value
-   * @override
-   * @protected
-   */
-  _disabledChanged(newValue, oldValue) {
-    super._disabledChanged(newValue, oldValue);
-    if (oldValue !== newValue) {
-      this.__updateButtonsDisabled(newValue);
-    }
-  }
-  /**
-   * A callback for the `_theme` property observer.
-   * It propagates the host theme to the buttons and the sub menu.
-   *
-   * @param {string | null} theme
-   * @protected
-   */
-  _themeChanged(theme, overflow, container) {
-    if (overflow && container) {
-      this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
-      this.__detectOverflow();
-    }
-    if (theme) {
-      this._subMenu.setAttribute('theme', theme);
-    } else {
-      this._subMenu.removeAttribute('theme');
-    }
-  }
-  /** @private */
-  __updateButtonsDisabled(disabled) {
-    this._buttons.forEach((btn) => {
-      // Disable the button if the entire menu-bar is disabled or the item alone is disabled
-      btn.disabled = disabled || (btn.item && btn.item.disabled);
-    });
-  }
   /**
    * Fired when either a submenu item or menu bar button without nested children is clicked.
    *

package/web-types.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.3.0-beta2",
+  "version": "24.3.0-rc1",
   "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.3.0-beta2/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/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.3.0-rc1/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-overlay).",
           "attributes": [
             {
               "name": "disabled",
@@ -22,22 +22,22 @@
               }
             },
             {
-              "name": "open-on-hover",
-              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+              "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"
                 ]
               }
             },
             {
-              "name": "overlay-class",
-              "description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
+              "name": "open-on-hover",
+              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
               "value": {
                 "type": [
-                  "string",
+                  "boolean",
                   "null",
                   "undefined"
                 ]
@@ -68,17 +68,6 @@
                   ]
                 }
               },
-              {
-                "name": "openOnHover",
-                "description": "If true, the submenu will open on hover (mouseover) instead of click.",
-                "value": {
-                  "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "items",
                 "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```",
@@ -107,6 +96,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "openOnHover",
+                "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.3.0-beta2",
+  "version": "24.3.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-menu-bar",
-          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta2/#/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.3.0-rc1/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
             {