@vidispine/vdt-mui 22.3.0-pre.5 → 22.3.0

package/dist/index.es.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import clsx from 'clsx';
 import List from '@mui/material/List';
 import VidispinePropTypes from '@vidispine/proptypes';
-import { memo, useMemo, Fragment as Fragment$1, createContext, useState, useCallback, useContext } from 'react';
+import { useMemo, Fragment as Fragment$1, createContext, useState, useCallback, useContext } from 'react';
 import { Avatar, Skeleton, ListItem, ListItemAvatar, ListItemText, ListItemSecondaryAction, createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material';
 import { parseMetadataType } from '@vidispine/vdt-js';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -1149,7 +1149,7 @@ function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) {
 var AUDIO_MIMETYPE_PREFIX = 'audio';
 var VIDEO_MIMETYPE_PREFIX = 'video';
 var IMAGE_MIMETYPE_PREFIX = 'image';
-var styles$7 = function styles() {
+var styles$8 = function styles() {
   return {
     root: {}
   };
@@ -1230,10 +1230,10 @@ MimeTypeIcon.defaultProps = {
   placeholderIcon: NoteAddIcon
 };
 
-var Component$7 = withStyles(styles$7, {
+var Component$8 = withStyles(styles$8, {
   name: 'VdtMimeTypeIcon'
 })(MimeTypeIcon);
-Component$7.displayName = 'MimeTypeIcon';
+Component$8.displayName = 'MimeTypeIcon';
 
 var _excluded$7 = ["mediaType"],
     _excluded2 = ["className", "classes", "entityType", "mediaType", "itemIcon", "collectionIcon", "libraryIcon", "libraryAudioIcon", "libraryVideoIcon", "libraryImageIcon", "placeholderIcon", "MediaTypeComponent", "MediaTypeProps"];
@@ -1249,12 +1249,12 @@ function MediaTypeIcon(_ref) {
   var mediaType = _ref.mediaType,
       props = _objectWithoutProperties(_ref, _excluded$7);
 
-  return /*#__PURE__*/jsx(Component$7, _objectSpread$7({
+  return /*#__PURE__*/jsx(Component$8, _objectSpread$7({
     mimeType: mediaType
   }, props));
 }
 
-var styles$6 = function styles() {
+var styles$7 = function styles() {
   return {
     root: {},
     mediaType: {}
@@ -1277,6 +1277,7 @@ function EntityIcon(_ref2) {
       props = _objectWithoutProperties(_ref2, _excluded2);
 
   var IconComponent = placeholderIcon;
+  var iconProps = {};
 
   if (entityType && typeof entityType === 'string') {
     switch (entityType.toLowerCase()) {
@@ -1285,12 +1286,11 @@ function EntityIcon(_ref2) {
           IconComponent = itemIcon;
 
           if (mediaType && typeof mediaType === 'string') {
-            IconComponent = /*#__PURE__*/memo(function (iconProps) {
-              return /*#__PURE__*/jsx(MediaTypeComponent, _objectSpread$7(_objectSpread$7({
-                className: clsx(classes.mediaType, 'VdtEntityIcon-mediaType'),
-                mediaType: mediaType
-              }, MediaTypeProps), iconProps));
-            }, [mediaType, MediaTypeProps]);
+            IconComponent = MediaTypeComponent;
+            iconProps = _objectSpread$7({
+              className: clsx(classes.mediaType, 'VdtEntityIcon-mediaType'),
+              mediaType: mediaType
+            }, MediaTypeProps);
           }
 
           break;
@@ -1316,9 +1316,9 @@ function EntityIcon(_ref2) {
     }
   }
 
-  return /*#__PURE__*/jsx(IconComponent, _objectSpread$7({
+  return /*#__PURE__*/jsx(IconComponent, _objectSpread$7(_objectSpread$7({
     className: clsx(className, classes.root, 'VdtEntityIcon-root')
-  }, props));
+  }, iconProps), props));
 }
 EntityIcon.propTypes = {
   /**
@@ -1402,17 +1402,17 @@ EntityIcon.defaultProps = {
   MediaTypeProps: {}
 };
 
-var Component$6 = withStyles(styles$6, {
+var Component$7 = withStyles(styles$7, {
   name: 'VdtEntityIcon'
 })(EntityIcon);
-Component$6.displayName = 'EntityIcon';
+Component$7.displayName = 'EntityIcon';
 
 var _excluded$6 = ["className", "classes", "isLoading", "entityType", "mediaType", "variant", "IconComponent", "IconProps", "SkeletonProps"];
 
 function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$5 = function styles() {
+var styles$6 = function styles() {
   return {
     root: {
       transition: 'background-color .2s ease-out'
@@ -1509,22 +1509,22 @@ EntityAvatar.defaultProps = {
   mediaType: undefined,
   variant: 'square',
   isLoading: false,
-  IconComponent: Component$6,
+  IconComponent: Component$7,
   IconProps: {},
   SkeletonProps: {}
 };
 
-var Component$5 = withStyles(styles$5, {
+var Component$6 = withStyles(styles$6, {
   name: 'VdtEntityAvatar'
 })(EntityAvatar);
-Component$5.displayName = 'EntityAvatar';
+Component$6.displayName = 'EntityAvatar';
 
 var _excluded$5 = ["className", "classes", "collectionType", "onClick", "parseMetadataOptions", "primaryFieldName", "primaryFunction", "secondaryFieldName", "secondaryFunction", "isLoading", "AvatarComponent", "AvatarProps", "ActionComponent", "ActionProps"];
 
 function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$4 = function styles() {
+var styles$5 = function styles() {
   return {
     root: {
       '&:hover .VdtCollectionListItem-secondaryAction': {
@@ -1696,7 +1696,7 @@ var defaultProps$4 = {
   onClick: undefined,
   ActionComponent: undefined,
   ActionProps: {},
-  AvatarComponent: Component$5,
+  AvatarComponent: Component$6,
   AvatarProps: {},
   parseMetadataOptions: {
     flat: true,
@@ -1707,17 +1707,17 @@ var defaultProps$4 = {
 CollectionListItem.propTypes = propTypes$4;
 CollectionListItem.defaultProps = defaultProps$4;
 
-var Component$4 = withStyles(styles$4, {
+var Component$5 = withStyles(styles$5, {
   name: 'VdtCollectionListItem'
 })(CollectionListItem);
-Component$4.displayName = 'CollectionListItem';
+Component$5.displayName = 'CollectionListItem';
 
 var _excluded$4 = ["className", "classes", "collectionListType", "emptyText", "isLoading", "loadingAmount", "onListItemClick", "ListItemComponent", "ListItemProps"];
 
 function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$3 = function styles() {
+var styles$4 = function styles() {
   return {
     root: {
       width: '100%'
@@ -1813,23 +1813,23 @@ var defaultProps$3 = {
   isLoading: false,
   loadingAmount: 3,
   onListItemClick: undefined,
-  ListItemComponent: Component$4,
+  ListItemComponent: Component$5,
   ListItemProps: {}
 };
 CollectionList.propTypes = propTypes$3;
 CollectionList.defaultProps = defaultProps$3;
 
-var Component$3 = withStyles(styles$3, {
+var Component$4 = withStyles(styles$4, {
   name: 'VdtCollectionList'
 })(CollectionList);
-Component$3.displayName = 'CollectionList';
+Component$4.displayName = 'CollectionList';
 
 var _excluded$3 = ["className", "classes", "itemType", "onClick", "parseMetadataOptions", "primaryFieldName", "primaryFunction", "secondaryFieldName", "secondaryFunction", "isLoading", "AvatarComponent", "AvatarProps", "ActionComponent", "ActionProps"];
 
 function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$2 = function styles() {
+var styles$3 = function styles() {
   return {
     root: {
       '&:hover .VdtCollectionListItem-secondaryAction': {
@@ -2003,7 +2003,7 @@ var defaultProps$2 = {
   onClick: undefined,
   ActionComponent: undefined,
   ActionProps: {},
-  AvatarComponent: Component$5,
+  AvatarComponent: Component$6,
   AvatarProps: {},
   parseMetadataOptions: {
     flat: true,
@@ -2014,17 +2014,17 @@ var defaultProps$2 = {
 ItemListItem.propTypes = propTypes$2;
 ItemListItem.defaultProps = defaultProps$2;
 
-var Component$2 = withStyles(styles$2, {
+var Component$3 = withStyles(styles$3, {
   name: 'VdtItemListItem'
 })(ItemListItem);
-Component$2.displayName = 'ItemListItem';
+Component$3.displayName = 'ItemListItem';
 
 var _excluded$2 = ["className", "classes", "itemListType", "emptyText", "isLoading", "loadingAmount", "onListItemClick", "ListItemComponent", "ListItemProps"];
 
 function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1 = function styles() {
+var styles$2 = function styles() {
   return {
     root: {
       width: '100%'
@@ -2119,23 +2119,23 @@ var defaultProps$1 = {
   isLoading: false,
   loadingAmount: 3,
   onListItemClick: undefined,
-  ListItemComponent: Component$2,
+  ListItemComponent: Component$3,
   ListItemProps: {}
 };
 ItemList.propTypes = propTypes$1;
 ItemList.defaultProps = defaultProps$1;
 
-var Component$1 = withStyles(styles$1, {
+var Component$2 = withStyles(styles$2, {
   name: 'VdtItemList'
 })(ItemList);
-Component$1.displayName = 'ItemList';
+Component$2.displayName = 'ItemList';
 
 var _excluded$1 = ["className", "classes", "entities", "emptyText", "isLoading", "loadingAmount", "onItemListItemClick", "onCollectionListItemClick", "onListItemClick", "ItemListItemComponent", "ItemListItemProps", "CollectionListItemComponent", "CollectionListItemProps", "ListItemProps"];
 
 function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles = function styles() {
+var styles$1 = function styles() {
   return {
     root: {
       width: '100%'
@@ -2278,19 +2278,140 @@ var defaultProps = {
   onItemListItemClick: undefined,
   onCollectionListItemClick: undefined,
   onListItemClick: undefined,
-  ItemListItemComponent: Component$2,
+  ItemListItemComponent: Component$3,
   ItemListItemProps: {},
-  CollectionListItemComponent: Component$4,
+  CollectionListItemComponent: Component$5,
   CollectionListItemProps: {},
   ListItemProps: {}
 };
 EntityList.propTypes = propTypes;
 EntityList.defaultProps = defaultProps;
 
-var Component = withStyles(styles, {
+var Component$1 = withStyles(styles$1, {
   name: 'VdtEntityList'
 })(EntityList);
-Component.displayName = 'EntityList';
+Component$1.displayName = 'EntityList';
+
+var styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    pointerEvents: 'none',
+    width: 'inherit',
+    height: 'inherit'
+  },
+  row: {},
+  image: {
+    objectFit: 'cover',
+    // Left align if multiple images
+    '&:last-child:not(:first-child)': {
+      marginRight: 'auto'
+    }
+  },
+  notStretchSingle: {
+    // Do not set full width or height for single image
+    '&:last-child&:first-child': {
+      objectFit: 'contain'
+    }
+  }
+};
+function ImageCollage(_ref) {
+  var className = _ref.className,
+      classes = _ref.classes,
+      urls = _ref.urls,
+      maxImages = _ref.maxImages,
+      maxColumns = _ref.maxColumns,
+      showSingleStretched = _ref.showSingleStretched,
+      showLastRowStretched = _ref.showLastRowStretched,
+      onError = _ref.onError;
+
+  if (!(urls !== null && urls !== void 0 && urls.length) || maxImages < 0 || maxColumns < 0) {
+    return null;
+  }
+
+  var amountOfImages = Math.min(maxImages, urls.length);
+  var amountOfCols = Math.min(maxColumns, amountOfImages);
+  var amountOfRows = Math.ceil(amountOfImages / amountOfCols);
+  var height = "".concat(100 / amountOfRows, "%");
+  var amountOfImagesOnLastRow = amountOfImages % amountOfCols || amountOfCols;
+  return /*#__PURE__*/jsx("div", {
+    className: clsx(className, classes.root, 'VdtImageCollage-root'),
+    children: urls.slice(0, maxImages).map(function (url, i) {
+      var _clsx;
+
+      var isLastRow = Math.ceil((i + 1) / amountOfCols) === amountOfRows;
+      var width = "".concat(100 / Math.max(Math.min(isLastRow && showLastRowStretched ? amountOfImagesOnLastRow : amountOfCols, amountOfImages), 1), "%");
+      return /*#__PURE__*/jsx("img", {
+        className: clsx((_clsx = {}, _defineProperty(_clsx, classes.image, true), _defineProperty(_clsx, 'VdtImageCollage-image', true), _defineProperty(_clsx, classes.notStretchSingle, !showSingleStretched), _clsx)),
+        src: url,
+        style: {
+          height: height,
+          width: width
+        },
+        onError: onError,
+        alt: ""
+      }, url);
+    })
+  });
+}
+ImageCollage.propTypes = {
+  /**
+   * Override or extend the styles applied to the component
+   */
+  classes: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * Override styles with className
+   */
+  className: PropTypes.string,
+
+  /**
+   * Image urls to show
+   */
+  urls: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * Max amount of columns to display
+   */
+  maxColumns: PropTypes.number,
+
+  /**
+   * Max amount of images to display
+   */
+  maxImages: PropTypes.number,
+
+  /**
+   * Whether to stretch full width or follow height for single image
+   */
+  showSingleStretched: PropTypes.bool,
+
+  /**
+   * Whether to stretch full width or follow height for last images
+   */
+  showLastRowStretched: PropTypes.bool,
+
+  /**
+   * Callback for error
+   */
+  onError: PropTypes.func
+};
+ImageCollage.defaultProps = {
+  className: undefined,
+  classes: {},
+  urls: [],
+  maxColumns: 2,
+  maxImages: 4,
+  showSingleStretched: true,
+  showLastRowStretched: true,
+  onError: function onError() {
+    return null;
+  }
+};
+
+var Component = withStyles(styles, {
+  name: 'VdtImageCollage'
+})(ImageCollage);
+Component.displayName = 'ImageCollage';
 
 var _excluded = ["themes", "defaultPaletteKey", "localStoragePaletteKey", "MuiThemeProviderProps", "CssBaselineProps", "children"];
 
@@ -2360,9 +2481,7 @@ function ThemeProvider(_ref) {
     var newPaletteKey = paletteKeys[0];
 
     if (paletteKeys.length > 0 && palette === paletteKeys[0]) {
-      var _paletteKeys = _slicedToArray(paletteKeys, 2);
-
-      newPaletteKey = _paletteKeys[1];
+      newPaletteKey = paletteKeys[1];
     }
 
     updatePalette(newPaletteKey);
@@ -2400,4 +2519,4 @@ function useThemeContext() {
   return context;
 }
 
-export { Component$3 as CollectionList, Component$4 as CollectionListItem, Component$5 as EntityAvatar, Component$6 as EntityIcon, Component as EntityList, Component$1 as ItemList, Component$2 as ItemListItem, Component$7 as MimeTypeIcon, ThemeContext, ThemeProvider, useThemeContext };
+export { Component$4 as CollectionList, Component$5 as CollectionListItem, Component$6 as EntityAvatar, Component$7 as EntityIcon, Component$1 as EntityList, Component as ImageCollage, Component$2 as ItemList, Component$3 as ItemListItem, Component$8 as MimeTypeIcon, ThemeContext, ThemeProvider, useThemeContext };

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles$8 = require('@mui/styles');
+var styles$9 = require('@mui/styles');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -1174,7 +1174,7 @@ function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) {
 var AUDIO_MIMETYPE_PREFIX = 'audio';
 var VIDEO_MIMETYPE_PREFIX = 'video';
 var IMAGE_MIMETYPE_PREFIX = 'image';
-var styles$7 = function styles() {
+var styles$8 = function styles() {
   return {
     root: {}
   };
@@ -1255,10 +1255,10 @@ MimeTypeIcon.defaultProps = {
   placeholderIcon: NoteAddIcon__default["default"]
 };
 
-var Component$7 = styles$8.withStyles(styles$7, {
+var Component$8 = styles$9.withStyles(styles$8, {
   name: 'VdtMimeTypeIcon'
 })(MimeTypeIcon);
-Component$7.displayName = 'MimeTypeIcon';
+Component$8.displayName = 'MimeTypeIcon';
 
 var _excluded$7 = ["mediaType"],
     _excluded2 = ["className", "classes", "entityType", "mediaType", "itemIcon", "collectionIcon", "libraryIcon", "libraryAudioIcon", "libraryVideoIcon", "libraryImageIcon", "placeholderIcon", "MediaTypeComponent", "MediaTypeProps"];
@@ -1274,12 +1274,12 @@ function MediaTypeIcon(_ref) {
   var mediaType = _ref.mediaType,
       props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
 
-  return /*#__PURE__*/jsxRuntime.jsx(Component$7, _objectSpread$7({
+  return /*#__PURE__*/jsxRuntime.jsx(Component$8, _objectSpread$7({
     mimeType: mediaType
   }, props));
 }
 
-var styles$6 = function styles() {
+var styles$7 = function styles() {
   return {
     root: {},
     mediaType: {}
@@ -1302,6 +1302,7 @@ function EntityIcon(_ref2) {
       props = _objectWithoutProperties__default["default"](_ref2, _excluded2);
 
   var IconComponent = placeholderIcon;
+  var iconProps = {};
 
   if (entityType && typeof entityType === 'string') {
     switch (entityType.toLowerCase()) {
@@ -1310,12 +1311,11 @@ function EntityIcon(_ref2) {
           IconComponent = itemIcon;
 
           if (mediaType && typeof mediaType === 'string') {
-            IconComponent = /*#__PURE__*/react.memo(function (iconProps) {
-              return /*#__PURE__*/jsxRuntime.jsx(MediaTypeComponent, _objectSpread$7(_objectSpread$7({
-                className: clsx__default["default"](classes.mediaType, 'VdtEntityIcon-mediaType'),
-                mediaType: mediaType
-              }, MediaTypeProps), iconProps));
-            }, [mediaType, MediaTypeProps]);
+            IconComponent = MediaTypeComponent;
+            iconProps = _objectSpread$7({
+              className: clsx__default["default"](classes.mediaType, 'VdtEntityIcon-mediaType'),
+              mediaType: mediaType
+            }, MediaTypeProps);
           }
 
           break;
@@ -1341,9 +1341,9 @@ function EntityIcon(_ref2) {
     }
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(IconComponent, _objectSpread$7({
+  return /*#__PURE__*/jsxRuntime.jsx(IconComponent, _objectSpread$7(_objectSpread$7({
     className: clsx__default["default"](className, classes.root, 'VdtEntityIcon-root')
-  }, props));
+  }, iconProps), props));
 }
 EntityIcon.propTypes = {
   /**
@@ -1427,17 +1427,17 @@ EntityIcon.defaultProps = {
   MediaTypeProps: {}
 };
 
-var Component$6 = styles$8.withStyles(styles$6, {
+var Component$7 = styles$9.withStyles(styles$7, {
   name: 'VdtEntityIcon'
 })(EntityIcon);
-Component$6.displayName = 'EntityIcon';
+Component$7.displayName = 'EntityIcon';
 
 var _excluded$6 = ["className", "classes", "isLoading", "entityType", "mediaType", "variant", "IconComponent", "IconProps", "SkeletonProps"];
 
 function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$5 = function styles() {
+var styles$6 = function styles() {
   return {
     root: {
       transition: 'background-color .2s ease-out'
@@ -1534,22 +1534,22 @@ EntityAvatar.defaultProps = {
   mediaType: undefined,
   variant: 'square',
   isLoading: false,
-  IconComponent: Component$6,
+  IconComponent: Component$7,
   IconProps: {},
   SkeletonProps: {}
 };
 
-var Component$5 = styles$8.withStyles(styles$5, {
+var Component$6 = styles$9.withStyles(styles$6, {
   name: 'VdtEntityAvatar'
 })(EntityAvatar);
-Component$5.displayName = 'EntityAvatar';
+Component$6.displayName = 'EntityAvatar';
 
 var _excluded$5 = ["className", "classes", "collectionType", "onClick", "parseMetadataOptions", "primaryFieldName", "primaryFunction", "secondaryFieldName", "secondaryFunction", "isLoading", "AvatarComponent", "AvatarProps", "ActionComponent", "ActionProps"];
 
 function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$4 = function styles() {
+var styles$5 = function styles() {
   return {
     root: {
       '&:hover .VdtCollectionListItem-secondaryAction': {
@@ -1721,7 +1721,7 @@ var defaultProps$4 = {
   onClick: undefined,
   ActionComponent: undefined,
   ActionProps: {},
-  AvatarComponent: Component$5,
+  AvatarComponent: Component$6,
   AvatarProps: {},
   parseMetadataOptions: {
     flat: true,
@@ -1732,17 +1732,17 @@ var defaultProps$4 = {
 CollectionListItem.propTypes = propTypes$4;
 CollectionListItem.defaultProps = defaultProps$4;
 
-var Component$4 = styles$8.withStyles(styles$4, {
+var Component$5 = styles$9.withStyles(styles$5, {
   name: 'VdtCollectionListItem'
 })(CollectionListItem);
-Component$4.displayName = 'CollectionListItem';
+Component$5.displayName = 'CollectionListItem';
 
 var _excluded$4 = ["className", "classes", "collectionListType", "emptyText", "isLoading", "loadingAmount", "onListItemClick", "ListItemComponent", "ListItemProps"];
 
 function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$3 = function styles() {
+var styles$4 = function styles() {
   return {
     root: {
       width: '100%'
@@ -1838,23 +1838,23 @@ var defaultProps$3 = {
   isLoading: false,
   loadingAmount: 3,
   onListItemClick: undefined,
-  ListItemComponent: Component$4,
+  ListItemComponent: Component$5,
   ListItemProps: {}
 };
 CollectionList.propTypes = propTypes$3;
 CollectionList.defaultProps = defaultProps$3;
 
-var Component$3 = styles$8.withStyles(styles$3, {
+var Component$4 = styles$9.withStyles(styles$4, {
   name: 'VdtCollectionList'
 })(CollectionList);
-Component$3.displayName = 'CollectionList';
+Component$4.displayName = 'CollectionList';
 
 var _excluded$3 = ["className", "classes", "itemType", "onClick", "parseMetadataOptions", "primaryFieldName", "primaryFunction", "secondaryFieldName", "secondaryFunction", "isLoading", "AvatarComponent", "AvatarProps", "ActionComponent", "ActionProps"];
 
 function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$2 = function styles() {
+var styles$3 = function styles() {
   return {
     root: {
       '&:hover .VdtCollectionListItem-secondaryAction': {
@@ -2028,7 +2028,7 @@ var defaultProps$2 = {
   onClick: undefined,
   ActionComponent: undefined,
   ActionProps: {},
-  AvatarComponent: Component$5,
+  AvatarComponent: Component$6,
   AvatarProps: {},
   parseMetadataOptions: {
     flat: true,
@@ -2039,17 +2039,17 @@ var defaultProps$2 = {
 ItemListItem.propTypes = propTypes$2;
 ItemListItem.defaultProps = defaultProps$2;
 
-var Component$2 = styles$8.withStyles(styles$2, {
+var Component$3 = styles$9.withStyles(styles$3, {
   name: 'VdtItemListItem'
 })(ItemListItem);
-Component$2.displayName = 'ItemListItem';
+Component$3.displayName = 'ItemListItem';
 
 var _excluded$2 = ["className", "classes", "itemListType", "emptyText", "isLoading", "loadingAmount", "onListItemClick", "ListItemComponent", "ListItemProps"];
 
 function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1 = function styles() {
+var styles$2 = function styles() {
   return {
     root: {
       width: '100%'
@@ -2144,23 +2144,23 @@ var defaultProps$1 = {
   isLoading: false,
   loadingAmount: 3,
   onListItemClick: undefined,
-  ListItemComponent: Component$2,
+  ListItemComponent: Component$3,
   ListItemProps: {}
 };
 ItemList.propTypes = propTypes$1;
 ItemList.defaultProps = defaultProps$1;
 
-var Component$1 = styles$8.withStyles(styles$1, {
+var Component$2 = styles$9.withStyles(styles$2, {
   name: 'VdtItemList'
 })(ItemList);
-Component$1.displayName = 'ItemList';
+Component$2.displayName = 'ItemList';
 
 var _excluded$1 = ["className", "classes", "entities", "emptyText", "isLoading", "loadingAmount", "onItemListItemClick", "onCollectionListItemClick", "onListItemClick", "ItemListItemComponent", "ItemListItemProps", "CollectionListItemComponent", "CollectionListItemProps", "ListItemProps"];
 
 function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles = function styles() {
+var styles$1 = function styles() {
   return {
     root: {
       width: '100%'
@@ -2303,19 +2303,140 @@ var defaultProps = {
   onItemListItemClick: undefined,
   onCollectionListItemClick: undefined,
   onListItemClick: undefined,
-  ItemListItemComponent: Component$2,
+  ItemListItemComponent: Component$3,
   ItemListItemProps: {},
-  CollectionListItemComponent: Component$4,
+  CollectionListItemComponent: Component$5,
   CollectionListItemProps: {},
   ListItemProps: {}
 };
 EntityList.propTypes = propTypes;
 EntityList.defaultProps = defaultProps;
 
-var Component = styles$8.withStyles(styles, {
+var Component$1 = styles$9.withStyles(styles$1, {
   name: 'VdtEntityList'
 })(EntityList);
-Component.displayName = 'EntityList';
+Component$1.displayName = 'EntityList';
+
+var styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    pointerEvents: 'none',
+    width: 'inherit',
+    height: 'inherit'
+  },
+  row: {},
+  image: {
+    objectFit: 'cover',
+    // Left align if multiple images
+    '&:last-child:not(:first-child)': {
+      marginRight: 'auto'
+    }
+  },
+  notStretchSingle: {
+    // Do not set full width or height for single image
+    '&:last-child&:first-child': {
+      objectFit: 'contain'
+    }
+  }
+};
+function ImageCollage(_ref) {
+  var className = _ref.className,
+      classes = _ref.classes,
+      urls = _ref.urls,
+      maxImages = _ref.maxImages,
+      maxColumns = _ref.maxColumns,
+      showSingleStretched = _ref.showSingleStretched,
+      showLastRowStretched = _ref.showLastRowStretched,
+      onError = _ref.onError;
+
+  if (!(urls !== null && urls !== void 0 && urls.length) || maxImages < 0 || maxColumns < 0) {
+    return null;
+  }
+
+  var amountOfImages = Math.min(maxImages, urls.length);
+  var amountOfCols = Math.min(maxColumns, amountOfImages);
+  var amountOfRows = Math.ceil(amountOfImages / amountOfCols);
+  var height = "".concat(100 / amountOfRows, "%");
+  var amountOfImagesOnLastRow = amountOfImages % amountOfCols || amountOfCols;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: clsx__default["default"](className, classes.root, 'VdtImageCollage-root'),
+    children: urls.slice(0, maxImages).map(function (url, i) {
+      var _clsx;
+
+      var isLastRow = Math.ceil((i + 1) / amountOfCols) === amountOfRows;
+      var width = "".concat(100 / Math.max(Math.min(isLastRow && showLastRowStretched ? amountOfImagesOnLastRow : amountOfCols, amountOfImages), 1), "%");
+      return /*#__PURE__*/jsxRuntime.jsx("img", {
+        className: clsx__default["default"]((_clsx = {}, _defineProperty__default["default"](_clsx, classes.image, true), _defineProperty__default["default"](_clsx, 'VdtImageCollage-image', true), _defineProperty__default["default"](_clsx, classes.notStretchSingle, !showSingleStretched), _clsx)),
+        src: url,
+        style: {
+          height: height,
+          width: width
+        },
+        onError: onError,
+        alt: ""
+      }, url);
+    })
+  });
+}
+ImageCollage.propTypes = {
+  /**
+   * Override or extend the styles applied to the component
+   */
+  classes: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * Override styles with className
+   */
+  className: PropTypes.string,
+
+  /**
+   * Image urls to show
+   */
+  urls: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * Max amount of columns to display
+   */
+  maxColumns: PropTypes.number,
+
+  /**
+   * Max amount of images to display
+   */
+  maxImages: PropTypes.number,
+
+  /**
+   * Whether to stretch full width or follow height for single image
+   */
+  showSingleStretched: PropTypes.bool,
+
+  /**
+   * Whether to stretch full width or follow height for last images
+   */
+  showLastRowStretched: PropTypes.bool,
+
+  /**
+   * Callback for error
+   */
+  onError: PropTypes.func
+};
+ImageCollage.defaultProps = {
+  className: undefined,
+  classes: {},
+  urls: [],
+  maxColumns: 2,
+  maxImages: 4,
+  showSingleStretched: true,
+  showLastRowStretched: true,
+  onError: function onError() {
+    return null;
+  }
+};
+
+var Component = styles$9.withStyles(styles, {
+  name: 'VdtImageCollage'
+})(ImageCollage);
+Component.displayName = 'ImageCollage';
 
 var _excluded = ["themes", "defaultPaletteKey", "localStoragePaletteKey", "MuiThemeProviderProps", "CssBaselineProps", "children"];
 
@@ -2385,9 +2506,7 @@ function ThemeProvider(_ref) {
     var newPaletteKey = paletteKeys[0];
 
     if (paletteKeys.length > 0 && palette === paletteKeys[0]) {
-      var _paletteKeys = _slicedToArray__default["default"](paletteKeys, 2);
-
-      newPaletteKey = _paletteKeys[1];
+      newPaletteKey = paletteKeys[1];
     }
 
     updatePalette(newPaletteKey);
@@ -2425,14 +2544,15 @@ function useThemeContext() {
   return context;
 }
 
-exports.CollectionList = Component$3;
-exports.CollectionListItem = Component$4;
-exports.EntityAvatar = Component$5;
-exports.EntityIcon = Component$6;
-exports.EntityList = Component;
-exports.ItemList = Component$1;
-exports.ItemListItem = Component$2;
-exports.MimeTypeIcon = Component$7;
+exports.CollectionList = Component$4;
+exports.CollectionListItem = Component$5;
+exports.EntityAvatar = Component$6;
+exports.EntityIcon = Component$7;
+exports.EntityList = Component$1;
+exports.ImageCollage = Component;
+exports.ItemList = Component$2;
+exports.ItemListItem = Component$3;
+exports.MimeTypeIcon = Component$8;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.useThemeContext = useThemeContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-mui",
-  "version": "22.3.0-pre.5",
+  "version": "22.3.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "private": false,
   "publishConfig": {
@@ -26,40 +26,40 @@
     "new:component": "hygen new component"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.0",
-    "@mui/icons-material": "^5.5.1",
-    "@mui/lab": "^5.0.0-alpha.75",
-    "@mui/material": "^5.5.3",
-    "@mui/styles": "^5.5.3",
-    "@vidispine/proptypes": "22.3.0-pre.5",
-    "@vidispine/vdt-api": "22.3.0-pre.5",
-    "@vidispine/vdt-js": "22.3.0-pre.5",
-    "@vidispine/vdt-react": "22.3.0-pre.5",
-    "@vidispine/vdt-videojs-react": "22.3.0-pre.5",
-    "clsx": "^1.1.1"
+    "@babel/runtime": "^7.18.9",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.95",
+    "@mui/material": "^5.10.1",
+    "@mui/styles": "^5.9.3",
+    "@vidispine/proptypes": "22.3.0",
+    "@vidispine/vdt-api": "22.3.0",
+    "@vidispine/vdt-js": "22.3.0",
+    "@vidispine/vdt-react": "22.3.0",
+    "@vidispine/vdt-videojs-react": "22.3.0",
+    "clsx": "^1.2.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.0",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@svgr/rollup": "^6.2.1",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.4",
-    "@vidispine/eslint-config-react": "22.3.0-pre.5",
-    "@vidispine/eslint-config-storybook": "22.3.0-pre.5",
-    "@vidispine/prettier-config": "22.3.0-pre.5",
-    "@vidispine/vdt-storybook": "22.3.0-pre.5",
-    "hygen": "^6.1.0",
+    "@babel/core": "^7.18.10",
+    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@svgr/rollup": "^6.3.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@vidispine/eslint-config-react": "22.3.0",
+    "@vidispine/eslint-config-storybook": "22.3.0",
+    "@vidispine/prettier-config": "22.3.0",
+    "@vidispine/vdt-storybook": "22.3.0",
+    "hygen": "^6.2.8",
     "prop-types": "^15.8.1",
-    "rollup": "^2.67.0",
+    "rollup": "^2.78.0",
     "rollup-plugin-peer-deps-external": "^2.2.4"
   },
   "eslintConfig": {
@@ -69,5 +69,5 @@
     ]
   },
   "prettier": "@vidispine/prettier-config",
-  "gitHead": "b7c1ead11e7e2fc68c5fb0072e6dbdb019f26ddc"
+  "gitHead": "bf53eaf85f596bc3cc70b490d18dbf3c59045350"
 }