@fluentui/web-components 3.0.0-beta.32 → 3.0.0-beta.34
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/CHANGELOG.md +20 -2
- package/dist/dts/menu/menu.d.ts +55 -39
- package/dist/dts/menu-item/menu-item.d.ts +11 -57
- package/dist/dts/menu-list/menu-list.d.ts +5 -10
- package/dist/esm/menu/menu.js +98 -127
- package/dist/esm/menu/menu.js.map +1 -1
- package/dist/esm/menu/menu.styles.js +22 -8
- package/dist/esm/menu/menu.styles.js.map +1 -1
- package/dist/esm/menu/menu.template.js +3 -10
- package/dist/esm/menu/menu.template.js.map +1 -1
- package/dist/esm/menu-item/menu-item.js +59 -121
- package/dist/esm/menu-item/menu-item.js.map +1 -1
- package/dist/esm/menu-item/menu-item.styles.js +88 -116
- package/dist/esm/menu-item/menu-item.styles.js.map +1 -1
- package/dist/esm/menu-item/menu-item.template.js +17 -47
- package/dist/esm/menu-item/menu-item.template.js.map +1 -1
- package/dist/esm/menu-list/menu-list.js +12 -48
- package/dist/esm/menu-list/menu-list.js.map +1 -1
- package/dist/web-components.d.ts +71 -106
- package/dist/web-components.js +119 -1209
- package/dist/web-components.min.js +337 -334
- package/package.json +5 -3
|
@@ -1,65 +1,35 @@
|
|
|
1
|
-
import { elements, html,
|
|
1
|
+
import { elements, html, slotted } from '@microsoft/fast-element';
|
|
2
2
|
import { staticallyCompose } from '../utils/template-helpers.js';
|
|
3
3
|
import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
|
|
4
4
|
import { MenuItemRole } from './menu-item.js';
|
|
5
|
-
const Checkmark16Filled = html.partial(`<svg
|
|
6
|
-
const chevronRight16Filled = html.partial(`<svg
|
|
5
|
+
const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
|
|
6
|
+
const chevronRight16Filled = html.partial(`<svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
|
|
7
7
|
export function menuItemTemplate(options = {}) {
|
|
8
8
|
return html `
|
|
9
|
-
|
|
10
|
-
aria-haspopup="${x => (x.
|
|
9
|
+
<template
|
|
10
|
+
aria-haspopup="${x => (!!x.submenu ? 'menu' : void 0)}"
|
|
11
11
|
aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
|
|
12
12
|
aria-disabled="${x => x.disabled}"
|
|
13
|
-
aria-expanded="${x => x.
|
|
13
|
+
aria-expanded="${x => (!!x.submenu ? 'false' : void 0)}"
|
|
14
14
|
@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
|
|
15
15
|
@click="${(x, c) => x.handleMenuItemClick(c.event)}"
|
|
16
16
|
@mouseover="${(x, c) => x.handleMouseOver(c.event)}"
|
|
17
17
|
@mouseout="${(x, c) => x.handleMouseOut(c.event)}"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<span part="checkbox" class="checkbox">
|
|
22
|
-
<slot name="checkbox-indicator"> ${staticallyCompose(options.checkboxIndicator)} </slot>
|
|
23
|
-
</span>
|
|
24
|
-
</div>
|
|
25
|
-
`)}
|
|
26
|
-
${when(x => x.role === MenuItemRole.menuitemradio, html `
|
|
27
|
-
<div part="input-container" class="input-container">
|
|
28
|
-
<span part="radio" class="radio">
|
|
29
|
-
<slot name="radio-indicator"> ${staticallyCompose(options.radioIndicator)} </slot>
|
|
30
|
-
</span>
|
|
31
|
-
</div>
|
|
32
|
-
`)}
|
|
33
|
-
</div>
|
|
18
|
+
@toggle="${(x, c) => x.toggleHandler(c.event)}"
|
|
19
|
+
>
|
|
20
|
+
<slot name="indicator"> ${staticallyCompose(options.indicator)} </slot>
|
|
34
21
|
${startSlotTemplate(options)}
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
</
|
|
22
|
+
<div part="content" class="content">
|
|
23
|
+
<slot></slot>
|
|
24
|
+
</div>
|
|
38
25
|
${endSlotTemplate(options)}
|
|
39
|
-
${
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<slot name="expand-collapse-indicator"> ${staticallyCompose(options.expandCollapseGlyph)} </slot>
|
|
43
|
-
</span>
|
|
44
|
-
</div>
|
|
45
|
-
`)}
|
|
46
|
-
<span
|
|
47
|
-
?hidden="${x => !x.expanded}"
|
|
48
|
-
class="submenu-container"
|
|
49
|
-
part="submenu-container"
|
|
50
|
-
${ref('submenuContainer')}
|
|
51
|
-
>
|
|
52
|
-
<slot name="submenu" ${slotted({
|
|
53
|
-
property: 'slottedSubmenu',
|
|
54
|
-
filter: elements("[role='menu']"),
|
|
55
|
-
})}></slot>
|
|
56
|
-
</span>
|
|
57
|
-
</template>
|
|
26
|
+
<slot name="submenu-glyph"> ${staticallyCompose(options.submenuGlyph)} </slot>
|
|
27
|
+
<slot name="submenu" ${slotted({ property: 'slottedSubmenu', filter: elements("[role='menu']") })}></slot>
|
|
28
|
+
</template>
|
|
58
29
|
`;
|
|
59
30
|
}
|
|
60
31
|
export const template = menuItemTemplate({
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
radioIndicator: Checkmark16Filled,
|
|
32
|
+
indicator: Checkmark16Filled,
|
|
33
|
+
submenuGlyph: chevronRight16Filled,
|
|
64
34
|
});
|
|
65
35
|
//# sourceMappingURL=menu-item.template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.template.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-item.template.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CACpC,8TAA8T,CAC/T,CAAC;AACF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CACvC,wTAAwT,CACzT,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAqB,UAA2B,EAAE;IAChF,OAAO,IAAI,CAAG;;uBAEO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;sBACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;uBAC3D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;kBAC1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAsB,CAAC;gBAC7D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAClD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;mBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;iBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAoB,CAAC;;gCAElC,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC;QAC5D,iBAAiB,CAAC,OAAO,CAAC;;;;QAI1B,eAAe,CAAC,OAAO,CAAC;oCACI,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;6BAC9C,OAAO,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;;GAEpG,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,SAAS,EAAE,iBAAiB;IAC5B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC"}
|
|
@@ -14,7 +14,6 @@ import { MenuItemRole } from '../menu-item/menu-item.options.js';
|
|
|
14
14
|
export class MenuList extends FASTElement {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
|
-
this.expandedItem = null;
|
|
18
17
|
/**
|
|
19
18
|
* The index of the focusable element in the items array
|
|
20
19
|
* defaults to -1
|
|
@@ -34,7 +33,6 @@ export class MenuList extends FASTElement {
|
|
|
34
33
|
*/
|
|
35
34
|
this.handleFocusOut = (e) => {
|
|
36
35
|
if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
|
|
37
|
-
this.collapseExpandedItem();
|
|
38
36
|
// find our first focusable element
|
|
39
37
|
const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
|
|
40
38
|
// set the current focus index's tabindex to -1
|
|
@@ -53,34 +51,10 @@ export class MenuList extends FASTElement {
|
|
|
53
51
|
targetItem.setAttribute('tabindex', '0');
|
|
54
52
|
}
|
|
55
53
|
};
|
|
56
|
-
this.handleExpandedChanged = (e) => {
|
|
57
|
-
if (e.defaultPrevented ||
|
|
58
|
-
e.target === null ||
|
|
59
|
-
this.menuItems === undefined ||
|
|
60
|
-
this.menuItems.indexOf(e.target) < 0) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
e.preventDefault();
|
|
64
|
-
const changedItem = e.target;
|
|
65
|
-
// closing an expanded item without opening another
|
|
66
|
-
if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
|
|
67
|
-
this.expandedItem = null;
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
if (changedItem.expanded) {
|
|
71
|
-
if (this.expandedItem !== null && this.expandedItem !== changedItem) {
|
|
72
|
-
this.expandedItem.expanded = false;
|
|
73
|
-
}
|
|
74
|
-
this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
|
|
75
|
-
this.expandedItem = changedItem;
|
|
76
|
-
this.focusIndex = this.menuItems.indexOf(changedItem);
|
|
77
|
-
changedItem.setAttribute('tabindex', '0');
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
54
|
/**
|
|
81
|
-
*
|
|
55
|
+
* Handle change from child MenuItem element and set radio group behavior
|
|
82
56
|
*/
|
|
83
|
-
this.
|
|
57
|
+
this.changedMenuItemHandler = (e) => {
|
|
84
58
|
if (this.menuItems === undefined) {
|
|
85
59
|
return;
|
|
86
60
|
}
|
|
@@ -145,7 +119,7 @@ export class MenuList extends FASTElement {
|
|
|
145
119
|
// connect before setting/checking their props/attributes
|
|
146
120
|
this.setItems();
|
|
147
121
|
});
|
|
148
|
-
this.addEventListener('change', this.
|
|
122
|
+
this.addEventListener('change', this.changedMenuItemHandler);
|
|
149
123
|
}
|
|
150
124
|
/**
|
|
151
125
|
* @internal
|
|
@@ -154,7 +128,7 @@ export class MenuList extends FASTElement {
|
|
|
154
128
|
super.disconnectedCallback();
|
|
155
129
|
this.removeItemListeners();
|
|
156
130
|
this.menuItems = undefined;
|
|
157
|
-
this.removeEventListener('change', this.
|
|
131
|
+
this.removeEventListener('change', this.changedMenuItemHandler);
|
|
158
132
|
}
|
|
159
133
|
/**
|
|
160
134
|
* Focuses the first item in the menu.
|
|
@@ -164,17 +138,6 @@ export class MenuList extends FASTElement {
|
|
|
164
138
|
focus() {
|
|
165
139
|
this.setFocus(0, 1);
|
|
166
140
|
}
|
|
167
|
-
/**
|
|
168
|
-
* Collapses any expanded menu items.
|
|
169
|
-
*
|
|
170
|
-
* @public
|
|
171
|
-
*/
|
|
172
|
-
collapseExpandedItem() {
|
|
173
|
-
if (this.expandedItem !== null) {
|
|
174
|
-
this.expandedItem.expanded = false;
|
|
175
|
-
this.expandedItem = null;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
141
|
/**
|
|
179
142
|
* @internal
|
|
180
143
|
*/
|
|
@@ -207,7 +170,6 @@ export class MenuList extends FASTElement {
|
|
|
207
170
|
removeItemListeners(items = this.items) {
|
|
208
171
|
items.forEach(item => {
|
|
209
172
|
item.removeEventListener('focus', this.handleItemFocus);
|
|
210
|
-
item.removeEventListener('expanded-changed', this.handleExpandedChanged);
|
|
211
173
|
Observable.getNotifier(item).unsubscribe(this, 'hidden');
|
|
212
174
|
});
|
|
213
175
|
}
|
|
@@ -233,7 +195,6 @@ export class MenuList extends FASTElement {
|
|
|
233
195
|
}
|
|
234
196
|
menuItems.forEach((item, index) => {
|
|
235
197
|
item.setAttribute('tabindex', index === 0 ? '0' : '-1');
|
|
236
|
-
item.addEventListener('expanded-change', this.handleExpandedChanged);
|
|
237
198
|
item.addEventListener('focus', this.handleItemFocus);
|
|
238
199
|
});
|
|
239
200
|
/**
|
|
@@ -242,16 +203,19 @@ export class MenuList extends FASTElement {
|
|
|
242
203
|
* used to set the indent of the element's start slot content.
|
|
243
204
|
*/
|
|
244
205
|
const filteredMenuListItems = (_a = this.menuItems) === null || _a === void 0 ? void 0 : _a.filter(this.isMenuItemElement);
|
|
245
|
-
filteredMenuListItems === null || filteredMenuListItems === void 0 ? void 0 : filteredMenuListItems.
|
|
246
|
-
const
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
206
|
+
const indent = filteredMenuListItems === null || filteredMenuListItems === void 0 ? void 0 : filteredMenuListItems.reduce((accum, current) => {
|
|
207
|
+
const elementValue = MenuList.elementIndent(current);
|
|
208
|
+
return Math.max(accum, elementValue);
|
|
209
|
+
}, 0);
|
|
210
|
+
filteredMenuListItems === null || filteredMenuListItems === void 0 ? void 0 : filteredMenuListItems.forEach((item) => {
|
|
250
211
|
if (item instanceof MenuItem) {
|
|
251
212
|
item.setAttribute('data-indent', `${indent}`);
|
|
252
213
|
}
|
|
253
214
|
});
|
|
254
215
|
}
|
|
216
|
+
/**
|
|
217
|
+
* Method for Observable changes to the hidden attribute of child elements
|
|
218
|
+
*/
|
|
255
219
|
handleChange(source, propertyName) {
|
|
256
220
|
if (propertyName === 'hidden') {
|
|
257
221
|
this.setItems();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAEzG,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;
|
|
1
|
+
{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.ts"],"names":[],"mappings":"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"}
|
package/dist/web-components.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/// <reference types="web" />
|
|
2
|
+
|
|
1
3
|
import type { Constructable } from '@microsoft/fast-element';
|
|
2
4
|
import { CSSDirective } from '@microsoft/fast-element';
|
|
3
5
|
import { Direction } from '@microsoft/fast-web-utilities';
|
|
@@ -5538,7 +5540,42 @@ export declare class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
|
|
|
5538
5540
|
export declare type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
|
|
5539
5541
|
|
|
5540
5542
|
/**
|
|
5541
|
-
*
|
|
5543
|
+
* A Menu component that provides a customizable menu element.
|
|
5544
|
+
* @class Menu
|
|
5545
|
+
* @extends FASTElement
|
|
5546
|
+
*
|
|
5547
|
+
* @attr open-on-hover - Determines if the menu should open on hover.
|
|
5548
|
+
* @attr open-on-context - Determines if the menu should open on right click.
|
|
5549
|
+
* @attr close-on-scroll - Determines if the menu should close on scroll.
|
|
5550
|
+
* @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
|
|
5551
|
+
*
|
|
5552
|
+
* @cssproperty --menu-max-height - The max-height of the menu.
|
|
5553
|
+
*
|
|
5554
|
+
* @slot trigger - Slot for the trigger elements.
|
|
5555
|
+
* @slot - Default slot for the menu list.
|
|
5556
|
+
*
|
|
5557
|
+
* @method connectedCallback - Called when the element is connected to the DOM. Sets up the component.
|
|
5558
|
+
* @method disconnectedCallback - Called when the element is disconnected from the DOM. Removes event listeners.
|
|
5559
|
+
* @method setComponent - Sets the component state.
|
|
5560
|
+
* @method toggleMenu - Toggles the open state of the menu.
|
|
5561
|
+
* @method closeMenu - Closes the menu.
|
|
5562
|
+
* @method openMenu - Opens the menu.
|
|
5563
|
+
* @method focusMenuList - Focuses on the menu list.
|
|
5564
|
+
* @method focusTrigger - Focuses on the menu trigger.
|
|
5565
|
+
* @method openOnHoverChanged - Called whenever the 'openOnHover' property changes.
|
|
5566
|
+
* @method persistOnItemClickChanged - Called whenever the 'persistOnItemClick' property changes.
|
|
5567
|
+
* @method openOnContextChanged - Called whenever the 'openOnContext' property changes.
|
|
5568
|
+
* @method closeOnScrollChanged - Called whenever the 'closeOnScroll' property changes.
|
|
5569
|
+
* @method addListeners - Adds event listeners.
|
|
5570
|
+
* @method removeListeners - Removes event listeners.
|
|
5571
|
+
* @method menuKeydownHandler - Handles keyboard interaction for the menu.
|
|
5572
|
+
* @method triggerKeydownHandler - Handles keyboard interaction for the trigger.
|
|
5573
|
+
* @method documentClickHandler - Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
|
|
5574
|
+
*
|
|
5575
|
+
* @summary The Menu component functions as a customizable menu element.
|
|
5576
|
+
*
|
|
5577
|
+
* @tag fluent-menu
|
|
5578
|
+
*
|
|
5542
5579
|
* @public
|
|
5543
5580
|
*/
|
|
5544
5581
|
export declare class Menu extends FASTElement {
|
|
@@ -5562,11 +5599,6 @@ export declare class Menu extends FASTElement {
|
|
|
5562
5599
|
* @public
|
|
5563
5600
|
*/
|
|
5564
5601
|
persistOnItemClick?: boolean;
|
|
5565
|
-
/**
|
|
5566
|
-
* Defines whether the menu is open or not.
|
|
5567
|
-
* @public
|
|
5568
|
-
*/
|
|
5569
|
-
open: boolean;
|
|
5570
5602
|
/**
|
|
5571
5603
|
* Holds the slotted menu list.
|
|
5572
5604
|
* @public
|
|
@@ -5578,25 +5610,20 @@ export declare class Menu extends FASTElement {
|
|
|
5578
5610
|
*/
|
|
5579
5611
|
slottedTriggers: HTMLElement[];
|
|
5580
5612
|
/**
|
|
5581
|
-
*
|
|
5613
|
+
* Defines whether the menu is open or not.
|
|
5582
5614
|
* @internal
|
|
5583
5615
|
*/
|
|
5584
|
-
|
|
5616
|
+
private _open;
|
|
5585
5617
|
/**
|
|
5586
5618
|
* The trigger element of the menu.
|
|
5587
5619
|
* @internal
|
|
5588
5620
|
*/
|
|
5589
5621
|
private _trigger?;
|
|
5590
5622
|
/**
|
|
5591
|
-
* The menu list element of the menu.
|
|
5623
|
+
* The menu list element of the menu which has the popover behavior.
|
|
5592
5624
|
* @internal
|
|
5593
5625
|
*/
|
|
5594
5626
|
private _menuList?;
|
|
5595
|
-
/**
|
|
5596
|
-
* Holds a reference to a function that is used to cleanup resources.
|
|
5597
|
-
* @public
|
|
5598
|
-
*/
|
|
5599
|
-
cleanup?: () => void;
|
|
5600
5627
|
/**
|
|
5601
5628
|
* Called when the element is connected to the DOM.
|
|
5602
5629
|
* Sets up the component.
|
|
@@ -5641,16 +5668,12 @@ export declare class Menu extends FASTElement {
|
|
|
5641
5668
|
*/
|
|
5642
5669
|
focusTrigger(): void;
|
|
5643
5670
|
/**
|
|
5644
|
-
*
|
|
5645
|
-
* Updates the 'aria-expanded' attribute and sets the positioning of the menu.
|
|
5646
|
-
* Sets menu list position
|
|
5647
|
-
* emits openChanged event
|
|
5648
|
-
*
|
|
5649
|
-
* @param oldValue - The previous value of 'open'.
|
|
5650
|
-
* @param newValue - The new value of 'open'.
|
|
5671
|
+
* Handles the 'toggle' event on the popover.
|
|
5651
5672
|
* @public
|
|
5673
|
+
* @param e - the event
|
|
5674
|
+
* @returns void
|
|
5652
5675
|
*/
|
|
5653
|
-
|
|
5676
|
+
toggleHandler: (e: Event | ToggleEvent) => void;
|
|
5654
5677
|
/**
|
|
5655
5678
|
* Called whenever the 'openOnHover' property changes.
|
|
5656
5679
|
* Adds or removes a 'mouseover' event listener to the trigger based on the new value.
|
|
@@ -5684,27 +5707,21 @@ export declare class Menu extends FASTElement {
|
|
|
5684
5707
|
* @param newValue - The new value of 'closeOnScroll'.
|
|
5685
5708
|
*/
|
|
5686
5709
|
closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
|
|
5687
|
-
/**
|
|
5688
|
-
* The task to set the positioning of the menu.
|
|
5689
|
-
* @internal
|
|
5690
|
-
*/
|
|
5691
|
-
protected setPositioningTask: () => void;
|
|
5692
|
-
/**
|
|
5693
|
-
* Sets the positioning of the menu.
|
|
5694
|
-
* @internal
|
|
5695
|
-
*/
|
|
5696
|
-
protected setPositioning(): void;
|
|
5697
5710
|
/**
|
|
5698
5711
|
* Adds event listeners.
|
|
5699
|
-
* Adds click and keydown event listeners to the trigger
|
|
5712
|
+
* Adds click and keydown event listeners to the trigger.
|
|
5713
|
+
* Adds a 'toggle' event listener to the menu list.
|
|
5700
5714
|
* If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
|
|
5701
|
-
*
|
|
5715
|
+
* If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
|
|
5716
|
+
* @internal
|
|
5702
5717
|
*/
|
|
5703
5718
|
private addListeners;
|
|
5704
5719
|
/**
|
|
5705
5720
|
* Removes event listeners.
|
|
5706
|
-
* Removes click and keydown event listeners from the trigger
|
|
5721
|
+
* Removes click and keydown event listeners from the trigger.
|
|
5722
|
+
* Also removes toggle event listener from the menu list.
|
|
5707
5723
|
* Also removes 'mouseover' event listeners from the trigger.
|
|
5724
|
+
* Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
|
|
5708
5725
|
* @internal
|
|
5709
5726
|
*/
|
|
5710
5727
|
private removeListeners;
|
|
@@ -5715,7 +5732,7 @@ export declare class Menu extends FASTElement {
|
|
|
5715
5732
|
* @param e - the keyboard event
|
|
5716
5733
|
* @public
|
|
5717
5734
|
*/
|
|
5718
|
-
|
|
5735
|
+
menuKeydownHandler(e: KeyboardEvent): boolean | void;
|
|
5719
5736
|
/**
|
|
5720
5737
|
* Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
|
|
5721
5738
|
* is open, focuses on the menu list.
|
|
@@ -5723,13 +5740,13 @@ export declare class Menu extends FASTElement {
|
|
|
5723
5740
|
* @param e - the keyboard event
|
|
5724
5741
|
* @public
|
|
5725
5742
|
*/
|
|
5726
|
-
|
|
5743
|
+
triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
|
|
5727
5744
|
/**
|
|
5728
|
-
* Handles document click events to close
|
|
5745
|
+
* Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
|
|
5729
5746
|
* @internal
|
|
5730
5747
|
* @param e - The event triggered on document click.
|
|
5731
5748
|
*/
|
|
5732
|
-
private
|
|
5749
|
+
private documentClickHandler;
|
|
5733
5750
|
}
|
|
5734
5751
|
|
|
5735
5752
|
/**
|
|
@@ -5814,21 +5831,13 @@ export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
|
|
|
5814
5831
|
* A Switch Custom HTML Element.
|
|
5815
5832
|
* Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
|
|
5816
5833
|
*
|
|
5817
|
-
* @slot
|
|
5818
|
-
* @slot radio-indicator - The radio indicator
|
|
5834
|
+
* @slot indicator - The checkbox or radio indicator
|
|
5819
5835
|
* @slot start - Content which can be provided before the menu item content
|
|
5820
|
-
* @slot end - Content which can be provided after the menu item content
|
|
5821
5836
|
* @slot - The default slot for menu item content
|
|
5822
|
-
* @slot
|
|
5837
|
+
* @slot end - Content which can be provided after the menu item content
|
|
5838
|
+
* @slot submenu-glyph - The submenu expand/collapse indicator
|
|
5823
5839
|
* @slot submenu - Used to nest menu's within menu items
|
|
5824
|
-
* @csspart input-container - The element representing the visual checked or radio indicator
|
|
5825
|
-
* @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
|
|
5826
|
-
* @csspart radio - The element wrapping the `menuitemradio` indicator
|
|
5827
5840
|
* @csspart content - The element wrapping the menu item content
|
|
5828
|
-
* @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
|
|
5829
|
-
* @csspart expand-collapse - The expand/collapse element
|
|
5830
|
-
* @csspart submenu-region - The container for the submenu, used for positioning
|
|
5831
|
-
* @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
|
|
5832
5841
|
* @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
|
|
5833
5842
|
*
|
|
5834
5843
|
* @public
|
|
@@ -5842,15 +5851,6 @@ export declare class MenuItem extends FASTElement {
|
|
|
5842
5851
|
* HTML Attribute: disabled
|
|
5843
5852
|
*/
|
|
5844
5853
|
disabled: boolean;
|
|
5845
|
-
/**
|
|
5846
|
-
* The expanded state of the element.
|
|
5847
|
-
*
|
|
5848
|
-
* @public
|
|
5849
|
-
* @remarks
|
|
5850
|
-
* HTML Attribute: expanded
|
|
5851
|
-
*/
|
|
5852
|
-
expanded: boolean;
|
|
5853
|
-
protected expandedChanged(prev: boolean | undefined, next: boolean): void;
|
|
5854
5854
|
/**
|
|
5855
5855
|
* The role of the element.
|
|
5856
5856
|
*
|
|
@@ -5859,12 +5859,6 @@ export declare class MenuItem extends FASTElement {
|
|
|
5859
5859
|
* HTML Attribute: role
|
|
5860
5860
|
*/
|
|
5861
5861
|
role: MenuItemRole;
|
|
5862
|
-
/**
|
|
5863
|
-
* Cleanup function for the submenu positioner.
|
|
5864
|
-
*
|
|
5865
|
-
* @public
|
|
5866
|
-
*/
|
|
5867
|
-
cleanup: () => void;
|
|
5868
5862
|
/**
|
|
5869
5863
|
* The checked value of the element.
|
|
5870
5864
|
*
|
|
@@ -5888,31 +5882,16 @@ export declare class MenuItem extends FASTElement {
|
|
|
5888
5882
|
* @internal
|
|
5889
5883
|
*/
|
|
5890
5884
|
slottedSubmenu: HTMLElement[];
|
|
5891
|
-
/**
|
|
5892
|
-
* @internal
|
|
5893
|
-
*/
|
|
5894
|
-
get hasSubmenu(): boolean;
|
|
5895
5885
|
/**
|
|
5896
5886
|
* Sets the submenu and updates its position.
|
|
5897
5887
|
*
|
|
5898
5888
|
* @internal
|
|
5899
5889
|
*/
|
|
5900
5890
|
protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
|
|
5901
|
-
/**
|
|
5902
|
-
* The container for the submenu.
|
|
5903
|
-
*
|
|
5904
|
-
* @internal
|
|
5905
|
-
*/
|
|
5906
|
-
submenuContainer: HTMLDivElement;
|
|
5907
5891
|
/**
|
|
5908
5892
|
* @internal
|
|
5909
5893
|
*/
|
|
5910
5894
|
submenu: HTMLElement | undefined;
|
|
5911
|
-
private focusSubmenuOnLoad;
|
|
5912
|
-
/**
|
|
5913
|
-
* @internal
|
|
5914
|
-
*/
|
|
5915
|
-
disconnectedCallback(): void;
|
|
5916
5895
|
/**
|
|
5917
5896
|
* @internal
|
|
5918
5897
|
*/
|
|
@@ -5921,10 +5900,6 @@ export declare class MenuItem extends FASTElement {
|
|
|
5921
5900
|
* @internal
|
|
5922
5901
|
*/
|
|
5923
5902
|
handleMenuItemClick: (e: MouseEvent) => boolean;
|
|
5924
|
-
/**
|
|
5925
|
-
* @internal
|
|
5926
|
-
*/
|
|
5927
|
-
submenuLoaded: () => void;
|
|
5928
5903
|
/**
|
|
5929
5904
|
* @internal
|
|
5930
5905
|
*/
|
|
@@ -5934,23 +5909,19 @@ export declare class MenuItem extends FASTElement {
|
|
|
5934
5909
|
*/
|
|
5935
5910
|
handleMouseOut: (e: MouseEvent) => boolean;
|
|
5936
5911
|
/**
|
|
5912
|
+
* Setup required ARIA on open/close
|
|
5937
5913
|
* @internal
|
|
5938
5914
|
*/
|
|
5939
|
-
|
|
5940
|
-
/**
|
|
5941
|
-
* @internal
|
|
5942
|
-
*/
|
|
5943
|
-
private expandAndFocus;
|
|
5915
|
+
toggleHandler: (e: ToggleEvent | Event) => void;
|
|
5944
5916
|
/**
|
|
5945
5917
|
* @internal
|
|
5946
5918
|
*/
|
|
5947
5919
|
private invoke;
|
|
5948
5920
|
/**
|
|
5949
|
-
*
|
|
5950
|
-
*
|
|
5951
|
-
* @public
|
|
5921
|
+
* Set fallback position of menu on open when CSS anchor not supported
|
|
5922
|
+
* @internal
|
|
5952
5923
|
*/
|
|
5953
|
-
|
|
5924
|
+
setSubmenuPosition: () => void;
|
|
5954
5925
|
}
|
|
5955
5926
|
|
|
5956
5927
|
/**
|
|
@@ -5976,9 +5947,8 @@ export declare const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
|
|
|
5976
5947
|
* @public
|
|
5977
5948
|
*/
|
|
5978
5949
|
export declare type MenuItemOptions = StartEndOptions<MenuItem> & {
|
|
5979
|
-
|
|
5980
|
-
|
|
5981
|
-
radioIndicator?: StaticallyComposableHTML<MenuItem>;
|
|
5950
|
+
indicator?: StaticallyComposableHTML<MenuItem>;
|
|
5951
|
+
submenuGlyph?: StaticallyComposableHTML<MenuItem>;
|
|
5982
5952
|
};
|
|
5983
5953
|
|
|
5984
5954
|
/**
|
|
@@ -6028,7 +5998,6 @@ export declare class MenuList extends FASTElement {
|
|
|
6028
5998
|
items: HTMLElement[];
|
|
6029
5999
|
protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
|
|
6030
6000
|
protected menuItems: Element[] | undefined;
|
|
6031
|
-
private expandedItem;
|
|
6032
6001
|
/**
|
|
6033
6002
|
* The index of the focusable element in the items array
|
|
6034
6003
|
* defaults to -1
|
|
@@ -6053,12 +6022,6 @@ export declare class MenuList extends FASTElement {
|
|
|
6053
6022
|
* @public
|
|
6054
6023
|
*/
|
|
6055
6024
|
focus(): void;
|
|
6056
|
-
/**
|
|
6057
|
-
* Collapses any expanded menu items.
|
|
6058
|
-
*
|
|
6059
|
-
* @public
|
|
6060
|
-
*/
|
|
6061
|
-
collapseExpandedItem(): void;
|
|
6062
6025
|
/**
|
|
6063
6026
|
* @internal
|
|
6064
6027
|
*/
|
|
@@ -6069,15 +6032,17 @@ export declare class MenuList extends FASTElement {
|
|
|
6069
6032
|
*/
|
|
6070
6033
|
handleFocusOut: (e: FocusEvent) => void;
|
|
6071
6034
|
private handleItemFocus;
|
|
6072
|
-
private handleExpandedChanged;
|
|
6073
6035
|
private removeItemListeners;
|
|
6074
6036
|
private static elementIndent;
|
|
6075
6037
|
protected setItems(): void;
|
|
6038
|
+
/**
|
|
6039
|
+
* Method for Observable changes to the hidden attribute of child elements
|
|
6040
|
+
*/
|
|
6076
6041
|
handleChange(source: any, propertyName: string): void;
|
|
6077
6042
|
/**
|
|
6078
|
-
*
|
|
6043
|
+
* Handle change from child MenuItem element and set radio group behavior
|
|
6079
6044
|
*/
|
|
6080
|
-
private
|
|
6045
|
+
private changedMenuItemHandler;
|
|
6081
6046
|
/**
|
|
6082
6047
|
* check if the item is a menu item
|
|
6083
6048
|
*/
|