@ni/nimble-components 29.7.0 → 29.7.1

package/dist/all-components-bundle.js

@@ -16280,7 +16280,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 25 Jun 2024 18:25:46 GMT
+   * Generated on Wed, 26 Jun 2024 20:04:52 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -20796,12 +20796,32 @@
         overflow-y: auto;
         width: 100%;
         --ni-private-listbox-padding: ${smallPadding};
-        max-height: calc(var(--ni-private-select-max-height) - ${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)
+            ),
+            calc(
+                var(--ni-private-listbox-available-viewport-height) -
+                    ${smallPadding}
+            )
+        );
         box-shadow: ${elevation2BoxShadow};
-        border: 1px solid ${popupBorderColor};
+        border: ${borderWidth} solid ${popupBorderColor};
         background-color: ${applicationBackgroundColor};
     }
 
+    .listbox:has(.filter-field) {
+        --ni-private-listbox-filter-height: ${controlHeight};
+    }
+
+    .listbox:has(.loading-container) {
+        --ni-private-listbox-loading-indicator-height: ${controlHeight};
+    }
+
     .listbox slot {
         display: block;
         background: transparent;
@@ -21146,6 +21166,7 @@
                 part="listbox"
                 role="listbox"
                 ?disabled="${x => x.disabled}"
+                style="--ni-private-listbox-available-viewport-height: ${x => x.availableViewportHeight}px;"
                 ${ref('listbox')}
             >
                 <slot name="option"
@@ -21203,11 +21224,11 @@
            */
           this.listboxId = uniqueId('listbox-');
           /**
-           * The max height for the listbox when opened.
+           * The space available in the viewport for the listbox when opened.
            *
            * @internal
            */
-          this.maxHeight = 0;
+          this.availableViewportHeight = 0;
           this.valueUpdatedByInput = false;
           this._value = '';
           this.filter = '';
@@ -21587,7 +21608,7 @@
           this.positionAttribute = this.forcedPosition
               ? this.positionAttribute
               : this.position;
-          this.maxHeight = this.position === SelectPosition.above
+          this.availableViewportHeight = this.position === SelectPosition.above
               ? Math.trunc(currentBox.top)
               : Math.trunc(availableBottom);
       }
@@ -21665,9 +21686,6 @@
       ariaLabelChanged(_oldValue, _newValue) {
           this.updateInputAriaLabel();
       }
-      maxHeightChanged() {
-          this.updateListboxMaxHeightCssVariable();
-      }
       /**
        * Sets the value and to match the first selected option.
        */
@@ -21711,11 +21729,6 @@
               : this.control.value;
           this.updateValue(this.value !== newValue);
       }
-      updateListboxMaxHeightCssVariable() {
-          if (this.listbox) {
-              this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
-          }
-      }
       updateInputAriaLabel() {
           const inputElement = this.shadowRoot?.querySelector('.selected-value');
           if (this.ariaLabel) {
@@ -21788,7 +21801,7 @@
   ], Combobox.prototype, "hasOverflow", void 0);
   __decorate$1([
       observable
-  ], Combobox.prototype, "maxHeight", void 0);
+  ], Combobox.prototype, "availableViewportHeight", void 0);
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
@@ -59805,6 +59818,7 @@ img.ProseMirror-separator {
                     part="listbox"
                     role="listbox"
                     ?disabled="${x => x.disabled}"
+                    style="--ni-private-listbox-available-viewport-height: ${x => x.availableViewportHeight}px;"
                     ${ref('listbox')}
                 >
                     ${when(x => x.filterMode !== FilterMode.none, html `
@@ -59916,11 +59930,11 @@ img.ProseMirror-separator {
            */
           this.filter = '';
           /**
-           * The max height for the listbox when opened.
+           * The space available in the viewport for the listbox when opened.
            *
            * @internal
            */
-          this.maxHeight = 0;
+          this.availableViewportHeight = 0;
           this._value = '';
           this.forcedPosition = false;
       }
@@ -60616,10 +60630,9 @@ img.ProseMirror-separator {
           this.positionAttribute = this.forcedPosition
               ? this.positionAttribute
               : this.position;
-          this.maxHeight = this.position === SelectPosition.above
+          this.availableViewportHeight = this.position === SelectPosition.above
               ? Math.trunc(currentBox.top)
               : Math.trunc(availableBottom);
-          this.updateListboxMaxHeightCssVariable();
       }
       updateAdjacentSeparatorState(element) {
           const previousElement = this.getPreviousVisibleOptionOrGroup(element);
@@ -60782,9 +60795,6 @@ img.ProseMirror-separator {
           };
           this.$emit('filter-input', eventDetail, { bubbles: true });
       }
-      maxHeightChanged() {
-          this.updateListboxMaxHeightCssVariable();
-      }
       initializeOpenState() {
           this.setActiveOption(this.selectedIndex);
           this.ariaControls = this.listboxId;
@@ -60792,11 +60802,6 @@ img.ProseMirror-separator {
           this.setPositioning();
           this.focusAndScrollOptionIntoView();
       }
-      updateListboxMaxHeightCssVariable() {
-          if (this.listbox) {
-              this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
-          }
-      }
   }
   __decorate$1([
       attr
@@ -60851,7 +60856,7 @@ img.ProseMirror-separator {
   ], Select.prototype, "filter", void 0);
   __decorate$1([
       observable
-  ], Select.prototype, "maxHeight", void 0);
+  ], Select.prototype, "availableViewportHeight", void 0);
   __decorate$1([
       volatile
   ], Select.prototype, "collapsible", null);