@firecms/core 3.0.0-canary.187 → 3.0.0-canary.189

package/dist/index.umd.js

@@ -5444,7 +5444,7 @@
     return e_0.stopPropagation();
   }
   function UrlComponentPreview(t0) {
-    const $ = reactCompilerRuntime.c(28);
+    const $ = reactCompilerRuntime.c(31);
     const {
       url,
       previewType,
@@ -5568,7 +5568,7 @@
           }
           let t6;
           if ($[22] !== hint) {
-            t6 = hint && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: hint, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "max-w-full truncate rtl text-left", variant: "caption", children: hint }) });
+            t6 = hint && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "max-w-full truncate rtl text-left", variant: "caption", children: hint });
             $[22] = hint;
             $[23] = t6;
           } else {
@@ -5587,7 +5587,16 @@
           } else {
             t7 = $[27];
           }
-          return t7;
+          let t8;
+          if ($[28] !== hint || $[29] !== t7) {
+            t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: hint, children: t7 });
+            $[28] = hint;
+            $[29] = t7;
+            $[30] = t8;
+          } else {
+            t8 = $[30];
+          }
+          return t8;
         }
       }
     }
@@ -8025,12 +8034,7 @@
     const metadata = storage?.metadata;
     const size = multipleFilesSupported ? "medium" : "large";
     const compression = storage?.imageCompression;
-    const internalInitialValue = (multipleFilesSupported ? value ?? [] : value ? [value] : []).map((entry) => ({
-      id: getRandomId$2(),
-      storagePathOrDownloadUrl: entry,
-      metadata,
-      size
-    }));
+    const internalInitialValue = getInternalInitialValue(multipleFilesSupported, value, metadata, size);
     const [initialValue, setInitialValue] = React.useState(value);
     const [internalValue, setInternalValue] = React.useState(internalInitialValue);
     React.useEffect(() => {
@@ -8074,8 +8078,8 @@
         propertyKey
       }) ?? "/";
     }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
-    const onFileUploadComplete = React.useCallback(async (uploadedPath, entry_0, metadata_0) => {
-      console.debug("onFileUploadComplete", uploadedPath, entry_0);
+    const onFileUploadComplete = React.useCallback(async (uploadedPath, entry, metadata_0) => {
+      console.debug("onFileUploadComplete", uploadedPath, entry);
       let uploadPathOrDownloadUrl = uploadedPath;
       if (storage.storeUrl) {
         uploadPathOrDownloadUrl = (await storageSource.getDownloadURL(uploadedPath)).url;
@@ -8088,8 +8092,8 @@
         return;
       }
       let newValue;
-      entry_0.storagePathOrDownloadUrl = uploadPathOrDownloadUrl;
-      entry_0.metadata = metadata_0;
+      entry.storagePathOrDownloadUrl = uploadPathOrDownloadUrl;
+      entry.metadata = metadata_0;
       newValue = [...internalValue];
       newValue = removeDuplicates(newValue);
       setInternalValue(newValue);
@@ -8143,6 +8147,24 @@
       multipleFilesSupported
     };
   }
+  function getInternalInitialValue(multipleFilesSupported, value, metadata, size) {
+    let strings = [];
+    if (multipleFilesSupported) {
+      if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+        strings = value ?? [];
+      }
+    } else {
+      if (typeof value === "string") {
+        strings = value ? [value] : [];
+      }
+    }
+    return strings.map((entry) => ({
+      id: getRandomId$2(),
+      storagePathOrDownloadUrl: entry,
+      metadata,
+      size
+    }));
+  }
   function removeDuplicates(items) {
     return items.filter((item, i) => {
       return (items.map((v) => v.storagePathOrDownloadUrl).indexOf(item.storagePathOrDownloadUrl) === i || !item.storagePathOrDownloadUrl) && (items.map((v) => v.file).indexOf(item.file) === i || !item.file);
@@ -8222,7 +8244,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `m-4 w-${imageSize} h-${imageSize}`, children: loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: `w-${imageSize} h-${imageSize}` }) });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.paperMixin, "relative m-4 border-box flex items-center justify-center", `min-w-[${imageSize}px] min-h-[${imageSize}px]`), children: [
-      loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "w-full h-full" }),
+      loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "m-4 w-full h-full" }),
       error && /* @__PURE__ */ jsxRuntime.jsx(ErrorView, { title: "Error uploading file", error })
     ] });
   }
@@ -9841,7 +9863,6 @@
     if (isLocalStorageAvailable) {
       try {
         const key = LOCAL_STORAGE_PREFIX + path;
-        console.log("Saving entity to cache", key, data);
         const entityString = JSON.stringify(data, customReplacer);
         localStorage.setItem(key, entityString);
       } catch (error) {
@@ -17453,7 +17474,7 @@
     return e.stopPropagation();
   }
   const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-  const disabledClasses = "border-dotted-gray";
+  const disabledClasses = ui.fieldBackgroundDisabledMixin;
   const nonActiveDropClasses = ui.fieldBackgroundHoverMixin;
   const activeDropClasses = "pt-0 border-2 border-solid";
   const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500";
@@ -17610,7 +17631,7 @@
     return t12;
   }
   function FileDropComponent(t0) {
-    const $ = reactCompilerRuntime.c(62);
+    const $ = reactCompilerRuntime.c(64);
     const {
       storage,
       disabled,
@@ -17702,12 +17723,13 @@
       t5 = $[12];
     }
     const t6 = disabled ? ui.fieldBackgroundDisabledMixin : ui.fieldBackgroundHoverMixin;
-    const t7 = multipleFilesSupported && internalValue.length ? "" : "flex";
-    const t8 = !isDragActive;
-    let t9;
-    if ($[13] !== disabled || $[14] !== isDragAccept || $[15] !== isDragActive || $[16] !== isDragReject || $[17] !== t6 || $[18] !== t7 || $[19] !== t8) {
-      t9 = ui.cls(ui.fieldBackgroundMixin, t6, dropZoneClasses, t7, {
-        [nonActiveDropClasses]: t8,
+    const t7 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
+    const t8 = multipleFilesSupported && internalValue.length ? "" : "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, {
+        [nonActiveDropClasses]: t9,
         [activeDropClasses]: isDragActive,
         [rejectDropClasses]: isDragReject,
         [acceptDropClasses]: isDragAccept,
@@ -17721,122 +17743,125 @@
       $[18] = t7;
       $[19] = t8;
       $[20] = t9;
+      $[21] = t10;
     } else {
-      t9 = $[20];
+      t10 = $[21];
     }
-    const t10 = droppableProvided.droppableProps;
-    const t11 = droppableProvided.innerRef;
-    const t12 = multipleFilesSupported && internalValue.length ? "overflow-auto" : "";
-    const t13 = multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]";
-    let t14;
-    if ($[21] !== t12 || $[22] !== t13) {
-      t14 = ui.cls("flex items-center p-1 no-scrollbar", t12, t13);
-      $[21] = t12;
+    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;
     } else {
-      t14 = $[23];
+      t15 = $[24];
     }
-    let t15;
-    if ($[24] !== getInputProps) {
-      t15 = getInputProps();
-      $[24] = getInputProps;
-      $[25] = t15;
+    let t16;
+    if ($[25] !== getInputProps) {
+      t16 = getInputProps();
+      $[25] = getInputProps;
+      $[26] = t16;
     } else {
-      t15 = $[25];
+      t16 = $[26];
     }
-    let t16;
-    if ($[26] !== autoFocus || $[27] !== t15) {
-      t16 = /* @__PURE__ */ jsxRuntime.jsx("input", { autoFocus, ...t15 });
-      $[26] = autoFocus;
-      $[27] = t15;
+    let t17;
+    if ($[27] !== autoFocus || $[28] !== t16) {
+      t17 = /* @__PURE__ */ jsxRuntime.jsx("input", { autoFocus, ...t16 });
+      $[27] = autoFocus;
       $[28] = t16;
+      $[29] = t17;
     } else {
-      t16 = $[28];
+      t17 = $[29];
     }
-    let t17;
-    if ($[29] !== disabled || $[30] !== internalValue || $[31] !== metadata || $[32] !== name || $[33] !== onClear || $[34] !== onFileUploadComplete || $[35] !== property || $[36] !== size || $[37] !== storagePathBuilder) {
-      let t182;
-      if ($[39] !== disabled || $[40] !== metadata || $[41] !== name || $[42] !== onClear || $[43] !== onFileUploadComplete || $[44] !== property || $[45] !== size || $[46] !== storagePathBuilder) {
-        t182 = (entry, index) => {
+    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 === "medium" ? 220 : 118, simple: false });
+              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}`);
         };
-        $[39] = disabled;
-        $[40] = metadata;
-        $[41] = name;
-        $[42] = onClear;
-        $[43] = onFileUploadComplete;
-        $[44] = property;
-        $[45] = size;
-        $[46] = storagePathBuilder;
-        $[47] = t182;
+        $[40] = disabled;
+        $[41] = metadata;
+        $[42] = name;
+        $[43] = onClear;
+        $[44] = onFileUploadComplete;
+        $[45] = property;
+        $[46] = size;
+        $[47] = storagePathBuilder;
+        $[48] = t192;
       } else {
-        t182 = $[47];
-      }
-      t17 = internalValue.map(t182);
-      $[29] = disabled;
-      $[30] = internalValue;
-      $[31] = metadata;
-      $[32] = name;
-      $[33] = onClear;
-      $[34] = onFileUploadComplete;
-      $[35] = property;
-      $[36] = size;
-      $[37] = storagePathBuilder;
-      $[38] = t17;
-    } else {
-      t17 = $[38];
+        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];
     }
-    let t18;
-    if ($[48] !== droppableProvided.droppableProps || $[49] !== droppableProvided.innerRef || $[50] !== droppableProvided.placeholder || $[51] !== t14 || $[52] !== t16 || $[53] !== t17) {
-      t18 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...t10, ref: t11, className: t14, children: [
-        t16,
+    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,
+        t18,
         droppableProvided.placeholder
       ] });
-      $[48] = droppableProvided.droppableProps;
-      $[49] = droppableProvided.innerRef;
-      $[50] = droppableProvided.placeholder;
-      $[51] = t14;
-      $[52] = t16;
+      $[49] = droppableProvided.droppableProps;
+      $[50] = droppableProvided.innerRef;
+      $[51] = droppableProvided.placeholder;
+      $[52] = t15;
       $[53] = t17;
       $[54] = t18;
+      $[55] = t19;
     } else {
-      t18 = $[54];
+      t19 = $[55];
     }
-    let t19;
-    if ($[55] !== helpText) {
-      t19 = /* @__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", children: helpText }) });
-      $[55] = helpText;
-      $[56] = t19;
+    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;
     } else {
-      t19 = $[56];
+      t21 = $[58];
     }
-    let t20;
-    if ($[57] !== t18 || $[58] !== t19 || $[59] !== t5 || $[60] !== t9) {
-      t20 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...t5, className: t9, children: [
-        t18,
-        t19
+    let t22;
+    if ($[59] !== t10 || $[60] !== t19 || $[61] !== t21 || $[62] !== t5) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...t5, className: t10, children: [
+        t19,
+        t21
       ] });
-      $[57] = t18;
-      $[58] = t19;
-      $[59] = t5;
-      $[60] = t9;
-      $[61] = t20;
+      $[59] = t10;
+      $[60] = t19;
+      $[61] = t21;
+      $[62] = t5;
+      $[63] = t22;
     } else {
-      t20 = $[61];
+      t22 = $[63];
     }
-    return t20;
+    return t22;
   }
   function _temp2$4(a, b) {
     return {
@@ -20101,7 +20126,7 @@
     };
   }
   function MarkdownEditorFieldBinding(t0) {
-    const $ = reactCompilerRuntime.c(54);
+    const $ = reactCompilerRuntime.c(57);
     const {
       property,
       propertyKey,
@@ -20111,9 +20136,12 @@
       showError,
       error,
       minimalistView,
+      disabled: disabledProp,
+      isSubmitting,
       context,
       customProps
     } = t0;
+    const disabled = disabledProp || isSubmitting;
     const highlight = customProps?.highlight;
     const editorProps = customProps?.editorProps;
     const storageSource = useStorageSource();
@@ -20262,83 +20290,87 @@
       t9 = $[27];
     }
     let t10;
-    if ($[28] !== editorProps || $[29] !== highlight || $[30] !== onContentChange || $[31] !== t8 || $[32] !== t9 || $[33] !== value) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx(editor.FireCMSEditor, { content: value, onMarkdownContentChange: onContentChange, version: t8, highlight, handleImageUpload: t9, ...editorProps });
-      $[28] = editorProps;
-      $[29] = highlight;
-      $[30] = onContentChange;
-      $[31] = t8;
-      $[32] = t9;
-      $[33] = value;
-      $[34] = t10;
+    if ($[28] !== disabled || $[29] !== editorProps || $[30] !== highlight || $[31] !== onContentChange || $[32] !== t8 || $[33] !== t9 || $[34] !== value) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(editor.FireCMSEditor, { content: value, onMarkdownContentChange: onContentChange, version: t8, highlight, disabled, handleImageUpload: t9, ...editorProps });
+      $[28] = disabled;
+      $[29] = editorProps;
+      $[30] = highlight;
+      $[31] = onContentChange;
+      $[32] = t8;
+      $[33] = t9;
+      $[34] = value;
+      $[35] = t10;
     } else {
-      t10 = $[34];
+      t10 = $[35];
     }
     const editor$1 = t10;
     if (minimalistView) {
       return editor$1;
     }
     let t11;
-    if ($[35] !== property) {
+    if ($[36] !== property) {
       t11 = getIconForProperty(property, "small");
-      $[35] = property;
-      $[36] = t11;
+      $[36] = property;
+      $[37] = t11;
     } else {
-      t11 = $[36];
+      t11 = $[37];
     }
     const t12 = property.validation?.required;
     let t13;
-    if ($[37] !== property.name || $[38] !== propertyKey || $[39] !== t11 || $[40] !== t12) {
+    if ($[38] !== property.name || $[39] !== propertyKey || $[40] !== t11 || $[41] !== t12) {
       t13 = /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: t11, required: t12, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" });
-      $[37] = property.name;
-      $[38] = propertyKey;
-      $[39] = t11;
-      $[40] = t12;
-      $[41] = t13;
-    } else {
-      t13 = $[41];
-    }
-    let t14;
-    if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
-      t14 = ui.cls("rounded-md", ui.fieldBackgroundMixin, ui.fieldBackgroundHoverMixin);
-      $[42] = t14;
+      $[38] = property.name;
+      $[39] = propertyKey;
+      $[40] = t11;
+      $[41] = t12;
+      $[42] = t13;
     } else {
-      t14 = $[42];
+      t13 = $[42];
     }
+    const t14 = disabled ? ui.fieldBackgroundDisabledMixin : ui.fieldBackgroundHoverMixin;
     let t15;
-    if ($[43] !== editor$1) {
-      t15 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t14, children: editor$1 });
-      $[43] = editor$1;
+    if ($[43] !== t14) {
+      t15 = ui.cls("rounded-md", ui.fieldBackgroundMixin, t14);
+      $[43] = t14;
       $[44] = t15;
     } else {
       t15 = $[44];
     }
     let t16;
-    if ($[45] !== error || $[46] !== includeDescription || $[47] !== property || $[48] !== showError) {
-      t16 = /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError, error, property });
-      $[45] = error;
-      $[46] = includeDescription;
-      $[47] = property;
-      $[48] = showError;
-      $[49] = t16;
+    if ($[45] !== editor$1 || $[46] !== t15) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t15, children: editor$1 });
+      $[45] = editor$1;
+      $[46] = t15;
+      $[47] = t16;
     } else {
-      t16 = $[49];
+      t16 = $[47];
     }
     let t17;
-    if ($[50] !== t13 || $[51] !== t15 || $[52] !== t16) {
-      t17 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    if ($[48] !== error || $[49] !== includeDescription || $[50] !== property || $[51] !== showError) {
+      t17 = /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError, error, property });
+      $[48] = error;
+      $[49] = includeDescription;
+      $[50] = property;
+      $[51] = showError;
+      $[52] = t17;
+    } else {
+      t17 = $[52];
+    }
+    let t18;
+    if ($[53] !== t13 || $[54] !== t16 || $[55] !== t17) {
+      t18 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         t13,
-        t15,
-        t16
+        t16,
+        t17
       ] });
-      $[50] = t13;
-      $[51] = t15;
-      $[52] = t16;
-      $[53] = t17;
+      $[53] = t13;
+      $[54] = t16;
+      $[55] = t17;
+      $[56] = t18;
     } else {
-      t17 = $[53];
+      t18 = $[56];
     }
-    return t17;
+    return t18;
   }
   function ArrayCustomShapedFieldBinding(t0) {
     const $ = reactCompilerRuntime.c(46);