@atlaskit/react-ufo 3.13.28 → 3.14.1

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

@@ -1,49 +1,11 @@
-import React, { useContext, useMemo } from 'react';
-import InteractionContext from '@atlaskit/interaction-context';
+import React from 'react';
+import UFOIgnoreHolds from '../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.
  */
-export default function UFOInteractionIgnore({
-  children,
-  ignore = true
-}) {
-  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);
+export default function UFOInteractionIgnore(props) {
+  return /*#__PURE__*/React.createElement(UFOIgnoreHolds, props);
 }

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

@@ -5,7 +5,7 @@ import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
 import { getPerformanceObserver } from '../interactions-performance-observer';
-import { initialisePressureObserver } from '../machine-utilisation';
+import { initialiseMemoryObserver, initialisePressureObserver } from '../machine-utilisation';
 import { getVCObserver } from '../vc';
 import scheduleIdleCallback from './schedule-idle-callback';
 let initialized = false;
@@ -77,6 +77,9 @@ export function init(analyticsWebClientAsync, config) {
   if (fg('platform_ufo_report_cpu_usage')) {
     initialisePressureObserver();
   }
+  if (fg('platform_ufo_report_memory_usage')) {
+    initialiseMemoryObserver();
+  }
   setUFOConfig(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var _config$experimentalI;

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

@@ -1,14 +1,24 @@
 const BUFFER_MAX_LENGTH = 1000; // ensure we don't blow up this buffer
 let pressureRecordBuffer = [];
 let pressureObserver = null;
+let memoryRecordBuffer = [];
+let memoryInterval;
 export function resetPressureRecordBuffer() {
   pressureRecordBuffer.length = 0;
 }
-export function removeOldBufferRecords(filter) {
+export function resetMemoryRecordBuffer() {
+  memoryRecordBuffer.length = 0;
+}
+export function removeOldPressureBufferRecords(filter) {
   pressureRecordBuffer = pressureRecordBuffer.filter(({
     time
   }) => time > filter);
 }
+export function removeOldMemoryBufferRecords(filter) {
+  memoryRecordBuffer = memoryRecordBuffer.filter(({
+    time
+  }) => time > filter);
+}
 export function createPressureStateReport(start, end) {
   try {
     // To differentiate between the API not available, vs no PressureRecords added
@@ -30,7 +40,7 @@ export function createPressureStateReport(start, end) {
       critical: 0
     });
     const pressureStateTotal = Object.values(pressureStateCount).reduce((total, count) => total + count) || 1;
-    removeOldBufferRecords(end);
+    removeOldPressureBufferRecords(end);
     return {
       count: pressureStateCount,
       percentage: {
@@ -44,23 +54,80 @@ 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;
+    }
+    const accumulatedMemoryUsage = memoryRecordBuffer.reduce((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
+    });
+    const 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 {
+    return null;
+  }
+}
 export function initialisePressureObserver() {
   try {
     if ('PressureObserver' in globalThis) {
-      var _pressureObserver$obs;
       pressureObserver = new PressureObserver(records => {
         if (pressureRecordBuffer.length + records.length <= BUFFER_MAX_LENGTH) {
           pressureRecordBuffer.push(...records);
         }
       });
-      (_pressureObserver$obs = pressureObserver.observe('cpu', {
+      pressureObserver.observe('cpu', {
         sampleInterval: 100
-      })) === null || _pressureObserver$obs === void 0 ? 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(() => {
+        // another check of `performance.memory` availability to satisfy typescript
+        if ('memory' in performance) {
+          const 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 {
+    /* do nothing, this is a best efforts metric */
+  }
+}
+export function disconnectMemoryObserver() {
+  clearInterval(memoryInterval);
+}
 export function disconnectPressureObserver() {
   var _pressureObserver;
   (_pressureObserver = pressureObserver) === null || _pressureObserver === void 0 ? void 0 : _pressureObserver.disconnect();

package/dist/es2019/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/es2019/segment/segment.js

@@ -20,7 +20,8 @@ const AsyncSegmentHighlight = /*#__PURE__*/lazy(() => import( /* webpackChunkNam
 export default function UFOSegment({
   name: segmentName,
   children,
-  mode = 'single'
+  mode = 'single',
+  type = 'first-party'
 }) {
   var _getConfig2;
   const parentContext = useContext(UFOInteractionContext);

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

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import UFOIgnoreHolds from '../ignore-holds';
+import UFOSegment from './segment';
+export function UFOThirdPartySegment(props) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  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/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -3,7 +3,16 @@ import AbstractVCCalculatorBase from '../abstract-base-vc-calculator';
 import isViewportEntryData from '../utils/is-viewport-entry-data';
 const ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize'];
 const REVISION_NO = 'fy25.03';
-const CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'mutation:attribute', 'layout-shift', 'window:event'];
+const getConsideredEntryTypes = () => {
+  const 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.
@@ -17,7 +26,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
     super(REVISION_NO);
   }
   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/es2019/vc/vc-observer-new/viewport-observer/index.js

@@ -5,6 +5,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;
@@ -86,7 +87,7 @@ export default class ViewportObserver {
         return this.mapVisibleNodeRects.get(n);
       });
       addedNodes.forEach(addedNodeRef => {
-        var _this$intersectionObs3;
+        var _this$intersectionObs4;
         const addedNode = addedNodeRef.deref();
         if (!addedNode) {
           return;
@@ -108,7 +109,17 @@ export default class ViewportObserver {
           (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
           return;
         }
-        (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+        const {
+          isWithinThirdPartySegment,
+          ignoredReason
+        } = checkThirdPartySegmentWithIgnoreReason(addedNode);
+        if (isWithinThirdPartySegment) {
+          var _this$intersectionObs3;
+          const assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
+          (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, assignedReason);
+          return;
+        }
+        (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
       });
     });
     _defineProperty(this, "handleAttributeMutation", ({
@@ -117,8 +128,8 @@ export default class ViewportObserver {
       oldValue,
       newValue
     }) => {
-      var _this$intersectionObs4;
-      (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(target, ({
+      var _this$intersectionObs5;
+      (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(target, ({
         target,
         rect
       }) => {
@@ -157,6 +168,21 @@ export default class ViewportObserver {
             }
           };
         }
+        const {
+          isWithinThirdPartySegment,
+          ignoredReason
+        } = checkThirdPartySegmentWithIgnoreReason(target);
+        if (isWithinThirdPartySegment) {
+          const assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
+          return {
+            type: assignedReason,
+            mutationData: {
+              attributeName,
+              oldValue,
+              newValue
+            }
+          };
+        }
         const lastElementRect = this.mapVisibleNodeRects.get(target);
         if (lastElementRect && sameRectSize(rect, lastElementRect)) {
           return {
@@ -239,12 +265,12 @@ export default class ViewportObserver {
     this.isStarted = true;
   }
   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 ? void 0 : _this$mutationObserve2.disconnect();
-    (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.disconnect();
+    (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.disconnect();
     (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
     this.isStarted = false;
   }

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

@@ -0,0 +1,71 @@
+// 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
+  const key = Object.keys(node).find(key => key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$'));
+  if (!key) {
+    return {
+      isWithin: false
+    };
+  }
+  const fiber = node[key];
+  if (!fiber) {
+    return {
+      isWithin: false
+    };
+  }
+
+  // Traverse up the fiber tree
+  let currentFiber = fiber;
+  let childProp;
+  while (currentFiber) {
+    let componentName;
+    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) {
+      const 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 {
+        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) {
+  const 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:${reason}`;
+}

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

@@ -23,7 +23,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';
@@ -799,7 +799,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,
@@ -814,6 +814,8 @@ function _createInteractionMetricsPayload() {
                 'experience:name': newUFOName
               }, 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)
               } : {}), 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/esm/ignore-holds/index.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 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(_ref) {
+  var children = _ref.children,
+    _ref$ignore = _ref.ignore,
+    ignore = _ref$ignore === void 0 ? true : _ref$ignore,
+    reason = _ref.reason;
+  var parentContext = useContext(InteractionContext);
+  var ignoredInteractionContext = 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.createElement(React.Fragment, null, kids);
+  }
+  return /*#__PURE__*/React.createElement(InteractionContext.Provider, {
+    value: ignoredInteractionContext
+  }, kids);
+}
+UFOIgnoreHolds.displayName = 'UFOIgnoreHolds';

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

@@ -1,51 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 React, { useContext, useMemo } from 'react';
-import InteractionContext from '@atlaskit/interaction-context';
+import React from 'react';
+import UFOIgnoreHolds from '../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.
  */
-export default function UFOInteractionIgnore(_ref) {
-  var children = _ref.children,
-    _ref$ignore = _ref.ignore,
-    ignore = _ref$ignore === void 0 ? true : _ref$ignore;
-  var parentContext = useContext(InteractionContext);
-  var ignoredInteractionContext = 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.createElement(React.Fragment, null, kids);
-  }
-  return /*#__PURE__*/React.createElement(InteractionContext.Provider, {
-    value: ignoredInteractionContext
-  }, kids);
+export default function UFOInteractionIgnore(props) {
+  return /*#__PURE__*/React.createElement(UFOIgnoreHolds, props);
 }

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

@@ -6,7 +6,7 @@ import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
 import { getPerformanceObserver } from '../interactions-performance-observer';
-import { initialisePressureObserver } from '../machine-utilisation';
+import { initialiseMemoryObserver, initialisePressureObserver } from '../machine-utilisation';
 import { getVCObserver } from '../vc';
 import scheduleIdleCallback from './schedule-idle-callback';
 var initialized = false;
@@ -78,6 +78,9 @@ export function init(analyticsWebClientAsync, config) {
   if (fg('platform_ufo_report_cpu_usage')) {
     initialisePressureObserver();
   }
+  if (fg('platform_ufo_report_memory_usage')) {
+    initialiseMemoryObserver();
+  }
   setUFOConfig(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var _config$experimentalI;