Infer additional item fields in BlocksBlock and ListBlock (vivid-…

…planet#1481)

Additional fields in the `item` prop of `AdditionalItemContextMenuItems`
and `AdditionalItemContent` will be typed correctly if the
`additionalItemFields` option is strongly typed.

.changeset/silly-lemons-compete.md

@@ -0,0 +1,7 @@
+---
+"@comet/blocks-admin": patch
+---
+
+Infer additional item fields in `BlocksBlock` and `ListBlock`
+
+Additional fields in the `item` prop of `AdditionalItemContextMenuItems` and `AdditionalItemContent` will be typed correctly if the `additionalItemFields` option is strongly typed.

demo/admin/src/common/blocks/LinkListBlock.tsx

@@ -17,13 +17,9 @@ export const LinkListBlock = createListBlock({
         ...userGroupAdditionalItemFields,
     },
     AdditionalItemContextMenuItems: ({ item, onChange, onMenuClose }) => {
-        // TODO fix typing: infer additional fields somehow
-        // @ts-expect-error missing additional field
         return <UserGroupContextMenuItem item={item} onChange={onChange} onMenuClose={onMenuClose} />;
     },
     AdditionalItemContent: ({ item }) => {
-        // TODO fix typing: infer additional fields somehow
-        // @ts-expect-error missing additional field
         return <UserGroupChip item={item} />;
     },
 });

demo/admin/src/pages/PageContentBlock.tsx

@@ -37,13 +37,9 @@ export const PageContentBlock = createBlocksBlock({
         ...userGroupAdditionalItemFields,
     },
     AdditionalItemContextMenuItems: ({ item, onChange, onMenuClose }) => {
-        // TODO fix typing: infer additional fields somehow
-        // @ts-expect-error missing additional field
         return <UserGroupContextMenuItem item={item} onChange={onChange} onMenuClose={onMenuClose} />;
     },
     AdditionalItemContent: ({ item }) => {
-        // TODO fix typing: infer additional fields somehow
-        // @ts-expect-error missing additional field
         return <UserGroupChip item={item} />;
     },
 });

demo/admin/src/userGroups/userGroupAdditionalItemFields.ts

@@ -1,6 +1,8 @@
+import { GQLUserGroup } from "@src/graphql.generated";
+
 const userGroupAdditionalItemFields = {
     userGroup: {
-        defaultValue: "All",
+        defaultValue: "All" as GQLUserGroup,
     },
 };