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

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-router-dom"), require("fuse.js"), require("react-fast-compare"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("yup"), require("react-window"), require("@hello-pangea/dnd"), require("react-dropzone"), require("react-image-file-resizer"), require("@firecms/editor"), require("prism-react-renderer"), require("react-router"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-router-dom", "fuse.js", "react-fast-compare", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "@hello-pangea/dnd", "react-dropzone", "react-image-file-resizer", "@firecms/editor", "prism-react-renderer", "react-router", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.reactRouterDom, global.Fuse, global.equal, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.dnd, global.reactDropzone, global.Resizer, global.editor, global.prismReactRenderer, global.reactRouter, global.Portal));
-})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, reactRouterDom, Fuse, equal, dateFns, locales, useMeasure, yup, reactWindow, dnd, reactDropzone, Resizer, editor, prismReactRenderer, reactRouter, Portal) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-router-dom"), require("fuse.js"), require("react-fast-compare"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("yup"), require("react-window"), require("@dnd-kit/core"), require("@dnd-kit/modifiers"), require("@dnd-kit/sortable"), require("@dnd-kit/utilities"), require("react-dropzone"), require("react-image-file-resizer"), require("@firecms/editor"), require("prism-react-renderer"), require("react-router"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-router-dom", "fuse.js", "react-fast-compare", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "@dnd-kit/core", "@dnd-kit/modifiers", "@dnd-kit/sortable", "@dnd-kit/utilities", "react-dropzone", "react-image-file-resizer", "@firecms/editor", "prism-react-renderer", "react-router", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.reactRouterDom, global.Fuse, global.equal, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.core, global.modifiers, global.sortable, global.utilities, global.reactDropzone, global.Resizer, global.editor, global.prismReactRenderer, global.reactRouter, global.Portal));
+})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, reactRouterDom, Fuse, equal, dateFns, locales, useMeasure, yup, reactWindow, core, modifiers, sortable, utilities, reactDropzone, Resizer, editor, prismReactRenderer, reactRouter, Portal) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -4308,7 +4308,7 @@
             }
           } else {
             onEntityUpdate(void 0);
-            return _temp3$4;
+            return _temp3$5;
           }
         }
       };
@@ -4349,7 +4349,7 @@
     }
     return t5;
   }
-  function _temp3$4() {
+  function _temp3$5() {
   }
   function _temp2$d() {
   }
@@ -9884,7 +9884,7 @@
   }
   function propertiesToColumns({
     properties,
-    sortable,
+    sortable: sortable2,
     forceFilter,
     AdditionalHeaderWidget
   }) {
@@ -9901,7 +9901,7 @@
         align: getTableCellAlignment(property),
         icon: getIconForProperty(property, "small"),
         title: property.name ?? key,
-        sortable,
+        sortable: sortable2,
         filter: !disabledFilter && filterable,
         width: getTablePropertyColumnWidth(property),
         resizable: true,
@@ -10610,8 +10610,7 @@
     className,
     endAdornment,
     AddColumnComponent,
-    initialScroll = 0,
-    debug
+    initialScroll = 0
   }) {
     const sortByProperty = sortBy ? sortBy[0] : void 0;
     const currentSort = sortBy ? sortBy[1] : void 0;
@@ -10655,11 +10654,9 @@
       offsetSize: true
     });
     const onColumnResizeInternal = React.useCallback((params) => {
-      if (debug) console.log("onColumnResizeInternal", params);
       setColumns((prevColumns) => prevColumns.map((column) => column.key === params.column.key ? params.column : column));
     }, []);
     const onColumnResizeEndInternal = React.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);
@@ -10667,18 +10664,15 @@
     }, [columns, onColumnResize]);
     const filterRef = React.useRef();
     React.useEffect(() => {
-      if (debug) console.log("Filter updated", filterInput);
       filterRef.current = filterInput;
     }, [filterInput]);
     const scrollToTop = React.useCallback(() => {
-      if (debug) console.log("scrollToTop");
       endReachCallbackThreshold.current = 0;
       if (tableRef.current) {
         tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
       }
     }, []);
     const onColumnSort = React.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";
@@ -10699,9 +10693,7 @@
       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 = React.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();
@@ -10712,11 +10704,6 @@
       scrollOffset: scrollOffset_0,
       scrollUpdateWasRequested
     }) => {
-      if (debug) console.log("onScroll", {
-        scrollDirection,
-        scrollOffset: scrollOffset_0,
-        scrollUpdateWasRequested
-      });
       if (onScrollProp) {
         debouncedScroll({
           scrollDirection,
@@ -10727,7 +10714,6 @@
       if (!scrollUpdateWasRequested && scrollOffset_0 >= maxScroll - endOffset) onEndReachedInternal(scrollOffset_0);
     }, [maxScroll, onEndReachedInternal]);
     const onFilterUpdateInternal = React.useCallback((column_1, filterForProperty) => {
-      if (debug) console.log("onFilterUpdateInternal", column_1, filterForProperty);
       endReachCallbackThreshold.current = 0;
       const filter_0 = filterRef.current;
       let newFilterValue = filter_0 ? {
@@ -10775,7 +10761,6 @@
       endAdornment,
       AddColumnComponent
     };
-    if (debug) console.log("VirtualTable render", virtualListController);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: measureRef, style, className: ui.cls("h-full w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(VirtualListContext.Provider, { value: virtualListController, children: /* @__PURE__ */ jsxRuntime.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({
@@ -11111,8 +11096,8 @@
     }
     let t9;
     if ($[34] !== dataType || $[35] !== enumValues || $[36] !== internalValue || $[37] !== multiple || $[38] !== name || $[39] !== operation || $[40] !== updateFilter) {
-      t9 = enumValues && multiple && /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
       $[34] = dataType;
       $[35] = enumValues;
@@ -11175,10 +11160,10 @@
     }
     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) {
@@ -11564,7 +11549,7 @@
     properties,
     tableController,
     filterable = true,
-    sortable = true,
+    sortable: sortable2 = true,
     endAdornment,
     AddColumnComponent,
     AdditionalHeaderWidget,
@@ -11640,7 +11625,7 @@
     const collectionColumns = (() => {
       const columnsResult = propertiesToColumns({
         properties,
-        sortable,
+        sortable: sortable2,
         forceFilter,
         AdditionalHeaderWidget
       });
@@ -13302,7 +13287,7 @@
     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;
@@ -13312,7 +13297,7 @@
           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__ */ jsxRuntime.jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin_0.key}`);
           });
@@ -13333,7 +13318,7 @@
         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 {
@@ -13350,7 +13335,7 @@
         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 {
@@ -13538,19 +13523,19 @@
   function _temp8(plugin_4, i_1) {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -13902,7 +13887,9 @@
       ] }) : void 0
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      enumValues && /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { size: "large", error, fullWidth: true, onValueChange: (v) => onChange(v), ...fieldProps, renderValue: (option) => {
+      enumValues && /* @__PURE__ */ jsxRuntime.jsx(ui.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}`;
@@ -15413,15 +15400,161 @@
     }
     return t12;
   }
+  function SortableStorageItem(t0) {
+    const $ = reactCompilerRuntime.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
+    } = sortable.useSortable(t1);
+    let t2;
+    if ($[2] !== transform) {
+      t2 = utilities.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = ui.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__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(64);
+    const $ = reactCompilerRuntime.c(63);
     const {
       storage,
       disabled,
-      isDraggingOver,
       onFilesAdded,
       multipleFilesSupported,
-      droppableProvided,
       autoFocus,
       internalValue,
       property,
@@ -15429,23 +15562,23 @@
       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);
@@ -15507,170 +15640,154 @@
     }
     const t6 = disabled ? ui.fieldBackgroundDisabledMixin : ui.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 = ui.cls(ui.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 = ui.cls(ui.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 = ui.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 = ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StorageItemPreview, { name: `storage_preview_${entry.storagePathOrDownloadUrl}`, property, disabled, value: entry.storagePathOrDownloadUrl, onRemove: onClear, size: entry.size });
-          } else {
-            if (entry.file) {
-              child = /* @__PURE__ */ jsxRuntime.jsx(StorageUploadProgress, { entry, metadata, storagePath: storagePathBuilder(entry.file), onFileUploadComplete, imageSize: size === "large" ? 220 : 118, simple: false });
-            }
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: `array_field_${name}_${entry.id}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1, ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, className: ui.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { ...t5, className: t10, children: [
-        t19,
-        t21
+    let t23;
+    if ($[58] !== t11 || $[59] !== t20 || $[60] !== t22 || $[61] !== t5) {
+      t23 = /* @__PURE__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(44);
+    const {
+      property,
+      name,
+      value,
+      setInternalValue,
+      onChange,
+      multipleFilesSupported,
+      onFileUploadComplete,
+      disabled,
+      onFilesAdded,
+      autoFocus,
+      storage,
+      storagePathBuilder
+    } = t0;
     if (multipleFilesSupported) {
       const arrayProperty = property;
       if (arrayProperty.of) {
@@ -15685,41 +15802,208 @@
       }
     }
     const metadata = storage?.metadata;
-    const size = multipleFilesSupported ? "medium" : "large";
-    const moveItem = React.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 = React.useCallback((result) => {
-      if (!result.destination) {
-        return;
-      }
-      moveItem(result.source.index, result.destination.index);
-    }, [moveItem]);
-    const onClear = React.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] = React.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: sortable.sortableKeyboardCoordinates
+      };
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    const sensors = core.useSensors(core.useSensor(core.PointerSensor, t2), core.useSensor(core.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__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: `droppable_${name}`, direction: "horizontal", renderClone: (provided, snapshot, rubric) => {
-      const entry = value[rubric.source.index];
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style, className: "rounded", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FileDropComponent, { ...fileDropProps });
+        $[33] = fileDropProps;
+        $[34] = t9;
+      } else {
+        t9 = $[34];
+      }
+      let t10;
+      if ($[35] !== t8 || $[36] !== t9) {
+        t10 = /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: t8, strategy: sortable.horizontalListSortingStrategy, children: t9 });
+        $[35] = t8;
+        $[36] = t9;
+        $[37] = t10;
+      } else {
+        t10 = $[37];
+      }
+      let t11;
+      if ($[38] !== handleDragEnd || $[39] !== sensors || $[40] !== t10) {
+        t11 = /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, collisionDetection: core.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__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(52);
@@ -17529,7 +17813,7 @@
     }
     const buildEntry = t2;
     const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === void 0);
-    const sortable = property.sortable === void 0 ? true : property.sortable;
+    const sortable2 = property.sortable === void 0 ? true : property.sortable;
     const t3 = property.name ? "Add entry to " + property.name : "Add entry";
     const t4 = isSubmitting || Boolean(property.disabled);
     let t5;
@@ -17551,12 +17835,12 @@
     }
     const t7 = property.widthPercentage !== void 0 ? "mt-8" : void 0;
     let t8;
-    if ($[18] !== buildEntry || $[19] !== canAddElements || $[20] !== propertyKey || $[21] !== sortable || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== value) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(ArrayContainer, { droppableId: propertyKey, addLabel: t3, value, buildEntry, onInternalIdAdded: setLastAddedId, disabled: t4, canAddElements, sortable, newDefaultEntry: t5, onValueChange: t6, className: t7 });
+    if ($[18] !== buildEntry || $[19] !== canAddElements || $[20] !== propertyKey || $[21] !== sortable2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== value) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ArrayContainer, { droppableId: propertyKey, addLabel: t3, value, buildEntry, onInternalIdAdded: setLastAddedId, disabled: t4, canAddElements, sortable: sortable2, newDefaultEntry: t5, onValueChange: t6, className: t7 });
       $[18] = buildEntry;
       $[19] = canAddElements;
       $[20] = propertyKey;
-      $[21] = sortable;
+      $[21] = sortable2;
       $[22] = t3;
       $[23] = t4;
       $[24] = t5;
@@ -19652,227 +19936,182 @@
     ...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: sortable$1,
+    storedProps,
+    updateItemCustomProps
   }) {
-    const canAddElements = (canAddElementsProp || canAddElementsProp === void 0) && (deprecatedIncludeAddButton === void 0 || deprecatedIncludeAddButton);
-    const hasValue = value && Array.isArray(value) && value.length > 0;
-    const internalIdsRef = React.useRef(buildIdsMap(value));
-    const [internalIds, setInternalIds] = React.useState(hasValue ? Object.values(internalIdsRef.current) : []);
-    const itemCustomPropsRef = React.useRef({});
-    const updateItemCustomProps = React.useCallback((internalId, customProps) => {
-      itemCustomPropsRef.current[internalId] = customProps;
-    }, []);
-    React.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$1 ? sortable.useSortable({
+      id
+    }) : {
+      attributes: {},
+      listeners: {},
+      setNodeRef: (node) => {
+      },
+      transform: null,
+      transition: void 0,
+      isDragging: false
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId, renderClone: (provided, snapshot, rubric) => {
-      const index_3 = rubric.source.index;
-      const internalId_0 = internalIds[index_3];
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: ui.cls("space-y-1", className), ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, children: [
-      hasValue && internalIds.map((internalId_1, index_4) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: `array_field_${internalId_1}`, isDragDisabled: disabled || !sortable, index: index_4, children: (provided_0, snapshot_0) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || value?.length >= max, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
-    ] }) }) });
+    const style = transform ? {
+      transform: utilities.CSS.Transform.toString(transform),
+      transition
+    } : {};
+    const dragHandleProps = sortable$1 ? {
+      ...listeners2,
+      ...attributes
+    } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrayContainerItem, { nodeRef: setNodeRef, style, dragHandleProps, internalId: id, index, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable: sortable$1, isDragging, storedProps, updateItemCustomProps });
   }
   function ArrayContainerItem(t0) {
     const $ = reactCompilerRuntime.c(30);
     const {
-      provided,
+      nodeRef,
+      style,
+      dragHandleProps,
       index,
       internalId,
       size,
       disabled,
       buildEntry,
       remove,
+      copy,
       addInIndex,
       canAddElements,
-      sortable,
-      copy,
+      sortable: sortable2,
       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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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] !== sortable2 || $[20] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ArrayItemOptions, { dragHandleProps, direction: t5, disabled, remove, index, copy, canAddElements, sortable: sortable2, 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;
+      $[19] = sortable2;
+      $[20] = t5;
+      $[21] = t6;
     } else {
-      t9 = $[21];
+      t6 = $[21];
     }
-    let t10;
-    if ($[22] !== t7 || $[23] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
-        t7,
-        t9
+    let t7;
+    if ($[22] !== t4 || $[23] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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,
+    sortable: sortable2,
     addInIndex
   }) {
     const [menuOpen, setMenuOpen] = React.useState(false);
     const iconRef = React.useRef(null);
-    ui.useOutsideAlerter(iconRef, () => setMenuOpen(false));
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", disabled: disabled || !canAddElements, onClick: (e) => {
+    ui.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__ */ jsxRuntime.jsx(ui.HandleIcon, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { portalContainer: iconRef.current, open: menuOpen, trigger: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1 }), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: (e_1) => {
+        setMenuOpen((o) => !o);
+      } else if (sortable2) ;
+      else {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    const title = !disabled && sortable2 && showMenu ? "Drag to move. Click for options" : !disabled && showMenu ? "Click for options" : !disabled && sortable2 ? "Drag to move" : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: iconRef, className: `pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { delayDuration: 400, open: menuOpen ? false : void 0, side: direction === "column" ? "left" : void 0, title, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", disabled: disabled || !showMenu && !sortable2, ...sortable2 ? dragHandleProps : {}, onClick: handleIconButtonClick, onFocus: () => {
+        if (sortable2 && menuOpen) setMenuOpen(false);
+      }, className: ui.cls(disabled || !sortable2 && !showMenu ? "cursor-inherit" : "", sortable2 && !disabled ? "cursor-grab" : "", !sortable2 && showMenu && !disabled ? "cursor-pointer" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(ui.HandleIcon, {}) }) }),
+      showMenu && /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { portalContainer: iconRef.current, open: menuOpen, trigger: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1 }), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: (e_0) => {
           setMenuOpen(false);
           remove(index);
         }, children: [
@@ -19901,7 +20140,110 @@
           "Add below"
         ] })
       ] })
-    ] }) });
+    ] });
+  }
+  function ArrayContainer({
+    droppableId,
+    addLabel,
+    value,
+    disabled = false,
+    buildEntry,
+    size = "medium",
+    onInternalIdAdded,
+    includeAddButton: deprecatedIncludeAddButton,
+    canAddElements: canAddElementsProp = true,
+    sortable: sortable$1 = 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 = React.useRef(buildIdsMap(value));
+    const [internalIds, setInternalIds] = React.useState(hasValue ? Object.values(internalIdsRef.current) : []);
+    const itemCustomPropsRef = React.useRef({});
+    const updateItemCustomProps = React.useCallback((internalId, customProps) => {
+      itemCustomPropsRef.current[internalId] = customProps;
+    }, []);
+    const pointerSensor = core.useSensor(core.PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    });
+    const keyboardSensor = core.useSensor(core.KeyboardSensor, {});
+    const sensors = core.useSensors(pointerSensor, keyboardSensor);
+    React.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$1 ? /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, modifiers: [modifiers.restrictToVerticalAxis], collisionDetection: core.closestCenter, onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: internalIds, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("space-y-1", className), id: droppableId, children: [
+      hasValue && internalIds.map((internalId_0, index_3) => /* @__PURE__ */ jsxRuntime.jsx(SortableItem, { id: internalId_0, index: index_3, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable: sortable$1, storedProps: itemCustomPropsRef.current[internalId_0], updateItemCustomProps }, `array_field_${internalId_0}`)),
+      canAddElements && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
+    ] }) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("space-y-1", className), id: droppableId, children: [
+      hasValue && internalIds.map((internalId_1, index_4) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
+    ] });
   }
   function arrayMove(value, sourceIndex, destinationIndex) {
     const result = Array.from(value);
@@ -21512,7 +21854,7 @@
       };
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
         "hidden": selectedTab !== customView.key
-      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: usedFormContext?.formex?.values ?? usedEntity?.values, formContext: usedFormContext }) }) }, `custom_view_${customView.key}`);
+      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: ui.cls("relative flex-1 h-full overflow-auto w-full", {
@@ -21642,17 +21984,7 @@
     const parentCollectionIds = React.useMemo(() => {
       return navigationController.getParentCollectionIds(path);
     }, [navigationController, path]);
-    const collection = React.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);
     React.useEffect(() => {
       function beforeunload(e) {
         if (blocked && collection) {