@firecms/core 3.0.0-canary.242 → 3.0.0-canary.245

package/src/components/HomePage/DefaultHomePage.tsx

@@ -114,6 +114,7 @@ export function DefaultHomePage({
                     );
                 })}
         </>;
+
         additionalPluginChildrenStart = <div className={"flex flex-col gap-2"}>
             {customizationController.plugins.filter(plugin => plugin.homePage?.additionalChildrenStart)
                 .map((plugin, i) => {

package/src/components/VirtualTable/VirtualTable.tsx

@@ -115,7 +115,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              endAdornment,
                                                              AddColumnComponent,
                                                              initialScroll = 0,
-                                                             debug
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -171,7 +170,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         });
 
         const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
-            if (debug) console.log("onColumnResizeInternal", params);
             setColumns(prevColumns =>
                 prevColumns.map((column) =>
                     column.key === params.column.key ? params.column : column
@@ -180,8 +178,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, []);
 
         const onColumnResizeEndInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
-            if (debug)
-                console.log("onColumnResizeEndInternal", params);
             setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
             if (onColumnResize) {
                 onColumnResize(params);
@@ -192,14 +188,10 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const filterRef = useRef<VirtualTableFilterValues<any> | undefined>();
 
         useEffect(() => {
-            if (debug)
-                console.log("Filter updated", filterInput);
             filterRef.current = filterInput;
         }, [filterInput]);
 
         const scrollToTop = useCallback(() => {
-            if (debug)
-                console.log("scrollToTop");
             endReachCallbackThreshold.current = 0;
             if (tableRef.current) {
                 tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
@@ -208,9 +200,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const onColumnSort = useCallback((key: string) => {
 
-            if (debug)
-                console.log("onColumnSort", key);
-
             const isDesc = sortByProperty === key && currentSort === "desc";
             const isAsc = sortByProperty === key && currentSort === "asc";
             const newSort = isAsc ? "desc" : (isDesc ? undefined : "asc");
@@ -238,12 +227,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [checkFilterCombination, currentSort, onFilterUpdate, onResetPagination, onSortByUpdate, scrollToTop, sortByProperty]);
 
         const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
-        if (debug)
-            console.log("maxScroll", maxScroll);
 
         const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (debug)
-                console.log("onEndReachedInternal", scrollOffset, endReachCallbackThreshold.current + endOffset);
             if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
                 endReachCallbackThreshold.current = scrollOffset;
                 onEndReached();
@@ -259,12 +244,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
         }) => {
-            if (debug)
-                console.log("onScroll", {
-                    scrollDirection,
-                    scrollOffset,
-                    scrollUpdateWasRequested
-                });
             if (onScrollProp) {
                 debouncedScroll({
                     scrollDirection,
@@ -277,8 +256,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [maxScroll, onEndReachedInternal]);
 
         const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => {
-            if (debug)
-                console.log("onFilterUpdateInternal", column, filterForProperty);
 
             endReachCallbackThreshold.current = 0;
             const filter = filterRef.current;
@@ -341,9 +318,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             AddColumnComponent
         };
 
-        if (debug)
-            console.log("VirtualTable render", virtualListController);
-
         return (
             <div
                 ref={measureRef}

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -162,11 +162,6 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     initialScroll?: number;
 
-    /**
-     * Debug mode
-     */
-    debug?: boolean;
-
 }
 
 export type CellRendererParams<T = any> = {

package/src/core/EntityEditView.tsx

@@ -255,6 +255,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 <ErrorBoundary>
                     {usedFormContext && <Builder
                         collection={collection}
+                        parentCollectionIds={parentCollectionIds}
                         entity={usedEntity}
                         modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
                         formContext={usedFormContext}

package/src/core/EntitySidePanel.tsx

@@ -74,19 +74,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         return navigationController.getParentCollectionIds(path);
     }, [navigationController, path]);
 
-    const collection = useMemo(() => {
-        if (props.collection) {
-            return props.collection;
-        }
-
-        const registryCollection = navigationController.getCollection(path);
-        if (registryCollection) {
-            return registryCollection;
-        }
-
-        console.error("ERROR: No collection found in path `", path, "`. Entity id: ", entityId);
-        throw Error("ERROR: No collection found in path `" + path + "`. Make sure you have defined a collection for this path in the root navigation.");
-    }, [navigationController, props.collection]);
+    const collection = props.collection ?? navigationController.getCollection(path);
 
     useEffect(() => {
         function beforeunload(e: any) {

package/src/form/components/CustomIdField.tsx

@@ -103,7 +103,9 @@ export function CustomIdField<M extends Record<string, any>>({
                     size={"large"}
                     error={error}
                     fullWidth={true}
-                    onValueChange={(v) => onChange(v as string)}
+                    onValueChange={(v) => {
+                        onChange(v as string);
+                    }}
                     {...fieldProps}
                     renderValue={(option) => {
                         const enumConfig = enumValues.find(e => e.id === option);

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
 import {
-    ArrayProperty,
     FieldProps,
     PropertyOrBuilder,
     ResolvedArrayProperty,
@@ -14,7 +13,23 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
 import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
 import { useAuthController, useSnackbarController, useStorageSource } from "../../hooks";
-import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import {
+    closestCenter,
+    DndContext,
+    DragEndEvent,
+    DragStartEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import {
+    horizontalListSortingStrategy,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
 import { StorageItemPreview } from "../components/StorageItemPreview";
@@ -36,13 +51,6 @@ const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0
 
 type StorageUploadFieldProps = FieldProps<string | string[]>;
 
-/**
- * Field that allows to upload files to Google Cloud Storage.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
 export function StorageUploadFieldBinding({
                                               propertyKey,
                                               value,
@@ -132,13 +140,104 @@ export function StorageUploadFieldBinding({
     );
 }
 
+interface SortableStorageItemProps {
+    id: number;
+    entry: StorageFieldItem;
+    property: ResolvedStringProperty;
+    name: string;
+    metadata?: Record<string, unknown>;
+    storagePathBuilder: (file: File) => string;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+    onClear: (clearedStoragePathOrDownloadUrl: string) => void;
+    disabled: boolean;
+    isSortable: boolean; // Kept for consistency, though dnd-kit handles sortability via context
+}
+
+function SortableStorageItem({
+                                 id,
+                                 entry,
+                                 property,
+                                 name,
+                                 metadata,
+                                 storagePathBuilder,
+                                 onFileUploadComplete,
+                                 onClear,
+                                 disabled,
+                                 isSortable // This prop might be redundant if SortableContext is always used for multiple items
+                             }: SortableStorageItemProps) {
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging
+    } = useSortable({ id });
+
+    const style: React.CSSProperties = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isDragging ? 100 : undefined, // Higher z-index when dragging
+        opacity: isDragging ? 0.8 : 1 // Slight opacity for dragged item
+    };
+
+    const getImageSizeNumber = (previewSize: PreviewSize): number => {
+        switch (previewSize) {
+            case "small":
+                return 40;
+            case "medium":
+                return 118; // As per original logic for multiple items
+            case "large":
+                return 220; // As per original logic for single item
+            default:
+                return 118;
+        }
+    };
+
+    let child: React.ReactNode;
+    if (entry.storagePathOrDownloadUrl) {
+        child = (
+            <StorageItemPreview
+                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
+                property={property}
+                disabled={disabled}
+                value={entry.storagePathOrDownloadUrl}
+                onRemove={() => onClear(entry.storagePathOrDownloadUrl!)}
+                size={entry.size}/>
+        );
+    } else if (entry.file) {
+        child = (
+            <StorageUploadProgress
+                entry={entry}
+                metadata={metadata}
+                storagePath={storagePathBuilder(entry.file)}
+                onFileUploadComplete={onFileUploadComplete}
+                imageSize={getImageSizeNumber(entry.size)}
+                simple={false}
+            />
+        );
+    }
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            {...attributes}
+            {...listeners}
+            className={cls("rounded-md m-1")} // Added margin for spacing between items
+            tabIndex={-1}
+        >
+            {child}
+        </div>
+    );
+}
+
 function FileDropComponent({
                                storage,
                                disabled,
-                               isDraggingOver,
                                onFilesAdded,
                                multipleFilesSupported,
-                               droppableProvided,
                                autoFocus,
                                internalValue,
                                property,
@@ -146,26 +245,24 @@ function FileDropComponent({
                                metadata,
                                storagePathBuilder,
                                onFileUploadComplete,
-                               size,
                                name,
-                               helpText
+                               helpText,
+                               isDndItemDragging // New prop to disable dropzone when internal D&D is active
                            }: {
     storage: StorageConfig,
     disabled: boolean,
-    isDraggingOver: boolean,
-    droppableProvided: any,
-    onFilesAdded: (acceptedFiles: File[]) => void,
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>, // useStorageUploadController returns Promise<void>
     multipleFilesSupported: boolean,
     autoFocus: boolean,
     internalValue: StorageFieldItem[],
     property: ResolvedStringProperty,
     onClear: (clearedStoragePathOrDownloadUrl: string) => void,
-    metadata: any,
+    metadata?: any,
     storagePathBuilder: (file: File) => string,
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
-    size: PreviewSize,
     name: string,
-    helpText: string
+    helpText: string,
+    isDndItemDragging?: boolean
 }) {
 
     const snackbarContext = useSnackbarController();
@@ -173,16 +270,19 @@ function FileDropComponent({
     const {
         getRootProps,
         getInputProps,
-        isDragActive,
+        isDragActive, // This is for files dragged from OS
         isDragAccept,
         isDragReject
     } = useDropzone({
-            accept: storage.acceptedFiles ? storage.acceptedFiles.map(e => ({ [e]: [] })).reduce((a, b) => ({ ...a, ...b }), {}) : undefined,
-            disabled: disabled || isDraggingOver,
+            accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
+                ...acc,
+                [ext]: []
+            }), {}) : undefined,
+            disabled: disabled || isDndItemDragging, // Disable if form field is disabled OR an internal item is being dragged
             noDragEventsBubbling: true,
             maxSize: storage.maxSize,
             onDrop: onFilesAdded,
-            onDropRejected: (fileRejections, event) => {
+            onDropRejected: (fileRejections) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
                         console.error("Error uploading file: ", error);
@@ -211,79 +311,44 @@ function FileDropComponent({
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
-                multipleFilesSupported && internalValue.length ? "" : "flex",
+                multipleFilesSupported && internalValue.length === 0 && "flex", // Keep flex for empty state centering
                 {
                     [nonActiveDropClasses]: !isDragActive,
-                    [activeDropClasses]: isDragActive,
-                    [rejectDropClasses]: isDragReject,
-                    [acceptDropClasses]: isDragAccept,
-                    [disabledClasses]: disabled
+                    [activeDropClasses]: isDragActive, // OS file drag active
+                    [rejectDropClasses]: isDragReject, // OS file drag reject
+                    [acceptDropClasses]: isDragAccept, // OS file drag accept
+                    [disabledClasses]: disabled || isDndItemDragging // Visually disable if internal drag
                 })}
         >
             <div
-                {...droppableProvided.droppableProps}
-                ref={droppableProvided.innerRef}
                 className={cls("flex items-center p-1 no-scrollbar",
-                    multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
-                    multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
+                    multipleFilesSupported && internalValue.length ? "flex-row overflow-x-auto" : "flex-col", // flex-col for single or empty
+                    internalValue.length === 0 && "min-h-[250px] justify-center", // Centering for empty dropzone
+                    multipleFilesSupported && internalValue.length > 0 && "min-h-[180px]", // Min height for multiple items
+                    !multipleFilesSupported && internalValue.length > 0 && "min-h-[250px]" // Min height for single item
                 )}
             >
-
                 <input
                     autoFocus={autoFocus}
                     {...getInputProps()} />
 
-                {internalValue.map((entry, index) => {
-                    let child: any;
-                    if (entry.storagePathOrDownloadUrl) {
-                        child = (
-                            <StorageItemPreview
-                                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
-                                property={property}
-                                disabled={disabled}
-                                value={entry.storagePathOrDownloadUrl}
-                                onRemove={onClear}
-                                size={entry.size}/>
-                        );
-                    } else if (entry.file) {
-                        child = (
-                            <StorageUploadProgress
-                                entry={entry}
-                                metadata={metadata}
-                                storagePath={storagePathBuilder(entry.file)}
-                                onFileUploadComplete={onFileUploadComplete}
-                                imageSize={size === "large" ? 220 : 118}
-                                simple={false}
-                            />
-                        );
-                    }
-
-                    return (
-                        <Draggable
-                            key={`array_field_${name}_${entry.id}`}
-                            draggableId={`array_field_${name}_${entry.id}`}
-                            index={index}>
-                            {(provided, snapshot) => (
-                                <div
-                                    tabIndex={-1}
-                                    ref={provided.innerRef}
-                                    {...provided.draggableProps}
-                                    {...provided.dragHandleProps}
-                                    className={cls("rounded-md")}
-                                    style={{
-                                        ...provided.draggableProps.style
-                                    }}
-                                >
-                                    {child}
-                                </div>
-                            )}
-                        </Draggable>
-                    );
-                })
-                }
-
-                {droppableProvided.placeholder}
-
+                {internalValue.map((entry) => (
+                    <SortableStorageItem
+                        key={entry.id}
+                        id={entry.id}
+                        entry={entry}
+                        property={property}
+                        name={name}
+                        metadata={metadata}
+                        storagePathBuilder={storagePathBuilder}
+                        onFileUploadComplete={onFileUploadComplete}
+                        onClear={onClear}
+                        disabled={disabled}
+                        isSortable={multipleFilesSupported}
+                    />
+                ))}
+
+                {/* Placeholder for empty dropzone text is handled by the outer Typography */}
             </div>
 
             <div
@@ -294,7 +359,6 @@ function FileDropComponent({
                     {helpText}
                 </Typography>
             </div>
-
         </div>
     );
 }
@@ -309,7 +373,7 @@ export interface StorageUploadProps {
     autoFocus: boolean;
     disabled: boolean;
     storage: StorageConfig;
-    onFilesAdded: (acceptedFiles: File[]) => void;
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>; // Updated from useStorageUploadController
     storagePathBuilder: (file: File) => string;
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
 }
@@ -317,7 +381,7 @@ export interface StorageUploadProps {
 export function StorageUpload({
                                   property,
                                   name,
-                                  value,
+                                  value, // This is internalValue from useStorageUploadController
                                   setInternalValue,
                                   onChange,
                                   multipleFilesSupported,
@@ -344,10 +408,10 @@ export function StorageUpload({
     }
 
     const metadata: Record<string, unknown> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "medium" : "large";
+    const [isDndItemDragging, setIsDndItemDragging] = useState(false);
 
     const moveItem = useCallback((fromIndex: number, toIndex: number) => {
-        if (!multipleFilesSupported) return;
+        if (!multipleFilesSupported || fromIndex === toIndex) return;
         const newValue = [...value];
         const item = newValue[fromIndex];
         newValue.splice(fromIndex, 1);
@@ -359,84 +423,88 @@ export function StorageUpload({
         onChange(fieldValue);
     }, [multipleFilesSupported, onChange, setInternalValue, value]);
 
-    const onDragEnd = useCallback((result: any) => {
-        // dropped outside the list
-        if (!result.destination) {
-            return;
-        }
-
-        moveItem(result.source.index, result.destination.index);
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 5, // Start dragging after 5px movement
+            },
+        }),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        })
+    );
 
-    }, [moveItem])
+    const handleDragStart = useCallback((event: DragStartEvent) => {
+        setIsDndItemDragging(true);
+    }, []);
+
+    const handleDragEnd = useCallback((event: DragEndEvent) => {
+        setIsDndItemDragging(false);
+        const {
+            active,
+            over
+        } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = value.findIndex(item => item.id === active.id);
+            const newIndex = value.findIndex(item => item.id === over.id);
+            if (oldIndex !== -1 && newIndex !== -1) {
+                moveItem(oldIndex, newIndex);
+            }
+        }
+    }, [value, moveItem]);
 
     const onClear = useCallback((clearedStoragePathOrDownloadUrl: string) => {
+        let newValue: StorageFieldItem[];
         if (multipleFilesSupported) {
-            const newValue: StorageFieldItem[] = value.filter(v => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
+            newValue = value.filter(v => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
             onChange(newValue.filter(v => !!v.storagePathOrDownloadUrl).map(v => v.storagePathOrDownloadUrl as string));
-            setInternalValue(newValue);
         } else {
+            newValue = [];
             onChange(null);
-            setInternalValue([]);
         }
-    }, [value, multipleFilesSupported, onChange]);
+        setInternalValue(newValue);
+    }, [value, multipleFilesSupported, onChange, setInternalValue]);
 
     const helpText = multipleFilesSupported
-        ? "Drag 'n' drop some files here, or click to select files"
+        ? "Drag 'n' drop some files here, or click to select files. Drag to reorder."
         : "Drag 'n' drop a file here, or click to select one";
 
     const renderProperty: ResolvedStringProperty = multipleFilesSupported
-        ? (property as ArrayProperty<string[]>).of as ResolvedStringProperty
+        ? (property as ResolvedArrayProperty<string[]>).of as ResolvedStringProperty
         : property as ResolvedStringProperty;
 
-    return (
-        <DragDropContext onDragEnd={onDragEnd}>
-            <Droppable
-                droppableId={`droppable_${name}`}
-                direction="horizontal"
-                renderClone={(provided, snapshot, rubric) => {
-                    const entry = value[rubric.source.index];
-                    return (
-                        <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            style={
-                                provided.draggableProps.style
-                            }
-                            className="rounded"
-                        >
-                            <StorageItemPreview
-                                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
-                                placeholder={true}
-                                property={renderProperty}
-                                disabled={true}
-                                value={entry.storagePathOrDownloadUrl as string}
-                                onRemove={onClear}
-                                size={entry.size}/>
-                        </div>
-                    );
-                }}
-            >
-                {(provided, snapshot) => {
-                    return <FileDropComponent storage={storage}
-                                              disabled={disabled}
-                                              isDraggingOver={snapshot.isDraggingOver}
-                                              droppableProvided={provided}
-                                              onFilesAdded={onFilesAdded}
-                                              multipleFilesSupported={multipleFilesSupported}
-                                              autoFocus={autoFocus}
-                                              internalValue={value}
-                                              property={renderProperty}
-                                              onClear={onClear}
-                                              metadata={metadata}
-                                              storagePathBuilder={storagePathBuilder}
-                                              onFileUploadComplete={onFileUploadComplete}
-                                              size={size}
-                                              name={name}
-                                              helpText={helpText}/>
-                }}
-            </Droppable>
-        </DragDropContext>
-    );
+    const fileDropProps = {
+        storage,
+        disabled,
+        onFilesAdded,
+        multipleFilesSupported,
+        autoFocus,
+        internalValue: value, // Pass current internalValue
+        property: renderProperty,
+        onClear,
+        metadata,
+        storagePathBuilder,
+        onFileUploadComplete,
+        name,
+        helpText,
+        isDndItemDragging // Pass this down
+    };
 
+    if (multipleFilesSupported) {
+        return (
+            <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+            >
+                <SortableContext items={value.map(v => v.id)} strategy={horizontalListSortingStrategy}>
+                    <FileDropComponent {...fileDropProps} />
+                </SortableContext>
+            </DndContext>
+        );
+    } else {
+        // For single file, no D&D context is needed
+        return <FileDropComponent {...fileDropProps} isDndItemDragging={false}/>;
+    }
 }