@atlaskit/media-card 79.11.4 → 79.13.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/media-card
 
+## 79.13.0
+
+### Minor Changes
+
+- [`87b12e64ff750`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87b12e64ff750) -
+  Removed usages of LEGACY icon props
+
+### Patch Changes
+
+- Updated dependencies
+
+## 79.12.0
+
+### Minor Changes
+
+- [`00e69e0b7c839`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/00e69e0b7c839) -
+  Clean up and removal of the `platform-visual-refresh-icons` feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 79.11.4
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -22,7 +22,7 @@ var _label = _interopRequireDefault(require("@atlaskit/react-ufo/label"));
 var _excluded = ["identifier"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.11.3";
+var packageVersion = "79.13.0";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/externalImageCard.js

@@ -72,10 +72,17 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
     wasStatusUploading: false,
     wasStatusProcessing: false
   });
+  var shouldSendPerformanceEvent = (0, _react.useMemo)(function () {
+    return (0, _ufoExperiences.shouldPerformanceBeSampled)();
+  }, []);
+
+  // UFO experience hook - creates a unique experience instance per card
+  var ufoExperience = (0, _ufoExperiences.useMediaCardUfoExperience)({
+    instanceId: internalOccurrenceKey,
+    enabled: shouldSendPerformanceEvent
+  });
   var startUfoExperienceRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
-    if (shouldSendPerformanceEventRef.current) {
-      (0, _ufoExperiences.startUfoExperience)(internalOccurrenceKey);
-    }
+    ufoExperience.start();
   });
   var _useState = (0, _react.useState)('loading-preview'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -119,7 +126,6 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     mediaViewerSelectedItem = _useState8[0],
     setMediaViewerSelectedItem = _useState8[1];
-  var shouldSendPerformanceEventRef = (0, _react.useRef)((0, _ufoExperiences.shouldPerformanceBeSampled)());
 
   //----------------------------------------------------------------//
   //---------------------- Analytics  ------------------------------//
@@ -135,17 +141,16 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
       }
     };
     createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error, traceContext, undefined);
-    shouldSendPerformanceEventRef.current && (0, _ufoExperiences.completeUfoExperience)(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error);
+    // External images don't use SSR - no ssrPreviewInfo passed
+    ufoExperience.complete(status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error, undefined);
   });
   var fireAbortedEventRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
     // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-    if (shouldSendPerformanceEventRef.current) {
-      (0, _ufoExperiences.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/cjs/card/fileCard.js

@@ -220,7 +220,15 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     onImageLoadBase = _useFilePreview.onImageLoad,
     getSsrScriptProps = _useFilePreview.getSsrScriptProps,
     copyNodeRef = _useFilePreview.copyNodeRef;
-  var shouldSendPerformanceEventRef = (0, _react.useRef)((0, _ufoExperiences.shouldPerformanceBeSampled)());
+  var shouldSendPerformanceEvent = (0, _react.useMemo)(function () {
+    return (0, _ufoExperiences.shouldPerformanceBeSampled)();
+  }, []);
+
+  // UFO experience hook - creates a unique experience instance per card
+  var ufoExperience = (0, _ufoExperiences.useMediaCardUfoExperience)({
+    instanceId: internalOccurrenceKey,
+    enabled: shouldSendPerformanceEvent
+  });
   var _useState13 = (0, _react.useState)(),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
     error = _useState14[0],
@@ -335,6 +343,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   var fireOperationalEventRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
+    var _ssrReliability$serve, _ssrReliability$clien;
     var timeElapsedTillEvent = (0, _performance.performanceNow)();
     var durationSinceCommenced = timeElapsedTillEvent - timeElapsedTillCommenced;
     var performanceAttributes = {
@@ -344,7 +353,19 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       }
     };
     createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, finalStatus, fileAttributes, performanceAttributes, ssrReliability, finalError, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
-    shouldSendPerformanceEventRef.current && (0, _ufoExperiences.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 = (0, _useCurrentValueRef.useCurrentValueRef)(function (error) {
     createAnalyticsEvent && (0, _cardAnalytics.fireNonCriticalErrorEvent)(createAnalyticsEvent, finalStatus, fileAttributes, ssrReliability, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
@@ -355,19 +376,20 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }
   }, [nonCriticalError, fireNonCriticalErrorEventRef]);
   var startUfoExperienceRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
-    if (shouldSendPerformanceEventRef.current) {
-      (0, _ufoExperiences.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 = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
     // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-    if (shouldSendPerformanceEventRef.current) {
-      (0, _ufoExperiences.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/cjs/card/media-card-analytics-error-boundary.js

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(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 = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/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/cjs/card/ui/tickBox/tickBoxWrapper-compiled.js

@@ -9,18 +9,16 @@ exports.TickBoxWrapper = void 0;
 require("./tickBoxWrapper-compiled.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("./styles");
 var _colors = require("@atlaskit/theme/colors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var selectedStyles = null;
-var oldWrapperStyes = null;
 var wrapperStyles = null;
 var TickBoxWrapper = exports.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: (0, _runtime.ax)(["_11c82smr _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && "_1bsbdlk8 _4t3idlk8 _1mcmdlk8", props.selected && "_bfhkqre5 _syaz5w2r", _styles.tickBoxClassName]),
+    className: (0, _runtime.ax)(["_11c82smr _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", props.selected && "_bfhkqre5 _syaz5w2r", _styles.tickBoxClassName]),
     style: {
       "--_1flhvp0": (0, _runtime.ix)("var(--ds-icon-information, ".concat(_colors.B200, ")"))
     }

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

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

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

@@ -9,7 +9,6 @@ exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = export
 require("./titleBoxComponents-compiled.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -72,12 +71,11 @@ var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
 };
 TitleBoxFooter.displayName = 'TitleBoxFooter';
 var titleBoxIconStyles = null;
-var newTitleBoxIconStyles = null;
 var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
   return /*#__PURE__*/React.createElement("div", {
     id: "titleBoxIcon",
     "data-testid": "title-box-icon",
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n51b66", !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n5idpf"])
+    className: (0, _runtime.ax)(["_kqswstnw _1xi21b66 _94n51b66"])
   }, props.children);
 };
 var errorMessageWrapperStyles = null;

package/dist/cjs/inline/loader.js

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

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

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

package/dist/cjs/utils/globalScope/globalScope.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getKey = exports.generateScriptProps = exports.GLOBAL_MEDIA_NAMESPACE = exports.GLOBAL_MEDIA_CARD_SSR = void 0;
+exports.getKey = exports.generateScriptProps = exports.GLOBAL_MEDIA_PERFORMANCE_ENTRIES = exports.GLOBAL_MEDIA_NAMESPACE = exports.GLOBAL_MEDIA_CARD_SSR = void 0;
 exports.getMediaCardSSR = getMediaCardSSR;
 exports.getMediaGlobalScope = getMediaGlobalScope;
 exports.storeDataURI = void 0;
@@ -16,6 +16,7 @@ var _printScript = require("../printScript");
 
 var GLOBAL_MEDIA_CARD_SSR = exports.GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
 var GLOBAL_MEDIA_NAMESPACE = exports.GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+var GLOBAL_MEDIA_PERFORMANCE_ENTRIES = exports.GLOBAL_MEDIA_PERFORMANCE_ENTRIES = 'performanceEntries';
 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/cjs/utils/mediaPerformanceObserver/durationMetrics.js

@@ -99,6 +99,7 @@ var createMediaDurationMetrics = exports.createMediaDurationMetrics = function c
     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