@firecms/core 3.0.0-beta.7 → 3.0.0-beta.9

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,29 +1,27 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
-import { CMSAnalyticsEvent, PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
+import {
+    CMSAnalyticsEvent,
+    PluginGenericProps,
+    PluginHomePageAdditionalCardsProps,
+    TopNavigationEntry
+} from "../../types";
 
 import { toArray } from "../../util/arrays";
 import { NavigationGroup } from "./NavigationGroup";
 import { NavigationCardBinding } from "./NavigationCardBinding";
 
-// @ts-ignore
-import * as JsSearch from "js-search";
+import Fuse from "fuse.js"
 
 import { Container, SearchBar } from "@firecms/ui";
 import { FavouritesView } from "./FavouritesView";
 import { useRestoreScroll } from "../../internal/useRestoreScroll";
 
-const search = new JsSearch.Search("url");
-search.addIndex("name");
-search.addIndex("description");
-search.addIndex("group");
-search.addIndex("path");
-
 /**
  * Default entry view for the CMS. This component renders navigation cards
  * for each collection defined in the navigation.
- * @constructor
+
  * @group Components
  */
 export function DefaultHomePage({
@@ -49,6 +47,8 @@ export function DefaultHomePage({
     const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
 
+    const fuse = useRef<Fuse<TopNavigationEntry> | null>(null);
+
     if (!navigationController.topLevelNavigation)
         throw Error("Navigation not ready in FireCMSHomePage");
 
@@ -64,13 +64,16 @@ export function DefaultHomePage({
     } = navigationController.topLevelNavigation;
 
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
+    const performingSearch = Boolean(filteredUrls);
 
     const filteredNavigationEntries = filteredUrls
-        ? navigationEntries.filter((entry) => filteredUrls.includes(entry.url))
+        ? filteredUrls.map(url => navigationEntries.find(e => e.url === url)).filter(Boolean) as TopNavigationEntry[]
         : navigationEntries;
 
     useEffect(() => {
-        search.addDocuments(navigationEntries);
+        fuse.current = new Fuse(navigationEntries, {
+            keys: ["name", "description", "group", "path"]
+        });
     }, [navigationEntries]);
 
     const updateSearchResults = useCallback(
@@ -78,12 +81,15 @@ export function DefaultHomePage({
             if (!value || value === "") {
                 setFilteredUrls(null);
             } else {
-                const searchResult = search.search(value);
-                setFilteredUrls(searchResult.map((e: any) => e.url));
+                const searchResult = fuse.current?.search(value);
+                if (searchResult) {
+                    setFilteredUrls(searchResult.map((e) => e.item.url));
+                }
             }
         }, []);
 
-    const allGroups: Array<string | undefined> = [...groups];
+    const filteredGroups = filteredUrls ? filteredNavigationEntries.map(entry => entry.group) : [];
+    const allGroups: Array<string | undefined> = filteredUrls ? filteredGroups.filter((group, index) => filteredGroups.indexOf(group) === index) : [...groups];
     if (filteredNavigationEntries.filter(e => !e.group).length > 0 || filteredNavigationEntries.length === 0) {
         allGroups.push(undefined);
     }
@@ -139,7 +145,7 @@ export function DefaultHomePage({
                     {additionalActions}
                 </div>
 
-                <FavouritesView hidden={Boolean(filteredUrls)}/>
+                <FavouritesView hidden={performingSearch}/>
 
                 {additionalChildrenStart}
 
@@ -163,7 +169,7 @@ export function DefaultHomePage({
 
                     const thisGroupCollections = filteredNavigationEntries
                         .filter((entry) => entry.group === group || (!entry.group && group === undefined));
-                    if (thisGroupCollections.length === 0 && AdditionalCards.length === 0)
+                    if (thisGroupCollections.length === 0 && (AdditionalCards.length === 0 || performingSearch))
                         return null;
                     return (
                         <NavigationGroup

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -19,7 +19,7 @@ import { SmallNavigationCard } from "./SmallNavigationCard";
  * @param name
  * @param description
  * @param onClick
- * @constructor
+
  */
 export function NavigationCardBinding({
                                           path,

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, focusedMixin, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, Typography, } from "@firecms/ui";
 
 import { Link } from "react-router-dom";
 
@@ -21,7 +21,6 @@ export function SmallNavigationCard({
                 tabIndex={0}
                 className={cls(cardMixin,
                     cardClickableMixin,
-                    focusedMixin,
                     "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
                 to={url}
             >

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,48 @@
+import { ContentCopyIcon, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+                                          propertyKey,
+                                          className,
+                                          children
+                                      }: {
+    propertyKey: string,
+    className?: string,
+    children: React.ReactNode
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
+                    delayDuration={800}
+                    side={"top"}
+                    asChild={false}
+                    align={"start"}
+                    sideOffset={8}
+                    className={className}>
+        {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <ContentCopyIcon size={"smallest"}
+                                 className={"text-white"}
+                                 onClick={useCallback(() => {
+                                     navigator.clipboard.writeText(propertyKey);
+                                     setCopied(true);
+                                     setTimeout(() => setCopied(false), 2000);
+                                 }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
+import { canCreateEntity, IconForView, resolveCollection } from "../../util";
 import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
@@ -109,6 +109,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 
     const fullPath = navigation.resolveAliasesFrom(pathInput);
 
+    console.trace("Opening reference dialog for path " + fullPath);
     const dataSource = useDataSource(collection);
 
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
@@ -247,7 +248,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             error={"Could not find collection with id " + collection}/>
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const resolvedCollection = useMemo(() => resolveCollection({
         collection: collection,
         path: fullPath,
@@ -255,10 +255,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         fields: customizationController.propertyConfigs
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const tableController = useDataSourceEntityCollectionTableController<M>({
         fullPath,
         collection,
@@ -272,7 +270,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         onTextSearchClick,
         textSearchEnabled
     } =
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useTableSearchHelper({
             collection,
             fullPath,
@@ -293,7 +290,11 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         tableController={tableController}
                         enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
-                        title={<Typography variant={"subtitle2"}>
+                        title={<Typography variant={"subtitle2"} className={"flex flex-row gap-2"}>
+                            <IconForView
+                                size={"small"}
+                                collectionOrView={collection}
+                                className={"text-gray-300 dark:text-gray-600"}/>
                             {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}

package/src/components/SearchIconsView.tsx

@@ -31,7 +31,9 @@ export function SearchIconsView({
                 setKeys(null);
             } else {
                 const searchResult = iconsSearch.search(value);
-                setKeys(searchResult.map((e: any) => e.key));
+                const limit = 50;
+                const limited = searchResult.slice(0, limit);
+                setKeys(limited.map((e) => e.item.key));
             }
         }, UPDATE_SEARCH_INDEX_WAIT_MS), []
     );
@@ -57,7 +59,8 @@ export function SearchIconsView({
             <div className={"flex max-w-full flex-wrap mt-4"}>
                 {icons.map((icon: string) => {
                     return (
-                        <Tooltip title={icon} key={icon}>
+                        <Tooltip title={icon} key={icon}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 toggled={selectedIcon === icon}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -128,8 +128,6 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                  setFilterValues,
                  sortBy,
                  setSortBy,
-                 setSearchString,
-                 clearFilter,
                  itemCount,
                  setItemCount,
                  pageSize = 50,
@@ -223,7 +221,6 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                         onEndReached={loadNextPage}
                         onResetPagination={resetPagination}
                         error={dataLoadingError}
-                        paginationEnabled={paginationEnabled}
                         onColumnResize={onColumnResize}
                         rowHeight={getRowHeight(size)}
                         loading={dataLoading}
@@ -248,7 +245,8 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
         );
 
     },
-    equal
+    () => false,
+    // equal
 );
 
 function createFilterField({

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

@@ -95,7 +95,7 @@ export function DateTimeFilterField({
                     size={"medium"}
                     locale={locale}
                     value={internalValue ?? undefined}
-                    onChange={(dateValue: Date | undefined) => {
+                    onChange={(dateValue: Date | null) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);
                     }}
                     clearable={true}

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 { Checkbox, ClearIcon, IconButton, Label, Select, SelectItem, TextField } from "@firecms/ui";
+import {
+    Checkbox,
+    ClearIcon,
+    IconButton,
+    Label,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    TextField
+} from "@firecms/ui";
 import { EnumValueConfig } from "../../../types";
 
 interface StringNumberFilterFieldProps {
@@ -82,6 +92,7 @@ export function StringNumberFilterField({
     }
 
     const multiple = multipleSelectOperations.includes(operation);
+
     return (
 
         <div className="flex w-[440px]">
@@ -117,17 +128,14 @@ export function StringNumberFilterField({
                     </IconButton>}
                 />}
 
-                {enumValues &&
+                {enumValues && !multiple &&
                     <Select
                         position={"item-aligned"}
-                        value={internalValue !== undefined
-                            ? (Array.isArray(internalValue) ? internalValue.map(e => String(e)) : String(internalValue))
-                            : isArray ? [] : ""}
+                        value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
                             if (value !== "")
                                 updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
                         }}
-                        multiple={multiple}
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
@@ -136,6 +144,8 @@ export function StringNumberFilterField({
                         renderValue={(enumKey) => {
                             if (enumKey === null)
                                 return "Filter for null values";
+                            if (enumKey === undefined)
+                                return null;
 
                             return <EnumValuesChip
                                 key={`select_value_${name}_${enumKey}`}
@@ -144,7 +154,7 @@ export function StringNumberFilterField({
                                 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)}
@@ -155,6 +165,43 @@ 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)}>
+                            <ClearIcon/>
+                        </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-gray-100 dark:[&:has(:checked)]:bg-gray-800"
                     htmlFor="null-filter"

package/src/components/VirtualTable/VirtualTable.tsx

@@ -91,6 +91,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              data,
                                                              onResetPagination,
                                                              onEndReached,
+                                                             endOffset = 600,
                                                              rowHeight = 54,
                                                              columns: columnsProp,
                                                              onRowClick,
@@ -107,9 +108,11 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              hoverRow,
                                                              createFilterField,
                                                              rowClassName,
+                                                             style,
                                                              className,
                                                              endAdornment,
-                                                             AddColumnComponent
+                                                             AddColumnComponent,
+                                                             debug
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -127,10 +130,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);
@@ -141,10 +148,14 @@ 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];
@@ -154,6 +165,9 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         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");
@@ -180,21 +194,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 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
                                       }: {
@@ -202,11 +216,19 @@ 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 (!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;
@@ -239,7 +261,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error
             ? <CenteredView maxWidth={"2xl"}
-                className="flex flex-col gap-2">
+                            className="flex flex-col gap-2">
 
                 <Typography variant={"h6"}>
                     {"Error fetching data from the data source"}
@@ -271,10 +293,14 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             AddColumnComponent
         };
 
+        if(debug)
+            console.log("VirtualTable render", virtualListController);
+
         // useTraceUpdate(virtualListController);
         return (
             <div
                 ref={measureRef}
+                style={style}
                 className={cls("h-full w-full", className)}>
                 <VirtualListContext.Provider
                     value={virtualListController}>

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/VirtualTableProps.tsx

@@ -31,11 +31,6 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
 
-    /**
-     * If enabled, content is loaded in batch
-     */
-    paginationEnabled?: boolean;
-
     /**
      * Set this callback if you want to support some combinations
      * of filter combinations only.
@@ -50,6 +45,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onEndReached?: () => void;
 
+    /**
+     * Offset in pixels where the onEndReached callback is triggered
+     */
+    endOffset?: number;
+
     /**
      * When the pagination should be reset. E.g. the filters or sorting
      * has been reset.
@@ -131,6 +131,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     className?: string;
 
+    /**
+     * Style applied to the table
+     */
+    style?: React.CSSProperties;
+
     /**
      * Component rendered at the end of the table, after scroll
      */
@@ -142,9 +147,14 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     AddColumnComponent?: React.ComponentType;
 
+    /**
+     * Debug mode
+     */
+    debug?: boolean;
+
 }
 
-export type CellRendererParams<T extends any = any> = {
+export type CellRendererParams<T = any> = {
     column: VirtualTableColumn;
     columns: VirtualTableColumn[];
     columnIndex: number;
@@ -158,7 +168,7 @@ export type CellRendererParams<T extends any = any> = {
  * @see Table
  * @group Components
  */
-export interface VirtualTableColumn<CustomProps extends any = any> {
+export interface VirtualTableColumn<CustomProps = any> {
 
     /**
      * Data key for the cell value, could be "a.b.c"
@@ -232,7 +242,6 @@ export type OnVirtualTableColumnResizeParams = {
     column: VirtualTableColumn
 };
 
-
 /**
  * @see Table
  * @group Components

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DateTimeField } from "@firecms/ui";
+import { cls, DateTimeField, focusedDisabled } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 export function VirtualTableDateField(props: {
@@ -28,8 +28,8 @@ export function VirtualTableDateField(props: {
             onChange={(dateValue) => updateValue(dateValue ?? null)}
             size={"medium"}
             invisible={true}
-            className={"w-full h-full"}
-            inputClassName={"w-full h-full"}
+            inputClassName={cls("w-full h-full", focusedDisabled)}
+            className={cls("w-full h-full", focusedDisabled)}
             mode={mode}
             locale={locale}
         />

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 import { useDebouncedCallback } from "../../../util";
-import { TextareaAutosize } from "@firecms/ui";
+import { focusedDisabled, TextareaAutosize } from "@firecms/ui";
 
 export function VirtualTableInput(props: {
     error: Error | undefined;
@@ -58,6 +58,7 @@ export function VirtualTableInput(props: {
 
     return (
         <TextareaAutosize
+            className={focusedDisabled}
             ref={ref}
             style={{
                 padding: 0,