@atlaskit/react-ufo 3.13.7 → 3.13.10

package/.cursor/rules/feature-gating.mdc

@@ -0,0 +1,12 @@
+---
+description:
+globs:
+alwaysApply: true
+---
+# Feature Flagging
+- Feature Gate is synonymous to feature flag
+- To do fetaure gating first need to import `import { fg } from '@atlaskit/platform-feature-flags';`
+- to evaluate fature gate: `fg('fg-name')` it returns boolean
+- if fg is used in if, put the fg check as last condition of the if statement e.g. `if (a===b && fg('my_fg'))`
+- feature gates need to be registered in [package.json](mdc:platform/packages/react-ufo/atlaskit/package.json)
+

package/.cursor/rules/how-to-run-unit-test.mdc

@@ -0,0 +1,10 @@
+---
+description:
+globs:
+alwaysApply: true
+---
+## Running Tests
+- Unit tests: `cd platform && yarn test packages/react-ufo`
+- Integration tests: Start dev server with `yarn start:rspack react-ufo`, then run `yarn test:integration packages/react-ufo/atlaskit/__tests__/ --retries 0 --reporter list --reuse-dev-server --project=desktop-chromium --max-failures=0`
+- Specific test file: `yarn test <path-to-test-file>`
+- Clear Jest cache if compilation issues: `yarn test <path> --clearCache`

package/.cursor/rules/integration-test.mdc

@@ -0,0 +1,11 @@
+---
+description:
+globs:
+alwaysApply: true
+---
+# Integration test
+- Integration tests: Start dev server with `yarn start:rspack react-ufo`, then run `yarn test:integration packages/react-ufo/atlaskit/__tests__/ --retries 0 --reporter list --reuse-dev-server --project=desktop-chromium --max-failures=0`
+- integration test cases are located in `packages/react-ufo/atlaskit/__tests__`
+- There are test helper in `packages/react-ufo/atlaskit/__tests__/fixtures.ts`
+- Integration test run examples page in a browser using playwright then execute the test cases scenarios
+- To determine which example page is run `test.use({ examplePage: 'exapmle-page-name' });`, which corresponds to file in `packages/react-ufo/atlaskit/examples`

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 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
+
+- [#160478](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160478)
+  [`e79a796bb3b5a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e79a796bb3b5a) -
+  Add id to ttvc v3 attribute ignore list
+
 ## 3.13.7
 
 ### Patch Changes

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/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/fy25_03/index.js

@@ -47,7 +47,7 @@ var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCC
         if (attributeName === 'data-aui-version' && (0, _platformFeatureFlags.fg)('platform_ufo_filter_out_aui_attribute_changes')) {
           return false;
         }
-        if ((attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) && (0, _platformFeatureFlags.fg)('platform_ufo_ignore_non_vis_attributes')) {
+        if ((attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) && (0, _platformFeatureFlags.fg)('platform_ufo_ignore_non_vis_attributes')) {
           return false;
         }
         return true;

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-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/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/fy25_03/index.js

@@ -29,7 +29,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
       if (attributeName === 'data-aui-version' && fg('platform_ufo_filter_out_aui_attribute_changes')) {
         return false;
       }
-      if ((attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) && fg('platform_ufo_ignore_non_vis_attributes')) {
+      if ((attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) && fg('platform_ufo_ignore_non_vis_attributes')) {
         return false;
       }
       return true;

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-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/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/fy25_03/index.js

@@ -40,7 +40,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
         if (attributeName === 'data-aui-version' && fg('platform_ufo_filter_out_aui_attribute_changes')) {
           return false;
         }
-        if ((attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) && fg('platform_ufo_ignore_non_vis_attributes')) {
+        if ((attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) && fg('platform_ufo_ignore_non_vis_attributes')) {
           return false;
         }
         return true;

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/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/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.7",
+	"version": "3.13.10",
 	"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,9 @@
 		},
 		"platform_ufo_ignore_non_vis_attributes": {
 			"type": "boolean"
+		},
+		"platform_ufo_v3_add_start_entry": {
+			"type": "boolean"
 		}
 	}
 }