From 86479e7703607d06c48a43bd1cebe1013e65e0ba Mon Sep 17 00:00:00 2001
From: Ricky James Smith <jamesricky@me.com>
Date: Mon, 20 Jan 2025 11:44:49 +0100
Subject: [PATCH] Improve usage of composite-block field-helpers (#3155)

---
 .changeset/five-wolves-kneel.md               | 16 ++++++++++++
 .changeset/tender-socks-trade.md              |  5 ++++
 .../src/common/blocks/AccordionItemBlock.tsx  |  3 ++-
 .../src/common/blocks/CallToActionBlock.tsx   |  3 ++-
 demo/admin/src/common/blocks/HeadingBlock.tsx |  3 ++-
 .../src/common/blocks/MediaGalleryBlock.tsx   |  6 ++---
 .../common/blocks/MediaGalleryItemBlock.tsx   |  6 ++---
 .../StandaloneCallToActionListBlock.tsx       |  6 ++---
 .../common/blocks/StandaloneHeadingBlock.tsx  |  3 ++-
 .../common/blocks/StandaloneMediaBlock.tsx    |  3 ++-
 .../pages/blocks/BasicStageBlock.tsx          |  4 +--
 .../pages/blocks/BillboardTeaserBlock.tsx     |  2 +-
 .../pages/blocks/ContentGroupBlock.tsx        |  3 ++-
 .../pages/blocks/KeyFactsItemBlock.tsx        |  6 +++--
 .../pages/blocks/TeaserItemBlock.tsx          |  3 ++-
 .../src/footer/blocks/FooterContentBlock.tsx  |  6 ++---
 .../createCompositeBlockSelectField.tsx       | 26 +++++++++----------
 .../helpers/createCompositeBlockTextField.tsx |  9 ++++---
 18 files changed, 69 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/five-wolves-kneel.md
 create mode 100644 .changeset/tender-socks-trade.md

diff --git a/.changeset/five-wolves-kneel.md b/.changeset/five-wolves-kneel.md
new file mode 100644
index 0000000000..3ad8250d93
--- /dev/null
+++ b/.changeset/five-wolves-kneel.md
@@ -0,0 +1,16 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Simplify setting field props when using `createCompositeBlockTextField` or `createCompositeBlockSelectField`
+
+The props can now be set directly without nesting them inside the `fieldProps` object.
+
+```diff
+ block: createCompositeBlockTextField({
+-    fieldProps: {
+         label: "Title",
+         fullWidth: true,
+-    },
+ }),
+```
diff --git a/.changeset/tender-socks-trade.md b/.changeset/tender-socks-trade.md
new file mode 100644
index 0000000000..cf628384ba
--- /dev/null
+++ b/.changeset/tender-socks-trade.md
@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Support `disabled` in select options when using `createCompositeBlockSelectField`
diff --git a/demo/admin/src/common/blocks/AccordionItemBlock.tsx b/demo/admin/src/common/blocks/AccordionItemBlock.tsx
index 445e08bd27..5f414a599f 100644
--- a/demo/admin/src/common/blocks/AccordionItemBlock.tsx
+++ b/demo/admin/src/common/blocks/AccordionItemBlock.tsx
@@ -31,7 +31,8 @@ export const AccordionItemBlock = createCompositeBlock(
         blocks: {
             title: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="accordionBlock.accordionItem.title" defaultMessage="Title" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="accordionBlock.accordionItem.title" defaultMessage="Title" />,
                 }),
                 hiddenInSubroute: true,
             },
diff --git a/demo/admin/src/common/blocks/CallToActionBlock.tsx b/demo/admin/src/common/blocks/CallToActionBlock.tsx
index 24892b9777..16c96c755c 100644
--- a/demo/admin/src/common/blocks/CallToActionBlock.tsx
+++ b/demo/admin/src/common/blocks/CallToActionBlock.tsx
@@ -21,7 +21,8 @@ export const CallToActionBlock = createCompositeBlock(
                         { value: "Outlined", label: <FormattedMessage id="callToActionBlock.variant.outlined" defaultMessage="Outlined" /> },
                         { value: "Text", label: <FormattedMessage id="callToActionBlock.variant.text" defaultMessage="Text" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />, fullWidth: true },
+                    label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />,
+                    fullWidth: true,
                 }),
             },
         },
diff --git a/demo/admin/src/common/blocks/HeadingBlock.tsx b/demo/admin/src/common/blocks/HeadingBlock.tsx
index 830e6b65e6..2ac5af7a46 100644
--- a/demo/admin/src/common/blocks/HeadingBlock.tsx
+++ b/demo/admin/src/common/blocks/HeadingBlock.tsx
@@ -81,7 +81,8 @@ export const HeadingBlock = createCompositeBlock(
                         { value: "H5", label: <FormattedMessage id="headingBlock.headline5" defaultMessage="Headline 5" /> },
                         { value: "H6", label: <FormattedMessage id="headingBlock.headline6" defaultMessage="Headline 6" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />, fullWidth: true },
+                    label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />,
+                    fullWidth: true,
                 }),
             },
         },
diff --git a/demo/admin/src/common/blocks/MediaGalleryBlock.tsx b/demo/admin/src/common/blocks/MediaGalleryBlock.tsx
index b5d5f964f6..159bc50ea8 100644
--- a/demo/admin/src/common/blocks/MediaGalleryBlock.tsx
+++ b/demo/admin/src/common/blocks/MediaGalleryBlock.tsx
@@ -24,10 +24,8 @@ export const MediaGalleryBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<MediaGalleryBlockData["aspectRatio"]>({
                     defaultValue: "16x9",
                     options: mediaAspectRatioOptions,
-                    fieldProps: {
-                        label: <FormattedMessage id="mediaGalleryBlock.mediaGallery.aspectRatio" defaultMessage="Aspect Ratio" />,
-                        fullWidth: true,
-                    },
+                    label: <FormattedMessage id="mediaGalleryBlock.mediaGallery.aspectRatio" defaultMessage="Aspect Ratio" />,
+                    fullWidth: true,
                 }),
                 hiddenInSubroute: true,
             },
diff --git a/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx b/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx
index db94e9a18a..14130ebda4 100644
--- a/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx
+++ b/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx
@@ -13,10 +13,8 @@ export const MediaGalleryItemBlock = createCompositeBlock(
             },
             caption: {
                 block: createCompositeBlockTextField({
-                    fieldProps: {
-                        fullWidth: true,
-                        label: <FormattedMessage id="mediaGalleryBlock.mediaGalleryItem.caption" defaultMessage="Caption" />,
-                    },
+                    fullWidth: true,
+                    label: <FormattedMessage id="mediaGalleryBlock.mediaGalleryItem.caption" defaultMessage="Caption" />,
                 }),
                 hiddenInSubroute: true,
             },
diff --git a/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx b/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx
index 82274a9edc..2352d3b44f 100644
--- a/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx
+++ b/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx
@@ -19,10 +19,8 @@ export const StandaloneCallToActionListBlock = createCompositeBlock(
                         { value: "center", label: <FormattedMessage id="standaloneCallToActionList.alignment.center" defaultMessage="center" /> },
                         { value: "right", label: <FormattedMessage id="standaloneCallToActionList.alignment.right" defaultMessage="right" /> },
                     ],
-                    fieldProps: {
-                        label: <FormattedMessage id="standaloneCallToActionList.alignment" defaultMessage="Alignment" />,
-                        fullWidth: true,
-                    },
+                    label: <FormattedMessage id="standaloneCallToActionList.alignment" defaultMessage="Alignment" />,
+                    fullWidth: true,
                 }),
                 hiddenInSubroute: true,
             },
diff --git a/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx b/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx
index 69b13ed4e0..014333803d 100644
--- a/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx
+++ b/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx
@@ -19,7 +19,8 @@ export const StandaloneHeadingBlock = createCompositeBlock(
                         { value: "left", label: <FormattedMessage id="standaloneHeading.textAlignment.left" defaultMessage="left" /> },
                         { value: "center", label: <FormattedMessage id="standaloneHeading.textAlignment.center" defaultMessage="center" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />, fullWidth: true },
+                    label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />,
+                    fullWidth: true,
                 }),
             },
         },
diff --git a/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx b/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx
index c0b16b92c3..8e7e9af4ae 100644
--- a/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx
+++ b/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx
@@ -16,7 +16,8 @@ export const StandaloneMediaBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<StandaloneMediaBlockData["aspectRatio"]>({
                     defaultValue: "16x9",
                     options: mediaAspectRatioOptions,
-                    fieldProps: { label: <FormattedMessage id="standaloneMedia.aspectRatio" defaultMessage="Aspect Ratio" />, fullWidth: true },
+                    label: <FormattedMessage id="standaloneMedia.aspectRatio" defaultMessage="Aspect Ratio" />,
+                    fullWidth: true,
                 }),
             },
         },
diff --git a/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx b/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx
index 3c1547fabd..b991d39549 100644
--- a/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx
+++ b/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx
@@ -40,7 +40,7 @@ export const BasicStageBlock = createCompositeBlock({
             block: createCompositeBlockSelectField<BasicStageBlockData["overlay"]>({
                 defaultValue: 50,
                 options: overlayOptions,
-                fieldProps: { fullWidth: true },
+                fullWidth: true,
             }),
             title: <FormattedMessage id="basicStageBlock.overlay" defaultMessage="Overlay" />,
             hiddenInSubroute: true,
@@ -52,7 +52,7 @@ export const BasicStageBlock = createCompositeBlock({
                     { value: "left", label: <FormattedMessage id="basicStageBlock.alignment.left" defaultMessage="left" /> },
                     { value: "center", label: <FormattedMessage id="basicStageBlock.alignment.center" defaultMessage="center" /> },
                 ],
-                fieldProps: { fullWidth: true },
+                fullWidth: true,
             }),
             title: <FormattedMessage id="basicStageBlock.alignment" defaultMessage="Alignment" />,
             hiddenInSubroute: true,
diff --git a/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx b/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx
index edba1f7e60..c439ec3b10 100644
--- a/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx
+++ b/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx
@@ -41,7 +41,7 @@ export const BillboardTeaserBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<BillboardTeaserBlockData["overlay"]>({
                     defaultValue: 50,
                     options: overlayOptions,
-                    fieldProps: { fullWidth: true },
+                    fullWidth: true,
                 }),
                 title: <FormattedMessage id="billboardTeaserBlock.overlay" defaultMessage="Overlay" />,
                 hiddenInSubroute: true,
diff --git a/demo/admin/src/documents/pages/blocks/ContentGroupBlock.tsx b/demo/admin/src/documents/pages/blocks/ContentGroupBlock.tsx
index f9596b5f60..613a22db3a 100644
--- a/demo/admin/src/documents/pages/blocks/ContentGroupBlock.tsx
+++ b/demo/admin/src/documents/pages/blocks/ContentGroupBlock.tsx
@@ -46,7 +46,8 @@ export const ContentGroupBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<ContentGroupBlockData["backgroundColor"]>({
                     defaultValue: "default",
                     options: backgroundColorOptions,
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="contentGroupBlock.overlay" defaultMessage="Background Color" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="contentGroupBlock.overlay" defaultMessage="Background Color" />,
                 }),
                 hiddenInSubroute: true,
             },
diff --git a/demo/admin/src/documents/pages/blocks/KeyFactsItemBlock.tsx b/demo/admin/src/documents/pages/blocks/KeyFactsItemBlock.tsx
index e48a196343..a9ae4752a6 100644
--- a/demo/admin/src/documents/pages/blocks/KeyFactsItemBlock.tsx
+++ b/demo/admin/src/documents/pages/blocks/KeyFactsItemBlock.tsx
@@ -23,12 +23,14 @@ export const KeyFactsItemBlock = createCompositeBlock(
             },
             fact: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="keyFactsItemBlock.fact" defaultMessage="Fact" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="keyFactsItemBlock.fact" defaultMessage="Fact" />,
                 }),
             },
             label: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="keyFactsItemBlock.label" defaultMessage="Label" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="keyFactsItemBlock.label" defaultMessage="Label" />,
                 }),
             },
             description: {
diff --git a/demo/admin/src/documents/pages/blocks/TeaserItemBlock.tsx b/demo/admin/src/documents/pages/blocks/TeaserItemBlock.tsx
index 69af6e921c..79ed40dabf 100644
--- a/demo/admin/src/documents/pages/blocks/TeaserItemBlock.tsx
+++ b/demo/admin/src/documents/pages/blocks/TeaserItemBlock.tsx
@@ -25,7 +25,8 @@ export const TeaserItemBlock = createCompositeBlock(
             },
             title: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="teaserItemBlock.title" defaultMessage="Title" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="teaserItemBlock.title" defaultMessage="Title" />,
                 }),
             },
             description: {
diff --git a/demo/admin/src/footer/blocks/FooterContentBlock.tsx b/demo/admin/src/footer/blocks/FooterContentBlock.tsx
index 571f86e530..5a603ed54f 100644
--- a/demo/admin/src/footer/blocks/FooterContentBlock.tsx
+++ b/demo/admin/src/footer/blocks/FooterContentBlock.tsx
@@ -24,10 +24,8 @@ export const FooterContentBlock = createCompositeBlock({
         },
         copyrightNotice: {
             block: createCompositeBlockTextField({
-                fieldProps: {
-                    label: <FormattedMessage id="footers.blocks.content.copyrightNotice" defaultMessage="Copyright notice" />,
-                    fullWidth: true,
-                },
+                label: <FormattedMessage id="footers.blocks.content.copyrightNotice" defaultMessage="Copyright notice" />,
+                fullWidth: true,
             }),
             hiddenInSubroute: true,
         },
diff --git a/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx b/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx
index c45849486a..5b49e733b1 100644
--- a/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx
+++ b/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx
@@ -1,28 +1,28 @@
-import { SelectField, SelectFieldProps } from "@comet/admin";
-import { MenuItem } from "@mui/material";
-import { ReactNode } from "react";
+import { SelectField, SelectFieldOption, SelectFieldProps } from "@comet/admin";
 
 import { BlocksFinalForm } from "../../form/BlocksFinalForm";
 import { createCompositeSetting } from "./composeBlocks/createCompositeSetting";
 
-interface Options<T extends string | number> {
+interface Options<T extends string | number> extends Partial<SelectFieldProps<T>> {
     defaultValue: T;
-    options: Array<{ value: T; label: ReactNode }>;
+    options: Array<SelectFieldOption<T>>;
+    /**
+     * @deprecated Set the props directly instead of nesting inside fieldProps
+     */
     fieldProps?: Partial<SelectFieldProps<T>>;
 }
 
-export function createCompositeBlockSelectField<T extends string | number>({ defaultValue, fieldProps, options }: Options<T>) {
+export function createCompositeBlockSelectField<T extends string | number>({
+    defaultValue,
+    options,
+    fieldProps: legacyFieldProps,
+    ...fieldProps
+}: Options<T>) {
     return createCompositeSetting<T>({
         defaultValue,
         AdminComponent: ({ state, updateState }) => (
             <BlocksFinalForm<{ value: typeof state }> onSubmit={({ value }) => updateState(value)} initialValues={{ value: state }}>
-                <SelectField name="value" {...fieldProps}>
-                    {options.map(({ value, label }) => (
-                        <MenuItem key={value} value={value}>
-                            {label}
-                        </MenuItem>
-                    ))}
-                </SelectField>
+                <SelectField name="value" {...legacyFieldProps} {...fieldProps} options={options} />
             </BlocksFinalForm>
         ),
     });
diff --git a/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockTextField.tsx b/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockTextField.tsx
index 300965f9e3..1846d0f785 100644
--- a/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockTextField.tsx
+++ b/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockTextField.tsx
@@ -3,12 +3,15 @@ import { TextField, TextFieldProps } from "@comet/admin";
 import { BlocksFinalForm } from "../../form/BlocksFinalForm";
 import { createCompositeSetting } from "./composeBlocks/createCompositeSetting";
 
-interface Options {
+interface Options extends Partial<TextFieldProps> {
     defaultValue?: string;
+    /**
+     * @deprecated Set the props directly instead of nesting inside fieldProps
+     */
     fieldProps?: Partial<TextFieldProps>;
 }
 
-export function createCompositeBlockTextField({ defaultValue = "", fieldProps }: Options) {
+export function createCompositeBlockTextField({ defaultValue = "", fieldProps: legacyFieldProps, ...fieldProps }: Options) {
     return createCompositeSetting<string>({
         defaultValue,
         AdminComponent: ({ state, updateState }) => (
@@ -16,7 +19,7 @@ export function createCompositeBlockTextField({ defaultValue = "", fieldProps }:
                 onSubmit={({ value }) => updateState(value ?? "")}
                 initialValues={{ value: state || undefined }}
             >
-                <TextField name="value" {...fieldProps} />
+                <TextField name="value" {...legacyFieldProps} {...fieldProps} />
             </BlocksFinalForm>
         ),
     });