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

package/src/form/components/ErrorFocus.tsx

@@ -1,51 +1,44 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { useFormex } from "@firecms/formex";
 
 export const ErrorFocus = ({ containerRef }:
                                {
                                    containerRef?: React.RefObject<HTMLDivElement>
                                }) => {
-    const { isSubmitting, isValidating, errors } = useFormex();
+    const {
+        isValidating,
+        errors,
+        version
+    } = useFormex();
+
+    const prevVersion = useRef(version);
 
     useEffect(() => {
+
+        if (version === prevVersion.current) {
+            return;
+        }
+
         const keys = Object.keys(errors);
 
-        // Whenever there are errors and the form is submitting but finished validating.
-        if (keys.length > 0 && isSubmitting && !isValidating) {
+        // Whenever there are errors and the form has been submitted and is not validating
+        if (!isValidating && keys.length > 0) {
             const errorElement = containerRef?.current?.querySelector<HTMLDivElement>(
                 `#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;
         }
-    }, [isSubmitting, isValidating, errors, containerRef]);
+    }, [isValidating, errors, containerRef, version]);
 
     // This component does not render anything by itself.
     return null;
 };
-
-const isScrollable = (ele: HTMLElement | null) => {
-    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: HTMLElement | null): HTMLElement | null => {
-    return (!ele || ele === document.body)
-        ? document.body
-        : (isScrollable(ele) ? ele : getScrollableParent(ele.parentNode as HTMLElement));
-};

package/src/form/index.tsx

@@ -1,4 +1,8 @@
-export * from "./EntityForm";
+export {
+    EntityForm,
+    yupToFormErrors,
+} from "./EntityForm";
+export type { EntityFormProps } from "./EntityForm";
 
 export { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
 export { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";

package/src/hooks/useBuildNavigationController.tsx

@@ -457,8 +457,9 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         [fullCollectionPath]);
 
     const urlPathToDataPath = useCallback((path: string): string => {
-        if (path.startsWith(fullCollectionPath))
-            return path.replace(fullCollectionPath, "");
+        const decodedPath = decodeURIComponent(path);
+        if (decodedPath.startsWith(fullCollectionPath))
+            return decodedPath.replace(fullCollectionPath, "");
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 

package/src/preview/components/UserPreview.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { useInternalUserManagementController } from "../../hooks";
 import { UserDisplay } from "../../components/UserDisplay";
+import { EmptyValue } from "./EmptyValue";
+import { Typography } from "@firecms/ui";
 
 /**
  * Preview component for displaying user information.
@@ -13,10 +15,13 @@ export function UserPreview({ value }: PropertyPreviewProps<string>) {
     const { getUser } = useInternalUserManagementController();
 
     if (!value) {
-        return null;
+        return <EmptyValue/>;
     }
 
     const user = getUser(value);
+    if (!user) {
+        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
+    }
 
-    return <UserDisplay user={user}  />;
+    return <UserDisplay user={user}/>;
 }

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -42,7 +42,7 @@ export function ArrayPropertyPreview({
     const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
-        <div className="flex flex-col gap-2">
+        <div className="w-full flex flex-col gap-2">
             {values &&
                 values.map((value, index) => {
                         const of: ResolvedProperty = property.resolvedProperties[index] ??

package/src/types/collections.ts

@@ -352,6 +352,14 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * This prop has no effect if the history plugin is not enabled
      */
     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;
 }
 
 /**

package/src/util/entity_cache.ts

@@ -157,7 +157,6 @@ export function hasEntityInCache(path: string): boolean {
  */
 export function removeEntityFromCache(path: string): void {
 
-
     console.debug("Removing entity from cache", path);
 
     // Remove from the in-memory cache