@atlaskit/media-card 79.7.2 → 79.8.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/media-card
 
+## 79.8.1
+
+### Patch Changes
+
+- [`7cfa4a9ffdf8d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7cfa4a9ffdf8d) -
+  Suppress i18n eslint errors
+- Updated dependencies
+
+## 79.8.0
+
+### Minor Changes
+
+- [`3aebb34f01aad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aebb34f01aad) -
+  remove-image-load-error-from-media-card
+
+### Patch Changes
+
+- [`5bd9159b5173c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5bd9159b5173c) -
+  Removing curosr styles from VC metric calculations by switching to a data-cursor attribute
+  enabling change exclusion
+- Updated dependencies
+
 ## 79.7.2
 
 ### Patch Changes

package/dist/cjs/card/cardView.js

@@ -252,6 +252,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     mediaName: name,
     status: status,
     progress: progress,
+    mediaCardCursor: mediaCardCursor,
     selected: selected,
     source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
   }, renderTypeIcon && /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {

package/dist/cjs/card/fileCard.js

@@ -44,7 +44,6 @@ var _usePressTracing = _interopRequireDefault(require("@atlaskit/react-ufo/use-p
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var IMAGE_LOAD_ERROR = 'image-load-error';
 var traceContextRetriever = function traceContextRetriever() {
   var trace = (0, _experienceTraceIdContext.getActiveTrace)();
   if (trace && (0, _platformFeatureFlags.fg)('platform-filecard-ufo-trace')) {
@@ -403,16 +402,10 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     setStatus('error');
   };
   var onImageError = function onImageError(newCardPreview) {
-    var _onErrorRef$current;
     if (metadata.mimeType === 'image/svg+xml') {
       return;
     }
     onImageErrorBase(newCardPreview);
-
-    // The image error is not reflected in the status,
-    // as the preview might fail to load if the file itself is broken.
-    // In that case we want call onError callback.
-    (_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 || _onErrorRef$current.call(onErrorRef, IMAGE_LOAD_ERROR);
   };
   var onSvgLoad = function onSvgLoad() {
     setPreviewDidRender(true);

package/dist/cjs/card/ui/unhandledErrorCard/contentLoadingErrorMessage.js

@@ -10,7 +10,7 @@ var ContentLoadingErrorMessage = exports.ContentLoadingErrorMessage = function C
   var isHidden = _ref.isHidden;
   return (
     /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text, @atlassian/i18n/no-literal-string-in-jsx
     _react.default.createElement("p", {
       style: {
         display: isHidden ? 'none' : 'block'

package/dist/cjs/card/ui/wrapper/imageContainer-compiled.js

@@ -20,7 +20,8 @@ var ImageContainer = exports.ImageContainer = function ImageContainer(_ref) {
     progress = _ref.progress,
     selected = _ref.selected,
     source = _ref.source,
-    centerElements = _ref.centerElements;
+    centerElements = _ref.centerElements,
+    mediaCardCursor = _ref.mediaCardCursor;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": _classnames.fileCardImageViewSelector
     /**
@@ -35,6 +36,7 @@ var ImageContainer = exports.ImageContainer = function ImageContainer(_ref) {
     "data-test-status": status,
     "data-test-progress": progress,
     "data-test-selected": selected,
-    "data-test-source": source
+    "data-test-source": source,
+    "data-cursor": mediaCardCursor
   }, children);
 };

package/dist/cjs/card/ui/wrapper/wrapper-compiled.compiled.css

@@ -16,6 +16,7 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
 ._1yf91flm:hover .media-card-tickbox{background-color:var(--_mt8cm6)}
 ._4t3ine4n{height:var(--media-wrapper-height)}
+._5sb1v00u [data-cursor=wait]{cursor:wait}
 ._9m3z1osq>div{width:100%}
 ._bfhklslw{background-color:var(--_1jkcdu5)}
 ._c71l1osq{max-height:100%}
@@ -24,4 +25,5 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._kqswh2mm{position:relative}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
-._vchhusvi{box-sizing:border-box}
+._vchhusvi{box-sizing:border-box}
+._yfmhtlke [data-cursor=pointer]{cursor:pointer}

package/dist/cjs/card/ui/wrapper/wrapper-compiled.js

@@ -14,7 +14,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _cardConstants = require("../../cardConstants");
 var _vcMedia = require("@atlaskit/react-ufo/vc-media");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _cardDimensions = require("../../../utils/cardDimensions");
 var _getCSSUnitValue = require("../../../utils/getCSSUnitValue");
@@ -49,6 +48,9 @@ var hideNativeBrowserTextSelectionStyles = null;
 var clickableButtonPlayButtonStyles = null;
 var selectableTickboxStyle = null;
 var tooltipStyle = null;
+
+// These styles target data attributes to enable the exclusion from TTVC metric calculation.
+var cursorStyle = null;
 var getResponsiveStyles = function getResponsiveStyles(breakpoint) {
   // dynamically setting the properties to avoid ratcheting build errors. These need to be removed however for the compiled transformation.
   return breakpoint === 'small' ? (0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'fontSize', '11px'), 'lineHeight', '14px') : (0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'fontSize', '14px'), 'lineHeight', '22px');
@@ -61,7 +63,6 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     onMouseEnter = props.onMouseEnter,
     innerRef = props.innerRef,
     breakpoint = props.breakpoint,
-    mediaCardCursor = props.mediaCardCursor,
     disableOverlay = props.disableOverlay,
     selected = props.selected,
     displayBackground = props.displayBackground,
@@ -76,7 +77,7 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)([wrapperStyles.default, displayBackground && "_bfhklslw", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91flm _1xp5rcbj", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", _cardConstants.newFileExperienceClassName]),
+    className: (0, _runtime.ax)([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhklslw", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91flm _1xp5rcbj", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", _cardConstants.newFileExperienceClassName]),
     "data-testid": testId,
     ref: innerRef,
     onClick: onClick
@@ -84,9 +85,7 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     ,
     onMouseEnter: onMouseEnter
   }, _vcMedia.VcMediaWrapperProps, {
-    style: _objectSpread(_objectSpread({}, _objectSpread(_objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), (0, _platformFeatureFlags.fg)('jfp-magma-media-cursor') ? {
-      cursor: mediaCardCursor
-    } : undefined), getResponsiveStyles(breakpoint))), {}, {
+    style: _objectSpread(_objectSpread({}, _objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint))), {}, {
       "--_1jkcdu5": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20, ")")),
       "--_mt8cm6": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N0, ")")),
       "--_13xf2t5": (0, _runtime.ix)("var(--ds-icon-subtle, ".concat(_colors.N100, ")"))

package/dist/es2019/card/cardView.js

@@ -241,6 +241,7 @@ export const CardViewBase = ({
     mediaName: name,
     status: status,
     progress: progress,
+    mediaCardCursor: mediaCardCursor,
     selected: selected,
     source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
   }, renderTypeIcon && /*#__PURE__*/React.createElement(IconWrapper, {

package/dist/es2019/card/fileCard.js

@@ -29,7 +29,6 @@ import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getActiveTrace } from '@atlaskit/react-ufo/experience-trace-id-context';
 import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
-const IMAGE_LOAD_ERROR = 'image-load-error';
 const traceContextRetriever = () => {
   const trace = getActiveTrace();
   if (trace && fg('platform-filecard-ufo-trace')) {
@@ -326,16 +325,10 @@ export const FileCard = ({
     setStatus('error');
   };
   const onImageError = newCardPreview => {
-    var _onErrorRef$current;
     if (metadata.mimeType === 'image/svg+xml') {
       return;
     }
     onImageErrorBase(newCardPreview);
-
-    // The image error is not reflected in the status,
-    // as the preview might fail to load if the file itself is broken.
-    // In that case we want call onError callback.
-    (_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 ? void 0 : _onErrorRef$current.call(onErrorRef, IMAGE_LOAD_ERROR);
   };
   const onSvgLoad = () => {
     setPreviewDidRender(true);

package/dist/es2019/card/ui/unhandledErrorCard/contentLoadingErrorMessage.js

@@ -3,7 +3,7 @@ export const ContentLoadingErrorMessage = ({
   isHidden
 }) =>
 /*#__PURE__*/
-// eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+// eslint-disable-next-line @atlaskit/design-system/use-primitives-text, @atlassian/i18n/no-literal-string-in-jsx
 React.createElement("p", {
   style: {
     display: isHidden ? 'none' : 'block'

package/dist/es2019/card/ui/wrapper/imageContainer-compiled.js

@@ -12,7 +12,8 @@ export const ImageContainer = ({
   progress,
   selected,
   source,
-  centerElements
+  centerElements,
+  mediaCardCursor
 }) => /*#__PURE__*/React.createElement("div", {
   "data-testid": fileCardImageViewSelector
   /**
@@ -27,5 +28,6 @@ export const ImageContainer = ({
   "data-test-status": status,
   "data-test-progress": progress,
   "data-test-selected": selected,
-  "data-test-source": source
+  "data-test-source": source,
+  "data-cursor": mediaCardCursor
 }, children);

package/dist/es2019/card/ui/wrapper/wrapper-compiled.compiled.css

@@ -16,6 +16,7 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
 ._1yf91j9a:hover .media-card-tickbox{background-color:var(--ds-background-input,#fff)}
 ._4t3ine4n{height:var(--media-wrapper-height)}
+._5sb1v00u [data-cursor=wait]{cursor:wait}
 ._9m3z1osq>div{width:100%}
 ._bfhk1s4m{background-color:var(--ds-background-neutral,#f4f5f7)}
 ._c71l1osq{max-height:100%}
@@ -24,4 +25,5 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._kqswh2mm{position:relative}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
-._vchhusvi{box-sizing:border-box}
+._vchhusvi{box-sizing:border-box}
+._yfmhtlke [data-cursor=pointer]{cursor:pointer}

package/dist/es2019/card/ui/wrapper/wrapper-compiled.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { newFileExperienceClassName } from '../../cardConstants';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N100, N20, N60A, N90A, B100 } from '@atlaskit/theme/colors';
 import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
 import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
@@ -37,6 +36,9 @@ const hideNativeBrowserTextSelectionStyles = null;
 const clickableButtonPlayButtonStyles = null;
 const selectableTickboxStyle = null;
 const tooltipStyle = null;
+
+// These styles target data attributes to enable the exclusion from TTVC metric calculation.
+const cursorStyle = null;
 const getResponsiveStyles = breakpoint => {
   // dynamically setting the properties to avoid ratcheting build errors. These need to be removed however for the compiled transformation.
   return breakpoint === 'small' ? {
@@ -56,7 +58,6 @@ export const Wrapper = props => {
     onMouseEnter,
     innerRef,
     breakpoint,
-    mediaCardCursor,
     disableOverlay,
     selected,
     displayBackground,
@@ -72,16 +73,12 @@ export const Wrapper = props => {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax([wrapperStyles.default, displayBackground && "_bfhk1s4m", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5kufk", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    className: ax([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhk1s4m", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5kufk", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
     "data-testid": testId,
     style: {
       [LOCAL_WIDTH_VARIABLE]: width,
       [LOCAL_HEIGHT_VARIABLE]: height,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ...(fg('jfp-magma-media-cursor') ? {
-        cursor: mediaCardCursor
-      } : undefined),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ...getResponsiveStyles(breakpoint)
     },
     ref: innerRef,

package/dist/esm/card/cardView.js

@@ -243,6 +243,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     mediaName: name,
     status: status,
     progress: progress,
+    mediaCardCursor: mediaCardCursor,
     selected: selected,
     source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
   }, renderTypeIcon && /*#__PURE__*/React.createElement(IconWrapper, {

package/dist/esm/card/fileCard.js

@@ -36,7 +36,6 @@ import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getActiveTrace } from '@atlaskit/react-ufo/experience-trace-id-context';
 import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
-var IMAGE_LOAD_ERROR = 'image-load-error';
 var traceContextRetriever = function traceContextRetriever() {
   var trace = getActiveTrace();
   if (trace && fg('platform-filecard-ufo-trace')) {
@@ -395,16 +394,10 @@ export var FileCard = function FileCard(_ref) {
     setStatus('error');
   };
   var onImageError = function onImageError(newCardPreview) {
-    var _onErrorRef$current;
     if (metadata.mimeType === 'image/svg+xml') {
       return;
     }
     onImageErrorBase(newCardPreview);
-
-    // The image error is not reflected in the status,
-    // as the preview might fail to load if the file itself is broken.
-    // In that case we want call onError callback.
-    (_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 || _onErrorRef$current.call(onErrorRef, IMAGE_LOAD_ERROR);
   };
   var onSvgLoad = function onSvgLoad() {
     setPreviewDidRender(true);

package/dist/esm/card/ui/unhandledErrorCard/contentLoadingErrorMessage.js

@@ -3,7 +3,7 @@ export var ContentLoadingErrorMessage = function ContentLoadingErrorMessage(_ref
   var isHidden = _ref.isHidden;
   return (
     /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text, @atlassian/i18n/no-literal-string-in-jsx
     React.createElement("p", {
       style: {
         display: isHidden ? 'none' : 'block'

package/dist/esm/card/ui/wrapper/imageContainer-compiled.js

@@ -12,7 +12,8 @@ export var ImageContainer = function ImageContainer(_ref) {
     progress = _ref.progress,
     selected = _ref.selected,
     source = _ref.source,
-    centerElements = _ref.centerElements;
+    centerElements = _ref.centerElements,
+    mediaCardCursor = _ref.mediaCardCursor;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": fileCardImageViewSelector
     /**
@@ -27,6 +28,7 @@ export var ImageContainer = function ImageContainer(_ref) {
     "data-test-status": status,
     "data-test-progress": progress,
     "data-test-selected": selected,
-    "data-test-source": source
+    "data-test-source": source,
+    "data-cursor": mediaCardCursor
   }, children);
 };

package/dist/esm/card/ui/wrapper/wrapper-compiled.compiled.css

@@ -16,6 +16,7 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
 ._1yf91flm:hover .media-card-tickbox{background-color:var(--_mt8cm6)}
 ._4t3ine4n{height:var(--media-wrapper-height)}
+._5sb1v00u [data-cursor=wait]{cursor:wait}
 ._9m3z1osq>div{width:100%}
 ._bfhklslw{background-color:var(--_1jkcdu5)}
 ._c71l1osq{max-height:100%}
@@ -24,4 +25,5 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._kqswh2mm{position:relative}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
-._vchhusvi{box-sizing:border-box}
+._vchhusvi{box-sizing:border-box}
+._yfmhtlke [data-cursor=pointer]{cursor:pointer}

package/dist/esm/card/ui/wrapper/wrapper-compiled.js

@@ -8,7 +8,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { newFileExperienceClassName } from '../../cardConstants';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N100, N20, N60A, N90A, B100 } from '@atlaskit/theme/colors';
 import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
 import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
@@ -40,6 +39,9 @@ var hideNativeBrowserTextSelectionStyles = null;
 var clickableButtonPlayButtonStyles = null;
 var selectableTickboxStyle = null;
 var tooltipStyle = null;
+
+// These styles target data attributes to enable the exclusion from TTVC metric calculation.
+var cursorStyle = null;
 var getResponsiveStyles = function getResponsiveStyles(breakpoint) {
   // dynamically setting the properties to avoid ratcheting build errors. These need to be removed however for the compiled transformation.
   return breakpoint === 'small' ? _defineProperty(_defineProperty({}, 'fontSize', '11px'), 'lineHeight', '14px') : _defineProperty(_defineProperty({}, 'fontSize', '14px'), 'lineHeight', '22px');
@@ -52,7 +54,6 @@ export var Wrapper = function Wrapper(props) {
     onMouseEnter = props.onMouseEnter,
     innerRef = props.innerRef,
     breakpoint = props.breakpoint,
-    mediaCardCursor = props.mediaCardCursor,
     disableOverlay = props.disableOverlay,
     selected = props.selected,
     displayBackground = props.displayBackground,
@@ -67,7 +68,7 @@ export var Wrapper = function Wrapper(props) {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax([wrapperStyles.default, displayBackground && "_bfhklslw", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91flm _1xp5rcbj", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    className: ax([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhklslw", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91flm _1xp5rcbj", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
     "data-testid": testId,
     ref: innerRef,
     onClick: onClick
@@ -75,9 +76,7 @@ export var Wrapper = function Wrapper(props) {
     ,
     onMouseEnter: onMouseEnter
   }, VcMediaWrapperProps, {
-    style: _objectSpread(_objectSpread({}, _objectSpread(_objectSpread(_defineProperty(_defineProperty({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), fg('jfp-magma-media-cursor') ? {
-      cursor: mediaCardCursor
-    } : undefined), getResponsiveStyles(breakpoint))), {}, {
+    style: _objectSpread(_objectSpread({}, _objectSpread(_defineProperty(_defineProperty({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint))), {}, {
       "--_1jkcdu5": ix("var(--ds-background-neutral, ".concat(N20, ")")),
       "--_mt8cm6": ix("var(--ds-background-input, ".concat(N0, ")")),
       "--_13xf2t5": ix("var(--ds-icon-subtle, ".concat(N100, ")"))

package/dist/types/card/fileCard.d.ts

@@ -6,8 +6,6 @@ import { type MediaCardErrorPrimaryReason } from '../errors';
 import { type CardAppearance, type CardDimensions, type CardEventProps, type TitleBoxIcon } from '../types';
 import { type MediaFilePreviewErrorPrimaryReason } from '@atlaskit/media-file-preview';
 import { type CardAction } from './actions';
-declare const IMAGE_LOAD_ERROR = "image-load-error";
-export type ImageLoadErrorType = typeof IMAGE_LOAD_ERROR;
 export interface FileCardProps extends CardEventProps {
     /** Overlay the media file. */
     readonly disableOverlay?: boolean;
@@ -57,7 +55,6 @@ export interface FileCardProps extends CardEventProps {
     /** Sets options for viewer **/
     readonly includeHashForDuplicateFiles?: boolean;
     /** General Error handling include status errors and display errors*/
-    readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason | ImageLoadErrorType) => void;
+    readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
 }
 export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, onError, }: FileCardProps) => React.JSX.Element;
-export {};

package/dist/types/card/ui/unhandledErrorCard/contentLoadingErrorMessage.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 type ContentLoadingErrorMessageProps = {
     isHidden?: boolean;
 };
-export declare const ContentLoadingErrorMessage: ({ isHidden }: ContentLoadingErrorMessageProps) => React.JSX.Element;
+export declare const ContentLoadingErrorMessage: ({ isHidden, }: ContentLoadingErrorMessageProps) => React.JSX.Element;
 export {};

package/dist/types/card/ui/wrapper/imageContainer-compiled.d.ts

@@ -1,12 +1,14 @@
+import type { MediaCardCursor } from '../../../types';
 type ImageContainerProps = {
     children: React.ReactNode;
     centerElements?: boolean;
     testId: string;
+    mediaCardCursor?: MediaCardCursor;
     mediaName?: string;
     status?: string;
     progress?: number;
     selected?: boolean;
     source?: string;
 };
-export declare const ImageContainer: ({ children, mediaName, status, progress, selected, source, centerElements, }: ImageContainerProps) => JSX.Element;
+export declare const ImageContainer: ({ children, mediaName, status, progress, selected, source, centerElements, mediaCardCursor, }: ImageContainerProps) => JSX.Element;
 export {};

package/dist/types/card/ui/wrapper/imageContainer.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import type { MediaCardCursor } from '../../../types';
 type ImageContainerProps = {
     children: React.ReactNode;
     centerElements?: boolean;
     testId: string;
+    mediaCardCursor?: MediaCardCursor;
     mediaName?: string;
     status?: string;
     progress?: number;

package/dist/types/types.d.ts

@@ -11,7 +11,6 @@ import { type CardAction } from './card/actions';
 import { type MediaCardError, type MediaCardErrorPrimaryReason } from './errors';
 import { type ViewerOptionsProps } from '@atlaskit/media-viewer';
 import type { MediaFilePreviewErrorPrimaryReason } from '@atlaskit/media-file-preview';
-import type { ImageLoadErrorType } from './card/fileCard';
 export type CardStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing';
 export type FilePreviewStatus = {
     hasFilesize: boolean;
@@ -112,7 +111,7 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     /** General Media Settings */
     readonly mediaSettings?: MediaSettings;
     /** General Error handling include status errors and display errors*/
-    readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason | ImageLoadErrorType) => void;
+    readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
 }
 export interface CardState {
     status: CardStatus;

package/dist/types/utils/viewportDetector.d.ts

@@ -3,4 +3,4 @@ export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;
 }>;
-export declare const ViewportDetector: ({ cardEl, onVisible, children }: ViewportDetectorProps) => React.JSX.Element;
+export declare const ViewportDetector: ({ cardEl, onVisible, children, }: ViewportDetectorProps) => React.JSX.Element;

package/dist/types-ts4.5/card/fileCard.d.ts

@@ -6,8 +6,6 @@ import { type MediaCardErrorPrimaryReason } from '../errors';
 import { type CardAppearance, type CardDimensions, type CardEventProps, type TitleBoxIcon } from '../types';
 import { type MediaFilePreviewErrorPrimaryReason } from '@atlaskit/media-file-preview';
 import { type CardAction } from './actions';
-declare const IMAGE_LOAD_ERROR = "image-load-error";
-export type ImageLoadErrorType = typeof IMAGE_LOAD_ERROR;
 export interface FileCardProps extends CardEventProps {
     /** Overlay the media file. */
     readonly disableOverlay?: boolean;
@@ -57,7 +55,6 @@ export interface FileCardProps extends CardEventProps {
     /** Sets options for viewer **/
     readonly includeHashForDuplicateFiles?: boolean;
     /** General Error handling include status errors and display errors*/
-    readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason | ImageLoadErrorType) => void;
+    readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
 }
 export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, onError, }: FileCardProps) => React.JSX.Element;
-export {};

package/dist/types-ts4.5/card/ui/unhandledErrorCard/contentLoadingErrorMessage.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 type ContentLoadingErrorMessageProps = {
     isHidden?: boolean;
 };
-export declare const ContentLoadingErrorMessage: ({ isHidden }: ContentLoadingErrorMessageProps) => React.JSX.Element;
+export declare const ContentLoadingErrorMessage: ({ isHidden, }: ContentLoadingErrorMessageProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/card/ui/wrapper/imageContainer-compiled.d.ts

@@ -1,12 +1,14 @@
+import type { MediaCardCursor } from '../../../types';
 type ImageContainerProps = {
     children: React.ReactNode;
     centerElements?: boolean;
     testId: string;
+    mediaCardCursor?: MediaCardCursor;
     mediaName?: string;
     status?: string;
     progress?: number;
     selected?: boolean;
     source?: string;
 };
-export declare const ImageContainer: ({ children, mediaName, status, progress, selected, source, centerElements, }: ImageContainerProps) => JSX.Element;
+export declare const ImageContainer: ({ children, mediaName, status, progress, selected, source, centerElements, mediaCardCursor, }: ImageContainerProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/card/ui/wrapper/imageContainer.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import type { MediaCardCursor } from '../../../types';
 type ImageContainerProps = {
     children: React.ReactNode;
     centerElements?: boolean;
     testId: string;
+    mediaCardCursor?: MediaCardCursor;
     mediaName?: string;
     status?: string;
     progress?: number;

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

@@ -11,7 +11,6 @@ import { type CardAction } from './card/actions';
 import { type MediaCardError, type MediaCardErrorPrimaryReason } from './errors';
 import { type ViewerOptionsProps } from '@atlaskit/media-viewer';
 import type { MediaFilePreviewErrorPrimaryReason } from '@atlaskit/media-file-preview';
-import type { ImageLoadErrorType } from './card/fileCard';
 export type CardStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing';
 export type FilePreviewStatus = {
     hasFilesize: boolean;
@@ -112,7 +111,7 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     /** General Media Settings */
     readonly mediaSettings?: MediaSettings;
     /** General Error handling include status errors and display errors*/
-    readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason | ImageLoadErrorType) => void;
+    readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
 }
 export interface CardState {
     status: CardStatus;

package/dist/types-ts4.5/utils/viewportDetector.d.ts

@@ -3,4 +3,4 @@ export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;
 }>;
-export declare const ViewportDetector: ({ cardEl, onVisible, children }: ViewportDetectorProps) => React.JSX.Element;
+export declare const ViewportDetector: ({ cardEl, onVisible, children, }: ViewportDetectorProps) => React.JSX.Element;

package/example-helpers/DelayedRender.tsx

@@ -21,7 +21,7 @@ export class DelayedRender extends Component<Props, State> {
 		}, this.props.timeout);
 	}
 
-	render() {
+	render(): React.JSX.Element | null {
 		if (this.state.hidden) {
 			return null;
 		}

package/example-helpers/cards.tsx

@@ -20,7 +20,10 @@ import { CardLoading, CardError, Card } from '../src';
 const mediaClientConfig = createStorybookMediaClientConfig();
 // standard
 const successIdentifier: FileIdentifier = imageFileId;
-export const standardCards = [
+export const standardCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Image',
 		content: (
@@ -33,7 +36,10 @@ export const standardCards = [
 	},
 ];
 
-export const cardWithContextId = [
+export const cardWithContextId: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Image with parameter',
 		content: (
@@ -48,7 +54,10 @@ export const cardWithContextId = [
 ];
 
 //error cards
-export const errorCardsDark = [
+export const errorCardsDark: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Image',
 		content: (
@@ -57,7 +66,10 @@ export const errorCardsDark = [
 	},
 ];
 
-export const errorCards = [
+export const errorCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Image',
 		content: (
@@ -77,7 +89,10 @@ export const errorCards = [
 	},
 ];
 
-export const menuCards = [
+export const menuCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Image',
 		content: (
@@ -92,10 +107,16 @@ export const menuCards = [
 ];
 
 // api cards
-export const apiCards = createApiCards('image', successIdentifier);
+export const apiCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = createApiCards('image', successIdentifier);
 
 // no thumbnail
-export const noThumbnailCards = [
+export const noThumbnailCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Image',
 		content: (
@@ -105,7 +126,10 @@ export const noThumbnailCards = [
 ];
 
 // lazy load
-export const lazyLoadCards = [
+export const lazyLoadCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Lazy',
 		content: (
@@ -131,7 +155,10 @@ export const lazyLoadCards = [
 ];
 
 // no hover state cards
-export const noHoverStateCards = [
+export const noHoverStateCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Overlay disabled',
 		content: (
@@ -164,7 +191,10 @@ export const fileWithNoCollection: FileIdentifier = {
 	id: 'e84c54a4-38b2-463f-ae27-5ba043c3e4c2',
 };
 
-export const collectionConfigCards = [
+export const collectionConfigCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Standalone file (NO collection)',
 		content: <Card identifier={fileWithNoCollection} mediaClientConfig={mediaClientConfig} />,
@@ -181,7 +211,10 @@ const divStyle = {
 };
 const dimensions = { height: 50, width: 50 };
 
-export const lightDefaultCards = [
+export const lightDefaultCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Medium Loading',
 		content: (
@@ -202,7 +235,10 @@ export const lightDefaultCards = [
 	},
 ];
 
-export const lightResizedCards = [
+export const lightResizedCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Medium Loading',
 		content: <CardLoading dimensions={dimensions} />,
@@ -214,25 +250,30 @@ export const lightResizedCards = [
 ];
 
 // file cards
-export const videoFileCard = (
+export const videoFileCard: React.JSX.Element = (
 	<Card mediaClientConfig={mediaClientConfig} identifier={videoFileId} />
 );
 
-export const imageFileCard = (
+export const imageFileCard: React.JSX.Element = (
 	<Card mediaClientConfig={mediaClientConfig} identifier={imageFileId} />
 );
 
-export const audioFileCard = (
+export const audioFileCard: React.JSX.Element = (
 	<Card mediaClientConfig={mediaClientConfig} identifier={audioFileId} />
 );
 
-export const docFileCard = <Card mediaClientConfig={mediaClientConfig} identifier={docFileId} />;
+export const docFileCard: React.JSX.Element = (
+	<Card mediaClientConfig={mediaClientConfig} identifier={docFileId} />
+);
 
-export const unknownFileCard = (
+export const unknownFileCard: React.JSX.Element = (
 	<Card mediaClientConfig={mediaClientConfig} identifier={unknownFileId} />
 );
 
-export const resizingDefaultCards = [
+export const resizingDefaultCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Small',
 		content: <Card identifier={smallImageFileId} mediaClientConfig={mediaClientConfig} />,
@@ -247,7 +288,10 @@ export const resizingDefaultCards = [
 	},
 ];
 
-export const croppedCards = [
+export const croppedCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Small',
 		content: (
@@ -268,7 +312,10 @@ export const croppedCards = [
 	},
 ];
 
-export const fitCards = [
+export const fitCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Small',
 		content: (
@@ -289,7 +336,10 @@ export const fitCards = [
 	},
 ];
 
-export const fullFitCards = [
+export const fullFitCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Small',
 		content: (
@@ -322,7 +372,10 @@ export const fullFitCards = [
 	},
 ];
 
-export const stretchyFitCards = [
+export const stretchyFitCards: {
+	title: string;
+	content: React.JSX.Element;
+}[] = [
 	{
 		title: 'Small',
 		content: (

package/example-helpers/index.tsx

@@ -33,7 +33,13 @@ export const mouseEnterHandler = (result: CardEvent) => {
 	console.log('mouseEnter', result.mediaItemDetails);
 };
 
-export const createApiCards = (appearance: CardAppearance, identifier: Identifier) => {
+export const createApiCards = (
+	appearance: CardAppearance,
+	identifier: Identifier,
+): {
+	title: string;
+	content: React.JSX.Element;
+}[] => {
 	// API methods
 	const apiCards = [
 		{
@@ -74,7 +80,11 @@ export const closeAction = {
 		console.log('close');
 	},
 };
-export const deleteAction = {
+export const deleteAction: {
+	label: string;
+	handler: () => void;
+	icon: React.JSX.Element;
+} = {
 	label: 'Delete',
 	handler: () => {
 		console.log('delete');
@@ -121,7 +131,7 @@ export const MainWrapper = ({
 	children,
 	developmentOnly,
 	disableFeatureFlagWrapper = false,
-}: MainWrapperProps) => {
+}: MainWrapperProps): React.JSX.Element => {
 	enableMediaUfoLogger(payloadPublisher);
 	return (
 		<>
@@ -148,7 +158,7 @@ export const mediaCardErrorState = (error?: string): MediaCardError | undefined
 	}
 };
 
-export const SSRAnalyticsWrapper = ({ children }: PropsWithChildren<{}>) => {
+export const SSRAnalyticsWrapper = ({ children }: PropsWithChildren<{}>): React.JSX.Element => {
 	const mockClient: AnalyticsWebClient = {
 		sendUIEvent: (e) => console.debug('UI event', e),
 		sendOperationalEvent: (e) => console.debug('Operational event', e),

package/example-helpers/selectableCard.tsx

@@ -15,7 +15,7 @@ export class SelectableCard extends Component<SelectableCardProps, { selected: b
 		this.state = { selected: false };
 	}
 
-	render() {
+	render(): React.JSX.Element | null {
 		const { mediaClientConfig, identifier } = this.props;
 		const { selected } = this.state;
 

package/example-helpers/ssrHelpers.tsx

@@ -12,7 +12,11 @@ export interface SimulateSsrParams
 const randomStr = () => Math.random().toString(36).substr(2, 9);
 const generateSsrPageId = () => `media-ssr-page-${randomStr()}-${randomStr()}`;
 
-export const SimulateSsr = ({ serverPage, hydratePage, ...divProps }: SimulateSsrParams) => {
+export const SimulateSsr = ({
+	serverPage,
+	hydratePage,
+	...divProps
+}: SimulateSsrParams): React.JSX.Element => {
 	const id = useMemo(generateSsrPageId, []);
 
 	useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "79.7.2",
+	"version": "79.8.1",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/editor-shared-styles": "^3.9.0",
+		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/media-client": "^35.6.0",
@@ -44,12 +44,12 @@
 		"@atlaskit/media-ui": "^28.7.0",
 		"@atlaskit/media-viewer": "^52.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/react-ufo": "^4.14.0",
+		"@atlaskit/primitives": "^16.2.0",
+		"@atlaskit/react-ufo": "^4.15.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.8.0",
+		"@atlaskit/tokens": "^8.1.0",
+		"@atlaskit/tooltip": "^20.10.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",