@ni/nimble-components 32.1.1 → 32.1.2

package/dist/all-components-bundle.js

@@ -66029,7 +66029,7 @@ focus outline in that case.
         position: absolute;
     }
 
-    :host([selectable]:not([selected]):hover)::before {
+    :host([selectable]:not([selected])[allow-hover]:hover)::before {
         background-color: ${fillHoverColor};
     }
 
@@ -66037,7 +66037,7 @@ focus outline in that case.
         background-color: ${fillSelectedColor};
     }
 
-    :host([selected]:hover)::before {
+    :host([selected][allow-hover]:hover)::before {
         background-color: ${fillHoverSelectedColor};
     }
 
@@ -66152,7 +66152,7 @@ focus outline in that case.
         height: ${controlHeight};
     }
 
-    :host(:hover) nimble-table-cell {
+    :host([allow-hover]:hover) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
 
@@ -66164,7 +66164,7 @@ focus outline in that case.
         --ni-private-table-cell-action-menu-display: block;
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
-            :host([selectable]:not([selected]):hover)::before {
+            :host([selectable]:not([selected])[allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.05)};
             }
 
@@ -66172,7 +66172,7 @@ focus outline in that case.
                 background-color: ${hexToRgbaCssColor(White, 0.25)};
             }
 
-            :host([selected]:hover)::before {
+            :host([selected][allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.2)};
             }
         `));
@@ -66456,6 +66456,10 @@ focus outline in that case.
            * @internal
            */
           this.animationClass = '';
+          /**
+           * @internal
+           */
+          this.allowHover = false;
           // Programmatically updating the selection state of a checkbox fires the 'change' event.
           // Therefore, selection change events that occur due to programmatically updating
           // the selection checkbox 'checked' value should be ingored.
@@ -66696,6 +66700,9 @@ focus outline in that case.
   __decorate$1([
       observable
   ], TableRow.prototype, "animationClass", void 0);
+  __decorate$1([
+      attr({ attribute: 'allow-hover', mode: 'boolean' })
+  ], TableRow.prototype, "allowHover", void 0);
   __decorate$1([
       volatile
   ], TableRow.prototype, "isTopLevelParentRow", null);
@@ -66751,7 +66758,7 @@ focus outline in that case.
         position: absolute;
     }
 
-    :host(:hover)::before {
+    :host([allow-hover]:hover)::before {
         background-color: ${fillHoverColor};
     }
 
@@ -66797,11 +66804,11 @@ focus outline in that case.
         padding-left: 0px;
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
-            :host(:hover)::before {
+            :host([allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.05)};
             }
         `), themeBehavior(Theme.dark, css `
-            :host(:hover)::before {
+            :host([allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.1)};
             }
         `));
@@ -66865,6 +66872,10 @@ focus outline in that case.
            * @internal
            */
           this.animationClass = '';
+          /**
+           * @internal
+           */
+          this.allowHover = false;
           // Programmatically updating the selection state of a checkbox fires the 'change' event.
           // Therefore, selection change events that occur due to programmatically updating
           // the selection checkbox 'checked' value should be ingored.
@@ -66957,6 +66968,9 @@ focus outline in that case.
   __decorate$1([
       observable
   ], TableGroupRow.prototype, "animationClass", void 0);
+  __decorate$1([
+      attr({ attribute: 'allow-hover', mode: 'boolean' })
+  ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
       template: template$h,
@@ -67089,6 +67103,7 @@ focus outline in that case.
                                         ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
                                         selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
                                         :resolvedRowIndex="${x => x.index}"
+                                        ?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
                                         @focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
                                         @blur="${(_, c) => c.parent.onRowBlur(c.event)}"
                                         @group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
@@ -67114,6 +67129,7 @@ focus outline in that case.
                                         ?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
                                         ?loading="${(x, c) => c.parent.tableData[x.index]?.isLoadingChildren}"
                                         :resolvedRowIndex="${x => x.index}"
+                                        ?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
                                         @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
                                         @focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
                                         @blur="${(_, c) => c.parent.onRowBlur(c.event)}"
@@ -67872,9 +67888,11 @@ focus outline in that case.
       constructor(table, tanStackTable) {
           this.visibleItems = [];
           this.scrollHeight = 0;
+          this.isScrolling = false;
           this.headerContainerMarginRight = 0;
           this.rowContainerYOffset = 0;
           this._pageSize = 0;
+          this.isScrollingTimer = 0;
           this.table = table;
           this.tanStackTable = tanStackTable;
           this.viewportResizeObserver = new ResizeObserver(entries => {
@@ -67928,7 +67946,7 @@ focus outline in that case.
               estimateSize: (_) => rowHeight,
               enableSmoothScroll: true,
               overscan: 3,
-              scrollingDelay: 5,
+              isScrollingResetDelay: 250,
               scrollToFn: elementScroll,
               observeElementOffset,
               observeElementRect,
@@ -67939,6 +67957,16 @@ focus outline in that case.
           const virtualizer = this.virtualizer;
           this.visibleItems = virtualizer.getVirtualItems();
           this.scrollHeight = virtualizer.getTotalSize();
+          this.isScrolling = virtualizer.isScrolling;
+          // There are multiple browser bugs that can result in us getting stuck thinking that we're scrolling.
+          // As a workaround, we assume scrolling stopped if we haven't received an update in 300ms.
+          // Tech debt item to remove this workaround: https://github.com/ni/nimble/issues/2382
+          window.clearTimeout(this.isScrollingTimer);
+          if (this.isScrolling) {
+              this.isScrollingTimer = window.setTimeout(() => {
+                  this.isScrolling = false;
+              }, 300);
+          }
           // We're using a separate div ('table-scroll') to represent the full height of all rows, and
           // the row container's height is only big enough to hold the virtualized rows. So we don't
           // use the TanStackVirtual-provided 'start' offset (which is in terms of the full height)
@@ -67960,6 +67988,9 @@ focus outline in that case.
   __decorate$1([
       observable
   ], Virtualizer.prototype, "scrollHeight", void 0);
+  __decorate$1([
+      observable
+  ], Virtualizer.prototype, "isScrolling", void 0);
   __decorate$1([
       observable
   ], Virtualizer.prototype, "headerContainerMarginRight", void 0);