@atlaskit/react-ufo 3.13.28 → 3.14.1

package/dist/esm/machine-utilisation/index.js

@@ -2,24 +2,35 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var BUFFER_MAX_LENGTH = 1000; // ensure we don't blow up this buffer
 var pressureRecordBuffer = [];
 var pressureObserver = null;
+var memoryRecordBuffer = [];
+var memoryInterval;
 export function resetPressureRecordBuffer() {
   pressureRecordBuffer.length = 0;
 }
-export function removeOldBufferRecords(filter) {
+export function resetMemoryRecordBuffer() {
+  memoryRecordBuffer.length = 0;
+}
+export function removeOldPressureBufferRecords(filter) {
   pressureRecordBuffer = pressureRecordBuffer.filter(function (_ref) {
     var time = _ref.time;
     return time > filter;
   });
 }
+export function removeOldMemoryBufferRecords(filter) {
+  memoryRecordBuffer = memoryRecordBuffer.filter(function (_ref2) {
+    var time = _ref2.time;
+    return time > filter;
+  });
+}
 export function createPressureStateReport(start, end) {
   try {
     // To differentiate between the API not available, vs no PressureRecords added
     if (!('PressureObserver' in globalThis)) {
       return null;
     }
-    var pressureStateCount = pressureRecordBuffer.reduce(function (pressureReport, _ref2) {
-      var time = _ref2.time,
-        state = _ref2.state;
+    var pressureStateCount = pressureRecordBuffer.reduce(function (pressureReport, _ref3) {
+      var time = _ref3.time,
+        state = _ref3.state;
       if (time >= start && time <= end) {
         pressureReport[state] += 1;
       }
@@ -33,7 +44,7 @@ export function createPressureStateReport(start, end) {
     var pressureStateTotal = Object.values(pressureStateCount).reduce(function (total, count) {
       return total + count;
     }) || 1;
-    removeOldBufferRecords(end);
+    removeOldPressureBufferRecords(end);
     return {
       count: pressureStateCount,
       percentage: {
@@ -47,24 +58,81 @@ export function createPressureStateReport(start, end) {
     return null;
   }
 }
+function convertBytesToMegabytes(bytes) {
+  return Math.round(Math.round(bytes / (1024 * 1024) * 100) / 100);
+}
+export function createMemoryStateReport(start, end) {
+  try {
+    if (!('memory' in performance)) {
+      return null;
+    }
+    var accumulatedMemoryUsage = memoryRecordBuffer.reduce(function (acc, snapshot) {
+      if (snapshot.time >= start && snapshot.time <= end) {
+        acc.totalJSHeapSize += snapshot.totalJSHeapSize;
+        acc.usedJSHeapSize += snapshot.usedJSHeapSize;
+        acc.snapshotCount += 1;
+      }
+      return acc;
+    }, {
+      totalJSHeapSize: 0,
+      usedJSHeapSize: 0,
+      snapshotCount: 0
+    });
+    var memoryStateReport = {
+      jsHeapSizeLimitInMB: convertBytesToMegabytes(memoryRecordBuffer[0].jsHeapSizeLimit),
+      // just use the first record, since this value always remains the same over time
+      avgTotalJSHeapSizeInMB: convertBytesToMegabytes(accumulatedMemoryUsage.totalJSHeapSize / accumulatedMemoryUsage.snapshotCount),
+      avgUsedJSHeapSizeInMB: convertBytesToMegabytes(accumulatedMemoryUsage.usedJSHeapSize / accumulatedMemoryUsage.snapshotCount)
+    };
+    removeOldMemoryBufferRecords(end);
+    return memoryStateReport;
+  } catch (_unused2) {
+    return null;
+  }
+}
 export function initialisePressureObserver() {
   try {
     if ('PressureObserver' in globalThis) {
-      var _pressureObserver$obs;
       pressureObserver = new PressureObserver(function (records) {
         if (pressureRecordBuffer.length + records.length <= BUFFER_MAX_LENGTH) {
           var _pressureRecordBuffer;
           (_pressureRecordBuffer = pressureRecordBuffer).push.apply(_pressureRecordBuffer, _toConsumableArray(records));
         }
       });
-      (_pressureObserver$obs = pressureObserver.observe('cpu', {
+      pressureObserver.observe('cpu', {
         sampleInterval: 100
-      })) === null || _pressureObserver$obs === void 0 || _pressureObserver$obs.catch();
+      }).catch();
     }
   } catch (err) {
     /* do nothing, this is a best efforts metric */
   }
 }
+export function initialiseMemoryObserver() {
+  try {
+    // only set up the interval if `performance.memory` is available in the browser
+    if ('memory' in performance) {
+      memoryInterval = setInterval(function () {
+        // another check of `performance.memory` availability to satisfy typescript
+        if ('memory' in performance) {
+          var memory = performance.memory;
+          if (memoryRecordBuffer.length <= BUFFER_MAX_LENGTH) {
+            memoryRecordBuffer.push({
+              time: performance.now(),
+              jsHeapSizeLimit: memory.jsHeapSizeLimit,
+              totalJSHeapSize: memory.totalJSHeapSize,
+              usedJSHeapSize: memory.usedJSHeapSize
+            });
+          }
+        }
+      }, 100);
+    }
+  } catch (_unused3) {
+    /* do nothing, this is a best efforts metric */
+  }
+}
+export function disconnectMemoryObserver() {
+  clearInterval(memoryInterval);
+}
 export function disconnectPressureObserver() {
   var _pressureObserver;
   (_pressureObserver = pressureObserver) === null || _pressureObserver === void 0 || _pressureObserver.disconnect();

package/dist/esm/segment/index.js

@@ -1,2 +1,3 @@
 import UFOSegment from './segment';
-export default UFOSegment;
+export default UFOSegment;
+export { UFOThirdPartySegment } from './third-party-segment';

package/dist/esm/segment/segment.js

@@ -30,7 +30,9 @@ export default function UFOSegment(_ref) {
   var segmentName = _ref.name,
     children = _ref.children,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'single' : _ref$mode;
+    mode = _ref$mode === void 0 ? 'single' : _ref$mode,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'first-party' : _ref$type;
   var parentContext = useContext(UFOInteractionContext);
   var segmentIdMap = useMemo(function () {
     if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {

package/dist/esm/segment/third-party-segment.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import UFOIgnoreHolds from '../ignore-holds';
+import UFOSegment from './segment';
+export function UFOThirdPartySegment(props) {
+  var children = props.children,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(UFOSegment, _extends({
+    type: "third-party"
+  }, otherProps), /*#__PURE__*/React.createElement(UFOIgnoreHolds, {
+    ignore: fg('platform_ufo_exclude_3p_elements_from_ttai'),
+    reason: "third-party-element"
+  }, children));
+}
+UFOThirdPartySegment.displayName = 'UFOThirdPartySegment';

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

@@ -10,7 +10,16 @@ import AbstractVCCalculatorBase from '../abstract-base-vc-calculator';
 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'];
+var getConsideredEntryTypes = function getConsideredEntryTypes() {
+  var entryTypes = ['mutation:child-element', 'mutation:element', 'mutation:attribute', 'layout-shift', 'window:event'];
+
+  // If not exclude 3p elements from ttvc,
+  // including the tags into the ConsideredEntryTypes so that it won't be ignored for TTVC calculation
+  if (!fg('platform_ufo_exclude_3p_elements_from_ttvc')) {
+    entryTypes.push('mutation:third-party-element');
+  }
+  return entryTypes;
+};
 
 // TODO: AFO-3523
 // Those are the attributes we have found when testing the 'fy25.03' manually.
@@ -28,7 +37,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
   return _createClass(VCCalculator_FY25_03, [{
     key: "isEntryIncluded",
     value: function isEntryIncluded(entry) {
-      if (!CONSIDERED_ENTRY_TYPE.includes(entry.data.type)) {
+      if (!getConsideredEntryTypes().includes(entry.data.type)) {
         return false;
       }
       if (entry.data.type === 'mutation:attribute') {

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

@@ -10,6 +10,7 @@ import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placehol
 import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
+import { checkThirdPartySegmentWithIgnoreReason, createMutationTypeWithIgnoredReason } from './utils/get-component-name-and-child-props';
 function isElementVisible(element) {
   if (!(element instanceof HTMLElement)) {
     return true;
@@ -93,7 +94,7 @@ var ViewportObserver = /*#__PURE__*/function () {
         return _this.mapVisibleNodeRects.get(n);
       });
       addedNodes.forEach(function (addedNodeRef) {
-        var _this$intersectionObs3;
+        var _this$intersectionObs4;
         var addedNode = addedNodeRef.deref();
         if (!addedNode) {
           return;
@@ -115,16 +116,25 @@ var ViewportObserver = /*#__PURE__*/function () {
           (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
           return;
         }
-        (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+        var _checkThirdPartySegme = checkThirdPartySegmentWithIgnoreReason(addedNode),
+          isWithinThirdPartySegment = _checkThirdPartySegme.isWithinThirdPartySegment,
+          ignoredReason = _checkThirdPartySegme.ignoredReason;
+        if (isWithinThirdPartySegment) {
+          var _this$intersectionObs3;
+          var assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
+          (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, assignedReason);
+          return;
+        }
+        (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
       });
     });
     _defineProperty(this, "handleAttributeMutation", function (_ref5) {
-      var _this$intersectionObs4;
+      var _this$intersectionObs5;
       var target = _ref5.target,
         attributeName = _ref5.attributeName,
         oldValue = _ref5.oldValue,
         newValue = _ref5.newValue;
-      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
+      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(target, function (_ref6) {
         var target = _ref6.target,
           rect = _ref6.rect;
         if (isContainedWithinMediaWrapper(target)) {
@@ -162,6 +172,20 @@ var ViewportObserver = /*#__PURE__*/function () {
             }
           };
         }
+        var _checkThirdPartySegme2 = checkThirdPartySegmentWithIgnoreReason(target),
+          isWithinThirdPartySegment = _checkThirdPartySegme2.isWithinThirdPartySegment,
+          ignoredReason = _checkThirdPartySegme2.ignoredReason;
+        if (isWithinThirdPartySegment) {
+          var assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
+          return {
+            type: assignedReason,
+            mutationData: {
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
+            }
+          };
+        }
         var lastElementRect = _this.mapVisibleNodeRects.get(target);
         if (lastElementRect && sameRectSize(rect, lastElementRect)) {
           return {
@@ -258,12 +282,12 @@ var ViewportObserver = /*#__PURE__*/function () {
   }, {
     key: "stop",
     value: function stop() {
-      var _this$mutationObserve2, _this$intersectionObs5, _this$performanceObse2;
+      var _this$mutationObserve2, _this$intersectionObs6, _this$performanceObse2;
       if (!this.isStarted) {
         return;
       }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
-      (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.disconnect();
+      (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
       this.isStarted = false;
     }

package/dist/esm/vc/vc-observer-new/viewport-observer/utils/get-component-name-and-child-props.js

@@ -0,0 +1,76 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _typeof from "@babel/runtime/helpers/typeof";
+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; }
+// Using the React Fiber tree to traverse up the DOM and check if a node is within a specific component
+// and extract child component props if needed.
+export function checkWithinComponentAndExtractChildProps(node, targetComponentName, childComponentConfig) {
+  // Get the React fiber from the DOM node
+  var key = Object.keys(node).find(function (key) {
+    return key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$');
+  });
+  if (!key) {
+    return {
+      isWithin: false
+    };
+  }
+  var fiber = node[key];
+  if (!fiber) {
+    return {
+      isWithin: false
+    };
+  }
+
+  // Traverse up the fiber tree
+  var currentFiber = fiber;
+  var childProp;
+  while (currentFiber) {
+    var componentName = void 0;
+    if (currentFiber.type) {
+      if (typeof currentFiber.type === 'function') {
+        componentName = currentFiber.type.displayName || currentFiber.type.name;
+      } else if (_typeof(currentFiber.type) === 'object' && (currentFiber.type.displayName || currentFiber.type.name)) {
+        componentName = currentFiber.type.displayName || currentFiber.type.name;
+      }
+    }
+
+    // Check if this is a child component we're looking for
+    if (childComponentConfig && componentName === childComponentConfig.componentName) {
+      var props = currentFiber.memoizedProps || currentFiber.pendingProps;
+      if (props && props[childComponentConfig.propName] !== undefined) {
+        // Overwrite with the nearest child prop (closest to the target component)
+        childProp = childComponentConfig.extractValue ? childComponentConfig.extractValue(props) : props[childComponentConfig.propName];
+      }
+    }
+
+    // Check if we found the target component
+    if (componentName === targetComponentName) {
+      return _objectSpread({
+        isWithin: true
+      }, childComponentConfig && {
+        childProp: childProp
+      });
+    }
+    currentFiber = currentFiber.return;
+  }
+  return {
+    isWithin: false
+  };
+}
+
+// Check if the node is within a UFOThirdPartySegment and extract any UFOIgnoreHolds reason
+export function checkThirdPartySegmentWithIgnoreReason(node) {
+  var result = checkWithinComponentAndExtractChildProps(node, 'UFOThirdPartySegment', {
+    componentName: 'UFOIgnoreHolds',
+    propName: 'reason'
+  });
+  return {
+    isWithinThirdPartySegment: result.isWithin,
+    ignoredReason: result.childProp
+  };
+}
+
+// Helper function to create mutation type from UFOIgnoreHoldsReason
+export function createMutationTypeWithIgnoredReason(reason) {
+  return "mutation:".concat(reason);
+}