@firecms/core 3.2.0 → 3.3.0-canary.7e3431b

package/src/core/EntityEditView.tsx

@@ -26,7 +26,7 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography, Menu, MenuItem, ExpandMoreIcon } from "@firecms/ui";
 import { getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
@@ -230,6 +230,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
+    const groupedViews = useMemo(() => {
+        return (collection.viewGroups ?? []).flatMap(g => g.views);
+    }, [collection.viewGroups]);
+
     const {
         resolvedEntityViews,
         selectedEntityView,
@@ -419,16 +423,18 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         Builder={selectedSecondaryForm?.Builder}
     />;
 
-    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
+    const subcollectionTabs = subcollections && subcollections
+        .filter(sub => !groupedViews.includes(sub.id ?? sub.path))
+        .map((subcollection) =>
         <Tab
             className="text-sm min-w-[120px]"
-            value={subcollection.id}
+            value={subcollection.id ?? subcollection.path}
             key={`entity_detail_collection_tab_${subcollection.name}`}>
             {subcollection.name}
         </Tab>
     );
 
-    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start" && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -437,7 +443,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {view.tabComponent ?? view.name}
             </Tab>
         );
-    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+    const customViewTabsEnd = resolvedEntityViews.filter(view => (!view.position || view.position === "end") && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -447,6 +453,43 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </Tab>
         );
 
+    const viewGroupMenus = collection.viewGroups?.map(group => {
+        const isActive = group.views.includes(selectedTab);
+        return (
+            <Menu
+                key={`view_group_${group.name}`}
+                trigger={
+                    <button
+                        type="button"
+                        className={cls(
+                            "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all",
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
+                            "disabled:pointer-events-none disabled:opacity-50",
+                            isActive ? "bg-white text-surface-900 dark:bg-surface-950 dark:text-surface-50" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800"
+                        )}
+                    >
+                        {group.name}
+                        <ExpandMoreIcon className="ml-1 -mr-1" size="small" />
+                    </button>
+                }>
+                {group.views.map(viewId => {
+                    const subcollection = subcollections.find(s => (s.id ?? s.path) === viewId);
+                    const customView = resolvedEntityViews.find(v => v.key === viewId);
+                    const name = subcollection?.name ?? customView?.name ?? viewId;
+                    return (
+                        <MenuItem 
+                            key={`view_group_${group.name}_${viewId}`} 
+                            onClick={() => onSideTabClick(viewId)}
+                            className={selectedTab === viewId ? "bg-surface-accent-100 dark:bg-surface-accent-900" : ""}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            </Menu>
+        );
+    });
+
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
@@ -494,6 +537,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                 {customViewTabsEnd}
 
+                {viewGroupMenus}
+
                 {subcollectionTabs}
             </Tabs>}
         </div>}

package/src/core/EntitySidePanel.tsx

@@ -78,7 +78,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         return navigationController.getParentCollectionIds(path);
     }, [navigationController, path]);
 
-    const collection = navigationController.getCollection(fullIdPath ?? path) ?? props.collection;
+    const collection = props.collection ?? navigationController.getCollection(fullIdPath ?? path);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -112,6 +112,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     return (
         <>
             <ErrorBoundary>
+
                 <EntityEditView
                     {...props}
                     fullIdPath={fullIdPath}

package/src/core/field_configs.tsx

@@ -8,16 +8,18 @@ import {
     DateTimeFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
-    MarkdownEditorFieldBinding,
     MultiSelectFieldBinding,
     ReferenceAsStringFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
-    StorageUploadFieldBinding,
     SwitchFieldBinding,
     TextFieldBinding
 } from "../form";
+import { lazyEager } from "../util/lazy_eager";
+
+const MarkdownEditorFieldBinding = lazyEager<typeof import("../form/field_bindings/MarkdownEditorFieldBinding")["MarkdownEditorFieldBinding"]>(() => import("../form/field_bindings/MarkdownEditorFieldBinding"), "MarkdownEditorFieldBinding");
+const StorageUploadFieldBinding = lazyEager<typeof import("../form/field_bindings/StorageUploadFieldBinding")["StorageUploadFieldBinding"]>(() => import("../form/field_bindings/StorageUploadFieldBinding"), "StorageUploadFieldBinding");
 import { isPropertyBuilder, mergeDeep } from "../util";
 
 import {

package/src/editor/editor.tsx

@@ -148,8 +148,26 @@ export const FireCMSEditor = ({
   });
 
   const doc = state?.doc;
+  const mountedRef = useRef(false);
+
+  // Enable flushing after the initial render cycle completes.
+  // ProseMirror initialization (including trailingNodePlugin and
+  // appendTransaction) runs synchronously during mount, so any doc
+  // change after the first effect cycle is from user interaction.
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      mountedRef.current = true;
+    });
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
   useEffect(() => {
     if (!state) return;
+    // Skip flush until after mount — the round-trip through
+    // parse → ProseMirror → serialize is not idempotent and would
+    // produce subtly different markdown on init, making the form
+    // dirty without user interaction.
+    if (!mountedRef.current) return;
     const timeout = setTimeout(() => {
       flushChanges(state);
     }, 250);
@@ -160,6 +178,7 @@ export const FireCMSEditor = ({
     if (!view) return;
     const dom = view.dom;
     const handleBlur = () => {
+      if (!mountedRef.current) return;
       flushChanges(view.state);
     };
     dom.addEventListener("blur", handleBlur);
@@ -236,7 +255,7 @@ export const FireCMSEditor = ({
             onChange={handleMarkdownChange as any}
             onBlur={handleMarkdownBlur as any}
             className={cls(
-              "w-full h-full min-h-[300px] p-12 bg-transparent resize-none font-mono focus:ring-0",
+              "w-full min-h-[300px] p-12 bg-transparent resize-none font-mono focus:ring-0 focus:outline-none outline-none",
               proseClass
             )}
             style={{ 

package/src/editor/markdown.ts

@@ -49,6 +49,66 @@ const md = markdownIt({ html: false })
     .use(markdownItMark)
     .use(markdownItIns);
 
+// Override the escape rule so that `\` before a newline is kept as literal
+// text instead of being silently consumed as a hardbreak. The default
+// markdown-it behaviour strips the backslash and produces a <br>, which
+// causes users to lose visible `\` characters in their content.
+md.inline.ruler.at("escape", function escapeOverride(state: any, silent: boolean): boolean {
+    let pos = state.pos;
+    const max = state.posMax;
+
+    if (state.src.charCodeAt(pos) !== 0x5C /* \ */) return false;
+    pos++;
+
+    if (pos >= max) return false;
+
+    const ch1 = state.src.charCodeAt(pos);
+
+    // KEY CHANGE: when `\` is followed by a newline, output the backslash as
+    // literal text and let the normal softbreak handling deal with the newline.
+    if (ch1 === 0x0A) {
+        if (!silent) {
+            state.pending += "\\";
+        }
+        state.pos = pos; // leave the newline for softbreak to handle
+        return true;
+    }
+
+    // For escaped ASCII punctuation, output the character without the backslash
+    // (standard markdown escape behaviour: `\*` → `*`).
+    let escapedStr = state.src[pos];
+    // Handle surrogate pairs
+    if (ch1 >= 0xD800 && ch1 <= 0xDBFF && pos + 1 < max) {
+        const ch2 = state.src.charCodeAt(pos + 1);
+        if (ch2 >= 0xDC00 && ch2 <= 0xDFFF) {
+            escapedStr += state.src[pos + 1];
+            pos++;
+        }
+    }
+
+    const origStr = "\\" + escapedStr;
+
+    if (!silent) {
+        // Check if the character is an ASCII punctuation that
+        // markdown-it considers escapable (codes < 256 in its lookup table).
+        const isEscapable = ch1 < 256 && /[\\!"#$%&'()*+,./:;<=>?@[\]^_`{|}~-]/.test(String.fromCharCode(ch1));
+        const token = state.push("text_special", "", 0);
+        if (isEscapable) {
+            token.content = escapedStr;
+        } else {
+            token.content = origStr;
+        }
+        token.markup = origStr;
+        token.info = "escape";
+    }
+    state.pos = pos + 1;
+    return true;
+});
+
+// Also disable the newline rule which redundantly converts `\` + newline
+// to hardbreaks via a separate code path.
+md.inline.ruler.disable(["newline"]);
+
 // Unwrap images from paragraphs so they can be parsed as block nodes by ProseMirror
 md.core.ruler.after("inline", "image-to-block", (state: any) => {
     const tokens = state.tokens;
@@ -145,7 +205,35 @@ export const markdownSerializer = new MarkdownSerializer(
         },
         table_row() {},
         table_cell() {},
-        table_header() {}
+        table_header() {},
+        // Custom text serializer: since our parser override keeps `\` as
+        // literal text (instead of consuming it), we must avoid the default
+        // esc() from double-escaping it. We escape all standard markdown
+        // specials *except* the backslash itself.
+        text(state: any, node: any) {
+            const escaped = node.text.replace(/[`*~\[\]_]/g, (m: string, i: number) => {
+                // Don't escape mid-word underscores (same logic as default esc)
+                if (m === "_" && i > 0 && i + 1 < node.text.length
+                    && /\w/.test(node.text[i - 1]) && /\w/.test(node.text[i + 1])) {
+                    return m;
+                }
+                return "\\" + m;
+            });
+            // Handle start-of-line patterns that could be parsed as block syntax
+            const lines = escaped.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                state.write();
+                let line = lines[i];
+                if (state.atBlockStart || i > 0) {
+                    line = line
+                        .replace(/^(\+[ ]|[-*>])/, "\\$&")
+                        .replace(/^(\s*)(#{1,6})(\s|$)/, '$1\\$2$3')
+                        .replace(/^(\s*\d+)\.\s/, "$1\\. ");
+                }
+                state.out += line;
+                if (i !== lines.length - 1) state.out += "\n";
+            }
+        }
     },
     {
         ...defaultMarkdownSerializer.marks,

package/src/form/EntityForm.tsx

@@ -125,6 +125,35 @@ export function extractTouchedValues(values: any, touched: Record<string, boolea
     return acc;
 }
 
+/**
+ * Recursively removes empty plain objects `{}` and empty arrays `[]` from a value tree.
+ * This prevents ghost containers created by `setIn` intermediate path construction
+ * (e.g. `{ address: {} }` when only `address.city` was touched but value is undefined)
+ * from falsely triggering the unsaved local changes indicator.
+ */
+function removeEmptyContainers(obj: any): any {
+    if (Array.isArray(obj)) {
+        const cleaned = obj.map(removeEmptyContainers);
+        // Keep arrays even if they contain only nulls/undefined — that's intentional data
+        return cleaned;
+    }
+    if (obj && typeof obj === "object" && Object.getPrototypeOf(obj) === Object.prototype) {
+        const result: Record<string, any> = {};
+        for (const key of Object.keys(obj)) {
+            const cleaned = removeEmptyContainers(obj[key]);
+            // Skip empty plain objects
+            if (cleaned && typeof cleaned === "object" && !Array.isArray(cleaned)
+                && Object.getPrototypeOf(cleaned) === Object.prototype
+                && Object.keys(cleaned).length === 0) {
+                continue;
+            }
+            result[key] = cleaned;
+        }
+        return result;
+    }
+    return obj;
+}
+
 export function getChanges<T extends object>(source: Partial<T>, comparison: Partial<T>): Partial<T> {
     const changes: Partial<T> = {};
 
@@ -251,7 +280,7 @@ export function EntityForm<M extends Record<string, any>>({
     const context = useFireCMSContext();
     const analyticsController = useAnalyticsController();
 
-    const [underlyingChanges] = useState<Partial<EntityValues<M>>>({});
+    const [underlyingChanges, setUnderlyingChanges] = useState<Partial<EntityValues<M>>>({});
 
     const [customIdLoading, setCustomIdLoading] = useState<boolean>(false);
 
@@ -332,7 +361,15 @@ export function EntityForm<M extends Record<string, any>>({
         return [initialValues, initialDirty];
     }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
 
-    const hasLocalChanges = !localChangesCleared && localChangesDataRaw && Object.keys(localChangesDataRaw).length > 0;
+    const hasLocalChanges = useMemo(() => {
+        if (localChangesCleared || !localChangesDataRaw || Object.keys(localChangesDataRaw).length === 0) {
+            return false;
+        }
+        // Compare cached values against entity values to check for real differences
+        const entityValues = entity?.values ?? {};
+        const realChanges = getChanges(localChangesDataRaw as Partial<M>, entityValues as Partial<M>);
+        return Object.keys(realChanges).length > 0;
+    }, [localChangesCleared, localChangesDataRaw, entity?.values]);
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
         initialValues: initialValues as M,
@@ -352,8 +389,10 @@ export function EntityForm<M extends Record<string, any>>({
         onValuesChangeDeferred: (values: M, controller: FormexController<M>) => {
             const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
             if (controller.dirty) {
-                const touchedValues = extractTouchedValues(values, controller.touched);
-                saveEntityToCache(key, touchedValues);
+                const touchedValues = removeEmptyContainers(extractTouchedValues(values, controller.touched));
+                if (touchedValues && Object.keys(touchedValues).length > 0) {
+                    saveEntityToCache(key, touchedValues);
+                }
             }
         },
         validation: (values) => {
@@ -666,6 +705,27 @@ export function EntityForm<M extends Record<string, any>>({
 
     useOnAutoSave(autoSave, formex, lastSavedValues, save);
 
+    // Detect external changes to the entity (e.g. from onSnapshot after Admin SDK writes)
+    const prevEntityValuesRef = useRef<EntityValues<M> | undefined>(entity?.values);
+    useEffect(() => {
+        if (!entity?.values || status !== "existing") return;
+        const prev = prevEntityValuesRef.current;
+        prevEntityValuesRef.current = entity.values;
+        if (prev && !equal(prev, entity.values)) {
+            // Compute the diff between the old and new entity values
+            const changes: Partial<EntityValues<M>> = {};
+            const allKeys = new Set([...Object.keys(prev), ...Object.keys(entity.values)]);
+            for (const key of allKeys) {
+                if (!equal((prev as any)[key], (entity.values as any)[key])) {
+                    (changes as any)[key] = (entity.values as any)[key];
+                }
+            }
+            if (Object.keys(changes).length > 0) {
+                setUnderlyingChanges(changes);
+            }
+        }
+    }, [entity?.values, status]);
+
     useEffect(() => {
         if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
             // we update the form fields from the Firestore data

package/src/form/PropertyFieldBinding.tsx

@@ -20,7 +20,7 @@ import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../uti
 import { useAuthController, useCustomizationController, useTranslation } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
-import { ErrorBoundary } from "../components";
+import { ErrorBoundary, CircularProgressCenter } from "../components";
 
 /**
  * This component renders a form field creating the corresponding configuration
@@ -287,8 +287,9 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
 
     return (
         <ErrorBoundary>
-
-            <UsedComponent {...cmsFieldProps} />
+            <React.Suspense fallback={<CircularProgressCenter />}>
+                <UsedComponent {...cmsFieldProps} />
+            </React.Suspense>
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel, Typography } from "@firecms/ui";
+import { ExpandablePanel, IconButton, CloseIcon } from "@firecms/ui";
 import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "../../hooks";
@@ -50,15 +50,28 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
         setValue
     });
 
-    const title = (<>
+    const title = (<div className="flex items-center w-full">
         <LabelWithIconAndTooltip
             propertyKey={propertyKey}
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"h-8 flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <span className={"text-sm text-text-secondary dark:text-text-secondary-dark ml-1"}>({value.length})</span>}
+        <div className="flex-grow"/>
+        {(property.nullable || property.clearable) && !disabled && (
+            <IconButton
+                size="small"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setValue(null);
+                }}
+            >
+                <CloseIcon size={"small"}/>
+            </IconButton>
+        )}
+    </div>);
 
     const body = resolvedProperties.map((childProperty, index) => {
         const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -5,7 +5,7 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 import { useNavigationController, useReferenceDialog, useTranslation } from "../../hooks";
-import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
+import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography, IconButton, CloseIcon } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -100,15 +100,28 @@ export function ArrayOfReferencesFieldBinding({
         );
     }, [ofProperty.path, ofProperty.previewProperties, value]);
 
-    const title = (<>
+    const title = (<div className="flex items-center w-full">
         <LabelWithIconAndTooltip
             propertyKey={propertyKey}
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <span className={"text-sm text-text-secondary dark:text-text-secondary-dark ml-1"}>({value.length})</span>}
+        <div className="flex-grow"/>
+        {(property.nullable || property.clearable) && !disabled && (
+            <IconButton
+                size="small"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setValue(null);
+                }}
+            >
+                <CloseIcon size={"small"}/>
+            </IconButton>
+        )}
+    </div>);
 
     const body = <>
         {!collection && <ErrorView

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, mergeDeep, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
-import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography, IconButton, CloseIcon } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { ArrayContainer, ArrayEntryParams } from "../../components";
 import { useTranslation } from "../../hooks/useTranslation";
@@ -74,12 +74,26 @@ export function BlockFieldBinding<T extends Array<any>>({
     };
 
     const title = (
-        <LabelWithIconAndTooltip
-            propertyKey={propertyKey}
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required}
-            title={property.name}
-            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        <div className="flex items-center w-full">
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark flex-grow"}/>
+            {(property.nullable || property.clearable) && !disabled && (
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setValue(null);
+                    }}
+                >
+                    <CloseIcon size={"small"}/>
+                </IconButton>
+            )}
+        </div>
     );
 
     const firstOneOfKey = Object.keys(property.oneOf.properties)[0];

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -48,7 +48,7 @@ export function DateTimeFieldBinding({
                     onChange={(dateValue) => setValue(dateValue)}
                     size={"large"}
                     mode={property.mode}
-                    clearable={property.clearable}
+                    clearable={property.nullable || property.clearable}
                     locale={locale}
                     timezone={property.timezone}
                     error={showError}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -13,6 +13,7 @@ import {
     defaultBorderMixin,
     ExpandablePanel,
     IconButton,
+    CloseIcon,
     Menu,
     MenuItem,
     RemoveIcon,
@@ -64,12 +65,28 @@ export function KeyValueFieldBinding({
                                      initialValue={initialValues}
                                      fieldName={property.name ?? propertyKey}/>;
 
-    const title = <LabelWithIconAndTooltip
-        propertyKey={propertyKey}
-        icon={getIconForProperty(property, "small")}
-        required={property.validation?.required}
-        title={property.name}
-        className={"text-text-secondary dark:text-text-secondary-dark"}/>;
+    const title = (
+        <div className="flex items-center w-full">
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark flex-grow"}/>
+            {(property.nullable || property.clearable) && !disabled && (
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setValue(null);
+                    }}
+                >
+                    <CloseIcon size={"small"}/>
+                </IconButton>
+            )}
+        </div>
+    );
 
     return (
         <>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -6,7 +6,7 @@ import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { FormEntry } from "../components/FormEntry";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
+import { cls, ExpandablePanel, InputLabel, Select, SelectItem, IconButton, CloseIcon } from "@firecms/ui";
 import { useTranslation } from "../../hooks";
 
 /**
@@ -28,7 +28,8 @@ export function MapFieldBinding({
     includeDescription,
     autoFocus,
     context,
-    onPropertyChange
+    onPropertyChange,
+    setValue
 }: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
@@ -108,12 +109,26 @@ export function MapFieldBinding({
                 }}
                 className={property.widthPercentage !== undefined ? "mt-8" : undefined}
                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
-                title={<LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name}
-                    className={"text-text-secondary dark:text-text-secondary-dark"} />}>
+                title={<div className="flex items-center w-full">
+                    <LabelWithIconAndTooltip
+                        propertyKey={propertyKey}
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}
+                        className={"text-text-secondary dark:text-text-secondary-dark flex-grow"} />
+                    {(property.nullable || property.clearable) && !disabled && (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    )}
+                </div>}>
                 {mapFormView}
             </ExpandablePanel>}