@ni/nimble-components 11.8.2 → 11.8.5

package/dist/all-components-bundle.js

@@ -14700,7 +14700,7 @@
     DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
-    const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
+    DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
     const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
     const fillHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverColor)).withDefault((element) => hexToRgbaCssColor(getFillHoverColorForTheme(element), 0.1));
     DesignToken.create(styleNameFromTokenName(tokenNames.fillDownColor)).withDefault((element) => hexToRgbaCssColor(getFillDownColorForTheme(element), 0.15));
@@ -16739,9 +16739,7 @@
     class Combobox extends Combobox$1 {
         constructor() {
             super(...arguments);
-            this.focusOutHandler = () => {
-                this.open = false;
-            };
+            this.valueUpdatedByInput = false;
         }
         // Workaround for https://github.com/microsoft/fast/issues/5123
         setPositioning() {
@@ -16765,10 +16763,6 @@
             // Call setPositioning() after this.forcedPosition is initialized.
             this.setPositioning();
             this.updateInputAriaLabel();
-            this.addEventListener('focusout', this.focusOutHandler);
-        }
-        disconnectedCallback() {
-            this.removeEventListener('focusout', this.focusOutHandler);
         }
         toggleButtonClickHandler(e) {
             e.stopImmediatePropagation();
@@ -16795,6 +16789,50 @@
             const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
             this.filteredOptions = enabledOptions;
         }
+        /**
+         * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
+         * For now, we will update the value ourselves while a user types in text. Note that there is other
+         * implementation related to this (like the 'keydownEventHandler') needed to create the complete set
+         * of desired behavior described in the issue noted above.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        inputHandler(e) {
+            const returnValue = super.inputHandler(e);
+            if (!this.valueUpdatedByInput) {
+                this.valueBeforeTextUpdate = this.value;
+            }
+            this.value = this.control.value;
+            this.valueUpdatedByInput = true;
+            return returnValue;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        keydownHandler(e) {
+            const returnValue = super.keydownHandler(e);
+            if (e.ctrlKey || e.altKey) {
+                return returnValue;
+            }
+            switch (e.key) {
+                case keyEnter:
+                    this.emitChangeIfValueUpdated();
+                    break;
+                case keyArrowDown:
+                case keyArrowUp:
+                    if (this.open && this.valueUpdatedByInput) {
+                        this.valueUpdatedByInput = false;
+                    }
+                    break;
+                default:
+                    return returnValue;
+            }
+            return returnValue;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        focusoutHandler(e) {
+            const returnValue = super.focusoutHandler(e);
+            this.open = false;
+            this.emitChangeIfValueUpdated();
+            return returnValue;
+        }
         openChanged() {
             super.openChanged();
             if (this.dropdownButton) {
@@ -16814,6 +16852,24 @@
                 inputElement?.removeAttribute('aria-label');
             }
         }
+        /**
+         * This will only emit a `change` event after text entry where the text in the input prior to
+         * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).
+         * So, for a concrete example:
+         * 1) User types 'Sue' (when Combobox input was blank).
+         * 2) User presses <Enter> -> 'change' event fires
+         * 3) User deletes 'Sue'
+         * 4) User re-types 'Sue'
+         * 5) User presses <Enter> -> NO 'change' event is fired
+         */
+        emitChangeIfValueUpdated() {
+            if (this.valueUpdatedByInput) {
+                if (this.value !== this.valueBeforeTextUpdate) {
+                    this.$emit('change');
+                }
+                this.valueUpdatedByInput = false;
+            }
+        }
     }
     __decorate([
         observable
@@ -16848,6 +16904,7 @@
                 part="button"
                 aria-haspopup="true"
                 aria-expanded="${x => x.open}"
+                tabindex="-1"
             >
                 <nimble-icon-arrow-expander-down
                     slot="start"
@@ -20521,11 +20578,6 @@
         outline: none;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }
@@ -21249,11 +21301,6 @@
         box-shadow: none;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }
@@ -21469,11 +21516,6 @@
         text-overflow: clip;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }