@ni/nimble-components 18.6.3 → 18.7.0

package/dist/all-components-bundle.js

@@ -18088,7 +18088,7 @@
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
-    DesignSystem.tagFor(AnchoredRegion);
+    const anchoredRegionTag = DesignSystem.tagFor(AnchoredRegion);
 
     /**
      * Subscription for {@link ThemeStyleSheetBehavior}
@@ -18374,7 +18374,7 @@
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
-    DesignSystem.tagFor(Button);
+    const buttonTag = DesignSystem.tagFor(Button);
 
     /* 🤖 this file was generated by svg-to-ts */
     const add16X16 = {
@@ -19066,7 +19066,7 @@
         }
     }
     registerIcon('icon-exclamation-mark', IconExclamationMark);
-    DesignSystem.tagFor(IconExclamationMark);
+    const iconExclamationMarkTag = DesignSystem.tagFor(IconExclamationMark);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -19078,7 +19078,7 @@
         }
     }
     registerIcon('icon-info', IconInfo);
-    DesignSystem.tagFor(IconInfo);
+    const iconInfoTag = DesignSystem.tagFor(IconInfo);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -19090,7 +19090,7 @@
         }
     }
     registerIcon('icon-triangle-filled', IconTriangleFilled);
-    DesignSystem.tagFor(IconTriangleFilled);
+    const iconTriangleFilledTag = DesignSystem.tagFor(IconTriangleFilled);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -19102,7 +19102,7 @@
         }
     }
     registerIcon('icon-xmark', IconXmark);
-    DesignSystem.tagFor(IconXmark);
+    const iconXmarkTag = DesignSystem.tagFor(IconXmark);
 
     /**
      * Severities of banners.
@@ -19142,13 +19142,13 @@
     >
         <div class="icon">
             ${when(x => x.severity === BannerSeverity.error, html `
-                <${DesignSystem.tagFor(IconExclamationMark)}></${DesignSystem.tagFor(IconExclamationMark)}>
+                <${iconExclamationMarkTag}></${iconExclamationMarkTag}>
             `)}
             ${when(x => x.severity === BannerSeverity.warning, html `
-                <${DesignSystem.tagFor(IconTriangleFilled)}></${DesignSystem.tagFor(IconTriangleFilled)}>
+                <${iconTriangleFilledTag}></${iconTriangleFilledTag}>
             `)}
             ${when(x => x.severity === BannerSeverity.information, html `
-                <${DesignSystem.tagFor(IconInfo)}></${DesignSystem.tagFor(IconInfo)}>
+                <${iconInfoTag}></${iconInfoTag}>
             `)}
         </div>
         <div class="text">
@@ -19159,10 +19159,10 @@
             <slot name="action"></slot>
             <div class="dismiss">
                 ${when(x => !x.preventDismiss, html `
-                    <${DesignSystem.tagFor(Button)} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
-                        <${DesignSystem.tagFor(IconXmark)} slot="start"></${DesignSystem.tagFor(IconXmark)}>
+                    <${buttonTag} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
+                        <${iconXmarkTag} slot="start"></${iconXmarkTag}>
                         ${x => x.dismissButtonLabel ?? 'Close'}
-                    </${DesignSystem.tagFor(Button)}>
+                    </${buttonTag}>
                 `)}
             </div>
         </div>
@@ -19772,7 +19772,7 @@
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
-    DesignSystem.tagFor(ToggleButton);
+    const toggleButtonTag = DesignSystem.tagFor(ToggleButton);
 
     const errorTextTemplate = html `
     <div class="error-text" title="${x => x.errorText}" aria-live="polite">
@@ -19790,7 +19790,7 @@
         }
     }
     registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
-    DesignSystem.tagFor(IconArrowExpanderDown);
+    const iconArrowExpanderDownTag = DesignSystem.tagFor(IconArrowExpanderDown);
 
     const DropdownAppearance = {
         underline: 'underline',
@@ -20316,12 +20316,12 @@
         },
         end: html `
         <div class="end-slot-container">
-            <${DesignSystem.tagFor(IconExclamationMark)}
+            <${iconExclamationMarkTag}
                 severity="error"
                 class="error-icon"
-            ></${DesignSystem.tagFor(IconExclamationMark)}>
+            ></${iconExclamationMarkTag}>
             <div class="separator"></div>
-            <${DesignSystem.tagFor(ToggleButton)}
+            <${toggleButtonTag}
                 ${ref('dropdownButton')}
                 appearance="ghost"
                 ?checked="${x => x.open}"
@@ -20336,12 +20336,12 @@
                 aria-expanded="${x => x.open}"
                 tabindex="-1"
             >
-                <${DesignSystem.tagFor(IconArrowExpanderDown)}
+                <${iconArrowExpanderDownTag}
                     slot="start"
                     class="dropdown-icon"
                 >
-                </${DesignSystem.tagFor(IconArrowExpanderDown)}>
-            </${DesignSystem.tagFor(ToggleButton)}>
+                </${iconArrowExpanderDownTag}>
+            </${toggleButtonTag}>
         </div>
         ${errorTextTemplate}
     `
@@ -20887,7 +20887,7 @@
         }
     }
     registerIcon('icon-add', IconAdd);
-    DesignSystem.tagFor(IconAdd);
+    const iconAddTag = DesignSystem.tagFor(IconAdd);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -20899,7 +20899,7 @@
         }
     }
     registerIcon('icon-arrow-down', IconArrowDown);
-    DesignSystem.tagFor(IconArrowDown);
+    const iconArrowDownTag = DesignSystem.tagFor(IconArrowDown);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -21019,7 +21019,7 @@
         }
     }
     registerIcon('icon-arrow-up', IconArrowUp);
-    DesignSystem.tagFor(IconArrowUp);
+    const iconArrowUpTag = DesignSystem.tagFor(IconArrowUp);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22123,7 +22123,7 @@
         }
     }
     registerIcon('icon-minus-wide', IconMinusWide);
-    DesignSystem.tagFor(IconMinusWide);
+    const iconMinusWideTag = DesignSystem.tagFor(IconMinusWide);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22423,7 +22423,7 @@
         }
     }
     registerIcon('icon-three-dots-line', IconThreeDotsLine);
-    DesignSystem.tagFor(IconThreeDotsLine);
+    const iconThreeDotsLineTag = DesignSystem.tagFor(IconThreeDotsLine);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22834,7 +22834,7 @@
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
     >
-        <${DesignSystem.tagFor(ToggleButton)}
+        <${toggleButtonTag}
             part="button"
             appearance="${x => x.appearance}"
             ?content-hidden="${x => x.contentHidden}"
@@ -22851,9 +22851,9 @@
             <slot slot="start" name="start"></slot>
             <slot></slot>
             <slot slot="end" name="end"></slot>
-        </${DesignSystem.tagFor(ToggleButton)}>
+        </${toggleButtonTag}>
         ${when(x => x.open, html `
-            <${DesignSystem.tagFor(AnchoredRegion)}
+            <${anchoredRegionTag}
                 fixed-placement="true"
                 auto-update-mode="auto"
                 horizontal-inset="true"
@@ -22867,7 +22867,7 @@
                 <span part="menu">
                     <slot name="menu" ${slotted({ property: 'slottedMenus' })}></slot>
                 </span>
-            </${DesignSystem.tagFor(AnchoredRegion)}>
+            </${anchoredRegionTag}>
         `)}
     </template>
 `;
@@ -23091,7 +23091,7 @@
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
-    DesignSystem.tagFor(MenuButton);
+    const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
     const styles$l = css `
     ${display('grid')}
@@ -23427,37 +23427,37 @@
             delegatesFocus: true
         },
         stepDownGlyph: html `
-        <${DesignSystem.tagFor(Button)}
+        <${buttonTag}
             class="step-up-down-button"
             appearance="ghost"
             content-hidden
             tabindex="-1"
         >
             "Decrement"
-            <${DesignSystem.tagFor(IconMinusWide)}
+            <${iconMinusWideTag}
                 slot="start"
             >
-            </${DesignSystem.tagFor(IconMinusWide)}>
-        </${DesignSystem.tagFor(Button)}>
+            </${iconMinusWideTag}>
+        </${buttonTag}>
     `,
         stepUpGlyph: html `
-        <${DesignSystem.tagFor(Button)}
+        <${buttonTag}
             class="step-up-down-button"
             appearance="ghost"
             content-hidden
             tabindex="-1"
         >
             "Increment"
-            <${DesignSystem.tagFor(IconAdd)}
+            <${iconAddTag}
                 slot="start">
-            </${DesignSystem.tagFor(IconAdd)}>
-        </${DesignSystem.tagFor(Button)}>
+            </${iconAddTag}>
+        </${buttonTag}>
     `,
         end: html `
-        <${DesignSystem.tagFor(IconExclamationMark)}
+        <${iconExclamationMarkTag}
             severity="error"
             class="error-icon"
-        ></${DesignSystem.tagFor(IconExclamationMark)}>
+        ></${iconExclamationMarkTag}>
         ${errorTextTemplate}
     `
     });
@@ -23694,10 +23694,10 @@
         styles: styles$h,
         indicator: arrowExpanderDown16X16.data,
         end: html `
-        <${DesignSystem.tagFor(IconExclamationMark)}
+        <${iconExclamationMarkTag}
             severity="error"
             class="error-icon"
-        ></${DesignSystem.tagFor(IconExclamationMark)}>
+        ></${iconExclamationMarkTag}>
         ${errorTextTemplate}
     `
     });
@@ -27487,10 +27487,10 @@
 
         <span class="sort-indicator" aria-hidden="true">
             ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
-                <${DesignSystem.tagFor(IconArrowUp)}></${DesignSystem.tagFor(IconArrowUp)}>
+                <${iconArrowUpTag}></${iconArrowUpTag}>
             `)}
             ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
-                <${DesignSystem.tagFor(IconArrowDown)}></${DesignSystem.tagFor(IconArrowDown)}>
+                <${iconArrowDownTag}></${iconArrowDownTag}>
             `)}
         </span>
     </template>
@@ -27537,6 +27537,7 @@
         styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
+    const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
     const styles$b = css `
     ${display('grid')}
@@ -27593,17 +27594,17 @@
         <div ${ref('cellContentContainer')} class="cell-content-container"></div>
 
         ${when(x => x.hasActionMenu, html `
-            <${DesignSystem.tagFor(MenuButton)}
+            <${menuButtonTag}
                 content-hidden
                 appearance="${ButtonAppearance.ghost}"
                 @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
                 class="action-menu"
             >
-                <${DesignSystem.tagFor(IconThreeDotsLine)} slot="start"></${DesignSystem.tagFor(IconThreeDotsLine)}>
+                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
                 ${x => x.actionMenuLabel}
                 <slot name="cellActionMenu" slot="menu"></slot>
-            </${DesignSystem.tagFor(MenuButton)}>
+            </${menuButtonTag}>
         `)}
     </template>
 `;
@@ -27678,13 +27679,14 @@
         styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
+    const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
     const template$5 = html `
     <template role="row">
         ${repeat(x => x.columnStates, html `
             ${when(x => !x.column.columnHidden, html `
-                <${DesignSystem.tagFor(TableCell)}
+                <${tableCellTag}
                     class="cell"
                     :cellTemplate="${x => x.column.cellTemplate}"
                     :cellStyles="${x => x.column.cellStyles}"
@@ -27701,7 +27703,7 @@
                             slot="cellActionMenu"
                         ></slot>
                     `)}
-                </${DesignSystem.tagFor(TableCell)}>
+                </${tableCellTag}>
             `)}
         `)}
     </template>
@@ -27784,6 +27786,7 @@
         styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
+    const tableRowTag = DesignSystem.tagFor(TableRow);
 
     // prettier-ignore
     const template$4 = html `
@@ -27799,13 +27802,13 @@
                 <div class="header-row" role="row">
                     ${repeat(x => x.columns, html `
                         ${when(x => !x.columnHidden, html `
-                            <${DesignSystem.tagFor(TableHeader)}
+                            <${tableHeaderTag}
                                 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)}>
+                            </${tableHeaderTag}>
                         `)}
                     `)}
                     <div class="header-scrollbar-spacer"></div>
@@ -27817,7 +27820,7 @@
                      role="rowgroup">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
-                            <${DesignSystem.tagFor(TableRow)}
+                            <${tableRowTag}
                                 class="row"
                                 record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
                                 :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
@@ -27833,7 +27836,7 @@
                                     </slot>
                                 `)}
                             `)}                        
-                            </${DesignSystem.tagFor(TableRow)}>
+                            </${tableRowTag}>
                         `)}
                     `)}
                 </div>
@@ -28593,6 +28596,111 @@
         return 1;
     }
 
+    const isColumnProperty = (changedProperty, ...args) => {
+        for (const arg of args) {
+            if (changedProperty === arg) {
+                return true;
+            }
+        }
+        return false;
+    };
+    /**
+     * Helper class to track what updates are needed to the table based on configuration
+     * changes.
+     */
+    class UpdateTracker {
+        constructor(table) {
+            this.requiredUpdates = {
+                rowIds: false,
+                columnIds: false,
+                columnSort: false,
+                columnWidths: false,
+                columnDefinition: false,
+                actionMenuSlots: false
+            };
+            this.updateQueued = false;
+            this.table = table;
+        }
+        get updateRowIds() {
+            return this.requiredUpdates.rowIds;
+        }
+        get updateColumnIds() {
+            return this.requiredUpdates.columnIds;
+        }
+        get updateColumnSort() {
+            return this.requiredUpdates.columnSort;
+        }
+        get updateColumnWidths() {
+            return this.requiredUpdates.columnWidths;
+        }
+        get updateColumnDefinition() {
+            return this.requiredUpdates.columnDefinition;
+        }
+        get updateActionMenuSlots() {
+            return this.requiredUpdates.actionMenuSlots;
+        }
+        get requiresTanStackUpdate() {
+            return (this.requiredUpdates.rowIds
+                || this.requiredUpdates.columnSort
+                || this.requiredUpdates.columnDefinition);
+        }
+        get requiresTanStackDataReset() {
+            return (this.requiredUpdates.rowIds || this.requiredUpdates.columnDefinition);
+        }
+        trackAllStateChanged() {
+            this.setAllKeys(true);
+            this.queueUpdate();
+        }
+        trackColumnPropertyChanged(changedColumnProperty) {
+            if (isColumnProperty(changedColumnProperty, 'columnId')) {
+                this.requiredUpdates.columnIds = true;
+            }
+            else if (isColumnProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
+                this.requiredUpdates.columnDefinition = true;
+            }
+            else if (isColumnProperty(changedColumnProperty, 'sortIndex', 'sortDirection')) {
+                this.requiredUpdates.columnSort = true;
+            }
+            else if (isColumnProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'internalMinPixelWidth', 'columnHidden')) {
+                this.requiredUpdates.columnWidths = true;
+            }
+            else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
+                this.requiredUpdates.actionMenuSlots = true;
+            }
+            this.queueUpdate();
+        }
+        trackColumnInstancesChanged() {
+            this.requiredUpdates.columnIds = true;
+            this.requiredUpdates.columnDefinition = true;
+            this.requiredUpdates.columnSort = true;
+            this.requiredUpdates.columnWidths = true;
+            this.requiredUpdates.actionMenuSlots = true;
+            this.queueUpdate();
+        }
+        trackIdFieldNameChanged() {
+            this.requiredUpdates.rowIds = true;
+            this.queueUpdate();
+        }
+        setAllKeys(value) {
+            Object.keys(this.requiredUpdates).forEach(key => {
+                this.requiredUpdates[key] = value;
+            });
+        }
+        queueUpdate() {
+            if (!this.table.$fastController.isConnected) {
+                return;
+            }
+            if (!this.updateQueued) {
+                this.updateQueued = true;
+                DOM.queueUpdate(() => {
+                    this.table.update();
+                    this.setAllKeys(false);
+                    this.updateQueued = false;
+                });
+            }
+        }
+    }
+
     /**
      * This class provides helper methods for managing the layout of cells within
      * a Table.
@@ -28648,6 +28756,7 @@
              */
             this.scrollX = 0;
             this.tableValidator = new TableValidator();
+            this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
             this.onViewPortScroll = (event) => {
                 this.scrollX = event.target.scrollLeft;
@@ -28675,7 +28784,8 @@
         connectedCallback() {
             super.connectedCallback();
             this.virtualizer.connectedCallback();
-            this.validateAndObserveColumns();
+            this.updateTracker.trackAllStateChanged();
+            this.observeColumns();
             this.viewport.addEventListener('scroll', this.onViewPortScroll, {
                 passive: true
             });
@@ -28697,24 +28807,8 @@
          * is the string name of the property that changed on that column.
          */
         handleChange(source, args) {
-            if (source instanceof TableColumn) {
-                if (args === 'columnId') {
-                    this.validateColumnIds();
-                }
-                else if (args === 'operandDataRecordFieldName'
-                    || args === 'sortOperation') {
-                    this.generateTanStackColumns();
-                }
-                else if (args === 'sortIndex' || args === 'sortDirection') {
-                    this.validateColumnSortIndices();
-                    this.setSortState();
-                }
-                else if (args === 'currentFractionalWidth'
-                    || args === 'currentPixelWidth'
-                    || args === 'internalMinPixelWidth'
-                    || args === 'columnHidden') {
-                    this.updateRowGridColumns();
-                }
+            if (source instanceof TableColumn && typeof args === 'string') {
+                this.updateTracker.trackColumnPropertyChanged(args);
             }
         }
         onRowActionMenuBeforeToggle(event) {
@@ -28724,29 +28818,33 @@
         onRowActionMenuToggle(event) {
             this.$emit('action-menu-toggle', event.detail);
         }
-        childItemsChanged() {
-            void this.updateColumnsFromChildItems();
+        /**
+         * @internal
+         */
+        update() {
+            this.validate();
+            if (this.updateTracker.requiresTanStackUpdate) {
+                this.updateTanStack();
+            }
+            if (this.updateTracker.updateActionMenuSlots) {
+                this.updateActionMenuSlots();
+            }
+            if (this.updateTracker.updateColumnWidths) {
+                this.updateRowGridColumns();
+            }
         }
         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.setTableData(this.table.options.data);
+            if (!this.$fastController.isConnected) {
+                return;
+            }
+            this.updateTracker.trackIdFieldNameChanged();
         }
         columnsChanged(_prev, _next) {
             if (!this.$fastController.isConnected) {
                 return;
             }
-            this.validateAndObserveColumns();
-            this.generateTanStackColumns();
-            this.setSortState();
-            const slots = new Set();
-            for (const column of this.columns) {
-                if (column.actionMenuSlot) {
-                    slots.add(column.actionMenuSlot);
-                }
-            }
-            this.actionMenuSlots = Array.from(slots);
-            this.updateRowGridColumns();
+            this.observeColumns();
+            this.updateTracker.trackColumnInstancesChanged();
         }
         removeColumnObservers() {
             this.columnNotifiers.forEach(notifier => {
@@ -28754,30 +28852,20 @@
             });
             this.columnNotifiers = [];
         }
-        validateAndObserveColumns() {
+        observeColumns() {
             this.removeColumnObservers();
             for (const column of this.columns) {
                 const notifier = Observable.getNotifier(column);
                 notifier.subscribe(this);
                 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');
         }
-        updateRowGridColumns() {
-            this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(this.columns);
+        childItemsChanged() {
+            void this.updateColumnsFromChildItems();
         }
         async updateColumnsFromChildItems() {
             const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
@@ -28786,18 +28874,53 @@
             await Promise.all(definedElements);
             this.columns = this.childItems.filter((x) => x instanceof TableColumn);
         }
+        updateTanStack() {
+            const updatedOptions = {
+                state: {}
+            };
+            if (this.updateTracker.updateColumnSort) {
+                updatedOptions.state.sorting = this.calculateTanStackSortState();
+            }
+            if (this.updateTracker.updateColumnDefinition) {
+                updatedOptions.columns = this.calculateTanStackColumns();
+            }
+            if (this.updateTracker.updateRowIds) {
+                updatedOptions.getRowId = this.calculateTanStackRowIdFunction();
+            }
+            if (this.updateTracker.requiresTanStackDataReset) {
+                // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
+                updatedOptions.data = [...this.table.options.data];
+            }
+            this.updateTableOptions(updatedOptions);
+        }
+        updateActionMenuSlots() {
+            const slots = new Set();
+            for (const column of this.columns) {
+                if (column.actionMenuSlot) {
+                    slots.add(column.actionMenuSlot);
+                }
+            }
+            this.actionMenuSlots = Array.from(slots);
+        }
+        updateRowGridColumns() {
+            this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(this.columns);
+        }
+        validate() {
+            this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
+            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
+            this.validateWithData(this.table.options.data);
+        }
+        validateWithData(data) {
+            this.tableValidator.validateRecordIds(data, this.idFieldName);
+            this.canRenderRows = this.checkValidity();
+        }
         setTableData(newData) {
             const data = newData.map(record => {
                 return { ...record };
             });
-            this.tableValidator.validateRecordIds(data, this.idFieldName);
-            this.canRenderRows = this.checkValidity();
-            const getRowIdFunction = this.idFieldName === null || this.idFieldName === undefined
-                ? undefined
-                : (record) => record[this.idFieldName];
+            this.validateWithData(data);
             this.updateTableOptions({
-                data,
-                getRowId: getRowIdFunction
+                data
             });
         }
         refreshRows() {
@@ -28820,27 +28943,26 @@
             this.table.setOptions(this.options);
             this.refreshRows();
         }
-        setSortState() {
+        calculateTanStackSortState() {
             const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
             this.firstSortedColumn = sortedColumns.length
                 ? sortedColumns[0]
                 : undefined;
-            const tanStackSortingState = sortedColumns.map(column => {
+            return sortedColumns.map(column => {
                 return {
                     id: column.internalUniqueId,
-                    desc: column.sortDirection
-                        === TableColumnSortDirection.descending
+                    desc: column.sortDirection === TableColumnSortDirection.descending
                 };
             });
-            this.updateTableOptions({
-                state: {
-                    sorting: tanStackSortingState
-                }
-            });
         }
-        generateTanStackColumns() {
-            const generatedColumns = this.columns.map(column => {
-                const columnDef = {
+        calculateTanStackRowIdFunction() {
+            return this.idFieldName === null || this.idFieldName === undefined
+                ? undefined
+                : (record) => record[this.idFieldName];
+        }
+        calculateTanStackColumns() {
+            return this.columns.map(column => {
+                return {
                     id: column.internalUniqueId,
                     accessorFn: (data) => {
                         const fieldName = column.operandDataRecordFieldName;
@@ -28851,13 +28973,6 @@
                     },
                     sortingFn: getTanStackSortingFunction(column.sortOperation)
                 };
-                return columnDef;
-            });
-            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
             });
         }
     }
@@ -29548,10 +29663,10 @@
             delegatesFocus: true
         },
         end: html `
-        <${DesignSystem.tagFor(IconExclamationMark)}
+        <${iconExclamationMarkTag}
             severity="error"
             class="error-icon"
-        ></${DesignSystem.tagFor(IconExclamationMark)}>
+        ></${iconExclamationMarkTag}>
         <span part="actions">
             <slot name="actions"></slot>
         </span>
@@ -29694,7 +29809,7 @@
     // prettier-ignore
     const template$1 = html `
             ${when(x => x.tooltipVisible, html `
-            <${DesignSystem.tagFor(AnchoredRegion)}
+            <${anchoredRegionTag}
                 class="anchored-region"
                 fixed-placement="true"
                 auto-update-mode="${x => x.autoUpdateMode}"
@@ -29712,17 +29827,17 @@
                 ${ref('region')}
             >
                 <div class="tooltip" part="tooltip" role="tooltip">
-                    <${DesignSystem.tagFor(IconExclamationMark)}
+                    <${iconExclamationMarkTag}
                         severity="error"
                         class="status-icon"
-                    ></${DesignSystem.tagFor(IconExclamationMark)}>
-                    <${DesignSystem.tagFor(IconInfo)}
+                    ></${iconExclamationMarkTag}>
+                    <${iconInfoTag}
                         severity="information"
                         class="status-icon"
-                    ></${DesignSystem.tagFor(IconInfo)}>
+                    ></${iconInfoTag}>
                     <slot></slot>
                 </div>
-            </${DesignSystem.tagFor(AnchoredRegion)}>
+            </${anchoredRegionTag}>
         `)}
 `;
 
@@ -29960,12 +30075,6 @@
         height: ${iconSize};
     }
 
-    ${
-/*
-Cannot call DesignSystem.tagFor(TreeItem) as this string is evaluated
-before the registration of the element itself; the style is self-referencing.
-Instead styling against the role which is more general and likely a better approach.
-*/ ''}
     ::slotted([role='treeitem']) {
         --ni-private-tree-item-nested-width: 1em;
         --ni-private-expand-collapse-button-nested-width: calc(