@rebasepro/admin 0.7.0 → 0.9.0

package/src/collection_editor/useLocalCollectionsConfigController.tsx

@@ -1,12 +1,12 @@
 import { CollectionsConfigController, SaveCollectionParams, UpdateCollectionParams, DeleteCollectionParams, SavePropertyParams, DeletePropertyParams, UpdatePropertiesOrderParams } from "./types/config_controller";
-import { EntityCollection, Properties } from "@rebasepro/types";
+import { CollectionConfig, Properties } from "@rebasepro/types";
 import { getSubcollections } from "@rebasepro/common";
 
 
 import React, { useMemo, useRef } from "react";
 export function useLocalCollectionsConfigController(
     clientOrUrl: any,
-    baseCollections: EntityCollection[] = [],
+    baseCollections: CollectionConfig[] = [],
     options?: {
         readOnly?: boolean;
         getAuthToken?: () => Promise<string | null>;
@@ -73,7 +73,7 @@ export function useLocalCollectionsConfigController(
         readOnlyReason: "Local collection editing is only available in development mode.",
         collections: parsedCollections,
         getCollection: (id: string) => {
-            const found = parsedCollections.find(c => (c as EntityCollection & { id?: string }).id === id || c.slug === id);
+            const found = parsedCollections.find(c => (c as CollectionConfig & { id?: string }).id === id || c.slug === id);
             if (found) return found;
             throw Error(`Collection ${id} not found in local mode`);
         },
@@ -109,7 +109,7 @@ collectionData: { propertiesOrder: newPropertiesOrder } });
         },
 
         updatePropertiesOrder: async ({ collection, fullPath, newPropertiesOrder }: UpdatePropertiesOrderParams) => {
-            const collectionId = (collection as EntityCollection & { id?: string }).id || fullPath.split("/").pop();
+            const collectionId = (collection as CollectionConfig & { id?: string }).id || fullPath.split("/").pop();
             await request("/collection/save", { collectionId,
 collectionData: { propertiesOrder: newPropertiesOrder } });
         },

package/src/collection_editor/validateCollectionJson.ts

@@ -1,4 +1,4 @@
-import { DataType, EntityCollection } from "@rebasepro/types";
+import { DataType, CollectionConfig } from "@rebasepro/types";
 
 
 /**
@@ -33,7 +33,7 @@ export interface CollectionValidationError {
 export interface CollectionValidationResult {
     valid: boolean;
     errors: CollectionValidationError[];
-    collection?: EntityCollection;
+    collection?: CollectionConfig;
 }
 
 /**
@@ -461,6 +461,6 @@ export function validateCollectionJson(jsonString: string): CollectionValidation
     return {
         valid: errors.length === 0,
         errors,
-        collection: errors.length === 0 ? parsed as unknown as EntityCollection : undefined
+        collection: errors.length === 0 ? parsed as unknown as CollectionConfig : undefined
     };
 }

package/src/components/CollectionPanel.tsx

@@ -1,14 +1,14 @@
-import type { EntityCollection, ViewMode } from "@rebasepro/types";
+import type { CollectionConfig, ViewMode } from "@rebasepro/types";
 import React, { useMemo } from "react";
-import { EntityCollectionView } from "./EntityCollectionView/EntityCollectionView";
+import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBinding";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { Typography } from "@rebasepro/ui";
-import { useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
+import { useComponentOverride, CollectionScopeProvider } from "@rebasepro/core";
 
 /**
  * Props for the {@link CollectionPanel} component.
  *
- * This is a high-level, consumer-friendly wrapper around {@link EntityCollectionView}
+ * This is a high-level, consumer-friendly wrapper around {@link CollectionViewBinding}
  * designed for embedding collection views inside custom pages (home pages,
  * dashboards, entity detail views, etc.).
  *
@@ -53,7 +53,7 @@ export type CollectionPanelProps = {
     updateUrl?: boolean;
 
     /**
-     * Override the entity open mode when clicking an entity.
+     * Override the entity open mode when clicking a entity.
      */
     openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 
@@ -66,7 +66,7 @@ export type CollectionPanelProps = {
      * Any additional collection-level overrides (e.g. `previewProperties`,
      * `enabledViews`, `entityActions`, `defaultFilter`, etc.).
      */
-    collectionOverrides?: Partial<EntityCollection>;
+    collectionOverrides?: Partial<CollectionConfig>;
 };
 
 /**
@@ -101,8 +101,8 @@ function CollectionPanelInner({
     title,
     updateUrl,
     className
-}: CollectionPanelProps & { mergedCollection: EntityCollection }) {
-    const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
+}: CollectionPanelProps & { mergedCollection: CollectionConfig }) {
+    const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
 
     return (
         <div className={className}>
@@ -150,7 +150,7 @@ export function CollectionPanel(props: CollectionPanelProps) {
             ...registeredCollection,
             ...(collectionOverrides ?? {}),
             ...propOverrides
-        } as EntityCollection;
+        } as CollectionConfig;
     }, [registeredCollection, collectionOverrides, viewMode, sort, limit, openEntityMode]);
 
     if (!mergedCollection) {
@@ -170,12 +170,9 @@ export function CollectionPanel(props: CollectionPanelProps) {
         />
     );
 
-    if (mergedCollection.components) {
-        return (
-            <CollectionComponentOverrideProvider overrides={mergedCollection.components}>
-                {content}
-            </CollectionComponentOverrideProvider>
-        );
-    }
-    return content;
+    return (
+        <CollectionScopeProvider collection={mergedCollection}>
+            {content}
+        </CollectionScopeProvider>
+    );
 }

package/src/components/{EntityCollectionTable/EntityCollectionRowActions.tsx → CollectionTableBinding/CollectionRowActions.tsx}

@@ -1,4 +1,4 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { EntityAction } from "@rebasepro/types";
 import React, { MouseEvent, useCallback } from "react";
 
@@ -32,7 +32,7 @@ import { useCMSContext } from "../../index";
  *
  * @group Collection components
  */
-export const EntityCollectionRowActions = function EntityCollectionRowActions({
+export const CollectionRowActions = function CollectionRowActions({
     entity,
     collection,
     path,
@@ -56,7 +56,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 }:
     {
         entity: Entity<any>,
-        collection?: EntityCollection<any>,
+        collection?: CollectionConfig<any>,
         path?: string,
         width: number,
         frozen?: boolean,
@@ -80,7 +80,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
 
     const context = useCMSContext();
-    const sideEntityCtrl = context.sideEntityController;
+    const sidePanelCtrl = context.sidePanelController;
     const { t } = useTranslation();
 
     const onCheckedChange = useCallback((checked: boolean) => {
@@ -131,7 +131,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                     path,
                                     collection,
                                     context,
-                                    sideEntityController: sideEntityCtrl,
+                                    sidePanelController: sidePanelCtrl,
                                     selectionController,
                                     highlightEntity,
                                     unhighlightEntity,
@@ -175,7 +175,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                             path,
                                             collection,
                                             context,
-                                            sideEntityController: sideEntityCtrl,
+                                            sidePanelController: sidePanelCtrl,
                                             selectionController,
                                             highlightEntity,
                                             unhighlightEntity,

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

@@ -5,9 +5,9 @@ import { PropertyTableCell } from "./PropertyTableCell";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { useRebaseContext, useLargeLayout } from "@rebasepro/core";
 import { CellRendererParams, VirtualTableColumn } from "@rebasepro/ui";
-import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
+import { CollectionRowActions } from "./CollectionRowActions";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
-import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
+import { CollectionTableBindingProps } from "./CollectionTableBindingProps";
 import { EntityTableCell } from "./internal/EntityTableCell";
 import { CustomFieldValidator } from "../../form/validation";
 import { renderSkeletonText } from "../../preview";
@@ -22,27 +22,27 @@ import { getValueInPath } from "@rebasepro/utils";
  * 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
  */
-export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, unknown> = any, USER extends User = any>
+export const CollectionTableBinding = function CollectionTableBinding<M extends Record<string, unknown> = Record<string, unknown>, USER extends User = User>
     ({
         className,
         style,
@@ -82,7 +82,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         openEntityMode = "side_panel",
         onColumnsOrderChange,
         hideToolbar = false
-    }: EntityCollectionTableProps<M>) {
+    }: CollectionTableBindingProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
 
@@ -113,7 +113,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, USER>> = useMemo(() => {
         return (additionalFields
             ? additionalFields
-                .map((aC) => ({ [aC.key]: aC as AdditionalFieldDelegate<M, any> }))
+                .map((aC) => ({ [aC.key]: aC as AdditionalFieldDelegate<M, USER> }))
                 .reduce((a, b) => ({ ...a,
 ...b }), {})
             : {}) as Record<string, AdditionalFieldDelegate<M, USER>>;
@@ -132,9 +132,10 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         isDragging,
         isDraggable,
         frozen
-    }: CellRendererParams<any>) => {
+    }: CellRendererParams<Entity<M>>) => {
 
-        const entity: Entity<M> = rowData;
+        const entity: Entity<M> | undefined = rowData;
+        if (!entity) return null;
 
         const propertyKey = column.key;
 
@@ -192,9 +193,10 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         isDragging,
         isDraggable,
         frozen
-    }: CellRendererParams<any>) => {
+    }: CellRendererParams<Entity<M>>) => {
 
-        const entity: Entity<M> = rowData;
+        const entity: Entity<M> | undefined = rowData;
+        if (!entity) return null;
 
         const additionalField = additionalFieldsMap[column.key as string];
         const value = additionalField.dependencies
@@ -293,7 +295,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             : collectionColumns) as VirtualTableColumn[]
     ], [idColumn, displayedColumnIds, collectionColumns]);
 
-    const cellRenderer = useCallback((props: CellRendererParams<any>) => {
+    const cellRenderer = useCallback((props: CellRendererParams<Entity<M>>) => {
         const column = props.column;
         const columns = props.columns;
         const columnKey = column.key;
@@ -302,13 +304,13 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             if (props.columnIndex === 0) {
                 if (tableRowActionsBuilder)
                     return tableRowActionsBuilder({
-                        entity: props.rowData,
+                        entity: props.rowData!,
                         size,
                         width: column.width,
                         frozen: column.frozen
                     });
                 else
-                    return <EntityCollectionRowActions entity={props.rowData}
+                    return <CollectionRowActions entity={props.rowData!}
                         width={column.width}
                         frozen={column.frozen}
                         isSelected={false}

package/src/components/{EntityCollectionTable/EntityCollectionTableProps.tsx → CollectionTableBinding/CollectionTableBindingProps.tsx}

@@ -9,7 +9,7 @@ import { VirtualTableColumn } from "@rebasepro/ui";
 /**
  * @group Collection components
  */
-export type EntityCollectionTableProps<M extends Record<string, unknown>,
+export type CollectionTableBindingProps<M extends Record<string, unknown>,
     USER extends User = User> = {
 
         className?: string;

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableMultipleRelationField.tsx

@@ -1,5 +1,6 @@
-import { useEntitySelectionDialog } from "../../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
+import { getCollectionDataPath } from "@rebasepro/types";
 import React, { useCallback } from "react";
 import { deepEqual as equal } from "fast-equals";
 
@@ -10,7 +11,7 @@ import { RelationPreview } from "../../../preview";
 import { CollectionSize, Entity, EntityRelation, FilterValues, Relation } from "@rebasepro/types";
 import { } from "@rebasepro/core";
 import { ErrorView } from "@rebasepro/core";
-import { EntityPreviewContainer } from "../../EntityPreview";
+import { EntityPreviewContainer } from "../../EntityPreviewBinding";
 
 type TableMultipleRelationFieldProps = {
     name: string;
@@ -33,7 +34,7 @@ export function TableMultipleRelationField(props: TableMultipleRelationFieldProp
 
 export const TableMultipleRelationFieldInternal = React.memo(
     function TableMultipleRelationFieldInternal(props: TableMultipleRelationFieldProps & {
-        collection: EntityCollection;
+        collection: CollectionConfig;
     }) {
         const {
             name,
@@ -56,9 +57,9 @@ export const TableMultipleRelationFieldInternal = React.memo(
 
         const selectedEntityIds = value.map((ref) => ref.id);
 
-        const relationDialogController = useEntitySelectionDialog({
+        const relationDialogController = useSelectionDialog({
             multiselect: true,
-            path: collection.slug,
+            path: getCollectionDataPath(collection),
             collection,
             onMultipleEntitiesSelected,
             selectedEntityIds,

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableReferenceField.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 React, { useCallback } from "react";
 import { deepEqual as equal } from "fast-equals"
 
@@ -7,9 +7,9 @@ import { ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityReference, FilterValues } from "@rebasepro/types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
-import { useComponentOverride, ErrorView, CollectionComponentOverrideProvider } from "@rebasepro/core";
+import { useComponentOverride, ErrorView, CollectionScopeProvider } from "@rebasepro/core";
 import { cls, PencilIcon } from "@rebasepro/ui";
-import { EntityPreviewContainer } from "../../EntityPreview";
+import { EntityPreviewContainer } from "../../EntityPreviewBinding";
 import { getReferenceFrom } from "@rebasepro/common";
 import { useCollectionRegistryController } from "../../../index";
 
@@ -30,7 +30,7 @@ type TableReferenceFieldProps = {
 
 const DefaultMissingReference: React.FC<{ path: string }> = () => null;
 
-function TableReferenceFieldResolver(props: TableReferenceFieldProps & { collection: EntityCollection | undefined }) {
+function TableReferenceFieldResolver(props: TableReferenceFieldProps & { collection: CollectionConfig | undefined }) {
     const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
     const { path, collection } = props;
 
@@ -56,11 +56,11 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
         />
     );
 
-    if (collection?.components) {
+    if (collection) {
         return (
-            <CollectionComponentOverrideProvider overrides={collection.components}>
+            <CollectionScopeProvider collection={collection}>
                 {content}
-            </CollectionComponentOverrideProvider>
+            </CollectionScopeProvider>
         );
     }
     return content;
@@ -68,7 +68,7 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
 
 export const TableReferenceFieldInternal = React.memo(
     function TableReferenceFieldInternal(props: TableReferenceFieldProps & {
-        collection: EntityCollection;
+        collection: CollectionConfig;
     }) {
         const {
             name,
@@ -100,7 +100,7 @@ export const TableReferenceFieldInternal = React.memo(
                 : internalValue.id ? [internalValue.id] : [])
             : [];
 
-        const referenceDialogController = useEntitySelectionDialog({
+        const referenceDialogController = useSelectionDialog({
             multiselect,
             path,
             collection,

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableRelationField.tsx

@@ -1,5 +1,6 @@
-import { useEntitySelectionDialog } from "../../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
+import { getCollectionDataPath } from "@rebasepro/types";
 import React, { useCallback } from "react";
 import { deepEqual as equal } from "fast-equals"
 
@@ -10,7 +11,7 @@ import { getPreviewSizeFrom } from "../../../preview/util";
 import { } from "@rebasepro/core";
 import { ErrorView } from "@rebasepro/core";
 import { cls, PencilIcon } from "@rebasepro/ui";
-import { EntityPreviewContainer } from "../../EntityPreview";
+import { EntityPreviewContainer } from "../../EntityPreviewBinding";
 import { getRelationFrom, normalizeToEntityRelation } from "@rebasepro/common";
 import { TableMultipleRelationField } from "./TableMultipleRelationField";
 
@@ -56,7 +57,7 @@ export function TableRelationField(props: TableRelationFieldProps) {
 
 export const TableRelationFieldInternal = React.memo(
     function TableRelationFieldInternal(props: TableRelationFieldProps & {
-        collection: EntityCollection;
+        collection: CollectionConfig;
     }) {
         const {
             name,
@@ -88,9 +89,9 @@ export const TableRelationFieldInternal = React.memo(
                 : internalValue.id ? [internalValue.id] : [])
             : [];
 
-        const relationDialogController = useEntitySelectionDialog({
+        const relationDialogController = useSelectionDialog({
             multiselect,
-            path: collection.slug,
+            path: getCollectionDataPath(collection),
             collection,
             onMultipleEntitiesSelected,
             onSingleEntitySelected,

package/src/components/{EntityCollectionTable → CollectionTableBinding}/fields/TableStorageUpload.tsx

@@ -8,7 +8,7 @@ import { useDropzone } from "react-dropzone";
 import { PropertyPreview } from "../../../preview";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { cls, IconButton, PencilIcon, Typography } from "@rebasepro/ui";
-import { useSnackbarController, useStorageSource, useTranslation, StorageFieldItem, useStorageUploadController } from "@rebasepro/core";
+import { useSnackbarController, useStorageSource, useTranslation, StorageFieldItem, useStorageUploadController, StorageSourceContext } from "@rebasepro/core";
 import { getThumbnailMeasure } from "../../../preview/util";
 import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
 import { EntityTableCellActions } from "../internal/EntityTableCellActions";
@@ -64,7 +64,8 @@ export function TableStorageUpload(props: {
         storage,
         onFileUploadComplete,
         storagePathBuilder,
-        multipleFilesSupported
+        multipleFilesSupported,
+        resolvedStorageSource
     } = useStorageUploadController({
         entityValues: entity.values,
         entityId: entity.id,
@@ -79,24 +80,26 @@ export function TableStorageUpload(props: {
 
     return (
 
-        <StorageUpload
-            internalValue={internalValue}
-            setInternalValue={setInternalValue}
-            name={propertyKey}
-            disabled={disabled}
-            autoFocus={false}
-            openPopup={openPopup}
-            error={error}
-            selected={selected}
-            property={property}
-            onChange={updateValue}
-            entity={entity}
-            storagePathBuilder={storagePathBuilder}
-            storage={storage}
-            multipleFilesSupported={multipleFilesSupported}
-            onFilesAdded={onFilesAdded}
-            onFileUploadComplete={onFileUploadComplete}
-            previewSize={previewSize}/>
+        <StorageSourceContext.Provider value={resolvedStorageSource}>
+            <StorageUpload
+                internalValue={internalValue}
+                setInternalValue={setInternalValue}
+                name={propertyKey}
+                disabled={disabled}
+                autoFocus={false}
+                openPopup={openPopup}
+                error={error}
+                selected={selected}
+                property={property}
+                onChange={updateValue}
+                entity={entity}
+                storagePathBuilder={storagePathBuilder}
+                storage={storage}
+                multipleFilesSupported={multipleFilesSupported}
+                onFilesAdded={onFilesAdded}
+                onFileUploadComplete={onFileUploadComplete}
+                previewSize={previewSize}/>
+        </StorageSourceContext.Provider>
 
     );
 }

package/src/components/CollectionTableBinding/index.tsx

@@ -0,0 +1,14 @@
+export {
+    CollectionTableBinding
+} from "./CollectionTableBinding";
+
+export type {
+    CollectionTableBindingProps
+} from "./CollectionTableBindingProps";
+
+export * from "./PropertyTableCell";
+export * from "./CollectionRowActions";
+
+export * from "./column_utils";
+
+export { VirtualTableInput } from "@rebasepro/ui";

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" {
@@ -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,5 +1,5 @@
 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";
@@ -24,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;

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

@@ -1,12 +1,14 @@
 import React from "react";
 import { ArrayProperty, DateProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, ReferenceProperty, RelationProperty, StringProperty } from "@rebasepro/types";
-import { TableSize } from "@rebasepro/core";
+import { TableSize, useCustomizationController } from "@rebasepro/core";
+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";
@@ -63,33 +65,7 @@ export function getTableBindingForProperty(
 ): TableFieldConfig | undefined {
     const isAStorageProperty = isStorageProperty(property);
 
-    if (property.type === "string" && (property as StringProperty).reference?.path) {
-        return {
-            Component: ({ propertyKey, property, internalValue, updateValue, disabled, size, path }: TableFieldBindingProps) => {
-                const referenceProperty = (property as StringProperty).reference;
-                if (!referenceProperty) return null;
-                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.ui?.previewProperties}
-                        includeId={referenceProperty.includeId}
-                        includeEntityLink={referenceProperty.includeEntityLink}
-                        title={property.name}
-                        fixedFilter={referenceProperty.fixedFilter}
-                    />
-                );
-            },
-            allowScroll: false
-        };
-    } else if (isAStorageProperty) {
+    if (isAStorageProperty) {
         return {
             Component: ({ validationError, error, disabled, selected, openPopup, property, entity, path, internalValue, size, updateValue, propertyKey }: TableFieldBindingProps) => (
                 <TableStorageUpload
@@ -183,7 +159,7 @@ export function getTableBindingForProperty(
                 ),
                 fullHeight: true
             };
-        } else if (stringProperty.ui?.markdown || !stringProperty.storage || !stringProperty.reference) {
+        } 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 }: TableFieldBindingProps) => (
@@ -213,17 +189,21 @@ export function getTableBindingForProperty(
         };
     } else if (property.type === "date") {
         return {
-            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: TableFieldBindingProps) => (
-                <VirtualTableDateField
-                    name={propertyKey}
-                    error={validationError ?? error}
-                    disabled={disabled}
-                    mode={(property as DateProperty).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