@atlaskit/media-card 79.11.4 → 79.13.0

package/dist/esm/card/fileCard.js

@@ -18,7 +18,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';
@@ -212,7 +212,15 @@ export var FileCard = function FileCard(_ref) {
     onImageLoadBase = _useFilePreview.onImageLoad,
     getSsrScriptProps = _useFilePreview.getSsrScriptProps,
     copyNodeRef = _useFilePreview.copyNodeRef;
-  var shouldSendPerformanceEventRef = useRef(shouldPerformanceBeSampled());
+  var shouldSendPerformanceEvent = useMemo(function () {
+    return shouldPerformanceBeSampled();
+  }, []);
+
+  // UFO experience hook - creates a unique experience instance per card
+  var ufoExperience = useMediaCardUfoExperience({
+    instanceId: internalOccurrenceKey,
+    enabled: shouldSendPerformanceEvent
+  });
   var _useState13 = useState(),
     _useState14 = _slicedToArray(_useState13, 2),
     error = _useState14[0],
@@ -327,6 +335,7 @@ export var FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   var fireOperationalEventRef = useCurrentValueRef(function () {
+    var _ssrReliability$serve, _ssrReliability$clien;
     var timeElapsedTillEvent = performanceNow();
     var durationSinceCommenced = timeElapsedTillEvent - timeElapsedTillCommenced;
     var performanceAttributes = {
@@ -336,7 +345,19 @@ export var FileCard = function FileCard(_ref) {
       }
     };
     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
+    var isSSRNonLazy = !!ssr && (preview === null || preview === void 0 ? void 0 : preview.lazy) !== true;
+    var 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');
+    var ssrPreviewInfo = {
+      dataUri: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      srcset: preview === null || preview === void 0 ? void 0 : preview.srcSet,
+      wasSSRAttempted: isSSRNonLazy,
+      wasSSRSuccessful: wasSSRSuccessful
+    };
+    ufoExperience.complete(finalStatus, fileAttributes, fileStateFlagsRef.current, ssrReliability, finalError, ssrPreviewInfo);
   });
   var fireNonCriticalErrorEventRef = useCurrentValueRef(function (error) {
     createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, finalStatus, fileAttributes, ssrReliability, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
@@ -347,19 +368,20 @@ export var FileCard = function FileCard(_ref) {
     }
   }, [nonCriticalError, fireNonCriticalErrorEventRef]);
   var startUfoExperienceRef = useCurrentValueRef(function () {
-    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
+    var isSSRNonLazy = !!ssr && (preview === null || preview === void 0 ? void 0 : preview.lazy) !== true;
+    ufoExperience.start({
+      useInteractionTime: isSSRNonLazy
+    });
   });
   var fireAbortedEventRef = useCurrentValueRef(function () {
     // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-    if (shouldSendPerformanceEventRef.current) {
-      abortUfoExperience(internalOccurrenceKey, {
-        fileAttributes: fileAttributes,
-        fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
-        ssrReliability: ssrReliability
-      });
-    }
+    ufoExperience.abort({
+      fileAttributes: fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliability
+    });
   });
 
   //----------------------------------------------------------------//

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

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.11.3";
+var packageVersion = "79.13.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/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}
 ._bfhkqre5{background-color:var(--_1flhvp0)}

package/dist/esm/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';
 var selectedStyles = null;
-var oldWrapperStyes = null;
 var wrapperStyles = null;
 export var TickBoxWrapper = function 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 && "_bfhkqre5 _syaz5w2r", tickBoxClassName]),
+    className: ax(["_11c82smr _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", props.selected && "_bfhkqre5 _syaz5w2r", tickBoxClassName]),
     style: {
       "--_1flhvp0": ix("var(--ds-icon-information, ".concat(B200, ")"))
     }

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

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

package/dist/esm/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';
 var smallLineHeight = 14;
@@ -64,12 +63,11 @@ export var TitleBoxFooter = function TitleBoxFooter(props) {
 };
 TitleBoxFooter.displayName = 'TitleBoxFooter';
 var titleBoxIconStyles = null;
-var newTitleBoxIconStyles = null;
 export var TitleBoxIcon = function 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);
 };
 var errorMessageWrapperStyles = null;

package/dist/esm/inline/loader.js

@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "79.11.3",
+        packageName: "79.13.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

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

package/dist/esm/utils/globalScope/globalScope.js

@@ -7,6 +7,7 @@ import { printFunctionCall, printScript } from '../printScript';
 
 export var GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
 export var GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export var GLOBAL_MEDIA_PERFORMANCE_ENTRIES = 'performanceEntries';
 export function getMediaGlobalScope() {
   var globalScope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
   // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.

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

@@ -92,6 +92,7 @@ export var createMediaDurationMetrics = function createMediaDurationMetrics(entr
     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