@ni/nimble-components 30.1.3 → 30.1.4

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 30 Jul 2024 14:18:21 GMT
+   * Generated on Tue, 30 Jul 2024 16:37:39 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -21376,16 +21376,16 @@ so this becomes the fallback color for the slot */ ''}
           return this._value;
       }
       set value(next) {
-          const prev = `${this._value}`;
+          const prev = this._value;
           let updatedValue = next;
           if (this.$fastController.isConnected && this.options) {
-              const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
+              const selectedIndex = this.findIndexOfValidOption(next);
               const prevSelectedValue = this.options[this.selectedIndex]?.text;
               const nextSelectedValue = this.options[selectedIndex]?.text;
-              this.selectedIndex = prevSelectedValue !== nextSelectedValue
-                  ? selectedIndex
-                  : this.selectedIndex;
-              updatedValue = this.firstSelectedOption?.text || next;
+              if (prevSelectedValue !== nextSelectedValue) {
+                  this.selectedIndex = selectedIndex;
+              }
+              updatedValue = this.firstSelectedOption?.text || updatedValue;
           }
           if (prev !== updatedValue) {
               this._value = updatedValue;
@@ -21395,9 +21395,7 @@ so this becomes the fallback color for the slot */ ''}
           // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749
           this.filter = next;
           this.filterOptions();
-          this.selectedIndex = this.options
-              .map(option => option.text)
-              .indexOf(this.value);
+          this.selectedIndex = this.findIndexOfValidOption(this.value);
       }
       /**
        * The list of options.
@@ -21406,7 +21404,7 @@ so this becomes the fallback color for the slot */ ''}
        */
       get options() {
           Observable.track(this, 'options');
-          return this.filteredOptions?.length
+          return this.filteredOptions && this.filter
               ? this.filteredOptions
               : this._options;
       }
@@ -21510,8 +21508,6 @@ so this becomes the fallback color for the slot */ ''}
                   o.visuallyHidden = !this.filteredOptions.includes(o);
               });
           }
-          const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
-          this.filteredOptions = enabledOptions;
       }
       /**
        * @internal
@@ -21520,11 +21516,9 @@ so this becomes the fallback color for the slot */ ''}
           this.filter = this.control.value;
           this.filterOptions();
           if (!this.isAutocompleteInline) {
-              this.selectedIndex = this.options
-                  .map(option => option.text)
-                  .indexOf(this.control.value);
+              this.selectedIndex = this.findIndexOfValidOption(this.control.value);
           }
-          if (!(e.inputType.includes('deleteContent') || !this.filter.length)) {
+          if (!e.inputType.includes('deleteContent') && this.filter.length) {
               if (this.isAutocompleteList && !this.open) {
                   this.open = true;
               }
@@ -21669,7 +21663,8 @@ so this becomes the fallback color for the slot */ ''}
        */
       setDefaultSelectedOption() {
           if (this.$fastController.isConnected && this.options) {
-              const selectedIndex = this.options.findIndex(el => el.getAttribute('selected') !== null || el.selected);
+              const selectedIndex = this.options.findIndex(el => !el.disabled
+                  && (el.getAttribute('selected') !== null || el.selected));
               this.selectedIndex = selectedIndex;
               if (!this.dirtyValue && this.firstSelectedOption) {
                   this.value = this.firstSelectedOption.text;
@@ -21682,13 +21677,21 @@ so this becomes the fallback color for the slot */ ''}
        */
       selectedIndexChanged(prev, next) {
           if (this.$fastController.isConnected) {
-              const pinnedSelectedIndex = limit(-1, this.options.length - 1, next);
+              let pinnedSelectedIndex = limit(-1, this.options.length - 1, next);
+              // Ensure selectedIndex doesn't get set to a disabled option
+              if (this.options[pinnedSelectedIndex]?.disabled) {
+                  pinnedSelectedIndex = -1;
+              }
               // we only want to call the super method when the selectedIndex is in range
               if (pinnedSelectedIndex !== this.selectedIndex) {
                   this.selectedIndex = pinnedSelectedIndex;
                   return;
               }
               super.selectedIndexChanged(prev, pinnedSelectedIndex);
+              // the base class doesn't call this when no option is selected, but we need to,
+              // otherwise selectedOptions, ariaActiveDescendant, and the previously selected
+              // option's selected state won't be updated
+              this.setSelectedOptions();
           }
       }
       /**
@@ -21702,16 +21705,42 @@ so this becomes the fallback color for the slot */ ''}
           }
           this.ariaDisabled = this.disabled ? 'true' : 'false';
       }
+      /**
+       * Move focus to the next selectable option.
+       *
+       * @internal
+       * @remarks Has the same behavior as `Listbox.selectNextOption` except it skips disabled options.
+       * Overrides `Listbox.selectNextOption`
+       */
+      selectNextOption() {
+          if (!this.disabled) {
+              let newIndex = this.selectedIndex;
+              do {
+                  if (newIndex + 1 >= this.options.length) {
+                      return;
+                  }
+                  newIndex += 1;
+              } while (this.options[newIndex].disabled);
+              this.selectedIndex = newIndex;
+          }
+      }
       /**
        * Move focus to the previous selectable option.
        *
        * @internal
-       * @remarks
+       * @remarks Has the same behavior as `Listbox.selectPreviousOption` except it skips disabled options and allows moving focus to the input.
        * Overrides `Listbox.selectPreviousOption`
        */
       selectPreviousOption() {
-          if (!this.disabled && this.selectedIndex >= 0) {
-              this.selectedIndex -= 1;
+          if (!this.disabled) {
+              let newIndex = this.selectedIndex;
+              do {
+                  newIndex -= 1;
+                  if (newIndex < 0) {
+                      break;
+                  }
+              } while (this.options[newIndex].disabled);
+              this.selectedIndex = newIndex;
           }
       }
       /**
@@ -21786,6 +21815,17 @@ so this becomes the fallback color for the slot */ ''}
               this.proxy.placeholder = this.placeholder ?? '';
           }
       }
+      /**
+       * Need to update even when options is empty.
+       * @internal
+       * @remarks Same as `Listbox.setSelectedOptions` except does not check if options is non-empty.
+       * Overrides: `Listbox.setSelectedOptions`
+       */
+      setSelectedOptions() {
+          this.selectedOptions = this.selectedIndex > -1 ? [this.options[this.selectedIndex]] : [];
+          this.ariaActiveDescendant = this.firstSelectedOption?.id ?? '';
+          this.focusAndScrollOptionIntoView();
+      }
       /**
        * Ensure that the entire list of options is used when setting the selected property.
        * @internal
@@ -21887,6 +21927,9 @@ so this becomes the fallback color for the slot */ ''}
               this.valueUpdatedByInput = false;
           }
       }
+      findIndexOfValidOption(optionText) {
+          return this.options.findIndex(o => !o.disabled && o.text === optionText);
+      }
   }
   __decorate$1([
       attr