@ni/nimble-components 18.10.4 → 18.10.6

package/dist/all-components-bundle.js

@@ -27789,6 +27789,22 @@
         ascending: 'ascending',
         descending: 'descending'
     };
+    /**
+     * The selection modes of rows in the table.
+     */
+    const TableRowSelectionMode = {
+        none: undefined,
+        single: 'single'
+    };
+    /**
+     * @internal
+     *
+     * The possible selection states that the table or a table row can be in.
+     */
+    const TableRowSelectionState = {
+        notSelected: 'notSelected',
+        selected: 'selected'
+    };
 
     /**
      * The possible operations to use when sorting a table column.
@@ -27953,6 +27969,8 @@
             this.missingColumnId = false;
             this.duplicateSortIndex = false;
             this.duplicateGroupIndex = false;
+            this.idFieldNameNotConfigured = false;
+            this.recordIds = new Set();
         }
         getValidity() {
             return {
@@ -27962,21 +27980,37 @@
                 duplicateColumnId: this.duplicateColumnId,
                 missingColumnId: this.missingColumnId,
                 duplicateSortIndex: this.duplicateSortIndex,
-                duplicateGroupIndex: this.duplicateGroupIndex
+                duplicateGroupIndex: this.duplicateGroupIndex,
+                idFieldNameNotConfigured: this.idFieldNameNotConfigured
             };
         }
         isValid() {
             return Object.values(this.getValidity()).every(x => x === false);
         }
+        areRecordIdsValid() {
+            const validity = this.getValidity();
+            return (!validity.duplicateRecordId
+                && !validity.missingRecordId
+                && !validity.invalidRecordId);
+        }
+        validateSelectionMode(selectionMode, idFieldName) {
+            if (selectionMode === TableRowSelectionMode.none) {
+                this.idFieldNameNotConfigured = false;
+            }
+            else {
+                this.idFieldNameNotConfigured = typeof idFieldName !== 'string';
+            }
+            return !this.idFieldNameNotConfigured;
+        }
         validateRecordIds(data, idFieldName) {
             // Start off by assuming all IDs are valid.
             this.duplicateRecordId = false;
             this.missingRecordId = false;
             this.invalidRecordId = false;
+            this.recordIds.clear();
             if (typeof idFieldName !== 'string') {
                 return true;
             }
-            const ids = new Set();
             for (const record of data) {
                 if (!Object.prototype.hasOwnProperty.call(record, idFieldName)) {
                     this.missingRecordId = true;
@@ -27987,10 +28021,10 @@
                     this.invalidRecordId = true;
                     continue;
                 }
-                if (ids.has(id)) {
+                if (this.recordIds.has(id)) {
                     this.duplicateRecordId = true;
                 }
-                ids.add(id);
+                this.recordIds.add(id);
             }
             return (!this.missingRecordId
                 && !this.invalidRecordId
@@ -28024,6 +28058,9 @@
             this.duplicateGroupIndex = !this.validateIndicesAreUnique(groupIndices);
             return !this.duplicateGroupIndex;
         }
+        getPresentRecordIds(requestedRecordIds) {
+            return requestedRecordIds.filter(id => this.recordIds.has(id));
+        }
         validateIndicesAreUnique(indices) {
             const numberSet = new Set(indices);
             return numberSet.size === indices.length;
@@ -28104,9 +28141,17 @@
         pointer-events: none;
     }
 
-    .row:hover::before {
+    :host([selection-mode='single']) .row:hover::before {
         background: ${fillHoverColor};
     }
+
+    :host([selection-mode='single']) .row[selected]::before {
+        background: ${fillSelectedColor};
+    }
+
+    :host([selection-mode='single']) .row[selected]:hover::before {
+        background: ${fillHoverSelectedColor};
+    }
 `.withBehaviors(themeBehavior(Theme.color, css `
             .header-row::before {
                 content: '';
@@ -28121,9 +28166,17 @@
                 background: ${fillHoverColor};
             }
 
-            .row:hover::before {
+            :host([selection-mode='single']) .row:hover::before {
                 background: ${hexToRgbaCssColor(White, 0.15)};
             }
+
+            :host([selection-mode='single']) .row[selected]::before {
+                background: ${hexToRgbaCssColor(White, 0.25)};
+            }
+
+            :host([selection-mode='single']) .row[selected]:hover::before {
+                background: ${hexToRgbaCssColor(White, 0.2)};
+            }
         `));
 
     const styles$f = css `
@@ -28225,6 +28278,10 @@
     :host(:hover) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
+
+    :host([selected]) nimble-table-cell {
+        --ni-private-table-cell-action-menu-display: block;
+    }
 `;
 
     const styles$d = css `
@@ -28305,7 +28362,7 @@
 
     // prettier-ignore
     const template$9 = html `
-    <template role="row">
+    <template role="row" aria-selected=${x => x.ariaSelected}>
         ${repeat(x => x.columnStates, html `
             ${when(x => !x.column.columnHidden, html `
                 <${tableCellTag}
@@ -28338,6 +28395,8 @@
     class TableRow extends FoundationElement {
         constructor() {
             super(...arguments);
+            this.selectable = false;
+            this.selected = false;
             this.columns = [];
             this.nestingLevel = 0;
             this.menuOpen = false;
@@ -28368,6 +28427,12 @@
                 return { column, cellState, cellIndentLevel };
             });
         }
+        get ariaSelected() {
+            if (this.selectable) {
+                return this.selected ? 'true' : 'false';
+            }
+            return null;
+        }
         onCellActionMenuBeforeToggle(event, column) {
             this.currentActionMenuColumn = column;
             this.emitToggleEvent('row-action-menu-beforetoggle', event.detail, column);
@@ -28400,6 +28465,12 @@
     __decorate$1([
         attr({ attribute: 'record-id' })
     ], TableRow.prototype, "recordId", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], TableRow.prototype, "selectable", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], TableRow.prototype, "selected", void 0);
     __decorate$1([
         observable
     ], TableRow.prototype, "dataRecord", void 0);
@@ -28418,6 +28489,9 @@
     __decorate$1([
         volatile
     ], TableRow.prototype, "columnStates", null);
+    __decorate$1([
+        volatile
+    ], TableRow.prototype, "ariaSelected", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
         template: template$9,
@@ -28564,7 +28638,7 @@
 
     // prettier-ignore
     const template$7 = html `
-    <template role="table" ${children$1({ property: 'childItems', filter: elements() })}>
+    <template role="grid" ${children$1({ property: 'childItems', filter: elements() })}>
         <div class="table-container" style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
@@ -28610,9 +28684,12 @@
                                 <${tableRowTag}
                                     class="row"
                                     record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
+                                    ?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
+                                    ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
                                     :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                     :columns="${(_, c) => c.parent.columns}"
                                     :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                    @click="${async (x, c) => c.parent.onRowClick(x.index)}"
                                     @row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
                                     @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
                                 >
@@ -29446,7 +29523,8 @@
                 columnSort: false,
                 columnWidths: false,
                 columnDefinition: false,
-                actionMenuSlots: false
+                actionMenuSlots: false,
+                selectionMode: false
             };
             this.updateQueued = false;
             this.table = table;
@@ -29472,11 +29550,15 @@
         get updateActionMenuSlots() {
             return this.requiredUpdates.actionMenuSlots;
         }
+        get updateSelectionMode() {
+            return this.requiredUpdates.selectionMode;
+        }
         get requiresTanStackUpdate() {
             return (this.requiredUpdates.rowIds
                 || this.requiredUpdates.columnSort
                 || this.requiredUpdates.columnDefinition
-                || this.requiredUpdates.groupRows);
+                || this.requiredUpdates.groupRows
+                || this.requiredUpdates.selectionMode);
         }
         get requiresTanStackDataReset() {
             return (this.requiredUpdates.rowIds || this.requiredUpdates.columnDefinition);
@@ -29485,6 +29567,9 @@
             this.setAllKeys(true);
             this.queueUpdate();
         }
+        get hasPendingUpdates() {
+            return this.updateQueued;
+        }
         trackColumnPropertyChanged(changedColumnProperty) {
             if (isColumnProperty(changedColumnProperty, 'columnId')) {
                 this.requiredUpdates.columnIds = true;
@@ -29519,6 +29604,10 @@
             this.requiredUpdates.rowIds = true;
             this.queueUpdate();
         }
+        trackSelectionModeChanged() {
+            this.requiredUpdates.selectionMode = true;
+            this.queueUpdate();
+        }
         setAllKeys(value) {
             Object.keys(this.requiredUpdates).forEach(key => {
                 this.requiredUpdates[key] = value;
@@ -29569,6 +29658,7 @@
     class Table extends FoundationElement {
         constructor() {
             super();
+            this.selectionMode = TableRowSelectionMode.none;
             /**
              * @internal
              */
@@ -29600,6 +29690,7 @@
             this.tableValidator = new TableValidator();
             this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
+            this.isInitialized = false;
             this.collapsedRows = new Set();
             this.onViewPortScroll = (event) => {
                 this.scrollX = event.target.scrollLeft;
@@ -29617,6 +29708,16 @@
                 }
                 return !this.collapsedRows.has(row.id);
             };
+            this.handleRowSelectionChange = (updaterOrValue) => {
+                const rowSelectionState = updaterOrValue instanceof Function
+                    ? updaterOrValue(this.table.getState().rowSelection)
+                    : updaterOrValue;
+                this.updateTableOptions({
+                    state: {
+                        rowSelection: rowSelectionState
+                    }
+                });
+            };
             this.handleExpandedChange = (updaterOrValue) => {
                 const expandedState = updaterOrValue instanceof Function
                     ? updaterOrValue(this.table.getState().expanded)
@@ -29630,6 +29731,7 @@
             this.options = {
                 data: [],
                 onStateChange: (_) => { },
+                onRowSelectionChange: this.handleRowSelectionChange,
                 onExpandedChange: this.handleExpandedChange,
                 getCoreRowModel: getCoreRowModel(),
                 getSortedRowModel: getSortedRowModel(),
@@ -29638,9 +29740,11 @@
                 getIsRowExpanded: this.getIsRowExpanded,
                 columns: [],
                 state: {
+                    rowSelection: {},
                     grouping: [],
                     expanded: true // Workaround until we can apply a fix to TanStack regarding leveraging our getIsRowExpanded implementation
                 },
+                enableRowSelection: false,
                 enableSorting: true,
                 enableGrouping: true,
                 renderFallbackValue: null,
@@ -29652,14 +29756,54 @@
         get validity() {
             return this.tableValidator.getValidity();
         }
-        setData(newData) {
-            this.setTableData(newData);
+        async setData(newData) {
+            await this.processPendingUpdates();
+            const data = newData.map(record => {
+                return { ...record };
+            });
+            const tanStackUpdates = {
+                data
+            };
+            this.validateWithData(data);
+            if (this.tableValidator.areRecordIdsValid()) {
+                // Update the selection state to remove previously selected records that no longer exist in the
+                // data set while maintaining the selection state of records that still exist in the data set.
+                const previousSelection = await this.getSelectedRecordIds();
+                tanStackUpdates.state = {
+                    rowSelection: this.calculateTanStackSelectionState(previousSelection)
+                };
+            }
+            this.updateTableOptions(tanStackUpdates);
+        }
+        async getSelectedRecordIds() {
+            await this.processPendingUpdates();
+            const tanStackSelectionState = this.options.state.rowSelection;
+            if (!tanStackSelectionState) {
+                return [];
+            }
+            const selectedRecordIds = [];
+            Object.entries(tanStackSelectionState).forEach(([recordId, isSelected]) => {
+                if (isSelected) {
+                    selectedRecordIds.push(recordId);
+                }
+            });
+            return selectedRecordIds;
+        }
+        async setSelectedRecordIds(recordIds) {
+            await this.processPendingUpdates();
+            if (this.selectionMode === TableRowSelectionMode.none) {
+                return;
+            }
+            this.updateTableOptions({
+                state: {
+                    rowSelection: this.calculateTanStackSelectionState(recordIds)
+                }
+            });
         }
         connectedCallback() {
             super.connectedCallback();
+            this.initialize();
             this.virtualizer.connectedCallback();
-            this.updateTracker.trackAllStateChanged();
-            this.observeColumns();
             this.viewport.addEventListener('scroll', this.onViewPortScroll, {
                 passive: true
             });
@@ -29667,7 +29811,6 @@
         disconnectedCallback() {
             super.disconnectedCallback();
             this.virtualizer.disconnectedCallback();
-            this.removeColumnObservers();
             this.viewport.removeEventListener('scroll', this.onViewPortScroll);
         }
         checkValidity() {
@@ -29685,11 +29828,33 @@
                 this.updateTracker.trackColumnPropertyChanged(args);
             }
         }
+        /** @internal */
+        async onRowClick(rowIndex) {
+            if (this.selectionMode === TableRowSelectionMode.none) {
+                return;
+            }
+            const row = this.table.getRowModel().rows[rowIndex];
+            if (!row) {
+                return;
+            }
+            const currentSelection = await this.getSelectedRecordIds();
+            if (currentSelection.length === 1 && currentSelection[0] === row.id) {
+                // The clicked row is already the only selected row. Do nothing.
+                return;
+            }
+            this.table.toggleAllRowsSelected(false);
+            row.toggleSelected(true);
+            await this.emitSelectionChangeEvent();
+        }
+        /** @internal */
         onRowActionMenuBeforeToggle(event) {
+            event.stopImmediatePropagation();
             this.openActionMenuRecordId = event.detail.recordIds[0];
             this.$emit('action-menu-beforetoggle', event.detail);
         }
+        /** @internal */
         onRowActionMenuToggle(event) {
+            event.stopImmediatePropagation();
             this.$emit('action-menu-toggle', event.detail);
             if (!event.detail.newState) {
                 this.openActionMenuRecordId = undefined;
@@ -29714,6 +29879,12 @@
                 this.updateRowGridColumns();
             }
         }
+        selectionModeChanged(_prev, _next) {
+            if (!this.$fastController.isConnected) {
+                return;
+            }
+            this.updateTracker.trackSelectionModeChanged();
+        }
         idFieldNameChanged(_prev, _next) {
             if (!this.$fastController.isConnected) {
                 return;
@@ -29733,6 +29904,24 @@
             });
             this.columnNotifiers = [];
         }
+        initialize() {
+            if (this.isInitialized) {
+                // The table is already initialized. There is nothing more to do.
+                return;
+            }
+            this.isInitialized = true;
+            // Initialize the controller to ensure that FAST functionality such as Observables work as expected.
+            this.$fastController.onConnectedCallback();
+            this.updateTracker.trackAllStateChanged();
+            this.observeColumns();
+        }
+        async processPendingUpdates() {
+            this.initialize();
+            await DOM.nextUpdate();
+            if (this.updateTracker.hasPendingUpdates) {
+                throw new Error('Expected pending updates to be resolved');
+            }
+        }
         observeColumns() {
             this.removeColumnObservers();
             for (const column of this.columns) {
@@ -29760,9 +29949,8 @@
             this.columns = this.childItems.filter((x) => x instanceof TableColumn);
         }
         updateTanStack() {
-            const updatedOptions = {
-                state: {}
-            };
+            const updatedOptions = {};
+            updatedOptions.state = {};
             if (this.updateTracker.updateColumnSort) {
                 updatedOptions.state.sorting = this.calculateTanStackSortState();
             }
@@ -29771,6 +29959,11 @@
             }
             if (this.updateTracker.updateRowIds) {
                 updatedOptions.getRowId = this.calculateTanStackRowIdFunction();
+                updatedOptions.state.rowSelection = {};
+            }
+            if (this.updateTracker.updateSelectionMode) {
+                updatedOptions.enableRowSelection = this.selectionMode !== TableRowSelectionMode.none;
+                updatedOptions.state.rowSelection = {};
             }
             if (this.updateTracker.requiresTanStackDataReset) {
                 // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
@@ -29796,6 +29989,7 @@
             this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(this.columns);
         }
         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.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.internalGroupIndex));
@@ -29805,14 +29999,11 @@
             this.tableValidator.validateRecordIds(data, this.idFieldName);
             this.canRenderRows = this.checkValidity();
         }
-        setTableData(newData) {
-            const data = newData.map(record => {
-                return { ...record };
-            });
-            this.validateWithData(data);
-            this.updateTableOptions({
-                data
-            });
+        async emitSelectionChangeEvent() {
+            const detail = {
+                selectedRecordIds: await this.getSelectedRecordIds()
+            };
+            this.$emit('selection-change', detail);
         }
         refreshRows() {
             const rows = this.table.getRowModel().rows;
@@ -29820,6 +30011,9 @@
                 const rowState = {
                     record: row.original,
                     id: row.id,
+                    selectionState: row.getIsSelected()
+                        ? TableRowSelectionState.selected
+                        : TableRowSelectionState.notSelected,
                     isGrouped: row.getIsGrouped(),
                     isExpanded: row.getIsExpanded(),
                     groupRowValue: row.getIsGrouped()
@@ -29900,10 +30094,26 @@
                 };
             });
         }
+        calculateTanStackSelectionState(recordIdsToSelect) {
+            if (this.selectionMode === TableRowSelectionMode.none) {
+                return {};
+            }
+            const tanstackSelectionState = {};
+            const selectableRecordIds = this.tableValidator.getPresentRecordIds(recordIdsToSelect);
+            if (selectableRecordIds.length) {
+                // In single selection mode, only select the first record ID that is requested
+                const firstSelectableRecordId = selectableRecordIds[0];
+                tanstackSelectionState[firstSelectableRecordId] = true;
+            }
+            return tanstackSelectionState;
+        }
     }
     __decorate$1([
         attr({ attribute: 'id-field-name' })
     ], Table.prototype, "idFieldName", void 0);
+    __decorate$1([
+        attr({ attribute: 'selection-mode' })
+    ], Table.prototype, "selectionMode", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "tableData", void 0);