@atlaskit/react-ufo 3.14.0 → 3.14.2

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/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/segment/index.js

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

package/dist/esm/segment/segment.js

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

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

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

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

@@ -10,7 +10,16 @@ import AbstractVCCalculatorBase from '../abstract-base-vc-calculator';
 import isViewportEntryData from '../utils/is-viewport-entry-data';
 var ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize'];
 var REVISION_NO = 'fy25.03';
-var CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'mutation:attribute', 'layout-shift', 'window:event'];
+var getConsideredEntryTypes = function getConsideredEntryTypes() {
+  var entryTypes = ['mutation:child-element', 'mutation:element', 'mutation:attribute', 'layout-shift', 'window:event'];
+
+  // If not exclude 3p elements from ttvc,
+  // including the tags into the ConsideredEntryTypes so that it won't be ignored for TTVC calculation
+  if (!fg('platform_ufo_exclude_3p_elements_from_ttvc')) {
+    entryTypes.push('mutation:third-party-element');
+  }
+  return entryTypes;
+};
 
 // TODO: AFO-3523
 // Those are the attributes we have found when testing the 'fy25.03' manually.
@@ -28,7 +37,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
   return _createClass(VCCalculator_FY25_03, [{
     key: "isEntryIncluded",
     value: function isEntryIncluded(entry) {
-      if (!CONSIDERED_ENTRY_TYPE.includes(entry.data.type)) {
+      if (!getConsideredEntryTypes().includes(entry.data.type)) {
         return false;
       }
       if (entry.data.type === 'mutation:attribute') {
@@ -37,10 +46,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
         if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
           return false;
         }
-        if (attributeName === 'data-aui-version' && fg('platform_ufo_filter_out_aui_attribute_changes')) {
-          return false;
-        }
-        if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || (attributeName === 'data-renderer-start-pos' || attributeName === 'data-table-local-id' || attributeName === 'spellcheck') && fg('platform_ufo_ignore_extra_attributes') || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
+        if (attributeName === 'data-aui-version' || attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || (attributeName === 'data-renderer-start-pos' || attributeName === 'data-table-local-id' || attributeName === 'spellcheck') && fg('platform_ufo_ignore_extra_attributes') || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
           return false;
         }
         return true;

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

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

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

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

package/dist/types/ignore-holds/index.d.ts

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react';
+export type UFOIgnoreHoldsReason = 'third-party-element';
+export type UFOIgnoreHoldsProps = {
+    children?: ReactNode;
+    ignore?: boolean;
+    reason?: UFOIgnoreHoldsReason;
+};
+/**
+ * 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
+ */
+declare function UFOIgnoreHolds({ children, ignore, reason }: UFOIgnoreHoldsProps): React.JSX.Element;
+declare namespace UFOIgnoreHolds {
+    var displayName: string;
+}
+export default UFOIgnoreHolds;

package/dist/types/interaction-ignore/ufo-interaction-ignore.d.ts

@@ -1,23 +1,8 @@
-import React, { type ReactNode } from 'react';
+import React from 'react';
+import { UFOIgnoreHoldsProps } 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, }: {
-    children?: ReactNode;
-    ignore?: boolean;
-}): React.JSX.Element;
+export default function UFOInteractionIgnore(props: UFOIgnoreHoldsProps): React.JSX.Element;

package/dist/types/segment/index.d.ts

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

package/dist/types/segment/segment.d.ts

@@ -1,11 +1,13 @@
 import React, { type ReactNode } from 'react';
-type Props = {
+export type UFOSegmentType = 'third-party' | 'first-party';
+export type Props = {
     name: string;
     children: ReactNode;
     mode?: 'list' | 'single';
+    type?: UFOSegmentType;
 };
 /** A portion of the page we apply measurement to */
-declare function UFOSegment({ name: segmentName, children, mode }: Props): React.JSX.Element;
+declare function UFOSegment({ name: segmentName, children, mode, type, }: Props): React.JSX.Element;
 declare namespace UFOSegment {
     var displayName: string;
 }

package/dist/types/segment/third-party-segment.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Props as SegmentProps } from './segment';
+export declare function UFOThirdPartySegment(props: Omit<SegmentProps, 'type'>): React.JSX.Element;
+export declare namespace UFOThirdPartySegment {
+    var displayName: string;
+}

package/dist/types/vc/vc-observer-new/types.d.ts

@@ -1,5 +1,5 @@
 import type { ObservedWindowEvent } from './window-event-observer';
-export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'layout-shift' | 'window:event' | 'unknown';
+export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'layout-shift' | 'window:event' | 'unknown';
 export type ViewportEntryData = {
     readonly type: VCObserverEntryType;
     readonly elementName: string;

package/dist/types/vc/vc-observer-new/viewport-observer/utils/get-component-name-and-child-props.d.ts

@@ -0,0 +1,15 @@
+import { UFOIgnoreHoldsReason } from '../../../../ignore-holds';
+import { VCObserverEntryType } from '../../types';
+export declare function checkWithinComponentAndExtractChildProps<T = string>(node: HTMLElement, targetComponentName: string, childComponentConfig?: {
+    componentName: string;
+    propName: string;
+    extractValue?: (props: any) => T;
+}): {
+    isWithin: boolean;
+    childProp?: T;
+};
+export declare function checkThirdPartySegmentWithIgnoreReason(node: HTMLElement): {
+    isWithinThirdPartySegment: boolean;
+    ignoredReason?: UFOIgnoreHoldsReason;
+};
+export declare function createMutationTypeWithIgnoredReason(reason: UFOIgnoreHoldsReason): VCObserverEntryType;

package/dist/types-ts4.5/ignore-holds/index.d.ts

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react';
+export type UFOIgnoreHoldsReason = 'third-party-element';
+export type UFOIgnoreHoldsProps = {
+    children?: ReactNode;
+    ignore?: boolean;
+    reason?: UFOIgnoreHoldsReason;
+};
+/**
+ * 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
+ */
+declare function UFOIgnoreHolds({ children, ignore, reason }: UFOIgnoreHoldsProps): React.JSX.Element;
+declare namespace UFOIgnoreHolds {
+    var displayName: string;
+}
+export default UFOIgnoreHolds;