@atlaskit/react-ufo 3.13.28 → 3.14.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.14.1
+
+### Patch Changes
+
+- [#175174](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175174)
+  [`56303bfa2ee79`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/56303bfa2ee79) -
+  Add new component UFOThirdPartySegment to react-ufo
+
+## 3.14.0
+
+### Minor Changes
+
+- [#176314](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176314)
+  [`9c32e96190532`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9c32e96190532) -
+  report memory usage via UFO
+
 ## 3.13.28
 
 ### Patch Changes

package/dist/cjs/create-payload/index.js

@@ -809,7 +809,7 @@ function _createInteractionMetricsPayload() {
             source: 'measured',
             tags: ['observability'],
             attributes: {
-              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                 // basic
                 'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
                 'event:product': config.product,
@@ -824,6 +824,8 @@ function _createInteractionMetricsPayload() {
                 'experience:name': newUFOName
               }, (0, _platformFeatureFlags.fg)('platform_ufo_report_cpu_usage') ? {
                 'event:cpu:usage': (0, _machineUtilisation.createPressureStateReport)(interaction.start, interaction.end)
+              } : {}), (0, _platformFeatureFlags.fg)('platform_ufo_report_memory_usage') ? {
+                'event:memory:usage': (0, _machineUtilisation.createMemoryStateReport)(interaction.start, interaction.end)
               } : {}), getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
                 interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',

package/dist/cjs/ignore-holds/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UFOIgnoreHolds;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * Prevent a subtree from holding up an interaction
+ * Use this when you have a component which loads in late, but
+ * isn't considered to be a breach of SLO
+ *
+ * ```js
+ * <App>
+ *   <Main />
+ *   <Sidebar>
+ *     <UFOIgnoreHolds>
+ *       <InsightsButton />
+ *     </UFOIgnoreHolds>
+ *   </Sidebar>
+ * </App>
+ * ```
+ *
+ * Has an `ignore` prop, to allow you to use it conditionally
+ * Has a `reason` prop, to specify why the hold is being ignored
+ */
+function UFOIgnoreHolds(_ref) {
+  var children = _ref.children,
+    _ref$ignore = _ref.ignore,
+    ignore = _ref$ignore === void 0 ? true : _ref$ignore,
+    reason = _ref.reason;
+  var parentContext = (0, _react.useContext)(_interactionContext.default);
+  var ignoredInteractionContext = (0, _react.useMemo)(function () {
+    if (!parentContext) {
+      return null;
+    }
+    return _objectSpread(_objectSpread({}, parentContext), {}, {
+      hold: function hold() {
+        if (!ignore) {
+          return parentContext.hold.apply(parentContext, arguments);
+        }
+      }
+    });
+  }, [parentContext, ignore]);
+
+  // react-18: Use children directly
+  var kids = children != null ? children : null;
+  if (!ignoredInteractionContext) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, kids);
+  }
+  return /*#__PURE__*/_react.default.createElement(_interactionContext.default.Provider, {
+    value: ignoredInteractionContext
+  }, kids);
+}
+UFOIgnoreHolds.displayName = 'UFOIgnoreHolds';

package/dist/cjs/interaction-ignore/ufo-interaction-ignore.js

@@ -1,59 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = UFOInteractionIgnore;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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) { (0, _defineProperty2.default)(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; }
+var _react = _interopRequireDefault(require("react"));
+var _ignoreHolds = _interopRequireDefault(require("../ignore-holds"));
 /**
- * Prevent a subtree from holding up an interaction
- * Use this when you have a component which loads in late, but
- * isn't considered to be a breach of SLO
- *
- * ```js
- * <App>
- *   <Main />
- *   <Sidebar>
- *     <UFOInteractionIgnore>
- *       <InsightsButton />
- *     </UFOInteractionIgnore>
- *   </Sidebar>
- * </App>
- * ```
- *
- * Has an `ignore` prop, to allow you to use it conditionally
+ * Legacy wrapper component that delegates to `UFOIgnoreHolds`.
+ * Use `UFOIgnoreHolds` instead for new implementations.
+ * This component is maintained for backward compatibility only.
  */
-function UFOInteractionIgnore(_ref) {
-  var children = _ref.children,
-    _ref$ignore = _ref.ignore,
-    ignore = _ref$ignore === void 0 ? true : _ref$ignore;
-  var parentContext = (0, _react.useContext)(_interactionContext.default);
-  var ignoredInteractionContext = (0, _react.useMemo)(function () {
-    if (!parentContext) {
-      return null;
-    }
-    return _objectSpread(_objectSpread({}, parentContext), {}, {
-      hold: function hold() {
-        if (!ignore) {
-          return parentContext.hold.apply(parentContext, arguments);
-        }
-      }
-    });
-  }, [parentContext, ignore]);
-
-  // react-18: Use children directly
-  var kids = children != null ? children : null;
-  if (!ignoredInteractionContext) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, kids);
-  }
-  return /*#__PURE__*/_react.default.createElement(_interactionContext.default.Provider, {
-    value: ignoredInteractionContext
-  }, kids);
+function UFOInteractionIgnore(props) {
+  return /*#__PURE__*/_react.default.createElement(_ignoreHolds.default, props);
 }

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

@@ -87,6 +87,9 @@ function init(analyticsWebClientAsync, config) {
   if ((0, _platformFeatureFlags.fg)('platform_ufo_report_cpu_usage')) {
     (0, _machineUtilisation.initialisePressureObserver)();
   }
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_report_memory_usage')) {
+    (0, _machineUtilisation.initialiseMemoryObserver)();
+  }
   (0, _config.setUFOConfig)(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var _config$experimentalI;

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

@@ -4,33 +4,49 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createMemoryStateReport = createMemoryStateReport;
 exports.createPressureStateReport = createPressureStateReport;
+exports.disconnectMemoryObserver = disconnectMemoryObserver;
 exports.disconnectPressureObserver = disconnectPressureObserver;
+exports.initialiseMemoryObserver = initialiseMemoryObserver;
 exports.initialisePressureObserver = initialisePressureObserver;
-exports.removeOldBufferRecords = removeOldBufferRecords;
+exports.removeOldMemoryBufferRecords = removeOldMemoryBufferRecords;
+exports.removeOldPressureBufferRecords = removeOldPressureBufferRecords;
+exports.resetMemoryRecordBuffer = resetMemoryRecordBuffer;
 exports.resetPressureRecordBuffer = resetPressureRecordBuffer;
 var _toConsumableArray2 = _interopRequireDefault(require("@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;
 function resetPressureRecordBuffer() {
   pressureRecordBuffer.length = 0;
 }
-function removeOldBufferRecords(filter) {
+function resetMemoryRecordBuffer() {
+  memoryRecordBuffer.length = 0;
+}
+function removeOldPressureBufferRecords(filter) {
   pressureRecordBuffer = pressureRecordBuffer.filter(function (_ref) {
     var time = _ref.time;
     return time > filter;
   });
 }
+function removeOldMemoryBufferRecords(filter) {
+  memoryRecordBuffer = memoryRecordBuffer.filter(function (_ref2) {
+    var time = _ref2.time;
+    return time > filter;
+  });
+}
 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;
       }
@@ -44,7 +60,7 @@ 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: {
@@ -58,24 +74,81 @@ function createPressureStateReport(start, end) {
     return null;
   }
 }
+function convertBytesToMegabytes(bytes) {
+  return Math.round(Math.round(bytes / (1024 * 1024) * 100) / 100);
+}
+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;
+  }
+}
 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, (0, _toConsumableArray2.default)(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 */
   }
 }
+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 */
+  }
+}
+function disconnectMemoryObserver() {
+  clearInterval(memoryInterval);
+}
 function disconnectPressureObserver() {
   var _pressureObserver;
   (_pressureObserver = pressureObserver) === null || _pressureObserver === void 0 || _pressureObserver.disconnect();

package/dist/cjs/segment/index.js

@@ -4,6 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "UFOThirdPartySegment", {
+  enumerable: true,
+  get: function get() {
+    return _thirdPartySegment.UFOThirdPartySegment;
+  }
+});
 exports.default = void 0;
 var _segment = _interopRequireDefault(require("./segment"));
+var _thirdPartySegment = require("./third-party-segment");
 var _default = exports.default = _segment.default;

package/dist/cjs/segment/segment.js

@@ -41,7 +41,9 @@ 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 = (0, _react.useContext)(_interactionContext.default);
   var segmentIdMap = (0, _react.useMemo)(function () {
     if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UFOThirdPartySegment = UFOThirdPartySegment;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ignoreHolds = _interopRequireDefault(require("../ignore-holds"));
+var _segment = _interopRequireDefault(require("./segment"));
+var _excluded = ["children"];
+function UFOThirdPartySegment(props) {
+  var children = props.children,
+    otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_segment.default, (0, _extends2.default)({
+    type: "third-party"
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_ignoreHolds.default, {
+    ignore: (0, _platformFeatureFlags.fg)('platform_ufo_exclude_3p_elements_from_ttai'),
+    reason: "third-party-element"
+  }, children));
+}
+UFOThirdPartySegment.displayName = 'UFOThirdPartySegment';

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

@@ -17,7 +17,16 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0,
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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 (!(0, _platformFeatureFlags.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.
@@ -35,7 +44,7 @@ var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCC
   return (0, _createClass2.default)(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/cjs/vc/vc-observer-new/viewport-observer/index.js

@@ -14,6 +14,7 @@ var _rllPlaceholders = require("../../vc-observer/observers/rll-placeholders");
 var _intersectionObserver = require("./intersection-observer");
 var _mutationObserver = _interopRequireDefault(require("./mutation-observer"));
 var _performanceObserver = _interopRequireDefault(require("./performance-observer"));
+var _getComponentNameAndChildProps = require("./utils/get-component-name-and-child-props");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -100,7 +101,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
         return _this.mapVisibleNodeRects.get(n);
       });
       addedNodes.forEach(function (addedNodeRef) {
-        var _this$intersectionObs3;
+        var _this$intersectionObs4;
         var addedNode = addedNodeRef.deref();
         if (!addedNode) {
           return;
@@ -122,16 +123,25 @@ var ViewportObserver = exports.default = /*#__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 = (0, _getComponentNameAndChildProps.checkThirdPartySegmentWithIgnoreReason)(addedNode),
+          isWithinThirdPartySegment = _checkThirdPartySegme.isWithinThirdPartySegment,
+          ignoredReason = _checkThirdPartySegme.ignoredReason;
+        if (isWithinThirdPartySegment) {
+          var _this$intersectionObs3;
+          var assignedReason = (0, _getComponentNameAndChildProps.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));
       });
     });
     (0, _defineProperty2.default)(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 ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
@@ -169,6 +179,20 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             }
           };
         }
+        var _checkThirdPartySegme2 = (0, _getComponentNameAndChildProps.checkThirdPartySegmentWithIgnoreReason)(target),
+          isWithinThirdPartySegment = _checkThirdPartySegme2.isWithinThirdPartySegment,
+          ignoredReason = _checkThirdPartySegme2.ignoredReason;
+        if (isWithinThirdPartySegment) {
+          var assignedReason = (0, _getComponentNameAndChildProps.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 {
@@ -265,12 +289,12 @@ var ViewportObserver = exports.default = /*#__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/cjs/vc/vc-observer-new/viewport-observer/utils/get-component-name-and-child-props.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkThirdPartySegmentWithIgnoreReason = checkThirdPartySegmentWithIgnoreReason;
+exports.checkWithinComponentAndExtractChildProps = checkWithinComponentAndExtractChildProps;
+exports.createMutationTypeWithIgnoredReason = createMutationTypeWithIgnoredReason;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(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.
+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 ((0, _typeof2.default)(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
+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
+function createMutationTypeWithIgnoredReason(reason) {
+  return "mutation:".concat(reason);
+}

package/dist/es2019/create-payload/index.js

@@ -11,7 +11,7 @@ import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
 import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
-import { createPressureStateReport } from '../machine-utilisation';
+import { createMemoryStateReport, createPressureStateReport } from '../machine-utilisation';
 import * as resourceTiming from '../resource-timing';
 import { filterResourceTimings } from '../resource-timing/common/utils/resource-timing-buffer';
 import { roundEpsilon } from '../round-number';
@@ -803,6 +803,9 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
         ...(fg('platform_ufo_report_cpu_usage') ? {
           'event:cpu:usage': createPressureStateReport(interaction.start, interaction.end)
         } : {}),
+        ...(fg('platform_ufo_report_memory_usage') ? {
+          'event:memory:usage': createMemoryStateReport(interaction.start, interaction.end)
+        } : {}),
         // root
         ...getBrowserMetadata(),
         ...getSSRProperties(type),

package/dist/es2019/ignore-holds/index.js

@@ -0,0 +1,51 @@
+import React, { useContext, useMemo } from 'react';
+import InteractionContext from '@atlaskit/interaction-context';
+/**
+ * Prevent a subtree from holding up an interaction
+ * Use this when you have a component which loads in late, but
+ * isn't considered to be a breach of SLO
+ *
+ * ```js
+ * <App>
+ *   <Main />
+ *   <Sidebar>
+ *     <UFOIgnoreHolds>
+ *       <InsightsButton />
+ *     </UFOIgnoreHolds>
+ *   </Sidebar>
+ * </App>
+ * ```
+ *
+ * Has an `ignore` prop, to allow you to use it conditionally
+ * Has a `reason` prop, to specify why the hold is being ignored
+ */
+export default function UFOIgnoreHolds({
+  children,
+  ignore = true,
+  reason
+}) {
+  const parentContext = useContext(InteractionContext);
+  const ignoredInteractionContext = useMemo(() => {
+    if (!parentContext) {
+      return null;
+    }
+    return {
+      ...parentContext,
+      hold(...args) {
+        if (!ignore) {
+          return parentContext.hold(...args);
+        }
+      }
+    };
+  }, [parentContext, ignore]);
+
+  // react-18: Use children directly
+  const kids = children != null ? children : null;
+  if (!ignoredInteractionContext) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, kids);
+  }
+  return /*#__PURE__*/React.createElement(InteractionContext.Provider, {
+    value: ignoredInteractionContext
+  }, kids);
+}
+UFOIgnoreHolds.displayName = 'UFOIgnoreHolds';