@ni/nimble-components 30.0.1 → 30.0.3

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 16 Jul 2024 23:38:17 GMT
+   * Generated on Wed, 17 Jul 2024 20:01:55 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}"
@@ -66667,15 +66683,7 @@ focus outline in that case.
                                         @row-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
                                         @row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
                                     >
-                                    ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
-                                        ${repeat((_, c) => c.parent.actionMenuSlots, html `
-                                            <slot
-                                                name="${x => x}"
-                                                slot="${x => `row-action-menu-${x}`}">
-                                            </slot>
-                                        `)}
-                                    `)}
-                                    ${repeat((x, c) => (c.parent.tableData[x.index]?.slots || []), html `
+                                    ${repeat((x, c) => (c.parent.tableData[x.index]?.requestedSlots || []), html `
                                         <slot
                                             name="${x => x.name}"
                                             slot="${x => x.slot}"
@@ -69605,6 +69613,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;
@@ -69624,10 +69644,6 @@ focus outline in that case.
            * @internal
            */
           this.rowElements = [];
-          /**
-           * @internal
-           */
-          this.actionMenuSlots = [];
           /**
            * @internal
            */
@@ -69644,6 +69660,10 @@ focus outline in that case.
            * @internal
            */
           this.showCollapseAll = false;
+          /**
+           * @internal
+           */
+          this.canHaveCollapsibleRows = false;
           /**
            * @internal
            */
@@ -69666,7 +69686,8 @@ focus outline in that case.
           this.ignoreSelectionChangeEvents = false;
           // 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.columnRequestedSlots = new Map();
+          this.requestedSlots = new Map();
+          this.actionMenuSlots = [];
           this.onViewPortScroll = (event) => {
               this.scrollX = event.target.scrollLeft;
           };
@@ -69864,7 +69885,7 @@ focus outline in that case.
           event.stopImmediatePropagation();
           for (const slotMetadata of event.detail.slots) {
               const uniqueSlot = uniquifySlotNameForColumnId(event.detail.columnInternalId, slotMetadata.slot);
-              this.columnRequestedSlots.set(slotMetadata.name, {
+              this.requestedSlots.set(slotMetadata.name, {
                   recordId: event.detail.recordId,
                   uniqueSlot
               });
@@ -69966,6 +69987,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();
           }
@@ -70043,9 +70070,12 @@ focus outline in that case.
           this.observeColumns();
           this.tableUpdateTracker.trackColumnInstancesChanged();
       }
-      removeActionMenuSlotsFromColumnRequestedSlots() {
+      updateRequestedSlotsForOpeningActionMenu(openActionMenuRecordId) {
           for (const actionMenuSlot of this.actionMenuSlots) {
-              this.columnRequestedSlots.delete(actionMenuSlot);
+              this.requestedSlots.set(actionMenuSlot, {
+                  recordId: openActionMenuRecordId,
+                  uniqueSlot: `row-action-menu-${actionMenuSlot}`
+              });
           }
           this.refreshRows();
       }
@@ -70055,7 +70085,7 @@ focus outline in that case.
               await this.emitSelectionChangeEvent();
           }
           this.openActionMenuRecordId = event.detail.recordIds[0];
-          this.removeActionMenuSlotsFromColumnRequestedSlots();
+          this.updateRequestedSlotsForOpeningActionMenu(this.openActionMenuRecordId);
           const detail = await this.getActionMenuToggleEventDetail(event);
           this.$emit('action-menu-beforetoggle', detail);
       }
@@ -70183,6 +70213,13 @@ focus outline in that case.
           this.updateTableOptions(updatedOptions);
       }
       updateActionMenuSlots() {
+          if (this.openActionMenuRecordId !== undefined) {
+              // If the action menu is open, delete all the slots associated
+              // with the old action menu slots.
+              for (const actionMenuSlot of this.actionMenuSlots) {
+                  this.requestedSlots.delete(actionMenuSlot);
+              }
+          }
           const slots = new Set();
           for (const column of this.columns) {
               if (column.actionMenuSlot) {
@@ -70190,6 +70227,11 @@ focus outline in that case.
               }
           }
           this.actionMenuSlots = Array.from(slots);
+          if (this.openActionMenuRecordId !== undefined) {
+              // If the action menu is open, create slots for all the new
+              // action menu slots.
+              this.updateRequestedSlotsForOpeningActionMenu(this.openActionMenuRecordId);
+          }
       }
       validate() {
           this.tableValidator.validateIdFieldConfiguration(this.selectionMode, this.idFieldName, this.parentIdFieldName);
@@ -70274,7 +70316,7 @@ focus outline in that case.
                   groupColumn: this.getGroupRowColumn(row),
                   resolvedRowIndex: row.index,
                   isLoadingChildren: this.expansionManager.isLoadingChildren(row.id),
-                  slots: slotsByRecordId[row.id] ?? []
+                  requestedSlots: slotsByRecordId[row.id] ?? []
               };
               hasDataHierarchy = hasDataHierarchy || isParent;
               return rowState;
@@ -70286,7 +70328,7 @@ focus outline in that case.
       getRequestedSlotsByRecordId() {
           const slotsByRecordId = {};
           for (const [slotName, { recordId, uniqueSlot }] of this
-              .columnRequestedSlots) {
+              .requestedSlots) {
               if (!Object.prototype.hasOwnProperty.call(slotsByRecordId, recordId)) {
                   slotsByRecordId[recordId] = [];
               }
@@ -70434,9 +70476,6 @@ focus outline in that case.
   __decorate$1([
       observable
   ], Table$1.prototype, "rowElements", void 0);
-  __decorate$1([
-      observable
-  ], Table$1.prototype, "actionMenuSlots", void 0);
   __decorate$1([
       observable
   ], Table$1.prototype, "openActionMenuRecordId", void 0);
@@ -70461,6 +70500,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);