@firecms/core 3.0.0-beta.2-pre.5 → 3.0.0-beta.3

package/dist/internal/useBuildDataSource.d.ts

@@ -17,6 +17,10 @@ export declare function useBuildDataSource({ delegate, propertyConfigs, navigati
  * bindings.
  * Also, Firestore references are replaced with {@link EntityReference}
  * @param data
+ * @param buildReference
+ * @param buildGeoPoint
+ * @param buildDate
+ * @param buildDelete
  * @group Firestore
  */
 export declare function cmsToDelegateModel(data: any, buildReference: (reference: EntityReference) => any, buildGeoPoint: (geoPoint: GeoPoint) => any, buildDate: (date: Date) => any, buildDelete: () => any): any;

package/dist/types/entities.d.ts

@@ -43,6 +43,7 @@ export declare class EntityReference<M extends Record<string, any> = any> {
     readonly path: string;
     constructor(id: string, path: string);
     get pathWithId(): string;
+    isEntityReference(): boolean;
 }
 export declare class GeoPoint {
     /**

package/dist/util/index.d.ts

@@ -7,7 +7,7 @@ export * from "./objects";
 export * from "./paths";
 export * from "./regexp";
 export * from "./navigation_utils";
-export * from "./useDebounce";
+export * from "./useDebouncedCallback";
 export * from "./property_utils";
 export * from "./resolutions";
 export * from "./permissions";
@@ -20,3 +20,4 @@ export * from "./flatten_object";
 export * from "./make_properties_editable";
 export * from "./join_collections";
 export * from "./builders";
+export * from "./useTraceUpdate";

package/dist/util/useDebouncedCallback.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs?: number): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-beta.2-pre.5",
+  "version": "3.0.0-beta.3",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -37,9 +37,17 @@
     "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "dependencies": {
-    "@firecms/formex": "^3.0.0-beta.2-pre.5",
-    "@firecms/ui": "^3.0.0-beta.2-pre.5",
+    "@firecms/formex": "^3.0.0-beta.3",
+    "@firecms/ui": "^3.0.0-beta.3",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
@@ -107,7 +115,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "5159646cfdb35e11cc510080bd3cff17104d0cb4",
+  "gitHead": "33cceff5d5bc2a7002cc5a3904b787e70bfb9c6e",
   "publishConfig": {
     "access": "public"
   }

package/src/components/ArrayContainer.tsx

@@ -7,7 +7,7 @@ import {
     AddIcon,
     Button,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin,
+    fieldBackgroundHoverMixin, HandleIcon,
     IconButton,
     Menu,
     MenuItem,
@@ -253,6 +253,7 @@ export function ArrayContainerItem({
     </div>;
 }
 
+
 export function ArrayItemOptions({
                                      direction,
                                      disabled,
@@ -291,14 +292,7 @@ export function ArrayItemOptions({
                     setMenuOpen(false);
                 }}
                 className={`cursor-${disabled ? "inherit" : "grab"}`}>
-                <svg width="24" height="24" viewBox="0 0 100 100" fill="none">
-                    <circle cx="28" cy="50" r="9" fill={"currentColor"}/>
-                    <circle cx="28" cy="21" r="9" fill={"currentColor"}/>
-                    <circle cx="71" cy="21" r="9" fill={"currentColor"}/>
-                    <circle cx="71" cy="50" r="9" fill={"currentColor"}/>
-                    <circle cx="71" cy="78" r="9" fill={"currentColor"}/>
-                    <circle cx="28" cy="78" r="9" fill={"currentColor"}/>
-                </svg>
+                <HandleIcon/>
             </IconButton>
 
             <Menu

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,5 +1,4 @@
 import React, { MouseEvent, useCallback } from "react";
-import equal from "react-fast-compare"
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
 import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
@@ -14,46 +13,43 @@ import { useFireCMSContext, useLargeLayout } from "../../hooks";
  * @param selectionEnabled
  * @param size
  * @param toggleEntitySelection
- * @param onCopyClicked
- * @param onEditClicked
- * @param onDeleteClicked
  * @param hideId
  * @constructor
  *
  * @group Collection components
  */
-export const EntityCollectionRowActions = React.memo(function EntityCollectionRowActions({
-                                                                                             entity,
-                                                                                             collection,
-                                                                                             fullPath,
-                                                                                             width,
-                                                                                             frozen,
-                                                                                             isSelected,
-                                                                                             selectionEnabled,
-                                                                                             size,
-                                                                                             highlightEntity,
-                                                                                             onCollectionChange,
-                                                                                             unhighlightEntity,
-                                                                                             actions = [],
-                                                                                             hideId,
-                                                                                             selectionController,
-                                                                                         }:
-                                                                                             {
-                                                                                                 entity: Entity<any>,
-                                                                                                 collection?: EntityCollection<any>,
-                                                                                                 fullPath?: string,
-                                                                                                 width: number,
-                                                                                                 frozen?: boolean,
-                                                                                                 size: CollectionSize,
-                                                                                                 isSelected?: boolean,
-                                                                                                 selectionEnabled?: boolean,
-                                                                                                 actions?: EntityAction[],
-                                                                                                 hideId?: boolean,
-                                                                                                 onCollectionChange?: () => void,
-                                                                                                 selectionController?: SelectionController;
-                                                                                                 highlightEntity?: (entity: Entity<any>) => void;
-                                                                                                 unhighlightEntity?: (entity: Entity<any>) => void;
-                                                                                             }) {
+export const EntityCollectionRowActions = function EntityCollectionRowActions({
+                                                                                  entity,
+                                                                                  collection,
+                                                                                  fullPath,
+                                                                                  width,
+                                                                                  frozen,
+                                                                                  isSelected,
+                                                                                  selectionEnabled,
+                                                                                  size,
+                                                                                  highlightEntity,
+                                                                                  onCollectionChange,
+                                                                                  unhighlightEntity,
+                                                                                  actions = [],
+                                                                                  hideId,
+                                                                                  selectionController,
+                                                                              }:
+                                                                                  {
+                                                                                      entity: Entity<any>,
+                                                                                      collection?: EntityCollection<any>,
+                                                                                      fullPath?: string,
+                                                                                      width: number,
+                                                                                      frozen?: boolean,
+                                                                                      size: CollectionSize,
+                                                                                      isSelected?: boolean,
+                                                                                      selectionEnabled?: boolean,
+                                                                                      actions?: EntityAction[],
+                                                                                      hideId?: boolean,
+                                                                                      onCollectionChange?: () => void,
+                                                                                      selectionController?: SelectionController;
+                                                                                      highlightEntity?: (entity: Entity<any>) => void;
+                                                                                      unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                  }) {
 
     const largeLayout = useLargeLayout();
 
@@ -171,4 +167,4 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
         </div>
     );
 
-}, equal);
+};

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo, useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import equal from "react-fast-compare";
 import { AdditionalFieldDelegate, CollectionSize, Entity, FireCMSContext, User } from "../../types";
 import { PropertyTableCell } from "./PropertyTableCell";
@@ -8,7 +8,6 @@ import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
 import { getValueInPath } from "../../util";
 import { getRowHeight } from "../VirtualTable/common";
 import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
-import { EntityCollectionTableController } from "../common/types";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
 import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
 import { EntityTableCell } from "./internal/EntityTableCell";
@@ -111,12 +110,12 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         const customFieldValidator: CustomFieldValidator | undefined = uniqueFieldValidator;
 
-        const propertyCellRenderer = useCallback(({
-                                                      column,
-                                                      columnIndex,
-                                                      rowData,
-                                                      rowIndex
-                                                  }: CellRendererParams<any>) => {
+        const propertyCellRenderer = ({
+                                          column,
+                                          columnIndex,
+                                          rowData,
+                                          rowIndex
+                                      }: CellRendererParams<any>) => {
 
             const entity: Entity<M> = rowData;
 
@@ -158,7 +157,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                     }
                 </ErrorBoundary>);
 
-        }, [inlineEditing, size, selectedEntityIds]);
+        };
 
         const additionalCellRenderer = useCallback(({
                                                         column,
@@ -205,30 +204,29 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         }, [size, selectedEntityIds]);
 
-        const collectionColumns: VirtualTableColumn[] = useMemo(() => {
-                const columnsResult: VirtualTableColumn[] = propertiesToColumns({
-                    properties,
-                    sortable,
-                    forceFilter,
-                    disabledFilter: disabledFilterChange,
-                    AdditionalHeaderWidget
-                });
-
-                const additionalTableColumns: VirtualTableColumn[] = additionalFields
-                    ? additionalFields.map((additionalField) =>
-                        ({
-                            key: additionalField.key,
-                            align: "left",
-                            sortable: false,
-                            title: additionalField.name,
-                            width: additionalField.width ?? 200
-                        }))
-                    : [];
-                return [...columnsResult, ...additionalTableColumns];
-            },
-            [additionalFields, disabledFilterChange, forceFilter, properties, sortable]);
-
-        const idColumn: VirtualTableColumn = useMemo(() => ({
+        const collectionColumns: VirtualTableColumn[] = (() => {
+            const columnsResult: VirtualTableColumn[] = propertiesToColumns({
+                properties,
+                sortable,
+                forceFilter,
+                disabledFilter: disabledFilterChange,
+                AdditionalHeaderWidget
+            });
+
+            const additionalTableColumns: VirtualTableColumn[] = additionalFields
+                ? additionalFields.map((additionalField) =>
+                    ({
+                        key: additionalField.key,
+                        align: "left",
+                        sortable: false,
+                        title: additionalField.name,
+                        width: additionalField.width ?? 200
+                    }))
+                : [];
+            return [...columnsResult, ...additionalTableColumns];
+        })();
+
+        const idColumn: VirtualTableColumn = {
             key: "id_ewcfedcswdf3",
             width: getIdColumnWidth?.() ?? (largeLayout ? 160 : 130),
             title: "ID",
@@ -237,17 +235,17 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
             headerAlign: "center",
             align: "center",
             AdditionalHeaderWidget: () => additionalIDHeaderWidget
-        }), [getIdColumnWidth, largeLayout])
+        }
 
-        const columns: VirtualTableColumn[] = useMemo(() => [
+        const columns: VirtualTableColumn[] = [
             idColumn,
             ...displayedColumnIds
                 .map((p) => {
                     return collectionColumns.find(c => c.key === p.key);
                 }).filter(Boolean) as VirtualTableColumn[]
-        ], [collectionColumns, displayedColumnIds, idColumn]);
+        ];
 
-        const cellRenderer = useCallback((props: CellRendererParams<any>) => {
+        const cellRenderer = (props: CellRendererParams<any>) => {
             const column = props.column;
             const columns = props.columns;
             const columnKey = column.key;
@@ -287,7 +285,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                     <ErrorView error={e}/>
                 </EntityTableCell>;
             }
-        }, [additionalFieldsMap, tableRowActionsBuilder, size, additionalCellRenderer, propertyCellRenderer])
+        }
 
         return (
 

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -24,13 +24,14 @@ import { getPreviewSizeFrom } from "../../preview/util";
 import { isReadOnly } from "../../util";
 
 import { CustomFieldValidator, mapPropertyToYup } from "../../form/validation";
-import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
+import {  useFireCMSContext } from "../../hooks";
 
 import { EntityTableCell } from "./internal/EntityTableCell";
 import { EntityTableCellActions } from "./internal/EntityTableCellActions";
 
 import { getRowHeight } from "../VirtualTable/common";
 import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
+import { useClearRestoreValue } from "../../form/useClearRestoreValue";
 
 export interface PropertyTableCellProps<T extends CMSType, M extends Record<string, any>> {
     propertyKey: string;

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

@@ -96,7 +96,7 @@ export const TableReferenceFieldSuccess = React.memo(
         const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
 
         const buildSingleReferenceField = () => {
-            if (internalValue instanceof EntityReference)
+            if (internalValue && !Array.isArray(internalValue) && internalValue.isEntityReference && internalValue.isEntityReference())
                 return <ReferencePreview
                     onClick={disabled ? undefined : handleOpen}
                     size={getPreviewSizeFrom(size)}

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

@@ -8,7 +8,8 @@ import {
     FilterListOffIcon,
     SearchBar,
     Select,
-    SelectItem
+    SelectItem,
+    Tooltip
 } from "@firecms/ui";
 import { CollectionSize } from "../../../types";
 import { useLargeLayout } from "../../../hooks";
@@ -54,19 +55,21 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
         </Button>;
 
     const sizeSelect = (
-        <Select
-            value={props.size as string}
-            className="w-16 h-10"
-            size={"small"}
-            onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
-            renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
-        >
-            {["xs", "s", "m", "l", "xl"].map((size) => (
-                <SelectItem key={size} value={size} className={"w-12 font-medium text-center"}>
-                    {size.toUpperCase()}
-                </SelectItem>
-            ))}
-        </Select>
+        <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
+            <Select
+                value={props.size as string}
+                className="w-16 h-10"
+                size={"small"}
+                onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
+                renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
+            >
+                {["xs", "s", "m", "l", "xl"].map((size) => (
+                    <SelectItem key={size} value={size} className={"w-12 font-medium text-center"}>
+                        {size.toUpperCase()}
+                    </SelectItem>
+                ))}
+            </Select>
+        </Tooltip>
     );
 
     return (

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

@@ -224,7 +224,15 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     const formex = useCreateFormex<M>({
         initialValues: (entity?.values ?? {}) as EntityValues<M>,
         validation: (values) => {
-            return validationSchema?.validate(values)
+            return validationSchema?.validate(values, { abortEarly: false })
+                .then(() => ({}))
+                .catch((e) => {
+                    const errors: Record<string, string> = {};
+                    e.inner.forEach((error: any) => {
+                        errors[error.path] = error.message;
+                    });
+                    return errors;
+                });
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {
@@ -339,6 +347,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     }
     const form = <div
         className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
+
         {internalForm}
 
         {savingError &&

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -53,7 +53,6 @@ import {
     Popover,
     SearchIcon,
     Skeleton,
-    TextField,
     Tooltip,
     Typography
 } from "@firecms/ui";
@@ -434,7 +433,7 @@ export const EntityCollectionView = React.memo(
 
         const largeLayout = useLargeLayout();
 
-        const getActionsForEntity = useCallback(({ entity, customEntityActions }: {
+        const getActionsForEntity = ({ entity, customEntityActions }: {
             entity?: Entity<M>,
             customEntityActions?: EntityAction[]
         }): EntityAction[] => {
@@ -447,7 +446,7 @@ export const EntityCollectionView = React.memo(
             if (customEntityActions)
                 actions.push(...customEntityActions);
             return actions;
-        }, [authController, collection, createEnabled, fullPath]);
+        };
 
         const getIdColumnWidth = useCallback(() => {
             const entityActions = getActionsForEntity({});
@@ -457,12 +456,12 @@ export const EntityCollectionView = React.memo(
             return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
         }, [largeLayout]);
 
-        const tableRowActionsBuilder = useCallback(({
-                                                        entity,
-                                                        size,
-                                                        width,
-                                                        frozen
-                                                    }: {
+        const tableRowActionsBuilder = ({
+                                            entity,
+                                            size,
+                                            width,
+                                            frozen
+                                        }: {
             entity: Entity<any>,
             size: CollectionSize,
             width: number,
@@ -492,7 +491,7 @@ export const EntityCollectionView = React.memo(
                 />
             );
 
-        }, [isEntitySelected, collection, authController, fullPath, selectionEnabled, toggleEntitySelection, createEnabled]);
+        };
 
         const title = <Popover
             open={popOverOpen}
@@ -670,6 +669,7 @@ export const EntityCollectionView = React.memo(
             equal(a.isSubCollection, b.isSubCollection) &&
             equal(a.className, b.className) &&
             equal(a.properties, b.properties) &&
+            equal(a.propertiesOrder, b.propertiesOrder) &&
             equal(a.hideIdFromCollection, b.hideIdFromCollection) &&
             equal(a.inlineEditing, b.inlineEditing) &&
             equal(a.selectionEnabled, b.selectionEnabled) &&
@@ -804,13 +804,14 @@ function EntityIdHeaderWidget({
                       }}
                       className={"text-gray-900 dark:text-white w-96 max-w-full"}>
 
-                    <div className="flex p-4 w-full gap-4">
-                        <TextField
+                    <div className="flex p-2 w-full gap-4">
+                        <input
+                            autoFocus={openPopup}
                             placeholder={"Find entity by ID"}
-                            size={"small"}
+                            // size={"small"}
                             onChange={(e) => setSearchString(e.target.value)}
                             value={searchString}
-                            className={"flex-grow"}/>
+                            className={"flex-grow bg-transparent outline-none p-1"}/>
                         <Button variant={"outlined"}
                                 disabled={!searchString}
                                 type={"submit"}

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -0,0 +1,28 @@
+import { ContentPasteIcon, IconButton, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: 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>{propertyId}</code></Typography>
+            </div>
+            {/*    Copy to clipboard button*/}
+            <IconButton size={"small"}>
+                <ContentPasteIcon size={"smallest"}
+                                  className={"text-white"}
+                                  onClick={useCallback(() => {
+                                      navigator.clipboard.writeText(propertyId);
+                                      setCopied(true);
+                                      setTimeout(() => setCopied(false), 2000);
+                                  }, [propertyId])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -266,7 +266,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         forceFilter
     });
 
-
     const {
         textSearchLoading,
         textSearchInitialised,

package/src/components/ReferenceWidget.tsx

@@ -9,13 +9,13 @@ import { Button, cn } from "@firecms/ui";
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
     name?: string,
     multiselect?: boolean,
-    value: EntityReference<M> | EntityReference<M>[] | null,
+    value: EntityReference | EntityReference[] | null,
     onReferenceSelected?: (params: {
-        reference: EntityReference<M> | null,
+        reference: EntityReference | null,
         entity: Entity<M> | null
     }) => void,
     onMultipleReferenceSelected?: (params: {
-        references: EntityReference<M>[] | null,
+        references: EntityReference[] | null,
         entities: Entity<M>[] | null
     }) => void,
     path: string,
@@ -113,7 +113,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
                     size={size}/>
             })}
         </div>
-    } else if (value instanceof EntityReference) {
+    } else if (value?.isEntityReference && value?.isEntityReference()) {
         child = <ReferencePreview
             reference={value}
             onClick={onEntryClick}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -115,6 +115,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
          onEntityClick,
          onColumnResize,
          hoverRow = true,
+         size,
          inlineEditing = false,
          tableController:
              {
@@ -145,7 +146,6 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
      }: SelectableTableProps<M>) {
 
         const ref = useRef<HTMLDivElement>(null);
-        const [size, setSize] = React.useState<CollectionSize>("m");
 
         const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
 
@@ -207,7 +207,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                     setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
                     select,
                     onValueChange,
-                    size,
+                    size: size ?? "m",
                     selectedCell,
                 }}
             >

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

@@ -60,7 +60,7 @@ export function ReferenceFilterField({
 
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
-            if (!(ref instanceof EntityReference)) {
+            if (!(ref?.isEntityReference && ref?.isEntityReference())) {
                 return null;
             }
             return ref.id;
@@ -74,7 +74,7 @@ export function ReferenceFilterField({
         let newValue = val;
         if (prevOpIsArray !== newOpIsArray) {
             // @ts-ignore
-            newValue = newOpIsArray ? (newValue instanceof EntityReference ? [newValue] : []) : undefined
+            newValue = newOpIsArray ? (newValue?.isEntityReference && newValue?.isEntityReference() ? [newValue] : []) : undefined
         }
 
         setOperation(op);

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useDebounce } from "../../../util";
+import { useDebouncedCallback } from "../../../util";
 import { TextareaAutosize } from "@firecms/ui";
 
 export function VirtualTableInput(props: {
@@ -43,7 +43,7 @@ export function VirtualTableInput(props: {
         }
     }, [internalValue, updateValue, value]);
 
-    useDebounce(internalValue, doUpdate, !focused, 2000);
+    useDebouncedCallback(internalValue, doUpdate, !focused, 2000);
 
     useEffect(() => {
         if (ref.current && focused && !focusedState.current) {