@firecms/core 3.1.0-canary.24c8270 → 3.1.0-canary.501d471

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -13,6 +13,7 @@ import {
     defaultBorderMixin,
     ExpandablePanel,
     IconButton,
+    CloseIcon,
     Menu,
     MenuItem,
     RemoveIcon,
@@ -22,6 +23,7 @@ import {
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
 import { getIn } from "@firecms/formex";
+import { useTranslation } from "../../hooks/useTranslation";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -54,6 +56,7 @@ export function KeyValueFieldBinding({
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
 
+    const { t } = useTranslation();
     const initialValues = getIn(context.formex.initialValues, propertyKey);
 
     const mapFormView = <MapEditView value={value}
@@ -62,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 (
         <>
@@ -103,6 +122,7 @@ function MapEditView<T extends Record<string, any>>({
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
+    const { t } = useTranslation();
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
         Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
@@ -230,7 +250,7 @@ function MapEditView<T extends Record<string, any>>({
                     }]]);
                 }
                 }>
-            {fieldName ? `Add to ${fieldName}` : "Add"}
+            {fieldName ? t("add_to_field", { fieldName }) : t("add_entry")}
         </Button>
 
     </div>;
@@ -261,12 +281,13 @@ function MapKeyValueRow<T extends Record<string, any>>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
 
     function buildInput(entryValue: any, fieldKey: string, dataType: DataType) {
         if (dataType === "string" || dataType === "number") {
             return <TextField
                 key={dataType}
-                placeholder={"value"}
+                placeholder={t("value")}
                 value={entryValue}
                 type={dataType === "number" ? "number" : "text"}
                 size={"medium"}
@@ -325,7 +346,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <ArrayContainer value={entryValue}
                                 newDefaultEntry={""}
                                 droppableId={rowId.toString()}
-                                addLabel={fieldKey ? `Add to ${fieldKey}` : "Add"}
+                                addLabel={fieldKey ? t("add_to_field", { fieldName: fieldKey }) : t("add_entry")}
                                 size={"small"}
                                 disabled={disabled || !fieldKey}
                                 canAddElements={true}
@@ -370,7 +391,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -386,7 +407,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
-                        placeholder={"key"}
+                        placeholder={t("key")}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
                         size={"medium"}
                         onChange={(event) => {
@@ -404,17 +425,17 @@ function MapKeyValueRow<T extends Record<string, any>>({
                         </IconButton>}
                     >
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                                  onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                                  onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                                  onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                                  onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                                  onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                                  onClick={() => doUpdateDataType("array")}>{t("array")}</MenuItem>
                     </Menu>
 
                     <IconButton aria-label="delete"
@@ -446,6 +467,7 @@ function ArrayKeyValueRow<T>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
     const [selectedDataType, setSelectedDataType] = useState<DataType>(getDataType(value) ?? "string");
 
     function doUpdateDataType(dataType: DataType) {
@@ -487,7 +509,7 @@ function ArrayKeyValueRow<T>({
                                            }}/>;
         } else if (dataType === "array") {
             return <Typography variant={"caption"}>
-                Arrays of arrays are not supported.
+                {t("arrays_of_arrays_not_supported")}
             </Typography>;
         } else if (dataType === "map") {
             return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
@@ -499,7 +521,7 @@ function ArrayKeyValueRow<T>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -519,15 +541,15 @@ function ArrayKeyValueRow<T>({
                         <ArrowDropDownIcon/>
                     </IconButton>}>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                              onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                              onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                              onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                              onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                              onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                 </Menu>
 
             </Typography>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -6,7 +6,8 @@ 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";
 
 /**
  * Field that renders the children property fields
@@ -27,7 +28,8 @@ export function MapFieldBinding({
     includeDescription,
     autoFocus,
     context,
-    onPropertyChange
+    onPropertyChange,
+    setValue
 }: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
@@ -91,7 +93,7 @@ export function MapFieldBinding({
             }
         </div>
 
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value, t)}*/}
 
     </>
         ;
@@ -107,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>}
 
@@ -128,7 +144,7 @@ export function MapFieldBinding({
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
+const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any, t: any) => {
 
     const keys = Object.keys(properties)
         .filter((key) => !value || !(key in value));
@@ -143,7 +159,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
     if (!keys.length) return <></>;
 
     return <div className={"m-4"}>
-        <InputLabel>Add property</InputLabel>
+        <InputLabel>{t("add_property")}</InputLabel>
         <Select
             value={""}
             size={"large"}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -11,9 +11,14 @@ import {
     useAuthController,
     useStorageSource
 } from "../../index";
-import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
-import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
+import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, IconButton, CloseIcon } from "@firecms/ui";
+import type { FireCMSEditorProps } from "../../editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
+import { isImageFile, resizeImage } from "../../util/useStorageUploadController";
+import { lazyEager } from "../../util/lazy_eager";
+import { CircularProgressCenter } from "../../components/CircularProgressCenter";
+
+const FireCMSEditor = lazyEager<typeof import("../../editor/editor")["FireCMSEditor"]>(() => import("../../editor/editor"), "FireCMSEditor");
 
 interface MarkdownEditorFieldProps {
     highlight?: { from: number, to: number };
@@ -50,17 +55,17 @@ export function MarkdownEditorFieldBinding({
     const internalValue = useRef<string | null>(value);
 
     const onContentChange = useCallback((content: string) => {
-        if (content === value || (value === null && content === "")) {
+        if (content === value || ((value === null || value === undefined) && content === "")) {
             return;
         }
         internalValue.current = content;
         setValue(content);
-    }, [setValue]);
+    }, [setValue, value]);
 
     useEffect(() => {
         if (internalValue.current !== value) {
             internalValue.current = value;
-            setFieldVersion(fieldVersion + 1);
+            setFieldVersion(v => v + 1);
         }
     }, [value]);
 
@@ -112,42 +117,74 @@ export function MarkdownEditorFieldBinding({
     // Extract markdown config from property - can be boolean or object
     const markdownConfig = typeof property.markdown === 'object' ? property.markdown : undefined;
 
-    const editor = <FireCMSEditor
-        content={value}
-        onMarkdownContentChange={onContentChange}
-        version={context.formex.version + fieldVersion}
-        highlight={highlight}
-        disabled={disabled}
-        markdownConfig={markdownConfig}
-        handleImageUpload={async (file: File) => {
-            const storagePath = storagePathBuilder(file);
-            const fileName = await fileNameBuilder(file);
-            const result = await storageSource.uploadFile({
-                file,
-                fileName,
-                path: storagePath,
-            });
-            const downloadConfig = await storageSource.getDownloadURL(result.path);
-            const url = downloadConfig.url;
-            if (!url) {
-                throw new Error("Error uploading image");
-            }
-            return url;
-        }}
-        {...editorProps}
-    />;
+    const handleImageUpload = async (file: File) => {
+        const imageResize = storage?.imageResize;
+        const legacyCompression = storage?.imageCompression;
+        if ((imageResize || legacyCompression) && isImageFile(file)) {
+            file = await resizeImage(file, imageResize, legacyCompression);
+        }
+
+        const storagePath = storagePathBuilder(file);
+        const fileName = await fileNameBuilder(file);
+        const result = await storageSource.uploadFile({
+            file,
+            fileName,
+            path: storagePath,
+        });
+        const downloadConfig = await storageSource.getDownloadURL(result.path);
+        const url = downloadConfig.url;
+        if (!url) {
+            throw new Error("Error uploading image");
+        }
+        return url;
+    };
+
+    const editor = (
+        <React.Suspense fallback={<CircularProgressCenter />}>
+            <FireCMSEditor
+                key={context.formex.version + fieldVersion}
+                content={value}
+                onMarkdownContentChange={onContentChange}
+                version={context.formex.version + fieldVersion}
+                highlight={highlight}
+                disabled={disabled}
+                markdownConfig={markdownConfig}
+                handleImageUpload={handleImageUpload}
+                {...editorProps}
+            />
+        </React.Suspense>
+    );
 
     if (minimalistView)
-        return editor;
+        return (
+            <>
+                {editor}
+            </>
+        );
 
     return (
         <>
-            <LabelWithIconAndTooltip
-                propertyKey={propertyKey}
-                icon={getIconForProperty(property, "small")}
-                required={property.validation?.required}
-                title={property.name}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
+            <div className="flex items-center w-full">
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
+                <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>
             <div
                 className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -4,7 +4,7 @@ import { EnumType, FieldProps, ResolvedProperty } from "../../types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
-import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
+import { CloseIcon, MultiSelect, MultiSelectItem, IconButton } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -93,6 +93,20 @@ export function MultiSelectFieldBinding({
                     required={property.validation?.required}
                     title={property.name}
                     className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                endAdornment={
+                    (property.nullable || property.clearable) && !disabled && value !== null && value !== undefined ? (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    ) : undefined
+                }
                 onValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;
                     if (of && (of as ResolvedProperty)?.dataType === "number") {

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -8,7 +8,7 @@ import { ReferencePreview } from "../../preview";
 import { getIconForProperty, IconForView } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { EntityPreviewContainer } from "../../components/EntityPreview";
-import { cls } from "@firecms/ui";
+import { cls, IconButton, CloseIcon } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog and stores the entity ID as a string.
@@ -98,16 +98,30 @@ function ReferenceAsStringFieldBindingInternal({
 
             {collection && <>
 
-                {referenceValue && <ReferencePreview
-                    disabled={!path}
-                    previewProperties={property.reference?.previewProperties}
-                    hover={!disabled}
-                    size={size}
-                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
-                    reference={referenceValue}
-                    includeEntityLink={property.reference?.includeEntityLink}
-                    includeId={property.reference?.includeId}
-                />}
+                {referenceValue && <div className="flex items-center gap-2">
+                    <ReferencePreview
+                        disabled={!path}
+                        previewProperties={property.reference?.previewProperties}
+                        hover={!disabled}
+                        size={size}
+                        onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                        reference={referenceValue}
+                        includeEntityLink={property.reference?.includeEntityLink}
+                        includeId={property.reference?.includeId}
+                    />
+                    {(property.nullable || property.clearable) && !disabled && (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    )}
+                </div>}
 
                 {!value && <div className="justify-center text-left">
                     <EntityPreviewContainer

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -9,7 +9,7 @@ import { EmptyValue, ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom, IconForView } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { EntityPreviewContainer } from "../../components/EntityPreview";
-import { cls } from "@firecms/ui";
+import { cls, IconButton, CloseIcon } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog.
@@ -97,16 +97,30 @@ function ReferenceFieldBindingInternal({
 
             {collection && <>
 
-                {value && <ReferencePreview
-                    disabled={!property.path}
-                    previewProperties={property.previewProperties}
-                    hover={!disabled}
-                    size={size}
-                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
-                    reference={value}
-                    includeEntityLink={property.includeEntityLink}
-                    includeId={property.includeId}
-                />}
+                {value && <div className="flex items-center gap-2">
+                    <ReferencePreview
+                        disabled={!property.path}
+                        previewProperties={property.previewProperties}
+                        hover={!disabled}
+                        size={size}
+                        onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                        reference={value}
+                        includeEntityLink={property.includeEntityLink}
+                        includeId={property.includeId}
+                    />
+                    {(property.nullable || property.clearable) && !disabled && (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    )}
+                </div>}
 
                 {!value && <div className="justify-center text-left">
                     <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -4,9 +4,10 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams, ErrorBoundary } from "../../components";
 import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty, mergeDeep } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel, Typography } from "@firecms/ui";
+import { ExpandablePanel, Typography, IconButton, CloseIcon } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "../../hooks";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -34,6 +35,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
 
     const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
 
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
@@ -87,7 +89,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
     const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
     const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
-                                           addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                           addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                            value={value}
                                            buildEntry={buildEntry}
                                            onInternalIdAdded={setLastAddedId}
@@ -99,15 +101,28 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                            className={property.widthPercentage !== undefined ? "mt-8" : undefined}
     />;
 
-    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>);
 
     return (
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -66,11 +66,13 @@ export function SelectFieldBinding<T extends EnumType>({
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={
-                    property.clearable && !disabled && <IconButton
-                        size="small"
-                        onClick={handleClearClick}>
-                        <CloseIcon size={"small"}/>
-                    </IconButton>
+                    (property.nullable || property.clearable) && !disabled && value !== null && value !== undefined ? (
+                        <IconButton
+                            size="small"
+                            onClick={handleClearClick}>
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    ) : undefined
                 }
                 onValueChange={(updatedValue: string) => {
                     const newValue = updatedValue