@atlaskit/react-ufo 3.4.1 → 3.4.3

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

@@ -10,6 +10,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getPageVisibilityState } from '../../hidden-timing';
 import { attachAbortListeners } from './attachAbortListeners';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { MultiRevisionHeatmap } from './heatmap/heatmap';
@@ -96,7 +97,7 @@ export var VCObserver = /*#__PURE__*/function () {
     });
     _defineProperty(this, "getVCResult", /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
-        var start, stop, tti, prefix, ssr, vc, isEventAborted, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, _VCObserver$calculate, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, isMultiHeatmapEnabled, revisionsData, isCalcSpeedIndexEnabled, speedIndex;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, _VCObserver$calculate, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, isVCClean, isMultiHeatmapEnabled, pageVisibilityUpToTTAI, shouldHaveVCmetric, revisionsData, isCalcSpeedIndexEnabled, speedIndex;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -233,31 +234,56 @@ export var VCObserver = /*#__PURE__*/function () {
               } catch (e) {
                 /*  do nothing */
               }
+              isVCClean = !abortReasonInfo;
               isMultiHeatmapEnabled = !fg('platform_ufo_multiheatmap_killswitch');
-              revisionsData = isMultiHeatmapEnabled && multiHeatmap !== null ? _defineProperty({}, "".concat(fullPrefix, "vc:rev"), multiHeatmap === null || multiHeatmap === void 0 ? void 0 : multiHeatmap.getPayloadShapedData({
+              pageVisibilityUpToTTAI = getPageVisibilityState(start, stop);
+              shouldHaveVCmetric = isVCClean && !isEventAborted && pageVisibilityUpToTTAI;
+              revisionsData = isMultiHeatmapEnabled ? fg('platform_ufo_vc_observer_new') ? _defineProperty({}, "".concat(fullPrefix, "vc:rev"), [{
+                revision: 'fy25.01',
+                clean: isVCClean,
+                'metric:vc90': shouldHaveVCmetric ? VC['90'] : null,
+                vcDetails: shouldHaveVCmetric ? Object.fromEntries(VCObserver.VCParts.map(function (key) {
+                  var _VCBox$key;
+                  return [key, {
+                    t: VC[key],
+                    e: (_VCBox$key = VCBox[key]) !== null && _VCBox$key !== void 0 ? _VCBox$key : []
+                  }];
+                })) : []
+              }, {
+                revision: 'fy25.02',
+                clean: isVCClean,
+                'metric:vc90': shouldHaveVCmetric ? VC['90'] : null,
+                vcDetails: shouldHaveVCmetric ? Object.fromEntries(VCObserver.VCParts.map(function (key) {
+                  var _vcNext$VCBox$key;
+                  return [key, {
+                    t: vcNext.VC[key],
+                    e: (_vcNext$VCBox$key = vcNext.VCBox[key]) !== null && _vcNext$VCBox$key !== void 0 ? _vcNext$VCBox$key : []
+                  }];
+                })) : []
+              }]) : multiHeatmap !== null ? _defineProperty({}, "".concat(fullPrefix, "vc:rev"), multiHeatmap === null || multiHeatmap === void 0 ? void 0 : multiHeatmap.getPayloadShapedData({
                 VCParts: VCObserver.VCParts.map(function (v) {
                   return parseInt(v);
                 }),
-                VCCalculationMethods: getRevisions().map(function (_ref9) {
-                  var classifier = _ref9.classifier;
+                VCCalculationMethods: getRevisions().map(function (_ref10) {
+                  var classifier = _ref10.classifier;
                   return classifier.VCCalculationMethod;
                 }),
-                filterComponentsLog: getRevisions().map(function (_ref10) {
-                  var classifier = _ref10.classifier;
+                filterComponentsLog: getRevisions().map(function (_ref11) {
+                  var classifier = _ref11.classifier;
                   return classifier.filterComponentsLog;
                 }),
                 isEventAborted: isEventAborted,
                 interactionStart: start,
                 ttai: stop,
                 ssr: ssr,
-                clean: !abortReasonInfo
-              })) : null; // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+                clean: isVCClean
+              })) : null : null; // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
               isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
               speedIndex = _defineProperty(_defineProperty({}, "ufo:speedIndex", VCEntries.speedIndex), "ufo:next:speedIndex", vcNext.VCEntries.speedIndex);
               return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
                 'metrics:vc': VC
-              }, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), isCalcSpeedIndexEnabled ? speedIndex : {}));
-            case 24:
+              }, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), isVCClean), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), isCalcSpeedIndexEnabled ? speedIndex : {}));
+            case 27:
             case "end":
               return _context.stop();
           }
@@ -270,14 +296,16 @@ export var VCObserver = /*#__PURE__*/function () {
     _defineProperty(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
       _this.measureStart();
       _this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason);
-      _this.onViewportChangeDetected({
-        timestamp: rawTime,
-        intersectionRect: intersectionRect,
-        targetName: targetName,
-        element: element,
-        type: type,
-        ignoreReason: ignoreReason
-      });
+      if (!fg('platform_ufo_vc_observer_new')) {
+        _this.onViewportChangeDetected({
+          timestamp: rawTime,
+          intersectionRect: intersectionRect,
+          targetName: targetName,
+          element: element,
+          type: type,
+          ignoreReason: ignoreReason
+        });
+      }
       _this.measureStop();
     });
     _defineProperty(this, "legacyHandleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
@@ -302,13 +330,13 @@ export var VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    _defineProperty(this, "onViewportChangeDetected", function (_ref12) {
-      var element = _ref12.element,
-        type = _ref12.type,
-        ignoreReason = _ref12.ignoreReason,
-        timestamp = _ref12.timestamp,
-        targetName = _ref12.targetName,
-        intersectionRect = _ref12.intersectionRect;
+    _defineProperty(this, "onViewportChangeDetected", function (_ref13) {
+      var element = _ref13.element,
+        type = _ref13.type,
+        ignoreReason = _ref13.ignoreReason,
+        timestamp = _ref13.timestamp,
+        targetName = _ref13.targetName,
+        intersectionRect = _ref13.intersectionRect;
       if (_this.multiHeatmap === null) {
         return;
       }
@@ -390,10 +418,10 @@ export var VCObserver = /*#__PURE__*/function () {
       var unbinds = 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 (_ref13) {
-          var _ref14 = _slicedToArray(_ref13, 2),
-            key = _ref14[0],
-            time = _ref14[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref14) {
+          var _ref15 = _slicedToArray(_ref14, 2),
+            key = _ref15[0],
+            time = _ref15[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -426,8 +454,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   return _createClass(VCObserver, [{
     key: "start",
-    value: function start(_ref15) {
-      var startTime = _ref15.startTime;
+    value: function start(_ref16) {
+      var startTime = _ref16.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -449,12 +477,12 @@ export var VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref16) {
-        var ignoreReason = _ref16.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref17) {
+        var ignoreReason = _ref17.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref17) {
-        var targetName = _ref17.targetName,
-          ignoreReason = _ref17.ignoreReason;
+      }).map(function (_ref18) {
+        var targetName = _ref18.targetName,
+          ignoreReason = _ref18.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -574,12 +602,12 @@ export var VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref18) {
-      var heatmap = _ref18.heatmap,
-        _ref18$ssr = _ref18.ssr,
-        ssr = _ref18$ssr === void 0 ? UNUSED_SECTOR : _ref18$ssr,
-        componentsLog = _ref18.componentsLog,
-        viewport = _ref18.viewport;
+    value: function calculateVC(_ref19) {
+      var heatmap = _ref19.heatmap,
+        _ref19$ssr = _ref19.ssr,
+        ssr = _ref19$ssr === void 0 ? UNUSED_SECTOR : _ref19$ssr,
+        componentsLog = _ref19.componentsLog,
+        viewport = _ref19.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -648,11 +676,11 @@ export var VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref19, i) {
+      var VCEntries = entries.reduce(function (acc, _ref20, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref20 = _slicedToArray(_ref19, 2),
-          timestamp = _ref20[0],
-          entryPainted = _ref20[1];
+        var _ref21 = _slicedToArray(_ref20, 2),
+          timestamp = _ref21[0],
+          entryPainted = _ref21[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 = _toConsumableArray(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {

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

@@ -12,9 +12,10 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
     _defineProperty(this, "getSizeCallbacks", new Map());
     _defineProperty(this, "reactValidateCallbacks", new Map());
     _defineProperty(this, "intersectionObserverCallback", function (_ref) {
+      var _this$intersectionObs;
       var target = _ref.target,
         boundingClientRect = _ref.boundingClientRect;
-      _this.intersectionObserver.unobserve(target);
+      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.unobserve(target);
       if (!(target instanceof HTMLElement)) {
         // impossible case - keep typescript healthy
         return;
@@ -61,18 +62,21 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         _this.reactValidateCallbacks.delete(staticKey);
       }
     });
-    this.intersectionObserver = new IntersectionObserver(function (entries) {
-      return entries.filter(function (entry) {
-        return entry.intersectionRatio > 0;
-      }).forEach(_this.intersectionObserverCallback);
-    });
+    if (typeof IntersectionObserver === 'function') {
+      // Only instantiate the IntersectionObserver if it's supported
+      this.intersectionObserver = new IntersectionObserver(function (entries) {
+        return entries.filter(function (entry) {
+          return entry.intersectionRatio > 0;
+        }).forEach(_this.intersectionObserverCallback);
+      });
+    }
     if (window.document) {
       try {
         var existingElements = document.querySelectorAll('[data-ssr-placeholder]');
         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 _window$__SSR_PLACEHO;
+            var _window$__SSR_PLACEHO, _this$intersectionObs2;
             var width = -1;
             var height = -1;
             var x = -1;
@@ -90,7 +94,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
               x: x,
               y: y
             });
-            _this.intersectionObserver.observe(el);
+            (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.observe(el);
           }
         });
       } catch (e) {} finally {
@@ -150,8 +154,9 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           resolve(false);
           return;
         } else {
+          var _this2$intersectionOb;
           _this2.callbacks.set(id, resolve);
-          _this2.intersectionObserver.observe(el);
+          (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.observe(el);
         }
       });
     }
@@ -160,8 +165,9 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
     value: function getSize(el) {
       var _this3 = this;
       return new Promise(function (resolve) {
+        var _this3$intersectionOb;
         _this3.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
-        _this3.intersectionObserver.observe(el);
+        (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
       });
     }
   }, {
@@ -175,8 +181,9 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           resolve(false);
           return;
         } else {
+          var _this4$intersectionOb;
           _this4.reactValidateCallbacks.set(id, resolve);
-          _this4.intersectionObserver.observe(el);
+          (_this4$intersectionOb = _this4.intersectionObserver) === null || _this4$intersectionOb === void 0 || _this4$intersectionOb.observe(el);
         }
       });
     }

package/dist/esm/vc/vc-observer-new/get-element-name.js

@@ -1,65 +1,4 @@
 var nameCache = new WeakMap();
-function getAttributeSelector(element, attributeName) {
-  var attrValue = element.getAttribute(attributeName);
-  if (!attrValue) {
-    return '';
-  }
-  return "[".concat(attributeName, "=\"").concat(attrValue, "\"]");
-}
-function isValidSelector(selector) {
-  try {
-    document.querySelector(selector);
-    return true;
-  } catch (err) {
-    return false;
-  }
-}
-function isSelectorUnique(selector) {
-  return document.querySelectorAll(selector).length === 1;
-}
-function getUniqueSelector(selectorConfig, element) {
-  var currentElement = element;
-  var parts = [];
-  var MAX_DEPTH = 3;
-  var currentDepth = 0;
-  while (currentElement && currentElement.localName !== 'body' && currentDepth <= MAX_DEPTH) {
-    var tagName = currentElement.localName;
-    var selectorPart = tagName;
-    if (selectorConfig.id && currentElement.id && isValidSelector("#".concat(currentElement.id))) {
-      selectorPart += "#".concat(currentElement.id);
-    } else if (selectorConfig.dataVC) {
-      selectorPart += getAttributeSelector(currentElement, 'data-vc');
-    } else if (selectorConfig.testId) {
-      selectorPart += getAttributeSelector(currentElement, 'data-testid') || getAttributeSelector(currentElement, 'data-test-id');
-    } else if (selectorConfig.role) {
-      selectorPart += getAttributeSelector(currentElement, 'role');
-    } else if (selectorConfig.className && currentElement.className) {
-      var classNames = Array.from(currentElement.classList).join('.');
-      if (classNames) {
-        if (isValidSelector(".".concat(classNames))) {
-          selectorPart += ".".concat(classNames);
-        }
-      }
-    }
-    parts.unshift(selectorPart);
-    var _potentialSelector = parts.join(' > ').trim();
-    if (_potentialSelector && isSelectorUnique(_potentialSelector)) {
-      return _potentialSelector;
-    }
-    currentElement = currentElement.parentElement;
-    currentDepth++;
-  }
-  var potentialSelector = parts.join(' > ').trim();
-  if (!potentialSelector) {
-    return 'unknown';
-  } else if (!isSelectorUnique(potentialSelector)) {
-    var parentElement = element.parentElement;
-    if (parentElement) {
-      return "".concat(potentialSelector, ":nth-child"); // NOTE: invalid DOM selector, but enough information for VC
-    }
-  }
-  return potentialSelector;
-}
 export default function getElementName(selectorConfig, element) {
   if (!(element instanceof HTMLElement)) {
     return 'error';
@@ -68,7 +7,56 @@ export default function getElementName(selectorConfig, element) {
   if (cachedName) {
     return cachedName;
   }
-  var uniqueSelector = getUniqueSelector(selectorConfig, element);
-  nameCache.set(element, uniqueSelector);
-  return uniqueSelector;
+  // Get the tag name of the element.
+  var tagName = element.localName;
+  var encodeValue = function encodeValue(s) {
+    try {
+      return encodeURIComponent(s);
+    } catch (e) {
+      return 'malformed_value';
+    }
+  };
+
+  // Helper function to construct attribute selectors.
+  var getAttributeSelector = function getAttributeSelector(attributeName) {
+    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var attrValue = element.getAttribute(attributeName);
+    if (!attrValue) {
+      return '';
+    }
+    var encondedAttrValue = encodeValue(attrValue);
+    return "".concat(prefix, "[").concat(attributeName, "=\"").concat(encondedAttrValue, "\"]");
+  };
+
+  // Construct the data-vc attribute selector if specified in the config.
+  var dataVC = selectorConfig.dataVC ? getAttributeSelector('data-vc') : '';
+
+  // Construct the ID selector if specified in the config and the element has an ID.
+  var id = selectorConfig.id && element.id ? "#".concat(encodeValue(element.id)) : '';
+
+  // Construct the test ID selector if specified in the config.
+  var testId = selectorConfig.testId ? getAttributeSelector('data-testid') || getAttributeSelector('data-test-id') : '';
+
+  // Construct the role selector if specified in the config.
+  var role = selectorConfig.role ? getAttributeSelector('role') : '';
+  var classNames = Array.from(element.classList).map(encodeValue).join('.');
+  // Construct the class list selector if specified in the config.
+  var classList = selectorConfig.className && classNames ? ".".concat(classNames) : '';
+
+  // Combine primary attribute selectors (id, testId, role) into a single string.
+  var primaryAttributes = [id, testId, role].filter(Boolean).join('');
+
+  // Use dataVC if available, otherwise use the primary attributes.
+  var attributes = dataVC || primaryAttributes;
+
+  // If no attributes or class list, recursively get the parent's name.
+  if (!attributes && !classList) {
+    var parentName = element.parentElement ? getElementName(selectorConfig, element.parentElement) : 'unknown';
+    return "".concat(parentName, " > ").concat(tagName);
+  }
+
+  // Return the final constructed name: tagName + attributes or classList.
+  var name = "".concat(tagName).concat(attributes || classList);
+  nameCache.set(element, name);
+  return name;
 }

package/dist/esm/vc/vc-observer-new/get-unique-element-name.js

@@ -0,0 +1,74 @@
+var nameCache = new WeakMap();
+function getAttributeSelector(element, attributeName) {
+  var attrValue = element.getAttribute(attributeName);
+  if (!attrValue) {
+    return '';
+  }
+  return "[".concat(attributeName, "=\"").concat(attrValue, "\"]");
+}
+function isValidSelector(selector) {
+  try {
+    document.querySelector(selector);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+function isSelectorUnique(selector) {
+  return document.querySelectorAll(selector).length === 1;
+}
+function getUniqueSelector(selectorConfig, element) {
+  var currentElement = element;
+  var parts = [];
+  var MAX_DEPTH = 3;
+  var currentDepth = 0;
+  while (currentElement && currentElement.localName !== 'body' && currentDepth <= MAX_DEPTH) {
+    var tagName = currentElement.localName;
+    var selectorPart = tagName;
+    if (selectorConfig.id && currentElement.id && isValidSelector("#".concat(currentElement.id))) {
+      selectorPart += "#".concat(currentElement.id);
+    } else if (selectorConfig.dataVC) {
+      selectorPart += getAttributeSelector(currentElement, 'data-vc');
+    } else if (selectorConfig.testId) {
+      selectorPart += getAttributeSelector(currentElement, 'data-testid') || getAttributeSelector(currentElement, 'data-test-id');
+    } else if (selectorConfig.role) {
+      selectorPart += getAttributeSelector(currentElement, 'role');
+    } else if (selectorConfig.className && currentElement.className) {
+      var classNames = Array.from(currentElement.classList).join('.');
+      if (classNames) {
+        if (isValidSelector(".".concat(classNames))) {
+          selectorPart += ".".concat(classNames);
+        }
+      }
+    }
+    parts.unshift(selectorPart);
+    var _potentialSelector = parts.join(' > ').trim();
+    if (_potentialSelector && isSelectorUnique(_potentialSelector)) {
+      return _potentialSelector;
+    }
+    currentElement = currentElement.parentElement;
+    currentDepth++;
+  }
+  var potentialSelector = parts.join(' > ').trim();
+  if (!potentialSelector) {
+    return 'unknown';
+  } else if (!isSelectorUnique(potentialSelector)) {
+    var parentElement = element.parentElement;
+    if (parentElement) {
+      return "".concat(potentialSelector, ":nth-child"); // NOTE: invalid DOM selector, but enough information for VC
+    }
+  }
+  return potentialSelector;
+}
+export default function getElementName(selectorConfig, element) {
+  if (!(element instanceof HTMLElement)) {
+    return 'error';
+  }
+  var cachedName = nameCache.get(element);
+  if (cachedName) {
+    return cachedName;
+  }
+  var uniqueSelector = getUniqueSelector(selectorConfig, element);
+  nameCache.set(element, uniqueSelector);
+  return uniqueSelector;
+}

package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -10,6 +10,11 @@ import isViewportEntryData from '../utils/is-viewport-entry-data';
 var ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize'];
 var REVISION_NO = 'fy25.03';
 var CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'mutation:attribute', 'layout-shift', 'window:event'];
+
+// TODO: AFO-3523
+// Those are the attributes we have found when testing the 'fy25.03' manually.
+// We still need to replace this hardcoded list with a proper automation
+export var KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = ['data-drop-target-for-element', 'draggable'];
 var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
   function VCCalculator_FY25_03() {
     _classCallCheck(this, VCCalculator_FY25_03);
@@ -25,7 +30,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
       if (entry.type === 'mutation:attribute') {
         var entryData = entry.data;
         var attributeName = entryData.attributeName;
-        if (!attributeName) {
+        if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
           return false;
         }
         return true;

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -34,12 +34,14 @@ export var ViewportCanvas = /*#__PURE__*/function () {
     this.scaleFactor = scaleFactor;
     this.colorCounter = 1;
     this.colorTimeMap = new Map();
+    var safeViewportWidth = Math.max(viewport.width, 1);
+    var safeViewportHeight = Math.max(viewport.height, 1);
 
     // Calculate scaled dimensions
-    this.scaledWidth = Math.ceil(viewport.width * scaleFactor);
-    this.scaledHeight = Math.ceil(viewport.height * scaleFactor);
-    this.scaleX = this.scaledWidth / viewport.width;
-    this.scaleY = this.scaledHeight / viewport.height;
+    this.scaledWidth = Math.max(Math.ceil(safeViewportWidth * scaleFactor), 1);
+    this.scaledHeight = Math.max(Math.ceil(safeViewportHeight * scaleFactor), 1);
+    this.scaleX = this.scaledWidth / safeViewportWidth;
+    this.scaleY = this.scaledHeight / safeViewportHeight;
 
     // Initialize OffscreenCanvas with scaled dimensions
     this.canvas = document.createElement('canvas');

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

@@ -14,7 +14,9 @@ function isElementVisible(element) {
   try {
     var visible = element.checkVisibility({
       // @ts-expect-error
-      visibilityProperty: true
+      visibilityProperty: true,
+      contentVisibilityAuto: true,
+      opacityProperty: true
     });
     return visible;
   } catch (e) {
@@ -47,6 +49,9 @@ var ViewportObserver = /*#__PURE__*/function () {
           time = _ref2.time,
           type = _ref2.type,
           mutationData = _ref2.mutationData;
+        if (!target) {
+          return;
+        }
         var visible = isElementVisible(target);
         var lastElementRect = _this.mapVisibleNodeRects.get(target);
         _this.mapVisibleNodeRects.set(target, rect);
@@ -142,14 +147,17 @@ var ViewportObserver = /*#__PURE__*/function () {
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var changedRect = _step.value;
-            onChange({
-              time: time,
-              elementRef: new WeakRef(changedRect.node),
-              visible: true,
-              rect: changedRect.rect,
-              previousRect: changedRect.previousRect,
-              type: 'layout-shift'
-            });
+            var target = changedRect.node;
+            if (target) {
+              onChange({
+                time: time,
+                elementRef: new WeakRef(target),
+                visible: true,
+                rect: changedRect.rect,
+                previousRect: changedRect.previousRect,
+                type: 'layout-shift'
+              });
+            }
           }
         } catch (err) {
           _iterator.e(err);

package/dist/types/interaction-context/index.d.ts

@@ -15,10 +15,12 @@ export type Label = Readonly<{
 export type SegmentLabel = Readonly<{
     name: string;
     segmentId: string;
+    mode: 'list' | 'single';
 }>;
 export type LabelStack = ReadonlyArray<Label | SegmentLabel>;
 export interface UFOInteractionContextType extends InteractionContextType {
     labelStack: LabelStack;
+    segmentIdMap: Map<string, string>;
     addMark(name: string, timestamp?: number): void;
     addCustomData(customData: CustomData): void;
     addCustomTimings(customTimings: CustomTiming): void;

package/dist/types/segment/segment.d.ts

@@ -2,7 +2,8 @@ import React, { type ReactNode } from 'react';
 type Props = {
     name: string;
     children: ReactNode;
+    mode?: 'list' | 'single';
 };
 /** A portion of the page we apply measurement to */
-export default function UFOSegment({ name: segmentName, children }: Props): React.JSX.Element;
+export default function UFOSegment({ name: segmentName, children, mode }: Props): React.JSX.Element;
 export {};

package/dist/types/vc/no-op-vc-observer.d.ts

@@ -0,0 +1,13 @@
+import { VCResult } from '../common/vc/types';
+import type { GetVCResultType, VCObserverInterface } from './types';
+export declare class VCObserverNOOP implements VCObserverInterface {
+    start(startArg: {
+        startTime: number;
+    }): void;
+    stop(): void;
+    getVCRawData(): null;
+    getVCResult(param: GetVCResultType): Promise<VCResult>;
+    setSSRElement(element: HTMLElement): void;
+    setReactRootRenderStart(startTime: number): void;
+    setReactRootRenderStop(stopTime: number): void;
+}

package/dist/types/vc/vc-observer-new/get-unique-element-name.d.ts

@@ -0,0 +1,8 @@
+export type SelectorConfig = {
+    id: boolean;
+    testId: boolean;
+    role: boolean;
+    className: boolean;
+    dataVC?: boolean;
+};
+export default function getElementName(selectorConfig: SelectorConfig, element: Element): string;

package/dist/types/vc/vc-observer-new/metric-calculator/fy25_03/index.d.ts

@@ -1,5 +1,6 @@
 import type { VCObserverEntry } from '../../types';
 import AbstractVCCalculatorBase from '../abstract-base-vc-calculator';
+export declare const KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS: string[];
 export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
     constructor();
     protected isEntryIncluded(entry: VCObserverEntry): boolean;

package/dist/types-ts4.5/interaction-context/index.d.ts

@@ -15,10 +15,12 @@ export type Label = Readonly<{
 export type SegmentLabel = Readonly<{
     name: string;
     segmentId: string;
+    mode: 'list' | 'single';
 }>;
 export type LabelStack = ReadonlyArray<Label | SegmentLabel>;
 export interface UFOInteractionContextType extends InteractionContextType {
     labelStack: LabelStack;
+    segmentIdMap: Map<string, string>;
     addMark(name: string, timestamp?: number): void;
     addCustomData(customData: CustomData): void;
     addCustomTimings(customTimings: CustomTiming): void;