@atlaskit/media-card 77.7.7 → 77.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/media-card
 
+## 77.8.0
+
+### Minor Changes
+
+- [#69045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69045) [`c181471c1afb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c181471c1afb) - Made media card keyboard accessible when media viewer is enabled
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 77.7.7
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -50,7 +50,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.7.7";
+var packageVersion = "77.8.0";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -62,6 +62,7 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
     // of Cards regardless of whether it shares the same file (either internal or external)
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "internalOccurrenceKey", (0, _generateUniqueId.generateUniqueId)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasBeenMounted", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaViewerButtonRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fileStateFlags", {
       wasStatusUploading: false,
       wasStatusProcessing: false
@@ -449,6 +450,9 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         cardRef: cardRef
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setMediaViewerButtonRef", function (buttonRef) {
+      _this.mediaViewerButtonRef = buttonRef;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderInlinePlayer", function () {
       var _this$props6 = _this.props,
         identifier = _this$props6.identifier,
@@ -482,6 +486,9 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMediaViewerClose", function () {
       _this.setState({
         mediaViewerSelectedItem: undefined
+      }, function () {
+        var _this$mediaViewerButt;
+        (_this$mediaViewerButt = _this.mediaViewerButtonRef) === null || _this$mediaViewerButt === void 0 || _this$mediaViewerButt.focus();
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDisplayImage", function () {
@@ -583,12 +590,14 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         actions: actions,
         selectable: selectable,
         selected: selected,
+        shouldOpenMediaViewer: shouldOpenMediaViewer,
         onClick: withCallbacks ? onCardViewClick : undefined,
         onMouseEnter: withCallbacks ? onMouseEnter : undefined,
         disableOverlay: disableOverlay,
         progress: progress,
         onDisplayImage: withCallbacks ? onDisplayImage : undefined,
         innerRef: _this.setRef,
+        openMediaViewerButtonRef: _this.setMediaViewerButtonRef,
         testId: testId,
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,

package/dist/cjs/card/cardView.js

@@ -39,6 +39,7 @@ var _errors = require("../errors");
 var _wrapper = require("./ui/wrapper");
 var _classnames = require("./classnames");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _openMediaViewerButton = _interopRequireDefault(require("./ui/openMediaViewerButton/openMediaViewerButton"));
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -408,7 +409,10 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
         disableOverlay = _this$props8.disableOverlay,
         cardPreview = _this$props8.cardPreview,
         mediaCardCursor = _this$props8.mediaCardCursor,
-        shouldHideTooltip = _this$props8.shouldHideTooltip;
+        shouldHideTooltip = _this$props8.shouldHideTooltip,
+        _this$props8$openMedi = _this$props8.openMediaViewerButtonRef,
+        openMediaViewerButtonRef = _this$props8$openMedi === void 0 ? null : _this$props8$openMedi,
+        shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer;
       var _ref9 = metadata || {},
         name = _ref9.name;
       var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
@@ -416,7 +420,11 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
       // Disable tooltip for Media Single
       var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
-      return (0, _react.jsx)(_wrapper.Wrapper, {
+      return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
+        fileName: name !== null && name !== void 0 ? name : '',
+        innerRef: openMediaViewerButtonRef,
+        onClick: onClick
+      }), (0, _react.jsx)(_wrapper.Wrapper, {
         testId: testId || 'media-card-view',
         dimensions: dimensions,
         appearance: appearance,
@@ -435,7 +443,7 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
         content: name,
         position: "bottom",
         tag: 'div'
-      }, this.renderContents()) : this.renderContents());
+      }, this.renderContents()) : this.renderContents()));
     }
   }]);
   return CardViewBase;

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

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.7.7";
+var packageVersion = "77.8.0";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/ui/openMediaViewerButton/openMediaViewerButton.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.visuallyHiddenStyles = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _mediaUi = require("@atlaskit/media-ui");
+var _excluded = ["fileName", "innerRef"];
+var _templateObject;
+/** @jsx jsx */
+var visuallyHiddenStyles = exports.visuallyHiddenStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  position: fixed;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  white-space: nowrap;\n"])));
+var OpenMediaViewerButton = function OpenMediaViewerButton(_ref) {
+  var fileName = _ref.fileName,
+    innerRef = _ref.innerRef,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react.jsx)("button", (0, _extends2.default)({
+    ref: innerRef,
+    css: visuallyHiddenStyles
+  }, props), intl.formatMessage(_mediaUi.messages.open_file_in_viewer, {
+    name: fileName
+  }));
+};
+var OpenMediaViewerButtonWrapper = function OpenMediaViewerButtonWrapper(props) {
+  return props.intl ? (0, _react.jsx)(OpenMediaViewerButton, props) : (0, _react.jsx)(_reactIntlNext.IntlProvider, {
+    locale: "en"
+  }, (0, _react.jsx)(OpenMediaViewerButton, props));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(OpenMediaViewerButtonWrapper, {
+  enforceContext: false
+});

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

@@ -26,6 +26,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  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (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), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n\n  button:focus + & {\n    outline: solid 2px ", ";\n  }\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (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), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/cjs/card/v2/cardV2.js

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.7.7";
+var packageVersion = "77.8.0";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/v2/cardViewV2.js

@@ -32,6 +32,7 @@ var _errors = require("../../errors");
 var _wrapper = require("../ui/wrapper");
 var _classnames = require("../classnames");
 var _useBreakpoint = require("../useBreakpoint");
+var _openMediaViewerButton = _interopRequireDefault(require("../ui/openMediaViewerButton/openMediaViewerButton"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -62,7 +63,10 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     titleBoxBgColor = _ref.titleBoxBgColor,
     titleBoxIcon = _ref.titleBoxIcon,
     error = _ref.error,
-    disableAnimation = _ref.disableAnimation;
+    disableAnimation = _ref.disableAnimation,
+    _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
+    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didImageRender = _useState2[0],
@@ -205,7 +209,7 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     name = _ref5.name,
     createdAt = _ref5.createdAt;
   var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
-  var content = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
+  var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
     css: _styles.cardImageContainerStyles,
     className: _classnames.fileCardImageViewSelector,
     "data-testid": _classnames.fileCardImageViewSelector,
@@ -260,7 +264,11 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
   })), disableOverlay || !actions || actions.length === 0 ? null : (0, _react.jsx)(_actionsBar.ActionsBar, {
     actions: actionsWithDetails
   }));
-  return (0, _react.jsx)(_wrapper.Wrapper, {
+  return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
+    fileName: name !== null && name !== void 0 ? name : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), (0, _react.jsx)(_wrapper.Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     onClick: onClick,
@@ -278,7 +286,7 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     content: name,
     position: "bottom",
     tag: "div"
-  }, content) : content);
+  }, contents) : contents));
 };
 var CardViewV2 = exports.CardViewV2 = (0, _analyticsNext.withAnalyticsEvents)({
   onClick: (0, _analytics.createAndFireMediaCardEvent)({

package/dist/cjs/card/v2/cardviews/cardViewWrapper.js

@@ -18,7 +18,8 @@ var _tickBox = require("../../ui/tickBox/tickBox");
 var _blanket = require("../../ui/blanket/blanket");
 var _actionsBar = require("../../ui/actionsBar/actionsBar");
 var _classnames = require("../../classnames");
-var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar"];
+var _openMediaViewerButton = _interopRequireDefault(require("../../ui/openMediaViewerButton/openMediaViewerButton"));
+var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef"];
 /** @jsx jsx */
 var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
   var cardPreview = _ref.cardPreview,
@@ -42,6 +43,9 @@ var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.for
     customBlanket = _ref.customBlanket,
     customTitleBox = _ref.customTitleBox,
     progressBar = _ref.progressBar,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
+    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _ref2 = metadata || {},
     name = _ref2.name,
@@ -56,7 +60,7 @@ var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.for
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
-  var content = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", (0, _extends2.default)({
+  var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", (0, _extends2.default)({
     css: _styles.cardImageContainerStyles,
     className: _classnames.fileCardImageViewSelector,
     "data-testid": _classnames.fileCardImageViewSelector,
@@ -77,7 +81,11 @@ var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.for
   var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
   var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   var shouldDisplayBackground = !cardPreview || !disableOverlay;
-  return (0, _react.jsx)(_wrapper.Wrapper, {
+  return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
+    fileName: name !== null && name !== void 0 ? name : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), (0, _react.jsx)(_wrapper.Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     appearance: appearance,
@@ -96,5 +104,5 @@ var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.for
     content: name,
     position: "bottom",
     tag: "div"
-  }, content) : content);
+  }, contents) : contents));
 });

package/dist/cjs/card/v2/cardviews/index.js

@@ -51,7 +51,9 @@ var CardViewsBase = exports.CardViewsBase = function CardViewsBase(_ref) {
     titleBoxBgColor = _ref.titleBoxBgColor,
     titleBoxIcon = _ref.titleBoxIcon,
     error = _ref.error,
-    disableAnimation = _ref.disableAnimation;
+    disableAnimation = _ref.disableAnimation,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    openMediaViewerButtonRef = _ref.openMediaViewerButtonRef;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didImageRender = _useState2[0],
@@ -108,7 +110,9 @@ var CardViewsBase = exports.CardViewsBase = function CardViewsBase(_ref) {
       onClick: onClick,
       onMouseEnter: onMouseEnter,
       mediaCardCursor: mediaCardCursor,
-      innerRef: innerRef
+      innerRef: innerRef,
+      shouldOpenMediaViewer: shouldOpenMediaViewer,
+      openMediaViewerButtonRef: openMediaViewerButtonRef
     };
     switch (status) {
       case 'uploading':

package/dist/cjs/card/v2/fileCard.js

@@ -127,6 +127,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     wasStatusUploading: false,
     wasStatusProcessing: false
   });
+  var mediaViewerButtonRef = (0, _react.useRef)(null);
 
   // Generate unique traceId for file
   var traceContext = (0, _react.useMemo)(function () {
@@ -295,6 +296,18 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     });
   });
 
+  //----------------------------------------------------------------//
+  //--------------------- Focus on Close Viewer  -------------------//
+  //----------------------------------------------------------------//
+
+  var wasViewerPreviouslyOpen = (0, _usePrevious.usePrevious)(mediaViewerSelectedItem);
+  (0, _react.useEffect)(function () {
+    if (wasViewerPreviouslyOpen && !mediaViewerSelectedItem) {
+      var _mediaViewerButtonRef;
+      (_mediaViewerButtonRef = mediaViewerButtonRef.current) === null || _mediaViewerButtonRef === void 0 || _mediaViewerButtonRef.focus();
+    }
+  }, [wasViewerPreviouslyOpen, mediaViewerSelectedItem]);
+
   //----------------------------------------------------------------//
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
@@ -521,6 +534,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       actions: computedActions,
       selectable: selectable,
       selected: selected,
+      shouldOpenMediaViewer: shouldOpenMediaViewer,
+      openMediaViewerButtonRef: mediaViewerButtonRef,
       onClick: withCallbacks ? onCardViewClick : undefined,
       onMouseEnter: withCallbacks ? function (event) {
         onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({

package/dist/cjs/inline/loader.js

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

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 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 = "77.7.7";
+var packageVersion = "77.8.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.7.7";
+const packageVersion = "77.8.0";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -36,6 +36,7 @@ export class CardBase extends Component {
     // of Cards regardless of whether it shares the same file (either internal or external)
     _defineProperty(this, "internalOccurrenceKey", generateUniqueId());
     _defineProperty(this, "hasBeenMounted", false);
+    _defineProperty(this, "mediaViewerButtonRef", null);
     _defineProperty(this, "fileStateFlags", {
       wasStatusUploading: false,
       wasStatusProcessing: false
@@ -397,6 +398,9 @@ export class CardBase extends Component {
         cardRef
       });
     });
+    _defineProperty(this, "setMediaViewerButtonRef", buttonRef => {
+      this.mediaViewerButtonRef = buttonRef;
+    });
     _defineProperty(this, "renderInlinePlayer", () => {
       const {
         identifier,
@@ -432,6 +436,9 @@ export class CardBase extends Component {
     _defineProperty(this, "onMediaViewerClose", () => {
       this.setState({
         mediaViewerSelectedItem: undefined
+      }, () => {
+        var _this$mediaViewerButt;
+        (_this$mediaViewerButt = this.mediaViewerButtonRef) === null || _this$mediaViewerButt === void 0 ? void 0 : _this$mediaViewerButt.focus();
       });
     });
     _defineProperty(this, "onDisplayImage", () => {
@@ -542,12 +549,14 @@ export class CardBase extends Component {
         actions: actions,
         selectable: selectable,
         selected: selected,
+        shouldOpenMediaViewer: shouldOpenMediaViewer,
         onClick: withCallbacks ? onCardViewClick : undefined,
         onMouseEnter: withCallbacks ? onMouseEnter : undefined,
         disableOverlay: disableOverlay,
         progress: progress,
         onDisplayImage: withCallbacks ? onDisplayImage : undefined,
         innerRef: this.setRef,
+        openMediaViewerButtonRef: this.setMediaViewerButtonRef,
         testId: testId,
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,

package/dist/es2019/card/cardView.js

@@ -27,6 +27,7 @@ import { isUploadError, isRateLimitedError, isPollingError } from '../errors';
 import { Wrapper } from './ui/wrapper';
 import { fileCardImageViewSelector } from './classnames';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
  * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.
@@ -393,7 +394,9 @@ export class CardViewBase extends React.Component {
       disableOverlay,
       cardPreview,
       mediaCardCursor,
-      shouldHideTooltip
+      shouldHideTooltip,
+      openMediaViewerButtonRef = null,
+      shouldOpenMediaViewer
     } = this.props;
     const {
       name
@@ -403,7 +406,11 @@ export class CardViewBase extends React.Component {
     const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
     // Disable tooltip for Media Single
     const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
-    return jsx(Wrapper, {
+    return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
+      fileName: name !== null && name !== void 0 ? name : '',
+      innerRef: openMediaViewerButtonRef,
+      onClick: onClick
+    }), jsx(Wrapper, {
       testId: testId || 'media-card-view',
       dimensions: dimensions,
       appearance: appearance,
@@ -422,7 +429,7 @@ export class CardViewBase extends React.Component {
       content: name,
       position: "bottom",
       tag: 'div'
-    }, this.renderContents()) : this.renderContents());
+    }, this.renderContents()) : this.renderContents()));
   }
 }
 _defineProperty(CardViewBase, "defaultProps", {

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 = "77.7.7";
+const packageVersion = "77.8.0";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/openMediaViewerButton/openMediaViewerButton.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import React from 'react';
+import { injectIntl, IntlProvider, useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
+export const visuallyHiddenStyles = css`
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  position: fixed;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  white-space: nowrap;
+`;
+const OpenMediaViewerButton = ({
+  fileName,
+  innerRef,
+  ...props
+}) => {
+  const intl = useIntl();
+  return jsx("button", _extends({
+    ref: innerRef,
+    css: visuallyHiddenStyles
+  }, props), intl.formatMessage(messages.open_file_in_viewer, {
+    name: fileName
+  }));
+};
+const OpenMediaViewerButtonWrapper = props => {
+  return props.intl ? jsx(OpenMediaViewerButton, props) : jsx(IntlProvider, {
+    locale: "en"
+  }, jsx(OpenMediaViewerButton, props));
+};
+export default injectIntl(OpenMediaViewerButtonWrapper, {
+  enforceContext: false
+});

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';
-import { N20 } from '@atlaskit/theme/colors';
+import { N20, B100 } from '@atlaskit/theme/colors';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
 import { transition } from '../styles';
 import { fixedBlanketStyles, blanketClassName } from '../blanket/styles';
@@ -46,5 +46,9 @@ export const wrapperStyles = ({
 
   /* Tooltip does not support percentage dimensions. We enforce them here */
   ${shouldDisplayTooltip && `> div { width: 100%; height: 100%; }`}
+
+  button:focus + & {
+    outline: solid 2px ${`var(--ds-border-focused, ${B100})`};
+  }
 `;
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/es2019/card/v2/cardV2.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.7.7";
+const packageVersion = "77.8.0";
 export const CardV2Base = ({
   identifier,
   ...otherProps

package/dist/es2019/card/v2/cardViewV2.js

@@ -23,6 +23,7 @@ import { isUploadError, isRateLimitedError, isPollingError } from '../../errors'
 import { Wrapper } from '../ui/wrapper';
 import { fileCardImageViewSelector } from '../classnames';
 import { useBreakpoint } from '../useBreakpoint';
+import OpenMediaViewerButton from '../ui/openMediaViewerButton/openMediaViewerButton';
 export const CardViewV2Base = ({
   innerRef,
   onImageLoad,
@@ -49,7 +50,9 @@ export const CardViewV2Base = ({
   titleBoxBgColor,
   titleBoxIcon,
   error,
-  disableAnimation
+  disableAnimation,
+  openMediaViewerButtonRef = null,
+  shouldOpenMediaViewer
 }) => {
   const [didImageRender, setDidImageRender] = useState(false);
   const divRef = useRef(null);
@@ -201,7 +204,7 @@ export const CardViewV2Base = ({
     createdAt
   } = metadata || {};
   const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-  const content = jsx(React.Fragment, null, jsx("div", {
+  const contents = jsx(React.Fragment, null, jsx("div", {
     css: cardImageContainerStyles,
     className: fileCardImageViewSelector,
     "data-testid": fileCardImageViewSelector,
@@ -256,7 +259,11 @@ export const CardViewV2Base = ({
   })), disableOverlay || !actions || actions.length === 0 ? null : jsx(ActionsBar, {
     actions: actionsWithDetails
   }));
-  return jsx(Wrapper, {
+  return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
+    fileName: name !== null && name !== void 0 ? name : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), jsx(Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     onClick: onClick,
@@ -274,7 +281,7 @@ export const CardViewV2Base = ({
     content: name,
     position: "bottom",
     tag: "div"
-  }, content) : content);
+  }, contents) : contents));
 };
 export const CardViewV2 = withAnalyticsEvents({
   onClick: createAndFireMediaCardEvent({

package/dist/es2019/card/v2/cardviews/cardViewWrapper.js

@@ -11,6 +11,7 @@ import { TickBox } from '../../ui/tickBox/tickBox';
 import { Blanket } from '../../ui/blanket/blanket';
 import { ActionsBar } from '../../ui/actionsBar/actionsBar';
 import { fileCardImageViewSelector } from '../../classnames';
+import OpenMediaViewerButton from '../../ui/openMediaViewerButton/openMediaViewerButton';
 export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
   cardPreview,
   testId,
@@ -32,6 +33,8 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
   customBlanket,
   customTitleBox,
   progressBar,
+  shouldOpenMediaViewer,
+  openMediaViewerButtonRef = null,
   ...props
 }, ref) => {
   const {
@@ -48,7 +51,7 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
-  const content = jsx(React.Fragment, null, jsx("div", _extends({
+  const contents = jsx(React.Fragment, null, jsx("div", _extends({
     css: cardImageContainerStyles,
     className: fileCardImageViewSelector,
     "data-testid": fileCardImageViewSelector,
@@ -69,7 +72,11 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
   const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
   const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   const shouldDisplayBackground = !cardPreview || !disableOverlay;
-  return jsx(Wrapper, {
+  return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
+    fileName: name !== null && name !== void 0 ? name : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), jsx(Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     appearance: appearance,
@@ -88,5 +95,5 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
     content: name,
     position: "bottom",
     tag: "div"
-  }, content) : content);
+  }, contents) : contents));
 });