@ni/nimble-components 16.1.8 → 17.0.1

package/dist/all-components-bundle.js

@@ -15395,7 +15395,6 @@
     const Pass100DarkUi = "#00c12b";
     const Fail100LightUi = "#c4000c";
     const Fail100DarkUi = "#ff4646";
-    const Black75 = "#818386";
     const Black15 = "#f1f1f2";
     const Black7 = "#f5f5f5";
     const White = "#ffffff";
@@ -15533,7 +15532,6 @@
         borderHoverColor: 'border-hover-color',
         iconColor: 'icon-color',
         modalBackdropColor: 'modal-backdrop-color',
-        popupBoxShadowColor: 'popup-box-shadow-color',
         popupBorderColor: 'popup-border-color',
         controlHeight: 'control-height',
         smallPadding: 'small-padding',
@@ -15707,7 +15705,10 @@
         errorTextFontWeight: 'error-text-font-weight',
         errorTextFontLineHeight: 'error-text-font-line-height',
         errorTextFallbackFontFamily: 'error-text-fallback-font-family',
-        tableRowBorderColor: 'table-row-border-color'
+        tableRowBorderColor: 'table-row-border-color',
+        elevation1BoxShadow: 'elevation-1-box-shadow',
+        elevation2BoxShadow: 'elevation-2-box-shadow',
+        elevation3BoxShadow: 'elevation-3-box-shadow'
     };
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -15798,7 +15799,6 @@
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
     DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
-    const popupBoxShadowColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBoxShadowColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black75, Black85, Black85), 0.3));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
     const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
@@ -15810,6 +15810,10 @@
     const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
     const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
     const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
+    // Drop Shadow Tokens
+    DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
+    const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
+    const elevation3BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation3BoxShadow)).withDefault((element) => `0px 4px 8px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.3)}`);
     // Font Tokens
     createFontTokens(tokenNames.headlineFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight, 'serif');
     createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight, 'serif');
@@ -18058,7 +18062,7 @@
         );
         z-index: 1;
         padding: var(--ni-private-listbox-padding);
-        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
         border: 1px solid ${popupBorderColor};
         background-color: ${applicationBackgroundColor};
         background-clip: padding-box;
@@ -18494,7 +18498,7 @@
         flex-direction: column;
         background-color: ${applicationBackgroundColor};
         border: none;
-        box-shadow: 0px 4px 8px #0000004d;
+        box-shadow: ${elevation3BoxShadow};
         padding: 0px;
         width: 400px;
         max-height: 600px;
@@ -18802,8 +18806,7 @@
     }
 
     :host([location='left']) .dialog-contents {
-        border-right: ${borderWidth} solid ${popupBoxShadowColor};
-        box-shadow: 3px 0px 8px ${popupBoxShadowColor};
+        box-shadow: 3px 0px 8px #00000033;
     }
 
     :host([location='left']) dialog.animating .dialog-contents {
@@ -18822,8 +18825,7 @@
 
     :host([location='right']) .dialog-contents {
         right: 0px;
-        border-left: ${borderWidth} solid ${popupBoxShadowColor};
-        box-shadow: -3px 0px 8px ${popupBoxShadowColor};
+        box-shadow: -3px 0px 8px #00000033;
     }
 
     :host([location='right']) dialog.animating .dialog-contents {
@@ -20731,7 +20733,7 @@
         padding: 4px;
         min-width: 168px;
         width: max-content;
-        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
     }
     :host([slot='submenu']) {
         margin: 0 calc(${smallPadding} * 2);
@@ -25078,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')}
 
@@ -25243,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)}>
@@ -25262,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,
@@ -25285,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,
@@ -25293,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.
@@ -25327,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);
@@ -25921,7 +26017,7 @@
         box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
-        box-shadow: 0px 3px 4px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
         display: inline-flex;
         border: ${borderWidth} solid var(--ni-private-tooltip-border-color);
         background-color: var(--ni-private-tooltip-background-color);
@@ -29558,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);