@atlaskit/react-ufo 4.15.4 → 4.15.5

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

@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createIntersectionObserver = createIntersectionObserver;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _isZeroDimensionRectangle = require("../utils/is-zero-dimension-rectangle");
+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 isValidEntry(entry) {
   return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
 }
@@ -18,12 +23,50 @@ function createIntersectionObserver(_ref) {
     var validEntries = [];
     var startTime = performance.now();
     entries.forEach(function (entry) {
-      if (!(entry.target instanceof HTMLElement) || !isValidEntry(entry)) {
+      if (!(entry.target instanceof HTMLElement)) {
+        return;
+      }
+      var tagOrCallback = callbacksPerElement.get(entry.target);
+      if ((0, _platformFeatureFlags.fg)('platform_ufo_detect_zero_dimension_rectangles')) {
+        if ((0, _isZeroDimensionRectangle.isZeroDimensionRectangle)(entry.intersectionRect)) {
+          var zeroDimensionRectangleTagCallback = function zeroDimensionRectangleTagCallback(props) {
+            var tagOrCallbackResult = typeof tagOrCallback === 'function' ? tagOrCallback(props) : tagOrCallback;
+
+            // override as display-contents mutation
+            if (tagOrCallbackResult === 'mutation:element') {
+              return 'mutation:display-contents-children-element';
+            }
+
+            // override as display-contents mutation
+            if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute') {
+              return {
+                type: 'mutation:display-contents-children-attribute',
+                mutationData: tagOrCallbackResult.mutationData
+              };
+            }
+            return tagOrCallbackResult;
+          };
+          var _iterator = _createForOfIteratorHelper(entry.target.children),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var child = _step.value;
+              observer.observe(child);
+              callbacksPerElement.set(child, zeroDimensionRectangleTagCallback);
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          return;
+        }
+      }
+      if (!isValidEntry(entry)) {
         return;
       }
       var mutationTag = null;
       var mutationData = null;
-      var tagOrCallback = callbacksPerElement.get(entry.target);
       if (typeof tagOrCallback === 'function') {
         var tagOrCallbackResult = tagOrCallback({
           target: entry.target,

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/get-mutated-elements.js

@@ -10,9 +10,21 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 isElementStyledWithDisplayContents(element) {
+  var _window2;
+  // To minimise calling `getComputedStyle`, we are making an assumption that if an element is from the Entrypoints framework, then it will have `display: contents` styling
+  // as per https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/e4ccf437262ef4c0fd3c651ffb7ad4770b15aed4/jira/src/packages/platform/entry-points/entry-point-placeholder/src/index.tsx#lines-136
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_detect_entrypoint_parent')) {
+    var _window;
+    if (element.hasAttribute('data-ep-placeholder-id')) {
+      return true;
+    }
+    return ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(element)) === null || _window === void 0 ? void 0 : _window.display) === 'contents';
+  }
+  return ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(element)) === null || _window2 === void 0 ? void 0 : _window2.display) === 'contents';
+}
 var MAX_NESTED_LEVELS_OF_DISPLAY_CONTENT_ELEMENTS_HANDLED = 3;
 function getMutatedElements(element) {
-  var _window;
   var depthLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   if ((0, _platformFeatureFlags.fg)('platform_ufo_disable_vcnext_observations')) {
     return [{
@@ -20,16 +32,15 @@ function getMutatedElements(element) {
       isDisplayContentsElementChildren: false
     }];
   }
-  if (((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(element)) === null || _window === void 0 ? void 0 : _window.display) === 'contents') {
+  if (isElementStyledWithDisplayContents(element)) {
     var mutatedElements = [];
     var nestedDisplayContentsElementChildren = [];
     var _iterator = _createForOfIteratorHelper(element.children),
       _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _window2;
         var child = _step.value;
-        if (((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(child)) === null || _window2 === void 0 ? void 0 : _window2.display) === 'contents') {
+        if (isElementStyledWithDisplayContents(child)) {
           nestedDisplayContentsElementChildren.push(child);
         }
         mutatedElements.push({

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/is-zero-dimension-rectangle.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isZeroDimensionRectangle = isZeroDimensionRectangle;
+function isZeroDimensionRectangle(rect) {
+  return rect.bottom === 0 && rect.top === 0 && rect.left === 0 && rect.right === 0 && rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0;
+}

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

@@ -233,6 +233,11 @@ export class SSRPlaceholderHandlers {
       }
     });
   }
+  validateReactComponentMatchToPlaceholderV4(el) {
+    el = this.findNearestPlaceholderContainerIfIgnored(el);
+    const id = this.getPlaceholderReplacementId(el);
+    return this.staticPlaceholders.has(id);
+  }
   hasSameSizePosition(rect, boundingClientRect) {
     if (!rect) {
       return false;

package/dist/es2019/vc/vc-observer-new/metric-calculator/vcnext/index.js

@@ -8,7 +8,10 @@ const getConsideredEntryTypes = () => {
   if (fg('platform_ufo_remove_ssr_placeholder_in_ttvc_v4')) {
     consideredEntryTypes.push('mutation:ssr-placeholder');
   }
-  return ['mutation:display-contents-children-element'];
+  if (fg('platform_ufo_detect_zero_dimension_rectangles')) {
+    consideredEntryTypes.push('mutation:display-contents-children-attribute');
+  }
+  return consideredEntryTypes;
 };
 const getExcludedEntryTypes = () => {
   const excludedEntryTypes = ['layout-shift:same-rect'];

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

@@ -31,6 +31,67 @@ const createElementMutationsWatcher = removedNodeRects => ({
   }
   return 'mutation:element';
 };
+const createElementMutationsWatcherV4 = (removedNodeRects, isWithinThirdPartySegment, hasSameDeletedNode, timestamp, isTargetReactRoot, getSSRState, getSSRPlaceholderHandler) => ({
+  target,
+  rect
+}) => {
+  if (getSSRState) {
+    const ssrState = getSSRState();
+    const SSRStateEnum = {
+      normal: 1,
+      waitingForFirstRender: 2,
+      ignoring: 3
+    };
+    if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && isTargetReactRoot) {
+      ssrState.state = SSRStateEnum.ignoring;
+      if (ssrState.renderStop === -1) {
+        // arbitrary 500ms DOM update window
+        ssrState.renderStop = timestamp + 500;
+      }
+      return 'ssr-hydration';
+    }
+    if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && isTargetReactRoot) {
+      if (timestamp <= ssrState.renderStop) {
+        return 'ssr-hydration';
+      } else {
+        ssrState.state = SSRStateEnum.normal;
+      }
+    }
+  }
+  if (getSSRPlaceholderHandler) {
+    const ssrPlaceholderHandler = getSSRPlaceholderHandler();
+    if (ssrPlaceholderHandler) {
+      if ((ssrPlaceholderHandler.isPlaceholder(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(target)) {
+        return 'mutation:ssr-placeholder';
+      }
+      if ((ssrPlaceholderHandler.isPlaceholderReplacement(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.validateReactComponentMatchToPlaceholderV4(target)) {
+        return 'mutation:ssr-placeholder';
+      }
+    }
+  }
+  if (hasSameDeletedNode && isInVCIgnoreIfNoLayoutShiftMarker(target)) {
+    return 'mutation:remount';
+  }
+  if (isContainedWithinMediaWrapper(target)) {
+    return 'mutation:media';
+  }
+  if (isWithinThirdPartySegment) {
+    return 'mutation:third-party-element';
+  }
+  const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
+  if (!isInIgnoreLsMarker) {
+    return 'mutation:element';
+  }
+  const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+  if (isRLLPlaceholder && isInIgnoreLsMarker) {
+    return 'mutation:rll-placeholder';
+  }
+  const wasDeleted = removedNodeRects.some(nr => isSameRectDimensions(nr, rect));
+  if (wasDeleted && isInIgnoreLsMarker) {
+    return 'mutation:element-replacement';
+  }
+  return 'mutation:element';
+};
 export default class ViewportObserver {
   // SSR context functions
 
@@ -81,96 +142,112 @@ export default class ViewportObserver {
         if (!addedNode) {
           continue;
         }
-        for (const {
-          isDisplayContentsElementChildren,
-          element
-        } of getMutatedElements(addedNode)) {
-          // SSR hydration logic
-          if (this.getSSRState) {
-            const ssrState = this.getSSRState();
-            const SSRStateEnum = {
-              normal: 1,
-              waitingForFirstRender: 2,
-              ignoring: 3
-            };
-            if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
-              var _this$intersectionObs;
-              ssrState.state = SSRStateEnum.ignoring;
-              if (ssrState.renderStop === -1) {
-                // arbitrary 500ms DOM update window
-                ssrState.renderStop = timestamp + 500;
-              }
-              (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(element, 'ssr-hydration');
-              continue;
+        if (fg('platform_ufo_detect_zero_dimension_rectangles')) {
+          var _this$getSSRState, _this$getSSRState$cal, _this$intersectionObs;
+          const hasSameDeletedNode = removedNodes.find(ref => {
+            const n = ref.deref();
+            if (!n || !addedNode) {
+              return false;
             }
-            if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
-              if (timestamp <= ssrState.renderStop) {
+            return n.isEqualNode(addedNode);
+          });
+          const {
+            isWithin: isWithinThirdPartySegment
+          } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
+          const isTargetReactRoot = targetNode === ((_this$getSSRState = this.getSSRState) === null || _this$getSSRState === void 0 ? void 0 : (_this$getSSRState$cal = _this$getSSRState.call(this)) === null || _this$getSSRState$cal === void 0 ? void 0 : _this$getSSRState$cal.reactRootElement);
+          (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, createElementMutationsWatcherV4(removedNodeRects, isWithinThirdPartySegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, this.getSSRState, this.getSSRPlaceholderHandler));
+        } else {
+          for (const {
+            isDisplayContentsElementChildren,
+            element
+          } of getMutatedElements(addedNode)) {
+            // SSR hydration logic
+            if (this.getSSRState) {
+              const ssrState = this.getSSRState();
+              const SSRStateEnum = {
+                normal: 1,
+                waitingForFirstRender: 2,
+                ignoring: 3
+              };
+              if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
                 var _this$intersectionObs2;
+                ssrState.state = SSRStateEnum.ignoring;
+                if (ssrState.renderStop === -1) {
+                  // arbitrary 500ms DOM update window
+                  ssrState.renderStop = timestamp + 500;
+                }
                 (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
                 continue;
-              } else {
-                ssrState.state = SSRStateEnum.normal;
               }
-            }
-          }
-
-          // SSR placeholder logic - check and handle with await
-          if (this.getSSRPlaceholderHandler) {
-            const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
-            if (ssrPlaceholderHandler) {
-              if (ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
-                if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
+              if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
+                if (timestamp <= ssrState.renderStop) {
                   var _this$intersectionObs3;
-                  (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(element, 'mutation:ssr-placeholder');
+                  (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(element, 'ssr-hydration');
                   continue;
+                } else {
+                  ssrState.state = SSRStateEnum.normal;
                 }
-                // If result is false, continue to normal mutation logic below
               }
-              if (ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
-                const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
-                if (result !== false) {
-                  var _this$intersectionObs4;
-                  (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
-                  continue;
+            }
+
+            // SSR placeholder logic - check and handle with await
+            if (this.getSSRPlaceholderHandler) {
+              const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
+              if (ssrPlaceholderHandler) {
+                if (ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
+                  if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
+                    var _this$intersectionObs4;
+                    (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
+                    continue;
+                  }
+                  // If result is false, continue to normal mutation logic below
+                }
+                if (ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
+                  const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
+                  if (result !== false) {
+                    var _this$intersectionObs5;
+                    (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(element, 'mutation:ssr-placeholder');
+                    continue;
+                  }
+                  // If result is false, continue to normal mutation logic below
                 }
-                // If result is false, continue to normal mutation logic below
               }
             }
-          }
-          const sameDeletedNode = removedNodes.find(ref => {
-            const n = ref.deref();
-            if (!n || !element) {
-              return false;
+            const sameDeletedNode = removedNodes.find(ref => {
+              const n = ref.deref();
+              if (!n || !element) {
+                return false;
+              }
+              return n.isEqualNode(element);
+            });
+            const isInIgnoreLsMarker = element instanceof HTMLElement ? isInVCIgnoreIfNoLayoutShiftMarker(element) : false;
+            if (sameDeletedNode && isInIgnoreLsMarker) {
+              var _this$intersectionObs6;
+              (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(element, 'mutation:remount');
+              continue;
+            }
+            if (isContainedWithinMediaWrapper(element)) {
+              var _this$intersectionObs7;
+              (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(element, 'mutation:media');
+              continue;
+            }
+            const {
+              isWithin: isWithinThirdPartySegment
+            } = element instanceof HTMLElement ? checkWithinComponent(element, 'UFOThirdPartySegment', this.mapIs3pResult) : {
+              isWithin: false
+            };
+            if (isWithinThirdPartySegment) {
+              var _this$intersectionObs8;
+              (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(element, 'mutation:third-party-element');
+              continue;
+            }
+            if (isDisplayContentsElementChildren) {
+              var _this$intersectionObs9;
+              (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(element, 'mutation:display-contents-children-element');
+            } else {
+              var _this$intersectionObs0;
+              (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
             }
-            return n.isEqualNode(element);
-          });
-          const isInIgnoreLsMarker = element instanceof HTMLElement ? isInVCIgnoreIfNoLayoutShiftMarker(element) : false;
-          if (sameDeletedNode && isInIgnoreLsMarker) {
-            var _this$intersectionObs5;
-            (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(element, 'mutation:remount');
-            continue;
-          }
-          if (isContainedWithinMediaWrapper(element)) {
-            var _this$intersectionObs6;
-            (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(element, 'mutation:media');
-            continue;
-          }
-          const {
-            isWithin: isWithinThirdPartySegment
-          } = element instanceof HTMLElement ? checkWithinComponent(element, 'UFOThirdPartySegment', this.mapIs3pResult) : {
-            isWithin: false
-          };
-          if (isWithinThirdPartySegment) {
-            var _this$intersectionObs7;
-            (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(element, 'mutation:third-party-element');
-            continue;
-          }
-          if (isDisplayContentsElementChildren) {
-            var _this$intersectionObs8;
-            (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(element, 'mutation:display-contents-children-element');
-          } else {
-            var _this$intersectionObs9;
-            (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
           }
         }
       }
@@ -181,8 +258,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
       }) => {
@@ -339,12 +416,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 { isZeroDimensionRectangle } from '../utils/is-zero-dimension-rectangle';
 function isValidEntry(entry) {
   return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
 }
@@ -14,12 +16,41 @@ export function createIntersectionObserver({
     const startTime = performance.now();
     entries.forEach(entry => {
       var _mutationTag;
-      if (!(entry.target instanceof HTMLElement) || !isValidEntry(entry)) {
+      if (!(entry.target instanceof HTMLElement)) {
+        return;
+      }
+      const tagOrCallback = callbacksPerElement.get(entry.target);
+      if (fg('platform_ufo_detect_zero_dimension_rectangles')) {
+        if (isZeroDimensionRectangle(entry.intersectionRect)) {
+          const zeroDimensionRectangleTagCallback = props => {
+            const tagOrCallbackResult = typeof tagOrCallback === 'function' ? tagOrCallback(props) : tagOrCallback;
+
+            // override as display-contents mutation
+            if (tagOrCallbackResult === 'mutation:element') {
+              return 'mutation:display-contents-children-element';
+            }
+
+            // override as display-contents mutation
+            if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute') {
+              return {
+                type: 'mutation:display-contents-children-attribute',
+                mutationData: tagOrCallbackResult.mutationData
+              };
+            }
+            return tagOrCallbackResult;
+          };
+          for (const child of entry.target.children) {
+            observer.observe(child);
+            callbacksPerElement.set(child, zeroDimensionRectangleTagCallback);
+          }
+          return;
+        }
+      }
+      if (!isValidEntry(entry)) {
         return;
       }
       let mutationTag = null;
       let mutationData = null;
-      const tagOrCallback = callbacksPerElement.get(entry.target);
       if (typeof tagOrCallback === 'function') {
         const tagOrCallbackResult = tagOrCallback({
           target: entry.target,

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/get-mutated-elements.js

@@ -1,19 +1,30 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+function isElementStyledWithDisplayContents(element) {
+  var _window2, _window2$getComputedS;
+  // To minimise calling `getComputedStyle`, we are making an assumption that if an element is from the Entrypoints framework, then it will have `display: contents` styling
+  // as per https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/e4ccf437262ef4c0fd3c651ffb7ad4770b15aed4/jira/src/packages/platform/entry-points/entry-point-placeholder/src/index.tsx#lines-136
+  if (fg('platform_ufo_detect_entrypoint_parent')) {
+    var _window, _window$getComputedSt;
+    if (element.hasAttribute('data-ep-placeholder-id')) {
+      return true;
+    }
+    return ((_window = window) === null || _window === void 0 ? void 0 : (_window$getComputedSt = _window.getComputedStyle(element)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.display) === 'contents';
+  }
+  return ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$getComputedS = _window2.getComputedStyle(element)) === null || _window2$getComputedS === void 0 ? void 0 : _window2$getComputedS.display) === 'contents';
+}
 const MAX_NESTED_LEVELS_OF_DISPLAY_CONTENT_ELEMENTS_HANDLED = 3;
 export function getMutatedElements(element, depthLevel = 0) {
-  var _window, _window$getComputedSt;
   if (fg('platform_ufo_disable_vcnext_observations')) {
     return [{
       element,
       isDisplayContentsElementChildren: false
     }];
   }
-  if (((_window = window) === null || _window === void 0 ? void 0 : (_window$getComputedSt = _window.getComputedStyle(element)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.display) === 'contents') {
+  if (isElementStyledWithDisplayContents(element)) {
     const mutatedElements = [];
     const nestedDisplayContentsElementChildren = [];
     for (const child of element.children) {
-      var _window2, _window2$getComputedS;
-      if (((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$getComputedS = _window2.getComputedStyle(child)) === null || _window2$getComputedS === void 0 ? void 0 : _window2$getComputedS.display) === 'contents') {
+      if (isElementStyledWithDisplayContents(child)) {
         nestedDisplayContentsElementChildren.push(child);
       }
       mutatedElements.push({

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/is-zero-dimension-rectangle.js

@@ -0,0 +1,3 @@
+export function isZeroDimensionRectangle(rect) {
+  return rect.bottom === 0 && rect.top === 0 && rect.left === 0 && rect.right === 0 && rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0;
+}

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

@@ -266,6 +266,13 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         }
       });
     }
+  }, {
+    key: "validateReactComponentMatchToPlaceholderV4",
+    value: function validateReactComponentMatchToPlaceholderV4(el) {
+      el = this.findNearestPlaceholderContainerIfIgnored(el);
+      var id = this.getPlaceholderReplacementId(el);
+      return this.staticPlaceholders.has(id);
+    }
   }, {
     key: "hasSameSizePosition",
     value: function hasSameSizePosition(rect, boundingClientRect) {

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

@@ -17,7 +17,10 @@ var getConsideredEntryTypes = function getConsideredEntryTypes() {
   if (fg('platform_ufo_remove_ssr_placeholder_in_ttvc_v4')) {
     consideredEntryTypes.push('mutation:ssr-placeholder');
   }
-  return ['mutation:display-contents-children-element'];
+  if (fg('platform_ufo_detect_zero_dimension_rectangles')) {
+    consideredEntryTypes.push('mutation:display-contents-children-attribute');
+  }
+  return consideredEntryTypes;
 };
 var getExcludedEntryTypes = function getExcludedEntryTypes() {
   var excludedEntryTypes = ['layout-shift:same-rect'];