@vaadin/menu-bar 25.0.0-beta1 → 25.0.0-beta2
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.
- package/package.json +14 -14
- package/src/vaadin-menu-bar-mixin.js +36 -15
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/menu-bar",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,27 +34,27 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
37
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
38
|
-
"@vaadin/button": "25.0.0-
|
|
39
|
-
"@vaadin/component-base": "25.0.0-
|
|
40
|
-
"@vaadin/context-menu": "25.0.0-
|
|
41
|
-
"@vaadin/item": "25.0.0-
|
|
42
|
-
"@vaadin/list-box": "25.0.0-
|
|
43
|
-
"@vaadin/overlay": "25.0.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-beta2",
|
|
38
|
+
"@vaadin/button": "25.0.0-beta2",
|
|
39
|
+
"@vaadin/component-base": "25.0.0-beta2",
|
|
40
|
+
"@vaadin/context-menu": "25.0.0-beta2",
|
|
41
|
+
"@vaadin/item": "25.0.0-beta2",
|
|
42
|
+
"@vaadin/list-box": "25.0.0-beta2",
|
|
43
|
+
"@vaadin/overlay": "25.0.0-beta2",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-beta2",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
49
|
-
"@vaadin/icon": "25.0.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
48
|
+
"@vaadin/chai-plugins": "25.0.0-beta2",
|
|
49
|
+
"@vaadin/icon": "25.0.0-beta2",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.0.0-beta2",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-beta2",
|
|
53
53
|
"sinon": "^21.0.0"
|
|
54
54
|
},
|
|
55
55
|
"web-types": [
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
|
|
60
60
|
}
|
|
@@ -8,7 +8,7 @@ import { Directive, directive } from 'lit/directive.js';
|
|
|
8
8
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
9
|
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
10
10
|
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
11
|
-
import { isElementFocused, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
11
|
+
import { isElementFocused, isElementHidden, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
12
12
|
import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
|
|
13
13
|
import { microTask } from '@vaadin/component-base/src/async.js';
|
|
14
14
|
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
|
|
@@ -500,12 +500,6 @@ export const MenuBarMixin = (superClass) =>
|
|
|
500
500
|
|
|
501
501
|
const items = buttons.filter((b) => !remaining.includes(b)).map((b) => b.item);
|
|
502
502
|
this.__updateOverflow(items);
|
|
503
|
-
|
|
504
|
-
// Ensure there is at least one button with tabindex set to 0
|
|
505
|
-
// so that menu-bar is not skipped when navigating with Tab
|
|
506
|
-
if (remaining.length && !remaining.some((btn) => btn.getAttribute('tabindex') === '0')) {
|
|
507
|
-
this._setTabindex(remaining[remaining.length - 1], true);
|
|
508
|
-
}
|
|
509
503
|
}
|
|
510
504
|
}
|
|
511
505
|
|
|
@@ -536,13 +530,23 @@ export const MenuBarMixin = (superClass) =>
|
|
|
536
530
|
const isSingleButton = newOverflowCount === buttons.length || (newOverflowCount === 0 && buttons.length === 1);
|
|
537
531
|
this.toggleAttribute('has-single-button', isSingleButton);
|
|
538
532
|
|
|
533
|
+
// Collect visible buttons to detect if tabindex should be updated
|
|
534
|
+
const visibleButtons = buttons.filter((btn) => btn.style.visibility !== 'hidden');
|
|
535
|
+
|
|
536
|
+
if (!visibleButtons.length) {
|
|
537
|
+
// If all buttons except overflow are hidden, set tabindex on it
|
|
538
|
+
this._overflow.setAttribute('tabindex', '0');
|
|
539
|
+
} else if (!visibleButtons.some((btn) => btn.getAttribute('tabindex') === '0')) {
|
|
540
|
+
// Ensure there is at least one button with tabindex set to 0
|
|
541
|
+
// so that menu-bar is not skipped when navigating with Tab
|
|
542
|
+
this._setTabindex(visibleButtons[visibleButtons.length - 1], true);
|
|
543
|
+
}
|
|
544
|
+
|
|
539
545
|
// Apply first/last visible attributes to the visible buttons
|
|
540
|
-
|
|
541
|
-
.
|
|
542
|
-
.
|
|
543
|
-
|
|
544
|
-
btn.toggleAttribute('last-visible', !this._hasOverflow && index === visibleButtons.length - 1);
|
|
545
|
-
});
|
|
546
|
+
visibleButtons.forEach((btn, index, visibleButtons) => {
|
|
547
|
+
btn.toggleAttribute('first-visible', index === 0);
|
|
548
|
+
btn.toggleAttribute('last-visible', !this._hasOverflow && index === visibleButtons.length - 1);
|
|
549
|
+
});
|
|
546
550
|
}
|
|
547
551
|
|
|
548
552
|
/** @private */
|
|
@@ -761,8 +765,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
761
765
|
*/
|
|
762
766
|
_setFocused(focused) {
|
|
763
767
|
if (focused) {
|
|
764
|
-
const
|
|
765
|
-
const target = this.querySelector(`vaadin-menu-bar-button${selector}`);
|
|
768
|
+
const target = this.__getFocusTarget();
|
|
766
769
|
if (target) {
|
|
767
770
|
this._buttons.forEach((btn) => {
|
|
768
771
|
this._setTabindex(btn, btn === target);
|
|
@@ -776,6 +779,24 @@ export const MenuBarMixin = (superClass) =>
|
|
|
776
779
|
}
|
|
777
780
|
}
|
|
778
781
|
|
|
782
|
+
/** @private */
|
|
783
|
+
__getFocusTarget() {
|
|
784
|
+
// First, check if focus is moving to a visible button
|
|
785
|
+
let target = this._buttons.find((btn) => isElementFocused(btn));
|
|
786
|
+
|
|
787
|
+
if (!target) {
|
|
788
|
+
const selector = this.tabNavigation ? '[focused]' : '[tabindex="0"]';
|
|
789
|
+
// Next, check if there is a button that could be focused but is hidden
|
|
790
|
+
target = this.querySelector(`vaadin-menu-bar-button${selector}`);
|
|
791
|
+
|
|
792
|
+
if (isElementHidden(target)) {
|
|
793
|
+
target = this._buttons[this._getFocusableIndex()];
|
|
794
|
+
}
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
return target;
|
|
798
|
+
}
|
|
799
|
+
|
|
779
800
|
/**
|
|
780
801
|
* @param {!KeyboardEvent} event
|
|
781
802
|
* @private
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/menu-bar",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-menu-bar",
|
|
11
|
-
"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```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
11
|
+
"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```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta2/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```js\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/25.0.0-beta2/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.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/25.0.0-beta2/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta2/#/elements/vaadin-context-menu).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/menu-bar",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-menu-bar",
|
|
19
|
-
"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```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
19
|
+
"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```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta2/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```js\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/25.0.0-beta2/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.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/25.0.0-beta2/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta2/#/elements/vaadin-context-menu).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|