@contentful/field-editor-reference 5.9.0 → 5.11.0

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

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { EntryCard, MenuItem, MenuDivider } from '@contentful/f36-components';
+import { ClockIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { entityHelpers, isValidImage } from '@contentful/field-editor-shared';
+import { css } from 'emotion';
+import { AssetThumbnail, MissingEntityCard, ScheduledIconWithTooltip } from '../../components';
+import { SpaceName } from '../../components/SpaceName/SpaceName';
+const { getEntryTitle , getEntityDescription , getEntryStatus , getEntryImage  } = entityHelpers;
+const styles = {
+    scheduleIcon: css({
+        marginRight: tokens.spacing2Xs
+    })
+};
+const defaultProps = {
+    isClickable: true,
+    hasCardEditActions: true,
+    hasCardMoveActions: true,
+    hasCardRemoveActions: true
+};
+export function WrappedEntryCard(props) {
+    const [file, setFile] = React.useState(null);
+    const { contentType  } = props;
+    React.useEffect(()=>{
+        if (props.entry) {
+            getEntryImage({
+                entry: props.entry,
+                contentType,
+                localeCode: props.localeCode,
+                defaultLocaleCode: props.defaultLocaleCode
+            }, props.getAsset).then((file)=>{
+                setFile(file);
+            }).catch(()=>{
+                setFile(null);
+            });
+        }
+    }, [
+        props.entry,
+        props.getAsset,
+        contentType,
+        props.localeCode,
+        props.defaultLocaleCode
+    ]);
+    const status = getEntryStatus(props.entry?.sys);
+    if (status === 'deleted') {
+        return React.createElement(MissingEntityCard, {
+            entityType: "Entry",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const title = getEntryTitle({
+        entry: props.entry,
+        contentType,
+        localeCode: props.localeCode,
+        defaultLocaleCode: props.defaultLocaleCode,
+        defaultTitle: 'Untitled'
+    });
+    const description = getEntityDescription({
+        entity: props.entry,
+        contentType,
+        localeCode: props.localeCode,
+        defaultLocaleCode: props.defaultLocaleCode
+    });
+    return React.createElement(EntryCard, {
+        as: props.entryUrl ? 'a' : 'article',
+        href: props.entryUrl,
+        title: title,
+        description: description,
+        contentType: contentType?.name,
+        size: props.size,
+        isSelected: props.isSelected,
+        status: status,
+        icon: props.spaceName ? React.createElement(SpaceName, {
+            spaceName: props.spaceName
+        }) : React.createElement(ScheduledIconWithTooltip, {
+            getEntityScheduledActions: props.getEntityScheduledActions,
+            entityType: "Entry",
+            entityId: props.entry.sys.id
+        }, React.createElement(ClockIcon, {
+            className: styles.scheduleIcon,
+            size: "small",
+            variant: "muted",
+            testId: "schedule-icon"
+        })),
+        thumbnailElement: file && isValidImage(file) ? React.createElement(AssetThumbnail, {
+            file: file
+        }) : undefined,
+        dragHandleRender: props.renderDragHandle,
+        withDragHandle: !!props.renderDragHandle,
+        actions: props.onEdit || props.onRemove ? [
+            props.hasCardEditActions && props.onEdit ? React.createElement(MenuItem, {
+                key: "edit",
+                testId: "edit",
+                onClick: ()=>{
+                    props.onEdit && props.onEdit();
+                }
+            }, "Edit") : null,
+            props.hasCardRemoveActions && props.onRemove ? React.createElement(MenuItem, {
+                key: "delete",
+                testId: "delete",
+                onClick: ()=>{
+                    props.onRemove && props.onRemove();
+                }
+            }, "Remove") : null,
+            props.hasCardMoveActions && (props.onMoveTop || props.onMoveBottom) ? React.createElement(MenuDivider, {
+                key: "divider"
+            }) : null,
+            props.hasCardMoveActions && props.onMoveTop ? React.createElement(MenuItem, {
+                key: "move-top",
+                onClick: ()=>props.onMoveTop && props.onMoveTop(),
+                testId: "move-top"
+            }, "Move to top") : null,
+            props.hasCardMoveActions && props.onMoveBottom ? React.createElement(MenuItem, {
+                key: "move-bottom",
+                onClick: ()=>props.onMoveBottom && props.onMoveBottom(),
+                testId: "move-bottom"
+            }, "Move to bottom") : null
+        ].filter((item)=>item) : [],
+        onClick: props.isClickable ? (e)=>{
+            e.preventDefault();
+            if (props.onClick) return props.onClick(e);
+            props.onEdit && props.onEdit();
+        } : undefined
+    });
+}
+WrappedEntryCard.defaultProps = defaultProps;

package/dist/esm/entries/index.js

@@ -0,0 +1,3 @@
+export { SingleEntryReferenceEditor } from './SingleEntryReferenceEditor';
+export { MultipleEntryReferenceEditor } from './MultipleEntryReferenceEditor';
+export { WrappedEntryCard } from './WrappedEntryCard/WrappedEntryCard';

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+export { CreateEntryMenuTrigger, CreateEntryLinkButton, getScheduleTooltipContent, ScheduledIconWithTooltip, AssetThumbnail, MissingEntityCard, CombinedLinkActions } from './components';
+export { SingleEntryReferenceEditor, MultipleEntryReferenceEditor, WrappedEntryCard } from './entries';
+export { SingleMediaEditor, MultipleMediaEditor, WrappedAssetCard } from './assets';
+export { SortableLinkList } from './common/SortableLinkList';
+export { EntityProvider, useEntityLoader, useEntity, useResource } from './common/EntityStore';
+export { SingleResourceReferenceEditor, MultipleResourceReferenceEditor } from './resources';
+export * from './types';

package/dist/esm/resources/Cards/ContentfulEntryCard.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { WrappedEntryCard } from '../../entries';
+const resolveAsset = ()=>Promise.resolve();
+const resolveScheduledActions = ()=>Promise.resolve([]);
+export function ContentfulEntryCard({ info , isDisabled , renderDragHandle , onRemove , onMoveTop , onMoveBottom , getEntryRouteHref  }) {
+    const resourceSys = info.resource.sys;
+    const spaceId = resourceSys.space.sys.id;
+    const environmentId = resourceSys.environment.sys.id;
+    const entryId = resourceSys.id;
+    const resourceHref = getEntryRouteHref({
+        spaceId,
+        environmentId,
+        entryId
+    });
+    const openEntryDetail = ()=>{
+        window.open(resourceHref, '_blank', 'noopener,noreferrer');
+    };
+    return React.createElement(WrappedEntryCard, {
+        entry: info.resource,
+        isDisabled: isDisabled,
+        hasCardEditActions: false,
+        contentType: info.contentType,
+        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
+    });
+}

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

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useInView } from 'react-intersection-observer';
+import { EntryCard } from '@contentful/f36-components';
+import { isUnsupportedError, useResource } from '../../common/EntityStore';
+import { MissingEntityCard } from '../../components';
+import { ContentfulEntryCard } from './ContentfulEntryCard';
+import { UnsupportedEntityCard } from './UnsupportedEntityCard';
+function ResourceCardSkeleton() {
+    return React.createElement(EntryCard, {
+        size: "small",
+        isLoading: true
+    });
+}
+function ExistingResourceCard(props) {
+    const { resourceLink , inView , index =0  } = props;
+    const resourceOptions = {
+        priority: index * -1,
+        enabled: inView
+    };
+    const { data , error  } = useResource(resourceLink.sys.linkType, resourceLink.sys.urn, resourceOptions);
+    if (!data && !error) {
+        return React.createElement(ResourceCardSkeleton, null);
+    }
+    if (data) {
+        return React.createElement(ContentfulEntryCard, {
+            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, {
+        ...props,
+        resourceLink: props.resourceLink,
+        getEntryRouteHref: props.getEntryRouteHref
+    });
+}
+export function ResourceCard(props) {
+    const { ref , inView  } = useInView({
+        triggerOnce: true,
+        rootMargin: '300px 0px 0px 300px'
+    });
+    return React.createElement("div", {
+        ref: ref
+    }, React.createElement(ResourceCardWrapper, {
+        ...props,
+        inView: inView
+    }));
+}

package/dist/esm/resources/Cards/UnsupportedEntityCard.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Card, SectionHeading } from '@contentful/f36-components';
+import { css } from 'emotion';
+const styles = {
+    card: css({
+        position: 'relative'
+    })
+};
+export function UnsupportedEntityCard(props) {
+    return React.createElement(Card, {
+        className: styles.card
+    }, React.createElement(SectionHeading, {
+        marginBottom: "none"
+    }, "Resource type ", props.entityType, " is currently not supported"));
+}

package/dist/esm/resources/MultipleResourceReferenceEditor.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import arrayMove from 'array-move';
+import deepEqual from 'deep-equal';
+import { EntityProvider } from '../common/EntityStore';
+import { SortableLinkList } from '../common/SortableLinkList';
+import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityActions';
+import { ResourceCard } from './Cards/ResourceCard';
+import { useResourceLinkActions } from './useResourceLinkActions';
+function ResourceEditor(props) {
+    const { setValue , items , apiUrl  } = props;
+    const onSortStart = useCallback((_, event)=>event.preventDefault(), []);
+    const onSortEnd = useCallback(({ oldIndex , newIndex  })=>{
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        setValue(newItems);
+    }, [
+        items,
+        setValue
+    ]);
+    const onMove = useCallback((oldIndex, newIndex)=>{
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        setValue(newItems);
+    }, [
+        items,
+        setValue
+    ]);
+    const onRemoteItemAtIndex = useCallback((index)=>{
+        setValue(items.filter((_v, i)=>i !== index));
+    }, [
+        items,
+        setValue
+    ]);
+    const { dialogs , field  } = props.sdk;
+    const linkActionsProps = useResourceLinkActions({
+        dialogs,
+        field,
+        apiUrl
+    });
+    return React.createElement(React.Fragment, null, props.children({
+        ...props,
+        onSortStart,
+        onSortEnd,
+        onMove,
+        onRemoteItemAtIndex
+    }), React.createElement(CombinedLinkEntityActions, {
+        ...linkActionsProps,
+        renderCustomActions: props.renderCustomActions
+    }));
+}
+function WithPerItemCallbacks({ listLength , index , onMove , onRemoteItemAtIndex , children  }) {
+    const handleMoveTop = React.useMemo(()=>index > 0 ? ()=>onMove(index, 0) : undefined, [
+        index,
+        onMove
+    ]);
+    const handleMoveBottom = React.useMemo(()=>index < listLength - 1 ? ()=>onMove(index, listLength - 1) : undefined, [
+        index,
+        onMove,
+        listLength
+    ]);
+    const handleRemove = useCallback(()=>onRemoteItemAtIndex(index), [
+        index,
+        onRemoteItemAtIndex
+    ]);
+    return React.createElement(React.Fragment, null, children({
+        onMoveBottom: handleMoveBottom,
+        onMoveTop: handleMoveTop,
+        onRemove: handleRemove
+    }));
+}
+const EMPTY_ARRAY = [];
+export function MultipleResourceReferenceEditor(props) {
+    return React.createElement(EntityProvider, {
+        sdk: props.sdk
+    }, React.createElement(FieldConnector, {
+        throttle: 0,
+        field: props.sdk.field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isEqualValues: deepEqual
+    }, ({ value , disabled , setValue , externalReset  })=>{
+        return React.createElement(ResourceEditor, {
+            ...props,
+            items: value || EMPTY_ARRAY,
+            isDisabled: disabled,
+            setValue: setValue,
+            renderCustomActions: props.renderCustomActions,
+            key: `${externalReset}-list`
+        }, (editorProps)=>React.createElement(SortableLinkList, editorProps, ({ item , isDisabled , DragHandle , index  })=>React.createElement(WithPerItemCallbacks, {
+                    index: index,
+                    onMove: editorProps.onMove,
+                    onRemoteItemAtIndex: editorProps.onRemoteItemAtIndex,
+                    listLength: value?.length || 0
+                }, ({ onMoveBottom , onMoveTop , onRemove  })=>React.createElement(ResourceCard, {
+                        index: index,
+                        resourceLink: item,
+                        isDisabled: isDisabled,
+                        renderDragHandle: DragHandle,
+                        onMoveTop: onMoveTop,
+                        onMoveBottom: onMoveBottom,
+                        onRemove: onRemove,
+                        getEntryRouteHref: props.getEntryRouteHref
+                    }))));
+    }));
+}

package/dist/esm/resources/MultipleResourceReferenceEditor.spec.js

@@ -0,0 +1,254 @@
+import * as React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useResource } from '../common/EntityStore';
+import { MultipleResourceReferenceEditor } from './MultipleResourceReferenceEditor';
+import { createFakeEntryResource, mockSdkForField } from './testHelpers/resourceEditorHelpers';
+let mockedResources = {};
+jest.mock('../common/EntityStore', ()=>{
+    const module = jest.requireActual('../common/EntityStore');
+    return {
+        ...module,
+        useResource: jest.fn((linkType, urn, apiUrl)=>({
+                data: mockedResources[`${linkType}.${urn}`],
+                status: 'success',
+                apiUrl
+            }))
+    };
+});
+jest.mock('react-intersection-observer', ()=>{
+    const module = jest.requireActual('react-intersection-observer');
+    return {
+        ...module,
+        useInView: ()=>({
+                inView: true
+            })
+    };
+});
+const fieldDefinition = {
+    type: 'Array',
+    items: {
+        type: 'ResourceLink'
+    },
+    id: 'foo',
+    name: 'Foo',
+    allowedResources: [
+        {
+            source: 'foo',
+            contentTypes: [
+                'bar'
+            ]
+        }
+    ],
+    required: true,
+    validations: []
+};
+describe('Multiple resource editor', ()=>{
+    it('renders the action button when no value is set', async ()=>{
+        const sdk = mockSdkForField(fieldDefinition);
+        render(React.createElement(MultipleResourceReferenceEditor, {
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            parameters: {}
+        }));
+        const button = await screen.findByText('Add existing content');
+        expect(button).toBeDefined();
+        fireEvent.click(button);
+        const dialogFn = sdk.dialogs.selectMultipleResourceEntries;
+        expect(dialogFn).toHaveBeenCalledTimes(1);
+        const options = dialogFn.mock.calls[0][0];
+        expect(options).toEqual({
+            allowedResources: fieldDefinition.allowedResources
+        });
+    });
+    it('renders custom actions when passed', async ()=>{
+        const sdk = mockSdkForField(fieldDefinition);
+        render(React.createElement(MultipleResourceReferenceEditor, {
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            parameters: {},
+            renderCustomActions: ()=>React.createElement("div", {
+                    "data-testid": "custom-actions"
+                })
+        }));
+        const customActions = await screen.findByTestId('custom-actions');
+        expect(customActions).toBeDefined();
+    });
+    describe('with value', ()=>{
+        it('renders the cards', async ()=>{
+            const { entryLinks , entryInfos  } = generateMultipleTestResources();
+            mockedResources = {};
+            for (const [spaceId, link] of Object.entries(entryLinks)){
+                mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
+            }
+            const sdk = mockSdkForField(fieldDefinition, Object.values(entryLinks));
+            render(React.createElement(MultipleResourceReferenceEditor, {
+                isInitiallyDisabled: false,
+                sdk: sdk,
+                hasCardEditActions: true,
+                viewType: "card",
+                apiUrl: "test-contentful",
+                getEntryRouteHref: ()=>'',
+                parameters: {}
+            }));
+            expect(useResource).toHaveBeenCalledTimes(Object.values(entryInfos).length);
+            const cards = [];
+            const entriesArray = Object.values(entryInfos);
+            for (const info of Array.from(entriesArray.values())){
+                const entryTitle = info.resource.fields.title[info.defaultLocaleCode];
+                const spaceName = info.space.name;
+                const card = await expectEntryCard(entryTitle, spaceName);
+                cards.push(card);
+            }
+        });
+        describe('card actions', ()=>{
+            it('should have a move to top button', async ()=>{
+                const { entryLinks , entryInfos  } = generateMultipleTestResources();
+                mockedResources = {};
+                for (const [spaceId, link] of Object.entries(entryLinks)){
+                    mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
+                }
+                const sdk = mockSdkForField(fieldDefinition, Object.values(entryLinks));
+                render(React.createElement(MultipleResourceReferenceEditor, {
+                    isInitiallyDisabled: false,
+                    sdk: sdk,
+                    hasCardEditActions: true,
+                    viewType: "card",
+                    apiUrl: "test-contentful",
+                    getEntryRouteHref: ()=>'',
+                    parameters: {}
+                }));
+                const linkExistingBtn = screen.queryByText('Add existing content');
+                expect(linkExistingBtn).toBeInTheDocument();
+                const entriesArray = Object.values(entryInfos);
+                const firstItem = entriesArray[0];
+                await expectToNotHaveMoveButton(firstItem, 'Move to top');
+                const allButFirst = entriesArray.slice(1);
+                for (const info of allButFirst){
+                    await expectToHaveMoveButton(info, 'Move to top');
+                }
+            });
+            it('should have a move to bottom button', async ()=>{
+                const { entryLinks , entryInfos  } = generateMultipleTestResources();
+                mockedResources = {};
+                for (const [spaceId, link] of Object.entries(entryLinks)){
+                    mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
+                }
+                const sdk = mockSdkForField(fieldDefinition, Object.values(entryLinks));
+                render(React.createElement(MultipleResourceReferenceEditor, {
+                    isInitiallyDisabled: false,
+                    sdk: sdk,
+                    hasCardEditActions: true,
+                    viewType: "card",
+                    apiUrl: "test-contentful",
+                    getEntryRouteHref: ()=>'',
+                    parameters: {}
+                }));
+                const linkExistingBtn = screen.queryByText('Add existing content');
+                expect(linkExistingBtn).toBeInTheDocument();
+                const entriesArray = Object.values(entryInfos);
+                const lastItem = entriesArray[entriesArray.length - 1];
+                await expectToNotHaveMoveButton(lastItem, 'Move to bottom');
+                const allButLast = entriesArray.slice(0, -1);
+                for (const info of allButLast){
+                    await expectToHaveMoveButton(info, 'Move to bottom');
+                }
+            });
+            it('works when using remove action', async ()=>{
+                const { entryLinks , entryInfos  } = generateMultipleTestResources();
+                mockedResources = {};
+                for (const [spaceId, link] of Object.entries(entryLinks)){
+                    mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
+                }
+                const sdk = mockSdkForField(fieldDefinition, Object.values(entryLinks));
+                render(React.createElement(MultipleResourceReferenceEditor, {
+                    isInitiallyDisabled: false,
+                    sdk: sdk,
+                    hasCardEditActions: true,
+                    viewType: "card",
+                    apiUrl: "test-contentful",
+                    getEntryRouteHref: ()=>'',
+                    parameters: {}
+                }));
+                const linkExistingBtn = screen.queryByText('Add existing content');
+                expect(linkExistingBtn).toBeInTheDocument();
+                const entriesArray = Object.values(entryInfos);
+                for (const info of entriesArray){
+                    await clickCardActionsButton(info);
+                    const removeBtn = await screen.findByText('Remove', {
+                        selector: '[role="menuitem"]'
+                    });
+                    fireEvent.click(removeBtn);
+                }
+                expect(sdk.field.setValue).toHaveBeenCalledTimes(3);
+                expect(sdk.field.setValue).toHaveBeenCalledWith([]);
+            });
+        });
+    });
+});
+async function expectToHaveMoveButton(info, buttonString) {
+    await clickCardActionsButton(info);
+    await screen.findByText(buttonString, {
+        selector: '[role="menuitem"]'
+    });
+}
+async function expectToNotHaveMoveButton(info, buttonString) {
+    await clickCardActionsButton(info);
+    expect(screen.queryByText(buttonString, {
+        selector: '[role="menuitem"]'
+    })).toBeNull();
+}
+async function clickCardActionsButton(info) {
+    fireEvent.click(document.body);
+    const entryTitle = info.resource.fields.title[info.defaultLocaleCode];
+    const spaceName = info.space.name;
+    const card = await expectEntryCard(entryTitle, spaceName);
+    const actionsBtn = card.querySelector('[data-test-id="cf-ui-card-actions"]');
+    expect(actionsBtn).toBeInTheDocument();
+    fireEvent.click(actionsBtn);
+}
+async function expectEntryCard(entryTitle, spaceName) {
+    const title = await screen.findByText(entryTitle);
+    await screen.findByText(spaceName);
+    const theCard = title.closest('[data-test-id="cf-ui-entry-card"]');
+    expect(theCard).toBeDefined();
+    const actionsBtn = theCard?.querySelector('[data-test-id="cf-ui-card-actions"]');
+    expect(actionsBtn).toBeDefined();
+    return theCard;
+}
+function generateMultipleTestResources() {
+    return [
+        'Space A',
+        'Space B',
+        'Space C'
+    ].reduce((acc, spaceName)=>{
+        const spaceId = spaceName.toLowerCase().replace(' ', '-');
+        const entryInfo = {
+            title: `An entry in ${spaceName}`,
+            id: `linkedEntryId`
+        };
+        acc.entryLinks[spaceId] = {
+            sys: {
+                type: 'ResourceLink',
+                linkType: 'Contentful:Entry',
+                urn: `crn:test:::content:spaces/${spaceId}/entries/${entryInfo.id}`
+            }
+        };
+        acc.entryInfos[spaceId] = createFakeEntryResource({
+            title: entryInfo.title,
+            id: entryInfo.id,
+            space: {
+                id: spaceId,
+                name: spaceName
+            }
+        });
+        return acc;
+    }, {
+        entryLinks: {},
+        entryInfos: {}
+    });
+}

package/dist/esm/resources/SingleResourceReferenceEditor.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import deepEqual from 'deep-equal';
+import { EntityProvider } from '../common/EntityStore';
+import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityActions';
+import { ResourceCard } from './Cards/ResourceCard';
+import { useResourceLinkActions } from './useResourceLinkActions';
+export function SingleResourceReferenceEditor(props) {
+    const { dialogs , field  } = props.sdk;
+    const linkActionsProps = useResourceLinkActions({
+        dialogs,
+        field,
+        apiUrl: props.apiUrl
+    });
+    return React.createElement(EntityProvider, {
+        sdk: props.sdk
+    }, React.createElement(FieldConnector, {
+        throttle: 0,
+        field: props.sdk.field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isEqualValues: deepEqual
+    }, ({ value , disabled  })=>{
+        return value ? React.createElement(ResourceCard, {
+            onRemove: ()=>props.sdk.field.removeValue(),
+            resourceLink: value,
+            isDisabled: disabled,
+            getEntryRouteHref: props.getEntryRouteHref
+        }) : React.createElement(CombinedLinkEntityActions, {
+            ...linkActionsProps,
+            renderCustomActions: props.renderCustomActions
+        });
+    }));
+}