@atlaskit/media-viewer 48.1.7 → 48.2.0

package/dist/esm/v2/item-viewer-v2.js

@@ -0,0 +1,302 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import Loadable from 'react-loadable';
+import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-client';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
+import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
+import { useFileState, useMediaClient, MediaFileStateError } from '@atlaskit/media-client-react';
+import { Outcome } from '../domain';
+import { Spinner } from '../loading';
+import ErrorMessage from '../errorMessage';
+import { MediaViewerError } from '../errors';
+import { ErrorViewDownloadButton } from '../download';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createCommencedEvent } from '../analytics/events/operational/commenced';
+import { createLoadSucceededEvent } from '../analytics/events/operational/loadSucceeded';
+import { fireAnalytics, getFileAttributes } from '../analytics';
+import { InteractiveImg } from '../viewers/image/interactive-img';
+import ArchiveViewerLoader from '../viewers/archiveSidebar/archiveViewerLoader';
+import { getRandomHex } from '@atlaskit/media-common';
+import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from '../analytics/ufoExperiences';
+var ImageViewer = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'../viewers/image').then(function (mod) {
+      return mod.ImageViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var VideoViewer = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'../viewers/video').then(function (mod) {
+      return mod.VideoViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var AudioViewer = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'../viewers/audio').then(function (mod) {
+      return mod.AudioViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var DocViewer = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'../viewers/doc').then(function (mod) {
+      return mod.DocViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var CodeViewer = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'../viewers/codeViewer').then(function (mod) {
+      return mod.CodeViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+// Consts
+export var isExternalImageItem = function isExternalImageItem(fileItem) {
+  return fileItem === 'external-image';
+};
+export var isFileStateItem = function isFileStateItem(fileItem) {
+  return !isExternalImageItem(fileItem);
+};
+export var MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = 10 * 1024 * 1024;
+export var ItemViewerV2Base = function ItemViewerV2Base(_ref) {
+  var identifier = _ref.identifier,
+    showControls = _ref.showControls,
+    onClose = _ref.onClose,
+    previewCount = _ref.previewCount,
+    contextId = _ref.contextId,
+    createAnalyticsEvent = _ref.createAnalyticsEvent;
+  // States and Refs
+  var _useState = useState(Outcome.pending()),
+    _useState2 = _slicedToArray(_useState, 2),
+    item = _useState2[0],
+    setItem = _useState2[1];
+  var traceContext = useRef({
+    traceId: getRandomHex(8)
+  });
+  var fileStateFlagsRef = useRef({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+  var createAnalyticsEventRef = useRef(createAnalyticsEvent);
+  createAnalyticsEventRef.current = createAnalyticsEvent;
+
+  // Hooks
+  var mediaClient = useMediaClient();
+  var _useFileState = useFileState(isExternalImageIdentifier(identifier) ? '' : identifier.id, {
+      collectionName: isExternalImageIdentifier(identifier) ? '' : identifier.collectionName,
+      skipRemote: isExternalImageIdentifier(identifier)
+    }),
+    fileState = _useFileState.fileState;
+  var renderDownloadButton = useCallback(function (fileState, error) {
+    var collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
+    return /*#__PURE__*/React.createElement(ErrorViewDownloadButton, {
+      fileState: fileState,
+      mediaClient: mediaClient,
+      error: error,
+      collectionName: collectionName
+    });
+  }, [mediaClient, identifier]);
+
+  // Did mount
+
+  useEffect(function () {
+    if (isExternalImageIdentifier(identifier)) {
+      // external images do not need to talk to our backend,
+      // so therefore no need for media-client subscriptions.
+      // just set a successful outcome of type "external-image".
+      setItem(Outcome.successful('external-image'));
+      return;
+    }
+    fireAnalytics(createCommencedEvent(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext.current), createAnalyticsEventRef.current);
+    startMediaFileUfoExperience();
+
+    // File Subscription
+
+    if (fileState) {
+      var status = fileState.status;
+      if (fileState.status !== 'error') {
+        // updateFileStateFlag
+
+        if (status === 'processing') {
+          fileStateFlagsRef.current.wasStatusProcessing = true;
+        } else if (status === 'uploading') {
+          fileStateFlagsRef.current.wasStatusUploading = true;
+        }
+        setItem(Outcome.successful(fileState));
+      } else {
+        var e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        setItem(Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', e)));
+      }
+    }
+  }, [fileState, identifier]);
+  var onSuccess = useCallback(function () {
+    item.whenSuccessful(function (fileItem) {
+      if (isFileStateItem(fileItem)) {
+        var fileAttributes = getFileAttributes(fileItem);
+        fireAnalytics(createLoadSucceededEvent(fileAttributes, traceContext.current), createAnalyticsEventRef.current);
+        succeedMediaFileUfoExperience({
+          fileAttributes: fileAttributes,
+          fileStateFlags: fileStateFlagsRef.current
+        });
+      }
+    });
+  }, [item]);
+  var onLoadFail = useCallback(function (mediaViewerError) {
+    setItem(Outcome.failed(mediaViewerError));
+  }, []);
+  var renderError = useCallback(function (error, fileItem) {
+    if (fileItem) {
+      var _fileState;
+      if (fileItem === 'external-image') {
+        // external image error outcome
+        _fileState = {
+          id: 'external-image',
+          status: 'error'
+        };
+      } else {
+        // FileState error outcome
+        _fileState = fileItem;
+      }
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileState: _fileState,
+        fileStateFlags: fileStateFlagsRef.current,
+        traceContext: traceContext.current
+      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), renderDownloadButton(_fileState, error));
+    } else {
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileStateFlags: fileStateFlagsRef.current
+      });
+    }
+  }, [identifier, renderDownloadButton, traceContext]);
+  return item.match({
+    successful: function successful(fileItem) {
+      if (fileItem === 'external-image') {
+        // render an external image
+        var _ref2 = identifier,
+          dataURI = _ref2.dataURI;
+        return /*#__PURE__*/React.createElement(InteractiveImg, {
+          src: dataURI,
+          onLoad: function onLoad() {
+            fireAnalytics(createLoadSucceededEvent({
+              fileId: 'external-image'
+            }), createAnalyticsEventRef.current);
+            succeedMediaFileUfoExperience({
+              fileAttributes: {
+                fileId: 'external-image'
+              },
+              fileStateFlags: fileStateFlagsRef.current
+            });
+          },
+          onError: function onError() {
+            setItem(Outcome.failed(new MediaViewerError('imageviewer-external-onerror')));
+          }
+        });
+      } else {
+        // render a FileState fetched through media-client
+        switch (fileItem.status) {
+          case 'processed':
+          case 'uploading':
+          case 'processing':
+            // TODO: renderItem
+            var collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
+            var viewerProps = {
+              mediaClient: mediaClient,
+              item: fileItem,
+              collectionName: collectionName,
+              onClose: onClose,
+              previewCount: previewCount
+            };
+
+            // TODO: fix all of the item errors
+
+            if (isCodeViewerItem(fileItem.name, fileItem.mimeType)) {
+              //Render error message if code file has size over 10MB.
+              //Required by https://product-fabric.atlassian.net/browse/MEX-1788
+              if (fileItem.size > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+                return renderError(new MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
+              }
+              return /*#__PURE__*/React.createElement(CodeViewer, _extends({
+                onSuccess: onSuccess,
+                onError: onLoadFail
+              }, viewerProps));
+            }
+            var mediaType = fileItem.mediaType;
+            switch (mediaType) {
+              case 'image':
+                return /*#__PURE__*/React.createElement(ImageViewer, _extends({
+                  onLoad: onSuccess,
+                  onError: onLoadFail,
+                  contextId: contextId,
+                  traceContext: traceContext.current
+                }, viewerProps));
+              case 'audio':
+                return /*#__PURE__*/React.createElement(AudioViewer, _extends({
+                  showControls: showControls,
+                  onCanPlay: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'video':
+                return /*#__PURE__*/React.createElement(VideoViewer, _extends({
+                  showControls: showControls,
+                  onCanPlay: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'doc':
+                return /*#__PURE__*/React.createElement(DocViewer, _extends({
+                  onSuccess: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'archive':
+                return /*#__PURE__*/React.createElement(ArchiveViewerLoader, _extends({
+                  onSuccess: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+            }
+            return renderError(new MediaViewerError('unsupported'), fileItem);
+          case 'failed-processing':
+            return renderError(new MediaViewerError('itemviewer-file-failed-processing-status'), fileItem);
+          case 'error':
+            return renderError(new MediaViewerError('itemviewer-file-error-status'), fileItem);
+        }
+      }
+    },
+    pending: function pending() {
+      return /*#__PURE__*/React.createElement(Spinner, null);
+    },
+    failed: function failed(error) {
+      return renderError(error, item.data);
+    }
+  });
+};
+var ViewerWithKey = function ViewerWithKey(props) {
+  var identifier = props.identifier;
+  var key = isFileIdentifier(identifier) ? identifier.id : identifier.dataURI;
+  return /*#__PURE__*/React.createElement(ItemViewerV2Base, _extends({}, props, {
+    key: key
+  }));
+};
+export var ItemViewerV2 = withAnalyticsEvents()(ViewerWithKey);

package/dist/esm/v2/list-v2.js

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { hideControlsClassName } from '@atlaskit/media-ui';
+import { ItemViewerV2 } from './item-viewer-v2';
+import { HeaderWrapper, ListWrapper } from '../styleWrappers';
+import { Navigation } from '../navigation';
+import HeaderV2 from './header-v2';
+export var ListV2 = function ListV2(_ref) {
+  var defaultSelectedItem = _ref.defaultSelectedItem,
+    onClose = _ref.onClose,
+    showControls = _ref.showControls,
+    extensions = _ref.extensions,
+    onSidebarButtonClick = _ref.onSidebarButtonClick,
+    contextId = _ref.contextId,
+    featureFlags = _ref.featureFlags,
+    isSidebarVisible = _ref.isSidebarVisible,
+    onNavigationChange = _ref.onNavigationChange,
+    items = _ref.items;
+  var _useState = useState(defaultSelectedItem),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewCount = _useState4[0],
+    setPreviewCount = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isArchiveSideBarVisible = _useState6[0],
+    setIsArchiveSideBarVisible = _useState6[1];
+  return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(HeaderWrapper, {
+    className: hideControlsClassName,
+    isArchiveSideBarVisible: isArchiveSideBarVisible
+  }, /*#__PURE__*/React.createElement(HeaderV2, {
+    identifier: selectedItem,
+    onClose: onClose,
+    extensions: extensions,
+    onSidebarButtonClick: onSidebarButtonClick,
+    isSidebarVisible: isSidebarVisible,
+    isArchiveSideBarVisible: isArchiveSideBarVisible,
+    featureFlags: featureFlags,
+    onSetArchiveSideBarVisible: setIsArchiveSideBarVisible
+  })), /*#__PURE__*/React.createElement(ItemViewerV2, {
+    identifier: selectedItem,
+    showControls: showControls,
+    onClose: onClose,
+    previewCount: previewCount,
+    contextId: contextId,
+    featureFlags: featureFlags
+  }), /*#__PURE__*/React.createElement(Navigation, {
+    items: items,
+    selectedItem: selectedItem,
+    onChange: function onChange(selectedItem) {
+      onNavigationChange === null || onNavigationChange === void 0 || onNavigationChange(selectedItem);
+      showControls === null || showControls === void 0 || showControls();
+      setSelectedItem(selectedItem);
+      setPreviewCount(previewCount + 1);
+    },
+    isArchiveSideBarVisible: isArchiveSideBarVisible
+  }));
+};

package/dist/esm/v2/media-viewer-v2.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useLayoutEffect, useRef } from 'react';
+import { IntlProvider, injectIntl } from 'react-intl-next';
+import { Shortcut } from '@atlaskit/media-ui';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireAnalytics } from '../analytics';
+import { createModalEvent } from '../analytics/events/screen/modal';
+import { createClosedEvent } from '../analytics/events/ui/closed';
+import { ListV2 } from './list-v2';
+import { Content } from '../content';
+import { Blanket, SidebarWrapper } from '../styleWrappers';
+import { start } from 'perf-marks';
+import { mediaViewerPopupClass } from '../classnames';
+import ScrollLock from 'react-scrolllock';
+import FocusLock from 'react-focus-lock';
+var MediaViewerComponent = function MediaViewerComponent(_ref) {
+  var featureFlags = _ref.featureFlags,
+    items = _ref.items,
+    extensions = _ref.extensions,
+    contextId = _ref.contextId,
+    innerRef = _ref.innerRef,
+    _onClose = _ref.onClose,
+    selectedItem = _ref.selectedItem,
+    intl = _ref.intl;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSidebarVisible = _useState2[0],
+    setIsSidebarVisible = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedIdentifier = _useState4[0],
+    setSelectedIdentifier = _useState4[1];
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var createAnalyticsEventRef = useRef(createAnalyticsEvent);
+  createAnalyticsEventRef.current = createAnalyticsEvent;
+  useLayoutEffect(function () {
+    fireAnalytics(createModalEvent(), createAnalyticsEventRef.current);
+    start('MediaViewer.SessionDuration');
+  }, []);
+  var defaultSelectedItem = selectedItem || items[0];
+  var renderSidebar = function renderSidebar() {
+    var sidebarSelectedIdentifier = selectedIdentifier || defaultSelectedItem;
+    if (sidebarSelectedIdentifier && isSidebarVisible && extensions && extensions.sidebar) {
+      return /*#__PURE__*/React.createElement(SidebarWrapper, {
+        "data-testid": "media-viewer-sidebar-content"
+      }, extensions.sidebar.renderer(sidebarSelectedIdentifier, {
+        close: function close() {
+          return setIsSidebarVisible(!isSidebarVisible);
+        }
+      }));
+    }
+  };
+  var content = /*#__PURE__*/React.createElement("div", {
+    ref: innerRef
+  }, /*#__PURE__*/React.createElement(Blanket, {
+    "data-testid": "media-viewer-popup",
+    className: mediaViewerPopupClass
+  }, /*#__PURE__*/React.createElement(Shortcut, {
+    code: 'Escape',
+    handler: function handler() {
+      fireAnalytics(createClosedEvent('escKey'), createAnalyticsEventRef.current);
+      _onClose && _onClose();
+    }
+  }), /*#__PURE__*/React.createElement(Content, {
+    isSidebarVisible: isSidebarVisible,
+    onClose: function onClose(_e, analyticsEvent) {
+      var _analyticsEvent$paylo;
+      if ((analyticsEvent === null || analyticsEvent === void 0 || (_analyticsEvent$paylo = analyticsEvent.payload) === null || _analyticsEvent$paylo === void 0 ? void 0 : _analyticsEvent$paylo.actionSubject) === 'button') {
+        fireAnalytics(createClosedEvent('button'), createAnalyticsEventRef.current);
+      }
+      _onClose && _onClose();
+    }
+  }, /*#__PURE__*/React.createElement(ListV2, {
+    defaultSelectedItem: defaultSelectedItem || items[0],
+    items: items,
+    onClose: _onClose,
+    extensions: extensions,
+    onNavigationChange: setSelectedIdentifier,
+    onSidebarButtonClick: function onSidebarButtonClick() {
+      return setIsSidebarVisible(!isSidebarVisible);
+    },
+    isSidebarVisible: isSidebarVisible,
+    contextId: contextId,
+    featureFlags: featureFlags
+  })), renderSidebar()));
+  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, content);
+};
+var MediaViewerWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(MediaViewerComponent, _extends({}, props, {
+    innerRef: ref
+  }));
+});
+var MediaViewerWithScrollLock = function MediaViewerWithScrollLock(props) {
+  return /*#__PURE__*/React.createElement(FocusLock, {
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(ScrollLock, null), /*#__PURE__*/React.createElement(MediaViewerWithRef, props));
+};
+export var MediaViewerV2 = injectIntl(MediaViewerWithScrollLock, {
+  enforceContext: false
+});

package/dist/esm/viewers/archiveSidebar/archive.js

@@ -158,7 +158,7 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
     });
     _defineProperty(_assertThisInitialized(_this), "onViewerLoad", function (selectedArchiveEntry) {
       return function () {
-        fireAnalytics(createZipEntryLoadSucceededEvent(_this.props.item, selectedArchiveEntry), _this.props);
+        fireAnalytics(createZipEntryLoadSucceededEvent(_this.props.item, selectedArchiveEntry), _this.props.createAnalyticsEvent);
       };
     });
     _defineProperty(_assertThisInitialized(_this), "onViewerError", function (primaryErrorReason, selectedArchiveEntry) {
@@ -320,8 +320,10 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
   }, {
     key: "renderPreviewError",
     value: function renderPreviewError(error, entry) {
-      var item = this.props.item;
-      fireAnalytics(createZipEntryLoadFailedEvent(this.props.item, error, entry), this.props);
+      var _this$props2 = this.props,
+        item = _this$props2.item,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
+      fireAnalytics(createZipEntryLoadFailedEvent(item, error, entry), createAnalyticsEvent);
       return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
         fileId: item.id,
         fileState: item,

package/dist/esm/zoomControls.js

@@ -32,20 +32,22 @@ export var ZoomControlsBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "zoomIn", function () {
       var _this$props = _this.props,
         onChange = _this$props.onChange,
-        zoomLevel = _this$props.zoomLevel;
+        zoomLevel = _this$props.zoomLevel,
+        createAnalyticsEvent = _this$props.createAnalyticsEvent;
       if (zoomLevel.canZoomIn) {
         var zoom = zoomLevel.zoomIn();
-        fireAnalytics(createZoomInButtonClickEvent(zoom.value), _this.props);
+        fireAnalytics(createZoomInButtonClickEvent(zoom.value), createAnalyticsEvent);
         onChange(zoom);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "zoomOut", function () {
       var _this$props2 = _this.props,
         onChange = _this$props2.onChange,
-        zoomLevel = _this$props2.zoomLevel;
+        zoomLevel = _this$props2.zoomLevel,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
       if (zoomLevel.canZoomOut) {
         var zoom = zoomLevel.zoomOut();
-        fireAnalytics(createZoomOutButtonClickedEvent(zoom.value), _this.props);
+        fireAnalytics(createZoomOutButtonClickedEvent(zoom.value), createAnalyticsEvent);
         onChange(zoom);
       }
     });

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

@@ -1,6 +1,6 @@
 import { FileState, RequestMetadata } from '@atlaskit/media-client';
 import { FileAttributes, WithFileAttributes, FailureAttributes, WithTraceContext } from '@atlaskit/media-common';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { PrimaryErrorReason } from '../errors';
 import { MediaViewerEventPayload } from './events';
 declare const componentName = "mediaViewer";
@@ -13,4 +13,4 @@ export type MediaViewerFailureAttributes = Omit<FailureAttributes, 'failReason'>
     failReason: PrimaryErrorReason;
     request?: RequestMetadata;
 } & WithFileAttributes & WithTraceContext;
-export declare function fireAnalytics(payload: MediaViewerEventPayload, props: WithAnalyticsEventsProps): void;
+export declare function fireAnalytics(payload: MediaViewerEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;

package/dist/types/v2/header-v2.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Identifier } from '@atlaskit/media-client';
+import { WrappedComponentProps } from 'react-intl-next';
+import { MediaViewerExtensions } from '../components/types';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+export type Props = {
+    readonly identifier: Identifier;
+    readonly onClose?: () => void;
+    readonly extensions?: MediaViewerExtensions;
+    readonly onSidebarButtonClick?: () => void;
+    readonly isSidebarVisible?: boolean;
+    readonly featureFlags?: MediaFeatureFlags;
+    readonly onSetArchiveSideBarVisible?: (isVisible: boolean) => void;
+    readonly isArchiveSideBarVisible?: boolean;
+};
+export declare const HeaderV2: ({ isArchiveSideBarVisible, extensions, isSidebarVisible, onSidebarButtonClick, identifier, onSetArchiveSideBarVisible, }: Props & WrappedComponentProps) => JSX.Element;
+declare const _default: React.FC<Props>;
+export default _default;

package/dist/types/v2/item-viewer-v2.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FileState, Identifier } from '@atlaskit/media-client';
+import { WithShowControlMethodProp } from '@atlaskit/media-ui';
+import { Outcome } from '../domain';
+import { MediaViewerError } from '../errors';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+export type Props = Readonly<{
+    identifier: Identifier;
+    onClose?: () => void;
+    previewCount: number;
+    contextId?: string;
+    featureFlags?: MediaFeatureFlags;
+}> & WithAnalyticsEventsProps & WithShowControlMethodProp;
+export type FileItem = FileState | 'external-image';
+export type State = Outcome<FileItem, MediaViewerError>;
+export declare const isExternalImageItem: (fileItem: FileItem) => fileItem is "external-image";
+export declare const isFileStateItem: (fileItem: FileItem) => fileItem is FileState;
+export declare const MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER: number;
+export declare const ItemViewerV2Base: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, }: Props) => React.ReactElement | null;
+export declare const ItemViewerV2: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/v2/list-v2.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Identifier } from '@atlaskit/media-client';
+import { WithShowControlMethodProp } from '@atlaskit/media-ui';
+import { MediaViewerExtensions } from '../components/types';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+export type Props = Readonly<{
+    onClose?: () => void;
+    onNavigationChange?: (selectedItem: Identifier) => void;
+    defaultSelectedItem: Identifier;
+    items: Identifier[];
+    extensions?: MediaViewerExtensions;
+    onSidebarButtonClick?: () => void;
+    isSidebarVisible?: boolean;
+    contextId?: string;
+    featureFlags?: MediaFeatureFlags;
+} & WithShowControlMethodProp>;
+export type State = {
+    selectedItem: Identifier;
+    previewCount: number;
+    isArchiveSideBarVisible: boolean;
+};
+export declare const ListV2: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, }: Props) => JSX.Element;

package/dist/types/v2/media-viewer-v2.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Identifier } from '@atlaskit/media-client';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { MediaViewerExtensions } from '../components/types';
+export type Props = {
+    onClose?: () => void;
+    selectedItem?: Identifier;
+    featureFlags?: MediaFeatureFlags;
+    items: Identifier[];
+    extensions?: MediaViewerExtensions;
+    contextId?: string;
+    innerRef?: React.Ref<HTMLDivElement>;
+};
+export declare const MediaViewerV2: React.ComponentType<Props>;

package/dist/types-ts4.5/analytics/index.d.ts

@@ -1,6 +1,6 @@
 import { FileState, RequestMetadata } from '@atlaskit/media-client';
 import { FileAttributes, WithFileAttributes, FailureAttributes, WithTraceContext } from '@atlaskit/media-common';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { PrimaryErrorReason } from '../errors';
 import { MediaViewerEventPayload } from './events';
 declare const componentName = "mediaViewer";
@@ -13,4 +13,4 @@ export type MediaViewerFailureAttributes = Omit<FailureAttributes, 'failReason'>
     failReason: PrimaryErrorReason;
     request?: RequestMetadata;
 } & WithFileAttributes & WithTraceContext;
-export declare function fireAnalytics(payload: MediaViewerEventPayload, props: WithAnalyticsEventsProps): void;
+export declare function fireAnalytics(payload: MediaViewerEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;

package/dist/types-ts4.5/v2/header-v2.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Identifier } from '@atlaskit/media-client';
+import { WrappedComponentProps } from 'react-intl-next';
+import { MediaViewerExtensions } from '../components/types';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+export type Props = {
+    readonly identifier: Identifier;
+    readonly onClose?: () => void;
+    readonly extensions?: MediaViewerExtensions;
+    readonly onSidebarButtonClick?: () => void;
+    readonly isSidebarVisible?: boolean;
+    readonly featureFlags?: MediaFeatureFlags;
+    readonly onSetArchiveSideBarVisible?: (isVisible: boolean) => void;
+    readonly isArchiveSideBarVisible?: boolean;
+};
+export declare const HeaderV2: ({ isArchiveSideBarVisible, extensions, isSidebarVisible, onSidebarButtonClick, identifier, onSetArchiveSideBarVisible, }: Props & WrappedComponentProps) => JSX.Element;
+declare const _default: React.FC<Props>;
+export default _default;

package/dist/types-ts4.5/v2/item-viewer-v2.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FileState, Identifier } from '@atlaskit/media-client';
+import { WithShowControlMethodProp } from '@atlaskit/media-ui';
+import { Outcome } from '../domain';
+import { MediaViewerError } from '../errors';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+export type Props = Readonly<{
+    identifier: Identifier;
+    onClose?: () => void;
+    previewCount: number;
+    contextId?: string;
+    featureFlags?: MediaFeatureFlags;
+}> & WithAnalyticsEventsProps & WithShowControlMethodProp;
+export type FileItem = FileState | 'external-image';
+export type State = Outcome<FileItem, MediaViewerError>;
+export declare const isExternalImageItem: (fileItem: FileItem) => fileItem is "external-image";
+export declare const isFileStateItem: (fileItem: FileItem) => fileItem is FileState;
+export declare const MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER: number;
+export declare const ItemViewerV2Base: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, }: Props) => React.ReactElement | null;
+export declare const ItemViewerV2: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;