@atlaskit/react-ufo 4.12.2 → 4.12.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.12.4
+
+### Patch Changes
+
+- [`189df14145d27`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/189df14145d27) -
+  Handle elements that are both display: contents and SSR placeholder replacement
+
+## 4.12.3
+
+### Patch Changes
+
+- [`5f70b8e74f5f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f70b8e74f5f3) -
+  tidy up feature flag platform_editor_tables_scaling_css
+
 ## 4.12.2
 
 ### Patch Changes

package/dist/cjs/create-payload/utils/get-browser-metadata.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = getBrowserMetadata;
 exports.getBrowserMetadataToLegacyFormat = getBrowserMetadataToLegacyFormat;
 var _bowserUltralight = _interopRequireDefault(require("bowser-ultralight"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function getBrowserMetadata() {
   var data = {
     time: {
@@ -48,6 +49,9 @@ function getBrowserMetadata() {
       downlink: navigator.connection.downlink
     };
   }
+  if (typeof navigator !== 'undefined' && (0, _platformFeatureFlags.fg)('react_ufo_add_webdriver_info')) {
+    data.webdriver = Boolean(navigator.webdriver);
+  }
   return data;
 }
 
@@ -67,6 +71,11 @@ 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/cjs/vc/vc-observer/observers/non-visual-styles/is-dnd-style-mutation.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expVal = require("../../../expVal");
 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; }
@@ -50,9 +49,6 @@ function isDnDStyleMutation(_ref) {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_exclude_dnd_anchor_name_from_ttvc')) {
     return false;
   }
-  if (!(0, _expVal.expVal)('platform_editor_tables_scaling_css', 'excludeDnD', false)) {
-    return false;
-  }
   if (!(target instanceof Element)) {
     return false;
   }

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

@@ -8,6 +8,7 @@ exports.SSRPlaceholderHandlers = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var ANCESTOR_LOOKUP_LIMIT = 10;
 var PAGE_LAYOUT_ID = 'page-layout.root';
 var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/function () {
@@ -66,7 +67,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
             _resolve(hasSameSizePosition);
           } else {
             requestAnimationFrame(function () {
-              var targetRect = target.getBoundingClientRect();
+              var targetRect = _this.getEffectiveBoundingRect(target);
               var hasSameSizePosition = _this.hasSameSizePosition(rect, targetRect);
               _resolve(hasSameSizePosition);
             });
@@ -85,7 +86,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
           _resolve2(_hasSameSizePosition);
         } else {
           requestAnimationFrame(function () {
-            var targetRect = target.getBoundingClientRect();
+            var targetRect = _this.getEffectiveBoundingRect(target);
             var hasSameSizePosition = _this.hasSameSizePosition(_rect, targetRect);
             _resolve2(hasSameSizePosition);
           });
@@ -243,7 +244,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       if (!placeholderRects) {
         return false;
       }
-      return this.hasSameSizePosition(placeholderRects, el.getBoundingClientRect());
+      return this.hasSameSizePosition(placeholderRects, this.getEffectiveBoundingRect(el));
     }
   }, {
     key: "getSize",
@@ -282,6 +283,55 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       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 = (0, _platformFeatureFlags.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/cjs/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js

@@ -4,26 +4,76 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.collectSSRPlaceholderDimensions = collectSSRPlaceholderDimensions;
+var _platformFeatureFlags = require("@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.
 function collectSSRPlaceholderDimensions(document, window) {
   var enablePageLayoutPlaceholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var enableDisplayContentsSupport = (0, _platformFeatureFlags.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();
 }

package/dist/es2019/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() {
   const 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/es2019/vc/vc-observer/observers/non-visual-styles/is-dnd-style-mutation.js

@@ -1,5 +1,4 @@
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expVal } from '../../../expVal';
 const isDnDStyleChange = style => {
   return style.startsWith('anchor-name: --node-anchor');
 };
@@ -33,9 +32,6 @@ function isDnDStyleMutation({
   if (!fg('platform_editor_exclude_dnd_anchor_name_from_ttvc')) {
     return false;
   }
-  if (!expVal('platform_editor_tables_scaling_css', 'excludeDnD', false)) {
-    return false;
-  }
   if (!(target instanceof Element)) {
     return false;
   }

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 const ANCESTOR_LOOKUP_LIMIT = 10;
 const PAGE_LAYOUT_ID = 'page-layout.root';
 export class SSRPlaceholderHandlers {
@@ -56,7 +57,7 @@ export class SSRPlaceholderHandlers {
             resolve(hasSameSizePosition);
           } else {
             requestAnimationFrame(() => {
-              const targetRect = target.getBoundingClientRect();
+              const targetRect = this.getEffectiveBoundingRect(target);
               const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
               resolve(hasSameSizePosition);
             });
@@ -75,7 +76,7 @@ export class SSRPlaceholderHandlers {
           resolve(hasSameSizePosition);
         } else {
           requestAnimationFrame(() => {
-            const targetRect = target.getBoundingClientRect();
+            const targetRect = this.getEffectiveBoundingRect(target);
             const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
             resolve(hasSameSizePosition);
           });
@@ -209,7 +210,7 @@ export class SSRPlaceholderHandlers {
     if (!placeholderRects) {
       return false;
     }
-    return this.hasSameSizePosition(placeholderRects, el.getBoundingClientRect());
+    return this.hasSameSizePosition(placeholderRects, this.getEffectiveBoundingRect(el));
   }
   getSize(el) {
     return new Promise(resolve => {
@@ -240,6 +241,53 @@ export class SSRPlaceholderHandlers {
     const 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
+   */
+  getEffectiveBoundingRect(el) {
+    const enableDisplayContentsSupport = fg('platform_ufo_ssr_placeholders_for_display_contents');
+
+    // Only handle display: contents if feature flag is enabled
+    if (enableDisplayContentsSupport) {
+      const computedStyle = window.getComputedStyle(el);
+
+      // If element has display: contents, collect bounding rect from children
+      if (computedStyle.display === 'contents') {
+        const 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
+        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 or feature flag disabled, return its bounding rect
+    return el.getBoundingClientRect();
+  }
   isDummyRect(rect) {
     return rect && rect.width < 0 && rect.height < 0 || false;
   }

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/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/non-visual-styles/is-dnd-style-mutation.js

@@ -2,7 +2,6 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 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 { expVal } from '../../../expVal';
 var isDnDStyleChange = function isDnDStyleChange(style) {
   return style.startsWith('anchor-name: --node-anchor');
 };
@@ -44,9 +43,6 @@ function isDnDStyleMutation(_ref) {
   if (!fg('platform_editor_exclude_dnd_anchor_name_from_ttvc')) {
     return false;
   }
-  if (!expVal('platform_editor_tables_scaling_css', 'excludeDnD', false)) {
-    return false;
-  }
   if (!(target instanceof Element)) {
     return false;
   }

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();
 }

package/dist/types/common/react-ufo-payload-schema.d.ts

@@ -79,6 +79,7 @@ export type ReactUFOPayload = {
             'event:localTimezoneOffset': number;
             'event:browser:name': string;
             'event:browser:version': string;
+            'event:webdriver:enabled'?: boolean;
             'event:cpus': number;
             'event:memory': 0.25 | 0.5 | 1 | 2 | 4 | 8;
             'event:network:effectiveType': 'slow-2g' | '2g' | '3g' | '4g';

package/dist/types/create-payload/utils/get-browser-metadata.d.ts

@@ -12,6 +12,7 @@ export default function getBrowserMetadata(): {
         rtt: number;
         downlink: number;
     };
+    webdriver?: boolean;
     time: {
         localHour: number;
         localDayOfWeek: number;

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

@@ -34,6 +34,11 @@ export declare class SSRPlaceholderHandlers {
     getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
     hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
+    /**
+     * Gets the effective bounding rectangle for an element, handling display: contents elements
+     * by collecting dimensions from their children instead
+     */
+    private getEffectiveBoundingRect;
     isDummyRect(rect: Rect | undefined): boolean;
     intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
 }

package/dist/types-ts4.5/common/react-ufo-payload-schema.d.ts

@@ -81,6 +81,7 @@ export type ReactUFOPayload = {
             'event:localTimezoneOffset': number;
             'event:browser:name': string;
             'event:browser:version': string;
+            'event:webdriver:enabled'?: boolean;
             'event:cpus': number;
             'event:memory': 0.25 | 0.5 | 1 | 2 | 4 | 8;
             'event:network:effectiveType': 'slow-2g' | '2g' | '3g' | '4g';

package/dist/types-ts4.5/create-payload/utils/get-browser-metadata.d.ts

@@ -12,6 +12,7 @@ export default function getBrowserMetadata(): {
         rtt: number;
         downlink: number;
     };
+    webdriver?: boolean;
     time: {
         localHour: number;
         localDayOfWeek: number;

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

@@ -34,6 +34,11 @@ export declare class SSRPlaceholderHandlers {
     getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
     hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
+    /**
+     * Gets the effective bounding rectangle for an element, handling display: contents elements
+     * by collecting dimensions from their children instead
+     */
+    private getEffectiveBoundingRect;
     isDummyRect(rect: Rect | undefined): boolean;
     intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "4.12.2",
+	"version": "4.12.4",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,6 +42,7 @@
 	},
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/react": "^13.4.0",
 		"@types/is-ci": "^3.0.0",
 		"is-ci": "^3.0.1"
@@ -109,6 +110,9 @@
 		"platform_ufo_critical_metrics_payload": {
 			"type": "boolean"
 		},
+		"platform_ufo_ssr_placeholders_for_display_contents": {
+			"type": "boolean"
+		},
 		"platform_ufo_enable_interactivity_jsm": {
 			"type": "boolean"
 		},
@@ -162,6 +166,9 @@
 		},
 		"media-perf-uplift-mutation-fix": {
 			"type": "boolean"
+		},
+		"react_ufo_add_webdriver_info": {
+			"type": "boolean"
 		}
 	}
 }