@atlaskit/media-viewer 47.4.2 → 47.5.0

package/dist/es2019/media-viewer.js

@@ -8,11 +8,12 @@ import { packageName, packageVersion, component, componentName, fireAnalytics, L
 import { createModalEvent } from './analytics/events/screen/modal';
 import { createClosedEvent } from './analytics/events/ui/closed';
 import { List } from './list';
-import { Collection } from './collection';
 import { Content } from './content';
 import { Blanket, SidebarWrapper } from './styleWrappers';
 import { start } from 'perf-marks';
 import { mediaViewerPopupClass } from './classnames';
+import ErrorMessage from './errorMessage';
+import { MediaViewerError } from './errors';
 export class MediaViewerComponent extends React.Component {
   constructor(...args) {
     super(...args);
@@ -73,19 +74,33 @@ export class MediaViewerComponent extends React.Component {
   }
   get defaultSelectedItem() {
     const {
-      itemSource,
+      items,
       selectedItem
     } = this.props;
-    if (itemSource.kind === 'COLLECTION') {
-      return selectedItem;
-    }
-    const {
-      items
-    } = itemSource;
-    const firstItem = items[0];
+    const firstItem = items === null || items === void 0 ? void 0 : items[0];
     return selectedItem || firstItem;
   }
+  /**
+   * TODO: https://product-fabric.atlassian.net/browse/MEX-2207
+   * This error message is simulating the current error thrown by the backend when consumer provides a collection as datasource.
+   * This is displayed at this level when no items are provided from the parent component.
+   * This error message should be removed when the deprecated API is removed.
+   */
+  renderError() {
+    return /*#__PURE__*/React.createElement(ErrorMessage, {
+      fileId: 'undefined',
+      error: new MediaViewerError('collection-fetch-metadata', new Error('collection as datasource is no longer supported'))
+    });
+  }
   render() {
+    const {
+      mediaClient,
+      onClose,
+      items,
+      extensions,
+      contextId,
+      featureFlags
+    } = this.props;
     const {
       isSidebarVisible
     } = this.state;
@@ -98,55 +113,22 @@ export class MediaViewerComponent extends React.Component {
     }), /*#__PURE__*/React.createElement(Content, {
       isSidebarVisible: isSidebarVisible,
       onClose: this.onContentClose
-    }, this.renderContent()), this.renderSidebar());
+    }, !items ? this.renderError() : /*#__PURE__*/React.createElement(List, {
+      defaultSelectedItem: this.defaultSelectedItem || items[0],
+      items: items,
+      mediaClient: mediaClient,
+      onClose: onClose,
+      extensions: extensions,
+      onNavigationChange: this.onNavigationChange,
+      onSidebarButtonClick: this.toggleSidebar,
+      isSidebarVisible: isSidebarVisible,
+      contextId: contextId,
+      featureFlags: featureFlags
+    })), this.renderSidebar());
     return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, content);
   }
-  renderContent() {
-    const {
-      mediaClient,
-      onClose,
-      itemSource,
-      extensions,
-      contextId,
-      featureFlags
-    } = this.props;
-    const {
-      isSidebarVisible
-    } = this.state;
-    if (itemSource.kind === 'COLLECTION') {
-      return /*#__PURE__*/React.createElement(Collection, {
-        pageSize: itemSource.pageSize,
-        defaultSelectedItem: this.defaultSelectedItem,
-        collectionName: itemSource.collectionName,
-        mediaClient: mediaClient,
-        onClose: onClose,
-        extensions: extensions,
-        onNavigationChange: this.onNavigationChange,
-        onSidebarButtonClick: this.toggleSidebar,
-        featureFlags: featureFlags
-      });
-    } else if (itemSource.kind === 'ARRAY') {
-      const {
-        items
-      } = itemSource;
-      return /*#__PURE__*/React.createElement(List, {
-        defaultSelectedItem: this.defaultSelectedItem || items[0],
-        items: items,
-        mediaClient: mediaClient,
-        onClose: onClose,
-        extensions: extensions,
-        onNavigationChange: this.onNavigationChange,
-        onSidebarButtonClick: this.toggleSidebar,
-        isSidebarVisible: isSidebarVisible,
-        contextId: contextId,
-        featureFlags: featureFlags
-      });
-    } else {
-      return null;
-    }
-  }
 }
 export const MediaViewer = withMediaAnalyticsContext({
   packageName,

package/dist/es2019/utils/index.js

@@ -1,13 +1,5 @@
 import { isFileIdentifier, getMediaTypeFromMimeType } from '@atlaskit/media-client';
 import { getType } from 'mime';
-export const toIdentifier = (item, collectionName) => {
-  return {
-    id: item.id,
-    mediaItemType: 'file',
-    occurrenceKey: item.occurrenceKey,
-    collectionName
-  };
-};
 
 // TODO MS-1752 - current implementation makes viewer navigation to misbehave
 // if passed a file with the same id (with different occurrenceKeys) or with the same dataURI twice

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "47.4.2",
+	"version": "47.5.0",
 	"sideEffects": false
 }

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts, ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "47.4.2";
+var packageVersion = "47.5.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export var relevantFlags = {
   newCardExperience: false,

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { LOGGED_FEATURE_FLAG_KEYS } from '.';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "47.4.2";
+var packageVersion = "47.5.0";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

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

@@ -1,118 +1,31 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-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";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-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); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
-import { Component } from 'react';
-import { isExternalImageIdentifier } from '@atlaskit/media-client';
 import { MediaViewer as MediaViewerNextGen } from '../media-viewer';
-import { getIdentifierCollection } from '../utils/getIdentifierCollection';
-import { getSelectedIndex } from '../utils';
-export var MediaViewer = /*#__PURE__*/function (_Component) {
-  _inherits(MediaViewer, _Component);
-  var _super = _createSuper(MediaViewer);
-  function MediaViewer() {
-    var _this;
-    _classCallCheck(this, MediaViewer);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "getDataSourceWithSelectedItem", function (dataSource, selectedItem) {
-      // we want to ensure the card identifier is in the list
-      var list = dataSource.list;
-      if (list) {
-        var selectedItemIndex = getSelectedIndex(list, selectedItem);
-        if (selectedItemIndex === -1) {
-          return {
-            list: [selectedItem].concat(_toConsumableArray(list))
-          };
-        }
-      }
-      return dataSource;
-    });
-    return _this;
-  }
-  _createClass(MediaViewer, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        featureFlags = _this$props.featureFlags,
-        onClose = _this$props.onClose,
-        mediaClient = _this$props.mediaClient,
-        selectedItem = _this$props.selectedItem,
-        collectionName = _this$props.collectionName,
-        dataSource = _this$props.dataSource,
-        pageSize = _this$props.pageSize,
-        extensions = _this$props.extensions,
-        contextId = _this$props.contextId;
-      var defaultPageSize = 30;
-      var dataSourceWithSelectedItem = this.getDataSourceWithSelectedItem(dataSource, selectedItem);
-      if (dataSourceWithSelectedItem.list) {
-        var items = dataSourceWithSelectedItem.list.map(function (identifier) {
-          return _objectSpread(_objectSpread({}, identifier), {}, {
-            collectionName: getIdentifierCollection(identifier, collectionName)
-          });
-        });
-        var itemSource = {
-          kind: 'ARRAY',
-          items: items
-        };
-        var identifier = _objectSpread(_objectSpread({}, selectedItem), {}, {
-          collectionName: collectionName
-        });
-        return /*#__PURE__*/React.createElement(MediaViewerNextGen, {
-          mediaClient: mediaClient,
-          selectedItem: identifier,
-          onClose: onClose,
-          itemSource: itemSource,
-          featureFlags: featureFlags,
-          extensions: extensions,
-          contextId: contextId
-        });
-      } else if (dataSourceWithSelectedItem.collectionName) {
-        if (isExternalImageIdentifier(selectedItem)) {
-          // if integrators pass an external image + collection, we remove the collection and just show the selectedItem
-          return /*#__PURE__*/React.createElement(MediaViewerNextGen, {
-            mediaClient: mediaClient,
-            selectedItem: selectedItem,
-            onClose: onClose,
-            itemSource: {
-              kind: 'ARRAY',
-              items: [selectedItem]
-            },
-            featureFlags: featureFlags,
-            contextId: contextId
-          });
-        }
-        var _itemSource = {
-          kind: 'COLLECTION',
-          collectionName: dataSourceWithSelectedItem.collectionName,
-          pageSize: pageSize || defaultPageSize
-        };
-        var _identifier = _objectSpread(_objectSpread({}, selectedItem), {}, {
-          collectionName: dataSourceWithSelectedItem.collectionName
-        });
-        return /*#__PURE__*/React.createElement(MediaViewerNextGen, {
-          mediaClient: mediaClient,
-          selectedItem: _identifier,
-          onClose: onClose,
-          itemSource: _itemSource,
-          featureFlags: featureFlags,
-          contextId: contextId
-        });
-      } else {
-        throw new Error();
-      }
-    }
-  }]);
-  return MediaViewer;
-}(Component);
+import { normaliseInput } from './normaliseInput';
+export var MediaViewer = function MediaViewer(_ref) {
+  var featureFlags = _ref.featureFlags,
+    onClose = _ref.onClose,
+    mediaClient = _ref.mediaClient,
+    selectedItem = _ref.selectedItem,
+    collectionName = _ref.collectionName,
+    items = _ref.items,
+    extensions = _ref.extensions,
+    contextId = _ref.contextId,
+    dataSource = _ref.dataSource;
+  var _normaliseInput = normaliseInput({
+      selectedItem: selectedItem,
+      collectionName: collectionName,
+      items: items,
+      dataSource: dataSource
+    }),
+    normalisedSelectedItem = _normaliseInput.normalisedSelectedItem,
+    normalisedItems = _normaliseInput.normalisedItems;
+  return /*#__PURE__*/React.createElement(MediaViewerNextGen, {
+    mediaClient: mediaClient,
+    selectedItem: normalisedSelectedItem,
+    onClose: onClose,
+    items: normalisedItems,
+    featureFlags: featureFlags,
+    extensions: extensions,
+    contextId: contextId
+  });
+};

package/dist/esm/components/normaliseInput.js

@@ -0,0 +1,57 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { isExternalImageIdentifier } from '@atlaskit/media-client';
+import { getIdentifierCollection } from '../utils/getIdentifierCollection';
+import { getSelectedIndex } from '../utils';
+var ensureCollectionName = function ensureCollectionName(items, collectionName) {
+  return items.map(function (identifier) {
+    return isExternalImageIdentifier(identifier) ? identifier : _objectSpread(_objectSpread({}, identifier), {}, {
+      collectionName: getIdentifierCollection(identifier, collectionName)
+    });
+  });
+};
+
+// returns a valid MV data source including current the card identifier
+var ensureSelectedItem = function ensureSelectedItem(items, selectedItem) {
+  // we want to ensure the card identifier is in the list
+  var selectedItemIndex = getSelectedIndex(items, selectedItem);
+  if (selectedItemIndex === -1) {
+    return [selectedItem].concat(_toConsumableArray(items));
+  }
+  return items;
+};
+var normaliseItems = function normaliseItems(selectedItem, items, collectionName) {
+  var itemsWithCollection = ensureCollectionName(items, collectionName);
+  return ensureSelectedItem(itemsWithCollection, selectedItem);
+};
+export var normaliseInput = function normaliseInput(_ref) {
+  var dataSource = _ref.dataSource,
+    selectedItem = _ref.selectedItem,
+    items = _ref.items,
+    collectionName = _ref.collectionName;
+  var normalisedSelectedItem = isExternalImageIdentifier(selectedItem) ? selectedItem : _objectSpread(_objectSpread({}, selectedItem), {}, {
+    collectionName: collectionName
+  });
+  if (items) {
+    return {
+      normalisedSelectedItem: normalisedSelectedItem,
+      normalisedItems: normaliseItems(normalisedSelectedItem, items, collectionName)
+    };
+  } else if (dataSource !== null && dataSource !== void 0 && dataSource.list) {
+    return {
+      normalisedSelectedItem: normalisedSelectedItem,
+      normalisedItems: normaliseItems(normalisedSelectedItem, dataSource.list, collectionName)
+    };
+  } else if (dataSource !== null && dataSource !== void 0 && dataSource.collectionName && !isExternalImageIdentifier(selectedItem)) {
+    return {
+      normalisedSelectedItem: normalisedSelectedItem,
+      normalisedItems: undefined
+    };
+  }
+  return {
+    normalisedSelectedItem: normalisedSelectedItem,
+    normalisedItems: [normalisedSelectedItem]
+  };
+};

package/dist/esm/media-viewer.js

@@ -16,11 +16,12 @@ import { packageName, packageVersion, component, componentName, fireAnalytics, L
 import { createModalEvent } from './analytics/events/screen/modal';
 import { createClosedEvent } from './analytics/events/ui/closed';
 import { List } from './list';
-import { Collection } from './collection';
 import { Content } from './content';
 import { Blanket, SidebarWrapper } from './styleWrappers';
 import { start } from 'perf-marks';
 import { mediaViewerPopupClass } from './classnames';
+import ErrorMessage from './errorMessage';
+import { MediaViewerError } from './errors';
 export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(MediaViewerComponent, _React$Component);
   var _super = _createSuper(MediaViewerComponent);
@@ -86,18 +87,36 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
     key: "defaultSelectedItem",
     get: function get() {
       var _this$props = this.props,
-        itemSource = _this$props.itemSource,
+        items = _this$props.items,
         selectedItem = _this$props.selectedItem;
-      if (itemSource.kind === 'COLLECTION') {
-        return selectedItem;
-      }
-      var items = itemSource.items;
-      var firstItem = items[0];
+      var firstItem = items === null || items === void 0 ? void 0 : items[0];
       return selectedItem || firstItem;
     }
+  }, {
+    key: "renderError",
+    value:
+    /**
+     * TODO: https://product-fabric.atlassian.net/browse/MEX-2207
+     * This error message is simulating the current error thrown by the backend when consumer provides a collection as datasource.
+     * This is displayed at this level when no items are provided from the parent component.
+     * This error message should be removed when the deprecated API is removed.
+     */
+    function renderError() {
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        fileId: 'undefined',
+        error: new MediaViewerError('collection-fetch-metadata', new Error('collection as datasource is no longer supported'))
+      });
+    }
   }, {
     key: "render",
     value: function render() {
+      var _this$props2 = this.props,
+        mediaClient = _this$props2.mediaClient,
+        onClose = _this$props2.onClose,
+        items = _this$props2.items,
+        extensions = _this$props2.extensions,
+        contextId = _this$props2.contextId,
+        featureFlags = _this$props2.featureFlags;
       var isSidebarVisible = this.state.isSidebarVisible;
       var content = /*#__PURE__*/React.createElement(Blanket, {
         "data-testid": "media-viewer-popup",
@@ -108,52 +127,22 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement(Content, {
         isSidebarVisible: isSidebarVisible,
         onClose: this.onContentClose
-      }, this.renderContent()), this.renderSidebar());
+      }, !items ? this.renderError() : /*#__PURE__*/React.createElement(List, {
+        defaultSelectedItem: this.defaultSelectedItem || items[0],
+        items: items,
+        mediaClient: mediaClient,
+        onClose: onClose,
+        extensions: extensions,
+        onNavigationChange: this.onNavigationChange,
+        onSidebarButtonClick: this.toggleSidebar,
+        isSidebarVisible: isSidebarVisible,
+        contextId: contextId,
+        featureFlags: featureFlags
+      })), this.renderSidebar());
       return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"
       }, content);
     }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var _this$props2 = this.props,
-        mediaClient = _this$props2.mediaClient,
-        onClose = _this$props2.onClose,
-        itemSource = _this$props2.itemSource,
-        extensions = _this$props2.extensions,
-        contextId = _this$props2.contextId,
-        featureFlags = _this$props2.featureFlags;
-      var isSidebarVisible = this.state.isSidebarVisible;
-      if (itemSource.kind === 'COLLECTION') {
-        return /*#__PURE__*/React.createElement(Collection, {
-          pageSize: itemSource.pageSize,
-          defaultSelectedItem: this.defaultSelectedItem,
-          collectionName: itemSource.collectionName,
-          mediaClient: mediaClient,
-          onClose: onClose,
-          extensions: extensions,
-          onNavigationChange: this.onNavigationChange,
-          onSidebarButtonClick: this.toggleSidebar,
-          featureFlags: featureFlags
-        });
-      } else if (itemSource.kind === 'ARRAY') {
-        var items = itemSource.items;
-        return /*#__PURE__*/React.createElement(List, {
-          defaultSelectedItem: this.defaultSelectedItem || items[0],
-          items: items,
-          mediaClient: mediaClient,
-          onClose: onClose,
-          extensions: extensions,
-          onNavigationChange: this.onNavigationChange,
-          onSidebarButtonClick: this.toggleSidebar,
-          isSidebarVisible: isSidebarVisible,
-          contextId: contextId,
-          featureFlags: featureFlags
-        });
-      } else {
-        return null;
-      }
-    }
   }]);
   return MediaViewerComponent;
 }(React.Component);

package/dist/esm/utils/index.js

@@ -2,14 +2,6 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { isFileIdentifier, getMediaTypeFromMimeType } from '@atlaskit/media-client';
 import { getType } from 'mime';
-export var toIdentifier = function toIdentifier(item, collectionName) {
-  return {
-    id: item.id,
-    mediaItemType: 'file',
-    occurrenceKey: item.occurrenceKey,
-    collectionName: collectionName
-  };
-};
 
 // TODO MS-1752 - current implementation makes viewer navigation to misbehave
 // if passed a file with the same id (with different occurrenceKeys) or with the same dataURI twice

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "47.4.2",
+	"version": "47.5.0",
 	"sideEffects": false
 }

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

@@ -1,7 +1,3 @@
-import { Component } from 'react';
-import { Identifier } from '@atlaskit/media-client';
-import { MediaViewerProps, MediaViewerDataSource } from './types';
-export declare class MediaViewer extends Component<MediaViewerProps> {
-    getDataSourceWithSelectedItem: (dataSource: MediaViewerDataSource, selectedItem: Identifier) => MediaViewerDataSource;
-    render(): JSX.Element;
-}
+/// <reference types="react" />
+import { MediaViewerProps } from './types';
+export declare const MediaViewer: ({ featureFlags, onClose, mediaClient, selectedItem, collectionName, items, extensions, contextId, dataSource, }: MediaViewerProps) => JSX.Element;

package/dist/types/components/normaliseInput.d.ts

@@ -0,0 +1,13 @@
+import { MediaViewerDataSource } from './types';
+import { Identifier } from '@atlaskit/media-client';
+declare type NormaliseInputParams = {
+    dataSource?: MediaViewerDataSource;
+    selectedItem: Identifier;
+    items?: Array<Identifier>;
+    collectionName: string;
+};
+export declare const normaliseInput: ({ dataSource, selectedItem, items, collectionName, }: NormaliseInputParams) => {
+    normalisedSelectedItem: Identifier;
+    normalisedItems?: Identifier[] | undefined;
+};
+export {};

package/dist/types/components/types.d.ts

@@ -21,8 +21,19 @@ export interface MediaViewerExtensions {
 export interface MediaViewerProps {
     readonly mediaClient: MediaClient;
     readonly selectedItem: Identifier;
-    readonly dataSource: MediaViewerDataSource;
+    /**
+     * Data source for media viewer.
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-147 Internal documentation for deprecation (no external access)}}
+     * Use items property instead
+     */
+    readonly dataSource?: MediaViewerDataSource;
+    readonly items?: Array<Identifier>;
     readonly collectionName: string;
+    /**
+     * The page size
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-147 Internal documentation for deprecation (no external access)}}
+     * There is no replacement for this property.
+     */
     readonly pageSize?: number;
     readonly onClose?: () => void;
     readonly featureFlags?: MediaFeatureFlags;

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

@@ -1,10 +1 @@
-import { Identifier } from '@atlaskit/media-client';
 export { Outcome } from './outcome';
-export declare type ItemSource = {
-    kind: 'COLLECTION';
-    collectionName: string;
-    pageSize: number;
-} | {
-    kind: 'ARRAY';
-    items: Identifier[];
-};

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

@@ -3,14 +3,17 @@ import { MediaClient, Identifier } from '@atlaskit/media-client';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { WrappedComponentProps } from 'react-intl-next';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { ItemSource } from './domain';
 import { MediaViewerExtensions } from './components/types';
 export declare type Props = {
     onClose?: () => void;
     selectedItem?: Identifier;
     featureFlags?: MediaFeatureFlags;
     mediaClient: MediaClient;
-    itemSource: ItemSource;
+    /**
+     * TODO: https://product-fabric.atlassian.net/browse/MEX-2207
+     * property should be mandatory
+     */
+    items?: Identifier[];
     extensions?: MediaViewerExtensions;
     contextId?: string;
 } & WithAnalyticsEventsProps;
@@ -26,8 +29,14 @@ export declare class MediaViewerComponent extends React.Component<Props & Wrappe
     private toggleSidebar;
     private get defaultSelectedItem();
     renderSidebar: () => JSX.Element | undefined;
+    /**
+     * TODO: https://product-fabric.atlassian.net/browse/MEX-2207
+     * This error message is simulating the current error thrown by the backend when consumer provides a collection as datasource.
+     * This is displayed at this level when no items are provided from the parent component.
+     * This error message should be removed when the deprecated API is removed.
+     */
+    renderError(): JSX.Element;
     render(): JSX.Element;
     private onNavigationChange;
-    private renderContent;
 }
 export declare const MediaViewer: React.ComponentType<Props>;

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

@@ -1,5 +1,4 @@
-import { FileIdentifier, Identifier, MediaCollectionItem, MediaType } from '@atlaskit/media-client';
-export declare const toIdentifier: (item: MediaCollectionItem, collectionName: string) => FileIdentifier;
+import { Identifier, MediaType } from '@atlaskit/media-client';
 export declare const getSelectedIndex: (items: Identifier[], selectedItem: Identifier) => number;
 export declare const getMediaTypeFromFilename: (filename: string) => MediaType;
 export declare const getMimeTypeFromFilename: (filename: string) => string;