@atlaskit/react-ufo 3.4.0 → 3.4.2

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,66 +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) {
-      var siblingIndex = Array.from(parentElement.children).indexOf(element) + 1;
-      return "".concat(potentialSelector, ":nth-child(").concat(siblingIndex, ")");
-    }
-  }
-  return potentialSelector;
-}
 export default function getElementName(selectorConfig, element) {
   if (!(element instanceof HTMLElement)) {
     return 'error';
@@ -69,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/assets/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ResourceEntry } from "../resource-timing/common/types";
+import type { ResourceEntry } from '../resource-timing/common/types';
 export declare const cacheableTypes: string[];
 export declare const MEMORY_KEY = "mem";
 export declare const DISK_KEY = "disk";

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/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/assets/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ResourceEntry } from "../resource-timing/common/types";
+import type { ResourceEntry } from '../resource-timing/common/types';
 export declare const cacheableTypes: string[];
 export declare const MEMORY_KEY = "mem";
 export declare const DISK_KEY = "disk";

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;

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.4.0",
+	"version": "3.4.2",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -177,6 +177,12 @@
 		},
 		"platform_ufo_no_vc_on_aborted": {
 			"type": "boolean"
+		},
+		"platform_ufo_segment_list_mode": {
+			"type": "boolean"
+		},
+		"ufo_lcp": {
+			"type": "boolean"
 		}
 	}
 }