@firecms/core 3.0.0-canary.283 → 3.0.0-canary.285

package/dist/index.umd.js

@@ -9754,27 +9754,6 @@
     }
     return value;
   }
-  if (isLocalStorageAvailable) {
-    try {
-      for (let i = 0; i < localStorage.length; i++) {
-        const fullKey = localStorage.key(i);
-        if (fullKey && fullKey.startsWith(LOCAL_STORAGE_PREFIX)) {
-          const path = fullKey.substring(LOCAL_STORAGE_PREFIX.length);
-          const entityString = localStorage.getItem(fullKey);
-          if (entityString) {
-            try {
-              const entity = JSON.parse(entityString, customReviver);
-              entityCache.set(path, entity);
-            } catch (parseError) {
-              console.error(`Failed to parse entity for path "${path}" from localStorage:`, parseError);
-            }
-          }
-        }
-      }
-    } catch (error) {
-      console.error("Error accessing localStorage during initialization:", error);
-    }
-  }
   function saveEntityToCache(path, data) {
     entityCache.set(path, data);
     if (isLocalStorageAvailable) {
@@ -9787,11 +9766,11 @@
       }
     }
   }
-  function getEntityFromCache(path) {
+  function getEntityFromCache(path, useLocalStorage = true) {
     if (entityCache.has(path)) {
       return entityCache.get(path);
     }
-    if (isLocalStorageAvailable) {
+    if (isLocalStorageAvailable && useLocalStorage) {
       try {
         const key = LOCAL_STORAGE_PREFIX + path;
         const entityString = localStorage.getItem(key);
@@ -14987,61 +14966,60 @@
     ] });
   }
   const ErrorFocus = (t0) => {
-    const $ = reactCompilerRuntime.c(6);
+    const $ = reactCompilerRuntime.c(10);
     const {
       containerRef
     } = t0;
     const {
-      isSubmitting,
       isValidating,
-      errors
+      errors,
+      version
     } = formex.useFormex();
+    const prevVersion = React.useRef(version);
     let t1;
-    let t2;
-    if ($[0] !== containerRef || $[1] !== errors || $[2] !== isSubmitting || $[3] !== isValidating) {
+    if ($[0] !== containerRef?.current || $[1] !== errors || $[2] !== isValidating || $[3] !== version) {
       t1 = () => {
+        if (version === prevVersion.current) {
+          return;
+        }
         const keys = Object.keys(errors);
-        if (keys.length > 0 && isSubmitting && !isValidating) {
+        if (!isValidating && keys.length > 0) {
           const errorElement = containerRef?.current?.querySelector(`#form_field_${keys[0]}`);
-          if (errorElement && containerRef?.current) {
-            const scrollableParent = getScrollableParent(containerRef.current);
-            if (scrollableParent) {
-              const top = errorElement.getBoundingClientRect().top;
-              scrollableParent.scrollTo({
-                top: scrollableParent.scrollTop + top - 196,
-                behavior: "smooth"
-              });
-            }
+          if (errorElement) {
+            errorElement.scrollIntoView({
+              behavior: "smooth",
+              block: "center"
+            });
             const input = errorElement.querySelector("input");
             if (input) {
               input.focus();
             }
           }
+          prevVersion.current = version;
         }
       };
-      t2 = [isSubmitting, isValidating, errors, containerRef];
-      $[0] = containerRef;
+      $[0] = containerRef?.current;
       $[1] = errors;
-      $[2] = isSubmitting;
-      $[3] = isValidating;
+      $[2] = isValidating;
+      $[3] = version;
       $[4] = t1;
-      $[5] = t2;
     } else {
       t1 = $[4];
-      t2 = $[5];
+    }
+    let t2;
+    if ($[5] !== containerRef || $[6] !== errors || $[7] !== isValidating || $[8] !== version) {
+      t2 = [isValidating, errors, containerRef, version];
+      $[5] = containerRef;
+      $[6] = errors;
+      $[7] = isValidating;
+      $[8] = version;
+      $[9] = t2;
+    } else {
+      t2 = $[9];
     }
     React.useEffect(t1, t2);
     return null;
   };
-  const isScrollable = (ele) => {
-    const hasScrollableContent = ele && ele.scrollHeight > ele.clientHeight;
-    const overflowYStyle = ele ? window.getComputedStyle(ele).overflowY : null;
-    const isOverflowHidden = overflowYStyle && overflowYStyle.indexOf("hidden") !== -1;
-    return hasScrollableContent && !isOverflowHidden;
-  };
-  const getScrollableParent = (ele) => {
-    return !ele || ele === document.body ? document.body : isScrollable(ele) ? ele : getScrollableParent(ele.parentNode);
-  };
   function EntityFormActions(t0) {
     const $ = reactCompilerRuntime.c(16);
     const {
@@ -15062,7 +15040,7 @@
     const context = useFireCMSContext();
     const sideEntityController = useSideEntityController();
     let t1;
-    if ($[0] !== collection || $[1] !== context || $[2] !== disabled || $[3] !== entity || $[4] !== formContext || $[5] !== formex2.isSubmitting || $[6] !== fullIdPath || $[7] !== fullPath || $[8] !== layout || $[9] !== navigateBack || $[10] !== openEntityMode || $[11] !== pluginActions || $[12] !== savingError || $[13] !== sideEntityController || $[14] !== status) {
+    if ($[0] !== collection || $[1] !== context || $[2] !== disabled || $[3] !== entity || $[4] !== formContext || $[5] !== formex2 || $[6] !== fullIdPath || $[7] !== fullPath || $[8] !== layout || $[9] !== navigateBack || $[10] !== openEntityMode || $[11] !== pluginActions || $[12] !== savingError || $[13] !== sideEntityController || $[14] !== status) {
       t1 = layout === "bottom" ? buildBottomActions$1({
         fullPath,
         fullIdPath,
@@ -15071,13 +15049,13 @@
         collection,
         context,
         sideEntityController,
-        isSubmitting: formex2.isSubmitting,
         disabled,
         status,
         pluginActions,
         openEntityMode,
         navigateBack,
-        formContext
+        formContext,
+        formex: formex2
       }) : buildSideActions$1({
         fullPath,
         fullIdPath,
@@ -15086,18 +15064,18 @@
         collection,
         context,
         sideEntityController,
-        isSubmitting: formex2.isSubmitting,
         disabled,
         status,
         pluginActions,
-        openEntityMode
+        openEntityMode,
+        formex: formex2
       });
       $[0] = collection;
       $[1] = context;
       $[2] = disabled;
       $[3] = entity;
       $[4] = formContext;
-      $[5] = formex2.isSubmitting;
+      $[5] = formex2;
       $[6] = fullIdPath;
       $[7] = fullPath;
       $[8] = layout;
@@ -15122,14 +15100,15 @@
     collection,
     context,
     sideEntityController,
-    isSubmitting,
     disabled,
     status,
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    formex: formex2
   }) {
+    const hasErrors = Object.keys(formex2.errors).length > 0 && formex2.submitCount > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
       savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) }),
       entity && (formActions ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: (formActions ?? []).map((action) => /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", onClick: (event) => {
@@ -15148,8 +15127,8 @@
         });
       }, children: action.icon }, action.name)) }),
       pluginActions,
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", disabled: disabled || isSubmitting, color: "primary", type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", disabled: disabled || formex2.isSubmitting, color: "primary", type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "filled", color: "primary", type: "submit", disabled: disabled || formex2.isSubmitting, startIcon: hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, {}) : void 0, children: [
         status === "existing" && "Save",
         status === "copy" && "Create copy",
         status === "new" && "Create"
@@ -15166,22 +15145,35 @@
     collection,
     context,
     sideEntityController,
-    isSubmitting,
     disabled,
     status,
-    pluginActions
+    pluginActions,
+    formex: formex2
   }) {
+    const hasErrors = Object.keys(formex2.errors).length > 0 && formex2.submitCount > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", ui.defaultBorderMixin), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", disabled: disabled || isSubmitting, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", startIcon: hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, {}) : void 0, disabled: disabled || formex2.isSubmitting, children: [
         status === "existing" && "Save",
         status === "copy" && "Create copy",
         status === "new" && "Create"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || formex2.isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
       pluginActions,
       savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) })
     ] });
   }
+  function extractTouchedValues(values, touched) {
+    let acc = {};
+    if (!touched || typeof touched !== "object") {
+      return acc;
+    }
+    Object.entries(touched).forEach(([key, value]) => {
+      if (value) {
+        acc = formex.setIn(acc, key, formex.getIn(values, key));
+      }
+    });
+    return acc;
+  }
   function EntityForm({
     path,
     fullIdPath,
@@ -15239,7 +15231,7 @@
     const customizationController = useCustomizationController();
     const context = useFireCMSContext();
     const analyticsController = useAnalyticsController();
-    const [underlyingChanges, setUnderlyingChanges] = React.useState({});
+    const [underlyingChanges] = React.useState({});
     const [customIdLoading, setCustomIdLoading] = React.useState(false);
     const mustSetCustomId = (status === "new" || status === "copy") && Boolean(collection.customId) && collection.customId !== "optional";
     const initialEntityId = React.useMemo(() => {
@@ -15287,16 +15279,30 @@
         formexController.setSubmitting(false);
       });
     };
+    const baseInitialValues = getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs);
+    const initialValues = initialDirtyValues ? mergeDeep(baseInitialValues, initialDirtyValues) : baseInitialValues;
+    const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
     const formex$1 = formexProp ?? formex.useCreateFormex({
-      initialValues: initialDirtyValues ?? getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs),
-      initialDirty: Boolean(initialDirtyValues),
+      initialValues,
+      initialDirty,
+      initialTouched: initialDirtyValues ? formex.flattenKeys(initialDirtyValues).reduce((previousValue, currentValue) => ({
+        ...previousValue,
+        [currentValue]: true
+      }), {}) : {},
       onSubmit,
       onReset: () => {
         clearDirtyCache();
         onValuesModified?.(false);
       },
-      validation: (values_0) => {
-        return validationSchema?.validate(values_0, {
+      onValuesChangeDeferred: (values_0, controller) => {
+        const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
+        if (controller.dirty) {
+          const touchedValues = extractTouchedValues(values_0, controller.touched);
+          saveEntityToCache(key, touchedValues);
+        }
+      },
+      validation: (values_1) => {
+        return validationSchema?.validate(values_1, {
           abortEarly: false
         }).then(() => {
           return {};
@@ -15379,7 +15385,7 @@
       console.error(e_3);
     }, [entityId, path, snackbarController]);
     const saveEntity = ({
-      values: values_1,
+      values: values_2,
       previousValues,
       entityId: entityId_0,
       collection: collection_0,
@@ -15388,7 +15394,7 @@
       return saveEntityWithCallbacks({
         path: path_0,
         entityId: entityId_0,
-        values: values_1,
+        values: values_2,
         previousValues,
         collection: collection_0,
         status,
@@ -15404,34 +15410,34 @@
       collection: collection_1,
       path: path_1,
       entityId: entityId_1,
-      values: values_2,
+      values: values_3,
       previousValues: previousValues_0,
       autoSave: autoSave_0
     }) => {
       if (!status) return;
       if (autoSave_0) {
-        setValuesToBeSaved(values_2);
+        setValuesToBeSaved(values_3);
       } else {
         return saveEntity({
           collection: collection_1,
           path: path_1,
           entityId: entityId_1,
-          values: values_2,
+          values: values_3,
           previousValues: previousValues_0
         });
       }
     };
     const lastSavedValues = React.useRef(entity?.values);
-    const save = (values_3) => {
-      lastSavedValues.current = values_3;
+    const save = (values_4) => {
+      lastSavedValues.current = values_4;
       return onSaveEntityRequest({
         collection: resolvedCollection,
         path,
         entityId,
-        values: values_3,
+        values: values_4,
         previousValues: entity?.values,
         autoSave: autoSave ?? false
-      }).then((res) => {
+      }).then(() => {
         const eventName = status === "new" ? "new_entity_saved" : status === "copy" ? "entity_copied" : status === "existing" ? "entity_edited" : "unmapped_event";
         analyticsController.onAnalyticsEvent?.(eventName, {
           path
@@ -15465,7 +15471,8 @@
         type: "error",
         message: "Error updating id, check the console"
       });
-    }, []);
+      console.error(error);
+    }, [snackbarController]);
     const pluginActions = [];
     const plugins = customizationController.plugins;
     const actionsDisabled = disabled || formex$1.isSubmitting || status === "existing" && !formex$1.dirty || Boolean(disabledProp);
@@ -15514,20 +15521,12 @@
         onValuesModified?.(modified);
       }
     }, [formex$1.dirty]);
-    const deferredValues = React.useDeferredValue(formex$1.values);
     const modified = formex$1.dirty;
     const uniqueFieldValidator = React.useCallback(({
       name,
-      value,
-      property
+      value
     }) => dataSource.checkUniqueField(path, name, value, entityId, collection), [dataSource, path, entityId]);
     const validationSchema = React.useMemo(() => entityId ? getYupEntitySchema(entityId, resolvedCollection.properties, uniqueFieldValidator) : void 0, [entityId, resolvedCollection.properties, uniqueFieldValidator]);
-    React.useEffect(() => {
-      const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
-      if (modified) {
-        saveEntityToCache(key, deferredValues);
-      }
-    }, [deferredValues, modified, path, entityId, status]);
     useOnAutoSave(autoSave, formex$1, lastSavedValues, save);
     React.useEffect(() => {
       if (!autoSave && !formex$1.isSubmitting && underlyingChanges && entity) {
@@ -15546,18 +15545,18 @@
         return /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity, modifiedValues: formex$1.values, formContext });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { children: formFieldKeys.map((key_1) => {
-        const property_0 = resolvedCollection.properties[key_1];
-        if (property_0) {
+        const property = resolvedCollection.properties[key_1];
+        if (property) {
           const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex$1.touched[key_1];
-          const disabled_0 = disabledProp || !autoSave && formex$1.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
-          const hidden = isHidden(property_0);
+          const disabled_0 = disabledProp || !autoSave && formex$1.isSubmitting || isReadOnly(property) || Boolean(property.disabled);
+          const hidden = isHidden(property);
           if (hidden) return null;
-          const widthPercentage = property_0.widthPercentage ?? 100;
+          const widthPercentage = property.widthPercentage ?? 100;
           const cmsFormFieldProps = {
             propertyKey: key_1,
             disabled: disabled_0,
-            property: property_0,
-            includeDescription: property_0.description || property_0.longDescription,
+            property,
+            includeDescription: property.description || property.longDescription,
             underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
             context: formContext,
             partOfArray: false,
@@ -15613,7 +15612,7 @@
     }
     const dialogActions = /* @__PURE__ */ jsxRuntime.jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, fullPath: path, fullIdPath, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex: formex$1, disabled: actionsDisabled, status, pluginActions: pluginActions ?? [], openEntityMode, showDefaultActions, navigateBack, formContext });
     return /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: formex$1.handleSubmit, onReset: () => formex$1.resetForm({
-      values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)
+      values: baseInitialValues
     }), noValidate: true, className: ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { id: `form_${path}`, className: ui.cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
         formex$1.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Local unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) }),
@@ -22826,14 +22825,14 @@
       collection,
       context,
       sideEntityController,
-      isSubmitting: formex2.isSubmitting,
       disabled,
       status,
       sideDialogContext,
       pluginActions,
       openEntityMode,
       navigateBack,
-      formContext
+      formContext,
+      formex: formex2
     }) : buildSideActions({
       savingError,
       entity,
@@ -22841,14 +22840,14 @@
       collection,
       context,
       sideEntityController,
-      isSubmitting: formex2.isSubmitting,
       sideDialogContext,
       disabled,
       status,
       pluginActions,
       openEntityMode,
       navigateBack,
-      formContext
+      formContext,
+      formex: formex2
     });
   }
   function buildBottomActions({
@@ -22858,15 +22857,16 @@
     collection,
     context,
     sideEntityController,
-    isSubmitting,
     disabled,
     status,
     sideDialogContext,
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    formex: formex2
   }) {
+    const hasErrors = Object.keys(formex2.errors).length > 0 && formex2.submitCount > 0;
     const canClose = openEntityMode === "side_panel";
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
       savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) }),
@@ -22886,15 +22886,16 @@
         return /* @__PURE__ */ jsxRuntime.jsx(EntityActionButton, { action, enabled: isEnabled, props }, action.key);
       }) }),
       pluginActions,
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: canClose ? "text" : "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, onClick: () => {
+      hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(ErrorTooltip, { title: "This form has errors", children: /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, { className: "ml-4", color: "error", size: "smallest" }) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", disabled: disabled || formex2.isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: canClose ? "text" : "filled", color: "primary", type: "submit", disabled: disabled || formex2.isSubmitting, onClick: () => {
         sideDialogContext.setPendingClose(false);
       }, children: [
         status === "existing" && "Save",
         status === "copy" && "Create copy",
         status === "new" && "Create"
       ] }),
-      canClose && /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled, onClick: () => {
+      canClose && /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: formex2.isSubmitting, disabled, onClick: () => {
         sideDialogContext.setPendingClose?.(true);
       }, children: [
         status === "existing" && "Save and close",
@@ -22910,24 +22911,25 @@
     collection,
     context,
     sideEntityController,
-    isSubmitting,
     disabled,
     status,
     sideDialogContext,
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    formex: formex2
   }) {
+    const hasErrors = Object.keys(formex2.errors).length > 0 && formex2.submitCount > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", ui.defaultBorderMixin), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", disabled: disabled || isSubmitting, onClick: () => {
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", startIcon: hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, {}) : void 0, disabled: disabled || formex2.isSubmitting, onClick: () => {
         sideDialogContext.setPendingClose?.(false);
       }, children: [
         status === "existing" && "Save",
         status === "copy" && "Create copy",
         status === "new" && "Create"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || formex2.isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
       pluginActions,
       formActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row flex-wrap mt-2", children: formActions.map((action) => {
         const props = {
@@ -23155,7 +23157,8 @@
       databaseId: props.databaseId,
       useCache: false
     });
-    const cachedValues = entityId ? getEntityFromCache(props.path + "/" + entityId) : getEntityFromCache(props.path + "#new");
+    const enableLocalChangesBackup = props.collection.enableLocalChangesBackup !== void 0 ? props.collection.enableLocalChangesBackup : true;
+    const initialDirtyValues = entityId ? getEntityFromCache(props.path + "/" + entityId, enableLocalChangesBackup) : getEntityFromCache(props.path + "#new", enableLocalChangesBackup);
     const authController = useAuthController();
     const initialStatus = props.copy ? "copy" : entityId ? "existing" : "new";
     const [status, setStatus] = React.useState(initialStatus);
@@ -23166,13 +23169,13 @@
         return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null) : void 0;
       }
     }, [authController, entity, status]);
-    if (dataLoading && !cachedValues || (!entity || canEdit === void 0) && (status === "existing" || status === "copy")) {
+    if (dataLoading && !initialDirtyValues || (!entity || canEdit === void 0) && (status === "existing" || status === "copy")) {
       return /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {});
     }
-    if (entityId && !entity && !cachedValues) {
+    if (entityId && !entity && !initialDirtyValues) {
       console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(EntityEditViewInner, { ...props, entityId, entity, cachedDirtyValues: cachedValues, dataLoading, status, setStatus, canEdit });
+    return /* @__PURE__ */ jsxRuntime.jsx(EntityEditViewInner, { ...props, entityId, entity, initialDirtyValues, dataLoading, status, setStatus, canEdit });
   }
   function EntityEditViewInner({
     path,
@@ -23185,7 +23188,7 @@
     onSaved,
     onTabChange,
     entity,
-    cachedDirtyValues,
+    initialDirtyValues,
     dataLoading,
     layout = "side_panel",
     barActions,
@@ -23313,7 +23316,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16" })
     ] }) }) : null;
-    const entityView = /* @__PURE__ */ jsxRuntime.jsx(EntityForm, { fullIdPath, collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: ui.cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
+    const entityView = /* @__PURE__ */ jsxRuntime.jsx(EntityForm, { fullIdPath, collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: ui.cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
       setUsedEntity(entity_0);
       formProps?.onEntityChange?.(entity_0);
     }, onStatusChange: (status_0) => {