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

package/src/core/FireCMS.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 
-import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext, ModeControllerContext } from "../contexts";
+import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
-import { useCustomizationController, useFireCMSContext, useModeController } from "../hooks";
+import { useCustomizationController, useFireCMSContext } from "../hooks";
 import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
 import { ErrorView } from "../components";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
@@ -15,7 +15,6 @@ import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerC
 import { CenteredView, Typography, useLocaleConfig } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 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";
@@ -34,7 +33,6 @@ import { useProjectLog } from "../hooks/useProjectLog";
  */
 export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
 
-    const modeController = useModeController();
     const {
         children,
         entityLinkBuilder,
@@ -70,7 +68,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
 
-    const customizationController = useBuildCustomizationController({
+    const customizationController: CustomizationController = {
         dateTimeFormat,
         locale,
         entityLinkBuilder,
@@ -78,7 +76,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    });
+    };
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
@@ -123,39 +121,37 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
     }
 
     return (
-        <ModeControllerContext.Provider value={modeController}>
-            <AnalyticsContext.Provider value={analyticsController}>
-                <CustomizationControllerContext.Provider value={customizationController}>
-                    <UserConfigurationPersistenceContext.Provider
-                        value={userConfigPersistence}>
-                        <StorageSourceContext.Provider
-                            value={storageSource}>
-                            <DataSourceContext.Provider
-                                value={dataSource}>
-                                <AuthControllerContext.Provider
-                                    value={authController}>
-                                    <SideDialogsControllerContext.Provider
-                                        value={sideDialogsController}>
-                                        <SideEntityControllerContext.Provider
-                                            value={sideEntityController}>
-                                            <NavigationContext.Provider
-                                                value={navigationController}>
-                                                <DialogsProvider>
-                                                    <FireCMSInternal
-                                                        loading={loading}>
-                                                        {children}
-                                                    </FireCMSInternal>
-                                                </DialogsProvider>
-                                            </NavigationContext.Provider>
-                                        </SideEntityControllerContext.Provider>
-                                    </SideDialogsControllerContext.Provider>
-                                </AuthControllerContext.Provider>
-                            </DataSourceContext.Provider>
-                        </StorageSourceContext.Provider>
-                    </UserConfigurationPersistenceContext.Provider>
-                </CustomizationControllerContext.Provider>
-            </AnalyticsContext.Provider>
-        </ModeControllerContext.Provider>
+        <AnalyticsContext.Provider value={analyticsController}>
+            <CustomizationControllerContext.Provider value={customizationController}>
+                <UserConfigurationPersistenceContext.Provider
+                    value={userConfigPersistence}>
+                    <StorageSourceContext.Provider
+                        value={storageSource}>
+                        <DataSourceContext.Provider
+                            value={dataSource}>
+                            <AuthControllerContext.Provider
+                                value={authController}>
+                                <SideDialogsControllerContext.Provider
+                                    value={sideDialogsController}>
+                                    <SideEntityControllerContext.Provider
+                                        value={sideEntityController}>
+                                        <NavigationContext.Provider
+                                            value={navigationController}>
+                                            <DialogsProvider>
+                                                <FireCMSInternal
+                                                    loading={loading}>
+                                                    {children}
+                                                </FireCMSInternal>
+                                            </DialogsProvider>
+                                        </NavigationContext.Provider>
+                                    </SideEntityControllerContext.Provider>
+                                </SideDialogsControllerContext.Provider>
+                            </AuthControllerContext.Provider>
+                        </DataSourceContext.Provider>
+                    </StorageSourceContext.Provider>
+                </UserConfigurationPersistenceContext.Provider>
+            </CustomizationControllerContext.Provider>
+        </AnalyticsContext.Provider>
     );
 
 }

package/src/core/NavigationRoutes.tsx

@@ -13,7 +13,7 @@ export type NavigationRoutesProps = {
     /**
      * In case you need to override the home page
      */
-    HomePage?: React.ComponentType;
+    homePage?: React.ReactNode;
 
     customRoutes?: React.ReactNode[]
 
@@ -28,10 +28,9 @@ export type NavigationRoutesProps = {
  * @constructor
  * @group Components
  */
-
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
     function NavigationRoutes({
-                                  HomePage = DefaultHomePage,
+                                  homePage = <DefaultHomePage/>,
                                   customRoutes
                               }: NavigationRoutesProps) {
 
@@ -93,7 +92,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
         const homeRoute = (
             <Route path={"/"}
-                   element={<HomePage/>}/>
+                   element={homePage}/>
         );
 
         const notFoundRoute = <Route path={"*"}

package/src/core/Scaffold.tsx

@@ -5,19 +5,35 @@ import { Link } from "react-router-dom";
 import { Drawer as DefaultDrawer, DrawerProps } from "./Drawer";
 import { useLargeLayout, useNavigationController } from "../hooks";
 import { ErrorBoundary, FireCMSAppBar as DefaultFireCMSAppBar, FireCMSAppBarProps, FireCMSLogo } from "../components";
-import { ChevronLeftIcon, cn, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
 
 export const DRAWER_WIDTH = 280;
 
+const DrawerContext = React.createContext<DrawerProps>({
+    hovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useDrawer() {
+    return React.useContext(DrawerContext);
+}
+
 /**
  * @group Core
  */
-export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = object> {
+export interface ScaffoldProps<ExtraAppbarProps = object> {
 
     /**
      * Name of the app, displayed as the main title and in the tab title
      */
-    name: string;
+    name?: React.ReactNode;
 
     /**
      * Logo to be displayed in the drawer of the CMS
@@ -30,15 +46,10 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     includeDrawer?: boolean;
 
     /**
-     * In case you need to override the view that gets rendered as a drawer
-     * @see DefaultDrawer
-     */
-    Drawer?: React.ComponentType<DrawerProps<ExtraDrawerProps>>;
-
-    /**
-     * Additional props passed to the custom Drawer
+     * You can define a custom drawer to be displayed in the scaffold.
+     * Use the hook `useDrawer` to access the context values.
      */
-    drawerProps?: Partial<DrawerProps> & ExtraDrawerProps;
+    drawer?: React.ReactNode;
 
     /**
      * Open the drawer on hover
@@ -46,8 +57,7 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     autoOpenDrawer?: boolean;
 
     /**
-     * A component that gets rendered on the upper side of the main toolbar.
-     * `toolbarExtraWidget` has no effect if this is set.
+     * The AppBar component to be used in the scaffold.
      */
     FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
 
@@ -78,8 +88,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             logo,
             includeDrawer = true,
             autoOpenDrawer,
-            Drawer = DefaultDrawer,
-            drawerProps,
+            drawer = <DefaultDrawer/>,
             FireCMSAppBar = DefaultFireCMSAppBar,
             fireCMSAppBarProps,
         } = props;
@@ -92,60 +101,65 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
         const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 
+        const handleDrawerOpen = useCallback(() => {
+            setDrawerOpen(true);
+        }, []);
+
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
         }, []);
 
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
+
         return (
-            <div
-                className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
-                style={{
-                    paddingTop: "env(safe-area-inset-top)",
-                    paddingLeft: "env(safe-area-inset-left)",
-                    paddingRight: "env(safe-area-inset-right)",
-                    paddingBottom: "env(safe-area-inset-bottom)",
-                    height: "100dvh"
-                    // "@supports (height: 100dvh)": {
-                    //     height: "100dvh"
-                    // }
-                }}>
-
-                <FireCMSAppBar title={name}
-                                        includeDrawer={includeDrawer}
-                                        drawerOpen={computedDrawerOpen}
-                                        {...fireCMSAppBarProps}/>
-
-                <StyledDrawer
-                    displayed={includeDrawer}
-                    onMouseEnter={setOnHoverTrue}
-                    onMouseMove={setOnHoverTrue}
-                    onMouseLeave={setOnHoverFalse}
-                    open={computedDrawerOpen}
-                    logo={logo}
-                    hovered={onHover}
-                    setDrawerOpen={setDrawerOpen}>
-                    {includeDrawer && (
-                        <Drawer
-                            hovered={onHover}
-                            drawerOpen={computedDrawerOpen}
-                            closeDrawer={handleDrawerClose}
-                            {...drawerProps}/>)}
-                </StyledDrawer>
-
-                <main
-                    className="flex flex-col flex-grow overflow-auto">
-                    <DrawerHeader/>
-                    <div
-                        className={cn(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
-
-                        <ErrorBoundary>
-                            {children}
-                        </ErrorBoundary>
-
-                    </div>
-                </main>
-            </div>
+            <DrawerContext.Provider value={{
+                hovered: onHover,
+                drawerOpen: computedDrawerOpen,
+                closeDrawer: handleDrawerClose,
+                openDrawer: handleDrawerOpen,
+                autoOpenDrawer
+            }}>
+                <div
+                    className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
+                    style={{
+                        paddingTop: "env(safe-area-inset-top)",
+                        paddingLeft: "env(safe-area-inset-left)",
+                        paddingRight: "env(safe-area-inset-right)",
+                        paddingBottom: "env(safe-area-inset-bottom)",
+                        height: "100dvh"
+                    }}>
+
+                    <FireCMSAppBar title={name}
+                                   includeDrawer={includeDrawer}
+                                   logo={logo}
+                                   drawerOpen={computedDrawerOpen}
+                                   {...fireCMSAppBarProps}/>
+                    <DrawerWrapper
+                        displayed={includeDrawer}
+                        onMouseEnter={setOnHoverTrue}
+                        onMouseMove={setOnHoverTrue}
+                        onMouseLeave={setOnHoverFalse}
+                        open={computedDrawerOpen}
+                        logo={logo}
+                        hovered={onHover}
+                        setDrawerOpen={setDrawerOpen}>
+                        {includeDrawer && drawer}
+                    </DrawerWrapper>
+
+                    <main
+                        className="flex flex-col flex-grow overflow-auto">
+                        <DrawerHeader/>
+                        <div
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
+
+                            <ErrorBoundary>
+                                {children}
+                            </ErrorBoundary>
+
+                        </div>
+                    </main>
+                </div>
+            </DrawerContext.Provider>
         );
     },
     equal
@@ -157,7 +171,7 @@ const DrawerHeader = () => {
     );
 };
 
-function StyledDrawer(props: {
+function DrawerWrapper(props: {
     children: React.ReactNode,
     displayed: boolean,
     open: boolean,
@@ -204,7 +218,7 @@ function StyledDrawer(props: {
                     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")}>
+                className={cls("cursor-pointer")}>
 
                 <Tooltip title={"Home"}
                          sideOffset={20}
@@ -214,7 +228,7 @@ function StyledDrawer(props: {
                         {props.logo
                             ? <img src={props.logo}
                                    alt="Logo"
-                                   className={cn("max-w-full max-h-full",
+                                   className={cls("max-w-full max-h-full",
                                        props.open ?? "w-[112px] h-[112px]")}/>
                             : <FireCMSLogo/>}
 

package/src/core/field_configs.tsx

@@ -331,7 +331,7 @@ export function getFieldConfig(property: Property | ResolvedProperty, propertyCo
     }
     const defaultFieldConfig = DEFAULT_FIELD_CONFIGS[defaultFieldId];
     const customField = fieldId ? propertyConfigs[fieldId] : undefined;
-    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {});
+    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {} as PropertyConfig);
 }
 
 export function getDefaultFieldId(property: Property | ResolvedProperty) {

package/src/core/index.tsx

@@ -1,10 +1,9 @@
 export * from "./FireCMS";
 
-export type { ScaffoldProps } from "./Scaffold";
-export { Scaffold } from "./Scaffold";
+export * from "./Scaffold";
 
-export type { DrawerProps } from "./Drawer";
-export { Drawer, DrawerNavigationItem } from "./Drawer";
+export * from "./Drawer";
+export * from "./DrawerNavigationItem";
 
 export * from "./field_configs";
 

package/src/form/EntityForm.tsx

@@ -35,12 +35,9 @@ import {
 } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { Alert, Button, cn, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
-import { ErrorBoundary } from "../components";
-import {
-    copyEntityAction,
-    deleteEntityAction
-} from "../components/EntityCollectionTable/internal/default_entity_actions";
+import { Alert, Button, CircularProgress, cls, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { CircularProgressCenter, ErrorBoundary } from "../components";
+import { copyEntityAction, deleteEntityAction } from "../components/common/default_entity_actions";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { ValidationError } from "yup";
 import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
@@ -135,12 +132,13 @@ export type EntityFormSaveParams<M extends Record<string, any>> = {
  * @constructor
  * @group Components
  */
-export const EntityForm = React.memo<EntityFormProps<any>>(EntityFormInternal,
-    (a: EntityFormProps<any>, b: EntityFormProps<any>) => {
-        return a.status === b.status &&
-            a.path === b.path &&
-            equal(a.entity?.values, b.entity?.values);
-    }) as typeof EntityFormInternal;
+export const EntityForm = EntityFormInternal;
+// export const EntityForm = React.memo<EntityFormProps<any>>(EntityFormInternal,
+//     (a: EntityFormProps<any>, b: EntityFormProps<any>) => {
+//         return a.status === b.status &&
+//             a.path === b.path &&
+//             equal(a.entity?.values, b.entity?.values);
+//     }) as typeof EntityFormInternal;
 
 function getDataSourceEntityValues<M extends object>(initialResolvedCollection: ResolvedEntityCollection,
                                                      status: "new" | "existing" | "copy",
@@ -188,7 +186,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         path,
         values: entity?.values,
         fields: customizationController.propertyConfigs
-    }), [entity?.values, path]);
+    }), [entity?.values, path, customizationController.propertyConfigs]);
 
     const mustSetCustomId: boolean = (status === "new" || status === "copy") &&
         (Boolean(initialResolvedCollection.customId) && initialResolvedCollection.customId !== "optional");
@@ -415,7 +413,8 @@ function EntityFormInternal<M extends Record<string, any>>({
     const pluginActions: React.ReactNode[] = [];
 
     const formContext: FormContext<M> = {
-        setFieldValue: formex.setFieldValue,
+        // @ts-ignore
+        setFieldValue: useCallback(formex.setFieldValue, []),
         values: formex.values,
         collection: resolvedCollection,
         entityId,
@@ -423,12 +422,14 @@ function EntityFormInternal<M extends Record<string, any>>({
         save
     };
 
+    const submittedFormContext = useRef<FormContext<M> | null>(null);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-        if (onFormContextChange) {
+        if (onFormContextChange && !formContextsEqual(submittedFormContext.current ?? undefined, formContext)) {
             onFormContextChange(formContext);
+            submittedFormContext.current = formContext;
         }
-    }, [onFormContextChange, formContext]);
+    }, [formContext, onFormContextChange]);
 
     if (plugins && inputCollection) {
         const actionProps: PluginFormActionProps = {
@@ -452,7 +453,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         <div className="h-full overflow-auto">
 
             {pluginActions.length > 0 && <div
-                className={cn("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
+                className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
                 {pluginActions}
             </div>}
 
@@ -670,10 +671,10 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                         </IconButton>
                     ))}
                 </div>}
-
+                {isSubmitting && <CircularProgress size={"small"}/>}
                 <Button
                     variant="text"
-                    disabled={disabled}
+                    disabled={disabled || isSubmitting}
                     type="reset"
                 >
                     {status === "existing" ? "Discard" : "Clear"}
@@ -683,7 +684,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                     variant="text"
                     color="primary"
                     type="submit"
-                    disabled={disabled}
+                    disabled={disabled || isSubmitting}
                     onClick={() => {
                         closeAfterSaveRef.current = false;
                     }}
@@ -697,7 +698,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                     variant="filled"
                     color="primary"
                     type="submit"
-                    disabled={disabled}
+                    disabled={disabled || isSubmitting}
                     onClick={() => {
                         closeAfterSaveRef.current = true;
                     }}
@@ -726,3 +727,10 @@ export function yupToFormErrors(yupError: ValidationError): Record<string, any>
     }
     return errors;
 }
+
+function formContextsEqual(a: FormContext<any> | undefined, b: FormContext<any> | undefined): boolean {
+    return a?.path === b?.path &&
+        a?.entityId === b?.entityId &&
+        equal(a?.values, b?.values) &&
+        equal(a?.collection, b?.collection);
+}

package/src/form/PropertyFieldBinding.tsx

@@ -92,7 +92,6 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                 let Component: ComponentType<FieldProps<T>> | undefined;
                 const resolvedProperty: ResolvedProperty<T> | null = resolveProperty({
                     propertyKey,
-                    propertyValue: fieldProps.field.value,
                     propertyOrBuilder: property,
                     values: fieldProps.form.values,
                     path: context.path,
@@ -116,7 +115,6 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     }
                     const configProperty = resolveProperty({
                         propertyOrBuilder: propertyConfig.property,
-                        propertyValue: fieldProps.field.value,
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,

package/src/form/components/StorageItemPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Entity, EntityCollection, ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
-import { cn, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
+import { cls, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 interface StorageItemPreviewProps {
@@ -29,7 +29,7 @@ export function StorageItemPreview({
                                    }: StorageItemPreviewProps) {
 
     return (
-        <div className={cn(paperMixin,
+        <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
             size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]")}>
 

package/src/form/components/StorageUploadProgress.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { useSnackbarController, useStorageSource } from "../../hooks";
 import { StorageFieldItem } from "../../util/useStorageUploadController";
 import { ErrorView } from "../../components";
-import { cn, paperMixin, Skeleton } from "@firecms/ui";
+import { cls, paperMixin, Skeleton } from "@firecms/ui";
 import { EntityCollection, StorageSource } from "../../types";
 
 export interface StorageUploadItemProps {
@@ -49,7 +49,7 @@ export function StorageUploadProgress({
             metadata
         })
             .then(async ({ path }) => {
-                console.debug("Upload successful");
+                console.debug("Upload successful", path);
                 await onFileUploadComplete(path, entry, metadata);
                 if (mounted.current)
                     setLoading(false);
@@ -88,7 +88,7 @@ export function StorageUploadProgress({
     }
     return (
 
-        <div className={cn(paperMixin,
+        <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -6,7 +6,7 @@ import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
 import { useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, cn, ExpandablePanel, fieldBackgroundMixin } from "@firecms/ui";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -88,6 +88,8 @@ export function ArrayOfReferencesFieldBinding({
                     onClick={onEntryClick}
                     hover={!disabled}
                     reference={entryValue}
+                    includeId={ofProperty.includeId}
+                    includeEntityLink={ofProperty.includeEntityLink}
                 />
         );
     }, [ofProperty.path, ofProperty.previewProperties, value]);
@@ -130,7 +132,7 @@ export function ArrayOfReferencesFieldBinding({
             {!tableMode &&
                 <ExpandablePanel
                     titleClassName={fieldBackgroundMixin}
-                    className={cn("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                    className={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -8,7 +8,7 @@ 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 { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -193,7 +193,7 @@ function BlockEntry({
     };
 
     return (
-        <div className={cn(paperMixin, "bg-transparent p-4 my-4 py-8")}>
+        <div className={cls(paperMixin, "bg-transparent p-4 my-4 py-8")}>
 
             <Field
                 name={typeFieldName}