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

package/dist/index.es.js

@@ -4,11 +4,14 @@ import { FieldCaption, SearchIconsView, toSnakeCase, singular, IconForView, Arra
 import * as React from "react";
 import React__default, { useContext, useState, useEffect, useMemo, useRef, useDeferredValue } from "react";
 import equal from "react-fast-compare";
-import { cls, Typography, VerticalSplitIcon, Tooltip, Card, SquareIcon, useAutoComplete, Chip, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, IconButton, DebouncedTextField, BooleanSwitchWithLabel, SettingsIcon, CloseIcon, Select, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, CheckIcon, Menu, MoreVertIcon, MenuItem, UndoIcon, SaveIcon } from "@firecms/ui";
+import { cls, Typography, VerticalSplitIcon, Tooltip, Card, SquareIcon, useAutoComplete, Chip, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, IconButton, DebouncedTextField, BooleanSwitchWithLabel, SettingsIcon, CloseIcon, Select, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, DragHandleIcon, defaultBorderMixin, RemoveIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, CheckIcon, Menu, MoreVertIcon, MenuItem, UndoIcon, SaveIcon } from "@firecms/ui";
 import * as Yup from "yup";
 import { useFormex, getIn, Field, useCreateFormex, Formex, clone } from "@firecms/formex";
 import { extractEnumFromValues, buildPropertyFromData, buildEntityPropertiesFromData } from "@firecms/schema_inference";
-import { Draggable, Droppable, DragDropContext } from "@hello-pangea/dnd";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { useSortable, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { CSS } from "@dnd-kit/utilities";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer";
 import { ImportFileUpload, getInferenceType, ImportNewPropertyFieldPreview, DataNewPropertiesMapping, convertDataToEntity, useImportConfig, ImportSaveInProgress } from "@firecms/data_import_export";
@@ -2771,7 +2774,7 @@ function NonEditablePropertyPreview(t0) {
   return t19;
 }
 const PropertyTree = React__default.memo(function PropertyTree2(t0) {
-  const $ = c(26);
+  const $ = c(37);
   const {
     namespace,
     selectedPropertyKey,
@@ -2797,94 +2800,152 @@ const PropertyTree = React__default.memo(function PropertyTree2(t0) {
   }
   const propertiesOrder = t1;
   let t2;
-  if ($[3] !== namespace || $[4] !== onPropertyMove || $[5] !== propertiesOrder) {
-    t2 = (result) => {
-      if (!result.destination) {
-        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);
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      activationConstraint: {
+        distance: 5
       }
     };
-    $[3] = namespace;
-    $[4] = onPropertyMove;
-    $[5] = propertiesOrder;
-    $[6] = t2;
+    $[3] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      coordinateGetter: sortableKeyboardCoordinates
+    };
+    $[4] = t3;
+  } else {
+    t3 = $[4];
   }
-  const onDragEnd = t2;
-  const t3 = `droppable_${namespace}`;
+  const sensors = useSensors(useSensor(PointerSensor, t2), useSensor(KeyboardSensor, t3));
   let t4;
-  if ($[7] !== additionalFields || $[8] !== className || $[9] !== collectionEditable || $[10] !== errors || $[11] !== inferredPropertyKeys || $[12] !== namespace || $[13] !== onPropertyClick || $[14] !== onPropertyMove || $[15] !== onPropertyRemove || $[16] !== properties || $[17] !== propertiesOrder || $[18] !== selectedPropertyKey) {
-    t4 = (droppableProvided, droppableSnapshot) => /* @__PURE__ */ jsxs("div", { ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, className, children: [
-      propertiesOrder && propertiesOrder.map((propertyKey, index) => {
-        const property = properties[propertyKey];
-        const additionalField = additionalFields?.find((field) => field.key === propertyKey);
-        if (!property && !additionalField) {
-          console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
-          return null;
+  if ($[5] !== namespace || $[6] !== onPropertyMove || $[7] !== propertiesOrder) {
+    t4 = (event) => {
+      const {
+        active,
+        over
+      } = event;
+      if (!over || active.id === over.id) {
+        return;
+      }
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      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);
         }
-        return /* @__PURE__ */ jsx(Draggable, { draggableId: `array_field_${namespace}_${propertyKey}}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyTreeEntry, { propertyKey, propertyOrBuilder: property, additionalField, provided, errors, namespace, inferredPropertyKeys, onPropertyMove, onPropertyRemove, onPropertyClick: snapshot.isDragging ? void 0 : onPropertyClick, selectedPropertyKey, collectionEditable }) }) }, `array_field_${namespace}_${propertyKey}}`);
-      }).filter(Boolean),
-      droppableProvided.placeholder
-    ] });
-    $[7] = additionalFields;
-    $[8] = className;
-    $[9] = collectionEditable;
-    $[10] = errors;
-    $[11] = inferredPropertyKeys;
-    $[12] = namespace;
-    $[13] = onPropertyClick;
-    $[14] = onPropertyMove;
-    $[15] = onPropertyRemove;
-    $[16] = properties;
-    $[17] = propertiesOrder;
-    $[18] = selectedPropertyKey;
-    $[19] = t4;
-  } else {
-    t4 = $[19];
+      }
+    };
+    $[5] = namespace;
+    $[6] = onPropertyMove;
+    $[7] = propertiesOrder;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
   }
+  const handleDragEnd = t4;
   let t5;
-  if ($[20] !== t3 || $[21] !== t4) {
-    t5 = /* @__PURE__ */ jsx(Droppable, { droppableId: t3, children: t4 });
-    $[20] = t3;
-    $[21] = t4;
-    $[22] = t5;
+  if ($[9] !== namespace || $[10] !== propertiesOrder) {
+    let t62;
+    if ($[12] !== namespace) {
+      t62 = (key) => getFullId(key, namespace);
+      $[12] = namespace;
+      $[13] = t62;
+    } else {
+      t62 = $[13];
+    }
+    t5 = propertiesOrder.map(t62);
+    $[9] = namespace;
+    $[10] = propertiesOrder;
+    $[11] = t5;
   } else {
-    t5 = $[22];
+    t5 = $[11];
   }
+  const items = t5;
   let t6;
-  if ($[23] !== onDragEnd || $[24] !== t5) {
-    t6 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: t5 }) });
-    $[23] = onDragEnd;
-    $[24] = t5;
-    $[25] = t6;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = [restrictToVerticalAxis];
+    $[14] = t6;
   } else {
-    t6 = $[25];
+    t6 = $[14];
   }
-  return t6;
-}, (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;
-});
+  let t7;
+  if ($[15] !== additionalFields || $[16] !== collectionEditable || $[17] !== errors || $[18] !== inferredPropertyKeys || $[19] !== namespace || $[20] !== onPropertyClick || $[21] !== onPropertyMove || $[22] !== onPropertyRemove || $[23] !== properties || $[24] !== propertiesOrder || $[25] !== selectedPropertyKey) {
+    t7 = propertiesOrder && propertiesOrder.map((propertyKey, index) => {
+      const property = properties[propertyKey];
+      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 /* @__PURE__ */ jsx(PropertyTreeEntry, { id, propertyKey, propertyOrBuilder: property, additionalField, errors, namespace, inferredPropertyKeys, onPropertyMove, onPropertyRemove, onPropertyClick, selectedPropertyKey, collectionEditable }, id);
+    }).filter(Boolean);
+    $[15] = additionalFields;
+    $[16] = collectionEditable;
+    $[17] = errors;
+    $[18] = inferredPropertyKeys;
+    $[19] = namespace;
+    $[20] = onPropertyClick;
+    $[21] = onPropertyMove;
+    $[22] = onPropertyRemove;
+    $[23] = properties;
+    $[24] = propertiesOrder;
+    $[25] = selectedPropertyKey;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== className || $[28] !== t7) {
+    t8 = /* @__PURE__ */ jsx("div", { className, children: t7 });
+    $[27] = className;
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== items || $[31] !== t8) {
+    t9 = /* @__PURE__ */ jsx(SortableContext, { items, strategy: verticalListSortingStrategy, children: t8 });
+    $[30] = items;
+    $[31] = t8;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  let t10;
+  if ($[33] !== handleDragEnd || $[34] !== sensors || $[35] !== t9) {
+    t10 = /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: t6, children: t9 });
+    $[33] = handleDragEnd;
+    $[34] = sensors;
+    $[35] = t9;
+    $[36] = t10;
+  } else {
+    t10 = $[36];
+  }
+  return t10;
+}, equal);
 function PropertyTreeEntry(t0) {
-  const $ = c(53);
+  const $ = c(62);
   const {
+    id,
     propertyKey,
     namespace,
     propertyOrBuilder,
     additionalField,
-    provided,
     selectedPropertyKey,
     errors,
     onPropertyClick,
@@ -2894,157 +2955,201 @@ function PropertyTreeEntry(t0) {
     collectionEditable
   } = t0;
   let t1;
-  if ($[0] !== inferredPropertyKeys || $[1] !== namespace || $[2] !== propertyKey) {
-    t1 = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
-    $[0] = inferredPropertyKeys;
-    $[1] = namespace;
-    $[2] = propertyKey;
-    $[3] = t1;
+  if ($[0] !== id) {
+    t1 = {
+      id
+    };
+    $[0] = id;
+    $[1] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[1];
   }
-  const isPropertyInferred = t1;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable(t1);
   let t2;
-  if ($[4] !== namespace || $[5] !== propertyKey) {
-    t2 = getFullId(propertyKey, namespace);
-    $[4] = namespace;
-    $[5] = propertyKey;
-    $[6] = t2;
+  if ($[2] !== transform) {
+    t2 = CSS.Translate.toString(transform);
+    $[2] = transform;
+    $[3] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[3];
   }
-  const fullId = t2;
+  const t3 = isDragging ? 10 : void 0;
+  let t4;
+  if ($[4] !== t2 || $[5] !== t3 || $[6] !== transition) {
+    t4 = {
+      transform: t2,
+      transition,
+      zIndex: t3,
+      position: "relative"
+    };
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = transition;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const style = t4;
+  let t5;
+  if ($[8] !== inferredPropertyKeys || $[9] !== namespace || $[10] !== propertyKey) {
+    t5 = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
+    $[8] = inferredPropertyKeys;
+    $[9] = namespace;
+    $[10] = propertyKey;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const isPropertyInferred = t5;
+  const fullId = id;
   const fullIdPath = getFullIdPath(propertyKey, namespace);
   const hasError = fullIdPath in errors;
   let subtree;
   if (typeof propertyOrBuilder === "object") {
     const property = propertyOrBuilder;
     if (property.dataType === "map" && property.properties) {
-      let t32;
-      if ($[7] !== collectionEditable || $[8] !== errors || $[9] !== fullId || $[10] !== onPropertyClick || $[11] !== onPropertyMove || $[12] !== onPropertyRemove || $[13] !== property.properties || $[14] !== property.propertiesOrder || $[15] !== selectedPropertyKey) {
-        t32 = /* @__PURE__ */ jsx(PropertyTree, { selectedPropertyKey, namespace: fullId, properties: property.properties, propertiesOrder: property.propertiesOrder, errors, onPropertyClick, onPropertyMove, onPropertyRemove, collectionEditable });
-        $[7] = collectionEditable;
-        $[8] = errors;
-        $[9] = fullId;
-        $[10] = onPropertyClick;
-        $[11] = onPropertyMove;
-        $[12] = onPropertyRemove;
-        $[13] = property.properties;
-        $[14] = property.propertiesOrder;
-        $[15] = selectedPropertyKey;
-        $[16] = t32;
+      let t62;
+      if ($[12] !== collectionEditable || $[13] !== errors || $[14] !== fullId || $[15] !== onPropertyClick || $[16] !== onPropertyMove || $[17] !== onPropertyRemove || $[18] !== property.properties || $[19] !== property.propertiesOrder || $[20] !== selectedPropertyKey) {
+        t62 = /* @__PURE__ */ jsx(PropertyTree, { selectedPropertyKey, namespace: fullId, properties: property.properties, propertiesOrder: property.propertiesOrder, errors, onPropertyClick, onPropertyMove, onPropertyRemove, collectionEditable });
+        $[12] = collectionEditable;
+        $[13] = errors;
+        $[14] = fullId;
+        $[15] = onPropertyClick;
+        $[16] = onPropertyMove;
+        $[17] = onPropertyRemove;
+        $[18] = property.properties;
+        $[19] = property.propertiesOrder;
+        $[20] = selectedPropertyKey;
+        $[21] = t62;
       } else {
-        t32 = $[16];
+        t62 = $[21];
       }
-      subtree = t32;
+      subtree = t62;
     }
   }
   const selected = selectedPropertyKey === fullId;
-  let t3;
-  if ($[17] !== collectionEditable || $[18] !== propertyOrBuilder) {
-    t3 = propertyOrBuilder && (collectionEditable && !isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
-    $[17] = collectionEditable;
-    $[18] = propertyOrBuilder;
-    $[19] = t3;
+  let t6;
+  if ($[22] !== collectionEditable || $[23] !== propertyOrBuilder) {
+    t6 = propertyOrBuilder && (collectionEditable && !isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
+    $[22] = collectionEditable;
+    $[23] = propertyOrBuilder;
+    $[24] = t6;
   } else {
-    t3 = $[19];
+    t6 = $[24];
   }
-  const editable = t3;
-  let t4;
-  if ($[20] !== subtree) {
-    t4 = subtree && /* @__PURE__ */ jsx("div", { className: "absolute border-l " + defaultBorderMixin, style: {
+  const editable = t6;
+  let t7;
+  if ($[25] !== subtree) {
+    t7 = subtree && /* @__PURE__ */ jsx("div", { className: "absolute border-l " + defaultBorderMixin, style: {
       left: "32px",
       top: "64px",
       bottom: "16px"
     } });
-    $[20] = subtree;
-    $[21] = t4;
+    $[25] = subtree;
+    $[26] = t7;
   } else {
-    t4 = $[21];
+    t7 = $[26];
   }
-  let t5;
-  if ($[22] !== additionalField || $[23] !== editable || $[24] !== hasError || $[25] !== namespace || $[26] !== onPropertyClick || $[27] !== propertyKey || $[28] !== propertyOrBuilder || $[29] !== selected) {
-    t5 = !isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ jsx(NonEditablePropertyPreview, { name: propertyKey, property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, selected });
-    $[22] = additionalField;
-    $[23] = editable;
-    $[24] = hasError;
-    $[25] = namespace;
-    $[26] = onPropertyClick;
-    $[27] = propertyKey;
-    $[28] = propertyOrBuilder;
-    $[29] = selected;
-    $[30] = t5;
-  } else {
-    t5 = $[30];
+  let t8;
+  if ($[27] !== additionalField || $[28] !== editable || $[29] !== hasError || $[30] !== namespace || $[31] !== onPropertyClick || $[32] !== propertyKey || $[33] !== propertyOrBuilder || $[34] !== selected) {
+    t8 = /* @__PURE__ */ jsx("div", { children: !isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ jsx(NonEditablePropertyPreview, { name: propertyKey, property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, selected }) });
+    $[27] = additionalField;
+    $[28] = editable;
+    $[29] = hasError;
+    $[30] = namespace;
+    $[31] = onPropertyClick;
+    $[32] = propertyKey;
+    $[33] = propertyOrBuilder;
+    $[34] = selected;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
   }
-  let t6;
-  if ($[31] !== isPropertyInferred) {
-    t6 = isPropertyInferred && /* @__PURE__ */ jsx(Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsx(AutorenewIcon, { size: "small", className: "p-2" }) });
-    $[31] = isPropertyInferred;
-    $[32] = t6;
+  let t9;
+  if ($[36] !== isPropertyInferred) {
+    t9 = isPropertyInferred && /* @__PURE__ */ jsx(Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsx(AutorenewIcon, { size: "small", className: "p-2" }) });
+    $[36] = isPropertyInferred;
+    $[37] = t9;
   } else {
-    t6 = $[32];
+    t9 = $[37];
   }
-  let t7;
-  if ($[33] !== namespace || $[34] !== onPropertyRemove || $[35] !== propertyKey) {
-    t7 = onPropertyRemove && /* @__PURE__ */ jsx(Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsx(RemoveIcon, { size: "small" }) }) });
-    $[33] = namespace;
-    $[34] = onPropertyRemove;
-    $[35] = propertyKey;
-    $[36] = t7;
+  let t10;
+  if ($[38] !== isPropertyInferred || $[39] !== namespace || $[40] !== onPropertyRemove || $[41] !== propertyKey) {
+    t10 = onPropertyRemove && !isPropertyInferred && /* @__PURE__ */ jsx(Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsx(RemoveIcon, { size: "small" }) }) });
+    $[38] = isPropertyInferred;
+    $[39] = namespace;
+    $[40] = onPropertyRemove;
+    $[41] = propertyKey;
+    $[42] = t10;
   } else {
-    t7 = $[36];
+    t10 = $[42];
   }
-  let t8;
-  if ($[37] !== onPropertyMove) {
-    t8 = onPropertyMove && /* @__PURE__ */ jsx(Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { component: "span", size: "small", children: /* @__PURE__ */ jsx(DragHandleIcon, { size: "small" }) }) });
-    $[37] = onPropertyMove;
-    $[38] = t8;
+  let t11;
+  if ($[43] !== attributes || $[44] !== listeners || $[45] !== onPropertyMove) {
+    t11 = onPropertyMove && /* @__PURE__ */ jsx(Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { component: "span", size: "small", ...attributes, ...listeners, children: /* @__PURE__ */ jsx(DragHandleIcon, { size: "small" }) }) });
+    $[43] = attributes;
+    $[44] = listeners;
+    $[45] = onPropertyMove;
+    $[46] = t11;
   } else {
-    t8 = $[38];
+    t11 = $[46];
   }
-  let t9;
-  if ($[39] !== t6 || $[40] !== t7 || $[41] !== t8) {
-    t9 = /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 flex flex-row ", children: [
-      t6,
-      t7,
-      t8
+  let t12;
+  if ($[47] !== t10 || $[48] !== t11 || $[49] !== t9) {
+    t12 = /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 flex flex-row", children: [
+      t9,
+      t10,
+      t11
     ] });
-    $[39] = t6;
-    $[40] = t7;
-    $[41] = t8;
-    $[42] = t9;
+    $[47] = t10;
+    $[48] = t11;
+    $[49] = t9;
+    $[50] = t12;
   } else {
-    t9 = $[42];
+    t12 = $[50];
   }
-  let t10;
-  if ($[43] !== subtree) {
-    t10 = subtree && /* @__PURE__ */ jsx("div", { className: "ml-16", children: subtree });
-    $[43] = subtree;
-    $[44] = t10;
+  let t13;
+  if ($[51] !== subtree) {
+    t13 = subtree && /* @__PURE__ */ jsx("div", { className: "ml-16", children: subtree });
+    $[51] = subtree;
+    $[52] = t13;
   } else {
-    t10 = $[44];
+    t13 = $[52];
   }
-  let t11;
-  if ($[45] !== provided.dragHandleProps || $[46] !== provided.draggableProps || $[47] !== provided.innerRef || $[48] !== t10 || $[49] !== t4 || $[50] !== t5 || $[51] !== t9) {
-    t11 = /* @__PURE__ */ jsxs("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, className: "relative -ml-8", children: [
-      t4,
-      t5,
-      t9,
-      t10
+  let t14;
+  if ($[53] !== t12 || $[54] !== t13 || $[55] !== t7 || $[56] !== t8) {
+    t14 = /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      t7,
+      t8,
+      t12,
+      t13
     ] });
-    $[45] = provided.dragHandleProps;
-    $[46] = provided.draggableProps;
-    $[47] = provided.innerRef;
-    $[48] = t10;
-    $[49] = t4;
-    $[50] = t5;
-    $[51] = t9;
-    $[52] = t11;
+    $[53] = t12;
+    $[54] = t13;
+    $[55] = t7;
+    $[56] = t8;
+    $[57] = t14;
   } else {
-    t11 = $[52];
+    t14 = $[57];
   }
-  return t11;
+  let t15;
+  if ($[58] !== setNodeRef || $[59] !== style || $[60] !== t14) {
+    t15 = /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, className: "relative -ml-8", children: t14 });
+    $[58] = setNodeRef;
+    $[59] = style;
+    $[60] = t14;
+    $[61] = t15;
+  } else {
+    t15 = $[61];
+  }
+  return t15;
 }
 function MapPropertyField(t0) {
   const $ = c(67);
@@ -3258,7 +3363,7 @@ function MapPropertyField(t0) {
   const t19 = values.spreadChildren ?? false;
   let t20;
   if ($[40] !== t18 || $[41] !== t19) {
-    t20 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "small", label: "Spread children as columns", onValueChange: t18, value: t19 });
+    t20 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "medium", label: "Spread children as columns", onValueChange: t18, value: t19 });
     $[40] = t18;
     $[41] = t19;
     $[42] = t20;
@@ -4730,7 +4835,7 @@ function AdvancedPropertyValidation(t0) {
         field,
         form
       } = t22;
-      return /* @__PURE__ */ jsx(SwitchControl, { label: "Hide from collection", disabled, form, tooltip: "Hide this field from the collection view. It will still be visible in the form view", field });
+      return /* @__PURE__ */ jsx(SwitchControl, { label: "Hide from collection", size: "medium", disabled, form, tooltip: "Hide this field from the collection view. It will still be visible in the form view", field });
     } }) });
     $[0] = disabled;
     $[1] = t1;
@@ -4744,7 +4849,7 @@ function AdvancedPropertyValidation(t0) {
         field: field_0,
         form: form_0
       } = t32;
-      return /* @__PURE__ */ jsx(SwitchControl, { label: "Read only", disabled, tooltip: "Is this a read only field. Display only as a preview", form: form_0, field: field_0 });
+      return /* @__PURE__ */ jsx(SwitchControl, { label: "Read only", size: "medium", disabled, tooltip: "Is this a read only field. Display only as a preview", form: form_0, field: field_0 });
     } }) });
     $[2] = disabled;
     $[3] = t2;