@firecms/core 3.5.1 → 3.5.2-canary.09e1281

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/locales/de.ts

@@ -651,6 +651,7 @@ export const de: FireCMSTranslations = {
     editor_cancel: "Abbrechen",
     editor_remove_link: "Link entfernen",
     editor_paste_or_type_link: "Link einfügen oder eintippen",
+    editor_invalid_url: "Ungültige URL",
     editor_open_in_new_window: "In neuem Fenster öffnen",
     editor_bold: "Fett",
     editor_italic: "Kursiv",

package/src/locales/en.ts

@@ -665,6 +665,7 @@ export const en: FireCMSTranslations = {
     editor_cancel: "Cancel",
     editor_remove_link: "Remove link",
     editor_paste_or_type_link: "Paste or type link",
+    editor_invalid_url: "Invalid URL",
     editor_open_in_new_window: "Open in new window",
     editor_bold: "Bold",
     editor_italic: "Italic",

package/src/locales/es.ts

@@ -663,6 +663,7 @@ export const es: FireCMSTranslations = {
     editor_cancel: "Cancelar",
     editor_remove_link: "Eliminar enlace",
     editor_paste_or_type_link: "Pega o escribe el enlace",
+    editor_invalid_url: "URL no válida",
     editor_open_in_new_window: "Abrir en una ventana nueva",
     editor_bold: "Negrita",
     editor_italic: "Cursiva",

package/src/locales/fr.ts

@@ -651,6 +651,7 @@ export const fr: FireCMSTranslations = {
     editor_cancel: "Annuler",
     editor_remove_link: "Supprimer le lien",
     editor_paste_or_type_link: "Coller ou taper le lien",
+    editor_invalid_url: "URL invalide",
     editor_open_in_new_window: "Ouvrir dans une nouvelle fenêtre",
     editor_bold: "Gras",
     editor_italic: "Italique",

package/src/locales/hi.ts

@@ -651,6 +651,7 @@ export const hi: FireCMSTranslations = {
     editor_cancel: "रद्द करें",
     editor_remove_link: "लिंक हटाएं",
     editor_paste_or_type_link: "लिंक पेस्ट करें या टाइप करें",
+    editor_invalid_url: "अमान्य URL",
     editor_open_in_new_window: "नई विंडो में खोलें",
     editor_bold: "बोल्ड",
     editor_italic: "इटैलिक",

package/src/locales/it.ts

@@ -651,6 +651,7 @@ export const it: FireCMSTranslations = {
     editor_cancel: "Annulla",
     editor_remove_link: "Rimuovi link",
     editor_paste_or_type_link: "Incolla o digita il link",
+    editor_invalid_url: "URL non valido",
     editor_open_in_new_window: "Apri in una nuova finestra",
     editor_bold: "Grassetto",
     editor_italic: "Corsivo",

package/src/locales/pl.ts

@@ -655,6 +655,7 @@ export const pl: FireCMSTranslations = {
     editor_cancel: "Anuluj",
     editor_remove_link: "Usuń link",
     editor_paste_or_type_link: "Wklej lub wpisz link",
+    editor_invalid_url: "Nieprawidłowy URL",
     editor_open_in_new_window: "Otwórz w nowym oknie",
     editor_bold: "Pogrubienie",
     editor_italic: "Kursywa",

package/src/locales/pt.ts

@@ -660,6 +660,7 @@ export const pt: FireCMSTranslations = {
     editor_cancel: "Cancelar",
     editor_remove_link: "Remover ligação",
     editor_paste_or_type_link: "Cole ou escreva a ligação",
+    editor_invalid_url: "URL inválido",
     editor_open_in_new_window: "Abrir numa nova janela",
     editor_bold: "Negrito",
     editor_italic: "Itálico",

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/src/types/translations.ts

@@ -708,6 +708,7 @@ export interface FireCMSTranslations {
     editor_cancel: string;
     editor_remove_link: string;
     editor_paste_or_type_link: string;
+    editor_invalid_url: string;
     editor_open_in_new_window: string;
     editor_bold: string;
     editor_italic: string;