@ni/nimble-components 11.8.4 → 11.8.5
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/all-components-bundle.js +63 -7
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +12 -4
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/combobox/index.d.ts +23 -3
- package/dist/esm/combobox/index.js +63 -7
- package/dist/esm/combobox/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ export declare class Combobox extends FoundationCombobox implements IHasErrorTex
|
|
|
17
17
|
*
|
|
18
18
|
* @internal
|
|
19
19
|
*/
|
|
20
|
-
readonly dropdownButton
|
|
20
|
+
readonly dropdownButton?: ToggleButton;
|
|
21
21
|
/**
|
|
22
22
|
* A message explaining why the value is invalid.
|
|
23
23
|
*
|
|
@@ -26,16 +26,36 @@ export declare class Combobox extends FoundationCombobox implements IHasErrorTex
|
|
|
26
26
|
* HTML Attribute: error-text
|
|
27
27
|
*/
|
|
28
28
|
errorText: string | undefined;
|
|
29
|
+
private valueUpdatedByInput;
|
|
30
|
+
private valueBeforeTextUpdate?;
|
|
29
31
|
setPositioning(): void;
|
|
30
32
|
slottedOptionsChanged(prev: HTMLElement[], next: HTMLElement[]): void;
|
|
31
33
|
connectedCallback(): void;
|
|
32
|
-
disconnectedCallback(): void;
|
|
33
34
|
toggleButtonClickHandler(e: Event): void;
|
|
34
35
|
toggleButtonChangeHandler(e: Event): void;
|
|
35
36
|
toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
|
|
36
37
|
filterOptions(): void;
|
|
38
|
+
/**
|
|
39
|
+
* This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
|
|
40
|
+
* For now, we will update the value ourselves while a user types in text. Note that there is other
|
|
41
|
+
* implementation related to this (like the 'keydownEventHandler') needed to create the complete set
|
|
42
|
+
* of desired behavior described in the issue noted above.
|
|
43
|
+
*/
|
|
44
|
+
inputHandler(e: InputEvent): boolean | void;
|
|
45
|
+
keydownHandler(e: KeyboardEvent): boolean | void;
|
|
46
|
+
focusoutHandler(e: FocusEvent): boolean | void;
|
|
37
47
|
protected openChanged(): void;
|
|
38
48
|
private ariaLabelChanged;
|
|
39
49
|
private updateInputAriaLabel;
|
|
40
|
-
|
|
50
|
+
/**
|
|
51
|
+
* This will only emit a `change` event after text entry where the text in the input prior to
|
|
52
|
+
* typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).
|
|
53
|
+
* So, for a concrete example:
|
|
54
|
+
* 1) User types 'Sue' (when Combobox input was blank).
|
|
55
|
+
* 2) User presses <Enter> -> 'change' event fires
|
|
56
|
+
* 3) User deletes 'Sue'
|
|
57
|
+
* 4) User re-types 'Sue'
|
|
58
|
+
* 5) User presses <Enter> -> NO 'change' event is fired
|
|
59
|
+
*/
|
|
60
|
+
private emitChangeIfValueUpdated;
|
|
41
61
|
}
|
|
@@ -12,9 +12,7 @@ import { styles } from './styles';
|
|
|
12
12
|
export class Combobox extends FoundationCombobox {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments);
|
|
15
|
-
this.
|
|
16
|
-
this.open = false;
|
|
17
|
-
};
|
|
15
|
+
this.valueUpdatedByInput = false;
|
|
18
16
|
}
|
|
19
17
|
// Workaround for https://github.com/microsoft/fast/issues/5123
|
|
20
18
|
setPositioning() {
|
|
@@ -38,10 +36,6 @@ export class Combobox extends FoundationCombobox {
|
|
|
38
36
|
// Call setPositioning() after this.forcedPosition is initialized.
|
|
39
37
|
this.setPositioning();
|
|
40
38
|
this.updateInputAriaLabel();
|
|
41
|
-
this.addEventListener('focusout', this.focusOutHandler);
|
|
42
|
-
}
|
|
43
|
-
disconnectedCallback() {
|
|
44
|
-
this.removeEventListener('focusout', this.focusOutHandler);
|
|
45
39
|
}
|
|
46
40
|
toggleButtonClickHandler(e) {
|
|
47
41
|
e.stopImmediatePropagation();
|
|
@@ -68,6 +62,50 @@ export class Combobox extends FoundationCombobox {
|
|
|
68
62
|
const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
|
|
69
63
|
this.filteredOptions = enabledOptions;
|
|
70
64
|
}
|
|
65
|
+
/**
|
|
66
|
+
* This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
|
|
67
|
+
* For now, we will update the value ourselves while a user types in text. Note that there is other
|
|
68
|
+
* implementation related to this (like the 'keydownEventHandler') needed to create the complete set
|
|
69
|
+
* of desired behavior described in the issue noted above.
|
|
70
|
+
*/
|
|
71
|
+
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
|
|
72
|
+
inputHandler(e) {
|
|
73
|
+
const returnValue = super.inputHandler(e);
|
|
74
|
+
if (!this.valueUpdatedByInput) {
|
|
75
|
+
this.valueBeforeTextUpdate = this.value;
|
|
76
|
+
}
|
|
77
|
+
this.value = this.control.value;
|
|
78
|
+
this.valueUpdatedByInput = true;
|
|
79
|
+
return returnValue;
|
|
80
|
+
}
|
|
81
|
+
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
|
|
82
|
+
keydownHandler(e) {
|
|
83
|
+
const returnValue = super.keydownHandler(e);
|
|
84
|
+
if (e.ctrlKey || e.altKey) {
|
|
85
|
+
return returnValue;
|
|
86
|
+
}
|
|
87
|
+
switch (e.key) {
|
|
88
|
+
case keyEnter:
|
|
89
|
+
this.emitChangeIfValueUpdated();
|
|
90
|
+
break;
|
|
91
|
+
case keyArrowDown:
|
|
92
|
+
case keyArrowUp:
|
|
93
|
+
if (this.open && this.valueUpdatedByInput) {
|
|
94
|
+
this.valueUpdatedByInput = false;
|
|
95
|
+
}
|
|
96
|
+
break;
|
|
97
|
+
default:
|
|
98
|
+
return returnValue;
|
|
99
|
+
}
|
|
100
|
+
return returnValue;
|
|
101
|
+
}
|
|
102
|
+
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
|
|
103
|
+
focusoutHandler(e) {
|
|
104
|
+
const returnValue = super.focusoutHandler(e);
|
|
105
|
+
this.open = false;
|
|
106
|
+
this.emitChangeIfValueUpdated();
|
|
107
|
+
return returnValue;
|
|
108
|
+
}
|
|
71
109
|
openChanged() {
|
|
72
110
|
super.openChanged();
|
|
73
111
|
if (this.dropdownButton) {
|
|
@@ -87,6 +125,24 @@ export class Combobox extends FoundationCombobox {
|
|
|
87
125
|
inputElement?.removeAttribute('aria-label');
|
|
88
126
|
}
|
|
89
127
|
}
|
|
128
|
+
/**
|
|
129
|
+
* This will only emit a `change` event after text entry where the text in the input prior to
|
|
130
|
+
* typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).
|
|
131
|
+
* So, for a concrete example:
|
|
132
|
+
* 1) User types 'Sue' (when Combobox input was blank).
|
|
133
|
+
* 2) User presses <Enter> -> 'change' event fires
|
|
134
|
+
* 3) User deletes 'Sue'
|
|
135
|
+
* 4) User re-types 'Sue'
|
|
136
|
+
* 5) User presses <Enter> -> NO 'change' event is fired
|
|
137
|
+
*/
|
|
138
|
+
emitChangeIfValueUpdated() {
|
|
139
|
+
if (this.valueUpdatedByInput) {
|
|
140
|
+
if (this.value !== this.valueBeforeTextUpdate) {
|
|
141
|
+
this.$emit('change');
|
|
142
|
+
}
|
|
143
|
+
this.valueUpdatedByInput = false;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
90
146
|
}
|
|
91
147
|
__decorate([
|
|
92
148
|
observable
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAE9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACX,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,2BAA2B,CAAC;AACnC,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "11.8.
|
|
3
|
+
"version": "11.8.5",
|
|
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",
|