@ni/nimble-components 8.5.0 → 8.6.0
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/dist/esm/menu-button/index.d.ts +50 -0
- package/dist/esm/menu-button/index.js +154 -0
- package/dist/esm/menu-button/index.js.map +1 -0
- package/dist/esm/menu-button/styles.d.ts +1 -0
- package/dist/esm/menu-button/styles.js +29 -0
- package/dist/esm/menu-button/styles.js.map +1 -0
- package/dist/esm/menu-button/template.d.ts +2 -0
- package/dist/esm/menu-button/template.js +48 -0
- package/dist/esm/menu-button/template.js.map +1 -0
- package/dist/esm/menu-button/types.d.ts +15 -0
- package/dist/esm/menu-button/types.js +11 -0
- package/dist/esm/menu-button/types.js.map +1 -0
- package/dist/esm/nimble-components/src/menu-button/index.d.ts +50 -0
- package/dist/esm/nimble-components/src/menu-button/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/menu-button/template.d.ts +2 -0
- package/dist/esm/nimble-components/src/menu-button/types.d.ts +15 -0
- package/package.json +1 -1
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
import { ButtonAppearance } from '../button/types';
|
|
3
|
+
import type { ToggleButton } from '../toggle-button';
|
|
4
|
+
import { MenuButtonPosition } from './types';
|
|
5
|
+
import type { IButton } from '../patterns/button/types';
|
|
6
|
+
import type { AnchoredRegion } from '../anchored-region';
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'nimble-menu-button': MenuButton;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* A nimble-styled menu button control.
|
|
14
|
+
*/
|
|
15
|
+
export declare class MenuButton extends FoundationElement implements IButton {
|
|
16
|
+
appearance: ButtonAppearance;
|
|
17
|
+
disabled: boolean;
|
|
18
|
+
contentHidden: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Specifies whether or not the menu is open.
|
|
21
|
+
*/
|
|
22
|
+
open: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Configures where the menu should be placed relative to the button that opens the menu.
|
|
25
|
+
*/
|
|
26
|
+
position: MenuButtonPosition;
|
|
27
|
+
/** @internal */
|
|
28
|
+
readonly toggleButton: ToggleButton | undefined;
|
|
29
|
+
/** @internal */
|
|
30
|
+
readonly region: AnchoredRegion | undefined;
|
|
31
|
+
/** @internal */
|
|
32
|
+
readonly slottedMenus: HTMLElement[] | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Used to maintain the internal state of whether the last menu item should be focused instead
|
|
35
|
+
* of the first menu item the next time the menu is opened.
|
|
36
|
+
*/
|
|
37
|
+
private focusLastItemWhenOpened;
|
|
38
|
+
toggleButtonChanged(_prev: ToggleButton | undefined, _next: ToggleButton | undefined): void;
|
|
39
|
+
regionChanged(_prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
|
|
40
|
+
openChanged(_prev: boolean | undefined, _next: boolean): void;
|
|
41
|
+
regionLoadedHandler(): void;
|
|
42
|
+
focusoutHandler(e: FocusEvent): boolean;
|
|
43
|
+
toggleButtonCheckedChangeHandler(e: Event): boolean;
|
|
44
|
+
toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
|
|
45
|
+
menuChangeHandler(): void;
|
|
46
|
+
menuKeyDownHandler(e: KeyboardEvent): boolean;
|
|
47
|
+
private get menu();
|
|
48
|
+
private focusMenu;
|
|
49
|
+
private focusLastMenuItem;
|
|
50
|
+
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { attr, observable } from '@microsoft/fast-element';
|
|
3
|
+
import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
|
|
4
|
+
import { keyArrowDown, keyArrowUp, keyEscape } from '@microsoft/fast-web-utilities';
|
|
5
|
+
import { ButtonAppearance } from '../button/types';
|
|
6
|
+
import { styles } from './styles';
|
|
7
|
+
import { template } from './template';
|
|
8
|
+
import { MenuButtonPosition } from './types';
|
|
9
|
+
/**
|
|
10
|
+
* A nimble-styled menu button control.
|
|
11
|
+
*/
|
|
12
|
+
export class MenuButton extends FoundationElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
this.appearance = ButtonAppearance.Outline;
|
|
16
|
+
this.disabled = false;
|
|
17
|
+
this.contentHidden = false;
|
|
18
|
+
/**
|
|
19
|
+
* Specifies whether or not the menu is open.
|
|
20
|
+
*/
|
|
21
|
+
this.open = false;
|
|
22
|
+
/**
|
|
23
|
+
* Configures where the menu should be placed relative to the button that opens the menu.
|
|
24
|
+
*/
|
|
25
|
+
this.position = MenuButtonPosition.auto;
|
|
26
|
+
/**
|
|
27
|
+
* Used to maintain the internal state of whether the last menu item should be focused instead
|
|
28
|
+
* of the first menu item the next time the menu is opened.
|
|
29
|
+
*/
|
|
30
|
+
this.focusLastItemWhenOpened = false;
|
|
31
|
+
}
|
|
32
|
+
toggleButtonChanged(_prev, _next) {
|
|
33
|
+
if (this.region && this.toggleButton) {
|
|
34
|
+
this.region.anchorElement = this.toggleButton;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
regionChanged(_prev, _next) {
|
|
38
|
+
if (this.region && this.toggleButton) {
|
|
39
|
+
this.region.anchorElement = this.toggleButton;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
openChanged(_prev, _next) {
|
|
43
|
+
if (this.toggleButton) {
|
|
44
|
+
this.toggleButton.checked = this.open;
|
|
45
|
+
}
|
|
46
|
+
if (!this.open) {
|
|
47
|
+
// Only fire an event here if the menu is changing to being closed. Otherwise,
|
|
48
|
+
// wait until the menu is actually opened before firing the event.
|
|
49
|
+
this.$emit('open-change');
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
regionLoadedHandler() {
|
|
53
|
+
if (this.focusLastItemWhenOpened) {
|
|
54
|
+
this.focusLastMenuItem();
|
|
55
|
+
this.focusLastItemWhenOpened = false;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
this.focusMenu();
|
|
59
|
+
}
|
|
60
|
+
this.$emit('open-change');
|
|
61
|
+
}
|
|
62
|
+
focusoutHandler(e) {
|
|
63
|
+
if (!this.open) {
|
|
64
|
+
return true;
|
|
65
|
+
}
|
|
66
|
+
const focusTarget = e.relatedTarget;
|
|
67
|
+
if (!this.contains(focusTarget)) {
|
|
68
|
+
this.open = false;
|
|
69
|
+
return false;
|
|
70
|
+
}
|
|
71
|
+
return true;
|
|
72
|
+
}
|
|
73
|
+
toggleButtonCheckedChangeHandler(e) {
|
|
74
|
+
this.open = this.toggleButton.checked;
|
|
75
|
+
// Don't bubble the 'change' event from the toggle button because
|
|
76
|
+
// the menu button has its own 'open-change' event.
|
|
77
|
+
e.stopPropagation();
|
|
78
|
+
return false;
|
|
79
|
+
}
|
|
80
|
+
toggleButtonKeyDownHandler(e) {
|
|
81
|
+
switch (e.key) {
|
|
82
|
+
case keyArrowUp:
|
|
83
|
+
this.focusLastItemWhenOpened = true;
|
|
84
|
+
this.open = true;
|
|
85
|
+
return false;
|
|
86
|
+
case keyArrowDown:
|
|
87
|
+
this.open = true;
|
|
88
|
+
return false;
|
|
89
|
+
default:
|
|
90
|
+
return true;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
menuChangeHandler() {
|
|
94
|
+
this.open = false;
|
|
95
|
+
this.toggleButton.focus();
|
|
96
|
+
}
|
|
97
|
+
menuKeyDownHandler(e) {
|
|
98
|
+
switch (e.key) {
|
|
99
|
+
case keyEscape:
|
|
100
|
+
this.open = false;
|
|
101
|
+
this.toggleButton.focus();
|
|
102
|
+
return false;
|
|
103
|
+
default:
|
|
104
|
+
return true;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
get menu() {
|
|
108
|
+
return this.slottedMenus?.length ? this.slottedMenus[0] : undefined;
|
|
109
|
+
}
|
|
110
|
+
focusMenu() {
|
|
111
|
+
this.menu?.focus();
|
|
112
|
+
}
|
|
113
|
+
focusLastMenuItem() {
|
|
114
|
+
const menuItems = this.menu?.querySelectorAll('[role=menuitem]');
|
|
115
|
+
if (menuItems?.length) {
|
|
116
|
+
const lastMenuItem = menuItems[menuItems.length - 1];
|
|
117
|
+
lastMenuItem.focus();
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
__decorate([
|
|
122
|
+
attr
|
|
123
|
+
], MenuButton.prototype, "appearance", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
attr({ mode: 'boolean' })
|
|
126
|
+
], MenuButton.prototype, "disabled", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
attr({ attribute: 'content-hidden', mode: 'boolean' })
|
|
129
|
+
], MenuButton.prototype, "contentHidden", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
attr({ mode: 'boolean' })
|
|
132
|
+
], MenuButton.prototype, "open", void 0);
|
|
133
|
+
__decorate([
|
|
134
|
+
attr({ attribute: 'position' })
|
|
135
|
+
], MenuButton.prototype, "position", void 0);
|
|
136
|
+
__decorate([
|
|
137
|
+
observable
|
|
138
|
+
], MenuButton.prototype, "toggleButton", void 0);
|
|
139
|
+
__decorate([
|
|
140
|
+
observable
|
|
141
|
+
], MenuButton.prototype, "region", void 0);
|
|
142
|
+
__decorate([
|
|
143
|
+
observable
|
|
144
|
+
], MenuButton.prototype, "slottedMenus", void 0);
|
|
145
|
+
const nimbleMenuButton = MenuButton.compose({
|
|
146
|
+
baseName: 'menu-button',
|
|
147
|
+
template,
|
|
148
|
+
styles,
|
|
149
|
+
shadowOptions: {
|
|
150
|
+
delegatesFocus: true
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
|
|
154
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { display } from '@microsoft/fast-foundation';
|
|
3
|
+
import { controlHeight, smallPadding } from '../theme-provider/design-tokens';
|
|
4
|
+
export const styles = css `
|
|
5
|
+
${display('inline-block')}
|
|
6
|
+
|
|
7
|
+
:host {
|
|
8
|
+
height: ${controlHeight};
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[part='button'] {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[part='start'] {
|
|
17
|
+
display: contents;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
[part='end'] {
|
|
21
|
+
display: contents;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
slot[name='menu']::slotted(*) {
|
|
25
|
+
margin-top: ${smallPadding};
|
|
26
|
+
margin-bottom: ${smallPadding};
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
29
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE9E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;kBAGX,aAAa;;;;;;;;;;;;;;;;;sBAiBT,YAAY;yBACT,YAAY;;CAEpC,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { elements, html, ref, slotted, when } from '@microsoft/fast-element';
|
|
2
|
+
// prettier-ignore
|
|
3
|
+
export const template = html `
|
|
4
|
+
<template
|
|
5
|
+
?open="${x => x.open}"
|
|
6
|
+
@focusout="${(x, c) => x.focusoutHandler(c.event)}"
|
|
7
|
+
>
|
|
8
|
+
<nimble-toggle-button
|
|
9
|
+
part="button"
|
|
10
|
+
appearance="${x => x.appearance}"
|
|
11
|
+
content-hidden="${x => x.contentHidden}"
|
|
12
|
+
?checked="${x => x.open}"
|
|
13
|
+
?disabled="${x => x.disabled}"
|
|
14
|
+
aria-haspopup="true"
|
|
15
|
+
aria-expanded="${x => x.open}"
|
|
16
|
+
@change="${(x, c) => x.toggleButtonCheckedChangeHandler(c.event)}"
|
|
17
|
+
@keydown="${(x, c) => x.toggleButtonKeyDownHandler(c.event)}"
|
|
18
|
+
${ref('toggleButton')}
|
|
19
|
+
>
|
|
20
|
+
<span slot="start" part="start">
|
|
21
|
+
<slot name="start"></slot>
|
|
22
|
+
</span>
|
|
23
|
+
<slot></slot>
|
|
24
|
+
<span slot="end" part="end">
|
|
25
|
+
<slot name="end"></slot>
|
|
26
|
+
</span>
|
|
27
|
+
</nimble-toggle-button>
|
|
28
|
+
${when(x => x.open, html `
|
|
29
|
+
<nimble-anchored-region
|
|
30
|
+
fixed-placement="true"
|
|
31
|
+
auto-update-mode="auto"
|
|
32
|
+
horizontal-inset="true"
|
|
33
|
+
horizontal-positioning-mode="dynamic"
|
|
34
|
+
vertical-positioning-mode="${x => (x.position === 'auto' ? 'dynamic' : 'locktodefault')}"
|
|
35
|
+
vertical-default-position="${x => (x.position === 'above' ? 'top' : 'bottom')}"
|
|
36
|
+
@loaded="${x => x.regionLoadedHandler()}"
|
|
37
|
+
@change="${x => x.menuChangeHandler()}"
|
|
38
|
+
@keydown="${(x, c) => x.menuKeyDownHandler(c.event)}"
|
|
39
|
+
${ref('region')}
|
|
40
|
+
>
|
|
41
|
+
<span part="menu">
|
|
42
|
+
<slot name="menu" ${slotted({ property: 'slottedMenus', filter: elements('[role=menu]') })}></slot>
|
|
43
|
+
</span>
|
|
44
|
+
</nimble-anchored-region>
|
|
45
|
+
`)}
|
|
46
|
+
</template>
|
|
47
|
+
`;
|
|
48
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;iBAEvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;0BAI7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;8BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;;;;;;;;UAUvB,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;;;;;;6CAMqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;2BAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;4BACzB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;;SAGrG,CACJ;;CAEJ,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Types of menu button appearance.
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export type { ButtonAppearanceAttribute } from '../patterns/button/types';
|
|
6
|
+
export { ButtonAppearance } from '../patterns/button/types';
|
|
7
|
+
/**
|
|
8
|
+
* The options of where to position the menu relative to the menu button.
|
|
9
|
+
*/
|
|
10
|
+
export declare const MenuButtonPosition: {
|
|
11
|
+
readonly above: "above";
|
|
12
|
+
readonly below: "below";
|
|
13
|
+
readonly auto: "auto";
|
|
14
|
+
};
|
|
15
|
+
export declare type MenuButtonPosition = typeof MenuButtonPosition[keyof typeof MenuButtonPosition];
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { ButtonAppearance } from '../patterns/button/types';
|
|
2
|
+
/**
|
|
3
|
+
* The options of where to position the menu relative to the menu button.
|
|
4
|
+
*/
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
6
|
+
export const MenuButtonPosition = {
|
|
7
|
+
above: 'above',
|
|
8
|
+
below: 'below',
|
|
9
|
+
auto: 'auto'
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/menu-button/types.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACN,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
import { ButtonAppearance } from '../button/types';
|
|
3
|
+
import type { ToggleButton } from '../toggle-button';
|
|
4
|
+
import { MenuButtonPosition } from './types';
|
|
5
|
+
import type { IButton } from '../patterns/button/types';
|
|
6
|
+
import type { AnchoredRegion } from '../anchored-region';
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'nimble-menu-button': MenuButton;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* A nimble-styled menu button control.
|
|
14
|
+
*/
|
|
15
|
+
export declare class MenuButton extends FoundationElement implements IButton {
|
|
16
|
+
appearance: ButtonAppearance;
|
|
17
|
+
disabled: boolean;
|
|
18
|
+
contentHidden: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Specifies whether or not the menu is open.
|
|
21
|
+
*/
|
|
22
|
+
open: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Configures where the menu should be placed relative to the button that opens the menu.
|
|
25
|
+
*/
|
|
26
|
+
position: MenuButtonPosition;
|
|
27
|
+
/** @internal */
|
|
28
|
+
readonly toggleButton: ToggleButton | undefined;
|
|
29
|
+
/** @internal */
|
|
30
|
+
readonly region: AnchoredRegion | undefined;
|
|
31
|
+
/** @internal */
|
|
32
|
+
readonly slottedMenus: HTMLElement[] | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Used to maintain the internal state of whether the last menu item should be focused instead
|
|
35
|
+
* of the first menu item the next time the menu is opened.
|
|
36
|
+
*/
|
|
37
|
+
private focusLastItemWhenOpened;
|
|
38
|
+
toggleButtonChanged(_prev: ToggleButton | undefined, _next: ToggleButton | undefined): void;
|
|
39
|
+
regionChanged(_prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
|
|
40
|
+
openChanged(_prev: boolean | undefined, _next: boolean): void;
|
|
41
|
+
regionLoadedHandler(): void;
|
|
42
|
+
focusoutHandler(e: FocusEvent): boolean;
|
|
43
|
+
toggleButtonCheckedChangeHandler(e: Event): boolean;
|
|
44
|
+
toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
|
|
45
|
+
menuChangeHandler(): void;
|
|
46
|
+
menuKeyDownHandler(e: KeyboardEvent): boolean;
|
|
47
|
+
private get menu();
|
|
48
|
+
private focusMenu;
|
|
49
|
+
private focusLastMenuItem;
|
|
50
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Types of menu button appearance.
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export type { ButtonAppearanceAttribute } from '../patterns/button/types';
|
|
6
|
+
export { ButtonAppearance } from '../patterns/button/types';
|
|
7
|
+
/**
|
|
8
|
+
* The options of where to position the menu relative to the menu button.
|
|
9
|
+
*/
|
|
10
|
+
export declare const MenuButtonPosition: {
|
|
11
|
+
readonly above: "above";
|
|
12
|
+
readonly below: "below";
|
|
13
|
+
readonly auto: "auto";
|
|
14
|
+
};
|
|
15
|
+
export declare type MenuButtonPosition = typeof MenuButtonPosition[keyof typeof MenuButtonPosition];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.6.0",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|