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

package/dist/types/collections.d.ts

@@ -308,12 +308,16 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      */
     history?: boolean;
     /**
-     * If set to true, local changes to entities in this collection will be backed up
-     * in the browser's local storage. This allows users to recover unsaved changes
-     * in case of accidental navigation or browser crashes.
-     * Defaults to `true`.
-     */
-    enableLocalChangesBackup?: boolean;
+     * Should local changes be backed up in local storage, to prevent data loss on
+     * accidental navigations.
+     * - `manual_apply`: When the user navigates back to an entity with local changes,
+     *   they will be prompted to restore the changes.
+     * - `auto_apply`: When the user navigates back to an entity with local changes,
+     *   the changes will be automatically applied.
+     * - `false`: Local changes will not be backed up.
+     * Defaults to `manual_apply`.
+     */
+    localChangesBackup?: "manual_apply" | "auto_apply" | false;
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.

package/dist/util/collections.d.ts

@@ -9,3 +9,4 @@ export declare function resolveDefaultSelectedView(defaultSelectedView: string |
  * @param permissionsBuilder
  */
 export declare const applyPermissionsFunctionIfEmpty: (collections: EntityCollection[], permissionsBuilder?: PermissionsBuilder<any, any>) => EntityCollection[];
+export declare function getLocalChangesBackup(collection: EntityCollection): "manual_apply" | "auto_apply";

package/dist/util/entity_cache.d.ts

@@ -4,6 +4,10 @@
  * @param data - The data to cache and persist.
  */
 export declare function saveEntityToCache(path: string, data: object): void;
+export declare function removeEntityFromMemoryCache(path: string): void;
+export declare function saveEntityToMemoryCache(path: string, data: object): void;
+export declare function getEntityFromMemoryCache(path: string): object | undefined;
+export declare function hasEntityInCache(path: string): boolean;
 /**
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
@@ -11,8 +15,7 @@ export declare function saveEntityToCache(path: string, data: object): void;
  * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
-export declare function getEntityFromCache(path: string, useLocalStorage?: boolean): object | undefined;
-export declare function hasEntityInCache(path: string): boolean;
+export declare function getEntityFromCache(path: string): object | undefined;
 /**
  * Removes an entity from both the in-memory cache and `localStorage`.
  * @param path - The unique path/key for the entity to remove.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.285",
+  "version": "3.0.0-canary.287",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.285",
-    "@firecms/formex": "^3.0.0-canary.285",
-    "@firecms/ui": "^3.0.0-canary.285",
+    "@firecms/editor": "^3.0.0-canary.287",
+    "@firecms/formex": "^3.0.0-canary.287",
+    "@firecms/ui": "^3.0.0-canary.287",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "a442a00b64764b353c977cc9e758953995bd9513",
+  "gitHead": "c6606ddc2309cbdaeacb3103fbb2bb50a20418ce",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -14,7 +14,8 @@ import {
     Tooltip
 } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
-import { hasEntityInCache } from "../../util/entity_cache";
+import { getEntityFromCache, hasEntityInCache } from "../../util/entity_cache";
+import { getLocalChangesBackup } from "../../util";
 
 /**
  *
@@ -79,7 +80,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
-    const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
+    const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
+    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
+
     return (
         <div
             className={cls(

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -694,7 +694,7 @@ export const EntityCollectionView = React.memo(
                                 className="mt-4"
                             >
                                 <AddIcon/>
-                                Create your first entity
+                                Create your first entry
                             </Button>
                         </div>
                         : <Typography variant={"label"}>No results with the applied filter/sort</Typography>

package/src/core/EntityEditView.tsx

@@ -3,6 +3,7 @@ import {
     Entity,
     EntityCollection,
     EntityStatus,
+    EntityValues,
     FireCMSPlugin,
     FormContext,
     PluginFormActionProps,
@@ -26,7 +27,7 @@ import {
     useLargeLayout
 } from "../hooks";
 import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
-import { getEntityFromCache } from "../util/entity_cache";
+import { getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
@@ -44,6 +45,13 @@ export type OnUpdateParams = {
     collection: EntityCollection<any>
 };
 
+export type BarActionsParams = {
+    values: object,
+    status: EntityStatus,
+    path: string,
+    entityId?: string;
+};
+
 export type OnTabChangeParams<M extends Record<string, any>> = {
     path: string;
     entityId?: string;
@@ -67,11 +75,11 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     copy?: boolean;
     selectedTab?: string;
     parentCollectionIds: string[];
-    onValuesModified?: (modified: boolean) => void;
+    onValuesModified?: (modified: boolean, values:M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
-    barActions?: React.ReactNode;
+    barActions?: (params: BarActionsParams) => React.ReactNode;
     formProps?: Partial<EntityFormProps<M>>,
 }
 
@@ -97,11 +105,9 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         useCache: false
     });
 
-    const enableLocalChangesBackup = props.collection.enableLocalChangesBackup !== undefined ? props.collection.enableLocalChangesBackup : true;
-
     const initialDirtyValues = entityId
-        ? getEntityFromCache(props.path + "/" + entityId, enableLocalChangesBackup)
-        : getEntityFromCache(props.path + "#new", enableLocalChangesBackup);
+        ? getEntityFromMemoryCache(props.path + "/" + entityId)
+        : getEntityFromMemoryCache(props.path + "#new");
 
     const authController = useAuthController();
 
@@ -390,6 +396,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         disabled={!canEdit}
         {...formProps}
         onEntityChange={(entity) => {
+            console.log("333 EntityEditView onEntityChange:", entity);
             setUsedEntity(entity);
             formProps?.onEntityChange?.(entity);
         }}
@@ -447,7 +454,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         {shouldShowTopBar && <div
             className={cls("h-14 items-center flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
-            {barActions}
+            {barActions?.({
+                path: fullIdPath ?? path,
+                entityId,
+                values: formContext?.values ?? usedEntity?.values ?? {},
+                status
+            })}
 
             <div className={"flex-grow"}/>
 

package/src/core/EntitySidePanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
-import { EntitySidePanelProps } from "../types";
+import { EntityCollection, EntitySidePanelProps } from "../types";
 import { useNavigationController, useSideEntityController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
@@ -8,6 +8,7 @@ import { EntityEditView, OnUpdateParams } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 import { CloseIcon, IconButton, OpenInFullIcon } from "@firecms/ui";
 import { useLocation, useNavigate } from "react-router-dom";
+import { saveEntityToMemoryCache } from "../util/entity_cache";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -114,11 +115,14 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     {...props}
                     fullIdPath={fullIdPath}
                     layout={"side_panel"}
-                    collection={collection}
+                    collection={collection as EntityCollection}
                     parentCollectionIds={parentCollectionIds}
                     onValuesModified={onValuesModified}
                     onSaved={onUpdate}
-                    barActions={<>
+                    barActions={({
+                                     status,
+                                     values
+                                 }) => <>
                         <IconButton
                             className="self-center"
                             onClick={onClose}>
@@ -127,6 +131,8 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                         {allowFullScreen && <IconButton
                             className="self-center"
                             onClick={() => {
+                                const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                saveEntityToMemoryCache(key, values);
                                 if (entityId)
                                     navigate(location.pathname);
                                 else

package/src/form/EntityForm.tsx

@@ -19,6 +19,7 @@ import { ErrorBoundary, getFormFieldKeys } from "../components";
 import {
     getDefaultValuesFor,
     getEntityTitlePropertyKey,
+    getLocalChangesBackup,
     getValueInPath,
     isHidden,
     isReadOnly,
@@ -42,11 +43,17 @@ import { flattenKeys, Formex, FormexController, getIn, setIn, useCreateFormex }
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
-import { removeEntityFromCache, saveEntityToCache } from "../util/entity_cache";
+import {
+    getEntityFromCache,
+    removeEntityFromCache,
+    removeEntityFromMemoryCache,
+    saveEntityToCache
+} from "../util/entity_cache";
 import { CustomIdField } from "./components/CustomIdField";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomFieldValidator, getYupEntitySchema } from "./validation";
 import { EntityFormActions, EntityFormActionsProps } from "./EntityFormActions";
+import { LocalChangesMenu } from "./components/LocalChangesMenu";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -65,7 +72,7 @@ export type EntityFormProps<M extends Record<string, any>> = {
     entity?: Entity<M>;
     databaseId?: string;
     onIdChange?: (id: string) => void;
-    onValuesModified?: (modified: boolean) => void;
+    onValuesModified?: (modified: boolean, values: M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     initialDirtyValues?: Partial<M>; // dirty cached entity in memory
     onFormContextReady?: (formContext: FormContext) => void;
@@ -205,6 +212,18 @@ export function EntityForm<M extends Record<string, any>>({
 
     const autoSave = collection.formAutoSave && !collection.customId;
 
+    const baseInitialValues = useMemo(() => getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs), [authController, collection, path, status, entity, customizationController.propertyConfigs]);
+
+    const localChangesDataRaw = useMemo(() => entityId
+        ? getEntityFromCache(path + "/" + entityId)
+        : getEntityFromCache(path + "#new"), [entityId, path]);
+
+    const [localChangesCleared, setLocalChangesCleared] = useState<boolean>(false);
+
+    const localChangesBackup = getLocalChangesBackup(collection);
+    const autoApplyLocalChanges = localChangesBackup === "auto_apply";
+    const manualApplyLocalChanges = localChangesBackup === "manual_apply";
+
     const onSubmit = (values: EntityValues<M>, formexController: FormexController<EntityValues<M>>) => {
 
         if (mustSetCustomId && !entityId) {
@@ -242,9 +261,31 @@ export function EntityForm<M extends Record<string, any>>({
             });
     };
 
-    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 [initialValues, initialDirty] = useMemo(() => {
+        const initialValuesWithLocalChanges: Partial<M> = autoApplyLocalChanges && localChangesDataRaw ? mergeDeep(baseInitialValues, localChangesDataRaw as Partial<M>) : baseInitialValues;
+        const initialValues = initialDirtyValues ? mergeDeep(initialValuesWithLocalChanges, initialDirtyValues) : initialValuesWithLocalChanges;
+        const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
+        return [initialValues, initialDirty];
+    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
+
+    const localChangesData = useMemo(() => {
+        if (!localChangesDataRaw) {
+            return undefined;
+        }
+        let filteredChanges = {};
+        const flattenedKeys = flattenKeys(localChangesDataRaw);
+        flattenedKeys.forEach(key => {
+            const localValue = getIn(localChangesDataRaw, key);
+            const initialValue = getIn(initialValues, key);
+            if (!equal(localValue, initialValue)) {
+                filteredChanges = setIn(filteredChanges, key, localValue);
+            }
+        });
+        return filteredChanges;
+    }, [localChangesDataRaw, initialValues]);
+
+    const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
+
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
         initialValues: initialValues as M,
         initialDirty,
@@ -258,7 +299,7 @@ export function EntityForm<M extends Record<string, any>>({
         onSubmit,
         onReset: () => {
             clearDirtyCache();
-            onValuesModified?.(false);
+            onValuesModified?.(false, initialValues as M);
         },
         onValuesChangeDeferred: (values: M, controller: FormexController<M>) => {
             const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
@@ -328,8 +369,10 @@ export function EntityForm<M extends Record<string, any>>({
 
     function clearDirtyCache() {
         if (status === "new" || status === "copy") {
+            removeEntityFromMemoryCache(path + "#new");
             removeEntityFromCache(path + "#new");
         } else {
+            removeEntityFromMemoryCache(path + "/" + entityId);
             removeEntityFromCache(path + "/" + entityId);
         }
     }
@@ -337,7 +380,7 @@ export function EntityForm<M extends Record<string, any>>({
     const onSaveSuccess = (updatedEntity: Entity<M>) => {
 
         clearDirtyCache();
-        onValuesModified?.(false);
+        onValuesModified?.(false, updatedEntity.values);
         if (!autoSave)
             snackbarController.open({
                 type: "success",
@@ -537,7 +580,7 @@ export function EntityForm<M extends Record<string, any>>({
 
     useEffect(() => {
         if (!autoSave) {
-            onValuesModified?.(modified);
+            onValuesModified?.(modified, formex.values);
         }
     }, [formex.dirty]);
 
@@ -750,27 +793,39 @@ export function EntityForm<M extends Record<string, any>>({
                     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")}>
 
                     <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
-
-                        {formex.dirty
-                            ? <Tooltip title={"Local unsaved changes"}
-                                       className={"self-end sticky top-4 z-10"}>
-                                <Chip size={"small"} colorScheme={"orangeDarker"}>
-                                    <EditIcon size={"smallest"}/>
-                                </Chip>
-                            </Tooltip>
-                            : <Tooltip title={"In sync with the database"}
-                                       className={"self-end sticky top-4 z-10"}>
-                                <Chip size={"small"}>
-                                    <CheckIcon size={"smallest"}/>
-                                </Chip>
-                            </Tooltip>}
+                        <div
+                            className={"flex flex-row gap-4 self-end sticky top-4 z-10"}>
+
+                            {manualApplyLocalChanges && hasLocalChanges &&
+                                <LocalChangesMenu
+                                    cacheKey={status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId}
+                                    properties={resolvedCollection.properties}
+                                    localChangesData={localChangesData as Partial<M>}
+                                    formex={formex}
+                                    onClearLocalChanges={() => setLocalChangesCleared(true)}
+                                />}
+
+                            {formex.dirty
+                                ? <Tooltip title={"There are local unsaved changes"}>
+                                    <Chip size={"small"} colorScheme={"orangeDarker"}>
+                                        <EditIcon size={"smallest"}/>
+                                    </Chip>
+                                </Tooltip>
+                                : <Tooltip title={"The current form is in sync with the database"}>
+                                    <Chip size={"small"}>
+                                        <CheckIcon size={"smallest"}/>
+                                    </Chip>
+                                </Tooltip>}
+                        </div>
 
                         {formView}
 
                     </div>
 
                 </div>
+
                 {dialogActions}
+
             </form>
 
         </Formex>

package/src/form/components/LocalChangesMenu.tsx

@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+import {
+    Button, CancelIcon, CheckIcon,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    KeyboardArrowDownIcon,
+    Menu,
+    MenuItem,
+    Typography, VisibilityIcon,
+    WarningIcon
+} from "@firecms/ui";
+import { flattenKeys, FormexController, getIn } from "@firecms/formex";
+import { useSnackbarController } from "../../hooks";
+import { mergeDeep } from "../../util";
+import { removeEntityFromCache } from "../../util/entity_cache";
+import { getPropertyInPath } from "../../util";
+import { PropertyPreview } from "../../preview";
+import { ResolvedProperties, ResolvedProperty } from "../../types";
+
+interface LocalChangesMenuProps<M extends object> {
+    cacheKey: string;
+    localChangesData: Partial<M>;
+    formex: FormexController<M>;
+    onClearLocalChanges?: () => void;
+    properties: ResolvedProperties<M>;
+}
+
+export function LocalChangesMenu<M extends object>({
+                                                       localChangesData,
+                                                       formex,
+                                                       onClearLocalChanges,
+                                                       cacheKey,
+                                                       properties
+                                                   }: LocalChangesMenuProps<M>) {
+
+    const snackbarController = useSnackbarController();
+    const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
+    const [open, setOpen] = useState(false);
+    const handleOpenMenu = () => {
+        setOpen(true)
+    };
+
+    const handleCloseMenu = () => {
+        setOpen(false)
+    };
+
+    const handlePreview = () => {
+        setPreviewDialogOpen(true);
+        handleCloseMenu();
+    };
+
+    const handleApply = () => {
+        const mergedValues = mergeDeep(formex.values, localChangesData);
+        const touched = { ...formex.touched };
+        const newTouched: string[] = flattenKeys(localChangesData);
+        newTouched.forEach((key) => {
+            touched[key] = true;
+        });
+
+        formex.setTouched(touched);
+        formex.setValues(mergedValues);
+        snackbarController.open({
+            type: "info",
+            message: "Local changes applied to the form"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    const handleDiscard = () => {
+        removeEntityFromCache(cacheKey);
+        snackbarController.open({
+            type: "info",
+            message: "Local changes discarded"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    return (
+        <>
+
+            <Menu
+                trigger={<Button
+                    size={"small"}
+                    className={"font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200"}
+                    onClick={handleOpenMenu}>
+                    <WarningIcon
+                        size={"smallest"}
+                        className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
+                    Unsaved Local changes
+                    <KeyboardArrowDownIcon size={"smallest"}/>
+                </Button>}
+                open={open}
+                onOpenChange={setOpen}
+            >
+                <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
+                    This document was edited locally and has unsaved changes.
+                </div>
+                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>Preview Changes</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>Apply Changes</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>Discard Local Changes</MenuItem>
+            </Menu>
+
+            <Dialog
+                open={previewDialogOpen}
+                onOpenChange={setPreviewDialogOpen}
+                maxWidth={"4xl"}
+            >
+                <DialogContent>
+                    <h3 className={"text-2xl mb-4"}>Preview Local Changes</h3>
+                    <p className={"mb-4"}>
+                        These are the local changes that will be applied to the form.
+                    </p>
+                    <div
+                        className={`border rounded-lg divide-y divide-surface-200 divide-surface-opacity-40 dark:divide-surface-700 dark:divide-opacity-40 ${defaultBorderMixin}`}>
+                        {flattenKeys(localChangesData).map((key) => {
+                            const value = getIn(localChangesData, key);
+                            const property = getPropertyInPath(properties, key) as ResolvedProperty;
+                            if (!property) {
+                                return null;
+                            }
+                            return (
+                                <div key={key}
+                                     className="grid grid-cols-12 gap-x-4 px-4 py-3 items-center">
+                                    <div
+                                        className="col-span-3 text-right">
+                                        <Typography variant="caption"
+                                                    className="text-gray-500 dark:text-gray-400 break-words">{property.name || key}</Typography>
+                                    </div>
+                                    <div className="col-span-9">
+                                        <PropertyPreview
+                                            propertyKey={key}
+                                            value={value}
+                                            property={property}
+                                            size={"small"}/>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setPreviewDialogOpen(false)}>Close</Button>
+                    <Button
+                        variant={"filled"}
+                        onClick={() => {
+                            handleApply();
+                            setPreviewDialogOpen(false);
+                        }}>Apply changes</Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/types/collections.ts

@@ -354,12 +354,16 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
     history?: boolean;
 
     /**
-     * If set to true, local changes to entities in this collection will be backed up
-     * in the browser's local storage. This allows users to recover unsaved changes
-     * in case of accidental navigation or browser crashes.
-     * Defaults to `true`.
-     */
-    enableLocalChangesBackup?: boolean;
+     * Should local changes be backed up in local storage, to prevent data loss on
+     * accidental navigations.
+     * - `manual_apply`: When the user navigates back to an entity with local changes,
+     *   they will be prompted to restore the changes.
+     * - `auto_apply`: When the user navigates back to an entity with local changes,
+     *   the changes will be automatically applied.
+     * - `false`: Local changes will not be backed up.
+     * Defaults to `manual_apply`.
+     */
+    localChangesBackup?: "manual_apply" | "auto_apply" | false;
 }
 
 /**

package/src/util/collections.ts

@@ -70,3 +70,11 @@ export const applyPermissionsFunctionIfEmpty = (collections: EntityCollection[],
         });
     });
 }
+
+export function getLocalChangesBackup(collection: EntityCollection) {
+    if (!collection.localChangesBackup) {
+        return "manual_apply";
+    }
+
+    return collection.localChangesBackup;
+}

package/src/util/createFormexStub.tsx

@@ -4,6 +4,7 @@ export function createFormexStub<T extends object>(values: T): FormexController<
     const errorMessage = "You are in a read-only context. You cannot modify the formex controller.";
 
     return {
+        debugId: "",
         values,
         initialValues: values,
         touched: {} as Record<string, boolean>,
@@ -19,6 +20,9 @@ export function createFormexStub<T extends object>(values: T): FormexController<
         setValues: () => {
             throw new Error(errorMessage);
         },
+        setTouched(touched: Record<string, boolean>): void {
+            throw new Error(errorMessage);
+        },
         setFieldValue: () => {
             throw new Error(errorMessage);
         },