@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/components/field_configs.tsx

@@ -32,7 +32,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#2d7ff9",
         property: {
             type: "string",
-            Field: TextFieldBinding
+            ui: { Field: TextFieldBinding }
         }
     },
     multiline: {
@@ -43,8 +43,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#2d7ff9",
         property: {
             type: "string",
-            multiline: true,
-            Field: TextFieldBinding
+            ui: { multiline: true, Field: TextFieldBinding }
         }
     },
     markdown: {
@@ -55,8 +54,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#2d7ff9",
         property: {
             type: "string",
-            markdown: true,
-            Field: MarkdownEditorFieldBinding
+            ui: { markdown: true, Field: MarkdownEditorFieldBinding }
         }
     },
     url: {
@@ -67,8 +65,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#154fb3",
         property: {
             type: "string",
-            url: true,
-            Field: TextFieldBinding
+            ui: { url: true, Field: TextFieldBinding }
         }
     },
     email: {
@@ -80,7 +77,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "string",
             email: true,
-            Field: TextFieldBinding
+            ui: { Field: TextFieldBinding }
         }
     },
     switch: {
@@ -91,7 +88,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#20d9d2",
         property: {
             type: "boolean",
-            Field: SwitchFieldBinding
+            ui: { Field: SwitchFieldBinding }
         }
     },
     select: {
@@ -103,7 +100,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "string",
             enum: [],
-            Field: SelectFieldBinding
+            ui: { Field: SelectFieldBinding }
         }
     },
     multi_select: {
@@ -118,7 +115,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
                 type: "string",
                 enum: []
             },
-            Field: MultiSelectFieldBinding
+            ui: { Field: MultiSelectFieldBinding }
         }
     },
     user_select: {
@@ -128,7 +125,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         Icon: UserIcon,
         property: {
             type: "string",
-            Field: UserSelectFieldBinding
+            ui: { Field: UserSelectFieldBinding }
         }
     },
     number_input: {
@@ -139,7 +136,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#bec920",
         property: {
             type: "number",
-            Field: TextFieldBinding
+            ui: { Field: TextFieldBinding }
         }
     },
     number_select: {
@@ -151,7 +148,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "number",
             enum: [],
-            Field: SelectFieldBinding
+            ui: { Field: SelectFieldBinding }
         }
     },
     multi_number_select: {
@@ -166,7 +163,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
                 type: "number",
                 enum: []
             },
-            Field: MultiSelectFieldBinding
+            ui: { Field: MultiSelectFieldBinding }
         }
     },
     file_upload: {
@@ -180,7 +177,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
             storage: {
                 storagePath: "{path}"
             },
-            Field: StorageUploadFieldBinding
+            ui: { Field: StorageUploadFieldBinding }
         }
     },
     multi_file_upload: {
@@ -197,7 +194,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
                     storagePath: "{path}"
                 }
             },
-            Field: StorageUploadFieldBinding
+            ui: { Field: StorageUploadFieldBinding }
         }
     },
     reference_as_string: {
@@ -208,7 +205,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#154fb3",
         property: {
             type: "string",
-            Field: ReferenceAsStringFieldBinding
+            ui: { Field: ReferenceAsStringFieldBinding }
         }
     },
     reference: {
@@ -219,7 +216,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#ff0042",
         property: {
             type: "reference",
-            Field: ReferenceFieldBinding
+            ui: { Field: ReferenceFieldBinding }
         }
     },
     multi_references: {
@@ -233,7 +230,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
             of: {
                 type: "reference"
             },
-            Field: ArrayOfReferencesFieldBinding
+            ui: { Field: ArrayOfReferencesFieldBinding }
         }
     },
     relation: {
@@ -245,7 +242,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             relationName: "",
             type: "relation",
-            Field: RelationFieldBinding
+            ui: { Field: RelationFieldBinding }
         }
     },
     date_time: {
@@ -256,7 +253,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#8b46ff",
         property: {
             type: "date",
-            Field: DateTimeFieldBinding
+            ui: { Field: DateTimeFieldBinding }
         }
     },
     group: {
@@ -268,7 +265,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "map",
             properties: {},
-            Field: MapFieldBinding
+            ui: { Field: MapFieldBinding }
         }
     },
     key_value: {
@@ -280,7 +277,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "map",
             keyValue: true,
-            Field: KeyValueFieldBinding
+            ui: { Field: KeyValueFieldBinding }
         }
     },
     repeat: {
@@ -294,7 +291,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
             of: {
                 type: "string"
             },
-            Field: RepeatFieldBinding
+            ui: { Field: RepeatFieldBinding }
         }
     },
     custom_array: {
@@ -305,7 +302,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#ff9408",
         property: {
             type: "array",
-            Field: ArrayCustomShapedFieldBinding
+            ui: { Field: ArrayCustomShapedFieldBinding }
         }
     },
     block: {
@@ -319,7 +316,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
             oneOf: {
                 properties: {}
             },
-            Field: BlockFieldBinding
+            ui: { Field: BlockFieldBinding }
         }
     }
 };
@@ -347,13 +344,13 @@ export function getFieldConfig(property: Property, propertyConfigs: Record<strin
 
 export function getDefaultFieldId(property: Property) {
     if (property.type === "string") {
-        if (property.multiline) {
-            return "multiline";
-        } else if (property.markdown) {
+        if (property.ui?.markdown) {
             return "markdown";
+        } else if (property.ui?.multiline) {
+            return "multiline";
         } else if (property.storage) {
             return "file_upload";
-        } else if (property.url) {
+        } else if (property.ui?.url) {
             return "url";
         } else if (property.email) {
             return "email";
@@ -361,7 +358,7 @@ export function getDefaultFieldId(property: Property) {
             return "select";
         } else if (property.userSelect) {
             return "user_select";
-        } else if (property.reference) {
+        } else if ((property as any).reference) {
             return "reference_as_string";
         } else {
             return "text_field";

package/src/components/history/EntityHistoryView.tsx

@@ -80,8 +80,19 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
     async function doRevert(historyId: string) {
         setIsReverting(true);
         try {
-            await revert(historyId);
+            const revertedValues = await revert(historyId);
             setRevertHistoryId(undefined);
+
+            // Reset the form with the reverted values so the UI updates
+            // immediately without requiring a page refresh.
+            if (formContext?.formex?.resetForm && revertedValues) {
+                formContext.formex.resetForm({
+                    values: revertedValues as M,
+                    submitCount: 0,
+                    touched: {}
+                });
+            }
+
             snackbarController.open({
                 message: "Reverted to selected version",
                 type: "info"

package/src/editor/editor.tsx

@@ -252,7 +252,7 @@ view }), [state, view])}>
         <div style={{ display: isMarkdownMode ? "none" : "block" }}>
           <div
             ref={editorRef}
-            className={cls("relative prose dark:prose-invert", proseClass, "prose-headings:font-title prose-headings:font-normal prose-strong:font-semibold prose-code:font-normal prose-blockquote:font-normal prose-a:font-normal font-default focus:outline-none max-w-full p-12")}
+            className={cls("relative prose dark:prose-invert", proseClass, "prose-headings:font-title prose-headings:font-normal prose-strong:font-semibold prose-code:font-normal prose-blockquote:font-normal prose-a:font-normal font-default focus:outline-none max-w-full px-12 py-4")}
           />
 
           {view && (
@@ -290,7 +290,7 @@ view }), [state, view])}>
             onChange={handleMarkdownChange}
             onBlur={handleMarkdownBlur}
             className={cls(
-              "w-full h-full min-h-[200px] p-12 bg-transparent resize-none font-mono focus:ring-0",
+              "w-full h-full min-h-[200px] px-12 py-4 bg-transparent resize-none font-mono focus:ring-0",
               proseClass
             )}
             style={{

package/src/form/EntityForm.tsx

@@ -510,11 +510,12 @@ export function EntityForm<M extends Record<string, unknown>>({
     }, [formex.version, collection, entityId, path]);
 
     const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
-    const parentCollectionIds = collectionRegistryController.getParentCollectionIds(path);
+    const parentCollectionSlugs = collectionRegistryController.getParentCollectionSlugs(path);
+    const parentEntityIds = collectionRegistryController.getParentEntityIds(path);
 
     const formActionProps: PluginFormActionProps = {
         entityId,
-        parentCollectionIds,
+        parentCollectionSlugs, parentEntityIds,
         path: path,
         status,
         collection: collection as EntityCollection,
@@ -605,10 +606,10 @@ export function EntityForm<M extends Record<string, unknown>>({
                         const isNew = status === "new" || status === "copy";
                         const isStringOrNumber = property.type === "string" || property.type === "number";
                         const isIdAndAuto = isStringOrNumber && "isId" in property && typeof property.isId === "string" && property.isId !== "manual";
-                        const disabled = disabledProp || (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled) || (!isNew && "isId" in property && Boolean(property.isId)) || (isNew && isIdAndAuto);
+                        const disabled = disabledProp || (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.ui?.disabled) || (!isNew && "isId" in property && Boolean(property.isId)) || (isNew && isIdAndAuto);
                         const hidden = isHidden(property);
                         if (hidden) return null;
-                        const widthPercentage = property.widthPercentage ?? 100;
+                        const widthPercentage = property.ui?.widthPercentage ?? 100;
                         const cmsFormFieldProps: PropertyFieldBindingProps<M> = {
                             propertyKey: key,
                             disabled,

package/src/form/PropertyFieldBinding.tsx

@@ -1,9 +1,11 @@
 import type { EntityCollection } from "@rebasepro/types";
 import type { FieldProps, PropertyFieldBindingProps } from "../types/fields";
 import type { RebasePlugin, PluginFieldBuilderParams, Property } from "@rebasepro/types";
-import React, { ComponentType, ReactElement, useCallback, useRef } from "react";
+import React, { ComponentType, ReactElement, Suspense, useCallback, useRef } from "react";
 import { deepEqual as equal } from "fast-equals"
 
+import { resolveComponentRef } from "@rebasepro/core";
+
 import { Field, FieldProps as FormexFieldProps, getIn } from "@rebasepro/formex";
 
 ;
@@ -107,15 +109,16 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                 }) as Property | null;
 
                 const readOnly = resolvedProperty ? isReadOnly(resolvedProperty) : true;
-                const disabled = disabledProp || readOnly || Boolean(resolvedProperty?.disabled) || context.disabled;
+                const disabled = disabledProp || readOnly || Boolean(resolvedProperty?.ui?.disabled) || context.disabled;
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;
                 } else if (readOnly) {
                     Component = ReadOnlyFieldBinding;
-                } else if (resolvedProperty.Field) {
-                    if (typeof resolvedProperty.Field === "function") {
-                        Component = resolvedProperty.Field as ComponentType<FieldProps<any>>;
+                } else if (resolvedProperty.ui?.Field) {
+                    const resolved = resolveComponentRef(resolvedProperty.ui.Field);
+                    if (resolved) {
+                        Component = resolved as ComponentType<FieldProps<any>>;
                     }
                 } else {
                     const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
@@ -139,7 +142,7 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                         index,
                         authController
                     }) as Property | null;
-                    Component = configProperty?.Field as ComponentType<FieldProps> | undefined;
+                    Component = resolveComponentRef(configProperty?.ui?.Field) as ComponentType<FieldProps> | undefined;
                 }
                 if (!Component) {
                     console.warn(`No field component found for property ${propertyKey}`);
@@ -209,7 +212,7 @@ function FieldInternal<CustomProps, M extends Record<string, any>>
 
     const { plugins } = useCustomizationController();
 
-    const customFieldProps: any = property.customProps;
+    const customFieldProps: any = property.ui?.customProps;
     const value = formexFieldProps.field.value;
     const error = getIn(formexFieldProps.form.errors, propertyKey) as string | string[] | undefined;
     const touched = getIn(formexFieldProps.form.touched, propertyKey) as boolean | undefined;
@@ -265,8 +268,9 @@ function FieldInternal<CustomProps, M extends Record<string, any>>
 
     return (
         <ErrorBoundary>
-
-            <UsedComponent {...cmsFieldProps}/>
+            <Suspense fallback={null}>
+                <UsedComponent {...cmsFieldProps}/>
+            </Suspense>
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>
@@ -285,7 +289,7 @@ const shouldPropertyReRender = (property: Property, plugins?: RebasePlugin[]): b
         return true;
     }
     const defAProperty = property as Property;
-    const rerenderThisProperty = Boolean(defAProperty.Field);
+    const rerenderThisProperty = Boolean(defAProperty.ui?.Field);
     if (defAProperty.type === "map" && defAProperty.properties) {
         return Boolean(rerenderThisProperty || Object.values(defAProperty.properties).some((childProperty) => shouldPropertyReRender(childProperty as Property, plugins)));
     } else {

package/src/form/components/FieldHelperText.tsx

@@ -72,7 +72,7 @@ export function FieldHelperText<T>({
         </Typography>
     }
 
-    const disabledTooltip: string | undefined = typeof property.disabled === "object" ? property.disabled.disabledMessage : undefined;
+    const disabledTooltip: string | undefined = typeof property.ui?.disabled === "object" ? property.ui?.disabled.disabledMessage : undefined;
 
     return <div className={"flex ml-3.5 mt-1"}>
         <Typography variant={"caption"}

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -34,7 +34,7 @@ export function ArrayCustomShapedFieldBinding({
 }: FieldProps<ArrayProperty | ArrayProperty>) {
 
     const authController = useAuthController();
-    const minimalistView = minimalistViewProp || property.minimalistView;
+    const minimalistView = minimalistViewProp || property.ui?.minimalistView;
 
     const resolvedProperties: Property[] | undefined = getArrayResolvedProperties({
         propertyValue: value,
@@ -44,7 +44,7 @@ export function ArrayCustomShapedFieldBinding({
         authController
     })
 
-    const expanded = property.expanded === undefined ? true : property.expanded;
+    const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
 
     useClearRestoreValue({
         property,
@@ -63,7 +63,7 @@ export function ArrayCustomShapedFieldBinding({
     </>);
 
     const body = (resolvedProperties ?? []).map((childProperty, index) => {
-        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.ui?.disabled);
         const fieldProps = {
             propertyKey: `${propertyKey}[${index}]`,
             disabled: disabled || thisDisabled,

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -39,7 +39,7 @@ export function ArrayOfReferencesFieldBinding({
     setFieldValue
 }: ArrayOfReferencesFieldProps) {
 
-    const minimalistView = minimalistViewProp || property.minimalistView;
+    const minimalistView = minimalistViewProp || property.ui?.minimalistView;
     const { t } = useTranslation();
 
     const ofProperty = property.of as Property;
@@ -47,7 +47,7 @@ export function ArrayOfReferencesFieldBinding({
         throw Error("ArrayOfReferencesField expected a property containing references");
     }
 
-    const expanded = property.expanded === undefined ? true : property.expanded;
+    const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
     const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
 
     useClearRestoreValue({
@@ -76,7 +76,7 @@ export function ArrayOfReferencesFieldBinding({
         collection,
         onMultipleEntitiesSelected,
         selectedEntityIds,
-        forceFilter: ofProperty.forceFilter
+        fixedFilter: ofProperty.fixedFilter
     }
     );
 
@@ -98,7 +98,7 @@ export function ArrayOfReferencesFieldBinding({
             <ReferencePreview
                 key={internalId}
                 disabled={!ofProperty.path}
-                previewProperties={ofProperty.previewProperties}
+                previewProperties={ofProperty.ui?.previewProperties}
                 size={"medium"}
                 onClick={onEntryClick}
                 hover={!disabled}
@@ -107,7 +107,7 @@ export function ArrayOfReferencesFieldBinding({
                 includeEntityLink={ofProperty.includeEntityLink}
             />
         );
-    }, [ofProperty.path, ofProperty.previewProperties, value]);
+    }, [ofProperty.path, ofProperty.ui?.previewProperties, value]);
 
     const title = (<>
         <LabelWithIconAndTooltip

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -40,13 +40,13 @@ export function BlockFieldBinding({
     disabled
 }: FieldProps<ArrayProperty>) {
 
-    const minimalistView = minimalistViewProp || property.minimalistView;
+    const minimalistView = minimalistViewProp || property.ui?.minimalistView;
     const { t } = useTranslation();
 
     if (!property.oneOf)
         throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
 
-    const expanded = property.expanded === undefined ? true : property.expanded;
+    const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
     useClearRestoreValue({
         property,
         value,
@@ -92,8 +92,8 @@ export function BlockFieldBinding({
         addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
         buildEntry={buildEntry}
         onInternalIdAdded={setLastAddedId}
-        disabled={isSubmitting || Boolean(property.disabled)}
-        canAddElements={!property.disabled}
+        disabled={isSubmitting || Boolean(property.ui?.disabled)}
+        canAddElements={!property.ui?.disabled}
         onValueChange={(value) => setFieldValue(propertyKey, value)}
         newDefaultEntry={{
             [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -49,7 +49,7 @@ export function DateTimeFieldBinding({
                     value={internalValue}
                     onChange={(dateValue) => setValue(dateValue)}
                     mode={property.mode}
-                    clearable={property.clearable}
+                    clearable={property.ui?.clearable}
                     locale={locale}
                     error={showError}
                     disabled={disabled}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -38,7 +38,7 @@ export function KeyValueFieldBinding({
     context
 }: FieldProps<MapProperty>) {
 
-    const expanded = (property.expanded === undefined ? true : property.expanded) || autoFocus;
+    const expanded = (property.ui?.expanded === undefined ? true : property.ui?.expanded) || autoFocus;
 
     if (!property.keyValue) {
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -36,8 +36,8 @@ export function MapFieldBinding({
 }: FieldProps<MapProperty>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
-    const expanded = property.expanded === undefined ? true : property.expanded;
-    const minimalistView = minimalistViewProp || property.minimalistView;
+    const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
+    const minimalistView = minimalistViewProp || property.ui?.minimalistView;
     const { t } = useTranslation();
 
     if (!property.properties) {
@@ -60,11 +60,11 @@ export function MapFieldBinding({
 
     const mapFormView = <>
         <div
-            className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            className={cls("py-1 flex flex-col space-y-2", minimalistView && property.ui?.widthPercentage !== undefined ? "mt-8" : undefined)}>
             {Object.entries(mapProperties)
                 .filter(([_, property]) => !isHidden(property))
                 .map(([entryKey, childProperty], index) => {
-                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.ui?.disabled);
                     const fieldBindingProps: PropertyFieldBindingProps<any> = {
                         propertyKey: `${propertyKey}.${entryKey}`,
                         disabled: disabled || thisDisabled,
@@ -105,12 +105,12 @@ export function MapFieldBinding({
         <ErrorBoundary>
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                onExpandedChange={(expanded) => {
+                onExpandedChange={(expanded: boolean) => {
                     onPropertyChange?.({
-                        expanded
+                        ui: { ...property.ui, expanded }
                     });
                 }}
-                className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
                 title={<LabelWithIconAndTooltip
                     propertyKey={propertyKey}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -204,7 +204,7 @@ export function MarkdownEditorFieldBinding({
                     title={property.name ?? propertyKey}
                     className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
                 <div className="flex-grow"/>
-                {property.clearable && !disabled && (
+                {property.ui?.clearable && !disabled && (
                     <IconButton
                         size="small"
                         onClick={(e) => {

package/src/form/field_bindings/MultipleRelationFieldBinding.tsx

@@ -66,7 +66,7 @@ export function MultipleRelationFieldBinding({
         collection,
         onMultipleEntitiesSelected,
         selectedEntityIds,
-        forceFilter: property.forceFilter
+        fixedFilter: property.fixedFilter
     }
     );
 
@@ -87,7 +87,7 @@ export function MultipleRelationFieldBinding({
         return (
             <RelationPreview
                 key={internalId}
-                previewProperties={property.previewProperties}
+                previewProperties={property.ui?.previewProperties}
                 size={"medium"}
                 onClick={onEntryClick}
                 hover={!disabled}
@@ -96,7 +96,7 @@ export function MultipleRelationFieldBinding({
                 includeEntityLink={property.includeEntityLink}
             />
         );
-    }, [relation, property.previewProperties, value]);
+    }, [relation, property.ui?.previewProperties, value]);
 
     const title = (<>
         <LabelWithIconAndTooltip

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -23,7 +23,7 @@ import { useCollectionRegistryController } from "../../index";
  * @group Form fields
  */
 export function ReferenceAsStringFieldBinding(props: FieldProps<StringProperty>) {
-    if (typeof props.property.reference?.path !== "string") {
+    if (typeof (props.property as any).reference?.path !== "string") {
         return <ReadOnlyFieldBinding {...props as FieldProps<Property>}/>;
     }
 
@@ -43,7 +43,7 @@ function ReferenceAsStringFieldBindingInternal({
     includeDescription,
     size = "medium"
 }: FieldProps<StringProperty>) {
-    if (!property.reference?.path) {
+    if (!(property as any).reference?.path) {
         throw new Error("Property path is required for ReferenceAsStringFieldBinding");
     }
 
@@ -54,7 +54,7 @@ function ReferenceAsStringFieldBindingInternal({
     });
 
     const collectionRegistryController = useCollectionRegistryController();
-    const path = property.reference.path;
+    const path = (property as any).reference.path;
     const collection: EntityCollection | undefined = useMemo(() => {
         return path ? collectionRegistryController.getCollection(path) : undefined;
     }, [path]);
@@ -81,7 +81,7 @@ path });
         collection,
         onSingleEntitySelected,
         selectedEntityIds: value ? [value] : undefined,
-        forceFilter: property.reference.forceFilter
+        fixedFilter: (property as any).reference.fixedFilter
     }
     );
 
@@ -106,13 +106,13 @@ path });
 
                 {referenceValue && <ReferencePreview
                     disabled={!path}
-                    previewProperties={property.reference?.previewProperties}
+                    previewProperties={(property as any).reference?.previewProperties}
                     hover={!disabled}
                     size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={referenceValue}
-                    includeEntityLink={property.reference?.includeEntityLink}
-                    includeId={property.reference?.includeId}
+                    includeEntityLink={(property as any).reference?.includeEntityLink}
+                    includeId={(property as any).reference?.includeId}
                 />}
 
                 {!value && <div className="justify-center text-left">

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -81,7 +81,7 @@ function ReferenceFieldBindingInternal({
         collection,
         onSingleEntitySelected,
         selectedEntityIds: validValue ? [value.id] : undefined,
-        forceFilter: property.forceFilter
+        fixedFilter: property.fixedFilter
     }
     );
 
@@ -106,7 +106,7 @@ function ReferenceFieldBindingInternal({
 
                 {value && <ReferencePreview
                     disabled={!property.path}
-                    previewProperties={property.previewProperties}
+                    previewProperties={property.ui?.previewProperties}
                     hover={!disabled}
                     size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}