@atlaskit/react-ufo 4.12.3 → 4.12.5

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

@@ -1,22 +1,73 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
 // 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, enablePageLayoutPlaceholder = false) {
+  const enableDisplayContentsSupport = fg('platform_ufo_ssr_placeholders_for_display_contents');
   const ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
   ssrPlaceholders.forEach(elem => {
     const placeholderId = elem.getAttribute('data-ssr-placeholder');
-    const boundingClient = elem.getBoundingClientRect();
     if (placeholderId) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
-      window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
+      if (enableDisplayContentsSupport) {
+        window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = getEffectiveBoundingRect(elem, window);
+      } else {
+        window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = elem.getBoundingClientRect();
+      }
     }
   });
   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;
+      if (enableDisplayContentsSupport) {
+        window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = getEffectiveBoundingRect(pageLayoutRoot, window);
+      } else {
+        window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = pageLayoutRoot.getBoundingClientRect();
+      }
     }
   }
+}
+
+/**
+ * Gets the effective bounding rectangle for an element, handling display: contents elements
+ * by collecting dimensions from their children instead
+ */
+function getEffectiveBoundingRect(elem, window) {
+  const computedStyle = window.getComputedStyle(elem);
+
+  // If element has display: contents, collect bounding rect from children
+  if (computedStyle.display === 'contents') {
+    const children = Array.from(elem.children);
+    if (children.length === 0) {
+      // No children, return zero rect
+      return new DOMRect(0, 0, 0, 0);
+    }
+
+    // Calculate union of all children's bounding rects
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    children.forEach(child => {
+      const childRect = child.getBoundingClientRect();
+      // Skip children with zero dimensions (likely also display: contents)
+      if (childRect.width > 0 || childRect.height > 0) {
+        minX = Math.min(minX, childRect.left);
+        minY = Math.min(minY, childRect.top);
+        maxX = Math.max(maxX, childRect.right);
+        maxY = Math.max(maxY, childRect.bottom);
+      }
+    });
+
+    // If no children with dimensions found, return zero rect
+    if (minX === Infinity) {
+      return new DOMRect(0, 0, 0, 0);
+    }
+    return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+  }
+
+  // Normal element, return its bounding rect
+  return elem.getBoundingClientRect();
 }

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
 import isDnDStyleMutation from '../../vc-observer/observers/non-visual-styles/is-dnd-style-mutation';
 import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
@@ -80,95 +81,189 @@ export default class ViewportObserver {
         if (!addedNode) {
           continue;
         }
+        if (fg('platform_ufo_ssr_placeholders_for_display_contents')) {
+          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 (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
+                if (timestamp <= ssrState.renderStop) {
+                  var _this$intersectionObs2;
+                  (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
+                  continue;
+                } else {
+                  ssrState.state = SSRStateEnum.normal;
+                }
+              }
+            }
 
-        // 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;
+            // 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$intersectionObs3;
+                    (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.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$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
+                }
+              }
             }
-            (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'ssr-hydration');
-            continue;
-          }
-          if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
-            if (timestamp <= ssrState.renderStop) {
-              var _this$intersectionObs2;
-              (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(addedNode, 'ssr-hydration');
+            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$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 {
-              ssrState.state = SSRStateEnum.normal;
+              var _this$intersectionObs9;
+              (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
             }
           }
-        }
-
-        // SSR placeholder logic - check and handle with await
-        if (this.getSSRPlaceholderHandler) {
-          const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
-          if (ssrPlaceholderHandler) {
-            if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
-              if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
-                var _this$intersectionObs3;
-                (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
-                continue;
+        } else {
+          // 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$intersectionObs0;
+              ssrState.state = SSRStateEnum.ignoring;
+              if (ssrState.renderStop === -1) {
+                // arbitrary 500ms DOM update window
+                ssrState.renderStop = timestamp + 500;
               }
-              // If result is false, continue to normal mutation logic below
+              (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(addedNode, 'ssr-hydration');
+              continue;
             }
-            if (ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
-              const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
-              if (result !== false) {
-                var _this$intersectionObs4;
-                (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+            if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
+              if (timestamp <= ssrState.renderStop) {
+                var _this$intersectionObs1;
+                (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.watchAndTag(addedNode, 'ssr-hydration');
                 continue;
+              } else {
+                ssrState.state = SSRStateEnum.normal;
               }
-              // If result is false, continue to normal mutation logic below
             }
           }
-        }
-        const sameDeletedNode = removedNodes.find(ref => {
-          const n = ref.deref();
-          if (!n || !addedNode) {
-            return false;
+
+          // SSR placeholder logic - check and handle with await
+          if (this.getSSRPlaceholderHandler) {
+            const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
+            if (ssrPlaceholderHandler) {
+              if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
+                if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
+                  var _this$intersectionObs10;
+                  (_this$intersectionObs10 = this.intersectionObserver) === null || _this$intersectionObs10 === void 0 ? void 0 : _this$intersectionObs10.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                  continue;
+                }
+                // If result is false, continue to normal mutation logic below
+              }
+              if (ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
+                const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
+                if (result !== false) {
+                  var _this$intersectionObs11;
+                  (_this$intersectionObs11 = this.intersectionObserver) === null || _this$intersectionObs11 === void 0 ? void 0 : _this$intersectionObs11.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                  continue;
+                }
+                // If result is false, continue to normal mutation logic below
+              }
+            }
           }
-          return n.isEqualNode(addedNode);
-        });
-        const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
-        if (sameDeletedNode && isInIgnoreLsMarker) {
-          var _this$intersectionObs5;
-          (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
-          continue;
-        }
-        if (isContainedWithinMediaWrapper(addedNode)) {
-          var _this$intersectionObs6;
-          (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
-          continue;
-        }
-        const {
-          isWithin: isWithinThirdPartySegment
-        } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
-        if (isWithinThirdPartySegment) {
-          var _this$intersectionObs7;
-          (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
-          continue;
-        }
-        for (const {
-          isDisplayContentsElementChildren,
-          element
-        } of getMutatedElements(addedNode)) {
-          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));
+          const sameDeletedNode = removedNodes.find(ref => {
+            const n = ref.deref();
+            if (!n || !addedNode) {
+              return false;
+            }
+            return n.isEqualNode(addedNode);
+          });
+          const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
+          if (sameDeletedNode && isInIgnoreLsMarker) {
+            var _this$intersectionObs12;
+            (_this$intersectionObs12 = this.intersectionObserver) === null || _this$intersectionObs12 === void 0 ? void 0 : _this$intersectionObs12.watchAndTag(addedNode, 'mutation:remount');
+            continue;
+          }
+          if (isContainedWithinMediaWrapper(addedNode)) {
+            var _this$intersectionObs13;
+            (_this$intersectionObs13 = this.intersectionObserver) === null || _this$intersectionObs13 === void 0 ? void 0 : _this$intersectionObs13.watchAndTag(addedNode, 'mutation:media');
+            continue;
+          }
+          const {
+            isWithin: isWithinThirdPartySegment
+          } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
+          if (isWithinThirdPartySegment) {
+            var _this$intersectionObs14;
+            (_this$intersectionObs14 = this.intersectionObserver) === null || _this$intersectionObs14 === void 0 ? void 0 : _this$intersectionObs14.watchAndTag(addedNode, 'mutation:third-party-element');
+            continue;
+          }
+          for (const {
+            isDisplayContentsElementChildren,
+            element
+          } of getMutatedElements(addedNode)) {
+            if (isDisplayContentsElementChildren) {
+              var _this$intersectionObs15;
+              (_this$intersectionObs15 = this.intersectionObserver) === null || _this$intersectionObs15 === void 0 ? void 0 : _this$intersectionObs15.watchAndTag(element, 'mutation:display-contents-children-element');
+            } else {
+              var _this$intersectionObs16;
+              (_this$intersectionObs16 = this.intersectionObserver) === null || _this$intersectionObs16 === void 0 ? void 0 : _this$intersectionObs16.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
+            }
           }
         }
       }
@@ -179,8 +274,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$intersectionObs17;
+      (_this$intersectionObs17 = this.intersectionObserver) === null || _this$intersectionObs17 === void 0 ? void 0 : _this$intersectionObs17.watchAndTag(target, ({
         target,
         rect
       }) => {
@@ -322,12 +417,12 @@ export default class ViewportObserver {
     this.isStarted = true;
   }
   stop() {
-    var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
+    var _this$mutationObserve2, _this$intersectionObs18, _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$intersectionObs18 = this.intersectionObserver) === null || _this$intersectionObs18 === void 0 ? void 0 : _this$intersectionObs18.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/esm/create-payload/utils/get-browser-metadata.js

@@ -1,4 +1,5 @@
 import Bowser from 'bowser-ultralight';
+import { fg } from '@atlaskit/platform-feature-flags';
 export default function getBrowserMetadata() {
   var data = {
     time: {
@@ -40,6 +41,9 @@ export default function getBrowserMetadata() {
       downlink: navigator.connection.downlink
     };
   }
+  if (typeof navigator !== 'undefined' && fg('react_ufo_add_webdriver_info')) {
+    data.webdriver = Boolean(navigator.webdriver);
+  }
   return data;
 }
 
@@ -59,6 +63,11 @@ export function getBrowserMetadataToLegacyFormat() {
     legacyFormat['event:browser:version'] = metadata.browser.version;
   }
 
+  // Webdriver data
+  if (metadata.webdriver !== undefined) {
+    legacyFormat['event:browser:webdriver'] = metadata.webdriver;
+  }
+
   // Device data
   if (metadata.device) {
     if (metadata.device.cpus !== undefined) {

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

@@ -1,6 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 var ANCESTOR_LOOKUP_LIMIT = 10;
 var PAGE_LAYOUT_ID = 'page-layout.root';
 export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
@@ -59,7 +60,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
             _resolve(hasSameSizePosition);
           } else {
             requestAnimationFrame(function () {
-              var targetRect = target.getBoundingClientRect();
+              var targetRect = _this.getEffectiveBoundingRect(target);
               var hasSameSizePosition = _this.hasSameSizePosition(rect, targetRect);
               _resolve(hasSameSizePosition);
             });
@@ -78,7 +79,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           _resolve2(_hasSameSizePosition);
         } else {
           requestAnimationFrame(function () {
-            var targetRect = target.getBoundingClientRect();
+            var targetRect = _this.getEffectiveBoundingRect(target);
             var hasSameSizePosition = _this.hasSameSizePosition(_rect, targetRect);
             _resolve2(hasSameSizePosition);
           });
@@ -236,7 +237,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
       if (!placeholderRects) {
         return false;
       }
-      return this.hasSameSizePosition(placeholderRects, el.getBoundingClientRect());
+      return this.hasSameSizePosition(placeholderRects, this.getEffectiveBoundingRect(el));
     }
   }, {
     key: "getSize",
@@ -275,6 +276,55 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
       var verticalCheck = Math.abs(rect.y - boundingClientRect.y) < this.EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < this.EQUALITY_THRESHOLD;
       return horizontalCheck && verticalCheck || false;
     }
+
+    /**
+     * Gets the effective bounding rectangle for an element, handling display: contents elements
+     * by collecting dimensions from their children instead
+     */
+  }, {
+    key: "getEffectiveBoundingRect",
+    value: function getEffectiveBoundingRect(el) {
+      var enableDisplayContentsSupport = fg('platform_ufo_ssr_placeholders_for_display_contents');
+
+      // Only handle display: contents if feature flag is enabled
+      if (enableDisplayContentsSupport) {
+        var computedStyle = window.getComputedStyle(el);
+
+        // If element has display: contents, collect bounding rect from children
+        if (computedStyle.display === 'contents') {
+          var children = Array.from(el.children);
+          if (children.length === 0) {
+            // No children, return zero rect
+            return new DOMRect(0, 0, 0, 0);
+          }
+
+          // Calculate union of all children's bounding rects
+          var minX = Infinity;
+          var minY = Infinity;
+          var maxX = -Infinity;
+          var maxY = -Infinity;
+          children.forEach(function (child) {
+            var childRect = child.getBoundingClientRect();
+            // Skip children with zero dimensions (likely also display: contents)
+            if (childRect.width > 0 || childRect.height > 0) {
+              minX = Math.min(minX, childRect.left);
+              minY = Math.min(minY, childRect.top);
+              maxX = Math.max(maxX, childRect.right);
+              maxY = Math.max(maxY, childRect.bottom);
+            }
+          });
+
+          // If no children with dimensions found, return zero rect
+          if (minX === Infinity) {
+            return new DOMRect(0, 0, 0, 0);
+          }
+          return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+        }
+      }
+
+      // Normal element or feature flag disabled, return its bounding rect
+      return el.getBoundingClientRect();
+    }
   }, {
     key: "isDummyRect",
     value: function isDummyRect(rect) {

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

@@ -1,23 +1,74 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
 // 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) {
   var enablePageLayoutPlaceholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var enableDisplayContentsSupport = fg('platform_ufo_ssr_placeholders_for_display_contents');
   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');
-    var boundingClient = elem.getBoundingClientRect();
     if (placeholderId) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
-      window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
+      if (enableDisplayContentsSupport) {
+        window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = getEffectiveBoundingRect(elem, window);
+      } else {
+        window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = elem.getBoundingClientRect();
+      }
     }
   });
   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;
+      if (enableDisplayContentsSupport) {
+        window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = getEffectiveBoundingRect(pageLayoutRoot, window);
+      } else {
+        window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = pageLayoutRoot.getBoundingClientRect();
+      }
     }
   }
+}
+
+/**
+ * Gets the effective bounding rectangle for an element, handling display: contents elements
+ * by collecting dimensions from their children instead
+ */
+function getEffectiveBoundingRect(elem, window) {
+  var computedStyle = window.getComputedStyle(elem);
+
+  // If element has display: contents, collect bounding rect from children
+  if (computedStyle.display === 'contents') {
+    var children = Array.from(elem.children);
+    if (children.length === 0) {
+      // No children, return zero rect
+      return new DOMRect(0, 0, 0, 0);
+    }
+
+    // Calculate union of all children's bounding rects
+    var minX = Infinity;
+    var minY = Infinity;
+    var maxX = -Infinity;
+    var maxY = -Infinity;
+    children.forEach(function (child) {
+      var childRect = child.getBoundingClientRect();
+      // Skip children with zero dimensions (likely also display: contents)
+      if (childRect.width > 0 || childRect.height > 0) {
+        minX = Math.min(minX, childRect.left);
+        minY = Math.min(minY, childRect.top);
+        maxX = Math.max(maxX, childRect.right);
+        maxY = Math.max(maxY, childRect.bottom);
+      }
+    });
+
+    // If no children with dimensions found, return zero rect
+    if (minX === Infinity) {
+      return new DOMRect(0, 0, 0, 0);
+    }
+    return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+  }
+
+  // Normal element, return its bounding rect
+  return elem.getBoundingClientRect();
 }