@ni/nimble-components 7.4.0 → 7.4.3

package/dist/all-components-bundle.js

@@ -17211,24 +17211,6 @@
      * A nimble-styed HTML select
      */
     class Select extends Select$1 {
-        get value() {
-            return super.value;
-        }
-        set value(value) {
-            super.value = value;
-            // Workaround for https://github.com/microsoft/fast/issues/5139
-            // When the value property is set very early in the element's lifecycle (e.g. Angular value binding),
-            // the options property will not be set yet. As a workaround, we mark the listbox-option element with
-            // the selected attribute, which will set the initial value correctly.
-            if (value !== null && this.options.length === 0) {
-                const options = this.querySelectorAll('option,[role="option"]');
-                options.forEach(option => {
-                    if (option.getAttribute('value') === value) {
-                        option.setAttribute('selected', '');
-                    }
-                });
-            }
-        }
         // Workaround for https://github.com/microsoft/fast/issues/5123
         setPositioning() {
             if (!this.$fastController.isConnected) {
@@ -17243,6 +17225,14 @@
             // Call setPositioning() after this.forcedPosition is initialized.
             this.setPositioning();
         }
+        // Workaround for https://github.com/microsoft/fast/issues/5773
+        slottedOptionsChanged(prev, next) {
+            const value = this.value;
+            super.slottedOptionsChanged(prev, next);
+            if (value) {
+                this.value = value;
+            }
+        }
     }
     const nimbleSelect = Select.compose({
         baseName: 'select',
@@ -17654,13 +17644,15 @@
     })(TextAreaAppearance || (TextAreaAppearance = {}));
 
     const styles$4 = css `
-    ${display('inline-block')}
+    ${display('inline-flex')}
 
     :host {
         font: ${bodyFont};
         outline: none;
         user-select: none;
         color: ${bodyFontColor};
+        flex-direction: column;
+        vertical-align: top;
     }
 
     :host([disabled]) {
@@ -17668,7 +17660,7 @@
     }
 
     .label {
-        display: flex;
+        display: block;
         color: ${controlLabelFontColor};
         font: ${controlLabelFont};
     }
@@ -17680,6 +17672,8 @@
     .control {
         -webkit-appearance: none;
         font: inherit;
+        width: 100%;
+        flex-grow: 1;
         outline: none;
         box-sizing: border-box;
         position: relative;
@@ -17729,6 +17723,14 @@
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([cols]) .control {
+        width: auto;
+    }
+
+    :host([rows]) .control {
+        flex: none;
+    }
+
     :host([resize='both']) .control {
         resize: both;
     }