@atlaskit/media-card 77.7.7 → 77.8.0

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

@@ -38,7 +38,9 @@ export const CardViewsBase = ({
   titleBoxBgColor,
   titleBoxIcon,
   error,
-  disableAnimation
+  disableAnimation,
+  shouldOpenMediaViewer,
+  openMediaViewerButtonRef
 }) => {
   const [didImageRender, setDidImageRender] = useState(false);
   const divRef = useRef(null);
@@ -94,7 +96,9 @@ export const CardViewsBase = ({
       onClick,
       onMouseEnter,
       mediaCardCursor,
-      innerRef
+      innerRef,
+      shouldOpenMediaViewer,
+      openMediaViewerButtonRef
     };
     switch (status) {
       case 'uploading':

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

@@ -97,6 +97,7 @@ export const FileCard = ({
     wasStatusUploading: false,
     wasStatusProcessing: false
   });
+  const mediaViewerButtonRef = useRef(null);
 
   // Generate unique traceId for file
   const traceContext = useMemo(() => ({
@@ -247,6 +248,18 @@ export const FileCard = ({
     });
   });
 
+  //----------------------------------------------------------------//
+  //--------------------- Focus on Close Viewer  -------------------//
+  //----------------------------------------------------------------//
+
+  const wasViewerPreviouslyOpen = usePrevious(mediaViewerSelectedItem);
+  useEffect(() => {
+    if (wasViewerPreviouslyOpen && !mediaViewerSelectedItem) {
+      var _mediaViewerButtonRef;
+      (_mediaViewerButtonRef = mediaViewerButtonRef.current) === null || _mediaViewerButtonRef === void 0 ? void 0 : _mediaViewerButtonRef.focus();
+    }
+  }, [wasViewerPreviouslyOpen, mediaViewerSelectedItem]);
+
   //----------------------------------------------------------------//
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
@@ -473,6 +486,8 @@ export const FileCard = ({
       actions: computedActions,
       selectable: selectable,
       selected: selected,
+      shouldOpenMediaViewer: shouldOpenMediaViewer,
+      openMediaViewerButtonRef: mediaViewerButtonRef,
       onClick: withCallbacks ? onCardViewClick : undefined,
       onMouseEnter: withCallbacks ? event => {
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter({

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: "77.7.7",
+      packageName: "77.8.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.7.7";
+const packageVersion = "77.8.0";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.7.7";
+var packageVersion = "77.8.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -53,6 +53,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     // of Cards regardless of whether it shares the same file (either internal or external)
     _defineProperty(_assertThisInitialized(_this), "internalOccurrenceKey", generateUniqueId());
     _defineProperty(_assertThisInitialized(_this), "hasBeenMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "mediaViewerButtonRef", null);
     _defineProperty(_assertThisInitialized(_this), "fileStateFlags", {
       wasStatusUploading: false,
       wasStatusProcessing: false
@@ -440,6 +441,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         cardRef: cardRef
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "setMediaViewerButtonRef", function (buttonRef) {
+      _this.mediaViewerButtonRef = buttonRef;
+    });
     _defineProperty(_assertThisInitialized(_this), "renderInlinePlayer", function () {
       var _this$props6 = _this.props,
         identifier = _this$props6.identifier,
@@ -473,6 +477,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onMediaViewerClose", function () {
       _this.setState({
         mediaViewerSelectedItem: undefined
+      }, function () {
+        var _this$mediaViewerButt;
+        (_this$mediaViewerButt = _this.mediaViewerButtonRef) === null || _this$mediaViewerButt === void 0 || _this$mediaViewerButt.focus();
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onDisplayImage", function () {
@@ -574,12 +581,14 @@ export var 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/esm/card/cardView.js

@@ -37,6 +37,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.
@@ -402,7 +403,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         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';
@@ -410,7 +414,11 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
       // Disable tooltip for Media Single
       var 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,
@@ -429,7 +437,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         content: name,
         position: "bottom",
         tag: 'div'
-      }, this.renderContents()) : this.renderContents());
+      }, this.renderContents()) : this.renderContents()));
     }
   }]);
   return CardViewBase;

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

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

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

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["fileName", "innerRef"];
+var _templateObject;
+/** @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 var visuallyHiddenStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = _objectWithoutProperties(_ref, _excluded);
+  var intl = useIntl();
+  return jsx("button", _extends({
+    ref: innerRef,
+    css: visuallyHiddenStyles
+  }, props), intl.formatMessage(messages.open_file_in_viewer, {
+    name: fileName
+  }));
+};
+var OpenMediaViewerButtonWrapper = function OpenMediaViewerButtonWrapper(props) {
+  return props.intl ? jsx(OpenMediaViewerButton, props) : jsx(IntlProvider, {
+    locale: "en"
+  }, jsx(OpenMediaViewerButton, props));
+};
+export default injectIntl(OpenMediaViewerButtonWrapper, {
+  enforceContext: false
+});

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

@@ -3,7 +3,7 @@ var _templateObject;
 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';
@@ -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  ", "\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"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(N20, ")"), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(N20, ")"), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(B100, ")"));
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

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

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

@@ -27,6 +27,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 var CardViewV2Base = function CardViewV2Base(_ref) {
   var innerRef = _ref.innerRef,
     onImageLoad = _ref.onImageLoad,
@@ -53,7 +54,10 @@ export var 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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     didImageRender = _useState2[0],
@@ -196,7 +200,7 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
     name = _ref5.name,
     createdAt = _ref5.createdAt;
   var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-  var content = jsx(React.Fragment, null, jsx("div", {
+  var contents = jsx(React.Fragment, null, jsx("div", {
     css: cardImageContainerStyles,
     className: fileCardImageViewSelector,
     "data-testid": fileCardImageViewSelector,
@@ -251,7 +255,11 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
   })), 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,
@@ -269,7 +277,7 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
     content: name,
     position: "bottom",
     tag: "div"
-  }, content) : content);
+  }, contents) : contents));
 };
 export var CardViewV2 = withAnalyticsEvents({
   onClick: createAndFireMediaCardEvent({

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar"];
+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 */
 import { jsx } from '@emotion/react';
 import React from 'react';
@@ -13,6 +13,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 var CardViewWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cardPreview = _ref.cardPreview,
     testId = _ref.testId,
@@ -35,6 +36,9 @@ export var CardViewWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     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 = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = metadata || {},
     name = _ref2.name,
@@ -49,7 +53,7 @@ export var CardViewWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
-  var content = jsx(React.Fragment, null, jsx("div", _extends({
+  var contents = jsx(React.Fragment, null, jsx("div", _extends({
     css: cardImageContainerStyles,
     className: fileCardImageViewSelector,
     "data-testid": fileCardImageViewSelector,
@@ -70,7 +74,11 @@ export var CardViewWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
   var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   var 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,
@@ -89,5 +97,5 @@ export var CardViewWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     content: name,
     position: "bottom",
     tag: "div"
-  }, content) : content);
+  }, contents) : contents));
 });

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

@@ -40,7 +40,9 @@ export var 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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     didImageRender = _useState2[0],
@@ -97,7 +99,9 @@ export var CardViewsBase = function CardViewsBase(_ref) {
       onClick: onClick,
       onMouseEnter: onMouseEnter,
       mediaCardCursor: mediaCardCursor,
-      innerRef: innerRef
+      innerRef: innerRef,
+      shouldOpenMediaViewer: shouldOpenMediaViewer,
+      openMediaViewerButtonRef: openMediaViewerButtonRef
     };
     switch (status) {
       case 'uploading':

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

@@ -117,6 +117,7 @@ export var FileCard = function FileCard(_ref) {
     wasStatusUploading: false,
     wasStatusProcessing: false
   });
+  var mediaViewerButtonRef = useRef(null);
 
   // Generate unique traceId for file
   var traceContext = useMemo(function () {
@@ -285,6 +286,18 @@ export var FileCard = function FileCard(_ref) {
     });
   });
 
+  //----------------------------------------------------------------//
+  //--------------------- Focus on Close Viewer  -------------------//
+  //----------------------------------------------------------------//
+
+  var wasViewerPreviouslyOpen = usePrevious(mediaViewerSelectedItem);
+  useEffect(function () {
+    if (wasViewerPreviouslyOpen && !mediaViewerSelectedItem) {
+      var _mediaViewerButtonRef;
+      (_mediaViewerButtonRef = mediaViewerButtonRef.current) === null || _mediaViewerButtonRef === void 0 || _mediaViewerButtonRef.focus();
+    }
+  }, [wasViewerPreviouslyOpen, mediaViewerSelectedItem]);
+
   //----------------------------------------------------------------//
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
@@ -511,6 +524,8 @@ export var 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/esm/inline/loader.js

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

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 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/types/card/card.d.ts

@@ -10,6 +10,7 @@ export type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<Wrapp
 export declare class CardBase extends Component<CardBaseProps, CardState> {
     private internalOccurrenceKey;
     private hasBeenMounted;
+    private mediaViewerButtonRef;
     private fileStateFlags;
     private ssrReliability;
     private timeElapsedTillCommenced;
@@ -49,9 +50,10 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private safeSetState;
     unsubscribe: () => void;
     get actions(): CardAction[];
-    onCardViewClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onCardViewClick: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     onInlinePlayerError: (e: Error) => void;
     setRef: (cardRef: HTMLDivElement | null) => void;
+    setMediaViewerButtonRef: (buttonRef: HTMLButtonElement | null) => void;
     renderInlinePlayer: () => JSX.Element;
     onMediaViewerClose: () => void;
     private onDisplayImage;
@@ -60,7 +62,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private storeSSRData;
     render(): JSX.Element;
     private onCardInViewport;
-    onClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onClick: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 export declare const Card: React.ComponentType<CardBaseProps>;

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

@@ -14,12 +14,14 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly shouldOpenMediaViewer: boolean;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: CardPreview;
     readonly progress?: number;
     readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
     readonly onImageLoad: (cardPreview: CardPreview) => void;
     readonly onImageError: (cardPreview: CardPreview) => void;
     readonly nativeLazyLoad?: boolean;

package/dist/types/card/ui/openMediaViewerButton/openMediaViewerButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+export declare const visuallyHiddenStyles: import("@emotion/react").SerializedStyles;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
+    fileName: string;
+    innerRef: React.Ref<HTMLButtonElement>;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<{
+        fileName: string;
+        innerRef: React.Ref<HTMLButtonElement>;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/card/v2/cardViewV2.d.ts

@@ -24,7 +24,9 @@ export interface CardViewV2Props {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: MediaFilePreview;
@@ -52,5 +54,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2BaseProps) => jsx.JSX.Element;
+export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, }: CardViewV2BaseProps) => jsx.JSX.Element;
 export declare const CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2BaseProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/card/v2/cardviews/cardViewWrapper.d.ts

@@ -9,7 +9,9 @@ export type SharedCardViewProps = {
     readonly cardPreview?: MediaFilePreview;
     readonly testId?: string;
     readonly dimensions?: CardDimensions;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly appearance?: CardAppearance;
     readonly disableOverlay?: boolean;

package/dist/types/card/v2/cardviews/index.d.ts

@@ -13,7 +13,7 @@ export interface CardViewsOwnProps extends SharedCardProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: MediaFilePreview;
@@ -25,6 +25,8 @@ export interface CardViewsOwnProps extends SharedCardProps {
     readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
     shouldHideTooltip?: boolean;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
 }
 export type CardViewV2Props = CardViewsOwnProps & WithAnalyticsEventsProps;
 export interface RenderConfigByStatusV2 {
@@ -41,5 +43,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewsBase: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2Props) => jsx.JSX.Element;
+export declare const CardViewsBase: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, shouldOpenMediaViewer, openMediaViewerButtonRef, }: CardViewV2Props) => jsx.JSX.Element;
 export declare const CardViews: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -10,6 +10,7 @@ export type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<Wrapp
 export declare class CardBase extends Component<CardBaseProps, CardState> {
     private internalOccurrenceKey;
     private hasBeenMounted;
+    private mediaViewerButtonRef;
     private fileStateFlags;
     private ssrReliability;
     private timeElapsedTillCommenced;
@@ -49,9 +50,10 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private safeSetState;
     unsubscribe: () => void;
     get actions(): CardAction[];
-    onCardViewClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onCardViewClick: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     onInlinePlayerError: (e: Error) => void;
     setRef: (cardRef: HTMLDivElement | null) => void;
+    setMediaViewerButtonRef: (buttonRef: HTMLButtonElement | null) => void;
     renderInlinePlayer: () => JSX.Element;
     onMediaViewerClose: () => void;
     private onDisplayImage;
@@ -60,7 +62,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private storeSSRData;
     render(): JSX.Element;
     private onCardInViewport;
-    onClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onClick: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 export declare const Card: React.ComponentType<CardBaseProps>;

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

@@ -14,12 +14,14 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly shouldOpenMediaViewer: boolean;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: CardPreview;
     readonly progress?: number;
     readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
     readonly onImageLoad: (cardPreview: CardPreview) => void;
     readonly onImageError: (cardPreview: CardPreview) => void;
     readonly nativeLazyLoad?: boolean;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+export declare const visuallyHiddenStyles: import("@emotion/react").SerializedStyles;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
+    fileName: string;
+    innerRef: React.Ref<HTMLButtonElement>;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<{
+        fileName: string;
+        innerRef: React.Ref<HTMLButtonElement>;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types-ts4.5/card/v2/cardViewV2.d.ts

@@ -24,7 +24,9 @@ export interface CardViewV2Props {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: MediaFilePreview;
@@ -52,5 +54,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2BaseProps) => jsx.JSX.Element;
+export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, }: CardViewV2BaseProps) => jsx.JSX.Element;
 export declare const CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2BaseProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;