@firecms/core 3.0.0-canary.282 → 3.0.0-canary.284

package/dist/index.umd.js

@@ -5848,7 +5848,7 @@
     }
     let t3;
     if ($[11] !== t2) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: t2 });
+      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col gap-2", children: t2 });
       $[11] = t2;
       $[12] = t3;
     } else {
@@ -6829,7 +6829,7 @@
     if (!user) {
       let t12;
       if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t12 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-secondary dark:text-text-secondary-dark", children: "Select a user" });
+        t12 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
         $[0] = t12;
       } else {
         t12 = $[0];
@@ -6905,7 +6905,7 @@
     return t8;
   }
   function UserPreview(t0) {
-    const $ = reactCompilerRuntime.c(5);
+    const $ = reactCompilerRuntime.c(8);
     const {
       value
     } = t0;
@@ -6913,25 +6913,46 @@
       getUser
     } = useInternalUserManagementController();
     if (!value) {
-      return null;
+      let t12;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t12 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
+        $[0] = t12;
+      } else {
+        t12 = $[0];
+      }
+      return t12;
     }
     let t1;
-    if ($[0] !== getUser || $[1] !== value) {
+    if ($[1] !== getUser || $[2] !== value) {
       t1 = getUser(value);
-      $[0] = getUser;
-      $[1] = value;
-      $[2] = t1;
+      $[1] = getUser;
+      $[2] = value;
+      $[3] = t1;
     } else {
-      t1 = $[2];
+      t1 = $[3];
     }
     const user = t1;
+    if (!user) {
+      let t22;
+      if ($[4] !== value) {
+        t22 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", color: "secondary", children: [
+          "User not found: ",
+          value
+        ] });
+        $[4] = value;
+        $[5] = t22;
+      } else {
+        t22 = $[5];
+      }
+      return t22;
+    }
     let t2;
-    if ($[3] !== user) {
+    if ($[6] !== user) {
       t2 = /* @__PURE__ */ jsxRuntime.jsx(UserDisplay, { user });
-      $[3] = user;
-      $[4] = t2;
+      $[6] = user;
+      $[7] = t2;
     } else {
-      t2 = $[4];
+      t2 = $[7];
     }
     return t2;
   }
@@ -14966,61 +14987,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 {
@@ -15041,7 +15061,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,
@@ -15050,13 +15070,13 @@
         collection,
         context,
         sideEntityController,
-        isSubmitting: formex2.isSubmitting,
         disabled,
         status,
         pluginActions,
         openEntityMode,
         navigateBack,
-        formContext
+        formContext,
+        formex: formex2
       }) : buildSideActions$1({
         fullPath,
         fullIdPath,
@@ -15065,18 +15085,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;
@@ -15101,14 +15121,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) => {
@@ -15127,8 +15148,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"
@@ -15145,22 +15166,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,
@@ -15218,7 +15252,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(() => {
@@ -15266,16 +15300,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 {};
@@ -15358,7 +15406,7 @@
       console.error(e_3);
     }, [entityId, path, snackbarController]);
     const saveEntity = ({
-      values: values_1,
+      values: values_2,
       previousValues,
       entityId: entityId_0,
       collection: collection_0,
@@ -15367,7 +15415,7 @@
       return saveEntityWithCallbacks({
         path: path_0,
         entityId: entityId_0,
-        values: values_1,
+        values: values_2,
         previousValues,
         collection: collection_0,
         status,
@@ -15383,34 +15431,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
@@ -15444,7 +15492,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);
@@ -15493,20 +15542,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) {
@@ -15525,18 +15566,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,
@@ -15592,7 +15633,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" }) }) }),
@@ -17776,6 +17817,13 @@
     } = t0;
     const authController = useAuthController();
     const customizationController = useCustomizationController();
+    if (propertyKey === "created_by") {
+      console.log("Rendering field for created_by", {
+        propertyKey,
+        property,
+        context
+      });
+    }
     let t1;
     if ($[0] !== authController || $[1] !== autoFocus || $[2] !== context || $[3] !== customizationController.propertyConfigs || $[4] !== disabledProp || $[5] !== includeDescription || $[6] !== index || $[7] !== minimalistView || $[8] !== onPropertyChange || $[9] !== partOfArray || $[10] !== property || $[11] !== propertyKey || $[12] !== size || $[13] !== underlyingValueHasChanged) {
       t1 = (fieldProps) => {
@@ -20640,7 +20688,7 @@
       propertyConfig,
       disabled
     } = t0;
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
+    const classes = "h-8 w-8 flex items-center justify-center rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
     let t1;
     if ($[0] !== classes || $[1] !== disabled || $[2] !== propertyConfig) {
       const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : void 0;
@@ -20655,7 +20703,7 @@
       } else {
         t3 = $[5];
       }
-      t1 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, style: t3, children: propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium") });
+      t1 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, style: t3, children: propertyConfig?.Icon ? getIconForWidget(propertyConfig, "small") : getIconForWidget(defaultPropertyConfig, "small") });
       $[0] = classes;
       $[1] = disabled;
       $[2] = propertyConfig;
@@ -21991,7 +22039,8 @@
     }, []);
     const isUrlCollectionPath = React.useCallback((path_1) => removeInitialAndTrailingSlashes(path_1 + "/").startsWith(removeInitialAndTrailingSlashes(fullCollectionPath) + "/"), [fullCollectionPath]);
     const urlPathToDataPath = React.useCallback((path_2) => {
-      if (path_2.startsWith(fullCollectionPath)) return path_2.replace(fullCollectionPath, "");
+      const decodedPath = decodeURIComponent(path_2);
+      if (decodedPath.startsWith(fullCollectionPath)) return decodedPath.replace(fullCollectionPath, "");
       throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
     const resolveIdsFrom = React.useCallback((path_3) => {
@@ -22797,14 +22846,14 @@
       collection,
       context,
       sideEntityController,
-      isSubmitting: formex2.isSubmitting,
       disabled,
       status,
       sideDialogContext,
       pluginActions,
       openEntityMode,
       navigateBack,
-      formContext
+      formContext,
+      formex: formex2
     }) : buildSideActions({
       savingError,
       entity,
@@ -22812,14 +22861,14 @@
       collection,
       context,
       sideEntityController,
-      isSubmitting: formex2.isSubmitting,
       sideDialogContext,
       disabled,
       status,
       pluginActions,
       openEntityMode,
       navigateBack,
-      formContext
+      formContext,
+      formex: formex2
     });
   }
   function buildBottomActions({
@@ -22829,15 +22878,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 }) }),
@@ -22857,15 +22907,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",
@@ -22881,24 +22932,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 = {
@@ -23126,7 +23178,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 = enableLocalChangesBackup ? entityId ? getEntityFromCache(props.path + "/" + entityId) : getEntityFromCache(props.path + "#new") : void 0;
     const authController = useAuthController();
     const initialStatus = props.copy ? "copy" : entityId ? "existing" : "new";
     const [status, setStatus] = React.useState(initialStatus);
@@ -23137,13 +23190,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,
@@ -23156,7 +23209,7 @@
     onSaved,
     onTabChange,
     entity,
-    cachedDirtyValues,
+    initialDirtyValues,
     dataLoading,
     layout = "side_panel",
     barActions,
@@ -23284,7 +23337,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) => {