@atlaskit/react-ufo 5.2.9 → 5.3.0

package/dist/types/vc/vc-observer-new/metric-calculator/utils/detect-layout-shift-cause.d.ts

@@ -0,0 +1,31 @@
+import type { LayoutShiftOffender, LayoutShiftVariables } from '../../../../common/vc/types';
+import type { VCObserverEntry, ViewportEntryData } from '../../types';
+type DetectLayoutShiftCauseParams = {
+    /**
+     * All viewport observer entries, used to find potential offenders close to the layout-shift timestamp.
+     */
+    viewportEntries: ReadonlyArray<VCObserverEntry & {
+        data: ViewportEntryData;
+    }>;
+    /**
+     * The layout-shift entries that contributed to a VC checkpoint.
+     */
+    layoutShiftEntries: ReadonlyArray<ViewportEntryData>;
+    /**
+     * Timestamp of the VC checkpoint entry.
+     */
+    time: number;
+    /**
+     * Start time of the interaction; used to classify whether an offender happened before the VC checkpoint.
+     */
+    startTime: number;
+    /**
+     * Window around the checkpoint timestamp used to consider "nearby" offenders.
+     */
+    offenderWindowMs?: number;
+};
+export declare const detectLayoutShiftCause: ({ viewportEntries, layoutShiftEntries, time, startTime, offenderWindowMs, }: DetectLayoutShiftCauseParams) => {
+    layoutShiftVariables: LayoutShiftVariables;
+    layoutShiftOffenders: LayoutShiftOffender[];
+};
+export {};

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

@@ -11,6 +11,7 @@ export type ViewportEntryData = {
     readonly oldValue?: string | null | undefined;
     readonly newValue?: string | null | undefined;
     readonly labelStacks?: VCObserverLabelStacks;
+    readonly originalMutationTimestamp?: DOMHighResTimeStamp;
 };
 export type VCObserverLabelStacks = {
     segment: string;
@@ -39,4 +40,5 @@ export type VCObserverGetVCResultParam = {
     includeRawData?: boolean;
     includeSSRInV3?: boolean;
     rawDataStopTime?: number;
+    reportLayoutShiftOffenders?: boolean;
 };

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

@@ -13,6 +13,7 @@ export type ViewPortObserverConstructorArgs = {
     }): void;
     getSSRState?: () => any;
     getSSRPlaceholderHandler?: () => any;
+    trackLayoutShiftOffenders?: boolean;
     searchPageConfig?: SearchPageConfig;
 };
 export default class ViewportObserver {
@@ -23,10 +24,11 @@ export default class ViewportObserver {
     private mapIs3pResult;
     private onChange;
     private isStarted;
+    private trackLayoutShiftOffenders;
     private searchPageConfig;
     private getSSRState?;
     private getSSRPlaceholderHandler?;
-    constructor({ onChange, getSSRState, getSSRPlaceholderHandler, searchPageConfig, }: ViewPortObserverConstructorArgs);
+    constructor({ onChange, getSSRState, getSSRPlaceholderHandler, trackLayoutShiftOffenders, searchPageConfig, }: ViewPortObserverConstructorArgs);
     private handleIntersectionEntry;
     private handleChildListMutation;
     private handleAttributeMutation;

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

@@ -4,6 +4,7 @@ export type CreateMutationObserverProps = {
         attributeName: string;
         oldValue?: string | undefined | null;
         newValue?: string | undefined | null;
+        timestamp: DOMHighResTimeStamp;
     }) => void;
     onMutationFinished?: (props: {
         targets: Array<HTMLElement>;

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

@@ -1,7 +1,10 @@
 export type MutationRecordWithTimestamp = MutationRecord & {
     timestamp?: number;
 };
-export type AttributeMutationData = {
+export type MutationDataWithTimestamp = {
+    timestamp?: DOMHighResTimeStamp;
+};
+export type AttributeMutationData = MutationDataWithTimestamp & {
     attributeName: string;
     oldValue?: string | undefined | null;
     newValue?: string | undefined | null;
@@ -9,4 +12,4 @@ export type AttributeMutationData = {
 /**
  * Add here when there are more type of mutation data
  */
-export type MutationData = AttributeMutationData;
+export type MutationData = AttributeMutationData | MutationDataWithTimestamp;

package/dist/types-ts4.5/common/react-ufo-payload-schema.d.ts

@@ -1,4 +1,5 @@
 import { type createPayloads } from '../create-payload';
+import type { HiddenTimingItem } from '../hidden-timing';
 import { type LabelStack } from '../interaction-context';
 import { type VCObserver } from '../vc/vc-observer';
 import type { AbortReasonType, ApdexType, HoldActive, InteractionError, InteractionType, MinorInteraction, SegmentInfo } from './common/types';
@@ -122,6 +123,7 @@ export type ReactUFOPayload = {
             'ufo:wasPageHiddenBeforeInit'?: boolean;
             'ufo:isOpenedInBackground'?: boolean;
             'ufo:isTabThrottled'?: boolean;
+            'ufo:pageVisibilityTimeline'?: HiddenTimingItem[];
             interactionMetrics: {
                 namePrefix: string;
                 segmentPrefix: string;

package/dist/types-ts4.5/common/vc/types.d.ts

@@ -118,6 +118,7 @@ export type CalculateTTVCResult = {
     vcDetails: RevisionPayloadVCDetails;
     ssrRatio: number;
     speedIndex: number;
+    VC90layoutShiftInsights: LayoutShiftInsights;
 };
 export type RawObservation = {
     t: number;
@@ -135,8 +136,31 @@ export type RawEventObservation = {
     t: number;
     evt: number;
 };
+export type LayoutShiftInsightsPayload = {
+    impact: number;
+    sources: number;
+    same: {
+        dir: boolean;
+        dist: boolean;
+    };
+    total_mut: number;
+    mut: Array<{
+        e: string;
+        size: number;
+        attr: {
+            t_before: boolean;
+            p_above: 'all' | 'some' | 'none';
+            p_left: 'all' | 'some' | 'none';
+            p_right: 'all' | 'some' | 'none';
+            p_h_overlap: 'all' | 'some' | 'none';
+            p_v_overlap: 'all' | 'some' | 'none';
+            p_same_offset: 'all' | 'some' | 'none';
+        };
+    }>;
+};
 export type RevisionPayloadEntry = {
     'metric:vc90': number | null;
+    'vc90:ls'?: LayoutShiftInsightsPayload;
     revision: string;
     clean: boolean;
     vcDetails?: RevisionPayloadVCDetails;
@@ -162,4 +186,35 @@ export type RevisionPayloadEntry = {
     rawVCTime?: number;
 };
 export type RevisionPayload = RevisionPayloadEntry[];
+export type LayoutShiftVariables = {
+    allHaveRects: false;
+    allMovedSameWay: false;
+    allMovedSameAmount: false;
+} | {
+    allHaveRects: true;
+    allMovedSameWay: boolean;
+    allMovedSameAmount: boolean;
+    deltaX: number;
+    deltaY: number;
+};
+export type LayoutShiftOffenderMatchState = 'all' | 'some' | 'none';
+export type LayoutShiftOffender = {
+    offender: string;
+    happenedBefore: boolean;
+    distanceToLS: number;
+    isAbove: LayoutShiftOffenderMatchState;
+    isLeft: LayoutShiftOffenderMatchState;
+    isRight: LayoutShiftOffenderMatchState;
+    hasHorizontalOverlap: LayoutShiftOffenderMatchState;
+    hasVerticalOverlap: LayoutShiftOffenderMatchState;
+    matchesLayoutShiftDelta: boolean;
+};
+export type LayoutShiftInsights = {
+    layoutShiftOffendersResult: {
+        layoutShiftVariables: LayoutShiftVariables;
+        layoutShiftOffenders: LayoutShiftOffender[];
+    };
+    layoutShiftEntriesCount: number;
+    layoutShiftImpact: number;
+} | null;
 export {};

package/dist/types-ts4.5/config/index.d.ts

@@ -135,6 +135,7 @@ export type Config = {
             all: readonly TTVCRevision[];
             byExperience?: Record<string, readonly TTVCRevision[]>;
         };
+        readonly trackLayoutShiftOffenders?: boolean;
     };
     readonly postInteractionLog?: {
         readonly enabled?: boolean;

package/dist/types-ts4.5/hidden-timing/index.d.ts

@@ -51,3 +51,12 @@ export declare function getThrottleMeasurements(startTime: number, endTime: numb
  * @param measurement - The throttle measurement to inject
  */
 export declare function __injectThrottleMeasurementForTesting(measurement: ThrottleMeasurement): void;
+/**
+ * Returns the page visibility timeline entries within the specified time window.
+ * Each entry contains the time (relative to startTime) and whether the page was hidden.
+ *
+ * @param startTime - The start timestamp of the window (DOMHighResTimeStamp)
+ * @param endTime - The end timestamp of the window (DOMHighResTimeStamp)
+ * @returns Array of HiddenTimingItem entries within the time window, with times relative to startTime
+ */
+export declare function getPageVisibilityTimeline(startTime: number, endTime: number): HiddenTimingItem[];

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

@@ -19,6 +19,7 @@ export type GetVCResultType = {
     interactionAbortReason?: AbortReasonType;
     includeRawData?: boolean;
     rawDataStopTime?: number;
+    reportLayoutShiftOffenders?: boolean;
 };
 export type SelectorConfig = {
     id: boolean;
@@ -48,6 +49,7 @@ export type VCObserverOptions = {
     isPostInteraction?: boolean;
     ssrEnablePageLayoutPlaceholder?: boolean;
     ssrPlaceholderHandler?: any;
+    trackLayoutShiftOffenders?: boolean;
     searchPageConfig?: SearchPageConfig;
 };
 export interface VCObserverInterface {

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

@@ -10,6 +10,7 @@ export type VCObserverNewConfig = {
         enablePageLayoutPlaceholder?: boolean;
     };
     ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
+    trackLayoutShiftOffenders?: boolean;
     searchPageConfig?: SearchPageConfig;
 };
 declare const SSRState: {
@@ -31,6 +32,7 @@ export default class VCObserverNew {
     private windowEventObserver;
     private entriesTimeline;
     private isPostInteraction;
+    private trackLayoutShiftOffenders;
     private ssrPlaceholderHandler;
     private ssr;
     constructor(config: VCObserverNewConfig);

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

@@ -25,5 +25,5 @@ export default abstract class AbstractVCCalculatorBase implements VCCalculator {
     private calculateRatios;
     private getLabelStacks;
     private calculateWithDebugInfo;
-    calculate({ startTime, stopTime, orderedEntries, interactionId, isPostInteraction, include3p, excludeSmartAnswersInSearch, includeSSRRatio, interactionType, isPageVisible, interactionAbortReason, }: VCCalculatorParam): Promise<RevisionPayloadEntry | undefined>;
+    calculate({ startTime, stopTime, orderedEntries, interactionId, isPostInteraction, include3p, excludeSmartAnswersInSearch, includeSSRRatio, interactionType, isPageVisible, interactionAbortReason, reportLayoutShiftOffenders, }: VCCalculatorParam): Promise<RevisionPayloadEntry | undefined>;
 }

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

@@ -13,6 +13,7 @@ export type VCCalculatorParam = {
     interactionType: InteractionType;
     isPageVisible: boolean;
     interactionAbortReason?: AbortReasonType;
+    reportLayoutShiftOffenders?: boolean;
 };
 export interface VCCalculator {
     calculate(param: VCCalculatorParam): Promise<RevisionPayloadEntry | undefined>;

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/utils/detect-layout-shift-cause.d.ts

@@ -0,0 +1,31 @@
+import type { LayoutShiftOffender, LayoutShiftVariables } from '../../../../common/vc/types';
+import type { VCObserverEntry, ViewportEntryData } from '../../types';
+type DetectLayoutShiftCauseParams = {
+    /**
+     * All viewport observer entries, used to find potential offenders close to the layout-shift timestamp.
+     */
+    viewportEntries: ReadonlyArray<VCObserverEntry & {
+        data: ViewportEntryData;
+    }>;
+    /**
+     * The layout-shift entries that contributed to a VC checkpoint.
+     */
+    layoutShiftEntries: ReadonlyArray<ViewportEntryData>;
+    /**
+     * Timestamp of the VC checkpoint entry.
+     */
+    time: number;
+    /**
+     * Start time of the interaction; used to classify whether an offender happened before the VC checkpoint.
+     */
+    startTime: number;
+    /**
+     * Window around the checkpoint timestamp used to consider "nearby" offenders.
+     */
+    offenderWindowMs?: number;
+};
+export declare const detectLayoutShiftCause: ({ viewportEntries, layoutShiftEntries, time, startTime, offenderWindowMs, }: DetectLayoutShiftCauseParams) => {
+    layoutShiftVariables: LayoutShiftVariables;
+    layoutShiftOffenders: LayoutShiftOffender[];
+};
+export {};

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

@@ -11,6 +11,7 @@ export type ViewportEntryData = {
     readonly oldValue?: string | null | undefined;
     readonly newValue?: string | null | undefined;
     readonly labelStacks?: VCObserverLabelStacks;
+    readonly originalMutationTimestamp?: DOMHighResTimeStamp;
 };
 export type VCObserverLabelStacks = {
     segment: string;
@@ -39,4 +40,5 @@ export type VCObserverGetVCResultParam = {
     includeRawData?: boolean;
     includeSSRInV3?: boolean;
     rawDataStopTime?: number;
+    reportLayoutShiftOffenders?: boolean;
 };

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

@@ -13,6 +13,7 @@ export type ViewPortObserverConstructorArgs = {
     }): void;
     getSSRState?: () => any;
     getSSRPlaceholderHandler?: () => any;
+    trackLayoutShiftOffenders?: boolean;
     searchPageConfig?: SearchPageConfig;
 };
 export default class ViewportObserver {
@@ -23,10 +24,11 @@ export default class ViewportObserver {
     private mapIs3pResult;
     private onChange;
     private isStarted;
+    private trackLayoutShiftOffenders;
     private searchPageConfig;
     private getSSRState?;
     private getSSRPlaceholderHandler?;
-    constructor({ onChange, getSSRState, getSSRPlaceholderHandler, searchPageConfig, }: ViewPortObserverConstructorArgs);
+    constructor({ onChange, getSSRState, getSSRPlaceholderHandler, trackLayoutShiftOffenders, searchPageConfig, }: ViewPortObserverConstructorArgs);
     private handleIntersectionEntry;
     private handleChildListMutation;
     private handleAttributeMutation;

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

@@ -4,6 +4,7 @@ export type CreateMutationObserverProps = {
         attributeName: string;
         oldValue?: string | undefined | null;
         newValue?: string | undefined | null;
+        timestamp: DOMHighResTimeStamp;
     }) => void;
     onMutationFinished?: (props: {
         targets: Array<HTMLElement>;

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

@@ -1,7 +1,10 @@
 export type MutationRecordWithTimestamp = MutationRecord & {
     timestamp?: number;
 };
-export type AttributeMutationData = {
+export type MutationDataWithTimestamp = {
+    timestamp?: DOMHighResTimeStamp;
+};
+export type AttributeMutationData = MutationDataWithTimestamp & {
     attributeName: string;
     oldValue?: string | undefined | null;
     newValue?: string | undefined | null;
@@ -9,4 +12,4 @@ export type AttributeMutationData = {
 /**
  * Add here when there are more type of mutation data
  */
-export type MutationData = AttributeMutationData;
+export type MutationData = AttributeMutationData | MutationDataWithTimestamp;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "5.2.9",
+	"version": "5.3.0",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -208,6 +208,9 @@
 		},
 		"platform_ufo_enable_killswitch_config": {
 			"type": "boolean"
+		},
+		"platform_ufo_page_visibility_timeline": {
+			"type": "boolean"
 		}
 	}
 }