@ni/nimble-components 20.18.0 → 21.0.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 17 Jan 2024 14:08:42 GMT
+   * Generated on Fri, 19 Jan 2024 22:07:28 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -23897,7 +23897,7 @@
       tableGroupExpandLabel: 'Expand group',
       tableRowCollapseLabel: 'Collapse row',
       tableRowExpandLabel: 'Expand row',
-      tableGroupsCollapseAllLabel: 'Collapse all groups',
+      tableCollapseAllLabel: 'Collapse all',
       tableCellActionMenuLabel: 'Options',
       tableColumnHeaderGroupedLabel: 'Grouped',
       tableColumnHeaderSortedAscendingLabel: 'Sorted ascending',
@@ -23924,10 +23924,10 @@
       name: 'table-row-expand-label',
       cssCustomPropertyName: null
   }).withDefault(tableLabelDefaults.tableRowExpandLabel);
-  const tableGroupsCollapseAllLabel = DesignToken.create({
-      name: 'table-groups-collapse-all-label',
+  const tableCollapseAllLabel = DesignToken.create({
+      name: 'table-collapse-all-label',
       cssCustomPropertyName: null
-  }).withDefault(tableLabelDefaults.tableGroupsCollapseAllLabel);
+  }).withDefault(tableLabelDefaults.tableCollapseAllLabel);
   const tableCellActionMenuLabel = DesignToken.create({
       name: 'table-cell-action-menu-label',
       cssCustomPropertyName: null
@@ -23966,7 +23966,7 @@
       groupExpand: tableGroupExpandLabel,
       rowCollapse: tableRowCollapseLabel,
       rowExpand: tableRowExpandLabel,
-      groupsCollapseAll: tableGroupsCollapseAllLabel,
+      collapseAll: tableCollapseAllLabel,
       cellActionMenu: tableCellActionMenuLabel,
       columnHeaderGrouped: tableColumnHeaderGroupedLabel,
       columnHeaderSortedAscending: tableColumnHeaderSortedAscendingLabel,
@@ -23998,8 +23998,8 @@
       attr({ attribute: 'row-expand' })
   ], LabelProviderTable.prototype, "rowExpand", void 0);
   __decorate$1([
-      attr({ attribute: 'groups-collapse-all' })
-  ], LabelProviderTable.prototype, "groupsCollapseAll", void 0);
+      attr({ attribute: 'collapse-all' })
+  ], LabelProviderTable.prototype, "collapseAll", void 0);
   __decorate$1([
       attr({ attribute: 'cell-action-menu' })
   ], LabelProviderTable.prototype, "cellActionMenu", void 0);
@@ -61480,6 +61480,7 @@ img.ProseMirror-separator {
           this.duplicateGroupIndex = false;
           this.idFieldNameNotConfigured = false;
           this.invalidColumnConfiguration = false;
+          this.invalidParentIdConfiguration = false;
           this.recordIds = new Set();
       }
       getValidity() {
@@ -61492,7 +61493,8 @@ img.ProseMirror-separator {
               duplicateSortIndex: this.duplicateSortIndex,
               duplicateGroupIndex: this.duplicateGroupIndex,
               idFieldNameNotConfigured: this.idFieldNameNotConfigured,
-              invalidColumnConfiguration: this.invalidColumnConfiguration
+              invalidColumnConfiguration: this.invalidColumnConfiguration,
+              invalidParentIdConfiguration: this.invalidParentIdConfiguration
           };
       }
       isValid() {
@@ -61504,12 +61506,14 @@ img.ProseMirror-separator {
               && !validity.missingRecordId
               && !validity.invalidRecordId);
       }
-      validateSelectionMode(selectionMode, idFieldName) {
-          if (selectionMode === TableRowSelectionMode.none) {
-              this.idFieldNameNotConfigured = false;
+      validateIdFieldConfiguration(selectionMode, idFieldName, parentIdFieldName) {
+          const idFieldNameRequired = selectionMode !== TableRowSelectionMode.none
+              || typeof parentIdFieldName === 'string';
+          if (idFieldNameRequired) {
+              this.idFieldNameNotConfigured = typeof idFieldName !== 'string';
           }
           else {
-              this.idFieldNameNotConfigured = typeof idFieldName !== 'string';
+              this.idFieldNameNotConfigured = false;
           }
           return !this.idFieldNameNotConfigured;
       }
@@ -61523,11 +61527,11 @@ img.ProseMirror-separator {
               return true;
           }
           for (const record of data) {
-              if (!Object.prototype.hasOwnProperty.call(record.clientRecord, idFieldName)) {
+              if (!Object.prototype.hasOwnProperty.call(record, idFieldName)) {
                   this.missingRecordId = true;
                   continue;
               }
-              const id = record.clientRecord[idFieldName];
+              const id = record[idFieldName];
               if (typeof id !== 'string') {
                   this.invalidRecordId = true;
                   continue;
@@ -61576,6 +61580,9 @@ img.ProseMirror-separator {
       getPresentRecordIds(requestedRecordIds) {
           return requestedRecordIds.filter(id => this.recordIds.has(id));
       }
+      setParentIdConfigurationValidity(valid) {
+          this.invalidParentIdConfiguration = !valid;
+      }
       validateIndicesAreUnique(indices) {
           const numberSet = new Set(indices);
           return numberSet.size === indices.length;
@@ -62131,7 +62138,7 @@ img.ProseMirror-separator {
                 `)}
             </span>
         `)}
-        <span class="row-front-spacer ${x => (x.isParentRow && x.nestingLevel === 0 ? 'top-level-parent' : '')}"></span>
+        <span class="row-front-spacer ${x => (x.isTopLevelParentRow ? 'top-level-parent' : '')}"></span>
         ${when(x => x.isParentRow, html `
             <${buttonTag}
                 appearance="${ButtonAppearance.ghost}"
@@ -62224,6 +62231,9 @@ img.ProseMirror-separator {
               this.expandIcon?.removeEventListener('transitionend', this.removeAnimatingClass);
           };
       }
+      get isTopLevelParentRow() {
+          return this.isParentRow && this.nestingLevel === 0;
+      }
       get ariaSelected() {
           if (this.selectable) {
               return this.selected ? 'true' : 'false';
@@ -62411,6 +62421,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableRow.prototype, "animationClass", void 0);
+  __decorate$1([
+      volatile
+  ], TableRow.prototype, "isTopLevelParentRow", null);
   __decorate$1([
       volatile
   ], TableRow.prototype, "ariaSelected", null);
@@ -62547,7 +62560,7 @@ img.ProseMirror-separator {
 
         <div class="group-row-header-content">
             ${x => x.groupColumn?.columnInternals.groupHeaderViewTemplate}
-            <span class="group-row-child-count">(${x => x.leafItemCount})</span>
+            <span class="group-row-child-count">(${x => x.immediateChildCount})</span>
         </div>
     </template>
 `;
@@ -62628,7 +62641,7 @@ img.ProseMirror-separator {
   ], TableGroupRow.prototype, "nestingLevel", void 0);
   __decorate$1([
       observable
-  ], TableGroupRow.prototype, "leafItemCount", void 0);
+  ], TableGroupRow.prototype, "immediateChildCount", void 0);
   __decorate$1([
       observable
   ], TableGroupRow.prototype, "groupColumn", void 0);
@@ -62658,7 +62671,7 @@ img.ProseMirror-separator {
   // prettier-ignore
   const template$e = html `
     <template
-        role="grid"
+        role="treegrid"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ${children$1({ property: 'childItems', filter: elements() })}
     >
@@ -62698,11 +62711,11 @@ img.ProseMirror-separator {
                                 class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
                                 content-hidden
                                 appearance="${ButtonAppearance.ghost}"
-                                title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
-                                @click="${x => x.handleCollapseAllGroupRows()}"
+                                title="${x => tableCollapseAllLabel.getValueFor(x)}"
+                                @click="${x => x.handleCollapseAllRows()}"
                             >
                                 <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
-                                ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
+                                ${x => tableCollapseAllLabel.getValueFor(x)}
                             </${buttonTag}>
                         </span>
                         <span class="column-headers-container" ${ref('columnHeadersContainer')}>
@@ -62739,13 +62752,13 @@ img.ProseMirror-separator {
                         role="rowgroup">
                         ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                             ${repeat(x => x.virtualizer.visibleItems, html `
-                                ${when((x, c) => c.parent.tableData[x.index]?.isGrouped, html `
+                                ${when((x, c) => c.parent.tableData[x.index]?.isGroupRow, html `
                                     <${tableGroupRowTag}
                                         class="group-row"
                                         :groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
                                         ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
                                         :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
-                                        :leafItemCount="${(x, c) => c.parent.tableData[x.index]?.leafItemCount}"
+                                        :immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
                                         :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
                                         ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
                                         selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
@@ -62754,21 +62767,25 @@ img.ProseMirror-separator {
                                     >
                                     </${tableGroupRowTag}>
                                 `)}
-                                ${when((x, c) => !c.parent.tableData[x.index]?.isGrouped, html `
+                                ${when((x, c) => !c.parent.tableData[x.index]?.isGroupRow, html `
                                     <${tableRowTag}
                                         class="row"
                                         record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
                                         ?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
                                         ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
+                                        ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
                                         ?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
                                         :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                         :columns="${(_, c) => c.parent.columns}"
+                                        :isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
                                         :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
                                         ?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
                                         @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
                                         @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                         @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
                                         @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
+                                        @row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
+                                        :dataIndex="${x => x.index}"
                                     >
                                     ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
                                         ${repeat((_, c) => c.parent.actionMenuSlots, html `
@@ -63892,6 +63909,7 @@ img.ProseMirror-separator {
   };
   const trackedItems$1 = [
       'rowIds',
+      'rowParentIds',
       'groupRows',
       'columnIds',
       'columnSort',
@@ -63913,6 +63931,9 @@ img.ProseMirror-separator {
       get updateRowIds() {
           return this.isTracked('rowIds');
       }
+      get updateRowParentIds() {
+          return this.isTracked('rowParentIds');
+      }
       get updateGroupRows() {
           return this.isTracked('groupRows');
       }
@@ -63936,13 +63957,16 @@ img.ProseMirror-separator {
       }
       get requiresTanStackUpdate() {
           return (this.isTracked('rowIds')
+              || this.isTracked('rowParentIds')
               || this.isTracked('columnSort')
               || this.isTracked('columnDefinition')
               || this.isTracked('groupRows')
               || this.isTracked('selectionMode'));
       }
       get requiresTanStackDataReset() {
-          return this.isTracked('rowIds') || this.isTracked('columnDefinition');
+          return (this.isTracked('rowIds')
+              || this.isTracked('columnDefinition')
+              || this.isTracked('rowParentIds'));
       }
       trackAllStateChanged() {
           this.trackAll();
@@ -63987,6 +64011,10 @@ img.ProseMirror-separator {
           this.track('rowIds');
           this.queueUpdate();
       }
+      trackParentIdFieldNameChanged() {
+          this.track('rowParentIds');
+          this.queueUpdate();
+      }
       trackSelectionModeChanged() {
           this.track('selectionMode');
           this.queueUpdate();
@@ -64015,18 +64043,20 @@ img.ProseMirror-separator {
       }
       reset() { }
       toggleIsRowSelected(rowState, isSelecting) {
-          if (rowState.isGrouped
+          if (rowState.isGroupRow
               && rowState.selectionState === TableRowSelectionState.selected) {
               // Work around for https://github.com/TanStack/table/issues/4759
               // Manually deselect all leaf rows when a fully selected group is being deselected.
               this.deselectAllLeafRows(rowState.id);
           }
           else {
-              this.tanStackTable.getRow(rowState.id).toggleSelected(isSelecting);
+              this.tanStackTable.getRow(rowState.id).toggleSelected(isSelecting, {
+                  selectChildren: rowState.isGroupRow
+              });
           }
       }
       selectSingleRow(rowState) {
-          if (rowState.isGrouped) {
+          if (rowState.isGroupRow) {
               throw new Error('function not intended to select grouped rows');
           }
           const currentSelection = this.tanStackTable.getState().rowSelection;
@@ -64064,7 +64094,7 @@ img.ProseMirror-separator {
           }
           return row
               .getLeafRows()
-              .filter(leafRow => leafRow.getLeafRows().length === 0)
+              .filter(leafRow => !leafRow.getIsGrouped())
               .map(leafRow => leafRow.id);
       }
       getAllOrderedRows() {
@@ -64251,6 +64281,19 @@ img.ProseMirror-separator {
       handleSelectionReset() {
           this.selectionManager.reset();
       }
+      getCurrentSelectedRecordIds() {
+          const tanStackSelectionState = this.tanStackTable.options.state.rowSelection;
+          if (!tanStackSelectionState) {
+              return [];
+          }
+          const selectedRecordIds = [];
+          Object.entries(tanStackSelectionState).forEach(([recordId, isSelected]) => {
+              if (isSelected) {
+                  selectedRecordIds.push(recordId);
+              }
+          });
+          return selectedRecordIds;
+      }
       createSelectionManager(selectionMode) {
           switch (selectionMode) {
               case TableRowSelectionMode.multiple:
@@ -64265,6 +64308,225 @@ img.ProseMirror-separator {
       }
   }
 
+  // Modified from https://github.com/philipstanislaus/performant-array-to-tree/blob/v1.11.0/src/arrayToTree.ts
+  // Copyright (c) 2022 philipstanislaus
+  // SPDX-License-Identifier: MIT
+  /**
+   * Unflattens an array to a tree with runtime O(n)
+   */
+  function arrayToTree(items, config) {
+      const conf = config;
+      // the resulting unflattened tree
+      const rootItems = [];
+      // stores all already processed items with their ids as key so we can easily look them up
+      const lookup = {};
+      // stores all item ids that have not been added to the resulting unflattened tree yet
+      // this is an opt-in property, since it has a slight runtime overhead
+      const orphanIds = new Set();
+      // idea of this loop:
+      // whenever an item has a parent, but the parent is not yet in the lookup object, we store a preliminary parent
+      // in the lookup object and fill it with the data of the parent later
+      // if an item has no parentId, add it as a root element to rootItems
+      // Convert to a for-loop to have access to the item's index in the flat list
+      for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          const itemId = item[conf.id];
+          const parentId = item[conf.parentId];
+          // look whether item already exists in the lookup table
+          if (!Object.prototype.hasOwnProperty.call(lookup, itemId)) {
+              // item is not yet there, so add a preliminary item (its data will be added later)
+              lookup[itemId] = {
+                  subRows: [],
+                  clientRecord: undefined,
+                  originalIndex: undefined
+              };
+          }
+          // if we track orphans, delete this item from the orphan set if it is in it
+          if (orphanIds) {
+              orphanIds.delete(itemId);
+          }
+          // add the current item's data to the item in the lookup table
+          lookup[itemId].clientRecord = item;
+          const treeItem = lookup[itemId];
+          // Add the index to the item
+          treeItem.originalIndex = i;
+          if (parentId === null || parentId === undefined) {
+              // is a root item
+              rootItems.push(treeItem);
+          }
+          else {
+              // has a parent
+              // look whether the parent already exists in the lookup table
+              if (!Object.prototype.hasOwnProperty.call(lookup, parentId)) {
+                  // parent is not yet there, so add a preliminary parent (its data will be added later)
+                  lookup[parentId] = {
+                      subRows: [],
+                      clientRecord: undefined,
+                      originalIndex: undefined
+                  };
+                  // if we track orphans, add the generated parent to the orphan list
+                  if (orphanIds) {
+                      orphanIds.add(parentId);
+                  }
+              }
+              // add the current item to the parent
+              lookup[parentId].subRows.push(treeItem);
+          }
+      }
+      if (orphanIds?.size) {
+          const orphans = Array.from(orphanIds.values()).join(',');
+          throw new Error(`The items array contains orphans that point to the following parentIds: [${orphans}]. These parentIds do not exist in the items array.`);
+      }
+      if (countNodes(rootItems) < Object.keys(lookup).length) {
+          throw new Error('The items array contains nodes with a circular parent/child relationship.');
+      }
+      return rootItems;
+  }
+  /**
+   * Returns the number of nodes in a tree in a recursive way
+   * @param tree An array of nodes (tree items), each having a field `childrenField` that contains an array of nodes
+   * @returns Number of nodes in the tree
+   */
+  function countNodes(tree) {
+      return tree.reduce((sum, n) => sum + 1 + (n.subRows && countNodes(n.subRows)), 0);
+  }
+
+  /**
+   * Manages data hierarchy within the table, including converting between a flat list of
+   * data and hierarchical data.
+   */
+  class DataHierarchyManager {
+      constructor(records, idFieldName, parentIdFieldName) {
+          this.isDataFlat = false;
+          if (typeof idFieldName === 'string'
+              && typeof parentIdFieldName === 'string') {
+              try {
+                  this._hierarchicalData = arrayToTree(records, {
+                      id: idFieldName,
+                      parentId: parentIdFieldName
+                  });
+                  this.isDataFlat = false;
+                  this._parentIdConfigurationValid = true;
+              }
+              catch {
+                  this.isDataFlat = true;
+                  this._hierarchicalData = records.map((record, index) => ({
+                      clientRecord: { ...record },
+                      originalIndex: index
+                  }));
+                  this._parentIdConfigurationValid = false;
+              }
+          }
+          else {
+              this.isDataFlat = true;
+              this._hierarchicalData = records.map((record, index) => ({
+                  clientRecord: { ...record },
+                  originalIndex: index
+              }));
+              this._parentIdConfigurationValid = true;
+          }
+      }
+      get hierarchicalData() {
+          return this._hierarchicalData;
+      }
+      get parentIdConfigurationValid() {
+          return this._parentIdConfigurationValid;
+      }
+      getAllRecords(sort = false) {
+          const allNodes = [];
+          this.getAllNodes(this._hierarchicalData, allNodes);
+          if (this.isDataFlat || !sort) {
+              // If the data is flat, then it was never reordered to support hierarchy.
+              // Therefore, there is no need to sort the nodes.
+              return allNodes.map(x => x.clientRecord);
+          }
+          return allNodes
+              .sort((a, b) => a.originalIndex - b.originalIndex)
+              .map(x => x.clientRecord);
+      }
+      getAllNodes(parentNodes, allNodes) {
+          for (const parentNode of parentNodes) {
+              allNodes.push(parentNode);
+              if (parentNode.subRows) {
+                  this.getAllNodes(parentNode.subRows, allNodes);
+              }
+          }
+      }
+  }
+
+  /**
+   * Manages the expanded/collapsed state of rows in the table.
+   *
+   * We must track the expansion state separately from TanStack because:
+   *   1. TanStack does not support having a different initial expansion state per row unless explicitly
+   *      specified for each row by ID. This causes problems in the nimble-table because we could have
+   *      a different initial expansion state for group rows, parent rows, and parent rows with lazy
+   *      loaded children.
+   *   2. TanStack does not remove entries from its expanded state when those rows are no longer present
+   *      in the data. This is not ideal because the object maintaining the expansion state can grow unbounded.
+   */
+  class ExpansionManager {
+      constructor(tanStackTable) {
+          this.tanStackTable = tanStackTable;
+          // This field represents whether or not the expanded state of **all** rows is in the default expanded
+          // state or not. Note that the default expanded state for a particular row type (group vs parent) can
+          // potentially be different (e.g. expanded for groups and collapsed for parent rows).
+          this.isInDefaultState = true;
+          this.collapsedRows = new Set();
+      }
+      isRowExpanded(row) {
+          if (!this.isRowExpandable(row)) {
+              return false;
+          }
+          return this.isInDefaultState || !this.collapsedRows.has(row.id);
+      }
+      toggleRowExpansion(row) {
+          if (!this.isRowExpandable(row)) {
+              return;
+          }
+          const wasExpanded = this.isRowExpanded(row);
+          this.isInDefaultState = false;
+          if (wasExpanded) {
+              this.collapsedRows.add(row.id);
+          }
+          else {
+              this.collapsedRows.delete(row.id);
+          }
+          row.toggleExpanded();
+      }
+      collapseAll() {
+          this.reset();
+          this.isInDefaultState = false;
+          const rows = this.tanStackTable.getRowModel().flatRows;
+          for (const row of rows) {
+              if (this.isRowExpandable(row)) {
+                  this.collapsedRows.add(row.id);
+              }
+          }
+          this.tanStackTable.toggleAllRowsExpanded(false);
+      }
+      reset() {
+          this.collapsedRows.clear();
+          this.isInDefaultState = true;
+      }
+      processDataUpdate(rows) {
+          if (this.isInDefaultState) {
+              return;
+          }
+          const updatedCollapsedRows = new Set();
+          for (const row of rows) {
+              const rowId = row.id;
+              if (this.collapsedRows.has(rowId)) {
+                  updatedCollapsedRows.add(rowId);
+              }
+          }
+          this.collapsedRows = updatedCollapsedRows;
+      }
+      isRowExpandable(row) {
+          return row.getIsGrouped() || row.subRows.length > 0;
+      }
+  }
+
   /**
    * A nimble-styled table.
    */
@@ -64323,7 +64585,6 @@ img.ProseMirror-separator {
           this.tableUpdateTracker = new TableUpdateTracker(this);
           this.columnNotifiers = [];
           this.isInitialized = false;
-          this.collapsedRows = new Set();
           // 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.
@@ -64343,17 +64604,7 @@ img.ProseMirror-separator {
               }
           };
           this.getIsRowExpanded = (row) => {
-              if (!row.getIsGrouped()) {
-                  return false;
-              }
-              const expandedState = this.table.options.state.expanded;
-              if (expandedState === true) {
-                  return true;
-              }
-              if (Object.keys(expandedState ?? {}).includes(row.id)) {
-                  return expandedState[row.id];
-              }
-              return !this.collapsedRows.has(row.id);
+              return this.expansionManager.isRowExpanded(row);
           };
           this.handleRowSelectionChange = (updaterOrValue) => {
               const rowSelectionState = updaterOrValue instanceof Function
@@ -64385,6 +64636,7 @@ img.ProseMirror-separator {
               getGroupedRowModel: getGroupedRowModel(),
               getExpandedRowModel: getExpandedRowModel(),
               getIsRowExpanded: this.getIsRowExpanded,
+              getSubRows: r => r.subRows,
               columns: [],
               state: {
                   rowSelection: {},
@@ -64405,6 +64657,7 @@ img.ProseMirror-separator {
           this.layoutManagerNotifier = Observable.getNotifier(this.layoutManager);
           this.layoutManagerNotifier.subscribe(this, 'isColumnBeingSized');
           this.selectionManager = new InteractiveSelectionManager(this.table, this.selectionMode);
+          this.expansionManager = new ExpansionManager(this.table);
       }
       get validity() {
           return this.tableValidator.getValidity();
@@ -64418,36 +64671,12 @@ img.ProseMirror-separator {
       }
       async setData(newData) {
           await this.processPendingUpdates();
-          const data = newData.map(record => {
-              return { clientRecord: { ...record } };
-          });
-          const tanStackUpdates = {
-              data
-          };
-          this.validateWithData(data);
-          if (this.tableValidator.areRecordIdsValid()) {
-              // Update the selection state to remove previously selected records that no longer exist in the
-              // data set while maintaining the selection state of records that still exist in the data set.
-              const previousSelection = await this.getSelectedRecordIds();
-              tanStackUpdates.state = {
-                  rowSelection: this.calculateTanStackSelectionState(previousSelection)
-              };
-          }
-          this.updateTableOptions(tanStackUpdates);
+          const tanstackUpdates = this.calculateTanStackData(newData);
+          this.updateTableOptions(tanstackUpdates);
       }
       async getSelectedRecordIds() {
           await this.processPendingUpdates();
-          const tanStackSelectionState = this.options.state.rowSelection;
-          if (!tanStackSelectionState) {
-              return [];
-          }
-          const selectedRecordIds = [];
-          Object.entries(tanStackSelectionState).forEach(([recordId, isSelected]) => {
-              if (isSelected) {
-                  selectedRecordIds.push(recordId);
-              }
-          });
-          return selectedRecordIds;
+          return this.selectionManager.getCurrentSelectedRecordIds();
       }
       async setSelectedRecordIds(recordIds) {
           await this.processPendingUpdates();
@@ -64542,13 +64771,8 @@ img.ProseMirror-separator {
           void this.handleRowActionMenuToggleEvent(event);
       }
       /** @internal */
-      handleCollapseAllGroupRows() {
-          this.collapsedRows.clear();
-          this.table
-              .getRowModel()
-              .flatRows.filter(row => row.getIsGrouped())
-              .forEach(row => this.collapsedRows.add(row.id));
-          this.table.toggleAllRowsExpanded(false);
+      handleCollapseAllRows() {
+          this.expansionManager.collapseAll();
       }
       /** @internal */
       onRightDividerMouseDown(event, columnIndex) {
@@ -64564,9 +64788,13 @@ img.ProseMirror-separator {
       }
       /** @internal */
       handleGroupRowExpanded(rowIndex, event) {
-          this.toggleGroupExpanded(rowIndex);
+          this.toggleRowExpanded(rowIndex);
           event.stopPropagation();
       }
+      /** @internal */
+      handleRowExpanded(rowIndex) {
+          this.toggleRowExpanded(rowIndex);
+      }
       /**
        * @internal
        */
@@ -64624,9 +64852,6 @@ img.ProseMirror-separator {
               this.rowGridColumns = this.layoutManager.getGridTemplateColumns();
               this.visibleColumns = this.columns.filter(column => !column.columnHidden);
           }
-          if (this.tableUpdateTracker.updateGroupRows) {
-              this.showCollapseAll = this.getColumnsParticipatingInGrouping().length > 0;
-          }
       }
       get ariaMultiSelectable() {
           switch (this.selectionMode) {
@@ -64644,6 +64869,31 @@ img.ProseMirror-separator {
       getHeaderContainerElements() {
           return this.columnHeadersContainer.querySelectorAll('.header-container');
       }
+      /**
+       * @internal
+       */
+      calculateTanStackData(data) {
+          this.dataHierarchyManager = new DataHierarchyManager(data, this.idFieldName, this.parentIdFieldName);
+          const tableNodes = this.dataHierarchyManager.hierarchicalData;
+          this.tableValidator.setParentIdConfigurationValidity(this.dataHierarchyManager.parentIdConfigurationValid);
+          const tanStackUpdates = {
+              data: tableNodes
+          };
+          this.validateWithData(data);
+          if (this.tableValidator.areRecordIdsValid()) {
+              // Update the selection state to remove previously selected records that no longer exist in the
+              // data set while maintaining the selection state of records that still exist in the data set.
+              const previousSelection = this.selectionManager.getCurrentSelectedRecordIds();
+              tanStackUpdates.state = {
+                  rowSelection: this.calculateTanStackSelectionState(previousSelection),
+                  // Reset the TanStack expanded state to "true" to clear TanStack's cache of expanded state that may include
+                  // rows that no longer exist in the table. The nimble table's expansion manager tracks the expanded
+                  // state of each row, so no state is lost by resetting TanStack.
+                  expanded: true
+              };
+          }
+          return tanStackUpdates;
+      }
       selectionModeChanged(_prev, _next) {
           if (!this.$fastController.isConnected) {
               return;
@@ -64656,6 +64906,12 @@ img.ProseMirror-separator {
           }
           this.tableUpdateTracker.trackIdFieldNameChanged();
       }
+      parentIdFieldNameChanged(_prev, _next) {
+          if (!this.$fastController.isConnected) {
+              return;
+          }
+          this.tableUpdateTracker.trackParentIdFieldNameChanged();
+      }
       columnsChanged(_prev, _next) {
           if (!this.$fastController.isConnected) {
               return;
@@ -64760,14 +65016,30 @@ img.ProseMirror-separator {
               updatedOptions.state.rowSelection = {};
               this.selectionManager.handleSelectionModeChanged(this.selectionMode);
           }
-          if (this.tableUpdateTracker.requiresTanStackDataReset) {
-              // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
-              updatedOptions.data = [...this.table.options.data];
+          if (this.dataHierarchyManager
+              && this.tableUpdateTracker.requiresTanStackDataReset) {
+              if (!this.parentIdFieldName
+                  && !this.tableUpdateTracker.updateRowParentIds) {
+                  // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
+                  updatedOptions.data = [...this.table.options.data];
+              }
+              else {
+                  const orderedRecords = this.dataHierarchyManager.getAllRecords(true);
+                  const tanstackUpdates = this.calculateTanStackData(orderedRecords);
+                  if (tanstackUpdates.state) {
+                      updatedOptions.state.rowSelection = tanstackUpdates.state.rowSelection;
+                  }
+                  updatedOptions.data = tanstackUpdates.data;
+              }
           }
           if (this.tableUpdateTracker.updateGroupRows) {
               updatedOptions.state.grouping = this.calculateTanStackGroupingState();
+          }
+          if (this.tableUpdateTracker.updateRowIds
+              || this.tableUpdateTracker.updateRowParentIds
+              || this.tableUpdateTracker.updateGroupRows) {
               updatedOptions.state.expanded = true;
-              this.collapsedRows.clear();
+              this.expansionManager.reset();
           }
           this.updateTableOptions(updatedOptions);
       }
@@ -64781,12 +65053,14 @@ img.ProseMirror-separator {
           this.actionMenuSlots = Array.from(slots);
       }
       validate() {
-          this.tableValidator.validateSelectionMode(this.selectionMode, this.idFieldName);
+          this.tableValidator.validateIdFieldConfiguration(this.selectionMode, this.idFieldName, this.parentIdFieldName);
           this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
           this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.columnInternals.currentSortIndex));
           this.tableValidator.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.columnInternals.groupIndex));
           this.tableValidator.validateColumnConfigurations(this.columns);
-          this.validateWithData(this.table.options.data);
+          if (this.dataHierarchyManager) {
+              this.validateWithData(this.dataHierarchyManager.getAllRecords());
+          }
       }
       validateWithData(data) {
           this.tableValidator.validateRecordIds(data, this.idFieldName);
@@ -64829,27 +65103,41 @@ img.ProseMirror-separator {
       }
       refreshRows() {
           this.selectionState = this.getTableSelectionState();
+          let hasDataHierarchy = false;
           const rows = this.table.getRowModel().rows;
           this.tableData = rows.map(row => {
-              const isGrouped = row.getIsGrouped();
+              const isGroupRow = row.getIsGrouped();
+              const hasParentRow = isGroupRow ? false : row.getParentRow();
+              // we check row.original.subRows below because row.subRows is populated for group rows
+              // which we don't want to include
+              const isParent = row.original.subRows !== undefined
+                  && row.original.subRows.length > 0;
+              const isChildOfGroupRowWithNoHierarchy = !isGroupRow
+                  && !isParent
+                  && !hasParentRow
+                  && row.depth > 0
+                  && !this.parentIdFieldName;
               const rowState = {
                   record: row.original.clientRecord,
                   id: row.id,
                   selectionState: this.getRowSelectionState(row),
-                  isGrouped,
+                  isGroupRow,
                   isExpanded: row.getIsExpanded(),
-                  groupRowValue: isGrouped
+                  groupRowValue: isGroupRow
                       ? row.getValue(row.groupingColumnId)
                       : undefined,
-                  nestingLevel: !isGrouped && row.depth > 0 ? row.depth - 1 : row.depth,
-                  leafItemCount: row
-                      .getLeafRows()
-                      .filter(leafRow => leafRow.getLeafRows().length === 0)
-                      .length,
+                  nestingLevel: isChildOfGroupRowWithNoHierarchy
+                      ? row.depth - 1
+                      : row.depth,
+                  isParentRow: isParent,
+                  immediateChildCount: row.subRows.length,
                   groupColumn: this.getGroupRowColumn(row)
               };
+              hasDataHierarchy = hasDataHierarchy || isParent;
               return rowState;
           });
+          this.showCollapseAll = hasDataHierarchy
+              || this.getColumnsParticipatingInGrouping().length > 0;
           this.virtualizer.dataChanged();
       }
       getTableSelectionState() {
@@ -64870,10 +65158,10 @@ img.ProseMirror-separator {
               : TableRowSelectionState.notSelected;
       }
       getGroupedRowSelectionState(groupedRow) {
-          const subRows = groupedRow.subRows ?? [];
+          const leafRows = groupedRow.getLeafRows() ?? [];
           let foundSelectedRow = false;
           let foundNotSelectedRow = false;
-          for (const row of subRows) {
+          for (const row of leafRows) {
               if (row.getIsGrouped()) {
                   const subGroupRowSelectionState = this.getGroupedRowSelectionState(row);
                   switch (subGroupRowSelectionState) {
@@ -64915,19 +65203,16 @@ img.ProseMirror-separator {
               state: { ...this.options.state, ...updatedOptions.state }
           };
           this.table.setOptions(this.options);
+          if (updatedOptions.data) {
+              const rows = this.table.getRowModel().flatRows;
+              this.expansionManager.processDataUpdate(rows);
+          }
           this.refreshRows();
       }
-      toggleGroupExpanded(rowIndex) {
-          const row = this.table.getRowModel().rows[rowIndex];
-          const wasExpanded = row.getIsExpanded();
-          // must update the collapsedRows before toggling expanded state
-          if (wasExpanded) {
-              this.collapsedRows.add(row.id);
-          }
-          else {
-              this.collapsedRows.delete(row.id);
-          }
-          row.toggleExpanded();
+      toggleRowExpanded(rowIndex) {
+          const rows = this.table.getRowModel().rows;
+          const row = rows[rowIndex];
+          this.expansionManager.toggleRowExpansion(row);
       }
       calculateTanStackSortState() {
           const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.columnInternals.currentSortIndex
@@ -64987,6 +65272,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'id-field-name' })
   ], Table.prototype, "idFieldName", void 0);
+  __decorate$1([
+      attr({ attribute: 'parent-id-field-name' })
+  ], Table.prototype, "parentIdFieldName", void 0);
   __decorate$1([
       attr({ attribute: 'selection-mode' })
   ], Table.prototype, "selectionMode", void 0);
@@ -66460,7 +66748,7 @@ img.ProseMirror-separator {
    * A formatter for units that can be formatted/translated by Intl.NumberFormat
    */
   class IntlNumberFormatScaledUnitFormat extends ScaledUnitFormat {
-      constructor(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions = {}) {
+      constructor(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions) {
           super(scaledUnitFormatFactoryOptions);
           this.formatter = new Intl.NumberFormat(this.locale, {
               ...unitSpecificIntlNumberFormatOptions,
@@ -66468,7 +66756,7 @@ img.ProseMirror-separator {
               ...this.intlNumberFormatOptions
           });
       }
-      static createFactory(unitSpecificIntlNumberFormatOptions = {}) {
+      static createFactory(unitSpecificIntlNumberFormatOptions) {
           return (scaledUnitFormatFactoryOptions) => new IntlNumberFormatScaledUnitFormat(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions);
       }
       format(value) {
@@ -66544,7 +66832,7 @@ img.ProseMirror-separator {
   class PassthroughUnitScale extends UnitScale {
       constructor() {
           super([
-              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory())
+              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({}))
           ]);
       }
   }
@@ -68527,25 +68815,38 @@ img.ProseMirror-separator {
 
   const template$1 = html `<template slot="unit"></template>`;
 
+  /**
+   * Representations of a unit in a particular language
+   */
+  class UnitTranslation {
+      constructor(singular, plural, symbol) {
+          this.singular = singular;
+          this.plural = plural;
+          this.symbol = symbol;
+      }
+  }
   /**
    * A formatter for units that are not supported by Intl.NumberFormat
    */
   class ManuallyTranslatedScaledUnitFormat extends ScaledUnitFormat {
-      constructor(scaledUnitFormatFactoryOptions, unitTranslations, unitPrefix) {
+      constructor(scaledUnitFormatFactoryOptions, { unitTranslations, scaledPrefixText }) {
           super(scaledUnitFormatFactoryOptions);
-          this.unitTranslations = unitTranslations;
-          this.unitPrefix = unitPrefix;
+          if (!unitTranslations.get('en')) {
+              throw new Error('English translations must exist with locale string "en"');
+          }
           this.pluralRules = new Intl.PluralRules(this.locale);
           this.formatter = new Intl.NumberFormat(this.locale, this.intlNumberFormatOptions);
-          this.unitTranslation = this.getTranslationToUse(this.locale);
+          this.unitTranslation = this.getTranslationToUse(unitTranslations, this.locale);
+          this.scaledPrefixText = scaledPrefixText;
       }
-      static createFactory(unitTranslations, unitPrefix) {
-          return (scaledUnitFormatFactoryOptions) => new ManuallyTranslatedScaledUnitFormat(scaledUnitFormatFactoryOptions, unitTranslations, unitPrefix);
+      static createFactory(manuallyTranslatedScaledUnitFormatOptions) {
+          return (scaledUnitFormatFactoryOptions) => new ManuallyTranslatedScaledUnitFormat(scaledUnitFormatFactoryOptions, manuallyTranslatedScaledUnitFormatOptions);
       }
       format(value) {
           const formatted = this.formatter.format(value);
-          if (!this.unitPrefix.isBase()) {
-              return `${formatted} ${this.unitPrefix.text}${this.unitTranslation.symbol}`;
+          // For non-base units (which are a scaled prefix text of empty string)
+          if (this.scaledPrefixText !== '') {
+              return `${formatted} ${this.scaledPrefixText}${this.unitTranslation.symbol}`;
           }
           // Some languages have more than two forms (singular/plural) of cardinal
           // numbers, but we are treating anything other than the 'one' form as plural.
@@ -68562,123 +68863,65 @@ img.ProseMirror-separator {
               : this.unitTranslation.plural;
           return `${formatted} ${unitLabel}`;
       }
-      getTranslationToUse(locale) {
+      getTranslationToUse(unitTranslations, locale) {
           const localeObject = new Intl.Locale(locale ?? 'en');
           const language = localeObject.language;
           const region = localeObject.region;
           const regionSpecificMatchedTranslations = region
-              ? this.unitTranslations.get(`${language}-${region}`) // do not include any other subtags that might be in the given locale string
-              : null;
+              ? unitTranslations.get(`${language}-${region}`)
+              : undefined;
           return (regionSpecificMatchedTranslations
-              ?? this.unitTranslations.get(language)
-              ?? this.unitTranslations.get('en'));
-      }
-  }
-
-  /**
-   * A unit scale that is not supported by Intl.NumberFormat and has manually provided translation strings
-   */
-  class ManuallyTranslatedUnitScale extends UnitScale {
-      constructor(unitTranslations, supportedUnitPrefixes) {
-          super(ManuallyTranslatedUnitScale.createSupportedScaledUnits(unitTranslations, supportedUnitPrefixes));
-      }
-      static createSupportedScaledUnits(unitTranslations, supportedUnitPrefixes) {
-          if (!unitTranslations.get('en')) {
-              throw new Error('English translations must exist');
-          }
-          const supportedUnits = supportedUnitPrefixes.map(unitPrefix => new ScaledUnit(unitPrefix.scaleFactor, ManuallyTranslatedScaledUnitFormat.createFactory(unitTranslations, unitPrefix)));
-          return supportedUnits;
-      }
-  }
-
-  /**
-   * A prefix that represents a scaling factor when applied to a base unit.
-   * A base unit is represented as scale factor 1 and empty text.
-   */
-  class UnitPrefix {
-      constructor(scaleFactor, text) {
-          this.scaleFactor = scaleFactor;
-          this.text = text;
-          if (scaleFactor === 1 && text !== '') {
-              throw new Error('Base scale factor of 1 has unused text and should be empty string');
-          }
-      }
-      isBase() {
-          return this.scaleFactor === 1;
-      }
-  }
-
-  /**
-   * Representations of a base unit in a particular language
-   */
-  class UnitTranslation {
-      constructor(singular, plural, symbol) {
-          this.singular = singular;
-          this.plural = plural;
-          this.symbol = symbol;
+              ?? unitTranslations.get(language)
+              ?? unitTranslations.get('en'));
       }
   }
 
+  const unitTranslations$1 = new Map([
+      ['en', new UnitTranslation('byte', 'bytes', 'B')],
+      ['fr', new UnitTranslation('octet', 'octets', 'o')],
+      ['de', new UnitTranslation('Byte', 'Byte', 'B')],
+      ['ja', new UnitTranslation('バイト', 'バイト', 'B')],
+      ['zh', new UnitTranslation('字节', '字节', 'B')]
+  ]);
+  const byte1024Prefixes = [
+      [1024 ** 0, ''],
+      [1024 ** 1, 'Ki'],
+      [1024 ** 2, 'Mi'],
+      [1024 ** 3, 'Gi'],
+      [1024 ** 4, 'Ti'],
+      [1024 ** 5, 'Pi']
+  ];
   /**
    * Byte units (1024-based)
    */
-  class Byte1024UnitScale extends ManuallyTranslatedUnitScale {
+  class Byte1024UnitScale extends UnitScale {
       constructor() {
-          super(new Map([
-              ['en', new UnitTranslation('byte', 'bytes', 'B')],
-              ['fr', new UnitTranslation('octet', 'octets', 'o')],
-              ['de', new UnitTranslation('Byte', 'Byte', 'B')],
-              ['ja', new UnitTranslation('バイト', 'バイト', 'B')],
-              ['zh', new UnitTranslation('字节', '字节', 'B')]
-          ]), [
-              new UnitPrefix(1024 ** 0, ''),
-              new UnitPrefix(1024 ** 1, 'Ki'),
-              new UnitPrefix(1024 ** 2, 'Mi'),
-              new UnitPrefix(1024 ** 3, 'Gi'),
-              new UnitPrefix(1024 ** 4, 'Ti'),
-              new UnitPrefix(1024 ** 5, 'Pi')
-          ]);
+          super(byte1024Prefixes.map(([scaleFactor, scaledPrefixText]) => new ScaledUnit(scaleFactor, ManuallyTranslatedScaledUnitFormat.createFactory({
+              unitTranslations: unitTranslations$1,
+              scaledPrefixText
+          }))));
       }
   }
   const byte1024UnitScale = new Byte1024UnitScale();
 
+  const byteUnitScaleOptions = [
+      [1000 ** 0, 'byte', 'long'],
+      [1000 ** 1, 'kilobyte', 'short'],
+      [1000 ** 2, 'megabyte', 'short'],
+      [1000 ** 3, 'gigabyte', 'short'],
+      [1000 ** 4, 'terabyte', 'short'],
+      [1000 ** 5, 'petabyte', 'short']
+  ];
   /**
    * Byte units (1000-based)
    */
   class ByteUnitScale extends UnitScale {
       constructor() {
-          super([
-              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({
-                  style: 'unit',
-                  unit: 'byte',
-                  unitDisplay: 'long'
-              })),
-              new ScaledUnit(10 ** 3, IntlNumberFormatScaledUnitFormat.createFactory({
-                  style: 'unit',
-                  unit: 'kilobyte',
-                  unitDisplay: 'short'
-              })),
-              new ScaledUnit(10 ** 6, IntlNumberFormatScaledUnitFormat.createFactory({
-                  style: 'unit',
-                  unit: 'megabyte',
-                  unitDisplay: 'short'
-              })),
-              new ScaledUnit(10 ** 9, IntlNumberFormatScaledUnitFormat.createFactory({
-                  style: 'unit',
-                  unit: 'gigabyte',
-                  unitDisplay: 'short'
-              })),
-              new ScaledUnit(10 ** 12, IntlNumberFormatScaledUnitFormat.createFactory({
-                  style: 'unit',
-                  unit: 'terabyte',
-                  unitDisplay: 'short'
-              })),
-              new ScaledUnit(10 ** 15, IntlNumberFormatScaledUnitFormat.createFactory({
-                  style: 'unit',
-                  unit: 'petabyte',
-                  unitDisplay: 'short'
-              }))
-          ]);
+          super(byteUnitScaleOptions.map(([scaleFactor, unit, unitDisplay]) => new ScaledUnit(scaleFactor, IntlNumberFormatScaledUnitFormat.createFactory({
+              style: 'unit',
+              unit,
+              unitDisplay
+          }))));
       }
   }
   const byteUnitScale = new ByteUnitScale();
@@ -68711,38 +68954,39 @@ img.ProseMirror-separator {
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
-  /**
-   * The metric unit prefixes for at least English, French, German, Japanese, and Chinese.
-   */
-  const unitPrefixesMetric = [
-      new UnitPrefix(10 ** -15, 'f'),
-      new UnitPrefix(10 ** -12, 'p'),
-      new UnitPrefix(10 ** -9, 'n'),
-      new UnitPrefix(10 ** -6, 'μ'),
-      new UnitPrefix(10 ** -3, 'm'),
-      new UnitPrefix(10 ** -2, 'c'),
-      new UnitPrefix(10 ** -1, 'd'),
-      new UnitPrefix(10 ** 0, ''),
-      new UnitPrefix(10 ** 3, 'k'),
-      new UnitPrefix(10 ** 6, 'M'),
-      new UnitPrefix(10 ** 9, 'G'),
-      new UnitPrefix(10 ** 12, 'T'),
-      new UnitPrefix(10 ** 15, 'P'),
-      new UnitPrefix(10 ** 18, 'E')
+  const metricPrefixes = [
+      [10 ** -15, 'f'],
+      [10 ** -12, 'p'],
+      [10 ** -9, 'n'],
+      [10 ** -6, 'μ'],
+      [10 ** -3, 'm'],
+      [10 ** -2, 'c'],
+      [10 ** -1, 'd'],
+      [10 ** 0, ''],
+      [10 ** 3, 'k'],
+      [10 ** 6, 'M'],
+      [10 ** 9, 'G'],
+      [10 ** 12, 'T'],
+      [10 ** 15, 'P'],
+      [10 ** 18, 'E']
   ];
 
+  const unitTranslations = new Map([
+      ['en', new UnitTranslation('volt', 'volts', 'V')],
+      ['fr', new UnitTranslation('volt', 'volts', 'V')],
+      ['de', new UnitTranslation('Volt', 'Volt', 'V')],
+      ['ja', new UnitTranslation('ボルト', 'ボルト', 'V')],
+      ['zh', new UnitTranslation('伏特', '伏特', 'V')]
+  ]);
   /**
    * Voltage unit scale
    */
-  class VoltUnitScale extends ManuallyTranslatedUnitScale {
+  class VoltUnitScale extends UnitScale {
       constructor() {
-          super(new Map([
-              ['en', new UnitTranslation('volt', 'volts', 'V')],
-              ['fr', new UnitTranslation('volt', 'volts', 'V')],
-              ['de', new UnitTranslation('Volt', 'Volt', 'V')],
-              ['ja', new UnitTranslation('ボルト', 'ボルト', 'V')],
-              ['zh', new UnitTranslation('伏特', '伏特', 'V')]
-          ]), unitPrefixesMetric);
+          super(metricPrefixes.map(([scaleFactor, scaledPrefixText]) => new ScaledUnit(scaleFactor, ManuallyTranslatedScaledUnitFormat.createFactory({
+              unitTranslations,
+              scaledPrefixText
+          }))));
       }
   }
   const voltUnitScale = new VoltUnitScale();