@ni/nimble-components 30.0.2 → 30.0.4

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 17 Jul 2024 17:49:16 GMT
+   * Generated on Wed, 17 Jul 2024 21:04:43 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -65282,12 +65282,21 @@ focus outline in that case.
         grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
     }
 
+    .collapse-all-button-container {
+        display: flex;
+        min-width: ${mediumPadding};
+    }
+
     .collapse-all-button {
         height: ${controlSlimHeight};
         margin-left: ${mediumPadding};
         visibility: hidden;
     }
 
+    .collapse-all-button.hidden-size-reduced {
+        display: none;
+    }
+
     .collapse-all-button.visible {
         visibility: visible;
     }
@@ -65650,7 +65659,7 @@ focus outline in that case.
         flex: 0 0 auto;
     }
 
-    .row-front-spacer.top-level-parent {
+    .row-front-spacer.reduced-size-spacer {
         width: ${mediumPadding};
     }
 
@@ -65903,7 +65912,7 @@ focus outline in that case.
                 `)}
             </span>
         `)}
-        <span class="row-front-spacer ${x => (x.isTopLevelParentRow ? 'top-level-parent' : '')}"></span>
+        <span class="row-front-spacer ${x => (x.isTopLevelParentRow || !x.reserveCollapseSpace ? 'reduced-size-spacer' : '')}"></span>
         ${when(x => x.isParentRow, html `
             ${when(x => x.loading, html `
                 <span class="spinner-container">
@@ -65981,6 +65990,7 @@ focus outline in that case.
           this.selected = false;
           this.hideSelection = false;
           this.expanded = false;
+          this.reserveCollapseSpace = false;
           /**
            * @internal
            * */
@@ -66205,6 +66215,9 @@ focus outline in that case.
   __decorate$1([
       attr({ mode: 'boolean' })
   ], TableRow.prototype, "expanded", void 0);
+  __decorate$1([
+      attr({ attribute: 'reserve-collapse-space', mode: 'boolean' })
+  ], TableRow.prototype, "reserveCollapseSpace", void 0);
   __decorate$1([
       observable
   ], TableRow.prototype, "dataRecord", void 0);
@@ -66547,7 +66560,7 @@ focus outline in that case.
                                         ${ref('selectionCheckbox')}
                                         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
                                         tabindex="-1"
-                                        class="${x => `selection-checkbox ${x.selectionMode ? x.selectionMode : ''}`}"
+                                        class="selection-checkbox"
                                         @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
                                         title="${x => tableSelectAllLabel.getValueFor(x)}"
                                         aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
@@ -66555,19 +66568,21 @@ focus outline in that case.
                                     </${checkboxTag}>
                                 </span>
                             `)}
-                            <${buttonTag}
-                                ${ref('collapseAllButton')}
-                                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
-                                tabindex="-1"
-                                class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
-                                content-hidden
-                                appearance="${ButtonAppearance.ghost}"
-                                title="${x => tableCollapseAllLabel.getValueFor(x)}"
-                                @click="${x => x.handleCollapseAllRows()}"
-                            >
-                                <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
-                                ${x => tableCollapseAllLabel.getValueFor(x)}
-                            </${buttonTag}>
+                            <span class="collapse-all-button-container">
+                                <${buttonTag}
+                                    ${ref('collapseAllButton')}
+                                    ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                                    tabindex="-1"
+                                    class="collapse-all-button ${x => x.collapseButtonVisibility}"
+                                    content-hidden
+                                    appearance="${ButtonAppearance.ghost}"
+                                    title="${x => tableCollapseAllLabel.getValueFor(x)}"
+                                    @click="${x => x.handleCollapseAllRows()}"
+                                >
+                                    <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                                    ${x => tableCollapseAllLabel.getValueFor(x)}
+                                </${buttonTag}>
+                            </span>
                         </span>
                         <span class="column-headers-container" ${ref('columnHeadersContainer')}>
                             ${repeat(x => x.visibleColumns, html `
@@ -66651,6 +66666,7 @@ focus outline in that case.
                                         ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
                                         ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
                                         ?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
+                                        ?reserve-collapse-space="${(_, c) => c.parent.canHaveCollapsibleRows}"
                                         :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                         :columns="${(_, c) => c.parent.columns}"
                                         :isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
@@ -68106,29 +68122,31 @@ focus outline in that case.
   class MultiSelectionManager extends SelectionManagerBase {
       handleRowSelectionToggle(rowState, isSelecting, shiftKey) {
           if (shiftKey) {
-              if (this.tryUpdateRangeSelection(rowState.id)) {
+              if (this.tryUpdateRangeSelection(rowState.id, true)) {
                   // Made a range selection
                   return true;
               }
           }
-          this.shiftSelectStartRowId = rowState.id;
+          this.shiftSelectStartRowId = isSelecting ? rowState.id : undefined;
           this.previousShiftSelectRowEndId = undefined;
           this.toggleIsRowSelected(rowState, isSelecting);
           return true;
       }
       handleRowClick(rowState, shiftKey, ctrlKey) {
-          if (ctrlKey) {
-              this.shiftSelectStartRowId = rowState.id;
-              this.previousShiftSelectRowEndId = undefined;
-              this.toggleIsRowSelected(rowState);
-              return true;
-          }
           if (shiftKey) {
-              if (this.tryUpdateRangeSelection(rowState.id)) {
+              const additiveSelection = ctrlKey;
+              if (this.tryUpdateRangeSelection(rowState.id, additiveSelection)) {
                   // Made a range selection
                   return true;
               }
           }
+          if (ctrlKey) {
+              const isSelecting = rowState.selectionState !== TableRowSelectionState.selected;
+              this.shiftSelectStartRowId = isSelecting ? rowState.id : undefined;
+              this.previousShiftSelectRowEndId = undefined;
+              this.toggleIsRowSelected(rowState);
+              return true;
+          }
           this.shiftSelectStartRowId = rowState.id;
           this.previousShiftSelectRowEndId = undefined;
           return this.selectSingleRow(rowState);
@@ -68143,7 +68161,7 @@ focus outline in that case.
           this.shiftSelectStartRowId = undefined;
           this.previousShiftSelectRowEndId = undefined;
       }
-      tryUpdateRangeSelection(rowId) {
+      tryUpdateRangeSelection(rowId, additiveSelection) {
           if (this.shiftSelectStartRowId === undefined) {
               return false;
           }
@@ -68152,8 +68170,14 @@ focus outline in that case.
           if (selectionStartIndex === -1) {
               return false;
           }
-          const selectionState = this.tanStackTable.getState().rowSelection;
-          this.removePreviousRangeSelection(selectionState, selectionStartIndex, allRows);
+          let selectionState = {};
+          if (additiveSelection) {
+              // If the range selection is additive to the existing selection, start with the initial selection state
+              // and remove the previous range selection, if any. Otherwise, the range selection will start empty and
+              // only contain the new range selection.
+              selectionState = this.tanStackTable.getState().rowSelection;
+              this.removePreviousRangeSelection(selectionState, selectionStartIndex, allRows);
+          }
           this.addNewRangeSelection(selectionState, rowId, selectionStartIndex, allRows);
           this.previousShiftSelectRowEndId = rowId;
           this.tanStackTable.setRowSelection(selectionState);
@@ -69597,6 +69621,18 @@ focus outline in that case.
           return (this.selectionMode === TableRowSelectionMode.multiple
               || this.showCollapseAll);
       }
+      /**
+       * @internal
+       */
+      get collapseButtonVisibility() {
+          if (!this.canHaveCollapsibleRows) {
+              return 'hidden-size-reduced';
+          }
+          if (this.showCollapseAll) {
+              return 'visible';
+          }
+          return '';
+      }
       constructor() {
           super();
           this.selectionMode = TableRowSelectionMode.none;
@@ -69632,6 +69668,10 @@ focus outline in that case.
            * @internal
            */
           this.showCollapseAll = false;
+          /**
+           * @internal
+           */
+          this.canHaveCollapsibleRows = false;
           /**
            * @internal
            */
@@ -69955,6 +69995,12 @@ focus outline in that case.
           if (this.tableUpdateTracker.requiresTanStackUpdate) {
               this.updateTanStack();
           }
+          if (this.tableUpdateTracker.updateRowParentIds
+              || this.tableUpdateTracker.updateGroupRows) {
+              const hierarchyEnabled = this.isHierarchyEnabled();
+              const hasGroupableColumns = this.columns.some(x => !x.columnInternals.groupingDisabled);
+              this.canHaveCollapsibleRows = hierarchyEnabled || hasGroupableColumns;
+          }
           if (this.tableUpdateTracker.updateActionMenuSlots) {
               this.updateActionMenuSlots();
           }
@@ -70462,6 +70508,12 @@ focus outline in that case.
   __decorate$1([
       observable
   ], Table$1.prototype, "showCollapseAll", void 0);
+  __decorate$1([
+      observable
+  ], Table$1.prototype, "canHaveCollapsibleRows", void 0);
+  __decorate$1([
+      volatile
+  ], Table$1.prototype, "collapseButtonVisibility", null);
   __decorate$1([
       observable
   ], Table$1.prototype, "firstSortedColumn", void 0);