@atlaskit/react-ufo 4.12.3 → 4.12.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.12.5
+
+### Patch Changes
+
+- [`5976942ba053c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5976942ba053c) -
+  Additional fixes for display contents children handling in TTVC
+
+## 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

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