@atlaskit/react-ufo 4.3.1 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.3.2
+
+### Patch Changes
+
+- [`7cf45d7a0ce8d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7cf45d7a0ce8d) -
+  Include elements with display:contents css property in TTVC
+
 ## 4.3.1
 
 ### Patch Changes

package/dist/cjs/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -13,6 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _checkDisplayContent = require("../viewport-observer/utils/check-display-content");
 var _percentileCalc = require("./percentile-calc");
 var _getViewportHeight = _interopRequireDefault(require("./utils/get-viewport-height"));
 var _getViewportWidth = _interopRequireDefault(require("./utils/get-viewport-width"));
@@ -355,8 +356,11 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
                 vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
               };
               result.ratios = this.calculateRatios(filteredEntries);
+              if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_resolution_ttvc_v3')) {
+                result.childrenIgnoredCount = (0, _checkDisplayContent.getInvalidChildrenCount)();
+              }
               return _context2.abrupt("return", result);
-            case 13:
+            case 14:
             case "end":
               return _context2.stop();
           }

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

@@ -18,6 +18,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 _checkDisplayContent = _interopRequireDefault(require("./utils/check-display-content"));
 var _checkWithinComponent2 = _interopRequireWildcard(require("./utils/check-within-component"));
 var _isInVcIgnoreIfNoLayoutShiftMarker = _interopRequireDefault(require("./utils/is-in-vc-ignore-if-no-layout-shift-marker"));
 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); }
@@ -123,8 +124,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
               _iterator = _createForOfIteratorHelper(addedNodes);
               _context2.prev = 4;
               _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
-                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;
+                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, validTargets, _iterator2, _step2, _this$intersectionObs9, validTarget, _this$intersectionObs0;
                 return _regenerator.default.wrap(function _loop$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
@@ -254,7 +254,23 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
                       (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
                       return _context.abrupt("return", 0);
                     case 54:
-                      (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+                      if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_resolution_ttvc_v3')) {
+                        // Check if the target has display:content css property, return array of valid targets
+                        validTargets = (0, _checkDisplayContent.default)(addedNode);
+                        _iterator2 = _createForOfIteratorHelper(validTargets);
+                        try {
+                          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                            validTarget = _step2.value;
+                            (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(validTarget, createElementMutationsWatcher(removedNodeRects));
+                          }
+                        } catch (err) {
+                          _iterator2.e(err);
+                        } finally {
+                          _iterator2.f();
+                        }
+                      } else {
+                        (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+                      }
                     case 55:
                     case "end":
                       return _context.stop();
@@ -300,12 +316,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
       };
     }());
     (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref6) {
-      var _this$intersectionObs0;
+      var _this$intersectionObs1;
       var target = _ref6.target,
         attributeName = _ref6.attributeName,
         oldValue = _ref6.oldValue,
         newValue = _ref6.newValue;
-      (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref7) {
+      (_this$intersectionObs1 = _this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.watchAndTag(target, function (_ref7) {
         var target = _ref7.target,
           rect = _ref7.rect;
         if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
@@ -368,11 +384,11 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref8) {
       var time = _ref8.time,
         changedRects = _ref8.changedRects;
-      var _iterator2 = _createForOfIteratorHelper(changedRects),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(changedRects),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var changedRect = _step2.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var changedRect = _step3.value;
           var target = changedRect.node;
           if (target) {
             _this.onChange({
@@ -386,9 +402,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
     });
     this.mapVisibleNodeRects = new WeakMap();
@@ -445,12 +461,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
   }, {
     key: "stop",
     value: function stop() {
-      var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
+      var _this$mutationObserve2, _this$intersectionObs10, _this$performanceObse2;
       if (!this.isStarted) {
         return;
       }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
-      (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
+      (_this$intersectionObs10 = this.intersectionObserver) === null || _this$intersectionObs10 === void 0 || _this$intersectionObs10.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
       this.isStarted = false;
       // Clean up caches when stopping

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

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createIntersectionObserver = createIntersectionObserver;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _checkDisplayContent = require("../utils/check-display-content");
 function isValidEntry(entry) {
   return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
 }
@@ -19,6 +21,13 @@ function createIntersectionObserver(_ref) {
     var startTime = performance.now();
     entries.forEach(function (entry) {
       if (!(entry.target instanceof HTMLElement) || !isValidEntry(entry)) {
+        // TODO: Remove this logic when analysis is complete
+        if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_resolution_ttvc_v3')) {
+          if (entry.target instanceof HTMLElement && !isValidEntry(entry) && _checkDisplayContent.checkedChildrenCache.get(entry.target) === false) {
+            (0, _checkDisplayContent.incrementCheckedInvalidChildrenCount)();
+            _checkDisplayContent.checkedChildrenCache.set(entry.target, true);
+          }
+        }
         return;
       }
       var mutationTag = null;

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/check-display-content.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkedChildrenCache = void 0;
+exports.default = checkCssProperty;
+exports.getInvalidChildrenCount = getInvalidChildrenCount;
+exports.incrementCheckedInvalidChildrenCount = incrementCheckedInvalidChildrenCount;
+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; }
+// TODO: Remove this cache when analysis is complete - it is used to track whether direct children elements will be ignored by the observer
+var checkedChildrenCache = exports.checkedChildrenCache = new WeakMap();
+var checkedInvalidChildrenCount = 0;
+function incrementCheckedInvalidChildrenCount() {
+  checkedInvalidChildrenCount++;
+}
+function getInvalidChildrenCount() {
+  return checkedInvalidChildrenCount;
+}
+function checkCssProperty(element) {
+  var computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display === 'contents') {
+    // If display is 'contents', we return the direct children of the element
+    var result = [];
+    var _iterator = _createForOfIteratorHelper(element.children),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        if (child instanceof HTMLElement) {
+          if (!checkedChildrenCache.has(child)) {
+            // TODO: Remove this cache when analysis is complete
+            checkedChildrenCache.set(child, false);
+          }
+          result.push(child);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return result;
+  }
+  return [element];
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -1,4 +1,5 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getInvalidChildrenCount } from '../viewport-observer/utils/check-display-content';
 import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
@@ -245,6 +246,9 @@ export default class AbstractVCCalculatorBase {
       vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
     };
     result.ratios = this.calculateRatios(filteredEntries);
+    if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
+      result.childrenIgnoredCount = getInvalidChildrenCount();
+    }
     return result;
   }
 }

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

@@ -6,6 +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 checkCssProperty from './utils/check-display-content';
 import checkWithinComponent, { cleanupCaches } from './utils/check-within-component';
 import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
 function isElementVisible(element) {
@@ -101,7 +102,6 @@ export default class ViewportObserver {
       });
       const targetNode = target.deref();
       for (const addedNodeRef of addedNodes) {
-        var _this$intersectionObs9;
         const addedNode = addedNodeRef.deref();
         if (!addedNode) {
           continue;
@@ -194,7 +194,17 @@ export default class ViewportObserver {
           (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
           continue;
         }
-        (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+        if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
+          // Check if the target has display:content css property, return array of valid targets
+          const validTargets = checkCssProperty(addedNode);
+          for (const validTarget of validTargets) {
+            var _this$intersectionObs9;
+            (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(validTarget, createElementMutationsWatcher(removedNodeRects));
+          }
+        } else {
+          var _this$intersectionObs0;
+          (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+        }
       }
     });
     _defineProperty(this, "handleAttributeMutation", ({
@@ -203,8 +213,8 @@ export default class ViewportObserver {
       oldValue,
       newValue
     }) => {
-      var _this$intersectionObs0;
-      (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(target, ({
+      var _this$intersectionObs1;
+      (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.watchAndTag(target, ({
         target,
         rect
       }) => {
@@ -331,12 +341,12 @@ export default class ViewportObserver {
     this.isStarted = true;
   }
   stop() {
-    var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
+    var _this$mutationObserve2, _this$intersectionObs10, _this$performanceObse2;
     if (!this.isStarted) {
       return;
     }
     (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
-    (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.disconnect();
+    (_this$intersectionObs10 = this.intersectionObserver) === null || _this$intersectionObs10 === void 0 ? void 0 : _this$intersectionObs10.disconnect();
     (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
     this.isStarted = false;
     // Clean up caches when stopping

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

@@ -1,3 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { checkedChildrenCache, incrementCheckedInvalidChildrenCount } from '../utils/check-display-content';
 function isValidEntry(entry) {
   return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
 }
@@ -15,6 +17,13 @@ export function createIntersectionObserver({
     entries.forEach(entry => {
       var _mutationTag;
       if (!(entry.target instanceof HTMLElement) || !isValidEntry(entry)) {
+        // TODO: Remove this logic when analysis is complete
+        if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
+          if (entry.target instanceof HTMLElement && !isValidEntry(entry) && checkedChildrenCache.get(entry.target) === false) {
+            incrementCheckedInvalidChildrenCount();
+            checkedChildrenCache.set(entry.target, true);
+          }
+        }
         return;
       }
       let mutationTag = null;

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/check-display-content.js

@@ -0,0 +1,27 @@
+// TODO: Remove this cache when analysis is complete - it is used to track whether direct children elements will be ignored by the observer
+export const checkedChildrenCache = new WeakMap();
+let checkedInvalidChildrenCount = 0;
+export function incrementCheckedInvalidChildrenCount() {
+  checkedInvalidChildrenCount++;
+}
+export function getInvalidChildrenCount() {
+  return checkedInvalidChildrenCount;
+}
+export default function checkCssProperty(element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display === 'contents') {
+    // If display is 'contents', we return the direct children of the element
+    const result = [];
+    for (const child of element.children) {
+      if (child instanceof HTMLElement) {
+        if (!checkedChildrenCache.has(child)) {
+          // TODO: Remove this cache when analysis is complete
+          checkedChildrenCache.set(child, false);
+        }
+        result.push(child);
+      }
+    }
+    return result;
+  }
+  return [element];
+}

package/dist/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -11,6 +11,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 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; }
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getInvalidChildrenCount } from '../viewport-observer/utils/check-display-content';
 import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
@@ -349,8 +350,11 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                 vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
               };
               result.ratios = this.calculateRatios(filteredEntries);
+              if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
+                result.childrenIgnoredCount = getInvalidChildrenCount();
+              }
               return _context2.abrupt("return", result);
-            case 13:
+            case 14:
             case "end":
               return _context2.stop();
           }

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

@@ -13,6 +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 checkCssProperty from './utils/check-display-content';
 import checkWithinComponent, { cleanupCaches } from './utils/check-within-component';
 import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
 function isElementVisible(element) {
@@ -114,8 +115,7 @@ var ViewportObserver = /*#__PURE__*/function () {
               _iterator = _createForOfIteratorHelper(addedNodes);
               _context2.prev = 4;
               _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
-                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;
+                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, validTargets, _iterator2, _step2, _this$intersectionObs9, validTarget, _this$intersectionObs0;
                 return _regeneratorRuntime.wrap(function _loop$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
@@ -245,7 +245,23 @@ var ViewportObserver = /*#__PURE__*/function () {
                       (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
                       return _context.abrupt("return", 0);
                     case 54:
-                      (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+                      if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
+                        // Check if the target has display:content css property, return array of valid targets
+                        validTargets = checkCssProperty(addedNode);
+                        _iterator2 = _createForOfIteratorHelper(validTargets);
+                        try {
+                          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                            validTarget = _step2.value;
+                            (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(validTarget, createElementMutationsWatcher(removedNodeRects));
+                          }
+                        } catch (err) {
+                          _iterator2.e(err);
+                        } finally {
+                          _iterator2.f();
+                        }
+                      } else {
+                        (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+                      }
                     case 55:
                     case "end":
                       return _context.stop();
@@ -291,12 +307,12 @@ var ViewportObserver = /*#__PURE__*/function () {
       };
     }());
     _defineProperty(this, "handleAttributeMutation", function (_ref6) {
-      var _this$intersectionObs0;
+      var _this$intersectionObs1;
       var target = _ref6.target,
         attributeName = _ref6.attributeName,
         oldValue = _ref6.oldValue,
         newValue = _ref6.newValue;
-      (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref7) {
+      (_this$intersectionObs1 = _this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.watchAndTag(target, function (_ref7) {
         var target = _ref7.target,
           rect = _ref7.rect;
         if (isContainedWithinMediaWrapper(target)) {
@@ -359,11 +375,11 @@ var ViewportObserver = /*#__PURE__*/function () {
     _defineProperty(this, "handleLayoutShift", function (_ref8) {
       var time = _ref8.time,
         changedRects = _ref8.changedRects;
-      var _iterator2 = _createForOfIteratorHelper(changedRects),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(changedRects),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var changedRect = _step2.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var changedRect = _step3.value;
           var target = changedRect.node;
           if (target) {
             _this.onChange({
@@ -377,9 +393,9 @@ var ViewportObserver = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
     });
     this.mapVisibleNodeRects = new WeakMap();
@@ -436,12 +452,12 @@ var ViewportObserver = /*#__PURE__*/function () {
   }, {
     key: "stop",
     value: function stop() {
-      var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
+      var _this$mutationObserve2, _this$intersectionObs10, _this$performanceObse2;
       if (!this.isStarted) {
         return;
       }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
-      (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
+      (_this$intersectionObs10 = this.intersectionObserver) === null || _this$intersectionObs10 === void 0 || _this$intersectionObs10.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
       this.isStarted = false;
       // Clean up caches when stopping

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

@@ -1,3 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { checkedChildrenCache, incrementCheckedInvalidChildrenCount } from '../utils/check-display-content';
 function isValidEntry(entry) {
   return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
 }
@@ -13,6 +15,13 @@ export function createIntersectionObserver(_ref) {
     var startTime = performance.now();
     entries.forEach(function (entry) {
       if (!(entry.target instanceof HTMLElement) || !isValidEntry(entry)) {
+        // TODO: Remove this logic when analysis is complete
+        if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
+          if (entry.target instanceof HTMLElement && !isValidEntry(entry) && checkedChildrenCache.get(entry.target) === false) {
+            incrementCheckedInvalidChildrenCount();
+            checkedChildrenCache.set(entry.target, true);
+          }
+        }
         return;
       }
       var mutationTag = null;

package/dist/esm/vc/vc-observer-new/viewport-observer/utils/check-display-content.js

@@ -0,0 +1,39 @@
+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; }
+// TODO: Remove this cache when analysis is complete - it is used to track whether direct children elements will be ignored by the observer
+export var checkedChildrenCache = new WeakMap();
+var checkedInvalidChildrenCount = 0;
+export function incrementCheckedInvalidChildrenCount() {
+  checkedInvalidChildrenCount++;
+}
+export function getInvalidChildrenCount() {
+  return checkedInvalidChildrenCount;
+}
+export default function checkCssProperty(element) {
+  var computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display === 'contents') {
+    // If display is 'contents', we return the direct children of the element
+    var result = [];
+    var _iterator = _createForOfIteratorHelper(element.children),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        if (child instanceof HTMLElement) {
+          if (!checkedChildrenCache.has(child)) {
+            // TODO: Remove this cache when analysis is complete
+            checkedChildrenCache.set(child, false);
+          }
+          result.push(child);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return result;
+  }
+  return [element];
+}

package/dist/types/common/vc/types.d.ts

@@ -115,6 +115,7 @@ export type RevisionPayloadEntry = {
     vcDetails?: RevisionPayloadVCDetails;
     ratios?: VCRatioType;
     abortReason?: VCAbortReason | null;
+    childrenIgnoredCount?: number;
 };
 export type RevisionPayload = RevisionPayloadEntry[];
 export {};

package/dist/types/vc/vc-observer-new/viewport-observer/utils/check-display-content.d.ts

@@ -0,0 +1,4 @@
+export declare const checkedChildrenCache: WeakMap<HTMLElement, boolean>;
+export declare function incrementCheckedInvalidChildrenCount(): void;
+export declare function getInvalidChildrenCount(): number;
+export default function checkCssProperty(element: HTMLElement): Element[];

package/dist/types-ts4.5/common/vc/types.d.ts

@@ -115,6 +115,7 @@ export type RevisionPayloadEntry = {
     vcDetails?: RevisionPayloadVCDetails;
     ratios?: VCRatioType;
     abortReason?: VCAbortReason | null;
+    childrenIgnoredCount?: number;
 };
 export type RevisionPayload = RevisionPayloadEntry[];
 export {};

package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/check-display-content.d.ts

@@ -0,0 +1,4 @@
+export declare const checkedChildrenCache: WeakMap<HTMLElement, boolean>;
+export declare function incrementCheckedInvalidChildrenCount(): void;
+export declare function getInvalidChildrenCount(): number;
+export default function checkCssProperty(element: HTMLElement): Element[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "4.3.1",
+	"version": "4.3.2",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -197,6 +197,9 @@
 		},
 		"platform_ufo_send_vc_100": {
 			"type": "boolean"
+		},
+		"platform_ufo_display_content_resolution_ttvc_v3": {
+			"type": "boolean"
 		}
 	}
 }