@rebasepro/ui 0.2.3 → 0.2.4

package/dist/util/debounce.d.ts

@@ -1,7 +1,7 @@
 /**
  * @ignore
  */
-export declare function debounce<T extends (...args: any[]) => any>(func: T, wait?: number): T & Cancelable;
+export declare function debounce<T extends (...args: any[]) => unknown>(func: T, wait?: number): T & Cancelable;
 /**
  * @ignore
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -72,7 +72,7 @@
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
     "tailwind-merge": "^2.6.1",
-    "@rebasepro/types": "0.2.3"
+    "@rebasepro/types": "0.2.4"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/components/BooleanSwitch.tsx

@@ -29,7 +29,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
             role="switch"
             aria-checked={allowIndeterminate && (value === null || value === undefined) ? "mixed" : !!value}
             aria-disabled={disabled || undefined}
-            ref={ref as any}
+            ref={ref}
             tabIndex={disabled ? -1 : undefined}
             onClick={disabled
                 ? (e) => e.preventDefault()

package/src/components/Button.tsx

@@ -12,7 +12,7 @@ export type ButtonProps<C extends React.ElementType = "button"> = {
     fullWidth?: boolean;
     className?: string;
     component?: C;
-    onClick?: React.MouseEventHandler<any>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
 } & React.ComponentPropsWithoutRef<C>;
 
 const ButtonInner = React.memo(React.forwardRef<
@@ -29,10 +29,10 @@ const ButtonInner = React.memo(React.forwardRef<
        component: Component,
        color = "neutral",
        ...props
-   }: ButtonProps<any>, ref) => {
+   }: ButtonProps<React.ElementType>, ref) => {
 
     const baseClasses =
-        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]";
+        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-1.5 px-3 focus:outline-none transition-all ease-in-out duration-150 gap-1.5 active:scale-[0.98]";
 
     const buttonClasses = cls({
         "w-full": fullWidth,
@@ -68,11 +68,11 @@ const ButtonInner = React.memo(React.forwardRef<
 
     const sizeClasses = cls(
         {
-            "py-1 px-2": size === "small",
-            "py-2 px-4": size === "medium",
-            "py-2.5 px-5": size === "large",
-            "py-3 px-6": size === "xl",
-            "py-4 px-10": size === "2xl"
+            "py-0.5 px-1.5": size === "small",
+            "py-1.5 px-3": size === "medium",
+            "py-2 px-4": size === "large",
+            "py-2.5 px-5": size === "xl",
+            "py-3 px-6": size === "2xl"
         }
     );
 
@@ -83,7 +83,7 @@ const ButtonInner = React.memo(React.forwardRef<
     if (Component) {
         return (
             <Component
-                ref={ref as any}
+                ref={ref}
                 onClick={props.onClick}
                 className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}
                 {...props}>
@@ -94,7 +94,7 @@ const ButtonInner = React.memo(React.forwardRef<
     }
 
     return (
-        <button ref={ref as any}
+        <button ref={ref as React.Ref<HTMLButtonElement>}
                 type={props.type ?? "button"}
                 onClick={props.onClick}
                 className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}
@@ -111,4 +111,4 @@ const ButtonInner = React.memo(React.forwardRef<
 
 ButtonInner.displayName = "Button"
 
-export const Button = ButtonInner as React.FC<ButtonProps<any>>;
+export const Button = ButtonInner as React.FC<ButtonProps<React.ElementType>>;

package/src/components/ErrorBoundary.tsx

@@ -1,16 +1,54 @@
 
 import React, { ErrorInfo, PropsWithChildren } from "react";
 
-import { AlertCircleIcon } from "lucide-react";
+import { AlertCircleIcon, ShieldAlertIcon, RefreshCwIcon, ArrowLeftIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { iconSize } from "../icons/Icon";
 import { Typography } from "./Typography";
+import { Button } from "./Button";
+import { cls } from "../util";
 
-export class ErrorBoundary extends React.Component<PropsWithChildren<Record<string, unknown>>, {
-    error: Error | null
-}> {
-    constructor(props: any) {
+/**
+ * Checks whether the error message relates to missing permissions or
+ * authorization failures. Used to show a friendlier message in fullPage mode.
+ */
+function isPermissionError(error: Error | null): boolean {
+    if (!error) return false;
+    const msg = error.message?.toLowerCase() ?? "";
+    const code = (error as { code?: string }).code?.toLowerCase() ?? "";
+    return msg.includes("permission")
+        || msg.includes("insufficient")
+        || msg.includes("unauthorized")
+        || msg.includes("forbidden")
+        || msg.includes("access denied")
+        || code === "permission_denied"
+        || code === "insufficient_permissions"
+        || (error as { status?: number }).status === 403;
+}
+
+export interface ErrorBoundaryProps {
+    /**
+     * When true, renders a full-page centered error screen instead of the
+     * compact inline error. Intended for wrapping top-level app roots or
+     * major route sections.
+     */
+    fullPage?: boolean;
+    /**
+     * Optional callback invoked when the user clicks "Try again". If provided,
+     * the boundary resets its error state and calls this handler. If omitted,
+     * the "Try again" button resets the boundary state, re-mounting children.
+     */
+    onReset?: () => void;
+}
+
+interface ErrorBoundaryState {
+    error: Error | null;
+    showDetails: boolean;
+}
+
+export class ErrorBoundary extends React.Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
+    constructor(props: PropsWithChildren<ErrorBoundaryProps>) {
         super(props);
-        this.state = { error: null };
+        this.state = { error: null, showDetails: false };
     }
 
     static getDerivedStateFromError(error: Error) {
@@ -19,24 +57,139 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
 
     componentDidCatch(error: Error, _errorInfo: ErrorInfo) {
         console.error(error);
-        // logErrorToMyService(error, errorInfo);
     }
 
+    private handleReset = () => {
+        this.setState({ error: null, showDetails: false });
+        this.props.onReset?.();
+    };
+
+    private handleReload = () => {
+        window.location.reload();
+    };
+
+    private toggleDetails = () => {
+        this.setState(prev => ({ showDetails: !prev.showDetails }));
+    };
+
     render() {
         if (this.state.error) {
-            return (
-                <div className="flex flex-col m-2">
-                    <div className="flex items-center m-2">
-                        <AlertCircleIcon className={"text-red-500"} size={iconSize.small}/>
-                        <div className="ml-4">Error</div>
-                    </div>
-                    <Typography variant={"caption"}>
-                        {this.state.error?.message ?? "See the error in the console"}
-                    </Typography>
-                </div>
-            );
+            if (this.props.fullPage) {
+                return this.renderFullPage();
+            }
+            return this.renderInline();
         }
 
         return this.props.children;
     }
+
+    private renderInline() {
+        return (
+            <div className="flex flex-col m-2">
+                <div className="flex items-center m-2">
+                    <AlertCircleIcon className={"text-red-500"} size={iconSize.small}/>
+                    <div className="ml-4">Error</div>
+                </div>
+                <Typography variant={"caption"}>
+                    {this.state.error?.message ?? "See the error in the console"}
+                </Typography>
+            </div>
+        );
+    }
+
+    private renderFullPage() {
+        const { error, showDetails } = this.state;
+        const isPermission = isPermissionError(error);
+
+        const Icon = isPermission ? ShieldAlertIcon : AlertCircleIcon;
+        const title = isPermission
+            ? "Access denied"
+            : "Something went wrong";
+        const description = isPermission
+            ? "You don't have permission to access this resource. Please check your account permissions or contact your administrator."
+            : "An unexpected error occurred. You can try reloading the page or going back.";
+
+        return (
+            <div className={cls(
+                "flex items-center justify-center min-h-[400px] h-full w-full",
+                "bg-surface-50 dark:bg-surface-950"
+            )}>
+                <div className="flex flex-col items-center max-w-md px-6 py-10 text-center">
+                    <div className={cls(
+                        "flex items-center justify-center w-14 h-14 rounded-2xl mb-6",
+                        isPermission
+                            ? "bg-amber-100 dark:bg-amber-900/30"
+                            : "bg-red-100 dark:bg-red-900/30"
+                    )}>
+                        <Icon
+                            size={28}
+                            className={isPermission
+                                ? "text-amber-600 dark:text-amber-400"
+                                : "text-red-500 dark:text-red-400"}
+                        />
+                    </div>
+
+                    <Typography variant={"h6"}
+                                className="text-text-primary dark:text-text-primary-dark mb-2">
+                        {title}
+                    </Typography>
+
+                    <Typography variant={"body2"}
+                                className="text-text-secondary dark:text-text-secondary-dark mb-8">
+                        {description}
+                    </Typography>
+
+                    <div className="flex gap-3">
+                        <Button
+                            variant="outlined"
+                            color="neutral"
+                            size="medium"
+                            onClick={this.handleReset}
+                        >
+                            <ArrowLeftIcon size={16}/>
+                            Try again
+                        </Button>
+                        <Button
+                            variant="filled"
+                            color="primary"
+                            size="medium"
+                            onClick={this.handleReload}
+                        >
+                            <RefreshCwIcon size={16}/>
+                            Reload page
+                        </Button>
+                    </div>
+
+                    {error?.message && (
+                        <div className="mt-8 w-full">
+                            <button
+                                onClick={this.toggleDetails}
+                                className={cls(
+                                    "flex items-center gap-1 mx-auto text-xs",
+                                    "text-text-disabled dark:text-text-disabled-dark",
+                                    "hover:text-text-secondary dark:hover:text-text-secondary-dark",
+                                    "transition-colors cursor-pointer bg-transparent border-none p-0"
+                                )}
+                            >
+                                Technical details
+                                {showDetails
+                                    ? <ChevronUpIcon size={14}/>
+                                    : <ChevronDownIcon size={14}/>}
+                            </button>
+                            {showDetails && (
+                                <div className={cls(
+                                    "mt-3 p-3 rounded-lg text-left text-xs",
+                                    "bg-surface-100 dark:bg-surface-800",
+                                    "text-text-secondary dark:text-text-secondary-dark",
+                                    "font-mono break-all"
+                                )}>
+                                    {error.message}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
 }

package/src/components/IconButton.tsx

@@ -19,10 +19,10 @@ const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses = {
-    medium: "w-10 !h-10 min-w-10 min-h-10",
-    small: "w-8 !h-8 min-w-8 min-h-8",
-    smallest: "w-6 !h-6 min-w-6 min-h-6",
-    large: "w-12 !h-12 min-w-12 min-h-12"
+    medium: "w-9 !h-9 min-w-9 min-h-9",
+    small: "w-7 !h-7 min-w-7 min-h-7",
+    smallest: "w-5 !h-5 min-w-5 min-h-5",
+    large: "w-10 !h-10 min-w-10 min-h-10"
 }
 const shapeClasses = {
     circular: "rounded-full",

package/src/components/MultiSelect.tsx

@@ -98,7 +98,7 @@ export const MultiSelect = React.forwardRef<
     ) => {
         const [isMounted, setIsMounted] = useState(false);
         const [isPopoverOpen, setIsPopoverOpen] = useState(open ?? false);
-        const [selectedValues, setSelectedValues] = useState<any[]>(value ?? []);
+        const [selectedValues, setSelectedValues] = useState<string[]>(value ?? []);
 
         // Get the portal container from context
         const contextContainer = usePortalContainer();
@@ -143,17 +143,17 @@ export const MultiSelect = React.forwardRef<
             setSelectedValues(value ?? []);
         }, [value]);
 
-        const updateValues = React.useCallback((values: any[]) => {
+        const updateValues = React.useCallback((values: string[]) => {
             setSelectedValues(values);
             onValueChange?.(values);
         }, [onValueChange]);
 
-        const onItemClick = React.useCallback((newValue: any) => {
-            let newSelectedValues: any[];
+        const onItemClick = React.useCallback((newValue: MultiSelectValue) => {
+            let newSelectedValues: string[];
             if (selectedValues.some(v => String(v) === String(newValue))) {
                 newSelectedValues = selectedValues.filter(v => String(v) !== String(newValue));
             } else {
-                newSelectedValues = [...selectedValues, newValue];
+                newSelectedValues = [...selectedValues, String(newValue)];
             }
             updateValues(newSelectedValues);
         }, [selectedValues, updateValues]);
@@ -170,7 +170,7 @@ export const MultiSelect = React.forwardRef<
             }
         };
 
-        const toggleOption = (value: any) => {
+        const toggleOption = (value: string) => {
             const newSelectedValues = selectedValues.some(v => String(v) === String(value))
                 ? selectedValues.filter(v => String(v) !== String(value))
                 : [...selectedValues, value];

package/src/components/SearchBar.tsx

@@ -95,7 +95,7 @@ export function SearchBar({
             </div>
             <input
                 value={searchText ?? ""}
-                ref={inputRef as any}
+                ref={inputRef}
                 onClick={onClick}
                 placeholder={placeholder}
                 aria-label={placeholder}

package/src/components/TextareaAutosize.tsx

@@ -260,7 +260,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
                 value={value}
                 onChange={handleChange}
                 className={props.className}
-                ref={handleRef as any}
+                ref={handleRef as React.Ref<HTMLTextAreaElement>}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 // Apply the rows prop to get a "correct" first SSR paint
@@ -279,7 +279,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
                 aria-hidden
                 className={cls(props.className, props.shadowClassName)}
                 readOnly
-                ref={shadowRef as any}
+                ref={shadowRef}
                 tabIndex={-1}
                 style={{
                     padding: 0,

package/src/components/VirtualTable/VirtualTable.tsx

@@ -40,7 +40,7 @@ VirtualListContext.displayName = "VirtualListContext";
 
 type InnerElementProps = {
     children: React.ReactNode,
-    style: any
+    style: React.CSSProperties
 };
 
 // eslint-disable-next-line react/display-name
@@ -107,8 +107,8 @@ zIndex: 20 }}>
  *
  * @group Components
  */
-export const VirtualTable = React.memo<VirtualTableProps<any>>(
-    function VirtualTable<T extends Record<string, any>>({
+export const VirtualTable = React.memo<VirtualTableProps<Record<string, unknown>>>(
+    function VirtualTable<T extends Record<string, unknown>>({
         data,
         onResetPagination,
         onEndReached,
@@ -229,7 +229,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [columns, onColumnResize, onColumnResizeEnd]);
 
         // saving the current filter as a ref as a workaround for header closure
-        const filterRef = useRef<VirtualTableFilterValues<any> | undefined>(undefined);
+        const filterRef = useRef<VirtualTableFilterValues<string> | undefined>(undefined);
 
         useEffect(() => {
             filterRef.current = filterInput;
@@ -299,11 +299,11 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 onEndReachedInternal(scrollOffset);
         }, [maxScroll, onEndReachedInternal]);
 
-        const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => {
+        const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => {
 
             endReachCallbackThreshold.current = 0;
             const filter = filterRef.current;
-            let newFilterValue: VirtualTableFilterValues<any> = filter ? { ...filter } : {};
+            let newFilterValue: VirtualTableFilterValues<string> = filter ? { ...filter } : {};
 
             if (!filterForProperty) {
                 delete newFilterValue[column.key];
@@ -506,7 +506,7 @@ function MemoizedList({
     const Row = useCallback(({
         index,
         style
-    }: any) => {
+    }: { index: number; style: React.CSSProperties }) => {
         return <VirtualListContext.Consumer>
             {({
                 onRowClick,
@@ -535,7 +535,7 @@ function MemoizedList({
                     </div>;
                 }
 
-                const rowData = data && data[index];
+                const rowData = (data ? data[index] : undefined) as Record<string, unknown>;
                 return (
                     <VirtualTableRow
                         key={`row_${index}`}

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -8,22 +8,22 @@ type VirtualTableCellProps<T> = {
     dataKey: string;
     column: VirtualTableColumn;
     columns: VirtualTableColumn[];
-    rowData: any;
-    cellData: any;
-    rowIndex: any;
+    rowData: T;
+    cellData: unknown;
+    rowIndex: number;
     columnIndex: number;
     cellRenderer: (props: CellRendererParams<T>) => React.ReactNode;
     // Sortable props
     sortableNodeRef?: (node: HTMLElement | null) => void;
     sortableStyle?: React.CSSProperties;
-    sortableAttributes?: Record<string, any>;
+    sortableAttributes?: Record<string, unknown>;
     isDragging?: boolean;
     isDraggable?: boolean;
     frozen?: boolean;
-    extraData?: any;
+    extraData?: unknown;
 };
 
-export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
+export const VirtualTableCell = React.memo<VirtualTableCellProps<unknown>>(
     function VirtualTableCell<T>(props: VirtualTableCellProps<T>) {
         return props.rowData ? props.cellRenderer(
             {

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -14,8 +14,8 @@ import { defaultBorderMixin } from "../../styles";
 import { cls } from "../../util/cls";
 interface FilterFormProps<T> {
     column: VirtualTableColumn<T>;
-    onFilterUpdate: (filter?: [VirtualTableWhereFilterOp, any], newOpenFilterState?: boolean) => void;
-    filter?: [VirtualTableWhereFilterOp, any];
+    onFilterUpdate: (filter?: [VirtualTableWhereFilterOp, unknown], newOpenFilterState?: boolean) => void;
+    filter?: [VirtualTableWhereFilterOp, unknown];
     onHover: boolean,
     createFilterField: (props: FilterFormFieldProps<T>) => React.ReactNode;
     hidden: boolean;
@@ -24,31 +24,31 @@ interface FilterFormProps<T> {
 
 export type FilterFormFieldProps<CustomProps> = {
     id: React.Key,
-    filterValue: [VirtualTableWhereFilterOp, any] | undefined,
-    setFilterValue: (filterValue?: [VirtualTableWhereFilterOp, any]) => void;
+    filterValue: [VirtualTableWhereFilterOp, unknown] | undefined,
+    setFilterValue: (filterValue?: [VirtualTableWhereFilterOp, unknown]) => void;
     column: VirtualTableColumn<CustomProps>;
     hidden: boolean;
     setHidden: (hidden: boolean) => void;
 };
 
-type VirtualTableHeaderProps<M extends Record<string, any>> = {
+type VirtualTableHeaderProps<M extends Record<string, unknown>> = {
     resizeHandleRef: React.Ref<HTMLDivElement>;
     columnIndex: number;
     isResizingIndex: number;
-    column: VirtualTableColumn<any>;
+    column: VirtualTableColumn<unknown>;
     onColumnSort: (key: Extract<keyof M, string>) => void;
-    filter?: [VirtualTableWhereFilterOp, any];
+    filter?: [VirtualTableWhereFilterOp, unknown];
     sort: VirtualTableSort;
-    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
+    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
     onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
-    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;
     AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
     isDragging?: boolean;
     isDraggable?: boolean;
 };
 
-export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
-    function VirtualTableHeader<M extends Record<string, any>>({
+export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<Record<string, unknown>>>(
+    function VirtualTableHeader<M extends Record<string, unknown>>({
         resizeHandleRef,
         columnIndex,
         isResizingIndex,
@@ -73,7 +73,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
             setOpenFilter(true);
         }, []);
 
-        const update = useCallback((filterForProperty?: [VirtualTableWhereFilterOp, any], newOpenFilterState?: boolean) => {
+        const update = useCallback((filterForProperty?: [VirtualTableWhereFilterOp, unknown], newOpenFilterState?: boolean) => {
             onFilterUpdate(column, filterForProperty);
             if (newOpenFilterState !== undefined)
                 setOpenFilter(newOpenFilterState);
@@ -182,7 +182,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     </div>}
 
                     {column.resizable && <div
-                        ref={resizeHandleRef as any}
+                        ref={resizeHandleRef as React.Ref<HTMLDivElement>}
                         data-no-dnd="true"
                         className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
@@ -199,7 +199,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
             </ErrorBoundary>
         );
-    }, equal) as React.FunctionComponent<VirtualTableHeaderProps<any>>;
+    }, equal) as React.FunctionComponent<VirtualTableHeaderProps<Record<string, unknown>>>;
 
 function FilterForm<M>({
     column,
@@ -213,7 +213,7 @@ function FilterForm<M>({
 
     const id = column.key;
 
-    const [filterInternal, setFilterInternal] = useState<[VirtualTableWhereFilterOp, any] | undefined>(filter);
+    const [filterInternal, setFilterInternal] = useState<[VirtualTableWhereFilterOp, unknown] | undefined>(filter);
 
     useEffect(() => {
         setFilterInternal(filter);

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -28,13 +28,13 @@ const SortableColumnHeader = ({
     columnIndex: number;
     columnRefs: React.Ref<HTMLDivElement>[];
     isResizing: number;
-    onFilterUpdate: any;
-    filter: [VirtualTableWhereFilterOp, any] | undefined;
+    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
+    filter: [VirtualTableWhereFilterOp, unknown] | undefined;
     sortByProperty: string | undefined;
     currentSort: "asc" | "desc" | undefined;
-    onColumnSort: any;
+    onColumnSort: (key: string) => void;
     onClickResizeColumn: (index: number) => void;
-    createFilterField: any;
+    createFilterField: ((props: import("./VirtualTableHeader").FilterFormFieldProps<unknown>) => React.ReactNode) | undefined;
     isDragging: boolean;
     isDraggable: boolean;
 }) => {
@@ -125,7 +125,7 @@ export const VirtualTableHeaderRow = ({
     rowHeight = 54,
     draggingColumnId,
     headerHeight = 48
-}: VirtualTableContextProps<any>) => {
+}: VirtualTableContextProps<Record<string, unknown>>) => {
 
     const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
     const [isResizing, setIsResizing] = useState(-1);
@@ -212,7 +212,7 @@ export const VirtualTableHeaderRow = ({
                 className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-900")}
                 style={{ height: headerHeight }}>
                 {columns.map((column, columnIndex) => {
-                    const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
+                    const filterForThisProperty: [VirtualTableWhereFilterOp, unknown] | undefined =
                         column && filter && filter[column.key]
                             ? filter[column.key]
                             : undefined;