@atlaskit/media-viewer 46.5.0 → 47.0.2

package/dist/esm/viewers/image/interactive-img.js

@@ -18,7 +18,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
 import Spinner from '@atlaskit/spinner';
 import { B75, B200, DN400, DN60, N0 } from '@atlaskit/theme/colors';
-import { BaselineExtend, HDIconGroupWrapper, HDIconWrapper, ImageWrapper, Img } from '../../styled';
+import { BaselineExtend, HDIconGroupWrapper, HDIconWrapper, ImageWrapper, Img } from '../../styleWrappers';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
 import { ZoomControls } from '../../zoomControls';
@@ -307,8 +307,9 @@ export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(ImageWrapper, {
         "data-testid": "media-viewer-image-content",
         onClick: this.onImageClicked,
-        innerRef: this.saveWrapperRef,
-        style: wrapperStyleOverride
+        ref: this.saveWrapperRef,
+        style: wrapperStyleOverride,
+        className: "media-viewer-image-content"
       }, /*#__PURE__*/React.createElement(Img, {
         "data-testid": "media-viewer-image",
         canDrag: canDrag,
@@ -318,7 +319,8 @@ export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
         onLoad: this.onImgLoad,
         onError: onError,
         onMouseDown: this.startDragging,
-        shouldPixelate: zoomLevel.value > 1
+        shouldPixelate: zoomLevel.value > 1,
+        className: "media-viewer-image"
       }), /*#__PURE__*/React.createElement(BaselineExtend, null), /*#__PURE__*/React.createElement(ZoomControls, {
         zoomLevel: zoomLevel,
         onChange: this.onZoomChange

package/dist/esm/viewers/video.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -7,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -17,7 +17,7 @@ import { getArtifactUrl, globalMediaEventEmitter } from '@atlaskit/media-client'
 import { CustomMediaPlayer } from '@atlaskit/media-ui';
 import { Outcome } from '../domain';
 import { MediaViewerError } from '../errors';
-import { Video, CustomVideoPlayerWrapper } from '../styled';
+import { Video, CustomVideoPlayerWrapper } from '../styleWrappers';
 import { isIE } from '../utils/isIE';
 import { BaseViewer } from './base-viewer';
 import { getObjectUrlFromFileState } from '../utils/getObjectUrlFromFileState';

package/dist/esm/zoomControls.js

@@ -15,7 +15,7 @@ import { Component } from 'react';
 import { hideControlsClassName, MediaButton } from '@atlaskit/media-ui';
 import ZoomOutIcon from '@atlaskit/icon/glyph/media-services/zoom-out';
 import ZoomInIcon from '@atlaskit/icon/glyph/media-services/zoom-in';
-import { ZoomWrapper, ZoomControlsWrapper, ZoomLevelIndicator } from './styled';
+import { ZoomWrapper, ZoomControlsWrapper, ZoomLevelIndicator } from './styleWrappers';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireAnalytics } from './analytics/';
 import { createZoomInButtonClickEvent } from './analytics/events/ui/zoomInButtonClicked';

package/dist/types/analytics/index.d.ts

@@ -2,9 +2,10 @@ import { FileState, RequestMetadata } from '@atlaskit/media-client';
 import { FileAttributes, WithFileAttributes, FailureAttributes } from '@atlaskit/media-common';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { PrimaryErrorReason } from '../errors';
-import { name as packageName, version as packageVersion } from '../version.json';
 import { MediaViewerEventPayload } from './events';
 declare const componentName = "mediaViewer";
+declare const packageName: string;
+declare const packageVersion: string;
 export { packageName, packageVersion, componentName, componentName as component, };
 export declare const relevantFlags: {
     newCardExperience: boolean;
@@ -14,6 +15,7 @@ export declare const relevantFlags: {
     mediaInline: boolean;
     folderUploads: boolean;
     mediaUploadApiV2: boolean;
+    memoryCacheLogging: boolean;
 };
 export declare const LOGGED_FEATURE_FLAGS: (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
 export declare const LOGGED_FEATURE_FLAG_KEYS: string[];

package/dist/types/styleWrappers.d.ts

@@ -0,0 +1,114 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
+import { MediaType } from '@atlaskit/media-client';
+declare type Children = {
+    children: ReactNode;
+};
+declare type ClassName = {
+    className: string;
+};
+declare type DataTestID = {
+    'data-testid'?: string | undefined;
+};
+declare type BlanketProps = DataTestID & Children & ClassName;
+export declare const Blanket: ({ "data-testid": datatestId, className, children, }: BlanketProps) => jsx.JSX.Element;
+export declare const HeaderWrapper: {
+    ({ className, children, }: ClassName & Children): jsx.JSX.Element;
+    displayName: string;
+};
+export declare const ListWrapper: {
+    ({ children }: Children): jsx.JSX.Element;
+    displayName: string;
+};
+export declare const ArrowsWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const CloseButtonWrapper: ({ className, children, }: ClassName & Children) => jsx.JSX.Element;
+declare type ContentWrapperProps = {
+    isSidebarVisible: boolean | undefined;
+} & Children;
+export declare const ContentWrapper: ({ isSidebarVisible, children, }: ContentWrapperProps) => jsx.JSX.Element;
+export declare const ZoomWrapper: ({ className, children }: ClassName & Children) => jsx.JSX.Element;
+export declare const ZoomControlsWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const ZoomLevelIndicator: ({ children }: Children) => jsx.JSX.Element;
+export declare const HDIconGroupWrapper: ({ className, children, }: ClassName & Children) => jsx.JSX.Element;
+export declare const HDIconWrapper: ({ children }: Children) => jsx.JSX.Element;
+declare type ErrorMessageWrapperProps = DataTestID & Children;
+export declare const ErrorMessageWrapper: ({ "data-testid": datatestId, children, }: ErrorMessageWrapperProps) => jsx.JSX.Element;
+declare type ErrorImageProps = {
+    alt: string | undefined;
+    src: string;
+};
+export declare const ErrorImage: ({ src, alt }: ErrorImageProps) => jsx.JSX.Element;
+declare type VideoProps = {
+    controls: boolean;
+    src: string;
+    autoPlay: boolean;
+};
+export declare const Video: ({ autoPlay, controls, src }: VideoProps) => jsx.JSX.Element;
+export declare const PDFWrapper: import("react").ForwardRefExoticComponent<DataTestID & Children & import("react").RefAttributes<unknown>>;
+export declare const Arrow: ({ className, children }: ClassName & Children) => jsx.JSX.Element;
+export declare const LeftWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const RightWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare type HeaderProps = {
+    isArchiveSideBarVisible: boolean;
+};
+export declare const Header: ({ children, isArchiveSideBarVisible, className, }: Children & HeaderProps & ClassName) => jsx.JSX.Element;
+export declare const LeftHeader: ({ children }: Children) => jsx.JSX.Element;
+export declare type ImageWrapperProps = {
+    onClick: (event: MouseEvent<HTMLDivElement>) => void;
+    style: CSSProperties;
+} & Children & DataTestID;
+export declare const ImageWrapper: import("react").ForwardRefExoticComponent<{
+    onClick: (event: MouseEvent<HTMLDivElement>) => void;
+    style: CSSProperties;
+} & Children & DataTestID & ClassName & import("react").RefAttributes<unknown>>;
+export declare const BaselineExtend: () => jsx.JSX.Element;
+export declare type ImgProps = {
+    canDrag: boolean;
+    isDragging: boolean;
+    shouldPixelate: boolean;
+    src: string;
+    style: CSSProperties;
+    onLoad: (ev: React.SyntheticEvent<HTMLImageElement>) => void;
+    onMouseDown: (ev: MouseEvent<{}>) => void;
+    onError: (() => void) | undefined;
+} & DataTestID & ClassName;
+export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, onMouseDown, className, }: ImgProps) => jsx.JSX.Element;
+export declare const MedatadataTextWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const MetadataWrapper: ({ children }: Children) => jsx.JSX.Element;
+declare type MetadataFileNameProps = DataTestID & Children;
+export declare const MetadataFileName: ({ "data-testid": datatestId, children, }: MetadataFileNameProps) => jsx.JSX.Element;
+declare type MetadataSubTextProps = DataTestID & Children;
+export declare const MetadataSubText: ({ "data-testid": datatestId, children, }: MetadataSubTextProps) => jsx.JSX.Element;
+export declare const MetadataIconWrapper: ({ children }: Children) => jsx.JSX.Element;
+export interface IconWrapperProps {
+    type: MediaType;
+}
+export declare const RightHeader: ({ children }: Children) => jsx.JSX.Element;
+export declare const CustomAudioPlayerWrapper: ({ children }: Children) => jsx.JSX.Element;
+declare type AudioPlayerProps = DataTestID & Children;
+export declare const AudioPlayer: {
+    ({ "data-testid": datatestId, children, }: AudioPlayerProps): jsx.JSX.Element;
+    displayName: string;
+};
+declare type AudioProps = {
+    autoPlay: boolean;
+    controls: boolean;
+    src: string | undefined;
+    preload: string;
+};
+export declare const Audio: import("react").ForwardRefExoticComponent<AudioProps & import("react").RefAttributes<unknown>>;
+declare type AudioCoverProps = {
+    alt: string | undefined;
+    src: string;
+};
+export declare const AudioCover: ({ src, alt }: AudioCoverProps) => jsx.JSX.Element;
+export declare const DefaultCoverWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const DownloadButtonWrapper: ({ children }: Children) => jsx.JSX.Element;
+declare type CustomVideoPlayerWrapperProps = DataTestID & Children;
+export declare const CustomVideoPlayerWrapper: ({ "data-testid": datatestId, children, }: CustomVideoPlayerWrapperProps) => jsx.JSX.Element;
+declare type SidebarWrapperProps = DataTestID & Children;
+export declare const SidebarWrapper: ({ "data-testid": datatestId, children, }: SidebarWrapperProps) => jsx.JSX.Element;
+export declare const SpinnerWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const FormattedMessageWrapper: ({ children }: Children) => jsx.JSX.Element;
+export {};

package/dist/types/styles.d.ts

@@ -0,0 +1,57 @@
+import { MediaType } from '@atlaskit/media-client';
+export declare const blanketColor = "#1B2638";
+export declare const blanketStyles: import("@emotion/react").SerializedStyles;
+export declare const headerWrapperStyles: import("@emotion/react").SerializedStyles;
+export interface ContentWrapperProps {
+    showControls: boolean;
+}
+export declare const listWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const arrowsWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const closeButtonWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const contentWrapperStyles: ({ isSidebarVisible, }: {
+    isSidebarVisible?: boolean | undefined;
+}) => import("@emotion/react").SerializedStyles;
+export declare const zoomWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const zoomControlsWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const zoomLevelIndicatorStyles: import("@emotion/react").SerializedStyles;
+export declare const hdIconGroupWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const hdIconWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const errorMessageWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const errorImageStyles: import("@emotion/react").SerializedStyles;
+export declare const videoStyles: import("@emotion/react").SerializedStyles;
+export declare const pdfWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const arrowStyles: import("@emotion/react").SerializedStyles;
+export declare const leftWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const rightWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare type HeaderProps = {
+    isArchiveSideBarVisible: boolean;
+};
+export declare const headerStyles: ({ isArchiveSideBarVisible }: HeaderProps) => import("@emotion/react").SerializedStyles;
+export declare const leftHeaderStyles: import("@emotion/react").SerializedStyles;
+export declare const imageWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const baselineExtendStyles: import("@emotion/react").SerializedStyles;
+export declare type ImgProps = {
+    cursor: string;
+    shouldPixelate: boolean;
+};
+export declare const imgStyles: ({ cursor, shouldPixelate }: ImgProps) => import("@emotion/react").SerializedStyles;
+export declare const medatadataTextWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const metadataWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const metadataFileNameStyles: import("@emotion/react").SerializedStyles;
+export declare const metadataSubTextStyles: import("@emotion/react").SerializedStyles;
+export declare const metadataIconWrapperStyles: import("@emotion/react").SerializedStyles;
+export interface IconWrapperProps {
+    type: MediaType;
+}
+export declare const rightHeaderStyles: import("@emotion/react").SerializedStyles;
+export declare const customAudioPlayerWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const audioPlayerStyles: import("@emotion/react").SerializedStyles;
+export declare const audioStyles: import("@emotion/react").SerializedStyles;
+export declare const audioCoverStyles: import("@emotion/react").SerializedStyles;
+export declare const defaultCoverWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const downloadButtonWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const customVideoPlayerWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const sidebarWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const spinnerWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const errorReasonTipStyles: import("@emotion/react").SerializedStyles;
+export declare const formattedMessageWrapperStyles: import("@emotion/react").SerializedStyles;

package/dist/types/viewers/archiveSidebar/styleWrappers.d.ts

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { ReactNode, MouseEvent, Key } from 'react';
+import { jsx } from '@emotion/react';
+declare type Children = {
+    children?: ReactNode;
+};
+declare type OnClick = {
+    onClick: (event: MouseEvent<HTMLDivElement>) => void;
+};
+export declare const ArchiveItemViewerWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const ArchiveSideBar: ({ children }: Children) => jsx.JSX.Element;
+export declare const ArchiveSidebarFolderWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const ArchiveDownloadButtonWrapper: ({ children, onClick, }: Children & OnClick) => jsx.JSX.Element;
+export declare const SidebarItemWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const ArchiveSidebarFileEntryWrapper: ({ children, index, }: {
+    index: Key;
+} & Children) => jsx.JSX.Element;
+export declare const ArchiveLayout: ({ children }: Children) => jsx.JSX.Element;
+export declare const ArchiveViewerWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const Separator: () => jsx.JSX.Element;
+export declare const SidebarHeaderWrapper: ({ children }: Children) => jsx.JSX.Element;
+export declare const SidebarHeaderIcon: ({ children }: Children) => jsx.JSX.Element;
+export declare const SidebarHeaderEntry: ({ children }: Children) => jsx.JSX.Element;
+export {};

package/dist/types/viewers/archiveSidebar/styles.d.ts

@@ -0,0 +1,23 @@
+export declare const ArchiveSideBarWidth = 300;
+export declare const archiveItemViewerWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const archiveSideBarStyles: import("@emotion/react").SerializedStyles;
+export declare const archiveSidebarFolderWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const archiveDownloadButtonWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const sidebarItemWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const archiveSidebarFileEntryWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const archiveLayoutStyles: import("@emotion/react").SerializedStyles;
+export declare const archiveViewerWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const separatorStyles: import("@emotion/react").SerializedStyles;
+export declare const sidebarHeaderWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const sidebarHeaderIconStyles: import("@emotion/react").SerializedStyles;
+export declare const sidebarHeaderEntryStyles: import("@emotion/react").SerializedStyles;
+/** TODO Replace background colors of item with theme from @atlaskit/tokens once ready*/
+export declare const itemStyle: {
+    backgroundColor: string;
+    fill: string;
+    color: string;
+    ':hover': {
+        backgroundColor: string;
+        color: string;
+    };
+};

package/dist/types/viewers/codeViewer/codeViewerRenderer.d.ts

@@ -1,8 +1,15 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactNode, Component } from 'react';
 import { FileState } from '@atlaskit/media-client';
 import { Outcome } from '../../domain';
 import type { SupportedLanguages } from '@atlaskit/code/types';
 import { MediaViewerError } from '../../errors';
+export declare const CodeViewWrapper: ({ children, "data-testid": testId, }: {
+    children: ReactNode;
+    'data-testid': string | undefined;
+}) => jsx.JSX.Element;
+export declare const CodeViewerHeaderBar: () => jsx.JSX.Element;
 export declare type Props = {
     item: FileState;
     src: string;
@@ -15,10 +22,10 @@ export declare type Props = {
 export declare type State = {
     doc: Outcome<any, MediaViewerError>;
 };
-export declare class CodeViewRenderer extends React.Component<Props, State> {
+export declare class CodeViewRenderer extends Component<Props, State> {
     state: State;
     componentDidMount(): void;
     componentWillUnmount(): void;
     private init;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

package/dist/types/viewers/codeViewer/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const codeViewWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const codeViewerHeaderBarStyles: import("@emotion/react").SerializedStyles;

package/example-helpers/MainWrapper.tsx

@@ -1,13 +1,41 @@
-import React, { ReactNode } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactNode, FC } from 'react';
 import { enableMediaUfoLogger } from '@atlaskit/media-test-helpers';
 import { payloadPublisher } from '@atlassian/ufo';
-import { Container } from './styled';
+import {
+  containerStyles,
+  groupStyles,
+  buttonListStyles,
+  mVSidebarHeaderStyles,
+  mVSidebarStyles,
+} from './styles';
 
 type Props = {
   children: ReactNode;
+  shouldApplyStyles?: Boolean;
 };
 
-export const MainWrapper: React.FC<Props> = ({ children }) => {
+export const MainWrapper: FC<Props> = ({
+  children,
+  shouldApplyStyles = true,
+}) => {
   enableMediaUfoLogger(payloadPublisher);
-  return <Container>{children}</Container>;
+  return <div css={shouldApplyStyles && containerStyles}>{children}</div>;
+};
+
+export const Group: FC<Props> = ({ children }) => {
+  return <div css={groupStyles}>{children}</div>;
+};
+
+export const ButtonList: FC<Props> = ({ children }) => {
+  return <ul css={buttonListStyles}>{children}</ul>;
+};
+
+export const MVSidebarHeader: FC<Props> = ({ children }) => {
+  return <div css={mVSidebarHeaderStyles}>{children}</div>;
+};
+
+export const MVSidebar: FC<Props> = ({ children }) => {
+  return <div css={mVSidebarStyles}>{children}</div>;
 };

package/example-helpers/{styled.ts → styles.ts}

@@ -1,21 +1,21 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
-export const Container = styled.div`
+export const containerStyles = css`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 `;
-export const Group = styled.div`
+export const groupStyles = css`
   width: 250px;
   padding: 20px;
 `;
 
-export const ButtonList = styled.ul`
+export const buttonListStyles = css`
   padding-left: 0;
   list-style: none;
 `;
 
-export const MVSidebar = styled.div`
+export const mVSidebarStyles = css`
   height: calc(100vh - 64px);
   padding: 32px;
   overflow: auto;
@@ -31,7 +31,7 @@ export const MVSidebar = styled.div`
   }
 `;
 
-export const MVSidebarHeader = styled.div`
+export const mVSidebarHeaderStyles = css`
   display: flex;
   width: 100%;
   justify-content: space-between;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "46.5.0",
+  "version": "47.0.2",
   "description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,8 +32,8 @@
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-client": "^17.0.0",
-    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/media-client": "^17.1.0",
+    "@atlaskit/media-common": "^2.16.0",
     "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/side-navigation": "^1.2.3",
     "@atlaskit/spinner": "^15.0.0",
@@ -49,14 +49,14 @@
     "unzipit": "^1.3.0"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.7.1",
     "react": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^73.8.0",
+    "@atlaskit/media-card": "^74.1.0",
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
@@ -76,7 +76,7 @@
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/report.api.md

@@ -0,0 +1,80 @@
+## API Report File for "@atlaskit/media-viewer"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { Identifier } from '@atlaskit/media-client';
+import { MediaClient } from '@atlaskit/media-client';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { WithMediaClientConfigProps } from '@atlaskit/media-client';
+
+declare interface AsyncMediaViewerState {
+  MediaViewer?: MediaViewerWithMediaClientConfigComponent;
+  MediaViewerErrorBoundary?: MediaViewerErrorBoundaryComponent;
+}
+
+export declare class MediaViewer extends React_2.PureComponent<
+  MediaViewerWithMediaClientConfigProps & AsyncMediaViewerState,
+  AsyncMediaViewerState
+> {
+  static displayName: string;
+  static MediaViewer?: MediaViewerWithMediaClientConfigComponent;
+  static MediaViewerErrorBoundary?: MediaViewerErrorBoundaryComponent;
+  state: AsyncMediaViewerState;
+  UNSAFE_componentWillMount(): Promise<void>;
+  render(): JSX.Element;
+}
+
+declare type MediaViewerAnalyticsErrorBoundaryProps = {
+  data?: {
+    [k: string]: any;
+  };
+};
+
+export declare interface MediaViewerDataSource {
+  list?: Array<Identifier>;
+  collectionName?: string;
+}
+
+declare type MediaViewerErrorBoundaryComponent = React_2.ComponentType<
+  MediaViewerAnalyticsErrorBoundaryProps
+>;
+
+export declare interface MediaViewerExtensions {
+  sidebar?: {
+    icon: ReactNode;
+    renderer: (
+      selectedIdentifier: Identifier,
+      actions: MediaViewerExtensionsActions,
+    ) => ReactNode;
+  };
+}
+
+export declare interface MediaViewerExtensionsActions {
+  close: () => void;
+}
+
+export declare interface MediaViewerProps {
+  readonly mediaClient: MediaClient;
+  readonly selectedItem: Identifier;
+  readonly dataSource: MediaViewerDataSource;
+  readonly collectionName: string;
+  readonly pageSize?: number;
+  readonly onClose?: () => void;
+  readonly featureFlags?: MediaFeatureFlags;
+  readonly extensions?: MediaViewerExtensions;
+  readonly contextId?: string;
+}
+
+declare type MediaViewerWithMediaClientConfigComponent = React_2.ComponentType<
+  MediaViewerWithMediaClientConfigProps
+>;
+
+declare type MediaViewerWithMediaClientConfigProps = WithMediaClientConfigProps<
+  MediaViewerProps
+>;
+
+export {};
+```