@ni/nimble-components 28.0.0 → 28.0.2

package/dist/all-components-bundle.js

@@ -5208,7 +5208,7 @@
    * @param array - the array to test
    * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
    */
-  function findLastIndex(array, predicate) {
+  function findLastIndex$1(array, predicate) {
       let k = array.length;
       while (k--) {
           if (predicate(array[k], k, array)) {
@@ -8234,7 +8234,7 @@
        */
       selectLastOption() {
           if (!this.disabled) {
-              this.selectedIndex = findLastIndex(this.options, o => !o.disabled);
+              this.selectedIndex = findLastIndex$1(this.options, o => !o.disabled);
           }
       }
       /**
@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 06 May 2024 18:46:24 GMT
+   * Generated on Tue, 07 May 2024 16:11:49 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16696,6 +16696,22 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
+  /**
+   * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
+   *
+   * @param array - the array to test
+   * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
+   */
+  function findLastIndex(array, predicate) {
+      let k = array.length;
+      while (k--) {
+          if (predicate(array[k], k, array)) {
+              return k;
+          }
+      }
+      return -1;
+  }
+
   /**
    * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
    * and should include all non-deprecated and non-experimental Standard events
@@ -20588,7 +20604,7 @@
         position: relative;
         justify-content: center;
         ${userSelectNone}
-        min-width: 250px;
+        min-width: ${menuMinWidth};
         outline: none;
         vertical-align: top;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
@@ -24861,6 +24877,15 @@
            * by the filtering process.
            */
           this.visuallyHidden = false;
+          /**
+           * @internal
+           * This attribute is used to control the visual selected state of an option. This
+           * is handled independently of the public 'selected' attribute, as 'selected' is
+           * representative of the current value of the container control. However, while
+           * a dropdown is open users can navigate through the options (requiring visual
+           * updates) without changing the value of the container control.
+           */
+          this.activeOption = false;
           /** @internal */
           this.hasOverflow = false;
       }
@@ -24890,6 +24915,9 @@
   __decorate$1([
       attr({ attribute: 'visually-hidden', mode: 'boolean' })
   ], ListOption.prototype, "visuallyHidden", void 0);
+  __decorate$1([
+      attr({ attribute: 'active-option', mode: 'boolean' })
+  ], ListOption.prototype, "activeOption", void 0);
   __decorate$1([
       observable
   ], ListOption.prototype, "hasOverflow", void 0);
@@ -58677,6 +58705,18 @@ img.ProseMirror-separator {
         overflow: auto;
     }
 
+    ::slotted([role='option']) {
+        background-color: transparent;
+    }
+
+    ::slotted([role='option'][active-option]) {
+        background-color: ${fillSelectedColor};
+    }
+
+    ::slotted([role='option'][active-option]:hover) {
+        background-color: ${fillHoverSelectedColor};
+    }
+
     .no-results-label {
         color: ${placeholderFontColor};
         height: ${controlHeight};
@@ -58885,7 +58925,9 @@ img.ProseMirror-separator {
       connectedCallback() {
           super.connectedCallback();
           this.forcedPosition = !!this.positionAttribute;
-          this.initializeOpenState();
+          if (this.open) {
+              this.initializeOpenState();
+          }
       }
       get value() {
           Observable.track(this, 'value');
@@ -58984,7 +59026,7 @@ img.ProseMirror-separator {
           }
           super.clickHandler(e);
           this.open = this.collapsible && !this.open;
-          if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+          if (!this.open && this.selectedIndex !== -1) {
               this.updateValue(true);
           }
       }
@@ -59094,22 +59136,19 @@ img.ProseMirror-separator {
        */
       inputHandler(e) {
           this.filter = this.filterInput?.value ?? '';
-          this.clearSelection();
           this.filterOptions();
-          if (this.filteredOptions.length > 0) {
-              const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
-              if (enabledOptions.length > 0) {
-                  enabledOptions[0].selected = true;
-              }
-              else {
-                  // only filtered option is disabled
-                  this.selectedOptions = [];
-                  this.selectedIndex = -1;
-              }
+          const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
+          let activeOptionIndex = this.filter !== ''
+              ? this.openActiveIndex ?? this.selectedIndex
+              : this.selectedIndex;
+          if (enabledOptions.length > 0
+              && !enabledOptions.find(o => o === this.options[activeOptionIndex])) {
+              activeOptionIndex = this.options.indexOf(enabledOptions[0]);
           }
-          else if (this.committedSelectedOption) {
-              this.committedSelectedOption.selected = true;
+          else if (enabledOptions.length === 0) {
+              activeOptionIndex = -1;
           }
+          this.setActiveOption(activeOptionIndex);
           if (e.inputType.includes('deleteContent') || !this.filter.length) {
               return true;
           }
@@ -59130,11 +59169,13 @@ img.ProseMirror-separator {
               return true;
           }
           if (!this.options?.includes(focusTarget)) {
+              let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
               this.open = false;
-              if (this.selectedIndex === -1) {
-                  this.selectedIndex = this.indexWhenOpened;
+              if (currentActiveIndex === -1) {
+                  currentActiveIndex = this.selectedIndex;
               }
-              if (this.indexWhenOpened !== this.selectedIndex) {
+              if (this.selectedIndex !== currentActiveIndex) {
+                  this.selectedIndex = currentActiveIndex;
                   this.updateValue(true);
               }
           }
@@ -59144,11 +59185,13 @@ img.ProseMirror-separator {
        * @internal
        */
       keydownHandler(e) {
+          const initialSelectedIndex = this.selectedIndex;
           super.keydownHandler(e);
           const key = e.key;
           if (e.ctrlKey || e.shiftKey) {
               return true;
           }
+          let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
           switch (key) {
               case keySpace: {
                   // when dropdown is open allow user to enter a space for filter text
@@ -59189,24 +59232,16 @@ img.ProseMirror-separator {
                       e.preventDefault();
                       this.open = false;
                   }
-                  if (this.selectedIndex !== this.indexWhenOpened) {
-                      this.options[this.selectedIndex].selected = false;
-                      this.selectedIndex = this.indexWhenOpened;
-                  }
+                  currentActiveIndex = this.selectedIndex;
                   this.focus();
                   break;
               }
-              case keyTab: {
-                  if (this.collapsible && this.open) {
-                      e.preventDefault();
-                      this.open = false;
-                  }
-                  return true;
-              }
           }
-          if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+          if (!this.open && this.selectedIndex !== currentActiveIndex) {
+              this.selectedIndex = currentActiveIndex;
+          }
+          if (!this.open && initialSelectedIndex !== this.selectedIndex) {
               this.updateValue(true);
-              this.indexWhenOpened = this.selectedIndex;
           }
           return !(key === keyArrowDown || key === keyArrowUp);
       }
@@ -59224,8 +59259,28 @@ img.ProseMirror-separator {
           // implementation handles skipping non-selected disabled options for the initial
           // selected value.
           this.setSelectedOptions();
+          if (this.open) {
+              this.setActiveOption(this.selectedIndex);
+          }
           this.updateValue();
       }
+      /**
+       * @internal
+       * Fork of Listbox implementation, so that the selectedIndex is not changed while the dropdown
+       * is open.
+       */
+      typeaheadBufferChanged(_, __) {
+          if (this.$fastController.isConnected) {
+              const typeaheadMatches = this.getTypeaheadMatches();
+              if (typeaheadMatches.length) {
+                  const activeOptionIndex = this.options.indexOf(typeaheadMatches[0]);
+                  if (!(this.open && this.filterMode !== FilterMode.none)) {
+                      this.setActiveOption(activeOptionIndex);
+                  }
+              }
+              this.typeaheadExpired = false;
+          }
+      }
       /**
        * Synchronize the `aria-disabled` property when the `disabled` property changes.
        *
@@ -59254,30 +59309,52 @@ img.ProseMirror-separator {
               this.selectedIndex = 0;
           }
       }
+      /**
+       * @internal
+       */
       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++) {
+          const startIndex = this.openActiveIndex ?? this.selectedIndex;
+          for (let i = startIndex + 1; i < this.options.length; i++) {
               const listOption = this.options[i];
               if (isNimbleListOption(listOption)
                   && isOptionSelectable(listOption)) {
-                  this.selectedIndex = i;
+                  this.setActiveOption(i);
                   break;
               }
           }
       }
+      /**
+       * @internal
+       */
       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--) {
+          const startIndex = this.openActiveIndex ?? this.selectedIndex;
+          for (let i = startIndex - 1; i >= 0; i--) {
               const listOption = this.options[i];
               if (isNimbleListOption(listOption)
                   && isOptionSelectable(listOption)) {
-                  this.selectedIndex = i;
+                  this.setActiveOption(i);
                   break;
               }
           }
       }
+      /**
+       * @internal
+       */
+      selectFirstOption() {
+          const newActiveOptionIndex = this.options.findIndex(o => isNimbleListOption(o) && isOptionSelectable(o));
+          this.setActiveOption(newActiveOptionIndex);
+      }
+      /**
+       * @internal
+       */
+      selectLastOption() {
+          const newActiveOptionIndex = findLastIndex(this.options, o => isNimbleListOption(o) && isOptionSelectable(o));
+          this.setActiveOption(newActiveOptionIndex);
+      }
       /**
        * @internal
        */
@@ -59310,6 +59387,11 @@ img.ProseMirror-separator {
               });
           }
       }
+      getTypeaheadMatches() {
+          const matches = super.getTypeaheadMatches();
+          // Don't allow placeholder to be matched
+          return matches.filter(o => !o.hidden && !o.disabled);
+      }
       positionChanged(_, next) {
           this.positionAttribute = next;
           this.setPositioning();
@@ -59335,9 +59417,13 @@ img.ProseMirror-separator {
           }
           if (this.open) {
               this.initializeOpenState();
-              this.indexWhenOpened = this.selectedIndex;
               return;
           }
+          const activeOption = this.options[this.openActiveIndex ?? this.selectedIndex];
+          if (isNimbleListOption(activeOption)) {
+              activeOption.activeOption = false;
+          }
+          this.openActiveIndex = undefined;
           this.filter = '';
           if (this.filterInput) {
               this.filterInput.value = '';
@@ -59404,6 +59490,40 @@ img.ProseMirror-separator {
           }
           this.committedSelectedOption = options[this.selectedIndex];
       }
+      setActiveOption(newActiveIndex) {
+          const activeOption = this.options[newActiveIndex];
+          if (this.open) {
+              if (isNimbleListOption(activeOption)) {
+                  activeOption.activeOption = true;
+              }
+              const previousActiveIndex = this.openActiveIndex ?? this.selectedIndex;
+              const previousActiveOption = this.options[previousActiveIndex];
+              if (previousActiveIndex !== newActiveIndex
+                  && isNimbleListOption(previousActiveOption)) {
+                  previousActiveOption.activeOption = false;
+              }
+              this.openActiveIndex = newActiveIndex;
+              this.focusAndScrollActiveOptionIntoView();
+          }
+          else {
+              this.selectedIndex = newActiveIndex;
+          }
+          this.ariaActiveDescendant = activeOption?.id ?? '';
+      }
+      focusAndScrollActiveOptionIntoView() {
+          const optionToFocus = this.options[this.openActiveIndex ?? this.selectedIndex];
+          // Copied from FAST: To ensure that the browser handles both `focus()` and
+          // `scrollIntoView()`, the timing here needs to guarantee that they happen on
+          // different frames. Since this function is typically called from the `openChanged`
+          // observer, `DOM.queueUpdate` causes the calls to be grouped into the same frame.
+          // To prevent this, `requestAnimationFrame` is used instead of `DOM.queueUpdate`.
+          if (optionToFocus !== undefined && this.contains(optionToFocus)) {
+              optionToFocus.focus();
+              requestAnimationFrame(() => {
+                  optionToFocus.scrollIntoView({ block: 'nearest' });
+              });
+          }
+      }
       committedSelectedOptionChanged() {
           this.updateDisplayValue();
       }
@@ -59499,11 +59619,6 @@ img.ProseMirror-separator {
               });
           }
       }
-      clearSelection() {
-          this.options.forEach(option => {
-              option.selected = false;
-          });
-      }
       filterChanged() {
           this.filterOptions();
       }
@@ -59511,12 +59626,8 @@ img.ProseMirror-separator {
           this.updateListboxMaxHeightCssVariable();
       }
       initializeOpenState() {
-          if (!this.open) {
-              this.ariaExpanded = 'false';
-              this.ariaControls = '';
-              return;
-          }
           this.committedSelectedOption = this.options[this.selectedIndex];
+          this.setActiveOption(this.selectedIndex);
           this.ariaControls = this.listboxId;
           this.ariaExpanded = 'true';
           this.setPositioning();