@firecms/core 3.0.0-rc.2 → 3.0.0-rc.4

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<
@@ -321,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";
@@ -349,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;
         }
@@ -396,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) {
@@ -421,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?.();
                         }
@@ -459,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
+                    });
+                }
             }
         }
 
@@ -501,9 +587,29 @@ 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);
     };
 
@@ -535,15 +641,12 @@ export function useHomePageDnd({
         dialogOpenForGroup,
         setDialogOpenForGroup,
         handleRenameGroup,
+        handleDialogClose,
         isHoveringNewGroupDropZone,
         setIsHoveringNewGroupDropZone
     };
 }
 
-/* ─────────────────────────────────────────────────────────── */
-/* New-group drop-zone component                               */
-
-/* ─────────────────────────────────────────────────────────── */
 export function NewGroupDropZone({
                                      disabled,
                                      setIsHovering
@@ -588,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/PropertyCollectionView.tsx

@@ -0,0 +1,329 @@
+import React from "react";
+import { defaultBorderMixin, Typography } from "@firecms/ui";
+import { PreviewSize, PropertyPreview } from "../preview";
+import { ResolvedProperties, ResolvedProperty } from "../types";
+import { getValueInPath } from "../util";
+
+/**
+ * Build a readable label for a path and resolve the property
+ * Supports map and array (including arrays of maps)
+ */
+export function buildPropertyLabelAndGetProperty(
+    properties: ResolvedProperties,
+    key: string
+): { label: string; property: ResolvedProperty | undefined } {
+    if (!key) return {
+        label: "",
+        property: undefined
+    };
+
+    // Parse "a[0].b.c[2]" -> ["a", 0, "b", "c", 2]
+    const segments: (string | number)[] = [];
+    const re = /([^[.\]]+)|\[(\d+)\]/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(key)) !== null) {
+        if (m[1] !== undefined) segments.push(m[1]);
+        else if (m[2] !== undefined) segments.push(Number(m[2]));
+    }
+
+    let currentProps: ResolvedProperties | undefined = properties;
+    let currentProp: ResolvedProperty | undefined;
+    let lastLabel = "";
+
+    const getArrayOfProp = (p?: ResolvedProperty): ResolvedProperty | undefined => {
+        if (!p || p.dataType !== "array") return undefined;
+        return Array.isArray(p.of) ? (p.of[0] as ResolvedProperty) : (p.of as ResolvedProperty | undefined);
+    };
+
+    for (const seg of segments) {
+        if (typeof seg === "number") {
+            // Last segment label should be the index itself
+            lastLabel = `[${seg}]`;
+
+            // Move schema context into the array element
+            if (currentProp?.dataType === "array") {
+                currentProp = getArrayOfProp(currentProp);
+                if (currentProp?.dataType === "map" && currentProp.properties) {
+                    currentProps = currentProp.properties as ResolvedProperties;
+                } else {
+                    currentProps = undefined;
+                }
+            } else {
+                // Index without array schema context
+                currentProp = undefined;
+                currentProps = undefined;
+            }
+            continue;
+        }
+
+        // seg is a string key
+        if (currentProps && (currentProps as any)[seg]) {
+            const nextProp = (currentProps as any)[seg] as ResolvedProperty;
+            currentProp = nextProp;
+            // Last segment label should be the property name (or the raw key)
+            lastLabel = nextProp.name || String(seg);
+
+            if (nextProp.dataType === "map" && nextProp.properties) {
+                currentProps = nextProp.properties as ResolvedProperties;
+            } else if (nextProp.dataType === "array") {
+                // Keep array prop; the next segment (index) will step into its element schema
+                currentProps = undefined;
+            } else {
+                currentProps = undefined;
+            }
+        } else {
+            // Unknown key or no schema context
+            currentProp = undefined;
+            currentProps = undefined;
+            lastLabel = String(seg);
+        }
+    }
+
+    return {
+        label: lastLabel,
+        property: currentProp
+    };
+}
+
+const pathEndsWithIndex = (p: string) => /\[\d+\]$/.test(p);
+
+/**
+ * Improved simple layout for nested changes:
+ * - Map or Array-of-Map -> section header + indented rows
+ * - Leaf or Array-of-Primitives -> single row with label and value
+ */
+export const PropertyCollectionView = ({
+                                           data,
+                                           properties,
+                                           baseKey = "",
+                                           suppressHeader = false,
+                                           size = "small"
+                                       }: {
+    data: any;
+    properties: ResolvedProperties;
+    baseKey?: string;
+    suppressHeader?: boolean;
+    size?: PreviewSize;
+}) => {
+
+    const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
+
+    // Arrays
+    if (Array.isArray(data)) {
+        const {
+            label: arrayLabel,
+            property
+        } = baseKey
+            ? buildPropertyLabelAndGetProperty(properties, baseKey)
+            : {
+                label: "",
+                property: undefined as ResolvedProperty | undefined
+            };
+
+        const ofProp = property?.dataType === "array"
+            ? (Array.isArray(property.of) ? property.of[0] : property.of) as ResolvedProperty | undefined
+            : undefined;
+
+        const isArrayOfMaps = ofProp?.dataType === "map";
+        const isArrayOfPrimitives = property?.dataType === "array" && ofProp && ofProp.dataType !== "map";
+
+        // Array of primitives -> single row
+        if (baseKey && property && isArrayOfPrimitives) {
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            {arrayLabel}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                                         value={data}
+                                         property={property}
+                                         size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Array of maps or unknown -> array header + combined item header (MapName [index]) then content
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                {baseKey && arrayLabel && !suppressHeader && (
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}>
+                        {arrayLabel}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {data.map((item, index) => {
+                        if (item === null || item === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
+
+                        // Combined header text
+                        const itemHeader = isArrayOfMaps && ofProp?.name
+                            ? `${ofProp.name} [${index}]`
+                            : `[${index}]`;
+
+                        return (
+                            <div key={currentKey} className="py-1">
+                                <Typography variant="caption"
+                                            color={"secondary"}
+                                            component={"span"}>
+                                    {itemHeader}
+                                </Typography>
+                                <div className={`pl-4 mt-1 border-l ${defaultBorderMixin}`}>
+                                    <PropertyCollectionView
+                                        data={item}
+                                        properties={properties}
+                                        baseKey={currentKey}
+                                        suppressHeader={true} // don’t repeat the inner map header
+                                        size={size}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Objects (maps or plain objects)
+    if (typeof data === "object" && data !== null) {
+        const {
+            label,
+            property
+        } = baseKey
+            ? buildPropertyLabelAndGetProperty(properties, baseKey)
+            : {
+                label: "",
+                property: undefined as ResolvedProperty | undefined
+            };
+
+        // Non-map leaf-like object -> single row
+        if (baseKey && (!property || property.dataType !== "map" || !property.properties)) {
+            if (!property) return null;
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            {label}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                                         value={data}
+                                         property={property}
+                                         size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Map with defined properties -> show map header only if not suppressed
+        const showMapHeader =
+            baseKey &&
+            !suppressHeader &&
+            property?.dataType === "map" &&
+            (property.name || !pathEndsWithIndex(baseKey));
+
+        const headerText = property?.name || label;
+
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                {showMapHeader && (
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}
+                    >
+                        {headerText}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {Object.entries(data).map(([key, value]) => {
+                        if (value === null || value === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}.${key}` : key;
+                        return (
+                            <PropertyCollectionView
+                                key={currentKey}
+                                data={value}
+                                properties={properties}
+                                baseKey={currentKey}
+                                size={size}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Primitives
+    if (baseKey) {
+        const {
+            label,
+            property
+        } = buildPropertyLabelAndGetProperty(properties, baseKey);
+        if (!property) return null;
+        return (
+            <div
+                className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                <div className="col-span-4 pr-2">
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}
+                                className="break-words">
+                        {label}
+                    </Typography>
+                </div>
+                <div className="col-span-8">
+                    <PropertyPreview propertyKey={baseKey}
+                                     value={data}
+                                     property={property}
+                                     size={size}/>
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export function buildDataFromPaths(values: object, paths: string[]): object {
+    const result = {};
+    paths.forEach(path => {
+        const value = getValueInPath(values, path);
+        if (value === undefined) return;
+
+        // lodash.set would be perfect here
+        const segments = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let current: any = result;
+        segments.forEach((segment, index) => {
+            if (index === segments.length - 1) {
+                current[segment] = value;
+            } else {
+                const nextSegment = segments[index + 1];
+                const isNextAnIndex = /^\d+$/.test(nextSegment);
+                if (!current[segment]) {
+                    if (isNextAnIndex) {
+                        current[segment] = [];
+                    } else {
+                        current[segment] = {};
+                    }
+                }
+                current = current[segment];
+            }
+        });
+    });
+    return result;
+}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -327,15 +327,3 @@ function createFilterField({
     );
 }
 
-function filterableProperty(property: ResolvedProperty, partOfArray = false): boolean {
-    if (partOfArray) {
-        return ["string", "number", "date", "reference"].includes(property.dataType);
-    }
-    if (property.dataType === "array") {
-        if (property.of)
-            return filterableProperty(property.of, true);
-        else
-            return false;
-    }
-    return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
-}

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -55,7 +55,7 @@ export function DateTimeFilterField({
         }
 
         setOperation(op);
-        setInternalValue(newValue === null ? undefined : newValue);
+        setInternalValue(newValue);
 
         const hasNewValue = newValue !== null && Array.isArray(newValue)
             ? newValue.length > 0
@@ -96,6 +96,7 @@ export function DateTimeFilterField({
                     mode={mode}
                     size={"large"}
                     locale={locale}
+                    disabled={internalValue === null}
                     value={internalValue ?? undefined}
                     onChange={(dateValue: Date | null) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -139,7 +139,6 @@ export function StringNumberFilterField({
                                 updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
                         }}
                         endAdornment={internalValue && <IconButton
-                            className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
                             <CloseIcon/>
                         </IconButton>}