@vidispine/vdt-materialui 22.4.0-pre.4 → 22.4.0-pre.5

package/dist/index.es.js

@@ -45,7 +45,7 @@ import Box from '@material-ui/core/Box';
 import Button$1 from '@material-ui/core/Button';
 import { FORM_ERROR } from 'final-form';
 import Paper from '@material-ui/core/Paper';
-import { parseFacetType, parseNowDate, formatTimeCodeSeconds, roles, parseShapeType, parseTranscodePreset, parseTimespan, createTimeBase, formatTimeCodeSmpte, createMetadataType, formatTimeCodeText, formatTimeCodeType, parseMetadataType, parseAudioComponent, parseContainerComponent, parseFileType, parseSimpleMetadataType, parseVideoComponent, findNearestThumbnail, parseHighlightTimespanList, metadataTypeToWebVtt, filterShapeSource, getShapeMediaType, getDocumentType } from '@vidispine/vdt-js';
+import { parseFacetType, parseNowDate, formatTimeCodeSeconds, ROLE_NAMES, parseShapeType, parseTranscodePreset, parseTimespan, createTimeBase, formatTimeCodeSmpte, createMetadataType, formatTimeCodeText, formatTimeCodeType, parseMetadataType, parseAudioComponent, parseContainerComponent, parseFileType, parseSimpleMetadataType, parseVideoComponent, findNearestThumbnail, parseHighlightTimespanList, metadataTypeToWebVtt, filterShapeSource, getShapeMediaType, getDocumentType } from '@vidispine/vdt-js';
 import IconButton from '@material-ui/core/IconButton';
 import CancelIcon from '@material-ui/icons/Cancel';
 import { Cancel, CheckCircle, Replay, ExpandLess, Label, Search, Delete, Block, ExpandMore, Folder, ArrowDropUp, ArrowDropDown, Wallpaper, Add, Visibility as Visibility$1, VisibilityOff as VisibilityOff$1 } from '@material-ui/icons';
@@ -4812,7 +4812,7 @@ function JobCard(_ref2) {
       className: classes.CardHeader,
       title: jobId,
       action: /*#__PURE__*/jsx(HasRole, {
-        roleName: [roles.ITEM_WRITE],
+        roleName: [ROLE_NAMES.ITEM_WRITE],
         allow: /*#__PURE__*/jsx(JobMenuComponent, _objectSpread$2u({
           jobType: jobType,
           onAbort: onAbort,
@@ -6320,8 +6320,8 @@ var parseTimespanList = function parseTimespanList(_ref) {
   var parseOptions = {
     includeTimespanAttributes: true,
     includeGroupAttributes: true,
-    flatTimespan: true,
-    flatGroup: true,
+    flat: true,
+    overrideGroup: true,
     groupAsList: true,
     joinValue: ','
   };
@@ -8841,7 +8841,7 @@ function ItemMetadataEdit(_ref) {
   var initialValues = useMemo(function () {
     var values = parseMetadataType(metadataType, {
       flat: true,
-      arrayOnSingle: false
+      arrayOnSingleValue: false
     });
     var valuesWithBooleans = Object.entries(values).reduce(stringsToBooleans, {});
     return valuesWithBooleans;
@@ -13737,11 +13737,9 @@ function AudioComponentTypeTableBody(_ref) {
   }, [audioComponentType]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(TableHead, {
-      children: /*#__PURE__*/jsxs("span", {
+      children: /*#__PURE__*/jsx("span", {
         className: classes.TableHeadLabel,
-        children: ["Audio Track ", /*#__PURE__*/jsx(ExpandMoreIcon, {
-          fontSize: "small"
-        })]
+        children: "Audio Track"
       })
     }), /*#__PURE__*/jsxs(TableBody$1, {
       className: className,
@@ -13789,11 +13787,9 @@ function ContainerComponentTypeTableBody(_ref) {
   }, [containerComponentType]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(TableHead, {
-      children: /*#__PURE__*/jsxs("span", {
+      children: /*#__PURE__*/jsx("span", {
         className: classes.TableHeadLabel,
-        children: ["Media Container ", /*#__PURE__*/jsx(ExpandMoreIcon, {
-          fontSize: "small"
-        })]
+        children: "Media Container"
       })
     }), /*#__PURE__*/jsxs(TableBody$1, {
       className: className,
@@ -13885,11 +13881,9 @@ function FileTypeTableBody(_ref2) {
   })) || [];
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(TableHead, {
-      children: /*#__PURE__*/jsxs("span", {
+      children: /*#__PURE__*/jsx("span", {
         className: classes.TableHeadLabel,
-        children: ["File Component ", /*#__PURE__*/jsx(ExpandMoreIcon, {
-          fontSize: "small"
-        })]
+        children: "File Component"
       })
     }), /*#__PURE__*/jsxs(TableBody$1, {
       className: className,
@@ -14101,11 +14095,9 @@ function VideoComponentTypeTableBody(_ref) {
   }, [videoComponentType]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(TableHead, {
-      children: /*#__PURE__*/jsxs("span", {
+      children: /*#__PURE__*/jsx("span", {
         className: classes.TableHeadLabel,
-        children: ["Video Track ", /*#__PURE__*/jsx(ExpandMoreIcon, {
-          fontSize: "small"
-        })]
+        children: "Video Track"
       })
     }), /*#__PURE__*/jsxs(TableBody$1, {
       className: className,
@@ -14207,7 +14199,7 @@ function ShapeTypeTableBody(_ref2) {
       _shapeType$audioCompo = shapeType.audioComponent,
       audioComponentList = _shapeType$audioCompo === void 0 ? [] : _shapeType$audioCompo;
   var mediaType = getMediaType(shapeType);
-  var fileTypeList = containerComponentType.file;
+  var fileTypeList = containerComponentType === null || containerComponentType === void 0 ? void 0 : containerComponentType.file;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs(TableBody$1, {
       className: className,
@@ -14392,6 +14384,7 @@ function ItemShapeRow(_ref) {
     path = get(file, '[0].path', 'undefined');
   }
 
+  var shapeTags = shapeType.tag.join(', ');
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs(TableRow$4, _objectSpread$1X(_objectSpread$1X({}, TableRowProps), {}, {
       children: [/*#__PURE__*/jsx(TableCell$1, {
@@ -14401,7 +14394,7 @@ function ItemShapeRow(_ref) {
           children: open ? /*#__PURE__*/jsx(ExpandMoreIcon, {}) : /*#__PURE__*/jsx(ChevronRightIcon, {})
         })
       }), /*#__PURE__*/jsx(TableCell$1, {
-        children: shape.tag
+        children: shapeTags
       }), /*#__PURE__*/jsxs(Hidden, {
         smDown: true,
         children: [/*#__PURE__*/jsx(TableCell$1, {
@@ -16933,8 +16926,7 @@ var getComponentSize = function getComponentSize(containerRef) {
     width: clientWidth,
     height: clientHeight
   };
-}; // TODO: Make this internal (should very rarely be used directly)
-
+};
 
 function DragLayer(_ref5) {
   var _ref5$allowedTypes = _ref5.allowedTypes,
@@ -18037,7 +18029,7 @@ CollectionListItem.defaultProps = {
   ListItemProps: {},
   parseMetadataOptions: {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   },
   skeleton: false
 };
@@ -18130,7 +18122,7 @@ function CollectionMetadataEdit(_ref) {
     }) : [];
     var parsedValues = parseMetadataType(metadataType, {
       flat: true,
-      arrayOnSingle: false
+      arrayOnSingleValue: false
     });
     var values = Object.entries(parsedValues).reduce(function (acc, cur) {
       var _cur = _slicedToArray(cur, 2),
@@ -19411,7 +19403,7 @@ var defaultListItemTextComponent$1 = function defaultListItemTextComponent(_ref)
 
   var _parseTimespan = parseTimespan(genericMetadataTimespan, {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   }),
       title = _parseTimespan.title,
       user = _parseTimespan.user,
@@ -19691,7 +19683,7 @@ var defaultListItemTextComponent = function defaultListItemTextComponent(_ref) {
 
   var _parseTimespan = parseTimespan(genericMetadataTimespan, {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   }),
       title = _parseTimespan.title,
       originalFilename = _parseTimespan.originalFilename,
@@ -19702,7 +19694,7 @@ var defaultListItemTextComponent = function defaultListItemTextComponent(_ref) {
 
   var timedMetadata = parseTimespan(timedMetadataTimespan, {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   });
   var start = formatTimeCodeText(startText);
   var end = formatTimeCodeText(endText);
@@ -19814,7 +19806,7 @@ var defaultListItemAvatarComponent = function defaultListItemAvatarComponent(_re
 
   var _parseTimespan2 = parseTimespan(genericMetadataTimespan, {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   }),
       durationSeconds = _parseTimespan2.durationSeconds,
       mimeType = _parseTimespan2.mimeType;
@@ -21199,7 +21191,7 @@ ItemListItem.defaultProps = {
   ListItemTextProps: {},
   parseMetadataOptions: {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   },
   skeleton: false
 };
@@ -22074,8 +22066,7 @@ var onDownloadWebVTT = function onDownloadWebVTT(_ref) {
     }).then(function (_ref2) {
       var data = _ref2.data;
       var metadataType = data.metadata;
-      var webVtt = metadataTypeToWebVtt({
-        metadataType: metadataType,
+      var webVtt = metadataTypeToWebVtt(metadataType, {
         subtitleGroup: subtitleGroup,
         subtitleField: subtitleField
       });
@@ -23968,8 +23959,7 @@ function ItemVideoPlayer(_ref) {
       metadataType = itemType.metadata,
       itemId = itemType.id;
   var webVtt = useMemo(function () {
-    return metadataTypeToWebVtt({
-      metadataType: metadataType,
+    return metadataTypeToWebVtt(metadataType, {
       subtitleGroup: subtitleGroup,
       subtitleField: subtitleField,
       sampleRate: sampleRate
@@ -27229,8 +27219,7 @@ function SavedSearchList(_ref) {
 
   return /*#__PURE__*/jsx(Component$A, _objectSpread$V({
     searchProps: searchProps,
-    searchPlaceholder: searchPlaceholderText // TODO: Extract CollectionTableComponent to separate component to describe it's interface in a story
-    // eslint-disable-next-line react/no-unstable-nested-components
+    searchPlaceholder: searchPlaceholderText // eslint-disable-next-line react/no-unstable-nested-components
     ,
     CollectionTableComponent: function CollectionTableComponent(_ref2) {
       var collectionListType = _ref2.collectionListType,
@@ -30780,8 +30769,7 @@ var useDeleteHook = function useDeleteHook(entity, entityId) {
     handleValidation: handleValidation,
     onDelete: onDelete
   };
-}; // TODO: Switch so it's only DialogContent
-
+};
 
 function EntityDeleteDialog(_ref) {
   var open = _ref.open,
@@ -31719,10 +31707,14 @@ function BinList(_ref3) {
         metadata: {
           field: start ? [{
             key: 'start',
-            value: formatTimeCodeText(start).toText()
+            value: formatTimeCodeText(start).toText({
+              fraction: true
+            })
           }, {
             key: 'end',
-            value: formatTimeCodeText(end).toText()
+            value: formatTimeCodeText(end).toText({
+              fraction: true
+            })
           }] : []
         }
       };
@@ -37652,8 +37644,8 @@ function EventTimeline(_ref) {
       itemSearchDocument = _ref.itemSearchDocument;
 
   var _parseMetadataType = parseMetadataType(itemType.metadata, {
-    arrayOnSingle: false,
-    flat: true
+    flat: true,
+    arrayOnSingleValue: false
   }),
       durationSeconds = _parseMetadataType.durationSeconds;
 

package/dist/index.js

@@ -5003,7 +5003,7 @@ function JobCard(_ref2) {
       className: classes.CardHeader,
       title: jobId,
       action: /*#__PURE__*/jsxRuntime.jsx(vdtReact.HasRole, {
-        roleName: [vdtJs.roles.ITEM_WRITE],
+        roleName: [vdtJs.ROLE_NAMES.ITEM_WRITE],
         allow: /*#__PURE__*/jsxRuntime.jsx(JobMenuComponent, _objectSpread$2u({
           jobType: jobType,
           onAbort: onAbort,
@@ -6511,8 +6511,8 @@ var parseTimespanList = function parseTimespanList(_ref) {
   var parseOptions = {
     includeTimespanAttributes: true,
     includeGroupAttributes: true,
-    flatTimespan: true,
-    flatGroup: true,
+    flat: true,
+    overrideGroup: true,
     groupAsList: true,
     joinValue: ','
   };
@@ -9032,7 +9032,7 @@ function ItemMetadataEdit(_ref) {
   var initialValues = React.useMemo(function () {
     var values = vdtJs.parseMetadataType(metadataType, {
       flat: true,
-      arrayOnSingle: false
+      arrayOnSingleValue: false
     });
     var valuesWithBooleans = Object.entries(values).reduce(stringsToBooleans, {});
     return valuesWithBooleans;
@@ -13928,11 +13928,9 @@ function AudioComponentTypeTableBody(_ref) {
   }, [audioComponentType]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(TableHead, {
-      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
         className: classes.TableHeadLabel,
-        children: ["Audio Track ", /*#__PURE__*/jsxRuntime.jsx(ExpandMoreIcon__default["default"], {
-          fontSize: "small"
-        })]
+        children: "Audio Track"
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(TableBody__default["default"], {
       className: className,
@@ -13980,11 +13978,9 @@ function ContainerComponentTypeTableBody(_ref) {
   }, [containerComponentType]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(TableHead, {
-      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
         className: classes.TableHeadLabel,
-        children: ["Media Container ", /*#__PURE__*/jsxRuntime.jsx(ExpandMoreIcon__default["default"], {
-          fontSize: "small"
-        })]
+        children: "Media Container"
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(TableBody__default["default"], {
       className: className,
@@ -14076,11 +14072,9 @@ function FileTypeTableBody(_ref2) {
   })) || [];
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(TableHead, {
-      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
         className: classes.TableHeadLabel,
-        children: ["File Component ", /*#__PURE__*/jsxRuntime.jsx(ExpandMoreIcon__default["default"], {
-          fontSize: "small"
-        })]
+        children: "File Component"
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(TableBody__default["default"], {
       className: className,
@@ -14292,11 +14286,9 @@ function VideoComponentTypeTableBody(_ref) {
   }, [videoComponentType]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(TableHead, {
-      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
         className: classes.TableHeadLabel,
-        children: ["Video Track ", /*#__PURE__*/jsxRuntime.jsx(ExpandMoreIcon__default["default"], {
-          fontSize: "small"
-        })]
+        children: "Video Track"
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(TableBody__default["default"], {
       className: className,
@@ -14398,7 +14390,7 @@ function ShapeTypeTableBody(_ref2) {
       _shapeType$audioCompo = shapeType.audioComponent,
       audioComponentList = _shapeType$audioCompo === void 0 ? [] : _shapeType$audioCompo;
   var mediaType = getMediaType(shapeType);
-  var fileTypeList = containerComponentType.file;
+  var fileTypeList = containerComponentType === null || containerComponentType === void 0 ? void 0 : containerComponentType.file;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(TableBody__default["default"], {
       className: className,
@@ -14583,6 +14575,7 @@ function ItemShapeRow(_ref) {
     path = get__default["default"](file, '[0].path', 'undefined');
   }
 
+  var shapeTags = shapeType.tag.join(', ');
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(TableRow__default["default"], _objectSpread$1X(_objectSpread$1X({}, TableRowProps), {}, {
       children: [/*#__PURE__*/jsxRuntime.jsx(TableCell__default["default"], {
@@ -14592,7 +14585,7 @@ function ItemShapeRow(_ref) {
           children: open ? /*#__PURE__*/jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) : /*#__PURE__*/jsxRuntime.jsx(ChevronRightIcon__default["default"], {})
         })
       }), /*#__PURE__*/jsxRuntime.jsx(TableCell__default["default"], {
-        children: shape.tag
+        children: shapeTags
       }), /*#__PURE__*/jsxRuntime.jsxs(Hidden__default["default"], {
         smDown: true,
         children: [/*#__PURE__*/jsxRuntime.jsx(TableCell__default["default"], {
@@ -17124,8 +17117,7 @@ var getComponentSize = function getComponentSize(containerRef) {
     width: clientWidth,
     height: clientHeight
   };
-}; // TODO: Make this internal (should very rarely be used directly)
-
+};
 
 function DragLayer(_ref5) {
   var _ref5$allowedTypes = _ref5.allowedTypes,
@@ -18228,7 +18220,7 @@ CollectionListItem.defaultProps = {
   ListItemProps: {},
   parseMetadataOptions: {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   },
   skeleton: false
 };
@@ -18321,7 +18313,7 @@ function CollectionMetadataEdit(_ref) {
     }) : [];
     var parsedValues = vdtJs.parseMetadataType(metadataType, {
       flat: true,
-      arrayOnSingle: false
+      arrayOnSingleValue: false
     });
     var values = Object.entries(parsedValues).reduce(function (acc, cur) {
       var _cur = _slicedToArray__default["default"](cur, 2),
@@ -19602,7 +19594,7 @@ var defaultListItemTextComponent$1 = function defaultListItemTextComponent(_ref)
 
   var _parseTimespan = vdtJs.parseTimespan(genericMetadataTimespan, {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   }),
       title = _parseTimespan.title,
       user = _parseTimespan.user,
@@ -19882,7 +19874,7 @@ var defaultListItemTextComponent = function defaultListItemTextComponent(_ref) {
 
   var _parseTimespan = vdtJs.parseTimespan(genericMetadataTimespan, {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   }),
       title = _parseTimespan.title,
       originalFilename = _parseTimespan.originalFilename,
@@ -19893,7 +19885,7 @@ var defaultListItemTextComponent = function defaultListItemTextComponent(_ref) {
 
   var timedMetadata = vdtJs.parseTimespan(timedMetadataTimespan, {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   });
   var start = vdtJs.formatTimeCodeText(startText);
   var end = vdtJs.formatTimeCodeText(endText);
@@ -20005,7 +19997,7 @@ var defaultListItemAvatarComponent = function defaultListItemAvatarComponent(_re
 
   var _parseTimespan2 = vdtJs.parseTimespan(genericMetadataTimespan, {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   }),
       durationSeconds = _parseTimespan2.durationSeconds,
       mimeType = _parseTimespan2.mimeType;
@@ -21390,7 +21382,7 @@ ItemListItem.defaultProps = {
   ListItemTextProps: {},
   parseMetadataOptions: {
     flat: true,
-    arrayOnSingle: false
+    arrayOnSingleValue: false
   },
   skeleton: false
 };
@@ -22265,8 +22257,7 @@ var onDownloadWebVTT = function onDownloadWebVTT(_ref) {
     }).then(function (_ref2) {
       var data = _ref2.data;
       var metadataType = data.metadata;
-      var webVtt = vdtJs.metadataTypeToWebVtt({
-        metadataType: metadataType,
+      var webVtt = vdtJs.metadataTypeToWebVtt(metadataType, {
         subtitleGroup: subtitleGroup,
         subtitleField: subtitleField
       });
@@ -24159,8 +24150,7 @@ function ItemVideoPlayer(_ref) {
       metadataType = itemType.metadata,
       itemId = itemType.id;
   var webVtt = React.useMemo(function () {
-    return vdtJs.metadataTypeToWebVtt({
-      metadataType: metadataType,
+    return vdtJs.metadataTypeToWebVtt(metadataType, {
       subtitleGroup: subtitleGroup,
       subtitleField: subtitleField,
       sampleRate: sampleRate
@@ -27420,8 +27410,7 @@ function SavedSearchList(_ref) {
 
   return /*#__PURE__*/jsxRuntime.jsx(Component$A, _objectSpread$V({
     searchProps: searchProps,
-    searchPlaceholder: searchPlaceholderText // TODO: Extract CollectionTableComponent to separate component to describe it's interface in a story
-    // eslint-disable-next-line react/no-unstable-nested-components
+    searchPlaceholder: searchPlaceholderText // eslint-disable-next-line react/no-unstable-nested-components
     ,
     CollectionTableComponent: function CollectionTableComponent(_ref2) {
       var collectionListType = _ref2.collectionListType,
@@ -30971,8 +30960,7 @@ var useDeleteHook = function useDeleteHook(entity, entityId) {
     handleValidation: handleValidation,
     onDelete: onDelete
   };
-}; // TODO: Switch so it's only DialogContent
-
+};
 
 function EntityDeleteDialog(_ref) {
   var open = _ref.open,
@@ -31910,10 +31898,14 @@ function BinList(_ref3) {
         metadata: {
           field: start ? [{
             key: 'start',
-            value: vdtJs.formatTimeCodeText(start).toText()
+            value: vdtJs.formatTimeCodeText(start).toText({
+              fraction: true
+            })
           }, {
             key: 'end',
-            value: vdtJs.formatTimeCodeText(end).toText()
+            value: vdtJs.formatTimeCodeText(end).toText({
+              fraction: true
+            })
           }] : []
         }
       };
@@ -37843,8 +37835,8 @@ function EventTimeline(_ref) {
       itemSearchDocument = _ref.itemSearchDocument;
 
   var _parseMetadataType = vdtJs.parseMetadataType(itemType.metadata, {
-    arrayOnSingle: false,
-    flat: true
+    flat: true,
+    arrayOnSingleValue: false
   }),
       durationSeconds = _parseMetadataType.durationSeconds;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-materialui",
-  "version": "22.4.0-pre.4",
+  "version": "22.4.0-pre.5",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@vidispine/vdt-api": "22.4.0-pre.4",
-    "@vidispine/vdt-js": "22.4.0-pre.4",
-    "@vidispine/vdt-react": "22.4.0-pre.4",
-    "@vidispine/vdt-videojs-react": "22.4.0-pre.4",
+    "@vidispine/vdt-api": "22.4.0-pre.5",
+    "@vidispine/vdt-js": "22.4.0-pre.5",
+    "@vidispine/vdt-react": "22.4.0-pre.5",
+    "@vidispine/vdt-videojs-react": "22.4.0-pre.5",
     "clsx": "^1.2.1",
     "core-js": "^3.24.1",
     "filesize": "^6.4.0",
@@ -71,11 +71,11 @@
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@svgr/rollup": "6.3.1",
-    "@vidispine/eslint-config-mdx": "22.4.0-pre.4",
-    "@vidispine/eslint-config-react": "22.4.0-pre.4",
-    "@vidispine/eslint-config-storybook": "22.4.0-pre.4",
-    "@vidispine/prettier-config": "22.4.0-pre.4",
-    "@vidispine/proptypes": "22.4.0-pre.4",
+    "@vidispine/eslint-config-mdx": "22.4.0-pre.5",
+    "@vidispine/eslint-config-react": "22.4.0-pre.5",
+    "@vidispine/eslint-config-storybook": "22.4.0-pre.5",
+    "@vidispine/prettier-config": "22.4.0-pre.5",
+    "@vidispine/proptypes": "22.4.0-pre.5",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "axios": "0.21.4",
     "axios-mock-adapter": "1.21.2",
@@ -109,6 +109,47 @@
             "object"
           ]
         }
+      ],
+      "import/order": [
+        "error",
+        {
+          "groups": [
+            "builtin",
+            "external",
+            "parent",
+            "sibling",
+            "internal",
+            "index",
+            "object",
+            "type",
+            "unknown"
+          ],
+          "pathGroups": [
+            {
+              "pattern": "react",
+              "group": "builtin",
+              "position": "before"
+            },
+            {
+              "pattern": "@material-ui/**",
+              "group": "external",
+              "position": "after"
+            },
+            {
+              "pattern": "@vidispine/**",
+              "group": "parent",
+              "position": "before"
+            }
+          ],
+          "pathGroupsExcludedImportTypes": [
+            "react"
+          ],
+          "alphabetize": {
+            "order": "asc",
+            "caseInsensitive": true
+          },
+          "newlines-between": "always"
+        }
       ]
     }
   },