@atlaskit/media-card 74.3.2 → 74.4.1

package/dist/es2019/utils/analytics.js

@@ -9,7 +9,6 @@ const relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: true
 };
 export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
@@ -45,7 +44,7 @@ export const getRenderCommencedEventPayload = (fileAttributes, performanceAttrib
     }
   };
 };
-export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext) => ({
+export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) => ({
   eventType: 'operational',
   action: 'succeeded',
   actionSubject: 'mediaCardRender',
@@ -54,7 +53,8 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
     performanceAttributes,
     status: 'success',
     ssrReliability,
-    traceContext
+    traceContext,
+    metadataTraceContext
   }
 });
 export const getCacheHitEventPayload = cardPreviewAttributes => ({
@@ -109,19 +109,27 @@ export const getRenderErrorErrorDetail = error => {
     return error.message;
   }
 };
+export const getErrorTraceContext = error => {
+  if (isMediaCardError(error) && !!error.secondaryError && isRequestError(error.secondaryError)) {
+    var _error$secondaryError;
+
+    return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
+  }
+};
 export const getRenderErrorRequestMetadata = error => {
   if (isMediaCardError(error) && !!error.secondaryError && isRequestError(error.secondaryError)) {
     return error.secondaryError.metadata;
   }
 };
-export const extractErrorInfo = error => {
+export const extractErrorInfo = (error, metadataTraceContext) => {
   return {
     failReason: getRenderErrorFailReason(error),
     error: getRenderErrorErrorReason(error),
-    errorDetail: getRenderErrorErrorDetail(error)
+    errorDetail: getRenderErrorErrorDetail(error),
+    metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
   };
 };
-export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error, ssrReliability, traceContext) => ({
+export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -129,13 +137,27 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
     fileAttributes,
     performanceAttributes,
     status: 'fail',
-    ...extractErrorInfo(error),
+    ...extractErrorInfo(error, metadataTraceContext),
     request: getRenderErrorRequestMetadata(error),
     ssrReliability,
     traceContext
   }
 });
-export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext) => ({
+export const getErrorEventPayload = (cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext) => ({
+  eventType: 'operational',
+  action: 'nonCriticalFail',
+  actionSubject: 'mediaCardRender',
+  attributes: {
+    fileAttributes,
+    status: 'fail',
+    ...extractErrorInfo(error, metadataTraceContext),
+    request: getRenderErrorRequestMetadata(error),
+    ssrReliability,
+    traceContext,
+    cardStatus
+  }
+});
+export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -145,7 +167,8 @@ export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttr
     status: 'fail',
     failReason: 'failed-processing',
     ssrReliability,
-    traceContext
+    traceContext,
+    metadataTraceContext
   }
 });
 export const getCopiedFilePayload = fileId => ({

package/dist/es2019/utils/cardActions/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rootStyles } from '../../card/styles';
 import { rgba } from '../../card/styles/mixins';
@@ -19,7 +18,7 @@ export let CardActionIconButtonVariant;
 
 const getVariantStyles = variant => {
   return variant === 'filled' ? `
-    background-color: ${token('elevation.surface.overlay', rgba(N0, 0.8))};
+    background-color: ${`var(--ds-surface-overlay, ${rgba(N0, 0.8)})`};
     margin-right: 8px;
 
     &:last-child {
@@ -27,11 +26,11 @@ const getVariantStyles = variant => {
     }
 
     &:hover {
-      background-color: ${token('elevation.surface.overlay.hovered', rgba(N0, 0.6))}
+      background-color: ${`var(--ds-surface-overlay-hovered, ${rgba(N0, 0.6)})`}
     }
   ` : `
     &:hover {
-      background-color: ${token('color.background.neutral.subtle.hovered', 'rgba(9, 30, 66, 0.06)')};
+      background-color: ${"var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))"};
     }
   `;
 };
@@ -42,7 +41,7 @@ export const cardActionButtonStyles = ({
   ${center}
   ${borderRadius}
     ${size(26)}
-    color: ${token('color.icon', N500)};
+    color: ${`var(--ds-icon, ${N500})`};
 
   &:hover {
     cursor: pointer;

package/dist/es2019/utils/errorIcon/styles.js

@@ -1,6 +1,5 @@
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 export const errorIconWrapperStyles = css`
   display: flex;
-  color: ${token('color.icon.warning', '#ff991f')};
+  color: ${"var(--ds-icon-warning, #ff991f)"};
 `;

package/dist/es2019/utils/lightCards/styles.js

@@ -1,5 +1,4 @@
 import { css, keyframes } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
@@ -22,14 +21,14 @@ export const wrapperStyles = ({
 }) => css`
   ${center}
   background: ${themed({
-  light: token('color.background.neutral', N20),
-  dark: token('color.background.neutral', DN50)
+  light: `var(--ds-background-neutral, ${N20})`,
+  dark: `var(--ds-background-neutral, ${DN50})`
 })({
   theme
 })};
   color: ${themed({
-  light: token('color.icon', N50),
-  dark: token('color.icon', DN100)
+  light: `var(--ds-icon, ${N50})`,
+  dark: `var(--ds-icon, ${DN100})`
 })({
   theme
 })};

package/dist/es2019/utils/ufoExperiences.js

@@ -3,7 +3,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.3.2";
+const packageVersion = "74.4.1";
 let concurrentExperience;
 
 const getExperience = id => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.3.2",
+	"version": "74.4.1",
 	"sideEffects": false
 }

package/dist/esm/card/card.js

@@ -34,7 +34,7 @@ import { getFileDetails } from '../utils/metadata';
 import { InlinePlayerLazy } from './inlinePlayerLazy';
 import { getFileAttributes, extractErrorInfo, LOGGED_FEATURE_FLAGS } from '../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../errors';
-import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from './cardAnalytics';
 import getDocument from '../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -44,7 +44,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.3.2";
+var packageVersion = "74.4.1";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
 
@@ -83,7 +83,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(_assertThisInitialized(_this), "traceContext", {
-      traceId: getRandomHex(16)
+      traceId: getRandomHex(8)
     });
 
     _defineProperty(_assertThisInitialized(_this), "getImageURLParams", function (_ref) {
@@ -133,7 +133,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         mediaClient: mediaClient,
         id: id,
         dimensions: dimensions,
-        onLocalPreviewError: _this.fireLocalPreviewErrorEvent,
+        onLocalPreviewError: _this.fireNonCriticalErrorEvent,
         filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
@@ -158,7 +158,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "refetchSSRPreview", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier) {
-        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview;
+        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview, wrappedError;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -176,14 +176,17 @@ export var CardBase = /*#__PURE__*/function (_Component) {
                   cardPreview: cardPreview
                 });
 
-                _context.next = 10;
+                _context.next = 12;
                 break;
 
               case 8:
                 _context.prev = 8;
                 _context.t0 = _context["catch"](1);
+                wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', _context.t0, true);
 
-              case 10:
+                _this.fireNonCriticalErrorEvent(wrappedError);
+
+              case 12:
               case "end":
                 return _context.stop();
             }
@@ -227,6 +230,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
                 //  If it's any other error we set status 'error'
 
                 if (isLocalPreviewError(wrappedError)) {
+                  // This error should already been logged inside the getCardPreview. No need to log it here.
                   _this.safeSetState({
                     isBannedLocalPreview: true
                   });
@@ -306,7 +310,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         if (isLocal) {
           updateState.isBannedLocalPreview = true;
 
-          _this.fireLocalPreviewErrorEvent(error);
+          _this.fireNonCriticalErrorEvent(error);
         }
 
         var _this$props5 = _this.props,
@@ -368,18 +372,22 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, _this.fileAttributes);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "fireLocalPreviewErrorEvent", function (error) {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
+    _defineProperty(_assertThisInitialized(_this), "fireNonCriticalErrorEvent", function (error) {
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+      var fileState = _this.state.fileState;
+      createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, _this.state.status, _this.fileAttributes, _this.ssrReliability, error, _this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "safeSetState", function (state) {
+    _defineProperty(_assertThisInitialized(_this), "safeSetState", function (newState) {
       if (_this.hasBeenMounted) {
-        // If it's setting the status, we need to use a state updater function,
-        // which ensures that no non-final status overrides a final status.
-        // If no status is set, we don't need a sate updater
-        var updater = !!state.status ? createStateUpdater(state) : state;
-
-        _this.setState(updater);
+        /**
+         * createStateUpdater helper returns a callback to be passed to setState.
+         * It decides wether to update the 'status' depending on the current state vs the input state.
+         * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date."
+         * If the input state brings an error and it won't be updating the state, the error will be logged as non-critical inside the helper.
+         * If the error persists int the state, it means it is a critical error and should be logged as a failed event for Card
+         */
+        _this.setState(createStateUpdater(newState, _this.fireNonCriticalErrorEvent));
       }
     });
 
@@ -978,9 +986,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     value: function fireOperationalEvent() {
       var _this$state7 = this.state,
           status = _this$state7.status,
-          error = _this$state7.error;
+          error = _this$state7.error,
+          fileState = _this$state7.fileState;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext);
+      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
       completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {

package/dist/esm/card/cardAnalytics.js

@@ -1,8 +1,9 @@
-import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../utils/analytics';
+import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload, getErrorEventPayload } from '../utils/analytics';
 import { MediaCardError } from '../errors';
 export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new MediaCardError('missing-error-data');
   var traceContext = arguments.length > 6 ? arguments[6] : undefined;
+  var metadataTraceContext = arguments.length > 7 ? arguments[7] : undefined;
 
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);
@@ -10,15 +11,15 @@ export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsE
 
   switch (status) {
     case 'complete':
-      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'error':
-      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext));
+      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext));
       break;
   }
 };
@@ -38,4 +39,11 @@ export var fireCopiedEvent = function fireCopiedEvent(createAnalyticsEvent, file
 };
 export var fireScreenEvent = function fireScreenEvent(createAnalyticsEvent, fileAttributes) {
   fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
+};
+export var fireNonCriticalErrorEvent = function fireNonCriticalErrorEvent(createAnalyticsEvent, cardStatus, fileAttributes, ssrReliability) {
+  var error = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : new MediaCardError('missing-error-data');
+  var traceContext = arguments.length > 5 ? arguments[5] : undefined;
+  var metadataTraceContext = arguments.length > 6 ? arguments[6] : undefined;
+  var errorPayload = getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
+  fireMediaCardEvent(errorPayload, createAnalyticsEvent);
 };

package/dist/esm/card/cardImageView/cardOverlay/index.js

@@ -15,7 +15,6 @@ import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
-import { token } from '@atlaskit/tokens';
 import TickIcon from '@atlaskit/icon/glyph/check';
 import { Ellipsify } from '@atlaskit/media-ui'; // We dont require things directly from "utils" to avoid circular dependencies
 
@@ -94,7 +93,7 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
           selected = _this$props2.selected,
           actions = _this$props2.actions;
       var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
-      var menuTriggerColor = !persistent ? token('color.icon.inverse', 'white') : undefined;
+      var menuTriggerColor = !persistent ? "var(--ds-icon-inverse, white)" : undefined;
       return jsx(Overlay, {
         hasError: !!error,
         noHover: noHover,

package/dist/esm/card/cardImageView/cardOverlay/styles.js

@@ -12,9 +12,8 @@ import { css } from '@emotion/react';
 import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { rgba, easeOutCubic, transition, antialiased } from '../../styles';
-export var tickBoxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: ", "; /* CLEANUP - TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: ", ";\n    background-color: ", "; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), size(14), transition(), token('elevation.surface.overlay', rgba('#ffffff', 0.5)), token('color.icon.subtle', '#798599'), token('color.icon.inverse', 'white'), token('color.icon.selected', '#0052cc'));
+export var tickBoxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: ", "; /* CLEANUP - TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: ", ";\n    background-color: ", "; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), size(14), transition(), "var(--ds-surface-overlay, ".concat(rgba('#ffffff', 0.5), ")"), "var(--ds-icon-subtle, #798599)", "var(--ds-icon-inverse, white)", "var(--ds-icon-selected, #0052cc)");
 
 var getOverlayStyles = function getOverlayStyles(_ref) {
   var hasError = _ref.hasError,
@@ -26,22 +25,22 @@ var getOverlayStyles = function getOverlayStyles(_ref) {
 };
 
 export var overlayStyles = function overlayStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n          background-color: ", ";\n        }\n\n        .title,\n        .bottom-row,\n        .file-size {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: ", ";\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: ", ";\n        display: none;\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), size(), absolute(), borderRadius, easeOutCubic, getOverlayStyles(props), token('color.text.information', colors.B400), token('color.text', colors.N800), token('color.background.neutral.hovered', rgba(colors.N900, 0.06)), token('color.background.selected', colors.B200), token('color.background.selected.hovered', rgba(colors.N900, 0.16)), token('color.text', colors.N900), token('color.text', 'white'), token('color.text', 'white'), token('color.interaction.hovered', rgba(colors.N900, 0.5)), token('color.background.selected.bold', colors.B200), token('color.icon.inverse', 'white'), token('color.text', colors.N800));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n          background-color: ", ";\n        }\n\n        .title,\n        .bottom-row,\n        .file-size {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: ", ";\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: ", ";\n        display: none;\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), size(), absolute(), borderRadius, easeOutCubic, getOverlayStyles(props), "var(--ds-text-information, ".concat(colors.B400, ")"), "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-background-neutral-hovered, ".concat(rgba(colors.N900, 0.06), ")"), "var(--ds-background-selected, ".concat(colors.B200, ")"), "var(--ds-background-selected-hovered, ".concat(rgba(colors.N900, 0.16), ")"), "var(--ds-text, ".concat(colors.N900, ")"), "var(--ds-text, white)", "var(--ds-text, white)", "var(--ds-interaction-hovered, ".concat(rgba(colors.N900, 0.5), ")"), "var(--ds-background-selected-bold, ".concat(colors.B200, ")"), "var(--ds-icon-inverse, white)", "var(--ds-text, ".concat(colors.N800, ")"));
 };
 export var errorLineStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n"])));
 export var leftColumnStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  box-sizing: border-box;\n  vertical-align: middle;\n"])));
 export var topRowStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
 export var bottomRowStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 16px;\n"])));
 export var rightColumnStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
-export var errorMessageStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: 'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), antialiased, token('color.text.subtlest', colors.N70));
+export var errorMessageStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: 'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), antialiased, "var(--ds-text-subtlest, ".concat(colors.N70, ")"));
 export var altWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  font-weight: normal;\n"])), errorMessageStyles);
 export var titleWrapperStyles = function titleWrapperStyles(theme) {
   return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), themed({
-    light: token('color.text', colors.N800),
-    dark: token('color.text', colors.DN900)
+    light: "var(--ds-text, ".concat(colors.N800, ")"),
+    dark: "var(--ds-text, ".concat(colors.DN900, ")")
   })({
     theme: theme
   }));
 };
-export var subtitleStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", " font-size: 12px;\n  color: ", ";\n"])), ellipsis('100px'), token('color.text.subtlest', '#5e6c84'));
+export var subtitleStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", " font-size: 12px;\n  color: ", ";\n"])), ellipsis('100px'), "var(--ds-text-subtlest, #5e6c84)");
 export var metadataStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));

package/dist/esm/card/cardImageView/fileCardImageView.js

@@ -13,7 +13,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
-import { token } from '@atlaskit/tokens';
 import { Ellipsify, MediaImage } from '@atlaskit/media-ui';
 import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
 import { CardOverlay } from './cardOverlay';
@@ -233,7 +232,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         css: cardActionsWrapperStyles
       }, actions ? jsx(CardActions, {
         actions: actions,
-        triggerColor: token('color.icon.inverse', 'white')
+        triggerColor: "var(--ds-icon-inverse, white)"
       }) : null))));
     });
 

package/dist/esm/card/cardImageView/styles.js

@@ -3,7 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { absolute, borderRadius, size } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N0 } from '@atlaskit/theme/colors';
@@ -18,21 +17,21 @@ var getShadowAttribute = function getShadowAttribute(props) {
 var getBackgroundColor = function getBackgroundColor(props) {
   var mediaType = props.mediaType;
   return "background: ".concat(mediaType === 'image' ? 'transparent' : themed({
-    light: token('color.background.neutral', N20),
-    dark: token('color.background.neutral', DN50)
+    light: "var(--ds-background-neutral, ".concat(N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN50, ")")
   })(props), ";");
 };
 
 export var wrapperStyles = function wrapperStyles(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n\n  line-height: normal;\n  position: relative;\n\n  ", "\n\n  ", " .wrapper {\n    ", ";\n    display: block;\n    height: inherit;\n    position: relative;\n\n    .img-wrapper {\n      position: relative;\n      width: inherit;\n      height: inherit;\n      overflow: hidden;\n      display: block;\n      ", "\n    }\n  }\n"])), rootStyles(), getShadowAttribute(props), borderRadius, getBackgroundColor(props), getSelectedBorderStyle(props), size(), borderRadius, borderRadius);
 };
-export var playIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])), token('color.icon.inverse', 'white'));
-export var playIconBackgroundStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])), token('color.background.neutral.bold', 'rgba(23, 43, 77, 0.7)'));
+export var playIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])), "var(--ds-icon-inverse, white)");
+export var playIconBackgroundStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])), "var(--ds-background-neutral-bold, rgba(23, 43, 77, 0.7))");
 var bodyHeight = 26;
 export var progressBarWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
-export var overlayStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: ", ";\n"])), absolute(), size(), token('color.blanket', 'rgba(9, 30, 66, 0.5)'));
-export var titleStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), absolute(), token('color.text.inverse', N0));
-export var bodyStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), token('color.text.inverse', N0));
+export var overlayStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: ", ";\n"])), absolute(), size(), "var(--ds-blanket, rgba(9, 30, 66, 0.5))");
+export var titleStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), absolute(), "var(--ds-text-inverse, ".concat(N0, ")"));
+export var bodyStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export var progressWrapperStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n\n  /*\n    force the height to always be 20px (the height of the cancel icon),\n    so that the height of the progress bar doesn't jump when cards with\n    and without a cancel icon are rendered side-by-side.\n  */\n  height: ", "px;\n\n  /*\n    vertically center the progress bar within the 20px, keeping the progress bar full width\n  */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])), bodyHeight);

package/dist/esm/card/cardLoader.js

@@ -26,7 +26,7 @@ var MediaCardErrorBoundary = Loadable({
   loader: function loader() {
     return import(
     /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-    '../utils/media-card-analytics-error-boundary').then(function (mod) {
+    './media-card-analytics-error-boundary').then(function (mod) {
       return mod.default;
     });
   },
@@ -52,12 +52,21 @@ var MediaCardWithMediaClient = Loadable({
 
 var CardWithMediaClient = function CardWithMediaClient(props) {
   var withMediaClient = props.withMediaClient,
-      featureFlags = props.featureFlags;
+      dimensions = props.dimensions,
+      featureFlags = props.featureFlags,
+      onClick = props.onClick;
   var memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
   var Card = React.useMemo(function () {
     return withMediaClient(MediaCard, memoizedFeatureFlags);
   }, [withMediaClient, memoizedFeatureFlags]);
-  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    React.createElement(MediaCardErrorBoundary, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(Card, props))
+  );
 };
 
 var CardLoader = function CardLoader(props) {

package/dist/esm/card/cardState.js

@@ -1,22 +1,23 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { isErrorFileState } from '@atlaskit/media-client';
 import { MediaCardError } from '../errors';
 import { getCardStatus, isFinalCardStatus } from './getCardStatus';
 import { extractFilePreviewStatus } from './getCardPreview';
-export var createStateUpdater = function createStateUpdater(newState) {
+/**
+ * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date.
+ * The output of the updater is shallowly merged with state."
+ */
+
+export var createStateUpdater = function createStateUpdater(newState, fireErrorEvent) {
   return function (prevState) {
-    // Only override if previous status is non-final
-    // or new status is 'complete'
-    if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+    // Only override if previous status is non-final or new status is 'complete'
+    if (!!newState.status && isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+      // Log the error if the new state is not going to store it.
+      // i.e. this is a non critical error
+      !!newState.error && fireErrorEvent(newState.error);
       return prevState;
     }
 
-    return _objectSpread(_objectSpread({}, prevState), newState);
+    return newState;
   };
 };
 export var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags) {