@firecms/core 3.5.2-canary.16bf7bb → 3.5.2-canary.a36570e

package/src/core/SideDialogs.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { EntitySidePanelProps, SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
-import { useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
+import { useLeavePageConfirmation } from "../internal/useLeavePageConfirmation";
 import { ErrorBoundary } from "../components";
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 import { EntitySidePanel } from "./EntitySidePanel";
@@ -123,14 +123,7 @@ function SideDialogView({
 
     const sideDialogsController = useSideDialogsController();
 
-    const {
-        navigationWasBlocked,
-        handleOk: handleNavigationOk,
-        handleCancel: handleNavigationCancel
-    } = useNavigationUnsavedChangesDialog(
-        blocked && !drawerCloseRequested,
-        () => setBlocked(false)
-    );
+    useLeavePageConfirmation(blocked && !drawerCloseRequested);
 
     useEffect(() => {
         if (panel)
@@ -140,7 +133,7 @@ function SideDialogView({
     const handleDrawerCloseOk = () => {
         setBlocked(false);
         setDrawerCloseRequested(false);
-        sideDialogsController.close();
+        sideDialogsController.close(panel?.key);
         panel?.onClose?.();
     };
 
@@ -152,7 +145,7 @@ function SideDialogView({
         if (blocked && !force) {
             setDrawerCloseRequested(true);
         } else {
-            sideDialogsController.close();
+            sideDialogsController.close(panel?.key);
             panel?.onClose?.();
         }
     };
@@ -212,8 +205,8 @@ function SideDialogView({
 
             <UnsavedChangesDialog
                 open={drawerCloseRequested}
-                handleOk={drawerCloseRequested ? handleDrawerCloseOk : handleNavigationOk}
-                handleCancel={drawerCloseRequested ? handleDrawerCloseCancel : handleNavigationCancel}
+                handleOk={handleDrawerCloseOk}
+                handleCancel={handleDrawerCloseCancel}
                 body={blockedNavigationMessage} />
 
         </SideDialogContext.Provider>

package/src/hooks/useReferenceDialog.tsx

@@ -45,8 +45,8 @@ export function useReferenceDialog<M extends Record<string, any>>(referenceDialo
     }, [navigation, referenceDialogProps, sideDialogsController]);
 
     const close = useCallback(() => {
-        sideDialogsController.close();
-    }, [sideDialogsController]);
+        sideDialogsController.close(`reference_${referenceDialogProps.path}`);
+    }, [sideDialogsController, referenceDialogProps.path]);
 
     return {
         open,

package/src/internal/useBuildSideDialogsController.tsx

@@ -14,6 +14,9 @@ export function useBuildSideDialogsController(): SideDialogsController {
     const routesStore = useRef<Record<string, SideDialogPanelProps>>({});
     const routesCount = useRef<number>(0);
 
+    // The history entry each panel without a URL was opened on, by panel key.
+    const entryKeysOfPanelsWithoutUrl = useRef<Record<string, string>>({});
+
     const updateSidePanels = (newPanels: SideDialogPanelProps[]) => {
         sidePanelsRef.current = newPanels;
         setSidePanels(newPanels);
@@ -22,20 +25,55 @@ export function useBuildSideDialogsController(): SideDialogsController {
     useEffect(() => {
         const state = location.state as any;
         const panelKeys: string[] = state?.panels ?? [];
-        const newPanels = panelKeys
+        const panelsInHistory = panelKeys
             .map(key => routesStore.current[key])
             .filter(p => Boolean(p)) as SideDialogPanelProps[];
+
+        // A panel without a URL, like a reference dialog, pushes no history entry, so the
+        // entry under it does not list it, and going back to that entry, as closing a
+        // panel opened on top of it does, would drop it. It stays open for as long as
+        // what it was opened over does: the panel below it or, with none, the entry itself.
+        const keptPanels: SideDialogPanelProps[] = [];
+        let matched = 0;
+        for (const panel of sidePanelsRef.current) {
+            if (panelsInHistory[matched]?.key === panel.key) {
+                keptPanels.push(panel);
+                matched++;
+            } else if (!panel.urlPath &&
+                (keptPanels.length > 0 || entryKeysOfPanelsWithoutUrl.current[panel.key] === location.key)) {
+                keptPanels.push(panel);
+            } else {
+                break;
+            }
+        }
+        const newPanels = [...keptPanels, ...panelsInHistory.slice(matched)];
+
         if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key))) {
             updateSidePanels(newPanels);
         }
     }, [location]);
 
-    const close = useCallback(() => {
+    const close = useCallback((key?: string) => {
 
         const currentPanels = sidePanelsRef.current;
         if (currentPanels.length === 0)
             return;
 
+        // A panel can ask to close itself while another one is open on top of it: the
+        // reference dialog does when an entity created from it is saved. Closing the top
+        // one instead would close that entity, and then the entity's own close would take
+        // the panel under the dialog with it. Only a panel without a URL can be taken out
+        // of the middle, since it has no history entry of its own. Should two panels share
+        // a key (a reference dialog opened from an entity created in another one for the
+        // same collection), it is the upper one.
+        const index = key !== undefined ? currentPanels.findLastIndex(p => p.key === key) : -1;
+        if (index !== -1 && index < currentPanels.length - 1 && !currentPanels[index].urlPath) {
+            updateSidePanels(currentPanels.filter((_, i) => i !== index));
+            if (routesCount.current > 0)
+                routesCount.current--;
+            return;
+        }
+
         const lastSidePanel = currentPanels[currentPanels.length - 1];
         const updatedPanels = [...currentPanels.slice(0, -1)];
         updateSidePanels(updatedPanels);
@@ -65,6 +103,8 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
         newPanels.forEach((panel) => {
             routesStore.current[panel.key] = panel;
+            if (!panel.urlPath)
+                entryKeysOfPanelsWithoutUrl.current[panel.key] = location.key;
         });
         routesCount.current = routesCount.current + newPanels.length;
 
@@ -95,6 +135,8 @@ export function useBuildSideDialogsController(): SideDialogsController {
         const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
         newPanels.forEach((panel) => {
             routesStore.current[panel.key] = panel;
+            if (!panel.urlPath)
+                entryKeysOfPanelsWithoutUrl.current[panel.key] = location.key;
         });
 
         const baseLocation = (location.state as any)?.base_location ?? location;

package/src/internal/useLeavePageConfirmation.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+/**
+ * Asks the browser to confirm leaving the page (reload, tab close, a link that
+ * loads another document) while `when` is true.
+ *
+ * Navigation inside the app is not intercepted: unsaved entity values are kept
+ * in the dirty entity cache, so they survive it. Cancelling link clicks here
+ * used to leave plain and new-tab links doing nothing, with no dialog shown.
+ *
+ * @param when - Whether leaving the page should be confirmed.
+ */
+export function useLeavePageConfirmation(when: boolean): void {
+    useEffect(() => {
+        if (!when) return;
+
+        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+            e.preventDefault();
+            e.returnValue = "";
+        };
+
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }, [when]);
+}

package/src/types/side_dialogs_controller.tsx

@@ -8,9 +8,11 @@ import { EntityFormProps } from "../form";
 export interface SideDialogsController {
 
     /**
-     * Close the last panel
+     * Close the last panel.
+     * When the `key` of a panel without a URL is given, that panel is closed
+     * instead, even if other panels are open on top of it.
      */
-    close: () => void;
+    close: (key?: string) => void;
 
     /**
      * List of side panels currently open

package/dist/internal/useUnsavedChangesDialog.d.ts

@@ -1,12 +0,0 @@
-/**
- * Custom hook to handle navigation blocking when there are unsaved changes.
- *
- * @param when - Indicates whether to block navigation.
- * @param onSuccess - Callback invoked when navigation is confirmed.
- * @returns An object containing the state of navigation blocking and handlers.
- */
-export declare function useNavigationUnsavedChangesDialog(when: boolean, onSuccess: () => void): {
-    navigationWasBlocked: boolean;
-    handleCancel: () => void;
-    handleOk: () => void;
-};

package/src/internal/useUnsavedChangesDialog.tsx

@@ -1,142 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
-
-/**
- * Type representing a pending navigation action.
- */
-type PendingNavigation =
-    | {
-    type: "popstate";
-    delta: number;
-}
-    | {
-    type: "link";
-    href: string;
-}
-    | null;
-
-/**
- * Custom hook to handle navigation blocking when there are unsaved changes.
- *
- * @param when - Indicates whether to block navigation.
- * @param onSuccess - Callback invoked when navigation is confirmed.
- * @returns An object containing the state of navigation blocking and handlers.
- */
-export function useNavigationUnsavedChangesDialog(
-    when: boolean,
-    onSuccess: () => void
-): {
-    navigationWasBlocked: boolean;
-    handleCancel: () => void;
-    handleOk: () => void;
-} {
-    const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
-    const [pendingNavigation, setPendingNavigation] = useState<PendingNavigation>(null);
-
-    /**
-     * Handler to cancel the navigation attempt.
-     */
-    const handleCancel = useCallback(() => {
-        setIsDialogOpen(false);
-        setPendingNavigation(null);
-    }, []);
-
-    /**
-     * Handler to confirm and proceed with the navigation.
-     */
-    const handleOk = useCallback(() => {
-        setIsDialogOpen(false);
-        if (pendingNavigation) {
-            onSuccess();
-            if (pendingNavigation.type === "popstate") {
-                window.history.go(pendingNavigation.delta);
-            } else if (pendingNavigation.type === "link") {
-                window.location.href = pendingNavigation.href;
-            }
-            setPendingNavigation(null);
-        }
-    }, [onSuccess, pendingNavigation]);
-
-    /**
-     * Event handler for beforeunload to handle page refresh or tab close.
-     */
-    const handleBeforeUnload = useCallback(
-        (e: BeforeUnloadEvent) => {
-            if (when) {
-                e.preventDefault();
-                e.returnValue = "";
-            }
-        },
-        [when]
-    );
-
-    /**
-     * Event handler for popstate to handle back and forward browser buttons.
-     */
-    const handlePopState = useCallback(
-        (e: PopStateEvent) => {
-            if (when) {
-                e.preventDefault();
-                // Assuming backward navigation; adjust delta as needed
-                setPendingNavigation({
-                    type: "popstate",
-                    delta: -1
-                });
-                setIsDialogOpen(true);
-            }
-        },
-        [when]
-    );
-
-    /**
-     * Event handler to intercept link clicks within the application.
-     */
-    const handleLinkClick = useCallback(
-        (e: MouseEvent) => {
-            if (!when) return;
-
-            const target = e.target as HTMLElement;
-            const anchor = target.closest("a[href]") as HTMLAnchorElement | null;
-            if (anchor && anchor.host === window.location.host) {
-                e.preventDefault();
-                const href = anchor.getAttribute("href");
-                if (href) {
-                    setPendingNavigation({
-                        type: "link",
-                        href
-                    });
-                    setIsDialogOpen(true);
-                }
-            }
-        },
-        [when]
-    );
-
-    /**
-     * Effect hook to add and clean up event listeners based on the `when` condition.
-     */
-    useEffect(() => {
-        if (when) {
-            window.addEventListener("beforeunload", handleBeforeUnload);
-            window.addEventListener("popstate", handlePopState);
-            document.addEventListener("click", handleLinkClick);
-        } else {
-            window.removeEventListener("beforeunload", handleBeforeUnload);
-            window.removeEventListener("popstate", handlePopState);
-            document.removeEventListener("click", handleLinkClick);
-        }
-
-        // Cleanup on unmount or when `when` changes
-        return () => {
-            window.removeEventListener("beforeunload", handleBeforeUnload);
-            window.removeEventListener("popstate", handlePopState);
-            document.removeEventListener("click", handleLinkClick);
-        };
-    }, [when, handleBeforeUnload, handlePopState, handleLinkClick]);
-
-    return {
-        navigationWasBlocked: isDialogOpen,
-        handleCancel,
-        handleOk,
-    };
-}