@atlaskit/react-ufo 5.2.9 → 5.3.0

package/dist/es2019/vc/index.js

@@ -16,7 +16,7 @@ export class VCObserverWrapper {
       enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false
     });
     if (isVCRevisionEnabled('fy25.03') || isVCRevisionEnabled('fy26.04')) {
-      var _opts$ssrEnablePageLa2;
+      var _opts$ssrEnablePageLa2, _opts$trackLayoutShif;
       this.newVCObserver = new VCObserverNew({
         selectorConfig: opts.selectorConfig,
         isPostInteraction: opts.isPostInteraction,
@@ -24,6 +24,7 @@ export class VCObserverWrapper {
           enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false
         },
         ssrPlaceholderHandler: this.ssrPlaceholderHandler,
+        trackLayoutShiftOffenders: (_opts$trackLayoutShif = opts.trackLayoutShiftOffenders) !== null && _opts$trackLayoutShif !== void 0 ? _opts$trackLayoutShif : false,
         searchPageConfig: opts.searchPageConfig
       });
     }
@@ -115,7 +116,8 @@ export class VCObserverWrapper {
       interactionAbortReason: param.interactionAbortReason,
       includeRawData,
       includeSSRInV3: param.includeSSRInV3,
-      rawDataStopTime: param.rawDataStopTime
+      rawDataStopTime: param.rawDataStopTime,
+      reportLayoutShiftOffenders: param.reportLayoutShiftOffenders
     })) : [];
     if (!v3v4Result || v3v4Result.length === 0) {
       return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};

package/dist/es2019/vc/vc-observer-new/index.js

@@ -31,7 +31,7 @@ export function getHasAbortingEventDuringSSR() {
 }
 export default class VCObserverNew {
   constructor(config) {
-    var _config$isPostInterac, _config$selectorConfi;
+    var _config$isPostInterac, _config$selectorConfi, _config$trackLayoutSh;
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
     // SSR related properties
@@ -55,6 +55,7 @@ export default class VCObserverNew {
         enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false
       });
     }
+    this.trackLayoutShiftOffenders = (_config$trackLayoutSh = config.trackLayoutShiftOffenders) !== null && _config$trackLayoutSh !== void 0 ? _config$trackLayoutSh : false;
     this.viewportObserver = new ViewportObserver({
       onChange: onChangeArg => {
         const {
@@ -79,7 +80,8 @@ export default class VCObserverNew {
           visible,
           attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName,
           oldValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.oldValue,
-          newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
+          newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue,
+          originalMutationTimestamp: mutationData === null || mutationData === void 0 ? void 0 : mutationData.timestamp
         };
         if (element) {
           const labelStacks = getLabelStacks(element);
@@ -97,7 +99,8 @@ export default class VCObserverNew {
       // Pass SSR context to ViewportObserver
       getSSRState: () => this.getSSRState(),
       getSSRPlaceholderHandler: () => this.getSSRPlaceholderHandler(),
-      searchPageConfig: config.searchPageConfig
+      searchPageConfig: config.searchPageConfig,
+      trackLayoutShiftOffenders: this.trackLayoutShiftOffenders
     });
     this.windowEventObserver = new WindowEventObserver({
       onEvent: ({
@@ -271,7 +274,8 @@ export default class VCObserverNew {
       excludeSmartAnswersInSearch,
       includeSSRRatio,
       isPageVisible,
-      interactionAbortReason
+      interactionAbortReason,
+      reportLayoutShiftOffenders: this.trackLayoutShiftOffenders
     }) : null;
     if (fy25_03) {
       results.push(fy25_03);
@@ -294,7 +298,8 @@ export default class VCObserverNew {
       excludeSmartAnswersInSearch,
       includeSSRRatio,
       isPageVisible,
-      interactionAbortReason
+      interactionAbortReason,
+      reportLayoutShiftOffenders: this.trackLayoutShiftOffenders
     };
     const [fy26_04, vcNext] = await Promise.all([isVCRevisionEnabled('fy26.04') ? calculator_fy26_04.calculate(calculatorParams) : null, isVCRevisionEnabled('next') ? calculator_next.calculate(calculatorParams) : null]);
     if (fy26_04) {

package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -1,5 +1,6 @@
 import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
+import { detectLayoutShiftCause } from './utils/detect-layout-shift-cause';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
 
@@ -60,7 +61,7 @@ export default class AbstractVCCalculatorBase {
     }
     return labelStacks;
   }
-  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, allEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio) {
+  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, allEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio, reportLayoutShiftOffenders) {
     var _window, _window2, _window3, _window4, _window6;
     const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99, 100];
     const viewportEntries = this.filterViewportEntries(filteredEntries);
@@ -80,6 +81,8 @@ export default class AbstractVCCalculatorBase {
     let percentileIndex = 0;
     const entryDataBuffer = new Set();
     let ssrRatio = -1;
+    let layoutShiftInsights = null;
+    let previousViewportPercentage = 0;
     if (vcLogs) {
       for (const entry of vcLogs) {
         const {
@@ -106,6 +109,19 @@ export default class AbstractVCCalculatorBase {
               t: Math.round(time),
               e: elementNames
             };
+            if (reportLayoutShiftOffenders && percentiles[percentileIndex] === 90 && entries.some(e => e.type === 'layout-shift')) {
+              const layoutShiftEntries = entries.filter(e => e.type === 'layout-shift');
+              layoutShiftInsights = {
+                layoutShiftOffendersResult: detectLayoutShiftCause({
+                  viewportEntries: viewportEntries,
+                  layoutShiftEntries,
+                  time,
+                  startTime
+                }),
+                layoutShiftEntriesCount: layoutShiftEntries.length,
+                layoutShiftImpact: viewportPercentage - previousViewportPercentage
+              };
+            }
             percentileIndex++;
           }
 
@@ -115,6 +131,7 @@ export default class AbstractVCCalculatorBase {
           // Only add to buffer if we haven't reached all percentiles
           entries.forEach(e => entryDataBuffer.add(e));
         }
+        previousViewportPercentage = viewportPercentage;
       }
     }
 
@@ -262,7 +279,8 @@ export default class AbstractVCCalculatorBase {
     return {
       vcDetails,
       ssrRatio,
-      speedIndex
+      speedIndex,
+      VC90layoutShiftInsights: layoutShiftInsights
     };
   }
   async calculate({
@@ -276,9 +294,10 @@ export default class AbstractVCCalculatorBase {
     includeSSRRatio,
     interactionType,
     isPageVisible,
-    interactionAbortReason
+    interactionAbortReason,
+    reportLayoutShiftOffenders
   }) {
-    var _vcDetails$90$t, _vcDetails$;
+    var _vcDetails$90$t, _vcDetails$, _layoutShiftInsightsP;
     const filteredEntries = orderedEntries.filter(entry => {
       return this.isEntryIncluded(entry, include3p, excludeSmartAnswersInSearch);
     });
@@ -299,13 +318,48 @@ export default class AbstractVCCalculatorBase {
     const {
       vcDetails,
       ssrRatio,
-      speedIndex
-    } = await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, orderedEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio);
+      speedIndex,
+      VC90layoutShiftInsights
+    } = await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, orderedEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio, reportLayoutShiftOffenders);
+    let layoutShiftInsightsPayload;
+    if (VC90layoutShiftInsights !== null && reportLayoutShiftOffenders) {
+      var _layoutShiftOffenders, _layoutShiftOffenders2, _layoutShiftOffenders3;
+      const {
+        layoutShiftOffendersResult,
+        layoutShiftEntriesCount,
+        layoutShiftImpact
+      } = VC90layoutShiftInsights;
+      layoutShiftInsightsPayload = {
+        impact: layoutShiftImpact,
+        sources: layoutShiftEntriesCount !== null && layoutShiftEntriesCount !== void 0 ? layoutShiftEntriesCount : 0,
+        same: {
+          dir: (_layoutShiftOffenders = layoutShiftOffendersResult === null || layoutShiftOffendersResult === void 0 ? void 0 : layoutShiftOffendersResult.layoutShiftVariables.allMovedSameWay) !== null && _layoutShiftOffenders !== void 0 ? _layoutShiftOffenders : false,
+          dist: (_layoutShiftOffenders2 = layoutShiftOffendersResult === null || layoutShiftOffendersResult === void 0 ? void 0 : layoutShiftOffendersResult.layoutShiftVariables.allMovedSameAmount) !== null && _layoutShiftOffenders2 !== void 0 ? _layoutShiftOffenders2 : false
+        },
+        total_mut: (_layoutShiftOffenders3 = layoutShiftOffendersResult === null || layoutShiftOffendersResult === void 0 ? void 0 : layoutShiftOffendersResult.layoutShiftOffenders.length) !== null && _layoutShiftOffenders3 !== void 0 ? _layoutShiftOffenders3 : 0,
+        mut: layoutShiftOffendersResult === null || layoutShiftOffendersResult === void 0 ? void 0 : layoutShiftOffendersResult.layoutShiftOffenders.sort((a, b) => Math.abs(a.distanceToLS) - Math.abs(b.distanceToLS)).slice(0, 5).map(offender => ({
+          e: offender.offender,
+          size: -1,
+          // @todo: calculate size
+          attr: {
+            t_before: offender.happenedBefore,
+            t_distance: offender.distanceToLS,
+            p_above: offender.isAbove,
+            p_left: offender.isLeft,
+            p_right: offender.isRight,
+            p_h_overlap: offender.hasHorizontalOverlap,
+            p_v_overlap: offender.hasVerticalOverlap,
+            p_same_offset: offender.matchesLayoutShiftDelta ? 'all' : 'none'
+          }
+        }))
+      };
+    }
     const result = {
       revision: this.revisionNo,
       clean: true,
       'metric:vc90': (_vcDetails$90$t = vcDetails === null || vcDetails === void 0 ? void 0 : (_vcDetails$ = vcDetails['90']) === null || _vcDetails$ === void 0 ? void 0 : _vcDetails$.t) !== null && _vcDetails$90$t !== void 0 ? _vcDetails$90$t : null,
-      vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
+      vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined,
+      'vc90:ls': (_layoutShiftInsightsP = layoutShiftInsightsPayload) !== null && _layoutShiftInsightsP !== void 0 ? _layoutShiftInsightsP : undefined
     };
     result.ratios = this.calculateRatios(filteredEntries);
     if (ssrRatio !== -1) {

package/dist/es2019/vc/vc-observer-new/metric-calculator/utils/detect-layout-shift-cause.js

@@ -0,0 +1,138 @@
+const calculateOffenderState = (current, matchesCurrentEntry) => {
+  // Once we know it's mixed across entries, we can short-circuit.
+  if (current === 'some') {
+    return 'some';
+  }
+  const entryState = matchesCurrentEntry ? 'all' : 'none';
+  if (current == null) {
+    return entryState;
+  }
+
+  // If the state flips between entries (all <-> none), it's "some".
+  if (current !== entryState) {
+    return 'some';
+  }
+  return current;
+};
+const calculateLayoutShiftMovement = layoutShiftEntries => {
+  const movements = layoutShiftEntries.map(lsEntry => {
+    const rect = lsEntry.rect;
+    const previousRect = lsEntry.previousRect;
+    if (!rect || !previousRect) {
+      return null;
+    }
+    const dx = rect.x - previousRect.x;
+    const dy = rect.y - previousRect.y;
+    return {
+      dx,
+      dy,
+      movedX: dx !== 0,
+      movedY: dy !== 0,
+      dirX: Math.sign(dx),
+      dirY: Math.sign(dy),
+      absDx: Math.abs(dx),
+      absDy: Math.abs(dy)
+    };
+  });
+  const hasMovement = m => m !== null;
+  const validMovements = movements.filter(hasMovement);
+  const allHaveRects = layoutShiftEntries.length > 0 && validMovements.length === layoutShiftEntries.length;
+  if (!allHaveRects) {
+    return {
+      allHaveRects,
+      allMovedSameWay: false,
+      allMovedSameAmount: false
+    };
+  }
+  const first = validMovements[0];
+  const allMovedSameWay = validMovements.every(m => m.movedX === first.movedX && m.movedY === first.movedY && m.dirX === first.dirX && m.dirY === first.dirY);
+  const allMovedSameAmount = allMovedSameWay && validMovements.every(m => m.absDx === first.absDx && m.absDy === first.absDy);
+  return {
+    allHaveRects,
+    allMovedSameWay,
+    allMovedSameAmount,
+    deltaX: first.dx,
+    deltaY: first.dy
+  };
+};
+export const detectLayoutShiftCause = ({
+  viewportEntries,
+  layoutShiftEntries,
+  time,
+  startTime,
+  offenderWindowMs = 250
+}) => {
+  const checkpointTimestamp = startTime + time;
+  const filteredLSPotentialOffenders = viewportEntries.filter(viewportEntry => (viewportEntry.time < checkpointTimestamp && viewportEntry.time > checkpointTimestamp - offenderWindowMs || viewportEntry.time > checkpointTimestamp && viewportEntry.time < checkpointTimestamp + offenderWindowMs) && viewportEntry.data.type !== 'layout-shift');
+
+  // Summarize whether all layout-shift entries moved in a consistent direction and by the same amount.
+  const layoutShiftVariables = calculateLayoutShiftMovement(layoutShiftEntries);
+
+  // Classify each offender against *all* layout-shift entries when the layout shift is consistently moving in a
+  // single axis (pure X or pure Y) so we can reason about whether an offender could have caused the movement.
+  const layoutShiftOffenders = filteredLSPotentialOffenders.reduce((acc, offender) => {
+    var _offenderData$origina, _isAbove, _isLeft, _isRight, _hasHorizontalOverlap, _hasVerticalOverlap;
+    const offenderData = offender.data;
+    const offenderRect = offenderData.rect;
+    if (!offenderRect) {
+      return acc;
+    }
+    const offenderTimestamp = (_offenderData$origina = offenderData.originalMutationTimestamp) !== null && _offenderData$origina !== void 0 ? _offenderData$origina : offender.time;
+    const happenedBefore = offenderTimestamp <= checkpointTimestamp;
+    const offenderLeft = offenderRect.x;
+    const offenderRight = offenderRect.x + offenderRect.width;
+    const offenderTop = offenderRect.y;
+    const offenderBottom = offenderRect.y + offenderRect.height;
+    const shouldClassifyAgainstAllEntries = layoutShiftVariables.allMovedSameWay && 'deltaX' in layoutShiftVariables && 'deltaY' in layoutShiftVariables && layoutShiftVariables.deltaX === 0 !== (layoutShiftVariables.deltaY === 0);
+    let isAbove = null;
+    let isLeft = null;
+    let isRight = null;
+    let hasHorizontalOverlap = null;
+    let hasVerticalOverlap = null;
+    if (shouldClassifyAgainstAllEntries) {
+      for (const lsEntry of layoutShiftEntries) {
+        const lsRect = lsEntry.rect;
+        if (!lsRect) {
+          continue;
+        }
+        const lsLeft = lsRect.x;
+        const lsRight = lsRect.x + lsRect.width;
+        const lsTop = lsRect.y;
+        const lsBottom = lsRect.y + lsRect.height;
+        isAbove = calculateOffenderState(isAbove, offenderBottom <= lsTop);
+        isLeft = calculateOffenderState(isLeft, offenderRight <= lsLeft);
+        isRight = calculateOffenderState(isRight, offenderLeft >= lsRight);
+        hasHorizontalOverlap = calculateOffenderState(hasHorizontalOverlap, offenderLeft < lsRight && offenderRight > lsLeft);
+        hasVerticalOverlap = calculateOffenderState(hasVerticalOverlap, offenderTop < lsBottom && offenderBottom > lsTop);
+      }
+    }
+    let matchesLayoutShiftDelta = false;
+    if (shouldClassifyAgainstAllEntries && layoutShiftVariables.allMovedSameAmount && offenderData.previousRect) {
+      const dx = offenderRect.x - offenderData.previousRect.x;
+      const dy = offenderRect.y - offenderData.previousRect.y;
+      const isPureX = layoutShiftVariables.deltaX !== 0 && layoutShiftVariables.deltaY === 0;
+      const isPureY = layoutShiftVariables.deltaY !== 0 && layoutShiftVariables.deltaX === 0;
+      if (isPureX) {
+        matchesLayoutShiftDelta = dx === layoutShiftVariables.deltaX && dy === 0;
+      } else if (isPureY) {
+        matchesLayoutShiftDelta = dy === layoutShiftVariables.deltaY && dx === 0;
+      }
+    }
+    acc.push({
+      offender: offenderData.elementName,
+      happenedBefore,
+      distanceToLS: Math.round(offenderTimestamp - checkpointTimestamp),
+      isAbove: (_isAbove = isAbove) !== null && _isAbove !== void 0 ? _isAbove : 'none',
+      isLeft: (_isLeft = isLeft) !== null && _isLeft !== void 0 ? _isLeft : 'none',
+      isRight: (_isRight = isRight) !== null && _isRight !== void 0 ? _isRight : 'none',
+      hasHorizontalOverlap: (_hasHorizontalOverlap = hasHorizontalOverlap) !== null && _hasHorizontalOverlap !== void 0 ? _hasHorizontalOverlap : 'none',
+      hasVerticalOverlap: (_hasVerticalOverlap = hasVerticalOverlap) !== null && _hasVerticalOverlap !== void 0 ? _hasVerticalOverlap : 'none',
+      matchesLayoutShiftDelta
+    });
+    return acc;
+  }, []);
+  return {
+    layoutShiftVariables,
+    layoutShiftOffenders
+  };
+};

package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js

@@ -78,6 +78,130 @@ const createElementMutationsWatcher = (removedNodeRects, isWithinThirdPartySegme
   }
   return 'mutation:element';
 };
+const createElementMutationsWatcherNew = (removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, hasSameDeletedNode, timestamp, isTargetReactRoot, getSSRState, getSSRPlaceholderHandler) => ({
+  target,
+  rect
+}) => {
+  if (getSSRState) {
+    const ssrState = getSSRState();
+    const SSRStateEnum = {
+      normal: 1,
+      waitingForFirstRender: 2,
+      ignoring: 3
+    };
+    if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && isTargetReactRoot) {
+      ssrState.state = SSRStateEnum.ignoring;
+      if (ssrState.renderStop === -1) {
+        // arbitrary 500ms DOM update window
+        ssrState.renderStop = timestamp + 500;
+      }
+      return {
+        type: 'ssr-hydration',
+        mutationData: {
+          timestamp
+        }
+      };
+    }
+    if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && isTargetReactRoot) {
+      if (timestamp <= ssrState.renderStop) {
+        return {
+          type: 'ssr-hydration',
+          mutationData: {
+            timestamp
+          }
+        };
+      } else {
+        ssrState.state = SSRStateEnum.normal;
+      }
+    }
+  }
+  if (getSSRPlaceholderHandler) {
+    const ssrPlaceholderHandler = getSSRPlaceholderHandler();
+    if (ssrPlaceholderHandler) {
+      if ((ssrPlaceholderHandler.isPlaceholderV4(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(target)) {
+        return {
+          type: 'mutation:ssr-placeholder',
+          mutationData: {
+            timestamp
+          }
+        };
+      }
+      if ((ssrPlaceholderHandler.isPlaceholderReplacementV4(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.validateReactComponentMatchToPlaceholderV4(target)) {
+        return {
+          type: 'mutation:ssr-placeholder',
+          mutationData: {
+            timestamp
+          }
+        };
+      }
+    }
+  }
+  if (hasSameDeletedNode && isInVCIgnoreIfNoLayoutShiftMarker(target)) {
+    return {
+      type: 'mutation:remount',
+      mutationData: {
+        timestamp
+      }
+    };
+  }
+  if (isContainedWithinMediaWrapper(target)) {
+    return {
+      type: 'mutation:media',
+      mutationData: {
+        timestamp
+      }
+    };
+  }
+  if (isWithinThirdPartySegment) {
+    return {
+      type: 'mutation:third-party-element',
+      mutationData: {
+        timestamp
+      }
+    };
+  }
+  if (isWithinSmartAnswersSegment) {
+    return {
+      type: 'mutation:smart-answers-element',
+      mutationData: {
+        timestamp
+      }
+    };
+  }
+  const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
+  if (!isInIgnoreLsMarker) {
+    return {
+      type: 'mutation:element',
+      mutationData: {
+        timestamp
+      }
+    };
+  }
+  const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+  if (isRLLPlaceholder && isInIgnoreLsMarker) {
+    return {
+      type: 'mutation:rll-placeholder',
+      mutationData: {
+        timestamp
+      }
+    };
+  }
+  const wasDeleted = removedNodeRects.some(nr => isSameRectDimensions(nr, rect));
+  if (wasDeleted && isInIgnoreLsMarker) {
+    return {
+      type: 'mutation:element-replacement',
+      mutationData: {
+        timestamp
+      }
+    };
+  }
+  return {
+    type: 'mutation:element',
+    mutationData: {
+      timestamp
+    }
+  };
+};
 export default class ViewportObserver {
   // SSR context functions
 
@@ -85,6 +209,7 @@ export default class ViewportObserver {
     onChange,
     getSSRState,
     getSSRPlaceholderHandler,
+    trackLayoutShiftOffenders = false,
     searchPageConfig
   }) {
     _defineProperty(this, "handleIntersectionEntry", ({
@@ -142,14 +267,15 @@ export default class ViewportObserver {
         } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
         const isWithinSmartAnswersSegment = Boolean(this.shouldCheckSmartAnswersMutations() && isContainedWithinSmartAnswers(addedNode));
         const isTargetReactRoot = targetNode === ((_this$getSSRState = this.getSSRState) === null || _this$getSSRState === void 0 ? void 0 : (_this$getSSRState$cal = _this$getSSRState.call(this)) === null || _this$getSSRState$cal === void 0 ? void 0 : _this$getSSRState$cal.reactRootElement);
-        (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, this.getSSRState, this.getSSRPlaceholderHandler));
+        (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, (this.trackLayoutShiftOffenders ? createElementMutationsWatcherNew : createElementMutationsWatcher)(removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, this.getSSRState, this.getSSRPlaceholderHandler));
       }
     });
     _defineProperty(this, "handleAttributeMutation", ({
       target,
       attributeName,
       oldValue,
-      newValue
+      newValue,
+      timestamp
     }) => {
       var _this$intersectionObs2;
       (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(target, ({
@@ -162,7 +288,8 @@ export default class ViewportObserver {
             mutationData: {
               attributeName,
               oldValue,
-              newValue
+              newValue,
+              timestamp
             }
           };
         }
@@ -176,7 +303,8 @@ export default class ViewportObserver {
               mutationData: {
                 attributeName,
                 oldValue,
-                newValue
+                newValue,
+                timestamp
               }
             };
           }
@@ -202,7 +330,8 @@ export default class ViewportObserver {
             mutationData: {
               attributeName,
               oldValue,
-              newValue
+              newValue,
+              timestamp
             }
           };
         }
@@ -216,7 +345,8 @@ export default class ViewportObserver {
             mutationData: {
               attributeName,
               oldValue,
-              newValue
+              newValue,
+              timestamp
             }
           };
         }
@@ -231,7 +361,8 @@ export default class ViewportObserver {
             mutationData: {
               attributeName,
               oldValue,
-              newValue
+              newValue,
+              timestamp
             }
           };
         }
@@ -242,7 +373,8 @@ export default class ViewportObserver {
             mutationData: {
               attributeName,
               oldValue,
-              newValue
+              newValue,
+              timestamp
             }
           };
         }
@@ -253,7 +385,8 @@ export default class ViewportObserver {
             mutationData: {
               attributeName,
               oldValue,
-              newValue
+              newValue,
+              timestamp
             }
           };
         }
@@ -262,7 +395,8 @@ export default class ViewportObserver {
           mutationData: {
             attributeName,
             oldValue,
-            newValue
+            newValue,
+            timestamp
           }
         };
       });
@@ -297,6 +431,7 @@ export default class ViewportObserver {
     this.intersectionObserver = null;
     this.mutationObserver = null;
     this.performanceObserver = null;
+    this.trackLayoutShiftOffenders = trackLayoutShiftOffenders;
 
     // Initialize SSR context functions
     this.getSSRState = getSSRState;

package/dist/es2019/vc/vc-observer-new/viewport-observer/intersection-observer/index.js

@@ -29,7 +29,7 @@ export function createIntersectionObserver({
           }
 
           // override as display-contents mutation
-          if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute') {
+          if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute' && 'oldValue' in tagOrCallbackResult.mutationData) {
             const {
               attributeName,
               oldValue,

package/dist/es2019/vc/vc-observer-new/viewport-observer/mutation-observer/index.js

@@ -45,7 +45,8 @@ function createMutationObserver({
             target: mut.target,
             attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
             oldValue,
-            newValue
+            newValue,
+            timestamp: mut.timestamp || performance.now()
           });
         }
         continue;