@atlaskit/react-ufo 4.0.3 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.1.0
+
+### Minor Changes
+
+- [#185569](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185569)
+  [`1c7b682d3bd6a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1c7b682d3bd6a) -
+  Adds UFOCustomCohortData component and addUFOCustomCohortData function to separate cohorting data
+  (important for analytics) from general debugging data.
+
 ## 4.0.3
 
 ### Patch Changes

package/custom-cohort-data/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/react-ufo/custom-cohort-data",
+  "main": "../dist/cjs/custom-cohort-data/index.js",
+  "module": "../dist/esm/custom-cohort-data/index.js",
+  "module:es2019": "../dist/es2019/custom-cohort-data/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/custom-cohort-data/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/custom-cohort-data/index.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/custom-cohort-data/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addUFOCustomCohortData = addUFOCustomCohortData;
+exports.default = UFOCustomCohortData;
+var _react = require("react");
+var _interactionContext = _interopRequireDefault(require("../interaction-context"));
+var _interactionIdContext = require("../interaction-id-context");
+var _interactionMetrics = require("../interaction-metrics");
+function UFOCustomCohortData(_ref) {
+  var dataKey = _ref.dataKey,
+    value = _ref.value;
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  (0, _react.useMemo)(function () {
+    if (!interactionContext) {
+      return;
+    }
+    var interactionId = (0, _interactionIdContext.getInteractionId)();
+    var currentInteractionId = interactionId.current;
+    if (!currentInteractionId) {
+      return;
+    }
+    (0, _interactionMetrics.addCohortingCustomData)(currentInteractionId, dataKey, value);
+  }, [dataKey, value, interactionContext]);
+  return null;
+}
+function addUFOCustomCohortData(key, value) {
+  var interactionId = (0, _interactionIdContext.getInteractionId)();
+  var currentInteractionId = interactionId.current;
+  if (!currentInteractionId) {
+    return;
+  }
+  (0, _interactionMetrics.addCohortingCustomData)(currentInteractionId, key, value);
+}

package/dist/cjs/custom-cohort-data/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -17,7 +17,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");
+var _checkWithinComponentAndExtractChildProps = _interopRequireDefault(require("./utils/check-within-component-and-extract-child-props"));
 var _isInVcIgnoreIfNoLayoutShiftMarker = _interopRequireDefault(require("./utils/is-in-vc-ignore-if-no-layout-shift-marker"));
 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; } }
@@ -125,7 +125,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
               _context2.prev = 4;
               _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
                 var _this$intersectionObs8;
-                var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$intersectionObs3, _result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, isNoLsMarkerEnabled, _this$intersectionObs5, _this$intersectionObs6, _checkThirdPartySegme, isWithinThirdPartySegment, ignoredReason, _this$intersectionObs7, assignedReason;
+                var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$intersectionObs3, _result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, isNoLsMarkerEnabled, _this$intersectionObs5, _this$intersectionObs6, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs7;
                 return _regenerator.default.wrap(function _loop$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
@@ -235,17 +235,16 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
                       (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
                       return _context.abrupt("return", 0);
                     case 45:
-                      _checkThirdPartySegme = (0, _getComponentNameAndChildProps.checkThirdPartySegmentWithIgnoreReason)(addedNode), isWithinThirdPartySegment = _checkThirdPartySegme.isWithinThirdPartySegment, ignoredReason = _checkThirdPartySegme.ignoredReason;
+                      _checkWithinComponent = (0, _checkWithinComponentAndExtractChildProps.default)(addedNode, 'UFOThirdPartySegment'), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
                       if (!isWithinThirdPartySegment) {
-                        _context.next = 50;
+                        _context.next = 49;
                         break;
                       }
-                      assignedReason = (0, _getComponentNameAndChildProps.createMutationTypeWithIgnoredReason)(ignoredReason || 'third-party-element');
-                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, assignedReason);
+                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
                       return _context.abrupt("return", 0);
-                    case 50:
+                    case 49:
                       (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
-                    case 51:
+                    case 50:
                     case "end":
                       return _context.stop();
                   }
@@ -333,13 +332,11 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             }
           };
         }
-        var _checkThirdPartySegme2 = (0, _getComponentNameAndChildProps.checkThirdPartySegmentWithIgnoreReason)(target),
-          isWithinThirdPartySegment = _checkThirdPartySegme2.isWithinThirdPartySegment,
-          ignoredReason = _checkThirdPartySegme2.ignoredReason;
+        var _checkWithinComponent2 = (0, _checkWithinComponentAndExtractChildProps.default)(target, 'UFOThirdPartySegment'),
+          isWithinThirdPartySegment = _checkWithinComponent2.isWithin;
         if (isWithinThirdPartySegment) {
-          var assignedReason = (0, _getComponentNameAndChildProps.createMutationTypeWithIgnoredReason)(ignoredReason || 'third-party-element');
           return {
-            type: assignedReason,
+            type: 'mutation:third-party-element',
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/{get-component-name-and-child-props.js → check-within-component-and-extract-child-props.js}

@@ -4,22 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkThirdPartySegmentWithIgnoreReason = checkThirdPartySegmentWithIgnoreReason;
-exports.checkWithinComponentAndExtractChildProps = checkWithinComponentAndExtractChildProps;
-exports.createMutationTypeWithIgnoredReason = createMutationTypeWithIgnoredReason;
+exports.default = checkWithinComponentAndExtractChildProps;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _findReactFiber = _interopRequireDefault(require("./find-react-fiber"));
+var _getComponentName = _interopRequireDefault(require("./get-component-name"));
 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; }
-// Helper function to find React fiber on an element
-var findReactFiber = function findReactFiber(element) {
-  var key = Object.keys(element).find(function (key) {
-    return key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$');
-  });
-  return key ? element[key] : null;
-};
-
 // 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) {
@@ -28,13 +19,13 @@ function checkWithinComponentAndExtractChildProps(node, targetComponentName, chi
     // Walk up the DOM tree to find React fiber (handles non-React-rendered elements)
     var currentElement = node;
     while (currentElement && !fiber) {
-      fiber = findReactFiber(currentElement);
+      fiber = (0, _findReactFiber.default)(currentElement);
       if (!fiber) {
         currentElement = currentElement.parentElement;
       }
     }
   } else {
-    fiber = findReactFiber(node);
+    fiber = (0, _findReactFiber.default)(node);
   }
 
   // If no React fiber found, return false
@@ -48,14 +39,7 @@ function checkWithinComponentAndExtractChildProps(node, targetComponentName, chi
   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;
-      }
-    }
+    var componentName = (0, _getComponentName.default)(currentFiber);
 
     // Check if this is a child component we're looking for
     if (childComponentConfig && componentName === childComponentConfig.componentName) {
@@ -79,21 +63,4 @@ function checkWithinComponentAndExtractChildProps(node, targetComponentName, chi
   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/cjs/vc/vc-observer-new/viewport-observer/utils/find-react-fiber.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = findReactFiber;
+// Helper function to find React fiber on an element
+function findReactFiber(element) {
+  // Use for...in loop instead of Object.keys().find() to avoid creating an array
+  for (var key in element) {
+    if (key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')) {
+      return element[key];
+    }
+  }
+  return null;
+}

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/get-component-name.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getComponentName;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+// Helper function to extract component name from fiber
+function getComponentName(fiber) {
+  var type = fiber === null || fiber === void 0 ? void 0 : fiber.type;
+  if (!type) {
+    return undefined;
+  }
+  if (typeof type === 'function' || (0, _typeof2.default)(type) === 'object') {
+    return type.displayName || type.name;
+  }
+  return undefined;
+}

package/dist/es2019/custom-cohort-data/index.js

@@ -0,0 +1,30 @@
+import { useContext, useMemo } from 'react';
+import UFOInteractionContext from '../interaction-context';
+import { getInteractionId } from '../interaction-id-context';
+import { addCohortingCustomData } from '../interaction-metrics';
+export default function UFOCustomCohortData({
+  dataKey,
+  value
+}) {
+  const interactionContext = useContext(UFOInteractionContext);
+  useMemo(() => {
+    if (!interactionContext) {
+      return;
+    }
+    const interactionId = getInteractionId();
+    const currentInteractionId = interactionId.current;
+    if (!currentInteractionId) {
+      return;
+    }
+    addCohortingCustomData(currentInteractionId, dataKey, value);
+  }, [dataKey, value, interactionContext]);
+  return null;
+}
+export function addUFOCustomCohortData(key, value) {
+  const interactionId = getInteractionId();
+  const currentInteractionId = interactionId.current;
+  if (!currentInteractionId) {
+    return;
+  }
+  addCohortingCustomData(currentInteractionId, key, value);
+}

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

@@ -6,7 +6,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';
+import checkWithinComponentAndExtractChildProps from './utils/check-within-component-and-extract-child-props';
 import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
 function isElementVisible(element) {
   if (!(element instanceof HTMLElement)) {
@@ -186,13 +186,11 @@ export default class ViewportObserver {
           continue;
         }
         const {
-          isWithinThirdPartySegment,
-          ignoredReason
-        } = checkThirdPartySegmentWithIgnoreReason(addedNode);
+          isWithin: isWithinThirdPartySegment
+        } = checkWithinComponentAndExtractChildProps(addedNode, 'UFOThirdPartySegment');
         if (isWithinThirdPartySegment) {
           var _this$intersectionObs7;
-          const assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
-          (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, assignedReason);
+          (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
           continue;
         }
         (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
@@ -245,13 +243,11 @@ export default class ViewportObserver {
           };
         }
         const {
-          isWithinThirdPartySegment,
-          ignoredReason
-        } = checkThirdPartySegmentWithIgnoreReason(target);
+          isWithin: isWithinThirdPartySegment
+        } = checkWithinComponentAndExtractChildProps(target, 'UFOThirdPartySegment');
         if (isWithinThirdPartySegment) {
-          const assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
           return {
-            type: assignedReason,
+            type: 'mutation:third-party-element',
             mutationData: {
               attributeName,
               oldValue,

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/{get-component-name-and-child-props.js → check-within-component-and-extract-child-props.js}

@@ -1,13 +1,10 @@
 import { fg } from '@atlaskit/platform-feature-flags';
-// Helper function to find React fiber on an element
-const findReactFiber = element => {
-  const key = Object.keys(element).find(key => key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$'));
-  return key ? element[key] : null;
-};
+import findReactFiber from './find-react-fiber';
+import getComponentName from './get-component-name';
 
 // 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) {
+export default function checkWithinComponentAndExtractChildProps(node, targetComponentName, childComponentConfig) {
   let fiber = null;
   if (fg('platform_ufo_handle_non_react_element_for_3p')) {
     // Walk up the DOM tree to find React fiber (handles non-React-rendered elements)
@@ -33,14 +30,7 @@ export function checkWithinComponentAndExtractChildProps(node, targetComponentNa
   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;
-      }
-    }
+    const componentName = getComponentName(currentFiber);
 
     // Check if this is a child component we're looking for
     if (childComponentConfig && componentName === childComponentConfig.componentName) {
@@ -65,21 +55,4 @@ export function checkWithinComponentAndExtractChildProps(node, targetComponentNa
   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/es2019/vc/vc-observer-new/viewport-observer/utils/find-react-fiber.js

@@ -0,0 +1,10 @@
+// Helper function to find React fiber on an element
+export default function findReactFiber(element) {
+  // Use for...in loop instead of Object.keys().find() to avoid creating an array
+  for (const key in element) {
+    if (key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')) {
+      return element[key];
+    }
+  }
+  return null;
+}

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

@@ -0,0 +1,11 @@
+// Helper function to extract component name from fiber
+export default function getComponentName(fiber) {
+  const type = fiber === null || fiber === void 0 ? void 0 : fiber.type;
+  if (!type) {
+    return undefined;
+  }
+  if (typeof type === 'function' || typeof type === 'object') {
+    return type.displayName || type.name;
+  }
+  return undefined;
+}

package/dist/esm/custom-cohort-data/index.js

@@ -0,0 +1,29 @@
+import { useContext, useMemo } from 'react';
+import UFOInteractionContext from '../interaction-context';
+import { getInteractionId } from '../interaction-id-context';
+import { addCohortingCustomData } from '../interaction-metrics';
+export default function UFOCustomCohortData(_ref) {
+  var dataKey = _ref.dataKey,
+    value = _ref.value;
+  var interactionContext = useContext(UFOInteractionContext);
+  useMemo(function () {
+    if (!interactionContext) {
+      return;
+    }
+    var interactionId = getInteractionId();
+    var currentInteractionId = interactionId.current;
+    if (!currentInteractionId) {
+      return;
+    }
+    addCohortingCustomData(currentInteractionId, dataKey, value);
+  }, [dataKey, value, interactionContext]);
+  return null;
+}
+export function addUFOCustomCohortData(key, value) {
+  var interactionId = getInteractionId();
+  var currentInteractionId = interactionId.current;
+  if (!currentInteractionId) {
+    return;
+  }
+  addCohortingCustomData(currentInteractionId, key, value);
+}

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

@@ -13,7 +13,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';
+import checkWithinComponentAndExtractChildProps from './utils/check-within-component-and-extract-child-props';
 import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
 function isElementVisible(element) {
   if (!(element instanceof HTMLElement)) {
@@ -118,7 +118,7 @@ var ViewportObserver = /*#__PURE__*/function () {
               _context2.prev = 4;
               _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
                 var _this$intersectionObs8;
-                var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$intersectionObs3, _result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, isNoLsMarkerEnabled, _this$intersectionObs5, _this$intersectionObs6, _checkThirdPartySegme, isWithinThirdPartySegment, ignoredReason, _this$intersectionObs7, assignedReason;
+                var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$intersectionObs3, _result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, isNoLsMarkerEnabled, _this$intersectionObs5, _this$intersectionObs6, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs7;
                 return _regeneratorRuntime.wrap(function _loop$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
@@ -228,17 +228,16 @@ var ViewportObserver = /*#__PURE__*/function () {
                       (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
                       return _context.abrupt("return", 0);
                     case 45:
-                      _checkThirdPartySegme = checkThirdPartySegmentWithIgnoreReason(addedNode), isWithinThirdPartySegment = _checkThirdPartySegme.isWithinThirdPartySegment, ignoredReason = _checkThirdPartySegme.ignoredReason;
+                      _checkWithinComponent = checkWithinComponentAndExtractChildProps(addedNode, 'UFOThirdPartySegment'), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
                       if (!isWithinThirdPartySegment) {
-                        _context.next = 50;
+                        _context.next = 49;
                         break;
                       }
-                      assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
-                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, assignedReason);
+                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
                       return _context.abrupt("return", 0);
-                    case 50:
+                    case 49:
                       (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
-                    case 51:
+                    case 50:
                     case "end":
                       return _context.stop();
                   }
@@ -326,13 +325,11 @@ var ViewportObserver = /*#__PURE__*/function () {
             }
           };
         }
-        var _checkThirdPartySegme2 = checkThirdPartySegmentWithIgnoreReason(target),
-          isWithinThirdPartySegment = _checkThirdPartySegme2.isWithinThirdPartySegment,
-          ignoredReason = _checkThirdPartySegme2.ignoredReason;
+        var _checkWithinComponent2 = checkWithinComponentAndExtractChildProps(target, 'UFOThirdPartySegment'),
+          isWithinThirdPartySegment = _checkWithinComponent2.isWithin;
         if (isWithinThirdPartySegment) {
-          var assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
           return {
-            type: assignedReason,
+            type: 'mutation:third-party-element',
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,

package/dist/esm/vc/vc-observer-new/viewport-observer/utils/{get-component-name-and-child-props.js → check-within-component-and-extract-child-props.js}

@@ -1,19 +1,13 @@
 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; }
 import { fg } from '@atlaskit/platform-feature-flags';
-// Helper function to find React fiber on an element
-var findReactFiber = function findReactFiber(element) {
-  var key = Object.keys(element).find(function (key) {
-    return key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$');
-  });
-  return key ? element[key] : null;
-};
+import findReactFiber from './find-react-fiber';
+import getComponentName from './get-component-name';
 
 // 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) {
+export default function checkWithinComponentAndExtractChildProps(node, targetComponentName, childComponentConfig) {
   var fiber = null;
   if (fg('platform_ufo_handle_non_react_element_for_3p')) {
     // Walk up the DOM tree to find React fiber (handles non-React-rendered elements)
@@ -39,14 +33,7 @@ export function checkWithinComponentAndExtractChildProps(node, targetComponentNa
   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;
-      }
-    }
+    var componentName = getComponentName(currentFiber);
 
     // Check if this is a child component we're looking for
     if (childComponentConfig && componentName === childComponentConfig.componentName) {
@@ -70,21 +57,4 @@ export function checkWithinComponentAndExtractChildProps(node, targetComponentNa
   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/esm/vc/vc-observer-new/viewport-observer/utils/find-react-fiber.js

@@ -0,0 +1,10 @@
+// Helper function to find React fiber on an element
+export default function findReactFiber(element) {
+  // Use for...in loop instead of Object.keys().find() to avoid creating an array
+  for (var key in element) {
+    if (key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')) {
+      return element[key];
+    }
+  }
+  return null;
+}

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

@@ -0,0 +1,12 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+// Helper function to extract component name from fiber
+export default function getComponentName(fiber) {
+  var type = fiber === null || fiber === void 0 ? void 0 : fiber.type;
+  if (!type) {
+    return undefined;
+  }
+  if (typeof type === 'function' || _typeof(type) === 'object') {
+    return type.displayName || type.name;
+  }
+  return undefined;
+}

package/dist/types/custom-cohort-data/index.d.ts

@@ -0,0 +1,4 @@
+import type { UFOCustomCohortDataProps } from './types';
+export type { UFOCustomCohortDataProps } from './types';
+export default function UFOCustomCohortData({ dataKey, value }: UFOCustomCohortDataProps): null;
+export declare function addUFOCustomCohortData(key: string, value: number | boolean | string | null | undefined): void;

package/dist/types/custom-cohort-data/types.d.ts

@@ -0,0 +1,4 @@
+export type UFOCustomCohortDataProps = {
+    dataKey: string;
+    value: number | boolean | string | null | undefined;
+};

package/dist/types/vc/vc-observer-new/viewport-observer/utils/check-within-component-and-extract-child-props.d.ts

@@ -0,0 +1,8 @@
+export default function checkWithinComponentAndExtractChildProps<T = string>(node: HTMLElement, targetComponentName: string, childComponentConfig?: {
+    componentName: string;
+    propName: string;
+    extractValue?: (props: any) => T;
+}): {
+    isWithin: boolean;
+    childProp?: T;
+};

package/dist/types/vc/vc-observer-new/viewport-observer/utils/find-react-fiber.d.ts

@@ -0,0 +1 @@
+export default function findReactFiber(element: HTMLElement): any;

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

@@ -0,0 +1 @@
+export default function getComponentName(fiber: any): string | undefined;

package/dist/types-ts4.5/custom-cohort-data/index.d.ts

@@ -0,0 +1,4 @@
+import type { UFOCustomCohortDataProps } from './types';
+export type { UFOCustomCohortDataProps } from './types';
+export default function UFOCustomCohortData({ dataKey, value }: UFOCustomCohortDataProps): null;
+export declare function addUFOCustomCohortData(key: string, value: number | boolean | string | null | undefined): void;

package/dist/types-ts4.5/custom-cohort-data/types.d.ts

@@ -0,0 +1,4 @@
+export type UFOCustomCohortDataProps = {
+    dataKey: string;
+    value: number | boolean | string | null | undefined;
+};

package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/check-within-component-and-extract-child-props.d.ts

@@ -0,0 +1,8 @@
+export default function checkWithinComponentAndExtractChildProps<T = string>(node: HTMLElement, targetComponentName: string, childComponentConfig?: {
+    componentName: string;
+    propName: string;
+    extractValue?: (props: any) => T;
+}): {
+    isWithin: boolean;
+    childProp?: T;
+};

package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/find-react-fiber.d.ts

@@ -0,0 +1 @@
+export default function findReactFiber(element: HTMLElement): any;

package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/get-component-name.d.ts

@@ -0,0 +1 @@
+export default function getComponentName(fiber: any): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "4.0.3",
+	"version": "4.1.0",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,6 +35,7 @@
 		"./create-payload": "./src/create-payload/index.ts",
 		"./create-post-interaction-log-payload": "./src/create-post-interaction-log-payload/index.ts",
 		"./custom-data": "./src/custom-data/index.ts",
+		"./custom-cohort-data": "./src/custom-cohort-data/index.ts",
 		"./custom-mark": "./src/custom-mark/index.ts",
 		"./custom-spans": "./src/custom-spans/index.ts",
 		"./custom-timings": "./src/custom-timings/index.ts",

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

@@ -1,15 +0,0 @@
-import type { UFOIgnoreHoldsReason } from '../../../../ignore-holds';
-import type { 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/vc/vc-observer-new/viewport-observer/utils/get-component-name-and-child-props.d.ts

@@ -1,15 +0,0 @@
-import type { UFOIgnoreHoldsReason } from '../../../../ignore-holds';
-import type { 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;