feat: add renderFooter option in external field

apps/demo/config/blocks/Hero/index.tsx

@@ -32,7 +32,14 @@ export const Hero: ComponentConfig<HeroProps> = {
     quote: {
       type: "external",
       placeholder: "Select a quote",
-      showSearch: true,
+      showSearch: false,
+      renderFooter: (data) => {
+        return (
+          <div>
+            {data.length} result{data.length === 1 ? "" : "s"}
+          </div>
+        );
+      },
       filterFields: {
         author: {
           type: "select",

apps/docs/pages/docs/api-reference/fields/external.mdx

@@ -60,9 +60,10 @@ const config = {
 | [`initialFilters`](#initialfilters)       | `{ "rating": 1 }`                            | Object     | -        |
 | [`initialQuery`](#initialquery)           | `initialQuery: "Hello, world"`               | String     | -        |
 | [`mapProp()`](#mappropitem)               | `mapProp: async ({ title }) => title`        | Function   | -        |
-| [`mapRow()`](#mappropitem)                | `mapRow: async ({ title }) => title`         | Function   | -        |
+| [`mapRow()`](#maprowitem)                 | `mapRow: async ({ title }) => title`         | Function   | -        |
 | [`placeholder`](#placeholder)             | `placeholder: "Select content"`              | String     | -        |
 | [`showSearch`](#showsearch)               | `showSearch: true`                           | Boolean    | -        |
+| [`renderFooter()`](#renderfooterdata)     | `renderFooter: (data) => <p>Hello</p>`       | Function   | -        |
 
 ## Required params
 
@@ -611,4 +612,54 @@ const config = {
 }}
 />
 
+### `renderFooter(data)`
+
+Customize what will be displayed in the footer of the modal.
+
+```tsx {13} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        data: {
+          type: "external",
+          fetchList: async () => {
+            return [
+              { title: "Hello, world", description: "Lorem ipsum 1" },
+              { title: "Goodbye, world", description: "Lorem ipsum 2" },
+            ];
+          },
+          renderFooter: (data) => <span>Hello, footer</span>,
+        },
+      },
+      render: ({ data }) => {
+        return <p>{data || "No data selected"}</p>;
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      data: {
+        type: "external",
+        fetchList: async () => {
+          return [
+            { title: "Hello, world", description: "Lorem ipsum 1" },
+            { title: "Goodbye, world", description: "Lorem ipsum 2" },
+          ];
+        },
+        renderFooter: (data) => <span>Hello, footer</span>,
+      },
+    },
+    render: ({ data }) => {
+      return <p>{data?.title || "No data selected"}</p>;
+    },
+  }}
+/>
+
 <div id="puck-portal-root" />

packages/core/components/ExternalInput/index.tsx

@@ -265,9 +265,14 @@ export const ExternalInput = ({
               </div>
             </div>
           </div>
-
-          <div className={getClassNameModal("footer")}>
-            {mappedData.length} result{mappedData.length === 1 ? "" : "s"}
+          <div className={getClassNameModal("footerContainer")}>
+            {field.renderFooter ? (
+              field.renderFooter(mappedData)
+            ) : (
+              <span className={getClassNameModal("footer")}>
+                {mappedData.length} result{mappedData.length === 1 ? "" : "s"}
+              </span>
+            )}
           </div>
         </form>
       </Modal>

packages/core/components/ExternalInput/styles.module.css

@@ -327,12 +327,15 @@
   align-self: center;
 }
 
-.ExternalInputModal-footer {
+.ExternalInputModal-footerContainer {
   background-color: var(--puck-color-grey-12);
   border-top: 1px solid var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
+  padding: 16px;
+}
+
+.ExternalInputModal-footer {
   font-weight: 500;
   font-size: 14px;
-  padding: 16px;
   text-align: right;
 }

packages/core/types/Fields.ts

@@ -94,6 +94,7 @@ export type ExternalField<
   mapRow?: (value: any) => Record<string, string | number>;
   getItemSummary?: (item: Props, index?: number) => string;
   showSearch?: boolean;
+  renderFooter?: (data: any[]) => ReactElement;
   initialQuery?: string;
   filterFields?: Record<string, Field>;
   initialFilters?: Record<string, any>;