@atlaskit/react-ufo 3.6.7 → 3.8.0

package/dist/esm/create-payload/index.js

@@ -694,7 +694,7 @@ function createInteractionMetricsPayload(_x3, _x4, _x5) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interaction, interactionId, experimental) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -706,7 +706,7 @@ function _createInteractionMetricsPayload() {
           }
           throw Error('UFO Configuration not provided');
         case 4:
-          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName;
+          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, responsiveness = interaction.responsiveness;
           pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
           pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
           segments = config.killswitchNestedSegments ? [] : knownSegments;
@@ -808,7 +808,7 @@ function _createInteractionMetricsPayload() {
                 'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
                 'experience:name': newUFOName
               }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
-                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
                   interactionId: interactionId,
@@ -839,7 +839,9 @@ function _createInteractionMetricsPayload() {
                   marks: optimizeMarks(interaction.marks, getReactUFOPayloadVersion(interaction.type)),
                   customData: optimizeCustomData(interaction),
                   reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOPayloadVersion(interaction.type))
-                }, labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+                }, responsiveness ? {
+                  responsiveness: responsiveness
+                } : {}), labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
                   'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
                   'metric:experimental:ttai': expTTAI
                 }),

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

@@ -39,6 +39,45 @@ function isPerformanceTracingEnabled() {
   var _getConfig;
   return ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableAdditionalPerformanceMarks) || window.__REACT_UFO_ENABLE_PERF_TRACING || process.env.NODE_ENV !== 'production';
 }
+var performanceEventObserver;
+export var getPerformanceObserver = function getPerformanceObserver() {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(function (entries) {
+    var list = entries.getEntries();
+    var _iterator = _createForOfIteratorHelper(list),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        if (entry.name === 'click') {
+          setInteractionPerformanceEvent(entry);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+  return performanceEventObserver;
+};
+export var setInteractionPerformanceEvent = function setInteractionPerformanceEvent(entry) {
+  var interaction = getActiveInteraction();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    var responsiveness = interaction.responsiveness || {};
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already
+    // been set up
+    responsiveness.experimentalInputToNextPaint = responsiveness.experimentalInputToNextPaint || entry.duration;
+    responsiveness.inputDelay = responsiveness.experimentalInputToNextPaint || entry.processingStart - entry.startTime;
+    interaction.responsiveness = responsiveness;
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    if (entry.startTime < interaction.start) {
+      interaction.start = entry.startTime;
+    }
+  }
+};
 function labelStackToString(labelStack, name) {
   var _stack$map;
   var stack = _toConsumableArray(labelStack !== null && labelStack !== void 0 ? labelStack : []);
@@ -59,17 +98,17 @@ function labelStackToIdString(labelStack) {
 }
 function addSegmentObserver(observer) {
   segmentObservers.push(observer);
-  var _iterator = _createForOfIteratorHelper(segmentCache.values()),
-    _step;
+  var _iterator2 = _createForOfIteratorHelper(segmentCache.values()),
+    _step2;
   try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var segmentInfo = _step.value;
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var segmentInfo = _step2.value;
       observer.onAdd(segmentInfo);
     }
   } catch (err) {
-    _iterator.e(err);
+    _iterator2.e(err);
   } finally {
-    _iterator.f();
+    _iterator2.f();
   }
 }
 function removeSegmentObserver(observer) {
@@ -486,24 +525,24 @@ function finishInteraction(id, data) {
     });
     try {
       // for Firefox 102 and older
-      var _iterator2 = _createForOfIteratorHelper(profilerTimingMap.entries()),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(profilerTimingMap.entries()),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var _step2$value = _slicedToArray(_step2.value, 2),
-            _step2$value$ = _step2$value[1],
-            labelStack = _step2$value$.labelStack,
-            start = _step2$value$.start,
-            end = _step2$value$.end;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _step3$value = _slicedToArray(_step3.value, 2),
+            _step3$value$ = _step3$value[1],
+            labelStack = _step3$value$.labelStack,
+            start = _step3$value$.start,
+            end = _step3$value$.end;
           performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [segment_ttai]"), {
             start: start,
             end: end
           });
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
     } catch (e) {
       // do nothing

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

@@ -5,6 +5,7 @@ import { setUFOConfig } from '../config';
 import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-interaction-metrics-payload';
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
+import { getPerformanceObserver } from '../interactions-performance-observer';
 import { getVCObserver } from '../vc';
 import scheduleIdleCallback from './schedule-idle-callback';
 var initialized = false;
@@ -98,6 +99,16 @@ export function init(analyticsWebClientAsync, config) {
   setupHiddenTimingCapture();
   startLighthouseObserver();
   initialized = true;
+  if (fg('platform_ufo_enable_events_observer')) {
+    if (typeof PerformanceObserver !== 'undefined') {
+      var observer = getPerformanceObserver();
+      observer.observe({
+        type: 'event',
+        buffered: true,
+        durationThreshold: 16
+      });
+    }
+  }
   Promise.all([analyticsWebClientAsync, import( /* webpackChunkName: "create-payloads" */'../create-payload'), import( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload')]).then(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 3),
       awc = _ref2[0],

package/dist/esm/interactions-performance-observer/index.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
+import { getActiveInteraction } from '../interaction-metrics';
+var performanceEventObserver;
+export var getPerformanceObserver = function getPerformanceObserver() {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(function (entries) {
+    var list = entries.getEntries();
+    var _iterator = _createForOfIteratorHelper(list),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        if (entry.name === 'click') {
+          setInteractionPerformanceEvent(entry);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+  return performanceEventObserver;
+};
+export var setInteractionPerformanceEvent = function setInteractionPerformanceEvent(entry) {
+  var interaction = getActiveInteraction();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    var _interaction$responsi, _interaction$responsi2;
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already been set up
+    interaction.responsiveness = _objectSpread(_objectSpread({}, interaction.responsiveness), {}, {
+      experimentalInputToNextPaint: ((_interaction$responsi = interaction.responsiveness) === null || _interaction$responsi === void 0 ? void 0 : _interaction$responsi.experimentalInputToNextPaint) || entry.duration,
+      inputDelay: ((_interaction$responsi2 = interaction.responsiveness) === null || _interaction$responsi2 === void 0 ? void 0 : _interaction$responsi2.inputDelay) || entry.processingStart - entry.startTime
+    });
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    interaction.start = Math.min(interaction.start, entry.startTime);
+  }
+};

package/dist/esm/segment/segment.js

@@ -23,7 +23,6 @@ var AsyncSegmentHighlight = /*#__PURE__*/lazy(function () {
     };
   });
 });
-var noopIdMap = new Map();
 
 // KARL TODO: finish self profiling
 /** A portion of the page we apply measurement to */
@@ -35,19 +34,12 @@ export default function UFOSegment(_ref) {
     mode = _ref$mode === void 0 ? 'single' : _ref$mode;
   var parentContext = useContext(UFOInteractionContext);
   var segmentIdMap = useMemo(function () {
-    if (!fg('platform_ufo_segment_list_mode')) {
-      // just in case we cause rerender issues, use noop map
-      return noopIdMap;
-    }
     if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {
       return new Map();
     }
     return parentContext.segmentIdMap;
   }, [parentContext]);
   var segmentId = useMemo(function () {
-    if (!fg('platform_ufo_segment_list_mode')) {
-      return generateId();
-    }
     if (mode === 'single') {
       return generateId();
     }

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

@@ -4,9 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { fg } from '@atlaskit/platform-feature-flags';
-import { shouldHandleEditorLnv } from '../../../config';
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
-import { EditorLnvHandler } from './editor-lnv';
 import isNonVisualStyleMutation from './non-visual-styles/is-non-visual-style-mutation';
 import { SSRPlaceholderHandlers } from './ssr-placeholders';
 var state = {
@@ -76,7 +74,6 @@ export var Observers = /*#__PURE__*/function () {
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
     this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
-    this.editorLnvHandler = new EditorLnvHandler();
   }
   return _createClass(Observers, [{
     key: "isBrowserSupported",
@@ -113,7 +110,6 @@ export var Observers = /*#__PURE__*/function () {
       this.callbacks = new Set();
       this.ssr.reactRootElement = null;
       this.ssrPlaceholderHandler.clear();
-      this.editorLnvHandler.clear();
     }
   }, {
     key: "getTotalTime",
@@ -145,7 +141,6 @@ export var Observers = /*#__PURE__*/function () {
       if (!this.isBrowserSupported()) {
         return null;
       }
-      var shouldHandleEditorLnvLocal = shouldHandleEditorLnv();
       return new MutationObserver(function (mutations) {
         _this2.measureStart();
         mutations.forEach(function (mutation) {
@@ -191,15 +186,6 @@ export var Observers = /*#__PURE__*/function () {
                   });
                   return;
                 }
-                if (shouldHandleEditorLnvLocal) {
-                  if (_this2.editorLnvHandler.shouldHandleAddedNode(node)) {
-                    _this2.editorLnvHandler.handleAddedNode(node).then(function (_ref) {
-                      var shouldIgnore = _ref.shouldIgnore;
-                      _this2.observeElement(node, mutation, 'html', shouldIgnore ? 'editor-lazy-node-view' : ignoreReason);
-                    });
-                    return;
-                  }
-                }
                 _this2.observeElement(node, mutation, 'html', ignoreReason);
               }
               if (node instanceof Text && node.parentElement != null) {
@@ -277,10 +263,10 @@ export var Observers = /*#__PURE__*/function () {
       }
       return new IntersectionObserver(function (entries) {
         _this3.measureStart();
-        entries.forEach(function (_ref2) {
-          var isIntersecting = _ref2.isIntersecting,
-            ir = _ref2.intersectionRect,
-            target = _ref2.target;
+        entries.forEach(function (_ref) {
+          var isIntersecting = _ref.isIntersecting,
+            ir = _ref.intersectionRect,
+            target = _ref.target;
           var data = _this3.observedMutations.get(target);
           _this3.observedMutations.delete(target);
           if (isIntersecting && ir.width > 0 && ir.height > 0) {

package/dist/esm/vc/vc-observer/revisions/fy25_01.js

@@ -7,7 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { ViewportUpdateClassifier } from './ViewportUpdateClassifier';
-var legacyIgnoreReasons = ['image', 'ssr-hydration', 'editor-lazy-node-view'];
+var legacyIgnoreReasons = ['image', 'ssr-hydration'];
 export var FY25_01Classifier = /*#__PURE__*/function (_ViewportUpdateClassi) {
   function FY25_01Classifier() {
     var _this;

package/dist/types/common/common/types.d.ts

@@ -82,6 +82,12 @@ export interface Redirect {
     fromInteractionName: string;
     time: number;
 }
+export type ResponsivenessMetric = {
+    experimentalInputToNextPaint?: number;
+    inputDelay?: number;
+    visuallyComplete?: number;
+    totalBlockingTime?: number;
+};
 export interface InteractionMetrics {
     id: string;
     start: number;
@@ -138,6 +144,7 @@ export interface InteractionMetrics {
      * ]
      * ```
      */
+    responsiveness?: ResponsivenessMetric;
     labelStack: LabelStack | null;
     routeName: string | null;
     featureFlags?: {

package/dist/types/common/vc/types.d.ts

@@ -37,7 +37,7 @@ export type VCEntryType = {
     vc: number;
     elements: string[];
 };
-export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | 'not-visible' | 'non-visual-style' | '';
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'not-visible' | 'non-visual-style' | '';
 export type ComponentsLogEntry = {
     type?: string;
     targetName: string;

package/dist/types/config/index.d.ts

@@ -90,7 +90,6 @@ export type Config = {
     readonly shouldCalculateLighthouseMetricsFromTTAI?: boolean;
     readonly timeWindowForLateMutationsInMilliseconds?: number;
     readonly manuallyTrackReactProfilerMounts?: boolean;
-    readonly enableEditorLnvHandler?: boolean;
     /**
      * @private
      * @deprecated setting this will do nothing now
@@ -112,5 +111,4 @@ export declare function getRemoveInteractionsUFOPrefixes(): boolean;
 export declare function getUfoNameOverrides(): UFONameOverride | undefined;
 export declare function getDoNotAbortActivePressInteraction(): string[] | undefined;
 export declare function getDoNotAbortActivePressInteractionOnTransition(): string[] | undefined;
-export declare function shouldHandleEditorLnv(): boolean;
 export {};