@contentful/field-editor-reference 4.3.11 → 4.5.1

package/dist/field-editor-reference.esm.js

@@ -1,13 +1,14 @@
 import React__default, { useState, useRef, useEffect, createElement, Fragment, useMemo, useCallback, useReducer } from 'react';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 import get from 'lodash-es/get';
-import { Menu, TextInput, Button, Paragraph, Card, SectionHeading, IconButton, Tooltip, EntryCard, MenuItem, MenuDivider, Text, AssetCard } from '@contentful/f36-components';
-import { SearchIcon, PlusIcon, ChevronDownIcon, LinkIcon, CloseIcon, ClockIcon } from '@contentful/f36-icons';
+import { Menu, TextInput, Button, Paragraph, Card, SectionHeading, IconButton, Tooltip, Flex, Text, EntryCard, MenuItem, MenuDivider, AssetCard } from '@contentful/f36-components';
+import { SearchIcon, PlusIcon, ChevronDownIcon, LinkIcon, CloseIcon, FolderOpenTrimmedIcon, ClockIcon } from '@contentful/f36-icons';
 import moment from 'moment';
 import deepEqual from 'deep-equal';
 import { FieldConnector, isValidImage, entityHelpers, shortenStorageUnit } from '@contentful/field-editor-shared';
 import constate from 'constate';
+import { createClient } from 'contentful-management';
 import isNumber from 'lodash-es/isNumber';
 import arrayMove from 'array-move';
 import { SortableContainer, SortableHandle, SortableElement } from 'react-sortable-hoc';
@@ -82,6 +83,44 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var container = /*#__PURE__*/css({
   display: 'flex',
   border: "1px dashed " + tokens.gray500,
@@ -1822,7 +1861,7 @@ function AssetThumbnail(props) {
 }
 
 function reducer(state, action) {
-  var _extends2, _extends3, _extends4, _extends5, _extends6;
+  var _extends2, _extends3, _extends4, _extends5, _extends6, _extends7, _extends8;
 
   switch (action.type) {
     case 'set_entry':
@@ -1850,6 +1889,16 @@ function reducer(state, action) {
         scheduledActions: _extends({}, state.scheduledActions, (_extends6 = {}, _extends6[action.key] = action.actions, _extends6))
       });
 
+    case 'set_resource':
+      return _extends({}, state, {
+        resources: _extends({}, state.resources, (_extends7 = {}, _extends7[action.resourceType + "." + action.urn] = action.resourceInfo, _extends7))
+      });
+
+    case 'set_resource_failed':
+      return _extends({}, state, {
+        resources: _extends({}, state.resources, (_extends8 = {}, _extends8[action.resourceType + "." + action.urn] = 'failed', _extends8))
+      });
+
     default:
       return state;
   }
@@ -1858,10 +1907,34 @@ function reducer(state, action) {
 var initialState = {
   entries: {},
   assets: {},
-  scheduledActions: {}
+  scheduledActions: {},
+  resources: {}
+};
+
+var isNotNil = function isNotNil(entity) {
+  return Boolean(entity && entity !== 'failed');
+};
+
+var nonNilResources = function nonNilResources(map) {
+  return Object.entries(map).filter(function (_ref) {
+    var value = _ref[1];
+    return isNotNil(value);
+  });
 };
 
 function useEntitiesStore(props) {
+  var spaceId = props.sdk.ids.space;
+  var environmentId = props.sdk.ids.environment;
+
+  var _React$useState = useState(function () {
+    return createClient({
+      apiAdapter: props.sdk.cmaAdapter
+    }, {
+      type: 'plain'
+    });
+  }),
+      cmaClient = _React$useState[0];
+
   var _React$useReducer = useReducer(reducer, initialState),
       state = _React$useReducer[0],
       dispatch = _React$useReducer[1];
@@ -1889,78 +1962,348 @@ function useEntitiesStore(props) {
       return [];
     });
   }, [props.sdk.space, state.scheduledActions]);
-  var loadEntry = useCallback(function (id) {
-    return props.sdk.space.getEntry(id).then(function (entry) {
-      dispatch({
-        type: 'set_entry',
-        id: id,
-        entry: entry
-      });
-      return entry;
-    })["catch"](function () {
-      dispatch({
-        type: 'set_entry_failed',
-        id: id
-      });
-    });
-  }, [props.sdk.space]);
-  var loadAsset = useCallback(function (id) {
-    return props.sdk.space.getAsset(id).then(function (asset) {
-      dispatch({
-        type: 'set_asset',
-        id: id,
-        asset: asset
-      });
-      return asset;
-    })["catch"](function () {
-      dispatch({
-        type: 'set_asset_failed',
-        id: id
-      });
-    });
-  }, [props.sdk.space]);
-  var getOrLoadAsset = useCallback(function (id) {
-    if (state.assets[id] && state.assets[id] !== 'failed') {
-      return Promise.resolve(state.assets[id]);
-    }
+  var loadEntry = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(entryId) {
+      var entry;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return cmaClient.entry.get({
+                spaceId: spaceId,
+                environmentId: environmentId,
+                entryId: entryId
+              });
 
-    return loadAsset(id);
-  }, [state.assets, loadAsset]);
-  var getOrLoadEntry = useCallback(function (id) {
-    if (state.entries[id] && state.entries[id] !== 'failed') {
-      return Promise.resolve(state.entries[id]);
-    }
+            case 3:
+              entry = _context.sent;
+              dispatch({
+                type: 'set_entry',
+                id: entryId,
+                entry: entry
+              });
+              return _context.abrupt("return", entry);
+
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](0);
+              dispatch({
+                type: 'set_entry_failed',
+                id: entryId
+              });
+              return _context.abrupt("return");
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 8]]);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [cmaClient, spaceId, environmentId]);
+  var getEntry = useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(entryId) {
+      var cachedEntry;
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              cachedEntry = state.entries[entryId];
+
+              if (!isNotNil(cachedEntry)) {
+                _context2.next = 3;
+                break;
+              }
+
+              return _context2.abrupt("return", cachedEntry);
+
+            case 3:
+              return _context2.abrupt("return", loadEntry(entryId));
+
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function (_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [loadEntry, state.entries]);
+  var loadAsset = useCallback( /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(assetId) {
+      var asset;
+      return runtime_1.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return cmaClient.asset.get({
+                spaceId: spaceId,
+                environmentId: environmentId,
+                assetId: assetId
+              });
+
+            case 3:
+              asset = _context3.sent;
+              dispatch({
+                type: 'set_asset',
+                id: assetId,
+                asset: asset
+              });
+              return _context3.abrupt("return", asset);
+
+            case 8:
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](0);
+              dispatch({
+                type: 'set_asset_failed',
+                id: assetId
+              });
+              return _context3.abrupt("return");
+
+            case 12:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 8]]);
+    }));
+
+    return function (_x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [cmaClient, spaceId, environmentId]);
+  var getAsset = useCallback( /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4(assetId) {
+      var cachedAsset;
+      return runtime_1.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              cachedAsset = state.assets[assetId];
+
+              if (!isNotNil(cachedAsset)) {
+                _context4.next = 3;
+                break;
+              }
+
+              return _context4.abrupt("return", cachedAsset);
+
+            case 3:
+              return _context4.abrupt("return", loadAsset(assetId));
+
+            case 4:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    return function (_x4) {
+      return _ref5.apply(this, arguments);
+    };
+  }(), [loadAsset, state.assets]);
+  var loadContentfulEntry = useCallback( /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(urn) {
+      var _locales$items$find;
+
+      var resourceId, _resourceId$split, spaceId, entryId, environmentId, _yield$Promise$all, space, entry, contentTypeId, _yield$Promise$all2, contentType, locales, defaultLocaleCode;
+
+      return runtime_1.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              resourceId = urn.split(':', 6)[5];
+              _resourceId$split = resourceId.split('/'), spaceId = _resourceId$split[1], entryId = _resourceId$split[3];
+              environmentId = 'master';
+              _context5.t0 = Promise;
+              _context5.next = 6;
+              return cmaClient.space.get({
+                spaceId: spaceId
+              });
+
+            case 6:
+              _context5.t1 = _context5.sent;
+              _context5.next = 9;
+              return cmaClient.entry.get({
+                spaceId: spaceId,
+                environmentId: environmentId,
+                entryId: entryId
+              });
+
+            case 9:
+              _context5.t2 = _context5.sent;
+              _context5.t3 = [_context5.t1, _context5.t2];
+              _context5.next = 13;
+              return _context5.t0.all.call(_context5.t0, _context5.t3);
+
+            case 13:
+              _yield$Promise$all = _context5.sent;
+              space = _yield$Promise$all[0];
+              entry = _yield$Promise$all[1];
+              contentTypeId = entry.sys.contentType.sys.id;
+              _context5.t4 = Promise;
+              _context5.next = 20;
+              return cmaClient.contentType.get({
+                contentTypeId: contentTypeId,
+                spaceId: spaceId,
+                environmentId: environmentId
+              });
+
+            case 20:
+              _context5.t5 = _context5.sent;
+              _context5.next = 23;
+              return cmaClient.locale.getMany({
+                spaceId: spaceId,
+                environmentId: environmentId,
+                query: {
+                  limit: 100
+                }
+              });
 
-    return loadEntry(id);
-  }, [state.entries, loadEntry]);
+            case 23:
+              _context5.t6 = _context5.sent;
+              _context5.t7 = [_context5.t5, _context5.t6];
+              _context5.next = 27;
+              return _context5.t4.all.call(_context5.t4, _context5.t7);
+
+            case 27:
+              _yield$Promise$all2 = _context5.sent;
+              contentType = _yield$Promise$all2[0];
+              locales = _yield$Promise$all2[1];
+              defaultLocaleCode = (_locales$items$find = locales.items.find(function (locale) {
+                return locale["default"];
+              })) == null ? void 0 : _locales$items$find.code;
+              return _context5.abrupt("return", {
+                resource: entry,
+                defaultLocaleCode: defaultLocaleCode,
+                space: space,
+                contentType: contentType
+              });
+
+            case 32:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    }));
+
+    return function (_x5) {
+      return _ref6.apply(this, arguments);
+    };
+  }(), [cmaClient]);
+  var getResource = useCallback( /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6(resourceType, urn) {
+      var cachedResource, resourceInfo;
+      return runtime_1.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              cachedResource = state.resources[resourceType + "." + urn];
+
+              if (!isNotNil(cachedResource)) {
+                _context6.next = 3;
+                break;
+              }
+
+              return _context6.abrupt("return", cachedResource);
+
+            case 3:
+              _context6.prev = 3;
+
+              if (!(resourceType === 'Contentful:Entry')) {
+                _context6.next = 8;
+                break;
+              }
+
+              _context6.next = 7;
+              return loadContentfulEntry(urn);
+
+            case 7:
+              resourceInfo = _context6.sent;
+
+            case 8:
+              dispatch({
+                type: 'set_resource',
+                resourceType: resourceType,
+                urn: urn,
+                resourceInfo: resourceInfo
+              });
+              return _context6.abrupt("return", resourceInfo);
+
+            case 12:
+              _context6.prev = 12;
+              _context6.t0 = _context6["catch"](3);
+              dispatch({
+                type: 'set_resource_failed',
+                resourceType: resourceType,
+                urn: urn
+              });
+              return _context6.abrupt("return");
+
+            case 16:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6, null, [[3, 12]]);
+    }));
+
+    return function (_x6, _x7) {
+      return _ref7.apply(this, arguments);
+    };
+  }(), [loadContentfulEntry, state.resources]);
   useEffect(function () {
     // @ts-expect-error
     if (typeof props.sdk.space.onEntityChanged !== 'undefined') {
       // @ts-expect-error
       var onEntityChanged = props.sdk.space.onEntityChanged;
       var listeners = [];
-      Object.keys(state.entries).forEach(function (id) {
-        if (state.entries[id] && state.entries['id'] !== 'failed') {
-          listeners.push(onEntityChanged('Entry', id, function (entry) {
-            return dispatch({
-              type: 'set_entry',
-              id: id,
-              entry: entry
-            });
-          }));
-        }
-      });
-      Object.keys(state.assets).forEach(function (id) {
-        if (state.assets[id] && state.assets['id'] !== 'failed') {
-          listeners.push(onEntityChanged('Asset', id, function (asset) {
-            return dispatch({
-              type: 'set_asset',
-              id: id,
-              asset: asset
-            });
-          }));
-        }
-      });
+
+      var _loop = function _loop() {
+        var _step$value = _step.value,
+            id = _step$value[0];
+        listeners.push(onEntityChanged('Entry', id, function (entry) {
+          return dispatch({
+            type: 'set_entry',
+            id: id,
+            entry: entry
+          });
+        }));
+      };
+
+      for (var _iterator = _createForOfIteratorHelperLoose(nonNilResources(state.entries)), _step; !(_step = _iterator()).done;) {
+        _loop();
+      }
+
+      var _loop2 = function _loop2() {
+        var _step2$value = _step2.value,
+            id = _step2$value[0];
+        listeners.push(onEntityChanged('Asset', id, function (asset) {
+          return dispatch({
+            type: 'set_asset',
+            id: id,
+            asset: asset
+          });
+        }));
+      };
+
+      for (var _iterator2 = _createForOfIteratorHelperLoose(nonNilResources(state.assets)), _step2; !(_step2 = _iterator2()).done;) {
+        _loop2();
+      }
+
       return function () {
         return listeners.forEach(function (off) {
           return off();
@@ -1968,29 +2311,46 @@ function useEntitiesStore(props) {
       };
     }
 
-    return props.sdk.navigator.onSlideInNavigation(function (_ref) {
-      var oldSlideLevel = _ref.oldSlideLevel,
-          newSlideLevel = _ref.newSlideLevel;
+    return props.sdk.navigator.onSlideInNavigation(function (_ref8) {
+      var oldSlideLevel = _ref8.oldSlideLevel,
+          newSlideLevel = _ref8.newSlideLevel;
 
       if (oldSlideLevel > newSlideLevel) {
-        Object.keys(state.entries).map(function (id) {
-          if (state.entries[id] && state.entries[id] !== 'failed') {
-            loadEntry(id);
-          }
-        });
-        Object.keys(state.assets).map(function (id) {
-          if (state.assets[id] && state.assets[id] !== 'failed') {
-            loadAsset(id);
-          }
-        });
+        for (var _iterator3 = _createForOfIteratorHelperLoose(nonNilResources(state.entries)), _step3; !(_step3 = _iterator3()).done;) {
+          var _step3$value = _step3.value,
+              id = _step3$value[0];
+          loadEntry(id);
+        }
+
+        for (var _iterator4 = _createForOfIteratorHelperLoose(nonNilResources(state.assets)), _step4; !(_step4 = _iterator4()).done;) {
+          var _step4$value = _step4.value,
+              _id = _step4$value[0];
+          loadAsset(_id);
+        }
       }
     }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props.sdk, state.assets, state.entries]);
-  return _extends({
-    getOrLoadEntry: getOrLoadEntry,
-    getOrLoadAsset: getOrLoadAsset,
-    loadEntityScheduledActions: loadEntityScheduledActions
-  }, state);
+  return useMemo(function () {
+    return {
+      /**
+       * @deprecated use `getEntry` instead
+       */
+      getOrLoadEntry: getEntry,
+
+      /**
+       * @deprecated use `getAsset` instead
+       */
+      getOrLoadAsset: getAsset,
+      getResource: getResource,
+      getEntry: getEntry,
+      getAsset: getAsset,
+      loadEntityScheduledActions: loadEntityScheduledActions,
+      entries: state.entries,
+      assets: state.assets,
+      scheduledActions: state.scheduledActions,
+      resources: state.resources
+    };
+  }, [getResource, getEntry, getAsset, loadEntityScheduledActions, state.entries, state.assets, state.scheduledActions, state.resources]);
 }
 
 var _constate = /*#__PURE__*/constate(useEntitiesStore),
@@ -2447,11 +2807,40 @@ SingleReferenceEditor.defaultProps = {
   hasCardRemoveActions: true
 };
 
+var styles$1 = {
+  spaceIcon: /*#__PURE__*/css({
+    flexShrink: 0,
+    fill: tokens.purple600
+  }),
+  spaceName: /*#__PURE__*/css({
+    color: tokens.gray700,
+    fontSize: tokens.fontSizeS,
+    fontWeight: tokens.fontWeightDemiBold
+  })
+};
+function SpaceName(props) {
+  return createElement(Tooltip, {
+    placement: "top",
+    as: "div",
+    content: "Space"
+  }, createElement(Flex, {
+    alignItems: "center",
+    gap: "spacingXs",
+    marginRight: "spacingS"
+  }, createElement(FolderOpenTrimmedIcon, {
+    className: styles$1.spaceIcon,
+    size: "tiny",
+    "aria-label": "Source space"
+  }), createElement(Text, {
+    className: styles$1.spaceName
+  }, props.spaceName)));
+}
+
 var getEntryTitle = entityHelpers.getEntryTitle,
     getEntityDescription = entityHelpers.getEntityDescription,
     getEntryStatus = entityHelpers.getEntryStatus,
     getEntryImage = entityHelpers.getEntryImage;
-var styles$1 = {
+var styles$2 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -2516,12 +2905,17 @@ function WrappedEntryCard(props) {
     size: props.size,
     isSelected: props.isSelected,
     status: status,
-    icon: createElement(ScheduledIconWithTooltip, {
+    style: props.spaceName ? {
+      backgroundColor: tokens.gray100
+    } : undefined,
+    icon: props.spaceName ? createElement(SpaceName, {
+      spaceName: props.spaceName
+    }) : createElement(ScheduledIconWithTooltip, {
       getEntityScheduledActions: props.getEntityScheduledActions,
       entityType: "Entry",
       entityId: props.entry.sys.id
     }, createElement(ClockIcon, {
-      className: styles$1.scheduleIcon,
+      className: styles$2.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -2626,13 +3020,13 @@ function _openEntry() {
 
 function FetchingWrappedEntryCard(props) {
   var _useEntities = useEntities(),
-      getOrLoadEntry = _useEntities.getOrLoadEntry,
-      getOrLoadAsset = _useEntities.getOrLoadAsset,
+      getEntry = _useEntities.getEntry,
+      getAsset = _useEntities.getAsset,
       loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
       entries = _useEntities.entries;
 
   useEffect(function () {
-    getOrLoadEntry(props.entryId); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+    getEntry(props.entryId); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props.entryId]);
   var size = props.viewType === 'link' ? 'small' : 'default';
   var entry = entries[props.entryId];
@@ -2747,7 +3141,7 @@ function FetchingWrappedEntryCard(props) {
         hasCardEditActions: hasCardEditActions,
         hasCardMoveActions: hasCardMoveActions,
         hasCardRemoveActions: hasCardRemoveActions,
-        getAsset: getOrLoadAsset,
+        getAsset: getAsset,
         getEntityScheduledActions: loadEntityScheduledActions,
         entry: (props == null ? void 0 : props.entity) || sharedCardProps.entity,
         entryUrl: (props == null ? void 0 : props.entityUrl) || sharedCardProps.entityUrl
@@ -2896,12 +3290,13 @@ MultipleReferenceEditor.defaultProps = {
   hasCardEditActions: true
 };
 
-var styles$2 = {
-  containter: /*#__PURE__*/css({
+var styles$3 = {
+  container: /*#__PURE__*/css({
     position: 'relative'
   }),
   item: /*#__PURE__*/css({
-    marginBottom: tokens.spacingM
+    marginBottom: tokens.spacingM,
+    marginRight: tokens.spacingM
   })
 };
 
@@ -2914,48 +3309,59 @@ var DragHandle = function DragHandle(props) {
 
 var SortableLink = /*#__PURE__*/SortableElement(function (props) {
   return React__default.createElement("div", {
-    className: styles$2.item
+    className: styles$3.item
   }, props.children);
 });
-var SortableLinkList = /*#__PURE__*/SortableContainer(function (props) {
-  var lastIndex = props.items.length - 1;
+var SortableLinkListInternal = /*#__PURE__*/SortableContainer(function (props) {
   return React__default.createElement("div", {
-    className: styles$2.containter
+    className: cx(styles$3.container, props.className)
   }, props.items.map(function (item, index) {
+    var _item$sys$id;
+
     return React__default.createElement(SortableLink, {
       disabled: props.isDisabled,
-      key: item.sys.id + "-" + index,
+      key: ((_item$sys$id = item.sys.id) != null ? _item$sys$id : item.sys.urn) + "-" + index,
       index: index
-    }, React__default.createElement(FetchingWrappedEntryCard, Object.assign({}, props, {
-      key: item.sys.id + "-" + index,
+    }, props.children(_extends({}, props, {
+      item: item,
       index: index,
-      allContentTypes: props.allContentTypes,
-      isDisabled: props.isDisabled,
-      entryId: item.sys.id,
-      onRemove: function onRemove() {
-        props.setValue(props.items.filter(function (_value, i) {
-          return i !== index;
-        }));
-      },
-      onMoveTop: index !== 0 ? function () {
-        return props.onMove(index, 0);
-      } : undefined,
-      onMoveBottom: index !== lastIndex ? function () {
-        return props.onMove(index, lastIndex);
-      } : undefined,
-      renderDragHandle: props.isDisabled ? undefined : DragHandle
+      DragHandle: props.isDisabled ? undefined : DragHandle
     })));
   }));
-});
+}); // HOC does not support generics, so we mimic it via additional component
+
+function SortableLinkList(props) {
+  return React__default.createElement(SortableLinkListInternal, Object.assign({}, props, {
+    children: props.children
+  }));
+}
 
 function MultipleEntryReferenceEditor(props) {
   return createElement(MultipleReferenceEditor, Object.assign({}, props, {
     entityType: "Entry"
   }), function (childrenProps) {
-    return createElement(SortableLinkList, Object.assign({}, props, childrenProps, {
-      axis: "y",
-      useDragHandle: true
-    }));
+    return createElement(SortableLinkList, Object.assign({}, childrenProps), function (props) {
+      var lastIndex = props.items.length - 1;
+      return createElement(FetchingWrappedEntryCard, Object.assign({}, props, {
+        key: props.item.sys.id + "-" + props.index,
+        index: props.index,
+        allContentTypes: childrenProps.allContentTypes,
+        isDisabled: props.isDisabled,
+        entryId: props.item.sys.id,
+        onRemove: function onRemove() {
+          childrenProps.setValue(props.items.filter(function (_value, i) {
+            return i !== props.index;
+          }));
+        },
+        onMoveTop: props.index !== 0 ? function () {
+          return childrenProps.onMove(props.index, 0);
+        } : undefined,
+        onMoveBottom: props.index !== lastIndex ? function () {
+          return childrenProps.onMove(props.index, lastIndex);
+        } : undefined,
+        renderDragHandle: props.DragHandle
+      }));
+    });
   });
 }
 
@@ -3029,7 +3435,7 @@ var groupToIconMap = {
   code: 'code',
   markup: 'markup'
 };
-var styles$3 = {
+var styles$4 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -3091,7 +3497,7 @@ var WrappedAssetCard = function WrappedAssetCard(props) {
       entityType: "Asset",
       entityId: props.asset.sys.id
     }, React__default.createElement(ClockIcon, {
-      className: styles$3.scheduleIcon,
+      className: styles$4.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -3122,7 +3528,7 @@ var WrappedAssetCard = function WrappedAssetCard(props) {
 };
 WrappedAssetCard.defaultProps = defaultProps$1;
 
-var styles$4 = {
+var styles$5 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -3166,7 +3572,7 @@ var WrappedAssetLink = function WrappedAssetLink(props) {
       entityType: "Asset",
       entityId: props.asset.sys.id
     }, React__default.createElement(ClockIcon, {
-      className: styles$4.scheduleIcon,
+      className: styles$5.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -3192,12 +3598,12 @@ var WrappedAssetLink = function WrappedAssetLink(props) {
 
 function FetchingWrappedAssetCard(props) {
   var _useEntities = useEntities(),
-      getOrLoadAsset = _useEntities.getOrLoadAsset,
+      getAsset = _useEntities.getAsset,
       loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
       assets = _useEntities.assets;
 
   useEffect(function () {
-    getOrLoadAsset(props.assetId); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+    getAsset(props.assetId); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props.assetId]);
   var asset = assets[props.assetId];
   var entityKey = asset === 'failed' ? 'failed' : asset === undefined ? 'undefined' : ":" + asset.sys.id + ":" + asset.sys.version;
@@ -3365,68 +3771,39 @@ SingleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
-var styles$5 = {
-  gridContainter: /*#__PURE__*/css({
+var styles$6 = {
+  gridContainer: /*#__PURE__*/css({
     position: 'relative',
     display: 'flex',
     flexWrap: 'wrap'
-  }),
-  container: /*#__PURE__*/css({
-    position: 'relative'
-  }),
-  item: /*#__PURE__*/css({
-    marginBottom: tokens.spacingM,
-    marginRight: tokens.spacingM
   })
 };
-
-var DragHandle$1 = function DragHandle(props) {
-  var SortableDragHandle = SortableHandle(function () {
-    return props.drag;
-  });
-  return React__default.createElement(SortableDragHandle, null);
-};
-
-var SortableLink$1 = /*#__PURE__*/SortableElement(function (props) {
-  return React__default.createElement("div", {
-    className: styles$5.item
-  }, props.children);
-});
-var SortableLinkList$1 = /*#__PURE__*/SortableContainer(function (props) {
-  return React__default.createElement("div", {
-    className: props.viewType === 'card' ? styles$5.gridContainter : styles$5.container
-  }, props.items.map(function (item, index) {
-    return React__default.createElement(SortableLink$1, {
-      disabled: props.isDisabled,
-      key: item.sys.id + "-" + index,
-      index: index
-    }, React__default.createElement(FetchingWrappedAssetCard, Object.assign({}, props, {
-      sdk: props.sdk,
-      key: item.sys.id + "-" + index,
-      assetId: item.sys.id,
-      onRemove: function onRemove() {
-        props.setValue(props.items.filter(function (_value, i) {
-          return i !== index;
-        }));
-      },
-      renderDragHandle: props.isDisabled ? undefined : DragHandle$1
-    })));
-  }));
-});
-
 function MultipleMediaEditor(props) {
   return createElement(MultipleReferenceEditor, Object.assign({}, props, {
     entityType: "Asset"
   }), function (childrenProps) {
-    return createElement(SortableLinkList$1, Object.assign({}, props, childrenProps, {
-      axis: props.viewType === 'card' ? 'xy' : 'y',
-      useDragHandle: true
-    }));
+    var _cx;
+
+    return createElement(SortableLinkList, Object.assign({}, childrenProps, {
+      className: cx((_cx = {}, _cx[styles$6.gridContainer] = childrenProps.viewType === 'card', _cx)),
+      axis: childrenProps.viewType === 'card' ? 'xy' : 'y'
+    }), function (props) {
+      return createElement(FetchingWrappedAssetCard, Object.assign({}, props, {
+        key: props.item.sys.id + "-" + props.index,
+        assetId: props.item.sys.id,
+        onRemove: function onRemove() {
+          childrenProps.setValue(props.items.filter(function (_value, i) {
+            return i !== props.index;
+          }));
+        },
+        renderDragHandle: props.DragHandle
+      }));
+    });
   });
 }
 MultipleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
-export { AssetThumbnail, CombinedLinkActions, CreateEntryLinkButton, CreateEntryMenuTrigger, EntityProvider, MissingEntityCard, MultipleEntryReferenceEditor, MultipleMediaEditor, ScheduledIconWithTooltip, SingleEntryReferenceEditor, SingleMediaEditor, WrappedAssetCard, WrappedEntryCard, getScheduleTooltipContent, useEntities };
+export { AssetThumbnail, CombinedLinkActions, CreateEntryLinkButton, CreateEntryMenuTrigger, EntityProvider, MissingEntityCard, MultipleEntryReferenceEditor, MultipleMediaEditor, ScheduledIconWithTooltip, SingleEntryReferenceEditor, SingleMediaEditor, SortableLinkList, WrappedAssetCard, WrappedEntryCard, getScheduleTooltipContent, useEntities };
 //# sourceMappingURL=field-editor-reference.esm.js.map