@atlaskit/react-ufo 4.2.2 → 4.2.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.2.4
+
+### Patch Changes
+
+- [#199942](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199942)
+  [`260cb0fb9e934`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/260cb0fb9e934) -
+  Fix ssr placeholder size/dimension check resolution in TTVC v3
+
+## 4.2.3
+
+### Patch Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`65e285a7a4cbc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/65e285a7a4cbc) -
+  Added segments threshold when creating React UFO payload
+
 ## 4.2.2
 
 ### Patch Changes

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

@@ -5,15 +5,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildSegmentTree = buildSegmentTree;
+exports.getOldSegmentsLabelStack = getOldSegmentsLabelStack;
 exports.isSegmentLabel = isSegmentLabel;
 exports.labelStackStartWith = labelStackStartWith;
 exports.optimizeLabelStack = optimizeLabelStack;
 exports.sanitizeUfoName = sanitizeUfoName;
 exports.stringifyLabelStackFully = stringifyLabelStackFully;
+exports.stringifyLabelStackWithoutId = stringifyLabelStackWithoutId;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _config = require("../../../config");
+var _getReactUfoPayloadVersion = require("../../utils/get-react-ufo-payload-version");
+var _excluded = ["labelStack"],
+  _excluded2 = ["labelStack"];
 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; }
+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; }
 function sanitizeUfoName(name) {
   return name.replace(/_/g, '-');
 }
@@ -25,26 +35,72 @@ function buildSegmentTree(labelStacks) {
     n: 'segment-tree-root',
     c: {}
   };
-  labelStacks.forEach(function (labelStack) {
-    var currentNode = r;
-    labelStack.forEach(function (label) {
-      var name = label.name;
-      var id = isSegmentLabel(label) ? label.segmentId : undefined;
-      var key = id !== undefined ? id : name;
-      var type = isSegmentLabel(label) ? label.type : undefined;
-      if (!currentNode.c) {
-        currentNode.c = {};
+  var config = (0, _config.getConfig)();
+  var segmentThreshold = config === null || config === void 0 ? void 0 : config.segmentsThreshold;
+  var addSegmentsMap = new Map();
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_add_segments_count_threshold')) {
+    labelStacks.forEach(function (labelStack) {
+      var stringifiedLabelStack = stringifyLabelStackWithoutId(labelStack);
+      var currentNode = r;
+      var _iterator = _createForOfIteratorHelper(labelStack),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var label = _step.value;
+          var isSegment = isSegmentLabel(label);
+          var name = label.name;
+          if (isSegment && segmentThreshold && segmentThreshold[name]) {
+            var threshold = segmentThreshold[name];
+            var count = addSegmentsMap.get(stringifiedLabelStack) || 0;
+            if (count < threshold) {
+              addSegmentsMap.set(stringifiedLabelStack, count + 1);
+            } else {
+              break;
+            }
+          }
+          var id = isSegment ? label.segmentId : undefined;
+          var key = id !== undefined ? id : name;
+          var type = isSegment ? label.type : undefined;
+          if (!currentNode.c) {
+            currentNode.c = {};
+          }
+          if (!currentNode.c[key]) {
+            currentNode.c[key] = _objectSpread({
+              n: name
+            }, type && (0, _platformFeatureFlags.fg)('platform_ufo_add_type_for_3p_segments') ? {
+              t: type
+            } : {});
+          }
+          currentNode = currentNode.c[key];
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
-      if (!currentNode.c[key]) {
-        currentNode.c[key] = _objectSpread({
-          n: name
-        }, type && (0, _platformFeatureFlags.fg)('platform_ufo_add_type_for_3p_segments') ? {
-          t: type
-        } : {});
-      }
-      currentNode = currentNode.c[key];
     });
-  });
+  } else {
+    labelStacks.forEach(function (labelStack) {
+      var currentNode = r;
+      labelStack.forEach(function (label) {
+        var name = label.name;
+        var id = isSegmentLabel(label) ? label.segmentId : undefined;
+        var key = id !== undefined ? id : name;
+        var type = isSegmentLabel(label) ? label.type : undefined;
+        if (!currentNode.c) {
+          currentNode.c = {};
+        }
+        if (!currentNode.c[key]) {
+          currentNode.c[key] = _objectSpread({
+            n: name
+          }, type && (0, _platformFeatureFlags.fg)('platform_ufo_add_type_for_3p_segments') ? {
+            t: type
+          } : {});
+        }
+        currentNode = currentNode.c[key];
+      });
+    });
+  }
   return {
     r: r
   };
@@ -57,6 +113,14 @@ function stringifyLabelStackFully(labelStack) {
     return l.name;
   }).join('/');
 }
+function stringifyLabelStackWithoutId(labelStack) {
+  return labelStack.map(function (l) {
+    if (isSegmentLabel(l)) {
+      return "".concat(l.name, ":segment");
+    }
+    return l.name;
+  }).join('/');
+}
 function getLabelStackReference(labelStack) {
   return labelStack.map(function (l) {
     return isSegmentLabel(l) ? l.segmentId : l.name;
@@ -75,4 +139,55 @@ function optimizeLabelStack(labelStack, reactUFOVersion) {
       t: ls.type
     } : {});
   });
+}
+function getOldSegmentsLabelStack(segments, interactionType) {
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_add_segments_count_threshold')) {
+    var config = (0, _config.getConfig)();
+    var addSegmentsMap = new Map();
+    var segmentThreshold = config === null || config === void 0 ? void 0 : config.segmentsThreshold;
+    return segments.map(function (_ref) {
+      var labelStack = _ref.labelStack,
+        others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      var stringifiedLabelStack = stringifyLabelStackWithoutId(labelStack);
+      var segmentsInfo = [];
+      var _iterator2 = _createForOfIteratorHelper(labelStack),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var ls = _step2.value;
+          var isSegment = isSegmentLabel(ls);
+          if (isSegment && segmentThreshold && segmentThreshold[ls.name]) {
+            var threshold = segmentThreshold[ls.name];
+            var count = addSegmentsMap.get(stringifiedLabelStack) || 0;
+            if (count < threshold) {
+              addSegmentsMap.set(stringifiedLabelStack, count + 1);
+            } else {
+              break;
+            }
+          }
+          segmentsInfo.push(_objectSpread(_objectSpread({
+            n: ls.name
+          }, ls.segmentId ? {
+            s: ls.segmentId
+          } : {}), ls.type && (0, _platformFeatureFlags.fg)('platform_ufo_add_type_for_3p_segments') ? {
+            t: ls.type
+          } : {}));
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return _objectSpread(_objectSpread({}, others), {}, {
+        labelStack: segmentsInfo
+      });
+    });
+  }
+  return segments.map(function (_ref2) {
+    var labelStack = _ref2.labelStack,
+      others = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+    return _objectSpread(_objectSpread({}, others), {}, {
+      labelStack: optimizeLabelStack(labelStack, (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interactionType))
+    });
+  });
 }

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

@@ -47,8 +47,7 @@ var _getTtai = _interopRequireDefault(require("./utils/get-ttai"));
 var _getVcMetrics = _interopRequireDefault(require("./utils/get-vc-metrics"));
 var _excluded = ["labelStack", "time"],
   _excluded2 = ["stopTime", "labelStack"],
-  _excluded3 = ["labelStack"],
-  _excluded4 = ["labelStack"];
+  _excluded3 = ["labelStack"];
 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; } // Import common utilities
@@ -756,13 +755,7 @@ function _createInteractionMetricsPayload() {
                   apdex: optimizeApdex(interaction.apdex, (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),
                   end: Math.round(end),
                   start: Math.round(start),
-                  segments: (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
-                    var labelStack = _ref7.labelStack,
-                      others = (0, _objectWithoutProperties2.default)(_ref7, _excluded4);
-                    return _objectSpread(_objectSpread({}, others), {}, {
-                      labelStack: (0, _utils.optimizeLabelStack)(labelStack, (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type))
-                    });
-                  }),
+                  segments: (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type) === '2.0.0' ? segmentTree : (0, _utils.getOldSegmentsLabelStack)(segments, interaction.type),
                   marks: optimizeMarks(interaction.marks, (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),
                   customData: optimizeCustomData(interaction),
                   reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type))

package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -213,6 +213,8 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       }
       return element;
     }
+
+    // NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is disabled
   }, {
     key: "checkIfExistedAndSizeMatching",
     value: function checkIfExistedAndSizeMatching(el) {
@@ -230,6 +232,15 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         }
       });
     }
+
+    // NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is enabled
+  }, {
+    key: "checkIfExistedAndSizeMatchingV3",
+    value: function checkIfExistedAndSizeMatchingV3(el) {
+      el = this.findNearestPlaceholderContainerIfIgnored(el);
+      var id = this.getPlaceholderId(el);
+      return this.staticPlaceholders.has(id);
+    }
   }, {
     key: "getSize",
     value: function getSize(el) {

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

@@ -11,6 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _vcUtils = require("../../vc-observer/media-wrapper/vc-utils");
 var _isNonVisualStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation"));
 var _rllPlaceholders = require("../../vc-observer/observers/rll-placeholders");
@@ -122,8 +123,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
               _iterator = _createForOfIteratorHelper(addedNodes);
               _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, _this$intersectionObs5, _this$intersectionObs6, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs7;
+                var _this$intersectionObs9;
+                var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, _result, _this$intersectionObs5, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs6, _this$intersectionObs7, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs8;
                 return _regenerator.default.wrap(function _loop$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
@@ -171,44 +172,58 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
                       ssrState.state = SSRStateEnum.normal;
                     case 19:
                       if (!_this.getSSRPlaceholderHandler) {
-                        _context.next = 36;
+                        _context.next = 42;
                         break;
                       }
                       ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
                       if (!ssrPlaceholderHandler) {
-                        _context.next = 36;
+                        _context.next = 42;
                         break;
                       }
                       if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
+                        _context.next = 35;
+                        break;
+                      }
+                      if (!(0, _platformFeatureFlags.fg)('platform_ufo_ssr_placeholder_resolution_ttvc_v3')) {
                         _context.next = 29;
                         break;
                       }
-                      _context.next = 25;
+                      if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
+                        _context.next = 27;
+                        break;
+                      }
+                      (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                      return _context.abrupt("return", 0);
+                    case 27:
+                      _context.next = 35;
+                      break;
+                    case 29:
+                      _context.next = 31;
                       return ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
-                    case 25:
+                    case 31:
                       result = _context.sent;
                       if (!(result !== false)) {
-                        _context.next = 29;
+                        _context.next = 35;
                         break;
                       }
-                      (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
                       return _context.abrupt("return", 0);
-                    case 29:
+                    case 35:
                       if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
-                        _context.next = 36;
+                        _context.next = 42;
                         break;
                       }
-                      _context.next = 32;
+                      _context.next = 38;
                       return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
-                    case 32:
+                    case 38:
                       _result = _context.sent;
                       if (!(_result !== false)) {
-                        _context.next = 36;
+                        _context.next = 42;
                         break;
                       }
-                      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:ssr-placeholder');
                       return _context.abrupt("return", 0);
-                    case 36:
+                    case 42:
                       sameDeletedNode = removedNodes.find(function (ref) {
                         var n = ref.deref();
                         if (!n || !addedNode) {
@@ -218,29 +233,29 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
                       });
                       isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(addedNode);
                       if (!(sameDeletedNode && isInIgnoreLsMarker)) {
-                        _context.next = 41;
+                        _context.next = 47;
                         break;
                       }
-                      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
+                      (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:remount');
                       return _context.abrupt("return", 0);
-                    case 41:
+                    case 47:
                       if (!(0, _vcUtils.isContainedWithinMediaWrapper)(addedNode)) {
-                        _context.next = 44;
+                        _context.next = 50;
                         break;
                       }
-                      (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
+                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:media');
                       return _context.abrupt("return", 0);
-                    case 44:
+                    case 50:
                       _checkWithinComponent = (0, _checkWithinComponent2.default)(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
                       if (!isWithinThirdPartySegment) {
-                        _context.next = 48;
+                        _context.next = 54;
                         break;
                       }
-                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
+                      (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
                       return _context.abrupt("return", 0);
-                    case 48:
-                      (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
-                    case 49:
+                    case 54:
+                      (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+                    case 55:
                     case "end":
                       return _context.stop();
                   }
@@ -285,12 +300,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
       };
     }());
     (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref6) {
-      var _this$intersectionObs9;
+      var _this$intersectionObs0;
       var target = _ref6.target,
         attributeName = _ref6.attributeName,
         oldValue = _ref6.oldValue,
         newValue = _ref6.newValue;
-      (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(target, function (_ref7) {
+      (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref7) {
         var target = _ref7.target,
           rect = _ref7.rect;
         if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
@@ -430,12 +445,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
   }, {
     key: "stop",
     value: function stop() {
-      var _this$mutationObserve2, _this$intersectionObs0, _this$performanceObse2;
+      var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
       if (!this.isStarted) {
         return;
       }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
-      (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.disconnect();
+      (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
       this.isStarted = false;
       // Clean up caches when stopping

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

@@ -1,4 +1,6 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getConfig } from '../../../config';
+import { getReactUFOPayloadVersion } from '../../utils/get-react-ufo-payload-version';
 export function sanitizeUfoName(name) {
   return name.replace(/_/g, '-');
 }
@@ -10,27 +12,65 @@ export function buildSegmentTree(labelStacks) {
     n: 'segment-tree-root',
     c: {}
   };
-  labelStacks.forEach(labelStack => {
-    let currentNode = r;
-    labelStack.forEach(label => {
-      const name = label.name;
-      const id = isSegmentLabel(label) ? label.segmentId : undefined;
-      const key = id !== undefined ? id : name;
-      const type = isSegmentLabel(label) ? label.type : undefined;
-      if (!currentNode.c) {
-        currentNode.c = {};
+  const config = getConfig();
+  const segmentThreshold = config === null || config === void 0 ? void 0 : config.segmentsThreshold;
+  const addSegmentsMap = new Map();
+  if (fg('platform_ufo_add_segments_count_threshold')) {
+    labelStacks.forEach(labelStack => {
+      const stringifiedLabelStack = stringifyLabelStackWithoutId(labelStack);
+      let currentNode = r;
+      for (const label of labelStack) {
+        const isSegment = isSegmentLabel(label);
+        const name = label.name;
+        if (isSegment && segmentThreshold && segmentThreshold[name]) {
+          const threshold = segmentThreshold[name];
+          const count = addSegmentsMap.get(stringifiedLabelStack) || 0;
+          if (count < threshold) {
+            addSegmentsMap.set(stringifiedLabelStack, count + 1);
+          } else {
+            break;
+          }
+        }
+        const id = isSegment ? label.segmentId : undefined;
+        const key = id !== undefined ? id : name;
+        const type = isSegment ? label.type : undefined;
+        if (!currentNode.c) {
+          currentNode.c = {};
+        }
+        if (!currentNode.c[key]) {
+          currentNode.c[key] = {
+            n: name,
+            ...(type && fg('platform_ufo_add_type_for_3p_segments') ? {
+              t: type
+            } : {})
+          };
+        }
+        currentNode = currentNode.c[key];
       }
-      if (!currentNode.c[key]) {
-        currentNode.c[key] = {
-          n: name,
-          ...(type && fg('platform_ufo_add_type_for_3p_segments') ? {
-            t: type
-          } : {})
-        };
-      }
-      currentNode = currentNode.c[key];
     });
-  });
+  } else {
+    labelStacks.forEach(labelStack => {
+      let currentNode = r;
+      labelStack.forEach(label => {
+        const name = label.name;
+        const id = isSegmentLabel(label) ? label.segmentId : undefined;
+        const key = id !== undefined ? id : name;
+        const type = isSegmentLabel(label) ? label.type : undefined;
+        if (!currentNode.c) {
+          currentNode.c = {};
+        }
+        if (!currentNode.c[key]) {
+          currentNode.c[key] = {
+            n: name,
+            ...(type && fg('platform_ufo_add_type_for_3p_segments') ? {
+              t: type
+            } : {})
+          };
+        }
+        currentNode = currentNode.c[key];
+      });
+    });
+  }
   return {
     r
   };
@@ -43,6 +83,14 @@ export function stringifyLabelStackFully(labelStack) {
     return l.name;
   }).join('/');
 }
+export function stringifyLabelStackWithoutId(labelStack) {
+  return labelStack.map(l => {
+    if (isSegmentLabel(l)) {
+      return `${l.name}:segment`;
+    }
+    return l.name;
+  }).join('/');
+}
 function getLabelStackReference(labelStack) {
   return labelStack.map(l => isSegmentLabel(l) ? l.segmentId : l.name).join('/');
 }
@@ -59,4 +107,50 @@ export function optimizeLabelStack(labelStack, reactUFOVersion) {
       t: ls.type
     } : {})
   }));
+}
+export function getOldSegmentsLabelStack(segments, interactionType) {
+  if (fg('platform_ufo_add_segments_count_threshold')) {
+    const config = getConfig();
+    const addSegmentsMap = new Map();
+    const segmentThreshold = config === null || config === void 0 ? void 0 : config.segmentsThreshold;
+    return segments.map(({
+      labelStack,
+      ...others
+    }) => {
+      const stringifiedLabelStack = stringifyLabelStackWithoutId(labelStack);
+      const segmentsInfo = [];
+      for (const ls of labelStack) {
+        const isSegment = isSegmentLabel(ls);
+        if (isSegment && segmentThreshold && segmentThreshold[ls.name]) {
+          const threshold = segmentThreshold[ls.name];
+          const count = addSegmentsMap.get(stringifiedLabelStack) || 0;
+          if (count < threshold) {
+            addSegmentsMap.set(stringifiedLabelStack, count + 1);
+          } else {
+            break;
+          }
+        }
+        segmentsInfo.push({
+          n: ls.name,
+          ...(ls.segmentId ? {
+            s: ls.segmentId
+          } : {}),
+          ...(ls.type && fg('platform_ufo_add_type_for_3p_segments') ? {
+            t: ls.type
+          } : {})
+        });
+      }
+      return {
+        ...others,
+        labelStack: segmentsInfo
+      };
+    });
+  }
+  return segments.map(({
+    labelStack,
+    ...others
+  }) => ({
+    ...others,
+    labelStack: optimizeLabelStack(labelStack, getReactUFOPayloadVersion(interactionType))
+  }));
 }

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

@@ -19,7 +19,7 @@ import * as resourceTiming from '../resource-timing';
 import { filterResourceTimings } from '../resource-timing/common/utils/resource-timing-buffer';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
-import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
+import { buildSegmentTree, getOldSegmentsLabelStack, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
 import { createCriticalMetricsPayloads } from './critical-metrics-payload';
 import { addPerformanceMeasures } from './utils/add-performance-measures';
 import { getBrowserMetadataToLegacyFormat } from './utils/get-browser-metadata';
@@ -754,13 +754,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
           apdex: optimizeApdex(interaction.apdex, getReactUFOPayloadVersion(interaction.type)),
           end: Math.round(end),
           start: Math.round(start),
-          segments: getReactUFOPayloadVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(({
-            labelStack,
-            ...others
-          }) => ({
-            ...others,
-            labelStack: optimizeLabelStack(labelStack, getReactUFOPayloadVersion(interaction.type))
-          })),
+          segments: getReactUFOPayloadVersion(interaction.type) === '2.0.0' ? segmentTree : getOldSegmentsLabelStack(segments, interaction.type),
           marks: optimizeMarks(interaction.marks, getReactUFOPayloadVersion(interaction.type)),
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOPayloadVersion(interaction.type)),

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -184,6 +184,8 @@ export class SSRPlaceholderHandlers {
     }
     return element;
   }
+
+  // NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is disabled
   checkIfExistedAndSizeMatching(el) {
     el = this.findNearestPlaceholderContainerIfIgnored(el);
     const id = this.getPlaceholderId(el);
@@ -198,6 +200,13 @@ export class SSRPlaceholderHandlers {
       }
     });
   }
+
+  // NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is enabled
+  checkIfExistedAndSizeMatchingV3(el) {
+    el = this.findNearestPlaceholderContainerIfIgnored(el);
+    const id = this.getPlaceholderId(el);
+    return this.staticPlaceholders.has(id);
+  }
   getSize(el) {
     return new Promise(resolve => {
       var _this$intersectionObs4;