@vaadin/menu-bar 24.4.0-dev.4b20a0c55.3 → 24.4.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "24.4.0-dev.4b20a0c55.3",
+  "version": "24.4.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -39,21 +39,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/button": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/component-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/context-menu": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/item": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/list-box": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/overlay": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/a11y-base": "24.4.0-rc1",
+    "@vaadin/button": "24.4.0-rc1",
+    "@vaadin/component-base": "24.4.0-rc1",
+    "@vaadin/context-menu": "24.4.0-rc1",
+    "@vaadin/item": "24.4.0-rc1",
+    "@vaadin/list-box": "24.4.0-rc1",
+    "@vaadin/overlay": "24.4.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/icon": "24.4.0-rc1",
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "41cf17453d7506fb635c088a0425e20b6e82b89b"
+  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
 }

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

@@ -179,6 +179,7 @@ export const MenuBarMixin = (superClass) =>
     constructor() {
       super();
       this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
+      this.__boundOnTooltipMouseLeave = this.__onTooltipOverlayMouseLeave.bind(this);
     }
 
     /**
@@ -262,7 +263,12 @@ export const MenuBarMixin = (superClass) =>
       container.addEventListener('click', this.__onButtonClick.bind(this));
       container.addEventListener('mouseover', (e) => this._onMouseOver(e));
 
-      this._container = container;
+      // Delay setting container to avoid rendering buttons immediately,
+      // which would also trigger detecting overflow and force re-layout
+      // See https://github.com/vaadin/web-components/issues/7271
+      queueMicrotask(() => {
+        this._container = container;
+      });
     }
 
     /**
@@ -431,12 +437,12 @@ export const MenuBarMixin = (superClass) =>
         this._hasOverflow = true;
 
         const isRTL = this.__isRTL;
-        const containerLeft = container.getBoundingClientRect().left;
+        const containerLeft = container.offsetLeft;
 
         const remaining = [...buttons];
         while (remaining.length) {
           const lastButton = remaining[remaining.length - 1];
-          const btnLeft = lastButton.getBoundingClientRect().left - containerLeft;
+          const btnLeft = lastButton.offsetLeft - containerLeft;
 
           // If this button isn't overflowing, then the rest aren't either
           if (
@@ -468,6 +474,10 @@ export const MenuBarMixin = (superClass) =>
 
     /** @private */
     __detectOverflow() {
+      if (!this._container) {
+        return;
+      }
+
       const overflow = this._overflow;
       const buttons = this._buttons.filter((btn) => btn !== overflow);
       const oldOverflowCount = this.__getOverflowCount(overflow);
@@ -615,6 +625,11 @@ export const MenuBarMixin = (superClass) =>
           tooltip.generator = ({ item }) => item && item.tooltip;
         }
 
+        if (!tooltip._mouseLeaveListenerAdded) {
+          tooltip._overlayElement.addEventListener('mouseleave', this.__boundOnTooltipMouseLeave);
+          tooltip._mouseLeaveListenerAdded = true;
+        }
+
         if (!this._subMenu.opened) {
           this._tooltipController.setTarget(button);
           this._tooltipController.setContext({ item: button.item });
@@ -636,6 +651,13 @@ export const MenuBarMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __onTooltipOverlayMouseLeave(event) {
+      if (event.relatedTarget !== this._tooltipController.target) {
+        this._hideTooltip();
+      }
+    }
+
     /** @protected */
     _setExpanded(button, expanded) {
       button.toggleAttribute('expanded', expanded);

package/theme/lumo/vaadin-lit-menu-bar.d.ts

@@ -0,0 +1,6 @@
+import './vaadin-menu-bar-button-styles.js';
+import './vaadin-menu-bar-item-styles.js';
+import './vaadin-menu-bar-list-box-styles.js';
+import './vaadin-menu-bar-overlay-styles.js';
+import './vaadin-menu-bar-styles.js';
+import '../../src/vaadin-lit-menu-bar.js';

package/theme/lumo/vaadin-menu-bar-button-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/lumo/vaadin-menu-bar-button.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-menu-bar-button-styles.js';
+import '../../src/vaadin-menu-bar-button.js';

package/theme/lumo/vaadin-menu-bar-item-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';

package/theme/lumo/vaadin-menu-bar-list-box-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/lumo/vaadin-menu-bar-overlay-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/lumo/vaadin-menu-bar-styles.d.ts

@@ -0,0 +1 @@
+import '@vaadin/vaadin-lumo-styles/style.js';

package/theme/lumo/vaadin-menu-bar.d.ts

@@ -0,0 +1,6 @@
+import './vaadin-menu-bar-button.js';
+import './vaadin-menu-bar-item-styles.js';
+import './vaadin-menu-bar-list-box-styles.js';
+import './vaadin-menu-bar-overlay-styles.js';
+import './vaadin-menu-bar-styles.js';
+import '../../src/vaadin-menu-bar.js';

package/theme/material/vaadin-lit-menu-bar.d.ts

@@ -0,0 +1,6 @@
+import './vaadin-menu-bar-button-styles.js';
+import './vaadin-menu-bar-item-styles.js';
+import './vaadin-menu-bar-list-box-styles.js';
+import './vaadin-menu-bar-overlay-styles.js';
+import './vaadin-menu-bar-styles.js';
+import '../../src/vaadin-lit-menu-bar.js';

package/theme/material/vaadin-menu-bar-button-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/material/vaadin-menu-bar-button.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-menu-bar-button-styles.js';
+import '../../src/vaadin-menu-bar-button.js';

package/theme/material/vaadin-menu-bar-item-styles.d.ts

@@ -0,0 +1 @@
+import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-menu-bar-list-box-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/material/vaadin-menu-bar-overlay-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/material/vaadin-menu-bar-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/material/vaadin-menu-bar.d.ts

@@ -0,0 +1,6 @@
+import './vaadin-menu-bar-button.js';
+import './vaadin-menu-bar-item-styles.js';
+import './vaadin-menu-bar-list-box-styles.js';
+import './vaadin-menu-bar-styles.js';
+import './vaadin-menu-bar-overlay-styles.js';
+import '../../src/vaadin-menu-bar.js';

package/web-types.json

@@ -0,0 +1,145 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/menu-bar",
+  "version": "24.4.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.4.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.4.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.4.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.4.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.4.0-rc1/#/elements/vaadin-overlay).",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "open-on-hover",
+              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "reverse-collapse",
+              "description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "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```",
+                "value": {
+                  "type": [
+                    "Array.<MenuBarItem>"
+                  ]
+                }
+              },
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\nmenuBar.i18n = {\n  ...menuBar.i18n,\n  moreOptions: 'More options'\n}\n```\n\nThe object has the following JSON structure and default values:\n```\n{\n  moreOptions: 'More options'\n}\n```",
+                "value": {
+                  "type": [
+                    "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"
+                  ]
+                }
+              },
+              {
+                "name": "openOnHover",
+                "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "reverseCollapse",
+                "description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "item-selected",
+                "description": "Fired when either a submenu item or menu bar button without nested children is clicked."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/menu-bar",
+  "version": "24.4.0-rc1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "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.4.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.4.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.4.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.4.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.4.0-rc1/#/elements/vaadin-overlay).",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?openOnHover",
+              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?reverseCollapse",
+              "description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "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```",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\nmenuBar.i18n = {\n  ...menuBar.i18n,\n  moreOptions: 'More options'\n}\n```\n\nThe object has the following JSON structure and default values:\n```\n{\n  moreOptions: 'More options'\n}\n```",
+              "value": {
+                "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.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}