@atlaskit/react-ufo 3.13.8 → 3.13.11

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.13.11
+
+### Patch Changes
+
+- [#161290](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161290)
+  [`26388d9d5e089`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26388d9d5e089) -
+  AFO-3919 fix pre-existing UFOLoadHold not registering to new interaction
+
+## 3.13.10
+
+### Patch Changes
+
+- [#160800](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160800)
+  [`3763aa7aadc8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3763aa7aadc8c) -
+  AFO-3913 fix transitio VC v3 not reaching 100 in VC Chart
+
+## 3.13.9
+
+### Patch Changes
+
+- [#161064](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161064)
+  [`26461e98f0825`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26461e98f0825) -
+  Fix enabling marking page-layour as a SSR placeholder
+- [#161052](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161052)
+  [`a16bd256e0ae6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a16bd256e0ae6) -
+  Clean up fg platform_ufo_use_offscreen_canvas
+
 ## 3.13.8
 
 ### Patch Changes

package/dist/cjs/interaction-id-context/index.js

@@ -1,20 +1,62 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInteractionId = exports.getInteractionId = exports.default = exports.DefaultInteractionID = void 0;
+exports.useInteractionId = exports.subscribeToInteractionIdChanges = exports.getInteractionId = exports.default = exports.DefaultInteractionID = 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 _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // Same structure as react's useRef.
 // This allows modals to use a ref to scope their value
 // const id = useRef(null);
 // <InteractionIDContext.Provider value={id}>...<
 
-// The default InteractionID object is a global singleton
+// Subscription system for interaction ID changes
+
+var listeners = new Set();
+
+// Observable interaction ID implementation
+var ObservableInteractionID = /*#__PURE__*/function () {
+  function ObservableInteractionID() {
+    (0, _classCallCheck2.default)(this, ObservableInteractionID);
+    (0, _defineProperty2.default)(this, "_current", null);
+  }
+  return (0, _createClass2.default)(ObservableInteractionID, [{
+    key: "current",
+    get: function get() {
+      return this._current;
+    },
+    set: function set(newId) {
+      var oldId = this._current;
+      this._current = newId;
+
+      // Notify all listeners if the ID actually changed and feature flag is enabled
+      if (oldId !== newId && (0, _platformFeatureFlags.fg)('platform_ufo_hold_cross_interaction')) {
+        listeners.forEach(function (listener) {
+          return listener(newId);
+        });
+      }
+    }
+  }]);
+}(); // The default InteractionID object is a global singleton
 // It's the one that holds the root value used in routing,
 // and is overwritten when we have new interactions start.
-var DefaultInteractionID = exports.DefaultInteractionID = {
-  current: null
+var DefaultInteractionID = exports.DefaultInteractionID = new ObservableInteractionID();
+
+// Subscription functions
+var subscribeToInteractionIdChanges = exports.subscribeToInteractionIdChanges = function subscribeToInteractionIdChanges(listener) {
+  if (!(0, _platformFeatureFlags.fg)('platform_ufo_hold_cross_interaction')) {
+    // Return a no-op unsubscribe function when feature flag is disabled
+    return function () {};
+  }
+  listeners.add(listener);
+  return function () {
+    listeners.delete(listener);
+  };
 };
 
 // We use a context to allow modals to have their own lifecycle

package/dist/cjs/interaction-metrics-init/index.js

@@ -95,7 +95,8 @@ function init(analyticsWebClientAsync, config) {
       heatmapSize: config.vc.heatmapSize,
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
-      selectorConfig: config.vc.selectorConfig
+      selectorConfig: config.vc.selectorConfig,
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
     };
     (0, _vc.getVCObserver)(vcOptions).start({
       startTime: 0

package/dist/cjs/load-hold/UFOLoadHold.js

@@ -6,12 +6,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = UFOLoadHold;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _interactionContext = _interopRequireDefault(require("../interaction-context"));
+var _interactionIdContext = _interopRequireWildcard(require("../interaction-id-context"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var useLayoutEffectSAFE = typeof window === 'undefined' ? _react.useEffect : _react.useLayoutEffect;
 
+/**
+ * Custom hook to track changes to the interaction ID.
+ * Uses a subscription system when feature flag is enabled, otherwise returns the current value.
+ */
+function useInteractionIdValue() {
+  var interactionId = (0, _react.useContext)(_interactionIdContext.default);
+  var _useState = (0, _react.useState)((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentId = _useState2[0],
+    setCurrentId = _useState2[1];
+  useLayoutEffectSAFE(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_ufo_hold_cross_interaction')) {
+      // New subscription-based approach
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+      var unsubscribe = (0, _interactionIdContext.subscribeToInteractionIdChanges)(function (newId) {
+        setCurrentId(newId);
+      });
+      return unsubscribe;
+    } else {
+      // Legacy behavior - just return the current value without subscription
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+    }
+  }, [interactionId]);
+  return currentId;
+}
+
 /**
  * Render this whenever you're loading.
  *
@@ -64,6 +93,8 @@ function UFOLoadHold(_ref) {
     hold = _ref$hold === void 0 ? true : _ref$hold,
     _ref$experimental = _ref.experimental,
     experimental = _ref$experimental === void 0 ? false : _ref$experimental;
+  var currentInteractionId = useInteractionIdValue();
+
   // react-18: useId instead
   var context = (0, _react.useContext)(_interactionContext.default);
   useLayoutEffectSAFE(function () {
@@ -73,7 +104,7 @@ function UFOLoadHold(_ref) {
       }
       return context.hold(name);
     }
-  }, [hold, context, name]);
+  }, [hold, context, name, currentInteractionId]);
 
   // react-18: can return children directly
   return children != null ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children) : null;

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

@@ -128,12 +128,15 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
             case 0:
               start = param.start, stop = param.stop, interactionId = param.interactionId;
               results = [];
+              if ((0, _platformFeatureFlags.fg)('platform_ufo_v3_add_start_entry')) {
+                this.addStartEntry(start);
+              }
               calculator_fy25_03 = new _fy25_.default();
               orderedEntries = this.entriesTimeline.getOrderedEntries({
                 start: start,
                 stop: stop
               });
-              _context.next = 6;
+              _context.next = 7;
               return calculator_fy25_03.calculate({
                 orderedEntries: orderedEntries,
                 startTime: start,
@@ -141,13 +144,13 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
                 interactionId: interactionId,
                 isPostInteraction: this.isPostInteraction
               });
-            case 6:
+            case 7:
               fy25_03 = _context.sent;
               if (fy25_03) {
                 results.push(fy25_03);
               }
               return _context.abrupt("return", results);
-            case 9:
+            case 10:
             case "end":
               return _context.stop();
           }
@@ -158,6 +161,40 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
       }
       return getVCResult;
     }()
+  }, {
+    key: "addStartEntry",
+    value: function addStartEntry(startTime) {
+      this.entriesTimeline.push({
+        time: startTime,
+        data: {
+          type: 'mutation:element',
+          elementName: 'START',
+          visible: true,
+          rect: {
+            x: 0,
+            y: 0,
+            width: window.innerWidth,
+            height: window.innerHeight,
+            top: 0,
+            left: 0,
+            bottom: window.innerHeight,
+            right: window.innerWidth,
+            toJSON: function toJSON() {
+              return {
+                x: this.x,
+                y: this.y,
+                width: this.width,
+                height: this.height,
+                top: this.top,
+                left: this.left,
+                bottom: this.bottom,
+                right: this.right
+              };
+            }
+          }
+        }
+      });
+    }
   }, {
     key: "getElementName",
     value: function getElementName(element) {

package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -11,7 +11,6 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _taskYield = _interopRequireDefault(require("../../utils/task-yield"));
 // 24-bit color value
 /**
@@ -65,20 +64,18 @@ var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
     }
     this.ctx = ctx;
     this.ctx.globalCompositeOperation = 'source-over';
-    if ((0, _platformFeatureFlags.fg)('platform_ufo_use_offscreen_canvas')) {
-      this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
-    }
+    this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
+
     this.clear();
   }
 
   /**
    * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
-   * or if the feature flag is disabled
    */
   return (0, _createClass2.default)(ViewportCanvas, [{
     key: "createCanvas",
     value: function createCanvas(width, height) {
-      if (typeof OffscreenCanvas !== 'undefined' && (0, _platformFeatureFlags.fg)('platform_ufo_use_offscreen_canvas')) {
+      if (typeof OffscreenCanvas !== 'undefined') {
         return new OffscreenCanvas(width, height);
       }
       var canvas = document.createElement('canvas');

package/dist/es2019/interaction-id-context/index.js

@@ -1,15 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 // Same structure as react's useRef.
 // This allows modals to use a ref to scope their value
 // const id = useRef(null);
 // <InteractionIDContext.Provider value={id}>...<
 
+// Subscription system for interaction ID changes
+
+const listeners = new Set();
+
+// Observable interaction ID implementation
+class ObservableInteractionID {
+  constructor() {
+    _defineProperty(this, "_current", null);
+  }
+  get current() {
+    return this._current;
+  }
+  set current(newId) {
+    const oldId = this._current;
+    this._current = newId;
+
+    // Notify all listeners if the ID actually changed and feature flag is enabled
+    if (oldId !== newId && fg('platform_ufo_hold_cross_interaction')) {
+      listeners.forEach(listener => listener(newId));
+    }
+  }
+}
+
 // The default InteractionID object is a global singleton
 // It's the one that holds the root value used in routing,
 // and is overwritten when we have new interactions start.
-export const DefaultInteractionID = {
-  current: null
+export const DefaultInteractionID = new ObservableInteractionID();
+
+// Subscription functions
+export const subscribeToInteractionIdChanges = listener => {
+  if (!fg('platform_ufo_hold_cross_interaction')) {
+    // Return a no-op unsubscribe function when feature flag is disabled
+    return () => {};
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
 };
 
 // We use a context to allow modals to have their own lifecycle

package/dist/es2019/interaction-metrics-init/index.js

@@ -84,7 +84,8 @@ export function init(analyticsWebClientAsync, config) {
       heatmapSize: config.vc.heatmapSize,
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
-      selectorConfig: config.vc.selectorConfig
+      selectorConfig: config.vc.selectorConfig,
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
     };
     getVCObserver(vcOptions).start({
       startTime: 0

package/dist/es2019/load-hold/UFOLoadHold.js

@@ -1,7 +1,32 @@
-import React, { useContext, useEffect, useLayoutEffect } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import UFOInteractionContext from '../interaction-context';
+import UFOInteractionIDContext, { subscribeToInteractionIdChanges } from '../interaction-id-context';
 const useLayoutEffectSAFE = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
+/**
+ * Custom hook to track changes to the interaction ID.
+ * Uses a subscription system when feature flag is enabled, otherwise returns the current value.
+ */
+function useInteractionIdValue() {
+  const interactionId = useContext(UFOInteractionIDContext);
+  const [currentId, setCurrentId] = useState((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+  useLayoutEffectSAFE(() => {
+    if (fg('platform_ufo_hold_cross_interaction')) {
+      // New subscription-based approach
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+      const unsubscribe = subscribeToInteractionIdChanges(newId => {
+        setCurrentId(newId);
+      });
+      return unsubscribe;
+    } else {
+      // Legacy behavior - just return the current value without subscription
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+    }
+  }, [interactionId]);
+  return currentId;
+}
+
 /**
  * Render this whenever you're loading.
  *
@@ -53,6 +78,8 @@ export default function UFOLoadHold({
   hold = true,
   experimental = false
 }) {
+  const currentInteractionId = useInteractionIdValue();
+
   // react-18: useId instead
   const context = useContext(UFOInteractionContext);
   useLayoutEffectSAFE(() => {
@@ -62,7 +89,7 @@ export default function UFOLoadHold({
       }
       return context.hold(name);
     }
-  }, [hold, context, name]);
+  }, [hold, context, name, currentInteractionId]);
 
   // react-18: can return children directly
   return children != null ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;

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

@@ -103,6 +103,9 @@ export default class VCObserverNew {
       interactionId
     } = param;
     const results = [];
+    if (fg('platform_ufo_v3_add_start_entry')) {
+      this.addStartEntry(start);
+    }
     const calculator_fy25_03 = new VCCalculator_FY25_03();
     const orderedEntries = this.entriesTimeline.getOrderedEntries({
       start,
@@ -120,6 +123,38 @@ export default class VCObserverNew {
     }
     return results;
   }
+  addStartEntry(startTime) {
+    this.entriesTimeline.push({
+      time: startTime,
+      data: {
+        type: 'mutation:element',
+        elementName: 'START',
+        visible: true,
+        rect: {
+          x: 0,
+          y: 0,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          top: 0,
+          left: 0,
+          bottom: window.innerHeight,
+          right: window.innerWidth,
+          toJSON: function () {
+            return {
+              x: this.x,
+              y: this.y,
+              width: this.width,
+              height: this.height,
+              top: this.top,
+              left: this.left,
+              bottom: this.bottom,
+              right: this.right
+            };
+          }
+        }
+      }
+    });
+  }
   getElementName(element) {
     return getElementName(this.selectorConfig, element);
   }

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -1,4 +1,3 @@
-import { fg } from '@atlaskit/platform-feature-flags';
 import taskYield from '../../utils/task-yield';
 
 // 24-bit color value
@@ -52,18 +51,16 @@ export class ViewportCanvas {
     }
     this.ctx = ctx;
     this.ctx.globalCompositeOperation = 'source-over';
-    if (fg('platform_ufo_use_offscreen_canvas')) {
-      this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
-    }
+    this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
+
     this.clear();
   }
 
   /**
    * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
-   * or if the feature flag is disabled
    */
   createCanvas(width, height) {
-    if (typeof OffscreenCanvas !== 'undefined' && fg('platform_ufo_use_offscreen_canvas')) {
+    if (typeof OffscreenCanvas !== 'undefined') {
       return new OffscreenCanvas(width, height);
     }
     const canvas = document.createElement('canvas');

package/dist/esm/interaction-id-context/index.js

@@ -1,15 +1,56 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 // Same structure as react's useRef.
 // This allows modals to use a ref to scope their value
 // const id = useRef(null);
 // <InteractionIDContext.Provider value={id}>...<
 
-// The default InteractionID object is a global singleton
+// Subscription system for interaction ID changes
+
+var listeners = new Set();
+
+// Observable interaction ID implementation
+var ObservableInteractionID = /*#__PURE__*/function () {
+  function ObservableInteractionID() {
+    _classCallCheck(this, ObservableInteractionID);
+    _defineProperty(this, "_current", null);
+  }
+  return _createClass(ObservableInteractionID, [{
+    key: "current",
+    get: function get() {
+      return this._current;
+    },
+    set: function set(newId) {
+      var oldId = this._current;
+      this._current = newId;
+
+      // Notify all listeners if the ID actually changed and feature flag is enabled
+      if (oldId !== newId && fg('platform_ufo_hold_cross_interaction')) {
+        listeners.forEach(function (listener) {
+          return listener(newId);
+        });
+      }
+    }
+  }]);
+}(); // The default InteractionID object is a global singleton
 // It's the one that holds the root value used in routing,
 // and is overwritten when we have new interactions start.
-export var DefaultInteractionID = {
-  current: null
+export var DefaultInteractionID = new ObservableInteractionID();
+
+// Subscription functions
+export var subscribeToInteractionIdChanges = function subscribeToInteractionIdChanges(listener) {
+  if (!fg('platform_ufo_hold_cross_interaction')) {
+    // Return a no-op unsubscribe function when feature flag is disabled
+    return function () {};
+  }
+  listeners.add(listener);
+  return function () {
+    listeners.delete(listener);
+  };
 };
 
 // We use a context to allow modals to have their own lifecycle

package/dist/esm/interaction-metrics-init/index.js

@@ -85,7 +85,8 @@ export function init(analyticsWebClientAsync, config) {
       heatmapSize: config.vc.heatmapSize,
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
-      selectorConfig: config.vc.selectorConfig
+      selectorConfig: config.vc.selectorConfig,
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
     };
     getVCObserver(vcOptions).start({
       startTime: 0

package/dist/esm/load-hold/UFOLoadHold.js

@@ -1,7 +1,36 @@
-import React, { useContext, useEffect, useLayoutEffect } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useContext, useEffect, useLayoutEffect, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import UFOInteractionContext from '../interaction-context';
+import UFOInteractionIDContext, { subscribeToInteractionIdChanges } from '../interaction-id-context';
 var useLayoutEffectSAFE = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
+/**
+ * Custom hook to track changes to the interaction ID.
+ * Uses a subscription system when feature flag is enabled, otherwise returns the current value.
+ */
+function useInteractionIdValue() {
+  var interactionId = useContext(UFOInteractionIDContext);
+  var _useState = useState((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentId = _useState2[0],
+    setCurrentId = _useState2[1];
+  useLayoutEffectSAFE(function () {
+    if (fg('platform_ufo_hold_cross_interaction')) {
+      // New subscription-based approach
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+      var unsubscribe = subscribeToInteractionIdChanges(function (newId) {
+        setCurrentId(newId);
+      });
+      return unsubscribe;
+    } else {
+      // Legacy behavior - just return the current value without subscription
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+    }
+  }, [interactionId]);
+  return currentId;
+}
+
 /**
  * Render this whenever you're loading.
  *
@@ -54,6 +83,8 @@ export default function UFOLoadHold(_ref) {
     hold = _ref$hold === void 0 ? true : _ref$hold,
     _ref$experimental = _ref.experimental,
     experimental = _ref$experimental === void 0 ? false : _ref$experimental;
+  var currentInteractionId = useInteractionIdValue();
+
   // react-18: useId instead
   var context = useContext(UFOInteractionContext);
   useLayoutEffectSAFE(function () {
@@ -63,7 +94,7 @@ export default function UFOLoadHold(_ref) {
       }
       return context.hold(name);
     }
-  }, [hold, context, name]);
+  }, [hold, context, name, currentInteractionId]);
 
   // react-18: can return children directly
   return children != null ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;

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

@@ -121,12 +121,15 @@ var VCObserverNew = /*#__PURE__*/function () {
             case 0:
               start = param.start, stop = param.stop, interactionId = param.interactionId;
               results = [];
+              if (fg('platform_ufo_v3_add_start_entry')) {
+                this.addStartEntry(start);
+              }
               calculator_fy25_03 = new VCCalculator_FY25_03();
               orderedEntries = this.entriesTimeline.getOrderedEntries({
                 start: start,
                 stop: stop
               });
-              _context.next = 6;
+              _context.next = 7;
               return calculator_fy25_03.calculate({
                 orderedEntries: orderedEntries,
                 startTime: start,
@@ -134,13 +137,13 @@ var VCObserverNew = /*#__PURE__*/function () {
                 interactionId: interactionId,
                 isPostInteraction: this.isPostInteraction
               });
-            case 6:
+            case 7:
               fy25_03 = _context.sent;
               if (fy25_03) {
                 results.push(fy25_03);
               }
               return _context.abrupt("return", results);
-            case 9:
+            case 10:
             case "end":
               return _context.stop();
           }
@@ -151,6 +154,40 @@ var VCObserverNew = /*#__PURE__*/function () {
       }
       return getVCResult;
     }()
+  }, {
+    key: "addStartEntry",
+    value: function addStartEntry(startTime) {
+      this.entriesTimeline.push({
+        time: startTime,
+        data: {
+          type: 'mutation:element',
+          elementName: 'START',
+          visible: true,
+          rect: {
+            x: 0,
+            y: 0,
+            width: window.innerWidth,
+            height: window.innerHeight,
+            top: 0,
+            left: 0,
+            bottom: window.innerHeight,
+            right: window.innerWidth,
+            toJSON: function toJSON() {
+              return {
+                x: this.x,
+                y: this.y,
+                width: this.width,
+                height: this.height,
+                top: this.top,
+                left: this.left,
+                bottom: this.bottom,
+                right: this.right
+              };
+            }
+          }
+        }
+      });
+    }
   }, {
     key: "getElementName",
     value: function getElementName(element) {

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -2,7 +2,6 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { fg } from '@atlaskit/platform-feature-flags';
 import taskYield from '../../utils/task-yield';
 
 // 24-bit color value
@@ -58,20 +57,18 @@ export var ViewportCanvas = /*#__PURE__*/function () {
     }
     this.ctx = ctx;
     this.ctx.globalCompositeOperation = 'source-over';
-    if (fg('platform_ufo_use_offscreen_canvas')) {
-      this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
-    }
+    this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
+
     this.clear();
   }
 
   /**
    * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
-   * or if the feature flag is disabled
    */
   return _createClass(ViewportCanvas, [{
     key: "createCanvas",
     value: function createCanvas(width, height) {
-      if (typeof OffscreenCanvas !== 'undefined' && fg('platform_ufo_use_offscreen_canvas')) {
+      if (typeof OffscreenCanvas !== 'undefined') {
         return new OffscreenCanvas(width, height);
       }
       var canvas = document.createElement('canvas');

package/dist/types/interaction-id-context/index.d.ts

@@ -2,7 +2,9 @@
 export type InteractionIDContextType = {
     current: string | null;
 };
+type InteractionIDListener = (newId: string | null) => void;
 export declare const DefaultInteractionID: InteractionIDContextType;
+export declare const subscribeToInteractionIdChanges: (listener: InteractionIDListener) => (() => void);
 declare const _default: import("react").Context<InteractionIDContextType>;
 export default _default;
 export declare const getInteractionId: () => InteractionIDContextType;

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

@@ -17,5 +17,6 @@ export default class VCObserverNew {
     }): void;
     stop(): void;
     getVCResult(param: VCObserverGetVCResultParam): Promise<RevisionPayloadEntry[]>;
+    private addStartEntry;
     private getElementName;
 }

package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.d.ts

@@ -32,7 +32,6 @@ export declare class ViewportCanvas {
     constructor(viewport: Viewport, scaleFactor?: number);
     /**
      * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
-     * or if the feature flag is disabled
      */
     private createCanvas;
     getScaledDimensions(): {

package/dist/types-ts4.5/interaction-id-context/index.d.ts

@@ -2,7 +2,9 @@
 export type InteractionIDContextType = {
     current: string | null;
 };
+type InteractionIDListener = (newId: string | null) => void;
 export declare const DefaultInteractionID: InteractionIDContextType;
+export declare const subscribeToInteractionIdChanges: (listener: InteractionIDListener) => (() => void);
 declare const _default: import("react").Context<InteractionIDContextType>;
 export default _default;
 export declare const getInteractionId: () => InteractionIDContextType;

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

@@ -17,5 +17,6 @@ export default class VCObserverNew {
     }): void;
     stop(): void;
     getVCResult(param: VCObserverGetVCResultParam): Promise<RevisionPayloadEntry[]>;
+    private addStartEntry;
     private getElementName;
 }

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.d.ts

@@ -32,7 +32,6 @@ export declare class ViewportCanvas {
     constructor(viewport: Viewport, scaleFactor?: number);
     /**
      * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
-     * or if the feature flag is disabled
      */
     private createCanvas;
     getScaledDimensions(): {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.13.8",
+	"version": "3.13.11",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -127,9 +127,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_ufo_use_offscreen_canvas": {
-			"type": "boolean"
-		},
 		"platform_ufo_canvas_heatmap_full_precision": {
 			"type": "boolean"
 		},
@@ -168,6 +165,12 @@
 		},
 		"platform_ufo_ignore_non_vis_attributes": {
 			"type": "boolean"
+		},
+		"platform_ufo_v3_add_start_entry": {
+			"type": "boolean"
+		},
+		"platform_ufo_hold_cross_interaction": {
+			"type": "boolean"
 		}
 	}
 }