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

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) {
@@ -359,8 +359,7 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
     } else if (property.dataType === "map") {
         if (property.keyValue)
             return "key_value";
-        if (property.properties)
-            return "group";
+        return "group";
     } else if (property.dataType === "array") {
         const of = (property as ArrayProperty).of;
         const oneOf = (property as ArrayProperty).oneOf;

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}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -8,7 +8,7 @@ import {
     ArrowDropDownIcon,
     BooleanSwitchWithLabel,
     Button,
-    cn,
+    cls,
     DateTimeField,
     defaultBorderMixin,
     ExpandablePanel,
@@ -316,7 +316,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                            }}/>;
         } else if (dataType === "array") {
             return <div
-                className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+                className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <ArrayContainer value={entryValue}
                                 newDefaultEntry={""}
                                 droppableId={rowId.toString()}
@@ -349,7 +349,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
             </div>;
         } else if (dataType === "map") {
             return <div
-                className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+                className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <MapEditView value={entryValue}
                              fieldName={fieldKey}
                              setValue={(updatedValue) => {
@@ -482,7 +482,7 @@ function ArrayKeyValueRow<T>({
                 Arrays of arrays are not supported.
             </Typography>;
         } else if (dataType === "map") {
-            return <div className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+            return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <MapEditView value={entryValue}
                              setValue={(updatedValue) => {
                                  setValue(updatedValue);

package/src/form/field_bindings/MarkdownFieldBinding.tsx

@@ -8,7 +8,7 @@ import { FieldHelperText, LabelWithIcon } from "../components";
 import { FieldProps } from "../../types";
 import { getIconForProperty } from "../../util";
 import {
-    cn,
+    cls,
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
@@ -81,7 +81,7 @@ export function MarkdownFieldBinding({
             </Typography>}
 
             <MdEditor value={internalValue ?? ""}
-                      className={cn(fieldBackgroundMixin,
+                      className={cls(fieldBackgroundMixin,
                           disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                           "text-base")}
                       readOnly={disabled}

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -6,7 +6,7 @@ import { PropertyPreview } from "../../preview";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
-import { cn, paperMixin } from "@firecms/ui";
+import { cls, paperMixin } from "@firecms/ui";
 
 /**
  *
@@ -47,7 +47,7 @@ export function ReadOnlyFieldBinding({
             }
 
             <div
-                className={cn(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                className={cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -27,19 +27,19 @@ export function ReferenceFieldBinding<M extends Record<string, any>>(props: Fiel
 
 }
 
-function ReferenceFieldBindingInternal<M extends Record<string, any>>({
-                                                                          value,
-                                                                          setValue,
-                                                                          error,
-                                                                          showError,
-                                                                          isSubmitting,
-                                                                          disabled,
-                                                                          touched,
-                                                                          autoFocus,
-                                                                          property,
-                                                                          includeDescription,
-                                                                          context
-                                                                      }: FieldProps<EntityReference>) {
+function ReferenceFieldBindingInternal({
+                                           value,
+                                           setValue,
+                                           error,
+                                           showError,
+                                           isSubmitting,
+                                           disabled,
+                                           touched,
+                                           autoFocus,
+                                           property,
+                                           includeDescription,
+                                           context
+                                       }: FieldProps<EntityReference>) {
     if (!property.path) {
         throw new Error("Property path is required for ReferenceFieldBinding");
     }
@@ -99,6 +99,8 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
                     size={"medium"}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={value}
+                    includeEntityLink={property.includeEntityLink}
+                    includeId={property.includeId}
                 />}
 
                 {!value && <div className="justify-center text-left">

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -4,7 +4,7 @@ import { EnumType, FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util";
-import { ClearIcon, cn, IconButton, Select, SelectItem } from "@firecms/ui";
+import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;
@@ -48,10 +48,10 @@ export function SelectFieldBinding<T extends EnumType>({
         <>
 
             <Select
-                value={value ? value.toString() : ""}
+                value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
                 position="item-aligned"
-                inputClassName={cn("w-full")}
+                inputClassName={cls("w-full")}
                 label={<LabelWithIcon icon={getIconForProperty(property, "small")}
                                       required={property.validation?.required}
                                       title={property.name}