@atlaskit/react-ufo 3.14.6 → 3.14.7

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

@@ -25,9 +25,7 @@ function isElementVisible(target) {
 }
 export var Observers = /*#__PURE__*/function () {
   function Observers(opts) {
-    var _this = this,
-      _opts$SSRConfig,
-      _opts$SSRConfig2;
+    var _this = this;
     _classCallCheck(this, Observers);
     _defineProperty(this, "observedMutations", new WeakMap());
     _defineProperty(this, "elementsInView", new Set());
@@ -67,10 +65,17 @@ export var Observers = /*#__PURE__*/function () {
     this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
-      enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
-    });
+
+    // Use shared SSR placeholder handler if provided, otherwise create new one
+    if (opts.ssrPlaceholderHandler) {
+      this.ssrPlaceholderHandler = opts.ssrPlaceholderHandler;
+    } else {
+      var _opts$SSRConfig, _opts$SSRConfig2;
+      this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
+        enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
+        disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
+      });
+    }
   }
   return _createClass(Observers, [{
     key: "isBrowserSupported",

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

@@ -104,32 +104,8 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
     this.disableSizeAndPositionCheck = disableSizeAndPositionCheck;
     if (window.document) {
       try {
-        var selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
-        var existingElements = document.querySelectorAll(selector);
-        existingElements.forEach(function (el) {
-          var placeholderId = el instanceof HTMLElement && _this.getPlaceholderId(el);
-          if (placeholderId) {
-            var _window$__SSR_PLACEHO, _this$intersectionObs2;
-            var width = -1;
-            var height = -1;
-            var x = -1;
-            var y = -1;
-            var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
-            if (boundingClientRect) {
-              width = boundingClientRect.width;
-              height = boundingClientRect.height;
-              x = boundingClientRect.x;
-              y = boundingClientRect.y;
-            }
-            _this.staticPlaceholders.set(placeholderId, {
-              width: width,
-              height: height,
-              x: x,
-              y: y
-            });
-            (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.observe(el);
-          }
-        });
+        // Collect initial placeholders using SSR dimensions
+        this.collectPlaceholdersInternal();
       } catch (e) {} finally {
         delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
       }
@@ -143,6 +119,66 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
       this.getSizeCallbacks = new Map();
       this.reactValidateCallbacks = new Map();
     }
+  }, {
+    key: "collectPlaceholdersInternal",
+    value: function collectPlaceholdersInternal() {
+      var _this2 = this;
+      var selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+      var existingElements = document.querySelectorAll(selector);
+      existingElements.forEach(function (el) {
+        var placeholderId = el instanceof HTMLElement && _this2.getPlaceholderId(el);
+        if (placeholderId && !_this2.staticPlaceholders.has(placeholderId)) {
+          var _window$__SSR_PLACEHO, _this2$intersectionOb;
+          var width = -1;
+          var height = -1;
+          var x = -1;
+          var y = -1;
+
+          // Use SSR dimensions from window global if available
+          var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
+          if (boundingClientRect) {
+            width = boundingClientRect.width;
+            height = boundingClientRect.height;
+            x = boundingClientRect.x;
+            y = boundingClientRect.y;
+          } else {
+            // Fallback to current bounding rect if SSR dimensions not available
+            var rect = el.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+            x = rect.x;
+            y = rect.y;
+          }
+          _this2.staticPlaceholders.set(placeholderId, {
+            width: width,
+            height: height,
+            x: x,
+            y: y
+          });
+          (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.observe(el);
+        }
+      });
+    }
+
+    /**
+     * Added this method to be utilised for testing purposes.
+     * In production it collection placeholder should only happens on constructor
+     */
+  }, {
+    key: "collectExistingPlaceholders",
+    value: function collectExistingPlaceholders() {
+      if (!window.document) {
+        return;
+      }
+      try {
+        // Collect placeholders using SSR dimensions or fallback to live dimensions
+        this.collectPlaceholdersInternal();
+      } catch (e) {
+        // Silently fail if there are any issues
+      } finally {
+        delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
+      }
+    }
   }, {
     key: "isPlaceholder",
     value: function isPlaceholder(element) {
@@ -179,44 +215,44 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   }, {
     key: "checkIfExistedAndSizeMatching",
     value: function checkIfExistedAndSizeMatching(el) {
-      var _this2 = this;
+      var _this3 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
       var id = this.getPlaceholderId(el);
       return new Promise(function (resolve) {
-        if (!_this2.staticPlaceholders.has(id)) {
+        if (!_this3.staticPlaceholders.has(id)) {
           resolve(false);
           return;
         } else {
-          var _this2$intersectionOb;
-          _this2.callbacks.set(id, resolve);
-          (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.observe(el);
+          var _this3$intersectionOb;
+          _this3.callbacks.set(id, resolve);
+          (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
         }
       });
     }
   }, {
     key: "getSize",
     value: function getSize(el) {
-      var _this3 = this;
+      var _this4 = this;
       return new Promise(function (resolve) {
-        var _this3$intersectionOb;
-        _this3.getSizeCallbacks.set(_this3.getPlaceholderId(el), resolve);
-        (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
+        var _this4$intersectionOb;
+        _this4.getSizeCallbacks.set(_this4.getPlaceholderId(el), resolve);
+        (_this4$intersectionOb = _this4.intersectionObserver) === null || _this4$intersectionOb === void 0 || _this4$intersectionOb.observe(el);
       });
     }
   }, {
     key: "validateReactComponentMatchToPlaceholder",
     value: function validateReactComponentMatchToPlaceholder(el) {
-      var _this4 = this;
+      var _this5 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
       var id = this.getPlaceholderReplacementId(el);
       return new Promise(function (resolve) {
-        if (!_this4.staticPlaceholders.has(id)) {
+        if (!_this5.staticPlaceholders.has(id)) {
           resolve(false);
           return;
         } else {
-          var _this4$intersectionOb;
-          _this4.reactValidateCallbacks.set(id, resolve);
-          (_this4$intersectionOb = _this4.intersectionObserver) === null || _this4$intersectionOb === void 0 || _this4$intersectionOb.observe(el);
+          var _this5$intersectionOb;
+          _this5.reactValidateCallbacks.set(id, resolve);
+          (_this5$intersectionOb = _this5.intersectionObserver) === null || _this5$intersectionOb === void 0 || _this5$intersectionOb.observe(el);
         }
       });
     }

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

@@ -6,6 +6,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { SSRPlaceholderHandlers } from '../vc-observer/observers/ssr-placeholders';
 import EntriesTimeline from './entries-timeline';
 import _getElementName from './get-element-name';
 import VCCalculator_FY25_03 from './metric-calculator/fy25_03';
@@ -13,6 +14,11 @@ import getViewportHeight from './metric-calculator/utils/get-viewport-height';
 import getViewportWidth from './metric-calculator/utils/get-viewport-width';
 import ViewportObserver from './viewport-observer';
 import WindowEventObserver from './window-event-observer';
+var SSRState = {
+  normal: 1,
+  waitingForFirstRender: 2,
+  ignoring: 3
+};
 var DEFAULT_SELECTOR_CONFIG = {
   id: false,
   testId: true,
@@ -28,9 +34,31 @@ var VCObserverNew = /*#__PURE__*/function () {
     _classCallCheck(this, VCObserverNew);
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
+    // SSR related properties
+    _defineProperty(this, "ssrPlaceholderHandler", null);
+    _defineProperty(this, "ssr", {
+      state: SSRState.normal,
+      reactRootElement: null,
+      renderStart: -1,
+      renderStop: -1
+    });
     this.entriesTimeline = new EntriesTimeline();
     this.isPostInteraction = (_config$isPostInterac = config.isPostInteraction) !== null && _config$isPostInterac !== void 0 ? _config$isPostInterac : false;
     this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
+
+    // Use shared SSR placeholder handler if provided, otherwise create new one if feature flag is enabled
+    if (config.ssrPlaceholderHandler) {
+      this.ssrPlaceholderHandler = config.ssrPlaceholderHandler;
+    } else {
+      var _config$SSRConfig$ena, _config$SSRConfig, _config$SSRConfig$dis, _config$SSRConfig2;
+      this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
+        enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false,
+        disableSizeAndPositionCheck: (_config$SSRConfig$dis = (_config$SSRConfig2 = config.SSRConfig) === null || _config$SSRConfig2 === void 0 ? void 0 : _config$SSRConfig2.disableSizeAndPositionCheck) !== null && _config$SSRConfig$dis !== void 0 ? _config$SSRConfig$dis : {
+          v: false,
+          h: false
+        }
+      });
+    }
     this.viewportObserver = new ViewportObserver({
       onChange: function onChange(onChangeArg) {
         var time = onChangeArg.time,
@@ -58,6 +86,13 @@ var VCObserverNew = /*#__PURE__*/function () {
             newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
           }
         });
+      },
+      // Pass SSR context to ViewportObserver
+      getSSRState: function getSSRState() {
+        return _this.getSSRState();
+      },
+      getSSRPlaceholderHandler: function getSSRPlaceholderHandler() {
+        return _this.getSSRPlaceholderHandler();
       }
     });
     this.windowEventObserver = new WindowEventObserver({
@@ -82,6 +117,14 @@ var VCObserverNew = /*#__PURE__*/function () {
         _this2 = this,
         _this$windowEventObse;
       var startTime = _ref2.startTime;
+      // Reset SSR state on start (matches old VCObserver behavior)
+      this.ssr = {
+        state: SSRState.normal,
+        reactRootElement: null,
+        // Reset to null (matches old VCObserver)
+        renderStart: -1,
+        renderStop: -1
+      };
       (_this$viewportObserve = this.viewportObserver) === null || _this$viewportObserve === void 0 || _this$viewportObserve.start();
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__ && fg('platform_ufo_vc_observer_new_ssr_abort_listener')) {
         var abortListeners = window.__SSR_ABORT_LISTENERS__;
@@ -112,6 +155,47 @@ var VCObserverNew = /*#__PURE__*/function () {
       var _this$viewportObserve2, _this$windowEventObse2;
       (_this$viewportObserve2 = this.viewportObserver) === null || _this$viewportObserve2 === void 0 || _this$viewportObserve2.stop();
       (_this$windowEventObse2 = this.windowEventObserver) === null || _this$windowEventObse2 === void 0 || _this$windowEventObse2.stop();
+
+      // Clear SSR state on stop (matches old VCObserver behavior)
+      this.ssr.reactRootElement = null;
+    }
+
+    // SSR related methods
+  }, {
+    key: "setReactRootElement",
+    value: function setReactRootElement(element) {
+      this.ssr.reactRootElement = element;
+    }
+  }, {
+    key: "setReactRootRenderStart",
+    value: function setReactRootRenderStart() {
+      var startTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
+      this.ssr.renderStart = startTime;
+      this.ssr.state = SSRState.waitingForFirstRender;
+    }
+  }, {
+    key: "setReactRootRenderStop",
+    value: function setReactRootRenderStop() {
+      var stopTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
+      this.ssr.renderStop = stopTime;
+    }
+  }, {
+    key: "collectSSRPlaceholders",
+    value: function collectSSRPlaceholders() {
+      // This is handled by the shared SSRPlaceholderHandlers in VCObserverWrapper
+      // Individual observers don't need to implement this
+    }
+
+    // Internal methods for ViewportObserver to access SSR state
+  }, {
+    key: "getSSRState",
+    value: function getSSRState() {
+      return this.ssr;
+    }
+  }, {
+    key: "getSSRPlaceholderHandler",
+    value: function getSSRPlaceholderHandler() {
+      return this.ssrPlaceholderHandler;
     }
   }, {
     key: "addSSR",