@ni/nimble-components 18.12.3 → 18.12.5

package/dist/all-components-bundle.js

@@ -16356,7 +16356,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 21 Apr 2023 15:58:04 GMT
+     * Generated on Tue, 25 Apr 2023 20:25:48 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16834,7 +16834,7 @@
     DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
-    const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
+    const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     // Component Sizing Tokens
     const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
     const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
@@ -22934,7 +22934,7 @@
         }
     }
     registerIcon('icon-triangle-two-lines-horizontal', IconTriangleTwoLinesHorizontal);
-    DesignSystem.tagFor(IconTriangleTwoLinesHorizontal);
+    const iconTriangleTwoLinesHorizontalTag = DesignSystem.tagFor(IconTriangleTwoLinesHorizontal);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22958,7 +22958,7 @@
         }
     }
     registerIcon('icon-two-squares-in-brackets', IconTwoSquaresInBrackets);
-    DesignSystem.tagFor(IconTwoSquaresInBrackets);
+    const iconTwoSquaresInBracketsTag = DesignSystem.tagFor(IconTwoSquaresInBrackets);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -27834,7 +27834,20 @@
          */
         localeAwareCaseSensitive: 'localeAwareCaseSensitive'
     };
-    const defaultMinPixelWidth = 88;
+    const groupIconSize = 16;
+    const sortIconSize = 16;
+    const spacing = 8;
+    const menuDropdownSize = 24;
+    const oneCharPlusEllipsisSize = 21;
+    const defaultMinPixelWidth = spacing
+        + oneCharPlusEllipsisSize
+        + spacing
+        + sortIconSize
+        + spacing
+        + groupIconSize
+        + spacing
+        + menuDropdownSize
+        + spacing;
     const defaultFractionalWidth = 1;
 
     /**
@@ -28179,6 +28192,7 @@
         width: 100%;
         position: relative;
         top: var(--ni-private-table-row-container-top);
+        background-color: ${tableRowBorderColor};
     }
 
     .header-container {
@@ -28193,6 +28207,7 @@
         width: fit-content;
         min-width: 100%;
         left: var(--ni-private-table-scroll-x);
+        align-items: center;
     }
 
     .column-header-container {
@@ -28201,6 +28216,17 @@
         grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
     }
 
+    .collapse-all-button {
+        width: ${controlSlimHeight};
+        height: ${controlSlimHeight};
+        margin-left: calc(${smallPadding} * 2);
+        visibility: hidden;
+    }
+
+    .collapse-all-button.visible {
+        visibility: visible;
+    }
+
     .header-scrollbar-spacer {
         width: var(--ni-private-table-header-scrollbar-spacer-width);
     }
@@ -28221,61 +28247,20 @@
         padding-left: 0px;
     }
 
-    .row {
-        background: ${applicationBackgroundColor};
+    .group-row {
         position: relative;
-        box-sizing: border-box;
     }
 
-    .row::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        pointer-events: none;
-    }
-
-    :host([selection-mode='single']) .row:hover::before,
-    :host([selection-mode='multiple']) .row:hover::before {
-        background: ${fillHoverColor};
-    }
-
-    :host([selection-mode='single']) .row[selected]::before,
-    :host([selection-mode='multiple']) .row[selected]::before {
-        background: ${fillSelectedColor};
-    }
-
-    :host([selection-mode='single']) .row[selected]:hover::before,
-    :host([selection-mode='multiple']) .row[selected]:hover::before {
-        background: ${fillHoverSelectedColor};
+    .row {
+        position: relative;
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
-            .header-row::before {
+            .table-row-container::before {
                 content: '';
                 width: 100%;
                 height: 100%;
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
                 position: absolute;
-                background: ${fillHoverColor};
-                pointer-events: none;
-            }
-
-            .row::before {
-                background: ${fillHoverColor};
-            }
-
-            :host([selection-mode='single']) .row:hover::before,
-            :host([selection-mode='multiple']) .row:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.15)};
-            }
-
-            :host([selection-mode='single']) .row[selected]::before,
-            :host([selection-mode='multiple']) .row[selected]::before {
-                background: ${hexToRgbaCssColor(White, 0.25)};
-            }
-
-            :host([selection-mode='single']) .row[selected]:hover::before,
-            :host([selection-mode='multiple']) .row[selected]:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.2)};
             }
         `));
 
@@ -28290,10 +28275,12 @@
         color: ${tableHeaderFontColor};
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
+        gap: calc(${standardPadding} / 2);
     }
 
-    .sort-indicator {
-        padding: 0px calc(${standardPadding} / 2);
+    .sort-indicator,
+    .grouped-indicator {
+        flex: 0 0 auto;
     }
 `;
 
@@ -28308,6 +28295,9 @@
         ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
             <${iconArrowDownTag} class="sort-indicator" aria-hidden="true"></${iconArrowDownTag}>
         `)}
+        ${when(x => x.isGrouped, html `
+            <${iconTwoSquaresInBracketsTag} class="grouped-indicator"></${iconTwoSquaresInBracketsTag}>
+        `)}
     </template>
 `;
 
@@ -28320,6 +28310,7 @@
             super(...arguments);
             this.sortDirection = TableColumnSortDirection.none;
             this.firstSortedColumn = false;
+            this.isGrouped = false;
         }
         sortDirectionChanged(_prev, _next) {
             this.updateAriaSort();
@@ -28346,6 +28337,9 @@
     __decorate$1([
         attr({ attribute: 'first-sorted-column', mode: 'boolean' })
     ], TableHeader.prototype, "firstSortedColumn", void 0);
+    __decorate$1([
+        observable
+    ], TableHeader.prototype, "isGrouped", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
         template: template$c,
@@ -28358,10 +28352,35 @@
     ${display('flex')}
 
     :host {
-        height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
         width: fit-content;
         min-width: 100%;
+        background-color: ${applicationBackgroundColor};
+        height: calc(${controlHeight} + 2 * ${borderWidth});
+        border-top: calc(2 * ${borderWidth}) solid transparent;
+        box-sizing: border-box;
+        background-clip: padding-box;
+    }
+
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        box-sizing: border-box;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host([selectable]:not([selected]):hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
+    :host([selected])::before {
+        background-color: ${fillSelectedColor};
+    }
+
+    :host([selected]:hover)::before {
+        background-color: ${fillHoverSelectedColor};
     }
 
     .checkbox-container {
@@ -28376,6 +28395,11 @@
         padding-left: 0px;
     }
 
+    .row-front-spacer {
+        width: ${controlHeight};
+        flex: 0 0 auto;
+    }
+
     .cell-container {
         display: grid;
         width: 100%;
@@ -28399,7 +28423,19 @@
     :host([selected]) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host([selectable]:not([selected]):hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+
+            :host([selected])::before {
+                background-color: ${hexToRgbaCssColor(White, 0.25)};
+            }
+
+            :host([selected]:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.2)};
+            }
+        `));
 
     const styles$d = css `
     ${display('grid')}
@@ -28408,11 +28444,8 @@
         --ni-private-table-cell-nesting-level: 0;
         padding: 0px calc(${standardPadding} / 2);
         padding-left: calc(
-            ${standardPadding} / 2 +
-                (
-                    var(--ni-private-table-cell-nesting-level) *
-                        ${standardPadding} * 2
-                )
+            ${smallPadding} * 2 + ${standardPadding} * 2 *
+                var(--ni-private-table-cell-nesting-level)
         );
         align-self: center;
         height: 100%;
@@ -28513,6 +28546,9 @@
                 </${checkboxTag}>
             </span>
         `)}
+        ${'' /* This is needed to help align the cell widths exactly with the column headers, due to the space reserved for
+        the collapse-all button in the header. */}
+        <span class="row-front-spacer"></span>
 
         <span ${ref('cellContainer')} class="cell-container">
             ${repeat(x => x.columnStates, html `
@@ -28582,7 +28618,7 @@
                         columnConfig: {}
                     };
                 }
-                const cellIndentLevel = i === 0 ? this.nestingLevel : 0;
+                const cellIndentLevel = i === 0 && this.nestingLevel > 0 ? this.nestingLevel - 1 : 0;
                 return { column, cellState, cellIndentLevel };
             });
         }
@@ -28695,11 +28731,8 @@
     :host {
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-    }
-
-    :host(:hover) {
-        background: ${fillHoverColor};
+        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
+        box-sizing: border-box;
     }
 
     :host([expanded]) .animating,
@@ -28707,6 +28740,19 @@
         transition: ${mediumDelay} ease-in-out;
     }
 
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host(:hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${smallPadding} * 2 + ${standardPadding} * 2 *
@@ -28760,7 +28806,15 @@
     .selection-checkbox::part(label) {
         padding-left: 0px;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
+            }
+        `));
 
     /* eslint-disable @typescript-eslint/indent */
     // prettier-ignore
@@ -28911,7 +28965,7 @@
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
             --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
             --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px; 
-            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''}
+            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''};
             ">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
@@ -28925,7 +28979,16 @@
                             </${checkboxTag}>
                         </span>
                     `)}
-
+                    <span role="gridcell">
+                        <${buttonTag}
+                            class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
+                            content-hidden
+                            appearance="${ButtonAppearance.ghost}"
+                            @click="${x => x.handleCollapseAllGroupRows()}"
+                        >
+                            <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                        </${buttonTag}>
+                    </span>
                     <span class="column-header-container">
                         ${repeat(x => x.columns, html `
                             ${when(x => !x.columnHidden, html `
@@ -28933,6 +28996,7 @@
                                     class="header"
                                     sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
                                     ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                                    :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                 >
                                     <slot name="${x => x.slot}"></slot>
                                 </${tableHeaderTag}>
@@ -29962,6 +30026,10 @@
              * @internal
              */
             this.selectionState = TableRowSelectionState.notSelected;
+            /**
+             * @internal
+             */
+            this.showCollapseAll = false;
             this.tableValidator = new TableValidator();
             this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
@@ -30181,6 +30249,15 @@
             }
         }
         /** @internal */
+        handleCollapseAllGroupRows() {
+            this.collapsedRows.clear();
+            this.table
+                .getRowModel()
+                .flatRows.filter(row => row.getIsGrouped())
+                .forEach(row => this.collapsedRows.add(row.id));
+            this.table.toggleAllRowsExpanded(false);
+        }
+        /** @internal */
         handleGroupRowExpanded(rowIndex, event) {
             this.toggleGroupExpanded(rowIndex);
             event.stopPropagation();
@@ -30199,6 +30276,9 @@
             if (this.updateTracker.updateColumnWidths) {
                 this.updateRowGridColumns();
             }
+            if (this.updateTracker.updateGroupRows) {
+                this.showCollapseAll = this.getColumnsParticipatingInGrouping().length > 0;
+            }
         }
         get ariaMultiSelectable() {
             switch (this.selectionMode) {
@@ -30580,6 +30660,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "selectionCheckbox", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "showCollapseAll", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "firstSortedColumn", void 0);