@ni/nimble-components 17.0.4 → 17.0.6

package/dist/all-components-bundle.js

@@ -20730,18 +20730,25 @@
         background: ${applicationBackgroundColor};
         border: ${borderWidth} solid ${popupBorderColor};
         margin: 0;
-        padding: 4px;
-        min-width: 168px;
+        min-width: 176px;
         width: max-content;
         box-shadow: ${elevation2BoxShadow};
     }
+
+    slot {
+        padding: 4px;
+        display: block;
+    }
+
     :host([slot='submenu']) {
         margin: 0 calc(${smallPadding} * 2);
     }
+
     ::slotted(*) {
         padding-left: 8px;
         padding-right: 8px;
     }
+
     ::slotted(hr) {
         box-sizing: content-box;
         height: 2px;
@@ -20750,6 +20757,7 @@
         background: ${borderColor};
         opacity: 0.1;
     }
+
     ::slotted(header) {
         display: flex;
         font: ${groupHeaderFont};
@@ -20758,7 +20766,11 @@
         padding-top: ${smallPadding};
         padding-bottom: ${smallPadding};
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            slot {
+                background: ${hexToRgbaCssColor(White, 0.15)};
+            }
+        `));
 
     /**
      * A nimble-styled menu
@@ -25086,45 +25098,47 @@
      */
     class TableValidator {
         constructor() {
-            this.duplicateRowId = false;
-            this.missingRowId = false;
-            this.invalidRowId = false;
+            this.duplicateRecordId = false;
+            this.missingRecordId = false;
+            this.invalidRecordId = false;
         }
         getValidity() {
             return {
-                duplicateRowId: this.duplicateRowId,
-                missingRowId: this.missingRowId,
-                invalidRowId: this.invalidRowId
+                duplicateRecordId: this.duplicateRecordId,
+                missingRecordId: this.missingRecordId,
+                invalidRecordId: this.invalidRecordId
             };
         }
         isValid() {
             return Object.values(this.getValidity()).every(x => x === false);
         }
-        validateDataIds(data, idFieldName) {
+        validateRecordIds(data, idFieldName) {
             // Start off by assuming all IDs are valid.
-            this.duplicateRowId = false;
-            this.missingRowId = false;
-            this.invalidRowId = false;
-            if (idFieldName == null) {
+            this.duplicateRecordId = false;
+            this.missingRecordId = false;
+            this.invalidRecordId = false;
+            if (idFieldName === undefined || idFieldName === null) {
                 return true;
             }
             const ids = new Set();
             for (const record of data) {
                 if (!Object.prototype.hasOwnProperty.call(record, idFieldName)) {
-                    this.missingRowId = true;
+                    this.missingRecordId = true;
                     continue;
                 }
                 const id = record[idFieldName];
-                if (typeof id !== 'string' || id === '') {
-                    this.invalidRowId = true;
+                if (typeof id !== 'string') {
+                    this.invalidRecordId = true;
                     continue;
                 }
                 if (ids.has(id)) {
-                    this.duplicateRowId = true;
+                    this.duplicateRecordId = true;
                 }
                 ids.add(id);
             }
-            return !this.missingRowId && !this.invalidRowId && !this.duplicateRowId;
+            return (!this.missingRecordId
+                && !this.invalidRecordId
+                && !this.duplicateRecordId);
         }
     }
 
@@ -25347,6 +25361,9 @@
             return keys.every(key => key !== undefined);
         }
     }
+    __decorate$1([
+        attr({ attribute: 'record-id' })
+    ], TableRow.prototype, "recordId", void 0);
     __decorate$1([
         observable
     ], TableRow.prototype, "dataRecord", void 0);
@@ -25390,6 +25407,7 @@
                 ${repeat(x => x.tableData, html `
                     <${DesignSystem.tagFor(TableRow)}
                         class="row"
+                        record-id="${x => x.id}"
                         :dataRecord="${x => x.record}"
                         :columns="${(_, c) => c.parent.columns}"
                     >
@@ -25433,13 +25451,6 @@
                 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,
@@ -25469,18 +25480,22 @@
             return this.tableValidator.isValid();
         }
         trySetData(newData) {
-            const areIdsValid = this.tableValidator.validateDataIds(newData, this.idFieldName);
-            if (areIdsValid) {
-                this.updateTableOptions({ data: newData });
-            }
-            else {
-                this.updateTableOptions({ data: [] });
-            }
+            const areIdsValid = this.tableValidator.validateRecordIds(newData, this.idFieldName);
+            const getRowIdFunction = this.idFieldName === null || this.idFieldName === undefined
+                ? undefined
+                : (record) => record[this.idFieldName];
+            this.updateTableOptions({
+                data: areIdsValid ? newData : [],
+                getRowId: getRowIdFunction
+            });
         }
         refreshRows() {
             const rows = this.table.getRowModel().rows;
             this.tableData = rows.map(row => {
-                const rowState = { record: row.original };
+                const rowState = {
+                    record: row.original,
+                    id: row.id
+                };
                 return rowState;
             });
         }