@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/form/PropertyFieldBinding.tsx

@@ -1,16 +1,18 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig, FieldProps as CoreFieldProps } 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 { Field, FieldProps as FormexFieldProps, getIn } from "@rebasepro/formex";
+import { resolveComponentRef } from "@rebasepro/app";
+
+import { Field, FormexFieldProps, getIn } from "@rebasepro/forms";
 
 ;
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "@rebasepro/common";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { Typography } from "@rebasepro/ui";
 import { getFieldConfig, getFieldId } from "../components/field_configs";
 import { ErrorBoundary } from "@rebasepro/ui";
@@ -27,7 +29,7 @@ import { ErrorBoundary } from "@rebasepro/ui";
  *
  * Please note that if you build a custom field in a component, the
  * **validation** passed in the property will have no effect. You need to set
- * the validation in the `EntityCollection` definition.
+ * the validation in the `CollectionConfig` definition.
  *
  * @param propertyKey You can use nested names such as `address.street` or `friends[2]`
  * @param property
@@ -40,7 +42,7 @@ import { ErrorBoundary } from "@rebasepro/ui";
  * @param autoFocus
  * @group Form custom fields
  */
-export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a: PropertyFieldBindingProps<any>, b: PropertyFieldBindingProps<any>) => {
+export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a: PropertyFieldBindingProps<Record<string, unknown>>, b: PropertyFieldBindingProps<Record<string, unknown>>) => {
     if (a.propertyKey !== b.propertyKey) {
         return false;
     }
@@ -68,21 +70,21 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
 }) as typeof PropertyFieldBindingInternal;
 
 function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record<string, unknown>>
-    ({
-        propertyKey,
-        property,
-        context,
-        includeDescription,
-        underlyingValueHasChanged,
-        disabled: disabledProp,
-        partOfArray,
-        partOfBlock,
-        minimalistView,
-        autoFocus,
-        index,
-        size,
-        onPropertyChange
-    }: PropertyFieldBindingProps<M>): ReactElement<PropertyFieldBindingProps<M>> {
+({
+     propertyKey,
+     property,
+     context,
+     includeDescription,
+     underlyingValueHasChanged,
+     disabled: disabledProp,
+     partOfArray,
+     partOfBlock,
+     minimalistView,
+     autoFocus,
+     index,
+     size,
+     onPropertyChange
+ }: PropertyFieldBindingProps<M>): ReactElement<PropertyFieldBindingProps<M>> {
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
@@ -94,7 +96,7 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
         >
             {(fieldProps) => {
 
-                let Component: ComponentType<FieldProps> | undefined;
+                let Component: ComponentType<FieldProps<Property, any, any>> | undefined;
                 const resolvedProperty = resolveProperty({
                     propertyKey,
                     property: property,
@@ -107,26 +109,20 @@ 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<Property, any, any>>;
                     }
                 } else {
                     const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
                     if (!propertyConfig) {
-                        console.log("INTERNAL: Could not find field config for property", {
-                            propertyKey,
-                            property,
-                            resolvedProperty,
-                            fields: customizationController.propertyConfigs,
-                            propertyConfig
-                        });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
@@ -139,7 +135,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<Property, any, any>> | undefined;
                 }
                 if (!Component) {
                     console.warn(`No field component found for property ${propertyKey}`);
@@ -167,9 +163,9 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                 };
 
                 return <FieldInternal
-                    Component={Component as ComponentType<FieldProps>}
+                    Component={Component as ComponentType<FieldProps<Property, any, any>>}
                     componentProps={componentProps}
-                    formexFieldProps={fieldProps}/>;
+                    formexFieldProps={fieldProps as FormexFieldProps<unknown, Record<string, unknown>>}/>;
             }}
         </Field>
     );
@@ -179,68 +175,68 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
 type ResolvedPropertyFieldBindingProps<M extends Record<string, unknown> = Record<string, unknown>> =
     Omit<PropertyFieldBindingProps<M>, "property">
     & {
-        property: Property
-    };
-
-function FieldInternal<CustomProps, M extends Record<string, any>>
-    ({
-        Component,
-        componentProps: {
-            propertyKey,
-            property,
-            includeDescription,
-            underlyingValueHasChanged,
-            partOfArray,
-            partOfBlock,
-            minimalistView,
-            autoFocus,
-            context,
-            disabled,
-            size,
-            onPropertyChange
-        },
-        formexFieldProps
-    }:
-        {
-            Component: ComponentType<FieldProps>,
-            componentProps: ResolvedPropertyFieldBindingProps<M>,
-            formexFieldProps: FormexFieldProps<any, any>
-        }) {
+    property: Property
+};
+
+function FieldInternal<CustomProps, M extends Record<string, unknown>>
+({
+     Component,
+     componentProps: {
+         propertyKey,
+         property,
+         includeDescription,
+         underlyingValueHasChanged,
+         partOfArray,
+         partOfBlock,
+         minimalistView,
+         autoFocus,
+         context,
+         disabled,
+         size,
+         onPropertyChange
+     },
+     formexFieldProps
+ }:
+ {
+     Component: ComponentType<FieldProps<Property, any, any>>,
+     componentProps: ResolvedPropertyFieldBindingProps<M>,
+     formexFieldProps: FormexFieldProps<unknown, Record<string, unknown>>
+ }) {
 
     const { plugins } = useCustomizationController();
 
-    const customFieldProps: any = property.customProps;
+    const customFieldProps: unknown = 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;
 
     const showError = Boolean(error &&
         (formexFieldProps.form.submitCount > 0 || property.validation?.unique) &&
-        (!Array.isArray(error) || !!error.filter((e: any) => !!e).length));
+        (!Array.isArray(error) || !!error.filter((e: unknown) => !!e).length));
 
-    const WrappedComponent: ComponentType<FieldProps<any, any, M>> | null = useWrappedComponent({
+    const WrappedComponent: ComponentType<FieldProps<Property, any, any>> | null = useWrappedComponent<unknown, any>({
         path: context.path,
         collection: context.collection,
         propertyKey: propertyKey,
         property: property,
-        Component: Component,
+        Component: Component as ComponentType<FieldProps<Property, unknown, M>>,
         plugins: plugins
     });
-    const UsedComponent: ComponentType<FieldProps> = WrappedComponent ?? Component;
+    const UsedComponent: ComponentType<FieldProps<Property, any, any>> = WrappedComponent ?? Component;
 
     const isSubmitting = formexFieldProps.form.isSubmitting;
 
-    const setValue = useCallback((value: any | null, shouldValidate?: boolean) => {
+    const setValue = useCallback((value: unknown | null, shouldValidate?: boolean) => {
         formexFieldProps.form.setFieldTouched(propertyKey, true, false);
         formexFieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
     }, []);
 
-    const setFieldValue = useCallback((otherPropertyKey: string, value: any | null, shouldValidate?: boolean) => {
+    const setFieldValue = useCallback((otherPropertyKey: string, value: unknown | null, shouldValidate?: boolean) => {
         formexFieldProps.form.setFieldTouched(propertyKey, true, false);
         formexFieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
     }, []);
 
-    const cmsFieldProps: FieldProps<any, CustomProps, M> = {
+    const cmsFieldProps: FieldProps<Property, CustomProps, M> = {
         propertyKey,
         value,
         setValue,
@@ -257,7 +253,7 @@ function FieldInternal<CustomProps, M extends Record<string, any>>
         partOfBlock: partOfBlock ?? false,
         minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
-        customProps: customFieldProps,
+        customProps: customFieldProps as CustomProps,
         context,
         size,
         onPropertyChange
@@ -265,8 +261,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 +282,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 {
@@ -295,14 +292,14 @@ const shouldPropertyReRender = (property: Property, plugins?: RebasePlugin[]): b
 
 interface UseWrappedComponentParams<M extends Record<string, unknown> = Record<string, unknown>> {
     path?: string,
-    collection?: EntityCollection<M>,
+    collection?: CollectionConfig<M>,
     propertyKey: string,
     property: Property,
-    Component: ComponentType<FieldProps<any, any, M>>,
+    Component: ComponentType<FieldProps<Property, unknown, M>>,
     plugins?: RebasePlugin[]
 }
 
-function useWrappedComponent<T, M extends Record<string, any> = any>(
+function useWrappedComponent<T, M extends Record<string, unknown> = Record<string, unknown>>(
     {
         path,
         collection,
@@ -311,10 +308,10 @@ function useWrappedComponent<T, M extends Record<string, any> = any>(
         Component,
         plugins
     }: UseWrappedComponentParams<M>
-): ComponentType<FieldProps<any, any, M>> | null {
+): ComponentType<FieldProps<Property, unknown, M>> | null {
 
-    const wrapperRef = useRef<ComponentType<FieldProps<any, any, M>> | null>((() => {
-        let Wrapper: ComponentType<FieldProps<any, any, M>> | null = null;
+    const wrapperRef = useRef<ComponentType<FieldProps<Property, unknown, M>> | null>((() => {
+        let Wrapper: ComponentType<FieldProps<Property, unknown, M>> | null = null;
         if (plugins) {
             plugins.forEach((plugin) => {
                 const fieldId = getFieldId(property);
@@ -323,14 +320,14 @@ function useWrappedComponent<T, M extends Record<string, any> = any>(
                         fieldConfigId: fieldId,
                         propertyKey,
                         property,
-                        Field: Component as any,
+                        Field: Component as unknown as ComponentType<CoreFieldProps<Property, unknown, Record<string, unknown>>>,
                         plugin,
                         path,
-                        collection: collection as any
+                        collection: collection as CollectionConfig | undefined
                     };
                     const enabled = plugin.fieldBuilder.enabled?.(params);
                     if (enabled === undefined || enabled)
-                        Wrapper = plugin.fieldBuilder.wrap(params) as any || Wrapper;
+                        Wrapper = (plugin.fieldBuilder.wrap(params) as unknown as ComponentType<FieldProps<Property, unknown, M>> | null) ?? Wrapper;
                 }
                 if (!fieldId) {
                     console.warn("INTERNAL: Field id not found for property", property);

package/src/form/components/ErrorFocus.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 
 export const ErrorFocus = ({ containerRef }:
     {

package/src/form/components/FieldHelperText.tsx

@@ -1,6 +1,5 @@
 import type { Property } from "@rebasepro/types";
-import { IconButton, Tooltip, Typography } from "@rebasepro/ui";
-import { InfoIcon } from "lucide-react";
+import { IconButton, InfoIcon, Tooltip, Typography } from "@rebasepro/ui";
 
 /**
  * Normalize an error value to a displayable string.
@@ -23,16 +22,16 @@ function normalizeError(error: unknown): string | undefined {
 
         // Extract all string values from the object (e.g., nested validation errors)
         const messages: string[] = [];
-        const extractMessages = (obj: any) => {
+        const extractMessages = (obj: Record<string, unknown>) => {
             for (const key in obj) {
                 if (typeof obj[key] === "string") {
-                    messages.push(obj[key]);
+                    messages.push(obj[key] as string);
                 } else if (typeof obj[key] === "object" && obj[key] !== null) {
-                    extractMessages(obj[key]);
+                    extractMessages(obj[key] as Record<string, unknown>);
                 }
             }
         };
-        extractMessages(error);
+        extractMessages(error as Record<string, unknown>);
         if (messages.length > 0) {
             return Array.from(new Set(messages)).join(", ");
         }
@@ -72,7 +71,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/components/FormLayout.tsx

@@ -9,7 +9,7 @@ export function FormLayout({
     className?: string;
 }) {
     return (
-        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-8", className)}>
+        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-6", className)}>
             {children}
         </div>
     );

package/src/form/components/LocalChangesMenu.tsx

@@ -1,11 +1,26 @@
 
 import type { Properties } from "@rebasepro/types";
 import React, { useState } from "react";
-import { Button, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, Menu, MenuItem, Typography , iconSize } from "@rebasepro/ui";
-import { XCircleIcon, CheckIcon, ChevronDownIcon, EyeIcon, AlertTriangleIcon } from "lucide-react";
-import { FormexController } from "@rebasepro/formex";
-import { useSnackbarController, useTranslation } from "@rebasepro/core";
-import { flattenKeys, removeEntityFromCache } from "@rebasepro/core";
+import {
+    AlertTriangleIcon,
+    Button,
+    CheckIcon,
+    ChevronDownIcon,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    EyeIcon,
+    iconSize,
+    Menu,
+    MenuItem,
+    Typography,
+    XCircleIcon
+} from "@rebasepro/ui";
+import { FormexController } from "@rebasepro/forms";
+import { useSnackbarController, useTranslation } from "@rebasepro/app";
+import { flattenKeys, removeEntityFromCache } from "@rebasepro/app";
 ;
 import { PropertyCollectionView } from "../../components/PropertyCollectionView";
 import { mergeDeep } from "@rebasepro/utils";

package/src/form/components/StorageItemPreview.tsx

@@ -5,9 +5,8 @@ import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { PropertyPreview } from "../../preview";
 
 import { cls, IconButton, paperMixin, Tooltip } from "@rebasepro/ui";
-import { FileTextIcon, MinusIcon } from "lucide-react";
-import { ErrorBoundary } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/core";
+import { ErrorBoundary, FileTextIcon, MinusIcon } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/app";
 
 interface StorageItemPreviewProps {
     name: string;

package/src/form/components/StorageUploadProgress.tsx

@@ -1,20 +1,25 @@
 import React, { useCallback } from "react";
 
-import { useSnackbarController, useStorageSource } from "@rebasepro/core";
-import { StorageFieldItem } from "@rebasepro/core";
-import { ErrorView } from "@rebasepro/core";
+import { useSnackbarController, useStorageSource } from "@rebasepro/app";
+import { StorageFieldItem } from "@rebasepro/app";
+import { ErrorView } from "@rebasepro/app";
+import type { StorageSource } from "@rebasepro/types";
 import { cls, paperMixin, Skeleton } from "@rebasepro/ui";
 
 export interface StorageUploadItemProps {
     storagePath: string;
-    metadata?: any,
+    metadata?: Record<string, unknown>,
     entry: StorageFieldItem,
     onFileUploadComplete: (value: string,
         entry: StorageFieldItem,
-        metadata?: any,
+        metadata?: Record<string, unknown>,
         uploadedUrl?: string) => Promise<void>;
     imageSize: number;
     simple: boolean;
+    /** Override the storage source for this upload. When provided, this source
+     *  is used instead of the default from context — enabling per-property
+     *  multi-backend uploads. */
+    storageSource?: StorageSource;
 }
 
 export function StorageUploadProgress({
@@ -23,10 +28,12 @@ export function StorageUploadProgress({
     metadata,
     onFileUploadComplete,
     imageSize,
-    simple
+    simple,
+    storageSource: storageSourceProp
 }: StorageUploadItemProps) {
 
-    const storageSource = useStorageSource();
+    const defaultStorageSource = useStorageSource();
+    const storageSource = storageSourceProp ?? defaultStorageSource;
 
     const snackbarController = useSnackbarController();
 

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -8,7 +8,7 @@ import { ExpandablePanel, Typography } from "@rebasepro/ui";
 import { getArrayResolvedProperties, isReadOnly } from "@rebasepro/common";
 import { getIconForProperty } from "../../util/property_utils";
 import { useClearRestoreValue } from "../useClearRestoreValue";
-import { useAuthController } from "@rebasepro/core";
+import { useAuthController } from "@rebasepro/app";
 
 /**
  * Array field used for custom
@@ -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,
@@ -77,7 +77,7 @@ export function ArrayCustomShapedFieldBinding({
             setValue,
             setFieldValue,
             customProps
-        } as FieldProps<any>;
+        } as FieldProps;
         return <div key={`custom_shaped_array_${index}`} className="pb-4">
             <PropertyFieldBinding {...fieldProps}/>
         </div>;

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,5 +1,5 @@
-import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { FieldProps } from "../../types/fields";
 import type { ArrayProperty, Property } from "@rebasepro/types";
 import React, { useCallback, useMemo } from "react";
@@ -10,9 +10,8 @@ import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContaine
 import { getIconForProperty } from "../../util/property_utils";
 import { getReferenceFrom } from "@rebasepro/common";
 
-import { useTranslation, ErrorView } from "@rebasepro/core";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { useTranslation, ErrorView } from "@rebasepro/app";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, PencilIcon, Typography } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useCollectionRegistryController } from "../../index";
 
@@ -39,7 +38,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 +46,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({
@@ -57,7 +56,7 @@ export function ArrayOfReferencesFieldBinding({
     });
 
     const collectionRegistryController = useCollectionRegistryController();
-    const collection: EntityCollection | undefined = useMemo(() => {
+    const collection: CollectionConfig | undefined = useMemo(() => {
         return ofProperty.path ? collectionRegistryController.getCollection(ofProperty.path) : undefined;
     }, [ofProperty.path]);
 
@@ -65,18 +64,18 @@ export function ArrayOfReferencesFieldBinding({
         throw Error(`Couldn't find the corresponding collection for the path: ${ofProperty.path}`);
     }
 
-    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<Record<string, unknown>>[]) => {
         const refs = entities.map(e => getReferenceFrom(e));
         setValue(refs);
     }, [setValue]);
 
-    const referenceDialogController = useEntitySelectionDialog({
+    const referenceDialogController = useSelectionDialog({
         multiselect: true,
         path: ofProperty.path,
         collection,
         onMultipleEntitiesSelected,
         selectedEntityIds,
-        forceFilter: ofProperty.forceFilter
+        fixedFilter: ofProperty.fixedFilter
     }
     );
 
@@ -98,7 +97,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 +106,7 @@ export function ArrayOfReferencesFieldBinding({
                 includeEntityLink={ofProperty.includeEntityLink}
             />
         );
-    }, [ofProperty.path, ofProperty.previewProperties, value]);
+    }, [ofProperty.path, ofProperty.ui?.previewProperties, value]);
 
     const title = (<>
         <LabelWithIconAndTooltip