@contentful/field-editor-reference 4.6.9 → 5.1.0

package/dist/field-editor-reference.cjs.development.js

@@ -12,14 +12,17 @@ var get = _interopDefault(require('lodash/get'));
 var f36Components = require('@contentful/f36-components');
 var f36Icons = require('@contentful/f36-icons');
 var moment = _interopDefault(require('moment'));
-var deepEqual = _interopDefault(require('deep-equal'));
 var fieldEditorShared = require('@contentful/field-editor-shared');
+var deepEqual = _interopDefault(require('deep-equal'));
+var reactQuery = require('@tanstack/react-query');
 var constate = _interopDefault(require('constate'));
 var contentfulManagement = require('contentful-management');
+var PQueue = _interopDefault(require('p-queue'));
 var isNumber = _interopDefault(require('lodash/isNumber'));
 var arrayMove = _interopDefault(require('array-move'));
 var reactSortableHoc = require('react-sortable-hoc');
 var mimetype = _interopDefault(require('@contentful/mimetype'));
+var reactIntersectionObserver = require('react-intersection-observer');
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -75,57 +78,110 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
 
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
   }
+}
 
-  return target;
+function _construct(Parent, args, Class) {
+  if (_isNativeReflectConstruct()) {
+    _construct = Reflect.construct;
+  } else {
+    _construct = function _construct(Parent, args, Class) {
+      var a = [null];
+      a.push.apply(a, args);
+      var Constructor = Function.bind.apply(Parent, a);
+      var instance = new Constructor();
+      if (Class) _setPrototypeOf(instance, Class.prototype);
+      return instance;
+    };
+  }
+
+  return _construct.apply(null, arguments);
 }
 
-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 _isNativeFunction(fn) {
+  return Function.toString.call(fn).indexOf("[native code]") !== -1;
 }
 
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
+function _wrapNativeSuper(Class) {
+  var _cache = typeof Map === "function" ? new Map() : undefined;
+
+  _wrapNativeSuper = function _wrapNativeSuper(Class) {
+    if (Class === null || !_isNativeFunction(Class)) return Class;
+
+    if (typeof Class !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class)) return _cache.get(Class);
 
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+      _cache.set(Class, Wrapper);
+    }
+
+    function Wrapper() {
+      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+    }
+
+    Wrapper.prototype = Object.create(Class.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    return _setPrototypeOf(Wrapper, Class);
+  };
 
-  return arr2;
+  return _wrapNativeSuper(Class);
 }
 
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-  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++]
-      };
-    };
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
 
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  return target;
 }
 
 var container = /*#__PURE__*/emotion.css({
@@ -505,7 +561,7 @@ function CombinedLinkActions(props) {
   var hideEmptyCard = props.entityType === 'Asset' && !props.isEmpty;
   return React.createElement("div", {
     className: hideEmptyCard ? '' : container
-  }, !props.canCreateEntity && !props.canLinkEntity && React.createElement(NoLinkPermissionsInfo, null), props.entityType === 'Entry' && React.createElement(CombinedEntryLinkActions, Object.assign({}, props)), props.entityType === 'Asset' && React.createElement(CombinedAssetLinkActions, Object.assign({}, props)));
+  }, !props.canCreateEntity && !props.canLinkEntity && React.createElement(NoLinkPermissionsInfo, null), props.entityType === 'Entry' && React.createElement(CombinedEntryLinkActions, _extends({}, props)), props.entityType === 'Asset' && React.createElement(CombinedAssetLinkActions, _extends({}, props)));
 }
 
 function CombinedEntryLinkActions(props) {
@@ -1635,9 +1691,8 @@ function useLinkActionsProps(props) {
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), [sdk, entityType, onCreated]); // Wrapping these two with useCallback caused a bug [ZEND-2154] where CTs were not propagated to the UI at all
-
-  var onLinkExisting = /*#__PURE__*/function () {
+  }(), [sdk, entityType, onCreated]);
+  var onLinkExisting = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(index) {
       var entity;
       return runtime_1.wrap(function _callee2$(_context2) {
@@ -1672,12 +1727,12 @@ function useLinkActionsProps(props) {
       }, _callee2);
     }));
 
-    return function onLinkExisting(_x3) {
+    return function (_x3) {
       return _ref2.apply(this, arguments);
     };
-  }();
-
-  var onLinkSeveralExisting = /*#__PURE__*/function () {
+  }(), // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+  [sdk, entityType, onLinkedExisting]);
+  var onLinkSeveralExisting = React.useCallback( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(index) {
       var entities;
       return runtime_1.wrap(function _callee3$(_context3) {
@@ -1712,11 +1767,11 @@ function useLinkActionsProps(props) {
       }, _callee3);
     }));
 
-    return function onLinkSeveralExisting(_x4) {
+    return function (_x4) {
       return _ref3.apply(this, arguments);
     };
-  }(); // FIXME: The memoization might rerun every time due to the always changing callback identities above
-
+  }(), // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+  [sdk, entityType, onLinkedExisting]); // FIXME: The memoization might rerun every time due to the always changing callback identities above
 
   return React.useMemo(function () {
     return {
@@ -1746,7 +1801,7 @@ function LinkEntityActions(_ref4) {
       props = _objectWithoutPropertiesLoose(_ref4, _excluded);
 
   var renderLinkActions = renderCustomActions ? renderCustomActions : function (props) {
-    return React.createElement(LinkActions, Object.assign({}, props));
+    return React.createElement(LinkActions, _extends({}, props));
   };
   return renderLinkActions(props);
 }
@@ -1807,6 +1862,8 @@ var ScheduleTooltip = function ScheduleTooltip(_ref2) {
 };
 
 var ScheduledIconWithTooltip = function ScheduledIconWithTooltip(_ref) {
+  var _status$jobs;
+
   var entityType = _ref.entityType,
       entityId = _ref.entityId,
       getEntityScheduledActions = _ref.getEntityScheduledActions,
@@ -1838,7 +1895,7 @@ var ScheduledIconWithTooltip = function ScheduledIconWithTooltip(_ref) {
     return null;
   }
 
-  var jobs = status.jobs ? status.jobs : [];
+  var jobs = (_status$jobs = status.jobs) != null ? _status$jobs : [];
 
   if (jobs.length === 0) {
     return null;
@@ -1864,502 +1921,426 @@ function AssetThumbnail(props) {
   });
 }
 
-function reducer(state, action) {
-  var _extends2, _extends3, _extends4, _extends5, _extends6, _extends7, _extends8;
+var _excluded$1 = ["priority"],
+    _excluded2 = ["children"];
 
-  switch (action.type) {
-    case 'set_entry':
-      return _extends({}, state, {
-        entries: _extends({}, state.entries, (_extends2 = {}, _extends2[action.id] = action.entry, _extends2))
-      });
+var globalQueue = /*#__PURE__*/new PQueue({
+  concurrency: 20
+});
+var UnsupportedError = /*#__PURE__*/function (_Error) {
+  _inheritsLoose(UnsupportedError, _Error);
 
-    case 'set_entry_failed':
-      return _extends({}, state, {
-        entries: _extends({}, state.entries, (_extends3 = {}, _extends3[action.id] = 'failed', _extends3))
-      });
+  function UnsupportedError(message) {
+    var _this;
 
-    case 'set_asset':
-      return _extends({}, state, {
-        assets: _extends({}, state.assets, (_extends4 = {}, _extends4[action.id] = action.asset, _extends4))
-      });
+    _this = _Error.call(this, message) || this;
+    _this.isUnsupportedError = void 0;
+    _this.isUnsupportedError = true;
+    return _this;
+  }
 
-    case 'set_asset_failed':
-      return _extends({}, state, {
-        assets: _extends({}, state.assets, (_extends5 = {}, _extends5[action.id] = 'failed', _extends5))
-      });
+  return UnsupportedError;
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+function isUnsupportedError(value) {
+  return typeof value === 'object' && (value == null ? void 0 : value.isUnsupportedError) === true;
+}
 
-    case 'set_scheduled_actions':
-      return _extends({}, state, {
-        scheduledActions: _extends({}, state.scheduledActions, (_extends6 = {}, _extends6[action.key] = action.actions, _extends6))
-      });
+var isEntityQueryKey = function isEntityQueryKey(queryKey) {
+  return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
+};
 
-    case 'set_resource':
-      return _extends({}, state, {
-        resources: _extends({}, state.resources, (_extends7 = {}, _extends7[action.resourceType + "." + action.urn] = action.resourceInfo, _extends7))
-      });
+function fetchContentfulEntry(_x) {
+  return _fetchContentfulEntry.apply(this, arguments);
+}
 
-    case 'set_resource_failed':
-      return _extends({}, state, {
-        resources: _extends({}, state.resources, (_extends8 = {}, _extends8[action.resourceType + "." + action.urn] = 'failed', _extends8))
-      });
+function _fetchContentfulEntry() {
+  _fetchContentfulEntry = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(params) {
+    var urn, fetch, options, resourceId, _resourceId$split, spaceId, entryId, environmentId, _yield$Promise$all, space, entry, contentTypeId, _yield$Promise$all2, contentType, defaultLocaleCode;
 
-    default:
-      return state;
-  }
-}
+    return runtime_1.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            urn = params.urn, fetch = params.fetch, options = params.options;
+            resourceId = urn.split(':', 6)[5];
+            _resourceId$split = resourceId.split('/'), spaceId = _resourceId$split[1], entryId = _resourceId$split[3];
+            environmentId = 'master';
+            _context3.next = 6;
+            return Promise.all([fetch(['space', spaceId], function (_ref9) {
+              var cmaClient = _ref9.cmaClient;
+              return cmaClient.space.get({
+                spaceId: spaceId
+              });
+            }, options), fetch(['entry', spaceId, environmentId, entryId], function (_ref10) {
+              var cmaClient = _ref10.cmaClient;
+              return cmaClient.entry.get({
+                spaceId: spaceId,
+                environmentId: environmentId,
+                entryId: entryId
+              });
+            }, options)]);
 
-var initialState = {
-  entries: {},
-  assets: {},
-  scheduledActions: {},
-  resources: {}
-};
+          case 6:
+            _yield$Promise$all = _context3.sent;
+            space = _yield$Promise$all[0];
+            entry = _yield$Promise$all[1];
+            contentTypeId = entry.sys.contentType.sys.id;
+            _context3.next = 12;
+            return Promise.all([fetch(['contentType', spaceId, environmentId, contentTypeId], function (_ref11) {
+              var cmaClient = _ref11.cmaClient;
+              return cmaClient.contentType.get({
+                contentTypeId: contentTypeId,
+                spaceId: spaceId,
+                environmentId: environmentId
+              });
+            }, options), fetch(['defaultLocale', spaceId, environmentId], /*#__PURE__*/function () {
+              var _ref13 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(_ref12) {
+                var _locales$items$find;
 
-var isNotNil = function isNotNil(entity) {
-  return Boolean(entity && entity !== 'failed');
-};
+                var cmaClient, locales, defaultLocaleCode;
+                return runtime_1.wrap(function _callee2$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        cmaClient = _ref12.cmaClient;
+                        _context2.next = 3;
+                        return cmaClient.locale.getMany({
+                          spaceId: spaceId,
+                          environmentId: environmentId,
+                          query: {
+                            limit: 100
+                          }
+                        });
+
+                      case 3:
+                        locales = _context2.sent;
+                        defaultLocaleCode = (_locales$items$find = locales.items.find(function (locale) {
+                          return locale["default"];
+                        })) == null ? void 0 : _locales$items$find.code;
+                        return _context2.abrupt("return", defaultLocaleCode);
 
-var nonNilResources = function nonNilResources(map) {
-  return Object.entries(map).filter(function (_ref) {
-    var value = _ref[1];
-    return isNotNil(value);
-  });
-};
+                      case 6:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _callee2);
+              }));
+
+              return function (_x3) {
+                return _ref13.apply(this, arguments);
+              };
+            }(), options)]);
+
+          case 12:
+            _yield$Promise$all2 = _context3.sent;
+            contentType = _yield$Promise$all2[0];
+            defaultLocaleCode = _yield$Promise$all2[1];
+            return _context3.abrupt("return", {
+              defaultLocaleCode: defaultLocaleCode,
+              resource: entry,
+              space: space,
+              contentType: contentType
+            });
 
-function useEntitiesStore(props) {
-  var spaceId = props.sdk.ids.space;
-  var environmentId = props.sdk.ids.environmentAlias || props.sdk.ids.environment;
+          case 16:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+  return _fetchContentfulEntry.apply(this, arguments);
+}
 
-  var _React$useState = React.useState(function () {
+var _constate = /*#__PURE__*/constate(function useInitServices(props) {
+  var currentSpaceId = props.sdk.ids.space;
+  var currentEnvironmentId = props.sdk.ids.environment;
+  var queryClient = reactQuery.useQueryClient();
+  var queryCache = queryClient.getQueryCache();
+  var entityChangeUnsubscribers = React.useRef({});
+  var cmaClient = React.useMemo(function () {
     return contentfulManagement.createClient({
       apiAdapter: props.sdk.cmaAdapter
     }, {
       type: 'plain'
     });
-  }),
-      cmaClient = _React$useState[0];
-
-  var _React$useReducer = React.useReducer(reducer, initialState),
-      state = _React$useReducer[0],
-      dispatch = _React$useReducer[1];
-
-  var loadEntityScheduledActions = React.useCallback(function (entityType, id) {
-    var key = entityType + ":" + id;
+  }, [props.sdk.cmaAdapter]);
+  var queryQueue = React.useMemo(function () {
+    if (props.queryConcurrency) {
+      return new PQueue({
+        concurrency: props.queryConcurrency
+      });
+    }
 
-    if (state.scheduledActions[key]) {
-      return Promise.resolve(state.scheduledActions[key]);
+    return globalQueue;
+  }, [props.queryConcurrency]);
+  var fetch = React.useCallback(function fetch(queryKey, fn, options) {
+    if (options === void 0) {
+      options = {};
     }
 
-    return props.sdk.space.getEntityScheduledActions(entityType, id).then(function (data) {
-      dispatch({
-        type: 'set_scheduled_actions',
-        key: key,
-        actions: data
-      });
-      return data;
-    })["catch"](function () {
-      dispatch({
-        type: 'set_scheduled_actions',
-        key: key,
-        actions: undefined
+    var _options = options,
+        priority = _options.priority,
+        queryOptions = _objectWithoutPropertiesLoose(_options, _excluded$1);
+
+    return queryClient.fetchQuery(queryKey, function () {
+      return queryQueue.add(function () {
+        return fn({
+          cmaClient: cmaClient
+        });
+      }, {
+        priority: priority
       });
-      return [];
-    });
-  }, [props.sdk.space, state.scheduledActions]);
-  var loadEntry = React.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
-              });
+    }, queryOptions);
+  }, [queryClient, queryQueue, cmaClient]);
+  var getEntity = React.useCallback(function getEntity(entityType, entityId, options) {
+    var _options$spaceId, _options$environmentI;
+
+    var spaceId = (_options$spaceId = options == null ? void 0 : options.spaceId) != null ? _options$spaceId : currentSpaceId;
+    var environmentId = (_options$environmentI = options == null ? void 0 : options.environmentId) != null ? _options$environmentI : currentEnvironmentId;
+    var queryKey = [entityType, entityId, spaceId, environmentId];
+    return fetch(queryKey, function (_ref) {
+      var cmaClient = _ref.cmaClient;
+
+      if (entityType === 'Entry') {
+        return cmaClient.entry.get({
+          entryId: entityId,
+          spaceId: spaceId,
+          environmentId: environmentId
+        });
+      }
 
-            case 3:
-              entry = _context.sent;
-              dispatch({
-                type: 'set_entry',
-                id: entryId,
-                entry: entry
-              });
-              return _context.abrupt("return", entry);
+      if (entityType === 'Asset') {
+        return cmaClient.asset.get({
+          assetId: entityId,
+          spaceId: spaceId,
+          environmentId: environmentId
+        });
+      }
 
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](0);
-              dispatch({
-                type: 'set_entry_failed',
-                id: entryId
-              });
-              return _context.abrupt("return");
+      throw new UnsupportedError('Unsupported entity type');
+    }, options);
+  }, [fetch, currentSpaceId, currentEnvironmentId]);
+  var getEntityScheduledActions = React.useCallback(function getEntityScheduledActions(entityType, entityId, options) {
+    var _options$spaceId2, _options$environmentI2;
+
+    var spaceId = (_options$spaceId2 = options == null ? void 0 : options.spaceId) != null ? _options$spaceId2 : currentSpaceId;
+    var environmentId = (_options$environmentI2 = options == null ? void 0 : options.environmentId) != null ? _options$environmentI2 : currentEnvironmentId;
+    var queryKey = ['scheduled-actions', entityType, entityId, spaceId, environmentId];
+    return fetch(queryKey, /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
+        var cmaClient, response;
+        return runtime_1.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                cmaClient = _ref2.cmaClient;
+                _context.next = 3;
+                return cmaClient.scheduledActions.getMany({
+                  spaceId: spaceId,
+                  query: {
+                    'environment.sys.id': environmentId,
+                    'entity.sys.id': entityId,
+                    'sys.status[in]': 'scheduled',
+                    order: 'scheduledFor.datetime'
+                  }
+                });
 
-            case 12:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 8]]);
-    }));
+              case 3:
+                response = _context.sent;
+                return _context.abrupt("return", response.items);
 
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [cmaClient, spaceId, environmentId]);
-  var getEntry = React.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];
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
 
-              if (!isNotNil(cachedEntry)) {
-                _context2.next = 3;
-                break;
-              }
+      return function (_x2) {
+        return _ref3.apply(this, arguments);
+      };
+    }(), options);
+  }, [fetch, currentSpaceId, currentEnvironmentId]);
+  var getResource = React.useCallback(function getResource(resourceType, urn, options) {
+    var queryKey = ['Resource', resourceType, urn];
+    return fetch(queryKey, function () {
+      if (resourceType === 'Contentful:Entry') {
+        return fetchContentfulEntry({
+          fetch: fetch,
+          urn: urn,
+          options: options
+        });
+      }
 
-              return _context2.abrupt("return", cachedEntry);
+      throw new UnsupportedError('Unsupported resource type');
+    }, options);
+  }, [fetch]);
+  var isSameSpaceEntityQueryKey = React.useCallback(function (queryKey) {
+    var isEntityKey = isEntityQueryKey(queryKey);
+    var isSameSpaceEntityKey = isEntityKey && queryKey[2] === currentSpaceId && queryKey[3] === currentEnvironmentId;
+    return isSameSpaceEntityKey;
+  }, [currentSpaceId, currentEnvironmentId]); // @ts-expect-error ...
+
+  // @ts-expect-error ...
+  var onEntityChanged = props.sdk.space.onEntityChanged;
+  React.useEffect(function () {
+    if (typeof onEntityChanged !== 'function') {
+      return;
+    }
 
-            case 3:
-              return _context2.abrupt("return", loadEntry(entryId));
+    var subscribeQuery = function subscribeQuery(_ref4) {
+      var queryKey = _ref4.queryKey,
+          queryHash = _ref4.queryHash;
+      var entityType = queryKey[0],
+          entityId = queryKey[1];
+      entityChangeUnsubscribers.current[queryHash] = onEntityChanged(entityType, entityId, function (data) {
+        queryClient.setQueryData(queryKey, data);
+      });
+    };
 
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
+    var queries = queryCache.findAll({
+      type: 'active',
+      predicate: function predicate(query) {
+        return isSameSpaceEntityQueryKey(query.queryKey);
+      }
+    });
+    queries.forEach(subscribeQuery);
+    var unsubscribe = queryCache.subscribe(function (event) {
+      if (!event) {
+        return;
+      }
 
-    return function (_x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [loadEntry, state.entries]);
-  var loadAsset = React.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
-              });
+      var type = event.type,
+          query = event.query;
+      var queryKey = query.queryKey,
+          queryHash = query.queryHash;
 
-            case 3:
-              asset = _context3.sent;
-              dispatch({
-                type: 'set_asset',
-                id: assetId,
-                asset: asset
-              });
-              return _context3.abrupt("return", asset);
+      if (!isSameSpaceEntityQueryKey(queryKey)) {
+        return;
+      }
 
-            case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](0);
-              dispatch({
-                type: 'set_asset_failed',
-                id: assetId
-              });
-              return _context3.abrupt("return");
+      if (type === 'added') {
+        subscribeQuery(query);
+      }
 
-            case 12:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3, null, [[0, 8]]);
-    }));
+      if (type === 'removed') {
+        var _entityChangeUnsubscr, _entityChangeUnsubscr2;
 
-    return function (_x3) {
-      return _ref4.apply(this, arguments);
+        // calling unsubscribe
+        (_entityChangeUnsubscr = (_entityChangeUnsubscr2 = entityChangeUnsubscribers.current)[queryHash]) == null ? void 0 : _entityChangeUnsubscr.call(_entityChangeUnsubscr2);
+      }
+    });
+    return function () {
+      unsubscribe();
+      Object.values(entityChangeUnsubscribers.current).forEach(function (off) {
+        return off();
+      });
+      entityChangeUnsubscribers.current = {};
     };
-  }(), [cmaClient, spaceId, environmentId]);
-  var getAsset = React.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;
-              }
+  }, [onEntityChanged, queryCache, isSameSpaceEntityQueryKey, queryClient]);
+  return {
+    cmaClient: cmaClient,
+    fetch: fetch,
+    getResource: getResource,
+    getEntity: getEntity,
+    ids: props.sdk.ids,
+    getEntityScheduledActions: getEntityScheduledActions
+  };
+}, function (_ref5) {
+  var fetch = _ref5.fetch;
+  return fetch;
+}, function (_ref6) {
+  var getResource = _ref6.getResource,
+      getEntity = _ref6.getEntity,
+      getEntityScheduledActions = _ref6.getEntityScheduledActions;
+  return {
+    getResource: getResource,
+    getEntity: getEntity,
+    getEntityScheduledActions: getEntityScheduledActions
+  };
+}, function (_ref7) {
+  var ids = _ref7.ids;
+  return ids;
+}),
+    InternalServiceProvider = _constate[0],
+    useEntityLoader = _constate[2],
+    useCurrentIds = _constate[3];
+
+function useEntity(entityType, entityId, options) {
+  var _options$spaceId3, _options$environmentI3;
+
+  var _useCurrentIds = useCurrentIds(),
+      space = _useCurrentIds.space,
+      environment = _useCurrentIds.environment;
+
+  var _useEntityLoader = useEntityLoader(),
+      getEntity = _useEntityLoader.getEntity;
+
+  var queryKey = [entityType, entityId, (_options$spaceId3 = options == null ? void 0 : options.spaceId) != null ? _options$spaceId3 : space, (_options$environmentI3 = options == null ? void 0 : options.environmentId) != null ? _options$environmentI3 : environment];
+
+  var _useQuery = reactQuery.useQuery(queryKey, function () {
+    return getEntity(entityType, entityId, options);
+  }, {
+    enabled: options == null ? void 0 : options.enabled
+  }),
+      status = _useQuery.status,
+      data = _useQuery.data;
 
-              return _context4.abrupt("return", cachedAsset);
+  return {
+    status: status,
+    data: data
+  };
+}
+function useResource(resourceType, urn, options) {
+  var queryKey = ['Resource', resourceType, urn];
 
-            case 3:
-              return _context4.abrupt("return", loadAsset(assetId));
+  var _useEntityLoader2 = useEntityLoader(),
+      getResource = _useEntityLoader2.getResource;
 
-            case 4:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    }));
+  var _useQuery2 = reactQuery.useQuery(queryKey, function () {
+    return getResource(resourceType, urn, options);
+  }, {
+    enabled: options == null ? void 0 : options.enabled
+  }),
+      status = _useQuery2.status,
+      data = _useQuery2.data,
+      error = _useQuery2.error;
 
-    return function (_x4) {
-      return _ref5.apply(this, arguments);
-    };
-  }(), [loadAsset, state.assets]);
-  var loadContentfulEntry = React.useCallback( /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(urn) {
-      var _locales$items$find;
+  return {
+    status: status,
+    data: data,
+    error: error
+  };
+}
 
-      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
-                }
-              });
-
-            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 = React.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]);
-  React.useEffect(function () {
-    // @ts-expect-error
-    if (typeof props.sdk.space.onEntityChanged !== 'undefined') {
-      // @ts-expect-error
-      var onEntityChanged = props.sdk.space.onEntityChanged;
-      var listeners = [];
-
-      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();
-        });
-      };
-    }
-
-    return props.sdk.navigator.onSlideInNavigation(function (_ref8) {
-      var oldSlideLevel = _ref8.oldSlideLevel,
-          newSlideLevel = _ref8.newSlideLevel;
-
-      if (oldSlideLevel > newSlideLevel) {
-        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 React.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),
-    EntityProvider = _constate[0],
-    useEntities = _constate[1];
+function EntityProvider(_ref8) {
+  var children = _ref8.children,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
+
+  var reactQueryClient = React.useMemo(function () {
+    var queryCache = new reactQuery.QueryCache();
+    var queryClient = new reactQuery.QueryClient({
+      queryCache: queryCache,
+      defaultOptions: {
+        queries: {
+          useErrorBoundary: false,
+          refetchOnWindowFocus: false,
+          refetchOnReconnect: true,
+          refetchOnMount: false,
+          staleTime: Infinity,
+          retry: false
+        }
+      }
+    });
+    return queryClient;
+  }, []);
+  return React__default.createElement(reactQuery.QueryClientProvider, {
+    client: reactQueryClient
+  }, React__default.createElement(InternalServiceProvider, _extends({}, props), children));
+}
 
 function ReferenceEditor(props) {
   return React.createElement(EntityProvider, {
@@ -2581,7 +2562,10 @@ function fromFieldValidations(field) {
   var result = {
     contentTypes: (_linkContentTypeValid = linkContentTypeValidations == null ? void 0 : linkContentTypeValidations.linkContentType) != null ? _linkContentTypeValid : undefined,
     mimetypeGroups: (_linkMimetypeGroupVal = linkMimetypeGroupValidations == null ? void 0 : linkMimetypeGroupValidations.linkMimetypeGroup) != null ? _linkMimetypeGroupVal : undefined,
-    numberOfLinks: numberOfLinks
+    numberOfLinks: numberOfLinks // todo: there are multiple BE problems that need to be solved first, for now we don't want to apply size constraints
+    // linkedFileSize: findValidation(field, 'assetFileSize', {}),
+    // linkedImageDimensions: findValidation(field, 'assetImageDimensions', {})
+
   };
   return result;
 }
@@ -2780,7 +2764,7 @@ function Editor(props) {
   [linkActionsProps]);
 
   if (!props.entityId) {
-    return React.createElement(LinkEntityActions, Object.assign({
+    return React.createElement(LinkEntityActions, _extends({
       renderCustomActions: props.renderCustomActions
     }, linkActionsProps));
   }
@@ -2792,12 +2776,12 @@ function Editor(props) {
 
 function SingleReferenceEditor(props) {
   var allContentTypes = props.sdk.space.getCachedContentTypes();
-  return React.createElement(ReferenceEditor, Object.assign({}, props), function (_ref) {
+  return React.createElement(ReferenceEditor, _extends({}, props), function (_ref) {
     var value = _ref.value,
         setValue = _ref.setValue,
         disabled = _ref.disabled,
         externalReset = _ref.externalReset;
-    return React.createElement(Editor, Object.assign({}, props, {
+    return React.createElement(Editor, _extends({}, props, {
       key: externalReset + "-reference",
       entityId: value ? value.sys.id : '',
       isDisabled: disabled,
@@ -3027,18 +3011,24 @@ function _openEntry() {
 }
 
 function FetchingWrappedEntryCard(props) {
-  var _useEntities = useEntities(),
-      getEntry = _useEntities.getEntry,
-      getAsset = _useEntities.getAsset,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
-      entries = _useEntities.entries;
+  var _useEntity = useEntity('Entry', props.entryId),
+      entry = _useEntity.data,
+      status = _useEntity.status;
 
-  React.useEffect(function () {
-    getEntry(props.entryId); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [props.entryId]);
+  var _useEntityLoader = useEntityLoader(),
+      getEntityScheduledActions = _useEntityLoader.getEntityScheduledActions;
+
+  var loadEntityScheduledActions = React.useCallback(function () {
+    return getEntityScheduledActions('Entry', props.entryId);
+  }, [getEntityScheduledActions, props.entryId]);
   var size = props.viewType === 'link' ? 'small' : 'default';
-  var entry = entries[props.entryId];
-  var entityKey = entry === 'failed' ? 'failed' : entry === undefined ? 'undefined' : ":" + entry.sys.id + ":" + entry.sys.version;
+
+  var _useEntityLoader2 = useEntityLoader(),
+      getEntity = _useEntityLoader2.getEntity;
+
+  var getAsset = function getAsset(assetId) {
+    return getEntity('Asset', assetId);
+  };
 
   var onEdit = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
@@ -3096,7 +3086,7 @@ function FetchingWrappedEntryCard(props) {
 
   }, [entry]);
   return React.useMemo(function () {
-    if (entry === 'failed') {
+    if (status === 'error') {
       var card = React.createElement(MissingEntityCard, {
         entityType: "Entry",
         isDisabled: props.isDisabled,
@@ -3116,7 +3106,7 @@ function FetchingWrappedEntryCard(props) {
       return card;
     }
 
-    if (entry === undefined) {
+    if (status === 'loading') {
       return React.createElement(f36Components.EntryCard, {
         size: size,
         isLoading: true
@@ -3155,7 +3145,7 @@ function FetchingWrappedEntryCard(props) {
         entryUrl: (props == null ? void 0 : props.entityUrl) || sharedCardProps.entityUrl
       });
 
-      return React.createElement(WrappedEntryCard, Object.assign({}, builtinCardProps));
+      return React.createElement(WrappedEntryCard, _extends({}, builtinCardProps));
     }
 
     if (props.renderCustomCard) {
@@ -3168,11 +3158,11 @@ function FetchingWrappedEntryCard(props) {
     }
 
     return renderDefaultCard(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [props, entityKey]);
+  }, [props, status, entry]);
 }
 
 function SingleEntryReferenceEditor(props) {
-  return React.createElement(SingleReferenceEditor, Object.assign({}, props, {
+  return React.createElement(SingleReferenceEditor, _extends({}, props, {
     entityType: "Entry"
   }), function (_ref) {
     var allContentTypes = _ref.allContentTypes,
@@ -3182,7 +3172,7 @@ function SingleEntryReferenceEditor(props) {
         renderCustomCard = _ref.renderCustomCard,
         hasCardRemoveActions = _ref.hasCardRemoveActions,
         hasCardEditActions = _ref.hasCardEditActions;
-    return React.createElement(FetchingWrappedEntryCard, Object.assign({}, props, {
+    return React.createElement(FetchingWrappedEntryCard, _extends({}, props, {
       allContentTypes: allContentTypes,
       isDisabled: isDisabled,
       entryId: entityId,
@@ -3273,19 +3263,19 @@ function Editor$1(props) {
     onSortEnd: onSortEnd,
     onMove: onMove,
     renderCustomCard: props.renderCustomCard && customCardRenderer
-  })), React.createElement(LinkEntityActions, Object.assign({
+  })), React.createElement(LinkEntityActions, _extends({
     renderCustomActions: props.renderCustomActions
   }, linkActionsProps)));
 }
 
 function MultipleReferenceEditor(props) {
   var allContentTypes = props.sdk.space.getCachedContentTypes();
-  return React.createElement(ReferenceEditor, Object.assign({}, props), function (_ref2) {
+  return React.createElement(ReferenceEditor, _extends({}, props), function (_ref2) {
     var value = _ref2.value,
         disabled = _ref2.disabled,
         setValue = _ref2.setValue,
         externalReset = _ref2.externalReset;
-    return React.createElement(Editor$1, Object.assign({}, props, {
+    return React.createElement(Editor$1, _extends({}, props, {
       items: value || emptyArray,
       isDisabled: disabled,
       setValue: setValue,
@@ -3342,16 +3332,16 @@ var SortableLinkListInternal = /*#__PURE__*/reactSortableHoc.SortableContainer(f
 function SortableLinkList(props) {
   // with the default distance of 0 the drag start event is "confused" with the click event,
   // so the latter one isn't fired and click handlers on child elements don't work
-  return React__default.createElement(SortableLinkListInternal, Object.assign({
+  return React__default.createElement(SortableLinkListInternal, _extends({
     distance: 1
   }, props), props.children);
 }
 
 function MultipleEntryReferenceEditor(props) {
-  return React.createElement(MultipleReferenceEditor, Object.assign({}, props, {
+  return React.createElement(MultipleReferenceEditor, _extends({}, props, {
     entityType: "Entry"
   }), function (childrenProps) {
-    return React.createElement(SortableLinkList, Object.assign({}, childrenProps, {
+    return React.createElement(SortableLinkList, _extends({}, childrenProps, {
       axis: "y",
       useDragHandle: true
     }), function (_ref) {
@@ -3361,7 +3351,7 @@ function MultipleEntryReferenceEditor(props) {
           isDisabled = _ref.isDisabled,
           DragHandle = _ref.DragHandle;
       var lastIndex = items.length - 1;
-      return React.createElement(FetchingWrappedEntryCard, Object.assign({}, childrenProps, {
+      return React.createElement(FetchingWrappedEntryCard, _extends({}, childrenProps, {
         key: item.sys.id + "-" + index,
         index: index,
         allContentTypes: childrenProps.allContentTypes,
@@ -3616,20 +3606,16 @@ var WrappedAssetLink = function WrappedAssetLink(props) {
 };
 
 function FetchingWrappedAssetCard(props) {
-  var _useEntities = useEntities(),
-      getAsset = _useEntities.getAsset,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
-      assets = _useEntities.assets;
+  var _useEntity = useEntity('Asset', props.assetId),
+      asset = _useEntity.data,
+      status = _useEntity.status;
 
-  React.useEffect(function () {
-    if (!props.assetId) {
-      return;
-    }
+  var _useEntityLoader = useEntityLoader(),
+      getEntityScheduledActions = _useEntityLoader.getEntityScheduledActions;
 
-    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;
+  var loadEntityScheduledActions = React.useCallback(function () {
+    return getEntityScheduledActions('Asset', props.assetId);
+  }, [getEntityScheduledActions, props.assetId]);
   React.useEffect(function () {
     if (asset) {
       props.onAction && props.onAction({
@@ -3688,7 +3674,7 @@ function FetchingWrappedAssetCard(props) {
   };
 
   return React.useMemo(function () {
-    if (asset === 'failed') {
+    if (status === 'error') {
       var card = React.createElement(MissingEntityCard, {
         entityType: "Asset",
         asSquare: props.viewType !== 'link',
@@ -3709,8 +3695,7 @@ function FetchingWrappedAssetCard(props) {
       return card;
     }
 
-    var getEntityUrl = props.getEntityUrl,
-        sdk = props.sdk;
+    var getEntityUrl = props.getEntityUrl;
     var size = props.viewType === 'big_card' ? 'default' : 'small';
     var commonProps = {
       asset: asset,
@@ -3725,20 +3710,20 @@ function FetchingWrappedAssetCard(props) {
     };
 
     if (props.viewType === 'link') {
-      if (asset === undefined) {
+      if (status === 'loading') {
         return React.createElement(f36Components.EntryCard, {
           size: "small",
           isLoading: true
         });
       }
 
-      return React.createElement(WrappedAssetLink, Object.assign({}, commonProps, {
+      return React.createElement(WrappedAssetLink, _extends({}, commonProps, {
         href: commonProps.entityUrl,
-        getEntityScheduledActions: sdk.space.getEntityScheduledActions
+        getEntityScheduledActions: loadEntityScheduledActions
       }));
     }
 
-    if (asset === undefined) {
+    if (status === 'loading') {
       return React.createElement(f36Components.AssetCard, {
         size: size,
         isLoading: true
@@ -3753,7 +3738,7 @@ function FetchingWrappedAssetCard(props) {
         getAssetUrl: getEntityUrl
       });
 
-      return React.createElement(WrappedAssetCard, Object.assign({}, builtinCardProps));
+      return React.createElement(WrappedAssetCard, _extends({}, builtinCardProps));
     }
 
     if (props.renderCustomCard) {
@@ -3770,17 +3755,17 @@ function FetchingWrappedAssetCard(props) {
     }
 
     return renderDefaultCard(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [props, entityKey]);
+  }, [props, status, asset]);
 }
 
 function SingleMediaEditor(props) {
-  return React.createElement(SingleReferenceEditor, Object.assign({}, props, {
+  return React.createElement(SingleReferenceEditor, _extends({}, props, {
     entityType: "Asset"
   }), function (_ref) {
     var entityId = _ref.entityId,
         isDisabled = _ref.isDisabled,
         setValue = _ref.setValue;
-    return React.createElement(FetchingWrappedAssetCard, Object.assign({}, props, {
+    return React.createElement(FetchingWrappedAssetCard, _extends({}, props, {
       viewType: "big_card",
       assetId: entityId,
       isDisabled: isDisabled,
@@ -3802,12 +3787,12 @@ var styles$6 = {
   })
 };
 function MultipleMediaEditor(props) {
-  return React.createElement(MultipleReferenceEditor, Object.assign({}, props, {
+  return React.createElement(MultipleReferenceEditor, _extends({}, props, {
     entityType: "Asset"
   }), function (childrenProps) {
     var _cx;
 
-    return React.createElement(SortableLinkList, Object.assign({}, childrenProps, {
+    return React.createElement(SortableLinkList, _extends({}, childrenProps, {
       className: emotion.cx((_cx = {}, _cx[styles$6.gridContainer] = childrenProps.viewType === 'card', _cx)),
       axis: childrenProps.viewType === 'card' ? 'xy' : 'y',
       useDragHandle: true
@@ -3817,7 +3802,7 @@ function MultipleMediaEditor(props) {
           index = _ref.index,
           isDisabled = _ref.isDisabled,
           DragHandle = _ref.DragHandle;
-      return React.createElement(FetchingWrappedAssetCard, Object.assign({}, childrenProps, {
+      return React.createElement(FetchingWrappedAssetCard, _extends({}, childrenProps, {
         isDisabled: isDisabled,
         key: item.sys.id + "-" + index,
         assetId: item.sys.id,
@@ -3835,6 +3820,448 @@ MultipleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
+var resolveAsset = function resolveAsset() {
+  return Promise.resolve();
+}; // we don't want to show scheduled actions for resources
+
+
+var resolveScheduledActions = function resolveScheduledActions() {
+  return Promise.resolve([]);
+};
+
+function ContentfulEntryCard(_ref) {
+  var info = _ref.info,
+      isDisabled = _ref.isDisabled,
+      renderDragHandle = _ref.renderDragHandle,
+      onRemove = _ref.onRemove,
+      onMoveTop = _ref.onMoveTop,
+      onMoveBottom = _ref.onMoveBottom,
+      getEntryRouteHref = _ref.getEntryRouteHref;
+  var resourceSys = info.resource.sys;
+  var spaceId = resourceSys.space.sys.id;
+  var environmentId = resourceSys.environment.sys.id;
+  var entryId = resourceSys.id;
+  var resourceHref = getEntryRouteHref({
+    spaceId: spaceId,
+    environmentId: environmentId,
+    entryId: entryId
+  }); // TODO: move this into `sdk.navigator.openEntry()`, note that it's signature only include the entry id (not a space or environment)
+
+  var openEntryDetail = function openEntryDetail() {
+    window.open(resourceHref, '_blank', 'noopener,noreferrer');
+  };
+
+  return React.createElement(WrappedEntryCard, {
+    entry: info.resource,
+    isDisabled: isDisabled,
+    hasCardEditActions: false,
+    contentType: info.contentType,
+    // we use the default locale from the space the entry belongs to
+    // as we assume this gives a more consistent behaviour.
+    // locales will inevitably differ from space to space, so it's likely
+    // that the current locale does not exist in the "remote" space
+    localeCode: info.defaultLocaleCode,
+    defaultLocaleCode: info.defaultLocaleCode,
+    size: "small",
+    getAsset: resolveAsset,
+    getEntityScheduledActions: resolveScheduledActions,
+    spaceName: info.space.name,
+    renderDragHandle: renderDragHandle,
+    isClickable: true,
+    onEdit: openEntryDetail,
+    hasCardRemoveActions: Boolean(onRemove),
+    onRemove: onRemove,
+    onMoveBottom: onMoveBottom,
+    onMoveTop: onMoveTop,
+    entryUrl: resourceHref
+  });
+}
+
+var styles$7 = {
+  card: /*#__PURE__*/emotion.css({
+    position: 'relative'
+  })
+};
+function UnsupportedEntityCard(props) {
+  return React__default.createElement(f36Components.Card, {
+    className: styles$7.card
+  }, React__default.createElement(f36Components.SectionHeading, {
+    marginBottom: "none"
+  }, "Resource type ", props.entityType, " is currently not supported"));
+}
+
+function ResourceCardSkeleton() {
+  return React.createElement(f36Components.EntryCard, {
+    size: "small",
+    isLoading: true
+  });
+}
+
+function ExistingResourceCard(props) {
+  var resourceLink = props.resourceLink,
+      inView = props.inView,
+      _props$index = props.index,
+      index = _props$index === void 0 ? 0 : _props$index;
+  var resourceOptions = {
+    priority: index * -1,
+    enabled: inView
+  };
+
+  var _useResource = useResource(resourceLink.sys.linkType, resourceLink.sys.urn, resourceOptions),
+      data = _useResource.data,
+      error = _useResource.error;
+
+  if (!data && !error) {
+    return React.createElement(ResourceCardSkeleton, null);
+  }
+
+  if (data) {
+    return React.createElement(ContentfulEntryCard, _extends({
+      info: data
+    }, props));
+  }
+
+  if (isUnsupportedError(error)) {
+    return React.createElement(UnsupportedEntityCard, {
+      entityType: resourceLink.sys.linkType
+    });
+  }
+
+  return React.createElement(MissingEntityCard, {
+    entityType: "Entry",
+    isDisabled: props.isDisabled,
+    onRemove: props.onRemove
+  });
+}
+
+function ResourceCardWrapper(props) {
+  if (!props.resourceLink) {
+    return null;
+  }
+
+  return React.createElement(ExistingResourceCard, _extends({}, props, {
+    resourceLink: props.resourceLink,
+    getEntryRouteHref: props.getEntryRouteHref
+  }));
+}
+
+function ResourceCard(props) {
+  var _useInView = reactIntersectionObserver.useInView({
+    triggerOnce: true,
+    rootMargin: '300px 0px 0px 300px'
+  }),
+      ref = _useInView.ref,
+      inView = _useInView.inView; // Forma does not offer us to pass refs, so we need an additional wrapper here
+
+
+  return React.createElement("div", {
+    ref: ref
+  }, React.createElement(ResourceCardWrapper, _extends({}, props, {
+    inView: inView
+  })));
+}
+
+function useResourceLinkActions(_ref) {
+  var apiUrl = _ref.apiUrl,
+      dialogs = _ref.dialogs,
+      field = _ref.field,
+      onAfterLink = _ref.onAfterLink;
+  var handleAfterLink = React.useCallback(function (entries) {
+    if (!onAfterLink) {
+      return;
+    }
+
+    entries.forEach(onAfterLink);
+  }, [onAfterLink]);
+  var multiple = field.type === 'Array';
+  var toLinkItem = React.useMemo(function () {
+    function toUrn(entry) {
+      return "crn:" + apiUrl + ":::content:spaces/" + entry.sys.space.sys.id + "/entries/" + entry.sys.id;
+    }
+
+    return function (entry) {
+      return {
+        sys: {
+          type: 'ResourceLink',
+          linkType: 'Contentful:Entry',
+          urn: toUrn(entry)
+        }
+      };
+    };
+  }, [apiUrl]);
+  var onLinkedExisting = React.useMemo(function () {
+    if (multiple) {
+      return function (entries) {
+        var linkItems = entries.map(toLinkItem);
+        var prevValue = field.getValue() || [];
+        var updatedValue = [].concat(prevValue, linkItems);
+        field.setValue(updatedValue);
+        handleAfterLink(entries);
+      };
+    } else {
+      return function (entries) {
+        var entry = entries[0];
+        field.setValue(toLinkItem(entry));
+        handleAfterLink([entry]);
+      };
+    }
+  }, [field, handleAfterLink, multiple, toLinkItem]);
+  var onLinkExisting = React.useMemo(function () {
+    var promptSelection = multiple ? /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return dialogs.selectMultipleResourceEntries({
+                // @ts-expect-error wait for update of app-sdk version
+                allowedResources: field.allowedResources
+              });
+
+            case 2:
+              return _context.abrupt("return", _context.sent);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })) : /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return dialogs.selectSingleResourceEntry({
+                // @ts-expect-error wait for update of app-sdk version
+                allowedResources: field.allowedResources
+              });
+
+            case 2:
+              _context2.t0 = _context2.sent;
+              return _context2.abrupt("return", [_context2.t0]);
+
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
+      var res;
+      return runtime_1.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return promptSelection();
+
+            case 2:
+              res = _context3.sent;
+
+              if (res) {
+                _context3.next = 5;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 5:
+              onLinkedExisting(res);
+
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })); // @ts-expect-error wait for update of app-sdk version
+  }, [dialogs, field.allowedResources, multiple, onLinkedExisting]);
+  return {
+    onLinkExisting: onLinkExisting,
+    onLinkedExisting: onLinkedExisting,
+    // hardcoded values to match interface for standard reference field actions
+    entityType: 'Entry',
+    contentTypes: [],
+    canCreateEntity: false,
+    canLinkMultiple: multiple,
+    canLinkEntity: true,
+    isDisabled: false,
+    isEmpty: false,
+    isFull: false,
+    // eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
+    onCreate: function () {
+      var _onCreate = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
+        return runtime_1.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      function onCreate() {
+        return _onCreate.apply(this, arguments);
+      }
+
+      return onCreate;
+    }(),
+    // eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
+    onCreated: function onCreated() {}
+  };
+}
+
+function ResourceEditor(props) {
+  var setValue = props.setValue,
+      items = props.items,
+      apiUrl = props.apiUrl;
+  var onSortStart = React.useCallback(function (_, event) {
+    return event.preventDefault();
+  }, []);
+  var onSortEnd = React.useCallback(function (_ref) {
+    var oldIndex = _ref.oldIndex,
+        newIndex = _ref.newIndex;
+    var newItems = arrayMove(items, oldIndex, newIndex);
+    setValue(newItems);
+  }, [items, setValue]);
+  var onMove = React.useCallback(function (oldIndex, newIndex) {
+    var newItems = arrayMove(items, oldIndex, newIndex);
+    setValue(newItems);
+  }, [items, setValue]);
+  var onRemoteItemAtIndex = React.useCallback(function (index) {
+    setValue(items.filter(function (_v, i) {
+      return i !== index;
+    }));
+  }, [items, setValue]);
+  var _props$sdk = props.sdk,
+      dialogs = _props$sdk.dialogs,
+      field = _props$sdk.field;
+  var linkActionsProps = useResourceLinkActions({
+    dialogs: dialogs,
+    field: field,
+    apiUrl: apiUrl
+  });
+  return React.createElement(React.Fragment, null, props.children(_extends({}, props, {
+    onSortStart: onSortStart,
+    onSortEnd: onSortEnd,
+    onMove: onMove,
+    onRemoteItemAtIndex: onRemoteItemAtIndex
+  })), React.createElement(CombinedLinkActions, _extends({}, linkActionsProps)));
+} // provides memoized callbacks bound to a given item
+
+
+function WithPerItemCallbacks(_ref2) {
+  var listLength = _ref2.listLength,
+      index = _ref2.index,
+      onMove = _ref2.onMove,
+      onRemoteItemAtIndex = _ref2.onRemoteItemAtIndex,
+      children = _ref2.children;
+  var handleMoveTop = React.useMemo(function () {
+    return index > 0 ? function () {
+      return onMove(index, 0);
+    } : undefined;
+  }, [index, onMove]);
+  var handleMoveBottom = React.useMemo(function () {
+    return index < listLength - 1 ? function () {
+      return onMove(index, listLength - 1);
+    } : undefined;
+  }, [index, onMove, listLength]);
+  var handleRemove = React.useCallback(function () {
+    return onRemoteItemAtIndex(index);
+  }, [index, onRemoteItemAtIndex]);
+  return React.createElement(React.Fragment, null, children({
+    onMoveBottom: handleMoveBottom,
+    onMoveTop: handleMoveTop,
+    onRemove: handleRemove
+  }));
+}
+
+var EMPTY_ARRAY = [];
+function MultipleResourceReferenceEditor(props) {
+  return React.createElement(EntityProvider, {
+    sdk: props.sdk
+  }, React.createElement(fieldEditorShared.FieldConnector, {
+    throttle: 0,
+    field: props.sdk.field,
+    isInitiallyDisabled: props.isInitiallyDisabled,
+    isEqualValues: deepEqual
+  }, function (_ref3) {
+    var value = _ref3.value,
+        disabled = _ref3.disabled,
+        setValue = _ref3.setValue,
+        externalReset = _ref3.externalReset;
+    return React.createElement(ResourceEditor, _extends({}, props, {
+      items: value || EMPTY_ARRAY,
+      isDisabled: disabled,
+      setValue: setValue,
+      key: externalReset + "-list"
+    }), function (editorProps) {
+      return React.createElement(SortableLinkList, _extends({}, editorProps), function (_ref4) {
+        var item = _ref4.item,
+            isDisabled = _ref4.isDisabled,
+            DragHandle = _ref4.DragHandle,
+            index = _ref4.index;
+        return React.createElement(WithPerItemCallbacks, {
+          index: index,
+          onMove: editorProps.onMove,
+          onRemoteItemAtIndex: editorProps.onRemoteItemAtIndex,
+          listLength: (value == null ? void 0 : value.length) || 0
+        }, function (_ref5) {
+          var onMoveBottom = _ref5.onMoveBottom,
+              onMoveTop = _ref5.onMoveTop,
+              onRemove = _ref5.onRemove;
+          return React.createElement(ResourceCard, {
+            index: index,
+            resourceLink: item,
+            isDisabled: isDisabled,
+            renderDragHandle: DragHandle,
+            onMoveTop: onMoveTop,
+            onMoveBottom: onMoveBottom,
+            onRemove: onRemove,
+            getEntryRouteHref: props.getEntryRouteHref
+          });
+        });
+      });
+    });
+  }));
+}
+
+function SingleResourceReferenceEditor(props) {
+  var _props$sdk = props.sdk,
+      dialogs = _props$sdk.dialogs,
+      field = _props$sdk.field;
+  var linkActionsProps = useResourceLinkActions({
+    dialogs: dialogs,
+    field: field,
+    apiUrl: props.apiUrl
+  });
+  return React.createElement(EntityProvider, {
+    sdk: props.sdk
+  }, React.createElement(fieldEditorShared.FieldConnector, {
+    throttle: 0,
+    field: props.sdk.field,
+    isInitiallyDisabled: props.isInitiallyDisabled,
+    isEqualValues: deepEqual
+  }, function (_ref) {
+    var value = _ref.value,
+        disabled = _ref.disabled;
+    return value ? React.createElement(ResourceCard, {
+      onRemove: function onRemove() {
+        return props.sdk.field.removeValue();
+      },
+      resourceLink: value,
+      isDisabled: disabled,
+      getEntryRouteHref: props.getEntryRouteHref
+    }) : // TODO: support custom actions once publicly available
+    React.createElement(CombinedLinkActions, _extends({}, linkActionsProps));
+  }));
+}
+
 exports.AssetThumbnail = AssetThumbnail;
 exports.CombinedLinkActions = CombinedLinkActions;
 exports.CreateEntryLinkButton = CreateEntryLinkButton;
@@ -3843,12 +4270,16 @@ exports.EntityProvider = EntityProvider;
 exports.MissingEntityCard = MissingEntityCard;
 exports.MultipleEntryReferenceEditor = MultipleEntryReferenceEditor;
 exports.MultipleMediaEditor = MultipleMediaEditor;
+exports.MultipleResourceReferenceEditor = MultipleResourceReferenceEditor;
 exports.ScheduledIconWithTooltip = ScheduledIconWithTooltip;
 exports.SingleEntryReferenceEditor = SingleEntryReferenceEditor;
 exports.SingleMediaEditor = SingleMediaEditor;
+exports.SingleResourceReferenceEditor = SingleResourceReferenceEditor;
 exports.SortableLinkList = SortableLinkList;
 exports.WrappedAssetCard = WrappedAssetCard;
 exports.WrappedEntryCard = WrappedEntryCard;
 exports.getScheduleTooltipContent = getScheduleTooltipContent;
-exports.useEntities = useEntities;
+exports.useEntity = useEntity;
+exports.useEntityLoader = useEntityLoader;
+exports.useResource = useResource;
 //# sourceMappingURL=field-editor-reference.cjs.development.js.map