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

package/src/components/{EntityCollectionTable → CollectionTableBinding}/internal/EntityTableCell.tsx

@@ -2,11 +2,10 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { cls, Tooltip , iconSize } from "@rebasepro/ui";
-import { MinusCircleIcon } from "lucide-react";
-import { ErrorBoundary } from "@rebasepro/ui";
-import { getRowHeight, TableSize } from "@rebasepro/core";
-import { ErrorTooltip } from "@rebasepro/core";
+import { cls, Tooltip, iconSize } from "@rebasepro/ui";
+import { ErrorBoundary, MinusCircleIcon } from "@rebasepro/ui";
+import { getRowHeight, TableSize } from "@rebasepro/app";
+import { ErrorTooltip } from "@rebasepro/app";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -14,7 +13,7 @@ interface EntityTableCellProps {
     /**
      * The value is used only to check changes and force re-renders
      */
-    value?: any;
+    value?: unknown;
     disabled: boolean;
     savedTimestamp?: number;
     error?: Error;
@@ -32,7 +31,7 @@ interface EntityTableCellProps {
     // Sortable props for dnd-kit integration
     sortableNodeRef?: (node: HTMLElement | null) => void;
     sortableStyle?: React.CSSProperties;
-    sortableAttributes?: Record<string, any>;
+    sortableAttributes?: Record<string, string | number | undefined>;
     isDragging?: boolean;
     isDraggable?: boolean;
     frozen?: boolean;
@@ -204,7 +203,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     `flex relative h-full rounded-md p-${p} border-4`,
                     showSaved ? "bg-primary/20 dark:bg-primary/20" : (onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : ""),
                     hideOverflow ? "overflow-hidden" : "",
-                    isSelected && !showSaved ? "bg-surface-50 dark:bg-surface-900" : "",
+                    isSelected && !showSaved ? "bg-surface-accent-50 dark:bg-surface-accent-900" : "",
                     borderClass
                 )}
                 ref={ref}
@@ -265,7 +264,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 style={sortableStyle}
                 className={cls(
                     "flex-shrink-0",
-                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"
                 )}
                 {...sortableAttrsWithoutTabIndex}
             >

package/src/components/{EntityCollectionTable → CollectionTableBinding}/internal/EntityTableCellActions.tsx

@@ -1,6 +1,5 @@
-import { IconButton } from "@rebasepro/ui";
-import { AlertCircleIcon } from "lucide-react";
-import { ErrorTooltip } from "@rebasepro/core";
+import { AlertCircleIcon, IconButton } from "@rebasepro/ui";
+import { ErrorTooltip } from "@rebasepro/app";
 import { useCallback, useEffect, useRef } from "react";
 
 export interface EntityTableCellActionsProps {

package/src/components/{EntityCollectionTable → CollectionTableBinding}/internal/common.tsx

@@ -1,4 +1,4 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { ArrayProperty, Property } from "@rebasepro/types";
 
 export function getTableCellAlignment(property: Property): "right" | "left" | "center" {
@@ -17,20 +17,20 @@ export function getTableCellAlignment(property: Property): "right" | "left" | "c
 
 export function getTablePropertyColumnWidth(property: Property): number {
 
-    if (property.columnWidth) {
-        return property.columnWidth;
+    if (property.ui?.columnWidth) {
+        return property.ui?.columnWidth;
     }
 
     if (property.type === "string") {
-        if (property.url) {
+        if (property.ui?.url) {
             return 280;
         } else if (property.storage) {
             return 160;
         } else if (property.enum) {
             return 200;
-        } else if (property.multiline) {
+        } else if (property.ui?.multiline) {
             return 300;
-        } else if (property.markdown) {
+        } else if (property.ui?.markdown) {
             return 300;
         } else if (property.email) {
             return 200;
@@ -68,6 +68,6 @@ export function getTablePropertyColumnWidth(property: Property): number {
     }
 }
 
-export function getSubcollectionColumnId(collection: EntityCollection) {
+export function getSubcollectionColumnId(collection: CollectionConfig) {
     return `subcollection:${collection.slug}`;
 }

package/src/components/{EntityCollectionTable → CollectionTableBinding}/internal/popup_field/PopupFormField.tsx

@@ -1,23 +1,21 @@
 import type { Properties } from "@rebasepro/types";
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { FormContext, PropertyFieldBindingProps } from "../../../../types/fields";
 import type { Property } from "@rebasepro/types";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 
-import * as Portal from "@radix-ui/react-portal";
+import { Button, DialogActions, IconButton, Portal, Typography, XIcon } from "@rebasepro/ui";
 
 import { Entity, EntityValues } from "@rebasepro/types";
-import { PluginProviderStack } from "@rebasepro/core";
-import { Formex, FormexController, useCreateFormex } from "@rebasepro/formex";
+import { PluginProviderStack } from "@rebasepro/app";
+import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
 import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
 import { getPropertyInPath } from "../../../../util/property_utils";
-import { Button, DialogActions, IconButton, Typography } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
 import { PropertyFieldBinding, zodToFormErrors } from "../../../../form";
-import { useAuthController, useCustomizationController, useData, useRebaseContext } from "@rebasepro/core";
-import type { OnCellValueChangeParams } from "@rebasepro/core";
+import { useAuthController, useCustomizationController, useData, useRebaseContext } from "@rebasepro/app";
+import type { OnCellValueChangeParams } from "@rebasepro/app";
 import { isReadOnly } from "@rebasepro/common";
 
 interface PopupFormFieldProps<M extends Record<string, unknown>> {
@@ -26,7 +24,7 @@ interface PopupFormFieldProps<M extends Record<string, unknown>> {
     entityId: string | number;
     tableKey: string;
     propertyKey?: Extract<keyof M, string>;
-    collection?: EntityCollection<any>;
+    collection?: CollectionConfig<any>;
     cellRect?: DOMRect;
     open: boolean;
     onClose: () => void;
@@ -61,7 +59,7 @@ export function PopupFormFieldLoading<M extends Record<string, unknown>>({
     const [entity, setEntity] = useState<Entity<M> | undefined>(undefined);
     useEffect(() => {
         if (entityId && inputCollection) {
-            dataClient.collection(path).findById(entityId).then(setEntity as any);
+            dataClient.collection(path).findById(entityId).then((result) => setEntity(result as Entity<M> | undefined));
         }
     }, [entityId, inputCollection, dataClient, path]);
 
@@ -250,7 +248,7 @@ export function PopupFormFieldInternal<M extends Record<string, unknown>>({
             if (!validationSchema) return {};
             const result = await validationSchema.safeParseAsync(values);
             if (result.success) return {};
-            return zodToFormErrors(result.error);
+            return zodToFormErrors(result.error) as Record<string, string>;
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {
@@ -281,6 +279,7 @@ export function PopupFormFieldInternal<M extends Record<string, unknown>>({
         path,
         setFieldValue,
         save: saveValue,
+        submit: handleSubmit,
         formex,
         status: "existing",
         openEntityMode: "side_panel",
@@ -291,7 +290,7 @@ export function PopupFormFieldInternal<M extends Record<string, unknown>>({
     const fieldProps: PropertyFieldBindingProps<M> | undefined = propertyKey && property
         ? {
             propertyKey: propertyKey as string,
-            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
+            disabled: isSubmitting || isReadOnly(property) || !!property.ui?.disabled,
             property,
             includeDescription: false,
             underlyingValueHasChanged: false,
@@ -409,7 +408,7 @@ export function PopupFormFieldInternal<M extends Record<string, unknown>>({
     return (
         <Portal.Root asChild
             container={container}>
-            <Formex value={formex as unknown as FormexController<Record<string, unknown>>}>
+            <Formex value={formex as FormexController<Record<string, unknown>>}>
                 {draggable}
             </Formex>
         </Portal.Root>

package/src/components/{EntityCollectionTable → CollectionTableBinding}/internal/popup_field/useDraggable.tsx

@@ -1,5 +1,8 @@
 import React, { useCallback, useEffect } from "react";
 
+/** Tracks events originating inside the inner (non-draggable) area. */
+const innerClicked = new WeakSet<MouseEvent>();
+
 interface DraggableProps {
     containerRef: React.RefObject<HTMLDivElement | null>,
     innerRef: React.RefObject<HTMLDivElement | null>,
@@ -22,7 +25,7 @@ export function useDraggable({
     const listeningRef = React.useRef(false);
 
     const onMouseDown = useCallback((event: MouseEvent) => {
-        if (event.button !== 0 || !containerRef.current || event.defaultPrevented || (event as MouseEvent & { innerClicked?: boolean }).innerClicked) {
+        if (event.button !== 0 || !containerRef.current || event.defaultPrevented || innerClicked.has(event)) {
             return;
         }
 
@@ -41,7 +44,7 @@ export function useDraggable({
     }, [containerRef, onMove]);
 
     const onMouseDownInner = useCallback((event: MouseEvent) => {
-        (event as MouseEvent & { innerClicked?: boolean }).innerClicked = true;
+        innerClicked.add(event);
     }, [])
 
     const onSelect = useCallback((event: Event) => {

package/src/components/{EntityCollectionTable → CollectionTableBinding}/table_bindings.tsx

@@ -1,11 +1,14 @@
 import React from "react";
-import { ArrayProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, StringProperty } from "@rebasepro/types";
+import { ArrayProperty, DateProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, ReferenceProperty, RelationProperty, StringProperty } from "@rebasepro/types";
+import { TableSize, useCustomizationController } from "@rebasepro/app";
+import {
+    VirtualTableInput,
+    VirtualTableNumberInput,
+    VirtualTableSwitch,
+    VirtualTableDateField
+} from "@rebasepro/ui";
 
-import { VirtualTableInput } from "./fields/VirtualTableInput";
 import { VirtualTableSelect } from "./fields/VirtualTableSelect";
-import { VirtualTableNumberInput } from "./fields/VirtualTableNumberInput";
-import { VirtualTableSwitch } from "./fields/VirtualTableSwitch";
-import { VirtualTableDateField } from "./fields/VirtualTableDateField";
 import { VirtualTableUserSelect } from "./fields/VirtualTableUserSelect";
 import { TableStorageUpload } from "./fields/TableStorageUpload";
 import { TableReferenceField } from "./fields/TableReferenceField";
@@ -14,7 +17,7 @@ import { TableRelationSelectorField } from "./fields/TableRelationSelectorField"
 
 import { getPreviewSizeFrom } from "../../preview/util";
 
-export interface TableFieldBindingProps<T = any> {
+export interface TableFieldBindingProps<T = unknown> {
     propertyKey: string;
     property: Property;
     internalValue: T;
@@ -23,9 +26,9 @@ export interface TableFieldBindingProps<T = any> {
     validationError?: Error;
     disabled: boolean;
     selected: boolean;
-    size: any;
+    size: TableSize;
     align: "left" | "center" | "right";
-    entity: Entity<any>;
+    entity: Entity<Record<string, unknown>>;
     path: string;
     openPopup?: (cellRect: DOMRect | undefined) => void;
 }
@@ -41,7 +44,7 @@ export interface TableFieldConfig {
 }
 
 export function isStorageProperty(property: Property) {
-    if (property.type === "string" && property.markdown)
+    if (property.type === "string" && property.ui?.markdown)
         return false;
     if (property.type === "string" && (property as StringProperty).storage)
         return true;
@@ -62,44 +65,19 @@ export function getTableBindingForProperty(
 ): TableFieldConfig | undefined {
     const isAStorageProperty = isStorageProperty(property);
 
-    if (property.type === "string" && (property as StringProperty).reference?.path) {
+    if (isAStorageProperty) {
         return {
-            Component: ({ propertyKey, property, internalValue, updateValue, disabled, size, path }) => {
-                const referenceProperty = (property as StringProperty).reference as any;
-                const referenceValue = internalValue ? new EntityReference({ id: internalValue as string,
-path: referenceProperty.path as string }) : undefined;
-                return (
-                    <TableReferenceField
-                        name={propertyKey}
-                        internalValue={referenceValue}
-                        updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
-                        disabled={disabled}
-                        size={size}
-                        path={referenceProperty.path as string}
-                        multiselect={false}
-                        previewProperties={referenceProperty.previewProperties}
-                        includeId={referenceProperty.includeId}
-                        includeEntityLink={referenceProperty.includeEntityLink}
-                        title={property.name}
-                        forceFilter={referenceProperty.forceFilter}
-                    />
-                );
-            },
-            allowScroll: false
-        };
-    } else if (isAStorageProperty) {
-        return {
-            Component: ({ validationError, error, disabled, selected, openPopup, property, entity, path, internalValue, size, updateValue, propertyKey }: any) => (
+            Component: ({ validationError, error, disabled, selected, openPopup, property, entity, path, internalValue, size, updateValue, propertyKey }: TableFieldBindingProps) => (
                 <TableStorageUpload
                     error={validationError ?? error}
                     disabled={disabled}
                     focused={selected}
                     selected={selected}
                     openPopup={openPopup}
-                    property={property as any}
+                    property={property as StringProperty | ArrayProperty}
                     entity={entity}
                     path={path}
-                    value={internalValue}
+                    value={internalValue as string | string[] | null}
                     previewSize={getPreviewSizeFrom(size)}
                     updateValue={updateValue}
                     propertyKey={propertyKey}
@@ -114,7 +92,7 @@ path: referenceProperty.path as string }) : undefined;
         const numberProperty = property as NumberProperty;
         if (numberProperty.enum) {
             return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableSelect
                         name={propertyKey}
                         multiple={false}
@@ -132,7 +110,7 @@ path: referenceProperty.path as string }) : undefined;
             };
         } else {
             return {
-                Component: ({ align, error, validationError, selected, disabled, internalValue, updateValue }: any) => (
+                Component: ({ align, error, validationError, selected, disabled, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableNumberInput
                         align={align}
                         error={validationError ?? error}
@@ -149,7 +127,7 @@ path: referenceProperty.path as string }) : undefined;
         const stringProperty = property as StringProperty;
         if (stringProperty.enum) {
             return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableSelect
                         name={propertyKey}
                         multiple={false}
@@ -167,7 +145,7 @@ path: referenceProperty.path as string }) : undefined;
             };
         } else if (stringProperty.userSelect) {
             return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableUserSelect
                         name={propertyKey}
                         multiple={false}
@@ -181,10 +159,10 @@ path: referenceProperty.path as string }) : undefined;
                 ),
                 fullHeight: true
             };
-        } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
-            const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
+        } else if (stringProperty.ui?.markdown || !stringProperty.storage) {
+            const multiline = Boolean(stringProperty.ui?.multiline) || Boolean(stringProperty.ui?.markdown);
             return {
-                Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: any) => (
+                Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableInput
                         error={validationError ?? error}
                         disabled={disabled}
@@ -199,7 +177,7 @@ path: referenceProperty.path as string }) : undefined;
         }
     } else if (property.type === "boolean") {
         return {
-            Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: any) => (
+            Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: TableFieldBindingProps) => (
                 <VirtualTableSwitch
                     error={validationError ?? error}
                     disabled={disabled}
@@ -211,78 +189,59 @@ path: referenceProperty.path as string }) : undefined;
         };
     } else if (property.type === "date") {
         return {
-            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: any) => (
-                <VirtualTableDateField
-                    name={propertyKey}
-                    error={validationError ?? error}
-                    disabled={disabled}
-                    mode={property.mode}
-                    focused={selected}
-                    internalValue={internalValue as Date}
-                    updateValue={updateValue}
-                />
-            ),
+            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: TableFieldBindingProps) => {
+                const { locale } = useCustomizationController();
+                return (
+                    <VirtualTableDateField
+                        name={propertyKey}
+                        error={validationError ?? error}
+                        disabled={disabled}
+                        mode={(property as DateProperty).mode}
+                        focused={selected}
+                        internalValue={internalValue as Date}
+                        updateValue={updateValue}
+                        locale={locale}
+                    />
+                );
+            },
             fullHeight: true,
             hideOverflow: false,
             allowScroll: false
         };
     } else if (property.type === "reference") {
-        if (typeof property.path === "string") {
+        if ((property as ReferenceProperty).path) {
             return {
-                Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: any) => (
+                Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: TableFieldBindingProps) => {
+                    return (
                     <TableReferenceField
                         name={propertyKey}
                         internalValue={internalValue as EntityReference}
                         updateValue={updateValue}
                         disabled={disabled}
                         size={size}
-                        path={property.path}
+                        path={(property as ReferenceProperty).path!}
                         multiselect={false}
-                        previewProperties={property.previewProperties}
-                        includeId={property.includeId}
-                        includeEntityLink={property.includeEntityLink}
+                        previewProperties={(property as ReferenceProperty).ui?.previewProperties}
+                        includeId={(property as ReferenceProperty).includeId}
+                        includeEntityLink={(property as ReferenceProperty).includeEntityLink}
                         title={property.name ?? propertyKey}
-                        forceFilter={property.forceFilter}
+                        fixedFilter={(property as ReferenceProperty).fixedFilter}
                     />
-                ),
+                    );
+                },
                 allowScroll: false
             };
         }
     } else if (property.type === "relation") {
-        if (property.relation) {
-            if (property.widget === "dialog") {
+        if ((property as RelationProperty).relation) {
+            if ((property as RelationProperty).ui?.widget === "dialog") {
                 return {
-                    Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: any) => (
-                        <TableRelationField
-                            name={propertyKey}
-                            internalValue={internalValue as EntityRelation}
-                            updateValue={updateValue}
-                            disabled={disabled}
-                            size={size}
-                            multiselect={false}
-                            relation={property.relation}
-                            previewProperties={property.previewProperties}
-                            includeId={property.includeId}
-                            includeEntityLink={property.includeEntityLink}
-                            title={property.name ?? propertyKey}
-                            forceFilter={property.forceFilter}
-                        />
-                    ),
+                    Component: RelationDialogBindingComponent,
                     allowScroll: false
                 };
             } else {
                 return {
-                    Component: ({ propertyKey, internalValue, updateValue, disabled, property }: any) => (
-                        <TableRelationSelectorField
-                            name={propertyKey}
-                            internalValue={internalValue as EntityRelation}
-                            updateValue={updateValue}
-                            disabled={disabled}
-                            size={"small"}
-                            relation={property.relation!}
-                            forceFilter={property.forceFilter}
-                        />
-                    ),
+                    Component: RelationSelectorBindingComponent,
                     allowScroll: false
                 };
             }
@@ -293,11 +252,11 @@ path: referenceProperty.path as string }) : undefined;
         if (!arrayProperty.of && !arrayProperty.oneOf) {
             throw Error("You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property");
         } else if (arrayProperty.of && !Array.isArray(arrayProperty.of)) {
-            const ofProp = arrayProperty.of as any;
+            const ofProp = arrayProperty.of as Property;
             if (ofProp.type === "string" || ofProp.type === "number") {
                 if (selected && ofProp.enum) {
                     return {
-                        Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                        Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
                             <VirtualTableSelect
                                 name={propertyKey}
                                 multiple={true}
@@ -305,7 +264,7 @@ path: referenceProperty.path as string }) : undefined;
                                 focused={selected}
                                 small={getPreviewSizeFrom(size) !== "medium"}
                                 valueType={ofProp.type}
-                                enumValues={ofProp.enum}
+                                enumValues={ofProp.enum!}
                                 error={validationError ?? error}
                                 internalValue={internalValue as string | number}
                                 updateValue={updateValue}
@@ -317,9 +276,10 @@ path: referenceProperty.path as string }) : undefined;
                     };
                 }
             } else if (ofProp.type === "reference") {
-                if (typeof ofProp.path === "string") {
+                const refOfProp = ofProp as ReferenceProperty;
+                if (refOfProp.path) {
                     return {
-                        Component: ({ propertyKey, disabled, internalValue, updateValue, size }: any) => (
+                        Component: ({ propertyKey, disabled, internalValue, updateValue, size }: TableFieldBindingProps) => (
                             <TableReferenceField
                                 name={propertyKey}
                                 disabled={disabled}
@@ -327,12 +287,12 @@ path: referenceProperty.path as string }) : undefined;
                                 updateValue={updateValue}
                                 size={size}
                                 multiselect={true}
-                                path={ofProp.path}
-                                previewProperties={ofProp.previewProperties}
+                                path={refOfProp.path!}
+                                previewProperties={refOfProp.ui?.previewProperties}
                                 title={arrayProperty.name}
-                                forceFilter={ofProp.forceFilter}
-                                includeId={ofProp.includeId}
-                                includeEntityLink={ofProp.includeEntityLink}
+                                fixedFilter={refOfProp.fixedFilter}
+                                includeId={refOfProp.includeId}
+                                includeEntityLink={refOfProp.includeEntityLink}
                             />
                         ),
                         allowScroll: false
@@ -344,3 +304,40 @@ path: referenceProperty.path as string }) : undefined;
 
     return undefined;
 }
+
+/** Stable component for relation fields rendered with the dialog widget */
+function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }: TableFieldBindingProps) {
+    const relProp = property as RelationProperty;
+    return (
+        <TableRelationField
+            name={propertyKey}
+            internalValue={internalValue as EntityRelation}
+            updateValue={updateValue}
+            disabled={disabled}
+            size={size}
+            multiselect={false}
+            relation={relProp.relation!}
+            previewProperties={relProp.ui?.previewProperties}
+            includeId={relProp.includeId}
+            includeEntityLink={relProp.includeEntityLink}
+            title={relProp.name ?? propertyKey}
+            fixedFilter={relProp.fixedFilter}
+        />
+    );
+}
+
+/** Stable component for relation fields rendered with the inline selector */
+function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property }: TableFieldBindingProps) {
+    const relProp = property as RelationProperty;
+    return (
+        <TableRelationSelectorField
+            name={propertyKey}
+            internalValue={internalValue as EntityRelation}
+            updateValue={updateValue}
+            disabled={disabled}
+            size={"small"}
+            relation={relProp.relation!}
+            fixedFilter={relProp.fixedFilter}
+        />
+    );
+}