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

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { useDebounce } from "../../../util";
+import { useDebouncedCallback } from "../../../util";
 
 export function VirtualTableNumberInput(props: {
     error: Error | undefined;
@@ -42,7 +42,7 @@ export function VirtualTableNumberInput(props: {
 
     }, [internalValue, value]);
 
-    useDebounce(internalValue, doUpdate, !focused, 2000);
+    useDebouncedCallback(internalValue, doUpdate, !focused, 2000);
 
     useEffect(
         () => {

package/src/components/index.tsx

@@ -31,5 +31,4 @@ export * from "./FireCMSAppBar";
 
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
-export * from "./LabelWithIcon";
 export * from "./SearchIconsView";

package/src/core/Drawer.tsx

@@ -45,12 +45,12 @@ export function Drawer({
     const ungroupedNavigationViews = Object.values(navigationEntries).filter(e => !e.group);
 
     const buildGroupHeader = useCallback((group?: string) => {
-        if (!drawerOpen) return <div className="h-4"/>;
+        if (!drawerOpen) return <div className="h-12 w-full"/>;
         return <div
             className="pt-8 pl-6 pr-8 pb-2 flex flex-row items-center">
             <Typography variant={"caption"}
                         color={"secondary"}
-                        className="font-medium flex-grow">
+                        className="font-medium flex-grow line-clamp-1">
                 {group ? group.toUpperCase() : "Views".toUpperCase()}
             </Typography>
 
@@ -128,12 +128,18 @@ export function DrawerNavigationItem({
 
     const listItem = <NavLink
         onClick={onClick}
+        style={{
+            width: !drawerOpen ? "72px" : "280px",
+            transition: drawerOpen ? "width 150ms ease-in" : undefined
+        }}
         className={({ isActive }: any) => cn("rounded-r-xl truncate",
-            "hover:bg-gray-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-gray-100",
-            "flex flex-row items-center w-full mr-8",
+            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-gray-100",
+            "flex flex-row items-center mr-8",
+            // "transition-all ease-in-out delay-100 duration-300",
+            // drawerOpen ? "w-full" : "w-18",
             drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
             "font-medium text-sm",
-            isActive ? "bg-gray-100 dark:bg-gray-800" : ""
+            isActive ? "bg-slate-200 bg-opacity-75 dark:bg-gray-800" : ""
         )}
         to={url}
     >
@@ -149,14 +155,10 @@ export function DrawerNavigationItem({
         </div>
     </NavLink>;
 
-    // return listItem;
-    if (drawerOpen)
-        return listItem;
-    else
-        return <Tooltip
-            open={tooltipsOpen}
-            side="right"
-            title={name}>
-            {listItem}
-        </Tooltip>;
+    return <Tooltip
+        open={drawerOpen ? false : tooltipsOpen}
+        side="right"
+        title={name}>
+        {listItem}
+    </Tooltip>;
 }

package/src/core/EntitySidePanel.tsx

@@ -4,7 +4,7 @@ import { EntitySidePanelProps } from "../types";
 import { useNavigationController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
-import { EntityView } from "../internal/EntityView";
+import { EntityView } from "./EntityView";
 import { useSideDialogContext } from "./SideDialogs";
 
 /**

package/src/{internal → core}/EntityView.tsx

@@ -16,7 +16,7 @@ import {
     removeInitialAndTrailingSlashes,
     resolveDefaultSelectedView,
     resolveEntityView,
-    useDebounce
+    useDebouncedCallback
 } from "../util";
 
 import {
@@ -32,8 +32,8 @@ import {
 import { EntityForm } from "../form";
 import { CircularProgress, CloseIcon, cn, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
 import { EntityFormSaveParams } from "../form/EntityForm";
-import { FORM_CONTAINER_WIDTH } from "./common";
-import { useSideDialogContext } from "../core";
+import { FORM_CONTAINER_WIDTH } from "../internal/common";
+import { useSideDialogContext } from "./index";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
 
@@ -79,7 +79,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
      * We use this only when autoSave is enabled.
      */
     const [valuesToBeSaved, setValuesToBeSaved] = useState<EntityValues<M> | undefined>(undefined);
-    useDebounce(valuesToBeSaved, () => {
+    useDebouncedCallback(valuesToBeSaved, () => {
         if (valuesToBeSaved)
             saveEntity({
                 entityId: usedEntity?.id,

package/src/core/FireCMS.tsx

@@ -19,6 +19,7 @@ import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
+import { useProjectLog } from "../hooks/useProjectLog";
 
 /**
  * If you are using independent components of the CMS
@@ -78,12 +79,14 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    })
+    });
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
     }), []);
 
+    useProjectLog(authController);
+
     if (navigationController.navigationLoadingError) {
         return (
             <CenteredView maxWidth={"md"}>

package/src/core/Scaffold.tsx

@@ -176,7 +176,7 @@ function StyledDrawer(props: {
         className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
         style={{
             width,
-            transition: "left 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
         }}
     >
 
@@ -201,8 +201,8 @@ function StyledDrawer(props: {
         <div className={"flex flex-col h-full"}>
             <div
                 style={{
-                    transition: "padding 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-                    padding: props.open ? "32px 96px 0px 24px" : "72px 16px 0px"
+                    transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+                    padding: props.open ? "32px 144px 0px 24px" : "72px 16px 0px"
                 }}
                 className={cn("cursor-pointer")}>
 
@@ -215,7 +215,7 @@ function StyledDrawer(props: {
                             ? <img src={props.logo}
                                    alt="Logo"
                                    className={cn("max-w-full max-h-full",
-                                       props.open ?? "w-[160px] h-[160px]")}/>
+                                       props.open ?? "w-[112px] h-[112px]")}/>
                             : <FireCMSLogo/>}
 
                     </Link>
@@ -259,7 +259,7 @@ function StyledDrawer(props: {
             onMouseLeave={props.onMouseLeave}
             style={{
                 width,
-                transition: "left 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
             }}>
 
             {innerDrawer}

package/src/core/SideEntityView.tsx

@@ -0,0 +1,38 @@
+import { EntityViewProps } from "./EntityView";
+import { User } from "../types";
+import { useSideDialogContext } from "./SideDialogs";
+import { useSideEntityController } from "../hooks";
+import { FORM_CONTAINER_WIDTH } from "../internal/common";
+
+export type SideEntityViewProps<M extends Record<string, any>> = EntityViewProps<M> & {
+    formWidth?: number | string;
+    onClose?: () => void;
+}
+
+export function SideEntityView<M extends Record<string, any>, UserType extends User>({
+                                                                                         path,
+                                                                                         entityId,
+                                                                                         selectedSubPath,
+                                                                                         copy,
+                                                                                         collection,
+                                                                                         parentCollectionIds,
+                                                                                         onValuesAreModified,
+                                                                                         formWidth,
+                                                                                         onUpdate,
+                                                                                         onClose
+                                                                                     }: SideEntityViewProps<M>) {
+
+    const sideDialogContext = useSideDialogContext();
+    const sideEntityController = useSideEntityController();
+    const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
+
+    const onCloseHandler = () => {
+        if (onClose) {
+            onClose();
+        } else {
+            sideDialogContext.close();
+        }
+    }
+
+    return <></>;
+}

package/src/core/field_configs.tsx

@@ -104,6 +104,17 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: TextFieldBinding
         }
     },
+    switch: {
+        key: "switch",
+        name: "Switch",
+        description: "Boolean true or false field (or yes or no, 0 or 1...)",
+        Icon: FlagIcon,
+        color: "#20d9d2",
+        property: {
+            dataType: "boolean",
+            Field: SwitchFieldBinding
+        }
+    },
     select: {
         key: "select",
         name: "Select/enum",
@@ -225,17 +236,6 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: ArrayOfReferencesFieldBinding
         }
     },
-    switch: {
-        key: "switch",
-        name: "Switch",
-        description: "Boolean true or false field (or yes or no, 0 or 1...)",
-        Icon: FlagIcon,
-        color: "#20d9d2",
-        property: {
-            dataType: "boolean",
-            Field: SwitchFieldBinding
-        }
-    },
     date_time: {
         key: "date_time",
         name: "Date/time",

package/src/core/index.tsx

@@ -10,5 +10,3 @@ export * from "./field_configs";
 
 export * from "./SideDialogs";
 export * from "./NavigationRoutes";
-export * from "./useBuildModeController";
-export * from "./useBuildLocalConfigurationPersistence";

package/src/form/EntityForm.tsx

@@ -34,7 +34,7 @@ import {
 } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { Alert, Button, cn, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { Alert, Button, cn, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../components";
 import {
     copyEntityAction,
@@ -42,6 +42,7 @@ import {
 } from "../components/EntityCollectionTable/internal/default_entity_actions";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { ValidationError } from "yup";
+import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
 
 /**
  * @group Components
@@ -388,7 +389,10 @@ function EntityFormInternal<M extends Record<string, any>>({
 
     const authController = useAuthController();
 
-    const getActionsForEntity = useCallback(({ entity, customEntityActions }: { entity?: Entity<M>, customEntityActions?: EntityAction[] }): EntityAction[] => {
+    const getActionsForEntity = useCallback(({ entity, customEntityActions }: {
+        entity?: Entity<M>,
+        customEntityActions?: EntityAction[]
+    }): EntityAction[] => {
         const createEnabled = canCreateEntity(inputCollection, authController, fullPathToCollectionSegments(path), null);
         const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, fullPathToCollectionSegments(path), entity) : true;
         const actions: EntityAction[] = [];
@@ -481,7 +485,10 @@ function EntityFormInternal<M extends Record<string, any>>({
                     savingError={savingError}
                     closeAfterSaveRef={closeAfterSaveRef}
                     autoSave={autoSave}
-                    entityActions={getActionsForEntity({ entity, customEntityActions: inputCollection.entityActions })}/>}
+                    entityActions={getActionsForEntity({
+                        entity,
+                        customEntityActions: inputCollection.entityActions
+                    })}/>}
 
             </div>
         </div>
@@ -588,7 +595,12 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                         <div id={`form_field_${key}`}
                              key={`field_${resolvedCollection.name}_${key}`}>
                             <ErrorBoundary>
-                                <PropertyFieldBinding {...cmsFormFieldProps}/>
+                                <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
+                                         delayDuration={800}
+                                         side={"left"}
+                                         sideOffset={16}>
+                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
+                                </Tooltip>
                             </ErrorBoundary>
                         </div>
                     );

package/src/form/PropertyFieldBinding.tsx

@@ -67,7 +67,7 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     return false;
 }) as typeof PropertyFieldBindingInternal;
 
-function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps = any, M extends Record<string, any> = Record<string, any>>
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
 ({
      propertyKey,
      property,
@@ -83,13 +83,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
 
     const customizationController = useCustomizationController();
 
-    const shouldAlwaysRerender = shouldPropertyReRender(property, customizationController.plugins);
-    // we use the standard Field for user defined fields, since it rebuilds
-    // when there are changes in other values, in contrast to Field
-    const FieldComponent = Field;
-
     return (
-        <FieldComponent
+        <Field
             name={propertyKey}
         >
             {(fieldProps) => {
@@ -155,7 +150,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                     componentProps={componentProps}
                     fieldProps={fieldProps}/>;
             }}
-        </FieldComponent>
+        </Field>
     );
 
 }

package/src/form/components/index.tsx

@@ -1,2 +1,3 @@
 export * from "./FormikArrayContainer";
 export * from "./FieldHelperText";
+export * from "./LabelWithIcon";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { useClearRestoreValue } from "../../hooks";
 import { ExpandablePanel } from "@firecms/ui";
 import { getIconForProperty } from "../../util";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Array field used for custom

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { ErrorView, LabelWithIcon } from "../../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
-import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { Button, ExpandablePanel } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
 

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -2,15 +2,14 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
 import { getDefaultValueFor, getIconForProperty, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { cn, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -2,11 +2,11 @@ import React from "react";
 
 import { FieldProps } from "../../types";
 
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue, useCustomizationController } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { useCustomizationController } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { DateTimeField } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type DateTimeFieldProps = FieldProps<Date>;
 

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { DataType, EntityReference, FieldProps, GeoPoint } from "../../types";
+import { DataType, FieldProps, GeoPoint } from "../../types";
 
-import { ArrayContainer, LabelWithIcon } from "../../components";
-import { FieldHelperText } from "../components";
+import { ArrayContainer } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import {
     AddIcon,
     ArrowDropDownIcon,
@@ -546,7 +546,7 @@ function getDataType(value: any): DataType | undefined {
         return "array";
     } else if (value instanceof Date) {
         return "date";
-    } else if (value instanceof EntityReference) {
+    } else if (value?.isEntityReference && value?.isEntityReference()) {
         return "reference";
     } else if (value instanceof GeoPoint) {
         return "geopoint";

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
-import { LabelWithIcon } from "../../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
-import { FieldHelperText } from "../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
@@ -70,8 +70,10 @@ export function MapFieldBinding<T extends Record<string, any>>({
                         };
                         return (
                             <div key={`map-${propertyKey}-${index}`}>
-                                <PropertyFieldBinding
-                                    {...fieldProps}/>
+                                <ErrorBoundary>
+                                    <PropertyFieldBinding
+                                        {...fieldProps}/>
+                                </ErrorBoundary>
                             </div>
                         );
                     }
@@ -90,10 +92,10 @@ export function MapFieldBinding<T extends Record<string, any>>({
     );
 
     return (
-        <>
+        <ErrorBoundary>
 
             {!tableMode && !partOfBlock && <ExpandablePanel initiallyExpanded={expanded}
-                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
                                                             title={title}>{mapFormView}</ExpandablePanel>}
 
             {(tableMode || partOfBlock) && mapFormView}
@@ -104,7 +106,7 @@ export function MapFieldBinding<T extends Record<string, any>>({
                              disabled={disabled}
                              property={property}/>
 
-        </>
+        </ErrorBoundary>
     );
 }
 

package/src/form/field_bindings/MarkdownFieldBinding.tsx

@@ -4,8 +4,7 @@ import React, { useDeferredValue, useEffect, useRef } from "react";
 import MarkdownIt from "markdown-it";
 import MdEditor, { Plugins } from "react-markdown-editor-lite";
 
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { FieldProps } from "../../types";
 import { getIconForProperty } from "../../util";
 import {

package/src/form/field_bindings/MultiSelectBinding.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
 import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * This fields renders a dropdown with multiple selection.

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { Entity, FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { FieldHelperText } from "../components";
-import { ErrorBoundary, LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
 import { cn, paperMixin } from "@firecms/ui";
 

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useMemo } from "react";
 
 import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
-import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText } from "../components";
-import { ErrorView, LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorView } from "../../components";
 import { ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 import { Button } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Field that opens a reference selection dialog.
@@ -49,7 +50,7 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
         setValue
     });
 
-    const validValue = value && value instanceof EntityReference;
+    const validValue = value && value.isEntityReference && value.isEntityReference();
 
     const navigationController = useNavigationController();
     const collection: EntityCollection | undefined = useMemo(() => {

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -62,7 +62,9 @@ export function RepeatFieldBinding<T extends Array<any>>({
             partOfBlock: false,
             autoFocus: internalId === lastAddedId
         };
-        return <PropertyFieldBinding {...fieldProps}/>;
+        return <ErrorBoundary>
+            <PropertyFieldBinding {...fieldProps}/>
+        </ErrorBoundary>;
     };
 
     const arrayContainer = <FormikArrayContainer value={value}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util";
 import { ClearIcon, cn, IconButton, Select, SelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;
 

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -10,11 +10,10 @@ import {
 } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { FieldHelperText,LabelWithIcon } from "../components";
 
 import { getIconForProperty, isReadOnly } from "../../util";
-import { useClearRestoreValue, useSnackbarController, useStorageSource } from "../../hooks";
+import {  useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
@@ -27,6 +26,7 @@ import {
     focusedMixin,
     Typography
 } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
 const disabledClasses = "border-dotted-gray"