@ni/nimble-components 18.13.1 → 18.13.3

package/dist/all-components-bundle.js

@@ -2618,6 +2618,16 @@
             }
         }
     }
+    /**
+     * Transforms a template literal string into partial CSS.
+     * @param strings - The string fragments that are interpolated with the values.
+     * @param values - The values that are interpolated with the string fragments.
+     * @public
+     */
+    function cssPartial(strings, ...values) {
+        const { styles, behaviors } = collectStyles(strings, values);
+        return new CSSPartial(styles, behaviors);
+    }
 
     /** @internal */
     function newSplice(index, removed, addedCount) {
@@ -16356,7 +16366,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 05 May 2023 15:11:52 GMT
+     * Generated on Fri, 05 May 2023 21:29:53 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16707,6 +16717,7 @@
     const keyEnter = "Enter";
     const keyEscape = "Escape";
     const keyHome = "Home";
+    const keyShift = "Shift";
     const keySpace = " ";
 
     /**
@@ -18210,6 +18221,15 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
+    /**
+     * Set user-select: none in a way that works across all supported browsers.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
+     */
+    const userSelectNone = cssPartial `
+    user-select: none;
+    -webkit-user-select: none;
+`;
+
     const styles$H = css `
     ${display('block')}
 
@@ -18277,7 +18297,7 @@
         padding-left: 10px;
         font: inherit;
         font-size: ${bodyFontSize};
-        user-select: none;
+        ${userSelectNone}
         position: relative;
         margin-inline-start: ${iconSize};
     }
@@ -19420,7 +19440,7 @@
 
     :host {
         align-items: center;
-        user-select: none;
+        ${userSelectNone}
         width: ${iconSize};
         height: ${iconSize};
     }
@@ -19965,7 +19985,7 @@
         align-items: center;
         cursor: pointer;
         outline: none;
-        user-select: none;
+        ${userSelectNone}
     }
 
     :host([disabled]) {
@@ -20227,7 +20247,7 @@
         height: ${controlHeight};
         position: relative;
         justify-content: center;
-        user-select: none;
+        ${userSelectNone}
         min-width: 250px;
         outline: none;
         vertical-align: top;
@@ -20501,7 +20521,7 @@
 
     :host([disabled]) *,
     :host([disabled]) {
-        user-select: none;
+        ${userSelectNone}
         color: ${bodyDisabledFontColor};
     }
 
@@ -23676,7 +23696,7 @@
     :host {
         font: ${bodyFont};
         outline: none;
-        user-select: none;
+        ${userSelectNone}
         color: ${bodyFontColor};
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
@@ -23728,7 +23748,7 @@
         content: ' ';
         color: transparent;
         width: 0px;
-        user-select: none;
+        ${userSelectNone}
     }
 
     .root::after {
@@ -28043,6 +28063,12 @@
     __decorate$1([
         observable
     ], ColumnInternals.prototype, "currentPixelWidth", void 0);
+    __decorate$1([
+        observable
+    ], ColumnInternals.prototype, "currentSortIndex", void 0);
+    __decorate$1([
+        observable
+    ], ColumnInternals.prototype, "currentSortDirection", void 0);
 
     /**
      * The base class for table columns
@@ -28052,10 +28078,36 @@
             super();
             this.columnHidden = false;
             this.sortDirection = TableColumnSortDirection.none;
+            this.sortingDisabled = false;
             if (!options) {
                 throw new Error('ColumnInternalsOptions must be provided to constructor');
             }
             this.columnInternals = new ColumnInternals(options);
+            this.columnInternals.currentSortDirection = this.sortDirection;
+            this.columnInternals.currentSortIndex = this.sortIndex;
+        }
+        sortDirectionChanged() {
+            if (!this.sortingDisabled) {
+                this.columnInternals.currentSortDirection = this.sortDirection;
+            }
+        }
+        sortIndexChanged() {
+            if (!this.sortingDisabled) {
+                this.columnInternals.currentSortIndex = this.sortIndex;
+            }
+        }
+        sortingDisabledChanged() {
+            // Ignore the default value sortingDisabled initialization from undefined to false (which runs before columnInternals is initialized)
+            if (this.columnInternals) {
+                if (this.sortingDisabled) {
+                    this.columnInternals.currentSortDirection = TableColumnSortDirection.none;
+                    this.columnInternals.currentSortIndex = undefined;
+                }
+                else {
+                    this.columnInternals.currentSortDirection = this.sortDirection;
+                    this.columnInternals.currentSortIndex = this.sortIndex;
+                }
+            }
         }
     }
     __decorate$1([
@@ -28076,6 +28128,9 @@
     __decorate$1([
         attr({ attribute: 'sort-direction' })
     ], TableColumn.prototype, "sortDirection", void 0);
+    __decorate$1([
+        attr({ attribute: 'sorting-disabled', mode: 'boolean' })
+    ], TableColumn.prototype, "sortingDisabled", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -28195,6 +28250,10 @@
         height: 480px;
     }
 
+    .disable-select {
+        ${userSelectNone}
+    }
+
     .table-container {
         overflow: hidden;
         display: flex;
@@ -28306,6 +28365,7 @@
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
         gap: calc(${standardPadding} / 2);
+        cursor: default;
     }
 
     .sort-indicator,
@@ -28814,7 +28874,7 @@
 
     .group-header-view {
         padding-left: calc(${standardPadding} / 2);
-        user-select: none;
+        ${userSelectNone}
         overflow: hidden;
         display: flex;
     }
@@ -28822,7 +28882,7 @@
     .group-row-child-count {
         padding-left: 2px;
         pointer-events: none;
-        user-select: none;
+        ${userSelectNone}
     }
 
     @media (prefers-reduced-motion) {
@@ -28997,7 +29057,8 @@
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ${children$1({ property: 'childItems', filter: elements() })}
     >
-        <div class="table-container" style="
+        <div class="table-container ${x => (x.documentShiftKeyDown ? 'disable-select' : '')}"
+            style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
             --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
@@ -29031,8 +29092,9 @@
                             ${when(x => !x.columnHidden, html `
                                 <${tableHeaderTag}
                                     class="header"
-                                    sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
+                                    sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
                                     ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                                    @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
                                     :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                 >
                                     <slot name="${x => x.slot}"></slot>
@@ -29952,7 +30014,8 @@
             else if (isColumnInternalsProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
                 this.requiredUpdates.columnDefinition = true;
             }
-            else if (isColumnProperty(changedColumnProperty, 'sortIndex', 'sortDirection')) {
+            else if (isColumnProperty(changedColumnProperty, 'sortingDisabled')
+                || isColumnInternalsProperty(changedColumnProperty, 'currentSortDirection', 'currentSortIndex')) {
                 this.requiredUpdates.columnSort = true;
             }
             else if (isColumnProperty(changedColumnProperty, 'columnHidden')
@@ -30067,6 +30130,10 @@
              * @internal
              */
             this.showCollapseAll = false;
+            /**
+             * @internal
+             */
+            this.documentShiftKeyDown = false;
             this.tableValidator = new TableValidator();
             this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
@@ -30080,6 +30147,16 @@
             this.onViewPortScroll = (event) => {
                 this.scrollX = event.target.scrollLeft;
             };
+            this.onKeyDown = (event) => {
+                if (event.key === keyShift) {
+                    this.documentShiftKeyDown = true;
+                }
+            };
+            this.onKeyUp = (event) => {
+                if (event.key === keyShift) {
+                    this.documentShiftKeyDown = false;
+                }
+            };
             this.getIsRowExpanded = (row) => {
                 if (!row.getIsGrouped()) {
                     return false;
@@ -30194,11 +30271,15 @@
             this.viewport.addEventListener('scroll', this.onViewPortScroll, {
                 passive: true
             });
+            document.addEventListener('keydown', this.onKeyDown);
+            document.addEventListener('keyup', this.onKeyUp);
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.virtualizer.disconnectedCallback();
             this.viewport.removeEventListener('scroll', this.onViewPortScroll);
+            document.removeEventListener('keydown', this.onKeyDown);
+            document.removeEventListener('keyup', this.onKeyUp);
         }
         checkValidity() {
             return this.tableValidator.isValid();
@@ -30275,6 +30356,47 @@
             this.toggleGroupExpanded(rowIndex);
             event.stopPropagation();
         }
+        /**
+         * @internal
+         */
+        toggleColumnSort(column, allowMultiSort) {
+            if (column.sortingDisabled) {
+                return;
+            }
+            const allSortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.columnInternals.currentSortIndex
+                - y.columnInternals.currentSortIndex);
+            const columnIndex = allSortedColumns.indexOf(column);
+            const columnAlreadySorted = columnIndex > -1;
+            const oldSortDirection = column.columnInternals.currentSortDirection;
+            let newSortDirection = TableColumnSortDirection.ascending;
+            if (columnAlreadySorted) {
+                if (oldSortDirection === TableColumnSortDirection.descending) {
+                    allSortedColumns.splice(columnIndex, 1);
+                    newSortDirection = TableColumnSortDirection.none;
+                    column.columnInternals.currentSortIndex = undefined;
+                }
+                else {
+                    newSortDirection = TableColumnSortDirection.descending;
+                }
+            }
+            else {
+                allSortedColumns.push(column);
+            }
+            column.columnInternals.currentSortDirection = newSortDirection;
+            for (let i = 0; i < allSortedColumns.length; i++) {
+                const currentColumn = allSortedColumns[i];
+                if (allowMultiSort) {
+                    allSortedColumns[i].columnInternals.currentSortIndex = i;
+                }
+                else if (currentColumn === column) {
+                    currentColumn.columnInternals.currentSortIndex = 0;
+                }
+                else {
+                    currentColumn.columnInternals.currentSortIndex = undefined;
+                    currentColumn.columnInternals.currentSortDirection = TableColumnSortDirection.none;
+                }
+            }
+        }
         /**
          * @internal
          */
@@ -30389,8 +30511,10 @@
             }
         }
         getColumnsParticipatingInSorting() {
-            return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
-                && typeof x.sortIndex === 'number');
+            return this.columns.filter(x => !x.sortingDisabled
+                && x.columnInternals.currentSortDirection
+                    !== TableColumnSortDirection.none
+                && typeof x.columnInternals.currentSortIndex === 'number');
         }
         getColumnsParticipatingInGrouping() {
             return this.columns.filter(x => !x.columnInternals.groupingDisabled
@@ -30450,7 +30574,7 @@
         validate() {
             this.tableValidator.validateSelectionMode(this.selectionMode, this.idFieldName);
             this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
-            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
+            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.columnInternals.currentSortIndex));
             this.tableValidator.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.columnInternals.groupIndex));
             this.validateWithData(this.table.options.data);
         }
@@ -30614,14 +30738,16 @@
             row.toggleExpanded();
         }
         calculateTanStackSortState() {
-            const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
+            const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.columnInternals.currentSortIndex
+                - y.columnInternals.currentSortIndex);
             this.firstSortedColumn = sortedColumns.length
                 ? sortedColumns[0]
                 : undefined;
             return sortedColumns.map(column => {
                 return {
                     id: column.columnInternals.uniqueId,
-                    desc: column.sortDirection === TableColumnSortDirection.descending
+                    desc: column.columnInternals.currentSortDirection
+                        === TableColumnSortDirection.descending
                 };
             });
         }
@@ -30710,6 +30836,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "firstSortedColumn", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "documentShiftKeyDown", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
         template: template$9,
@@ -31298,7 +31427,7 @@
     :host {
         font: ${bodyFont};
         outline: none;
-        user-select: none;
+        ${userSelectNone}
         color: ${bodyFontColor};
         flex-direction: column;
         vertical-align: top;
@@ -31644,8 +31773,7 @@
     :host {
         font: ${bodyFont};
         outline: none;
-        user-select: none;
-        --webkit-user-select: none;
+        ${userSelectNone}
         color: ${bodyFontColor};
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
@@ -31707,7 +31835,7 @@
         content: ' ';
         color: transparent;
         width: 0px;
-        user-select: none;
+        ${userSelectNone}
     }
 
     :host([appearance='frameless'][full-bleed]) .root::before {
@@ -31719,7 +31847,7 @@
         content: ' ';
         color: transparent;
         width: 0px;
-        user-select: none;
+        ${userSelectNone}
     }
 
     :host([appearance='frameless'][full-bleed]) .root::after {
@@ -32264,7 +32392,7 @@
         padding-left: 10px;
         font: inherit;
         font-size: ${bodyFontSize};
-        user-select: none;
+        ${userSelectNone}
         position: relative;
         margin-inline-start: ${iconSize};
     }