@atlaskit/react-ufo 3.12.4 → 3.13.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.13.0
+
+### Minor Changes
+
+- [#156673](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156673)
+  [`27ecf5244d858`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/27ecf5244d858) -
+  Added API to account for page layout in VC calculation
+
+## 3.12.5
+
+### Patch Changes
+
+- [#156815](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156815)
+  [`a6856b45ef58f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a6856b45ef58f) -
+  make ttvc v3 more debugable
+
 ## 3.12.4
 
 ### Patch Changes

package/dist/cjs/create-experimental-interaction-metrics-payload/index.js

@@ -112,7 +112,8 @@ function _getExperimentalVCMetrics() {
             isEventAborted: !!interaction.abortReason,
             prefix: prefix,
             vc: interaction.vc,
-            experienceKey: interaction.ufoName
+            experienceKey: interaction.ufoName,
+            interactionId: interaction.id
           });
         case 4:
           result = _context.sent;

package/dist/cjs/create-payload/utils/get-vc-metrics.js

@@ -65,7 +65,8 @@ function _getVCMetrics() {
             prefix: prefix,
             vc: interaction.vc,
             isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
-            experienceKey: interaction.ufoName
+            experienceKey: interaction.ufoName,
+            interactionId: interaction.id
           }, ssr));
         case 18:
           result = _context.sent;

package/dist/cjs/vc/index.js

@@ -131,7 +131,8 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
               _context.next = 13;
               return (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.getVCResult({
                 start: param.start,
-                stop: param.stop
+                stop: param.stop,
+                interactionId: param.interactionId
               });
             case 13:
               _context.t1 = _context.sent;
@@ -158,7 +159,8 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
               _context.next = 28;
               return (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.getVCResult({
                 start: param.start,
-                stop: param.stop
+                stop: param.stop,
+                interactionId: param.interactionId
               });
             case 28:
               newResult = _context.sent;

package/dist/cjs/vc/vc-observer/getVCRevisionDebugDetails.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVCRevisionDebugDetails = getVCRevisionDebugDetails;
+function getVCRevisionDebugDetails(_ref) {
+  var revision = _ref.revision,
+    isClean = _ref.isClean,
+    abortReason = _ref.abortReason,
+    VCEntries = _ref.VCEntries,
+    componentsLog = _ref.componentsLog,
+    interactionId = _ref.interactionId;
+  return {
+    revision: revision,
+    isClean: isClean,
+    abortReason: abortReason,
+    vcLogs: VCEntries.map(function (entry) {
+      return {
+        time: entry.time,
+        viewportPercentage: entry.vc,
+        entries: entry.elements.map(function (element) {
+          var _componentsLog$entry$;
+          var logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(function (log) {
+            return log.targetName === element;
+          });
+          return {
+            elementName: element,
+            type: logEntry === null || logEntry === void 0 ? void 0 : logEntry.type,
+            rect: logEntry === null || logEntry === void 0 ? void 0 : logEntry.intersectionRect,
+            visible: true,
+            attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
+            oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
+            newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
+          };
+        })
+      };
+    }),
+    interactionId: interactionId
+  };
+}

package/dist/cjs/vc/vc-observer/index.js

@@ -17,6 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../../config");
 var _interactionMetrics = require("../../interaction-metrics");
 var _attachAbortListeners = require("./attachAbortListeners");
+var _getVCRevisionDebugDetails = require("./getVCRevisionDebugDetails");
 var _getVCRevisionsData = require("./getVCRevisionsData");
 var _getViewport = require("./getViewport");
 var _heatmap = require("./heatmap/heatmap");
@@ -106,11 +107,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     });
     (0, _defineProperty2.default)(this, "getVCResult", /*#__PURE__*/function () {
       var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref3) {
-        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, isVCClean, revisionsData, speedIndex, isTTVCv3Enabled;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, _ufo_devtool_onVCRev2, _ref10, _ufo_devtool_onVCRev, _ref9, isVCClean, revisionsData, speedIndex, isTTVCv3Enabled;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted, experienceKey = _ref3.experienceKey;
+              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted, experienceKey = _ref3.experienceKey, interactionId = _ref3.interactionId;
               startTime = performance.now(); // add local measurement
               fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
               rawData = vc !== undefined ? vc : _this.getVCRawData();
@@ -287,6 +288,31 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
                       entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
                     }
                   }));
+
+                  // Add devtool callback for both v1 and v2
+                  if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_ttvc_v3_devtool')) {
+                    // Handle v1 if not disabled
+                    if (!isTTVCv1Disabled) {
+                      (_ufo_devtool_onVCRev = (_ref9 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref9, (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
+                        revision: 'fy25.01',
+                        isClean: !abortReasonInfo,
+                        abortReason: abortReason.reason,
+                        VCEntries: VCEntries.rel,
+                        componentsLog: componentsLog,
+                        interactionId: interactionId
+                      }));
+                    }
+
+                    // Handle v2
+                    (_ufo_devtool_onVCRev2 = (_ref10 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev2 === void 0 || _ufo_devtool_onVCRev2.call(_ref10, (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
+                      revision: 'fy25.02',
+                      isClean: !abortReasonInfo,
+                      abortReason: abortReason.reason,
+                      VCEntries: vcNext.VCEntries.rel,
+                      componentsLog: componentsLog,
+                      interactionId: interactionId
+                    }));
+                  }
                 }
               } catch (e) {
                 /*  do nothing */
@@ -387,16 +413,16 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref9) {
-      var element = _ref9.element,
-        type = _ref9.type,
-        ignoreReason = _ref9.ignoreReason,
-        timestamp = _ref9.timestamp,
-        targetName = _ref9.targetName,
-        intersectionRect = _ref9.intersectionRect,
-        attributeName = _ref9.attributeName,
-        oldValue = _ref9.oldValue,
-        newValue = _ref9.newValue;
+    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref11) {
+      var element = _ref11.element,
+        type = _ref11.type,
+        ignoreReason = _ref11.ignoreReason,
+        timestamp = _ref11.timestamp,
+        targetName = _ref11.targetName,
+        intersectionRect = _ref11.intersectionRect,
+        attributeName = _ref11.attributeName,
+        oldValue = _ref11.oldValue,
+        newValue = _ref11.newValue;
       if (_this.multiHeatmap === null) {
         return;
       }
@@ -481,10 +507,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref10) {
-          var _ref11 = (0, _slicedToArray2.default)(_ref10, 2),
-            key = _ref11[0],
-            time = _ref11[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref12) {
+          var _ref13 = (0, _slicedToArray2.default)(_ref12, 2),
+            key = _ref13[0],
+            time = _ref13[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -497,6 +523,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     this.arraySize = options.heatmapSize || 200;
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
+    var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder;
     this.observers = new _observers.Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -504,6 +531,9 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         role: false,
         className: true,
         dataVC: true
+      },
+      SSRConfig: {
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       }
     });
     this.heatmap = !(0, _config.isVCRevisionEnabled)('fy25.01') ? [] : this.getCleanHeatmap();
@@ -517,8 +547,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }
   return (0, _createClass2.default)(VCObserver, [{
     key: "start",
-    value: function start(_ref12) {
-      var startTime = _ref12.startTime;
+    value: function start(_ref14) {
+      var startTime = _ref14.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -540,12 +570,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref13) {
-        var ignoreReason = _ref13.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref15) {
+        var ignoreReason = _ref15.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref14) {
-        var targetName = _ref14.targetName,
-          ignoreReason = _ref14.ignoreReason;
+      }).map(function (_ref16) {
+        var targetName = _ref16.targetName,
+          ignoreReason = _ref16.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -668,12 +698,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref15) {
-      var heatmap = _ref15.heatmap,
-        _ref15$ssr = _ref15.ssr,
-        ssr = _ref15$ssr === void 0 ? UNUSED_SECTOR : _ref15$ssr,
-        componentsLog = _ref15.componentsLog,
-        viewport = _ref15.viewport;
+    value: function calculateVC(_ref17) {
+      var heatmap = _ref17.heatmap,
+        _ref17$ssr = _ref17.ssr,
+        ssr = _ref17$ssr === void 0 ? UNUSED_SECTOR : _ref17$ssr,
+        componentsLog = _ref17.componentsLog,
+        viewport = _ref17.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -739,11 +769,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref16, i) {
+      var VCEntries = entries.reduce(function (acc, _ref18, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref17 = (0, _slicedToArray2.default)(_ref16, 2),
-          timestamp = _ref17[0],
-          entryPainted = _ref17[1];
+        var _ref19 = (0, _slicedToArray2.default)(_ref18, 2),
+          timestamp = _ref19[0],
+          entryPainted = _ref19[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
         var logEntry = (0, _toConsumableArray2.default)(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {

package/dist/cjs/vc/vc-observer/observers/index.js

@@ -31,7 +31,8 @@ function isElementVisible(target) {
 }
 var Observers = exports.Observers = /*#__PURE__*/function () {
   function Observers(opts) {
-    var _this = this;
+    var _this = this,
+      _opts$SSRConfig;
     (0, _classCallCheck2.default)(this, Observers);
     (0, _defineProperty2.default)(this, "observedMutations", new WeakMap());
     (0, _defineProperty2.default)(this, "elementsInView", new Set());
@@ -71,7 +72,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
     this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers();
+    this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers((_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder);
   }
   return (0, _createClass2.default)(Observers, [{
     key: "isBrowserSupported",

package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -9,15 +9,39 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var ANCESTOR_LOOKUP_LIMIT = 10;
+var PAGE_LAYOUT_ID = 'page-layout.root';
 var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/function () {
   function SSRPlaceholderHandlers() {
     var _this = this;
+    var enablePageLayoutPlaceholder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     (0, _classCallCheck2.default)(this, SSRPlaceholderHandlers);
     (0, _defineProperty2.default)(this, "staticPlaceholders", new Map());
     (0, _defineProperty2.default)(this, "callbacks", new Map());
     (0, _defineProperty2.default)(this, "getSizeCallbacks", new Map());
     (0, _defineProperty2.default)(this, "reactValidateCallbacks", new Map());
     (0, _defineProperty2.default)(this, "EQUALITY_THRESHOLD", 1);
+    (0, _defineProperty2.default)(this, "getPlaceholderId", function (el) {
+      var _el$dataset;
+      var ssrPlaceholderId = el === null || el === void 0 || (_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.ssrPlaceholder;
+      if (!!ssrPlaceholderId) {
+        return ssrPlaceholderId;
+      }
+      if (_this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
+    (0, _defineProperty2.default)(this, "getPlaceholderReplacementId", function (el) {
+      var _el$dataset2;
+      var ssrPlaceholderReplaceId = el === null || el === void 0 || (_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.ssrPlaceholderReplace;
+      if (!!ssrPlaceholderReplaceId) {
+        return ssrPlaceholderReplaceId;
+      }
+      if (_this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
     (0, _defineProperty2.default)(this, "intersectionObserverCallback", function (_ref) {
       var _this$intersectionObs;
       var target = _ref.target,
@@ -27,7 +51,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         // impossible case - keep typescript healthy
         return;
       }
-      var staticKey = target.dataset.ssrPlaceholder || '';
+      var staticKey = _this.getPlaceholderId(target);
       if (staticKey) {
         if (_this.staticPlaceholders.has(staticKey) && _this.callbacks.has(staticKey)) {
           // validation
@@ -49,7 +73,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
           _this.callbacks.delete(staticKey);
         }
       } else {
-        var key = target.dataset.ssrPlaceholderReplace || '';
+        var key = _this.getPlaceholderReplacementId(target);
         var _resolve2 = _this.reactValidateCallbacks.get(key);
         if (!_resolve2) {
           return;
@@ -77,25 +101,27 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         }).forEach(_this.intersectionObserverCallback);
       });
     }
+    this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
     if (window.document) {
       try {
-        var existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        var selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+        var existingElements = document.querySelectorAll(selector);
         existingElements.forEach(function (el) {
-          var _el$dataset;
-          if (el instanceof HTMLElement && el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ssrPlaceholder) {
+          var placeholderId = el instanceof HTMLElement && _this.getPlaceholderId(el);
+          if (placeholderId) {
             var _window$__SSR_PLACEHO, _this$intersectionObs2;
             var width = -1;
             var height = -1;
             var x = -1;
             var y = -1;
-            var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[el.dataset.ssrPlaceholder];
+            var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
             if (boundingClientRect) {
               width = boundingClientRect.width;
               height = boundingClientRect.height;
               x = boundingClientRect.x;
               y = boundingClientRect.y;
             }
-            _this.staticPlaceholders.set(el.dataset.ssrPlaceholder, {
+            _this.staticPlaceholders.set(placeholderId, {
               width: width,
               height: height,
               x: x,
@@ -120,12 +146,12 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
   }, {
     key: "isPlaceholder",
     value: function isPlaceholder(element) {
-      return Boolean(element.dataset.ssrPlaceholder);
+      return Boolean(this.getPlaceholderId(element));
     }
   }, {
     key: "isPlaceholderReplacement",
     value: function isPlaceholderReplacement(element) {
-      return Boolean(element.dataset.ssrPlaceholderReplace);
+      return Boolean(this.getPlaceholderReplacementId(element));
     }
   }, {
     key: "isPlaceholderIgnored",
@@ -155,7 +181,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     value: function checkIfExistedAndSizeMatching(el) {
       var _this2 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
-      var id = el.dataset.ssrPlaceholder || '';
+      var id = this.getPlaceholderId(el);
       return new Promise(function (resolve) {
         if (!_this2.staticPlaceholders.has(id)) {
           resolve(false);
@@ -173,7 +199,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       var _this3 = this;
       return new Promise(function (resolve) {
         var _this3$intersectionOb;
-        _this3.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+        _this3.getSizeCallbacks.set(_this3.getPlaceholderId(el), resolve);
         (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
       });
     }
@@ -182,7 +208,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     value: function validateReactComponentMatchToPlaceholder(el) {
       var _this4 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
-      var id = el.dataset.ssrPlaceholderReplace || '';
+      var id = this.getPlaceholderReplacementId(el);
       return new Promise(function (resolve) {
         if (!_this4.staticPlaceholders.has(id)) {
           resolve(false);

package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js

@@ -8,6 +8,7 @@ exports.collectSSRPlaceholderDimensions = collectSSRPlaceholderDimensions;
 // and save their size/positions in a map __SSR_PLACEHOLDERS_DIMENSIONS__ on the Window object. Each placeholderId is
 // unique and maps to its corresponding elements bounding client rectangle dimensions.
 function collectSSRPlaceholderDimensions(document, window) {
+  var enablePageLayoutPlaceholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
   ssrPlaceholders.forEach(function (elem) {
     var placeholderId = elem.getAttribute('data-ssr-placeholder');
@@ -17,4 +18,12 @@ function collectSSRPlaceholderDimensions(document, window) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
     }
   });
+  if (enablePageLayoutPlaceholder) {
+    var pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
+    if (pageLayoutRoot) {
+      var boundingClient = pageLayoutRoot.getBoundingClientRect();
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = boundingClient;
+    }
+  }
 }

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

@@ -24,12 +24,14 @@ var DEFAULT_SELECTOR_CONFIG = {
 };
 var VCObserverNew = exports.default = /*#__PURE__*/function () {
   function VCObserverNew(config) {
-    var _config$selectorConfi,
+    var _config$isPostInterac,
+      _config$selectorConfi,
       _this = this;
     (0, _classCallCheck2.default)(this, VCObserverNew);
     (0, _defineProperty2.default)(this, "viewportObserver", null);
     (0, _defineProperty2.default)(this, "windowEventObserver", null);
     this.entriesTimeline = new _entriesTimeline.default();
+    this.isPostInteraction = (_config$isPostInterac = config.isPostInteraction) !== null && _config$isPostInterac !== void 0 ? _config$isPostInterac : false;
     this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
     this.viewportObserver = new _viewportObserver.default({
       onChange: function onChange(onChangeArg) {
@@ -47,13 +49,15 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
         }
         _this.entriesTimeline.push({
           time: time,
-          type: type,
           data: {
+            type: type,
             elementName: elementName,
             rect: rect,
             previousRect: previousRect,
             visible: visible,
-            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName
+            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
           }
         });
       }
@@ -64,8 +68,8 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
           type = _ref.type;
         _this.entriesTimeline.push({
           time: time,
-          type: 'window:event',
           data: {
+            type: 'window:event',
             eventType: type
           }
         });
@@ -92,11 +96,11 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
     key: "getVCResult",
     value: function () {
       var _getVCResult = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(param) {
-        var start, stop, results, calculator_fy25_03, orderedEntries, fy25_03;
+        var start, stop, interactionId, results, calculator_fy25_03, orderedEntries, fy25_03;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              start = param.start, stop = param.stop;
+              start = param.start, stop = param.stop, interactionId = param.interactionId;
               results = [];
               calculator_fy25_03 = new _fy25_.default();
               orderedEntries = this.entriesTimeline.getOrderedEntries({
@@ -107,7 +111,9 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
               return calculator_fy25_03.calculate({
                 orderedEntries: orderedEntries,
                 startTime: start,
-                stopTime: stop
+                stopTime: stop,
+                interactionId: interactionId,
+                isPostInteraction: this.isPostInteraction
               });
             case 6:
               fy25_03 = _context.sent;