@ni/nimble-components 32.2.1 → 32.2.3

package/dist/all-components-bundle.js

@@ -17143,6 +17143,7 @@
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
             cursor: pointer;
+            white-space: nowrap;
             outline: none;
             border: none;
             ${
@@ -67918,10 +67919,6 @@ focus outline in that case.
       get pageSize() {
           return this._pageSize;
       }
-      get rowHeight() {
-          return (parseFloat(controlHeight.getValueFor(this.table))
-              + 2 * parseFloat(borderWidth.getValueFor(this.table)));
-      }
       constructor(table, tanStackTable) {
           this.visibleItems = [];
           this.scrollHeight = 0;
@@ -67962,6 +67959,13 @@ focus outline in that case.
       scrollToIndex(index, options) {
           this.virtualizer?.scrollToIndex(index, options);
       }
+      updateRowHeight() {
+          this.updatePageSize();
+          if (this.virtualizer) {
+              this.updateVirtualizer();
+              this.virtualizer.measure();
+          }
+      }
       updateVirtualizer() {
           const options = this.createVirtualizerOptions();
           if (this.virtualizer) {
@@ -67974,7 +67978,7 @@ focus outline in that case.
           this.handleVirtualizerChange();
       }
       createVirtualizerOptions() {
-          const rowHeight = this.rowHeight;
+          const rowHeight = this.table.rowHeight;
           return {
               count: this.tanStackTable.getRowModel().rows.length,
               getScrollElement: () => {
@@ -68016,7 +68020,7 @@ focus outline in that case.
           this.rowContainerYOffset = rowContainerYOffset;
       }
       updatePageSize() {
-          this._pageSize = Math.round(this.table.viewport.clientHeight / this.rowHeight);
+          this._pageSize = Math.round(this.table.viewport.clientHeight / this.table.rowHeight);
       }
   }
   __decorate$1([
@@ -70130,6 +70134,12 @@ focus outline in that case.
           }
           return '';
       }
+      /**
+       * @internal
+       */
+      get rowHeight() {
+          return this._rowHeight;
+      }
       constructor() {
           super();
           this.selectionMode = TableRowSelectionMode.none;
@@ -70183,6 +70193,7 @@ focus outline in that case.
           this.tableValidator = new TableValidator();
           this.tableUpdateTracker = new TableUpdateTracker(this);
           this.columnNotifiers = [];
+          this._rowHeight = 0;
           this.isInitialized = false;
           // Programmatically updating the selection state of a checkbox fires the 'change' event.
           // Therefore, selection change events that occur due to programmatically updating
@@ -70192,6 +70203,16 @@ focus outline in that case.
           // Map from the external slot name to the record ID of the row that should have the slot
           // and the unique slot name that the slot should be slotted into.
           this.requestedSlots = new Map();
+          this.borderWidthSubscriber = {
+              handleChange: () => {
+                  this.updateRowHeight();
+              }
+          };
+          this.controlHeightSubscriber = {
+              handleChange: () => {
+                  this.updateRowHeight();
+              }
+          };
           this.actionMenuSlots = [];
           this.onViewPortScroll = (event) => {
               this.scrollX = event.target.scrollLeft;
@@ -70299,6 +70320,7 @@ focus outline in that case.
       connectedCallback() {
           super.connectedCallback();
           this.initialize();
+          this.updateRowHeight();
           this.virtualizer.connect();
           this.viewport.addEventListener('scroll', this.onViewPortScroll, {
               passive: true
@@ -70307,6 +70329,8 @@ focus outline in that case.
           window.addEventListener('keydown', this.onKeyDown);
           window.addEventListener('keyup', this.onKeyUp);
           window.addEventListener('blur', this.onBlur);
+          borderWidth.subscribe(this.borderWidthSubscriber, this);
+          controlHeight.subscribe(this.controlHeightSubscriber, this);
       }
       disconnectedCallback() {
           super.disconnectedCallback();
@@ -70316,6 +70340,8 @@ focus outline in that case.
           window.removeEventListener('keydown', this.onKeyDown);
           window.removeEventListener('keyup', this.onKeyUp);
           window.removeEventListener('blur', this.onBlur);
+          borderWidth.unsubscribe(this.borderWidthSubscriber);
+          controlHeight.unsubscribe(this.controlHeightSubscriber);
       }
       checkValidity() {
           return this.tableValidator.isValid();
@@ -70959,6 +70985,11 @@ focus outline in that case.
           }
           return tanstackSelectionState;
       }
+      updateRowHeight() {
+          this._rowHeight = parseFloat(controlHeight.getValueFor(this))
+              + 2 * parseFloat(borderWidth.getValueFor(this));
+          this.virtualizer?.updateRowHeight();
+      }
   };
   __decorate$1([
       attr({ attribute: 'id-field-name' })