@firecms/collection_editor 3.0.0-canary.241 → 3.0.0-canary.244

package/dist/ui/collection_editor/PropertyTree.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { AdditionalFieldDelegate, CMSType, PropertiesOrBuilders, PropertyOrBuilder } from "@firecms/core";
-import { DraggableProvided } from "@hello-pangea/dnd";
 export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     [Key: string]: CMSType;
 }>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable }: {
@@ -17,13 +16,13 @@ export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     inferredPropertyKeys?: string[];
     collectionEditable: boolean;
 }) => import("react/jsx-runtime").JSX.Element)>;
-export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
+export declare function PropertyTreeEntry({ id, propertyKey, namespace, propertyOrBuilder, additionalField, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
+    id: string;
     propertyKey: string;
     namespace?: string;
     propertyOrBuilder: PropertyOrBuilder;
     additionalField?: AdditionalFieldDelegate<any>;
     selectedPropertyKey?: string;
-    provided: DraggableProvided;
     errors: Record<string, any>;
     onPropertyClick?: (propertyKey: string, namespace?: string) => void;
     onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-canary.241",
+  "version": "3.0.0-canary.244",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-canary.241",
-    "@firecms/data_import": "^3.0.0-canary.241",
-    "@firecms/data_import_export": "^3.0.0-canary.241",
-    "@firecms/formex": "^3.0.0-canary.241",
-    "@firecms/schema_inference": "^3.0.0-canary.241",
-    "@firecms/ui": "^3.0.0-canary.241",
+    "@firecms/data_export": "^3.0.0-canary.244",
+    "@firecms/data_import": "^3.0.0-canary.244",
+    "@firecms/data_import_export": "^3.0.0-canary.244",
+    "@firecms/formex": "^3.0.0-canary.244",
+    "@firecms/schema_inference": "^3.0.0-canary.244",
+    "@firecms/ui": "^3.0.0-canary.244",
     "@hello-pangea/dnd": "^17.0.0",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.1"
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5d3c3928250947d0363073d612a8c15f9bc10459"
+  "gitHead": "6b3dcdc942e0fd64e3023b5361c34ec2ac2bb1d3"
 }

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -195,6 +195,7 @@ export function CollectionDetailsForm({
                             {groupOptions?.map((group, index) => {
                                 return <AutocompleteItem
                                     key={index + "_" + group}
+                                    className={"pr-6 pl-14"}
                                     onClick={() => {
                                         setAutoCompleteOpen(false);
                                         setFieldValue("group", group ?? null);
@@ -223,11 +224,11 @@ export function CollectionDetailsForm({
                             position={"start"}
                             size={"large"}
                             allowIndeterminate={true}
-                            label={values.history === null ? "Document history revisions enabled if enabled globally" : (
+                            label={values.history === null || values.history === undefined ? "Document history revisions enabled if enabled globally" : (
                                 values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled"
                             )}
                             onValueChange={(v) => setFieldValue("history", v)}
-                            value={values.history ?? null}
+                            value={values.history === undefined ? null : values.history}
                         />
                         <FieldCaption>
                             When enabled, each document in this collection will have a history of changes.
@@ -343,6 +344,20 @@ export function CollectionDetailsForm({
                                         ))}
                                     </Select>
                                 </div>
+
+                                <div className={"col-span-12"}>
+                                    <BooleanSwitchWithLabel
+                                        position={"start"}
+                                        size={"large"}
+                                        label={values.includeJsonView === undefined || values.includeJsonView ? "Include JSON view" : "Do not include JSON view"}
+                                        onValueChange={(v) => setFieldValue("includeJsonView", v)}
+                                        value={values.includeJsonView === undefined ? true : values.includeJsonView}
+                                    />
+                                    <FieldCaption>
+                                        Include the JSON representation of the document.
+                                    </FieldCaption>
+                                </div>
+
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"

package/src/ui/collection_editor/PropertyTree.tsx

@@ -4,14 +4,30 @@ import equal from "react-fast-compare"
 import {
     AdditionalFieldDelegate,
     CMSType,
-    ErrorBoundary,
     isPropertyBuilder,
     PropertiesOrBuilders,
     PropertyOrBuilder
 } from "@firecms/core";
 import { AutorenewIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
 import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
-import { DragDropContext, Draggable, DraggableProvided, Droppable } from "@hello-pangea/dnd";
+import {
+    closestCenter,
+    DndContext,
+    DragEndEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import {
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable,
+    verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+
+import { CSS } from "@dnd-kit/utilities";
 import { getFullId, getFullIdPath } from "./util";
 import { editableProperty } from "../../utils/entities";
 
@@ -48,103 +64,109 @@ export const PropertyTree = React.memo(
 
         const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
 
-        const onDragEnd = (result: any) => {
-            // dropped outside the list
-            if (!result.destination) {
+        const sensors = useSensors(
+            useSensor(PointerSensor, {
+                activationConstraint: {
+                    distance: 5,
+                }
+            }),
+            useSensor(KeyboardSensor, {
+                coordinateGetter: sortableKeyboardCoordinates,
+            })
+        );
+
+        const handleDragEnd = (event: DragEndEvent) => {
+            const {
+                active,
+                over
+            } = event;
+
+            if (!over || active.id === over.id) {
                 return;
             }
-            const startIndex = result.source.index;
-            const endIndex = result.destination.index;
-
-            const newPropertiesOrder = Array.from(propertiesOrder);
-            const [removed] = newPropertiesOrder.splice(startIndex, 1);
-            newPropertiesOrder.splice(endIndex, 0, removed);
-            if (onPropertyMove)
-                onPropertyMove(newPropertiesOrder, namespace);
-        }
+
+            const activeId = String(active.id);
+            const overId = String(over.id);
+
+            // Extract property keys from the full IDs
+            const activeKey = activeId.includes(".") ? activeId.split(".").pop() : activeId;
+            const overKey = overId.includes(".") ? overId.split(".").pop() : overId;
+
+            if (!activeKey || !overKey) return;
+
+            const oldIndex = propertiesOrder.indexOf(activeKey);
+            const newIndex = propertiesOrder.indexOf(overKey);
+
+            if (oldIndex !== -1 && newIndex !== -1) {
+                const newPropertiesOrder = [...propertiesOrder];
+                const [removed] = newPropertiesOrder.splice(oldIndex, 1);
+                newPropertiesOrder.splice(newIndex, 0, removed);
+
+                if (onPropertyMove) {
+                    onPropertyMove(newPropertiesOrder, namespace);
+                }
+            }
+        };
+
+        const items = propertiesOrder.map(key => getFullId(key, namespace));
 
         return (
-            <>
-
-                <DragDropContext onDragEnd={onDragEnd}>
-                    <Droppable droppableId={`droppable_${namespace}`}>
-                        {(droppableProvided, droppableSnapshot) => (
-                            <div
-                                {...droppableProvided.droppableProps}
-                                ref={droppableProvided.innerRef}
-                                className={className}>
-                                {propertiesOrder && propertiesOrder
-                                    .map((propertyKey: string, index: number) => {
-                                        const property = properties[propertyKey] as PropertyOrBuilder;
-                                        const additionalField = additionalFields?.find(field => field.key === propertyKey);
-
-                                        if (!property && !additionalField) {
-                                            console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
-                                            return null;
-                                        }
-                                        return (
-                                            <Draggable
-                                                key={`array_field_${namespace}_${propertyKey}}`}
-                                                draggableId={`array_field_${namespace}_${propertyKey}}`}
-                                                index={index}>
-                                                {(provided, snapshot) => {
-                                                    return (
-                                                        <ErrorBoundary>
-                                                            <PropertyTreeEntry
-                                                                propertyKey={propertyKey as string}
-                                                                propertyOrBuilder={property}
-                                                                additionalField={additionalField}
-                                                                provided={provided}
-                                                                errors={errors}
-                                                                namespace={namespace}
-                                                                inferredPropertyKeys={inferredPropertyKeys}
-                                                                onPropertyMove={onPropertyMove}
-                                                                onPropertyRemove={onPropertyRemove}
-                                                                onPropertyClick={snapshot.isDragging ? undefined : onPropertyClick}
-                                                                selectedPropertyKey={selectedPropertyKey}
-                                                                collectionEditable={collectionEditable}
-                                                            />
-                                                        </ErrorBoundary>
-                                                    );
-                                                }}
-                                            </Draggable>);
-                                    }).filter(Boolean)}
-
-                                {droppableProvided.placeholder}
-
-                            </div>
-                        )}
-                    </Droppable>
-                </DragDropContext>
-
-            </>
+            <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+                modifiers={[restrictToVerticalAxis]}
+            >
+                <SortableContext
+                    items={items}
+                    strategy={verticalListSortingStrategy}
+                >
+                    <div className={className}>
+
+                        {propertiesOrder && propertiesOrder
+                            .map((propertyKey: string, index: number) => {
+                                const property = properties[propertyKey] as PropertyOrBuilder;
+                                const additionalField = additionalFields?.find(field => field.key === propertyKey);
+
+                                if (!property && !additionalField) {
+                                    console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
+                                    return null;
+                                }
+
+                                const id = getFullId(propertyKey, namespace);
+
+                                return (
+                                    <PropertyTreeEntry
+                                        key={id}
+                                        id={id}
+                                        propertyKey={propertyKey}
+                                        propertyOrBuilder={property}
+                                        additionalField={additionalField}
+                                        errors={errors}
+                                        namespace={namespace}
+                                        inferredPropertyKeys={inferredPropertyKeys}
+                                        onPropertyMove={onPropertyMove}
+                                        onPropertyRemove={onPropertyRemove}
+                                        onPropertyClick={onPropertyClick}
+                                        selectedPropertyKey={selectedPropertyKey}
+                                        collectionEditable={collectionEditable}
+                                    />
+                                );
+                            }).filter(Boolean)}
+                    </div>
+                </SortableContext>
+            </DndContext>
         );
     },
-    (prevProps, nextProps) => {
-
-        const isSelected = nextProps.selectedPropertyKey?.startsWith(nextProps.namespace ?? "");
-        const wasSelected = prevProps.selectedPropertyKey?.startsWith(prevProps.namespace ?? "");
-        if (isSelected || wasSelected)
-            return false;
-
-        return equal(prevProps.properties, nextProps.properties) &&
-            prevProps.propertiesOrder === nextProps.propertiesOrder &&
-            equal(prevProps.additionalFields, nextProps.additionalFields) &&
-            equal(prevProps.errors, nextProps.errors) &&
-            equal(prevProps.onPropertyClick, nextProps.onPropertyClick) &&
-            // equal(prevProps.onPropertyMove, nextProps.onPropertyMove) &&
-            // equal(prevProps.onPropertyRemove, nextProps.onPropertyRemove) &&
-            prevProps.namespace === nextProps.namespace &&
-            prevProps.collectionEditable === nextProps.collectionEditable;
-    }
+    equal
 );
 
 export function PropertyTreeEntry({
+                                      id,
                                       propertyKey,
                                       namespace,
                                       propertyOrBuilder,
                                       additionalField,
-                                      provided,
                                       selectedPropertyKey,
                                       errors,
                                       onPropertyClick,
@@ -153,12 +175,12 @@ export function PropertyTreeEntry({
                                       inferredPropertyKeys,
                                       collectionEditable
                                   }: {
+    id: string;
     propertyKey: string;
     namespace?: string;
     propertyOrBuilder: PropertyOrBuilder;
     additionalField?: AdditionalFieldDelegate<any>;
     selectedPropertyKey?: string;
-    provided: DraggableProvided;
     errors: Record<string, any>;
     onPropertyClick?: (propertyKey: string, namespace?: string) => void;
     onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
@@ -167,8 +189,27 @@ export function PropertyTreeEntry({
     collectionEditable: boolean;
 }) {
 
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging
+    } = useSortable({
+        id
+    });
+
+    const style = {
+        // Key change: use Translate instead of Transform to prevent stretching
+        transform: CSS.Translate.toString(transform),
+        transition,
+        zIndex: isDragging ? 10 : undefined,
+        position: "relative" as const,
+    };
+
     const isPropertyInferred = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
-    const fullId = getFullId(propertyKey, namespace);
+    const fullId = id;
     const fullIdPath = getFullIdPath(propertyKey, namespace);
     const hasError = fullIdPath in errors;
 
@@ -190,65 +231,68 @@ export function PropertyTreeEntry({
         }
     }
 
-    // const hasError = fullId ? getIn(errors, idToPropertiesPath(fullId)) : false;
     const selected = selectedPropertyKey === fullId;
     const editable = propertyOrBuilder && ((collectionEditable && !isPropertyBuilder(propertyOrBuilder)) || editableProperty(propertyOrBuilder));
 
     return (
         <div
-            ref={provided.innerRef}
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
+            ref={setNodeRef}
+            style={style}
             className="relative -ml-8"
         >
-            {subtree && <div
-                className={"absolute border-l " + defaultBorderMixin}
-                style={{
-                    left: "32px",
-                    top: "64px",
-                    bottom: "16px"
-                }}/>}
-
-            {!isPropertyBuilder(propertyOrBuilder) && !additionalField && editable
-                ? <PropertyFieldPreview
-                    property={propertyOrBuilder}
-                    onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
-                    includeName={true}
-                    selected={selected}
-                    hasError={hasError}/>
-                : <NonEditablePropertyPreview name={propertyKey}
-                                              property={propertyOrBuilder}
-                                              onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
-                                              selected={selected}/>}
-
-            <div className="absolute top-2 right-2 flex flex-row ">
-
-                {isPropertyInferred && <Tooltip title={"Inferred property"}>
-                    <AutorenewIcon size="small" className={"p-2"}/>
-                </Tooltip>}
-
-                {onPropertyRemove && <Tooltip title={"Remove"}
-                                              asChild={true}>
-                    <IconButton size="small"
-                                color="inherit"
-                                onClick={() => onPropertyRemove(propertyKey, namespace)}>
-                        <RemoveIcon size={"small"}/>
-                    </IconButton>
-                </Tooltip>}
-
-                {onPropertyMove && <Tooltip title={"Move"}
-                                            asChild={true}>
-                    <IconButton
-                        component={"span"}
-                        size="small"
-                    >
-                        <DragHandleIcon size={"small"}/>
-                    </IconButton>
-                </Tooltip>}
-            </div>
+            <div className="relative">
+                {subtree && <div
+                    className={"absolute border-l " + defaultBorderMixin}
+                    style={{
+                        left: "32px",
+                        top: "64px",
+                        bottom: "16px"
+                    }}/>}
 
-            {subtree && <div className={"ml-16"}>{subtree}</div>}
+                <div>
+                    {!isPropertyBuilder(propertyOrBuilder) && !additionalField && editable
+                        ? <PropertyFieldPreview
+                            property={propertyOrBuilder}
+                            onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
+                            includeName={true}
+                            selected={selected}
+                            hasError={hasError}/>
+                        : <NonEditablePropertyPreview name={propertyKey}
+                                                      property={propertyOrBuilder}
+                                                      onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
+                                                      selected={selected}/>}
+                </div>
+
+                <div className="absolute top-2 right-2 flex flex-row">
+                    {isPropertyInferred && <Tooltip title={"Inferred property"}>
+                        <AutorenewIcon size="small" className={"p-2"}/>
+                    </Tooltip>}
+
+                    {onPropertyRemove && !isPropertyInferred && <Tooltip title={"Remove"}
+                                                                         asChild={true}>
+                        <IconButton size="small"
+                                    color="inherit"
+                                    onClick={() => onPropertyRemove(propertyKey, namespace)}>
+                            <RemoveIcon size={"small"}/>
+                        </IconButton>
+                    </Tooltip>}
+
+                    {onPropertyMove && <Tooltip title={"Move"}
+                                                asChild={true}>
+                        <IconButton
+                            component={"span"}
+                            size="small"
+                            {...attributes}
+                            {...listeners}
+                        >
+                            <DragHandleIcon size={"small"}/>
+                        </IconButton>
+                    </Tooltip>}
+
+                </div>
+
+                {subtree && <div className={"ml-16"}>{subtree}</div>}
+            </div>
         </div>
     );
-
 }

package/src/ui/collection_editor/properties/MapPropertyField.tsx

@@ -107,7 +107,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
             <div className={"col-span-12"}>
                 <BooleanSwitchWithLabel
                     position={"start"}
-                    size={"small"}
+                    size={"medium"}
                     label="Spread children as columns"
                     onValueChange={(v) => setFieldValue("spreadChildren", v)}
                     value={values.spreadChildren ?? false}

package/src/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -19,6 +19,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             label={"Hide from collection"}
+                            size={"medium"}
                             disabled={disabled}
                             form={form}
                             tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
@@ -33,6 +34,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             label={"Read only"}
+                            size={"medium"}
                             disabled={disabled}
                             tooltip={"Is this a read only field. Display only as a preview"}
                             form={form}