@ni/nimble-components 20.4.1 → 20.4.2

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 20 Sep 2023 02:32:58 GMT
+   * Generated on Wed, 20 Sep 2023 15:04:09 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -63461,6 +63461,14 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], ColumnInternals.prototype, "currentSortDirection", void 0);
+  function isColumnInternalsProperty(changedProperty, ...args) {
+      for (const arg of args) {
+          if (changedProperty === arg) {
+              return true;
+          }
+      }
+      return false;
+  }
 
   /**
    * The base class for table columns
@@ -64145,31 +64153,31 @@ img.ProseMirror-separator {
         <span class="row-front-spacer"></span>
 
         <span ${ref('cellContainer')} class="cell-container">
-            ${repeat(x => x.columnStates, html `
-                ${when(x => !x.column.columnHidden, html `
+            ${repeat(x => x.columns, html `
+                ${when(x => !x.columnHidden, html `
                     <${tableCellTag}
                         class="cell"
-                        :cellState="${x => x.cellState}"
-                        :cellViewTemplate="${x => x.column.columnInternals.cellViewTemplate}"
-                        :column="${x => x.column}"
-                        column-id="${x => x.column.columnId}"
+                        :cellState="${(_, c) => c.parent.cellStates[c.index]}"
+                        :cellViewTemplate="${x => x.columnInternals.cellViewTemplate}"
+                        :column="${x => x}"
+                        column-id="${x => x.columnId}"
                         :recordId="${(_, c) => c.parent.recordId}"
-                        ?has-action-menu="${x => !!x.column.actionMenuSlot}"
-                        action-menu-label="${x => x.column.actionMenuLabel}"
-                        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
-                        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
-                        :nestingLevel="${x => x.cellIndentLevel};"
+                        ?has-action-menu="${x => !!x.actionMenuSlot}"
+                        action-menu-label="${x => x.actionMenuLabel}"
+                        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
+                        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
+                        :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]};"
                     >
 
-                        ${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
+                        ${when((x, c) => (c.parent.currentActionMenuColumn === x) && x.actionMenuSlot, html `
                             <slot
-                                name="${x => `row-action-menu-${x.column.actionMenuSlot}`}"
+                                name="${x => `row-action-menu-${x.actionMenuSlot}`}"
                                 slot="cellActionMenu"
                             ></slot>
                         `)}
                     </${tableCellTag}>
                 `)}
-            `)}
+            `, { recycle: false, positioning: true })}
         </span>
     </template>
 `;
@@ -64184,41 +64192,38 @@ img.ProseMirror-separator {
           this.selectable = false;
           this.selected = false;
           this.hideSelection = false;
+          /**
+           * @internal
+           * */
+          this.columnNotifiers = [];
           this.columns = [];
           this.nestingLevel = 0;
           this.menuOpen = false;
+          /**
+           * @internal
+           * An array that parallels the `columns` array and contains the indent
+           * level of each column's cell.
+           * */
+          this.cellIndentLevels = [];
+          /**
+           * @internal
+           * An array that parallels the `columns` array and contains the cell state
+           * of each column's cell.
+           * */
+          this.cellStates = [];
           // Programmatically updating the selection state of a checkbox fires the 'change' event.
           // Therefore, selection change events that occur due to programmatically updating
           // the selection checkbox 'checked' value should be ingored.
           // https://github.com/microsoft/fast/issues/5750
           this.ignoreSelectionChangeEvents = false;
       }
-      get columnStates() {
-          return this.columns.map((column, i) => {
-              const fieldNames = column.columnInternals.dataRecordFieldNames;
-              let cellState;
-              if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
-                  const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
-                  const cellRecord = Object.fromEntries(column.columnInternals.cellRecordFieldNames.map((k, j) => [
-                      k,
-                      cellDataValues[j]
-                  ]));
-                  const columnConfig = column.columnInternals.columnConfig;
-                  cellState = {
-                      cellRecord,
-                      columnConfig
-                  };
-              }
-              const cellIndentLevel = i === 0 && this.nestingLevel > 0 ? this.nestingLevel - 1 : 0;
-              return { column, cellState, cellIndentLevel };
-          });
-      }
       get ariaSelected() {
           if (this.selectable) {
               return this.selected ? 'true' : 'false';
           }
           return null;
       }
+      /** @internal */
       onSelectionChange(event) {
           if (this.ignoreSelectionChangeEvents) {
               return;
@@ -64232,10 +64237,12 @@ img.ProseMirror-separator {
           };
           this.$emit('row-selection-toggle', detail);
       }
+      /** @internal */
       onCellActionMenuBeforeToggle(event, column) {
           this.currentActionMenuColumn = column;
           this.emitActionMenuToggleEvent('row-action-menu-beforetoggle', event.detail, column);
       }
+      /** @internal */
       onCellActionMenuToggle(event, column) {
           this.menuOpen = event.detail.newState;
           this.emitActionMenuToggleEvent('row-action-menu-toggle', event.detail, column);
@@ -64248,6 +64255,15 @@ img.ProseMirror-separator {
               }
           }
       }
+      /** @internal */
+      handleChange(source, args) {
+          if (source instanceof ColumnInternals
+              && typeof args === 'string'
+              && (isColumnInternalsProperty(args, 'columnConfig')
+                  || isColumnInternalsProperty(args, 'dataRecordFieldNames'))) {
+              this.updateCellStates();
+          }
+      }
       emitActionMenuToggleEvent(eventType, menuButtonEventDetail, column) {
           const detail = {
               newState: menuButtonEventDetail.newState,
@@ -64257,6 +64273,58 @@ img.ProseMirror-separator {
           };
           this.$emit(eventType, detail);
       }
+      columnsChanged() {
+          this.updateCellIndentLevels();
+          this.updateCellStates();
+          this.observeColumns();
+      }
+      dataRecordChanged() {
+          this.updateCellStates();
+      }
+      nestingLevelChanged() {
+          this.updateCellIndentLevels();
+      }
+      updateCellIndentLevels() {
+          this.cellIndentLevels = this.columns.map((_, i) => {
+              if (i === 0 && this.nestingLevel > 0) {
+                  return this.nestingLevel - 1;
+              }
+              return 0;
+          });
+      }
+      removeColumnObservers() {
+          this.columnNotifiers.forEach(notifier => {
+              notifier.unsubscribe(this);
+          });
+          this.columnNotifiers = [];
+      }
+      observeColumns() {
+          this.removeColumnObservers();
+          this.columnNotifiers = this.columns.map(column => {
+              const notifier = Observable.getNotifier(column.columnInternals);
+              notifier.subscribe(this);
+              return notifier;
+          });
+      }
+      updateCellStates() {
+          this.cellStates = this.columns.map(column => {
+              const fieldNames = column.columnInternals.dataRecordFieldNames;
+              let cellState;
+              if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
+                  const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
+                  const cellRecord = Object.fromEntries(column.columnInternals.cellRecordFieldNames.map((k, j) => [
+                      k,
+                      cellDataValues[j]
+                  ]));
+                  const columnConfig = column.columnInternals.columnConfig;
+                  cellState = {
+                      cellRecord,
+                      columnConfig
+                  };
+              }
+              return cellState;
+          });
+      }
       hasValidFieldNames(keys) {
           return keys.every(key => key !== undefined);
       }
@@ -64303,10 +64371,13 @@ img.ProseMirror-separator {
   ], TableRow.prototype, "menuOpen", void 0);
   __decorate$1([
       observable
-  ], TableRow.prototype, "selectionCheckbox", void 0);
+  ], TableRow.prototype, "cellIndentLevels", void 0);
   __decorate$1([
-      volatile
-  ], TableRow.prototype, "columnStates", null);
+      observable
+  ], TableRow.prototype, "cellStates", void 0);
+  __decorate$1([
+      observable
+  ], TableRow.prototype, "selectionCheckbox", void 0);
   __decorate$1([
       volatile
   ], TableRow.prototype, "ariaSelected", null);
@@ -65766,14 +65837,6 @@ img.ProseMirror-separator {
       }
       return false;
   };
-  const isColumnInternalsProperty = (changedProperty, ...args) => {
-      for (const arg of args) {
-          if (changedProperty === arg) {
-              return true;
-          }
-      }
-      return false;
-  };
   const trackedItems$1 = [
       'rowIds',
       'groupRows',
@@ -66597,7 +66660,7 @@ img.ProseMirror-separator {
               this.columnNotifiers.push(notifier);
               const notifierInternals = Observable.getNotifier(column.columnInternals);
               notifierInternals.subscribe(this);
-              this.columnNotifiers.push(notifier);
+              this.columnNotifiers.push(notifierInternals);
           }
       }
       getColumnsParticipatingInSorting() {