@ni/nimble-components 18.5.7 → 18.5.8

package/dist/all-components-bundle.js

@@ -26886,13 +26886,123 @@
       });
     }
 
+    function getSortedRowModel() {
+      return table => memo$1(() => [table.getState().sorting, table.getPreSortedRowModel()], (sorting, rowModel) => {
+        if (!rowModel.rows.length || !(sorting != null && sorting.length)) {
+          return rowModel;
+        }
+        const sortingState = table.getState().sorting;
+        const sortedFlatRows = [];
+
+        // Filter out sortings that correspond to non existing columns
+        const availableSorting = sortingState.filter(sort => {
+          var _table$getColumn;
+          return (_table$getColumn = table.getColumn(sort.id)) == null ? void 0 : _table$getColumn.getCanSort();
+        });
+        const columnInfoById = {};
+        availableSorting.forEach(sortEntry => {
+          const column = table.getColumn(sortEntry.id);
+          if (!column) return;
+          columnInfoById[sortEntry.id] = {
+            sortUndefined: column.columnDef.sortUndefined,
+            invertSorting: column.columnDef.invertSorting,
+            sortingFn: column.getSortingFn()
+          };
+        });
+        const sortData = rows => {
+          // This will also perform a stable sorting using the row index
+          // if needed.
+          const sortedData = [...rows];
+          sortedData.sort((rowA, rowB) => {
+            for (let i = 0; i < availableSorting.length; i += 1) {
+              var _sortEntry$desc;
+              const sortEntry = availableSorting[i];
+              const columnInfo = columnInfoById[sortEntry.id];
+              const isDesc = (_sortEntry$desc = sortEntry == null ? void 0 : sortEntry.desc) != null ? _sortEntry$desc : false;
+              if (columnInfo.sortUndefined) {
+                const aValue = rowA.getValue(sortEntry.id);
+                const bValue = rowB.getValue(sortEntry.id);
+                const aUndefined = typeof aValue === 'undefined';
+                const bUndefined = typeof bValue === 'undefined';
+                if (aUndefined || bUndefined) {
+                  return aUndefined && bUndefined ? 0 : aUndefined ? columnInfo.sortUndefined : -columnInfo.sortUndefined;
+                }
+              }
+
+              // This function should always return in ascending order
+              let sortInt = columnInfo.sortingFn(rowA, rowB, sortEntry.id);
+              if (sortInt !== 0) {
+                if (isDesc) {
+                  sortInt *= -1;
+                }
+                if (columnInfo.invertSorting) {
+                  sortInt *= -1;
+                }
+                return sortInt;
+              }
+            }
+            return rowA.index - rowB.index;
+          });
+
+          // If there are sub-rows, sort them
+          sortedData.forEach(row => {
+            var _row$subRows;
+            sortedFlatRows.push(row);
+            if ((_row$subRows = row.subRows) != null && _row$subRows.length) {
+              row.subRows = sortData(row.subRows);
+            }
+          });
+          return sortedData;
+        };
+        return {
+          rows: sortData(rowModel.rows),
+          flatRows: sortedFlatRows,
+          rowsById: rowModel.rowsById
+        };
+      }, {
+        key: 'getSortedRowModel',
+        debug: () => {
+          var _table$options$debugA;
+          return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
+        },
+        onChange: () => {
+          table._autoResetPageIndex();
+        }
+      });
+    }
+
+    /**
+     * The possible directions a table column can be sorted in.
+     */
+    const TableColumnSortDirection = {
+        none: undefined,
+        ascending: 'ascending',
+        descending: 'descending'
+    };
+
+    /**
+     * The possible operations to use when sorting a table column.
+     */
+    const TableColumnSortOperation = {
+        /**
+         * Performs a sort using `===`, `<`, and `>` operators
+         */
+        basic: 'basic',
+        /**
+         * Performs a locale-aware case-sensitive string sort on the columns.
+         * Only use this sort operation if the field is of type `string | undefined | null`.
+         */
+        localeAwareCaseSensitive: 'localeAwareCaseSensitive'
+    };
+
     /**
      * The base class for table columns
      */
     class TableColumn extends FoundationElement {
         constructor() {
-            super(...arguments);
+            super();
             this.columnHidden = false;
+            this.sortDirection = TableColumnSortDirection.none;
             /**
              * @internal
              *
@@ -26900,13 +27010,20 @@
              * This array is parallel with the field names specified by `cellRecordFieldNames`.
              */
             this.dataRecordFieldNames = [];
+            /**
+             * @internal
+             *
+             * The operation to use when sorting the table by this column.
+             */
+            this.sortOperation = TableColumnSortOperation.basic;
+            this.internalUniqueId = uniqueId('table-column-slot');
         }
         /**
          * @internal
          */
         connectedCallback() {
             super.connectedCallback();
-            this.setAttribute('slot', uniqueId('table-column-slot'));
+            this.setAttribute('slot', this.internalUniqueId);
         }
     }
     __decorate$1([
@@ -26921,12 +27038,24 @@
     __decorate$1([
         attr({ attribute: 'column-hidden', mode: 'boolean' })
     ], TableColumn.prototype, "columnHidden", void 0);
+    __decorate$1([
+        attr({ attribute: 'sort-index', converter: nullableNumberConverter })
+    ], TableColumn.prototype, "sortIndex", void 0);
+    __decorate$1([
+        attr({ attribute: 'sort-direction' })
+    ], TableColumn.prototype, "sortDirection", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "dataRecordFieldNames", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "columnConfig", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "operandDataRecordFieldName", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "sortOperation", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -26939,6 +27068,7 @@
             this.invalidRecordId = false;
             this.duplicateColumnId = false;
             this.missingColumnId = false;
+            this.duplicateSortIndex = false;
         }
         getValidity() {
             return {
@@ -26946,7 +27076,8 @@
                 missingRecordId: this.missingRecordId,
                 invalidRecordId: this.invalidRecordId,
                 duplicateColumnId: this.duplicateColumnId,
-                missingColumnId: this.missingColumnId
+                missingColumnId: this.missingColumnId,
+                duplicateSortIndex: this.duplicateSortIndex
             };
         }
         isValid() {
@@ -27000,6 +27131,17 @@
             }
             return !this.missingColumnId && !this.duplicateColumnId;
         }
+        validateColumnSortIndices(sortIndices) {
+            this.duplicateSortIndex = false;
+            const sortIndexSet = new Set();
+            for (const sortIndex of sortIndices) {
+                if (sortIndexSet.has(sortIndex)) {
+                    this.duplicateSortIndex = true;
+                }
+                sortIndexSet.add(sortIndex);
+            }
+            return !this.duplicateSortIndex;
+        }
     }
 
     const styles$d = css `
@@ -27100,12 +27242,26 @@
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
     }
+
+    .sort-indicator {
+        padding: 0px calc(${standardPadding} / 2);
+        width: ${standardPadding};
+    }
 `;
 
     // prettier-ignore
     const template$7 = html `
-    <template role="columnheader">
+    <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
+
+        <span class="sort-indicator" aria-hidden="true">
+            ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
+                <${DesignSystem.tagFor(IconArrowUp)}></${DesignSystem.tagFor(IconArrowUp)}>
+            `)}
+            ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
+                <${DesignSystem.tagFor(IconArrowDown)}></${DesignSystem.tagFor(IconArrowDown)}>
+            `)}
+        </span>
     </template>
 `;
 
@@ -27114,7 +27270,36 @@
      * @internal
      */
     class TableHeader extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.sortDirection = TableColumnSortDirection.none;
+            this.firstSortedColumn = false;
+        }
+        sortDirectionChanged(_prev, _next) {
+            this.updateAriaSort();
+        }
+        firstSortedColumnChanged(_prev, _next) {
+            this.updateAriaSort();
+        }
+        updateAriaSort() {
+            if (!this.firstSortedColumn
+                || this.sortDirection === TableColumnSortDirection.none) {
+                this.ariaSort = null;
+            }
+            else if (this.sortDirection === TableColumnSortDirection.ascending) {
+                this.ariaSort = 'ascending';
+            }
+            else {
+                this.ariaSort = 'descending';
+            }
+        }
     }
+    __decorate$1([
+        attr({ attribute: 'sort-direction' })
+    ], TableHeader.prototype, "sortDirection", void 0);
+    __decorate$1([
+        attr({ attribute: 'first-sorted-column', mode: 'boolean' })
+    ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
         template: template$7,
@@ -27374,7 +27559,11 @@
                 <div class="header-row" role="row">
                     ${repeat(x => x.columns, html `
                         ${when(x => !x.columnHidden, html `
-                            <${DesignSystem.tagFor(TableHeader)} class="header">
+                            <${DesignSystem.tagFor(TableHeader)}
+                                class="header"
+                                sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
+                                ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                            >
                                 <slot name="${x => x.slot}"></slot>
                             </${DesignSystem.tagFor(TableHeader)}>
                         `)}
@@ -28130,6 +28319,40 @@
         observable
     ], Virtualizer.prototype, "rowContainerYOffset", void 0);
 
+    /**
+     * Returns the sorting function for TanStack to use based on the specified
+     * TableColumnSortOperation
+     */
+    function getTanStackSortingFunction(sortOperation) {
+        switch (sortOperation) {
+            case TableColumnSortOperation.basic:
+                return sortingFns.basic;
+            case TableColumnSortOperation.localeAwareCaseSensitive:
+                return localeAwareCaseSensitiveSortFunction;
+            default:
+                return sortingFns.basic;
+        }
+    }
+    /**
+     * A function to perform locale-aware and case-senstitive sorting of two rows from
+     * TanStack for a given column. The function sorts `undefined` followed by `null`
+     * before all defined strings.
+     */
+    function localeAwareCaseSensitiveSortFunction(rowA, rowB, columnId) {
+        const valueA = rowA.getValue(columnId);
+        const valueB = rowB.getValue(columnId);
+        if (typeof valueA === 'string' && typeof valueB === 'string') {
+            return valueA.localeCompare(valueB);
+        }
+        if (valueA === valueB) {
+            return 0;
+        }
+        if (valueA === undefined || (valueA === null && valueB !== undefined)) {
+            return -1;
+        }
+        return 1;
+    }
+
     /**
      * A nimble-styled table.
      */
@@ -28158,25 +28381,14 @@
             this.canRenderRows = true;
             this.tableValidator = new TableValidator();
             this.columnNotifiers = [];
-            this.update = (state) => {
-                this.table.setOptions(prev => ({
-                    ...prev,
-                    ...this.options,
-                    state,
-                    onStateChange: (updater) => {
-                        const updatedState = typeof updater === 'function'
-                            ? updater(state)
-                            : updater;
-                        this.update(updatedState);
-                    }
-                }));
-            };
             this.options = {
                 data: [],
                 onStateChange: (_) => { },
                 getCoreRowModel: getCoreRowModel(),
+                getSortedRowModel: getSortedRowModel(),
                 columns: [],
                 state: {},
+                enableSorting: true,
                 renderFallbackValue: null,
                 autoResetAll: false
             };
@@ -28187,7 +28399,6 @@
             return this.tableValidator.getValidity();
         }
         setData(newData) {
-            this.generateTanStackColumns(newData);
             this.setTableData(newData);
         }
         connectedCallback() {
@@ -28215,6 +28426,14 @@
                 if (args === 'columnId') {
                     this.validateColumnIds();
                 }
+                else if (args === 'operandDataRecordFieldName'
+                    || args === 'sortOperation') {
+                    this.generateTanStackColumns();
+                }
+                else if (args === 'sortIndex' || args === 'sortDirection') {
+                    this.validateColumnSortIndices();
+                    this.setSortState();
+                }
             }
         }
         onRowActionMenuBeforeToggle(event) {
@@ -28237,6 +28456,8 @@
                 return;
             }
             this.validateAndObserveColumns();
+            this.generateTanStackColumns();
+            this.setSortState();
             const slots = new Set();
             for (const column of this.columns) {
                 if (column.actionMenuSlot) {
@@ -28259,11 +28480,20 @@
                 this.columnNotifiers.push(notifier);
             }
             this.validateColumnIds();
+            this.validateColumnSortIndices();
         }
         validateColumnIds() {
             this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
             this.canRenderRows = this.checkValidity();
         }
+        validateColumnSortIndices() {
+            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
+            this.canRenderRows = this.checkValidity();
+        }
+        getColumnsParticipatingInSorting() {
+            return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
+                && typeof x.sortIndex === 'number');
+        }
         async updateColumnsFromChildItems() {
             const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
                 ? customElements.whenDefined(item.localName)
@@ -28297,27 +28527,47 @@
             this.virtualizer.dataChanged();
         }
         updateTableOptions(updatedOptions) {
-            this.options = { ...this.options, ...updatedOptions };
-            this.update(this.table.initialState);
+            this.options = {
+                ...this.options,
+                ...updatedOptions,
+                state: { ...this.options.state, ...updatedOptions.state }
+            };
+            this.table.setOptions(this.options);
             this.refreshRows();
         }
-        // Generate columns for TanStack that correspond to all the keys in TData because all operations,
-        // such as grouping and sorting, will be performed on the data's records, not the values rendered within a cell.
-        generateTanStackColumns(data) {
-            if (data.length === 0) {
-                return;
-            }
-            const firstItem = data[0];
-            const keys = Object.keys(firstItem);
-            const generatedColumns = keys.map(key => {
+        setSortState() {
+            const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
+            this.firstSortedColumn = sortedColumns.length
+                ? sortedColumns[0]
+                : undefined;
+            const tanStackSortingState = sortedColumns.map(column => {
+                return {
+                    id: column.internalUniqueId,
+                    desc: column.sortDirection
+                        === TableColumnSortDirection.descending
+                };
+            });
+            this.updateTableOptions({
+                state: {
+                    sorting: tanStackSortingState
+                }
+            });
+        }
+        generateTanStackColumns() {
+            const generatedColumns = this.columns.map(column => {
                 const columnDef = {
-                    id: key,
-                    accessorKey: key,
-                    header: key
+                    id: column.internalUniqueId,
+                    accessorKey: column.operandDataRecordFieldName,
+                    sortingFn: getTanStackSortingFunction(column.sortOperation)
                 };
                 return columnDef;
             });
-            this.updateTableOptions({ columns: generatedColumns });
+            this.updateTableOptions({
+                // Force TanStack to detect a data update because a columns's accessor is
+                // referenced when creating a new row model.
+                data: [...this.table.options.data],
+                columns: generatedColumns
+            });
         }
     }
     __decorate$1([
@@ -28341,6 +28591,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "canRenderRows", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
         template: template$4,
@@ -28389,13 +28642,15 @@
      */
     class TableColumnText extends TableColumn {
         constructor() {
-            super(...arguments);
+            super();
             this.cellRecordFieldNames = ['value'];
             this.cellStyles = cellStyles;
             this.cellTemplate = cellTemplate;
+            this.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
         fieldNameChanged() {
             this.dataRecordFieldNames = [this.fieldName];
+            this.operandDataRecordFieldName = this.fieldName;
         }
         placeholderChanged() {
             this.columnConfig = { placeholder: this.placeholder ?? '' };