@atlaskit/media-card 72.1.0 → 73.0.0

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
@@ -63,6 +63,15 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     return null;
   };
 
+  var renderContent = function renderContent(children) {
+    return intl ? children : /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  };
+
+  var defaultIntl = createIntl({
+    locale: 'en'
+  });
   useEffect(function () {
     mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
@@ -78,14 +87,14 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
 
   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
     });
   }
@@ -99,7 +108,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
 
   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
     });
   }
@@ -131,7 +140,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     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"
@@ -140,6 +149,8 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  })), mediaViewer);
+  })), mediaViewer));
 };
-export var MediaInlineCard = injectIntl(MediaInlineCardInternal);
+export var MediaInlineCard = injectIntl(MediaInlineCardInternal, {
+  enforceContext: false
+});

package/dist/esm/root/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -32,4 +32,5 @@ export var InlinePlayerWrapper = styled.div(_templateObject2 || (_templateObject
 }, function (props) {
   return getDimensionsWithDefault(props.dimensions).height || 'auto';
 }, borderRadius(), getSelectedBorderStyle);
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+export var FormattedMessageWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));

package/dist/esm/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 var IconMessage = function IconMessage(_ref) {
   var messageDescriptor = _ref.messageDescriptor,
       _ref$animated = _ref.animated,
@@ -12,7 +13,7 @@ export var IconMessage = function IconMessage(_ref) {
   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 var CreatingPreview = function CreatingPreview(_ref2) {
   var disableAnimation = _ref2.disableAnimation;

package/dist/esm/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 var LoadingRateLimited = function LoadingRateLimited(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -12,5 +13,5 @@ export var LoadingRateLimited = function LoadingRateLimited(_ref) {
   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/esm/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 var FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
       _ref$customMessage = _ref.customMessage,
@@ -14,5 +15,5 @@ export var FailedTitleBox = function FailedTitleBox(_ref) {
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
+  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

package/dist/esm/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';

package/dist/esm/utils/getErrorMessage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 export var getErrorMessage = function getErrorMessage(status) {
   return status === 'error' && /*#__PURE__*/React.createElement(FormattedMessage, messages.failed_to_load);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "72.1.0",
+	"version": "73.0.0",
 	"sideEffects": false
 }

package/dist/types/root/card/cardLoader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { WithMediaClientConfigProps } from '@atlaskit/media-client';
-import type { CardWithAnalyticsEventsProps } from '.';
-export declare type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardWithAnalyticsEventsProps>;
+import type { CardBaseProps } from '.';
+export declare type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardBaseProps>;
 declare const CardLoader: React.FC<CardWithMediaClientConfigProps>;
 export default CardLoader;

package/dist/types/root/card/index.d.ts

@@ -1,19 +1,16 @@
-/// <reference types="react-intl" />
 import React, { Component } from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { FileIdentifier } from '@atlaskit/media-client';
 import { Subscription } from 'rxjs/Subscription';
+import { WrappedComponentProps } from 'react-intl-next';
 import { CardAction, CardProps, CardState } from '../..';
-export declare type CardWithAnalyticsEventsProps = CardProps & WithAnalyticsEventsProps;
-export declare class CardBase extends Component<CardWithAnalyticsEventsProps, CardState> {
+export declare type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<WrappedComponentProps>;
+export declare class CardBase extends Component<CardBaseProps, CardState> {
     private hasBeenMounted;
     private timeElapsedTillCommenced;
     subscription?: Subscription;
     static defaultProps: Partial<CardProps>;
-    static contextTypes: {
-        intl: ReactIntl.IntlShape;
-    };
-    constructor(props: CardWithAnalyticsEventsProps);
+    constructor(props: CardBaseProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: CardProps, prevState: CardState): void;
     componentWillUnmount(): void;
@@ -52,4 +49,4 @@ export declare class CardBase extends Component<CardWithAnalyticsEventsProps, Ca
     onClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent | undefined) => void;
     onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
-export declare const Card: React.ComponentType<CardWithAnalyticsEventsProps>;
+export declare const Card: React.ComponentType<CardBaseProps>;

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

@@ -1,9 +1,9 @@
 import React, { MouseEvent } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { MediaItemType, FileDetails } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SharedCardProps, CardStatus } from '../index';
 import { MediaCardError } from '../errors';
+import { MessageDescriptor } from 'react-intl-next';
 export interface CardViewOwnProps extends SharedCardProps {
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
@@ -39,7 +39,7 @@ export interface RenderConfigByStatus {
     renderSpinner?: boolean;
     renderFailedTitleBox?: boolean;
     renderTickBox?: boolean;
-    customTitleMessage?: FormattedMessage.MessageDescriptor;
+    customTitleMessage?: MessageDescriptor;
 }
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply

package/dist/types/root/inline/mediaInlineCard.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { FileIdentifier, MediaClient } from '@atlaskit/media-client';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 import { MediaViewerDataSource } from '@atlaskit/media-viewer';
 export interface MediaInlineCardProps {
     identifier: FileIdentifier;
@@ -10,7 +10,5 @@ export interface MediaInlineCardProps {
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     mediaViewerDataSource?: MediaViewerDataSource;
 }
-export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & InjectedIntlProps>;
-export declare const MediaInlineCard: React.ComponentClass<MediaInlineCardProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<MediaInlineCardProps & InjectedIntlProps>;
-};
+export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & WrappedComponentProps>;
+export declare const MediaInlineCard: React.FC<MediaInlineCardProps>;

package/dist/types/root/styled.d.ts

@@ -12,4 +12,5 @@ declare type InlinePlayerWrapper = {
     selected?: boolean;
 };
 export declare const InlinePlayerWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & InlinePlayerWrapper, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & InlinePlayerWrapper>;
+export declare const FormattedMessageWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { MessageDescriptor } from 'react-intl-next';
 export declare type InternalIconMessageProps = {
-    messageDescriptor: FormattedMessage.MessageDescriptor;
+    messageDescriptor: MessageDescriptor;
     animated?: boolean;
     reducedFont?: boolean;
 };

package/dist/types/root/ui/loadingRateLimited/loadingRateLimited.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Breakpoint } from '../common';
 export declare const LoadingRateLimited: ({ breakpoint, positionBottom, }: {
     breakpoint?: Breakpoint | undefined;

package/dist/types/root/ui/playButton/playButton.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlayButton: () => JSX.Element;

package/dist/types/root/ui/progressBar/progressBar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Breakpoint } from '../common';
 export declare type ProgressBarProps = {
     progress?: number;

package/dist/types/root/ui/tickBox/tickBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TickBoxProps = {
     selected?: boolean;
 };

package/dist/types/root/ui/titleBox/failedTitleBox.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Breakpoint } from '../common';
-import { FormattedMessage } from 'react-intl';
+import { MessageDescriptor } from 'react-intl-next';
 export declare type OnRetryFunction = () => void;
 export declare type FailedTitleBoxProps = {
     breakpoint: Breakpoint;
-    customMessage?: FormattedMessage.MessageDescriptor;
+    customMessage?: MessageDescriptor;
 };
 export declare const FailedTitleBox: React.FC<FailedTitleBoxProps>;

package/dist/types/root/ui/titleBox/titleBox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react-intl" />
 import React from 'react';
 import { TitleBoxIcon as TitleBoxIconType } from '../../../index';
 import { Breakpoint } from '../common';
@@ -12,13 +11,6 @@ export declare type TitleBoxProps = {
 declare type FormattedDateProps = {
     timestamp: number;
 };
-declare type WithIntlProps = {
-    intl?: {
-        locale?: string;
-    };
-};
-export declare const FormattedDate: React.ComponentClass<FormattedDateProps & WithIntlProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<FormattedDateProps & WithIntlProps & ReactIntl.InjectedIntlProps>;
-};
+export declare const FormattedDate: React.ComponentType<FormattedDateProps>;
 export declare const TitleBox: ({ name, createdAt, breakpoint, titleBoxBgColor, titleBoxIcon, }: TitleBoxProps) => JSX.Element;
 export {};

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const getErrorMessage: (status: string) => false | JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "72.1.0",
+  "version": "73.0.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,8 +35,8 @@
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/media-client": "^14.3.0",
     "@atlaskit/media-common": "^2.10.0",
-    "@atlaskit/media-ui": "^17.2.0",
-    "@atlaskit/media-viewer": "^45.8.0",
+    "@atlaskit/media-ui": "^18.0.0",
+    "@atlaskit/media-viewer": "^46.0.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.0.0",
     "@atlaskit/tooltip": "^17.5.0",
@@ -51,7 +51,7 @@
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
     "styled-components": "^3.2.6"
   },
@@ -62,10 +62,10 @@
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/inline-message": "^11.1.5",
+    "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-test-helpers": "^28.9.0",
+    "@atlaskit/media-test-helpers": "^29.0.0",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/range": "^5.1.0",
     "@atlaskit/select": "^15.2.1",
@@ -84,7 +84,7 @@
     "local-cypress": "^1.2.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
     "typescript": "3.9.6",
     "uuid": "^3.1.0",