@rebasepro/admin 0.2.3 → 0.2.4

package/src/components/EntityCollectionTable/table_bindings.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { ArrayProperty, DateProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, ReferenceProperty, RelationProperty, StringProperty } from "@rebasepro/types";
+import { TableSize } from "@rebasepro/core";
 
 import { VirtualTableInput } from "./fields/VirtualTableInput";
 import { VirtualTableSelect } from "./fields/VirtualTableSelect";
@@ -14,7 +15,7 @@ import { TableRelationSelectorField } from "./fields/TableRelationSelectorField"
 
 import { getPreviewSizeFrom } from "../../preview/util";
 
-export interface TableFieldBindingProps<T = any> {
+export interface TableFieldBindingProps<T = unknown> {
     propertyKey: string;
     property: Property;
     internalValue: T;
@@ -23,9 +24,9 @@ export interface TableFieldBindingProps<T = any> {
     validationError?: Error;
     disabled: boolean;
     selected: boolean;
-    size: any;
+    size: TableSize;
     align: "left" | "center" | "right";
-    entity: Entity<any>;
+    entity: Entity<Record<string, unknown>>;
     path: string;
     openPopup?: (cellRect: DOMRect | undefined) => void;
 }
@@ -100,7 +101,7 @@ export function getTableBindingForProperty(
                     property={property as StringProperty | ArrayProperty}
                     entity={entity}
                     path={path}
-                    value={internalValue}
+                    value={internalValue as string | string[] | null}
                     previewSize={getPreviewSizeFrom(size)}
                     updateValue={updateValue}
                     propertyKey={propertyKey}

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -40,7 +40,7 @@ import { EntityCollectionListView } from "./EntityCollectionListView";
 import { SplitListView } from "./SplitListView";
 import { EntityCollectionBoardView } from "./EntityCollectionBoardView";
 import { ViewModeToggle, KanbanPropertyOption } from "./ViewModeToggle";
-import { Button, cls, focusedDisabled, IconButton, Markdown, Popover, Skeleton, Tooltip, Typography, VirtualTableColumn , iconSize } from "@rebasepro/ui";
+import { Button, cls, focusedDisabled, IconButton, Markdown, Popover, Skeleton, TextField, Tooltip, Typography, VirtualTableColumn , iconSize } from "@rebasepro/ui";
 import { ArrowRightToLineIcon, ErrorBoundary, PlusIcon, SearchIcon } from "@rebasepro/ui";
 import { setIn } from "@rebasepro/formex";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
@@ -1335,15 +1335,17 @@ function EntityIdHeaderWidget({
                         className={"w-96 max-w-full"}>
 
                         <div className="flex p-2 w-full gap-2">
-                            <input
+                            <TextField
                                 autoFocus={openPopup}
                                 placeholder={t("find_entity_by_id")}
-                                // size={"small"}
+                                size="small"
                                 onChange={(e) => {
                                     setSearchString(e.target.value);
                                 }}
                                 value={searchString}
-                                className={"rounded-lg bg-white dark:bg-surface-900 flex-grow outline-none p-2 " + focusedDisabled}/>
+                                className="flex-grow"
+                                inputClassName={cls("rounded-lg bg-white dark:bg-surface-900", focusedDisabled)}
+                            />
                             <Button variant={"text"}
                                 disabled={!(searchString.trim())}
                                 type={"submit"}

package/src/components/EntityCollectionView/hooks/useCollectionInlineEditor.ts

@@ -43,7 +43,7 @@ export function useCollectionInlineEditor<M extends Record<string, unknown>>({
         data: entity
     }) => {
 
-        const updatedValues = setIn({}, propertyKey, value);
+        const updatedValues = setIn({}, propertyKey, value) as Partial<Record<string, unknown>>;
 
         const saveProps: SaveEntityProps = {
             path: entity.path ?? path,

package/src/components/EntityCollectionView/hooks/useKanbanDragAndDrop.ts

@@ -1,8 +1,9 @@
 import { useCallback, useMemo } from "react";
 import { setIn } from "@rebasepro/formex";
-import { EntityCollection, SaveEntityProps, RebaseData, RebaseContext } from "@rebasepro/types";
+import { EntityCollection, SaveEntityProps, RebaseData, RebaseContext, AnalyticsController } from "@rebasepro/types";
 import { saveEntityWithCallbacks } from "@rebasepro/core";
 import { BoardItem } from "../board_types";
+import { BoardDataController } from "../useBoardDataController";
 import { generateKeyBetween } from "fractional-indexing";
 
 export interface UseKanbanDragAndDropParams<M extends Record<string, unknown>> {
@@ -12,8 +13,8 @@ export interface UseKanbanDragAndDropParams<M extends Record<string, unknown>> {
     orderProperty?: string;
     dataClient: RebaseData;
     context: RebaseContext;
-    boardDataController: any;
-    analyticsController: any;
+    boardDataController: BoardDataController<M>;
+    analyticsController: AnalyticsController;
 }
 
 export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
@@ -77,18 +78,18 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
                     b = null;
                 }
                 const newKey = generateKeyBetween(a, b);
-                updatedValues = setIn(updatedValues, orderProperty, newKey);
+                updatedValues = setIn(updatedValues, orderProperty, newKey) as Record<string, unknown>;
             } catch (e) {
                 // Fallback: if keys are somehow invalid, generate from scratch
                 console.warn("fractional-indexing error, falling back:", e);
                 const newKey = generateKeyBetween(null, null);
-                updatedValues = setIn(updatedValues, orderProperty, newKey);
+                updatedValues = setIn(updatedValues, orderProperty, newKey) as Record<string, unknown>;
             }
         }
 
         // Update column if it changed
         if (isColumnChange) {
-            updatedValues = setIn(updatedValues, columnProperty, moveInfo.targetColumn);
+            updatedValues = setIn(updatedValues, columnProperty, moveInfo.targetColumn) as Record<string, unknown>;
         }
 
         // Apply optimistic UI update to boardDataController's internal state

package/src/components/EntityDetailView.tsx

@@ -25,7 +25,7 @@ import {
     Typography
 } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { ErrorView, createFormexStub, usePermissions, useTranslation } from "@rebasepro/core";
+import { ErrorView, createFormexStub, usePermissions, useTranslation, getIcon } from "@rebasepro/core";
 import {
     getSubcollections,
     removeInitialAndTrailingSlashes,
@@ -386,33 +386,55 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     };
 
     // Tabs
-    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
-        <Tab
-            className="text-sm min-w-[90px]"
-            value={subcollection.slug}
-            key={`entity_detail_collection_tab_${subcollection.name}`}>
-            {subcollection.name}
-        </Tab>
-    );
-
-    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
-        .map((view) =>
+    const subcollectionTabs = subcollections && subcollections.map((subcollection) => {
+        const icon = getIcon(subcollection.icon, undefined, undefined, "small");
+        return (
             <Tab
-                className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
-                value={view.key}
-                key={`entity_detail_collection_tab_${view.name}`}>
-                {view.tabComponent ?? view.name}
+                className="text-sm min-w-[90px]"
+                value={subcollection.slug}
+                key={`entity_detail_collection_tab_${subcollection.name}`}>
+                <span className="flex items-center gap-1.5">
+                    {icon}
+                    {subcollection.name}
+                </span>
             </Tab>
         );
+    });
+
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+        .map((view) => {
+            const icon = getIcon(view.icon, undefined, undefined, "small");
+            return (
+                <Tab
+                    className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                    value={view.key}
+                    key={`entity_detail_collection_tab_${view.name}`}>
+                    {view.tabComponent ?? (
+                        <span className="flex items-center gap-1.5">
+                            {icon}
+                            {view.name}
+                        </span>
+                    )}
+                </Tab>
+            );
+        });
     const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
-        .map((view) =>
-            <Tab
-                className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
-                value={view.key}
-                key={`entity_detail_collection_tab_${view.name}`}>
-                {view.tabComponent ?? view.name}
-            </Tab>
-        );
+        .map((view) => {
+            const icon = getIcon(view.icon, undefined, undefined, "small");
+            return (
+                <Tab
+                    className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                    value={view.key}
+                    key={`entity_detail_collection_tab_${view.name}`}>
+                    {view.tabComponent ?? (
+                        <span className="flex items-center gap-1.5">
+                            {icon}
+                            {view.name}
+                        </span>
+                    )}
+                </Tab>
+            );
+        });
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog";
 

package/src/components/EntityEditView.tsx

@@ -35,7 +35,8 @@ import {
     useEntityFetch,
     useRebaseContext,
     useLargeLayout,
-    useSlot
+    useSlot,
+    getIcon
 } from "@rebasepro/core";
 import { getEntityFromMemoryCache } from "@rebasepro/core";
 import { EntityForm } from "../form";
@@ -84,7 +85,7 @@ export interface EntityEditViewProps<M extends Record<string, unknown> = Record<
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     navigateBack?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
-    barActions?: (params: BarActionsParams) => any;
+    barActions?: (params: BarActionsParams) => React.ReactNode;
     formProps?: Partial<EntityFormProps<M>>,
     /**
      * Pre-populate the form with these values when creating a new entity.
@@ -270,7 +271,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             openEntityMode: layout,
             status: status,
             values: usedEntity?.values ?? ({} as M),
-            setFieldValue: (key: string, value: any) => {
+            setFieldValue: (key: string, value: unknown) => {
                 throw new Error("You can't update values in read only mode");
             },
             save: () => {
@@ -289,7 +290,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         [resolvedEntityViews]
     );
 
-    const customViewsView: any[] | undefined = customViews && nonActionCustomViews
+    const customViewsView: React.ReactNode[] | undefined = customViews && nonActionCustomViews
         .map((customView) => {
 
             if (!customView)
@@ -466,33 +467,55 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         Builder={resolveComponentRef(selectedSecondaryForm?.Builder as ComponentRef<EntityCustomViewParams<M>> | undefined) as React.ComponentType<EntityCustomViewParams<M>> | undefined}
     />;
 
-    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
-        <Tab
-            className="text-sm min-w-[90px]"
-            value={subcollection.slug}
-            key={`entity_detail_collection_tab_${subcollection.name}`}>
-            {subcollection.name}
-        </Tab>
-    );
-
-    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
-        .map((view) =>
+    const subcollectionTabs = subcollections && subcollections.map((subcollection) => {
+        const icon = getIcon(subcollection.icon, undefined, undefined, "small");
+        return (
             <Tab
-                className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
-                value={view.key}
-                key={`entity_detail_collection_tab_${view.name}`}>
-                {view.tabComponent ?? view.name}
+                className="text-sm min-w-[90px]"
+                value={subcollection.slug}
+                key={`entity_detail_collection_tab_${subcollection.name}`}>
+                <span className="flex items-center gap-1.5">
+                    {icon}
+                    {subcollection.name}
+                </span>
             </Tab>
         );
+    });
+
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+        .map((view) => {
+            const icon = getIcon(view.icon, undefined, undefined, "small");
+            return (
+                <Tab
+                    className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                    value={view.key}
+                    key={`entity_detail_collection_tab_${view.name}`}>
+                    {view.tabComponent ?? (
+                        <span className="flex items-center gap-1.5">
+                            {icon}
+                            {view.name}
+                        </span>
+                    )}
+                </Tab>
+            );
+        });
     const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
-        .map((view) =>
-            <Tab
-                className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
-                value={view.key}
-                key={`entity_detail_collection_tab_${view.name}`}>
-                {view.tabComponent ?? view.name}
-            </Tab>
-        );
+        .map((view) => {
+            const icon = getIcon(view.icon, undefined, undefined, "small");
+            return (
+                <Tab
+                    className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                    value={view.key}
+                    key={`entity_detail_collection_tab_${view.name}`}>
+                    {view.tabComponent ?? (
+                        <span className="flex items-center gap-1.5">
+                            {icon}
+                            {view.name}
+                        </span>
+                    )}
+                </Tab>
+            );
+        });
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog";
 
@@ -605,7 +628,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     return result;
 }
 
-function EntityFormSkeleton({ collection }: { collection: EntityCollection<any> }) {
+function EntityFormSkeleton({ collection }: { collection: EntityCollection }) {
     return (
         <div className="flex-1 flex flex-row w-full overflow-y-auto justify-center">
             <div className="relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit">

package/src/components/EntityEditViewFormActions.tsx

@@ -122,11 +122,11 @@ type ActionsViewProps<M extends Record<string, unknown>> = {
     disabled: boolean,
     status: "new" | "existing" | "copy",
     sideDialogContext: SideDialogController,
-    pluginActions?: any[],
+    pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
     navigateBack: () => void;
     formContext: FormContext,
-    formex: FormexController<any>;
+    formex: FormexController<Record<string, unknown>>;
     t: (key: string, vars?: Record<string, string>) => string;
     className?: string;
 };
@@ -174,7 +174,7 @@ function buildBottomActions<M extends Record<string, unknown>>({
                     openEntityMode,
                     navigateBack,
                     formContext
-                } satisfies EntityActionClickProps<any>;
+                } satisfies EntityActionClickProps<Record<string, unknown>>;
 
                 const isEnabled = !action.isEnabled || action.isEnabled(props);
                 return (
@@ -316,7 +316,7 @@ function EntityActionButton({
 }: {
     action: EntityAction,
     enabled: boolean,
-    props: EntityActionClickProps<any, any>
+    props: EntityActionClickProps<Record<string, unknown>>
 }) {
     const snackbarController = useSnackbarController();
     const [loading, setLoading] = React.useState(false);

package/src/components/EntityPreview.tsx

@@ -352,10 +352,8 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
 }, ref) => {
     return <div
         ref={ref}
-        style={{
-            ...style,
-            tabIndex: 0
-        } as React.CSSProperties}
+        tabIndex={0}
+        style={style}
         className={cls(
             "bg-white dark:bg-surface-900",
             size === "small" ? "min-h-[32px]" : "min-h-[44px]",
@@ -367,12 +365,19 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,
             className)}
+        role={onClick ? "button" : undefined}
         onClick={(event) => {
             if (onClick) {
                 event.preventDefault();
                 onClick(event);
             }
         }}
+        onKeyDown={(event) => {
+            if (onClick && (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                onClick(event);
+            }
+        }}
         {...props}>
         {children}
     </div>;

package/src/components/HomePage/HomePageDnD.tsx

@@ -2,6 +2,7 @@ import type { NavigationEntry } from "@rebasepro/types";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
     Active,
+    Over,
     closestCenter,
     closestCorners,
     CollisionDetection,
@@ -347,7 +348,7 @@ export function useHomePageDnd({
     const handleDragOver = ({
         active,
         over
-    }: { active: Active; over: any }) => {
+    }: { active: Active; over: Over | null }) => {
         if (disabled || !over) return;
 
         const activeIdNow = active.id;
@@ -398,7 +399,7 @@ export function useHomePageDnd({
     const handleDragEnd = ({
         active,
         over
-    }: { active: Active; over: any }) => {
+    }: { active: Active; over: Over | null }) => {
         if (disabled || !over) {
             resetDragState();
             return;

package/src/components/PropertyCollectionView.tsx

@@ -101,7 +101,7 @@ export const PropertyCollectionView = ({
     suppressHeader = false,
     size = "small"
 }: {
-    data: any;
+    data: unknown;
     properties: Properties;
     baseKey?: string;
     suppressHeader?: boolean;

package/src/components/PropertyIdCopyTooltip.tsx

@@ -8,7 +8,7 @@ export function PropertyIdCopyTooltip({
 }: {
     propertyKey: string,
     className?: string,
-    children: any
+    children: React.ReactNode
 }) {
     return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
         delayDuration={800}

package/src/components/RebaseLayout.tsx

@@ -53,7 +53,11 @@ export function RebaseLayout(props: RebaseLayoutProps) {
 
     const adminModeController = useAdminModeController();
 
-    const ActiveAppBar = appBar ?? <AppBar/>;
+    const ActiveAppBar = appBar ?? <AppBar
+        includeLanguageToggle={false}
+        includeModeToggle={false}
+        includeUserMenu={false}
+    />;
     const ActiveDrawer = drawer ?? (
         <Drawer
             title={title}

package/src/components/RebaseNavigation.tsx

@@ -13,11 +13,11 @@ import {
     CustomizationControllerContext
 } from "@rebasepro/core";
 import { CircularProgressCenter } from "@rebasepro/ui";
-import type { AppView, CollectionEditorOptions, EntityCustomView, EntityAction, EntityCollection } from "@rebasepro/types";
+import type { AppView, CollectionEditorOptions, EntityCustomView, EntityAction, EntityCollection, RebasePlugin } from "@rebasepro/types";
 import type { CollectionRegistryController } from "@rebasepro/types";
 import type { UrlController, NavigationStateController } from "@rebasepro/types";
 
-const EMPTY_PLUGINS: unknown[] = [];
+const EMPTY_PLUGINS: RebasePlugin[] = [];
 const EMPTY_COLLECTIONS: EntityCollection[] = [];
 
 import { useBuildNavigationStateController } from "../hooks/navigation/useBuildNavigationStateController";

package/src/components/RebaseRouteDefs.tsx

@@ -10,10 +10,8 @@ import {
 } from "@rebasepro/core";
 import { CircularProgressCenter } from "@rebasepro/ui";
 
-// Lazy-load admin views — rarely visited, no need in initial bundle
-const ContentHomePage = lazy(() => import("./HomePage/ContentHomePage").then(m => ({ default: m.ContentHomePage })));
-const UsersView = lazy(() => import("./admin/UsersView").then(m => ({ default: m.UsersView })));
-const RolesView = lazy(() => import("./admin/RolesView").then(m => ({ default: m.RolesView })));
+import { ContentHomePage } from "./HomePage/ContentHomePage";
+import { RolesView } from "./admin/RolesView";
 import { RebaseRoute } from "../routes/RebaseRoute";
 import { CustomViewRoute } from "../routes/CustomViewRoute";
 import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
@@ -27,7 +25,7 @@ function SettingsView() {
     const breadcrumbs = useBreadcrumbsController();
     useEffect(() => {
         breadcrumbs.set({
-            breadcrumbs: [{ title: t("project_settings"),
+            breadcrumbs: [{ title: t("account_settings"),
 url: "/settings" }]
         });
 
@@ -87,8 +85,7 @@ export function RebaseRouteDefs({ children, layout }: RebaseRouteDefsProps) {
 
             <Route path={"/c/*"} element={<RebaseRoute/>}/>
             <Route path={"/settings"} element={<SettingsView/>}/>
-            {userManagement && <Route path={"/roles"} element={<Suspense fallback={<CircularProgressCenter/>}><RolesView userManagement={userManagement}/></Suspense>}/>}
-            {userManagement && <Route path={"/users"} element={<Suspense fallback={<CircularProgressCenter/>}><UsersView userManagement={userManagement}/></Suspense>}/>}
+            {userManagement && <Route path={"/roles"} element={<RolesView userManagement={userManagement}/>}/>}
 
             {/* Hidden debug route */}
             <Route path={"/debug/ui"} element={<UIReferenceView/>}/>

package/src/components/RebaseShell.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import {
     useRebaseRegistry
 } from "@rebasepro/core";
+import { ErrorBoundary } from "@rebasepro/ui";
 
 import { RebaseAuthGate } from "./RebaseAuthGate";
 import { RebaseNavigation } from "./RebaseNavigation";
@@ -51,19 +52,21 @@ export function RebaseShell(props: RebaseShellProps) {
     return (
         <RebaseAuthGate>
             <RebaseNavigation>
-                <RebaseRouteDefs
-                    layout={
-                        <RebaseLayout
-                            title={title}
-                            appBar={appBar}
-                            drawer={drawer}
-                            autoOpenDrawer={autoOpenDrawer}
-                            devViews={devViews}
-                        />
-                    }
-                >
-                    {children}
-                </RebaseRouteDefs>
+                <ErrorBoundary fullPage>
+                    <RebaseRouteDefs
+                        layout={
+                            <RebaseLayout
+                                title={title}
+                                appBar={appBar}
+                                drawer={drawer}
+                                autoOpenDrawer={autoOpenDrawer}
+                                devViews={devViews}
+                            />
+                        }
+                    >
+                        {children}
+                    </RebaseRouteDefs>
+                </ErrorBoundary>
             </RebaseNavigation>
         </RebaseAuthGate>
     );

package/src/components/SearchIconsView.tsx

@@ -10,18 +10,11 @@ import {
     SearchBar,
     Tooltip
 } from "@rebasepro/ui";
-import { iconsSearch, iconSynonyms } from "@rebasepro/core";
+import { iconsSearch } from "@rebasepro/core";
 import { useTranslation } from "@rebasepro/core";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-if (iconSynonyms && process.env.NODE_ENV !== "production") {
-    Object.keys(iconSynonyms).forEach((icon: string) => {
-        if (!iconKeys.includes(icon)) {
-            console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
-        }
-    });
-}
 
 function toPascalCase(str: string): string {
     return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');

package/src/components/SelectableTable/SelectableTable.tsx

@@ -243,11 +243,11 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                 ref={ref}>
 
                 <VirtualTable
-                    data={data}
+                    data={data as any}
                     columns={columns}
                     // @ts-ignore
                     cellRenderer={cellRenderer}
-                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                    onRowClick={inlineEditing ? undefined : (onEntityClick ? (onRowClick as any) : undefined)}
                     onEndReached={loadNextPage}
                     onResetPagination={resetPagination}
                     error={dataLoadingError}
@@ -262,8 +262,8 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     initialScroll={initialScroll}
                     onScroll={onScroll}
                     checkFilterCombination={checkFilterCombination}
-                    createFilterField={filterable ? createFilterField : undefined}
-                    rowClassName={useCallback((entity: Entity<M>) => {
+                    createFilterField={filterable ? (createFilterField as any) : undefined}
+                    rowClassName={useCallback((entity: any) => {
                         return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
                     }, [highlightedRow])}
                     className="grow"
@@ -287,16 +287,13 @@ function createFilterField({
     column,
     hidden,
     setHidden
-}: FilterFormFieldProps<{
-    resolvedProperty: Property,
-    disabled: boolean,
-}>): React.ReactNode {
+}: FilterFormFieldProps<any>): React.ReactNode {
 
     if (!column.custom) {
         return null;
     }
 
-    const { resolvedProperty } = column.custom;
+    const { resolvedProperty } = column.custom as { resolvedProperty?: Property };
 
     const isArray = resolvedProperty?.type === "array";
     const ofVal = isArray && resolvedProperty ? resolvedProperty.of : undefined;
@@ -316,7 +313,7 @@ function createFilterField({
             hidden={hidden}
             setHidden={setHidden}/>;
     } else if (baseProperty.type === "relation" && baseProperty.relation) {
-        return <RelationFilterField value={filterValue}
+        return <RelationFilterField value={filterValue as any}
             setValue={setFilterValue}
             name={id as string}
             relation={baseProperty.relation}
@@ -350,7 +347,7 @@ function createFilterField({
     }
 
     return (
-        <div>{`Currently the filter field ${resolvedProperty.type} is not supported`}</div>
+        <div>{`Currently the filter field ${resolvedProperty?.type} is not supported`}</div>
     );
 }
 

package/src/components/SelectableTable/SelectionStore.ts

@@ -43,7 +43,7 @@ export type SelectionStore = ReturnType<typeof createSelectionStore>;
  * `selected` boolean actually changes (not on every store update).
  */
 export function useCellSelected(
-    store: SelectionStore,
+    store: { getSnapshot: () => SelectedCellProps<any> | undefined; subscribe: (listener: () => void) => () => void },
     propertyKey: string,
     entityPath: string,
     entityId: string | number