@atlaskit/react-ufo 3.1.4 → 3.3.0

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

@@ -0,0 +1,13 @@
+import type { VCObserverEntry } from '../types';
+export default class EntriesTimeline {
+    private unorderedEntries;
+    private sortedEntriesCache;
+    constructor();
+    push(entry: VCObserverEntry): void;
+    private getCacheKey;
+    getOrderedEntries({ start, stop, }: {
+        start?: DOMHighResTimeStamp | null;
+        stop?: DOMHighResTimeStamp | null;
+    }): ReadonlyArray<VCObserverEntry>;
+    clear(): void;
+}

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

@@ -0,0 +1,8 @@
+export type SelectorConfig = {
+    id: boolean;
+    testId: boolean;
+    role: boolean;
+    className: boolean;
+    dataVC?: boolean;
+};
+export default function getElementName(selectorConfig: SelectorConfig, element: Element): string;

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

@@ -0,0 +1,18 @@
+import { type SelectorConfig } from './get-element-name';
+import type { RevisionPayloadEntry } from './metric-calculator/types';
+import type { VCObserverGetVCResultParam } from './types';
+export type VCObserverNewConfig = {
+    selectorConfig?: SelectorConfig;
+};
+export default class VCObserverNew {
+    startTime: number;
+    private selectorConfig;
+    private viewportObserver;
+    private windowEventObserver;
+    private entriesTimeline;
+    constructor(config: VCObserverNewConfig);
+    start(): void;
+    stop(): void;
+    getVCResult(param: VCObserverGetVCResultParam): Promise<RevisionPayloadEntry[]>;
+    private getElementName;
+}

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.d.ts

@@ -0,0 +1,9 @@
+import type { VCObserverEntry } from '../types';
+import type { RevisionPayloadEntry, VCCalculator, VCCalculatorParam } from './types';
+export default abstract class AbstractVCCalculatorBase implements VCCalculator {
+    private revisionNo;
+    constructor(revisionNo: string);
+    protected abstract isEntryIncluded(entry: VCObserverEntry): boolean;
+    protected abstract isVCClean(filteredEntries: ReadonlyArray<VCObserverEntry>): boolean;
+    calculate({ orderedEntries, }: VCCalculatorParam): Promise<RevisionPayloadEntry | undefined>;
+}

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

@@ -0,0 +1,7 @@
+import type { VCObserverEntry } from '../../types';
+import AbstractVCCalculatorBase from '../abstract-base-vc-calculator';
+export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
+    constructor();
+    protected isEntryIncluded(entry: VCObserverEntry): boolean;
+    protected isVCClean(filteredEntries: readonly VCObserverEntry[]): boolean;
+}

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

@@ -0,0 +1,91 @@
+type RGBColor = `rgb(${number}, ${number}, ${number})`;
+type Viewport = {
+    width: number;
+    height: number;
+};
+/**
+ * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
+ * It uses an OffscreenCanvas for better performance and maintains a mapping between
+ * colors and timestamps for pixel counting purposes.
+ */
+export declare class ViewportCanvas {
+    /** The underlying OffscreenCanvas instance */
+    private readonly canvas;
+    /** The 2D rendering context of the canvas */
+    private readonly ctx;
+    /** Scale factor applied to the canvas (affects final pixel counts) */
+    private readonly scaleFactor;
+    /** Maps unique colors to their corresponding timestamps */
+    private readonly colorTimeMap;
+    /** Counter used to generate unique colors */
+    private colorCounter;
+    private scaledWidth;
+    private scaledHeight;
+    private scaleX;
+    private scaleY;
+    /**
+     * Creates a new ViewportCanvas instance.
+     * @param viewport - The dimensions of the viewport
+     * @param scaleFactor - Scale factor to apply to the canvas (default: 0.5)
+     * @throws {Error} If canvas context cannot be obtained
+     */
+    constructor(viewport: Viewport, scaleFactor?: number);
+    getScaledDimensions(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Clears the entire canvas by removing all drawn content.
+     * @private
+     */
+    private clear;
+    /**
+     * Generates a unique RGB color from an incrementing counter.
+     * Uses a 24-bit color space (16,777,216 possible colors).
+     *
+     * @private
+     * @returns A unique RGB color string
+     *
+     * @example
+     * // Example bit operations for color 0x00FF8040:
+     * // Red:   (0x00FF8040 >> 16) & 0xFF = 0xFF = 255
+     * // Green: (0x00FF8040 >> 8) & 0xFF  = 0x80 = 128
+     * // Blue:   0x00FF8040 & 0xFF        = 0x40 = 64
+     */
+    private generateColor;
+    /**
+     * Draws a rectangle on the canvas with a unique color and associates it with a timestamp.
+     * Each drawn rectangle gets a unique color which is mapped to the provided timestamp.
+     *
+     * @param rect - The rectangle dimensions to draw
+     * @param timestamp - The timestamp to associate with this drawing operation
+     */
+    drawRect(rect: DOMRect, timestamp: DOMHighResTimeStamp): void;
+    /**
+     * Calculates the number of pixels drawn for each timestamp.
+     * This method:
+     * 1. Reads the pixel data from the canvas
+     * 2. Counts pixels of each unique color
+     * 3. Maps colors back to their timestamps
+     * 4. Adjusts counts based on the scale factor
+     *
+     * @returns A Map containing timestamp to pixel count mappings
+     */
+    getPixelCounts(): Promise<Map<DOMHighResTimeStamp, number>>;
+}
+/**
+ * Converts a number into RGB components in such a way that they can be recombined
+ * to form the original number using bitwise operations.
+ * @param number - The input number to be split into RGB components.
+ * @returns The RGB color string in the format "rgb(r, g, b)".
+ */
+export declare function getRGBComponents(n: number): RGBColor;
+/**
+ * Calculates the number of pixels drawn for each color in the image data.
+ * @param imageData - The image data to analyze.
+ * @param scaleFactor - The scale factor applied to the canvas.
+ * @param arraySize - The amount of timestamps that were drawn in the viewport
+ * @returns A Map containing color to pixel count mappings.
+ */
+export declare function calculateDrawnPixelsRaw(imageData: ImageData, scaleFactor: number, arraySize: number): Promise<Uint32Array>;
+export {};

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

@@ -0,0 +1,4 @@
+import type { RevisionPayloadVCDetails } from '../../types';
+import type { CalcTTVCPercentilesArg } from '../types';
+export default function calculateTTVCPercentiles({ viewport, orderedEntries, percentiles, }: CalcTTVCPercentilesArg): Promise<RevisionPayloadVCDetails>;
+export declare function calculatePercentiles(timePixelCounts: Map<DOMHighResTimeStamp, number>, elementMap: ReadonlyMap<DOMHighResTimeStamp, Set<string>>, unorderedPercentiles: number[], totalPixels: number): RevisionPayloadVCDetails;

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

@@ -0,0 +1,39 @@
+import type { VCObserverEntry } from '../../../types';
+import { HeatmapCheckpointMetrics, HeatmapEntry, HeatmapOptions } from './types';
+export default class Heatmap {
+    private viewport;
+    /**
+     * Heatmap Width
+     */
+    private width;
+    /**
+     * Heatmap Height
+     */
+    private height;
+    /**
+     * Heatmap Area (width * height)
+     */
+    private heatmapAreaSize;
+    private scaleX;
+    private scaleY;
+    private map;
+    constructor({ viewport, heatmapSize }: HeatmapOptions);
+    getHeatmap(): HeatmapEntry[][];
+    private getCell;
+    /**
+     * Map Dom Rect to Heatmap Rect, rounded up to occupy full cell.
+     * @param rect DOM Rect
+     * @returns
+     */
+    private mapDOMRectToHeatmap;
+    /**
+     * Calculate the ratio of a HeatmapRect compared to the full heatmap
+     *
+     * This function determines what fraction of the heatmap is covered by the given heatmap rectangle.
+     *
+     * @param rect
+     */
+    private getRatio;
+    applyEntriesToHeatmap(entries: ReadonlyArray<VCObserverEntry>): Promise<void>;
+    getVCPercentMetrics(vcPercentCheckpoint: number[]): Promise<HeatmapCheckpointMetrics>;
+}

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

@@ -0,0 +1,8 @@
+import type { VCObserverEntry } from '../../../types';
+import type { RevisionPayloadVCDetails } from '../../types';
+import type { Viewport } from './types';
+export default function calculateTTVCPercentiles({ orderedEntries, viewport, percentiles, }: {
+    orderedEntries: ReadonlyArray<VCObserverEntry>;
+    viewport: Viewport;
+    percentiles: number[];
+}): Promise<RevisionPayloadVCDetails>;

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

@@ -0,0 +1,43 @@
+import type { VCObserverEntryType } from '../../../types';
+/**
+ * Represents a rectangular area in the heatmap.
+ */
+export type HeatmapRect = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+export type HeatmapSource = VCObserverEntryType | 'mutation:parent-mounted' | 'mutation:node-replacement';
+export type HeatmapEntryData = {
+    time: DOMHighResTimeStamp;
+    elementName: string | null;
+    rect: HeatmapRect | null;
+    source: HeatmapSource | null;
+    ratio: number | null;
+};
+export type HeatmapEntry = {
+    head: HeatmapEntryData | null;
+    previousEntries: Array<HeatmapEntryData>;
+};
+export type Viewport = {
+    width: number;
+    height: number;
+};
+export type HeatmapOptions = {
+    viewport: Viewport;
+    heatmapSize: number;
+};
+export type DOMSelector = string;
+export type HeatmapCheckpointMetrics = {
+    [checkpoint: string]: {
+        /**
+         * Time when this checkpoint reached
+         */
+        t: DOMHighResTimeStamp;
+        /**
+         * A collection of DOM Selector that are part of the checkpoint
+         */
+        e: DOMSelector[];
+    };
+};

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

@@ -0,0 +1,3 @@
+import type { RevisionPayloadVCDetails } from '../types';
+import type { CalcTTVCPercentilesArg } from './types';
+export default function calculateTTVCPercentiles(arg: CalcTTVCPercentilesArg): Promise<RevisionPayloadVCDetails | null>;

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Calculate the union areas of all rectangles using Sweep Line Algorithm
+ *
+ * Reference:
+ * 	https://en.wikipedia.org/wiki/Sweep_line_algorithm
+ *  https://www.hackerearth.com/practice/math/geometry/line-sweep-technique/tutorial/#:~:text=A%20sweep%20line%20is%20an,order%20to%20discretize%20the%20sweep.
+ *
+ * @param rectangles
+ * @returns
+ */
+export default function calculateUnionArea(rectangles: DOMRect[]): number;

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.d.ts

@@ -0,0 +1,23 @@
+import type { VCObserverEntry } from '../../../types';
+export type DOMSelector = string;
+export type Viewport = {
+    width: number;
+    height: number;
+};
+export type CheckpointMetrics = {
+    [checkpoint: string]: {
+        /**
+         * Time when this checkpoint reached
+         */
+        t: DOMHighResTimeStamp;
+        /**
+         * A collection of DOM Selector that are part of the checkpoint
+         */
+        e: DOMSelector[];
+    };
+};
+export default function calculateTTVCPercentiles({ orderedEntries, viewport, percentiles, }: {
+    orderedEntries: ReadonlyArray<VCObserverEntry>;
+    viewport: Viewport;
+    percentiles: number[];
+}): Promise<CheckpointMetrics>;

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

@@ -0,0 +1,9 @@
+import type { VCObserverEntry } from '../../types';
+export type CalcTTVCPercentilesArg = {
+    viewport: {
+        width: number;
+        height: number;
+    };
+    orderedEntries: ReadonlyArray<VCObserverEntry>;
+    percentiles: number[];
+};

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

@@ -0,0 +1,20 @@
+import type { VCObserverEntry } from '../types';
+export type RevisionPayloadVCDetails = {
+    [key: string]: {
+        t: number;
+        e: string[];
+    };
+};
+export type RevisionPayloadEntry = {
+    'metric:vc90': number | null;
+    revision: string;
+    clean: boolean;
+    vcDetails?: RevisionPayloadVCDetails;
+};
+export type RevisionPayload = RevisionPayloadEntry[];
+export type VCCalculatorParam = {
+    orderedEntries: ReadonlyArray<VCObserverEntry>;
+};
+export interface VCCalculator {
+    calculate(param: VCCalculatorParam): Promise<RevisionPayloadEntry | undefined>;
+}

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/utils/get-viewport-height.d.ts

@@ -0,0 +1 @@
+export default function getViewportHeight(document?: Document): number;

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/utils/get-viewport-width.d.ts

@@ -0,0 +1 @@
+export default function getViewportWidth(document?: Document): number;

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/utils/is-viewport-entry-data.d.ts

@@ -0,0 +1,2 @@
+import type { ViewportEntryData } from '../../types';
+export default function isViewportEntryData(data: any): data is ViewportEntryData;

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/utils/task-yield.d.ts

@@ -0,0 +1 @@
+export default function taskYield(): Promise<void>;

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

@@ -0,0 +1,21 @@
+import type { ObservedWindowEvent } from './window-event-observer';
+export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute' | 'mutation:media' | 'layout-shift' | 'window:event' | 'unknown';
+export type ViewportEntryData = {
+    readonly elementName: string;
+    readonly rect: DOMRect;
+    readonly previousRect?: DOMRect | undefined;
+    readonly visible: boolean;
+    readonly attributeName?: string | null | undefined;
+};
+export type WindowEventEntryData = {
+    readonly eventType: ObservedWindowEvent;
+};
+export type VCObserverEntry = {
+    readonly time: DOMHighResTimeStamp;
+    readonly type: VCObserverEntryType;
+    readonly data: ViewportEntryData | WindowEventEntryData;
+};
+export type VCObserverGetVCResultParam = {
+    start: number;
+    stop: number;
+};

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

@@ -0,0 +1,22 @@
+import { type VCObserverEntryType } from '../types';
+import { type MutationData } from './types';
+export type ViewPortObserverConstructorArgs = {
+    onChange(onChangeArgs: {
+        readonly time: DOMHighResTimeStamp;
+        readonly type: VCObserverEntryType;
+        readonly elementRef: WeakRef<HTMLElement>;
+        readonly visible: boolean;
+        readonly rect: DOMRectReadOnly;
+        readonly previousRect: DOMRectReadOnly | undefined;
+        readonly mutationData?: MutationData | undefined | null;
+    }): void;
+};
+export default class ViewportObserver {
+    private intersectionObserver;
+    private mutationObserver;
+    private performanceObserver;
+    private mapVisibleNodeRects;
+    constructor({ onChange }: ViewPortObserverConstructorArgs);
+    start(): void;
+    stop(): void;
+}

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

@@ -0,0 +1,30 @@
+import type { VCObserverEntryType } from '../../types';
+import type { MutationData } from '../types';
+type TagCallback = (props: {
+    target: HTMLElement;
+    rect: DOMRectReadOnly;
+}) => VCObserverEntryType | undefined | null | {
+    type: VCObserverEntryType;
+    mutationData: MutationData;
+};
+type ObserveArg_TagOrCallback = VCObserverEntryType | TagCallback;
+export interface VCIntersectionObserver {
+    disconnect(): void;
+    unobserve(target: Element): void;
+    watchAndTag: (target: Element, tagOrCallback: ObserveArg_TagOrCallback) => void;
+}
+export type IntersectionObserverArgs = {
+    onEntry: (entry: {
+        time: DOMHighResTimeStamp;
+        type: VCObserverEntryType;
+        target: HTMLElement;
+        rect: DOMRectReadOnly;
+        mutationData: MutationData | null | undefined;
+    }) => void;
+    onObserved?: (props: {
+        time: DOMHighResTimeStamp;
+        elements: ReadonlyArray<WeakRef<HTMLElement>>;
+    }) => void;
+};
+export declare function createIntersectionObserver(args: IntersectionObserverArgs): VCIntersectionObserver | null;
+export {};

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

@@ -0,0 +1,14 @@
+export type CreateMutationObserverProps = {
+    onAttributeMutation: (props: {
+        target: HTMLElement;
+        attributeName: string;
+    }) => void;
+    onMutationFinished?: (props: {
+        targets: Array<HTMLElement>;
+    }) => void;
+    onChildListMutation: (props: {
+        addedNodes: ReadonlyArray<HTMLElement>;
+        removedNodes: ReadonlyArray<HTMLElement>;
+    }) => void;
+};
+export default function createMutationObserver({ onAttributeMutation, onChildListMutation, onMutationFinished, }: CreateMutationObserverProps): MutationObserver | null;

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

@@ -0,0 +1,14 @@
+export declare function convertPhysicalToLogicalResolution(rect: DOMRect): DOMRect;
+type ChangedRect = Array<{
+    node: HTMLElement;
+    rect: DOMRectReadOnly;
+    previousRect: DOMRectReadOnly;
+}>;
+export type CreatePerformanceObserverArgs = {
+    onLayoutShift: (args: {
+        time: DOMHighResTimeStamp;
+        changedRects: ChangedRect;
+    }) => void;
+};
+export default function createPerformanceObserver(args: CreatePerformanceObserverArgs): PerformanceObserver | null;
+export {};

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

@@ -0,0 +1,10 @@
+export type MutationRecordWithTimestamp = MutationRecord & {
+    timestamp?: number;
+};
+export type AttributeMutationData = {
+    attributeName: string;
+};
+/**
+ * Add here when there are more type of mutation data
+ */
+export type MutationData = AttributeMutationData;

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

@@ -0,0 +1,17 @@
+export type ObservedWindowEvent = 'wheel' | 'scroll' | 'keydown' | 'resize';
+export type OnEventCallback = (args: {
+    time: DOMHighResTimeStamp;
+    type: ObservedWindowEvent;
+    event: Event;
+}) => void;
+export type WindowEventObserverOptions = {
+    onEvent: OnEventCallback;
+};
+export default class WindowEventObserver {
+    private unbindFns;
+    private onEvent;
+    constructor(opts: WindowEventObserverOptions);
+    private bindEvent;
+    start(): void;
+    stop(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.1.4",
+	"version": "3.3.0",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -127,6 +127,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_ufo_canvas_heatmap_full_precision": {
+			"type": "boolean"
+		},
 		"platform_ufo_fix_vc_observer_rounding_error": {
 			"type": "boolean"
 		},
@@ -162,6 +165,15 @@
 		},
 		"ufo_support_other_resource_type_js": {
 			"type": "boolean"
+		},
+		"platform_ufo_vc_observer_new": {
+			"type": "boolean"
+		},
+		"platform_ufo_vc_ttai_on_paint": {
+			"type": "boolean"
+		},
+		"enable_ufo_devtools_api_for_extra_events": {
+			"type": "boolean"
 		}
 	}
 }