@atlaskit/media-card 75.0.0 → 76.0.0

package/dist/es2019/card/cardView.js

@@ -3,21 +3,16 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
 import Tooltip from '@atlaskit/tooltip';
-import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui';
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
-import { FileCardImageView } from './cardImageView';
-import { breakpointSize } from '../utils/breakpoint';
-import { defaultImageCardDimensions, getDefaultCardDimensions } from '../utils/cardDimensions';
+import { defaultImageCardDimensions } from '../utils/cardDimensions';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
-import { getCSSUnitValue } from '../utils/getCSSUnitValue';
 import { getElementDimension } from '../utils/getElementDimension';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from './actions';
-import { getErrorMessage } from '../utils/getErrorMessage';
 import { cardImageContainerStyles, calcBreakpointSize } from './ui/styles';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
@@ -30,8 +25,8 @@ import { ActionsBar } from './ui/actionsBar/actionsBar';
 import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
 import { isUploadError } from '../errors';
-import { NewFileExperienceWrapper } from './ui/newFileExperience/newFileExperienceWrapper';
-import { Wrapper } from './cardImageView/cardViewWrapper';
+import { Wrapper } from './ui/wrapper';
+import { fileCardImageViewSelector } from './classnames';
 /**
  * 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.
@@ -92,103 +87,6 @@ export class CardViewBase extends React.Component {
         });
       }
     });
-    _defineProperty(this, "renderFileNewExperience", () => {
-      const {
-        dimensions,
-        appearance,
-        onClick,
-        onMouseEnter,
-        testId,
-        metadata,
-        status,
-        selected,
-        selectable,
-        disableOverlay,
-        cardPreview,
-        mediaCardCursor
-      } = this.props;
-      const {
-        name
-      } = metadata || {};
-      const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
-      const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
-      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
-      // Disable tooltip for Media Single
-      const shouldDisplayTooltip = !disableOverlay;
-      return jsx(NewFileExperienceWrapper, {
-        testId: testId || 'media-card-view',
-        dimensions: dimensions,
-        appearance: appearance,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        innerRef: this.divRef,
-        breakpoint: this.breakpoint,
-        mediaCardCursor: mediaCardCursor,
-        disableOverlay: !!disableOverlay,
-        selected: !!selected,
-        displayBackground: shouldDisplayBackground,
-        isPlayButtonClickable: isPlayButtonClickable,
-        isTickBoxSelectable: isTickBoxSelectable,
-        shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? jsx(Tooltip, {
-        content: name,
-        position: "bottom",
-        tag: 'div'
-      }, this.renderNewExperienceCard()) : this.renderNewExperienceCard());
-    });
-    _defineProperty(this, "renderFile", () => {
-      const {
-        cardPreview,
-        status,
-        mediaItemType,
-        metadata,
-        progress,
-        resizeMode,
-        dimensions,
-        selectable,
-        selected,
-        disableOverlay,
-        alt,
-        onDisplayImage,
-        actions
-      } = this.props;
-      const {
-        dataURI,
-        orientation
-      } = cardPreview || {};
-      const {
-        name,
-        mediaType,
-        mimeType,
-        size
-      } = metadata || {};
-      const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-      const errorMessage = getErrorMessage(status);
-      const fileSize = !size ? '' : toHumanReadableMediaSize(size);
-      return jsx(FileCardImageView, {
-        error: errorMessage,
-        dimensions: dimensions,
-        selectable: selectable,
-        selected: selected,
-        dataURI: dataURI,
-        mediaName: name,
-        mediaType: mediaType,
-        mimeType: mimeType,
-        fileSize: fileSize,
-        status: status,
-        mediaItemType: mediaItemType,
-        progress: progress,
-        resizeMode: resizeMode,
-        onDisplayImage: onDisplayImage,
-        actions: actionsWithDetails,
-        disableOverlay: disableOverlay,
-        previewOrientation: orientation,
-        alt: alt,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError,
-        cardPreview: cardPreview
-      });
-    });
     _defineProperty(this, "getRenderConfigByStatus", () => {
       const {
         cardPreview,
@@ -281,7 +179,7 @@ export class CardViewBase extends React.Component {
           };
       }
     });
-    _defineProperty(this, "renderNewExperienceCard", () => {
+    _defineProperty(this, "renderContents", () => {
       const {
         renderTypeIcon,
         iconMessage,
@@ -308,8 +206,8 @@ export class CardViewBase extends React.Component {
       const hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
       return jsx(React.Fragment, null, jsx("div", {
         css: cardImageContainerStyles,
-        className: "media-file-card-view",
-        "data-testid": "media-file-card-view",
+        className: fileCardImageViewSelector,
+        "data-testid": fileCardImageViewSelector,
         "data-test-media-name": name,
         "data-test-status": status,
         "data-test-progress": progress,
@@ -338,59 +236,17 @@ export class CardViewBase extends React.Component {
       didImageRender: false
     });
   }
-  // This width is only used to calculate breakpoints, dimensions are passed down as
-  // integrator pass it to the root component
-  get width() {
-    const {
-      elementWidth
-    } = this.state;
-    if (elementWidth) {
-      return elementWidth;
-    }
-    const {
-      width
-    } = this.props.dimensions || {
-      width: undefined
-    };
-    if (!width) {
-      return defaultImageCardDimensions.width;
-    }
-    return getCSSUnitValue(width);
-  }
   get breakpoint() {
     const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
     return calcBreakpointSize(parseInt(`${width}`, 10));
   }
-  render() {
-    const {
-      featureFlags
-    } = this.props;
-    if (getMediaFeatureFlag('newCardExperience', featureFlags)) {
-      return this.renderFileNewExperience();
-    }
-    const {
-      dimensions,
-      appearance,
-      onClick,
-      onMouseEnter,
-      testId
-    } = this.props;
-    const wrapperDimensions = dimensions ? dimensions : getDefaultCardDimensions(appearance);
-    return jsx(Wrapper, {
-      testId: testId || 'media-card-view',
-      shouldUsePointerCursor: true,
-      breakpointSize: breakpointSize(this.width),
-      dimensions: wrapperDimensions,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      innerRef: this.divRef
-    }, this.renderFile());
-  }
   renderSpinner(hasTitleBox) {
     return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, jsx(SpinnerIcon, null));
+    }, jsx(SpinnerIcon, {
+      testId: 'media-card-loading'
+    }));
   }
   shouldRenderPlayButton() {
     const {
@@ -518,6 +374,50 @@ export class CardViewBase extends React.Component {
       actions: actionsWithDetails
     });
   }
+  render() {
+    const {
+      dimensions,
+      appearance,
+      onClick,
+      onMouseEnter,
+      testId,
+      metadata,
+      status,
+      selected,
+      selectable,
+      disableOverlay,
+      cardPreview,
+      mediaCardCursor
+    } = this.props;
+    const {
+      name
+    } = metadata || {};
+    const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+    const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
+    const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+    // Disable tooltip for Media Single
+    const shouldDisplayTooltip = !disableOverlay;
+    return jsx(Wrapper, {
+      testId: testId || 'media-card-view',
+      dimensions: dimensions,
+      appearance: appearance,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      innerRef: this.divRef,
+      breakpoint: this.breakpoint,
+      mediaCardCursor: mediaCardCursor,
+      disableOverlay: !!disableOverlay,
+      selected: !!selected,
+      displayBackground: shouldDisplayBackground,
+      isPlayButtonClickable: isPlayButtonClickable,
+      isTickBoxSelectable: isTickBoxSelectable,
+      shouldDisplayTooltip: shouldDisplayTooltip
+    }, shouldDisplayTooltip ? jsx(Tooltip, {
+      content: name,
+      position: "bottom",
+      tag: 'div'
+    }, this.renderContents()) : this.renderContents());
+  }
 }
 _defineProperty(CardViewBase, "defaultProps", {
   appearance: 'auto'

package/dist/es2019/card/getCardStatus.js

@@ -1,39 +1,5 @@
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export const isFinalCardStatus = status => ['complete', 'error', 'failed-processing'].includes(status);
-const getCardStatusBuggy = (fileStatus, {
-  hasFilesize,
-  isPreviewable,
-  hasPreview
-}) => {
-  switch (fileStatus) {
-    case 'uploading':
-    case 'failed-processing':
-    case 'error':
-      return fileStatus;
-    case 'processing':
-      // Legacy empty files logic
-      // isPreviewable will most likely be false for empty files,
-      // therefore we need to do this cut before that check.
-      // TODO: https://product-fabric.atlassian.net/browse/BMPT-1247
-      if (!hasFilesize) {
-        return 'processing';
-      }
-      // If we show no preview for this file
-      // we won't show the "creating preview" message, i.e. Card is "complete".
-      if (!isPreviewable) {
-        return 'complete';
-      }
-      return 'processing';
-    case 'processed':
-      if (!isPreviewable || !hasPreview) {
-        return 'complete';
-      }
-      return 'loading-preview';
-    default:
-      return 'loading';
-  }
-};
-const getCardStatusFixed = (fileStatus, {
+export const getCardStatus = (fileStatus, {
   isPreviewable,
   hasPreview
 }) => {
@@ -51,10 +17,4 @@ const getCardStatusFixed = (fileStatus, {
     default:
       return 'loading';
   }
-};
-export const getCardStatus = (fileStatus, filePreviewStatus, featureFlags) => {
-  if (getMediaFeatureFlag('fetchFileStateAfterUpload', featureFlags)) {
-    return getCardStatusFixed(fileStatus, filePreviewStatus);
-  }
-  return getCardStatusBuggy(fileStatus, filePreviewStatus);
 };

package/dist/es2019/card/inlinePlayerWrapper.js

@@ -1,6 +1,6 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './styles/styles';
+import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './inlinePlayerWrapperStyles';
 export const InlinePlayerWrapper = props => {
   const {
     testId,

package/dist/es2019/card/inlinePlayerWrapperStyles.js

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
+import { getSelectionStyles, SelectionStyle, hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+
+/*
+ * Used to display the blue border around a selected card without
+ * shrinking the image OR growing the card size
+ */
+const getSelectedBorderStyle = ({
+  selected
+}) => `
+    ${hideNativeBrowserTextSelectionStyles}
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      box-sizing: border-box;
+      pointer-events: none;
+      ${borderRadius}
+      ${selected ? getSelectionStyles([SelectionStyle.Border]) : ''}
+    }
+  `;
+export const inlinePlayerClassName = 'media-card-inline-player';
+export const inlinePlayerWrapperStyles = ({
+  dimensions,
+  selected
+}) => css`
+  width: ${getDimensionsWithDefault(dimensions).width || '100%'};
+  height: ${getDimensionsWithDefault(dimensions).height || 'auto'};
+  overflow: hidden;
+  border-radius: ${borderRadius()}px;
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+
+  ${getSelectedBorderStyle(selected)}
+
+  video {
+    width: 100%;
+    height: 100%;
+  }
+`;
+inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardActionIconButtonVariant, CardActionsView } from '../../../utils/cardActions';
+import { CardActionIconButtonVariant, CardActionsView } from './cardActions';
 import { ActionsBarWrapper } from './actionsBarWrapper';
 export class ActionsBar extends React.Component {
   render() {

package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/cardActionsDropdownMenu.js

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import DropdownMenu, { DropdownItemGroup, DropdownItem } from '@atlaskit/dropdown-menu';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../analytics';
+import { createAndFireMediaCardEvent } from '../../../../utils/analytics';
 import { CardActionButton } from './cardActionButton';
 const CardActionButtonWithAnalytics = withAnalyticsEvents({
   onClick: createAndFireMediaCardEvent({

package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/cardActionsView.js

@@ -4,8 +4,8 @@ import { Component } from 'react';
 import { CardActionIconButton } from './cardActionIconButton';
 import { wrapperStyles } from './styles';
 import { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
-import { PreventClickThrough } from '../preventClickThrough';
-import { createAndFireMediaCardEvent } from '../analytics';
+import { PreventClickThrough } from '../../../../utils/preventClickThrough';
+import { createAndFireMediaCardEvent } from '../../../../utils/analytics';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 const CardActionIconButtonWithProps = props => jsx(CardActionIconButton, props);
 export class CardActionsView extends Component {

package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/styles.js

@@ -1,8 +1,16 @@
 import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
-import { rootStyles } from '../../card/styles';
-import { rgba } from '../../card/styles/mixins';
+import { rgba } from '../../styles';
+import { fontFamily } from '@atlaskit/theme/constants';
+const rootStyles = () => css`
+  box-sizing: border-box;
+  font-family: ${fontFamily()};
+
+  * {
+    box-sizing: border-box;
+  }
+`;
 export const wrapperStyles = css`
   ${rootStyles()}
   display: flex;

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { transition } from '../../styles';
+import { transition } from '../styles';
 export const actionsBarClassName = 'media-card-actions-bar';
 export const fixedActionBarStyles = `opacity: 1;`;
 export const wrapperStyles = isFixed => css`

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { transition } from '../../styles';
+import { transition } from '../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export const blanketClassName = 'media-card-blanket';
 export const fixedBlanketStyles = `background-color: ${`var(--ds-blanket, ${N90A})`};`;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
-import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
+import { resizeModeToMediaImageProps } from './resizeModeToMediaImageProps';
 export const ImageRenderer = ({
   cardPreview,
   alt,

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
-import { rgba } from '../../styles/mixins';
+import { rgba } from '../styles';
 import { N0 } from '@atlaskit/theme/colors';
 import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 const height = 3;

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

@@ -74,4 +74,13 @@ export const cardImageContainerStyles = css`
   max-height: 100%;
   overflow: hidden;
   ${borderRadius}
-`;
+`;
+const defaultTransitionDuration = '.3s';
+export const transition = (propertyName = 'all') => `
+  transition: ${propertyName} ${defaultTransitionDuration};
+`;
+const hexToRgb = hex => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}` : null;
+};
+export const rgba = (hex, opacity) => `rgba(${hexToRgb(hex)}, ${opacity})`;

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { transition } from '../../styles';
+import { transition } from '../styles';
 import { B200, N0, N100 } from '@atlaskit/theme/colors';
 export const tickBoxClassName = 'media-card-tickbox';
 export const tickboxFixedStyles = `

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
-import { rgba } from '../../styles/mixins';
+import { rgba } from '../styles';
 import { themed } from '@atlaskit/theme/components';
 const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
   const setting = responsiveSettings[breakpoint];

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

@@ -0,0 +1 @@
+export { Wrapper } from './wrapper';

package/dist/es2019/card/ui/{newFileExperience → wrapper}/styles.js

@@ -4,12 +4,12 @@ import { borderRadius } from '@atlaskit/media-ui';
 import { N20 } from '@atlaskit/theme/colors';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
 import { themed } from '@atlaskit/theme/components';
-import { transition } from '../../styles';
+import { transition } from '../styles';
 import { fixedBlanketStyles, blanketClassName } from '../blanket/styles';
 import { fixedActionBarStyles, actionsBarClassName } from '../actionsBar/styles';
 import { generateResponsiveStyles, getClickablePlayButtonStyles, getCursorStyle, getSelectableTickBoxStyles, getWrapperDimensions, getWrapperShadow } from '../styles';
 const BACKGROUND_COLOR_DARK = '#22272C';
-export const newFileExperienceWrapperStyles = ({
+export const wrapperStyles = ({
   breakpoint,
   dimensions,
   appearance,
@@ -55,4 +55,4 @@ export const newFileExperienceWrapperStyles = ({
   /* Tooltip does not support percentage dimensions. We enforce them here */
   ${shouldDisplayTooltip && `> div { width: 100%; height: 100%; }`}
 `;
-newFileExperienceWrapperStyles.displayName = 'NewFileExperienceWrapper';
+wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/es2019/card/ui/{newFileExperience/newFileExperienceWrapper.js → wrapper/wrapper.js}

@@ -1,9 +1,9 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
-import { newFileExperienceWrapperStyles } from './styles';
+import { wrapperStyles } from './styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-export const NewFileExperienceWrapper = props => {
+export const Wrapper = props => {
   const {
     testId,
     dimensions,
@@ -25,7 +25,7 @@ export const NewFileExperienceWrapper = props => {
     id: "newFileExperienceWrapper",
     className: newFileExperienceClassName,
     "data-testid": testId,
-    css: newFileExperienceWrapperStyles({
+    css: wrapperStyles({
       breakpoint,
       dimensions,
       appearance,

package/dist/es2019/classnames.js

@@ -2,4 +2,4 @@
  * Entry Point: @atlaskit/media-card/classnames
  * tsconfig.entry-points.json
  */
-export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './card/cardImageView/classnames';
+export { fileCardImageViewSelector } from './card/classnames';

package/dist/es2019/index.js

@@ -8,6 +8,6 @@ export { MediaInlineCard } from './inline';
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
-export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './card/cardImageView/classnames';
-export { inlinePlayerClassName } from './card/styles/styles';
+export { fileCardImageViewSelector } from './card/classnames';
+export { inlinePlayerClassName } from './card/inlinePlayerWrapperStyles';
 export { newFileExperienceClassName } from './card/cardConstants';

package/dist/es2019/inline/loader.js

@@ -1,23 +1,24 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 export default class MediaInlineCardLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "isMounted", false);
+    _defineProperty(this, "mounted", false);
     _defineProperty(this, "state", {
       MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
       ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
     });
   }
   async componentDidMount() {
-    this.isMounted = true;
+    this.mounted = true;
     if (!this.state.MediaInlineCard) {
       try {
         const [mediaClient, cardModule, mediaInlineErrorBoundaryModule] = await Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client" */'@atlaskit/media-client'), import( /* webpackChunkName: "@atlaskit-internal_inline-media-card" */'./mediaInlineCard'), import( /* webpackChunkName: "@atlaskit-internal_media-inline-error-boundary" */'./mediaInlineAnalyticsErrorBoundary')]);
         MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
         MediaInlineCardLoader.ErrorBoundary = mediaInlineErrorBoundaryModule.default;
-        if (this.isMounted) {
+        if (this.mounted) {
           this.setState({
             MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
             ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -27,21 +28,29 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     }
   }
   async componentWillUnmount() {
-    this.isMounted = false;
+    this.mounted = false;
   }
   render() {
     const {
       MediaInlineCard,
       ErrorBoundary
     } = this.state;
+    const analyticsContext = {
+      packageVersion: "@atlaskit/media-card",
+      packageName: "76.0.0",
+      componentName: 'mediaInlineCard',
+      component: 'mediaInlineCard'
+    };
     if (!MediaInlineCard || !ErrorBoundary) {
       return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
         message: ""
       });
     }
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      data: analyticsContext
+    }, /*#__PURE__*/React.createElement(ErrorBoundary, {
       isSelected: this.props.isSelected
-    }, /*#__PURE__*/React.createElement(MediaInlineCard, this.props));
+    }, /*#__PURE__*/React.createElement(MediaInlineCard, this.props)));
   }
 }
 _defineProperty(MediaInlineCardLoader, "displayName", 'MediaInlineCardLoader');

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, R300, N30A, N900 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
@@ -106,12 +105,5 @@ class WrappedMediaInlineAnalyticsErrorBoundary extends React.Component {
   }
 }
 _defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
-const packageName = "@atlaskit/media-card";
-const packageVersion = "75.0.0";
-const MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
-  packageVersion,
-  packageName,
-  componentName: 'mediaInlineCard',
-  component: 'mediaInlineCard'
-})(withAnalyticsEvents()(WrappedMediaInlineAnalyticsErrorBoundary));
+const MediaInlineAnalyticsErrorBoundary = withAnalyticsEvents()(WrappedMediaInlineAnalyticsErrorBoundary);
 export default MediaInlineAnalyticsErrorBoundary;