@rebasepro/admin 0.2.3 → 0.3.0

package/src/components/DefaultDrawer.tsx

@@ -1,32 +1,77 @@
 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 { useCollapsedGroups, buildCollapsedDefaults, useLargeLayout, useAdminModeController, useAuthController, useModeController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry } from "@rebasepro/core";
 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 { ChevronsLeftIcon, ChevronsRightIcon, cls, iconSize, Tooltip, Typography } from "@rebasepro/ui";
+import {
+    Avatar,
+    ChevronsLeftIcon,
+    ChevronsRightIcon,
+    cls,
+    iconSize,
+    IconButton,
+    LanguagesIcon,
+    LogOutIcon,
+    Menu,
+    MenuItem,
+    MoonIcon,
+    Separator,
+    SettingsIcon,
+    Skeleton,
+    SunIcon,
+    SunMoonIcon,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
 import { DrawerNavigationGroup } from "./DrawerNavigationGroup";
-import { RebaseLogo } from "@rebasepro/core";
+import { LanguageToggle, RebaseLogo } from "@rebasepro/core";
 import { useApp } from "./app/useApp";
 
 /**
- * Default drawer used in the CMS
+ * Default drawer used in the CMS.
+ *
+ * When no `children` are provided, renders the full CMS navigation
+ * (collection groups, mode switch, plugin slots).
+ *
+ * When `children` **are** provided, renders the shared drawer shell
+ * (logo, scrollable area, footer actions, collapse toggle) with the
+ * custom content injected in the scrollable area. This lets consumers
+ * like the SaaS dashboard reuse the identical structural layout while
+ * supplying their own navigation items.
+ *
  * @group Core
  */
 export function DefaultDrawer({
     title,
     logo,
     logoDestination,
+    children,
+    footerActions,
     className,
     style
 }: {
     title?: React.ReactNode;
     logo?: string;
     logoDestination?: string;
+    /**
+     * Custom navigation content for the drawer.
+     * When provided, replaces the default CMS navigation (collection groups,
+     * mode switch, slots). The shared shell (logo, scroll area, footer
+     * actions, collapse toggle) is still rendered around it.
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom content for the drawer footer actions area (language, theme, user menu).
+     * - `undefined` — renders the default `DrawerFooterActions`.
+     * - `null` — renders nothing (hides the footer actions).
+     * - `ReactNode` — renders the provided custom content.
+     */
+    footerActions?: React.ReactNode | null;
     className?: string;
     style?: React.CSSProperties;
 }) {
@@ -36,13 +81,11 @@ export function DefaultDrawer({
         drawerOpen,
         openDrawer,
         closeDrawer,
-        closeHover,
         logo: appLogo
     } = useApp();
 
     const resolvedLogo = logo ?? appLogo;
 
-    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
     const scrollRef = React.useRef<HTMLDivElement>(null);
     const [scrolled, setScrolled] = React.useState(false);
 
@@ -52,6 +95,64 @@ export function DefaultDrawer({
         }
     };
 
+    return (
+        <div role="navigation" aria-label="Main navigation" className={cls("flex flex-col h-full relative grow w-full", className)} style={style}>
+
+            <DrawerLogo
+                logo={resolvedLogo}
+                title={title}
+                logoDestination={logoDestination}
+                drawerOpen={drawerOpen}
+                drawerHovered={drawerHovered}
+            />
+
+            <div
+                ref={scrollRef}
+                onScroll={handleScroll}
+                className={"flex-grow min-h-0 overflow-y-auto overflow-x-hidden no-scrollbar px-2"}
+                style={{
+                    maskImage: scrolled
+                        ? "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)"
+                        : "linear-gradient(to bottom, black 0, black calc(100% - 20px), transparent 100%)"
+                }}>
+                {children ?? <CMSNavigationContent />}
+            </div>
+
+            {footerActions !== null && (
+                footerActions !== undefined
+                    ? footerActions
+                    : <DrawerFooterActions
+                        drawerOpen={drawerOpen}
+                        drawerHovered={drawerHovered}
+                    />
+            )}
+
+            <DrawerToggle
+                drawerOpen={drawerOpen}
+                drawerHovered={drawerHovered}
+                openDrawer={openDrawer}
+                closeDrawer={closeDrawer}
+            />
+        </div>
+    );
+}
+
+/**
+ * Default CMS navigation content — rendered inside DefaultDrawer when no
+ * custom `children` are provided.  Contains the mode switch, navigation
+ * groups, and header / footer plugin slots.
+ */
+function CMSNavigationContent() {
+
+    const {
+        drawerHovered,
+        drawerOpen,
+        closeDrawer,
+        closeHover
+    } = useApp();
+
+    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
+
     const analyticsController = useAnalyticsController();
     const navigationState = useNavigationStateController();
     const context = useRebaseContext();
@@ -94,8 +195,6 @@ context });
     if (!navigationState.topLevelNavigation)
         return null;
 
-    const groups = navigationState.topLevelNavigation.groups;
-
     const onItemClick = (view: NavigationEntry) => {
         const eventName: AnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
@@ -108,69 +207,37 @@ context });
         }
     };
 
-    const isStudioDark = adminModeController.mode === "studio";
     const drawerVisuallyOpen = drawerOpen || drawerHovered;
 
     return (
         <>
-            <div role="navigation" aria-label="Main navigation" className={cls("flex flex-col h-full relative grow w-full", className)} style={style}>
-
-                <DrawerLogo
-                    logo={resolvedLogo}
-                    title={title}
-                    logoDestination={logoDestination}
+            {registry.studioConfig && (
+                <DrawerModeSwitch
                     drawerOpen={drawerOpen}
                     drawerHovered={drawerHovered}
                 />
+            )}
 
-                {registry.studioConfig && (
-                    <DrawerModeSwitch
-                        drawerOpen={drawerOpen}
-                        drawerHovered={drawerHovered}
+            {headerSlot}
+
+            {groupsToRender.map((group) => {
+                const entriesInGroup = filteredEntries.filter(e => e.group === group);
+                return (
+                    <DrawerNavigationGroup
+                        key={`drawer_group_${group}`}
+                        group={group}
+                        entries={entriesInGroup}
+                        collapsed={isGroupCollapsed(group)}
+                        onToggleCollapsed={() => toggleGroupCollapsed(group)}
+                        drawerOpen={drawerVisuallyOpen}
+                        tooltipsOpen={tooltipsOpen}
+                        adminMenuOpen={adminMenuOpen}
+                        onItemClick={onItemClick}
                     />
-                )}
-
-                {headerSlot}
-
-                <div
-                    ref={scrollRef}
-                    onScroll={handleScroll}
-                    className={"flex-grow min-h-0 overflow-y-auto overflow-x-hidden no-scrollbar"}
-                    style={{
-                        maskImage: scrolled
-                            ? "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)"
-                            : "linear-gradient(to bottom, black 0, black calc(100% - 20px), transparent 100%)"
-                    }}>
-
-                    {groupsToRender.map((group) => {
-                        const entriesInGroup = filteredEntries.filter(e => e.group === group);
-                        return (
-                            <DrawerNavigationGroup
-                                key={`drawer_group_${group}`}
-                                group={group}
-                                entries={entriesInGroup}
-                                collapsed={isGroupCollapsed(group)}
-                                onToggleCollapsed={() => toggleGroupCollapsed(group)}
-                                drawerOpen={drawerVisuallyOpen}
-                                tooltipsOpen={tooltipsOpen}
-                                adminMenuOpen={adminMenuOpen}
-                                onItemClick={onItemClick}
-                            />
-                        );
-                    })}
-
-                </div>
-
-                {footerSlot}
-
-                <DrawerToggle
-                    drawerOpen={drawerOpen}
-                    drawerHovered={drawerHovered}
-                    openDrawer={openDrawer}
-                    closeDrawer={closeDrawer}
-                />
-            </div>
+                );
+            })}
 
+            {footerSlot}
         </>
     );
 }
@@ -178,7 +245,7 @@ context });
 export function DrawerLogo({
     logo,
     title,
-    logoDestination,
+    logoDestination = "/",
     drawerOpen,
     drawerHovered
 }: {
@@ -189,7 +256,6 @@ export function DrawerLogo({
     drawerHovered: boolean;
 }) {
 
-    const urlController = useUrlController();
     const showFullContent = drawerOpen || (drawerHovered && !drawerOpen);
 
     return (
@@ -197,7 +263,7 @@ export function DrawerLogo({
             {/* Logo — always visible */}
             <Link
                 className="shrink-0 flex items-center justify-center w-[56px] h-[40px]"
-                to={logoDestination || urlController.basePath}
+                to={logoDestination}
             >
                 {logo
                     ? <img src={logo} alt="Logo" className="w-[28px] h-[28px] object-contain"/>
@@ -215,7 +281,7 @@ export function DrawerLogo({
                 {title && (
                     <Link
                         className="visited:text-inherit dark:visited:text-inherit block truncate"
-                        to={logoDestination || urlController.basePath}
+                        to={logoDestination}
                     >
                         {typeof title === "string"
                             ? <Typography variant="subtitle1" noWrap className="truncate">{title}</Typography>
@@ -271,8 +337,18 @@ export function DrawerToggle({
                     aria-expanded={isExpanded}
                     aria-label={isExpanded ? t("collapse") : t("expand")}
                     onClick={() => isExpanded ? closeDrawer() : openDrawer()}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            if (isExpanded) {
+                                closeDrawer();
+                            } else {
+                                openDrawer();
+                            }
+                        }
+                    }}
                 >
-                    <div className="shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400">
+                    <div className="shrink-0 flex items-center justify-center w-[44px] h-[24px] text-surface-500 dark:text-surface-400">
                         {isExpanded
                             ? <ChevronsLeftIcon size={iconSize.small}/>
                             : <ChevronsRightIcon size={iconSize.small}/>
@@ -353,3 +429,140 @@ function DrawerModeSwitch({
         </div>
     );
 }
+
+/**
+ * Footer actions rendered at the bottom of the drawer, above the collapse/expand toggle.
+ * Replaces the app bar icons (language, theme, user avatar) with a drawer-native layout
+ * that adapts between collapsed (icons only) and expanded (full labels + user bar) states.
+ *
+ * @group Core
+ */
+export function DrawerFooterActions({
+    drawerOpen,
+    drawerHovered,
+    /**
+     * Custom content to render inside the user dropdown menu.
+     * When provided, these items are appended after the user info header
+     * and before the default Sign Out item.
+     */
+    dropDownActions,
+    /**
+     * Override the user object displayed in the footer.
+     * When omitted, falls back to `authController.user`.
+     */
+    user: userProp
+}: {
+    drawerOpen: boolean;
+    drawerHovered: boolean;
+    dropDownActions?: React.ReactNode;
+    user?: import("@rebasepro/types").User;
+}) {
+    const authController = useAuthController();
+    const {
+        mode,
+        setMode
+    } = useModeController();
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+
+    const user = userProp ?? authController.user;
+    const showFullContent = drawerOpen || drawerHovered;
+    const isFloating = drawerHovered && !drawerOpen;
+    const portalRef = React.useRef<HTMLDivElement>(null);
+
+    // User avatar
+    let avatarComponent: React.ReactElement | null;
+    if (user) {
+        const initial = user?.displayName
+            ? user.displayName[0].toUpperCase()
+            : (user?.email ? user.email[0].toUpperCase() : "A");
+        avatarComponent = <Avatar src={user.photoURL ?? undefined} className="w-8 h-8 text-xs">
+            {initial}
+        </Avatar>;
+    } else if (user === undefined || authController.initialLoading) {
+        avatarComponent = <Skeleton className="w-8 h-8 rounded-full"/>;
+    } else {
+        avatarComponent = null;
+    }
+
+    return (
+        <div className="shrink-0 pb-1" ref={portalRef}>
+            {avatarComponent && (
+                <div className="flex items-center px-[16px] py-1">
+                    <Menu
+                        trigger={
+                            <div
+                                className={cls(
+                                    "shrink-0 flex items-center justify-center w-[44px] cursor-pointer",
+                                    "rounded-md py-1",
+                                    "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+                                    "transition-colors duration-150"
+                                )}
+                                role="button"
+                                tabIndex={0}
+                                aria-label={t("user_menu") || "User menu"}
+                            >
+                                {avatarComponent}
+                            </div>
+                        }
+                        side="top"
+                        align="start"
+                    >
+                        {user && <div className="px-4 py-2 mb-1">
+                            {user.displayName && <Typography variant="body1" color="secondary">
+                                {user.displayName}
+                            </Typography>}
+                            {user.email && <Typography variant="body2" color="secondary">
+                                {user.email}
+                            </Typography>}
+                        </div>}
+
+                        {dropDownActions}
+
+                        {!dropDownActions && <>
+                            <MenuItem onClick={() => navigate("/settings")}>
+                                <SettingsIcon/>
+                                {t("account_settings")}
+                            </MenuItem>
+                            <MenuItem onClick={async () => {
+                                await authController.signOut();
+                                navigate("/");
+                            }}>
+                                <LogOutIcon/>
+                                {t("log_out")}
+                            </MenuItem>
+                        </>}
+                    </Menu>
+
+                    {/* Language + Theme — only when expanded */}
+                    {showFullContent && (
+                        <div className="flex items-center gap-0">
+                            <LanguageToggle/>
+                            <Menu
+                                trigger={
+                                    <IconButton
+                                        color="inherit"
+                                        aria-label={t("toggle_theme") || "Toggle theme"}
+                                        className="text-surface-500 dark:text-surface-400"
+                                    >
+                                        {mode === "dark"
+                                            ? <MoonIcon size={iconSize.small}/>
+                                            : mode === "light"
+                                                ? <SunIcon size={iconSize.small}/>
+                                                : <SunMoonIcon size={iconSize.small}/>}
+                                    </IconButton>
+                                }
+                                portalContainer={portalRef.current}
+                                side="top"
+                            >
+                                <MenuItem onClick={() => setMode("dark")}><MoonIcon size={iconSize.smallest}/> {t("dark_mode")}</MenuItem>
+                                <MenuItem onClick={() => setMode("light")}><SunIcon size={iconSize.smallest}/> {t("light_mode")}</MenuItem>
+                                <MenuItem onClick={() => setMode("system")}><SunMoonIcon size={iconSize.smallest}/> {t("system_mode")}</MenuItem>
+                            </Menu>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/DrawerNavigationItem.tsx

@@ -33,7 +33,7 @@ export function DrawerNavigationItem({
                 width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
-            className={({ isActive }: any) => cls("rounded-md truncate",
+            className={({ isActive }: { isActive: boolean }) => cls("rounded-md truncate",
                 "hover:bg-surface-100 dark:hover:bg-surface-800/60 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
                 "flex flex-row items-center",
                 drawerOpen ? "pr-4 h-[30px]" : "h-[30px]",

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -1,6 +1,6 @@
 import type { AdditionalFieldDelegate } from "@rebasepro/types";
 import React, { useCallback, useMemo, useRef } from "react";
-import { CollectionSize, Entity, RebaseContext, User } from "@rebasepro/types";
+import { CollectionSize, Entity, RebaseContext, User, Property } from "@rebasepro/types";
 import { PropertyTableCell } from "./PropertyTableCell";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { useRebaseContext, useLargeLayout } from "@rebasepro/core";
@@ -138,11 +138,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         const propertyKey = column.key;
 
-        let disabled = column.custom?.disabled;
+        const columnCustom = column.custom as { disabled?: boolean; resolvedProperty?: Property } | undefined;
+        let disabled: boolean = columnCustom?.disabled ?? false;
         const property = getPropertyFor?.({
             propertyKey,
             entity
-        }) ?? column.custom.resolvedProperty;
+        }) ?? columnCustom?.resolvedProperty;
         if (!property?.ui?.disabled) {
             disabled = false;
         }
@@ -231,7 +232,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 disabledTooltip={"This column can't be edited directly"}
                 sortableNodeRef={sortableNodeRef}
                 sortableStyle={sortableStyle}
-                sortableAttributes={sortableAttributes}
+                sortableAttributes={sortableAttributes as Record<string, string | number | undefined>}
                 isDragging={isDragging}
                 isDraggable={isDraggable}
                 frozen={frozen}
@@ -337,7 +338,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 disabled={true}
                 sortableNodeRef={props.sortableNodeRef}
                 sortableStyle={props.sortableStyle}
-                sortableAttributes={props.sortableAttributes}
+                sortableAttributes={props.sortableAttributes as Record<string, string | number | undefined>}
                 isDragging={props.isDragging}
                 isDraggable={props.isDraggable}
                 frozen={props.frozen}>

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -1,4 +1,4 @@
-import { useCellSelected } from "../SelectableTable/SelectionStore";
+import { useCellSelected, createSelectionStore } from "../SelectableTable/SelectionStore";
 import type { ArrayProperty, NumberProperty, Property, ReferenceProperty, StringProperty } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { deepEqual as equal } from "fast-equals"
@@ -76,7 +76,9 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             setPopupCell
         } = useSelectableTableController();
 
-        const selected = useCellSelected(selectionStore, propertyKey, entity.path, entity.id);
+        const dummySelectionStore = useMemo(() => createSelectionStore(), []);
+        const activeSelectionStore = selectionStore || dummySelectionStore;
+        const selected = useCellSelected(activeSelectionStore, propertyKey, entity.path, entity.id);
 
         const [internalValue, setInternalValue] = useState<any | null>(value);
         const internalValueRef = useRef(value);
@@ -114,13 +116,13 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             [onValueUpdated, value]
         );
 
-        const saveValues = async (value: any) => {
+        const saveValues = async (value: unknown) => {
             if (equal(value, internalValueRef.current))
                 return;
             const result = await validation.safeParseAsync(value);
             if (result.success) {
                     setValidationError(undefined);
-                    internalValueRef.current = value;
+                    internalValueRef.current = value as T;
                     if (onValueChange) {
                         try {
                             onValueChange({
@@ -153,9 +155,9 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 });
         }, [internalValue, validation, propertyKey, property, entity]);
 
-        const updateValue = (newValue: any | null) => {
+        const updateValue = (newValue: unknown | null) => {
 
-            let updatedValue: any;
+            let updatedValue: unknown;
             if (newValue === undefined) {
                 updatedValue = null;
             } else {
@@ -165,7 +167,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             saveValues(updatedValue);
         };
 
-        useClearRestoreValue<any>({
+        useClearRestoreValue<unknown>({
             property,
             value: internalValue,
             setValue: updateValue

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

@@ -34,7 +34,7 @@ export function TableStorageUpload(props: {
     selected: boolean;
     focused: boolean;
     property: StringProperty | ArrayProperty;
-    entity: Entity<any>;
+    entity: Entity<Record<string, unknown>>;
     path: string;
     previewSize: PreviewSize;
     openPopup?: (cellRect?: DOMRect) => void;
@@ -112,13 +112,13 @@ interface StorageUploadProps {
     autoFocus: boolean;
     selected: boolean;
     disabled: boolean;
-    entity: Entity<any>;
+    entity: Entity<Record<string, unknown>>;
     previewSize: PreviewSize;
     storage: StorageConfig;
     onFilesAdded: (acceptedFiles: File[]) => void;
     storagePathBuilder: (file: File) => string;
     openPopup?: (cellRect?: DOMRect) => void;
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>;
 }
 
 function StorageUpload({
@@ -156,7 +156,7 @@ function StorageUpload({
         }
     }
 
-    const metadata: any | undefined = storage?.metadata;
+    const metadata: Record<string, unknown> | undefined = storage?.metadata;
     const hasValue = Boolean(internalValue);
 
     const snackbarContext = useSnackbarController();
@@ -288,7 +288,7 @@ interface TableStorageItemPreviewProps {
     property: StringProperty;
     value: string,
     size: PreviewSize;
-    entity: Entity<any>;
+    entity: Entity<Record<string, unknown>>;
 }
 
 export function TableStorageItemPreview({

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { useDebouncedCallback, cls, focusedDisabled } from "@rebasepro/ui";
+import { useDebouncedCallback, cls, focusedDisabled, TextField } from "@rebasepro/ui";
 
 export function VirtualTableNumberInput(props: {
     error: Error | undefined;
@@ -50,21 +50,24 @@ export function VirtualTableNumberInput(props: {
         [value, focused]
     );
 
-    const ref = React.useRef<HTMLInputElement>(null);
+    const inputRef = React.useRef<HTMLInputElement>(null);
 
     useEffect(() => {
-        if (ref.current && focused) {
-            ref.current.focus({ preventScroll: true });
+        if (inputRef.current && focused) {
+            inputRef.current.focus({ preventScroll: true });
         }
-    }, [focused, ref]);
+    }, [focused, inputRef]);
 
     const regexp = /^-?[0-9]+[,.]?[0-9]*$/;
 
     return (
-        <input
-            ref={ref}
-            className={cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-hidden font-normal leading-normal text-unset", focusedDisabled)}
-            style={{
+        <TextField
+            inputRef={inputRef}
+            invisible={true}
+            size="small"
+            className="w-full"
+            inputClassName={cls("p-0 m-0 bg-transparent border-none outline-hidden font-normal leading-normal text-unset", focusedDisabled)}
+            inputStyle={{
                 textAlign: align
             }}
             value={internalValue ?? ""}

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

@@ -13,7 +13,7 @@ interface EntityTableCellProps {
     /**
      * The value is used only to check changes and force re-renders
      */
-    value?: any;
+    value?: unknown;
     disabled: boolean;
     savedTimestamp?: number;
     error?: Error;
@@ -31,7 +31,7 @@ interface EntityTableCellProps {
     // Sortable props for dnd-kit integration
     sortableNodeRef?: (node: HTMLElement | null) => void;
     sortableStyle?: React.CSSProperties;
-    sortableAttributes?: Record<string, any>;
+    sortableAttributes?: Record<string, string | number | undefined>;
     isDragging?: boolean;
     isDraggable?: boolean;
     frozen?: boolean;

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

@@ -248,7 +248,7 @@ export function PopupFormFieldInternal<M extends Record<string, unknown>>({
             if (!validationSchema) return {};
             const result = await validationSchema.safeParseAsync(values);
             if (result.success) return {};
-            return zodToFormErrors(result.error);
+            return zodToFormErrors(result.error) as Record<string, string>;
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {