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

package/dist/index.es.js

@@ -1,11 +1,11 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
-import React__default, { useRef, useEffect, useContext, useCallback, useMemo, useState, createElement, createRef, createContext, forwardRef, useLayoutEffect, useDeferredValue } from "react";
+import React__default, { useRef, useEffect, useContext, useCallback, useMemo, useState, createElement, createRef, createContext, forwardRef, useLayoutEffect } from "react";
 import { getColorSchemeForSeed, CHIP_COLORS, FunctionsIcon, CircleIcon, iconKeys, coolIconKeys, Icon, Tooltip, ErrorIcon, Typography, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, AccountCircleIcon, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MenuItem, MoreVertIcon, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, StarIcon, Collapse, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, Container, LoadingButton, Alert, CheckIcon, NotesIcon, InfoIcon, fieldBackgroundMixin, RemoveIcon, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, ViewStreamIcon, RepeatIcon, BallotIcon, ScheduleIcon, AddLinkIcon, LinkIcon, DriveFolderUploadIcon, UploadFileIcon, FormatListNumberedIcon, NumbersIcon, PersonIcon, ListAltIcon, ListIcon, FlagIcon, MailIcon, HttpIcon, FormatQuoteIcon, SubjectIcon, ShortTextIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
-import { getIn, useFormex, setIn, useCreateFormex, Formex, Field } from "@firecms/formex";
+import { getIn, useFormex, setIn, useCreateFormex, flattenKeys, Formex, Field } from "@firecms/formex";
 import { useNavigate, useLocation, Link, NavLink, Routes, Route, createBrowserRouter, RouterProvider } from "react-router-dom";
 import Fuse from "fuse.js";
 import equal from "react-fast-compare";
@@ -5850,7 +5850,7 @@ function ArrayPropertyPreview(t0) {
   }
   let t3;
   if ($[11] !== t2) {
-    t3 = /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: t2 });
+    t3 = /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-2", children: t2 });
     $[11] = t2;
     $[12] = t3;
   } else {
@@ -6831,7 +6831,7 @@ function UserDisplay(t0) {
   if (!user) {
     let t12;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-      t12 = /* @__PURE__ */ jsx("span", { className: "text-text-secondary dark:text-text-secondary-dark", children: "Select a user" });
+      t12 = /* @__PURE__ */ jsx(EmptyValue, {});
       $[0] = t12;
     } else {
       t12 = $[0];
@@ -6907,7 +6907,7 @@ function UserDisplay(t0) {
   return t8;
 }
 function UserPreview(t0) {
-  const $ = c(5);
+  const $ = c(8);
   const {
     value
   } = t0;
@@ -6915,25 +6915,46 @@ function UserPreview(t0) {
     getUser
   } = useInternalUserManagementController();
   if (!value) {
-    return null;
+    let t12;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ 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__ */ jsxs(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__ */ jsx(UserDisplay, { user });
-    $[3] = user;
-    $[4] = t2;
+    $[6] = user;
+    $[7] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[7];
   }
   return t2;
 }
@@ -14968,61 +14989,60 @@ function CustomIdField({
   ] });
 }
 const ErrorFocus = (t0) => {
-  const $ = c(6);
+  const $ = c(10);
   const {
     containerRef
   } = t0;
   const {
-    isSubmitting,
     isValidating,
-    errors
+    errors,
+    version
   } = useFormex();
+  const prevVersion = 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];
   }
   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 $ = c(16);
   const {
@@ -15043,7 +15063,7 @@ function EntityFormActions(t0) {
   const context = useFireCMSContext();
   const sideEntityController = useSideEntityController();
   let t1;
-  if ($[0] !== collection || $[1] !== context || $[2] !== disabled || $[3] !== entity || $[4] !== formContext || $[5] !== formex.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] !== formex || $[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,
@@ -15052,13 +15072,13 @@ function EntityFormActions(t0) {
       collection,
       context,
       sideEntityController,
-      isSubmitting: formex.isSubmitting,
       disabled,
       status,
       pluginActions,
       openEntityMode,
       navigateBack,
-      formContext
+      formContext,
+      formex
     }) : buildSideActions$1({
       fullPath,
       fullIdPath,
@@ -15067,18 +15087,18 @@ function EntityFormActions(t0) {
       collection,
       context,
       sideEntityController,
-      isSubmitting: formex.isSubmitting,
       disabled,
       status,
       pluginActions,
-      openEntityMode
+      openEntityMode,
+      formex
     });
     $[0] = collection;
     $[1] = context;
     $[2] = disabled;
     $[3] = entity;
     $[4] = formContext;
-    $[5] = formex.isSubmitting;
+    $[5] = formex;
     $[6] = fullIdPath;
     $[7] = fullPath;
     $[8] = layout;
@@ -15103,14 +15123,15 @@ function buildBottomActions$1({
   collection,
   context,
   sideEntityController,
-  isSubmitting,
   disabled,
   status,
   pluginActions,
   openEntityMode,
   navigateBack,
-  formContext
+  formContext,
+  formex
 }) {
+  const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
   return /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message }) }),
     entity && (formActions ?? []).length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: (formActions ?? []).map((action) => /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: (event) => {
@@ -15129,8 +15150,8 @@ function buildBottomActions$1({
       });
     }, children: action.icon }, action.name)) }),
     pluginActions,
-    /* @__PURE__ */ jsx(Button, { variant: "text", disabled: disabled || isSubmitting, color: "primary", type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
-    /* @__PURE__ */ jsxs(Button, { variant: "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, children: [
+    /* @__PURE__ */ jsx(Button, { variant: "text", disabled: disabled || formex.isSubmitting, color: "primary", type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+    /* @__PURE__ */ jsxs(Button, { variant: "filled", color: "primary", type: "submit", disabled: disabled || formex.isSubmitting, startIcon: hasErrors ? /* @__PURE__ */ jsx(ErrorIcon, {}) : void 0, children: [
       status === "existing" && "Save",
       status === "copy" && "Create copy",
       status === "new" && "Create"
@@ -15147,22 +15168,35 @@ function buildSideActions$1({
   collection,
   context,
   sideEntityController,
-  isSubmitting,
   disabled,
   status,
-  pluginActions
+  pluginActions,
+  formex
 }) {
+  const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
   return /* @__PURE__ */ jsxs("div", { className: cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin), children: [
-    /* @__PURE__ */ jsxs(LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", disabled: disabled || isSubmitting, children: [
+    /* @__PURE__ */ jsxs(LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", startIcon: hasErrors ? /* @__PURE__ */ jsx(ErrorIcon, {}) : void 0, disabled: disabled || formex.isSubmitting, children: [
       status === "existing" && "Save",
       status === "copy" && "Create copy",
       status === "new" && "Create"
     ] }),
-    /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+    /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "text", disabled: disabled || formex.isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
     pluginActions,
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(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 = setIn(acc, key, getIn(values, key));
+    }
+  });
+  return acc;
+}
 function EntityForm({
   path,
   fullIdPath,
@@ -15220,7 +15254,7 @@ function EntityForm({
   const customizationController = useCustomizationController();
   const context = useFireCMSContext();
   const analyticsController = useAnalyticsController();
-  const [underlyingChanges, setUnderlyingChanges] = useState({});
+  const [underlyingChanges] = useState({});
   const [customIdLoading, setCustomIdLoading] = useState(false);
   const mustSetCustomId = (status === "new" || status === "copy") && Boolean(collection.customId) && collection.customId !== "optional";
   const initialEntityId = useMemo(() => {
@@ -15268,16 +15302,30 @@ function EntityForm({
       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 = formexProp ?? useCreateFormex({
-    initialValues: initialDirtyValues ?? getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs),
-    initialDirty: Boolean(initialDirtyValues),
+    initialValues,
+    initialDirty,
+    initialTouched: initialDirtyValues ? 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 {};
@@ -15360,7 +15408,7 @@ function EntityForm({
     console.error(e_3);
   }, [entityId, path, snackbarController]);
   const saveEntity = ({
-    values: values_1,
+    values: values_2,
     previousValues,
     entityId: entityId_0,
     collection: collection_0,
@@ -15369,7 +15417,7 @@ function EntityForm({
     return saveEntityWithCallbacks({
       path: path_0,
       entityId: entityId_0,
-      values: values_1,
+      values: values_2,
       previousValues,
       collection: collection_0,
       status,
@@ -15385,34 +15433,34 @@ function EntityForm({
     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 = 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
@@ -15446,7 +15494,8 @@ function EntityForm({
       type: "error",
       message: "Error updating id, check the console"
     });
-  }, []);
+    console.error(error);
+  }, [snackbarController]);
   const pluginActions = [];
   const plugins = customizationController.plugins;
   const actionsDisabled = disabled || formex.isSubmitting || status === "existing" && !formex.dirty || Boolean(disabledProp);
@@ -15495,20 +15544,12 @@ function EntityForm({
       onValuesModified?.(modified);
     }
   }, [formex.dirty]);
-  const deferredValues = useDeferredValue(formex.values);
   const modified = formex.dirty;
   const uniqueFieldValidator = useCallback(({
     name,
-    value,
-    property
+    value
   }) => dataSource.checkUniqueField(path, name, value, entityId, collection), [dataSource, path, entityId]);
   const validationSchema = useMemo(() => entityId ? getYupEntitySchema(entityId, resolvedCollection.properties, uniqueFieldValidator) : void 0, [entityId, resolvedCollection.properties, uniqueFieldValidator]);
-  useEffect(() => {
-    const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
-    if (modified) {
-      saveEntityToCache(key, deferredValues);
-    }
-  }, [deferredValues, modified, path, entityId, status]);
   useOnAutoSave(autoSave, formex, lastSavedValues, save);
   useEffect(() => {
     if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
@@ -15527,18 +15568,18 @@ function EntityForm({
       return /* @__PURE__ */ jsx(Builder, { collection, entity, modifiedValues: formex.values, formContext });
     }
     return /* @__PURE__ */ 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.touched[key_1];
-        const disabled_0 = disabledProp || !autoSave && formex.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
-        const hidden = isHidden(property_0);
+        const disabled_0 = disabledProp || !autoSave && formex.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,
@@ -15594,7 +15635,7 @@ function EntityForm({
   }
   const dialogActions = /* @__PURE__ */ jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, fullPath: path, fullIdPath, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex, disabled: actionsDisabled, status, pluginActions: pluginActions ?? [], openEntityMode, showDefaultActions, navigateBack, formContext });
   return /* @__PURE__ */ jsx(Formex, { value: formex, children: /* @__PURE__ */ jsxs("form", { onSubmit: formex.handleSubmit, onReset: () => formex.resetForm({
-    values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)
+    values: baseInitialValues
   }), noValidate: true, className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
     /* @__PURE__ */ jsx("div", { id: `form_${path}`, className: 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__ */ jsxs("div", { className: cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
       formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "Local unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) }),
@@ -17778,6 +17819,13 @@ function PropertyFieldBindingInternal(t0) {
   } = 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) => {
@@ -20642,7 +20690,7 @@ function PropertyConfigBadge(t0) {
     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;
@@ -20657,7 +20705,7 @@ function PropertyConfigBadge(t0) {
     } else {
       t3 = $[5];
     }
-    t1 = /* @__PURE__ */ jsx("div", { className: classes, style: t3, children: propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium") });
+    t1 = /* @__PURE__ */ jsx("div", { className: classes, style: t3, children: propertyConfig?.Icon ? getIconForWidget(propertyConfig, "small") : getIconForWidget(defaultPropertyConfig, "small") });
     $[0] = classes;
     $[1] = disabled;
     $[2] = propertyConfig;
@@ -21993,7 +22041,8 @@ function useBuildNavigationController(props) {
   }, []);
   const isUrlCollectionPath = useCallback((path_1) => removeInitialAndTrailingSlashes(path_1 + "/").startsWith(removeInitialAndTrailingSlashes(fullCollectionPath) + "/"), [fullCollectionPath]);
   const urlPathToDataPath = 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 = useCallback((path_3) => {
@@ -22799,14 +22848,14 @@ function EntityEditViewFormActions({
     collection,
     context,
     sideEntityController,
-    isSubmitting: formex.isSubmitting,
     disabled,
     status,
     sideDialogContext,
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    formex
   }) : buildSideActions({
     savingError,
     entity,
@@ -22814,14 +22863,14 @@ function EntityEditViewFormActions({
     collection,
     context,
     sideEntityController,
-    isSubmitting: formex.isSubmitting,
     sideDialogContext,
     disabled,
     status,
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    formex
   });
 }
 function buildBottomActions({
@@ -22831,15 +22880,16 @@ function buildBottomActions({
   collection,
   context,
   sideEntityController,
-  isSubmitting,
   disabled,
   status,
   sideDialogContext,
   pluginActions,
   openEntityMode,
   navigateBack,
-  formContext
+  formContext,
+  formex
 }) {
+  const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
   const canClose = openEntityMode === "side_panel";
   return /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message }) }),
@@ -22859,15 +22909,16 @@ function buildBottomActions({
       return /* @__PURE__ */ jsx(EntityActionButton, { action, enabled: isEnabled, props }, action.key);
     }) }),
     pluginActions,
-    /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
-    /* @__PURE__ */ jsxs(Button, { variant: canClose ? "text" : "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, onClick: () => {
+    hasErrors ? /* @__PURE__ */ jsx(ErrorTooltip, { title: "This form has errors", children: /* @__PURE__ */ jsx(ErrorIcon, { className: "ml-4", color: "error", size: "smallest" }) }) : null,
+    /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", disabled: disabled || formex.isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+    /* @__PURE__ */ jsxs(Button, { variant: canClose ? "text" : "filled", color: "primary", type: "submit", disabled: disabled || formex.isSubmitting, onClick: () => {
       sideDialogContext.setPendingClose(false);
     }, children: [
       status === "existing" && "Save",
       status === "copy" && "Create copy",
       status === "new" && "Create"
     ] }),
-    canClose && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled, onClick: () => {
+    canClose && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: formex.isSubmitting, disabled, onClick: () => {
       sideDialogContext.setPendingClose?.(true);
     }, children: [
       status === "existing" && "Save and close",
@@ -22883,24 +22934,25 @@ function buildSideActions({
   collection,
   context,
   sideEntityController,
-  isSubmitting,
   disabled,
   status,
   sideDialogContext,
   pluginActions,
   openEntityMode,
   navigateBack,
-  formContext
+  formContext,
+  formex
 }) {
+  const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
   return /* @__PURE__ */ jsxs("div", { className: cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin), children: [
-    /* @__PURE__ */ jsxs(LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", disabled: disabled || isSubmitting, onClick: () => {
+    /* @__PURE__ */ jsxs(LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", startIcon: hasErrors ? /* @__PURE__ */ jsx(ErrorIcon, {}) : void 0, disabled: disabled || formex.isSubmitting, onClick: () => {
       sideDialogContext.setPendingClose?.(false);
     }, children: [
       status === "existing" && "Save",
       status === "copy" && "Create copy",
       status === "new" && "Create"
     ] }),
-    /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+    /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "text", disabled: disabled || formex.isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
     pluginActions,
     formActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap mt-2", children: formActions.map((action) => {
       const props = {
@@ -23128,7 +23180,8 @@ function EntityEditView({
     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] = useState(initialStatus);
@@ -23139,13 +23192,13 @@ function EntityEditView({
       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__ */ jsx(CircularProgressCenter, {});
   }
-  if (entityId && !entity && !cachedValues) {
+  if (entityId && !entity && !initialDirtyValues) {
     console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
   }
-  return /* @__PURE__ */ jsx(EntityEditViewInner, { ...props, entityId, entity, cachedDirtyValues: cachedValues, dataLoading, status, setStatus, canEdit });
+  return /* @__PURE__ */ jsx(EntityEditViewInner, { ...props, entityId, entity, initialDirtyValues, dataLoading, status, setStatus, canEdit });
 }
 function EntityEditViewInner({
   path,
@@ -23158,7 +23211,7 @@ function EntityEditViewInner({
   onSaved,
   onTabChange,
   entity,
-  cachedDirtyValues,
+  initialDirtyValues,
   dataLoading,
   layout = "side_panel",
   barActions,
@@ -23286,7 +23339,7 @@ function EntityEditViewInner({
     /* @__PURE__ */ jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection }),
     /* @__PURE__ */ jsx("div", { className: "h-16" })
   ] }) }) : null;
-  const entityView = /* @__PURE__ */ jsx(EntityForm, { fullIdPath, collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
+  const entityView = /* @__PURE__ */ jsx(EntityForm, { fullIdPath, collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: 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) => {