@firecms/collection_editor 3.0.0-alpha.35 → 3.0.0-alpha.36

package/dist/types/collection_editor_controller.d.ts

@@ -1,5 +1,5 @@
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { EntityCollection, Property } from "@firecms/core";
+import { Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 /**
  * Controller to open the collection editor dialog.
@@ -10,7 +10,7 @@ export interface CollectionEditorController {
         path?: string;
         fullPath?: string;
         parentPathSegments: string[];
-        parentCollection?: EntityCollection;
+        parentCollection?: PersistedCollection;
     }) => void;
     createCollection: (props: {
         initialValues?: {

package/dist/types/persisted_collection.d.ts

@@ -1,6 +1,5 @@
-import { EntityCollection, Properties, User } from "@firecms/core";
-export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User> = Omit<EntityCollection<M, UserType>, "properties" | "subcollections"> & {
-    properties: Properties<M>;
+import { EntityCollection, User } from "@firecms/core";
+export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User> = Omit<EntityCollection<M, UserType>, "subcollections"> & {
     ownerId: string;
     subcollections?: PersistedCollection<any, any>[];
     editable?: boolean;

package/dist/ui/collection_editor/CollectionEditorDialog.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { CMSType, EntityCollection, User } from "@firecms/core";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionInference } from "../../types/collection_inference";
+import { PersistedCollection } from "../../types/persisted_collection";
 export interface CollectionEditorDialogProps {
     open: boolean;
     isNewCollection: boolean;
@@ -26,7 +27,7 @@ export interface CollectionEditorDialogProps {
     pathSuggestions?: (path?: string) => Promise<string[]>;
     getUser: (uid: string) => User | null;
     getData?: (path: string) => Promise<object[]>;
-    parentCollection?: EntityCollection;
+    parentCollection?: PersistedCollection;
 }
 export declare function CollectionEditorDialog(props: CollectionEditorDialogProps): import("react/jsx-runtime").JSX.Element;
 export declare function CollectionEditorDialogInternal<M extends {

package/dist/ui/collection_editor/CollectionPropertiesEditorForm.d.ts

@@ -13,8 +13,8 @@ type CollectionEditorFormProps = {
     getUser: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
     doCollectionInference: (collection: PersistedCollection) => Promise<EntityCollection | null> | undefined;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };
-export declare function CollectionPropertiesEditorForm({ showErrors, isNewCollection, propertyErrorsRef, onPropertyError, setDirty, reservedGroups, extraIcon, getUser, getData, doCollectionInference, customFields, collectionEditable }: CollectionEditorFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollectionPropertiesEditorForm({ showErrors, isNewCollection, propertyErrorsRef, onPropertyError, setDirty, reservedGroups, extraIcon, getUser, getData, doCollectionInference, propertyConfigs, collectionEditable }: CollectionEditorFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/collection_editor/PropertyEditView.d.ts

@@ -29,7 +29,7 @@ export type PropertyFormProps = {
     allowDataInference: boolean;
     getData?: () => Promise<object[]>;
     getHelpers?: (formikProps: FormikProps<PropertyWithId>) => void;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };
 export declare const PropertyForm: React.NamedExoticComponent<PropertyFormProps>;

package/dist/ui/collection_editor/PropertyTree.d.ts

@@ -2,7 +2,7 @@ import { AdditionalFieldDelegate, CMSType, PropertiesOrBuilders, PropertyOrBuild
 import { DraggableProvided } from "@hello-pangea/dnd";
 export declare function PropertyTree<M extends {
     [Key: string]: CMSType;
-}>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable }: {
+}>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable, }: {
     namespace?: string;
     selectedPropertyKey?: string;
     onPropertyClick?: (propertyKey: string, namespace?: string) => void;
@@ -16,7 +16,7 @@ export declare function PropertyTree<M extends {
     inferredPropertyKeys?: string[];
     collectionEditable: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
+export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable, }: {
     propertyKey: string;
     namespace?: string;
     propertyOrBuilder: PropertyOrBuilder;

package/dist/ui/collection_editor/import/CollectionEditorImportMapping.d.ts

@@ -1,7 +1,7 @@
 import { ImportConfig } from "@firecms/data_import";
 import { PropertyConfig } from "@firecms/core";
-export declare function CollectionEditorImportMapping({ importConfig, customFields, collectionEditable }: {
+export declare function CollectionEditorImportMapping({ importConfig, propertyConfigs, collectionEditable }: {
     importConfig: ImportConfig;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/properties/BlockPropertyField.d.ts

@@ -1,8 +1,8 @@
 import { PropertyConfig } from "@firecms/core";
-export declare function BlockPropertyField({ disabled, getData, allowDataInference, customFields, collectionEditable }: {
+export declare function BlockPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/properties/MapPropertyField.d.ts

@@ -1,8 +1,8 @@
 import { PropertyConfig } from "@firecms/core";
-export declare function MapPropertyField({ disabled, getData, allowDataInference, customFields, collectionEditable }: {
+export declare function MapPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/properties/RepeatPropertyField.d.ts

@@ -1,10 +1,10 @@
 import { PropertyConfig } from "@firecms/core";
-export declare function RepeatPropertyField({ showErrors, existing, disabled, getData, allowDataInference, customFields, collectionEditable }: {
+export declare function RepeatPropertyField({ showErrors, existing, disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
     showErrors: boolean;
     existing: boolean;
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/utils/update_property_for_widget.d.ts

@@ -1,2 +1,2 @@
 import { Property, PropertyConfig } from "@firecms/core";
-export declare function updatePropertyFromWidget(propertyData: any, selectedWidgetId: string | undefined, customFields: Record<string, PropertyConfig>): Property;
+export declare function updatePropertyFromWidget(propertyData: any, selectedWidgetId: string | undefined, propertyConfigs: Record<string, PropertyConfig>): Property;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/collection_editor",
-  "version": "3.0.0-alpha.35",
+  "version": "3.0.0-alpha.36",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -14,8 +14,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/data_import": "^3.0.0-alpha.35",
-    "@firecms/schema_inference": "^3.0.0-alpha.35",
+    "@firecms/data_import": "^3.0.0-alpha.36",
+    "@firecms/schema_inference": "^3.0.0-alpha.36",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.0"
   },
@@ -78,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f0f3ef616f13176166c193f98b8198f7fa53a1d2"
+  "gitHead": "80d437634caccc4400fa111504186eb13197bac1"
 }

package/src/ConfigControllerProvider.tsx

@@ -73,7 +73,7 @@ export const ConfigControllerProvider = React.memo(
         const navigation = useNavigationContext();
         const navigate = useNavigate();
         const snackbarController = useSnackbarController();
-        const { fields: customFields } = useFireCMSContext();
+        const { propertyConfigs } = useFireCMSContext();
 
         const {
             collections
@@ -91,7 +91,7 @@ export const ConfigControllerProvider = React.memo(
 
         const [currentDialog, setCurrentDialog] = React.useState<{
             isNewCollection: boolean,
-            parentCollection?: EntityCollection,
+            parentCollection?: PersistedCollection,
             editedCollectionPath?: string,
             fullPath?: string,
             parentPathSegments: string[],
@@ -107,7 +107,7 @@ export const ConfigControllerProvider = React.memo(
             propertyKey?: string,
             property?: Property,
             namespace?: string,
-            parentCollection?: EntityCollection,
+            parentCollection?: PersistedCollection,
             currentPropertiesOrder?: string[],
             editedCollectionPath: string,
             fullPath?: string,
@@ -130,7 +130,7 @@ export const ConfigControllerProvider = React.memo(
             path?: string,
             fullPath?: string,
             parentPathSegments: string[],
-            parentCollection?: EntityCollection
+            parentCollection?: PersistedCollection
         }) => {
             setCurrentDialog({
                 editedCollectionPath: path,
@@ -183,7 +183,7 @@ export const ConfigControllerProvider = React.memo(
                                                         redirect
                                                     }: {
             parentPathSegments: string[],
-            parentCollection?: EntityCollection
+            parentCollection?: PersistedCollection
             initialValues?: {
                 group?: string,
                 path?: string,
@@ -317,7 +317,7 @@ export const ConfigControllerProvider = React.memo(
                         forceShowErrors={false}
                         existingPropertyKeys={[]}
                         allowDataInference={true}
-                        customFields={customFields}
+                        propertyConfigs={propertyConfigs}
                         property={currentPropertyDialog?.property}
                         propertyKey={currentPropertyDialog?.propertyKey}/>
 

package/src/types/collection_editor_controller.tsx

@@ -12,7 +12,7 @@ export interface CollectionEditorController {
         path?: string,
         fullPath?: string,
         parentPathSegments: string[],
-        parentCollection?: EntityCollection
+        parentCollection?: PersistedCollection
     }) => void;
 
     createCollection: (props: {

package/src/types/persisted_collection.ts

@@ -1,8 +1,8 @@
 import { EntityCollection, Properties, User } from "@firecms/core";
 
 export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User>
-    = Omit<EntityCollection<M, UserType>, "properties" | "subcollections"> & {
-    properties: Properties<M>;
+    = Omit<EntityCollection<M, UserType>, "subcollections"> & {
+    // properties: Properties<M>;
     ownerId: string;
     subcollections?: PersistedCollection<any, any>[];
     editable?: boolean;

package/src/ui/EditorCollectionAction.tsx

@@ -75,7 +75,7 @@ export function EditorCollectionAction({
             color={"primary"}
             disabled={!canEditCollection}
             onClick={canEditCollection
-                ? () => collectionEditorController?.editCollection({ path: collection.path, fullPath, parentPathSegments, parentCollection })
+                ? () => collectionEditorController?.editCollection({ path: collection.path, fullPath, parentPathSegments, parentCollection: parentCollection as PersistedCollection })
                 : undefined}>
             <SettingsIcon/>
         </IconButton>

package/src/ui/RootCollectionSuggestions.tsx

@@ -21,7 +21,7 @@ export function RootCollectionSuggestions() {
         in={showSuggestions}>
 
         <div
-            className={"flex flex-col gap-1 p-2"}>
+            className={"flex flex-col gap-1 p-2 my-4"}>
 
             <Typography variant={"body2"} color={"secondary"}>
                 Create a collection from your data:

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -15,8 +15,15 @@ import {
     EntityCollection,
     ErrorView,
     IconButton,
+    isPropertyBuilder,
     LoadingButton,
+    MapProperty,
+    mergeDeep,
     Properties,
+    PropertiesOrBuilders,
+    Property,
+    PropertyConfig,
+    PropertyOrBuilder,
     removeUndefined,
     Tab,
     Tabs,
@@ -32,7 +39,6 @@ import { YupSchema } from "./CollectionYupValidation";
 import { CollectionDetailsForm } from "./CollectionDetailsForm";
 import { CollectionPropertiesEditorForm } from "./CollectionPropertiesEditorForm";
 import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
-import { PersistedCollection } from "../../types/persisted_collection";
 import { SubcollectionsEditTab } from "./SubcollectionsEditTab";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionEditorWelcomeView } from "./CollectionEditorWelcomeView";
@@ -42,6 +48,7 @@ import { buildEntityPropertiesFromData } from "@firecms/schema_inference";
 import { CollectionEditorImportMapping } from "./import/CollectionEditorImportMapping";
 import { CollectionEditorImportDataPreview } from "./import/CollectionEditorImportDataPreview";
 import { cleanPropertiesFromImport } from "./import/clean_import_data";
+import { PersistedCollection } from "../../types/persisted_collection";
 
 export interface CollectionEditorDialogProps {
     open: boolean;
@@ -67,7 +74,7 @@ export interface CollectionEditorDialogProps {
     pathSuggestions?: (path?: string) => Promise<string[]>;
     getUser: (uid: string) => User | null;
     getData?: (path: string) => Promise<object[]>;
-    parentCollection?: EntityCollection;
+    parentCollection?: PersistedCollection;
 }
 
 export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
@@ -150,7 +157,7 @@ export function CollectionEditorDialogInternal<M extends {
    }
 ) {
 
-    const { fields: customFields } = useFireCMSContext();
+    const { propertyConfigs } = useFireCMSContext();
     const navigation = useNavigationContext();
     const {
         topLevelNavigation,
@@ -226,11 +233,11 @@ export function CollectionEditorDialogInternal<M extends {
             });
     };
 
-    const initialValues: PersistedCollection<M> = collection ?? {
+    const initialValues: PersistedCollection<M> = collection ? applyPropertyConfigs(collection, propertyConfigs) : {
         path: initialValuesProp?.path ?? "",
         name: initialValuesProp?.name ?? "",
         group: initialValuesProp?.group ?? "",
-        properties: {} as Properties<M>,
+        properties: {} as PropertiesOrBuilders<M>,
         propertiesOrder: [],
         icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
         ownerId: authController.user?.uid ?? ""
@@ -285,7 +292,7 @@ export function CollectionEditorDialogInternal<M extends {
             };
 
             if (Object.keys(inferredCollection.properties ?? {}).length > 0) {
-                values.properties = inferredCollection.properties as Properties<M>;
+                values.properties = inferredCollection.properties as PropertiesOrBuilders<M>;
                 values.propertiesOrder = inferredCollection.propertiesOrder as Extract<keyof M, string>[];
             }
 
@@ -300,7 +307,7 @@ export function CollectionEditorDialogInternal<M extends {
                 values
             });
             return values;
-        } catch (e:any) {
+        } catch (e: any) {
             console.error(e);
             snackbarController.open({
                 type: "error",
@@ -399,11 +406,6 @@ export function CollectionEditorDialogInternal<M extends {
                   submitCount
               }) => {
 
-                console.debug({
-                    valuesPath: values.path,
-                    editedCollectionPath,
-                    fullPath
-                })
                 const path = values.path ?? editedCollectionPath;
                 const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
                 const resolvedPath = navigation.resolveAliasesFrom(updatedFullPath);
@@ -493,7 +495,7 @@ export function CollectionEditorDialogInternal<M extends {
                             {currentView === "import_data_mapping" && importConfig &&
                                 <CollectionEditorImportMapping importConfig={importConfig}
                                                                collectionEditable={collectionEditable}
-                                                               customFields={customFields}/>}
+                                                               propertyConfigs={propertyConfigs}/>}
 
                             {currentView === "import_data_preview" && importConfig &&
                                 <CollectionEditorImportDataPreview importConfig={importConfig}
@@ -543,7 +545,7 @@ export function CollectionEditorDialogInternal<M extends {
                                     getUser={getUser}
                                     getData={getDataWithPath}
                                     doCollectionInference={doCollectionInference}
-                                    customFields={customFields}
+                                    propertyConfigs={propertyConfigs}
                                     collectionEditable={collectionEditable}
                                     extraIcon={extraView?.icon &&
                                         <IconButton
@@ -656,3 +658,39 @@ export function CollectionEditorDialogInternal<M extends {
     </DialogContent>
 
 }
+
+function applyPropertyConfigs<M extends Record<string, any> = any>(collection: PersistedCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): PersistedCollection<M> {
+    const { properties, ...rest } = collection;
+    const propertiesResult: PropertiesOrBuilders<any> = {};
+    Object.keys(properties).forEach((key) => {
+        propertiesResult[key] = applyPropertiesConfig(properties[key] as PropertyOrBuilder, propertyConfigs);
+    });
+
+    return { ...rest, properties: propertiesResult };
+}
+
+function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Record<string, PropertyConfig<any>>) {
+    let internalProperty = property;
+    if (propertyConfigs && typeof internalProperty === "object" && internalProperty.propertyConfig) {
+        const propertyConfig = propertyConfigs[internalProperty.propertyConfig];
+        if (propertyConfig && isPropertyBuilder(propertyConfig.property)) {
+            internalProperty = propertyConfig.property;
+        } else {
+
+            if (propertyConfig) {
+                internalProperty = mergeDeep(propertyConfig.property, internalProperty);
+            }
+
+            if (!isPropertyBuilder(internalProperty) && internalProperty.dataType === "map" && internalProperty.properties) {
+                const properties: Record<string, PropertyOrBuilder> = {};
+                Object.keys(internalProperty.properties).forEach((key) => {
+                    properties[key] = applyPropertiesConfig(((internalProperty as MapProperty).properties as Properties)[key] as Property, propertyConfigs);
+                });
+                internalProperty = { ...internalProperty, properties };
+            }
+
+        }
+    }
+    return internalProperty;
+
+}

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -44,7 +44,7 @@ type CollectionEditorFormProps = {
     getUser: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
     doCollectionInference: (collection: PersistedCollection) => Promise<EntityCollection | null> | undefined;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };
 
@@ -59,7 +59,7 @@ export function CollectionPropertiesEditorForm({
                                                    getUser,
                                                    getData,
                                                    doCollectionInference,
-                                                   customFields,
+                                                   propertyConfigs,
                                                    collectionEditable
                                                }: CollectionEditorFormProps) {
 
@@ -126,7 +126,7 @@ export function CollectionPropertiesEditorForm({
                     if (newPropertyKeys.length === 0) {
                         snackbarController.open({
                             type: "info",
-                            message: "No new properties found"
+                            message: "No new properties found in existing data"
                         });
                         return;
                     }
@@ -406,7 +406,7 @@ export function CollectionPropertiesEditorForm({
                                 forceShowErrors={showErrors}
                                 initialErrors={initialErrors}
                                 getData={getData}
-                                customFields={customFields}
+                                propertyConfigs={propertyConfigs}
                                 collectionEditable={collectionEditable}
                             />}
 
@@ -441,7 +441,7 @@ export function CollectionPropertiesEditorForm({
                 forceShowErrors={showErrors}
                 initialErrors={initialErrors}
                 getData={getData}
-                customFields={customFields}
+                propertyConfigs={propertyConfigs}
                 collectionEditable={collectionEditable}
                 onOkClicked={asDialog
                     ? closePropertyDialog
@@ -466,7 +466,7 @@ export function CollectionPropertiesEditorForm({
                 onPropertyChanged={onPropertyCreated}
                 getData={getData}
                 allowDataInference={!isNewCollection}
-                customFields={customFields}
+                propertyConfigs={propertyConfigs}
                 collectionEditable={collectionEditable}
                 existingPropertyKeys={values.propertiesOrder as string[]}/>
 

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -73,7 +73,7 @@ export type PropertyFormProps = {
     allowDataInference: boolean;
     getData?: () => Promise<object[]>;
     getHelpers?: (formikProps: FormikProps<PropertyWithId>) => void;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };
 
@@ -97,7 +97,7 @@ export const PropertyForm = React.memo(
                               allowDataInference,
                               getHelpers,
                               getData,
-                              customFields,
+                              propertyConfigs,
                               collectionEditable
                           }: PropertyFormProps) {
 
@@ -184,7 +184,7 @@ export const PropertyForm = React.memo(
                     disabled={disabled}
                     getData={getData}
                     allowDataInference={allowDataInference}
-                    customFields={customFields}
+                    propertyConfigs={propertyConfigs}
                     collectionEditable={collectionEditable}
                     {...props}/>;
 
@@ -277,7 +277,7 @@ function PropertyEditView({
                               existingPropertyKeys,
                               getData,
                               allowDataInference,
-                              customFields,
+                              propertyConfigs,
                               collectionEditable
                           }: {
     includeIdAndTitle?: boolean;
@@ -294,7 +294,7 @@ function PropertyEditView({
     existingPropertyKeys?: string[];
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 } & FormikProps<PropertyWithId>) {
 
@@ -302,7 +302,7 @@ function PropertyEditView({
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [selectedFieldConfigId, setSelectedFieldConfigId] = useState<string | undefined>(values?.dataType ? getFieldId(values) : undefined);
 
-    const allSupportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).concat(Object.entries(customFields));
+    const allSupportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).concat(Object.entries(propertyConfigs));
 
     const displayedWidgets = inArray
         ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
@@ -351,7 +351,7 @@ function PropertyEditView({
 
     const onWidgetSelectChanged = (newSelectedWidgetId: FieldConfigId) => {
         setSelectedFieldConfigId(newSelectedWidgetId);
-        setValues(updatePropertyFromWidget(values, newSelectedWidgetId, customFields));
+        setValues(updatePropertyFromWidget(values, newSelectedWidgetId, propertyConfigs));
         // Ugly hack to autofocus the name field
         setTimeout(() => {
             nameFieldRef.current?.focus();
@@ -407,12 +407,12 @@ function PropertyEditView({
         childComponent =
             <MapPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
                               collectionEditable={collectionEditable}
-                              customFields={customFields}/>;
+                              propertyConfigs={propertyConfigs}/>;
     } else if (selectedFieldConfigId === "block") {
         childComponent =
             <BlockPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
                                 collectionEditable={collectionEditable}
-                                customFields={customFields}/>;
+                                propertyConfigs={propertyConfigs}/>;
     } else if (selectedFieldConfigId === "reference") {
         childComponent =
             <ReferencePropertyField showErrors={showErrors}
@@ -435,7 +435,7 @@ function PropertyEditView({
                                  allowDataInference={allowDataInference}
                                  disabled={disabled}
                                  collectionEditable={collectionEditable}
-                                 customFields={customFields}/>;
+                                 propertyConfigs={propertyConfigs}/>;
     } else if (selectedFieldConfigId === "key_value") {
         childComponent =
             <KeyValuePropertyField disabled={disabled}/>;
@@ -470,9 +470,9 @@ function PropertyEditView({
                                     widget</em>;
                             }
                             const key = value as FieldConfigId;
-                            const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? customFields[key];
+                            const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
                             const baseProperty = propertyConfig.property;
-                            const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, customFields) : undefined;
+                            const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
                             const optionDisabled = isPropertyBuilder(baseProperty) || (existing && baseProperty.dataType !== values?.dataType);
                             const computedFieldConfig = baseFieldConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
                             return <div

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -34,9 +34,9 @@ export function PropertyFieldPreview({
     onClick?: () => void
 }) {
 
-    const { fields } = useFireCMSContext();
+    const { propertyConfigs } = useFireCMSContext();
 
-    const propertyConfig = getFieldConfig(property, fields);
+    const propertyConfig = getFieldConfig(property, propertyConfigs);
     const disabled = !editableProperty(property);
 
     const borderColorClass = hasError
@@ -116,9 +116,9 @@ export function NonEditablePropertyPreview({
     property?: PropertyOrBuilder
 }) {
 
-    const { fields } = useFireCMSContext();
+    const { propertyConfigs } = useFireCMSContext();
 
-    const propertyConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, fields) : undefined;
+    const propertyConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, propertyConfigs) : undefined;
 
     return (
         <div

package/src/ui/collection_editor/PropertyTree.tsx

@@ -33,7 +33,7 @@ export function PropertyTree<M extends {
        onPropertyRemove,
        className,
        inferredPropertyKeys,
-       collectionEditable
+       collectionEditable,
    }: {
     namespace?: string;
     selectedPropertyKey?: string;
@@ -137,7 +137,7 @@ export function PropertyTreeEntry({
                                       onPropertyMove,
                                       onPropertyRemove,
                                       inferredPropertyKeys,
-                                      collectionEditable
+                                      collectionEditable,
                                   }: {
     propertyKey: string;
     namespace?: string;
@@ -156,6 +156,7 @@ export function PropertyTreeEntry({
     const isPropertyInferred = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
 
     const fullId = getFullId(propertyKey, namespace);
+
     let subtree;
     if (typeof propertyOrBuilder === "object") {
         const property = propertyOrBuilder;