@ni/nimble-components 32.1.1 → 32.2.0

package/dist/all-components-bundle.js

@@ -18745,6 +18745,10 @@
       name: 'arrow_down_left_and_arrow_up_right_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.007 13.171 2.247-2.276-2.284-.447 5.246-1.732-1.753 5.217-.456-2.284-2.26 2.291zM13.194 2l-2.261 2.29-.456-2.283-1.753 5.217 5.246-1.732-2.284-.447 2.247-2.276z" class="cls-1"/></svg>`,
   };
+  const arrowDownRectangle16X16 = {
+      name: 'arrow_down_rectangle_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.018 11 11 5.1 8.996 6.412 9 2H7v4.387L5 5.1zm0 0L11 5.1 8.996 6.412 9 2H7v4.387L5 5.1zM14 9v5H2V9h3.871l.512 1H3v3h10v-3H9.643l.506-1z" class="cls-1"/></svg>`,
+  };
   const arrowDownRightAndArrowUpLeft16X16 = {
       name: 'arrow_down_right_and_arrow_up_left_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m13.171 13.933-2.276-2.247-.447 2.284-1.732-5.246 5.217 1.753-2.284.456 2.291 2.26ZM2 2.746l2.29 2.261-2.283.456 5.217 1.753L5.492 1.97l-.447 2.284-2.276-2.247Z" class="cls-1"/></svg>`,
@@ -18813,6 +18817,10 @@
       name: 'arrow_up_left_and_arrow_down_right_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m4.195 4.977-.451 2.296L2 2l5.256 1.762-2.301.458 6.849 6.803.452-2.296L14 14l-5.256-1.762 2.301-.458z" class="cls-1"/></svg>`,
   };
+  const arrowUpRectangle16X16 = {
+      name: 'arrow_up_rectangle_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.982 2 5 7.9l2.004-1.312L7 11h2V6.613L11 7.9zm0 0L5 7.9l2.004-1.312L7 11h2V6.613L11 7.9zM14 9v5H2V9h4v1H3v3h10v-3h-3V9z" class="cls-1"/></svg>`,
+  };
   const arrowUpRightAndArrowDownLeft16X16 = {
       name: 'arrow_up_right_and_arrow_down_left_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m11.023 4.195-2.296-.45L14 2l-1.762 5.256-.458-2.301-6.803 6.85 2.296.45L2 14l1.762-5.256.458 2.301z" class="cls-1"/></svg>`,
@@ -22344,6 +22352,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-arrow-down-left-and-arrow-up-right', IconArrowDownLeftAndArrowUpRight);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowDownRectangle' icon
+   */
+  class IconArrowDownRectangle extends Icon {
+      constructor() {
+          super(arrowDownRectangle16X16);
+      }
+  }
+  registerIcon('icon-arrow-down-rectangle', IconArrowDownRectangle);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -22538,6 +22558,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-arrow-up-left-and-arrow-down-right', IconArrowUpLeftAndArrowDownRight);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowUpRectangle' icon
+   */
+  class IconArrowUpRectangle extends Icon {
+      constructor() {
+          super(arrowUpRectangle16X16);
+      }
+  }
+  registerIcon('icon-arrow-up-rectangle', IconArrowUpRectangle);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -66029,7 +66061,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 +66069,7 @@ focus outline in that case.
         background-color: ${fillSelectedColor};
     }
 
-    :host([selected]:hover)::before {
+    :host([selected][allow-hover]:hover)::before {
         background-color: ${fillHoverSelectedColor};
     }
 
@@ -66152,7 +66184,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 +66196,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 +66204,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 +66488,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 +66732,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 +66790,7 @@ focus outline in that case.
         position: absolute;
     }
 
-    :host(:hover)::before {
+    :host([allow-hover]:hover)::before {
         background-color: ${fillHoverColor};
     }
 
@@ -66797,11 +66836,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 +66904,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 +67000,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 +67135,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 +67161,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 +67920,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 +67978,7 @@ focus outline in that case.
               estimateSize: (_) => rowHeight,
               enableSmoothScroll: true,
               overscan: 3,
-              scrollingDelay: 5,
+              isScrollingResetDelay: 250,
               scrollToFn: elementScroll,
               observeElementOffset,
               observeElementRect,
@@ -67939,6 +67989,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 +68020,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);