@ni/nimble-components 17.0.0 → 17.0.1

package/dist/all-components-bundle.js

@@ -25080,6 +25080,54 @@
       });
     }
 
+    /**
+     * Helper class for the nimble-table to validate that the table's configuration
+     * is valid and report which aspects of the configuration are valid or invalid.
+     */
+    class TableValidator {
+        constructor() {
+            this.duplicateRowId = false;
+            this.missingRowId = false;
+            this.invalidRowId = false;
+        }
+        getValidity() {
+            return {
+                duplicateRowId: this.duplicateRowId,
+                missingRowId: this.missingRowId,
+                invalidRowId: this.invalidRowId
+            };
+        }
+        isValid() {
+            return Object.values(this.getValidity()).every(x => x === false);
+        }
+        validateDataIds(data, idFieldName) {
+            // Start off by assuming all IDs are valid.
+            this.duplicateRowId = false;
+            this.missingRowId = false;
+            this.invalidRowId = false;
+            if (idFieldName == null) {
+                return true;
+            }
+            const ids = new Set();
+            for (const record of data) {
+                if (!Object.prototype.hasOwnProperty.call(record, idFieldName)) {
+                    this.missingRowId = true;
+                    continue;
+                }
+                const id = record[idFieldName];
+                if (typeof id !== 'string' || id === '') {
+                    this.invalidRowId = true;
+                    continue;
+                }
+                if (ids.has(id)) {
+                    this.duplicateRowId = true;
+                }
+                ids.add(id);
+            }
+            return !this.missingRowId && !this.invalidRowId && !this.duplicateRowId;
+        }
+    }
+
     const styles$c = css `
     ${display('flex')}
 
@@ -25245,9 +25293,9 @@
                 </div>
             </div>
             <div class="table-viewport" role="rowgroup">
-                ${repeat(x => x.data, html `
+                ${repeat(x => x.tableData, html `
                     <${DesignSystem.tagFor(TableRow)}
-                        :data="${x => x}"
+                        :data="${x => x.data}"
                         :columns="${(_, c) => c.parent.columns}"
                     >
                     </${DesignSystem.tagFor(TableRow)}>
@@ -25264,12 +25312,17 @@
         constructor() {
             super();
             this.data = [];
+            /**
+             * @internal
+             */
+            this.tableData = [];
             // TODO: Temporarily expose the columns as a string array. This will ultimately be
             // column definitions provided by slotted elements.
             this.columns = [];
             // TODO: Temporarily expose the column headers as a string array.
             this.columnHeaders = [];
             this.tableInitialized = false;
+            this.tableValidator = new TableValidator();
             this.update = (state) => {
                 this.table.setOptions(prev => ({
                     ...prev,
@@ -25287,6 +25340,13 @@
                 data: [],
                 onStateChange: (_) => { },
                 getCoreRowModel: getCoreRowModel(),
+                getRowId: record => {
+                    if (this.idFieldName) {
+                        return record[this.idFieldName];
+                    }
+                    // Return a falsey value to use the default ID from TanStack.
+                    return '';
+                },
                 columns: [],
                 state: {},
                 renderFallbackValue: null,
@@ -25295,18 +25355,46 @@
             this.table = createTable(this.options);
             this.tableInitialized = true;
         }
+        get validity() {
+            return this.tableValidator.getValidity();
+        }
+        idFieldNameChanged(_prev, _next) {
+            // Force TanStack to detect a data update because a row's ID is only
+            // generated when creating a new row model.
+            this.trySetData([...this.data]);
+        }
         dataChanged(prev, next) {
             if ((!prev || prev.length === 0) && next && next.length > 0) {
                 this.generateColumns();
             }
             // Ignore any updates that occur prior to the TanStack table being initialized.
             if (this.tableInitialized) {
-                this.updateTableOptions({ data: this.data });
+                this.trySetData(this.data);
+            }
+        }
+        checkValidity() {
+            return this.tableValidator.isValid();
+        }
+        trySetData(newData) {
+            const areIdsValid = this.tableValidator.validateDataIds(newData, this.idFieldName);
+            if (areIdsValid) {
+                this.updateTableOptions({ data: newData });
+            }
+            else {
+                this.updateTableOptions({ data: [] });
             }
         }
+        refreshRows() {
+            const rows = this.table.getRowModel().rows;
+            this.tableData = rows.map(row => {
+                const rowState = { data: row.original };
+                return rowState;
+            });
+        }
         updateTableOptions(updatedOptions) {
             this.options = { ...this.options, ...updatedOptions };
             this.update(this.table.initialState);
+            this.refreshRows();
         }
         // Temporarily auto-detect the keys in TData to make columns.
         // TODO: Remove this logic when another way to specify columns is provided.
@@ -25329,9 +25417,15 @@
             this.columns = this.columnHeaders;
         }
     }
+    __decorate$1([
+        attr({ attribute: 'id-field-name' })
+    ], Table.prototype, "idFieldName", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "data", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "tableData", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "columns", void 0);
@@ -29560,13 +29654,10 @@ Instead styling against the role which is more general and likely a better appro
         attr({
             attribute: 'color-scale-mode'
         })
-    ], WaferMap.prototype, "canvas", void 0);
+    ], WaferMap.prototype, "colorScaleMode", void 0);
     __decorate$1([
         observable
     ], WaferMap.prototype, "canvasSideLength", void 0);
-    __decorate$1([
-        observable
-    ], WaferMap.prototype, "colorScaleMode", void 0);
     __decorate$1([
         observable
     ], WaferMap.prototype, "highlightedValues", void 0);