@atlaskit/media-card 72.1.0 → 73.2.0

package/dist/es2019/root/cardView.js

@@ -30,6 +30,7 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
+import { MediaCardCursor } from '../types';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -45,32 +46,38 @@ export class CardViewBase extends React.Component {
 
     _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(this, "onImageLoad", () => {
+    _defineProperty(this, "onImageLoad", prevCardPreview => {
       const {
-        onImageLoad
-      } = this.props; // We render the icon & icon message always, even if there is dataURI available.
+        onImageLoad,
+        cardPreview
+      } = this.props;
+
+      if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+        return;
+      } // We render the icon & icon message always, even if there is cardPreview available.
       // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
       // the root card decides to chage status to error.
       // If the image renders successfully, we switch this variable to hide the icon & icon message
       // behind the thumbnail in case the image has transparency.
-      // It is less likely that root component replaces a suceeded dataURI for a failed one
+      // It is less likely that root component replaces a suceeded cardPreview for a failed one
       // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
       // for a smoother transition
 
+
       this.setState({
         didImageRender: true
       });
-      onImageLoad && onImageLoad();
+      onImageLoad && onImageLoad(cardPreview);
     });
 
-    _defineProperty(this, "onImageError", () => {
+    _defineProperty(this, "onImageError", cardPreview => {
       const {
         onImageError
       } = this.props;
       this.setState({
         didImageRender: false
       });
-      onImageError && onImageError();
+      onImageError && onImageError(cardPreview);
     });
 
     _defineProperty(this, "saveElementWidth", () => {
@@ -106,13 +113,13 @@ export class CardViewBase extends React.Component {
         selected,
         selectable,
         disableOverlay,
-        dataURI
+        cardPreview,
+        mediaCardCursor
       } = this.props;
       const {
         name
       } = metadata || {};
-      const shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      const shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
+      const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
       const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
@@ -126,7 +133,7 @@ export class CardViewBase extends React.Component {
         onMouseEnter: onMouseEnter,
         innerRef: this.divRef,
         breakpoint: this.breakpoint,
-        shouldUsePointerCursor: shouldUsePointerCursor,
+        mediaCardCursor: mediaCardCursor,
         disableOverlay: !!disableOverlay,
         selected: !!selected,
         displayBackground: shouldDisplayBackground,
@@ -142,21 +149,24 @@ export class CardViewBase extends React.Component {
 
     _defineProperty(this, "renderFile", () => {
       const {
+        cardPreview,
         status,
         mediaItemType,
         metadata,
-        dataURI,
         progress,
         resizeMode,
         dimensions,
         selectable,
         selected,
         disableOverlay,
-        previewOrientation,
         alt,
         onDisplayImage,
         actions
       } = this.props;
+      const {
+        dataURI,
+        orientation
+      } = cardPreview || {};
       const {
         name,
         mediaType,
@@ -183,16 +193,17 @@ export class CardViewBase extends React.Component {
         onDisplayImage: onDisplayImage,
         actions: actionsWithDetails,
         disableOverlay: disableOverlay,
-        previewOrientation: previewOrientation,
+        previewOrientation: orientation,
         alt: alt,
         onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageError: this.onImageError,
+        cardPreview: cardPreview
       });
     });
 
     _defineProperty(this, "getRenderConfigByStatus", () => {
       const {
-        dataURI,
+        cardPreview,
         status,
         metadata,
         disableOverlay,
@@ -210,8 +221,8 @@ export class CardViewBase extends React.Component {
       const isZeroSize = !!(metadata && metadata.size === 0);
       const defaultConfig = {
         renderTypeIcon: !didImageRender,
-        renderImageRenderer: !!dataURI,
-        renderPlayButton: !!dataURI && mediaType === 'video',
+        renderImageRenderer: !!cardPreview,
+        renderPlayButton: !!cardPreview && mediaType === 'video',
         renderBlanket: !disableOverlay,
         renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
@@ -330,16 +341,16 @@ export class CardViewBase extends React.Component {
   }
 
   componentDidUpdate({
-    dataURI: prevDataURI
+    cardPreview: prevCardPreview
   }) {
     const {
-      dataURI
+      cardPreview
     } = this.props; // We should only switch didImageRender to false
-    // when dataURI goes undefined, not when it is updated.
+    // when cardPreview goes undefined, not when it is updated.
     // as this method could be triggered after onImageLoad callback,
     // falling on a race condition
 
-    prevDataURI && !dataURI && this.setState({
+    !!prevCardPreview && !cardPreview && this.setState({
       didImageRender: false
     });
   }
@@ -413,13 +424,13 @@ export class CardViewBase extends React.Component {
   shouldRenderPlayButton() {
     const {
       metadata,
-      dataURI
+      cardPreview
     } = this.props;
     const {
       mediaType
     } = metadata || {};
 
-    if (mediaType !== 'video' || !dataURI) {
+    if (mediaType !== 'video' || !cardPreview) {
       return false;
     }
 
@@ -480,21 +491,19 @@ export class CardViewBase extends React.Component {
 
   renderImageRenderer() {
     const {
-      dataURI,
+      cardPreview,
       metadata: {
         mediaType = 'unknown'
       } = {},
-      previewOrientation,
       alt,
       resizeMode,
       onDisplayImage,
       nativeLazyLoad,
       forceSyncDisplay
     } = this.props;
-    return !!dataURI && /*#__PURE__*/React.createElement(ImageRenderer, {
-      dataURI: dataURI,
+    return !!cardPreview && /*#__PURE__*/React.createElement(ImageRenderer, {
+      cardPreview: cardPreview,
       mediaType: mediaType,
-      previewOrientation: previewOrientation,
       alt: alt,
       resizeMode: resizeMode,
       onDisplayImage: onDisplayImage,
@@ -554,7 +563,8 @@ export class CardViewBase extends React.Component {
 }
 
 _defineProperty(CardViewBase, "defaultProps", {
-  appearance: 'auto'
+  appearance: 'auto',
+  mediaCardCursor: MediaCardCursor.NoAction
 });
 
 export const CardView = withAnalyticsEvents({

package/dist/es2019/root/inline/loader.js

@@ -5,6 +5,8 @@ export default class MediaInlineCardLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "isMounted", false);
+
     _defineProperty(this, "state", {
       MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
       ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -12,6 +14,8 @@ export default class MediaInlineCardLoader extends React.PureComponent {
   }
 
   async componentDidMount() {
+    this.isMounted = true;
+
     if (!this.state.MediaInlineCard) {
       try {
         const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
@@ -23,14 +27,21 @@ export default class MediaInlineCardLoader extends React.PureComponent {
         '../media-card-analytics-error-boundary')]);
         MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
         MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
-          ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
-        });
+
+        if (this.isMounted) {
+          this.setState({
+            MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+            ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
+          });
+        }
       } catch (error) {}
     }
   }
 
+  async componentWillUnmount() {
+    this.isMounted = false;
+  }
+
   render() {
     const {
       MediaInlineCard,

package/dist/es2019/root/inline/mediaInlineCard.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl';
+import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
 import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
@@ -49,29 +49,42 @@ export const MediaInlineCardInternal = ({
     return null;
   };
 
+  const renderContent = children => {
+    return intl ? children : /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  };
+
+  const defaultIntl = createIntl({
+    locale: 'en'
+  });
   useEffect(() => {
-    mediaClient.file.getFileState(identifier.id, {
+    const subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
     }).subscribe({
       next: fileState => {
         setFileState(fileState);
+        setIsErrored(false);
       },
       error: () => {
         setIsErrored(true);
       }
     });
+    return () => {
+      subscription.unsubscribe();
+    };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
 
   if (!fileState) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: intl.formatMessage(messages.loading_file),
+      message: (intl || defaultIntl).formatMessage(messages.loading_file),
       isSelected: isSelected
     });
   }
 
   if (isErrored) {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file),
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
@@ -85,7 +98,7 @@ export const MediaInlineCardInternal = ({
 
   if (fileState.status === 'failed-processing') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file),
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
@@ -118,7 +131,7 @@ export const MediaInlineCardInternal = ({
     formattedDate = formatDate(fileState.createdAt, locale);
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return renderContent( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     position: "bottom",
     content: formattedDate,
     tag: "span"
@@ -127,6 +140,8 @@ export const MediaInlineCardInternal = ({
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  })), mediaViewer);
+  })), mediaViewer));
 };
-export const MediaInlineCard = injectIntl(MediaInlineCardInternal);
+export const MediaInlineCard = injectIntl(MediaInlineCardInternal, {
+  enforceContext: false
+});

package/dist/es2019/root/inlinePlayer.js

@@ -7,6 +7,10 @@ import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
+import { ProgressBar } from './ui/progressBar/progressBar';
+import { calcBreakpointSize } from './ui/styled';
+import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
+import { getElementDimension } from '../utils/getElementDimension';
 export const inlinePlayerClassName = 'media-card-inline-player';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
@@ -29,6 +33,8 @@ export class InlinePlayerBase extends Component {
 
     _defineProperty(this, "state", {});
 
+    _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "setFileSrc", fileSrc => {
       this.setState({
         fileSrc
@@ -93,9 +99,31 @@ export class InlinePlayerBase extends Component {
         viewingLevel: 'full'
       });
     });
+
+    _defineProperty(this, "saveElementWidth", () => {
+      const {
+        dimensions
+      } = this.props;
+
+      if (!dimensions) {
+        return;
+      }
+
+      const {
+        width
+      } = dimensions;
+
+      if (width && isValidPercentageUnit(width) && !!this.divRef.current) {
+        const elementWidth = getElementDimension(this.divRef.current, 'width');
+        this.setState({
+          elementWidth
+        });
+      }
+    });
   }
 
   componentDidMount() {
+    this.saveElementWidth();
     const {
       mediaClient,
       identifier
@@ -110,6 +138,17 @@ export class InlinePlayerBase extends Component {
       collectionName
     }).subscribe({
       next: async fileState => {
+        if (fileState.status === 'uploading') {
+          this.setState({
+            isUploading: true,
+            progress: fileState.progress
+          });
+        } else {
+          this.setState({
+            isUploading: false
+          });
+        }
+
         const {
           fileSrc: existingFileSrc
         } = this.state; // we want to reuse the existing fileSrc to prevent re renders
@@ -163,6 +202,11 @@ export class InlinePlayerBase extends Component {
     this.revoke();
   }
 
+  get breakpoint() {
+    const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
+    return calcBreakpointSize(parseInt(`${width}`, 10));
+  }
+
   render() {
     const {
       onClick,
@@ -171,10 +215,14 @@ export class InlinePlayerBase extends Component {
       selected,
       testId,
       identifier,
-      forwardRef
+      forwardRef,
+      autoplay,
+      cardPreview
     } = this.props;
     const {
-      fileSrc
+      fileSrc,
+      isUploading,
+      progress
     } = this.state;
 
     if (!fileSrc) {
@@ -195,7 +243,7 @@ export class InlinePlayerBase extends Component {
       type: "video",
       src: fileSrc,
       fileId: identifier.id,
-      isAutoPlay: true,
+      isAutoPlay: autoplay,
       isHDAvailable: false,
       onDownloadClick: this.onDownloadClick,
       onFirstPlay: this.onFirstPlay,
@@ -203,8 +251,14 @@ export class InlinePlayerBase extends Component {
         contentId: identifier.id
       },
       originalDimensions: originalDimensions,
-      showControls: checkMouseMovement
-    })));
+      showControls: checkMouseMovement,
+      poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI
+    })), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: progress,
+      breakpoint: this.breakpoint,
+      positionBottom: true,
+      showOnTop: true
+    }) : null);
   }
 
 }

package/dist/es2019/root/styled.js

@@ -42,4 +42,5 @@ export const InlinePlayerWrapper = styled.div`
     height: 100%;
   }
 `;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+export const FormattedMessageWrapper = styled.span``;

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

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { IconMessageWrapper } from './styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export const IconMessage = ({
   messageDescriptor,
   animated = false,
@@ -11,7 +12,7 @@ export const IconMessage = ({
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor));
+  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export const CreatingPreview = ({
   disableAnimation

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

@@ -3,8 +3,7 @@ import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
 import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
 export const ImageRenderer = ({
-  dataURI,
-  previewOrientation,
+  cardPreview,
   alt,
   resizeMode,
   onImageLoad,
@@ -20,12 +19,21 @@ export const ImageRenderer = ({
       onDisplayImage();
     }
   }, [mediaType, onDisplayImage]);
+
+  const onLoad = () => {
+    onImageLoad && onImageLoad(cardPreview);
+  };
+
+  const onError = () => {
+    onImageError && onImageError(cardPreview);
+  };
+
   return /*#__PURE__*/React.createElement(MediaImage, _extends({
-    dataURI: dataURI,
+    dataURI: cardPreview.dataURI,
     alt: alt,
-    previewOrientation: previewOrientation,
-    onImageLoad: onImageLoad,
-    onImageError: onImageError,
+    previewOrientation: cardPreview.orientation,
+    onImageLoad: onLoad,
+    onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     forceSyncDisplay: forceSyncDisplay
   }, resizeModeToMediaImageProps(resizeMode)));

package/dist/es2019/root/ui/loadingRateLimited/loadingRateLimited.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { errorIcon } from '@atlaskit/media-ui/errorIcon';
 import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
+import { FormattedMessageWrapper } from '../../styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { Breakpoint } from '../common';
 export const LoadingRateLimited = ({
   breakpoint = Breakpoint.SMALL,
@@ -11,5 +12,5 @@ export const LoadingRateLimited = ({
   return /*#__PURE__*/React.createElement(LoadingRateLimitedContainer, null, /*#__PURE__*/React.createElement(WarningIconWrapper, null, errorIcon), /*#__PURE__*/React.createElement(LoadingRateLimitedTextWrapper, {
     breakpoint: breakpoint,
     positionBottom: positionBottom
-  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file)), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429))));
+  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file))), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429)))));
 };

package/dist/es2019/root/ui/loadingRateLimited/styled.js

@@ -31,7 +31,7 @@ export const LoadingRateLimitedTextWrapper = styled.div`
     display: block;
     width:100%;
     text-align:center;
-    ${generateResponsiveStyles(breakpoint, positionBottom, 1)}
+    ${generateResponsiveStyles(breakpoint, positionBottom, false, 1)}
   `}
 `;
 LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';

package/dist/es2019/root/ui/progressBar/progressBar.js

@@ -4,12 +4,14 @@ import { Breakpoint } from '../common';
 export const ProgressBar = ({
   progress,
   breakpoint = Breakpoint.SMALL,
-  positionBottom = false
+  positionBottom = false,
+  showOnTop = false
 }) => {
   const normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/React.createElement(StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };

package/dist/es2019/root/ui/progressBar/styled.js

@@ -15,19 +15,20 @@ const smallSizeSettings = {
 const largeSizeSettings = {
   marginBottom: 12
 };
-export function generateResponsiveStyles(breakpoint, positionBottom, multiplier = 1) {
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
   const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
   const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
   return `
-    bottom: ${marginBottom}px
+    ${showOnTop ? 'top' : 'bottom'}: ${marginBottom}px
   `;
 }
 export const StyledBar = styled.div`
   ${({
   progress,
   breakpoint,
-  positionBottom
+  positionBottom,
+  showOnTop
 }) => `
     ${borderRadius}
     overflow: hidden;
@@ -37,6 +38,7 @@ export const StyledBar = styled.div`
     background-color: ${rgba(N0, 0.8)};
     height: ${height + padding * 2}px;
     padding: ${padding}px;
+    box-sizing: border-box;
 
     ::before {
       content: '';
@@ -47,7 +49,7 @@ export const StyledBar = styled.div`
       display: block;
     }
 
-    ${generateResponsiveStyles(breakpoint, positionBottom)}
+    ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 `}
 `;
 StyledBar.displayName = 'StyledProgressBar';

package/dist/es2019/root/ui/styled.js

@@ -52,7 +52,7 @@ const getWrapperShadow = (disableOverlay, selected) => {
   return shadow ? `box-shadow: ${shadow};` : '';
 };
 
-const getCursorStyle = shouldUsePointerCursor => `cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};`;
+const getCursorStyle = cursor => `cursor: ${cursor};`;
 
 const getClickablePlayButtonStyles = isPlayButtonClickable => {
   if (!isPlayButtonClickable) {
@@ -83,13 +83,13 @@ export const NewFileExperienceWrapper = styled.div`
   breakpoint,
   dimensions,
   appearance,
-  shouldUsePointerCursor,
   disableOverlay,
   displayBackground,
   selected,
   isPlayButtonClickable,
   isTickBoxSelectable,
-  shouldDisplayTooltip
+  shouldDisplayTooltip,
+  mediaCardCursor
 }) => `
     ${transition()}
     box-sizing: border-box;
@@ -101,7 +101,7 @@ export const NewFileExperienceWrapper = styled.div`
     ${getWrapperDimensions(dimensions, appearance)}
     ${displayBackground ? `background-color: ${N20};` : ''}
     ${borderRadius}
-    ${getCursorStyle(shouldUsePointerCursor)}
+    ${getCursorStyle(mediaCardCursor)}
     ${getWrapperShadow(disableOverlay, selected)}
     ${generateResponsiveStyles(breakpoint)}
     ${hideNativeBrowserTextSelectionStyles}
@@ -118,7 +118,7 @@ export const NewFileExperienceWrapper = styled.div`
     }
 
     /* Tooltip does not support percentage dimensions. We enforce them here */
-    ${shouldDisplayTooltip ? `> div { ${getWrapperDimensions(dimensions, appearance)} }` : ''}
+    ${shouldDisplayTooltip ? `> div { width: 100%; height: 100% }` : ''}
 `}
 `;
 NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';

package/dist/es2019/root/ui/titleBox/failedTitleBox.js

@@ -3,7 +3,8 @@ import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export const FailedTitleBox = ({
   breakpoint,
   customMessage = messages.failed_to_load
@@ -14,5 +15,5 @@ export const FailedTitleBox = ({
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
+  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

package/dist/es2019/root/ui/titleBox/titleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { TitleBoxWrapper, TitleBoxHeader, TitleBoxFooter, TitleBoxIcon } from './styled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';