@globalpayments/vega 2.99.0 → 2.101.0

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-pinned-renderer.js

@@ -5,10 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, VegaSlimmer, } from 'vega-slimmer/core';
-import { isNonNullable } from '../../../../types/type-guard';
 import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
-import { extractNumberFromString } from '../../../../utils/ui';
-import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
 export class VegaTablePinnedRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -16,558 +13,67 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
       // eslint-disable-next-line
       target: () => this.host.shadowRoot.querySelector('table'),
       isDeferred: true,
-      /*
-       * The below method is e2e-test covered in
-       * @see{module:resize-pinned-position-by-edit-row}
-       */
       callback: /* istanbul ignore next */ async () => {
-        await this.host.componentOnReady().then(() => {
-          this.updateTableRowPinnedPosition();
-          this.updateTableCellPinnedPosition();
-        });
+        await this.host.componentOnReady();
+        this.recomputeRenderInputs();
       },
     });
-    this.previouslyStyledCells = new Set();
-    // Each set tracks cells where exactly one dynamic class was added — cleared per class so
-    // that static classes from render() on the same cell are never inadvertently stripped
-    // (e.g. a cell that is both isRightStartPinned and the last-visible body cell).
-    this.dynamicRightDividerCells = new Set();
-    this.dynamicLeftDividerCells = new Set();
-    this.dynamicHideRightBorderCells = new Set();
-    // Authored template cells whose shadow <td> colspan was shrunk for breakpoint-hidden columns,
-    // tracked so the authored colspan can be restored when pinning is removed at runtime (VD-9768).
-    this.templateColspanSyncedCells = new Set();
-    this.clearPinnedPositionsTaskQueue = new SynchronizeTaskQueue(1);
   }
   componentDidLoad() {
-    methodPlaceholder;
+    methodPlaceholder();
   }
-  async componentDidRender() {
-    await this.clearPinnedPositionsTaskQueue.runTask();
-    this.updateTableRowPinnedPosition();
-    const unreadyCells = this.updateTableCellPinnedPosition();
-    if (unreadyCells.length > 0) {
-      // In dev builds, Stencil's HMR flag forces loadModule() to always use a
-      // dynamic import(), so a brand-new cell's first render is deferred. We wait
-      // for each unready cell via componentOnReady() — which resolves exactly when
-      // the cell's shadow <td> is first rendered — then apply sticky positioning.
-      // In production (hotModuleReplacement=false) loadModule() is synchronous, so
-      // cells are always ready by componentDidRender and this branch is never reached.
-      await Promise.all(unreadyCells.map((cell) => cell.componentOnReady()));
-      this.updateTableCellPinnedPosition();
-    }
+  componentDidRender() {
+    this.recomputeRenderInputs();
   }
   watchColumnStructureModel() {
-    void this.clearPinnedPositionsTaskQueue.enqueue({
-      run: async () => {
-        this.clearAllPinnedPositions();
-      },
-    }, false);
+    methodPlaceholder();
   }
-  updateTableCellPinnedPosition() {
+  recomputeRenderInputs() {
+    this.host.style.setProperty('--vega-table-content-width', `${this.host.getBoundingClientRect().width}px`);
     if (!this.columnStructureModel.hasLeftPinnedColumn() &&
       !this.columnStructureModel.hasRightPinnedColumn())
-      return [];
-    // Clear stale dynamic boundary classes before re-evaluating breakpoint visibility.
-    // This ensures the classes are removed when the viewport grows back (e.g. column B
-    // becomes visible again) and not only when the column structure changes.
-    // Each set only removes the single class it tracks, preserving any other static
-    // border classes that render() placed on the same cell (VD-9565).
-    this.dynamicRightDividerCells.forEach((cell) => cell.classList.remove('right-divider'));
-    this.dynamicRightDividerCells.clear();
-    this.dynamicLeftDividerCells.forEach((cell) => cell.classList.remove('left-divider'));
-    this.dynamicLeftDividerCells.clear();
-    this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
-    this.dynamicHideRightBorderCells.clear();
-    // if not have head row, it means no pinned, so no need to update.
-    // In template mode the authored rows live in light DOM (slotted), so resolve the row
-    // container root accordingly instead of always querying the table's shadow root.
+      return;
     const row = this.getRowContainerRoot().querySelector('vega-table-head-row');
-    // to avoid window resize before table rendered.
-    // @see{module:resize-pinned-position-by-edit-row}
     /* istanbul ignore next */
-    if (!row)
-      return [];
-    const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
-    const pinnedColumnBodyCellRenderInputMap = this.vegaTableRenderInputController.getPinnedColumnBodyCellRenderInputMap();
-    const [prevShadowThWidth, nextShadowThWidth] = this.getRowShadowThWidths();
-    const leafWidths = this.getLeafWidths();
-    // Track the last visible left-pinned head cell and first visible right-pinned head cell
-    // to dynamically apply boundary classes when breakpoint-hidden columns shift the boundary.
-    let lastVisibleLeftPinnedHeadCell = null;
-    let firstVisibleRightPinnedHeadCell = null;
-    let lastVisibleRightPinnedHeadCell = null;
-    headCellRenderInputMap.forEach((renderInput, headCell) => {
-      var _a;
-      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
-      const shadowCell = (_a = headCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
-      const isVisible = shadowCell ? shadowCell.getBoundingClientRect().width > 0 : false;
-      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
-      if (isVisible && renderInput.pinned === 'left') {
-        lastVisibleLeftPinnedHeadCell = shadowCell;
-      }
-      if (isVisible && renderInput.pinned === 'right' && !firstVisibleRightPinnedHeadCell) {
-        firstVisibleRightPinnedHeadCell = shadowCell;
-      }
-      if (isVisible && renderInput.pinned === 'right') {
-        lastVisibleRightPinnedHeadCell = shadowCell;
-      }
-    });
-    // Track last visible left-pinned body cells per row for boundary class propagation.
-    // Declared before the template positioning pass so authored cells feed the same maps the
-    // shared dynamic-boundary logic below consumes (one update flow for both render modes).
-    const lastVisibleLeftPinnedBodyCells = new Map();
-    const firstVisibleRightPinnedBodyCells = new Map();
-    const lastVisibleRightPinnedBodyCells = new Map();
-    // Template mode has no JSX ref callbacks to populate the body-cell render-input map, and
-    // its rows live in light DOM. Position the authored body/foot leaf cells directly by zipping
-    // them with the leaf render inputs (respecting colSpan), reusing the shared positioning primitive.
-    if (this.isTemplateRenderMode) {
-      this.updateTemplateLeafCellPinnedPosition(prevShadowThWidth, leafWidths, nextShadowThWidth, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells);
-    }
-    // Remove stale entries (disconnected cells) left over from prior renders (e.g. after drag reorder).
-    pinnedColumnBodyCellRenderInputMap.forEach((_, bodyCell) => {
-      /* istanbul ignore next -- defensive cleanup for disconnected cells; jsdom always keeps cells connected */
-      if (!(bodyCell === null || bodyCell === void 0 ? void 0 : bodyCell.isConnected)) {
-        pinnedColumnBodyCellRenderInputMap.delete(bodyCell);
-      }
-    });
-    // Collect body cells whose shadow DOM is not yet ready (newly created cells).
-    const unreadyCells = [];
-    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
-      var _a;
-      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
-      const shadowCell = (_a = bodyCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
-      const isVisible = shadowCell ? shadowCell.getBoundingClientRect().width > 0 : false;
-      // Shadow DOM not ready yet — cell was just created (e.g. colspan collapsed after drag).
-      if (['left', 'right'].includes(renderInput.pinned) && !shadowCell) {
-        unreadyCells.push(bodyCell);
-        return;
-      }
-      this.updateCellPinnedPosition(renderInput, bodyCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
-      if (isVisible && renderInput.pinned === 'left') {
-        // Use the parent row as the grouping key for per-row tracking
-        const parentRow = bodyCell.closest('vega-table-row');
-        if (parentRow) {
-          lastVisibleLeftPinnedBodyCells.set(parentRow, shadowCell);
-        }
-      }
-      if (isVisible && renderInput.pinned === 'right') {
-        const parentRow = bodyCell.closest('vega-table-row');
-        if (parentRow && !firstVisibleRightPinnedBodyCells.has(parentRow)) {
-          firstVisibleRightPinnedBodyCells.set(parentRow, shadowCell);
-        }
-        if (parentRow) {
-          lastVisibleRightPinnedBodyCells.set(parentRow, shadowCell);
-        }
-      }
-    });
-    // Apply boundary divider to the last visible left-pinned cell when the static
-    // isLeftEndPinned column is hidden by breakpoint.
-    if (lastVisibleLeftPinnedHeadCell &&
-      !lastVisibleLeftPinnedHeadCell.classList.contains('right-divider')) {
-      // Check if the static boundary column is hidden — if leafWidths shows 0 for the
-      // isLeftEndPinned column, the boundary has shifted.
-      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-      const staticBoundaryLeaf = leafRenderInputs.find((leaf) => leaf.isLeftEndPinned);
-      if (staticBoundaryLeaf && leafWidths[staticBoundaryLeaf.columnIndex] === 0) {
-        lastVisibleLeftPinnedHeadCell.classList.add('right-divider');
-        this.dynamicRightDividerCells.add(lastVisibleLeftPinnedHeadCell);
-        lastVisibleLeftPinnedBodyCells.forEach((cell) => {
-          // Only track cells that don't already hold `right-divider` from their
-          // static render (effectiveRenderInput.isLeftEndPinned). If we add a
-          // statically-classed cell here, the per-class clear on the next resize
-          // would erroneously remove the static class (VD-9540).
-          if (!cell.classList.contains('right-divider')) {
-            cell.classList.add('right-divider');
-            this.dynamicRightDividerCells.add(cell);
-          }
-        });
-      }
-    }
-    if (firstVisibleRightPinnedHeadCell &&
-      !firstVisibleRightPinnedHeadCell.classList.contains('left-divider')) {
-      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-      const staticBoundaryLeaf = leafRenderInputs.find((leaf) => leaf.isRightStartPinned);
-      if (staticBoundaryLeaf && leafWidths[staticBoundaryLeaf.columnIndex] === 0) {
-        firstVisibleRightPinnedHeadCell.classList.add('left-divider');
-        this.dynamicLeftDividerCells.add(firstVisibleRightPinnedHeadCell);
-        firstVisibleRightPinnedBodyCells.forEach((cell) => {
-          // Only track cells that don't already hold `left-divider` from their
-          // static render (effectiveRenderInput.isRightStartPinned). If we add a
-          // statically-classed cell here, the per-class clear on the next resize
-          // would erroneously remove the static class (VD-9540).
-          if (!cell.classList.contains('left-divider')) {
-            cell.classList.add('left-divider');
-            this.dynamicLeftDividerCells.add(cell);
-          }
-        });
-      }
-    }
-    // Apply hide-right-border to the last visible right-pinned cell when the structural
-    // right-most column is hidden by breakpoint. Without this, the new right-most visible
-    // pinned column keeps a right border while the head cell suppresses it (head cells use
-    // isViewEnd), leaving an extra vertical border at the table's right edge (VD-9565).
-    if (lastVisibleRightPinnedHeadCell &&
-      !lastVisibleRightPinnedHeadCell.classList.contains('hide-right-border')) {
-      const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-      // The structural right-most column is the last right-pinned leaf. Leaf render
-      // inputs do not carry `isViewEnd` (unlike head render inputs), so identify the
-      // boundary via `pinned` order instead.
-      const rightPinnedLeaves = leafRenderInputs.filter((leaf) => leaf.pinned === 'right');
-      const structuralEndLeaf = rightPinnedLeaves[rightPinnedLeaves.length - 1];
-      if (structuralEndLeaf && leafWidths[structuralEndLeaf.columnIndex] === 0) {
-        lastVisibleRightPinnedHeadCell.classList.add('hide-right-border');
-        this.dynamicHideRightBorderCells.add(lastVisibleRightPinnedHeadCell);
-        lastVisibleRightPinnedBodyCells.forEach((cell) => {
-          // Only track cells that don't already hold `hide-right-border` from their
-          // static render (isViewEnd/isNoPinnedEnd). Adding a statically-classed cell
-          // here would let the per-class clear erroneously strip the static class on
-          // the next resize (mirrors the VD-9540 divider guard).
-          if (!cell.classList.contains('hide-right-border')) {
-            cell.classList.add('hide-right-border');
-            this.dynamicHideRightBorderCells.add(cell);
-          }
-        });
-      }
-    }
-    // Sync colspan on pinned body cells that span breakpoint-hidden columns.
-    // Chrome does not honour visibility:collapse / display:none on <col> for table layout,
-    // so we directly adjust the shadow <td> colspan attribute to exclude hidden columns (VD-9540).
-    this.syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap);
-    return unreadyCells;
+    if (!(row === null || row === void 0 ? void 0 : row.shadowRoot))
+      return;
+    const [leftRowFixedWidth, rightRowFixedWidth] = this.getRowFixedWidths(row);
+    this.vegaTableRenderInputController.recomputePinnedOffsets(leftRowFixedWidth, rightRowFixedWidth, this.getLeafWidths());
   }
-  /**
-   * Resolve the DOM root that holds the table rows.
-   *
-   * In data-source mode rows are rendered into the table's shadow root; in template mode the
-   * authored rows are slotted, so they live in the host's light DOM.
-   *
-   * @returns {ShadowRoot | HTMLElement} The container to query rows from.
-   */
   getRowContainerRoot() {
     return this.isTemplateRenderMode ? this.host : this.host.shadowRoot;
   }
-  /**
-   * Position authored template body and foot leaf cells by zipping them with the leaf render
-   * inputs in authored order, advancing by each cell's colSpan. Also applies the pinned-boundary
-   * divider classes (mirroring the body cell's render()), since authored body/foot cells have no
-   * render-input of their own in template mode.
-   *
-   * @param {number} prevShadowThWidth - Aggregate width of leading fixed columns (table left padding).
-   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
-   * @param {number} nextShadowThWidth - Aggregate width of trailing fixed columns (table right padding).
-   */
-  updateTemplateLeafCellPinnedPosition(prevShadowThWidth, leafWidths, nextShadowThWidth, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells) {
-    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-    // Off-screen / jsdom renders report every width as 0; skip colspan sync there so we don't
-    // collapse every span to 1 (mirrors the data-source syncColspanForHiddenColumns guard).
-    const allLeafWidthsHidden = leafWidths.every((w) => w === 0);
-    this.getRowContainerRoot()
-      .querySelectorAll('vega-table-row, vega-table-foot-row')
-      .forEach((row) => {
-      let leafIndex = 0;
-      Array.from(row.children).forEach((cell) => {
-        if (cell.tagName !== 'VEGA-TABLE-CELL' && cell.tagName !== 'VEGA-TABLE-FOOT-CELL')
-          return;
-        const leafCell = cell;
-        const renderInput = leafRenderInputs[leafIndex];
-        // Unlike data-source mode (resolveBodyColSpan), template mode positions the authored
-        // <td> as-is and intentionally does NOT clamp col-span at a pinned boundary: the
-        // consumer owns this literal DOM, so a col-span crossing pinned <-> unpinned is an
-        // invalid authoring choice (a cell cannot be both frozen and scrolling), not a case
-        // the component rewrites.
-        const colSpan = this.resolveCellColSpan(leafCell, renderInput);
-        if (renderInput) {
-          this.updateCellPinnedPosition(renderInput, leafCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
-          this.applyTemplateLeafDividerClass(leafCell, leafRenderInputs.slice(leafIndex, leafIndex + colSpan));
-          this.syncTemplateLeafColspan(leafCell, renderInput, colSpan, leafWidths, allLeafWidthsHidden);
-          this.trackVisiblePinnedTemplateCell(row, leafCell, renderInput, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells);
-        }
-        leafIndex += colSpan;
-      });
-    });
-  }
-  /**
-   * Record an authored template leaf cell's shadow cell as the last visible left-pinned / first &
-   * last visible right-pinned cell of its row, so the shared dynamic-boundary logic can shift the
-   * boundary divider onto it when the static boundary column is breakpoint-hidden.
-   *
-   * @param {HTMLElement} row - The authored body or foot row (used as the per-row grouping key).
-   * @param {HTMLVegaTableCellElement} leafCell - Authored body or foot cell host.
-   * @param {ColumnRenderInputModel} renderInput - Render input of the cell's first leaf.
-   * @param {Map<HTMLElement, HTMLElement>} lastVisibleLeftPinnedBodyCells - Per-row last visible left-pinned shadow cell.
-   * @param {Map<HTMLElement, HTMLElement>} firstVisibleRightPinnedBodyCells - Per-row first visible right-pinned shadow cell.
-   * @param {Map<HTMLElement, HTMLElement>} lastVisibleRightPinnedBodyCells - Per-row last visible right-pinned shadow cell.
-   */
-  trackVisiblePinnedTemplateCell(row, leafCell, renderInput, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells) {
-    var _a;
-    const shadowCell = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
-    if (!shadowCell || shadowCell.getBoundingClientRect().width <= 0)
-      return;
-    if (renderInput.pinned === 'left') {
-      lastVisibleLeftPinnedBodyCells.set(row, shadowCell);
-    }
-    if (renderInput.pinned === 'right') {
-      if (!firstVisibleRightPinnedBodyCells.has(row)) {
-        firstVisibleRightPinnedBodyCells.set(row, shadowCell);
-      }
-      lastVisibleRightPinnedBodyCells.set(row, shadowCell);
-    }
-  }
-  /**
-   * Reduce an authored template pinned cell's shadow <td> colspan to the number of *visible*
-   * columns it spans. Breakpoint-hidden columns report width 0 but Chrome still counts them in the
-   * table grid, so without this a pinned span drifts out of column-alignment with the header
-   * (VD-9540). Only applies to pinned cells; skipped off-screen / in jsdom where every width is 0.
-   *
-   * @param {HTMLVegaTableCellElement} leafCell - Authored body or foot cell host.
-   * @param {ColumnRenderInputModel} renderInput - Render input of the cell's first leaf.
-   * @param {number} colSpan - The cell's originally declared colspan.
-   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
-   * @param {boolean} allLeafWidthsHidden - True when every leaf width is 0 (off-screen / jsdom).
-   */
-  syncTemplateLeafColspan(leafCell, renderInput, colSpan, leafWidths, allLeafWidthsHidden) {
-    var _a;
-    if (colSpan <= 1 || allLeafWidthsHidden)
-      return;
-    if (!['left', 'right'].includes(renderInput.pinned))
-      return;
-    const shadowTd = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
-    if (!shadowTd)
-      return;
-    const visibleColspan = this.countVisibleColspan(leafWidths, renderInput.columnIndex, colSpan);
-    shadowTd.setAttribute('colspan', String(visibleColspan));
-    if (visibleColspan !== colSpan) {
-      this.templateColspanSyncedCells.add(leafCell);
-    }
-    else {
-      this.templateColspanSyncedCells.delete(leafCell);
-    }
-  }
-  /**
-   * Restore the authored colspan on every template cell whose shadow <td> was shrunk by
-   * {@link syncTemplateLeafColspan}. Runs on cleanup so removing `pinned` at runtime does not leave
-   * a body/foot cell stuck at the breakpoint-shrunk colspan once positioning no longer runs (VD-9768).
-   */
-  restoreTemplateLeafColspan() {
-    this.templateColspanSyncedCells.forEach((leafCell) => {
-      var _a, _b;
-      const shadowTd = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
-      if (!shadowTd)
-        return;
-      const authoredColSpan = (_b = leafCell.colSpan) !== null && _b !== void 0 ? _b : 1;
-      if (authoredColSpan > 1) {
-        shadowTd.setAttribute('colspan', String(authoredColSpan));
-      }
-      else {
-        shadowTd.removeAttribute('colspan');
-      }
-    });
-    this.templateColspanSyncedCells.clear();
-  }
-  /**
-   * Apply the pinned-boundary divider classes to an authored template body/foot cell's shadow
-   * cell, merging boundary flags across the leaves the cell spans. Tracked in the dynamic sets so
-   * the next positioning pass clears and re-evaluates them (matching the data-source cleanup path).
-   *
-   * @param {HTMLVegaTableCellElement} cell - Authored body or foot cell host.
-   * @param {ColumnRenderInputModel[]} spannedLeaves - Leaf render inputs the cell spans.
-   */
-  applyTemplateLeafDividerClass(cell, spannedLeaves) {
-    var _a;
-    const shadowCell = (_a = cell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
-    if (!shadowCell)
-      return;
-    const spans = (predicate) => spannedLeaves.some((leaf) => !!leaf && predicate(leaf));
-    if (spans((leaf) => leaf.isLeftEndPinned)) {
-      shadowCell.classList.add('right-divider');
-      this.dynamicRightDividerCells.add(shadowCell);
-    }
-    if (spans((leaf) => leaf.isRightStartPinned)) {
-      shadowCell.classList.add('left-divider');
-      this.dynamicLeftDividerCells.add(shadowCell);
-    }
-    if (spans((leaf) => leaf.isNoPinnedEnd || leaf.isViewEnd)) {
-      shadowCell.classList.add('hide-right-border');
-      this.dynamicHideRightBorderCells.add(shadowCell);
-    }
-  }
-  getRowShadowThWidths() {
-    const row = this.getRowContainerRoot().querySelector('vega-table-head-row');
-    const rowShadow = row.shadowRoot;
-    const firstTh = rowShadow.querySelector('th:first-of-type');
-    const draggableTh = rowShadow.querySelector('.vega-table-draggable-column');
-    const selectionTh = rowShadow.querySelector('.vega-table-selection-column');
-    const expandTh = rowShadow.querySelector('.vega-table-expand-action-column');
-    const lastTh = rowShadow.querySelector('th:last-of-type');
-    if (firstTh) {
-      const prevWidth = firstTh.getBoundingClientRect().width +
-        ((selectionTh === null || selectionTh === void 0 ? void 0 : selectionTh.getBoundingClientRect().width) || 0) +
-        ((draggableTh === null || draggableTh === void 0 ? void 0 : draggableTh.getBoundingClientRect().width) || 0);
-      const nextWidth = ((expandTh === null || expandTh === void 0 ? void 0 : expandTh.getBoundingClientRect().width) || 0) + lastTh.getBoundingClientRect().width;
-      return [prevWidth, nextWidth];
-    }
-    // to avoid window resize before row rendered.
-    // @see{module:resize-pinned-position-by-edit-row}
+  getRowFixedWidths(row) {
+    const firstCell = row.shadowRoot.querySelector('th:first-of-type');
+    const draggableCell = row.shadowRoot.querySelector('.vega-table-draggable-column');
+    const selectionCell = row.shadowRoot.querySelector('.vega-table-selection-column');
+    const expandCell = row.shadowRoot.querySelector('.vega-table-expand-action-column');
+    const lastCell = row.shadowRoot.querySelector('th:last-of-type');
     /* istanbul ignore next */
-    return [0, 0];
+    if (!firstCell)
+      return [0, 0];
+    return [
+      firstCell.getBoundingClientRect().width +
+        ((selectionCell === null || selectionCell === void 0 ? void 0 : selectionCell.getBoundingClientRect().width) || 0) +
+        ((draggableCell === null || draggableCell === void 0 ? void 0 : draggableCell.getBoundingClientRect().width) || 0),
+      ((expandCell === null || expandCell === void 0 ? void 0 : expandCell.getBoundingClientRect().width) || 0) + ((lastCell === null || lastCell === void 0 ? void 0 : lastCell.getBoundingClientRect().width) || 0),
+    ];
   }
   getLeafWidths() {
     const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
-    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
-    return leafRenderInputs.map((leaf) => {
-      var _a;
+    return this.vegaTableRenderInputController
+      .getLeafRenderInputs()
+      .map((leaf) => {
+      var _a, _b;
       for (const [cell, renderInput] of headCellRenderInputMap.entries()) {
         if (leaf === renderInput) {
-          // to avoid window resize before cell rendered.
-          // @see{module:resize-pinned-position-by-edit-row}
           /* istanbul ignore next */
-          return ((_a = cell.shadowRoot.querySelector('th, td')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-        }
-      }
-    });
-  }
-  syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap) {
-    // NOTE: renderInput.colSpan is null for flat (non-group) tables — it only holds a value for
-    // group-column subtree spans. We read the original colspan from the component prop (bodyCell.colSpan)
-    // which is always the rendered value, unaffected by our shadow-DOM attribute writes.
-    //
-    // Skip when ALL leaf widths are 0 — that means the table is running in jsdom / an off-screen
-    // context where getBoundingClientRect() always returns 0. Adjusting in that state would
-    // incorrectly reduce every colspan to 1 (no visible columns = Math.max(1,0)=1).
-    if (leafWidths.every((w) => w === 0))
-      return;
-    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
-      var _a;
-      const originalColspan = bodyCell.colSpan || 1;
-      if (originalColspan <= 1)
-        return;
-      /* istanbul ignore next -- defensive null-guard: jsdom always provides shadowRoot */
-      const shadowTd = (_a = bodyCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('td');
-      /* istanbul ignore next -- shadowTd is always present in jsdom */
-      if (!shadowTd)
-        return;
-      shadowTd.setAttribute('colspan', String(this.countVisibleColspan(leafWidths, renderInput.columnIndex, originalColspan)));
-    });
-  }
-  /**
-   * Count how many columns in a span are actually visible (leaf width > 0). Breakpoint-hidden
-   * columns report width 0 because their <th> is display:none; Chrome ignores that on the table
-   * grid, so a spanning cell's shadow <td> colspan must be reduced to the visible count to stay
-   * column-aligned (VD-9540). Shared by data-source and template positioning paths.
-   *
-   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
-   * @param {number} startIndex - columnIndex of the first leaf the spanning cell covers.
-   * @param {number} declaredColspan - The cell's originally declared colspan.
-   * @returns {number} The number of visible columns in the span (>= 1).
-   */
-  countVisibleColspan(leafWidths, startIndex, declaredColspan) {
-    const spanned = leafWidths.slice(startIndex, startIndex + declaredColspan);
-    return Math.max(1, spanned.filter((w) => w > 0).length);
-  }
-  resolveCellColSpan(cell, renderInput) {
-    var _a;
-    // Group-column render inputs carry an explicit colSpan; flat/leaf and authored template
-    // cells fall back to the col-span prop on the cell. The authored value is honored verbatim
-    // (no pinned-boundary clamping) — see updateTemplateLeafCellPinnedPosition.
-    const colSpan = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.colSpan) !== null && _a !== void 0 ? _a : null;
-    return isNonNullable(colSpan) ? colSpan : cell.colSpan || 1;
-  }
-  updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
-    if (['left', 'right'].includes(renderInput.pinned)) {
-      const shadowCell = headCell.shadowRoot.querySelector('th, td');
-      if (renderInput.pinned === 'left') {
-        const position = prevShadowThWidth +
-          leafWidths
-            .slice(0, renderInput.columnIndex)
-            .reduce((count, colWidth) => count + colWidth, 0);
-        this.updatePinnedPosition(shadowCell, 'left', position);
-      }
-      if (renderInput.pinned === 'right') {
-        // renderInput.colSpan is null for flat (non-group) tables — it only carries a value
-        // for group-column subtree spans (multi-level headers). For body cells with an HTML
-        // colspan (e.g. colSpan:2 spanning the last two right-pinned columns), we read the
-        // actual span from the host component prop so the right-edge offset is calculated
-        // over the full spanned width rather than just one column (VD-9565).
-        const colSpan = this.resolveCellColSpan(headCell, renderInput);
-        const position = nextShadowThWidth +
-          leafWidths
-            .slice(renderInput.columnIndex + colSpan)
-            .reduce((count, colWidth) => count + colWidth, 0);
-        this.updatePinnedPosition(shadowCell, 'right', position);
-      }
-    }
-  }
-  updateTableRowPinnedPosition() {
-    const hasLeftPinnedColumn = this.columnStructureModel.hasLeftPinnedColumn();
-    const hasRightPinnedColumn = this.columnStructureModel.hasRightPinnedColumn();
-    const tableWidth = this.host.getBoundingClientRect().width;
-    const leftPadding = extractNumberFromString(this.paddingX[0]);
-    const rightPadding = extractNumberFromString(this.paddingX[1]);
-    // table width - padding(8*2) - border(2);
-    const expandContainerWidth = tableWidth - leftPadding - rightPadding - 2;
-    this.getRowContainerRoot()
-      .querySelectorAll('vega-table-head-row, vega-table-row, vega-table-expand-row, vega-table-foot-row')
-      .forEach((row) => {
-      const rowShadow = row.shadowRoot;
-      if (hasLeftPinnedColumn) {
-        const firstCell = rowShadow.querySelector('th:first-of-type, td:first-of-type');
-        const selectionCell = rowShadow.querySelector('.vega-table-selection-column');
-        const draggableCell = rowShadow.querySelector('.vega-table-draggable-column');
-        this.updatePinnedPosition(firstCell, 'left', 0);
-        this.updatePinnedPosition(draggableCell, 'left', leftPadding);
-        const draggableCellWidth = (draggableCell === null || draggableCell === void 0 ? void 0 : draggableCell.getBoundingClientRect().width) || 0;
-        this.updatePinnedPosition(selectionCell, 'left', leftPadding + draggableCellWidth);
-      }
-      if (hasRightPinnedColumn) {
-        const expandCell = rowShadow.querySelector('.vega-table-expand-action-column');
-        const lastCell = rowShadow.querySelector('th:last-of-type, td:last-of-type');
-        this.updatePinnedPosition(expandCell, 'right', rightPadding);
-        this.updatePinnedPosition(lastCell, 'right', 0);
-      }
-      if (hasRightPinnedColumn || hasLeftPinnedColumn) {
-        const expandCell = rowShadow.querySelector('.vega-table-expanded-row-slot-container');
-        if (expandCell) {
-          const slotInnerContainer = expandCell.querySelector('.expanded-row-slot-inner');
-          this.updatePinnedPosition(slotInnerContainer, 'left', leftPadding);
-          // we should set the width to make the expand slot not scroll by table scroll.
-          // ticket: https://gethired.atlassian.net/browse/VD-7015
-          slotInnerContainer.style.width = `${expandContainerWidth}px`;
+          return ((_b = (_a = cell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
         }
       }
+      return 0;
     });
   }
-  clearAllPinnedPositions() {
-    this.previouslyStyledCells.forEach((cell) => {
-      cell.style.position = '';
-      cell.style.zIndex = '';
-      cell.style.left = '';
-      cell.style.right = '';
-      if (cell.classList.contains('expanded-row-slot-inner')) {
-        cell.style.width = '';
-      }
-    });
-    // Remove boundary classes only from cells where they were dynamically added
-    // (breakpoint-shifted boundaries). Static boundary classes from renderInput are
-    // re-applied by the cell's own render cycle.
-    this.dynamicRightDividerCells.forEach((cell) => cell.classList.remove('right-divider'));
-    this.dynamicRightDividerCells.clear();
-    this.dynamicLeftDividerCells.forEach((cell) => cell.classList.remove('left-divider'));
-    this.dynamicLeftDividerCells.clear();
-    this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
-    this.dynamicHideRightBorderCells.clear();
-    this.restoreTemplateLeafColspan();
-    this.previouslyStyledCells.clear();
-  }
-  updatePinnedPosition(cell, type, position) {
-    if (!cell)
-      return;
-    cell.style.position = 'sticky';
-    cell.style.zIndex = '1';
-    cell.style[type] = `${position}px`;
-    this.previouslyStyledCells.add(cell);
-  }
 }
 __decorate([
   MapToComponentField()
@@ -575,9 +81,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "isTemplateRenderMode", void 0);

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-row-renderer.js

@@ -32,6 +32,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
         }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
+          this.vegaTableRenderInputController.addRowRenderInputMap(ref, 'body');
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index });
           });

package/dist/collection/components/vega-table/vega-table-cell/vega-table-cell.css

@@ -148,6 +148,16 @@ td.v-text-right {
   border-color: rgba(var(--v-border-color-input-field, 171, 198, 216, 1));
 }
 
+:host .vega-table-cell.pinned-left {
+  position: sticky;
+  z-index: 1;
+  left: var(--pinned-offset-left, 0);
+}
+:host .vega-table-cell.pinned-right {
+  position: sticky;
+  z-index: 1;
+  right: var(--pinned-offset-right, 0);
+}
 :host .vega-table-cell.right-divider {
   border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
   border-right-width: 2px;