@contentful/field-editor-reference 6.19.0 → 6.19.1-canary.18

package/dist/esm/__fixtures__/FakeSdk.js

@@ -35,15 +35,6 @@ export function newReferenceEditorFakeSdk(props) {
     const delay = (ms)=>{
         return new Promise((resolve)=>setTimeout(resolve, ms));
     };
-    const localizeContentTypes = (contentTypes)=>{
-        return contentTypes.map((contentType)=>({
-                ...contentType,
-                fields: contentType.fields.map((field)=>({
-                        ...field,
-                        localized: true
-                    }))
-            }));
-    };
     const sdk = {
         field,
         locales,
@@ -96,6 +87,19 @@ export function newReferenceEditorFakeSdk(props) {
                         return contentTypes.published;
                     }
                     return Promise.reject({});
+                },
+                getMany: async ()=>{
+                    return Promise.resolve({
+                        items: [
+                            contentTypes.published
+                        ],
+                        total: 1,
+                        skip: 0,
+                        limit: 1000,
+                        sys: {
+                            type: 'Array'
+                        }
+                    });
                 }
             },
             Locale: {
@@ -104,17 +108,6 @@ export function newReferenceEditorFakeSdk(props) {
         },
         space: {
             ...space,
-            getCachedContentTypes () {
-                return localizeContentTypes(space.getCachedContentTypes());
-            },
-            getContentTypes () {
-                return Promise.resolve(space.getContentTypes().then((response)=>{
-                    return {
-                        ...response,
-                        items: localizeContentTypes(response.items)
-                    };
-                }));
-            },
             async getEntityScheduledActions () {
                 return [];
             }

package/dist/esm/assets/WrappedAssetCard/AssetCardActions.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { MenuItem, Text, MenuSectionTitle } from '@contentful/f36-components';
+import { PlusIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { shortenStorageUnit } from '@contentful/field-editor-shared';
 import { css } from 'emotion';
@@ -70,7 +71,7 @@ export function renderAssetInfo(props) {
     ];
 }
 export function renderActions(props) {
-    const { entityFile, isDisabled, onEdit, onRemove } = props;
+    const { entityFile, isDisabled, onEdit, onRemove, onAddToReleaseAction } = props;
     return [
         /*#__PURE__*/ React.createElement(MenuSectionTitle, {
             key: "section-title"
@@ -80,6 +81,15 @@ export function renderActions(props) {
             onClick: onEdit,
             testId: "card-action-edit"
         }, "Edit") : null,
+        onAddToReleaseAction ? /*#__PURE__*/ React.createElement(MenuItem, {
+            key: "add-to-release",
+            testId: "add-to-release",
+            onClick: ()=>{
+                onAddToReleaseAction();
+            }
+        }, /*#__PURE__*/ React.createElement(PlusIcon, {
+            size: "tiny"
+        }), "Add to release") : null,
         entityFile ? /*#__PURE__*/ React.createElement(MenuItem, {
             key: "download",
             onClick: ()=>{

package/dist/esm/assets/WrappedAssetCard/FetchingWrappedAssetCard.js

@@ -21,6 +21,14 @@ export function FetchingWrappedAssetCard(props) {
         locales: props.sdk.locales,
         isReference: true
     });
+    const onAddToRelease = ()=>{
+        if (asset && props.addReferenceToRelease) {
+            void props.addReferenceToRelease(asset, props.sdk.field.locale, {
+                openModalForVersionSelection: true,
+                skipNestedReferencesPrompt: true
+            });
+        }
+    };
     React.useEffect(()=>{
         if (asset) {
             props.onAction && props.onAction({
@@ -87,7 +95,8 @@ export function FetchingWrappedAssetCard(props) {
             activeLocales,
             releaseStatusMap,
             release: props.sdk.release,
-            releaseEntityStatus
+            releaseEntityStatus,
+            onAddToRelease
         };
         if (status === 'loading') {
             return props.viewType === 'link' ? /*#__PURE__*/ React.createElement(EntryCard, {

package/dist/esm/assets/WrappedAssetCard/WrappedAssetCard.js

@@ -31,7 +31,7 @@ function getFileType(file) {
     return groupToIconMap[groupName] || 'archive';
 }
 const THUMBNAIL_SIZE = 150;
-export const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLocaleCode, activeLocales, localesStatusMap, isDisabled, isSelected, isClickable, useLocalizedEntityStatus, renderDragHandle, getEntityScheduledActions, onEdit, getAssetUrl, onRemove, releaseEntityStatus, releaseStatusMap, release })=>{
+export const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLocaleCode, activeLocales, localesStatusMap, isDisabled, isSelected, isClickable, useLocalizedEntityStatus, renderDragHandle, getEntityScheduledActions, onEdit, getAssetUrl, onRemove, releaseEntityStatus, releaseStatusMap, release, onAddToRelease })=>{
     const status = entityHelpers.getEntityStatus(asset.sys, useLocalizedEntityStatus ? localeCode : undefined);
     const entityFile = asset.fields.file ? asset.fields.file[localeCode] || asset.fields.file[defaultLocaleCode] : undefined;
     const imageUrl = React.useMemo(()=>{
@@ -64,6 +64,7 @@ export const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLo
         defaultTitle: 'Untitled'
     });
     const href = getAssetUrl ? getAssetUrl(asset.sys.id) : undefined;
+    const onAddToReleaseAction = releaseEntityStatus === 'notInRelease' && release !== undefined && onAddToRelease !== undefined && !isDisabled ? onAddToRelease : undefined;
     return /*#__PURE__*/ React.createElement(AssetCard, {
         as: isClickable && href ? 'a' : 'article',
         type: getFileType(entityFile),
@@ -102,7 +103,8 @@ export const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLo
                 entityFile,
                 isDisabled: isDisabled,
                 onEdit,
-                onRemove
+                onRemove,
+                onAddToReleaseAction
             }),
             ...entityFile ? renderAssetInfo({
                 entityFile

package/dist/esm/common/EntityStore.js

@@ -12,6 +12,7 @@ function _define_property(obj, key, value) {
     return obj;
 }
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { createGetContentTypeKey, createGetEntryKey, createGetSpaceKey } from '@contentful/field-editor-shared';
 import constate from 'constate';
 import { fetchAll } from 'contentful-management';
 import { get } from 'lodash';
@@ -61,7 +62,7 @@ function handleResourceFetchError(resourceFetchError, resourceTypeEntity) {
     throw resourceFetchError;
 }
 const isEntityQueryKey = (queryKey)=>{
-    return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
+    return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && (queryKey.length === 4 || queryKey.length === 5);
 };
 async function fetchContentfulEntry({ urn, fetch, options }) {
     const resourceId = urn.split(':', 6)[5];
@@ -74,18 +75,10 @@ async function fetchContentfulEntry({ urn, fetch, options }) {
     const environmentId = resourceIdMatch?.groups?.environmentId || 'master';
     const entryId = resourceIdMatch.groups.entityId;
     const [space, entry] = await Promise.all([
-        fetch([
-            'space',
-            spaceId
-        ], ({ cmaClient })=>cmaClient.space.get({
+        fetch(createGetSpaceKey(spaceId), ({ cmaClient })=>cmaClient.space.get({
                 spaceId
             }), options),
-        fetch([
-            'entry',
-            spaceId,
-            environmentId,
-            entryId
-        ], ({ cmaClient })=>cmaClient.entry.get({
+        fetch(createGetEntryKey(spaceId, environmentId, entryId), ({ cmaClient })=>cmaClient.entry.get({
                 spaceId,
                 environmentId,
                 entryId
@@ -93,12 +86,7 @@ async function fetchContentfulEntry({ urn, fetch, options }) {
     ]);
     const contentTypeId = entry.sys.contentType.sys.id;
     const [contentType, defaultLocaleCode] = await Promise.all([
-        fetch([
-            'contentType',
-            spaceId,
-            environmentId,
-            contentTypeId
-        ], ({ cmaClient })=>cmaClient.contentType.get({
+        fetch(createGetContentTypeKey(spaceId, environmentId, contentTypeId), ({ cmaClient })=>cmaClient.contentType.get({
                 contentTypeId,
                 spaceId,
                 environmentId
@@ -382,25 +370,53 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = cons
     const onSlideInNavigation = props.sdk.navigator.onSlideInNavigation;
     useEffect(()=>{
         function findSameSpaceQueries() {
-            return queryCache.findAll({
-                type: 'active',
+            const queries = queryCache.findAll({
                 predicate: (query)=>isSameSpaceEntityQueryKey(query.queryKey)
             });
+            return queries;
         }
         if (typeof onEntityChanged !== 'function') {
-            return onSlideInNavigation(({ oldSlideLevel, newSlideLevel })=>{
+            return onSlideInNavigation(async ({ oldSlideLevel, newSlideLevel })=>{
                 if (oldSlideLevel > newSlideLevel) {
-                    findSameSpaceQueries().forEach((query)=>{
-                        void queryClient.invalidateQueries(query.queryKey);
-                    });
+                    const queries = findSameSpaceQueries();
+                    await Promise.all(queries.map(async (query)=>{
+                        const [entityType, entityId, spaceId, environmentId, releaseId] = query.queryKey;
+                        try {
+                            let freshData;
+                            if (entityType === 'Entry') {
+                                freshData = await cmaClient.entry.get({
+                                    entryId: entityId,
+                                    spaceId: spaceId,
+                                    environmentId: environmentId,
+                                    releaseId: releaseId
+                                });
+                            } else if (entityType === 'Asset') {
+                                freshData = await cmaClient.asset.get({
+                                    assetId: entityId,
+                                    spaceId: spaceId,
+                                    environmentId: environmentId,
+                                    releaseId: releaseId
+                                });
+                            } else {
+                                await queryClient.invalidateQueries(query.queryKey);
+                                return;
+                            }
+                            queryClient.setQueryData(query.queryKey, freshData);
+                        } catch (error) {
+                            await queryClient.invalidateQueries(query.queryKey);
+                        }
+                    }));
                 }
             });
         }
         const subscribeQuery = ({ queryKey, queryHash })=>{
             const [entityType, entityId, , , releaseId] = queryKey;
             entityChangeUnsubscribers.current[queryHash] = onEntityChanged(entityType, entityId, (data)=>{
-                if (get(data, 'sys.release.id') === releaseId) {
+                const dataReleaseId = get(data, 'sys.release.id');
+                if (dataReleaseId === releaseId) {
                     queryClient.setQueryData(queryKey, data);
+                } else if (releaseId && !dataReleaseId) {
+                    void queryClient.invalidateQueries(queryKey);
                 }
             });
         };
@@ -432,7 +448,8 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = cons
         isSameSpaceEntityQueryKey,
         queryClient,
         getEntity,
-        onSlideInNavigation
+        onSlideInNavigation,
+        cmaClient
     ]);
     const getResourceProvider = useCallback(function getResourceProvider(organizationId, appDefinitionId) {
         const queryKey = [
@@ -538,6 +555,8 @@ export function useResourceProvider(organizationId, appDefinitionId) {
     };
 }
 function EntityProvider({ children, ...props }) {
-    return /*#__PURE__*/ React.createElement(SharedQueryClientProvider, null, /*#__PURE__*/ React.createElement(InternalServiceProvider, props, children));
+    return /*#__PURE__*/ React.createElement(SharedQueryClientProvider, {
+        client: props.queryClient
+    }, /*#__PURE__*/ React.createElement(InternalServiceProvider, props, children));
 }
 export { EntityProvider, useEntityLoader };

package/dist/esm/common/MultipleReferenceEditor.js

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { useCallback } from 'react';
+import { useContentTypes } from '@contentful/field-editor-shared';
 import { arrayMove } from '@dnd-kit/sortable';
 import { LinkEntityActions } from '../components';
 import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions';
 import { useSortIDs } from '../utils/useSortIDs';
+import { SharedQueryClientProvider } from './queryClient';
 import { ReferenceEditor } from './ReferenceEditor';
 import { useEditorPermissions } from './useEditorPermissions';
 function onLinkOrCreate(setValue, entityType, items, ids, index = items.length) {
@@ -95,7 +97,10 @@ function Editor(props) {
     }));
 }
 export function MultipleReferenceEditor(props) {
-    const allContentTypes = props.sdk.space.getCachedContentTypes();
+    return /*#__PURE__*/ React.createElement(SharedQueryClientProvider, null, /*#__PURE__*/ React.createElement(MultipleReferenceEditorInner, props));
+}
+function MultipleReferenceEditorInner(props) {
+    const { contentTypes: allContentTypes } = useContentTypes(props.sdk);
     return /*#__PURE__*/ React.createElement(ReferenceEditor, props, ({ value, disabled, setValue, externalReset })=>{
         return /*#__PURE__*/ React.createElement(Editor, {
             ...props,

package/dist/esm/common/SingleReferenceEditor.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { useCallback } from 'react';
+import { useContentTypes } from '@contentful/field-editor-shared';
 import { LinkEntityActions } from '../components';
 import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions';
+import { SharedQueryClientProvider } from './queryClient';
 import { ReferenceEditor } from './ReferenceEditor';
 import { useEditorPermissions } from './useEditorPermissions';
 function Editor(props) {
@@ -48,11 +50,15 @@ function Editor(props) {
     }
     return props.children({
         ...props,
-        renderCustomCard: props.renderCustomCard && customCardRenderer
+        renderCustomCard: props.renderCustomCard && customCardRenderer,
+        addReferenceToRelease: props.addReferenceToRelease
     });
 }
 export function SingleReferenceEditor(props) {
-    const allContentTypes = props.sdk.space.getCachedContentTypes();
+    return /*#__PURE__*/ React.createElement(SharedQueryClientProvider, null, /*#__PURE__*/ React.createElement(SingleReferenceEditorInner, props));
+}
+function SingleReferenceEditorInner(props) {
+    const { contentTypes: allContentTypes } = useContentTypes(props.sdk);
     return /*#__PURE__*/ React.createElement(ReferenceEditor, props, ({ value, setValue, disabled, externalReset })=>{
         return /*#__PURE__*/ React.createElement(Editor, {
             ...props,

package/dist/esm/common/queryClient.js

@@ -1,47 +1 @@
-import * as React from 'react';
-import { QueryClient, useQuery as useRQ, useQueryClient as useHostQueryClient } from '@tanstack/react-query';
-const clientContext = /*#__PURE__*/ React.createContext(undefined);
-function useMaybeHostQueryClient() {
-    try {
-        return useHostQueryClient();
-    } catch  {
-        return undefined;
-    }
-}
-export function useQueryClient() {
-    const client = React.useContext(clientContext);
-    const hostClient = useMaybeHostQueryClient();
-    return React.useMemo(()=>{
-        if (client) {
-            return client;
-        }
-        if (hostClient) return hostClient;
-        return new QueryClient({
-            defaultOptions: {
-                queries: {
-                    useErrorBoundary: false,
-                    refetchOnWindowFocus: false,
-                    refetchOnReconnect: true,
-                    refetchOnMount: false,
-                    staleTime: Infinity,
-                    retry: false
-                }
-            }
-        });
-    }, [
-        client,
-        hostClient
-    ]);
-}
-export const useQuery = (key, fn, opt)=>{
-    return useRQ(key, fn, {
-        ...opt,
-        context: clientContext
-    });
-};
-export function SharedQueryClientProvider({ children }) {
-    const client = useQueryClient();
-    return /*#__PURE__*/ React.createElement(clientContext.Provider, {
-        value: client
-    }, children);
-}
+export { SharedQueryClientProvider, useQueryClient, useQuery } from '@contentful/field-editor-shared';

package/dist/esm/common/useContentTypePermissions.js

@@ -11,6 +11,9 @@ export function useContentTypePermissions({ entityType, validations, sdk, allCon
         if (entityType === 'Asset') {
             return [];
         }
+        if (validations.contentTypes && allContentTypes.length === 0) {
+            return [];
+        }
         if (validations.contentTypes) {
             return allContentTypes.filter((ct)=>validations.contentTypes?.includes(ct.sys.id));
         }
@@ -23,21 +26,15 @@ export function useContentTypePermissions({ entityType, validations, sdk, allCon
     const [creatableContentTypes, setCreatableContentTypes] = useState(availableContentTypes);
     const { canPerformActionOnEntryOfType } = useAccessApi(sdk.access);
     useEffect(()=>{
-        function getContentTypes(action) {
-            return filter(availableContentTypes, (ct)=>canPerformActionOnEntryOfType(action, ct.sys.id));
-        }
         async function checkContentTypeAccess() {
-            const creatable = await getContentTypes('create');
-            if (!isEqual(creatable, creatableContentTypes)) {
-                setCreatableContentTypes(creatable);
-            }
+            const creatable = await filter(availableContentTypes, (ct)=>canPerformActionOnEntryOfType('create', ct.sys.id));
+            setCreatableContentTypes((creatableContentTypes)=>isEqual(creatable, creatableContentTypes) ? creatableContentTypes : creatable);
         }
         if (availableContentTypes.length > 0) {
             void checkContentTypeAccess();
         }
     }, [
-        availableContentTypes,
-        creatableContentTypes
+        availableContentTypes
     ]);
     return {
         creatableContentTypes,

package/dist/esm/common/useEditorPermissions.js

@@ -3,8 +3,12 @@ import { fromFieldValidations } from '../utils/fromFieldValidations';
 import { useAccessApi } from './useAccessApi';
 import { useContentTypePermissions } from './useContentTypePermissions';
 export function useEditorPermissions({ sdk, entityType, parameters, allContentTypes }) {
+    const fieldValidations = sdk.field.validations;
+    const itemsValidations = sdk.field.type === 'Array' ? sdk.field.items?.validations : undefined;
     const validations = useMemo(()=>fromFieldValidations(sdk.field), [
-        sdk.field
+        sdk.field,
+        JSON.stringify(fieldValidations),
+        JSON.stringify(itemsValidations)
     ]);
     const [canCreateEntity, setCanCreateEntity] = useState(true);
     const [canLinkEntity, setCanLinkEntity] = useState(true);

package/dist/esm/components/LinkActions/LinkEntityActions.js

@@ -69,6 +69,7 @@ export function useLinkActionsProps(props) {
     }, [
         sdk,
         entityType,
+        editorPermissions,
         onLinkedExisting
     ]);
     const onLinkSeveralExisting = React.useCallback(async (index)=>{
@@ -84,6 +85,7 @@ export function useLinkActionsProps(props) {
     }, [
         sdk,
         entityType,
+        editorPermissions,
         onLinkedExisting
     ]);
     return useMemo(()=>({

package/dist/esm/entries/MultipleEntryReferenceEditor.js

@@ -34,7 +34,8 @@ export function MultipleEntryReferenceEditor(props) {
                 onMoveTop: index !== 0 ? ()=>childrenProps.onMove(index, 0) : undefined,
                 onMoveBottom: index !== lastIndex ? ()=>childrenProps.onMove(index, lastIndex) : undefined,
                 renderDragHandle: DragHandle,
-                isBeingDragged: index === indexToUpdate
+                isBeingDragged: index === indexToUpdate,
+                addReferenceToRelease: props.addReferenceToRelease
             });
         }));
 }

package/dist/esm/entries/SingleEntryReferenceEditor.js

@@ -17,6 +17,7 @@ export function SingleEntryReferenceEditor(props) {
             hasCardEditActions: hasCardEditActions,
             hasCardRemoveActions: hasCardRemoveActions,
             activeLocales: activeLocales,
+            addReferenceToRelease: props.addReferenceToRelease,
             onRemove: ()=>{
                 setValue(null);
             }

package/dist/esm/entries/WrappedEntryCard/FetchingWrappedEntryCard.js

@@ -63,6 +63,14 @@ export function FetchingWrappedEntryCard(props) {
             contentTypeId: entry?.sys?.contentType?.sys?.id ?? ''
         });
     };
+    const onAddToRelease = ()=>{
+        if (entry && props.addReferenceToRelease) {
+            void props.addReferenceToRelease(entry, props.sdk.field.locale, {
+                openModalForVersionSelection: true,
+                skipNestedReferencesPrompt: true
+            });
+        }
+    };
     React.useEffect(()=>{
         if (entry) {
             props.onAction?.({
@@ -117,7 +125,8 @@ export function FetchingWrappedEntryCard(props) {
             activeLocales: props.activeLocales,
             releaseStatusMap,
             release: props.sdk.release,
-            releaseEntityStatus
+            releaseEntityStatus,
+            onAddToRelease
         };
         const { hasCardEditActions, hasCardMoveActions, hasCardRemoveActions } = props;
         function renderDefaultCard(props) {

package/dist/esm/entries/WrappedEntryCard/WrappedEntryCard.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { EntryCard, MenuDivider, MenuItem } from '@contentful/f36-components';
+import { PlusIcon } from '@contentful/f36-icons';
 import { entityHelpers, isValidImage } from '@contentful/field-editor-shared';
 import { AssetThumbnail, MissingEntityCard, EntityStatusBadge } from '../../components';
 import { SpaceName } from '../../components/SpaceName/SpaceName';
@@ -10,7 +11,7 @@ const defaultProps = {
     hasCardMoveActions: true,
     hasCardRemoveActions: true
 };
-export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales, localeCode, defaultLocaleCode, localesStatusMap, useLocalizedEntityStatus, size, spaceName, isClickable, isDisabled, isSelected, hasCardMoveActions, hasCardEditActions, hasCardRemoveActions, renderDragHandle, getAsset, getEntityScheduledActions, onClick, onEdit, onRemove, onMoveTop, onMoveBottom, releaseEntityStatus, releaseStatusMap, release }) {
+export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales, localeCode, defaultLocaleCode, localesStatusMap, useLocalizedEntityStatus, size, spaceName, isClickable, isDisabled, isSelected, hasCardMoveActions, hasCardEditActions, hasCardRemoveActions, renderDragHandle, getAsset, getEntityScheduledActions, onClick, onEdit, onRemove, onMoveTop, onMoveBottom, releaseEntityStatus, releaseStatusMap, release, onAddToRelease }) {
     const [file, setFile] = React.useState(null);
     React.useEffect(()=>{
         let mounted = true;
@@ -61,6 +62,7 @@ export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales,
         localeCode,
         defaultLocaleCode
     });
+    const showAddToReleaseAction = releaseEntityStatus === 'notInRelease' && release !== undefined && onAddToRelease !== undefined && !isDisabled;
     return /*#__PURE__*/ React.createElement(EntryCard, {
         as: isClickable && entryUrl ? 'a' : 'article',
         href: isClickable ? entryUrl : undefined,
@@ -91,7 +93,7 @@ export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales,
         dragHandleRender: renderDragHandle,
         withDragHandle: !!renderDragHandle && !isDisabled,
         draggable: !!renderDragHandle && !isDisabled,
-        actions: onEdit || onRemove ? [
+        actions: onEdit || onRemove || showAddToReleaseAction ? [
             hasCardEditActions && onEdit ? /*#__PURE__*/ React.createElement(MenuItem, {
                 key: "edit",
                 testId: "edit",
@@ -106,6 +108,15 @@ export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales,
                     onRemove && onRemove();
                 }
             }, "Remove") : null,
+            showAddToReleaseAction ? /*#__PURE__*/ React.createElement(MenuItem, {
+                key: "add-to-release",
+                testId: "add-to-release",
+                onClick: ()=>{
+                    onAddToRelease();
+                }
+            }, /*#__PURE__*/ React.createElement(PlusIcon, {
+                size: "tiny"
+            }), "Add to release") : null,
             hasCardMoveActions && (onMoveTop || onMoveBottom) && !isDisabled ? /*#__PURE__*/ React.createElement(MenuDivider, {
                 key: "divider"
             }) : null,

package/dist/esm/resources/Cards/ResourceCard.spec.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
+import { SharedQueryClientProvider } from '@contentful/field-editor-shared';
+import { createTestQueryClient } from '@contentful/field-editor-test-utils';
 import { configure, fireEvent, render, waitFor } from '@testing-library/react';
 import publishedCT from '../../__fixtures__/content-type/published_content_type.json';
 import publishedEntryNonMasterEnvironment from '../../__fixtures__/entry/published_entry_non_master.json';
@@ -167,9 +169,33 @@ describe('ResourceCard', ()=>{
         fireEvent.mouseEnter(getByText(space.name));
         await waitFor(()=>expect(getByText(tooltipContent)).toBeDefined());
     });
-    it('renders skeleton when no data is provided', ()=>{
-        const { getByTestId } = renderResourceCard();
+    it('renders skeleton while data is loading', async ()=>{
+        const queryClient = createTestQueryClient();
+        let resolveEntry;
+        const pendingPromise = new Promise((resolve)=>{
+            resolveEntry = resolve;
+        });
+        sdk.cma.entry.get.mockReturnValueOnce(pendingPromise);
+        const { getByTestId, queryByTestId } = render(/*#__PURE__*/ React.createElement(SharedQueryClientProvider, {
+            client: queryClient
+        }, /*#__PURE__*/ React.createElement(EntityProvider, {
+            sdk: sdk
+        }, /*#__PURE__*/ React.createElement(ResourceCard, {
+            isDisabled: false,
+            getEntryRouteHref: ()=>'',
+            resourceLink: {
+                sys: {
+                    type: 'ResourceLink',
+                    linkType: 'Contentful:Entry',
+                    urn: resolvableEntryUrn
+                }
+            }
+        }))));
         expect(getByTestId('cf-ui-skeleton-form')).toBeDefined();
+        expect(queryByTestId('cf-ui-entry-card')).toBeNull();
+        resolveEntry(publishedEntry);
+        await waitFor(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
+        expect(queryByTestId('cf-ui-skeleton-form')).toBeNull();
     });
     it('renders unsupported entity card when resource type is unknown', async ()=>{
         const { getByText } = renderResourceCard({

package/dist/types/assets/WrappedAssetCard/AssetCardActions.d.ts

@@ -8,4 +8,5 @@ export declare function renderActions(props: {
     onRemove?: () => void;
     isDisabled: boolean;
     entityFile?: File;
+    onAddToReleaseAction?: () => void;
 }): (React.JSX.Element | null)[];

package/dist/types/assets/WrappedAssetCard/FetchingWrappedAssetCard.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CustomCardRenderer, RenderCustomMissingEntityCard } from '../../common/customCardTypes';
-import { Action, FieldAppSDK, ViewType, RenderDragFn } from '../../types';
+import { Action, Asset, FieldAppSDK, ViewType, RenderDragFn } from '../../types';
 type FetchingWrappedAssetCardProps = {
     assetId: string;
     isDisabled: boolean;
@@ -12,6 +12,10 @@ type FetchingWrappedAssetCardProps = {
     renderDragHandle?: RenderDragFn;
     renderCustomCard?: CustomCardRenderer;
     renderCustomMissingEntityCard?: RenderCustomMissingEntityCard;
+    addReferenceToRelease?: (reference: Asset, localeCode?: string, options?: {
+        openModalForVersionSelection?: boolean;
+        skipNestedReferencesPrompt?: boolean;
+    }) => Promise<void>;
 };
 export declare function FetchingWrappedAssetCard(props: FetchingWrappedAssetCardProps): React.JSX.Element;
 export {};

package/dist/types/assets/WrappedAssetCard/WrappedAssetCard.d.ts

@@ -23,9 +23,10 @@ export interface WrappedAssetCardProps {
     releaseEntityStatus?: ReleaseEntityStatus;
     releaseStatusMap?: ReleaseStatusMap;
     release?: ReleaseV2Props;
+    onAddToRelease?: () => void;
 }
 export declare const WrappedAssetCard: {
-    ({ asset, className, size, localeCode, defaultLocaleCode, activeLocales, localesStatusMap, isDisabled, isSelected, isClickable, useLocalizedEntityStatus, renderDragHandle, getEntityScheduledActions, onEdit, getAssetUrl, onRemove, releaseEntityStatus, releaseStatusMap, release, }: WrappedAssetCardProps): React.JSX.Element;
+    ({ asset, className, size, localeCode, defaultLocaleCode, activeLocales, localesStatusMap, isDisabled, isSelected, isClickable, useLocalizedEntityStatus, renderDragHandle, getEntityScheduledActions, onEdit, getAssetUrl, onRemove, releaseEntityStatus, releaseStatusMap, release, onAddToRelease, }: WrappedAssetCardProps): React.JSX.Element;
     defaultProps: {
         isClickable: boolean;
     };

package/dist/types/common/EntityStore.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseAppSDK } from '@contentful/app-sdk';
+import { QueryClient } from '@tanstack/react-query';
 import { ResourceProvider } from 'contentful-management';
 import { Asset, ContentType, Entry, ExternalResource, Resource, ResourceType, ScheduledAction, Space } from '../types';
 export type ContentfulResourceInfo = {
@@ -17,6 +18,7 @@ export declare function isContentfulResourceInfo(info: ResourceInfo): info is Co
 type EntityStoreProps = {
     sdk: BaseAppSDK;
     queryConcurrency?: number;
+    queryClient?: QueryClient;
 };
 type GetOptions = {
     priority?: number;
@@ -88,12 +90,12 @@ declare const useEntityLoader: () => {
 };
 export declare function useEntity<E extends FetchableEntity>(entityType: FetchableEntityType, entityId: string, options?: Omit<UseEntityOptions, 'releaseId'>): UseEntityResult<E>;
 export declare function useResource<R extends Resource = Resource>(resourceType: string, urn: string, { locale, referencingEntryId, ...options }?: UseResourceOptions): {
-    status: "error" | "success" | "loading";
+    status: "loading" | "error" | "success";
     data: ResourceInfo<R> | undefined;
     error: unknown;
 };
 export declare function useResourceProvider(organizationId: string, appDefinitionId: string): {
-    status: "error" | "success" | "loading";
+    status: "loading" | "error" | "success";
     data: ResourceProvider | undefined;
     error: unknown;
 };