@atlaskit/media-card 79.11.4 → 79.13.0

package/dist/es2019/card/fileCard.js

@@ -11,7 +11,7 @@ import { generateUniqueId } from '../utils/generateUniqueId';
 import { resolveCardPreviewDimensions } from '../utils/getDataURIDimension';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { getFileDetails } from '../utils/metadata';
-import { abortUfoExperience, completeUfoExperience, shouldPerformanceBeSampled, startUfoExperience } from '../utils/ufoExperiences';
+import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { usePrevious } from '../utils/usePrevious';
 import { ViewportDetector } from '../utils/viewportDetector';
@@ -181,7 +181,13 @@ export const FileCard = ({
     skipRemote: !isCardVisible,
     source: 'mediaCard'
   });
-  const shouldSendPerformanceEventRef = useRef(shouldPerformanceBeSampled());
+  const shouldSendPerformanceEvent = useMemo(() => shouldPerformanceBeSampled(), []);
+
+  // UFO experience hook - creates a unique experience instance per card
+  const ufoExperience = useMediaCardUfoExperience({
+    instanceId: internalOccurrenceKey,
+    enabled: shouldSendPerformanceEvent
+  });
   const [error, setError] = useState();
 
   // CXP-2723 TODO: TEMPORARY VARIABLES
@@ -258,6 +264,7 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   const fireOperationalEventRef = useCurrentValueRef(() => {
+    var _ssrReliability$serve, _ssrReliability$clien;
     const timeElapsedTillEvent = performanceNow();
     const durationSinceCommenced = timeElapsedTillEvent - timeElapsedTillCommenced;
     const performanceAttributes = {
@@ -267,7 +274,19 @@ export const FileCard = ({
       }
     };
     createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, finalStatus, fileAttributes, performanceAttributes, ssrReliability, finalError, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
-    shouldSendPerformanceEventRef.current && completeUfoExperience(internalOccurrenceKey, finalStatus, fileAttributes, fileStateFlagsRef.current, ssrReliability, finalError);
+
+    // Determine SSR preview info for UFO timing strategy
+    // wasSSRAttempted is only true when SSR was used AND preview is non-lazy
+    // because lazy SSR defers loading, so it behaves like CSR for timing purposes
+    const isSSRNonLazy = !!ssr && (preview === null || preview === void 0 ? void 0 : preview.lazy) !== true;
+    const wasSSRSuccessful = isSSRNonLazy && (((_ssrReliability$serve = ssrReliability.server) === null || _ssrReliability$serve === void 0 ? void 0 : _ssrReliability$serve.status) === 'success' || ((_ssrReliability$clien = ssrReliability.client) === null || _ssrReliability$clien === void 0 ? void 0 : _ssrReliability$clien.status) === 'success');
+    const ssrPreviewInfo = {
+      dataUri: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      srcset: preview === null || preview === void 0 ? void 0 : preview.srcSet,
+      wasSSRAttempted: isSSRNonLazy,
+      wasSSRSuccessful
+    };
+    ufoExperience.complete(finalStatus, fileAttributes, fileStateFlagsRef.current, ssrReliability, finalError, ssrPreviewInfo);
   });
   const fireNonCriticalErrorEventRef = useCurrentValueRef(error => {
     createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, finalStatus, fileAttributes, ssrReliability, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
@@ -278,19 +297,20 @@ export const FileCard = ({
     }
   }, [nonCriticalError, fireNonCriticalErrorEventRef]);
   const startUfoExperienceRef = useCurrentValueRef(() => {
-    if (shouldSendPerformanceEventRef.current) {
-      startUfoExperience(internalOccurrenceKey);
-    }
+    // For non-lazy SSR previews, use interaction start time as the experience start time
+    // because the image loading started at interaction start, not at mount time
+    const isSSRNonLazy = !!ssr && (preview === null || preview === void 0 ? void 0 : preview.lazy) !== true;
+    ufoExperience.start({
+      useInteractionTime: isSSRNonLazy
+    });
   });
   const fireAbortedEventRef = useCurrentValueRef(() => {
     // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-    if (shouldSendPerformanceEventRef.current) {
-      abortUfoExperience(internalOccurrenceKey, {
-        fileAttributes,
-        fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
-        ssrReliability: ssrReliability
-      });
-    }
+    ufoExperience.abort({
+      fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliability
+    });
   });
 
   //----------------------------------------------------------------//

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.11.3";
+const packageVersion = "79.13.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/ui/tickBox/tickBoxWrapper-compiled.compiled.css

@@ -3,13 +3,10 @@
 ._v564ybtr{transition:all .3s}
 ._154i1tpr{top:var(--ds-space-075,7px)}
 ._1b941ule span{display:block}
-._1bsbdlk8{width:14px}
 ._1bsbpxbi{width:var(--ds-space-200,1pc)}
 ._1e0c11p5{display:grid}
 ._1ltv1tpr{left:var(--ds-space-075,7px)}
-._1mcmdlk8 span svg{height:14px}
 ._4cvr1h6o{align-items:center}
-._4t3idlk8{height:14px}
 ._4t3ipxbi{height:var(--ds-space-200,1pc)}
 ._6a6z1h6o{justify-items:center}
 ._bfhk8sto{background-color:var(--ds-icon-information,#2684ff)}

package/dist/es2019/card/ui/tickBox/tickBoxWrapper-compiled.js

@@ -2,17 +2,15 @@
 import "./tickBoxWrapper-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 import { tickBoxClassName } from './styles';
 import { B200 } from '@atlaskit/theme/colors';
 const selectedStyles = null;
-const oldWrapperStyes = null;
 const wrapperStyles = null;
 export const TickBoxWrapper = props => {
   return /*#__PURE__*/React.createElement("div", {
     id: "tickBoxWrapper",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_11c82smr _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", !fg('platform-visual-refresh-icons') && "_1bsbdlk8 _4t3idlk8 _1mcmdlk8", props.selected && "_bfhk8sto _syaz5w2r", tickBoxClassName])
+    className: ax(["_11c82smr _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", props.selected && "_bfhk8sto _syaz5w2r", tickBoxClassName])
   }, props.children);
 };
 TickBoxWrapper.displayName = 'TickBoxWrapper';

package/dist/es2019/card/ui/titleBox/failedTitleBox.js

@@ -16,8 +16,6 @@ export const FailedTitleBox = ({
     breakpoint: breakpoint
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
-    LEGACY_size: 'small',
-    LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`,
     color: `var(--ds-text-danger, ${R300})`,
     size: "small"
   }), /*#__PURE__*/React.createElement("span", {

package/dist/es2019/card/ui/titleBox/titleBoxComponents-compiled.js

@@ -2,7 +2,6 @@
 import "./titleBoxComponents-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N800 } from '@atlaskit/theme/colors';
 import { rgba } from '../styles';
 const smallLineHeight = 14;
@@ -71,12 +70,11 @@ export const TitleBoxFooter = props => {
 };
 TitleBoxFooter.displayName = 'TitleBoxFooter';
 const titleBoxIconStyles = null;
-const newTitleBoxIconStyles = null;
 export const TitleBoxIcon = props => {
   return /*#__PURE__*/React.createElement("div", {
     id: "titleBoxIcon",
     "data-testid": "title-box-icon",
-    className: ax([fg('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n51b66", !fg('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n5idpf"])
+    className: ax(["_kqswstnw _1xi21b66 _94n51b66"])
   }, props.children);
 };
 const errorMessageWrapperStyles = null;

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "79.11.3",
+      packageName: "79.13.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -57,9 +57,7 @@ const ErrorBoundaryComponent = ({
     React.createElement("span", {
       style: style
     }, /*#__PURE__*/React.createElement(WarningIcon, {
-      LEGACY_margin: `0 ${"var(--ds-space-negative-050, -4px)"} 0 0`,
       label: "error",
-      LEGACY_size: "small",
       color: `var(--ds-icon-danger, ${R300})`,
       size: "small"
     }), message)

package/dist/es2019/utils/globalScope/globalScope.js

@@ -7,6 +7,7 @@ import { printFunctionCall, printScript } from '../printScript';
 
 export const GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
 export const GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export const GLOBAL_MEDIA_PERFORMANCE_ENTRIES = 'performanceEntries';
 export function getMediaGlobalScope(globalScope = window) {
   // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
   const namespace = '__MEDIA_INTERNAL';

package/dist/es2019/utils/mediaPerformanceObserver/durationMetrics.js

@@ -81,6 +81,7 @@ export const createMediaDurationMetrics = (entry, interactionStartTime) => {
     totalDuration: entry.duration,
     initiatorType: entry.initiatorType,
     // value can be 'fetch' or 'img'
+    endedAt: entry.responseEnd - interactionStartTime,
     responseEnd: entry.responseEnd,
     browserCacheHit: entry.transferSize === 0,
     nextHopProtocol: entry.nextHopProtocol,