@atlaskit/media-viewer 47.4.2 → 47.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-viewer
 
+## 47.5.0
+
+### Minor Changes
+
+- [`c3eba8c788d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3eba8c788d) - Deprecation notice: Media Viewer no longer accepts a collection name as a data source. Integrators should pass the full list of files to browse through the new "items" property.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 47.4.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 47.4.2
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -12,7 +12,7 @@ var componentName = 'mediaViewer';
 exports.component = exports.componentName = componentName;
 var packageName = "@atlaskit/media-viewer";
 exports.packageName = packageName;
-var packageVersion = "47.4.2";
+var packageVersion = "47.5.0";
 exports.packageVersion = packageVersion;
 var relevantFlags = {
   newCardExperience: false,

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _ = require(".");
 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) { (0, _defineProperty2.default)(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; }
 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/cjs/components/media-viewer.js

@@ -1,128 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MediaViewer = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _mediaClient = require("@atlaskit/media-client");
+var _react = _interopRequireDefault(require("react"));
 var _mediaViewer = require("../media-viewer");
-var _getIdentifierCollection = require("../utils/getIdentifierCollection");
-var _utils = require("../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-var MediaViewer = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(MediaViewer, _Component);
-  var _super = _createSuper(MediaViewer);
-  function MediaViewer() {
-    var _this;
-    (0, _classCallCheck2.default)(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));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getDataSourceWithSelectedItem", function (dataSource, selectedItem) {
-      // we want to ensure the card identifier is in the list
-      var list = dataSource.list;
-      if (list) {
-        var selectedItemIndex = (0, _utils.getSelectedIndex)(list, selectedItem);
-        if (selectedItemIndex === -1) {
-          return {
-            list: [selectedItem].concat((0, _toConsumableArray2.default)(list))
-          };
-        }
-      }
-      return dataSource;
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(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: (0, _getIdentifierCollection.getIdentifierCollection)(identifier, collectionName)
-          });
-        });
-        var itemSource = {
-          kind: 'ARRAY',
-          items: items
-        };
-        var identifier = _objectSpread(_objectSpread({}, selectedItem), {}, {
-          collectionName: collectionName
-        });
-        return /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
-          mediaClient: mediaClient,
-          selectedItem: identifier,
-          onClose: onClose,
-          itemSource: itemSource,
-          featureFlags: featureFlags,
-          extensions: extensions,
-          contextId: contextId
-        });
-      } else if (dataSourceWithSelectedItem.collectionName) {
-        if ((0, _mediaClient.isExternalImageIdentifier)(selectedItem)) {
-          // if integrators pass an external image + collection, we remove the collection and just show the selectedItem
-          return /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
-            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.default.createElement(_mediaViewer.MediaViewer, {
-          mediaClient: mediaClient,
-          selectedItem: _identifier,
-          onClose: onClose,
-          itemSource: _itemSource,
-          featureFlags: featureFlags,
-          contextId: contextId
-        });
-      } else {
-        throw new Error();
-      }
-    }
-  }]);
-  return MediaViewer;
-}(_react.Component);
+var _normaliseInput2 = require("./normaliseInput");
+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 = (0, _normaliseInput2.normaliseInput)({
+      selectedItem: selectedItem,
+      collectionName: collectionName,
+      items: items,
+      dataSource: dataSource
+    }),
+    normalisedSelectedItem = _normaliseInput.normalisedSelectedItem,
+    normalisedItems = _normaliseInput.normalisedItems;
+  return /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+    mediaClient: mediaClient,
+    selectedItem: normalisedSelectedItem,
+    onClose: onClose,
+    items: normalisedItems,
+    featureFlags: featureFlags,
+    extensions: extensions,
+    contextId: contextId
+  });
+};
 exports.MediaViewer = MediaViewer;

package/dist/cjs/components/normaliseInput.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normaliseInput = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mediaClient = require("@atlaskit/media-client");
+var _getIdentifierCollection = require("../utils/getIdentifierCollection");
+var _utils = require("../utils");
+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) { (0, _defineProperty2.default)(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; }
+var ensureCollectionName = function ensureCollectionName(items, collectionName) {
+  return items.map(function (identifier) {
+    return (0, _mediaClient.isExternalImageIdentifier)(identifier) ? identifier : _objectSpread(_objectSpread({}, identifier), {}, {
+      collectionName: (0, _getIdentifierCollection.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 = (0, _utils.getSelectedIndex)(items, selectedItem);
+  if (selectedItemIndex === -1) {
+    return [selectedItem].concat((0, _toConsumableArray2.default)(items));
+  }
+  return items;
+};
+var normaliseItems = function normaliseItems(selectedItem, items, collectionName) {
+  var itemsWithCollection = ensureCollectionName(items, collectionName);
+  return ensureSelectedItem(itemsWithCollection, selectedItem);
+};
+var normaliseInput = function normaliseInput(_ref) {
+  var dataSource = _ref.dataSource,
+    selectedItem = _ref.selectedItem,
+    items = _ref.items,
+    collectionName = _ref.collectionName;
+  var normalisedSelectedItem = (0, _mediaClient.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 && !(0, _mediaClient.isExternalImageIdentifier)(selectedItem)) {
+    return {
+      normalisedSelectedItem: normalisedSelectedItem,
+      normalisedItems: undefined
+    };
+  }
+  return {
+    normalisedSelectedItem: normalisedSelectedItem,
+    normalisedItems: [normalisedSelectedItem]
+  };
+};
+exports.normaliseInput = normaliseInput;

package/dist/cjs/media-viewer.js

@@ -21,11 +21,12 @@ var _analytics = require("./analytics");
 var _modal = require("./analytics/events/screen/modal");
 var _closed = require("./analytics/events/ui/closed");
 var _list = require("./list");
-var _collection = require("./collection");
 var _content = require("./content");
 var _styleWrappers = require("./styleWrappers");
 var _perfMarks = require("perf-marks");
 var _classnames = require("./classnames");
+var _errorMessage = _interopRequireDefault(require("./errorMessage"));
+var _errors = require("./errors");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
@@ -93,18 +94,36 @@ 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.default.createElement(_errorMessage.default, {
+        fileId: 'undefined',
+        error: new _errors.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.default.createElement(_styleWrappers.Blanket, {
         "data-testid": "media-viewer-popup",
@@ -115,52 +134,22 @@ var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement(_content.Content, {
         isSidebarVisible: isSidebarVisible,
         onClose: this.onContentClose
-      }, this.renderContent()), this.renderSidebar());
+      }, !items ? this.renderError() : /*#__PURE__*/_react.default.createElement(_list.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.default.createElement(_reactIntlNext.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.default.createElement(_collection.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.default.createElement(_list.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.default.Component);

package/dist/cjs/utils/index.js

@@ -4,23 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toIdentifier = exports.rejectAfter = exports.isMacPrivateFile = exports.getSelectedIndex = exports.getMimeTypeFromFilename = exports.getMediaTypeFromFilename = exports.getFormattedFolderName = exports.getFolderParent = exports.extractArchiveFolderName = void 0;
+exports.rejectAfter = exports.isMacPrivateFile = exports.getSelectedIndex = exports.getMimeTypeFromFilename = exports.getMediaTypeFromFilename = exports.getFormattedFolderName = exports.getFolderParent = exports.extractArchiveFolderName = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mime = require("mime");
-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
-exports.toIdentifier = toIdentifier;
 var getSelectedIndex = function getSelectedIndex(items, selectedItem) {
   return items.findIndex(function (item) {
     if ((0, _mediaClient.isFileIdentifier)(item) && (0, _mediaClient.isFileIdentifier)(selectedItem)) {

package/dist/cjs/version.json

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

package/dist/es2019/analytics/index.js

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

package/dist/es2019/analytics/ufoExperiences.js

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

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

@@ -1,99 +1,33 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 class MediaViewer extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "getDataSourceWithSelectedItem", (dataSource, selectedItem) => {
-      // we want to ensure the card identifier is in the list
-      const {
-        list
-      } = dataSource;
-      if (list) {
-        const selectedItemIndex = getSelectedIndex(list, selectedItem);
-        if (selectedItemIndex === -1) {
-          return {
-            list: [selectedItem, ...list]
-          };
-        }
-      }
-      return dataSource;
-    });
-  }
-  render() {
-    const {
-      featureFlags,
-      onClose,
-      mediaClient,
-      selectedItem,
-      collectionName,
-      dataSource,
-      pageSize,
-      extensions,
-      contextId
-    } = this.props;
-    const defaultPageSize = 30;
-    const dataSourceWithSelectedItem = this.getDataSourceWithSelectedItem(dataSource, selectedItem);
-    if (dataSourceWithSelectedItem.list) {
-      const items = dataSourceWithSelectedItem.list.map(identifier => ({
-        ...identifier,
-        collectionName: getIdentifierCollection(identifier, collectionName)
-      }));
-      const itemSource = {
-        kind: 'ARRAY',
-        items: items
-      };
-      const identifier = {
-        ...selectedItem,
-        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
-        });
-      }
-      const itemSource = {
-        kind: 'COLLECTION',
-        collectionName: dataSourceWithSelectedItem.collectionName,
-        pageSize: pageSize || defaultPageSize
-      };
-      const identifier = {
-        ...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();
-    }
-  }
-}
+import { normaliseInput } from './normaliseInput';
+export const MediaViewer = ({
+  featureFlags,
+  onClose,
+  mediaClient,
+  selectedItem,
+  collectionName,
+  items,
+  extensions,
+  contextId,
+  dataSource
+}) => {
+  const {
+    normalisedSelectedItem,
+    normalisedItems
+  } = normaliseInput({
+    selectedItem,
+    collectionName,
+    items,
+    dataSource
+  });
+  return /*#__PURE__*/React.createElement(MediaViewerNextGen, {
+    mediaClient: mediaClient,
+    selectedItem: normalisedSelectedItem,
+    onClose: onClose,
+    items: normalisedItems,
+    featureFlags: featureFlags,
+    extensions: extensions,
+    contextId: contextId
+  });
+};

package/dist/es2019/components/normaliseInput.js

@@ -0,0 +1,52 @@
+import { isExternalImageIdentifier } from '@atlaskit/media-client';
+import { getIdentifierCollection } from '../utils/getIdentifierCollection';
+import { getSelectedIndex } from '../utils';
+const ensureCollectionName = (items, collectionName) => items.map(identifier => isExternalImageIdentifier(identifier) ? identifier : {
+  ...identifier,
+  collectionName: getIdentifierCollection(identifier, collectionName)
+});
+
+// returns a valid MV data source including current the card identifier
+const ensureSelectedItem = (items, selectedItem) => {
+  // we want to ensure the card identifier is in the list
+  const selectedItemIndex = getSelectedIndex(items, selectedItem);
+  if (selectedItemIndex === -1) {
+    return [selectedItem, ...items];
+  }
+  return items;
+};
+const normaliseItems = (selectedItem, items, collectionName) => {
+  const itemsWithCollection = ensureCollectionName(items, collectionName);
+  return ensureSelectedItem(itemsWithCollection, selectedItem);
+};
+export const normaliseInput = ({
+  dataSource,
+  selectedItem,
+  items,
+  collectionName
+}) => {
+  const normalisedSelectedItem = isExternalImageIdentifier(selectedItem) ? selectedItem : {
+    ...selectedItem,
+    collectionName
+  };
+  if (items) {
+    return {
+      normalisedSelectedItem,
+      normalisedItems: normaliseItems(normalisedSelectedItem, items, collectionName)
+    };
+  } else if (dataSource !== null && dataSource !== void 0 && dataSource.list) {
+    return {
+      normalisedSelectedItem,
+      normalisedItems: normaliseItems(normalisedSelectedItem, dataSource.list, collectionName)
+    };
+  } else if (dataSource !== null && dataSource !== void 0 && dataSource.collectionName && !isExternalImageIdentifier(selectedItem)) {
+    return {
+      normalisedSelectedItem,
+      normalisedItems: undefined
+    };
+  }
+  return {
+    normalisedSelectedItem,
+    normalisedItems: [normalisedSelectedItem]
+  };
+};