@atlaskit/react-ufo 3.14.0 → 3.14.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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/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';

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/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;
   }