@ni/spright-components 4.1.0 → 4.1.2

package/dist/all-components-bundle.js

@@ -22107,7 +22107,12 @@ so this becomes the fallback color for the slot */ ''}
 
     @keyframes ni-private-drawer-slide-in-right-keyframes {
         0% {
-            transform: translate(100%);
+            ${
+/*
+    Why 95% instead of 100%? See the following Safari bug:
+    https://bugs.webkit.org/show_bug.cgi?id=279148
+*/ ''}
+            transform: translate(95%);
         }
         100% {
             transform: translate(0%);
@@ -67913,10 +67918,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;
@@ -67957,6 +67958,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) {
@@ -67969,7 +67977,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: () => {
@@ -68011,7 +68019,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([
@@ -70125,6 +70133,12 @@ focus outline in that case.
           }
           return '';
       }
+      /**
+       * @internal
+       */
+      get rowHeight() {
+          return this._rowHeight;
+      }
       constructor() {
           super();
           this.selectionMode = TableRowSelectionMode.none;
@@ -70178,6 +70192,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
@@ -70187,6 +70202,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;
@@ -70294,6 +70319,7 @@ focus outline in that case.
       connectedCallback() {
           super.connectedCallback();
           this.initialize();
+          this.updateRowHeight();
           this.virtualizer.connect();
           this.viewport.addEventListener('scroll', this.onViewPortScroll, {
               passive: true
@@ -70302,6 +70328,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();
@@ -70311,6 +70339,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();
@@ -70954,6 +70984,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' })