@ni/nimble-components 24.1.6 → 24.1.7

package/dist/all-components-bundle.js

@@ -5398,7 +5398,7 @@
    * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
    * If value is greater than max, max will be returned.
    */
-  function limit(min, max, value) {
+  function limit$1(min, max, value) {
       return Math.min(Math.max(value, min), max);
   }
   /**
@@ -8380,12 +8380,12 @@
    *
    * @internal
    */
-  class FormAssociatedCombobox extends FormAssociated(_Combobox) {
+  let FormAssociatedCombobox$1 = class FormAssociatedCombobox extends FormAssociated(_Combobox) {
       constructor() {
           super(...arguments);
           this.proxy = document.createElement("input");
       }
-  }
+  };
 
   /**
    * Autocomplete values for combobox.
@@ -8415,7 +8415,7 @@
    *
    * @public
    */
-  let Combobox$1 = class Combobox extends FormAssociatedCombobox {
+  let Combobox$2 = class Combobox extends FormAssociatedCombobox$1 {
       constructor() {
           super(...arguments);
           /**
@@ -8796,7 +8796,7 @@
        */
       selectedIndexChanged(prev, next) {
           if (this.$fastController.isConnected) {
-              next = limit(-1, this.options.length - 1, next);
+              next = limit$1(-1, this.options.length - 1, next);
               // we only want to call the super method when the selectedIndex is in range
               if (next !== this.selectedIndex) {
                   this.selectedIndex = next;
@@ -8943,22 +8943,22 @@
   };
   __decorate([
       attr({ attribute: "autocomplete", mode: "fromView" })
-  ], Combobox$1.prototype, "autocomplete", void 0);
+  ], Combobox$2.prototype, "autocomplete", void 0);
   __decorate([
       observable
-  ], Combobox$1.prototype, "maxHeight", void 0);
+  ], Combobox$2.prototype, "maxHeight", void 0);
   __decorate([
       attr({ attribute: "open", mode: "boolean" })
-  ], Combobox$1.prototype, "open", void 0);
+  ], Combobox$2.prototype, "open", void 0);
   __decorate([
       attr
-  ], Combobox$1.prototype, "placeholder", void 0);
+  ], Combobox$2.prototype, "placeholder", void 0);
   __decorate([
       attr({ attribute: "position" })
-  ], Combobox$1.prototype, "positionAttribute", void 0);
+  ], Combobox$2.prototype, "positionAttribute", void 0);
   __decorate([
       observable
-  ], Combobox$1.prototype, "position", void 0);
+  ], Combobox$2.prototype, "position", void 0);
   /**
    * Includes ARIA states and properties relating to the ARIA combobox role.
    *
@@ -8973,7 +8973,7 @@
       observable
   ], DelegatesARIACombobox.prototype, "ariaControls", void 0);
   applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
-  applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
+  applyMixins(Combobox$2, StartEnd, DelegatesARIACombobox);
 
   /**
    * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
@@ -13545,7 +13545,7 @@
       adjust(adjustment) {
           const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
           const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-          const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+          const nextTabIndex = limit$1(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
           // the index of the next focusable tab within the context of all available tabs
           const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
           if (nextIndex > -1) {
@@ -13942,7 +13942,7 @@
       }
       set activeIndex(value) {
           if (this.$fastController.isConnected) {
-              this._activeIndex = limit(0, this.focusableElements.length - 1, value);
+              this._activeIndex = limit$1(0, this.focusableElements.length - 1, value);
               Observable.notify(this, "activeIndex");
           }
       }
@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 04 Apr 2024 14:40:58 GMT
+   * Generated on Thu, 04 Apr 2024 17:54:36 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16717,6 +16717,19 @@
       Direction["rtl"] = "rtl";
   })(Direction || (Direction = {}));
 
+  /**
+   * This method keeps a given value within the bounds of a min and max value. If the value
+   * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+   * the maximum will be returned. Otherwise, the value is returned un-changed.
+   */
+  /**
+   * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+   * If value is greater than max, max will be returned.
+   */
+  function limit(min, max, value) {
+      return Math.min(Math.max(value, min), max);
+  }
+
   let uniqueIdCounter = 0;
   /**
    * Generates a unique ID based on incrementing a counter.
@@ -21077,65 +21090,173 @@
     </template>
 `;
 
+  // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/combobox/combobox.form-associated.ts
+  /* eslint-disable max-classes-per-file */
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  let Combobox$1 = class Combobox extends ListboxElement {
+  };
+  /**
+   * A form-associated base class for the Combobox component. This was copied from the
+   * FAST FormAssociatedCombobox (which is not exported by fast-foundation)
+   *
+   * @internal
+   */
+  class FormAssociatedCombobox extends FormAssociated(Combobox$1) {
+      constructor() {
+          super(...arguments);
+          this.proxy = document.createElement('input');
+      }
+  }
+
   /**
    * A nimble-styed HTML combobox
    */
-  class Combobox extends Combobox$1 {
+  class Combobox extends FormAssociatedCombobox {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
+          /**
+           * The open attribute.
+           */
+          this.open = false;
+          /**
+           * The collection of currently filtered options.
+           */
+          this.filteredOptions = [];
           /** @internal */
           this.hasOverflow = false;
+          /**
+           * The unique id for the internal listbox element.
+           *
+           * @internal
+           */
+          this.listboxId = uniqueId('listbox-');
+          /**
+           * The max height for the listbox when opened.
+           *
+           * @internal
+           */
+          this.maxHeight = 0;
           this.valueUpdatedByInput = false;
+          this._value = '';
+          this.filter = '';
+          /**
+           * The initial state of the position attribute.
+           */
+          this.forcedPosition = false;
       }
       get value() {
-          return super.value;
+          Observable.track(this, 'value');
+          return this._value;
       }
-      // This override is to work around an issue in FAST where an old filter value
-      // is used after programmatically setting the value property.
-      // See: https://github.com/microsoft/fast/issues/6749
       set value(next) {
-          super.value = next;
-          // Workaround using index notation to manipulate private member
+          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 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 (prev !== updatedValue) {
+              this._value = updatedValue;
+              super.valueChanged(prev, updatedValue);
+              Observable.notify(this, 'value');
+          }
           // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749
-          // eslint-disable-next-line @typescript-eslint/dot-notation
-          this['filter'] = next;
+          this.filter = next;
           this.filterOptions();
           this.selectedIndex = this.options
               .map(option => option.text)
               .indexOf(this.value);
       }
-      // Workaround for https://github.com/microsoft/fast/issues/5123
-      setPositioning() {
-          if (!this.$fastController.isConnected) {
-              // Don't call setPositioning() until we're connected,
-              // since this.forcedPosition isn't initialized yet.
-              return;
-          }
-          super.setPositioning();
+      /**
+       * The list of options.
+       *
+       * 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 isAutocompleteInline() {
+          return (this.autocomplete === ComboboxAutocomplete.inline
+              || this.isAutocompleteBoth);
+      }
+      get isAutocompleteList() {
+          return (this.autocomplete === ComboboxAutocomplete.list
+              || this.isAutocompleteBoth);
+      }
+      get isAutocompleteBoth() {
+          return this.autocomplete === ComboboxAutocomplete.both;
       }
-      // Workaround for https://github.com/microsoft/fast/issues/5773
       slottedOptionsChanged(prev, next) {
+          // Workaround for https://github.com/microsoft/fast/issues/5773
           const value = this.value;
           super.slottedOptionsChanged(prev, next);
+          this.updateValue();
           if (value) {
               this.value = value;
           }
       }
       connectedCallback() {
           super.connectedCallback();
-          // Call setPositioning() after this.forcedPosition is initialized.
+          this.forcedPosition = !!this.positionAttribute;
+          if (this.value) {
+              this.initialValue = this.value;
+          }
           this.setPositioning();
           this.updateInputAriaLabel();
       }
+      /**
+       * @internal
+       */
+      clickHandler(e) {
+          if (this.disabled) {
+              return false;
+          }
+          if (this.open) {
+              const captured = e.target.closest('option,[role=option]');
+              if (!captured || captured.disabled) {
+                  return false;
+              }
+              this.selectedOptions = [captured];
+              this.control.value = captured.text;
+              this.clearSelectionRange();
+              this.updateValue(true);
+          }
+          this.open = !this.open;
+          if (this.open) {
+              this.control.focus();
+          }
+          return true;
+      }
+      /**
+       * @internal
+       */
       toggleButtonClickHandler(e) {
           e.stopImmediatePropagation();
       }
+      /**
+       * @internal
+       */
       toggleButtonChangeHandler(e) {
           this.open = this.dropdownButton.checked;
           e.stopImmediatePropagation();
       }
+      /**
+       * @internal
+       */
       toggleButtonKeyDownHandler(e) {
           switch (e.key) {
               case keyArrowUp:
@@ -21149,20 +21270,57 @@
                   return true;
           }
       }
+      /**
+       * @internal
+       */
       filterOptions() {
-          super.filterOptions();
+          if (!this.autocomplete
+              || this.autocomplete === ComboboxAutocomplete.none) {
+              this.filter = '';
+          }
+          const filter = this.filter.toLowerCase();
+          this.filteredOptions = this._options.filter(o => o.text.toLowerCase().startsWith(filter));
+          if (this.isAutocompleteList) {
+              if (!this.filteredOptions.length && !filter) {
+                  this.filteredOptions = this._options;
+              }
+              this._options.forEach(o => {
+                  o.visuallyHidden = !this.filteredOptions.includes(o);
+              });
+          }
           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.
+       * @internal
        */
-      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
       inputHandler(e) {
-          const returnValue = super.inputHandler(e);
+          this.filter = this.control.value;
+          this.filterOptions();
+          if (!this.isAutocompleteInline) {
+              this.selectedIndex = this.options
+                  .map(option => option.text)
+                  .indexOf(this.control.value);
+          }
+          if (!(e.inputType.includes('deleteContent') || !this.filter.length)) {
+              if (this.isAutocompleteList && !this.open) {
+                  this.open = true;
+              }
+              if (this.isAutocompleteInline) {
+                  if (this.filteredOptions.length) {
+                      this.selectedOptions = [this.filteredOptions[0]];
+                      this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+                      this.setInlineSelection();
+                  }
+                  else {
+                      this.selectedIndex = -1;
+                  }
+              }
+          }
+          // 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.
           if (!this.valueUpdatedByInput) {
               this.valueBeforeTextUpdate = this.value;
           }
@@ -21172,47 +21330,257 @@
               this.focusAndScrollOptionIntoView();
           }
           this.value = this.control.value;
-          return returnValue;
+          return true;
       }
-      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
       keydownHandler(e) {
-          const returnValue = super.keydownHandler(e);
           if (e.ctrlKey || e.altKey) {
-              return returnValue;
+              return true;
           }
           switch (e.key) {
               case keyEnter:
+                  this.syncValue();
+                  if (this.isAutocompleteInline) {
+                      this.filter = this.value;
+                  }
+                  this.open = false;
+                  this.clearSelectionRange();
                   this.emitChangeIfValueUpdated();
                   break;
+              case keyEscape:
+                  if (!this.isAutocompleteInline) {
+                      this.selectedIndex = -1;
+                  }
+                  if (this.open) {
+                      this.open = false;
+                      break;
+                  }
+                  this.value = '';
+                  this.control.value = '';
+                  this.filter = '';
+                  this.filterOptions();
+                  break;
+              case keyTab:
+                  this.setInputToSelection();
+                  if (!this.open) {
+                      return true;
+                  }
+                  e.preventDefault();
+                  this.open = false;
+                  break;
               case keyArrowDown:
               case keyArrowUp:
+                  this.filterOptions();
+                  if (!this.open) {
+                      this.open = true;
+                      break;
+                  }
+                  if (this.filteredOptions.length > 0) {
+                      super.keydownHandler(e);
+                  }
+                  if (this.isAutocompleteInline) {
+                      this.setInlineSelection();
+                  }
                   if (this.open && this.valueUpdatedByInput) {
                       this.valueUpdatedByInput = false;
                   }
                   break;
               default:
-                  return returnValue;
+                  return true;
+          }
+          return true;
+      }
+      /**
+       * @internal
+       */
+      keyupHandler(e) {
+          const key = e.key;
+          switch (key) {
+              case 'ArrowLeft':
+              case 'ArrowRight':
+              case 'Backspace':
+              case 'Delete':
+              case 'Home':
+              case 'End': {
+                  this.filter = this.control.value;
+                  this.selectedIndex = -1;
+                  this.filterOptions();
+                  break;
+              }
           }
-          return returnValue;
+          return true;
       }
-      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+      /**
+       * @internal
+       */
       focusoutHandler(e) {
-          const returnValue = super.focusoutHandler(e);
+          this.syncValue();
+          if (this.open) {
+              const focusTarget = e.relatedTarget;
+              if (this.isSameNode(focusTarget)) {
+                  this.focus();
+              }
+          }
           this.open = false;
           this.emitChangeIfValueUpdated();
-          return returnValue;
+          return true;
+      }
+      /**
+       * Reset the element to its first selectable option when its parent form is reset.
+       *
+       * @internal
+       */
+      formResetCallback() {
+          super.formResetCallback();
+          this.setDefaultSelectedOption();
+          this.updateValue();
+      }
+      /** {@inheritDoc (FormAssociated:interface).validate} */
+      validate() {
+          super.validate(this.control);
+      }
+      /**
+       * Set the default selected options at initialization or reset.
+       *
+       * @internal
+       * @remarks
+       * Overrides `Listbox.setDefaultSelectedOption`
+       */
+      setDefaultSelectedOption() {
+          if (this.$fastController.isConnected && this.options) {
+              const selectedIndex = this.options.findIndex(el => el.getAttribute('selected') !== null || el.selected);
+              this.selectedIndex = selectedIndex;
+              if (!this.dirtyValue && this.firstSelectedOption) {
+                  this.value = this.firstSelectedOption.text;
+              }
+              this.setSelectedOptions();
+          }
+      }
+      /**
+       * @internal
+       */
+      selectedIndexChanged(prev, next) {
+          if (this.$fastController.isConnected) {
+              const pinnedSelectedIndex = limit(-1, this.options.length - 1, next);
+              // 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);
+          }
+      }
+      /**
+       * Synchronize the `aria-disabled` property when the `disabled` property changes.
+       *
+       * @internal
+       */
+      disabledChanged(prev, next) {
+          if (super.disabledChanged) {
+              super.disabledChanged(prev, next);
+          }
+          this.ariaDisabled = this.disabled ? 'true' : 'false';
+      }
+      /**
+       * Move focus to the previous selectable option.
+       *
+       * @internal
+       * @remarks
+       * Overrides `Listbox.selectPreviousOption`
+       */
+      selectPreviousOption() {
+          if (!this.disabled && this.selectedIndex >= 0) {
+              this.selectedIndex -= 1;
+          }
+      }
+      /**
+       * @internal
+       */
+      setPositioning() {
+          // Workaround for https://github.com/microsoft/fast/issues/5123
+          if (!this.$fastController.isConnected) {
+              // Don't call setPositioning() until we're connected,
+              // since this.forcedPosition isn't initialized yet.
+              return;
+          }
+          const currentBox = this.getBoundingClientRect();
+          const viewportHeight = window.innerHeight;
+          const availableBottom = viewportHeight - currentBox.bottom;
+          if (this.forcedPosition) {
+              this.position = this.positionAttribute;
+          }
+          else if (currentBox.top > availableBottom) {
+              this.position = SelectPosition.above;
+          }
+          else {
+              this.position = SelectPosition.below;
+          }
+          this.positionAttribute = this.forcedPosition
+              ? this.positionAttribute
+              : this.position;
+          this.maxHeight = this.position === SelectPosition.above
+              ? Math.trunc(currentBox.top)
+              : Math.trunc(availableBottom);
       }
+      /**
+       * Focus the control and scroll the first selected option into view.
+       *
+       * @internal
+       * @remarks
+       * Overrides: `Listbox.focusAndScrollOptionIntoView`
+       */
       focusAndScrollOptionIntoView() {
           if (this.open) {
-              super.focusAndScrollOptionIntoView();
+              if (this.contains(document.activeElement)) {
+                  this.control.focus();
+                  if (this.firstSelectedOption) {
+                      requestAnimationFrame(() => {
+                          this.firstSelectedOption?.scrollIntoView({
+                              block: 'nearest'
+                          });
+                      });
+                  }
+              }
           }
       }
       openChanged() {
-          super.openChanged();
+          if (this.open) {
+              this.ariaControls = this.listboxId;
+              this.ariaExpanded = 'true';
+              this.setPositioning();
+              this.focusAndScrollOptionIntoView();
+              // focus is directed to the element when `open` is changed programmatically
+              DOM.queueUpdate(() => this.focus());
+          }
+          else {
+              this.ariaControls = '';
+              this.ariaExpanded = 'false';
+          }
           if (this.dropdownButton) {
               this.dropdownButton.checked = this.open;
           }
       }
+      placeholderChanged() {
+          if (this.proxy instanceof HTMLInputElement) {
+              this.proxy.placeholder = this.placeholder ?? '';
+          }
+      }
+      /**
+       * Ensure that the entire list of options is used when setting the selected property.
+       * @internal
+       * @remarks
+       * Overrides: `Listbox.selectedOptionsChanged`
+       */
+      selectedOptionsChanged(_, next) {
+          if (this.$fastController.isConnected) {
+              this._options.forEach(o => {
+                  o.selected = next.includes(o);
+              });
+          }
+      }
+      positionChanged(_, next) {
+          this.positionAttribute = next;
+          this.setPositioning();
+      }
       regionChanged(_prev, _next) {
           if (this.region && this.controlWrapper) {
               this.region.anchorElement = this.controlWrapper;
@@ -21230,6 +21598,49 @@
       maxHeightChanged() {
           this.updateListboxMaxHeightCssVariable();
       }
+      /**
+       * Sets the value and to match the first selected option.
+       */
+      updateValue(shouldEmit) {
+          if (this.$fastController.isConnected) {
+              this.value = this.firstSelectedOption?.text || this.control.value;
+              this.control.value = this.value;
+          }
+          if (shouldEmit) {
+              this.$emit('change');
+          }
+      }
+      /**
+       * Focus and set the content of the control based on the first selected option.
+       */
+      setInputToSelection() {
+          if (this.firstSelectedOption) {
+              this.control.value = this.firstSelectedOption.text;
+              this.control.focus();
+          }
+      }
+      /**
+       * Focus, set and select the content of the control based on the first selected option.
+       */
+      setInlineSelection() {
+          if (this.firstSelectedOption) {
+              this.setInputToSelection();
+              this.control.setSelectionRange(this.filter.length, this.control.value.length, 'backward');
+          }
+      }
+      clearSelectionRange() {
+          const controlValueLength = this.control.value.length;
+          this.control.setSelectionRange(controlValueLength, controlValueLength);
+      }
+      /**
+       * Determines if a value update should involve emitting a change event, then updates the value.
+       */
+      syncValue() {
+          const newValue = this.selectedIndex > -1
+              ? this.firstSelectedOption?.text
+              : this.control.value;
+          this.updateValue(this.value !== newValue);
+      }
       updateListboxMaxHeightCssVariable() {
           if (this.listbox) {
               this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
@@ -21266,27 +21677,51 @@
   __decorate$1([
       attr
   ], Combobox.prototype, "appearance", void 0);
-  __decorate$1([
-      observable
-  ], Combobox.prototype, "dropdownButton", void 0);
   __decorate$1([
       attr({ attribute: 'error-text' })
   ], Combobox.prototype, "errorText", void 0);
   __decorate$1([
       attr({ attribute: 'error-visible', mode: 'boolean' })
   ], Combobox.prototype, "errorVisible", void 0);
+  __decorate$1([
+      attr({ attribute: 'autocomplete', mode: 'fromView' })
+  ], Combobox.prototype, "autocomplete", void 0);
+  __decorate$1([
+      attr({ attribute: 'position' })
+  ], Combobox.prototype, "positionAttribute", void 0);
+  __decorate$1([
+      attr({ attribute: 'open', mode: 'boolean' })
+  ], Combobox.prototype, "open", void 0);
+  __decorate$1([
+      attr
+  ], Combobox.prototype, "placeholder", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "position", void 0);
   __decorate$1([
       observable
   ], Combobox.prototype, "region", void 0);
   __decorate$1([
       observable
   ], Combobox.prototype, "controlWrapper", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "control", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "listbox", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "dropdownButton", void 0);
   __decorate$1([
       observable
   ], Combobox.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "maxHeight", void 0);
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
-      baseClass: Combobox$1,
+      baseClass: FormAssociatedCombobox,
       template: template$u,
       styles: styles$D,
       shadowOptions: {
@@ -21324,6 +21759,7 @@
         ${errorTextTemplate}
     `
   });
+  applyMixins(Combobox, StartEnd, DelegatesARIACombobox);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 
   /**