@atlaskit/react-ufo 5.4.9 → 5.4.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 5.4.10
+
+### Patch Changes
+
+- [`3d793d41ae6c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d793d41ae6c9) -
+  Add capture-phase scroll detection for container scrollbar drags behind
+  platform_ufo_detect_container_scroll feature flag
+
 ## 5.4.9
 
 ### Patch Changes

package/dist/cjs/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -100,8 +100,9 @@ var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCC
       var hasAbortEvent = filteredEntries.some(function (entry) {
         if (entry.data.type === 'window:event') {
           var data = entry.data;
-          if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
-            dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;
+          var eventType = data.eventType;
+          if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+            dirtyReason = eventType === 'keydown' ? 'keypress' : eventType;
             abortTimestamp = Math.round(entry.time);
             return true;
           }

package/dist/cjs/vc/vc-observer-new/metric-calculator/vc-next/index.js

@@ -15,6 +15,7 @@ var _fy26_ = _interopRequireDefault(require("../fy26_04"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+var ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize', 'scroll-container'];
 var getConsideredEntryTypes = function getConsideredEntryTypes() {
   var consideredEntryTypes = [];
   return consideredEntryTypes;
@@ -38,5 +39,39 @@ var VCCalculator_Next = exports.default = /*#__PURE__*/function (_VCCalculator_F
       }
       return getConsideredEntryTypes().includes(entry.data.type);
     }
+  }, {
+    key: "getVCCleanStatus",
+    value: function getVCCleanStatus(filteredEntries) {
+      var dirtyReason = '';
+      var abortTimestamp = -1;
+      var hasAbortEvent = filteredEntries.some(function (entry) {
+        if (entry.data.type === 'window:event') {
+          var data = entry.data;
+          var eventType = data.eventType;
+          if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+            if (eventType === 'keydown') {
+              dirtyReason = 'keypress';
+            } else if (eventType === 'scroll-container') {
+              dirtyReason = 'scroll';
+            } else {
+              dirtyReason = eventType;
+            }
+            abortTimestamp = Math.round(entry.time);
+            return true;
+          }
+        }
+        return false;
+      });
+      if (hasAbortEvent && dirtyReason) {
+        return {
+          isVCClean: false,
+          dirtyReason: dirtyReason,
+          abortTimestamp: abortTimestamp
+        };
+      }
+      return {
+        isVCClean: true
+      };
+    }
   }]);
 }(_fy26_.default);

package/dist/cjs/vc/vc-observer-new/raw-data-handler/index.js

@@ -36,8 +36,9 @@ var RawDataHandler = exports.default = /*#__PURE__*/function () {
       var hasAbortEvent = filteredEntries.some(function (entry) {
         if (entry.data.type === 'window:event') {
           var data = entry.data;
-          if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
-            dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;
+          var eventType = data.eventType;
+          if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+            dirtyReason = eventType === 'keydown' ? 'keypress' : eventType;
             abortTimestamp = Math.round(entry.time);
             return true;
           }

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

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _bindEventListener = require("bind-event-listener");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var WindowEventObserver = exports.default = /*#__PURE__*/function () {
   function WindowEventObserver(opts) {
     (0, _classCallCheck2.default)(this, WindowEventObserver);
@@ -38,6 +39,38 @@ var WindowEventObserver = exports.default = /*#__PURE__*/function () {
       });
       this.unbindFns.push(unbindCallback);
     }
+
+    /**
+     * Binds a scroll listener on `document` using the capture phase.
+     * The `scroll` event does not bubble, so listening on `window` only catches
+     * document-level scrolls. By using `{ capture: true }` on `document`, we can
+     * detect scroll events from any element in the DOM tree, including inner
+     * scrollable containers (e.g. when the user drags a scrollbar).
+     */
+  }, {
+    key: "bindCaptureScrollEvent",
+    value: function bindCaptureScrollEvent() {
+      var _this2 = this;
+      var unbindCallback = (0, _bindEventListener.bind)(document, {
+        type: 'scroll',
+        listener: function listener(event) {
+          if (!event.isTrusted) {
+            return;
+          }
+          _this2.onEvent({
+            time: event.timeStamp,
+            type: 'scroll-container',
+            event: event
+          });
+        },
+        options: {
+          capture: true,
+          passive: true,
+          once: true
+        }
+      });
+      this.unbindFns.push(unbindCallback);
+    }
   }, {
     key: "start",
     value: function start() {
@@ -45,6 +78,9 @@ var WindowEventObserver = exports.default = /*#__PURE__*/function () {
       this.bindEvent('scroll');
       this.bindEvent('keydown');
       this.bindEvent('resize');
+      if ((0, _platformFeatureFlags.fg)('platform_ufo_detect_container_scroll')) {
+        this.bindCaptureScrollEvent();
+      }
     }
   }, {
     key: "stop",

package/dist/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -80,8 +80,9 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
     const hasAbortEvent = filteredEntries.some(entry => {
       if (entry.data.type === 'window:event') {
         const data = entry.data;
-        if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
-          dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;
+        const eventType = data.eventType;
+        if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+          dirtyReason = eventType === 'keydown' ? 'keypress' : eventType;
           abortTimestamp = Math.round(entry.time);
           return true;
         }

package/dist/es2019/vc/vc-observer-new/metric-calculator/vc-next/index.js

@@ -1,4 +1,5 @@
 import VCCalculator_FY26_04 from '../fy26_04';
+const ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize', 'scroll-container'];
 const getConsideredEntryTypes = () => {
   const consideredEntryTypes = [];
   return consideredEntryTypes;
@@ -18,4 +19,36 @@ export default class VCCalculator_Next extends VCCalculator_FY26_04 {
     }
     return getConsideredEntryTypes().includes(entry.data.type);
   }
+  getVCCleanStatus(filteredEntries) {
+    let dirtyReason = '';
+    let abortTimestamp = -1;
+    const hasAbortEvent = filteredEntries.some(entry => {
+      if (entry.data.type === 'window:event') {
+        const data = entry.data;
+        const eventType = data.eventType;
+        if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+          if (eventType === 'keydown') {
+            dirtyReason = 'keypress';
+          } else if (eventType === 'scroll-container') {
+            dirtyReason = 'scroll';
+          } else {
+            dirtyReason = eventType;
+          }
+          abortTimestamp = Math.round(entry.time);
+          return true;
+        }
+      }
+      return false;
+    });
+    if (hasAbortEvent && dirtyReason) {
+      return {
+        isVCClean: false,
+        dirtyReason,
+        abortTimestamp
+      };
+    }
+    return {
+      isVCClean: true
+    };
+  }
 }

package/dist/es2019/vc/vc-observer-new/raw-data-handler/index.js

@@ -16,8 +16,9 @@ export default class RawDataHandler {
     const hasAbortEvent = filteredEntries.some(entry => {
       if (entry.data.type === 'window:event') {
         const data = entry.data;
-        if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
-          dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;
+        const eventType = data.eventType;
+        if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+          dirtyReason = eventType === 'keydown' ? 'keypress' : eventType;
           abortTimestamp = Math.round(entry.time);
           return true;
         }

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 export default class WindowEventObserver {
   constructor(opts) {
     _defineProperty(this, "unbindFns", []);
@@ -25,11 +26,43 @@ export default class WindowEventObserver {
     });
     this.unbindFns.push(unbindCallback);
   }
+
+  /**
+   * Binds a scroll listener on `document` using the capture phase.
+   * The `scroll` event does not bubble, so listening on `window` only catches
+   * document-level scrolls. By using `{ capture: true }` on `document`, we can
+   * detect scroll events from any element in the DOM tree, including inner
+   * scrollable containers (e.g. when the user drags a scrollbar).
+   */
+  bindCaptureScrollEvent() {
+    const unbindCallback = bind(document, {
+      type: 'scroll',
+      listener: event => {
+        if (!event.isTrusted) {
+          return;
+        }
+        this.onEvent({
+          time: event.timeStamp,
+          type: 'scroll-container',
+          event
+        });
+      },
+      options: {
+        capture: true,
+        passive: true,
+        once: true
+      }
+    });
+    this.unbindFns.push(unbindCallback);
+  }
   start() {
     this.bindEvent('wheel');
     this.bindEvent('scroll');
     this.bindEvent('keydown');
     this.bindEvent('resize');
+    if (fg('platform_ufo_detect_container_scroll')) {
+      this.bindCaptureScrollEvent();
+    }
   }
   stop() {
     this.unbindFns.forEach(cb => {

package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -93,8 +93,9 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
       var hasAbortEvent = filteredEntries.some(function (entry) {
         if (entry.data.type === 'window:event') {
           var data = entry.data;
-          if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
-            dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;
+          var eventType = data.eventType;
+          if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+            dirtyReason = eventType === 'keydown' ? 'keypress' : eventType;
             abortTimestamp = Math.round(entry.time);
             return true;
           }

package/dist/esm/vc/vc-observer-new/metric-calculator/vc-next/index.js

@@ -8,6 +8,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 import VCCalculator_FY26_04 from '../fy26_04';
+var ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize', 'scroll-container'];
 var getConsideredEntryTypes = function getConsideredEntryTypes() {
   var consideredEntryTypes = [];
   return consideredEntryTypes;
@@ -31,6 +32,40 @@ var VCCalculator_Next = /*#__PURE__*/function (_VCCalculator_FY26_) {
       }
       return getConsideredEntryTypes().includes(entry.data.type);
     }
+  }, {
+    key: "getVCCleanStatus",
+    value: function getVCCleanStatus(filteredEntries) {
+      var dirtyReason = '';
+      var abortTimestamp = -1;
+      var hasAbortEvent = filteredEntries.some(function (entry) {
+        if (entry.data.type === 'window:event') {
+          var data = entry.data;
+          var eventType = data.eventType;
+          if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+            if (eventType === 'keydown') {
+              dirtyReason = 'keypress';
+            } else if (eventType === 'scroll-container') {
+              dirtyReason = 'scroll';
+            } else {
+              dirtyReason = eventType;
+            }
+            abortTimestamp = Math.round(entry.time);
+            return true;
+          }
+        }
+        return false;
+      });
+      if (hasAbortEvent && dirtyReason) {
+        return {
+          isVCClean: false,
+          dirtyReason: dirtyReason,
+          abortTimestamp: abortTimestamp
+        };
+      }
+      return {
+        isVCClean: true
+      };
+    }
   }]);
 }(VCCalculator_FY26_04);
 export { VCCalculator_Next as default };

package/dist/esm/vc/vc-observer-new/raw-data-handler/index.js

@@ -29,8 +29,9 @@ var RawDataHandler = /*#__PURE__*/function () {
       var hasAbortEvent = filteredEntries.some(function (entry) {
         if (entry.data.type === 'window:event') {
           var data = entry.data;
-          if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
-            dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;
+          var eventType = data.eventType;
+          if (ABORTING_WINDOW_EVENT.includes(eventType)) {
+            dirtyReason = eventType === 'keydown' ? 'keypress' : eventType;
             abortTimestamp = Math.round(entry.time);
             return true;
           }

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

@@ -2,6 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 var WindowEventObserver = /*#__PURE__*/function () {
   function WindowEventObserver(opts) {
     _classCallCheck(this, WindowEventObserver);
@@ -31,6 +32,38 @@ var WindowEventObserver = /*#__PURE__*/function () {
       });
       this.unbindFns.push(unbindCallback);
     }
+
+    /**
+     * Binds a scroll listener on `document` using the capture phase.
+     * The `scroll` event does not bubble, so listening on `window` only catches
+     * document-level scrolls. By using `{ capture: true }` on `document`, we can
+     * detect scroll events from any element in the DOM tree, including inner
+     * scrollable containers (e.g. when the user drags a scrollbar).
+     */
+  }, {
+    key: "bindCaptureScrollEvent",
+    value: function bindCaptureScrollEvent() {
+      var _this2 = this;
+      var unbindCallback = bind(document, {
+        type: 'scroll',
+        listener: function listener(event) {
+          if (!event.isTrusted) {
+            return;
+          }
+          _this2.onEvent({
+            time: event.timeStamp,
+            type: 'scroll-container',
+            event: event
+          });
+        },
+        options: {
+          capture: true,
+          passive: true,
+          once: true
+        }
+      });
+      this.unbindFns.push(unbindCallback);
+    }
   }, {
     key: "start",
     value: function start() {
@@ -38,6 +71,9 @@ var WindowEventObserver = /*#__PURE__*/function () {
       this.bindEvent('scroll');
       this.bindEvent('keydown');
       this.bindEvent('resize');
+      if (fg('platform_ufo_detect_container_scroll')) {
+        this.bindCaptureScrollEvent();
+      }
     }
   }, {
     key: "stop",

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

@@ -3,4 +3,13 @@ import VCCalculator_FY26_04 from '../fy26_04';
 export default class VCCalculator_Next extends VCCalculator_FY26_04 {
     constructor();
     protected isEntryIncluded(entry: VCObserverEntry, include3p?: boolean, excludeSmartAnswersInSearch?: boolean): boolean;
+    protected getVCCleanStatus(filteredEntries: readonly VCObserverEntry[]): {
+        isVCClean: boolean;
+        dirtyReason: never;
+        abortTimestamp: number;
+    } | {
+        isVCClean: boolean;
+        dirtyReason?: undefined;
+        abortTimestamp?: undefined;
+    };
 }

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

@@ -1,5 +1,5 @@
 import type { AbortReasonType, InteractionType } from '../../common/common/types';
-import type { ObservedWindowEvent } from './window-event-observer';
+import type { ObservedWindowEventExtended } from './window-event-observer';
 export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:display-contents-children-element' | 'mutation:display-contents-children-attribute' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute:non-visual-input-name' | 'mutation:attribute:framework-routing' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'mutation:third-party-attribute' | 'mutation:smart-answers-element' | 'mutation:smart-answers-attribute' | 'mutation:ssr-placeholder' | 'layout-shift' | 'layout-shift:same-rect' | 'window:event' | 'ssr-hydration' | 'unknown';
 export type ViewportEntryData = {
     readonly type: VCObserverEntryType;
@@ -19,7 +19,7 @@ export type VCObserverLabelStacks = {
 };
 export type WindowEventEntryData = {
     readonly type: VCObserverEntryType;
-    readonly eventType: ObservedWindowEvent;
+    readonly eventType: ObservedWindowEventExtended;
 };
 export type VCObserverEntry = {
     readonly time: DOMHighResTimeStamp;

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

@@ -1,7 +1,8 @@
 export type ObservedWindowEvent = 'wheel' | 'scroll' | 'keydown' | 'resize';
+export type ObservedWindowEventExtended = ObservedWindowEvent | 'scroll-container';
 export type OnEventCallback = (args: {
     time: DOMHighResTimeStamp;
-    type: ObservedWindowEvent;
+    type: ObservedWindowEventExtended;
     event: Event;
 }) => void;
 export type WindowEventObserverOptions = {
@@ -12,6 +13,14 @@ export default class WindowEventObserver {
     private onEvent;
     constructor(opts: WindowEventObserverOptions);
     private bindEvent;
+    /**
+     * Binds a scroll listener on `document` using the capture phase.
+     * The `scroll` event does not bubble, so listening on `window` only catches
+     * document-level scrolls. By using `{ capture: true }` on `document`, we can
+     * detect scroll events from any element in the DOM tree, including inner
+     * scrollable containers (e.g. when the user drags a scrollbar).
+     */
+    private bindCaptureScrollEvent;
     start(): void;
     stop(): void;
 }

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

@@ -3,4 +3,13 @@ import VCCalculator_FY26_04 from '../fy26_04';
 export default class VCCalculator_Next extends VCCalculator_FY26_04 {
     constructor();
     protected isEntryIncluded(entry: VCObserverEntry, include3p?: boolean, excludeSmartAnswersInSearch?: boolean): boolean;
+    protected getVCCleanStatus(filteredEntries: readonly VCObserverEntry[]): {
+        isVCClean: boolean;
+        dirtyReason: never;
+        abortTimestamp: number;
+    } | {
+        isVCClean: boolean;
+        dirtyReason?: undefined;
+        abortTimestamp?: undefined;
+    };
 }

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

@@ -1,5 +1,5 @@
 import type { AbortReasonType, InteractionType } from '../../common/common/types';
-import type { ObservedWindowEvent } from './window-event-observer';
+import type { ObservedWindowEventExtended } from './window-event-observer';
 export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:display-contents-children-element' | 'mutation:display-contents-children-attribute' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute:non-visual-input-name' | 'mutation:attribute:framework-routing' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'mutation:third-party-attribute' | 'mutation:smart-answers-element' | 'mutation:smart-answers-attribute' | 'mutation:ssr-placeholder' | 'layout-shift' | 'layout-shift:same-rect' | 'window:event' | 'ssr-hydration' | 'unknown';
 export type ViewportEntryData = {
     readonly type: VCObserverEntryType;
@@ -19,7 +19,7 @@ export type VCObserverLabelStacks = {
 };
 export type WindowEventEntryData = {
     readonly type: VCObserverEntryType;
-    readonly eventType: ObservedWindowEvent;
+    readonly eventType: ObservedWindowEventExtended;
 };
 export type VCObserverEntry = {
     readonly time: DOMHighResTimeStamp;

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

@@ -1,7 +1,8 @@
 export type ObservedWindowEvent = 'wheel' | 'scroll' | 'keydown' | 'resize';
+export type ObservedWindowEventExtended = ObservedWindowEvent | 'scroll-container';
 export type OnEventCallback = (args: {
     time: DOMHighResTimeStamp;
-    type: ObservedWindowEvent;
+    type: ObservedWindowEventExtended;
     event: Event;
 }) => void;
 export type WindowEventObserverOptions = {
@@ -12,6 +13,14 @@ export default class WindowEventObserver {
     private onEvent;
     constructor(opts: WindowEventObserverOptions);
     private bindEvent;
+    /**
+     * Binds a scroll listener on `document` using the capture phase.
+     * The `scroll` event does not bubble, so listening on `window` only catches
+     * document-level scrolls. By using `{ capture: true }` on `document`, we can
+     * detect scroll events from any element in the DOM tree, including inner
+     * scrollable containers (e.g. when the user drags a scrollbar).
+     */
+    private bindCaptureScrollEvent;
     start(): void;
     stop(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "5.4.9",
+	"version": "5.4.10",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -214,6 +214,9 @@
 		},
 		"platform_ufo_exclude_dark_reader_extension": {
 			"type": "boolean"
+		},
+		"platform_ufo_detect_container_scroll": {
+			"type": "boolean"
 		}
 	}
 }