@firecms/core 3.0.0-canary.2 → 3.0.0-canary.200

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -1,7 +1,17 @@
 import React, { useState } from "react";
 import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { ClearIcon, IconButton, Select, SelectItem, TextField } from "@firecms/ui";
+import {
+    Checkbox,
+    CloseIcon,
+    IconButton,
+    Label,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    TextField
+} from "@firecms/ui";
 import { EnumValueConfig } from "../../../types";
 
 interface StringNumberFilterFieldProps {
@@ -50,15 +60,15 @@ export function StringNumberFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | undefined) {
+    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | undefined) {
         let newValue = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         if (prevOpIsArray !== newOpIsArray) {
             // @ts-ignore
-            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : "";
+            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : undefined;
         }
 
         if (typeof newValue === "number" && isNaN(newValue))
@@ -82,11 +92,13 @@ export function StringNumberFilterField({
     }
 
     const multiple = multipleSelectOperations.includes(operation);
+
     return (
 
-        <div className="flex w-[440px] items-center">
+        <div className="flex w-[440px]">
             <div className={"w-[80px]"}>
                 <Select value={operation}
+                        fullWidth={true}
                         position={"item-aligned"}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
@@ -100,11 +112,11 @@ export function StringNumberFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2">
+            <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 {!enumValues && <TextField
                     type={dataType === "number" ? "number" : undefined}
-                    value={internalValue !== undefined ? String(internalValue) : ""}
+                    value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
                     onChange={(evt) => {
                         const val = dataType === "number"
                             ? parseFloat(evt.target.value)
@@ -113,33 +125,38 @@ export function StringNumberFilterField({
                     }}
                     endAdornment={internalValue && <IconButton
                         onClick={(e) => updateFilter(operation, undefined)}>
-                        <ClearIcon/>
+                        <CloseIcon/>
                     </IconButton>}
                 />}
 
-                {enumValues &&
-
+                {enumValues && !multiple &&
                     <Select
                         position={"item-aligned"}
-                        value={internalValue !== undefined
-                            ? (Array.isArray(internalValue) ? internalValue.map(e => String(e)) : String(internalValue))
-                            : isArray ? [] : ""}
+                        fullWidth={true}
+                        value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
-                            updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
+                            if (value !== "")
+                                updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
                         }}
-                        multiple={multiple}
                         endAdornment={internalValue && <IconButton
-                            className="absolute right-3 top-2"
+                            className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>}
-                        renderValue={(enumKey) => <EnumValuesChip
-                            key={`select_value_${name}_${enumKey}`}
-                            enumKey={enumKey}
-                            enumValues={enumValues}
-                            size={"small"}/>}>
+                        renderValue={(enumKey) => {
+                            if (enumKey === null)
+                                return "Filter for null values";
+                            if (enumKey === undefined)
+                                return null;
+
+                            return <EnumValuesChip
+                                key={`select_value_${name}_${enumKey}`}
+                                enumKey={enumKey}
+                                enumValues={enumValues}
+                                size={"small"}/>;
+                        }}>
                         {enumValues.map((enumConfig) => (
-                            <SelectItem key={`select_value_${name}_${enumConfig.id}`}
+                            <SelectItem key={`select_item_${name}_${enumConfig.id}`}
                                         value={String(enumConfig.id)}>
                                 <EnumValuesChip
                                     enumKey={String(enumConfig.id)}
@@ -150,6 +167,58 @@ export function StringNumberFilterField({
                     </Select>
                 }
 
+                {enumValues && multiple &&
+                    <MultiSelect
+                        position={"item-aligned"}
+                        value={Array.isArray(internalValue) ? internalValue.map(e => String(e)) : []}
+                        onValueChange={(value) => {
+                            updateFilter(operation, dataType === "number" ? value.map(v => parseInt(v)) : value)
+                        }}
+                        multiple={multiple}
+                        endAdornment={internalValue && <IconButton
+                            className="absolute right-2 top-3"
+                            onClick={(e) => updateFilter(operation, undefined)}>
+                            <CloseIcon/>
+                        </IconButton>}
+                        // renderValues={(enumKeys) => {
+                        //     console.log("renderValues", enumKeys);
+                        //     if (enumKeys === null)
+                        //         return "Filter for null values";
+                        //
+                        //     return enumKeys.map(key => <EnumValuesChip
+                        //         key={`select_value_${name}_${enumKeys}`}
+                        //         enumKey={key}
+                        //         enumValues={enumValues}
+                        //         size={"small"}/>);
+                        // }}
+                    >
+                        {enumValues.map((enumConfig) => (
+                            <MultiSelectItem key={`select_value_${name}_${enumConfig.id}`}
+                                             value={String(enumConfig.id)}>
+                                <EnumValuesChip
+                                    enumKey={String(enumConfig.id)}
+                                    enumValues={enumValues}
+                                    size={"small"}/>
+                            </MultiSelectItem>
+                        ))}
+                    </MultiSelect>
+                }
+
+                {!isArray && <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                              checked={internalValue === null}
+                              size={"small"}
+                              onCheckedChange={(checked) => {
+                                  if (internalValue !== null)
+                                      updateFilter(operation, null);
+                                  else updateFilter(operation, undefined);
+                              }}/>
+                    Filter for null values
+                </Label>}
+
             </div>
 
         </div>

package/src/components/UnsavedChangesDialog.tsx

@@ -0,0 +1,42 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
+
+export interface UnsavedChangesDialogProps {
+    open: boolean;
+    body?: React.ReactNode;
+    title?: string;
+    handleOk: () => void;
+    handleCancel: () => void;
+}
+
+export function UnsavedChangesDialog({
+                                         open,
+                                         handleOk,
+                                         handleCancel,
+                                         body,
+                                         title
+                                     }: UnsavedChangesDialogProps) {
+
+    return (
+        <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
+            open={open}
+        >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
+            <DialogContent>
+
+                {body}
+
+                <Typography>
+                    Are you sure you want to leave this page?
+                </Typography>
+
+            </DialogContent>
+            <DialogActions>
+                <Button variant="text" onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button onClick={handleOk}> Ok </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/VirtualTable/VirtualTable.tsx

@@ -15,12 +15,12 @@ import {
     VirtualTableWhereFilterOp
 } from "./VirtualTableProps";
 
-import { getRowHeight } from "./common";
 import { VirtualTableContextProps } from "./types";
 import { VirtualTableHeaderRow } from "./VirtualTableHeaderRow";
 import { VirtualTableRow } from "./VirtualTableRow";
 import { VirtualTableCell } from "./VirtualTableCell";
-import { AssignmentIcon, cn, Markdown, Typography } from "@firecms/ui";
+import { AssignmentIcon, CenteredView, cls, Typography } from "@firecms/ui";
+import { useDebounceCallback } from "../common/useDebouncedCallback";
 
 const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
 VirtualListContext.displayName = "VirtualListContext";
@@ -64,10 +64,10 @@ const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
 
                             {customView && <div style={{
                                 position: "sticky",
-                                top: "56px",
+                                top: "48px",
                                 flexGrow: 1,
-                                height: "calc(100% - 56px)",
-                                marginTop: "calc(56px - 100vh)",
+                                height: "calc(100% - 48px)",
+                                marginTop: "calc(48px - 100vh)",
                                 left: 0
                             }}>{customView}</div>}
 
@@ -92,7 +92,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              data,
                                                              onResetPagination,
                                                              onEndReached,
-                                                             size = "m",
+                                                             endOffset = 600,
+                                                             rowHeight = 54,
                                                              columns: columnsProp,
                                                              onRowClick,
                                                              onColumnResize,
@@ -103,14 +104,18 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              error,
                                                              emptyComponent,
                                                              onSortByUpdate,
+                                                             onScroll: onScrollProp,
                                                              loading,
                                                              cellRenderer,
                                                              hoverRow,
                                                              createFilterField,
                                                              rowClassName,
+                                                             style,
                                                              className,
                                                              endAdornment,
-                                                             AddColumnComponent
+                                                             AddColumnComponent,
+                                                             initialScroll = 0,
+                                                             debug
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -121,6 +126,15 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const tableRef = useRef<HTMLDivElement>(null);
         const endReachCallbackThreshold = useRef<number>(0);
 
+        const debouncedScroll = useDebounceCallback(onScrollProp, 200);
+
+        // Set initial scroll position
+        useEffect(() => {
+            if (tableRef.current && initialScroll) {
+                tableRef.current.scrollTo(0, initialScroll);
+            }
+        }, [tableRef, initialScroll]);
+
         useEffect(() => {
             setColumns(columnsProp);
         }, [columnsProp]);
@@ -128,10 +142,14 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const [measureRef, bounds] = useMeasure();
 
         const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
+            if (debug)
+                console.log("onColumnResizeInternal", params);
             setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
         }, [columns]);
 
         const onColumnResizeEndInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
+            if (debug)
+                console.log("onColumnResizeEndInternal", params);
             setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
             if (onColumnResize) {
                 onColumnResize(params);
@@ -142,19 +160,25 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const filterRef = useRef<VirtualTableFilterValues<any> | undefined>();
 
         useEffect(() => {
+            if (debug)
+                console.log("Filter updated", filterInput);
             filterRef.current = filterInput;
         }, [filterInput]);
 
         const scrollToTop = useCallback(() => {
+            if (debug)
+                console.log("scrollToTop");
             endReachCallbackThreshold.current = 0;
             if (tableRef.current) {
-                // scrollRef.current = [scrollRef.current[0], 0];
                 tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
             }
         }, []);
 
         const onColumnSort = useCallback((key: string) => {
 
+            if (debug)
+                console.log("onColumnSort", key);
+
             const isDesc = sortByProperty === key && currentSort === "desc";
             const isAsc = sortByProperty === key && currentSort === "asc";
             const newSort = isAsc ? "desc" : (isDesc ? undefined : "asc");
@@ -181,21 +205,21 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollToTop();
         }, [checkFilterCombination, currentSort, onFilterUpdate, onResetPagination, onSortByUpdate, scrollToTop, sortByProperty]);
 
-        const resetSort = useCallback(() => {
-            endReachCallbackThreshold.current = 0;
-            if (onSortByUpdate)
-                onSortByUpdate(undefined);
-        }, [onSortByUpdate]);
+        const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
+        if (debug)
+            console.log("maxScroll", maxScroll);
 
-        const maxScroll = Math.max((data?.length ?? 0) * getRowHeight(size) - bounds.height, 0);
         const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + 600) {
+            if (debug)
+                console.log("onEndReachedInternal", scrollOffset, endReachCallbackThreshold.current + endOffset);
+            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
                 endReachCallbackThreshold.current = scrollOffset;
                 onEndReached();
             }
         }, [data?.length, onEndReached]);
 
         const onScroll = useCallback(({
+                                          scrollDirection,
                                           scrollOffset,
                                           scrollUpdateWasRequested
                                       }: {
@@ -203,11 +227,26 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
         }) => {
-            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - 600))
+            if (debug)
+                console.log("onScroll", {
+                    scrollDirection,
+                    scrollOffset,
+                    scrollUpdateWasRequested
+                });
+            if (onScrollProp) {
+                debouncedScroll({
+                    scrollDirection,
+                    scrollOffset,
+                    scrollUpdateWasRequested
+                })
+            }
+            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - endOffset))
                 onEndReachedInternal(scrollOffset);
         }, [maxScroll, onEndReachedInternal]);
 
         const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => {
+            if (debug)
+                console.log("onFilterUpdateInternal", column, filterForProperty);
 
             endReachCallbackThreshold.current = 0;
             const filter = filterRef.current;
@@ -225,41 +264,33 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             }
 
             if (onFilterUpdate) onFilterUpdate(newFilterValue);
+        }, [checkFilterCombination, currentSort, onFilterUpdate, sortByProperty]);
 
-            if (column.key !== sortByProperty) {
-                resetSort();
-            }
-        }, [checkFilterCombination, currentSort, onFilterUpdate, resetSort, sortByProperty]);
-
-        const buildErrorView = useCallback(() => (
-            <div
-                className="h-full flex flex-col items-center justify-center sticky left-0">
+        const empty = !loading && (data?.length ?? 0) === 0;
+        const customView = error
+            ? <CenteredView maxWidth={"2xl"}
+                            className="flex flex-col gap-2">
 
                 <Typography variant={"h6"}>
-                    {"Error fetching data from the data source"}
+                    {"Error"}
                 </Typography>
 
-                {error?.message && <Markdown className={"px-4 break-all"} source={error.message}/>}
-
-            </div>
-        ), [error?.message]);
-
-        const buildEmptyView = useCallback(() => {
-            if (loading)
-                return <CircularProgressCenter/>;
-            return <div
-                className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
-                <AssignmentIcon/>
-                {emptyComponent}
-            </div>;
-        }, [emptyComponent, loading]);
+                {error?.message && <SafeLinkRenderer text={error.message}/>}
 
-        const empty = !loading && (data?.length ?? 0) === 0;
-        const customView = error ? buildErrorView() : (empty ? buildEmptyView() : undefined);
+            </CenteredView>
+            : (empty
+                ? (loading
+                    ? <CircularProgressCenter/>
+                    : <div
+                        className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
+                        <AssignmentIcon/>
+                        {emptyComponent}
+                    </div>)
+                : undefined);
 
         const virtualListController = {
             data,
-            size,
+            rowHeight: rowHeight,
             cellRenderer,
             columns,
             currentSort,
@@ -278,23 +309,26 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             AddColumnComponent
         };
 
-        // useTraceUpdate(virtualListController);
+        if (debug)
+            console.log("VirtualTable render", virtualListController);
+
         return (
             <div
                 ref={measureRef}
-                className={cn("h-full w-full", className)}>
+                style={style}
+                className={cls("h-full w-full", className)}>
                 <VirtualListContext.Provider
                     value={virtualListController}>
 
                     <MemoizedList
                         outerRef={tableRef}
-                        key={size}
+                        key={rowHeight}
                         width={bounds.width}
                         height={bounds.height}
                         itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
                         onScroll={onScroll}
                         includeAddColumn={Boolean(AddColumnComponent)}
-                        itemSize={getRowHeight(size)}/>
+                        itemSize={rowHeight}/>
 
                 </VirtualListContext.Provider>
             </div>
@@ -334,7 +368,7 @@ function MemoizedList({
                   onRowClick,
                   data,
                   columns,
-                  size = "m",
+                  rowHeight = 54,
                   cellRenderer,
                   hoverRow,
                   rowClassName,
@@ -367,7 +401,7 @@ function MemoizedList({
                             ...style,
                             top: `calc(${style.top}px + 48px)`
                         }}
-                        size={size}>
+                        rowHeight={rowHeight}>
 
                         {columns.map((column: VirtualTableColumn, columnIndex: number) => {
                             const cellData = rowData && rowData[column.key];
@@ -403,3 +437,17 @@ function MemoizedList({
         {Row}
     </List>;
 }
+
+const SafeLinkRenderer: React.FC<{
+    text: string;
+}> = ({ text }) => {
+    const urlRegex = /https?:\/\/[^\s]+/g;
+    const htmlContent = text.replace(urlRegex, (url) => {
+        // For each URL found, replace it with an HTML <a> tag
+        return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
+    });
+
+    return (
+        <div className={"break-all"} dangerouslySetInnerHTML={{ __html: htmlContent }}/>
+    );
+};

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -16,7 +16,7 @@ type VirtualTableCellProps<T extends any> = {
 };
 
 export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
-    function VirtualTableCell<T extends any>(props: VirtualTableCellProps<T>) {
+    function VirtualTableCell<T>(props: VirtualTableCellProps<T>) {
         // @ts-ignore
         return props.rowData && props.cellRenderer(
             {
@@ -30,14 +30,6 @@ export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
                 width: props.column.width
             } as CellRendererParams<T>
         );
-        // return props.rowData && <props.cellRenderer
-        //     rowData={props.rowData}
-        //     rowIndex={props.rowIndex}
-        //     isScrolling={false}
-        //     column={props.column}
-        //     columns={props.columns}
-        //     columnIndex={props.columnIndex}
-        //     width={props.column.width}/>
     },
     (a, b) => {
         return equal(a.rowData, b.rowData) &&

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -7,7 +7,7 @@ import {
     ArrowUpwardIcon,
     Badge,
     Button,
-    cn,
+    cls,
     defaultBorderMixin,
     FilterListIcon,
     IconButton,
@@ -85,9 +85,9 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         return (
             <ErrorBoundary>
                 <div
-                    className={cn("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
-                        "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 ",
-                        "hover:bg-gray-100 dark:hover:bg-gray-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
+                        "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
+                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
                         column.frozen ? "sticky left-0 z-10" : "relative z-0"
                     )}
                     style={{
@@ -130,7 +130,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                    invisible={!sort}>
                                 <IconButton
                                     size={"small"}
-                                    className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
+                                    className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                     onClick={() => {
                                         onColumnSort(column.key as Extract<keyof M, string>);
                                     }}
@@ -157,7 +157,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                 modal={true}
                                 trigger={
                                     <IconButton
-                                        className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
+                                        className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
                                         <FilterListIcon size={"small"}/>
@@ -179,9 +179,9 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.resizable && <div
                         ref={resizeHandleRef}
-                        className={cn(
+                        className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
-                            hovered && "bg-gray-300 dark:bg-gray-700"
+                            hovered && "bg-surface-300 dark:bg-surface-700"
                         )}
                         onMouseDown={onClickResizeColumn ? () => onClickResizeColumn(columnIndex, column) : undefined}
                     />}
@@ -238,9 +238,9 @@ function FilterForm<M>({
                   e.preventDefault();
                   submit();
               }}
-              className={"text-gray-900 dark:text-white"}>
+              className={"text-surface-900 dark:text-white"}>
             <div
-                className={cn(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
+                className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}
             </div>
             {filterField && <div className="m-4">

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -4,7 +4,7 @@ import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTablePro
 import { ErrorBoundary } from "../ErrorBoundary";
 import { VirtualTableHeader } from "./VirtualTableHeader";
 import { VirtualTableContextProps } from "./types";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 
 export const VirtualTableHeaderRow = ({
                                           columns,
@@ -100,7 +100,7 @@ export const VirtualTableHeaderRow = ({
 
     return (
         <div
-            className={cn(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900")}>
+            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
             {columns.map((c, columnIndex) => {
                 const column = columns[columnIndex];