feat: allow MultipleEntryReferenceEditor to render children prop

packages/reference/src/common/ReferenceEditor.tsx

@@ -4,6 +4,7 @@ import { FieldConnector } from '@contentful/field-editor-shared';
 import deepEqual from 'deep-equal';
 
 import type { LinkActionsProps } from '../components';
+import { WrappedEntryCardProps } from '../entries/WrappedEntryCard/WrappedEntryCard';
 import { Action, ActionLabels, FieldAppSDK, ViewType } from '../types';
 import { CustomCardRenderer, RenderCustomMissingEntityCard } from './customCardTypes';
 import { EntityProvider } from './EntityStore';
@@ -24,6 +25,7 @@ export interface ReferenceEditorProps {
   renderCustomCard?: CustomCardRenderer;
   renderCustomActions?: (props: CustomActionProps) => React.ReactElement;
   renderCustomMissingEntityCard?: RenderCustomMissingEntityCard;
+  renderCustomChildren?: (props: WrappedEntryCardProps) => React.ReactNode;
   getEntityUrl?: (entryId: string) => string;
   onAction?: (action: Action) => void;
   actionLabels?: Partial<ActionLabels>;

packages/reference/src/common/customCardTypes.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { WrappedEntryCardProps } from '../entries/WrappedEntryCard/WrappedEntryCard';
 import { Asset, ContentType, Entry, RenderDragFn } from '../types';
 import { CustomActionProps } from './ReferenceEditor';
 
@@ -34,6 +35,7 @@ export type CustomEntityCardProps = {
   isDisabled: boolean;
   size: 'default' | 'small';
   renderDragHandle?: RenderDragFn;
+  renderCustomChildren?: (props: WrappedEntryCardProps) => React.ReactNode;
   onEdit?: () => void;
   onRemove?: () => void;
   onMoveTop?: () => void;

packages/reference/src/entries/WrappedEntryCard/FetchingWrappedEntryCard.tsx

@@ -136,6 +136,7 @@ export function FetchingWrappedEntryCard(props: EntryCardReferenceEditorProps) {
       localeCode: props.sdk.field.locale,
       defaultLocaleCode: props.sdk.locales.default,
       renderDragHandle: props.renderDragHandle,
+      renderCustomChildren: props.renderCustomChildren,
       onEdit,
       onRemove: onRemoveEntry,
       onMoveTop: props.onMoveTop,

packages/reference/src/entries/WrappedEntryCard/WrappedEntryCard.tsx

@@ -35,6 +35,7 @@ export interface WrappedEntryCardProps {
   spaceName?: string;
   entry: Entry;
   renderDragHandle?: RenderDragFn;
+  renderCustomChildren?: (props: WrappedEntryCardProps) => React.ReactNode;
   isClickable?: boolean;
   onMoveTop?: () => void;
   onMoveBottom?: () => void;
@@ -106,6 +107,8 @@ export function WrappedEntryCard(props: WrappedEntryCardProps) {
     defaultLocaleCode: props.defaultLocaleCode,
   });
 
+  const customChildren = !!props.renderCustomChildren && props.renderCustomChildren(props);
+
   return (
     <EntryCard
       as={props.entryUrl ? 'a' : 'article'}
@@ -202,7 +205,9 @@ export function WrappedEntryCard(props: WrappedEntryCardProps) {
             }
           : undefined
       }
-    />
+    >
+      {customChildren}
+    </EntryCard>
   );
 }
 

packages/reference/stories/MultipleEntryReferenceEditor/MultipleEntryReferenceEditor.mdx

@@ -43,6 +43,10 @@ Same applies to **onLinkExisting** property that can be overriden to customize t
 
 <Story of={EditorStories.CustomCardRelyingOnDefaultCard} />
 
+## With custom children prop
+
+<Story of={EditorStories.CustomChildren} />
+
 ## Props
 
 <Controls />

packages/reference/stories/MultipleEntryReferenceEditor/MultipleEntryReferenceEditor.stories.tsx

@@ -228,7 +228,7 @@ export const CustomCardRelyingOnDefaultCard: Story = {
     };
     const [sdk, mitt] = newReferenceEditorFakeSdk();
     return (
-      <div data-test-id="multiple-references-editor-custom-cards-with-default-integration-test">
+      <div data-test-id="multiple-references-editor-custom-children-test">
         <MultipleEntryReferenceEditor
           hasCardEditActions={false}
           renderCustomCard={(props, _, renderDefaultCard) => {
@@ -250,3 +250,37 @@ export const CustomCardRelyingOnDefaultCard: Story = {
     );
   },
 };
+
+export const CustomChildren: Story = {
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+  render: () => {
+    const isInitiallyDisabled = !!window.localStorage.getItem('initialDisabled');
+    const instanceParams = JSON.parse(window.localStorage.getItem('instanceParams') as string) as {
+      showCreateEntityAction: boolean;
+      showLinkEntityAction: boolean;
+    };
+    const [sdk, mitt] = newReferenceEditorFakeSdk();
+
+    return (
+      <div data-test-id="multiple-references-editor-custom-cards-with-default-integration-test">
+        <MultipleEntryReferenceEditor
+          renderCustomChildren={() => {
+            return <>Some custom children. Anything can be rendered here!</>;
+          }}
+          viewType="link"
+          sdk={sdk}
+          isInitiallyDisabled={isInitiallyDisabled}
+          parameters={{
+            instance: instanceParams || {
+              showCreateEntityAction: true,
+              showLinkEntityAction: true,
+            },
+          }}
+        />
+        <ActionsPlayground mitt={mitt} />
+      </div>
+    );
+  },
+};