@rebasepro/admin 0.8.0 → 0.9.1-canary.09aaf62

package/src/components/RelationSelector.tsx

@@ -25,9 +25,9 @@ import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Entity, EntityRelation, FilterValues, Relation, getCollectionDataPath } from "@rebasepro/types";
-import { EntityPreviewData } from "./EntityPreview";
-import { useData, useRelationSelector } from "@rebasepro/core";
-import { useSideEntityController } from "../hooks/useSideEntityController";
+import { EntityPreviewBindingData } from "./EntityPreviewBinding";
+import { useData, useRelationSelector } from "@rebasepro/app";
+import { useSidePanel } from "../hooks/useSidePanel";
 import { normalizeToEntityRelation } from "@rebasepro/common";
 import { EmptyValue } from "../preview";
 
@@ -91,7 +91,7 @@ export const RelationSelector = React.forwardRef<
 
         const collection = relation.target();
         const dataClient = useData();
-        const sideEntityController = useSideEntityController();
+        const sidePanelController = useSidePanel();
         const multiple = relation.cardinality === "many";
 
         const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -102,7 +102,7 @@ export const RelationSelector = React.forwardRef<
         // Track IDs that were set via local user interaction (onItemClick / handleClear / handleRemoveItem).
         // When an incoming value change matches these IDs exactly, we skip async re-resolution.
         const localSelectionIdsRef = useRef<string | null>(null);
-        // Snapshot of selected IDs captured when the popover opens.
+        // Entity of selected IDs captured when the popover opens.
         // Used to sort the dropdown list so selected items appear at the top.
         // Stays stable for the entire popover session so items don't jump around.
         const pinnedIdsRef = useRef<Set<string> | null>(null);
@@ -213,7 +213,8 @@ export const RelationSelector = React.forwardRef<
 
                 if (hasEmbeddedData) {
                     const r = rel as EntityRelation;
-                    newResolvedItems.push(toRelationItem(r.data!, r));
+                    // CMS wire format embeds relation data as { id, path, values }
+                    newResolvedItems.push(toRelationItem(r.data as unknown as Entity, r));
                 } else if (currentSelectedMap.has(relId)) {
                     // We already have it in currentSelected
                     const existingItem = currentSelectedMap.get(relId)!;
@@ -248,7 +249,8 @@ export const RelationSelector = React.forwardRef<
                     const relation = isPrimitive ? new EntityRelation(relId, path) : rel as EntityRelation;
 
                     if (!isPrimitive && (rel as EntityRelation).data) {
-                        return toRelationItem((rel as EntityRelation).data!, relation);
+                        // CMS wire format embeds relation data as { id, path, values }
+                        return toRelationItem((rel as EntityRelation).data as unknown as Entity, relation);
                     }
                     if (currentSelectedMap.has(String(relId))) {
                         return currentSelectedMap.get(String(relId))!;
@@ -485,11 +487,11 @@ relation } as RelationItem;
                                                     <div key={String(item.id)}
                                                         className="flex flex-row items-center gap-1 truncate">
                                                         {item.data ? (
-                                                            <EntityPreviewData size={"medium"}
+                                                            <EntityPreviewBindingData size={"medium"}
                                                                 entity={item.data}
                                                                 includeEntityLink={false}
                                                                 includeId={false}
-                                                                onSideEntityClick={closePopover}
+                                                                onSidePanelClick={closePopover}
                                                             />
                                                         ) : (
                                                             <span className="text-sm truncate">{item.label}</span>
@@ -504,7 +506,7 @@ relation } as RelationItem;
                                                     className={cls("flex flex-row items-center gap-1 truncate")}
                                                 >
                                                     {item.data ? (
-                                                        <EntityPreviewData size={"smallest"} entity={item.data}
+                                                        <EntityPreviewBindingData size={"smallest"} entity={item.data}
                                                             includeEntityLink={false}
                                                             includeId={false}/>
                                                     ) : (
@@ -541,7 +543,7 @@ relation } as RelationItem;
                                                     e.preventDefault();
                                                     const entity = selectedItems[0].data!;
                                                     setIsPopoverOpen(false);
-                                                    sideEntityController.open({
+                                                    sidePanelController.open({
                                                         entityId: entity.id,
                                                         path: entity.path,
                                                         collection,
@@ -634,7 +636,7 @@ relation } as RelationItem;
                                     <CommandPrimitive.Group>
                                         {(() => {
                                             // Sort items so that initially-selected (pinned) items appear first.
-                                            // We use the snapshot taken when the popover opened so items don't
+                                            // We use the entity taken when the popover opened so items don't
                                             // jump around as the user checks/unchecks.
                                             const pinned = pinnedIdsRef.current;
                                             const sortedItems = pinned && pinned.size > 0
@@ -666,7 +668,7 @@ relation } as RelationItem;
                                                     {item.data ? (
                                                         <div
                                                             className="flex flex-row items-center gap-2 min-w-0 w-full">
-                                                            <EntityPreviewData
+                                                            <EntityPreviewBindingData
                                                                 size={multiple ? "smallest" : "medium"}
                                                                 entity={item.data}
                                                                 includeId={false}

package/src/components/SearchIconsView.tsx

@@ -10,8 +10,8 @@ import {
     SearchBar,
     Tooltip
 } from "@rebasepro/ui";
-import { iconsSearch } from "@rebasepro/core";
-import { useTranslation } from "@rebasepro/core";
+import { iconsSearch } from "@rebasepro/app";
+import { useTranslation } from "@rebasepro/app";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,19 +1,14 @@
 import { createSelectionStore, AdminSelectedCell } from "./SelectionStore";
-import type { Property } from "@rebasepro/types";
+import type { Property, WhereFilterOp } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { CollectionSize, Entity, EntityRelation, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
-import { CellRendererParams, TableView, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams, VirtualTableWhereFilterOp } from "@rebasepro/ui";
-import { enumToObjectEntries } from "@rebasepro/common";
-import { DEFAULT_PAGE_SIZE, EntityCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/core";
+import { CollectionSize, Entity, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
+import { CellRendererParams, TableView, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams } from "@rebasepro/ui";
+import { DEFAULT_PAGE_SIZE, DataCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/app";
 import { FilterFormFieldProps } from "@rebasepro/ui";
-import { ReferenceFilterField } from "./filters/ReferenceFilterField";
-import { StringNumberFilterField } from "./filters/StringNumberFilterField";
-import { BooleanFilterField } from "./filters/BooleanFilterField";
-import { DateTimeFilterField } from "./filters/DateTimeFilterField";
 import { useOutsideAlerter } from "@rebasepro/ui";
 import { SelectableTableContext } from "./SelectableTableContext";
-import { getRowHeight } from "@rebasepro/core";
-import { RelationFilterField } from "./filters/RelationFilterField";
+import { getRowHeight } from "@rebasepro/app";
+import { FilterFieldBinding } from "./filters/FilterFieldBinding";
 
 export type SelectableTableProps<M extends Record<string, unknown>> = {
 
@@ -107,23 +102,23 @@ export type SelectableTableProps<M extends Record<string, unknown>> = {
  * This component is in charge of rendering a collection table with a high
  * degree of customization.
  *
- * This component is used internally by {@link EntityCollectionView} and
+ * This component is used internally by {@link CollectionViewBinding} and
  * {@link useReferenceDialog}
  *
  * Please note that you only need to use this component if you are building
  * a custom view. If you just need to create a default view you can do it
  * exclusively with config options.
  *
- * If you want to bind a {@link EntityCollection} to a table with the default
+ * If you want to bind a {@link CollectionConfig} to a table with the default
  * options you see in collections in the top level navigation, you can
- * check {@link EntityCollectionView}.
+ * check {@link CollectionViewBinding}.
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the driver, by using the hook
  * {@link useDataTableController}
  *
- * @see EntityCollectionTableProps
- * @see EntityCollectionView
+ * @see CollectionTableBindingProps
+ * @see CollectionViewBinding
  * @see VirtualTable
  * @group Components
  */
@@ -196,7 +191,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
             selectionStore.select({
                 ...cell,
                 columnKey: cell.propertyKey,
-                rowId: cell.entityId
+                id: cell.entityId
             } as AdminSelectedCell);
         } else {
             selectionStore.select(undefined);
@@ -244,7 +239,29 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         size: size ?? "m",
         selectionStore,
         setPopupCell
-    } as unknown as EntityCollectionTableController<Record<string, unknown>>), [setPopupCell, select, onValueChange, size, selectionStore]);
+    } as unknown as DataCollectionTableController<Record<string, unknown>>), [setPopupCell, select, onValueChange, size, selectionStore]);
+
+    const createFilterField = useCallback(({
+        id,
+        filterValue,
+        setFilterValue,
+        column,
+        hidden,
+        setHidden
+    }: FilterFormFieldProps<unknown>): React.ReactNode => {
+        if (!column.custom) return null;
+        const { resolvedProperty } = column.custom as { resolvedProperty?: Property };
+        if (!resolvedProperty) return null;
+        // Engine-aware operator resolution happens inside FilterFieldBinding,
+        // which reads the collection from the surrounding CollectionScopeProvider.
+        return <FilterFieldBinding
+            propertyKey={id as string}
+            property={resolvedProperty}
+            value={filterValue as [WhereFilterOp, unknown] | undefined}
+            setValue={setFilterValue as (value?: [WhereFilterOp, unknown]) => void}
+            hidden={hidden}
+            setHidden={setHidden}/>;
+    }, []);
 
     return (
         <SelectableTableContext.Provider
@@ -289,74 +306,4 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
 
 };
 
-function createFilterField({
-    id,
-    filterValue,
-    setFilterValue,
-    column,
-    hidden,
-    setHidden
-}: FilterFormFieldProps<unknown>): React.ReactNode {
-
-    if (!column.custom) {
-        return null;
-    }
-
-    const { resolvedProperty } = column.custom as { resolvedProperty?: Property };
-
-    const isArray = resolvedProperty?.type === "array";
-    const ofVal = isArray && resolvedProperty ? resolvedProperty.of : undefined;
-    const baseProperty: Property | undefined = isArray ? (Array.isArray(ofVal) ? ofVal[0] : ofVal) : resolvedProperty;
-    if (!baseProperty) {
-        return null;
-    }
-    if (baseProperty.type === "reference") {
-        return <ReferenceFilterField value={filterValue}
-            setValue={setFilterValue}
-            name={id as string}
-            isArray={isArray}
-            path={baseProperty.path}
-            title={resolvedProperty?.name}
-            includeId={baseProperty.includeId}
-            previewProperties={baseProperty?.ui?.previewProperties}
-            hidden={hidden}
-            setHidden={setHidden}/>;
-    } else if (baseProperty.type === "relation" && baseProperty.relation) {
-        return <RelationFilterField value={filterValue as [VirtualTableWhereFilterOp, EntityRelation | EntityRelation[] | null]}
-            setValue={setFilterValue}
-            name={id as string}
-            relation={baseProperty.relation}
-            hidden={hidden}
-            setHidden={setHidden}/>;
-    } else if (baseProperty.type === "number" || baseProperty.type === "string") {
-        const name = baseProperty.name;
-        const enumValues = baseProperty.enum ? enumToObjectEntries(baseProperty.enum) : undefined;
-        return <StringNumberFilterField value={filterValue}
-            setValue={setFilterValue}
-            name={id as string}
-            type={baseProperty.type}
-            isArray={isArray}
-            enumValues={enumValues}
-            title={name}/>;
-    } else if (baseProperty.type === "boolean") {
-        const name = baseProperty.name;
-        return <BooleanFilterField value={filterValue}
-            setValue={setFilterValue}
-            name={id as string}
-            title={name}/>;
-
-    } else if (baseProperty.type === "date") {
-        const title = baseProperty.name;
-        return <DateTimeFilterField value={filterValue}
-            setValue={setFilterValue}
-            name={id as string}
-            mode={baseProperty.mode}
-            isArray={isArray}
-            title={title}/>;
-    }
-
-    return (
-        <div>{`Currently the filter field ${resolvedProperty?.type} is not supported`}</div>
-    );
-}
 

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
-import { EntityCollectionTableController } from "@rebasepro/core";
+import { DataCollectionTableController } from "@rebasepro/app";
 
-export const SelectableTableContext = React.createContext<EntityCollectionTableController<Record<string, unknown>>>(null! as EntityCollectionTableController<Record<string, unknown>>);
+export const SelectableTableContext = React.createContext<DataCollectionTableController<Record<string, unknown>>>(null! as DataCollectionTableController<Record<string, unknown>>);
 
 export const useSelectableTableController = <M extends Record<string, unknown> = Record<string, unknown>>() =>
-    useContext(SelectableTableContext) as unknown as EntityCollectionTableController<M>;
+    useContext(SelectableTableContext) as unknown as DataCollectionTableController<M>;

package/src/components/SelectableTable/SelectionStore.ts

@@ -22,7 +22,7 @@ export function createSelectionStore() {
 export type SelectionStore = VirtualTableSelectionStore<AdminSelectedCell>;
 
 export function useCellSelected(
-    store: { getSnapshot: () => SelectedCellProps | undefined; subscribe: (listener: () => void) => () => void },
+    store: { getEntity: () => SelectedCellProps | undefined; subscribe: (listener: () => void) => () => void },
     propertyKey: string,
     entityPath: string,
     entityId: string | number
@@ -30,8 +30,8 @@ export function useCellSelected(
     const selectorRef = useRef({ propertyKey, entityPath, entityId });
     selectorRef.current = { propertyKey, entityPath, entityId };
 
-    const getSnapshot = useCallback(() => {
-        const cell = store.getSnapshot();
+    const getEntity = useCallback(() => {
+        const cell = store.getEntity();
         if (!cell) return false;
         const s = selectorRef.current;
         return cell.propertyKey === s.propertyKey &&
@@ -39,5 +39,5 @@ export function useCellSelected(
             cell.entityId === s.entityId;
     }, [store]);
 
-    return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+    return useSyncExternalStore(store.subscribe, getEntity, getEntity);
 }

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -1,23 +1,31 @@
 import React from "react";
 import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { BooleanSwitchWithLabel } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 
 interface BooleanFieldProps {
     name: string,
     value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
     setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: unknown]) => void;
     title?: string;
+    /**
+     * Restrict the offered operators. This field only ever emits `["==", …]`,
+     * so it renders nothing when `==` is not allowed.
+     */
+    operators?: readonly VirtualTableWhereFilterOp[];
 }
 
 export function BooleanFilterField({
     name,
     title,
     value,
-    setValue
+    setValue,
+    operators
 }: BooleanFieldProps) {
     const { t } = useTranslation();
 
+    if (operators && !operators.includes("==")) return null;
+
     function updateFilter(val?: boolean) {
         if (val !== undefined) {
             setValue(

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { DateTimeField, Select, SelectItem } from "@rebasepro/ui";
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 
 interface DateTimeFilterFieldProps {
     name: string,
@@ -11,9 +11,15 @@ interface DateTimeFilterFieldProps {
     isArray?: boolean;
     title?: string;
     timezone?: string;
+    /**
+     * Restrict the offered operators (already resolved against engine
+     * capabilities and property config). When omitted, all operators this
+     * field can render are offered.
+     */
+    operators?: readonly VirtualTableWhereFilterOp[];
 }
 
-const operationLabels: Record<VirtualTableWhereFilterOp | "is-null", string> = {
+const operationLabels: Partial<Record<VirtualTableWhereFilterOp, string>> = {
     "==": "==",
     "!=": "!=",
     ">": ">",
@@ -24,7 +30,8 @@ const operationLabels: Record<VirtualTableWhereFilterOp | "is-null", string> = {
     in: "in",
     "array-contains": "Contains",
     "array-contains-any": "Any",
-    "is-null": "Is null"
+    "is-null": "Is null",
+    "is-not-null": "Is not null"
 };
 
 const multipleSelectOperations = ["array-contains-any", "in"];
@@ -36,26 +43,40 @@ export function DateTimeFilterField({
     value,
     setValue,
     title,
-    timezone
+    timezone,
+    operators
 }: DateTimeFilterFieldProps) {
 
     const { locale } = useCustomizationController();
-    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+    let possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null", "is-not-null"];
+
+    if (operators) {
+        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
+    }
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
+    // Read back both the canonical null operators and the legacy `["==", null]` /
+    // `["!=", null]` form saved by older filter presets.
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(
+        fieldOperation === "==" && fieldValue === null ? "is-null"
+            : fieldOperation === "!=" && fieldValue === null ? "is-not-null"
+                : fieldOperation
+    );
     const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue as Date | null | undefined);
 
-    const isNullOperation = operation === "is-null";
+    const isNullOperation = operation === "is-null" || operation === "is-not-null";
+
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
 
-    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: Date | undefined | null) {
-        // Handle "is null" operation
-        if (op === "is-null") {
+    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
+        // Null-testing operators ignore their value.
+        if (op === "is-null" || op === "is-not-null") {
             setOperation(op);
             setInternalValue(null);
-            setValue(["==", null]);
+            setValue([op, null]);
             return;
         }
 
@@ -91,7 +112,7 @@ export function DateTimeFilterField({
                     size={"medium"}
                     fullWidth={true}
                     onValueChange={(value) => {
-                        updateFilter(value as VirtualTableWhereFilterOp | "is-null", internalValue);
+                        updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                     }}
                     renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (

package/src/components/SelectableTable/filters/FilterFieldBinding.tsx

@@ -0,0 +1,187 @@
+import React, { Suspense } from "react";
+import {
+    ArrayProperty,
+    FilterFieldBindingProps,
+    Property,
+    ReferenceProperty,
+    RelationProperty,
+    WhereFilterOp
+} from "@rebasepro/types";
+import { enumToObjectEntries, resolveFilterOperators } from "@rebasepro/common";
+import { useCollectionScope, useComponentOverride, useResolvedComponent } from "@rebasepro/app";
+import { StringNumberFilterField } from "./StringNumberFilterField";
+import { BooleanFilterField } from "./BooleanFilterField";
+import { DateTimeFilterField } from "./DateTimeFilterField";
+import { ReferenceFilterField } from "./ReferenceFilterField";
+import { RelationFilterField } from "./RelationFilterField";
+
+export interface FilterFieldBindingInput {
+    /** Key of the property being filtered (the column id). */
+    propertyKey: string;
+    /** The raw property — array properties are unwrapped internally. */
+    property: Property;
+    /**
+     * Engine backing the collection (`collection.engine`). Drives which
+     * operators the engine can execute. Usually omitted — it is read from
+     * the surrounding {@link CollectionScopeProvider}; pass it explicitly
+     * only when rendering outside any collection scope.
+     */
+    engine?: string;
+    value?: [WhereFilterOp, unknown];
+    setValue: (value?: [WhereFilterOp, unknown]) => void;
+    /** Coordination flags for fields that open their own dialogs. */
+    hidden?: boolean;
+    setHidden?: (hidden: boolean) => void;
+}
+
+/**
+ * The single entry point for rendering a collection filter field.
+ * Used by both the table header filters ({@link SelectableTable}) and the
+ * Filters dialog.
+ *
+ * Resolution order:
+ * 1. `property.ui.Filter` — per-property replacement (rendered even when the
+ *    resolved operator list is empty; the component owns filterability).
+ * 2. `components["Collection.FilterField"]` — collection-level or app-level
+ *    override (wrap mode supported via `OriginalComponent`).
+ * 3. Built-in field dispatched by property type.
+ *
+ * The operators handed to the field are the intersection of the engine's
+ * capabilities, the property-type defaults, and `property.ui.filterOperators`
+ * (see `resolveFilterOperators`). When that intersection is empty and no
+ * per-property `Filter` is set, nothing is rendered.
+ *
+ * @group Components
+ */
+export function FilterFieldBinding({
+    propertyKey,
+    property,
+    engine,
+    value,
+    setValue,
+    hidden,
+    setHidden
+}: FilterFieldBindingInput): React.ReactNode {
+
+    const isArray = property.type === "array";
+    const ofVal = isArray ? (property as ArrayProperty).of : undefined;
+    const baseProperty: Property | undefined = isArray
+        ? (Array.isArray(ofVal) ? ofVal[0] : ofVal) as Property | undefined
+        : property;
+
+    // Hooks must run unconditionally — before any early return.
+    const scopeCollection = useCollectionScope();
+    const ResolvedFilterField = useComponentOverride<FilterFieldBindingProps>("Collection.FilterField", DefaultFilterField);
+    const PropertyFilter = useResolvedComponent<FilterFieldBindingProps>(baseProperty?.ui?.Filter);
+
+    if (!baseProperty) return null;
+
+    const operators = resolveFilterOperators({
+        property: baseProperty,
+        isArray,
+        engine: engine ?? scopeCollection?.engine
+    });
+
+    const bindingProps: FilterFieldBindingProps = {
+        propertyKey,
+        property: baseProperty,
+        isArray,
+        operators,
+        value,
+        setValue,
+        title: property.name,
+        hidden,
+        setHidden
+    };
+
+    // 1. Per-property replacement — always rendered, the dev owns filterability.
+    if (PropertyFilter) {
+        return (
+            <Suspense fallback={null}>
+                <PropertyFilter {...bindingProps}/>
+            </Suspense>
+        );
+    }
+
+    // 2/3. Override or built-in — only when the property is filterable here.
+    if (operators.length === 0) return null;
+
+    return <ResolvedFilterField {...bindingProps}/>;
+}
+
+/**
+ * Built-in filter field dispatch by property type. This is the
+ * `OriginalComponent` received by `"Collection.FilterField"` overrides in
+ * wrap mode.
+ */
+function DefaultFilterField({
+    propertyKey,
+    property,
+    isArray,
+    operators,
+    value,
+    setValue,
+    title,
+    hidden,
+    setHidden
+}: FilterFieldBindingProps): React.ReactNode {
+
+    if (property.type === "reference") {
+        const referenceProperty = property as ReferenceProperty;
+        return <ReferenceFilterField value={value}
+            setValue={setValue}
+            name={propertyKey}
+            isArray={isArray}
+            operators={operators}
+            path={referenceProperty.path}
+            title={title}
+            includeId={referenceProperty.includeId}
+            previewProperties={referenceProperty.ui?.previewProperties}
+            hidden={hidden ?? false}
+            setHidden={setHidden ?? (() => undefined)}/>;
+    }
+
+    if (property.type === "relation") {
+        const relation = (property as RelationProperty).relation;
+        if (!relation) return null;
+        return <RelationFilterField value={value as never}
+            setValue={setValue}
+            name={propertyKey}
+            operators={operators}
+            relation={relation}
+            hidden={hidden ?? false}
+            setHidden={setHidden ?? (() => undefined)}/>;
+    }
+
+    if (property.type === "number" || property.type === "string") {
+        const enumValues = property.enum ? enumToObjectEntries(property.enum) : undefined;
+        return <StringNumberFilterField value={value}
+            setValue={setValue}
+            name={propertyKey}
+            type={property.type}
+            isArray={isArray}
+            operators={operators}
+            enumValues={enumValues}
+            title={title}/>;
+    }
+
+    if (property.type === "boolean") {
+        return <BooleanFilterField value={value}
+            setValue={setValue}
+            name={propertyKey}
+            operators={operators}
+            title={title}/>;
+    }
+
+    if (property.type === "date") {
+        return <DateTimeFilterField value={value}
+            setValue={setValue}
+            name={propertyKey}
+            mode={property.mode}
+            isArray={isArray}
+            operators={operators}
+            title={title}/>;
+    }
+
+    return null;
+}