@atlaskit/react-ufo 4.13.1 → 4.14.1

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

@@ -1,5 +1,4 @@
 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 {
@@ -247,45 +246,40 @@ export class SSRPlaceholderHandlers {
    * by collecting dimensions from their children instead
    */
   getEffectiveBoundingRect(el) {
-    const enableDisplayContentsSupport = fg('platform_ufo_ssr_placeholders_for_display_contents');
+    const computedStyle = window.getComputedStyle(el);
 
-    // 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);
+      }
 
-      // 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);
         }
+      });
 
-        // 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);
+      // 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
+    // Normal element, return its bounding rect
     return el.getBoundingClientRect();
   }
   isDummyRect(rect) {

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

@@ -1,31 +1,20 @@
-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');
     if (placeholderId) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
-      if (enableDisplayContentsSupport) {
-        window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = getEffectiveBoundingRect(elem, window);
-      } else {
-        window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = elem.getBoundingClientRect();
-      }
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = getEffectiveBoundingRect(elem, window);
     }
   });
   if (enablePageLayoutPlaceholder) {
     const pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
     if (pageLayoutRoot) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
-      if (enableDisplayContentsSupport) {
-        window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = getEffectiveBoundingRect(pageLayoutRoot, window);
-      } else {
-        window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = pageLayoutRoot.getBoundingClientRect();
-      }
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = getEffectiveBoundingRect(pageLayoutRoot, window);
     }
   }
 }

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

@@ -80,100 +80,10 @@ 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 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
-                }
-              }
-            }
-            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 {
-              var _this$intersectionObs9;
-              (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
-            }
-          }
-        } else {
+        for (const {
+          isDisplayContentsElementChildren,
+          element
+        } of getMutatedElements(addedNode)) {
           // SSR hydration logic
           if (this.getSSRState) {
             const ssrState = this.getSSRState();
@@ -183,19 +93,19 @@ export default class ViewportObserver {
               ignoring: 3
             };
             if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
-              var _this$intersectionObs0;
+              var _this$intersectionObs;
               ssrState.state = SSRStateEnum.ignoring;
               if (ssrState.renderStop === -1) {
                 // arbitrary 500ms DOM update window
                 ssrState.renderStop = timestamp + 500;
               }
-              (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(addedNode, 'ssr-hydration');
+              (_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$intersectionObs1;
-                (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.watchAndTag(addedNode, 'ssr-hydration');
+                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;
@@ -207,19 +117,19 @@ export default class ViewportObserver {
           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');
+              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(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
-                const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
+              if (ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
+                const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
                 if (result !== false) {
-                  var _this$intersectionObs11;
-                  (_this$intersectionObs11 = this.intersectionObserver) === null || _this$intersectionObs11 === void 0 ? void 0 : _this$intersectionObs11.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                  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
@@ -228,41 +138,38 @@ export default class ViewportObserver {
           }
           const sameDeletedNode = removedNodes.find(ref => {
             const n = ref.deref();
-            if (!n || !addedNode) {
+            if (!n || !element) {
               return false;
             }
-            return n.isEqualNode(addedNode);
+            return n.isEqualNode(element);
           });
-          const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
+          const isInIgnoreLsMarker = element instanceof HTMLElement ? isInVCIgnoreIfNoLayoutShiftMarker(element) : false;
           if (sameDeletedNode && isInIgnoreLsMarker) {
-            var _this$intersectionObs12;
-            (_this$intersectionObs12 = this.intersectionObserver) === null || _this$intersectionObs12 === void 0 ? void 0 : _this$intersectionObs12.watchAndTag(addedNode, 'mutation:remount');
+            var _this$intersectionObs5;
+            (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(element, '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');
+          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
-          } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
+          } = element instanceof HTMLElement ? checkWithinComponent(element, 'UFOThirdPartySegment', this.mapIs3pResult) : {
+            isWithin: false
+          };
           if (isWithinThirdPartySegment) {
-            var _this$intersectionObs14;
-            (_this$intersectionObs14 = this.intersectionObserver) === null || _this$intersectionObs14 === void 0 ? void 0 : _this$intersectionObs14.watchAndTag(addedNode, 'mutation:third-party-element');
+            var _this$intersectionObs7;
+            (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(element, '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));
-            }
+          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));
           }
         }
       }
@@ -273,8 +180,8 @@ export default class ViewportObserver {
       oldValue,
       newValue
     }) => {
-      var _this$intersectionObs17;
-      (_this$intersectionObs17 = this.intersectionObserver) === null || _this$intersectionObs17 === void 0 ? void 0 : _this$intersectionObs17.watchAndTag(target, ({
+      var _this$intersectionObs0;
+      (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(target, ({
         target,
         rect
       }) => {
@@ -416,12 +323,12 @@ export default class ViewportObserver {
     this.isStarted = true;
   }
   stop() {
-    var _this$mutationObserve2, _this$intersectionObs18, _this$performanceObse2;
+    var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
     if (!this.isStarted) {
       return;
     }
     (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
-    (_this$intersectionObs18 = this.intersectionObserver) === null || _this$intersectionObs18 === void 0 ? void 0 : _this$intersectionObs18.disconnect();
+    (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.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/index.js

@@ -31,6 +31,7 @@ import * as ssr from '../ssr';
 import { buildSegmentTree, getOldSegmentsLabelStack, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
 import { createCriticalMetricsPayloads } from './critical-metrics-payload';
 import { addPerformanceMeasures } from './utils/add-performance-measures';
+import { getBatteryInfoToLegacyFormat } from './utils/get-battery-info';
 import { getBrowserMetadataToLegacyFormat } from './utils/get-browser-metadata';
 import getInteractionStatus from './utils/get-interaction-status';
 import { getMoreAccuratePageVisibilityUpToTTAI } from './utils/get-more-accurate-page-visibility-up-to-ttai';
@@ -389,7 +390,7 @@ function createInteractionMetricsPayload(_x, _x2, _x3, _x4, _x5) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction, interactionId, experimental, criticalPayloadCount, vcMetrics) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, unknownElementName, unknownElementHierarchy, hydration, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, finalVCMetrics, experimentalMetrics, paintMetrics, getReactHydrationStats, payload;
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, unknownElementName, unknownElementHierarchy, hydration, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, finalVCMetrics, experimentalMetrics, paintMetrics, batteryInfo, getReactHydrationStats, payload;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -502,15 +503,17 @@ function _createInteractionMetricsPayload() {
           _context.t2 = _context.t1;
           _context.t3 = experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined);
           _context.t4 = getPaintMetricsToLegacyFormat(type, end);
-          _context.t5 = [_context.t2, _context.t3, _context.t4];
-          _context.next = 34;
-          return _context.t0.all.call(_context.t0, _context.t5);
-        case 34:
+          _context.t5 = getBatteryInfoToLegacyFormat();
+          _context.t6 = [_context.t2, _context.t3, _context.t4, _context.t5];
+          _context.next = 35;
+          return _context.t0.all.call(_context.t0, _context.t6);
+        case 35:
           _yield$Promise$all = _context.sent;
-          _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 3);
+          _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 4);
           finalVCMetrics = _yield$Promise$all2[0];
           experimentalMetrics = _yield$Promise$all2[1];
           paintMetrics = _yield$Promise$all2[2];
+          batteryInfo = _yield$Promise$all2[3];
           if (!experimental) {
             addPerformanceMeasures(interaction.start, _toConsumableArray((finalVCMetrics === null || finalVCMetrics === void 0 ? void 0 : finalVCMetrics['ufo:vc:rev']) || []));
           }
@@ -529,7 +532,7 @@ function _createInteractionMetricsPayload() {
             source: 'measured',
             tags: ['observability'],
             attributes: {
-              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                 // basic
                 'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
                 'event:product': config.product,
@@ -548,7 +551,7 @@ function _createInteractionMetricsPayload() {
               }, criticalPayloadCount !== undefined ? {
                 'ufo:multipayload': true,
                 'ufo:criticalPayloadCount': criticalPayloadCount
-              } : {}), getBrowserMetadataToLegacyFormat()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), getNavigationMetricsToLegacyFormat(type)), finalVCMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), getReactHydrationStats()), {}, {
+              } : {}), getBrowserMetadataToLegacyFormat()), batteryInfo), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), getNavigationMetricsToLegacyFormat(type)), finalVCMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), getReactHydrationStats()), {}, {
                 interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
@@ -595,7 +598,7 @@ function _createInteractionMetricsPayload() {
           }
           payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
           return _context.abrupt("return", payload);
-        case 45:
+        case 47:
         case "end":
           return _context.stop();
       }

package/dist/esm/create-payload/utils/get-battery-info.js

@@ -0,0 +1,93 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { fg } from '@atlaskit/platform-feature-flags';
+
+// Type definitions for battery info
+
+// Main function returns compact nested format
+export default function getBatteryInfo() {
+  return _getBatteryInfo.apply(this, arguments);
+}
+
+// Helper function to get battery info in legacy colon format for backward compatibility
+function _getBatteryInfo() {
+  _getBatteryInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var battery;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (fg('react_ufo_battery_info')) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", {});
+        case 2:
+          if (!(typeof navigator === 'undefined')) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return", {});
+        case 4:
+          _context.prev = 4;
+          if (!('getBattery' in navigator)) {
+            _context.next = 11;
+            break;
+          }
+          _context.next = 8;
+          return navigator.getBattery();
+        case 8:
+          battery = _context.sent;
+          if (!(battery && typeof battery.level === 'number' && typeof battery.charging === 'boolean')) {
+            _context.next = 11;
+            break;
+          }
+          return _context.abrupt("return", {
+            level: Math.round(battery.level * 100) / 100,
+            // Round to 0.01
+            charging: battery.charging
+          });
+        case 11:
+          _context.next = 15;
+          break;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](4);
+        case 15:
+          return _context.abrupt("return", {});
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[4, 13]]);
+  }));
+  return _getBatteryInfo.apply(this, arguments);
+}
+export function getBatteryInfoToLegacyFormat() {
+  return _getBatteryInfoToLegacyFormat.apply(this, arguments);
+}
+function _getBatteryInfoToLegacyFormat() {
+  _getBatteryInfoToLegacyFormat = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var battery, legacyFormat;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return getBatteryInfo();
+        case 2:
+          battery = _context2.sent;
+          legacyFormat = {};
+          if (battery.level !== undefined) {
+            legacyFormat['event:battery:level'] = battery.level;
+          }
+          if (battery.charging !== undefined) {
+            legacyFormat['event:battery:charging'] = battery.charging;
+          }
+          return _context2.abrupt("return", legacyFormat);
+        case 7:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _getBatteryInfoToLegacyFormat.apply(this, arguments);
+}

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

@@ -1,7 +1,6 @@
 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 () {
@@ -284,45 +283,40 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   }, {
     key: "getEffectiveBoundingRect",
     value: function getEffectiveBoundingRect(el) {
-      var enableDisplayContentsSupport = fg('platform_ufo_ssr_placeholders_for_display_contents');
+      var computedStyle = window.getComputedStyle(el);
 
-      // 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);
+        }
 
-        // 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);
           }
+        });
 
-          // 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);
+        // 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
+      // Normal element, return its bounding rect
       return el.getBoundingClientRect();
     }
   }, {

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

@@ -1,32 +1,21 @@
-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');
     if (placeholderId) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
-      if (enableDisplayContentsSupport) {
-        window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = getEffectiveBoundingRect(elem, window);
-      } else {
-        window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = elem.getBoundingClientRect();
-      }
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = getEffectiveBoundingRect(elem, window);
     }
   });
   if (enablePageLayoutPlaceholder) {
     var pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
     if (pageLayoutRoot) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
-      if (enableDisplayContentsSupport) {
-        window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = getEffectiveBoundingRect(pageLayoutRoot, window);
-      } else {
-        window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = pageLayoutRoot.getBoundingClientRect();
-      }
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = getEffectiveBoundingRect(pageLayoutRoot, window);
     }
   }
 }