@atlaskit/react-ufo 4.15.3 → 4.15.5

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

@@ -41,21 +41,85 @@ var createElementMutationsWatcher = function createElementMutationsWatcher(remov
     return 'mutation:element';
   };
 };
+var createElementMutationsWatcherV4 = function createElementMutationsWatcherV4(removedNodeRects, isWithinThirdPartySegment, hasSameDeletedNode, timestamp, isTargetReactRoot, getSSRState, getSSRPlaceholderHandler) {
+  return function (_ref2) {
+    var target = _ref2.target,
+      rect = _ref2.rect;
+    if (getSSRState) {
+      var ssrState = getSSRState();
+      var 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) {
+      var 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';
+    }
+    var isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
+    if (!isInIgnoreLsMarker) {
+      return 'mutation:element';
+    }
+    var isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+    if (isRLLPlaceholder && isInIgnoreLsMarker) {
+      return 'mutation:rll-placeholder';
+    }
+    var wasDeleted = removedNodeRects.some(function (nr) {
+      return isSameRectDimensions(nr, rect);
+    });
+    if (wasDeleted && isInIgnoreLsMarker) {
+      return 'mutation:element-replacement';
+    }
+    return 'mutation:element';
+  };
+};
 var ViewportObserver = /*#__PURE__*/function () {
   // SSR context functions
 
-  function ViewportObserver(_ref2) {
+  function ViewportObserver(_ref3) {
     var _this = this;
-    var onChange = _ref2.onChange,
-      getSSRState = _ref2.getSSRState,
-      getSSRPlaceholderHandler = _ref2.getSSRPlaceholderHandler;
+    var onChange = _ref3.onChange,
+      getSSRState = _ref3.getSSRState,
+      getSSRPlaceholderHandler = _ref3.getSSRPlaceholderHandler;
     _classCallCheck(this, ViewportObserver);
-    _defineProperty(this, "handleIntersectionEntry", function (_ref3) {
-      var target = _ref3.target,
-        rect = _ref3.rect,
-        time = _ref3.time,
-        type = _ref3.type,
-        mutationData = _ref3.mutationData;
+    _defineProperty(this, "handleIntersectionEntry", function (_ref4) {
+      var target = _ref4.target,
+        rect = _ref4.rect,
+        time = _ref4.time,
+        type = _ref4.type,
+        mutationData = _ref4.mutationData;
       if (!target) {
         return;
       }
@@ -73,12 +137,12 @@ var ViewportObserver = /*#__PURE__*/function () {
       });
     });
     _defineProperty(this, "handleChildListMutation", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref4) {
-        var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, addedNodeRef, addedNode, _iterator2, _step2, _loop, _ret;
-        return _regeneratorRuntime.wrap(function _callee$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref5) {
+        var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, _loop;
+        return _regeneratorRuntime.wrap(function _callee$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              target = _ref4.target, addedNodes = _ref4.addedNodes, removedNodes = _ref4.removedNodes, timestamp = _ref4.timestamp;
+              target = _ref5.target, addedNodes = _ref5.addedNodes, removedNodes = _ref5.removedNodes, timestamp = _ref5.timestamp;
               removedNodeRects = removedNodes.map(function (ref) {
                 var n = ref.deref();
                 if (!n) {
@@ -88,203 +152,238 @@ var ViewportObserver = /*#__PURE__*/function () {
               });
               targetNode = target.deref();
               _iterator = _createForOfIteratorHelper(addedNodes);
-              _context2.prev = 4;
-              _iterator.s();
-            case 6:
-              if ((_step = _iterator.n()).done) {
-                _context2.next = 32;
-                break;
-              }
-              addedNodeRef = _step.value;
-              addedNode = addedNodeRef.deref();
-              if (addedNode) {
-                _context2.next = 11;
-                break;
-              }
-              return _context2.abrupt("continue", 30);
-            case 11:
-              _iterator2 = _createForOfIteratorHelper(getMutatedElements(addedNode));
-              _context2.prev = 12;
+              _context3.prev = 4;
               _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
-                var _step2$value, isDisplayContentsElementChildren, element, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs5, _this$intersectionObs6, _ref6, isWithinThirdPartySegment, _this$intersectionObs7, _this$intersectionObs8, _this$intersectionObs9;
-                return _regeneratorRuntime.wrap(function _loop$(_context) {
-                  while (1) switch (_context.prev = _context.next) {
+                var addedNodeRef, addedNode, _this$getSSRState, _this$intersectionObs, hasSameDeletedNode, _checkWithinComponent, isWithinThirdPartySegment, isTargetReactRoot, _iterator2, _step2, _loop2, _ret;
+                return _regeneratorRuntime.wrap(function _loop$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
                     case 0:
-                      _step2$value = _step2.value, isDisplayContentsElementChildren = _step2$value.isDisplayContentsElementChildren, element = _step2$value.element;
-                      if (!_this.getSSRState) {
-                        _context.next = 16;
-                        break;
-                      }
-                      ssrState = _this.getSSRState();
-                      SSRStateEnum = {
-                        normal: 1,
-                        waitingForFirstRender: 2,
-                        ignoring: 3
-                      };
-                      if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
-                        _context.next = 9;
-                        break;
-                      }
-                      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 || _this$intersectionObs.watchAndTag(element, 'ssr-hydration');
-                      return _context.abrupt("return", 0);
-                    case 9:
-                      if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
-                        _context.next = 16;
-                        break;
-                      }
-                      if (!(timestamp <= ssrState.renderStop)) {
-                        _context.next = 15;
-                        break;
-                      }
-                      (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
-                      return _context.abrupt("return", 0);
-                    case 15:
-                      ssrState.state = SSRStateEnum.normal;
-                    case 16:
-                      if (!_this.getSSRPlaceholderHandler) {
-                        _context.next = 30;
-                        break;
-                      }
-                      ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
-                      if (!ssrPlaceholderHandler) {
-                        _context.next = 30;
-                        break;
-                      }
-                      if (!(ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
-                        _context.next = 23;
-                        break;
-                      }
-                      if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
-                        _context.next = 23;
-                        break;
-                      }
-                      (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(element, 'mutation:ssr-placeholder');
-                      return _context.abrupt("return", 0);
-                    case 23:
-                      if (!(ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
-                        _context.next = 30;
+                      addedNodeRef = _step.value;
+                      addedNode = addedNodeRef.deref();
+                      if (addedNode) {
+                        _context2.next = 4;
                         break;
                       }
-                      _context.next = 26;
-                      return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
-                    case 26:
-                      result = _context.sent;
-                      if (!(result !== false)) {
-                        _context.next = 30;
+                      return _context2.abrupt("return", 1);
+                    case 4:
+                      if (!fg('platform_ufo_detect_zero_dimension_rectangles')) {
+                        _context2.next = 11;
                         break;
                       }
-                      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
-                      return _context.abrupt("return", 0);
-                    case 30:
-                      sameDeletedNode = removedNodes.find(function (ref) {
+                      hasSameDeletedNode = removedNodes.find(function (ref) {
                         var n = ref.deref();
-                        if (!n || !element) {
+                        if (!n || !addedNode) {
                           return false;
                         }
-                        return n.isEqualNode(element);
+                        return n.isEqualNode(addedNode);
                       });
-                      isInIgnoreLsMarker = element instanceof HTMLElement ? isInVCIgnoreIfNoLayoutShiftMarker(element) : false;
-                      if (!(sameDeletedNode && isInIgnoreLsMarker)) {
-                        _context.next = 35;
-                        break;
-                      }
-                      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(element, 'mutation:remount');
-                      return _context.abrupt("return", 0);
-                    case 35:
-                      if (!isContainedWithinMediaWrapper(element)) {
-                        _context.next = 38;
+                      _checkWithinComponent = checkWithinComponent(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
+                      isTargetReactRoot = targetNode === ((_this$getSSRState = _this.getSSRState) === null || _this$getSSRState === void 0 || (_this$getSSRState = _this$getSSRState.call(_this)) === null || _this$getSSRState === void 0 ? void 0 : _this$getSSRState.reactRootElement);
+                      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, createElementMutationsWatcherV4(removedNodeRects, isWithinThirdPartySegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, _this.getSSRState, _this.getSSRPlaceholderHandler));
+                      _context2.next = 30;
+                      break;
+                    case 11:
+                      _iterator2 = _createForOfIteratorHelper(getMutatedElements(addedNode));
+                      _context2.prev = 12;
+                      _loop2 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop2() {
+                        var _step2$value, isDisplayContentsElementChildren, element, ssrState, SSRStateEnum, _this$intersectionObs2, _this$intersectionObs3, ssrPlaceholderHandler, _this$intersectionObs4, result, _this$intersectionObs5, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs6, _this$intersectionObs7, _ref7, isWithinThirdPartySegment, _this$intersectionObs8, _this$intersectionObs9, _this$intersectionObs0;
+                        return _regeneratorRuntime.wrap(function _loop2$(_context) {
+                          while (1) switch (_context.prev = _context.next) {
+                            case 0:
+                              _step2$value = _step2.value, isDisplayContentsElementChildren = _step2$value.isDisplayContentsElementChildren, element = _step2$value.element;
+                              if (!_this.getSSRState) {
+                                _context.next = 16;
+                                break;
+                              }
+                              ssrState = _this.getSSRState();
+                              SSRStateEnum = {
+                                normal: 1,
+                                waitingForFirstRender: 2,
+                                ignoring: 3
+                              };
+                              if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
+                                _context.next = 9;
+                                break;
+                              }
+                              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 || _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
+                              return _context.abrupt("return", 0);
+                            case 9:
+                              if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
+                                _context.next = 16;
+                                break;
+                              }
+                              if (!(timestamp <= ssrState.renderStop)) {
+                                _context.next = 15;
+                                break;
+                              }
+                              (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(element, 'ssr-hydration');
+                              return _context.abrupt("return", 0);
+                            case 15:
+                              ssrState.state = SSRStateEnum.normal;
+                            case 16:
+                              if (!_this.getSSRPlaceholderHandler) {
+                                _context.next = 30;
+                                break;
+                              }
+                              ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
+                              if (!ssrPlaceholderHandler) {
+                                _context.next = 30;
+                                break;
+                              }
+                              if (!(ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
+                                _context.next = 23;
+                                break;
+                              }
+                              if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
+                                _context.next = 23;
+                                break;
+                              }
+                              (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
+                              return _context.abrupt("return", 0);
+                            case 23:
+                              if (!(ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
+                                _context.next = 30;
+                                break;
+                              }
+                              _context.next = 26;
+                              return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
+                            case 26:
+                              result = _context.sent;
+                              if (!(result !== false)) {
+                                _context.next = 30;
+                                break;
+                              }
+                              (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(element, 'mutation:ssr-placeholder');
+                              return _context.abrupt("return", 0);
+                            case 30:
+                              sameDeletedNode = removedNodes.find(function (ref) {
+                                var n = ref.deref();
+                                if (!n || !element) {
+                                  return false;
+                                }
+                                return n.isEqualNode(element);
+                              });
+                              isInIgnoreLsMarker = element instanceof HTMLElement ? isInVCIgnoreIfNoLayoutShiftMarker(element) : false;
+                              if (!(sameDeletedNode && isInIgnoreLsMarker)) {
+                                _context.next = 35;
+                                break;
+                              }
+                              (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(element, 'mutation:remount');
+                              return _context.abrupt("return", 0);
+                            case 35:
+                              if (!isContainedWithinMediaWrapper(element)) {
+                                _context.next = 38;
+                                break;
+                              }
+                              (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(element, 'mutation:media');
+                              return _context.abrupt("return", 0);
+                            case 38:
+                              _ref7 = element instanceof HTMLElement ? checkWithinComponent(element, 'UFOThirdPartySegment', _this.mapIs3pResult) : {
+                                isWithin: false
+                              }, isWithinThirdPartySegment = _ref7.isWithin;
+                              if (!isWithinThirdPartySegment) {
+                                _context.next = 42;
+                                break;
+                              }
+                              (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(element, 'mutation:third-party-element');
+                              return _context.abrupt("return", 0);
+                            case 42:
+                              if (isDisplayContentsElementChildren) {
+                                (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(element, 'mutation:display-contents-children-element');
+                              } else {
+                                (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
+                              }
+                            case 43:
+                            case "end":
+                              return _context.stop();
+                          }
+                        }, _loop2);
+                      });
+                      _iterator2.s();
+                    case 15:
+                      if ((_step2 = _iterator2.n()).done) {
+                        _context2.next = 22;
                         break;
                       }
-                      (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(element, 'mutation:media');
-                      return _context.abrupt("return", 0);
-                    case 38:
-                      _ref6 = element instanceof HTMLElement ? checkWithinComponent(element, 'UFOThirdPartySegment', _this.mapIs3pResult) : {
-                        isWithin: false
-                      }, isWithinThirdPartySegment = _ref6.isWithin;
-                      if (!isWithinThirdPartySegment) {
-                        _context.next = 42;
+                      return _context2.delegateYield(_loop2(), "t0", 17);
+                    case 17:
+                      _ret = _context2.t0;
+                      if (!(_ret === 0)) {
+                        _context2.next = 20;
                         break;
                       }
-                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(element, 'mutation:third-party-element');
-                      return _context.abrupt("return", 0);
-                    case 42:
-                      if (isDisplayContentsElementChildren) {
-                        (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(element, 'mutation:display-contents-children-element');
-                      } else {
-                        (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
-                      }
-                    case 43:
+                      return _context2.abrupt("continue", 20);
+                    case 20:
+                      _context2.next = 15;
+                      break;
+                    case 22:
+                      _context2.next = 27;
+                      break;
+                    case 24:
+                      _context2.prev = 24;
+                      _context2.t1 = _context2["catch"](12);
+                      _iterator2.e(_context2.t1);
+                    case 27:
+                      _context2.prev = 27;
+                      _iterator2.f();
+                      return _context2.finish(27);
+                    case 30:
                     case "end":
-                      return _context.stop();
+                      return _context2.stop();
                   }
-                }, _loop);
+                }, _loop, null, [[12, 24, 27, 30]]);
               });
-              _iterator2.s();
-            case 15:
-              if ((_step2 = _iterator2.n()).done) {
-                _context2.next = 22;
+              _iterator.s();
+            case 7:
+              if ((_step = _iterator.n()).done) {
+                _context3.next = 13;
                 break;
               }
-              return _context2.delegateYield(_loop(), "t0", 17);
-            case 17:
-              _ret = _context2.t0;
-              if (!(_ret === 0)) {
-                _context2.next = 20;
+              return _context3.delegateYield(_loop(), "t0", 9);
+            case 9:
+              if (!_context3.t0) {
+                _context3.next = 11;
                 break;
               }
-              return _context2.abrupt("continue", 20);
-            case 20:
-              _context2.next = 15;
-              break;
-            case 22:
-              _context2.next = 27;
-              break;
-            case 24:
-              _context2.prev = 24;
-              _context2.t1 = _context2["catch"](12);
-              _iterator2.e(_context2.t1);
-            case 27:
-              _context2.prev = 27;
-              _iterator2.f();
-              return _context2.finish(27);
-            case 30:
-              _context2.next = 6;
+              return _context3.abrupt("continue", 11);
+            case 11:
+              _context3.next = 7;
               break;
-            case 32:
-              _context2.next = 37;
+            case 13:
+              _context3.next = 18;
               break;
-            case 34:
-              _context2.prev = 34;
-              _context2.t2 = _context2["catch"](4);
-              _iterator.e(_context2.t2);
-            case 37:
-              _context2.prev = 37;
+            case 15:
+              _context3.prev = 15;
+              _context3.t1 = _context3["catch"](4);
+              _iterator.e(_context3.t1);
+            case 18:
+              _context3.prev = 18;
               _iterator.f();
-              return _context2.finish(37);
-            case 40:
+              return _context3.finish(18);
+            case 21:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee, null, [[4, 34, 37, 40], [12, 24, 27, 30]]);
+        }, _callee, null, [[4, 15, 18, 21]]);
       }));
       return function (_x) {
-        return _ref5.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }());
-    _defineProperty(this, "handleAttributeMutation", function (_ref7) {
-      var _this$intersectionObs0;
-      var target = _ref7.target,
-        attributeName = _ref7.attributeName,
-        oldValue = _ref7.oldValue,
-        newValue = _ref7.newValue;
-      (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref8) {
-        var target = _ref8.target,
-          rect = _ref8.rect;
+    _defineProperty(this, "handleAttributeMutation", function (_ref8) {
+      var _this$intersectionObs1;
+      var target = _ref8.target,
+        attributeName = _ref8.attributeName,
+        oldValue = _ref8.oldValue,
+        newValue = _ref8.newValue;
+      (_this$intersectionObs1 = _this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.watchAndTag(target, function (_ref9) {
+        var target = _ref9.target,
+          rect = _ref9.rect;
         if (isContainedWithinMediaWrapper(target)) {
           return {
             type: 'mutation:media',
@@ -296,8 +395,8 @@ var ViewportObserver = /*#__PURE__*/function () {
           };
         }
         if (fg('platform_ufo_exclude_3p_attribute_changes')) {
-          var _checkWithinComponent = checkWithinComponent(target, 'UFOThirdPartySegment', _this.mapIs3pResult),
-            isWithinThirdPartySegment = _checkWithinComponent.isWithin;
+          var _checkWithinComponent2 = checkWithinComponent(target, 'UFOThirdPartySegment', _this.mapIs3pResult),
+            isWithinThirdPartySegment = _checkWithinComponent2.isWithin;
           if (isWithinThirdPartySegment) {
             return {
               type: 'mutation:third-party-attribute',
@@ -370,9 +469,9 @@ var ViewportObserver = /*#__PURE__*/function () {
         };
       });
     });
-    _defineProperty(this, "handleLayoutShift", function (_ref9) {
-      var time = _ref9.time,
-        changedRects = _ref9.changedRects;
+    _defineProperty(this, "handleLayoutShift", function (_ref0) {
+      var time = _ref0.time,
+        changedRects = _ref0.changedRects;
       var _iterator3 = _createForOfIteratorHelper(changedRects),
         _step3;
       try {
@@ -451,12 +550,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,8 @@
+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; }
+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;
 }
@@ -12,12 +17,50 @@ export 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 (fg('platform_ufo_detect_zero_dimension_rectangles')) {
+        if (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,