@contentful/field-editor-reference 5.18.0 → 5.20.0

package/dist/esm/resources/MultipleResourceReferenceEditor.js

@@ -10,9 +10,9 @@ import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityA
 import { ResourceCard } from './Cards/ResourceCard';
 import { useResourceLinkActions } from './useResourceLinkActions';
 function ResourceEditor(props) {
-    const { setValue , items , apiUrl  } = props;
+    const { setValue, items, apiUrl } = props;
     const onSortStart = ()=>noop();
-    const onSortEnd = useCallback(({ oldIndex , newIndex  })=>{
+    const onSortEnd = useCallback(({ oldIndex, newIndex })=>{
         const newItems = arrayMove(items, oldIndex, newIndex);
         setValue(newItems);
     }, [
@@ -32,24 +32,25 @@ function ResourceEditor(props) {
         items,
         setValue
     ]);
-    const { dialogs , field  } = props.sdk;
+    const { dialogs, field } = props.sdk;
     const linkActionsProps = useResourceLinkActions({
         dialogs,
         field,
         apiUrl
     });
-    return React.createElement(React.Fragment, null, props.children({
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, props.children({
         ...props,
         onSortStart,
         onSortEnd,
         onMove,
         onRemoteItemAtIndex
-    }), React.createElement(CombinedLinkEntityActions, {
+    }), /*#__PURE__*/ React.createElement(CombinedLinkEntityActions, {
         ...linkActionsProps,
         renderCustomActions: props.renderCustomActions
     }));
 }
-function WithPerItemCallbacks({ listLength , index , onMove , onRemoteItemAtIndex , children  }) {
+// provides memoized callbacks bound to a given item
+function WithPerItemCallbacks({ listLength, index, onMove, onRemoteItemAtIndex, children }) {
     const handleMoveTop = React.useMemo(()=>index > 0 ? ()=>onMove(index, 0) : undefined, [
         index,
         onMove
@@ -63,7 +64,7 @@ function WithPerItemCallbacks({ listLength , index , onMove , onRemoteItemAtInde
         index,
         onRemoteItemAtIndex
     ]);
-    return React.createElement(React.Fragment, null, children({
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, children({
         onMoveBottom: handleMoveBottom,
         onMoveTop: handleMoveTop,
         onRemove: handleRemove
@@ -71,28 +72,28 @@ function WithPerItemCallbacks({ listLength , index , onMove , onRemoteItemAtInde
 }
 const EMPTY_ARRAY = [];
 export function MultipleResourceReferenceEditor(props) {
-    return React.createElement(EntityProvider, {
+    return /*#__PURE__*/ React.createElement(EntityProvider, {
         sdk: props.sdk
-    }, React.createElement(FieldConnector, {
+    }, /*#__PURE__*/ React.createElement(FieldConnector, {
         debounce: 0,
         field: props.sdk.field,
         isInitiallyDisabled: props.isInitiallyDisabled,
         isEqualValues: deepEqual
-    }, ({ value , disabled , setValue , externalReset  })=>{
-        return React.createElement(ResourceEditor, {
+    }, ({ value, disabled, setValue, externalReset })=>{
+        return /*#__PURE__*/ 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, {
+        }, (editorProps)=>/*#__PURE__*/ React.createElement(SortableLinkList, editorProps, ({ item, isDisabled, DragHandle, index })=>/*#__PURE__*/ React.createElement(WithPerItemCallbacks, {
                     key: index,
                     index: index,
                     onMove: editorProps.onMove,
                     onRemoteItemAtIndex: editorProps.onRemoteItemAtIndex,
                     listLength: value?.length || 0
-                }, ({ onMoveBottom , onMoveTop , onRemove  })=>React.createElement(ResourceCard, {
+                }, ({ onMoveBottom, onMoveTop, onRemove })=>/*#__PURE__*/ React.createElement(ResourceCard, {
                         key: index,
                         index: index,
                         resourceLink: item,

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

@@ -46,16 +46,18 @@ const fieldDefinition = {
 describe('Multiple resource editor', ()=>{
     it('renders the action button when no value is set', async ()=>{
         const sdk = mockSdkForField(fieldDefinition);
-        render(React.createElement(MultipleResourceReferenceEditor, {
+        render(/*#__PURE__*/ React.createElement(MultipleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
+            // @ts-expect-error unused...
             parameters: {}
         }));
         const button = await screen.findByText('Add existing content');
         expect(button).toBeDefined();
         fireEvent.click(button);
+        // @ts-expect-error wait app-sdk version update
         const dialogFn = sdk.dialogs.selectMultipleResourceEntries;
         expect(dialogFn).toHaveBeenCalledTimes(1);
         const options = dialogFn.mock.calls[0][0];
@@ -65,13 +67,14 @@ describe('Multiple resource editor', ()=>{
     });
     it('renders custom actions when passed', async ()=>{
         const sdk = mockSdkForField(fieldDefinition);
-        render(React.createElement(MultipleResourceReferenceEditor, {
+        render(/*#__PURE__*/ React.createElement(MultipleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
+            // @ts-expect-error unused...
             parameters: {},
-            renderCustomActions: ()=>React.createElement("div", {
+            renderCustomActions: ()=>/*#__PURE__*/ React.createElement("div", {
                     "data-testid": "custom-actions"
                 })
         }));
@@ -80,22 +83,24 @@ describe('Multiple resource editor', ()=>{
     });
     describe('with value', ()=>{
         it('renders the cards', async ()=>{
-            const { entryLinks , entryInfos  } = generateMultipleTestResources();
+            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, {
+            render(/*#__PURE__*/ React.createElement(MultipleResourceReferenceEditor, {
                 isInitiallyDisabled: false,
                 sdk: sdk,
                 hasCardEditActions: true,
                 viewType: "card",
                 apiUrl: "test-contentful",
                 getEntryRouteHref: ()=>'',
+                // @ts-expect-error unused...
                 parameters: {}
             }));
             expect(useResource).toHaveBeenCalledTimes(Object.values(entryInfos).length);
+            // ensure the card is rendered for every value
             const cards = [];
             const entriesArray = Object.values(entryInfos);
             for (const info of Array.from(entriesArray.values())){
@@ -107,49 +112,58 @@ describe('Multiple resource editor', ()=>{
         });
         describe('card actions', ()=>{
             it('should have a move to top button', async ()=>{
-                const { entryLinks , entryInfos  } = generateMultipleTestResources();
+                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, {
+                render(/*#__PURE__*/ React.createElement(MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
                     viewType: "card",
                     apiUrl: "test-contentful",
                     getEntryRouteHref: ()=>'',
+                    // @ts-expect-error unused...
                     parameters: {}
                 }));
+                // expect(useResource).toHaveBeenCalledTimes(Object.values(entryInfos).length);
+                // linking more is available
                 const linkExistingBtn = screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
+                // ensure the card is rendered for every value
                 const entriesArray = Object.values(entryInfos);
                 const firstItem = entriesArray[0];
                 await expectToNotHaveMoveButton(firstItem, 'Move to top');
                 const allButFirst = entriesArray.slice(1);
+                // move actions are available
                 for (const info of allButFirst){
                     await expectToHaveMoveButton(info, 'Move to top');
                 }
             });
             it('should have a move to bottom button', async ()=>{
-                const { entryLinks , entryInfos  } = generateMultipleTestResources();
+                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, {
+                render(/*#__PURE__*/ React.createElement(MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
                     viewType: "card",
                     apiUrl: "test-contentful",
                     getEntryRouteHref: ()=>'',
+                    // @ts-expect-error unused...
                     parameters: {}
                 }));
+                // expect(useResource).toHaveBeenCalledTimes(Object.values(entryInfos).length);
+                // linking more is available
                 const linkExistingBtn = screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
+                // ensure the card is rendered for every value
                 const entriesArray = Object.values(entryInfos);
                 const lastItem = entriesArray[entriesArray.length - 1];
                 await expectToNotHaveMoveButton(lastItem, 'Move to bottom');
@@ -159,23 +173,27 @@ describe('Multiple resource editor', ()=>{
                 }
             });
             it('works when using remove action', async ()=>{
-                const { entryLinks , entryInfos  } = generateMultipleTestResources();
+                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, {
+                render(/*#__PURE__*/ React.createElement(MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
                     viewType: "card",
                     apiUrl: "test-contentful",
                     getEntryRouteHref: ()=>'',
+                    // @ts-expect-error unused...
                     parameters: {}
                 }));
+                // expect(useResource).toHaveBeenCalledTimes(Object.values(entryInfos).length);
+                // linking more is available
                 const linkExistingBtn = screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
+                // ensure the card is rendered for every value
                 const entriesArray = Object.values(entryInfos);
                 for (const info of entriesArray){
                     await clickCardActionsButton(info);
@@ -184,6 +202,7 @@ describe('Multiple resource editor', ()=>{
                     });
                     fireEvent.click(removeBtn);
                 }
+                // all cards were deleted
                 expect(sdk.field.setValue).toHaveBeenCalledTimes(3);
                 expect(sdk.field.setValue).toHaveBeenCalledWith([]);
             });

package/dist/esm/resources/SingleResourceReferenceEditor.js

@@ -6,26 +6,26 @@ import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityA
 import { ResourceCard } from './Cards/ResourceCard';
 import { useResourceLinkActions } from './useResourceLinkActions';
 export function SingleResourceReferenceEditor(props) {
-    const { dialogs , field  } = props.sdk;
+    const { dialogs, field } = props.sdk;
     const linkActionsProps = useResourceLinkActions({
         dialogs,
         field,
         apiUrl: props.apiUrl
     });
-    return React.createElement(EntityProvider, {
+    return /*#__PURE__*/ React.createElement(EntityProvider, {
         sdk: props.sdk
-    }, React.createElement(FieldConnector, {
+    }, /*#__PURE__*/ React.createElement(FieldConnector, {
         debounce: 0,
         field: props.sdk.field,
         isInitiallyDisabled: props.isInitiallyDisabled,
         isEqualValues: deepEqual
-    }, ({ value , disabled  })=>{
-        return value ? React.createElement(ResourceCard, {
+    }, ({ value, disabled })=>{
+        return value ? /*#__PURE__*/ React.createElement(ResourceCard, {
             onRemove: ()=>props.sdk.field.removeValue(),
             resourceLink: value,
             isDisabled: disabled,
             getEntryRouteHref: props.getEntryRouteHref
-        }) : React.createElement(CombinedLinkEntityActions, {
+        }) : /*#__PURE__*/ React.createElement(CombinedLinkEntityActions, {
             ...linkActionsProps,
             renderCustomActions: props.renderCustomActions
         });

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

@@ -42,16 +42,18 @@ const fieldDefinition = {
 describe('Single resource editor', ()=>{
     it('renders the action button when no value is set', async ()=>{
         const sdk = mockSdkForField(fieldDefinition);
-        render(React.createElement(SingleResourceReferenceEditor, {
+        render(/*#__PURE__*/ React.createElement(SingleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
+            // @ts-expect-error unused...
             parameters: {}
         }));
         const button = await screen.findByText('Add existing content');
         expect(button).toBeDefined();
         fireEvent.click(button);
+        // @ts-expect-error wait app-sdk version update
         const dialogFn = sdk.dialogs.selectSingleResourceEntry;
         expect(dialogFn).toHaveBeenCalledTimes(1);
         const options = dialogFn.mock.calls[0][0];
@@ -61,13 +63,14 @@ describe('Single resource editor', ()=>{
     });
     it('renders custom actions when passed', async ()=>{
         const sdk = mockSdkForField(fieldDefinition);
-        render(React.createElement(SingleResourceReferenceEditor, {
+        render(/*#__PURE__*/ React.createElement(SingleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
+            // @ts-expect-error unused...
             parameters: {},
-            renderCustomActions: ()=>React.createElement("div", {
+            renderCustomActions: ()=>/*#__PURE__*/ React.createElement("div", {
                     "data-testid": "custom-actions"
                 })
         }));
@@ -91,16 +94,18 @@ describe('Single resource editor', ()=>{
             }
         });
         mockedResources[`Contentful:Entry.crn:test:::content:spaces/x-space/entries/linkedEntryId`] = info;
-        render(React.createElement(SingleResourceReferenceEditor, {
+        render(/*#__PURE__*/ React.createElement(SingleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
             apiUrl: "test-contentful",
             getEntryRouteHref: jest.fn(),
+            // @ts-expect-error unused...
             parameters: {}
         }));
         expect(useResource).toHaveBeenCalled();
+        // ensure the card is rendered
         const title = await screen.findByText('Title of linked entry');
         await screen.findByText('X Space');
         const theCard = title.closest('[data-test-id="cf-ui-entry-card"]');

package/dist/esm/resources/testHelpers/resourceEditorHelpers.js

@@ -4,13 +4,17 @@ export function mockSdkForField(fieldDefinition, fieldValue) {
             getValue: jest.fn(()=>fieldValue),
             setValue: jest.fn(()=>Promise.resolve(undefined)),
             removeValue: jest.fn(),
+            // eslint-disable-next-line -- test helper
             onSchemaErrorsChanged: ()=>{},
+            // eslint-disable-next-line -- test helper
             onIsDisabledChanged: ()=>{},
+            // eslint-disable-next-line -- test helper
             onValueChanged: ()=>{},
             ...fieldDefinition,
             locale: 'en'
         },
         dialogs: {
+            // @ts-expect-error wait app-sdk version update
             selectSingleResourceEntry: jest.fn().mockResolvedValue({
                 sys: {
                     type: 'Entry',
@@ -50,15 +54,18 @@ export function mockSdkForField(fieldDefinition, fieldValue) {
             contentType: 'testCT'
         },
         space: {
+            // @ts-expect-error wait app-sdk version update
+            // eslint-disable-next-line -- test helper
             onEntityChanged: ()=>{}
         },
+        // @ts-expect-error
         navigator: {
             onSlideInNavigation: ()=>()=>({})
         }
     };
 }
-export const createFakeEntryResource = ({ title , id , space  })=>{
-    const { id: spaceId , name: spaceName  } = space;
+export const createFakeEntryResource = ({ title, id, space })=>{
+    const { id: spaceId, name: spaceName } = space;
     return {
         resource: {
             sys: {

package/dist/esm/resources/useResourceLinkActions.js

@@ -19,7 +19,7 @@ const getUpdatedValue = (field, entries, apiUrl)=>{
         return toLinkItem(entries[0], apiUrl);
     }
 };
-export function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl  }) {
+export function useResourceLinkActions({ dialogs, field, onAfterLink, apiUrl }) {
     const handleAfterLink = useCallback((entries)=>{
         if (!onAfterLink) {
             return;
@@ -41,10 +41,14 @@ export function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl
     ]);
     const multiple = field.type === 'Array';
     const onLinkExisting = useMemo(()=>{
-        const promptSelection = multiple ? async ()=>await dialogs.selectMultipleResourceEntries({
+        const promptSelection = multiple ? async ()=>// @ts-expect-error wait for update of app-sdk version
+            await dialogs.selectMultipleResourceEntries({
+                // @ts-expect-error wait for update of app-sdk version
                 allowedResources: field.allowedResources
             }) : async ()=>[
+                // @ts-expect-error wait for update of app-sdk version
                 await dialogs.selectSingleResourceEntry({
+                    // @ts-expect-error wait for update of app-sdk version
                     allowedResources: field.allowedResources
                 })
             ];
@@ -55,6 +59,7 @@ export function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl
             }
             onLinkedExisting(res);
         };
+    // @ts-expect-error wait for update of app-sdk version
     }, [
         dialogs,
         field.allowedResources,
@@ -63,7 +68,9 @@ export function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl
     ]);
     return {
         onLinkExisting,
+        // @ts-expect-error
         onLinkedExisting,
+        // hardcoded values to match interface for standard reference field actions
         entityType: 'Entry',
         contentTypes: [],
         canCreateEntity: false,
@@ -72,7 +79,9 @@ export function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl
         isDisabled: false,
         isEmpty: false,
         isFull: false,
+        // eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
         onCreate: async ()=>{},
+        // eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
         onCreated: ()=>{}
     };
 }

package/dist/esm/utils/fromFieldValidations.js

@@ -1,5 +1,6 @@
 import isNumber from 'lodash/isNumber';
 export function fromFieldValidations(field) {
+    // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
     const validations = [
         ...field.validations,
         ...field.type === 'Array' ? field.items?.validations ?? [] : []

package/dist/esm/utils/useSortIDs.js

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { arrayMove } from '@dnd-kit/sortable';
 export const useSortIDs = (items)=>{
     const ids = (items || []).map((item, index)=>{
-        const { type  } = item.sys;
+        const { type } = item.sys;
         return {
             id: type === 'ResourceLink' ? `${item.sys.urn}-${index}` : `${item.sys.id}-${index}`
         };
@@ -11,7 +11,7 @@ export const useSortIDs = (items)=>{
     React.useEffect(()=>{
         if (items.length !== sortIDs.length) {
             const ids = items.map((item, index)=>{
-                const { type  } = item.sys;
+                const { type } = item.sys;
                 return {
                     id: type === 'ResourceLink' ? `${item.sys.urn}-${index}` : `${item.sys.id}-${index}`
                 };

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

@@ -54,7 +54,7 @@ declare const useEntityLoader: () => {
 };
 export declare function useEntity<E extends FetchableEntity>(entityType: FetchableEntityType, entityId: string, options?: UseEntityOptions): UseEntityResult<E>;
 export declare function useResource(resourceType: ResourceType, urn: string, options?: UseResourceOptions): {
-    status: "loading" | "error" | "success";
+    status: "error" | "success" | "loading";
     data: ResourceInfo<Resource> | undefined;
     error: unknown;
 };

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { QueryClient, useQuery as useRQ } from '@tanstack/react-query';
+export declare function useQueryClient(): QueryClient;
+export declare const useQuery: typeof useRQ;
+/**
+ * Provides access to a query client either by sharing an existing client or
+ * creating a new one.
+ */
+export declare function SharedQueryClientProvider({ children }: React.PropsWithChildren<{}>): React.JSX.Element;

package/dist/types/index.d.ts

@@ -5,6 +5,7 @@ export type { CustomActionProps } from './common/ReferenceEditor';
 export type { CustomEntityCardProps, DefaultCardRenderer, MissingEntityCardProps, RenderCustomMissingEntityCard, } from './common/customCardTypes';
 export { SortableLinkList } from './common/SortableLinkList';
 export { EntityProvider, useEntityLoader, useEntity, useResource } from './common/EntityStore';
+export { SharedQueryClientProvider as EntityCacheProvider } from './common/queryClient';
 export type { ResourceInfo } from './common/EntityStore';
 export { SingleResourceReferenceEditor, MultipleResourceReferenceEditor } from './resources';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "5.18.0",
+  "version": "5.20.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -64,5 +64,5 @@
     "@contentful/app-sdk": "^4.17.1",
     "react": ">=16.8.0"
   },
-  "gitHead": "ed5a4c379ae53144fc8b9f68d86d48ff4009a784"
+  "gitHead": "122ef199250b6d84b4df4a595e6ce938716193fb"
 }