slice-machine-ui 2.16.2-alpha.jp-cr-ui-multiple-improvements-rendering-logic.6 → 2.16.2-alpha.jp-cr-ui-types-internal-version.1

package/src/features/customTypes/fields/ContentRelationshipFieldPicker.tsx

@@ -6,23 +6,18 @@ import {
   TreeViewCheckbox,
   TreeViewSection,
 } from "@prismicio/editor-ui";
-import {
-  CustomType,
-  Group,
-  Link,
-  LinkConfig,
-  NestableWidget,
-} from "@prismicio/types-internal/lib/customtypes";
+import { UID } from "@prismicio/types-internal/lib/customtypes";
+import { useMemo } from "react";
 import { useSelector } from "react-redux";
 
-import { CustomTypes } from "@/legacy/lib/models/common/CustomType";
+import { CustomTypeSM, TabFields } from "@/legacy/lib/models/common/CustomType";
 import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
 import { isValidObject } from "@/utils/isValidObject";
 
 /**
  * Picker fields check map types. Used internally to keep track of the checked
  * fields in the TreeView, as it's easier to handle objects than arrays and
- * also ensures field uniqueness.
+ * also ensure field uniqueness.
  *
  * @example
  * {
@@ -132,7 +127,7 @@ interface PickerNestedCustomTypeValue {
 }
 
 /**
- * Content relationship Link customtypes property structure.
+ * Copy of types-internal Link customtypes.
  *
  * @example
  * [
@@ -180,26 +175,40 @@ interface PickerNestedCustomTypeValue {
  *   },
  * ]
  */
-type LinkCustomtypes = NonNullable<LinkConfig["customtypes"]>;
+type TICustomTypes = readonly (string | TICustomType)[];
+
+interface TICustomType {
+  id: string;
+  fields: readonly (
+    | string
+    | TIContentRelationshipFieldValue
+    | TIGroupFieldValues
+  )[];
+}
+
+interface TICustomTypeRegularFieldValues {
+  id: string;
+  fields: readonly string[];
+}
 
-type LinkCustomtypesFields = Exclude<
-  LinkCustomtypes[number],
-  string
->["fields"][number];
+interface TIGroupFieldValues {
+  id: string;
+  fields: readonly (string | TIContentRelationshipFieldValue)[];
+}
 
-type LinkCustomtypesContentRelationshipFieldValue = Exclude<
-  LinkCustomtypesFields,
-  string | { fields: unknown }
->;
+interface TIContentRelationshipFieldValue {
+  id: string;
+  customtypes: readonly (string | TICustomTypeFieldValues)[];
+}
 
-type LinkCustomtypesGroupFieldValue = Exclude<
-  LinkCustomtypesFields,
-  string | { customtypes: unknown }
->;
+interface TICustomTypeFieldValues {
+  id: string;
+  fields: readonly (string | TICustomTypeRegularFieldValues)[];
+}
 
 interface ContentRelationshipFieldPickerProps {
-  value: LinkCustomtypes | undefined;
-  onChange: (fields: LinkCustomtypes) => void;
+  value: TICustomTypes | undefined;
+  onChange: (fields: TICustomTypes) => void;
 }
 
 export function ContentRelationshipFieldPicker(
@@ -207,14 +216,11 @@ export function ContentRelationshipFieldPicker(
 ) {
   const { value, onChange } = props;
   const customTypes = useCustomTypes();
-
-  const fieldCheckMap = value
-    ? convertLinkCustomtypesToFieldCheckMap(value)
-    : {};
+  const fieldCheckMap = value ? convertCustomTypesToFieldCheckMap(value) : {};
 
   function onCustomTypesChange(customTypeId: string, value: PickerCustomType) {
     onChange(
-      convertFieldCheckMapToLinkCustomtypes({
+      convertFieldCheckMapToCustomTypes({
         ...fieldCheckMap,
         [customTypeId]: value,
       }),
@@ -247,7 +253,6 @@ export function ContentRelationshipFieldPicker(
               customType={customType}
               onChange={(value) => onCustomTypesChange(customType.id, value)}
               fieldCheckMap={fieldCheckMap[customType.id] ?? {}}
-              customTypes={customTypes}
             />
           ))}
         </TreeView>
@@ -271,157 +276,131 @@ export function ContentRelationshipFieldPicker(
 }
 
 interface TreeViewCustomTypeProps {
-  customType: CustomType;
+  customType: TICustomType;
   fieldCheckMap: PickerCustomType;
   onChange: (newValue: PickerCustomType) => void;
-  customTypes: CustomType[];
 }
 
 function TreeViewCustomType(props: TreeViewCustomTypeProps) {
   const {
     customType,
-    fieldCheckMap: customTypeFieldsCheckMap,
+    fieldCheckMap: customTypeFieldCheckMap,
     onChange: onCustomTypeChange,
-    customTypes,
   } = props;
 
-  const renderedFields = getCustomTypeStaticFields(customType).map(
-    ({ fieldId, field }) => {
-      // Group field
+  return (
+    <TreeViewSection
+      key={customType.id}
+      title={customType.id}
+      subtitle={getExposedFieldsLabel(
+        countPickedFields(customTypeFieldCheckMap),
+      )}
+      badge="Custom type"
+    >
+      {customType.fields.map((field) => {
+        // Checkbox field
 
-      if (isGroupField(field)) {
-        const onGroupFieldChange = (
-          newGroupFields: PickerFirstLevelGroupFieldValue,
-        ) => {
-          onCustomTypeChange({
-            ...customTypeFieldsCheckMap,
-            [fieldId]: { type: "group", value: newGroupFields },
-          });
-        };
+        if (typeof field === "string") {
+          const checked = customTypeFieldCheckMap[field]?.value ?? false;
 
-        const groupFieldCheckMap = customTypeFieldsCheckMap[fieldId] ?? {};
+          const onCheckedChange = (newValue: boolean) => {
+            onCustomTypeChange({
+              ...customTypeFieldCheckMap,
+              [field]: { type: "checkbox", value: newValue },
+            });
+          };
 
-        return (
-          <TreeViewFirstLevelGroupField
-            key={fieldId}
-            group={field}
-            groupId={fieldId}
-            onChange={onGroupFieldChange}
-            fieldCheckMap={
-              groupFieldCheckMap.type === "group"
-                ? groupFieldCheckMap.value
-                : {}
-            }
-            customTypes={customTypes}
-          />
-        );
-      }
+          return (
+            <TreeViewCheckbox
+              key={field}
+              title={field}
+              checked={checked === true}
+              onCheckedChange={onCheckedChange}
+            />
+          );
+        }
 
-      // Content relationship field
+        const crOrGroupFieldCheckMap = customTypeFieldCheckMap[field.id] ?? {};
+
+        // Group field
+
+        if ("fields" in field) {
+          const onGroupFieldChange = (
+            newGroupFields: PickerFirstLevelGroupFieldValue,
+          ) => {
+            onCustomTypeChange({
+              ...customTypeFieldCheckMap,
+              [field.id]: { type: "group", value: newGroupFields },
+            });
+          };
+
+          return (
+            <TreeViewGroupField
+              key={field.id}
+              group={field}
+              onChange={onGroupFieldChange}
+              fieldCheckMap={
+                crOrGroupFieldCheckMap.type === "group"
+                  ? crOrGroupFieldCheckMap.value
+                  : {}
+              }
+            />
+          );
+        }
+
+        // Content relationship field
 
-      if (isContentRelationshipField(field)) {
         const onContentRelationshipFieldChange = (
           newCrFields: PickerContentRelationshipFieldValue,
         ) => {
           onCustomTypeChange({
-            ...customTypeFieldsCheckMap,
-            [fieldId]: {
-              type: "contentRelationship",
-              value: newCrFields,
-            },
+            ...customTypeFieldCheckMap,
+            [field.id]: { type: "contentRelationship", value: newCrFields },
           });
         };
 
-        const crFieldCheckMap = customTypeFieldsCheckMap[fieldId] ?? {};
-
         return (
           <TreeViewContentRelationshipField
-            key={fieldId}
+            key={field.id}
             field={field}
-            fieldId={fieldId}
             onChange={onContentRelationshipFieldChange}
             fieldCheckMap={
-              crFieldCheckMap.type === "contentRelationship"
-                ? crFieldCheckMap.value
+              crOrGroupFieldCheckMap.type === "contentRelationship"
+                ? crOrGroupFieldCheckMap.value
                 : {}
             }
-            customTypes={customTypes}
           />
         );
-      }
-
-      // Regular field
-
-      const onCheckedChange = (newValue: boolean) => {
-        onCustomTypeChange({
-          ...customTypeFieldsCheckMap,
-          [fieldId]: { type: "checkbox", value: newValue },
-        });
-      };
-
-      return (
-        <TreeViewCheckbox
-          key={fieldId}
-          title={fieldId}
-          checked={customTypeFieldsCheckMap[fieldId]?.value === true}
-          onCheckedChange={onCheckedChange}
-        />
-      );
-    },
-  );
-
-  if (renderedFields.length === 0) return null;
-
-  return (
-    <TreeViewSection
-      key={customType.id}
-      title={customType.id}
-      subtitle={getExposedFieldsLabel(
-        countPickedFields(customTypeFieldsCheckMap),
-      )}
-      badge={customType.format === "page" ? "Page type" : "Custom type"}
-    >
-      {renderedFields}
+      })}
     </TreeViewSection>
   );
 }
 
 interface TreeViewContentRelationshipFieldProps {
-  field: Link;
-  fieldId: string;
+  field: TIContentRelationshipFieldValue;
   fieldCheckMap: PickerContentRelationshipFieldValue;
   onChange: (newValue: PickerContentRelationshipFieldValue) => void;
-  customTypes: CustomType[];
 }
 
 function TreeViewContentRelationshipField(
   props: TreeViewContentRelationshipFieldProps,
 ) {
   const {
-    field,
-    fieldId,
+    field: crField,
     fieldCheckMap: crFieldsCheckMap,
     onChange: onCrFieldChange,
-    customTypes,
   } = props;
 
-  if (!field.config?.customtypes) return null;
-
-  const resolvedCustomTypes = resolveContentRelationshipCustomTypes(
-    field.config.customtypes,
-    customTypes,
-  );
-
-  if (resolvedCustomTypes.length === 0) return null;
-
   return (
     <TreeViewSection
-      title={fieldId}
+      title={crField.id}
       subtitle={getExposedFieldsLabel(countPickedFields(crFieldsCheckMap))}
     >
-      {resolvedCustomTypes.map((customType) => {
+      {crField.customtypes.map((customType) => {
         if (typeof customType === "string") return null;
 
+        const nestedCtFieldsCheckMap = crFieldsCheckMap[customType.id] ?? {};
+
         const onNestedCustomTypeChange = (
           newNestedCustomTypeFields: PickerNestedCustomTypeValue,
         ) => {
@@ -431,29 +410,51 @@ function TreeViewContentRelationshipField(
           });
         };
 
-        const nestedCtFieldsCheckMap = crFieldsCheckMap[customType.id] ?? {};
+        return (
+          <TreeViewSection
+            key={customType.id}
+            title={customType.id}
+            subtitle={getExposedFieldsLabel(
+              countPickedFields(nestedCtFieldsCheckMap),
+            )}
+            badge="Custom type"
+          >
+            {customType.fields.map((field) => {
+              if (typeof field === "string") {
+                const checked = nestedCtFieldsCheckMap[field]?.value === true;
+
+                const onCheckedChange = (newChecked: boolean) => {
+                  onNestedCustomTypeChange({
+                    ...nestedCtFieldsCheckMap,
+                    [field]: { type: "checkbox", value: newChecked },
+                  });
+                };
+
+                return (
+                  <TreeViewCheckbox
+                    key={field}
+                    title={field}
+                    checked={checked}
+                    onCheckedChange={onCheckedChange}
+                  />
+                );
+              }
 
-        const renderedFields = getCustomTypeStaticFields(customType).map(
-          ({ fieldId, field }) => {
-            // Group field
+              const groupFieldCheckMap = nestedCtFieldsCheckMap[field.id] ?? {};
 
-            if (isGroupField(field)) {
               const onGroupFieldsChange = (
                 newGroupFields: PickerLeafGroupFieldValue,
               ) => {
                 onNestedCustomTypeChange({
                   ...nestedCtFieldsCheckMap,
-                  [fieldId]: { type: "group", value: newGroupFields },
+                  [field.id]: { type: "group", value: newGroupFields },
                 });
               };
 
-              const groupFieldCheckMap = nestedCtFieldsCheckMap[fieldId] ?? {};
-
               return (
-                <TreeViewLeafGroupField
-                  key={fieldId}
+                <TreeViewContentRelationshipFieldNestedGroup
+                  key={field.id}
                   group={field}
-                  groupId={fieldId}
                   onChange={onGroupFieldsChange}
                   fieldCheckMap={
                     groupFieldCheckMap.type === "group"
@@ -462,40 +463,7 @@ function TreeViewContentRelationshipField(
                   }
                 />
               );
-            }
-
-            // Regular field
-
-            const onCheckedChange = (newChecked: boolean) => {
-              onNestedCustomTypeChange({
-                ...nestedCtFieldsCheckMap,
-                [fieldId]: { type: "checkbox", value: newChecked },
-              });
-            };
-
-            return (
-              <TreeViewCheckbox
-                key={fieldId}
-                title={fieldId}
-                checked={nestedCtFieldsCheckMap[fieldId]?.value === true}
-                onCheckedChange={onCheckedChange}
-              />
-            );
-          },
-        );
-
-        if (renderedFields.length === 0) return null;
-
-        return (
-          <TreeViewSection
-            key={customType.id}
-            title={customType.id}
-            subtitle={getExposedFieldsLabel(
-              countPickedFields(nestedCtFieldsCheckMap),
-            )}
-            badge={customType.format === "page" ? "Page type" : "Custom type"}
-          >
-            {renderedFields}
+            })}
           </TreeViewSection>
         );
       })}
@@ -503,128 +471,108 @@ function TreeViewContentRelationshipField(
   );
 }
 
-interface TreeViewLeafGroupFieldProps {
-  group: Group;
-  groupId: string;
+interface TreeViewContentRelationshipFieldGroupProps {
+  group: TICustomTypeRegularFieldValues;
   fieldCheckMap: PickerLeafGroupFieldValue;
   onChange: (newValue: PickerLeafGroupFieldValue) => void;
 }
 
-function TreeViewLeafGroupField(props: TreeViewLeafGroupFieldProps) {
+function TreeViewContentRelationshipFieldNestedGroup(
+  props: TreeViewContentRelationshipFieldGroupProps,
+) {
   const {
     group,
-    groupId,
     fieldCheckMap: groupFieldsCheckMap,
     onChange: onGroupFieldChange,
   } = props;
 
-  if (!group.config?.fields) return null;
-
-  const renderedFields = getGroupFields(group).map(({ fieldId }) => {
-    const onCheckedChange = (newChecked: boolean) => {
-      onGroupFieldChange({
-        ...groupFieldsCheckMap,
-        [fieldId]: { type: "checkbox", value: newChecked },
-      });
-    };
-
-    return (
-      <TreeViewCheckbox
-        key={fieldId}
-        title={fieldId}
-        checked={groupFieldsCheckMap[fieldId]?.value === true}
-        onCheckedChange={onCheckedChange}
-      />
-    );
-  });
-
-  if (renderedFields.length === 0) return null;
-
   return (
     <TreeViewSection
-      key={groupId}
-      title={groupId}
+      key={group.id}
+      title={group.id}
       subtitle={getExposedFieldsLabel(countPickedFields(groupFieldsCheckMap))}
       badge="Group"
     >
-      {renderedFields}
+      {group.fields.map((field) => {
+        const checked = groupFieldsCheckMap[field]?.value ?? false;
+
+        const onCheckedChange = (newChecked: boolean) => {
+          onGroupFieldChange({
+            ...groupFieldsCheckMap,
+            [field]: { type: "checkbox", value: newChecked },
+          });
+        };
+
+        return (
+          <TreeViewCheckbox
+            key={field}
+            title={field}
+            checked={checked === true}
+            onCheckedChange={onCheckedChange}
+          />
+        );
+      })}
     </TreeViewSection>
   );
 }
 
-interface TreeViewFirstLevelGroupFieldProps {
-  group: Group;
-  groupId: string;
+interface TreeViewGroupFieldProps {
+  group: TIGroupFieldValues;
   fieldCheckMap: PickerFirstLevelGroupFieldValue;
   onChange: (newValue: PickerFirstLevelGroupFieldValue) => void;
-  customTypes: CustomType[];
 }
 
-function TreeViewFirstLevelGroupField(
-  props: TreeViewFirstLevelGroupFieldProps,
-) {
+function TreeViewGroupField(props: TreeViewGroupFieldProps) {
   const {
     group,
-    groupId,
     fieldCheckMap: groupFieldsCheckMap,
     onChange: onGroupFieldChange,
-    customTypes,
   } = props;
 
-  if (!group.config?.fields) return null;
-
   return (
-    <TreeViewSection
-      key={groupId}
-      title={groupId}
-      subtitle={getExposedFieldsLabel(countPickedFields(groupFieldsCheckMap))}
-      badge="Group"
-    >
-      {getGroupFields(group).map(({ fieldId, field }) => {
-        if (isContentRelationshipField(field)) {
-          const onContentRelationshipFieldChange = (
-            newCrFields: PickerContentRelationshipFieldValue,
-          ) => {
+    <TreeViewSection key={group.id} title={group.id} badge="Group">
+      {group.fields.map((field) => {
+        if (typeof field === "string") {
+          const checked = groupFieldsCheckMap[field]?.value ?? false;
+
+          const onCheckedChange = (newChecked: boolean) => {
             onGroupFieldChange({
               ...groupFieldsCheckMap,
-              [fieldId]: {
-                type: "contentRelationship",
-                value: newCrFields,
-              },
+              [field]: { type: "checkbox", value: newChecked },
             });
           };
 
-          const crFieldCheckMap = groupFieldsCheckMap[fieldId] ?? {};
-
           return (
-            <TreeViewContentRelationshipField
-              key={fieldId}
-              field={field}
-              fieldId={fieldId}
-              fieldCheckMap={
-                crFieldCheckMap.type === "contentRelationship"
-                  ? crFieldCheckMap.value
-                  : {}
-              }
-              onChange={onContentRelationshipFieldChange}
-              customTypes={customTypes}
+            <TreeViewCheckbox
+              key={field}
+              title={field}
+              checked={checked === true}
+              onCheckedChange={onCheckedChange}
             />
           );
         }
 
-        const onCheckedChange = (newChecked: boolean) => {
+        const crFieldCheckMap = groupFieldsCheckMap[field.id] ?? {};
+
+        const onContentRelationshipFieldChange = (
+          newCrFields: PickerContentRelationshipFieldValue,
+        ) => {
           onGroupFieldChange({
             ...groupFieldsCheckMap,
-            [fieldId]: { type: "checkbox", value: newChecked },
+            [field.id]: { type: "contentRelationship", value: newCrFields },
           });
         };
 
         return (
-          <TreeViewCheckbox
-            key={fieldId}
-            title={fieldId}
-            checked={groupFieldsCheckMap[fieldId]?.value === true}
-            onCheckedChange={onCheckedChange}
+          <TreeViewContentRelationshipField
+            key={field.id}
+            field={field}
+            fieldCheckMap={
+              crFieldCheckMap.type === "contentRelationship"
+                ? crFieldCheckMap.value
+                : {}
+            }
+            onChange={onContentRelationshipFieldChange}
           />
         );
       })}
@@ -638,42 +586,120 @@ function getExposedFieldsLabel(count: number) {
 }
 
 /**
- * Gets all the existing local custom types from the store, filters and sorts
- * them.
+ * Get all the existing local custom types from the store and process them into
+ * a single array to be rendered by the picker. For this we use the same as the
+ * Link config `customtypes` structure {@link TICustomTypes}.
  */
-function useCustomTypes(): CustomType[] {
+function useCustomTypes() {
   const allCustomTypes = useSelector(selectAllCustomTypes);
-  const localCustomTypes = allCustomTypes.flatMap<CustomType>((ct) => {
+  const localCustomTypes = allCustomTypes.flatMap((ct) => {
     // In the store we have remote and local custom types, we want to show
     // the local ones, so that the user is able to create a content
     // relationship with custom types present on the user's computer (pushed
     // or not).
-    return "local" in ct ? CustomTypes.fromSM(ct.local) : [];
+    return "local" in ct ? ct.local : [];
   });
 
-  localCustomTypes.sort((a, b) => a.id.localeCompare(b.id));
+  return useMemo(() => {
+    const customTypes = localCustomTypes.flatMap<TICustomType>((customType) => {
+      const tabFields = customType.tabs.flatMap((tab) => {
+        return tab.value.flatMap((field) => {
+          if (isUidField(field)) return [];
+
+          // Check if it's a content relationship link/field
+          if (
+            field.value.type === "Link" &&
+            field.value.config?.select === "document" &&
+            field.value.config.customtypes
+          ) {
+            const resolvedFields = resolveContentRelationshipFields(
+              field.value.config.customtypes,
+              localCustomTypes,
+            );
+
+            return resolvedFields.length > 0
+              ? { id: field.key, customtypes: resolvedFields }
+              : [];
+          }
+
+          if (field.value.type === "Group" && field.value.config?.fields) {
+            return {
+              id: field.key,
+              fields: field.value.config.fields.map((field) => field.key),
+            };
+          }
 
-  return localCustomTypes;
+          return field.key;
+        });
+      });
+
+      return tabFields.length > 0
+        ? { id: customType.id, fields: tabFields }
+        : [];
+    });
+
+    customTypes.sort((a, b) => a.id.localeCompare(b.id));
+
+    return customTypes;
+  }, [localCustomTypes]);
 }
 
-function resolveContentRelationshipCustomTypes(
-  customTypes: LinkCustomtypes,
-  localCustomTypes: CustomType[],
-): CustomType[] {
-  const fields = customTypes.flatMap<CustomType>((customType) => {
-    if (typeof customType === "string") return [];
-    return localCustomTypes.find((ct) => ct.id === customType.id) ?? [];
-  });
+function resolveContentRelationshipFields(
+  customTypesArray: TICustomTypes,
+  localCustomTypes: CustomTypeSM[],
+): TICustomTypeFieldValues[] {
+  const fields = customTypesArray.flatMap<TICustomTypeFieldValues>(
+    (customType) => {
+      if (typeof customType === "string") return [];
+
+      // Didn't find a custom type with a matching id in the store
+      const matchingCustomType = localCustomTypes.find(
+        (ct) => ct.id === customType.id,
+      );
+      if (!matchingCustomType) return [];
+
+      const tabFields = matchingCustomType.tabs.flatMap((tab) => {
+        return tab.value.flatMap((field) => {
+          if (isUidField(field)) return [];
+
+          // Group inside content relationship field
+          if (field.value.type === "Group" && field.value.config?.fields) {
+            return {
+              id: field.key,
+              fields: field.value.config.fields.map((field) => field.key),
+            };
+          }
+
+          return field.key;
+        });
+      });
+
+      return tabFields.length > 0
+        ? { id: customType.id, fields: tabFields }
+        : [];
+    },
+  );
 
   return fields;
 }
 
+function isUidField(
+  field: TabFields[number],
+): field is { key: string; value: UID } {
+  // Filter out uid fields because it's a special field returned by the
+  // API and is not part of the data object in the document.
+  // We also filter by key "uid", because (as of the time of writing
+  // this), creating any field with that API id will result in it being
+  // used for metadata.
+  return field.key === "uid" && field.value.type === "UID";
+}
+
 /**
- * Converts a Link config `customtypes` ({@link LinkCustomtypes}) structure into
+ * Converts a Link config `customtypes` ({@link TICustomTypes}) structure into
  * picker fields check map ({@link PickerCustomTypes}).
  */
-function convertLinkCustomtypesToFieldCheckMap(
-  customTypes: LinkCustomtypes,
+function convertCustomTypesToFieldCheckMap(
+  customTypes: TICustomTypes,
 ): PickerCustomTypes {
   return customTypes.reduce<PickerCustomTypes>((customTypes, customType) => {
     if (typeof customType === "string") return customTypes;
@@ -685,11 +711,10 @@ function convertLinkCustomtypesToFieldCheckMap(
           customTypeFields[field] = { type: "checkbox", value: true };
         } else if ("fields" in field && field.fields !== undefined) {
           // Group field
-          customTypeFields[field.id] = createGroupFieldCheckMap(field);
+          customTypeFields[field.id] = createGroupField(field);
         } else if ("customtypes" in field && field.customtypes !== undefined) {
           // Content relationship field
-          customTypeFields[field.id] =
-            createContentRelationshipFieldCheckMap(field);
+          customTypeFields[field.id] = createNestedCustomTypeField(field);
         }
 
         return customTypeFields;
@@ -700,8 +725,8 @@ function convertLinkCustomtypesToFieldCheckMap(
   }, {});
 }
 
-function createGroupFieldCheckMap(
-  group: LinkCustomtypesGroupFieldValue,
+function createGroupField(
+  group: TIGroupFieldValues,
 ): PickerFirstLevelGroupField {
   return {
     type: "group",
@@ -712,7 +737,7 @@ function createGroupFieldCheckMap(
           fields[field] = { type: "checkbox", value: true };
         } else if ("customtypes" in field && field.customtypes !== undefined) {
           // Content relationship field
-          fields[field.id] = createContentRelationshipFieldCheckMap(field);
+          fields[field.id] = createNestedCustomTypeField(field);
         }
 
         return fields;
@@ -722,8 +747,8 @@ function createGroupFieldCheckMap(
   };
 }
 
-function createContentRelationshipFieldCheckMap(
-  field: LinkCustomtypesContentRelationshipFieldValue,
+function createNestedCustomTypeField(
+  field: TIContentRelationshipFieldValue,
 ): PickerContentRelationshipField {
   const crField: PickerContentRelationshipField = {
     type: "contentRelationship",
@@ -762,84 +787,76 @@ function createContentRelationshipFieldCheckMap(
 
 /**
  * Converts a picker fields check map structure ({@link PickerCustomTypes}) into
- * Link config `customtypes` ({@link LinkCustomtypes}) and filter out empty Custom
+ * Link config `customtypes` ({@link TICustomTypes}) and filter out empty Custom
  * types.
  */
-function convertFieldCheckMapToLinkCustomtypes(map: PickerCustomTypes) {
-  return Object.entries(map).flatMap<LinkCustomtypes[number]>(
-    ([ctId, ctFields]) => {
-      const fields = Object.entries(ctFields).flatMap<
-        | string
-        | LinkCustomtypesContentRelationshipFieldValue
-        | LinkCustomtypesGroupFieldValue
-      >(([fieldId, fieldValue]) => {
-        // First level group field
-        if (fieldValue.type === "group") {
-          const fields = Object.entries(fieldValue.value).flatMap<
-            string | LinkCustomtypesContentRelationshipFieldValue
-          >(([fieldId, fieldValue]) => {
-            if (fieldValue.type === "checkbox") {
-              return fieldValue.value ? fieldId : [];
-            }
-
-            const customTypes = createContentRelationshipLinkCustomtypes(
-              fieldValue.value,
-            );
-
-            return customTypes.length > 0
-              ? { id: fieldId, customtypes: customTypes }
-              : [];
-          });
+function convertFieldCheckMapToCustomTypes(map: PickerCustomTypes) {
+  return Object.entries(map).flatMap<TICustomType>(([ctId, ctFields]) => {
+    const fields = Object.entries(ctFields).flatMap<
+      string | TIContentRelationshipFieldValue | TIGroupFieldValues
+    >(([fieldId, fieldValue]) => {
+      if (fieldValue.type === "checkbox") {
+        return fieldValue.value ? fieldId : [];
+      }
 
-          return fields.length > 0 ? { id: fieldId, fields } : [];
-        }
+      if (fieldValue.type === "group") {
+        const fields = Object.entries(fieldValue.value).flatMap<
+          string | TIContentRelationshipFieldValue
+        >(([fieldId, fieldValue]) => {
+          if (fieldValue.type === "checkbox") {
+            return fieldValue.value ? fieldId : [];
+          }
 
-        // Content relationship field
-        if (fieldValue.type === "contentRelationship") {
-          const customTypes = createContentRelationshipLinkCustomtypes(
+          const customTypes = convertContentRelationshipFieldValueToCustomTypes(
             fieldValue.value,
           );
 
           return customTypes.length > 0
             ? { id: fieldId, customtypes: customTypes }
             : [];
-        }
+        });
 
-        // Regular field
-        return fieldValue.value ? fieldId : [];
-      });
+        return fields.length > 0 ? { id: fieldId, fields } : [];
+      }
 
-      return fields.length > 0 ? { id: ctId, fields } : [];
-    },
-  );
+      // Content relationship field
+      const customTypes = convertContentRelationshipFieldValueToCustomTypes(
+        fieldValue.value,
+      );
+
+      return customTypes.length > 0
+        ? { id: fieldId, customtypes: customTypes }
+        : [];
+    });
+
+    return fields.length > 0 ? { id: ctId, fields } : [];
+  });
 }
 
-function createContentRelationshipLinkCustomtypes(
+function convertContentRelationshipFieldValueToCustomTypes(
   value: PickerContentRelationshipFieldValue,
-): LinkCustomtypesContentRelationshipFieldValue["customtypes"] {
-  return Object.entries(value).flatMap(
+): TICustomTypeFieldValues[] {
+  return Object.entries(value).flatMap<TICustomTypeFieldValues>(
     ([nestedCustomTypeId, nestedCustomTypeFields]) => {
-      const fields = Object.entries(nestedCustomTypeFields).flatMap(
-        ([nestedFieldId, nestedFieldValue]) => {
-          // Leaf group field
-          if (nestedFieldValue.type === "group") {
-            const nestedGroupFields = Object.entries(
-              nestedFieldValue.value,
-            ).flatMap<string>(([fieldId, fieldValue]) => {
-              // Regular field
-              return fieldValue.type === "checkbox" && fieldValue.value
-                ? fieldId
-                : [];
-            });
-
-            return nestedGroupFields.length > 0
-              ? { id: nestedFieldId, fields: nestedGroupFields }
+      const fields = Object.entries(nestedCustomTypeFields).flatMap<
+        string | TICustomTypeRegularFieldValues
+      >(([nestedFieldId, nestedFieldValue]) => {
+        if (nestedFieldValue.type === "group") {
+          const nestedGroupFields = Object.entries(
+            nestedFieldValue.value,
+          ).flatMap<string>(([fieldId, fieldValue]) => {
+            return fieldValue.type === "checkbox" && fieldValue.value
+              ? fieldId
               : [];
-          }
+          });
 
-          return nestedFieldValue.value ? nestedFieldId : [];
-        },
-      );
+          return nestedGroupFields.length > 0
+            ? { id: nestedFieldId, fields: nestedGroupFields }
+            : [];
+        }
+
+        return nestedFieldValue.value ? nestedFieldId : [];
+      });
 
       return fields.length > 0 ? { id: nestedCustomTypeId, fields } : [];
     },
@@ -859,53 +876,12 @@ function countPickedFields(
   if (!fields) return 0;
   return Object.values(fields).reduce<number>((count, value) => {
     if (!isValidObject(value)) return count;
-    if (isCheckboxValue(value)) return count + (value.value ? 1 : 0);
+    if (isCheckboxField(value)) return count + (value.value ? 1 : 0);
     return count + countPickedFields(value);
   }, 0);
 }
-function isCheckboxValue(value: unknown): value is PickerCheckboxField {
+
+function isCheckboxField(value: unknown): value is PickerCheckboxField {
   if (!isValidObject(value)) return false;
   return "type" in value && value.type === "checkbox";
 }
-
-function isGroupField(field: NestableWidget | Group): field is Group {
-  return field.type === "Group";
-}
-
-function isContentRelationshipField(
-  field: NestableWidget | Group,
-): field is Link {
-  return (
-    field.type === "Link" &&
-    field.config?.select === "document" &&
-    field.config?.customtypes !== undefined
-  );
-}
-
-function getCustomTypeStaticFields(customType: CustomType) {
-  return Object.values(customType.json).flatMap((tabFields) => {
-    return Object.entries(tabFields).flatMap(([fieldId, field]) => {
-      if (
-        field.type !== "Slices" &&
-        field.type !== "Choice" &&
-        // Filter out uid fields because it's a special field returned by the
-        // API and is not part of the data object in the document.
-        // We also filter by key "uid", because (as of the time of writing
-        // this), creating any field with that API id will result in it being
-        // used for metadata.
-        (field.type !== "UID" || fieldId !== "uid")
-      ) {
-        return { fieldId, field: field as NestableWidget | Group };
-      }
-
-      return [];
-    });
-  });
-}
-
-function getGroupFields(group: Group) {
-  if (!group.config?.fields) return [];
-  return Object.entries(group.config.fields).map(([fieldId, field]) => {
-    return { fieldId, field: field as NestableWidget };
-  });
-}