@firecms/core 3.0.0-canary.16 → 3.0.0-canary.161

package/src/hooks/useValidateAuthenticator.tsx

@@ -1,43 +1,38 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import equal from "react-fast-compare";
 
-import { AppCheckTokenResult, AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
+import { AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
 
 /**
  * This hook is used internally for validating an authenticator.
  *
  * @param authController
  * @param authentication
- * @param getAppCheckToken
- * @param appCheckForceRefresh
  * @param storageSource
- * @param dataSource
+ * @param dataSourceDelegate
  */
-export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>({
-                                                                           disabled,
-                                                                           authController,
-                                                                           authentication,
-                                                                           getAppCheckToken,
-                                                                           appCheckForceRefresh = false,
-                                                                           storageSource,
-                                                                           dataSourceDelegate
-                                                                       }:
-                                                                           {
-                                                                               disabled?: boolean,
-                                                                               authController: Controller,
-                                                                               authentication?: boolean | Authenticator<UserType, Controller>,
-                                                                               getAppCheckToken?: (forceRefresh: boolean) => Promise<AppCheckTokenResult> | undefined,
-                                                                               appCheckForceRefresh?: boolean,
-                                                                               dataSourceDelegate: DataSourceDelegate;
-                                                                               storageSource: StorageSource;
-                                                                           }): {
+export function useValidateAuthenticator<USER extends User = any>
+({
+     disabled,
+     authController,
+     authenticator,
+     storageSource,
+     dataSourceDelegate
+ }:
+     {
+         disabled?: boolean,
+         authController: AuthController<USER>,
+         authenticator?: boolean | Authenticator<USER>,
+         dataSourceDelegate: DataSourceDelegate;
+         storageSource: StorageSource;
+     }): {
     canAccessMainView: boolean,
     authLoading: boolean,
     notAllowedError: any,
     authVerified: boolean,
 } {
 
-    const authenticationEnabled = Boolean(authentication);
+    const authenticationEnabled = Boolean(authenticator);
 
     const [authLoading, setAuthLoading] = useState<boolean>(authenticationEnabled);
     const [notAllowedError, setNotAllowedError] = useState<any>(false);
@@ -76,26 +71,11 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
         }
 
         const delegateUser = authController.user;
-        console.debug("Checking authentication for user", delegateUser);
 
-        if (getAppCheckToken) {
-            try {
-                if (!await getAppCheckToken(appCheckForceRefresh)) {
-                    setNotAllowedError("App Check failed.");
-                    authController.signOut();
-                } else {
-                    console.debug("App Check success.");
-                }
-            } catch (e: any) {
-                setNotAllowedError(e.message);
-                authController.signOut();
-            }
-        }
-
-        if (authentication instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
+        if (authenticator instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
             setAuthLoading(true);
             try {
-                const allowed = await authentication({
+                const allowed = await authenticator({
                     user: delegateUser,
                     authController,
                     dataSourceDelegate,
@@ -120,7 +100,7 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
             setAuthVerified(true);
         }
 
-    }, [disabled, authController, authentication, getAppCheckToken, appCheckForceRefresh, dataSourceDelegate, storageSource]);
+    }, [disabled, authController, authenticator, dataSourceDelegate, storageSource]);
 
     useEffect(() => {
         checkAuthentication();

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./core";
+export * from "./app";
 export * from "./types";
 export * from "./form";
 export * from "./preview";

package/src/internal/useBuildDataSource.ts

@@ -5,12 +5,11 @@ import {
     DeleteEntityProps,
     Entity,
     EntityCollection,
-    EntityReference,
     EntityValues,
     FetchCollectionProps,
     FetchEntityProps,
     FilterValues,
-    GeoPoint,
+    FireCMSContext,
     ListenCollectionProps,
     ListenEntityProps,
     NavigationController,
@@ -53,23 +52,25 @@ export function useBuildDataSource({
          */
         fetchCollection: useCallback(<M extends Record<string, any>>({
                                                                          path,
-                                                                         collection: collectionProp,
+                                                                         collection,
                                                                          filter,
                                                                          limit,
                                                                          startAfter,
                                                                          searchString,
                                                                          orderBy,
-                                                                         order
+                                                                         order,
                                                                      }: FetchCollectionProps<M>
         ): Promise<Entity<M>[]> => {
-            return delegate.fetchCollection<M>({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchCollection<M>({
                 path,
                 filter,
                 limit,
                 startAfter,
                 searchString,
                 orderBy,
-                order
+                order,
+                collection
             });
         }, [delegate]),
 
@@ -90,7 +91,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenCollection: delegate.listenCollection
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -107,11 +107,12 @@ export function useBuildDataSource({
             ): () => void => {
 
                 const collection = collectionProp ?? navigationController.getCollection(path);
-                const isCollectionGroup = Boolean(collection?.collectionGroup) ?? false;
-                if (!delegate.listenCollection)
+                const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+
+                if (!usedDelegate.listenCollection)
                     throw Error("useBuildDataSource delegate not initialised");
 
-                return delegate.listenCollection<M>({
+                return usedDelegate.listenCollection<M>({
                     path,
                     filter,
                     limit,
@@ -121,8 +122,7 @@ export function useBuildDataSource({
                     order,
                     onUpdate,
                     onError,
-                    isCollectionGroup,
-                    collection
+                    collection,
                 });
             }, [delegate, navigationController.getCollection])
             : undefined,
@@ -136,12 +136,17 @@ export function useBuildDataSource({
          */
         fetchEntity: useCallback(<M extends Record<string, any>>({
                                                                      path,
-                                                                     entityId
+                                                                     entityId,
+                                                                     collection
                                                                  }: FetchEntityProps<M>
-        ): Promise<Entity<M> | undefined> => delegate.fetchEntity({
-            path,
-            entityId
-        }), [delegate]),
+        ): Promise<Entity<M> | undefined> => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchEntity({
+                path,
+                entityId,
+                collection
+            });
+        }, [delegate.fetchEntity]),
 
         /**
          *
@@ -154,7 +159,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenEntity: delegate.listenEntity
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -163,14 +167,17 @@ export function useBuildDataSource({
                     onUpdate,
                     onError
                 }: ListenEntityProps<M>): () => void => {
-                if (!delegate.listenEntity)
+                const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+
+                if (!usedDelegate.listenEntity)
                     throw Error("useBuildDataSource delegate not initialised");
 
-                return delegate.listenEntity<M>({
+                return usedDelegate.listenEntity<M>({
                     path,
                     entityId,
                     onUpdate,
-                    onError
+                    onError,
+                    collection
                 })
             }, [delegate.listenEntity]) : undefined,
 
@@ -195,46 +202,45 @@ export function useBuildDataSource({
             }: SaveEntityProps<M>): Promise<Entity<M>> => {
 
             const collection = collectionProp ?? navigationController.getCollection(path);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
 
             const resolvedCollection = collection
                 ? resolveCollection<M>({
                     collection,
                     path,
                     entityId,
-                    fields: propertyConfigs
+                    propertyConfigs: propertyConfigs
                 })
                 : undefined;
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = cmsToDelegateModel(
+            const firestoreValues = usedDelegate.cmsToDelegateModel(
                 values,
-                delegate.buildReference,
-                delegate.buildGeoPoint,
-                delegate.buildDate,
-                delegate.buildDeleteFieldValue
             );
-            const updatedFirestoreValues: EntityValues<M> = properties
+
+            const updatedValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
                         inputValues: firestoreValues,
                         properties,
                         status,
-                        timestampNowValue: delegate.currentTime(),
-                        setDateToMidnight: delegate.setDateToMidnight
+                        timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
+                        setDateToMidnight: usedDelegate.setDateToMidnight
                     })
                 : firestoreValues;
 
-            return delegate.saveEntity({
+            return usedDelegate.saveEntity({
                 path,
+                collection,
                 entityId,
-                values: updatedFirestoreValues,
+                values: updatedValues,
                 status
             }).then((res) => {
                 return {
                     id: res.id,
                     path: res.path,
-                    values: delegate.delegateToCMSModel(updatedFirestoreValues)
+                    values: usedDelegate.delegateToCMSModel(updatedValues)
                 } as Entity<M>;
             });
         }, [delegate.saveEntity, navigationController.getCollection]),
@@ -247,10 +253,15 @@ export function useBuildDataSource({
          */
         deleteEntity: useCallback(<M extends Record<string, any>>(
             {
-                entity
+                entity,
+                collection
             }: DeleteEntityProps<M>
         ): Promise<void> => {
-            return delegate.deleteEntity({ entity });
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.deleteEntity({
+                entity,
+                collection
+            });
         }, [delegate.deleteEntity]),
 
         /**
@@ -267,13 +278,16 @@ export function useBuildDataSource({
             path: string,
             name: string,
             value: any,
-            entityId?: string
+            entityId?: string,
+            collection?: EntityCollection
         ): Promise<boolean> => {
-            return delegate.checkUniqueField(path, name, value, entityId);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.checkUniqueField(path, name, value, entityId, collection);
         }, [delegate.checkUniqueField]),
 
-        generateEntityId: useCallback((path: string): string => {
-            return delegate.generateEntityId(path,);
+        generateEntityId: useCallback((path: string, collection: EntityCollection): string => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.generateEntityId(path, collection);
         }, [delegate.generateEntityId]),
 
         countEntities: delegate.countEntities ? async ({
@@ -289,21 +303,24 @@ export function useBuildDataSource({
             orderBy?: string,
             order?: "desc" | "asc",
         }): Promise<number> => {
-            return delegate.countEntities!({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.countEntities!({
                 path,
                 filter,
                 orderBy,
                 order,
-                isCollectionGroup: Boolean(collection.collectionGroup) ?? false
+                collection
             });
         } : undefined,
 
         isFilterCombinationValid: useCallback(({
                                                    path,
+                                                   databaseId,
                                                    filterValues,
                                                    sortBy
                                                }: {
             path: string,
+            databaseId?: string,
             filterValues: FilterValues<any>,
             sortBy?: [string, "asc" | "desc"]
         }): boolean => {
@@ -312,52 +329,25 @@ export function useBuildDataSource({
             return delegate.isFilterCombinationValid(
                 {
                     path,
+                    databaseId,
                     filterValues,
                     sortBy
                 }
             )
-        }, [delegate.isFilterCombinationValid])
+        }, [delegate.isFilterCombinationValid]),
 
-    };
+        initTextSearch: useCallback(async (props: {
+            context: FireCMSContext,
+            path: string,
+            collection: EntityCollection,
+            parentCollectionIds?: string[]
+        }): Promise<boolean> => {
+            const usedDelegate = props.collection?.overrides?.dataSourceDelegate ?? delegate;
+            if (!usedDelegate.initTextSearch)
+                return false;
+            return usedDelegate.initTextSearch(props)
+        }, [delegate.initTextSearch]),
 
-}
+    };
 
-/**
- * Recursive function that converts Firestore data types into CMS or plain
- * JS types.
- * FireCMS uses Javascript dates internally instead of Firestore timestamps.
- * This makes it easier to interact with the rest of the libraries and
- * bindings.
- * Also, Firestore references are replaced with {@link EntityReference}
- * @param data
- * @param buildReference
- * @param buildGeoPoint
- * @param buildDate
- * @param buildDelete
- * @group Firestore
- */
-export function cmsToDelegateModel(data: any,
-                                   buildReference: (reference: EntityReference) => any,
-                                   buildGeoPoint: (geoPoint: GeoPoint) => any,
-                                   buildDate: (date: Date) => any,
-                                   buildDelete: () => any
-): any {
-    if (data === undefined) {
-        return buildDelete();
-    } else if (data === null) {
-        return null;
-    } else if (Array.isArray(data)) {
-        return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
-    } else if (data.isEntityReference && data.isEntityReference()) {
-        return buildReference(data);
-    } else if (data instanceof GeoPoint) {
-        return buildGeoPoint(data);
-    } else if (data instanceof Date) {
-        return buildDate(data);
-    } else if (data && typeof data === "object") {
-        return Object.entries(data)
-            .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
-            .reduce((a, b) => ({ ...a, ...b }), {});
-    }
-    return data;
 }

package/src/internal/useBuildSideDialogsController.tsx

@@ -118,6 +118,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
     return {
         sidePanels,
+        setSidePanels: updateSidePanels,
         close,
         open,
         replace

package/src/internal/useBuildSideEntityController.tsx

@@ -3,13 +3,14 @@ import {
     EntityCollection,
     EntitySidePanelProps,
     NavigationController,
+    ResolvedProperty,
     SideDialogPanelProps,
     SideDialogsController,
     SideEntityController
 } from "../types";
 import { getNavigationEntriesFromPathInternal, NavigationViewInternal } from "../util/navigation_from_path";
 import { useLocation } from "react-router-dom";
-import { removeInitialAndTrailingSlashes, resolveDefaultSelectedView } from "../util";
+import { removeInitialAndTrailingSlashes, resolveCollection, resolveDefaultSelectedView } from "../util";
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
 import { useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
@@ -19,8 +20,67 @@ const NEW_URL_HASH = "new";
 export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string {
     if (small) return CONTAINER_FULL_WIDTH;
     const mainViewSelected = !props.selectedSubPath;
-    const resolvedWidth: string | undefined = typeof props.width === "number" ? `${props.width}px` : props.width;
-    return !mainViewSelected ? `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})` : resolvedWidth ?? FORM_CONTAINER_WIDTH
+    let resolvedWidth: string | undefined;
+    if (props.width) {
+        resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
+    } else if (props.collection?.sideDialogWidth) {
+        resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
+    }
+
+    if (!mainViewSelected) {
+        return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
+    } else {
+        if (resolvedWidth) {
+            return resolvedWidth
+        } else if (!props.collection) {
+            return FORM_CONTAINER_WIDTH;
+        } else {
+            return calculateCollectionDesiredWidth(props.collection);
+        }
+    }
+}
+
+const collectionViewWidthCache: { [key: string]: string } = {};
+
+function calculateCollectionDesiredWidth(collection: EntityCollection<any>): string {
+    if (collectionViewWidthCache[collection.id]) {
+        return collectionViewWidthCache[collection.id];
+    }
+    const resolvedCollection = resolveCollection({
+        collection,
+        path: "__ignored",
+        ignoreMissingFields: true
+    });
+
+    let result = FORM_CONTAINER_WIDTH
+    if (resolvedCollection?.properties) {
+        const values = Object.values(resolvedCollection.properties).map((p: ResolvedProperty) => getNestedPropertiesDepth(p));
+        const maxDepth = Math.max(...values);
+        if (maxDepth < 3) {
+            result = FORM_CONTAINER_WIDTH;
+        } else {
+            result = 768 + 32 * (maxDepth - 2) + "px";
+        }
+    }
+    collectionViewWidthCache[collection.id] = result;
+    return result;
+}
+
+function getNestedPropertiesDepth(property: ResolvedProperty, accumulator: number = 0): number {
+    if (property.dataType === "map" && property.properties) {
+        const values = Object.values(property.properties).flatMap((property) => getNestedPropertiesDepth(property, accumulator + 1));
+        return Math.max(...values);
+    } else if (property.dataType === "array" && property.oneOf) {
+        return accumulator + 3;
+    } else if (property.dataType === "array" && property.of) {
+        if (Array.isArray(property.of)) {
+            return Math.max(...property.of.map((p) => getNestedPropertiesDepth(p, accumulator + 1)));
+        } else {
+            return getNestedPropertiesDepth(property.of, accumulator + 1);
+        }
+    } else {
+        return accumulator + 1;
+    }
 }
 
 export const useBuildSideEntityController = (navigation: NavigationController,
@@ -34,23 +94,36 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     // only on initialisation, create panels from URL
     useEffect(() => {
         if (!navigation.loading && !initialised.current) {
+            console.debug("Initialising side entity controller");
             if (navigation.isUrlCollectionPath(location.pathname)) {
                 const newFlag = location.hash === `#${NEW_URL_HASH}`;
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
                 const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
                 for (let i = 0; i < panelsFromUrl.length; i++) {
-                    const panel = panelsFromUrl[i];
+                    const props = panelsFromUrl[i];
                     setTimeout(() => {
                         if (i === 0)
-                            sideDialogsController.replace(propsToSidePanel(panel, navigation, smallLayout));
+                            sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
                         else
-                            sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
+                            sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout))
                     }, 1);
                 }
+            } else {
+                // console.warn("Location path is not a collection path");
             }
             initialised.current = true;
         }
-    }, [location, navigation, sideDialogsController, smallLayout]);
+    }, [location, navigation.loading, navigation.isUrlCollectionPath, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout, navigation]);
+
+    useEffect(() => {
+        const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
+            if (sidePanelProps.additional) {
+                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout);
+            }
+            return sidePanelProps;
+        });
+        sideDialogsController.setSidePanels(updatedSidePanels);
+    }, [smallLayout]);
 
     const close = useCallback(() => {
         sideDialogsController.close();
@@ -73,9 +146,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
         sideDialogsController.open(propsToSidePanel({
             selectedSubPath: defaultSelectedView,
             ...props,
-        }, navigation, smallLayout));
+        }, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
 
-    }, [sideDialogsController, navigation, smallLayout]);
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout]);
 
     const replace = useCallback((props: EntitySidePanelProps<any>) => {
 
@@ -83,9 +156,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation, smallLayout));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
 
-    }, [navigation, sideDialogsController, smallLayout]);
+    }, [navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout]);
 
     return {
         close,
@@ -116,7 +189,8 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
                 sidePanels.push({
                         path: navigationEntry.path,
                         entityId: navigationEntry.entityId,
-                        copy: false
+                        copy: false,
+                        width: navigationEntry.parentCollection?.sideDialogWidth
                     }
                 );
             } else if (navigationEntry.type === "custom_view") {
@@ -146,27 +220,33 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     return sidePanels;
 }
 
-const propsToSidePanel = (props: EntitySidePanelProps<any>, navigation: NavigationController, smallLayout: boolean): SideDialogPanelProps => {
+const propsToSidePanel = (props: EntitySidePanelProps,
+                          buildUrlCollectionPath: (path: string) => string,
+                          resolveAliasesFrom: (pathWithAliases: string) => string,
+                          smallLayout: boolean): SideDialogPanelProps => {
 
         const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
         const newPath = props.entityId
-            ? navigation.buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
-            : navigation.buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
-        const resolvedPath = navigation.resolveAliasesFrom(props.path);
+            ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
+            : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+        const resolvedPath = resolveAliasesFrom(props.path);
 
         const resolvedPanelProps: EntitySidePanelProps<any> = {
             ...props,
-            path: resolvedPath
+            path: resolvedPath,
         };
 
-        return ({
+        const entityViewWidth = getEntityViewWidth(props, smallLayout);
+
+        return {
             key: `${props.path}/${props.entityId}`,
             component: <EntitySidePanel {...resolvedPanelProps}/>,
             urlPath: newPath,
-            parentUrlPath: navigation.buildUrlCollectionPath(collectionPath),
-            width: getEntityViewWidth(props, smallLayout),
-            onClose: props.onClose
-        });
+            parentUrlPath: buildUrlCollectionPath(collectionPath),
+            width: entityViewWidth,
+            onClose: props.onClose,
+            additional: props
+        };
     }
 ;

package/src/internal/useUnsavedChangesDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { Blocker, Transition } from "history";
 import { UNSAFE_NavigationContext, useNavigate } from "react-router-dom";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export function useNavigationUnsavedChangesDialog(when: boolean, onSuccess: () => void):
     {
@@ -84,11 +84,13 @@ export function UnsavedChangesDialog({
 
     return (
         <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
             open={open}
-            onOpenChange={(open) => open ? handleCancel() : handleOk()}
         >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"}>{title}</Typography>
 
                 {body}