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

package/dist/index.es.js

@@ -14,7 +14,10 @@ import * as locales from "date-fns/locale";
 import useMeasure from "react-use-measure";
 import * as yup from "yup";
 import { FixedSizeList } from "react-window";
-import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { useDropzone } from "react-dropzone";
 import Resizer from "react-image-file-resizer";
 import { FireCMSEditor } from "@firecms/editor";
@@ -4307,7 +4310,7 @@ function useEntityFetch(t0) {
           }
         } else {
           onEntityUpdate(void 0);
-          return _temp3$4;
+          return _temp3$5;
         }
       }
     };
@@ -4348,7 +4351,7 @@ function useEntityFetch(t0) {
   }
   return t5;
 }
-function _temp3$4() {
+function _temp3$5() {
 }
 function _temp2$d() {
 }
@@ -5701,7 +5704,7 @@ function StringPropertyPreview(t0) {
         let t1;
         if ($[17] !== size || $[18] !== value) {
           const lines = value.split("\n");
-          t1 = value && value.includes("\n") ? /* @__PURE__ */ jsx("div", { className: cls("overflow-x-scroll", size === "small" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          t1 = value && value.includes("\n") ? /* @__PURE__ */ jsx("div", { className: cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
             /* @__PURE__ */ jsx("span", { children: str }),
             index !== lines.length - 1 && /* @__PURE__ */ jsx("br", {})
           ] }, `string_preview_${index}`)) }) : size === "small" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsx(Fragment, { children: value });
@@ -7267,7 +7270,6 @@ function VirtualTableInput(props) {
       width: "100%",
       color: "unset",
       fontWeight: "unset",
-      lineHeight: 1.7142857,
       fontSize: "unset",
       fontFamily: "unset",
       background: "unset",
@@ -10610,8 +10612,7 @@ const VirtualTable = React__default.memo(function VirtualTable2({
   className,
   endAdornment,
   AddColumnComponent,
-  initialScroll = 0,
-  debug
+  initialScroll = 0
 }) {
   const sortByProperty = sortBy ? sortBy[0] : void 0;
   const currentSort = sortBy ? sortBy[1] : void 0;
@@ -10621,7 +10622,10 @@ const VirtualTable = React__default.memo(function VirtualTable2({
   const debouncedScroll = useDebounceCallback(onScrollProp, 200);
   useEffect(() => {
     if (tableRef.current && initialScroll) {
-      tableRef.current.scrollTo(0, initialScroll);
+      const {
+        scrollLeft
+      } = tableRef.current;
+      tableRef.current.scrollTo(scrollLeft, initialScroll);
     }
   }, [tableRef, initialScroll]);
   useEffect(() => {
@@ -10652,11 +10656,9 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     offsetSize: true
   });
   const onColumnResizeInternal = useCallback((params) => {
-    if (debug) console.log("onColumnResizeInternal", params);
     setColumns((prevColumns) => prevColumns.map((column) => column.key === params.column.key ? params.column : column));
   }, []);
   const onColumnResizeEndInternal = useCallback((params_0) => {
-    if (debug) console.log("onColumnResizeEndInternal", params_0);
     setColumns(columns.map((column_0) => column_0.key === params_0.column.key ? params_0.column : column_0));
     if (onColumnResize) {
       onColumnResize(params_0);
@@ -10664,18 +10666,15 @@ const VirtualTable = React__default.memo(function VirtualTable2({
   }, [columns, onColumnResize]);
   const filterRef = useRef();
   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);
     }
   }, []);
   const onColumnSort = useCallback((key) => {
-    if (debug) console.log("onColumnSort", key);
     const isDesc = sortByProperty === key && currentSort === "desc";
     const isAsc = sortByProperty === key && currentSort === "asc";
     const newSort = isAsc ? "desc" : isDesc ? void 0 : "asc";
@@ -10696,9 +10695,7 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     scrollToTop();
   }, [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) => {
-    if (debug) console.log("onEndReachedInternal", scrollOffset, endReachCallbackThreshold.current + endOffset);
     if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
       endReachCallbackThreshold.current = scrollOffset;
       onEndReached();
@@ -10709,11 +10706,6 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     scrollOffset: scrollOffset_0,
     scrollUpdateWasRequested
   }) => {
-    if (debug) console.log("onScroll", {
-      scrollDirection,
-      scrollOffset: scrollOffset_0,
-      scrollUpdateWasRequested
-    });
     if (onScrollProp) {
       debouncedScroll({
         scrollDirection,
@@ -10724,7 +10716,6 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     if (!scrollUpdateWasRequested && scrollOffset_0 >= maxScroll - endOffset) onEndReachedInternal(scrollOffset_0);
   }, [maxScroll, onEndReachedInternal]);
   const onFilterUpdateInternal = useCallback((column_1, filterForProperty) => {
-    if (debug) console.log("onFilterUpdateInternal", column_1, filterForProperty);
     endReachCallbackThreshold.current = 0;
     const filter_0 = filterRef.current;
     let newFilterValue = filter_0 ? {
@@ -10772,7 +10763,6 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     endAdornment,
     AddColumnComponent
   };
-  if (debug) console.log("VirtualTable render", virtualListController);
   return /* @__PURE__ */ jsx("div", { ref: measureRef, style, className: cls("h-full w-full", className), children: /* @__PURE__ */ jsx(VirtualListContext.Provider, { value: virtualListController, children: /* @__PURE__ */ jsx(MemoizedList, { outerRef: tableRef, width: bounds.width, height: bounds.height, itemCount: (data?.length ?? 0) + (endAdornment ? 1 : 0), onScroll, includeAddColumn: Boolean(AddColumnComponent), itemSize: rowHeight }, rowHeight) }) });
 }, equal);
 function MemoizedList({
@@ -11108,8 +11098,8 @@ function StringNumberFilterField(t0) {
   }
   let t9;
   if ($[34] !== dataType || $[35] !== enumValues || $[36] !== internalValue || $[37] !== multiple || $[38] !== name || $[39] !== operation || $[40] !== updateFilter) {
-    t9 = enumValues && multiple && /* @__PURE__ */ jsx(MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$3) : [], onValueChange: (value_2) => {
-      updateFilter(operation, dataType === "number" ? value_2.map(_temp4$2) : value_2);
+    t9 = enumValues && multiple && /* @__PURE__ */ jsx(MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$4) : [], onValueChange: (value_2) => {
+      updateFilter(operation, dataType === "number" ? value_2.map(_temp4$3) : value_2);
     }, multiple, endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(CloseIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsx(MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
     $[34] = dataType;
     $[35] = enumValues;
@@ -11172,10 +11162,10 @@ function StringNumberFilterField(t0) {
   }
   return t12;
 }
-function _temp4$2(v) {
+function _temp4$3(v) {
   return parseInt(v);
 }
-function _temp3$3(e_1) {
+function _temp3$4(e_1) {
   return String(e_1);
 }
 function _temp2$7(op_1) {
@@ -13299,7 +13289,7 @@ function DefaultHomePage(t0) {
   if ($[7] !== additionalActions || $[8] !== additionalChildrenStart || $[9] !== containerRef || $[10] !== context || $[11] !== customizationController.plugins || $[12] !== direction || $[13] !== filteredNavigationEntries || $[14] !== filteredUrls || $[15] !== groups || $[16] !== performingSearch) {
     const filteredGroups = filteredUrls ? filteredNavigationEntries.map(_temp2$5) : [];
     const allGroups = filteredUrls ? filteredGroups.filter((group, index) => filteredGroups.indexOf(group) === index) : [...groups];
-    if (filteredNavigationEntries.filter(_temp3$2).length > 0 || filteredNavigationEntries.length === 0) {
+    if (filteredNavigationEntries.filter(_temp3$3).length > 0 || filteredNavigationEntries.length === 0) {
       allGroups.push(void 0);
     }
     let additionalPluginChildrenStart;
@@ -13309,7 +13299,7 @@ function DefaultHomePage(t0) {
         const sectionProps = {
           context
         };
-        t143 = customizationController.plugins.filter(_temp4$1).map((plugin_0, i) => {
+        t143 = customizationController.plugins.filter(_temp4$2).map((plugin_0, i) => {
           const section = plugin_0.homePage.includeSection(sectionProps);
           return /* @__PURE__ */ jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin_0.key}`);
         });
@@ -13330,7 +13320,7 @@ function DefaultHomePage(t0) {
       additionalPluginSections = t153;
       let t162;
       if ($[34] !== customizationController.plugins) {
-        t162 = customizationController.plugins.filter(_temp5$1).map(_temp6$1);
+        t162 = customizationController.plugins.filter(_temp5$2).map(_temp6$2);
         $[34] = customizationController.plugins;
         $[35] = t162;
       } else {
@@ -13347,7 +13337,7 @@ function DefaultHomePage(t0) {
       additionalPluginChildrenStart = t172;
       let t18;
       if ($[38] !== customizationController.plugins) {
-        t18 = customizationController.plugins.filter(_temp7).map(_temp8);
+        t18 = customizationController.plugins.filter(_temp7$1).map(_temp8);
         $[38] = customizationController.plugins;
         $[39] = t18;
       } else {
@@ -13535,19 +13525,19 @@ function DefaultHomePage(t0) {
 function _temp8(plugin_4, i_1) {
   return /* @__PURE__ */ jsx("div", { children: plugin_4.homePage.additionalChildrenEnd }, `plugin_children_start_${i_1}`);
 }
-function _temp7(plugin_3) {
+function _temp7$1(plugin_3) {
   return plugin_3.homePage?.additionalChildrenEnd;
 }
-function _temp6$1(plugin_2, i_0) {
+function _temp6$2(plugin_2, i_0) {
   return /* @__PURE__ */ jsx("div", { children: plugin_2.homePage.additionalChildrenStart }, `plugin_children_start_${i_0}`);
 }
-function _temp5$1(plugin_1) {
+function _temp5$2(plugin_1) {
   return plugin_1.homePage?.additionalChildrenStart;
 }
-function _temp4$1(plugin) {
+function _temp4$2(plugin) {
   return plugin.homePage?.includeSection;
 }
-function _temp3$2(e_1) {
+function _temp3$3(e_1) {
   return !e_1.group;
 }
 function _temp2$5(entry) {
@@ -13899,7 +13889,9 @@ function CustomIdField({
     ] }) : void 0
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    enumValues && /* @__PURE__ */ jsx(Select, { size: "large", error, fullWidth: true, onValueChange: (v) => onChange(v), ...fieldProps, renderValue: (option) => {
+    enumValues && /* @__PURE__ */ jsx(Select, { size: "large", error, fullWidth: true, onValueChange: (v) => {
+      onChange(v);
+    }, ...fieldProps, renderValue: (option) => {
       const enumConfig = enumValues.find((e_1) => e_1.id === option);
       if (!enumConfig) return option;
       return `${enumConfig.id} - ${enumConfig.label}`;
@@ -14967,7 +14959,7 @@ function SelectFieldBinding(t0) {
   }
   let t13;
   if ($[20] !== disabled || $[21] !== handleClearClick || $[22] !== property.clearable) {
-    t13 = property.clearable && !disabled && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+    t13 = property.clearable && !disabled && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) });
     $[20] = disabled;
     $[21] = handleClearClick;
     $[22] = property.clearable;
@@ -15080,7 +15072,7 @@ function MultiSelectFieldBinding({
     ] }, enumKey);
   }, [enumValues, setValue, value]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(MultiSelect, { className: "w-full mt-2", size, value: validValue ? value.map((v_0) => v_0.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
+    /* @__PURE__ */ jsx(MultiSelect, { className: "w-full mt-2", size, value: validValue ? value.map((v_0) => v_0?.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
       let newValue;
       if (of && of?.dataType === "number") {
         newValue = updatedValue ? updatedValue.map((e_1) => parseFloat(e_1)) : [];
@@ -15410,15 +15402,161 @@ function StorageUploadFieldBinding(t0) {
   }
   return t12;
 }
+function SortableStorageItem(t0) {
+  const $ = c(35);
+  const {
+    id,
+    entry,
+    property,
+    metadata,
+    storagePathBuilder,
+    onFileUploadComplete,
+    onClear,
+    disabled
+  } = t0;
+  let t1;
+  if ($[0] !== id) {
+    t1 = {
+      id
+    };
+    $[0] = id;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    attributes,
+    listeners: listeners2,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable(t1);
+  let t2;
+  if ($[2] !== transform) {
+    t2 = CSS.Transform.toString(transform);
+    $[2] = transform;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const t3 = isDragging ? 100 : void 0;
+  const t4 = isDragging ? 0.8 : 1;
+  let t5;
+  if ($[4] !== t2 || $[5] !== t3 || $[6] !== t4 || $[7] !== transition) {
+    t5 = {
+      transform: t2,
+      transition,
+      zIndex: t3,
+      opacity: t4
+    };
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = transition;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const style = t5;
+  const getImageSizeNumber = _temp$a;
+  let child;
+  if (entry.storagePathOrDownloadUrl) {
+    const t62 = `storage_preview_${entry.storagePathOrDownloadUrl}`;
+    let t72;
+    if ($[9] !== entry.storagePathOrDownloadUrl || $[10] !== onClear) {
+      t72 = () => onClear(entry.storagePathOrDownloadUrl);
+      $[9] = entry.storagePathOrDownloadUrl;
+      $[10] = onClear;
+      $[11] = t72;
+    } else {
+      t72 = $[11];
+    }
+    let t8;
+    if ($[12] !== disabled || $[13] !== entry.size || $[14] !== entry.storagePathOrDownloadUrl || $[15] !== property || $[16] !== t62 || $[17] !== t72) {
+      t8 = /* @__PURE__ */ jsx(StorageItemPreview, { name: t62, property, disabled, value: entry.storagePathOrDownloadUrl, onRemove: t72, size: entry.size });
+      $[12] = disabled;
+      $[13] = entry.size;
+      $[14] = entry.storagePathOrDownloadUrl;
+      $[15] = property;
+      $[16] = t62;
+      $[17] = t72;
+      $[18] = t8;
+    } else {
+      t8 = $[18];
+    }
+    child = t8;
+  } else {
+    if (entry.file) {
+      let t62;
+      if ($[19] !== entry.file || $[20] !== storagePathBuilder) {
+        t62 = storagePathBuilder(entry.file);
+        $[19] = entry.file;
+        $[20] = storagePathBuilder;
+        $[21] = t62;
+      } else {
+        t62 = $[21];
+      }
+      const t72 = getImageSizeNumber(entry.size);
+      let t8;
+      if ($[22] !== entry || $[23] !== metadata || $[24] !== onFileUploadComplete || $[25] !== t62 || $[26] !== t72) {
+        t8 = /* @__PURE__ */ jsx(StorageUploadProgress, { entry, metadata, storagePath: t62, onFileUploadComplete, imageSize: t72, simple: false });
+        $[22] = entry;
+        $[23] = metadata;
+        $[24] = onFileUploadComplete;
+        $[25] = t62;
+        $[26] = t72;
+        $[27] = t8;
+      } else {
+        t8 = $[27];
+      }
+      child = t8;
+    }
+  }
+  let t6;
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = cls("rounded-md m-1");
+    $[28] = t6;
+  } else {
+    t6 = $[28];
+  }
+  let t7;
+  if ($[29] !== attributes || $[30] !== child || $[31] !== listeners2 || $[32] !== setNodeRef || $[33] !== style) {
+    t7 = /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners2, className: t6, tabIndex: -1, children: child });
+    $[29] = attributes;
+    $[30] = child;
+    $[31] = listeners2;
+    $[32] = setNodeRef;
+    $[33] = style;
+    $[34] = t7;
+  } else {
+    t7 = $[34];
+  }
+  return t7;
+}
+function _temp$a(previewSize) {
+  switch (previewSize) {
+    case "small": {
+      return 40;
+    }
+    case "medium": {
+      return 118;
+    }
+    case "large": {
+      return 220;
+    }
+    default: {
+      return 118;
+    }
+  }
+}
 function FileDropComponent(t0) {
-  const $ = c(64);
+  const $ = c(63);
   const {
     storage,
     disabled,
-    isDraggingOver,
     onFilesAdded,
     multipleFilesSupported,
-    droppableProvided,
     autoFocus,
     internalValue,
     property,
@@ -15426,23 +15564,23 @@ function FileDropComponent(t0) {
     metadata,
     storagePathBuilder,
     onFileUploadComplete,
-    size,
     name,
-    helpText
+    helpText,
+    isDndItemDragging
   } = t0;
   const snackbarContext = useSnackbarController();
   let t1;
   if ($[0] !== storage.acceptedFiles) {
-    t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$a).reduce(_temp2$4, {}) : void 0;
+    t1 = storage.acceptedFiles ? storage.acceptedFiles.reduce(_temp2$4, {}) : void 0;
     $[0] = storage.acceptedFiles;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const t2 = disabled || isDraggingOver;
+  const t2 = disabled || isDndItemDragging;
   let t3;
   if ($[2] !== snackbarContext || $[3] !== storage.maxSize) {
-    t3 = (fileRejections, event) => {
+    t3 = (fileRejections) => {
       for (const fileRejection of fileRejections) {
         for (const error of fileRejection.errors) {
           console.error("Error uploading file: ", error);
@@ -15504,170 +15642,154 @@ function FileDropComponent(t0) {
   }
   const t6 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
   const t7 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
-  const t8 = multipleFilesSupported && internalValue.length ? "" : "flex";
+  const t8 = multipleFilesSupported && internalValue.length === 0 && "flex";
   const t9 = !isDragActive;
-  let t10;
-  if ($[13] !== disabled || $[14] !== isDragAccept || $[15] !== isDragActive || $[16] !== isDragReject || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
-    t10 = cls(fieldBackgroundMixin, t6, t7, dropZoneClasses, t8, {
+  const t10 = disabled || isDndItemDragging;
+  let t11;
+  if ($[13] !== isDragAccept || $[14] !== isDragActive || $[15] !== isDragReject || $[16] !== t10 || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+    t11 = cls(fieldBackgroundMixin, t6, t7, dropZoneClasses, t8, {
       [nonActiveDropClasses]: t9,
       [activeDropClasses]: isDragActive,
       [rejectDropClasses]: isDragReject,
       [acceptDropClasses]: isDragAccept,
-      [disabledClasses]: disabled
+      [disabledClasses]: t10
     });
-    $[13] = disabled;
-    $[14] = isDragAccept;
-    $[15] = isDragActive;
-    $[16] = isDragReject;
+    $[13] = isDragAccept;
+    $[14] = isDragActive;
+    $[15] = isDragReject;
+    $[16] = t10;
     $[17] = t6;
     $[18] = t7;
     $[19] = t8;
     $[20] = t9;
-    $[21] = t10;
-  } else {
-    t10 = $[21];
-  }
-  const t11 = droppableProvided.droppableProps;
-  const t12 = droppableProvided.innerRef;
-  const t13 = multipleFilesSupported && internalValue.length ? "overflow-auto" : "";
-  const t14 = multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]";
-  let t15;
-  if ($[22] !== t13 || $[23] !== t14) {
-    t15 = cls("flex items-center p-1 no-scrollbar", t13, t14);
-    $[22] = t13;
-    $[23] = t14;
-    $[24] = t15;
+    $[21] = t11;
   } else {
-    t15 = $[24];
+    t11 = $[21];
   }
+  const t12 = multipleFilesSupported && internalValue.length ? "flex-row overflow-x-auto" : "flex-col";
+  const t13 = internalValue.length === 0 && "min-h-[250px] justify-center";
+  const t14 = multipleFilesSupported && internalValue.length > 0 && "min-h-[180px]";
+  const t15 = !multipleFilesSupported && internalValue.length > 0 && "min-h-[250px]";
   let t16;
-  if ($[25] !== getInputProps) {
-    t16 = getInputProps();
-    $[25] = getInputProps;
+  if ($[22] !== t12 || $[23] !== t13 || $[24] !== t14 || $[25] !== t15) {
+    t16 = cls("flex items-center p-1 no-scrollbar", t12, t13, t14, t15);
+    $[22] = t12;
+    $[23] = t13;
+    $[24] = t14;
+    $[25] = t15;
     $[26] = t16;
   } else {
     t16 = $[26];
   }
   let t17;
-  if ($[27] !== autoFocus || $[28] !== t16) {
-    t17 = /* @__PURE__ */ jsx("input", { autoFocus, ...t16 });
-    $[27] = autoFocus;
-    $[28] = t16;
-    $[29] = t17;
+  if ($[27] !== getInputProps) {
+    t17 = getInputProps();
+    $[27] = getInputProps;
+    $[28] = t17;
   } else {
-    t17 = $[29];
+    t17 = $[28];
   }
   let t18;
-  if ($[30] !== disabled || $[31] !== internalValue || $[32] !== metadata || $[33] !== name || $[34] !== onClear || $[35] !== onFileUploadComplete || $[36] !== property || $[37] !== size || $[38] !== storagePathBuilder) {
-    let t192;
-    if ($[40] !== disabled || $[41] !== metadata || $[42] !== name || $[43] !== onClear || $[44] !== onFileUploadComplete || $[45] !== property || $[46] !== size || $[47] !== storagePathBuilder) {
-      t192 = (entry, index) => {
-        let child;
-        if (entry.storagePathOrDownloadUrl) {
-          child = /* @__PURE__ */ jsx(StorageItemPreview, { name: `storage_preview_${entry.storagePathOrDownloadUrl}`, property, disabled, value: entry.storagePathOrDownloadUrl, onRemove: onClear, size: entry.size });
-        } else {
-          if (entry.file) {
-            child = /* @__PURE__ */ jsx(StorageUploadProgress, { entry, metadata, storagePath: storagePathBuilder(entry.file), onFileUploadComplete, imageSize: size === "large" ? 220 : 118, simple: false });
-          }
-        }
-        return /* @__PURE__ */ jsx(Draggable, { draggableId: `array_field_${name}_${entry.id}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsx("div", { tabIndex: -1, ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, className: cls("rounded-md"), style: {
-          ...provided.draggableProps.style
-        }, children: child }) }, `array_field_${name}_${entry.id}`);
-      };
-      $[40] = disabled;
-      $[41] = metadata;
-      $[42] = name;
-      $[43] = onClear;
-      $[44] = onFileUploadComplete;
-      $[45] = property;
-      $[46] = size;
-      $[47] = storagePathBuilder;
-      $[48] = t192;
-    } else {
-      t192 = $[48];
-    }
-    t18 = internalValue.map(t192);
-    $[30] = disabled;
-    $[31] = internalValue;
-    $[32] = metadata;
-    $[33] = name;
-    $[34] = onClear;
-    $[35] = onFileUploadComplete;
-    $[36] = property;
-    $[37] = size;
-    $[38] = storagePathBuilder;
-    $[39] = t18;
-  } else {
-    t18 = $[39];
+  if ($[29] !== autoFocus || $[30] !== t17) {
+    t18 = /* @__PURE__ */ jsx("input", { autoFocus, ...t17 });
+    $[29] = autoFocus;
+    $[30] = t17;
+    $[31] = t18;
+  } else {
+    t18 = $[31];
   }
   let t19;
-  if ($[49] !== droppableProvided.droppableProps || $[50] !== droppableProvided.innerRef || $[51] !== droppableProvided.placeholder || $[52] !== t15 || $[53] !== t17 || $[54] !== t18) {
-    t19 = /* @__PURE__ */ jsxs("div", { ...t11, ref: t12, className: t15, children: [
-      t17,
+  if ($[32] !== disabled || $[33] !== internalValue || $[34] !== metadata || $[35] !== multipleFilesSupported || $[36] !== name || $[37] !== onClear || $[38] !== onFileUploadComplete || $[39] !== property || $[40] !== storagePathBuilder) {
+    let t202;
+    if ($[42] !== disabled || $[43] !== metadata || $[44] !== multipleFilesSupported || $[45] !== name || $[46] !== onClear || $[47] !== onFileUploadComplete || $[48] !== property || $[49] !== storagePathBuilder) {
+      t202 = (entry) => /* @__PURE__ */ jsx(SortableStorageItem, { id: entry.id, entry, property, name, metadata, storagePathBuilder, onFileUploadComplete, onClear, disabled, isSortable: multipleFilesSupported }, entry.id);
+      $[42] = disabled;
+      $[43] = metadata;
+      $[44] = multipleFilesSupported;
+      $[45] = name;
+      $[46] = onClear;
+      $[47] = onFileUploadComplete;
+      $[48] = property;
+      $[49] = storagePathBuilder;
+      $[50] = t202;
+    } else {
+      t202 = $[50];
+    }
+    t19 = internalValue.map(t202);
+    $[32] = disabled;
+    $[33] = internalValue;
+    $[34] = metadata;
+    $[35] = multipleFilesSupported;
+    $[36] = name;
+    $[37] = onClear;
+    $[38] = onFileUploadComplete;
+    $[39] = property;
+    $[40] = storagePathBuilder;
+    $[41] = t19;
+  } else {
+    t19 = $[41];
+  }
+  let t20;
+  if ($[51] !== t16 || $[52] !== t18 || $[53] !== t19) {
+    t20 = /* @__PURE__ */ jsxs("div", { className: t16, children: [
       t18,
-      droppableProvided.placeholder
+      t19
     ] });
-    $[49] = droppableProvided.droppableProps;
-    $[50] = droppableProvided.innerRef;
-    $[51] = droppableProvided.placeholder;
-    $[52] = t15;
-    $[53] = t17;
-    $[54] = t18;
-    $[55] = t19;
+    $[51] = t16;
+    $[52] = t18;
+    $[53] = t19;
+    $[54] = t20;
   } else {
-    t19 = $[55];
+    t20 = $[54];
   }
-  const t20 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
-  let t21;
-  if ($[56] !== helpText || $[57] !== t20) {
-    t21 = /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsx(Typography, { align: "center", variant: "label", className: t20, children: helpText }) });
-    $[56] = helpText;
-    $[57] = t20;
-    $[58] = t21;
+  const t21 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
+  let t22;
+  if ($[55] !== helpText || $[56] !== t21) {
+    t22 = /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsx(Typography, { align: "center", variant: "label", className: t21, children: helpText }) });
+    $[55] = helpText;
+    $[56] = t21;
+    $[57] = t22;
   } else {
-    t21 = $[58];
+    t22 = $[57];
   }
-  let t22;
-  if ($[59] !== t10 || $[60] !== t19 || $[61] !== t21 || $[62] !== t5) {
-    t22 = /* @__PURE__ */ jsxs("div", { ...t5, className: t10, children: [
-      t19,
-      t21
+  let t23;
+  if ($[58] !== t11 || $[59] !== t20 || $[60] !== t22 || $[61] !== t5) {
+    t23 = /* @__PURE__ */ jsxs("div", { ...t5, className: t11, children: [
+      t20,
+      t22
     ] });
-    $[59] = t10;
-    $[60] = t19;
-    $[61] = t21;
-    $[62] = t5;
-    $[63] = t22;
+    $[58] = t11;
+    $[59] = t20;
+    $[60] = t22;
+    $[61] = t5;
+    $[62] = t23;
   } else {
-    t22 = $[63];
+    t23 = $[62];
   }
-  return t22;
-}
-function _temp2$4(a, b) {
-  return {
-    ...a,
-    ...b
-  };
+  return t23;
 }
-function _temp$a(e) {
+function _temp2$4(acc, ext) {
   return {
-    [e]: []
+    ...acc,
+    [ext]: []
   };
 }
-function StorageUpload({
-  property,
-  name,
-  value,
-  setInternalValue,
-  onChange,
-  multipleFilesSupported,
-  onFileUploadComplete,
-  disabled,
-  onFilesAdded,
-  autoFocus,
-  storage,
-  storagePathBuilder
-}) {
+function StorageUpload(t0) {
+  const $ = c(44);
+  const {
+    property,
+    name,
+    value,
+    setInternalValue,
+    onChange,
+    multipleFilesSupported,
+    onFileUploadComplete,
+    disabled,
+    onFilesAdded,
+    autoFocus,
+    storage,
+    storagePathBuilder
+  } = t0;
   if (multipleFilesSupported) {
     const arrayProperty = property;
     if (arrayProperty.of) {
@@ -15682,41 +15804,208 @@ function StorageUpload({
     }
   }
   const metadata = storage?.metadata;
-  const size = multipleFilesSupported ? "medium" : "large";
-  const moveItem = useCallback((fromIndex, toIndex) => {
-    if (!multipleFilesSupported) return;
-    const newValue = [...value];
-    const item = newValue[fromIndex];
-    newValue.splice(fromIndex, 1);
-    newValue.splice(toIndex, 0, item);
-    setInternalValue(newValue);
-    const fieldValue = newValue.filter((e) => !!e.storagePathOrDownloadUrl).map((e_0) => e_0.storagePathOrDownloadUrl);
-    onChange(fieldValue);
-  }, [multipleFilesSupported, onChange, setInternalValue, value]);
-  const onDragEnd = useCallback((result) => {
-    if (!result.destination) {
-      return;
-    }
-    moveItem(result.source.index, result.destination.index);
-  }, [moveItem]);
-  const onClear = useCallback((clearedStoragePathOrDownloadUrl) => {
-    if (multipleFilesSupported) {
-      const newValue_0 = value.filter((v) => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
-      onChange(newValue_0.filter((v_0) => !!v_0.storagePathOrDownloadUrl).map((v_1) => v_1.storagePathOrDownloadUrl));
+  const [isDndItemDragging, setIsDndItemDragging] = useState(false);
+  let t1;
+  if ($[0] !== multipleFilesSupported || $[1] !== onChange || $[2] !== setInternalValue || $[3] !== value) {
+    t1 = (fromIndex, toIndex) => {
+      if (!multipleFilesSupported || fromIndex === toIndex) {
+        return;
+      }
+      const newValue = [...value];
+      const item = newValue[fromIndex];
+      newValue.splice(fromIndex, 1);
+      newValue.splice(toIndex, 0, item);
+      setInternalValue(newValue);
+      const fieldValue = newValue.filter(_temp3$2).map(_temp4$1);
+      onChange(fieldValue);
+    };
+    $[0] = multipleFilesSupported;
+    $[1] = onChange;
+    $[2] = setInternalValue;
+    $[3] = value;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const moveItem = t1;
+  let t2;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      activationConstraint: {
+        distance: 5
+      }
+    };
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      coordinateGetter: sortableKeyboardCoordinates
+    };
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const sensors = useSensors(useSensor(PointerSensor, t2), useSensor(KeyboardSensor, t3));
+  let t4;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = (event) => {
+      setIsDndItemDragging(true);
+    };
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const handleDragStart = t4;
+  let t5;
+  if ($[8] !== moveItem || $[9] !== value) {
+    t5 = (event_0) => {
+      setIsDndItemDragging(false);
+      const {
+        active,
+        over
+      } = event_0;
+      if (over && active.id !== over.id) {
+        const oldIndex = value.findIndex((item_0) => item_0.id === active.id);
+        const newIndex = value.findIndex((item_1) => item_1.id === over.id);
+        if (oldIndex !== -1 && newIndex !== -1) {
+          moveItem(oldIndex, newIndex);
+        }
+      }
+    };
+    $[8] = moveItem;
+    $[9] = value;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const handleDragEnd = t5;
+  let t6;
+  if ($[11] !== multipleFilesSupported || $[12] !== onChange || $[13] !== setInternalValue || $[14] !== value) {
+    t6 = (clearedStoragePathOrDownloadUrl) => {
+      let newValue_0;
+      if (multipleFilesSupported) {
+        newValue_0 = value.filter((v) => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
+        onChange(newValue_0.filter(_temp5$1).map(_temp6$1));
+      } else {
+        newValue_0 = [];
+        onChange(null);
+      }
       setInternalValue(newValue_0);
+    };
+    $[11] = multipleFilesSupported;
+    $[12] = onChange;
+    $[13] = setInternalValue;
+    $[14] = value;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  const onClear = t6;
+  const helpText = multipleFilesSupported ? "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 = multipleFilesSupported ? property.of : property;
+  let t7;
+  if ($[16] !== autoFocus || $[17] !== disabled || $[18] !== helpText || $[19] !== isDndItemDragging || $[20] !== metadata || $[21] !== multipleFilesSupported || $[22] !== name || $[23] !== onClear || $[24] !== onFileUploadComplete || $[25] !== onFilesAdded || $[26] !== renderProperty || $[27] !== storage || $[28] !== storagePathBuilder || $[29] !== value) {
+    t7 = {
+      storage,
+      disabled,
+      onFilesAdded,
+      multipleFilesSupported,
+      autoFocus,
+      internalValue: value,
+      property: renderProperty,
+      onClear,
+      metadata,
+      storagePathBuilder,
+      onFileUploadComplete,
+      name,
+      helpText,
+      isDndItemDragging
+    };
+    $[16] = autoFocus;
+    $[17] = disabled;
+    $[18] = helpText;
+    $[19] = isDndItemDragging;
+    $[20] = metadata;
+    $[21] = multipleFilesSupported;
+    $[22] = name;
+    $[23] = onClear;
+    $[24] = onFileUploadComplete;
+    $[25] = onFilesAdded;
+    $[26] = renderProperty;
+    $[27] = storage;
+    $[28] = storagePathBuilder;
+    $[29] = value;
+    $[30] = t7;
+  } else {
+    t7 = $[30];
+  }
+  const fileDropProps = t7;
+  if (multipleFilesSupported) {
+    let t8;
+    if ($[31] !== value) {
+      t8 = value.map(_temp7);
+      $[31] = value;
+      $[32] = t8;
     } else {
-      onChange(null);
-      setInternalValue([]);
+      t8 = $[32];
     }
-  }, [value, multipleFilesSupported, onChange]);
-  const helpText = multipleFilesSupported ? "Drag 'n' drop some files here, or click to select files" : "Drag 'n' drop a file here, or click to select one";
-  const renderProperty = multipleFilesSupported ? property.of : property;
-  return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: `droppable_${name}`, direction: "horizontal", renderClone: (provided, snapshot, rubric) => {
-    const entry = value[rubric.source.index];
-    return /* @__PURE__ */ jsx("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style, className: "rounded", children: /* @__PURE__ */ jsx(StorageItemPreview, { name: `storage_preview_${entry.storagePathOrDownloadUrl}`, placeholder: true, property: renderProperty, disabled: true, value: entry.storagePathOrDownloadUrl, onRemove: onClear, size: entry.size }) });
-  }, children: (provided_0, snapshot_0) => {
-    return /* @__PURE__ */ jsx(FileDropComponent, { storage, disabled, isDraggingOver: snapshot_0.isDraggingOver, droppableProvided: provided_0, onFilesAdded, multipleFilesSupported, autoFocus, internalValue: value, property: renderProperty, onClear, metadata, storagePathBuilder, onFileUploadComplete, size, name, helpText });
-  } }) });
+    let t9;
+    if ($[33] !== fileDropProps) {
+      t9 = /* @__PURE__ */ jsx(FileDropComponent, { ...fileDropProps });
+      $[33] = fileDropProps;
+      $[34] = t9;
+    } else {
+      t9 = $[34];
+    }
+    let t10;
+    if ($[35] !== t8 || $[36] !== t9) {
+      t10 = /* @__PURE__ */ jsx(SortableContext, { items: t8, strategy: horizontalListSortingStrategy, children: t9 });
+      $[35] = t8;
+      $[36] = t9;
+      $[37] = t10;
+    } else {
+      t10 = $[37];
+    }
+    let t11;
+    if ($[38] !== handleDragEnd || $[39] !== sensors || $[40] !== t10) {
+      t11 = /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: t10 });
+      $[38] = handleDragEnd;
+      $[39] = sensors;
+      $[40] = t10;
+      $[41] = t11;
+    } else {
+      t11 = $[41];
+    }
+    return t11;
+  } else {
+    let t8;
+    if ($[42] !== fileDropProps) {
+      t8 = /* @__PURE__ */ jsx(FileDropComponent, { ...fileDropProps, isDndItemDragging: false });
+      $[42] = fileDropProps;
+      $[43] = t8;
+    } else {
+      t8 = $[43];
+    }
+    return t8;
+  }
+}
+function _temp7(v_2) {
+  return v_2.id;
+}
+function _temp6$1(v_1) {
+  return v_1.storagePathOrDownloadUrl;
+}
+function _temp5$1(v_0) {
+  return !!v_0.storagePathOrDownloadUrl;
+}
+function _temp4$1(e_0) {
+  return e_0.storagePathOrDownloadUrl;
+}
+function _temp3$2(e) {
+  return !!e.storagePathOrDownloadUrl;
 }
 function TextFieldBinding(t0) {
   const $ = c(52);
@@ -18918,7 +19207,7 @@ const EntityCollectionView = React__default.memo(function EntityCollectionView2(
     deleteEntityClicked && /* @__PURE__ */ jsx(DeleteEntityDialog, { entityOrEntitiesToDelete: deleteEntityClicked, path: fullPath, collection, callbacks: collection.callbacks, open: Boolean(deleteEntityClicked), onEntityDelete: internalOnEntityDelete, onMultipleEntitiesDelete: internalOnMultipleEntitiesDelete, onClose: () => setDeleteEntityClicked(void 0) })
   ] });
 }, (a, b) => {
-  return equal(a.path, b.path) && equal(a.parentCollectionIds, b.parentCollectionIds) && equal(a.isSubCollection, b.isSubCollection) && equal(a.className, b.className) && equal(a.properties, b.properties) && equal(a.propertiesOrder, b.propertiesOrder) && equal(a.hideIdFromCollection, b.hideIdFromCollection) && equal(a.inlineEditing, b.inlineEditing) && equal(a.selectionEnabled, b.selectionEnabled) && equal(a.selectionController, b.selectionController) && equal(a.Actions, b.Actions) && equal(a.defaultSize, b.defaultSize) && equal(a.initialFilter, b.initialFilter) && equal(a.initialSort, b.initialSort) && equal(a.textSearchEnabled, b.textSearchEnabled) && equal(a.additionalFields, b.additionalFields) && equal(a.sideDialogWidth, b.sideDialogWidth) && equal(a.openEntityMode, b.openEntityMode) && equal(a.exportable, b.exportable) && equal(a.history, b.history) && equal(a.forceFilter, b.forceFilter);
+  return equal(a.path, b.path) && equal(a.parentCollectionIds, b.parentCollectionIds) && equal(a.isSubCollection, b.isSubCollection) && equal(a.className, b.className) && equal(a.properties, b.properties) && equal(a.propertiesOrder, b.propertiesOrder) && equal(a.hideIdFromCollection, b.hideIdFromCollection) && equal(a.inlineEditing, b.inlineEditing) && equal(a.selectionEnabled, b.selectionEnabled) && equal(a.selectionController, b.selectionController) && equal(a.Actions, b.Actions) && equal(a.defaultSize, b.defaultSize) && equal(a.initialFilter, b.initialFilter) && equal(a.initialSort, b.initialSort) && equal(a.includeJsonView, b.includeJsonView) && equal(a.textSearchEnabled, b.textSearchEnabled) && equal(a.additionalFields, b.additionalFields) && equal(a.sideDialogWidth, b.sideDialogWidth) && equal(a.openEntityMode, b.openEntityMode) && equal(a.exportable, b.exportable) && equal(a.history, b.history) && equal(a.forceFilter, b.forceFilter);
 });
 function EntitiesCount({
   fullPath,
@@ -19649,227 +19938,182 @@ const buildIdsMap = (value) => value && Array.isArray(value) && value.length > 0
   ...a,
   ...b
 }), {}) : {};
-function ArrayContainer({
-  droppableId,
-  addLabel,
-  value,
-  disabled = false,
+function SortableItem({
+  id,
+  index,
+  size,
+  disabled,
   buildEntry,
-  size = "medium",
-  onInternalIdAdded,
-  includeAddButton: deprecatedIncludeAddButton,
-  canAddElements: canAddElementsProp = true,
-  sortable = true,
-  newDefaultEntry,
-  onValueChange,
-  className,
-  min = 0,
-  max = Infinity
+  remove,
+  copy,
+  addInIndex,
+  canAddElements,
+  sortable,
+  storedProps,
+  updateItemCustomProps
 }) {
-  const canAddElements = (canAddElementsProp || canAddElementsProp === void 0) && (deprecatedIncludeAddButton === void 0 || deprecatedIncludeAddButton);
-  const hasValue = value && Array.isArray(value) && value.length > 0;
-  const internalIdsRef = useRef(buildIdsMap(value));
-  const [internalIds, setInternalIds] = useState(hasValue ? Object.values(internalIdsRef.current) : []);
-  const itemCustomPropsRef = useRef({});
-  const updateItemCustomProps = useCallback((internalId, customProps) => {
-    itemCustomPropsRef.current[internalId] = customProps;
-  }, []);
-  useEffect(() => {
-    if (hasValue && value && value.length !== internalIds.length) {
-      const newInternalIds = value.map((v, index) => {
-        const hashValue = getHashValue(v) + index;
-        if (hashValue in internalIdsRef.current) {
-          return internalIdsRef.current[hashValue];
-        } else {
-          const newInternalId = getRandomId();
-          internalIdsRef.current[hashValue] = newInternalId;
-          return newInternalId;
-        }
-      });
-      setInternalIds(newInternalIds);
-    }
-  }, [hasValue, internalIds.length, value]);
-  const insertInEnd = (e) => {
-    e.preventDefault();
-    if (disabled || (value ?? []).length >= max) return;
-    const id = getRandomId();
-    const newIds = [...internalIds, id];
-    if (onInternalIdAdded) onInternalIdAdded(id);
-    setInternalIds(newIds);
-    onValueChange([...value ?? [], newDefaultEntry]);
-  };
-  const remove = (index_0) => {
-    if ((value ?? []).length <= min) return;
-    const newIds_0 = [...internalIds];
-    newIds_0.splice(index_0, 1);
-    setInternalIds(newIds_0);
-    onValueChange(value.filter((_, i) => i !== index_0));
-  };
-  const copy = (index_1) => {
-    if ((value ?? []).length >= max) return;
-    const id_0 = getRandomId();
-    const copyingItem = value[index_1];
-    const newIds_1 = [...internalIds.slice(0, index_1 + 1), id_0, ...internalIds.slice(index_1 + 1)];
-    if (onInternalIdAdded) onInternalIdAdded(id_0);
-    setInternalIds(newIds_1);
-    onValueChange([...value.slice(0, index_1 + 1), copyingItem, ...value.slice(index_1 + 1)]);
-  };
-  const addInIndex = (index_2) => {
-    if ((value ?? []).length >= max) return;
-    const id_1 = getRandomId();
-    const newIds_2 = [...internalIds.slice(0, index_2), id_1, ...internalIds.slice(index_2)];
-    if (onInternalIdAdded) onInternalIdAdded(id_1);
-    setInternalIds(newIds_2);
-    onValueChange([...value.slice(0, index_2), newDefaultEntry, ...value.slice(index_2)]);
-  };
-  const onDragEnd = (result) => {
-    if (!result.destination) {
-      return;
-    }
-    const sourceIndex = result.source.index;
-    const destinationIndex = result.destination.index;
-    const newIds_3 = [...internalIds];
-    const temp = newIds_3[sourceIndex];
-    newIds_3[sourceIndex] = newIds_3[destinationIndex];
-    newIds_3[destinationIndex] = temp;
-    setInternalIds(newIds_3);
-    onValueChange(arrayMove(value, sourceIndex, destinationIndex));
+  const {
+    attributes,
+    listeners: listeners2,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable ? useSortable({
+    id
+  }) : {
+    attributes: {},
+    listeners: {},
+    setNodeRef: (node) => {
+    },
+    transform: null,
+    transition: void 0,
+    isDragging: false
   };
-  return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId, renderClone: (provided, snapshot, rubric) => {
-    const index_3 = rubric.source.index;
-    const internalId_0 = internalIds[index_3];
-    return /* @__PURE__ */ jsx(ArrayContainerItem, { provided, internalId: internalId_0, index: index_3, size, disabled, buildEntry, remove, copy, isDragging: snapshot.isDragging, storedProps: itemCustomPropsRef.current[internalId_0], updateItemCustomProps, addInIndex, canAddElements, sortable });
-  }, children: (droppableProvided, droppableSnapshot) => /* @__PURE__ */ jsxs("div", { className: cls("space-y-1", className), ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, children: [
-    hasValue && internalIds.map((internalId_1, index_4) => {
-      return /* @__PURE__ */ jsx(Draggable, { draggableId: `array_field_${internalId_1}`, isDragDisabled: disabled || !sortable, index: index_4, children: (provided_0, snapshot_0) => /* @__PURE__ */ jsx(ArrayContainerItem, { provided: provided_0, internalId: internalId_1, index: index_4, size, disabled, buildEntry, remove, copy, isDragging: snapshot_0.isDragging, storedProps: itemCustomPropsRef.current[internalId_1], updateItemCustomProps, addInIndex, canAddElements, sortable }) }, `array_field_${internalId_1}`);
-    }),
-    droppableProvided.placeholder,
-    canAddElements && /* @__PURE__ */ jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsx(Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || value?.length >= max, startIcon: /* @__PURE__ */ jsx(AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
-  ] }) }) });
+  const style = transform ? {
+    transform: CSS.Transform.toString(transform),
+    transition
+  } : {};
+  const dragHandleProps = sortable ? {
+    ...listeners2,
+    ...attributes
+  } : {};
+  return /* @__PURE__ */ jsx(ArrayContainerItem, { nodeRef: setNodeRef, style, dragHandleProps, internalId: id, index, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable, isDragging, storedProps, updateItemCustomProps });
 }
 function ArrayContainerItem(t0) {
   const $ = c(30);
   const {
-    provided,
+    nodeRef,
+    style,
+    dragHandleProps,
     index,
     internalId,
     size,
     disabled,
     buildEntry,
     remove,
+    copy,
     addInIndex,
     canAddElements,
     sortable,
-    copy,
     isDragging,
     storedProps,
     updateItemCustomProps
   } = t0;
-  const t1 = provided.innerRef;
-  const t2 = provided.draggableProps;
-  const t3 = provided.draggableProps.style;
-  const t4 = `relative ${!isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""} rounded-md opacity-100`;
-  let t5;
+  const t1 = `relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`;
+  let t2;
   if ($[0] !== internalId || $[1] !== updateItemCustomProps) {
-    t5 = (props) => updateItemCustomProps(internalId, props);
+    t2 = (props) => updateItemCustomProps(internalId, props);
     $[0] = internalId;
     $[1] = updateItemCustomProps;
-    $[2] = t5;
+    $[2] = t2;
   } else {
-    t5 = $[2];
+    t2 = $[2];
   }
-  let t6;
-  if ($[3] !== buildEntry || $[4] !== index || $[5] !== internalId || $[6] !== isDragging || $[7] !== storedProps || $[8] !== t5) {
-    t6 = buildEntry({
+  let t3;
+  if ($[3] !== buildEntry || $[4] !== index || $[5] !== internalId || $[6] !== isDragging || $[7] !== storedProps || $[8] !== t2) {
+    t3 = buildEntry({
       index,
       internalId,
       isDragging,
       storedProps,
-      storeProps: t5
+      storeProps: t2
     });
     $[3] = buildEntry;
     $[4] = index;
     $[5] = internalId;
     $[6] = isDragging;
     $[7] = storedProps;
-    $[8] = t5;
-    $[9] = t6;
+    $[8] = t2;
+    $[9] = t3;
   } else {
-    t6 = $[9];
+    t3 = $[9];
   }
-  let t7;
-  if ($[10] !== t6) {
-    t7 = /* @__PURE__ */ jsx("div", { className: "flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark", children: t6 });
-    $[10] = t6;
-    $[11] = t7;
+  let t4;
+  if ($[10] !== t3) {
+    t4 = /* @__PURE__ */ jsx("div", { className: "flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark", children: t3 });
+    $[10] = t3;
+    $[11] = t4;
   } else {
-    t7 = $[11];
+    t4 = $[11];
   }
-  const t8 = size === "small" ? "row" : "column";
-  let t9;
-  if ($[12] !== addInIndex || $[13] !== canAddElements || $[14] !== copy || $[15] !== disabled || $[16] !== index || $[17] !== provided || $[18] !== remove || $[19] !== sortable || $[20] !== t8) {
-    t9 = /* @__PURE__ */ jsx(ArrayItemOptions, { direction: t8, disabled, remove, index, provided, addInIndex, canAddElements, sortable, copy });
+  const t5 = size === "small" ? "row" : "column";
+  let t6;
+  if ($[12] !== addInIndex || $[13] !== canAddElements || $[14] !== copy || $[15] !== disabled || $[16] !== dragHandleProps || $[17] !== index || $[18] !== remove || $[19] !== sortable || $[20] !== t5) {
+    t6 = /* @__PURE__ */ jsx(ArrayItemOptions, { dragHandleProps, direction: t5, disabled, remove, index, copy, canAddElements, sortable, addInIndex });
     $[12] = addInIndex;
     $[13] = canAddElements;
     $[14] = copy;
     $[15] = disabled;
-    $[16] = index;
-    $[17] = provided;
+    $[16] = dragHandleProps;
+    $[17] = index;
     $[18] = remove;
     $[19] = sortable;
-    $[20] = t8;
-    $[21] = t9;
+    $[20] = t5;
+    $[21] = t6;
   } else {
-    t9 = $[21];
+    t6 = $[21];
   }
-  let t10;
-  if ($[22] !== t7 || $[23] !== t9) {
-    t10 = /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-      t7,
-      t9
+  let t7;
+  if ($[22] !== t4 || $[23] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+      t4,
+      t6
     ] });
-    $[22] = t7;
-    $[23] = t9;
-    $[24] = t10;
+    $[22] = t4;
+    $[23] = t6;
+    $[24] = t7;
   } else {
-    t10 = $[24];
+    t7 = $[24];
   }
-  let t11;
-  if ($[25] !== provided.draggableProps || $[26] !== provided.innerRef || $[27] !== t10 || $[28] !== t4) {
-    t11 = /* @__PURE__ */ jsx("div", { ref: t1, ...t2, style: t3, className: t4, children: t10 });
-    $[25] = provided.draggableProps;
-    $[26] = provided.innerRef;
-    $[27] = t10;
-    $[28] = t4;
-    $[29] = t11;
+  let t8;
+  if ($[25] !== nodeRef || $[26] !== style || $[27] !== t1 || $[28] !== t7) {
+    t8 = /* @__PURE__ */ jsx("div", { ref: nodeRef, style, className: t1, children: t7 });
+    $[25] = nodeRef;
+    $[26] = style;
+    $[27] = t1;
+    $[28] = t7;
+    $[29] = t8;
   } else {
-    t11 = $[29];
+    t8 = $[29];
   }
-  return t11;
+  return t8;
 }
 function ArrayItemOptions({
+  dragHandleProps,
   direction,
   disabled,
   remove,
   index,
-  provided,
   copy,
   canAddElements,
   sortable,
   addInIndex
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
-  const iconRef = React__default.useRef(null);
-  useOutsideAlerter(iconRef, () => setMenuOpen(false));
-  return /* @__PURE__ */ jsx("div", { className: `pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`, ref: iconRef, ...provided.dragHandleProps, children: /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 400, open: menuOpen ? false : void 0, side: direction === "column" ? "left" : void 0, title: !disabled && sortable ? "Drag to move. Click for more options" : void 0, children: [
-    /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: disabled || !canAddElements, onClick: (e) => {
+  const iconRef = useRef(null);
+  useOutsideAlerter(iconRef, () => {
+    if (menuOpen) setMenuOpen(false);
+  });
+  const showMenu = canAddElements ?? false;
+  const handleIconButtonClick = (e) => {
+    if (showMenu) {
+      e.stopPropagation();
       e.preventDefault();
-      setMenuOpen(true);
-    }, onDragStart: (e_0) => {
-      setMenuOpen(false);
-    }, className: disabled || !sortable ? "cursor-inherit" : "cursor-grab", children: /* @__PURE__ */ jsx(HandleIcon, {}) }),
-    /* @__PURE__ */ jsxs(Menu, { portalContainer: iconRef.current, open: menuOpen, trigger: /* @__PURE__ */ jsx("div", { tabIndex: -1 }), children: [
-      /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (e_1) => {
+      setMenuOpen((o) => !o);
+    } else if (sortable) ;
+    else {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  const title = !disabled && sortable && showMenu ? "Drag to move. Click for options" : !disabled && showMenu ? "Click for options" : !disabled && sortable ? "Drag to move" : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref: iconRef, className: `pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`, children: [
+    /* @__PURE__ */ jsx(Tooltip, { delayDuration: 400, open: menuOpen ? false : void 0, side: direction === "column" ? "left" : void 0, title, children: /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: disabled || !showMenu && !sortable, ...sortable ? dragHandleProps : {}, onClick: handleIconButtonClick, onFocus: () => {
+      if (sortable && menuOpen) setMenuOpen(false);
+    }, className: cls(disabled || !sortable && !showMenu ? "cursor-inherit" : "", sortable && !disabled ? "cursor-grab" : "", !sortable && showMenu && !disabled ? "cursor-pointer" : ""), children: /* @__PURE__ */ jsx(HandleIcon, {}) }) }),
+    showMenu && /* @__PURE__ */ jsxs(Menu, { portalContainer: iconRef.current, open: menuOpen, trigger: /* @__PURE__ */ jsx("div", { tabIndex: -1 }), children: [
+      /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (e_0) => {
         setMenuOpen(false);
         remove(index);
       }, children: [
@@ -19898,7 +20142,110 @@ function ArrayItemOptions({
         "Add below"
       ] })
     ] })
-  ] }) });
+  ] });
+}
+function ArrayContainer({
+  droppableId,
+  addLabel,
+  value,
+  disabled = false,
+  buildEntry,
+  size = "medium",
+  onInternalIdAdded,
+  includeAddButton: deprecatedIncludeAddButton,
+  canAddElements: canAddElementsProp = true,
+  sortable = true,
+  newDefaultEntry,
+  onValueChange,
+  className,
+  min = 0,
+  max = Infinity
+}) {
+  const canAddElements = (canAddElementsProp === void 0 ? true : canAddElementsProp) && // Default canAddElementsProp to true if undefined
+  (deprecatedIncludeAddButton === void 0 || deprecatedIncludeAddButton);
+  const hasValue = value && Array.isArray(value) && value.length > 0;
+  const internalIdsRef = useRef(buildIdsMap(value));
+  const [internalIds, setInternalIds] = useState(hasValue ? Object.values(internalIdsRef.current) : []);
+  const itemCustomPropsRef = useRef({});
+  const updateItemCustomProps = useCallback((internalId, customProps) => {
+    itemCustomPropsRef.current[internalId] = customProps;
+  }, []);
+  const pointerSensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  });
+  const keyboardSensor = useSensor(KeyboardSensor, {});
+  const sensors = useSensors(pointerSensor, keyboardSensor);
+  useEffect(() => {
+    if (hasValue && value && value.length !== internalIds.length) {
+      const newInternalIds = value.map((v, index) => {
+        const hashValue = getHashValue(v) + index;
+        if (hashValue in internalIdsRef.current) {
+          return internalIdsRef.current[hashValue];
+        } else {
+          const newInternalId = getRandomId();
+          internalIdsRef.current[hashValue] = newInternalId;
+          return newInternalId;
+        }
+      });
+      setInternalIds(newInternalIds);
+    }
+  }, [hasValue, internalIds.length, value]);
+  const insertInEnd = (e) => {
+    e.preventDefault();
+    if (disabled || (value ?? []).length >= max) return;
+    const id = getRandomId();
+    const newIds = [...internalIds, id];
+    if (onInternalIdAdded) onInternalIdAdded(id);
+    setInternalIds(newIds);
+    onValueChange([...value ?? [], newDefaultEntry]);
+  };
+  const remove = (index_0) => {
+    if ((value ?? []).length <= min) return;
+    const newIds_0 = [...internalIds];
+    newIds_0.splice(index_0, 1);
+    setInternalIds(newIds_0);
+    onValueChange(value.filter((_, i) => i !== index_0));
+  };
+  const copy = (index_1) => {
+    if ((value ?? []).length >= max) return;
+    const id_0 = getRandomId();
+    const copyingItem = value[index_1];
+    const newIds_1 = [...internalIds.slice(0, index_1 + 1), id_0, ...internalIds.slice(index_1 + 1)];
+    if (onInternalIdAdded) onInternalIdAdded(id_0);
+    setInternalIds(newIds_1);
+    onValueChange([...value.slice(0, index_1 + 1), copyingItem, ...value.slice(index_1 + 1)]);
+  };
+  const addInIndex = (index_2) => {
+    if ((value ?? []).length >= max) return;
+    const id_1 = getRandomId();
+    const newIds_2 = [...internalIds.slice(0, index_2), id_1, ...internalIds.slice(index_2)];
+    if (onInternalIdAdded) onInternalIdAdded(id_1);
+    setInternalIds(newIds_2);
+    onValueChange([...value.slice(0, index_2), newDefaultEntry, ...value.slice(index_2)]);
+  };
+  const onDragEnd = (event) => {
+    const {
+      active,
+      over
+    } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = internalIds.indexOf(active.id);
+    const newIndex = internalIds.indexOf(over.id);
+    if (oldIndex === -1 || newIndex === -1) return;
+    const newIds_3 = arrayMove(internalIds, oldIndex, newIndex);
+    setInternalIds(newIds_3);
+    onValueChange(arrayMove(value, oldIndex, newIndex));
+  };
+  return sortable ? /* @__PURE__ */ jsx(DndContext, { sensors, modifiers: [restrictToVerticalAxis], collisionDetection: closestCenter, onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: internalIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxs("div", { className: cls("space-y-1", className), id: droppableId, children: [
+    hasValue && internalIds.map((internalId_0, index_3) => /* @__PURE__ */ jsx(SortableItem, { id: internalId_0, index: index_3, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable, storedProps: itemCustomPropsRef.current[internalId_0], updateItemCustomProps }, `array_field_${internalId_0}`)),
+    canAddElements && /* @__PURE__ */ jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsx(Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsx(AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
+  ] }) }) }) : /* @__PURE__ */ jsxs("div", { className: cls("space-y-1", className), id: droppableId, children: [
+    hasValue && internalIds.map((internalId_1, index_4) => /* @__PURE__ */ jsx(ArrayContainerItem, { nodeRef: (node) => {
+    }, style: {}, dragHandleProps: {}, internalId: internalId_1, index: index_4, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable: false, isDragging: false, storedProps: itemCustomPropsRef.current[internalId_1], updateItemCustomProps }, `array_field_${internalId_1}`)),
+    canAddElements && /* @__PURE__ */ jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsx(Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsx(AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
+  ] });
 }
 function arrayMove(value, sourceIndex, destinationIndex) {
   const result = Array.from(value);
@@ -21509,7 +21856,7 @@ function EntityEditViewInner({
     };
     return /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
       "hidden": selectedTab !== customView.key
-    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: usedFormContext?.formex?.values ?? usedEntity?.values, formContext: usedFormContext }) }) }, `custom_view_${customView.key}`);
+    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ jsx(Builder, { collection, parentCollectionIds, entity: usedEntity, modifiedValues: usedFormContext?.formex?.values ?? usedEntity?.values, formContext: usedFormContext }) }) }, `custom_view_${customView.key}`);
   }).filter(Boolean);
   const globalLoading = dataLoading && !usedEntity;
   const jsonView = /* @__PURE__ */ jsx("div", { className: cls("relative flex-1 h-full overflow-auto w-full", {
@@ -21639,17 +21986,7 @@ function EntitySidePanel(props) {
   const parentCollectionIds = useMemo(() => {
     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) {
       if (blocked && collection) {