@ni/nimble-components 29.7.7 → 29.7.8

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 Mon, 08 Jul 2024 22:30:19 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);