@rebasepro/admin 0.1.0 → 0.2.1

package/src/components/ClearFilterSortButton.tsx

@@ -1,5 +1,4 @@
-import { Button, Tooltip , iconSize } from "@rebasepro/ui";
-import { FilterXIcon } from "lucide-react";
+import { Button, FilterXIcon, iconSize, Tooltip } from "@rebasepro/ui";
 import { EntityTableController } from "@rebasepro/types";
 import { useTranslation } from "@rebasepro/core";
 

package/src/components/CollectionEditorDialogs.tsx

@@ -47,7 +47,7 @@ export function CollectionEditorDialogs() {
                 <CollectionEditorDialog
                     open={false}
                     isNewCollection={false}
-                    configController={{} as any}
+                    configController={undefined!}
                     handleClose={() => {}}
                     {...collectionDialogProps}
                 />

package/src/components/DefaultAppBar.tsx

@@ -4,10 +4,22 @@ import React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { RebaseLogo, LanguageToggle } from "@rebasepro/core";
 import { ErrorBoundary , iconSize } from "@rebasepro/ui";
-import { MoonIcon, SunIcon, SettingsIcon, SunMoonIcon, LogOutIcon } from "lucide-react";
-import { Avatar, cls, IconButton, Menu, MenuItem, Skeleton, Typography } from "@rebasepro/ui";
+import {
+    Avatar,
+    cls,
+    IconButton,
+    LogOutIcon,
+    Menu,
+    MenuItem,
+    MoonIcon,
+    SettingsIcon,
+    Skeleton,
+    SunIcon,
+    SunMoonIcon,
+    Typography
+} from "@rebasepro/ui";
 import { useAuthController, useLargeLayout, useModeController, useAdminModeController, useTranslation } from "@rebasepro/core";
-import { useUrlController } from "../hooks";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { User } from "@rebasepro/types";
 import { useApp } from "./app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";

package/src/components/DefaultDrawer.tsx

@@ -2,13 +2,13 @@ import type { NavigationEntry, NavigationResult } from "@rebasepro/types";
 import React, { useMemo } from "react";
 
 import { useCollapsedGroups, buildCollapsedDefaults, useLargeLayout, useAdminModeController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry } from "@rebasepro/core";
-import { useNavigationStateController, useUrlController } from "../hooks";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
 
 
 import { Link, useNavigate } from "react-router-dom";
 import { AnalyticsEvent } from "@rebasepro/types";
-import { cls, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import { ChevronsLeftIcon, ChevronsRightIcon, cls, iconSize, Tooltip, Typography } from "@rebasepro/ui";
 import { DrawerNavigationGroup } from "./DrawerNavigationGroup";
 import { RebaseLogo } from "@rebasepro/core";
 import { useApp } from "./app/useApp";

package/src/components/DrawerNavigationGroup.tsx

@@ -1,7 +1,6 @@
 import type { NavigationEntry } from "@rebasepro/types";
 import React from "react";
-import { cls, iconSize, Typography } from "@rebasepro/ui";
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon, cls, iconSize, Typography } from "@rebasepro/ui";
 ;
 import { IconForView } from "@rebasepro/core";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -3,12 +3,21 @@ import type { EntityAction } from "@rebasepro/types";
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, SelectionController } from "@rebasepro/types";
-import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, Skeleton, Tooltip } from "@rebasepro/ui";
-import { MoreVerticalIcon } from "lucide-react";
-import { useRebaseContext, useLargeLayout, useTranslation } from "@rebasepro/core";
+import {
+    Badge,
+    Checkbox,
+    cls,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVerticalIcon,
+    Skeleton,
+    Tooltip
+} from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
 import { getEntityFromCache } from "@rebasepro/core";
 import { getLocalChangesBackup } from "@rebasepro/common";
-import { useSideEntityController, useCMSContext } from "../../index";
+import { useCMSContext } from "../../index";
 
 /**
  *
@@ -60,7 +69,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
         selectionController?: SelectionController;
         highlightEntity?: (entity: Entity<any>) => void;
         unhighlightEntity?: (entity: Entity<any>) => void;
-        openEntityMode: "side_panel" | "full_screen" | "split";
+        openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
         // Sortable props for dnd-kit integration
         sortableNodeRef?: (node: HTMLElement | null) => void;
         sortableStyle?: React.CSSProperties;
@@ -69,7 +78,6 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
         isDraggable?: boolean;
     }) {
 
-    const largeLayout = useLargeLayout();
 
     const context = useCMSContext();
     const sideEntityCtrl = context.sideEntityController;
@@ -91,8 +99,10 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const content = (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-800 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-800/90 z-10",
-                "h-full flex items-center justify-center flex-col bg-surface-50/90 dark:bg-surface-800/90 z-10",
+                "h-full flex items-center justify-center flex-col z-10",
+                isSelected
+                    ? "bg-surface-accent-50 dark:bg-surface-accent-900"
+                    : "bg-surface-50/90 dark:bg-surface-900/90",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: React.MouseEvent) => {
@@ -219,7 +229,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 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/EntityCollectionTable.tsx

@@ -213,7 +213,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             : <>
                 {additionalField.value?.({
                     entity,
-                    context: context as unknown as RebaseContext
+                    context: context as RebaseContext
                 })?.toString()}
             </>;
 
@@ -350,7 +350,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         <div ref={ref}
             style={style}
-            className={cls("h-full w-full flex flex-col bg-white dark:bg-surface-800", className)}>
+            className={cls("h-full w-full flex flex-col bg-white dark:bg-surface-900", className)}>
 
             {!hideToolbar && <CollectionTableToolbar
                 onTextSearch={onTextSearch}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -146,7 +146,7 @@ export type EntityCollectionTableProps<M extends Record<string, unknown>,
 
         enablePopupIcon: boolean;
 
-        openEntityMode?: "side_panel" | "full_screen" | "split";
+        openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 
         /**
          * Callback when columns are reordered via drag-and-drop

package/src/components/EntityCollectionTable/fields/TableMultipleRelationField.tsx

@@ -3,8 +3,7 @@ import type { EntityCollection } from "@rebasepro/types";
 import React, { useCallback } from "react";
 import { deepEqual as equal } from "fast-equals";
 
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, PencilIcon } from "@rebasepro/ui";
 import { getRelationFrom, normalizeToEntityRelation } from "@rebasepro/common";
 
 import { RelationPreview } from "../../../preview";

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -9,8 +9,7 @@ import { CollectionSize, Entity, EntityReference, FilterValues } from "@rebasepr
 import { getPreviewSizeFrom } from "../../../preview/util";
 import { useCustomizationController } from "@rebasepro/core";
 import { ErrorView } from "@rebasepro/core";
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, PencilIcon } from "@rebasepro/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 import { getReferenceFrom } from "@rebasepro/common";
 import { useCollectionRegistryController } from "../../../index";

package/src/components/EntityCollectionTable/fields/TableRelationField.tsx

@@ -9,8 +9,7 @@ import { CollectionSize, Entity, EntityRelation, FilterValues, Relation } from "
 import { getPreviewSizeFrom } from "../../../preview/util";
 import { } from "@rebasepro/core";
 import { ErrorView } from "@rebasepro/core";
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, PencilIcon } from "@rebasepro/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 import { getRelationFrom, normalizeToEntityRelation } from "@rebasepro/common";
 import { TableMultipleRelationField } from "./TableMultipleRelationField";

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -7,11 +7,10 @@ import { PreviewSize } from "../../../types";
 import { useDropzone } from "react-dropzone";
 import { PropertyPreview } from "../../../preview";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, IconButton, PencilIcon, Typography } from "@rebasepro/ui";
 import { useSnackbarController, useStorageSource, useTranslation, StorageFieldItem, useStorageUploadController } from "@rebasepro/core";
 import { getThumbnailMeasure } from "../../../preview/util";
 import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
-import { cls, IconButton, Typography } from "@rebasepro/ui";
 import { EntityTableCellActions } from "../internal/EntityTableCellActions";
 
 const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";

package/src/components/EntityCollectionTable/fields/VirtualTableSelect.tsx

@@ -40,7 +40,6 @@ export function VirtualTableSelect(props: {
     }, [focused, ref]);
 
     const onChange = useCallback((updatedValue: string | string[]) => {
-        console.trace("onChange");
         if (valueType === "number") {
             if (multiple) {
                 const newValue = (updatedValue as string[]).map((v) => parseFloat(v));

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -49,15 +49,10 @@ export function CollectionTableToolbar({
         <div
             className={cls(defaultBorderMixin, "no-scrollbar min-h-[52px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
-            <div className="flex items-center gap-1 md:mr-4 mr-2">
+            <div className="flex items-center gap-1 md:mr-4 mr-2 min-w-0">
 
                 {/* View toggle — hidden in compact */}
-                <div className={cls(
-                    "transition-all duration-300 ease-out overflow-hidden",
-                    compact ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"
-                )}>
-                    {viewModeToggle}
-                </div>
+                {!compact && viewModeToggle}
 
                 {title && <div className={"flex items-center"}>
                     {title}
@@ -70,28 +65,21 @@ export function CollectionTableToolbar({
             <div className="flex items-center gap-1">
 
                 {/* Loading spinner — hidden in compact */}
-                {largeLayout && <div className={cls(
-                    "mr-4 transition-all duration-300 ease-out overflow-hidden",
-                    compact ? "w-0 opacity-0" : "w-[22px] opacity-100"
-                )}>
-                    {loading &&
-                        <CircularProgress size={"smallest"}/>}
-                </div>}
+                {largeLayout && !compact && loading && (
+                    <div className="mr-4">
+                        <CircularProgress size={"smallest"}/>
+                    </div>
+                )}
 
                 {/* Search bar — hidden in compact */}
-                <div className={cls(
-                    "transition-all duration-300 ease-out",
-                    compact ? "max-w-0 opacity-0 overflow-hidden" : "max-w-[300px] opacity-100"
-                )}>
-                    {onTextSearch &&
-                        <SearchBar
-                            key={"search-bar"}
-                            size={"small"}
-                            placeholder={t("search")}
-                            onTextSearch={onTextSearch}
-                            expandable={true}
-                            initialValue={initialSearchText}/>}
-                </div>
+                {!compact && onTextSearch &&
+                    <SearchBar
+                        key={"search-bar"}
+                        size={"small"}
+                        placeholder={t("search")}
+                        onTextSearch={onTextSearch}
+                        expandable={true}
+                        initialValue={initialSearchText}/>}
 
                 {/* Secondary actions — always inline */}
                 <div className="flex items-center gap-1">

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -3,8 +3,7 @@ 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 { ErrorBoundary, MinusCircleIcon } from "@rebasepro/ui";
 import { getRowHeight, TableSize } from "@rebasepro/core";
 import { ErrorTooltip } from "@rebasepro/core";
 
@@ -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-accent-50 dark:bg-surface-accent-950" : "",
+                    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/internal/EntityTableCellActions.tsx

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

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -4,7 +4,7 @@ import type { FormContext, PropertyFieldBindingProps } from "../../../../types/f
 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";
@@ -13,8 +13,6 @@ 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";
@@ -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]);
 
@@ -409,7 +407,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/table_bindings.tsx

@@ -1,5 +1,5 @@
 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 { VirtualTableInput } from "./fields/VirtualTableInput";
 import { VirtualTableSelect } from "./fields/VirtualTableSelect";
@@ -64,10 +64,11 @@ export function getTableBindingForProperty(
 
     if (property.type === "string" && (property as StringProperty).reference?.path) {
         return {
-            Component: ({ propertyKey, property, internalValue, updateValue, disabled, size, path }) => {
-                const referenceProperty = (property as StringProperty).reference as any;
+            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;
+ path: referenceProperty.path as string }) : undefined;
                 return (
                     <TableReferenceField
                         name={propertyKey}
@@ -77,7 +78,7 @@ path: referenceProperty.path as string }) : undefined;
                         size={size}
                         path={referenceProperty.path as string}
                         multiselect={false}
-                        previewProperties={referenceProperty.previewProperties}
+                        previewProperties={referenceProperty.ui?.previewProperties}
                         includeId={referenceProperty.includeId}
                         includeEntityLink={referenceProperty.includeEntityLink}
                         title={property.name}
@@ -89,14 +90,14 @@ path: referenceProperty.path as string }) : undefined;
         };
     } 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}
@@ -114,7 +115,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 +133,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 +150,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 +168,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}
@@ -184,7 +185,7 @@ path: referenceProperty.path as string }) : undefined;
         } else if (stringProperty.ui?.markdown || !stringProperty.storage || !stringProperty.reference) {
             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 +200,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,12 +212,12 @@ path: referenceProperty.path as string }) : undefined;
         };
     } else if (property.type === "date") {
         return {
-            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: any) => (
+            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: TableFieldBindingProps) => (
                 <VirtualTableDateField
                     name={propertyKey}
                     error={validationError ?? error}
                     disabled={disabled}
-                    mode={property.mode}
+                    mode={(property as DateProperty).mode}
                     focused={selected}
                     internalValue={internalValue as Date}
                     updateValue={updateValue}
@@ -227,30 +228,32 @@ path: referenceProperty.path as string }) : undefined;
             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.ui?.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}
-                        fixedFilter={property.fixedFilter}
+                        fixedFilter={(property as ReferenceProperty).fixedFilter}
                     />
-                ),
+                    );
+                },
                 allowScroll: false
             };
         }
     } else if (property.type === "relation") {
-        if (property.relation) {
-            if (property.ui?.widget === "dialog") {
+        if ((property as RelationProperty).relation) {
+            if ((property as RelationProperty).ui?.widget === "dialog") {
                 return {
                     Component: RelationDialogBindingComponent,
                     allowScroll: false
@@ -268,11 +271,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}
@@ -280,7 +283,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}
@@ -292,9 +295,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}
@@ -302,12 +306,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}
-                                fixedFilter={ofProp.fixedFilter}
-                                includeId={ofProp.includeId}
-                                includeEntityLink={ofProp.includeEntityLink}
+                                fixedFilter={refOfProp.fixedFilter}
+                                includeId={refOfProp.includeId}
+                                includeEntityLink={refOfProp.includeEntityLink}
                             />
                         ),
                         allowScroll: false
@@ -321,7 +325,8 @@ path: referenceProperty.path as string }) : undefined;
 }
 
 /** Stable component for relation fields rendered with the dialog widget */
-function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }: any) {
+function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }: TableFieldBindingProps) {
+    const relProp = property as RelationProperty;
     return (
         <TableRelationField
             name={propertyKey}
@@ -330,18 +335,19 @@ function RelationDialogBindingComponent({ propertyKey, internalValue, updateValu
             disabled={disabled}
             size={size}
             multiselect={false}
-            relation={property.relation}
-            previewProperties={property.ui?.previewProperties}
-            includeId={property.includeId}
-            includeEntityLink={property.includeEntityLink}
-            title={property.name ?? propertyKey}
-            fixedFilter={property.fixedFilter}
+            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 }: any) {
+function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property }: TableFieldBindingProps) {
+    const relProp = property as RelationProperty;
     return (
         <TableRelationSelectorField
             name={propertyKey}
@@ -349,8 +355,8 @@ function RelationSelectorBindingComponent({ propertyKey, internalValue, updateVa
             updateValue={updateValue}
             disabled={disabled}
             size={"small"}
-            relation={property.relation!}
-            fixedFilter={property.fixedFilter}
+            relation={relProp.relation!}
+            fixedFilter={relProp.fixedFilter}
         />
     );
 }

package/src/components/EntityCollectionView/Board.tsx

@@ -148,7 +148,6 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
             }
             return updated;
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data, columnsProp, assignColumn]);
 
     const findColumnByItemId = (id: string): string | undefined => {
@@ -328,7 +327,7 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
             const overColumn = findColumnByItemId(overId) || currentColumn;
 
 
-            let finalItemMapState = { ...itemMapState };
+            const finalItemMapState = { ...itemMapState };
 
             if (currentColumn && currentColumn === overColumn) {
                 // Use dnd-kit's sortable indexes if available to avoid race conditions with mutating handleDragOver