@atlaskit/react-ufo 5.2.8 → 5.2.10

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/metric-calculator/vc-next/index.js

@@ -1,4 +1,4 @@
-import VCCalculator_FY26_04 from "../fy26_04";
+import VCCalculator_FY26_04 from '../fy26_04';
 const getConsideredEntryTypes = () => {
   const consideredEntryTypes = [];
   return consideredEntryTypes;

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;

package/dist/esm/experience-trace-id-context/index.js

@@ -5,9 +5,9 @@ import { makeTraceHttpRequestHeaders } from './utils/make-trace-http-request-hea
 var state = {
   context: null
 };
-var traceIdKey = createContextKey("traceId");
-var spanIdKey = createContextKey("spanId");
-var experienceTypeKey = createContextKey("type");
+var traceIdKey = createContextKey('traceId');
+var spanIdKey = createContextKey('spanId');
+var experienceTypeKey = createContextKey('type');
 
 // DO NOT CALL THIS FUNCTION DIRECTLY!!!!
 // It is only to be called by React UFO libraries for the automatic handling of trace context for experiences.

package/dist/esm/interaction-metrics/index.js

@@ -1147,6 +1147,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
       devToolsEnabled: config.vc.devToolsEnabled,
       selectorConfig: config.vc.selectorConfig,
       ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
+      trackLayoutShiftOffenders: config.vc.trackLayoutShiftOffenders,
       searchPageConfig: searchPageConfig
     };
     vcObserver = newVCObserver(vcOptions);

package/dist/esm/interaction-metrics-init/index.js

@@ -173,7 +173,8 @@ export function init(analyticsWebClientAsync, config) {
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
       selectorConfig: config.vc.selectorConfig,
-      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
+      trackLayoutShiftOffenders: config.vc.trackLayoutShiftOffenders
     };
     postInteractionLog.initializeVCObserver(vcOptions);
     if (config !== null && config !== void 0 && (_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {

package/dist/esm/vc/index.js

@@ -26,7 +26,7 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
       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,
@@ -34,6 +34,7 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
           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
       });
     }
@@ -150,7 +151,8 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
                 interactionAbortReason: param.interactionAbortReason,
                 includeRawData: includeRawData,
                 includeSSRInV3: param.includeSSRInV3,
-                rawDataStopTime: param.rawDataStopTime
+                rawDataStopTime: param.rawDataStopTime,
+                reportLayoutShiftOffenders: param.reportLayoutShiftOffenders
               });
             case 12:
               _context.t1 = _context.sent;

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

@@ -39,6 +39,7 @@ var VCObserverNew = /*#__PURE__*/function () {
   function VCObserverNew(config) {
     var _config$isPostInterac,
       _config$selectorConfi,
+      _config$trackLayoutSh,
       _this = this;
     _classCallCheck(this, VCObserverNew);
     _defineProperty(this, "viewportObserver", null);
@@ -64,6 +65,7 @@ var VCObserverNew = /*#__PURE__*/function () {
         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: function onChange(onChangeArg) {
         var time = onChangeArg.time,
@@ -86,7 +88,8 @@ var VCObserverNew = /*#__PURE__*/function () {
           visible: 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) {
           var labelStacks = getLabelStacks(element);
@@ -108,7 +111,8 @@ var VCObserverNew = /*#__PURE__*/function () {
       getSSRPlaceholderHandler: function getSSRPlaceholderHandler() {
         return _this.getSSRPlaceholderHandler();
       },
-      searchPageConfig: config.searchPageConfig
+      searchPageConfig: config.searchPageConfig,
+      trackLayoutShiftOffenders: this.trackLayoutShiftOffenders
     });
     this.windowEventObserver = new WindowEventObserver({
       onEvent: function onEvent(_ref) {
@@ -308,7 +312,8 @@ var VCObserverNew = /*#__PURE__*/function () {
                 excludeSmartAnswersInSearch: excludeSmartAnswersInSearch,
                 includeSSRRatio: includeSSRRatio,
                 isPageVisible: isPageVisible,
-                interactionAbortReason: interactionAbortReason
+                interactionAbortReason: interactionAbortReason,
+                reportLayoutShiftOffenders: this.trackLayoutShiftOffenders
               });
             case 10:
               _context.t0 = _context.sent;
@@ -339,7 +344,8 @@ var VCObserverNew = /*#__PURE__*/function () {
                 excludeSmartAnswersInSearch: excludeSmartAnswersInSearch,
                 includeSSRRatio: includeSSRRatio,
                 isPageVisible: isPageVisible,
-                interactionAbortReason: interactionAbortReason
+                interactionAbortReason: interactionAbortReason,
+                reportLayoutShiftOffenders: this.trackLayoutShiftOffenders
               };
               _context.next = 22;
               return Promise.all([isVCRevisionEnabled('fy26.04') ? calculator_fy26_04.calculate(calculatorParams) : null, isVCRevisionEnabled('next') ? calculator_next.calculate(calculatorParams) : null]);