@ni/nimble-components 29.7.7 → 29.7.9

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 08 Jul 2024 20:22:42 GMT
+   * Generated on Wed, 10 Jul 2024 15:33:57 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -20747,6 +20747,7 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
+  // prettier-ignore
   const styles$J = css `
     ${display('inline-flex')}
 
@@ -20858,18 +20859,23 @@ so this becomes the fallback color for the slot */ ''}
         flex-direction: column;
         overflow-y: auto;
         width: 100%;
+        --ni-private-listbox-visible-option-count: 10.5;
+        --ni-private-listbox-anchor-element-gap: ${smallPadding};
         --ni-private-listbox-padding: ${smallPadding};
         --ni-private-listbox-filter-height: 0px;
         --ni-private-listbox-loading-indicator-height: 0px;
         max-height: min(
             calc(
-                ${smallPadding} + 2 * ${borderWidth} + ${controlHeight} * 10.5 +
-                    var(--ni-private-listbox-filter-height) +
-                    var(--ni-private-listbox-loading-indicator-height)
+                var(--ni-private-listbox-anchor-element-gap) + 
+                2 * ${borderWidth} + 
+                var(--ni-private-listbox-padding) +
+                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +
+                var(--ni-private-listbox-filter-height) +
+                var(--ni-private-listbox-loading-indicator-height)
             ),
             calc(
-                var(--ni-private-listbox-available-viewport-height) -
-                    ${smallPadding}
+                var(--ni-private-listbox-available-viewport-height) - 
+                var(--ni-private-listbox-anchor-element-gap)
             )
         );
         box-shadow: ${elevation2BoxShadow};
@@ -44176,8 +44182,9 @@ img.ProseMirror-separator {
     }
 
     .listbox {
+        --ni-private-listbox-visible-option-count: 5.5;
+        --ni-private-listbox-anchor-element-gap: 0px;
         min-width: ${menuMinWidth};
-        max-height: calc(5.5 * ${controlHeight});
     }
 `;
 
@@ -44201,6 +44208,8 @@ img.ProseMirror-separator {
                 role="listbox"
                 @click="${(x, c) => x.clickHandler(c.event)}"
                 ?disabled="${x => x.disabled}"
+                style="--ni-private-listbox-available-viewport-height: ${x => x.availableViewportHeight}px;"
+                ${ref('listbox')}
             >
                 <slot name="option"
                     ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
@@ -44230,6 +44239,12 @@ img.ProseMirror-separator {
   class RichTextMentionListbox extends ListboxElement {
       constructor() {
           super(...arguments);
+          /**
+           * The space available in the viewport for the listbox when opened.
+           *
+           * @internal
+           */
+          this.availableViewportHeight = 0;
           /**
            * @internal
            */
@@ -44274,6 +44289,8 @@ img.ProseMirror-separator {
        * @public
        */
       show(options) {
+          const listboxTop = options.anchorNode.getBoundingClientRect().bottom;
+          this.availableViewportHeight = Math.trunc(window.innerHeight - listboxTop);
           this.filter = options.filter;
           this.anchorElement = options.anchorNode;
           this.setOpen(true);
@@ -44299,7 +44316,8 @@ img.ProseMirror-separator {
                       href: this.firstSelectedOption.value,
                       displayName: this.firstSelectedOption.text
                   };
-                  this.emitMentionSelected(mentionDetail);
+                  this.$emit('mention-selected', mentionDetail);
+                  this.setOpen(false);
                   return true;
               }
               case keyEscape: {
@@ -44366,7 +44384,8 @@ img.ProseMirror-separator {
               href: capturedListOption.value,
               displayName: capturedListOption.text
           };
-          this.emitMentionSelected(mentionDetail);
+          this.$emit('mention-selected', mentionDetail);
+          this.setOpen(false);
           return true;
       }
       /**
@@ -44424,10 +44443,6 @@ img.ProseMirror-separator {
               });
           }
       }
-      emitMentionSelected(mentionDetail) {
-          this.$emit('mention-selected', mentionDetail);
-          this.setOpen(false);
-      }
       setOpen(value) {
           this.open = value;
       }
@@ -44438,6 +44453,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], RichTextMentionListbox.prototype, "region", void 0);
+  __decorate$1([
+      observable
+  ], RichTextMentionListbox.prototype, "availableViewportHeight", void 0);
   __decorate$1([
       observable
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
@@ -60056,7 +60074,7 @@ img.ProseMirror-separator {
               }
               newValue = this.firstSelectedOption?.value ?? newValue;
           }
-          if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
+          if (prev !== newValue) {
               this._value = newValue;
               super.valueChanged(prev, newValue);
               Observable.notify(this, 'value');
@@ -60145,12 +60163,12 @@ img.ProseMirror-separator {
           }
           const previousSelectedIndex = this.selectedIndex;
           super.clickHandler(e);
-          this.open = this.collapsible && !this.open;
-          if (!this.open
+          if (this.open
               && this.selectedIndex !== previousSelectedIndex
               && optionClicked) {
               this.updateValue(true);
           }
+          this.open = this.collapsible && !this.open;
       }
       /**
        * Updates the value when an option's value changes.
@@ -60331,6 +60349,7 @@ img.ProseMirror-separator {
               return true;
           }
           let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
+          let commitValueThenClose = false;
           switch (key) {
               case keySpace: {
                   // when dropdown is open allow user to enter a space for filter text
@@ -60357,8 +60376,13 @@ img.ProseMirror-separator {
                       || this.filteredOptions.every(o => o.disabled)) {
                       return false;
                   }
-                  this.open = !this.open;
-                  if (!this.open) {
+                  if (this.open) {
+                      commitValueThenClose = true;
+                  }
+                  else {
+                      this.open = true;
+                  }
+                  if (commitValueThenClose) {
                       this.focus();
                   }
                   break;
@@ -60381,11 +60405,16 @@ img.ProseMirror-separator {
                   break;
               }
           }
-          if (!this.open && this.selectedIndex !== currentActiveIndex) {
-              this.selectedIndex = currentActiveIndex;
+          if (!this.open || commitValueThenClose) {
+              if (this.selectedIndex !== currentActiveIndex) {
+                  this.selectedIndex = currentActiveIndex;
+              }
+              if (initialSelectedIndex !== this.selectedIndex) {
+                  this.updateValue(true);
+              }
           }
-          if (!this.open && initialSelectedIndex !== this.selectedIndex) {
-              this.updateValue(true);
+          if (commitValueThenClose) {
+              this.open = false;
           }
           return !(key === keyArrowDown || key === keyArrowUp);
       }