@firecms/core 3.0.0-rc.1 → 3.0.0-rc.3

package/src/components/ErrorView.tsx

@@ -26,7 +26,7 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    // console.warn("ErrorView", error)
+    console.warn("ErrorView", JSON.stringify(error))
 
     const body = (
         <div

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,7 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Fuse from "fuse.js";
 import { Container, SearchBar } from "@firecms/ui";
-import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
+import {
+    useCollapsedGroups,
+    useCustomizationController,
+    useFireCMSContext,
+    useNavigationController
+} from "../../hooks";
 import {
     CMSAnalyticsEvent,
     NavigationEntry,
@@ -142,7 +147,6 @@ export function DefaultHomePage({
             allProcessed = allProcessed.filter(
                 (g) =>
                     g.entries.length ||
-                    groupOrderFromNavController.includes(g.name) ||
                     (g.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards)
             );
         }
@@ -176,6 +180,7 @@ export function DefaultHomePage({
     const persistNavigationGroups = (
         latest: { name: string; entries: NavigationEntry[] }[]
     ) => {
+        // Map ALL groups including "Views"
         const draggable: NavigationGroupMapping[] = latest.map((g) => ({
             name: g.name,
             entries: g.entries.map((e) => e.path)
@@ -194,14 +199,13 @@ export function DefaultHomePage({
         onNavigationEntriesUpdate(all);
     };
 
-    const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
-    const isGroupCollapsed = useCallback((name: string) => {
-        return !!collapsedGroups[name];
-    }, [collapsedGroups]);
+    // Use custom hook for collapsed groups with localStorage persistence
+    const groupNames = useMemo(() => [
+        ...items.map(item => item.name),
+        ...(adminGroupData ? [adminGroupData.name] : [])
+    ], [items, adminGroupData]);
 
-    const toggleGroupCollapsed = useCallback((name: string) => {
-        setCollapsedGroups(prev => ({ ...prev, [name]: !prev[name] }));
-    }, []);
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames);
 
 
     const {
@@ -221,37 +225,22 @@ export function DefaultHomePage({
         dialogOpenForGroup,
         setDialogOpenForGroup,
         handleRenameGroup,
+        handleDialogClose,
         isHoveringNewGroupDropZone,
         setIsHoveringNewGroupDropZone
     } = useHomePageDnd({
         items,
         setItems: updateItems,
         disabled: !allowDragAndDrop || performingSearch,
-        onPersist: persistNavigationGroups, // ——► persistence here
+        onPersist: persistNavigationGroups,
         onGroupMoved: (g) =>
             context.analyticsController?.onAnalyticsEvent?.("home_move_group", {
                 name: g
             }),
-        onCardMovedBetweenGroups: (card) => {
-            // Find which group the card was moved to and expand it if collapsed
-            // Check both regular groups and admin group
-            let targetGroup = items.find(group =>
-                group.entries.some(entry => entry.url === card.url)
-            );
-
-            // Also check admin group if not found in regular groups
-            if (!targetGroup && adminGroupData?.entries.some(entry => entry.url === card.url)) {
-                targetGroup = adminGroupData;
-            }
-
-            if (targetGroup && isGroupCollapsed(targetGroup.name)) {
-                toggleGroupCollapsed(targetGroup.name);
-            }
-
+        onCardMovedBetweenGroups: (card) =>
             context.analyticsController?.onAnalyticsEvent?.("home_move_card", {
                 id: card.id
-            });
-        },
+            }),
         onNewGroupDrop: () =>
             context.analyticsController?.onAnalyticsEvent?.(
                 "home_drop_new_group"
@@ -371,7 +360,7 @@ export function DefaultHomePage({
                         items={containers}
                         strategy={verticalListSortingStrategy}
                     >
-                        {items.map((groupData) => {
+                        {items.map((groupData, groupIndex) => {
                             const groupKey = groupData.name;
                             const entriesInGroup = groupData.entries;
 
@@ -394,14 +383,13 @@ export function DefaultHomePage({
 
                             if (
                                 entriesInGroup.length === 0 &&
-                                (AdditionalCards.length === 0 || performingSearch) &&
-                                !groupOrderFromNavController.includes(groupKey)
+                                (AdditionalCards.length === 0 || performingSearch)
                             )
                                 return null;
 
                             return (
                                 <SortableNavigationGroup
-                                    key={groupKey}
+                                    key={`group-${groupIndex}`}
                                     groupName={groupKey}
                                     disabled={dndDisabled}
                                 >
@@ -573,10 +561,9 @@ export function DefaultHomePage({
                     existingGroupNames={items
                         .map((g) => g.name)
                         .filter((n) => n !== dialogOpenForGroup)}
-                    onClose={() => setDialogOpenForGroup(null)}
+                    onClose={handleDialogClose}
                     onRename={(newName) => {
                         handleRenameGroup(dialogOpenForGroup, newName);
-                        setDialogOpenForGroup(null);
                     }}
                 />
             )}

package/src/components/HomePage/HomePageDnD.tsx

@@ -163,13 +163,9 @@ export function SortableNavigationGroup({
     );
 }
 
-/* ─────────────────────────────────────────────────────────── */
-/* Main DnD hook                                               */
-
-/* ─────────────────────────────────────────────────────────── */
 export function useHomePageDnd({
-                                   items: dndItems,
-                                   setItems: setDndItems,
+                                   items,
+                                   setItems,
                                    disabled,
                                    onCardMovedBetweenGroups,
                                    onGroupMoved,
@@ -191,6 +187,9 @@ export function useHomePageDnd({
     onPersist?: (latest: { name: string; entries: NavigationEntry[] }[]) => void;
 }) {
     /* ---------------- local state ---------------- */
+    const dndItems = items;
+    const setDndItems = setItems;
+
     const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
     const [activeIsGroup, setActiveIsGroup] = useState(false);
     const [currentDraggingGroupId, setCurrentDraggingGroupId] =
@@ -200,6 +199,15 @@ export function useHomePageDnd({
     const [dialogOpenForGroup, setDialogOpenForGroup] = useState<string | null>(null);
     const [isHoveringNewGroupDropZone, setIsHoveringNewGroupDropZone] =
         useState(false);
+    const [pendingNewGroupName, setPendingNewGroupName] = useState<string | null>(null);
+    const [stateBeforeNewGroup, setStateBeforeNewGroup] = useState<
+        { name: string; entries: NavigationEntry[] }[] | null
+    >(null);
+
+    /* store the original state before any drag modifications */
+    const preDragItemsRef = useRef<
+        { name: string; entries: NavigationEntry[] }[] | null
+    >(null);
 
     /* store interim state for cross-group moves */
     const interimItemsRef = useRef<
@@ -243,38 +251,11 @@ export function useHomePageDnd({
     const collisionDetection: CollisionDetection = useCallback(
         (args) => {
             if (disabled || !activeId) return [];
-
             if (activeIsGroup) {
                 const groups = args.droppableContainers.filter((c) =>
                     dndItems.some((g) => g.name === c.id)
                 );
                 if (!groups.length) return [];
-
-                // Special handling for dropping at the very beginning (first position)
-                if (groups.length > 0) {
-                    const firstGroup = groups[0];
-                    const firstGroupRect = firstGroup.rect.current;
-                    const { x, y } = args.pointerCoordinates || { x: 0, y: 0 };
-
-                    // If pointer is above the first group's top edge, treat it as dropping at position 0
-                    if (firstGroupRect && y < firstGroupRect.top + 20) {
-                        // Return the first group as target, but we'll handle this specially in onDragEnd
-                        return [{ id: firstGroup.id, data: { insertBefore: true } }];
-                    }
-                }
-
-                // Use closestCorners for better collision detection with collapsed groups
-                // This provides more precise drop zones between groups
-                const cornersResult = closestCorners({
-                    ...args,
-                    droppableContainers: groups
-                });
-
-                if (cornersResult.length) {
-                    return cornersResult;
-                }
-
-                // Fallback to closestCenter if corners detection fails
                 return closestCenter({
                     ...args,
                     droppableContainers: groups
@@ -348,6 +329,9 @@ export function useHomePageDnd({
         setDndKitActiveNode(active);
         if (disabled) return;
 
+        // Capture the original state before any drag modifications
+        preDragItemsRef.current = cloneItemsForDnd(dndItems);
+
         const isGroup = dndItems.some((g) => g.name === active.id);
         if (!active.data.current) active.data.current = {};
         active.data.current.type = isGroup ? "group" : "item";
@@ -376,18 +360,35 @@ export function useHomePageDnd({
 
         if (overCont && activeCont !== overCont) {
             recentlyMovedToNewContainer.current = true;
-            const newState = cloneItemsForDnd(dndItems);
-            const srcIdx = newState.findIndex((g) => g.name === activeCont);
-            const tgtIdx = newState.findIndex((g) => g.name === overCont);
-            if (srcIdx === -1 || tgtIdx === -1) return;
-            const src = newState[srcIdx];
-            const tgt = newState[tgtIdx];
-            const idxInSrc = src.entries.findIndex((e) => e.url === activeIdNow);
-            if (idxInSrc === -1) return;
-            const [moved] = src.entries.splice(idxInSrc, 1);
-            tgt.entries.push(moved);
-            interimItemsRef.current = newState;
-            setDndItems(newState);
+            lastOverId.current = overIdNow;
+
+            // Update state for visual feedback during drag
+            setDndItems((current) => {
+                const newState = cloneItemsForDnd(current);
+                const srcIdx = newState.findIndex((g) => g.name === activeCont);
+                const tgtIdx = newState.findIndex((g) => g.name === overCont);
+                if (srcIdx === -1 || tgtIdx === -1) return current;
+                const src = newState[srcIdx];
+                const tgt = newState[tgtIdx];
+                const idxInSrc = src.entries.findIndex((e) => e.url === activeIdNow);
+                if (idxInSrc === -1) return current;
+                const [moved] = src.entries.splice(idxInSrc, 1);
+
+                // Calculate insertion position - SAME logic as handleDragEnd
+                const overIsContainer = overIdNow === overCont;
+                if (overIsContainer) {
+                    tgt.entries.push(moved);
+                } else {
+                    const overIdx = tgt.entries.findIndex((e) => e.url === overIdNow);
+                    if (overIdx !== -1) {
+                        tgt.entries.splice(overIdx, 0, moved);
+                    } else {
+                        tgt.entries.push(moved);
+                    }
+                }
+
+                return newState;
+            });
         } else if (activeCont === overCont) {
             recentlyMovedToNewContainer.current = false;
         }
@@ -407,21 +408,7 @@ export function useHomePageDnd({
 
         /* ─── group reorder ─── */
         if (activeIsGroup) {
-            // Check if we're dropping above the first group (insertBefore flag)
-            const insertBefore = over.data?.current?.insertBefore;
-
-            if (insertBefore && activeIdNow !== overIdNow) {
-                // Move to first position (before the target group)
-                const from = dndItems.findIndex((g) => g.name === activeIdNow);
-                if (from !== -1 && from !== 0) {
-                    const newState = arrayMove(dndItems, from, 0);
-                    setDndItems(newState);
-                    onPersist?.(newState);
-                    onGroupMoved?.(activeIdNow as string, from, 0);
-                }
-            }
-            // Handle dropping on another group (normal case)
-            else if (
+            if (
                 activeIdNow !== overIdNow &&
                 dndItems.some((g) => g.name === overIdNow)
             ) {
@@ -437,11 +424,26 @@ export function useHomePageDnd({
         }
         /* ─── card move ─── */
         else {
-            const activeCont = findDndContainer(activeIdNow);
+            // CRITICAL: Find source container from ORIGINAL pre-drag state, not current (potentially stale) dndItems
+            const findContainerInState = (id: string, state: { name: string; entries: NavigationEntry[] }[]): string | undefined => {
+                const group = state.find((g) => g.name === id);
+                if (group) return group.name;
+                for (const g of state) {
+                    if (g.entries.some((e) => e.url === id)) return g.name;
+                }
+                return undefined;
+            };
+
+            const sourceState = preDragItemsRef.current || dndItems;
+            const activeCont = findContainerInState(activeIdNow as string, sourceState);
+            const overCont = findDndContainer(overIdNow);
 
             /* drop on new-group zone */
             if (overIdNow === "new-group-drop-zone") {
                 if (activeCont) {
+                    // Save current state before making changes
+                    setStateBeforeNewGroup(cloneItemsForDnd(dndItems));
+
                     const newState = cloneItemsForDnd(dndItems);
                     const srcIdx = newState.findIndex((g) => g.name === activeCont);
                     if (srcIdx !== -1) {
@@ -462,8 +464,10 @@ export function useHomePageDnd({
                                 name: tentative,
                                 entries: [dragged]
                             });
+
+                            // Update local state but DON'T persist yet
                             setDndItems(newState);
-                            onPersist?.(newState);
+                            setPendingNewGroupName(tentative);
                             setDialogOpenForGroup(tentative);
                             onNewGroupDrop?.();
                         }
@@ -500,18 +504,59 @@ export function useHomePageDnd({
                             onPersist?.(newState);
                         }
                     }
-                } else if (
-                    recentlyMovedToNewContainer.current &&
-                    interimItemsRef.current
-                ) {
-                    onPersist?.(interimItemsRef.current);
-                }
+                } else if (overCont && activeCont !== overCont) {
+                    // Card moved between different groups - use CLEAN pre-drag state
+                    const finalState = cloneItemsForDnd(sourceState);
 
-                onCardMovedBetweenGroups?.(
-                    dndItems
-                        .flatMap((g) => g.entries)
-                        .find((e) => e.url === activeIdNow)!
-                );
+                    // Find target container from clean state too
+                    const finalOverId = lastOverId.current || overIdNow;
+                    const cleanOverCont = findContainerInState(finalOverId as string, sourceState) || overCont;
+
+                    const srcIdx = finalState.findIndex((g) => g.name === activeCont);
+                    const tgtIdx = finalState.findIndex((g) => g.name === cleanOverCont);
+
+                    if (srcIdx !== -1 && tgtIdx !== -1) {
+                        const src = finalState[srcIdx];
+                        const tgt = finalState[tgtIdx];
+                        const idxInSrc = src.entries.findIndex((e) => e.url === activeIdNow);
+
+                        if (idxInSrc !== -1) {
+                            // Remove from source
+                            const [moved] = src.entries.splice(idxInSrc, 1);
+
+                            // Calculate insertion position in target
+                            const overIsContainer = finalOverId === cleanOverCont;
+                            if (overIsContainer) {
+                                tgt.entries.push(moved);
+                            } else {
+                                const overIdx = tgt.entries.findIndex((e) => e.url === finalOverId);
+                                if (overIdx !== -1) {
+                                    tgt.entries.splice(overIdx, 0, moved);
+                                } else {
+                                    tgt.entries.push(moved);
+                                }
+                            }
+
+                            // Remove empty source group if needed
+                            if (src.entries.length === 0) {
+                                finalState.splice(srcIdx, 1);
+                            }
+
+                            setDndItems(finalState);
+                            onPersist?.(finalState);
+
+                            onCardMovedBetweenGroups?.(moved);
+                        }
+                    }
+                } else if (recentlyMovedToNewContainer.current) {
+                    // This shouldn't happen but log it for debugging
+                    console.error("Move between containers detected but conditions not met", {
+                        activeCont,
+                        overCont,
+                        activeIdNow,
+                        overIdNow
+                    });
+                }
             }
         }
 
@@ -527,9 +572,7 @@ export function useHomePageDnd({
         recentlyMovedToNewContainer.current = false;
     };
 
-    const handleDragCancel = () => {
-        resetDragState();
-    };
+    const handleDragCancel = () => resetDragState();
 
     /* ---------------- group rename ---------------- */
     const handleRenameGroup = (oldName: string, newName: string) => {
@@ -544,9 +587,30 @@ export function useHomePageDnd({
                 ...updated[idx],
                 name: newName
             };
-            onPersist?.(updated); // <- ensure rename is saved
+
+            // Persist after successful rename
+            onPersist?.(updated);
             return updated;
         });
+
+        // Clear all pending state
+        setPendingNewGroupName(null);
+        setStateBeforeNewGroup(null);
+        setDialogOpenForGroup(null);
+    };
+
+    /* Handle dialog close without renaming */
+    const handleDialogClose = () => {
+        // If there's a pending new group that wasn't renamed, restore previous state
+        if (pendingNewGroupName && dialogOpenForGroup === pendingNewGroupName && stateBeforeNewGroup) {
+            // Restore the state from before the new group was created
+            setDndItems(stateBeforeNewGroup);
+        }
+
+        // Clear all pending state
+        setPendingNewGroupName(null);
+        setStateBeforeNewGroup(null);
+        setDialogOpenForGroup(null);
     };
 
     /* ---------------- public API ---------------- */
@@ -577,15 +641,12 @@ export function useHomePageDnd({
         dialogOpenForGroup,
         setDialogOpenForGroup,
         handleRenameGroup,
+        handleDialogClose,
         isHoveringNewGroupDropZone,
         setIsHoveringNewGroupDropZone
     };
 }
 
-/* ─────────────────────────────────────────────────────────── */
-/* New-group drop-zone component                               */
-
-/* ─────────────────────────────────────────────────────────── */
 export function NewGroupDropZone({
                                      disabled,
                                      setIsHovering
@@ -630,8 +691,7 @@ export function NewGroupDropZone({
                 isOver
                     ? "bg-surface-accent-100 dark:bg-surface-accent-800 border-surface-300 dark:border-surface-600"
                     : "bg-surface-50 dark:bg-surface-900 border-surface-200 dark:border-surface-700"
-            )}
-        >
+            )}>
             <div className="text-center p-4">
                 <span className="block font-medium text-sm">
                     Drop here to create a new group

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@firecms/ui";
 
 interface RenameGroupDialogProps {
@@ -9,7 +9,13 @@ interface RenameGroupDialogProps {
     onRename: (newName: string) => void;
 }
 
-export function RenameGroupDialog({ open, initialName, existingGroupNames, onClose, onRename }: RenameGroupDialogProps) {
+export function RenameGroupDialog({
+                                      open,
+                                      initialName,
+                                      existingGroupNames,
+                                      onClose,
+                                      onRename
+                                  }: RenameGroupDialogProps) {
     const [name, setName] = useState(initialName);
     const [error, setError] = useState<string | null>(null);
     const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null); // Create a ref for the input
@@ -86,7 +92,7 @@ export function RenameGroupDialog({ open, initialName, existingGroupNames, onClo
     if (!open) return null;
 
     return (
-        <Dialog open={open} onOpenChange={onClose}>
+        <Dialog open={open}>
             <DialogTitle>Rename Group</DialogTitle>
             <DialogContent>
                 <TextField