@ni/nimble-components 21.8.2 → 21.9.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 04 Mar 2024 18:45:22 GMT
+   * Generated on Tue, 05 Mar 2024 22:11:22 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -24309,17 +24309,6 @@
         height: ${controlHeight};
     }
 
-    [part='start'] {
-        display: none;
-    }
-
-    .content {
-        padding: 8px 4px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
     :host([aria-selected='true']) {
         box-shadow: none;
         outline: none;
@@ -24356,6 +24345,21 @@
         cursor: default;
     }
 
+    :host([visually-hidden]) {
+        display: none;
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .content {
+        padding: 8px 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     .content[disabled] {
         box-shadow: none;
         outline: none;
@@ -24403,6 +24407,23 @@
   class ListOption extends ListboxOption {
       constructor() {
           super(...arguments);
+          /**
+           * The hidden state of the element.
+           *
+           * @public
+           * @defaultValue - false
+           * @remarks
+           * HTML Attribute: hidden
+           */
+          this.hidden = false;
+          /**
+           * @internal
+           * This attribute is required to allow use-cases that offer dynamic filtering
+           * (like the Select) to visually hide options that are filtered out, but still
+           * allow users to use the native 'hidden' attribute without it being affected
+           * by the filtering process.
+           */
+          this.visuallyHidden = false;
           /** @internal */
           this.hasOverflow = false;
       }
@@ -24414,6 +24435,12 @@
               .join(' ');
       }
   }
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], ListOption.prototype, "hidden", void 0);
+  __decorate$1([
+      attr({ attribute: 'visually-hidden', mode: 'boolean' })
+  ], ListOption.prototype, "visuallyHidden", void 0);
   __decorate$1([
       observable
   ], ListOption.prototype, "hasOverflow", void 0);
@@ -57884,7 +57911,12 @@ img.ProseMirror-separator {
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
  error icon, and dropdown arrow because they are not "interactive" i.e. part of the tab order */ ''}
-    [part='selected-value'] {
+
+    .selected-value.placeholder {
+        color: ${placeholderFontColor};
+    }
+
+    .selected-value {
         order: 1;
     }
 
@@ -58025,7 +58057,7 @@ img.ProseMirror-separator {
             >
                 ${startSlotTemplate(context, definition)}
                 <slot name="button-container">
-                    <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
+                    <div class="selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
                         <slot name="selected-value">${x => x.displayValue}</slot>
                     </div>
                     <div aria-hidden="true" class="indicator" part="indicator">
@@ -58081,7 +58113,7 @@ img.ProseMirror-separator {
                         class="scrollable-region">
                         <slot
                             ${slotted({
-    filter: (n) => n instanceof HTMLElement && Listbox$1.slottedOptionFilter(n),
+    filter: (n) => n instanceof HTMLElement && isListboxOption(n),
     flatten: true,
     property: 'slottedOptions',
 })}
@@ -58116,6 +58148,9 @@ img.ProseMirror-separator {
       }
   }
 
+  const isNimbleListOption = (el) => {
+      return el instanceof ListOption;
+  };
   /**
    * A nimble-styled HTML select.
    */
@@ -58125,6 +58160,10 @@ img.ProseMirror-separator {
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
           this.filterMode = FilterMode.none;
+          /**
+           * @internal
+           */
+          this.displayPlaceholder = false;
           /**
            * @internal
            */
@@ -58145,10 +58184,6 @@ img.ProseMirror-separator {
            * @internal
            */
           this.filter = '';
-          /**
-           * @internal
-           */
-          this.committedSelectedOption = undefined;
           /**
            * The max height for the listbox when opened.
            *
@@ -58174,24 +58209,6 @@ img.ProseMirror-separator {
           this.forcedPosition = !!this.positionAttribute;
           this.initializeOpenState();
       }
-      /**
-       * The list of options. This mirrors FAST's override implementation for this
-       * member for the Combobox to support a filtered list in the dropdown.
-       *
-       * @public
-       * @remarks
-       * Overrides `Listbox.options`.
-       */
-      get options() {
-          Observable.track(this, 'options');
-          return this.filteredOptions?.length
-              ? this.filteredOptions
-              : this._options;
-      }
-      set options(value) {
-          this._options = value;
-          Observable.notify(this, 'options');
-      }
       get value() {
           Observable.track(this, 'value');
           return this._value;
@@ -58199,8 +58216,6 @@ img.ProseMirror-separator {
       set value(next) {
           const prev = this._value;
           let newValue = next;
-          // use 'options' here instead of '_options' as 'selectedIndex' may be relative
-          // to filtered set
           if (this.options?.length) {
               const newValueIndex = this.options.findIndex(el => el.value === newValue);
               const prevSelectedValue = this.options[this.selectedIndex]?.value ?? null;
@@ -58216,7 +58231,7 @@ img.ProseMirror-separator {
               this._value = newValue;
               super.valueChanged(prev, newValue);
               if (!this.open) {
-                  this.committedSelectedOption = this._options.find(o => o.value === newValue);
+                  this.committedSelectedOption = this.options.find(o => o.value === newValue);
               }
               Observable.notify(this, 'value');
               if (this.collapsible) {
@@ -58252,14 +58267,18 @@ img.ProseMirror-separator {
        */
       slottedOptionsChanged(prev, next) {
           const value = this.value;
-          this._options.forEach(o => {
+          this.options.forEach(o => {
               const notifier = Observable.getNotifier(o);
               notifier.unsubscribe(this, 'value');
+              notifier.unsubscribe(this, 'hidden');
+              notifier.unsubscribe(this, 'disabled');
           });
           super.slottedOptionsChanged(prev, next);
-          this._options.forEach(o => {
+          this.options.forEach(o => {
               const notifier = Observable.getNotifier(o);
               notifier.subscribe(this, 'value');
+              notifier.subscribe(this, 'hidden');
+              notifier.subscribe(this, 'disabled');
           });
           this.setProxyOptions();
           this.updateValue();
@@ -58281,9 +58300,6 @@ img.ProseMirror-separator {
           }
           if (this.open) {
               const captured = e.target.closest('option,[role=option]');
-              if (!captured?.disabled) {
-                  this.updateSelectedIndexFromFilteredSet();
-              }
               if (captured?.disabled) {
                   return;
               }
@@ -58304,9 +58320,32 @@ img.ProseMirror-separator {
        * @override
        */
       handleChange(source, propertyName) {
-          super.handleChange(source, propertyName);
-          if (propertyName === 'value') {
-              this.updateValue();
+          // don't call super.handleChange so hidden options can be selected programmatically
+          const sourceElement = source;
+          switch (propertyName) {
+              case 'value': {
+                  this.updateValue();
+                  break;
+              }
+              case 'selected': {
+                  if (isNimbleListOption(sourceElement)) {
+                      this.selectedIndex = this.options.indexOf(sourceElement);
+                  }
+                  this.setSelectedOptions();
+                  this.updateDisplayValue();
+                  break;
+              }
+              case 'hidden': {
+                  if (isNimbleListOption(sourceElement)) {
+                      sourceElement.visuallyHidden = sourceElement.hidden;
+                  }
+                  this.updateDisplayValue();
+                  break;
+              }
+              case 'disabled': {
+                  this.updateDisplayValue();
+                  break;
+              }
           }
       }
       /**
@@ -58357,6 +58396,14 @@ img.ProseMirror-separator {
        * @internal
        */
       updateDisplayValue() {
+          if (this.committedSelectedOption?.disabled
+              && this.committedSelectedOption?.hidden
+              && this.committedSelectedOption?.selected) {
+              this.displayPlaceholder = true;
+          }
+          else {
+              this.displayPlaceholder = false;
+          }
           if (this.collapsible) {
               Observable.notify(this, 'displayValue');
           }
@@ -58369,14 +58416,9 @@ img.ProseMirror-separator {
        */
       inputHandler(e) {
           this.filter = this.filterInput?.value ?? '';
-          if (!this.committedSelectedOption) {
-              this.committedSelectedOption = this._options.find(option => option.selected);
-          }
           this.clearSelection();
           this.filterOptions();
-          if (this.filteredOptions.length > 0
-              && this.committedSelectedOption
-              && !this.filteredOptions.includes(this.committedSelectedOption)) {
+          if (this.filteredOptions.length > 0) {
               const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
               if (enabledOptions.length > 0) {
                   enabledOptions[0].selected = true;
@@ -58400,7 +58442,6 @@ img.ProseMirror-separator {
        * @internal
        */
       focusoutHandler(e) {
-          this.updateSelectedIndexFromFilteredSet();
           super.focusoutHandler(e);
           if (!this.open) {
               return true;
@@ -58412,6 +58453,9 @@ img.ProseMirror-separator {
           }
           if (!this.options?.includes(focusTarget)) {
               this.open = false;
+              if (this.selectedIndex === -1) {
+                  this.selectedIndex = this.indexWhenOpened;
+              }
               if (this.indexWhenOpened !== this.selectedIndex) {
                   this.updateValue(true);
               }
@@ -58453,7 +58497,6 @@ img.ProseMirror-separator {
                       || this.filteredOptions.every(o => o.disabled)) {
                       return false;
                   }
-                  this.updateSelectedIndexFromFilteredSet();
                   this.open = !this.open;
                   if (!this.open) {
                       this.focus();
@@ -58461,21 +58504,16 @@ img.ProseMirror-separator {
                   break;
               }
               case keyEscape: {
-                  // clear filter as update to "selectedIndex" will result in processing
-                  // "options" and not "_options"
-                  this.filter = '';
-                  if (this.committedSelectedOption) {
-                      this.clearSelection();
-                      this.selectedIndex = this._options.indexOf(this.committedSelectedOption);
+                  if (!this.open) {
+                      break;
                   }
                   if (this.collapsible && this.open) {
                       e.preventDefault();
                       this.open = false;
                   }
-                  // reset 'selected' state otherwise the selected state doesn't stick.
-                  const selectedOption = this._options[this.selectedIndex];
-                  if (selectedOption) {
-                      selectedOption.selected = true;
+                  if (this.selectedIndex !== this.indexWhenOpened) {
+                      this.options[this.selectedIndex].selected = false;
+                      this.selectedIndex = this.indexWhenOpened;
                   }
                   this.focus();
                   break;
@@ -58502,8 +58540,12 @@ img.ProseMirror-separator {
        *
        * @internal
        */
-      selectedIndexChanged(prev, next) {
-          super.selectedIndexChanged(prev, next);
+      selectedIndexChanged(_, __) {
+          // Don't call super.selectedIndexChanged as this will disallow disabled options
+          // from being valid initial selected values. Our setDefaultSelectedOption
+          // implementation handles skipping non-selected disabled options for the initial
+          // selected value.
+          this.setSelectedOptions();
           this.updateValue();
       }
       /**
@@ -58534,6 +58576,26 @@ img.ProseMirror-separator {
               this.selectedIndex = 0;
           }
       }
+      selectNextOption() {
+          // don't call super.selectNextOption as that relies on side-effecty
+          // behavior to not select disabled option (which no longer works)
+          for (let i = this.selectedIndex + 1; i < this.options.length; i++) {
+              if (!this.options[i]?.disabled) {
+                  this.selectedIndex = i;
+                  break;
+              }
+          }
+      }
+      selectPreviousOption() {
+          // don't call super.selectPreviousOption as that relies on side-effecty
+          // behavior to not select disabled option (which no longer works)
+          for (let i = this.selectedIndex - 1; i >= 0; i--) {
+              if (!this.options[i]?.disabled) {
+                  this.selectedIndex = i;
+                  break;
+              }
+          }
+      }
       // Prevents parent classes from resetting selectedIndex to a positive
       // value while filtering, which can result in a disabled option being
       // selected.
@@ -58595,9 +58657,14 @@ img.ProseMirror-separator {
        * @override
        * @internal
        */
-      selectedOptionsChanged(prev, next) {
-          super.selectedOptionsChanged(prev, next);
+      selectedOptionsChanged(_prev, next) {
+          // don't call super.selectedOptionsChanged so we don't filter out hidden elements
+          // when updating 'selected' state (copied relevant super implementation)
           this.options?.forEach((o, i) => {
+              const notifier = Observable.getNotifier(o);
+              notifier.unsubscribe(this, 'selected');
+              o.selected = next.includes(o);
+              notifier.subscribe(this, 'selected');
               const proxyOption = this.proxy?.options.item(i);
               if (proxyOption) {
                   proxyOption.selected = o.selected;
@@ -58613,15 +58680,37 @@ img.ProseMirror-separator {
        */
       setDefaultSelectedOption() {
           const options = this.options
-              ?? Array.from(this.children).filter(o => Listbox$1.slottedOptionFilter(o));
-          const selectedIndex = options?.findIndex(el => el.hasAttribute('selected')
-              || el.selected
-              || el.value === this.value);
+              ?? Array.from(this.children).filter(o => isNimbleListOption(o));
+          const optionIsSelected = (option) => {
+              return option.hasAttribute('selected') || option.selected;
+          };
+          const optionIsDisabled = (option) => {
+              return option.hasAttribute('disabled') || option.disabled;
+          };
+          let selectedIndex = -1;
+          let firstValidOptionIndex = -1;
+          for (let i = 0; i < options?.length; i++) {
+              const option = options[i];
+              if (optionIsSelected(option) || option?.value === this.value) {
+                  selectedIndex = i;
+              }
+              if (firstValidOptionIndex === -1 && !optionIsDisabled(option)) {
+                  firstValidOptionIndex = i;
+              }
+          }
           if (selectedIndex !== -1) {
               this.selectedIndex = selectedIndex;
-              return;
           }
-          this.selectedIndex = 0;
+          else if (firstValidOptionIndex !== -1) {
+              this.selectedIndex = firstValidOptionIndex;
+          }
+          else {
+              this.selectedIndex = 0;
+          }
+          this.committedSelectedOption = options[this.selectedIndex];
+      }
+      committedSelectedOptionChanged() {
+          this.updateDisplayValue();
       }
       setPositioning() {
           if (!this.$fastController.isConnected) {
@@ -58657,15 +58746,24 @@ img.ProseMirror-separator {
       filterOptions() {
           const filter = this.filter.toLowerCase();
           if (filter) {
-              this.filteredOptions = this._options.filter(option => {
-                  return diacriticInsensitiveStringNormalizer(option.text).includes(diacriticInsensitiveStringNormalizer(filter));
+              this.filteredOptions = this.options.filter(option => {
+                  const normalizedFilter = diacriticInsensitiveStringNormalizer(filter);
+                  return (!option.hidden
+                      && diacriticInsensitiveStringNormalizer(option.text).includes(normalizedFilter));
               });
           }
           else {
-              this.filteredOptions = this._options;
+              this.filteredOptions = this.options.filter(option => !option.hidden);
           }
-          this._options.forEach(o => {
-              o.hidden = !this.filteredOptions.includes(o);
+          this.options.forEach(o => {
+              if (isNimbleListOption(o)) {
+                  if (!this.filteredOptions.includes(o)) {
+                      o.visuallyHidden = true;
+                  }
+                  else {
+                      o.visuallyHidden = false;
+                  }
+              }
           });
       }
       /**
@@ -58723,7 +58821,7 @@ img.ProseMirror-separator {
               this.ariaControls = '';
               return;
           }
-          this.committedSelectedOption = this._options[this.selectedIndex];
+          this.committedSelectedOption = this.options[this.selectedIndex];
           this.ariaControls = this.listboxId;
           this.ariaExpanded = 'true';
           this.setPositioning();
@@ -58734,24 +58832,6 @@ img.ProseMirror-separator {
               this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
           }
       }
-      updateSelectedIndexFromFilteredSet() {
-          const selectedItem = this.filteredOptions.length > 0
-              ? this.options[this.selectedIndex]
-                  ?? this.committedSelectedOption
-              : this.committedSelectedOption;
-          if (!selectedItem) {
-              return;
-          }
-          // Clear filter so any logic resolving against 'this.options' resolves against all options,
-          // since selectedIndex should be relative to entire set.
-          this.filter = '';
-          // translate selectedIndex for filtered list to selectedIndex for all items
-          this.selectedIndex = this._options.indexOf(selectedItem);
-          // force selected to true again if the selection hasn't actually changed
-          if (selectedItem === this.committedSelectedOption) {
-              selectedItem.selected = true;
-          }
-      }
   }
   __decorate$1([
       attr
@@ -58768,6 +58848,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'filter-mode' })
   ], Select.prototype, "filterMode", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "displayPlaceholder", void 0);
   __decorate$1([
       attr({ attribute: 'open', mode: 'boolean' })
   ], Select.prototype, "open", void 0);
@@ -58804,6 +58887,9 @@ img.ProseMirror-separator {
   __decorate$1([
       volatile
   ], Select.prototype, "collapsible", null);
+  __decorate$1([
+      volatile
+  ], Select.prototype, "displayValue", null);
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,