@atlaskit/media-card 79.13.2 → 79.14.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/media-card
 
+## 79.14.0
+
+### Minor Changes
+
+- [`c5bc52b0eb431`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c5bc52b0eb431) -
+  Add improved error messaging UI for MediaCard when encountering network errors. Users will now see
+  a "Failed to load. Please check your internet connection" message when network errors occur,
+  providing clearer guidance about what went wrong. This feature is gated behind the
+  `media_card_failed_messaging_ui_revamp` feature flag for gradual rollout.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 79.13.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 79.13.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -20,7 +20,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.13.1";
+var packageVersion = "0.0.0-development";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -28,6 +28,7 @@ var _actionsBar = require("./ui/actionsBar/actionsBar");
 var _iconWrapper = require("./ui/iconWrapper/iconWrapper");
 var _iconMessage2 = require("./ui/iconMessage");
 var _errors = require("../errors");
+var _isNetworkError = require("../utils/isNetworkError");
 var _wrapper = require("./ui/wrapper");
 var _classnames = require("./classnames");
 var _useBreakpoint = require("./useBreakpoint");
@@ -172,6 +173,9 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
         if ((0, _errors.isUploadError)(error)) {
           _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.FailedToUpload, null);
           _customTitleMessage = _mediaUi.messages.failed_to_upload;
+        } else if ((0, _isNetworkError.isNetworkError)(error) && (0, _platformFeatureFlags.fg)('media_card_failed_messaging_ui_revamp')) {
+          _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.CheckInternetConnection, null);
+          _customTitleMessage = _mediaUi.messages.check_internet_connection;
         } else if (!metadata) {
           _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.FailedToLoad, null);
         } else {

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.13.1";
+var packageVersion = "0.0.0-development";
 
 // @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/iconMessage/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreviewUnavailable = exports.IconMessage = exports.FailedToUpload = exports.FailedToLoad = exports.CreatingPreview = void 0;
+exports.PreviewUnavailable = exports.IconMessage = exports.FailedToUpload = exports.FailedToLoad = exports.CreatingPreview = exports.CheckInternetConnection = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _iconMessageWrapper = require("./iconMessageWrapper");
@@ -39,4 +39,9 @@ var FailedToUpload = exports.FailedToUpload = function FailedToUpload(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
     messageDescriptor: _mediaUi.messages.failed_to_upload
   }));
+};
+var CheckInternetConnection = exports.CheckInternetConnection = function CheckInternetConnection(props) {
+  return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
+    messageDescriptor: _mediaUi.messages.check_internet_connection
+  }));
 };

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

@@ -1,4 +1,4 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkov47k{border-radius:var(--ds-space-250,20px)}
 ._v564ybtr{transition:all .3s}
 ._154i1tpr{top:var(--ds-space-075,7px)}

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

@@ -18,7 +18,7 @@ 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", props.selected && "_bfhkqre5 _syaz5w2r", _styles.tickBoxClassName]),
+    className: (0, _runtime.ax)(["_11c8fhey _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/unhandledErrorCard/unhandledErrorCard-compiled.compiled.css

@@ -1,5 +1,5 @@
 
-._1i7v2smr p{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1i7vfhey p{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._2lx21bp4{flex-direction:column}

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

@@ -70,7 +70,7 @@ var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Co
       return /*#__PURE__*/React.createElement("div", {
         onClick: onClick,
         "data-testid": "unhandled-error-card",
-        className: (0, _runtime.ax)(["_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhklslw _syaz1dfj _c71l1osq _p12f1osq _2lx21bp4 _1i7v2smr _31ku1h6o"]),
+        className: (0, _runtime.ax)(["_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhklslw _syaz1dfj _c71l1osq _p12f1osq _2lx21bp4 _1i7vfhey _31ku1h6o"]),
         style: _objectSpread(_objectSpread({}, convertedDimensions), {}, {
           "--_1jkcdu5": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20, ")")),
           "--_i2cu7k": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N800, ")"))

package/dist/cjs/card/ui/wrapper/styles.js

@@ -25,6 +25,6 @@ var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
     mediaCardCursor = _ref.mediaCardCursor;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), (0, _styles.transition)(), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(_colors.N20, ")"), ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), selected ? _selection.hideNativeBrowserTextSelectionStyles : '', (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(_colors.B100, ")"));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), (0, _styles.transition)(), "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(_colors.N20, ")"), ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), selected ? _selection.hideNativeBrowserTextSelectionStyles : '', (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

@@ -20,7 +20,7 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._9m3z1osq>div{width:100%}
 ._bfhklslw{background-color:var(--_1jkcdu5)}
 ._c71l1osq{max-height:100%}
-._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg54rvv2:hover .media-card-blanket{background-color:var(--ds-blanket,rgba(9,30,66,.48))}
 ._kqswh2mm{position:relative}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}

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

@@ -24,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var LOCAL_WIDTH_VARIABLE = exports.LOCAL_WIDTH_VARIABLE = '--media-wrapper-width';
 var LOCAL_HEIGHT_VARIABLE = exports.LOCAL_HEIGHT_VARIABLE = '--media-wrapper-height';
 var wrapperStyles = {
-  default: "_2rkofajl _vchhusvi _kqswh2mm _ect41gqc _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmjc5g _1rquusvi _eg54rvv2 _mts3kb7n _1ntskb7n"
+  default: "_2rkofajl _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmjc5g _1rquusvi _eg54rvv2 _mts3kb7n _1ntskb7n"
 };
 var backgroundStyle = null;
 var shadowStyleMap = {

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.13.1",
+        packageName: "0.0.0-development",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/isNetworkError.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNetworkError = isNetworkError;
+var _mediaClient = require("@atlaskit/media-client");
+function isNetworkError(error) {
+  if (!error) {
+    return false;
+  }
+  var secondaryError = error.secondaryError;
+
+  // Check if secondaryError is directly a TypeError (fetch API throws TypeError for network errors)
+  if (secondaryError instanceof TypeError) {
+    return true;
+  }
+
+  // Check if secondaryError is a CommonMediaClientError with nested TypeError in innerError
+  if ((0, _mediaClient.isCommonMediaClientError)(secondaryError) && secondaryError.innerError instanceof TypeError) {
+    return true;
+  }
+  return false;
+}

package/dist/cjs/utils/ufoExperiences.js

@@ -19,7 +19,7 @@ var _globalScope = require("./globalScope/globalScope");
 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 packageName = "@atlaskit/media-card";
-var packageVersion = "79.13.1";
+var packageVersion = "0.0.0-development";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.13.1";
+const packageVersion = "0.0.0-development";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -16,8 +16,9 @@ import { TickBox } from './ui/tickBox/tickBox';
 import { Blanket } from './ui/blanket/blanket';
 import { ActionsBar } from './ui/actionsBar/actionsBar';
 import { IconWrapper } from './ui/iconWrapper/iconWrapper';
-import { PreviewUnavailable, CreatingPreview, FailedToUpload, FailedToLoad } from './ui/iconMessage';
+import { PreviewUnavailable, CreatingPreview, FailedToUpload, FailedToLoad, CheckInternetConnection } from './ui/iconMessage';
 import { isUploadError } from '../errors';
+import { isNetworkError } from '../utils/isNetworkError';
 import { Wrapper, ImageContainer } from './ui/wrapper';
 import { fileCardImageViewSelector } from './classnames';
 import { useBreakpoint } from './useBreakpoint';
@@ -158,6 +159,9 @@ export const CardViewBase = ({
         if (isUploadError(error)) {
           iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
           customTitleMessage = messages.failed_to_upload;
+        } else if (isNetworkError(error) && fg('media_card_failed_messaging_ui_revamp')) {
+          iconMessage = /*#__PURE__*/React.createElement(CheckInternetConnection, null);
+          customTitleMessage = messages.check_internet_connection;
         } else if (!metadata) {
           iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
         } else {

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

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

package/dist/es2019/card/ui/iconMessage/index.js

@@ -25,4 +25,7 @@ export const FailedToLoad = props => /*#__PURE__*/React.createElement(IconMessag
 }));
 export const FailedToUpload = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
   messageDescriptor: messages.failed_to_upload
+}));
+export const CheckInternetConnection = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.check_internet_connection
 }));

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

@@ -1,4 +1,4 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkov47k{border-radius:var(--ds-space-250,20px)}
 ._v564ybtr{transition:all .3s}
 ._154i1tpr{top:var(--ds-space-075,7px)}

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

@@ -10,7 +10,7 @@ export const TickBoxWrapper = props => {
   return /*#__PURE__*/React.createElement("div", {
     id: "tickBoxWrapper",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_11c82smr _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", props.selected && "_bfhk8sto _syaz5w2r", tickBoxClassName])
+    className: ax(["_11c8fhey _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", props.selected && "_bfhk8sto _syaz5w2r", tickBoxClassName])
   }, props.children);
 };
 TickBoxWrapper.displayName = 'TickBoxWrapper';

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

@@ -1,5 +1,5 @@
 
-._1i7v2smr p{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1i7vfhey p{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._2lx21bp4{flex-direction:column}

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

@@ -45,7 +45,7 @@ export class UnhandledErrorCard extends Component {
       style: convertedDimensions,
       onClick: onClick,
       "data-testid": "unhandled-error-card",
-      className: ax(["_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1s4m _syaz1aqp _c71l1osq _p12f1osq _2lx21bp4 _1i7v2smr _31ku1h6o"])
+      className: ax(["_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1s4m _syaz1aqp _c71l1osq _p12f1osq _2lx21bp4 _1i7vfhey _31ku1h6o"])
     }, /*#__PURE__*/React.createElement(WarningIcon, {
       label: "Error",
       color: `var(--ds-icon-warning, ${Y500})`,

package/dist/es2019/card/ui/wrapper/styles.js

@@ -25,7 +25,7 @@ export const wrapperStyles = ({
 		box-sizing: border-box;
 	}
 	position: relative;
-	font-family: ${"var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
+	font-family: ${"var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
 	${getWrapperDimensions(dimensions, appearance)}
 	${displayBackground && `background: ${`var(--ds-background-neutral, ${N20})`};`}
   ${borderRadius}

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

@@ -20,7 +20,7 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._9m3z1osq>div{width:100%}
 ._bfhk1s4m{background-color:var(--ds-background-neutral,#f4f5f7)}
 ._c71l1osq{max-height:100%}
-._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg54rvv2:hover .media-card-blanket{background-color:var(--ds-blanket,rgba(9,30,66,.48))}
 ._kqswh2mm{position:relative}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}

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

@@ -12,7 +12,7 @@ import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 export const LOCAL_WIDTH_VARIABLE = '--media-wrapper-width';
 export const LOCAL_HEIGHT_VARIABLE = '--media-wrapper-height';
 const wrapperStyles = {
-  default: "_2rkofajl _vchhusvi _kqswh2mm _ect41gqc _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmjc5g _1rquusvi _eg54rvv2 _mts3kb7n _1ntskb7n"
+  default: "_2rkofajl _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmjc5g _1rquusvi _eg54rvv2 _mts3kb7n _1ntskb7n"
 };
 const backgroundStyle = null;
 const shadowStyleMap = {

package/dist/es2019/inline/loader.js

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

package/dist/es2019/utils/isNetworkError.js

@@ -0,0 +1,20 @@
+import { isCommonMediaClientError } from '@atlaskit/media-client';
+export function isNetworkError(error) {
+  if (!error) {
+    return false;
+  }
+  const {
+    secondaryError
+  } = error;
+
+  // Check if secondaryError is directly a TypeError (fetch API throws TypeError for network errors)
+  if (secondaryError instanceof TypeError) {
+    return true;
+  }
+
+  // Check if secondaryError is a CommonMediaClientError with nested TypeError in innerError
+  if (isCommonMediaClientError(secondaryError) && secondaryError.innerError instanceof TypeError) {
+    return true;
+  }
+  return false;
+}

package/dist/es2019/utils/ufoExperiences.js

@@ -9,7 +9,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.13.1";
+const packageVersion = "0.0.0-development";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.13.1";
+var packageVersion = "0.0.0-development";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -20,8 +20,9 @@ import { TickBox } from './ui/tickBox/tickBox';
 import { Blanket } from './ui/blanket/blanket';
 import { ActionsBar } from './ui/actionsBar/actionsBar';
 import { IconWrapper } from './ui/iconWrapper/iconWrapper';
-import { PreviewUnavailable, CreatingPreview, FailedToUpload, FailedToLoad } from './ui/iconMessage';
+import { PreviewUnavailable, CreatingPreview, FailedToUpload, FailedToLoad, CheckInternetConnection } from './ui/iconMessage';
 import { isUploadError } from '../errors';
+import { isNetworkError } from '../utils/isNetworkError';
 import { Wrapper, ImageContainer } from './ui/wrapper';
 import { fileCardImageViewSelector } from './classnames';
 import { useBreakpoint } from './useBreakpoint';
@@ -163,6 +164,9 @@ export var CardViewBase = function CardViewBase(_ref) {
         if (isUploadError(error)) {
           _iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
           _customTitleMessage = messages.failed_to_upload;
+        } else if (isNetworkError(error) && fg('media_card_failed_messaging_ui_revamp')) {
+          _iconMessage = /*#__PURE__*/React.createElement(CheckInternetConnection, null);
+          _customTitleMessage = messages.check_internet_connection;
         } else if (!metadata) {
           _iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
         } else {

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

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

package/dist/esm/card/ui/iconMessage/index.js

@@ -32,4 +32,9 @@ export var FailedToUpload = function FailedToUpload(props) {
   return /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
     messageDescriptor: messages.failed_to_upload
   }));
+};
+export var CheckInternetConnection = function CheckInternetConnection(props) {
+  return /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+    messageDescriptor: messages.check_internet_connection
+  }));
 };

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

@@ -1,4 +1,4 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkov47k{border-radius:var(--ds-space-250,20px)}
 ._v564ybtr{transition:all .3s}
 ._154i1tpr{top:var(--ds-space-075,7px)}

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

@@ -10,7 +10,7 @@ export var TickBoxWrapper = function TickBoxWrapper(props) {
   return /*#__PURE__*/React.createElement("div", {
     id: "tickBoxWrapper",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_11c82smr _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", props.selected && "_bfhkqre5 _syaz5w2r", tickBoxClassName]),
+    className: ax(["_11c8fhey _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", props.selected && "_bfhkqre5 _syaz5w2r", tickBoxClassName]),
     style: {
       "--_1flhvp0": ix("var(--ds-icon-information, ".concat(B200, ")"))
     }

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

@@ -1,5 +1,5 @@
 
-._1i7v2smr p{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1i7vfhey p{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._2lx21bp4{flex-direction:column}

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

@@ -61,7 +61,7 @@ export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement("div", {
         onClick: onClick,
         "data-testid": "unhandled-error-card",
-        className: ax(["_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhklslw _syaz1dfj _c71l1osq _p12f1osq _2lx21bp4 _1i7v2smr _31ku1h6o"]),
+        className: ax(["_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhklslw _syaz1dfj _c71l1osq _p12f1osq _2lx21bp4 _1i7vfhey _31ku1h6o"]),
         style: _objectSpread(_objectSpread({}, convertedDimensions), {}, {
           "--_1jkcdu5": ix("var(--ds-background-neutral, ".concat(N20, ")")),
           "--_i2cu7k": ix("var(--ds-text-subtle, ".concat(N800, ")"))

package/dist/esm/card/ui/wrapper/styles.js

@@ -20,6 +20,6 @@ export var wrapperStyles = function wrapperStyles(_ref) {
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
     mediaCardCursor = _ref.mediaCardCursor;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), transition(), "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(N20, ")"), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), selected ? hideNativeBrowserTextSelectionStyles : '', getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(B100, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), transition(), "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(N20, ")"), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), selected ? hideNativeBrowserTextSelectionStyles : '', getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(B100, ")"));
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

@@ -20,7 +20,7 @@ button:focus+._1hlmjc5g{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._9m3z1osq>div{width:100%}
 ._bfhklslw{background-color:var(--_1jkcdu5)}
 ._c71l1osq{max-height:100%}
-._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg54rvv2:hover .media-card-blanket{background-color:var(--ds-blanket,rgba(9,30,66,.48))}
 ._kqswh2mm{position:relative}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}

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

@@ -15,7 +15,7 @@ import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 export var LOCAL_WIDTH_VARIABLE = '--media-wrapper-width';
 export var LOCAL_HEIGHT_VARIABLE = '--media-wrapper-height';
 var wrapperStyles = {
-  default: "_2rkofajl _vchhusvi _kqswh2mm _ect41gqc _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmjc5g _1rquusvi _eg54rvv2 _mts3kb7n _1ntskb7n"
+  default: "_2rkofajl _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmjc5g _1rquusvi _eg54rvv2 _mts3kb7n _1ntskb7n"
 };
 var backgroundStyle = null;
 var shadowStyleMap = {

package/dist/esm/inline/loader.js

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

package/dist/esm/utils/isNetworkError.js

@@ -0,0 +1,18 @@
+import { isCommonMediaClientError } from '@atlaskit/media-client';
+export function isNetworkError(error) {
+  if (!error) {
+    return false;
+  }
+  var secondaryError = error.secondaryError;
+
+  // Check if secondaryError is directly a TypeError (fetch API throws TypeError for network errors)
+  if (secondaryError instanceof TypeError) {
+    return true;
+  }
+
+  // Check if secondaryError is a CommonMediaClientError with nested TypeError in innerError
+  if (isCommonMediaClientError(secondaryError) && secondaryError.innerError instanceof TypeError) {
+    return true;
+  }
+  return false;
+}

package/dist/esm/utils/ufoExperiences.js

@@ -13,7 +13,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.13.1";
+var packageVersion = "0.0.0-development";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/types/card/ui/iconMessage/index.d.ts

@@ -5,3 +5,4 @@ export declare const CreatingPreview: React.FC<CreatingPreviewProps>;
 export declare const PreviewUnavailable: React.FC;
 export declare const FailedToLoad: React.FC;
 export declare const FailedToUpload: React.FC;
+export declare const CheckInternetConnection: React.FC;

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

@@ -0,0 +1,2 @@
+import type { MediaCardError } from '../errors';
+export declare function isNetworkError(error: MediaCardError | undefined): boolean;

package/dist/types-ts4.5/card/ui/iconMessage/index.d.ts

@@ -5,3 +5,4 @@ export declare const CreatingPreview: React.FC<CreatingPreviewProps>;
 export declare const PreviewUnavailable: React.FC;
 export declare const FailedToLoad: React.FC;
 export declare const FailedToUpload: React.FC;
+export declare const CheckInternetConnection: React.FC;

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

@@ -0,0 +1,2 @@
+import type { MediaCardError } from '../errors';
+export declare function isNetworkError(error: MediaCardError | undefined): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "79.13.2",
+	"version": "79.14.0",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,11 +44,11 @@
 		"@atlaskit/media-ui": "^28.7.0",
 		"@atlaskit/media-viewer": "^52.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/react-ufo": "^4.17.0",
+		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/react-ufo": "^5.0.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^9.1.0",
+		"@atlaskit/tokens": "^10.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -146,6 +146,9 @@
 		},
 		"jfp-magma-fix-attachments-hydration-error": {
 			"type": "boolean"
+		},
+		"media_card_failed_messaging_ui_revamp": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {