@atlaskit/react-ufo 3.12.5 → 3.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.13.0
+
+### Minor Changes
+
+- [#156673](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156673)
+  [`27ecf5244d858`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/27ecf5244d858) -
+  Added API to account for page layout in VC calculation
+
 ## 3.12.5
 
 ### Patch Changes

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

@@ -523,6 +523,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     this.arraySize = options.heatmapSize || 200;
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
+    var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder;
     this.observers = new _observers.Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -530,6 +531,9 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         role: false,
         className: true,
         dataVC: true
+      },
+      SSRConfig: {
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       }
     });
     this.heatmap = !(0, _config.isVCRevisionEnabled)('fy25.01') ? [] : this.getCleanHeatmap();

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

@@ -31,7 +31,8 @@ function isElementVisible(target) {
 }
 var Observers = exports.Observers = /*#__PURE__*/function () {
   function Observers(opts) {
-    var _this = this;
+    var _this = this,
+      _opts$SSRConfig;
     (0, _classCallCheck2.default)(this, Observers);
     (0, _defineProperty2.default)(this, "observedMutations", new WeakMap());
     (0, _defineProperty2.default)(this, "elementsInView", new Set());
@@ -71,7 +72,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
     this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers();
+    this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers((_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder);
   }
   return (0, _createClass2.default)(Observers, [{
     key: "isBrowserSupported",

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

@@ -9,15 +9,39 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var ANCESTOR_LOOKUP_LIMIT = 10;
+var PAGE_LAYOUT_ID = 'page-layout.root';
 var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/function () {
   function SSRPlaceholderHandlers() {
     var _this = this;
+    var enablePageLayoutPlaceholder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     (0, _classCallCheck2.default)(this, SSRPlaceholderHandlers);
     (0, _defineProperty2.default)(this, "staticPlaceholders", new Map());
     (0, _defineProperty2.default)(this, "callbacks", new Map());
     (0, _defineProperty2.default)(this, "getSizeCallbacks", new Map());
     (0, _defineProperty2.default)(this, "reactValidateCallbacks", new Map());
     (0, _defineProperty2.default)(this, "EQUALITY_THRESHOLD", 1);
+    (0, _defineProperty2.default)(this, "getPlaceholderId", function (el) {
+      var _el$dataset;
+      var ssrPlaceholderId = el === null || el === void 0 || (_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.ssrPlaceholder;
+      if (!!ssrPlaceholderId) {
+        return ssrPlaceholderId;
+      }
+      if (_this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
+    (0, _defineProperty2.default)(this, "getPlaceholderReplacementId", function (el) {
+      var _el$dataset2;
+      var ssrPlaceholderReplaceId = el === null || el === void 0 || (_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.ssrPlaceholderReplace;
+      if (!!ssrPlaceholderReplaceId) {
+        return ssrPlaceholderReplaceId;
+      }
+      if (_this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
     (0, _defineProperty2.default)(this, "intersectionObserverCallback", function (_ref) {
       var _this$intersectionObs;
       var target = _ref.target,
@@ -27,7 +51,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         // impossible case - keep typescript healthy
         return;
       }
-      var staticKey = target.dataset.ssrPlaceholder || '';
+      var staticKey = _this.getPlaceholderId(target);
       if (staticKey) {
         if (_this.staticPlaceholders.has(staticKey) && _this.callbacks.has(staticKey)) {
           // validation
@@ -49,7 +73,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
           _this.callbacks.delete(staticKey);
         }
       } else {
-        var key = target.dataset.ssrPlaceholderReplace || '';
+        var key = _this.getPlaceholderReplacementId(target);
         var _resolve2 = _this.reactValidateCallbacks.get(key);
         if (!_resolve2) {
           return;
@@ -77,25 +101,27 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         }).forEach(_this.intersectionObserverCallback);
       });
     }
+    this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
     if (window.document) {
       try {
-        var existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        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 _el$dataset;
-          if (el instanceof HTMLElement && el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ssrPlaceholder) {
+          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[el.dataset.ssrPlaceholder];
+            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(el.dataset.ssrPlaceholder, {
+            _this.staticPlaceholders.set(placeholderId, {
               width: width,
               height: height,
               x: x,
@@ -120,12 +146,12 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
   }, {
     key: "isPlaceholder",
     value: function isPlaceholder(element) {
-      return Boolean(element.dataset.ssrPlaceholder);
+      return Boolean(this.getPlaceholderId(element));
     }
   }, {
     key: "isPlaceholderReplacement",
     value: function isPlaceholderReplacement(element) {
-      return Boolean(element.dataset.ssrPlaceholderReplace);
+      return Boolean(this.getPlaceholderReplacementId(element));
     }
   }, {
     key: "isPlaceholderIgnored",
@@ -155,7 +181,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     value: function checkIfExistedAndSizeMatching(el) {
       var _this2 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
-      var id = el.dataset.ssrPlaceholder || '';
+      var id = this.getPlaceholderId(el);
       return new Promise(function (resolve) {
         if (!_this2.staticPlaceholders.has(id)) {
           resolve(false);
@@ -173,7 +199,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       var _this3 = this;
       return new Promise(function (resolve) {
         var _this3$intersectionOb;
-        _this3.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+        _this3.getSizeCallbacks.set(_this3.getPlaceholderId(el), resolve);
         (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
       });
     }
@@ -182,7 +208,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     value: function validateReactComponentMatchToPlaceholder(el) {
       var _this4 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
-      var id = el.dataset.ssrPlaceholderReplace || '';
+      var id = this.getPlaceholderReplacementId(el);
       return new Promise(function (resolve) {
         if (!_this4.staticPlaceholders.has(id)) {
           resolve(false);

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

@@ -8,6 +8,7 @@ exports.collectSSRPlaceholderDimensions = collectSSRPlaceholderDimensions;
 // and save their size/positions in a map __SSR_PLACEHOLDERS_DIMENSIONS__ on the Window object. Each placeholderId is
 // unique and maps to its corresponding elements bounding client rectangle dimensions.
 function collectSSRPlaceholderDimensions(document, window) {
+  var enablePageLayoutPlaceholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
   ssrPlaceholders.forEach(function (elem) {
     var placeholderId = elem.getAttribute('data-ssr-placeholder');
@@ -17,4 +18,12 @@ function collectSSRPlaceholderDimensions(document, window) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
     }
   });
+  if (enablePageLayoutPlaceholder) {
+    var pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
+    if (pageLayoutRoot) {
+      var boundingClient = pageLayoutRoot.getBoundingClientRect();
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = boundingClient;
+    }
+  }
 }

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

@@ -554,6 +554,9 @@ export class VCObserver {
     this.arraySize = options.heatmapSize || 200;
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
+    const {
+      ssrEnablePageLayoutPlaceholder
+    } = options;
     this.observers = new Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -561,6 +564,9 @@ export class VCObserver {
         role: false,
         className: true,
         dataVC: true
+      },
+      SSRConfig: {
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       }
     });
     this.heatmap = !isVCRevisionEnabled('fy25.01') ? [] : this.getCleanHeatmap();

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

@@ -20,6 +20,7 @@ function isElementVisible(target) {
 }
 export class Observers {
   constructor(opts) {
+    var _opts$SSRConfig;
     _defineProperty(this, "observedMutations", new WeakMap());
     _defineProperty(this, "elementsInView", new Set());
     _defineProperty(this, "callbacks", new Set());
@@ -59,7 +60,7 @@ export class Observers {
     };
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
+    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers((_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder);
   }
   isBrowserSupported() {
     return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';

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

@@ -1,12 +1,35 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const ANCESTOR_LOOKUP_LIMIT = 10;
+const PAGE_LAYOUT_ID = 'page-layout.root';
 export class SSRPlaceholderHandlers {
-  constructor() {
+  constructor(enablePageLayoutPlaceholder = false) {
     _defineProperty(this, "staticPlaceholders", new Map());
     _defineProperty(this, "callbacks", new Map());
     _defineProperty(this, "getSizeCallbacks", new Map());
     _defineProperty(this, "reactValidateCallbacks", new Map());
     _defineProperty(this, "EQUALITY_THRESHOLD", 1);
+    _defineProperty(this, "getPlaceholderId", el => {
+      var _el$dataset;
+      const ssrPlaceholderId = el === null || el === void 0 ? void 0 : (_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.ssrPlaceholder;
+      if (!!ssrPlaceholderId) {
+        return ssrPlaceholderId;
+      }
+      if (this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
+    _defineProperty(this, "getPlaceholderReplacementId", el => {
+      var _el$dataset2;
+      const ssrPlaceholderReplaceId = el === null || el === void 0 ? void 0 : (_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.ssrPlaceholderReplace;
+      if (!!ssrPlaceholderReplaceId) {
+        return ssrPlaceholderReplaceId;
+      }
+      if (this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
     _defineProperty(this, "intersectionObserverCallback", ({
       target,
       boundingClientRect
@@ -17,7 +40,7 @@ export class SSRPlaceholderHandlers {
         // impossible case - keep typescript healthy
         return;
       }
-      const staticKey = target.dataset.ssrPlaceholder || '';
+      const staticKey = this.getPlaceholderId(target);
       if (staticKey) {
         if (this.staticPlaceholders.has(staticKey) && this.callbacks.has(staticKey)) {
           // validation
@@ -39,7 +62,7 @@ export class SSRPlaceholderHandlers {
           this.callbacks.delete(staticKey);
         }
       } else {
-        const key = target.dataset.ssrPlaceholderReplace || '';
+        const key = this.getPlaceholderReplacementId(target);
         const resolve = this.reactValidateCallbacks.get(key);
         if (!resolve) {
           return;
@@ -63,25 +86,27 @@ export class SSRPlaceholderHandlers {
       // Only instantiate the IntersectionObserver if it's supported
       this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
     }
+    this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
     if (window.document) {
       try {
-        const existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        const selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+        const existingElements = document.querySelectorAll(selector);
         existingElements.forEach(el => {
-          var _el$dataset;
-          if (el instanceof HTMLElement && el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ssrPlaceholder) {
+          const placeholderId = el instanceof HTMLElement && this.getPlaceholderId(el);
+          if (placeholderId) {
             var _window$__SSR_PLACEHO, _this$intersectionObs2;
             let width = -1;
             let height = -1;
             let x = -1;
             let y = -1;
-            const boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[el.dataset.ssrPlaceholder];
+            const 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(el.dataset.ssrPlaceholder, {
+            this.staticPlaceholders.set(placeholderId, {
               width,
               height,
               x,
@@ -102,10 +127,10 @@ export class SSRPlaceholderHandlers {
     this.reactValidateCallbacks = new Map();
   }
   isPlaceholder(element) {
-    return Boolean(element.dataset.ssrPlaceholder);
+    return Boolean(this.getPlaceholderId(element));
   }
   isPlaceholderReplacement(element) {
-    return Boolean(element.dataset.ssrPlaceholderReplace);
+    return Boolean(this.getPlaceholderReplacementId(element));
   }
   isPlaceholderIgnored(element) {
     // data-ssr-placeholder-ignored doesn't have a value.
@@ -128,7 +153,7 @@ export class SSRPlaceholderHandlers {
   }
   checkIfExistedAndSizeMatching(el) {
     el = this.findNearestPlaceholderContainerIfIgnored(el);
-    const id = el.dataset.ssrPlaceholder || '';
+    const id = this.getPlaceholderId(el);
     return new Promise(resolve => {
       if (!this.staticPlaceholders.has(id)) {
         resolve(false);
@@ -143,13 +168,13 @@ export class SSRPlaceholderHandlers {
   getSize(el) {
     return new Promise(resolve => {
       var _this$intersectionObs4;
-      this.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+      this.getSizeCallbacks.set(this.getPlaceholderId(el), resolve);
       (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.observe(el);
     });
   }
   validateReactComponentMatchToPlaceholder(el) {
     el = this.findNearestPlaceholderContainerIfIgnored(el);
-    const id = el.dataset.ssrPlaceholderReplace || '';
+    const id = this.getPlaceholderReplacementId(el);
     return new Promise(resolve => {
       if (!this.staticPlaceholders.has(id)) {
         resolve(false);

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

@@ -1,7 +1,7 @@
 // lightweight script to scan the SSR response and collect all elements with data-ssr-placeholder attribute
 // and save their size/positions in a map __SSR_PLACEHOLDERS_DIMENSIONS__ on the Window object. Each placeholderId is
 // unique and maps to its corresponding elements bounding client rectangle dimensions.
-export function collectSSRPlaceholderDimensions(document, window) {
+export function collectSSRPlaceholderDimensions(document, window, enablePageLayoutPlaceholder = false) {
   const ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
   ssrPlaceholders.forEach(elem => {
     const placeholderId = elem.getAttribute('data-ssr-placeholder');
@@ -11,4 +11,12 @@ export function collectSSRPlaceholderDimensions(document, window) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
     }
   });
+  if (enablePageLayoutPlaceholder) {
+    const pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
+    if (pageLayoutRoot) {
+      const boundingClient = pageLayoutRoot.getBoundingClientRect();
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = boundingClient;
+    }
+  }
 }

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

@@ -516,6 +516,7 @@ export var VCObserver = /*#__PURE__*/function () {
     this.arraySize = options.heatmapSize || 200;
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
+    var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder;
     this.observers = new Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -523,6 +524,9 @@ export var VCObserver = /*#__PURE__*/function () {
         role: false,
         className: true,
         dataVC: true
+      },
+      SSRConfig: {
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       }
     });
     this.heatmap = !isVCRevisionEnabled('fy25.01') ? [] : this.getCleanHeatmap();

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

@@ -24,7 +24,8 @@ function isElementVisible(target) {
 }
 export var Observers = /*#__PURE__*/function () {
   function Observers(opts) {
-    var _this = this;
+    var _this = this,
+      _opts$SSRConfig;
     _classCallCheck(this, Observers);
     _defineProperty(this, "observedMutations", new WeakMap());
     _defineProperty(this, "elementsInView", new Set());
@@ -64,7 +65,7 @@ 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();
+    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers((_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder);
   }
   return _createClass(Observers, [{
     key: "isBrowserSupported",

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

@@ -2,15 +2,39 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var ANCESTOR_LOOKUP_LIMIT = 10;
+var PAGE_LAYOUT_ID = 'page-layout.root';
 export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   function SSRPlaceholderHandlers() {
     var _this = this;
+    var enablePageLayoutPlaceholder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     _classCallCheck(this, SSRPlaceholderHandlers);
     _defineProperty(this, "staticPlaceholders", new Map());
     _defineProperty(this, "callbacks", new Map());
     _defineProperty(this, "getSizeCallbacks", new Map());
     _defineProperty(this, "reactValidateCallbacks", new Map());
     _defineProperty(this, "EQUALITY_THRESHOLD", 1);
+    _defineProperty(this, "getPlaceholderId", function (el) {
+      var _el$dataset;
+      var ssrPlaceholderId = el === null || el === void 0 || (_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.ssrPlaceholder;
+      if (!!ssrPlaceholderId) {
+        return ssrPlaceholderId;
+      }
+      if (_this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
+    _defineProperty(this, "getPlaceholderReplacementId", function (el) {
+      var _el$dataset2;
+      var ssrPlaceholderReplaceId = el === null || el === void 0 || (_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.ssrPlaceholderReplace;
+      if (!!ssrPlaceholderReplaceId) {
+        return ssrPlaceholderReplaceId;
+      }
+      if (_this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
     _defineProperty(this, "intersectionObserverCallback", function (_ref) {
       var _this$intersectionObs;
       var target = _ref.target,
@@ -20,7 +44,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         // impossible case - keep typescript healthy
         return;
       }
-      var staticKey = target.dataset.ssrPlaceholder || '';
+      var staticKey = _this.getPlaceholderId(target);
       if (staticKey) {
         if (_this.staticPlaceholders.has(staticKey) && _this.callbacks.has(staticKey)) {
           // validation
@@ -42,7 +66,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           _this.callbacks.delete(staticKey);
         }
       } else {
-        var key = target.dataset.ssrPlaceholderReplace || '';
+        var key = _this.getPlaceholderReplacementId(target);
         var _resolve2 = _this.reactValidateCallbacks.get(key);
         if (!_resolve2) {
           return;
@@ -70,25 +94,27 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         }).forEach(_this.intersectionObserverCallback);
       });
     }
+    this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
     if (window.document) {
       try {
-        var existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        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 _el$dataset;
-          if (el instanceof HTMLElement && el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ssrPlaceholder) {
+          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[el.dataset.ssrPlaceholder];
+            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(el.dataset.ssrPlaceholder, {
+            _this.staticPlaceholders.set(placeholderId, {
               width: width,
               height: height,
               x: x,
@@ -113,12 +139,12 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   }, {
     key: "isPlaceholder",
     value: function isPlaceholder(element) {
-      return Boolean(element.dataset.ssrPlaceholder);
+      return Boolean(this.getPlaceholderId(element));
     }
   }, {
     key: "isPlaceholderReplacement",
     value: function isPlaceholderReplacement(element) {
-      return Boolean(element.dataset.ssrPlaceholderReplace);
+      return Boolean(this.getPlaceholderReplacementId(element));
     }
   }, {
     key: "isPlaceholderIgnored",
@@ -148,7 +174,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
     value: function checkIfExistedAndSizeMatching(el) {
       var _this2 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
-      var id = el.dataset.ssrPlaceholder || '';
+      var id = this.getPlaceholderId(el);
       return new Promise(function (resolve) {
         if (!_this2.staticPlaceholders.has(id)) {
           resolve(false);
@@ -166,7 +192,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
       var _this3 = this;
       return new Promise(function (resolve) {
         var _this3$intersectionOb;
-        _this3.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+        _this3.getSizeCallbacks.set(_this3.getPlaceholderId(el), resolve);
         (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
       });
     }
@@ -175,7 +201,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
     value: function validateReactComponentMatchToPlaceholder(el) {
       var _this4 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
-      var id = el.dataset.ssrPlaceholderReplace || '';
+      var id = this.getPlaceholderReplacementId(el);
       return new Promise(function (resolve) {
         if (!_this4.staticPlaceholders.has(id)) {
           resolve(false);

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

@@ -2,6 +2,7 @@
 // and save their size/positions in a map __SSR_PLACEHOLDERS_DIMENSIONS__ on the Window object. Each placeholderId is
 // unique and maps to its corresponding elements bounding client rectangle dimensions.
 export function collectSSRPlaceholderDimensions(document, window) {
+  var enablePageLayoutPlaceholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
   ssrPlaceholders.forEach(function (elem) {
     var placeholderId = elem.getAttribute('data-ssr-placeholder');
@@ -11,4 +12,12 @@ export function collectSSRPlaceholderDimensions(document, window) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
     }
   });
+  if (enablePageLayoutPlaceholder) {
+    var pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
+    if (pageLayoutRoot) {
+      var boundingClient = pageLayoutRoot.getBoundingClientRect();
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = boundingClient;
+    }
+  }
 }

package/dist/types/config/index.d.ts

@@ -73,6 +73,7 @@ export type Config = {
         readonly selectorConfig?: SelectorConfig;
         readonly ssr?: boolean;
         readonly ssrWhitelist?: string[];
+        readonly ssrEnablePageLayoutPlaceholder?: boolean;
         readonly stopVCAtInteractionFinish?: boolean;
         /**
          * The revisions of TTVC that will be calculated

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

@@ -23,6 +23,7 @@ export type VCObserverOptions = {
     devToolsEnabled?: boolean | undefined;
     selectorConfig?: SelectorConfig | undefined;
     isPostInteraction?: boolean;
+    ssrEnablePageLayoutPlaceholder?: boolean;
 };
 export interface VCObserverInterface {
     start(startArg: {

package/dist/types/vc/vc-observer/observers/index.d.ts

@@ -9,6 +9,9 @@ export type SelectorConfig = {
 };
 type ConstructorOptions = {
     selectorConfig: SelectorConfig;
+    SSRConfig?: {
+        enablePageLayoutPlaceholder: boolean;
+    };
 };
 export declare class Observers implements BrowserObservers {
     private intersectionObserver;

package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -11,7 +11,10 @@ export declare class SSRPlaceholderHandlers {
     private reactValidateCallbacks;
     private intersectionObserver;
     private EQUALITY_THRESHOLD;
-    constructor();
+    private enablePageLayoutPlaceholder;
+    constructor(enablePageLayoutPlaceholder?: boolean);
+    private getPlaceholderId;
+    private getPlaceholderReplacementId;
     clear(): void;
     isPlaceholder(element: HTMLElement): boolean;
     isPlaceholderReplacement(element: HTMLElement): boolean;

package/dist/types/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.d.ts

@@ -1 +1 @@
-export declare function collectSSRPlaceholderDimensions(document: Document, window: Window): void;
+export declare function collectSSRPlaceholderDimensions(document: Document, window: Window, enablePageLayoutPlaceholder?: boolean): void;

package/dist/types-ts4.5/config/index.d.ts

@@ -73,6 +73,7 @@ export type Config = {
         readonly selectorConfig?: SelectorConfig;
         readonly ssr?: boolean;
         readonly ssrWhitelist?: string[];
+        readonly ssrEnablePageLayoutPlaceholder?: boolean;
         readonly stopVCAtInteractionFinish?: boolean;
         /**
          * The revisions of TTVC that will be calculated

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

@@ -23,6 +23,7 @@ export type VCObserverOptions = {
     devToolsEnabled?: boolean | undefined;
     selectorConfig?: SelectorConfig | undefined;
     isPostInteraction?: boolean;
+    ssrEnablePageLayoutPlaceholder?: boolean;
 };
 export interface VCObserverInterface {
     start(startArg: {

package/dist/types-ts4.5/vc/vc-observer/observers/index.d.ts

@@ -9,6 +9,9 @@ export type SelectorConfig = {
 };
 type ConstructorOptions = {
     selectorConfig: SelectorConfig;
+    SSRConfig?: {
+        enablePageLayoutPlaceholder: boolean;
+    };
 };
 export declare class Observers implements BrowserObservers {
     private intersectionObserver;

package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -11,7 +11,10 @@ export declare class SSRPlaceholderHandlers {
     private reactValidateCallbacks;
     private intersectionObserver;
     private EQUALITY_THRESHOLD;
-    constructor();
+    private enablePageLayoutPlaceholder;
+    constructor(enablePageLayoutPlaceholder?: boolean);
+    private getPlaceholderId;
+    private getPlaceholderReplacementId;
     clear(): void;
     isPlaceholder(element: HTMLElement): boolean;
     isPlaceholderReplacement(element: HTMLElement): boolean;

package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.d.ts

@@ -1 +1 @@
-export declare function collectSSRPlaceholderDimensions(document: Document, window: Window): void;
+export declare function collectSSRPlaceholderDimensions(document: Document, window: Window, enablePageLayoutPlaceholder?: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.12.5",
+	"version": "3.13.0",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",