@firecms/core 3.0.0-canary.204 → 3.0.0-canary.205

package/dist/index.umd.js

@@ -3685,7 +3685,7 @@
           }
           setDataLoading(false);
           setDataLoadingError(void 0);
-          setData(entities.map(_temp$t));
+          setData(entities.map(_temp$s));
           setNoMoreToLoad(!itemCount || entities.length < itemCount);
         };
         const onError = (error) => {
@@ -3768,7 +3768,7 @@
   }
   function _temp2$e() {
   }
-  function _temp$t(e_0) {
+  function _temp$s(e_0) {
     return {
       ...e_0
     };
@@ -3833,7 +3833,7 @@
           setEntity(CACHE[`${path}/${entityId}`]);
           setDataLoading(false);
           setDataLoadingError(void 0);
-          return _temp$s;
+          return _temp$r;
         } else {
           if (entityId && path && collection) {
             if (dataSource.listenEntity) {
@@ -3901,7 +3901,7 @@
   }
   function _temp2$d() {
   }
-  function _temp$s() {
+  function _temp$r() {
   }
   async function saveEntityWithCallbacks({
     collection,
@@ -4751,7 +4751,7 @@
       t0 = $[0];
     }
     const configCache = React.useRef(t0);
-    const getCollectionFromStorage = _temp$r;
+    const getCollectionFromStorage = _temp$q;
     let t1;
     if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = (path) => {
@@ -4874,7 +4874,7 @@
     }
     return t11;
   }
-  function _temp$r(storageKey) {
+  function _temp$q(storageKey) {
     const item = localStorage.getItem(storageKey);
     return item ? JSON.parse(item) : {};
   }
@@ -5167,7 +5167,7 @@
     }
     let t9;
     if ($[16] !== url) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "small", onClick: _temp$q, children: t8 }) });
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "small", onClick: _temp$p, children: t8 }) });
       $[16] = url;
       $[17] = t9;
     } else {
@@ -5201,7 +5201,7 @@
     }
     return t11;
   }
-  function _temp$q(e_0) {
+  function _temp$p(e_0) {
     return e_0.stopPropagation();
   }
   function UrlComponentPreview(t0) {
@@ -5234,7 +5234,7 @@
       }
       let t3;
       if ($[2] !== url) {
-        t3 = /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary", href: url, rel: "noopener noreferrer", onMouseDown: _temp$p, target: "_blank", children: [
+        t3 = /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary", href: url, rel: "noopener noreferrer", onMouseDown: _temp$o, target: "_blank", children: [
           t2,
           url
         ] });
@@ -5365,7 +5365,7 @@
   function _temp2$c(e_0) {
     return e_0.stopPropagation();
   }
-  function _temp$p(e) {
+  function _temp$o(e) {
     e.preventDefault();
   }
   function VideoPreview(t0) {
@@ -5499,7 +5499,7 @@
           if (Array.isArray(arrayProperty.of)) {
             let t1;
             if ($[6] !== arrayProperty.of) {
-              t1 = arrayProperty.of.map(_temp$o);
+              t1 = arrayProperty.of.map(_temp$n);
               $[6] = arrayProperty.of;
               $[7] = t1;
             } else {
@@ -5637,7 +5637,7 @@
     }
     return content || null;
   }
-  function _temp$o(p, i) {
+  function _temp$n(p, i) {
     return renderGenericArrayCell(p, i);
   }
   function renderMap(property, size) {
@@ -6801,7 +6801,7 @@
     }
     let t1;
     if ($[1] !== value) {
-      t1 = Object.entries(value).map(_temp$n);
+      t1 = Object.entries(value).map(_temp$m);
       $[1] = value;
       $[2] = t1;
     } else {
@@ -6817,7 +6817,7 @@
     }
     return t2;
   }
-  function _temp$n(t0) {
+  function _temp$m(t0) {
     const [key, childValue] = t0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.defaultBorderMixin, "last:border-b-0 border-b"), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
@@ -7563,7 +7563,7 @@
         console.trace("onChange");
         if (valueType === "number") {
           if (multiple) {
-            const newValue = updatedValue.map(_temp$m);
+            const newValue = updatedValue.map(_temp$l);
             updateValue(newValue);
           } else {
             updateValue(parseFloat(updatedValue));
@@ -7618,7 +7618,7 @@
   function _temp2$b(v_0) {
     return v_0.toString();
   }
-  function _temp$m(v) {
+  function _temp$l(v) {
     return parseFloat(v);
   }
   function VirtualTableNumberInput(props) {
@@ -8161,7 +8161,7 @@
     const snackbarContext = useSnackbarController();
     let t1;
     if ($[0] !== storage.acceptedFiles) {
-      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$l).reduce(_temp2$a, {}) : void 0;
+      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$k).reduce(_temp2$a, {}) : void 0;
       $[0] = storage.acceptedFiles;
       $[1] = t1;
     } else {
@@ -8390,7 +8390,7 @@
       ...b
     };
   }
-  function _temp$l(e) {
+  function _temp$k(e) {
     return {
       [e]: []
     };
@@ -8497,7 +8497,7 @@
     let t1;
     if ($[2] !== updateValue) {
       t1 = (entities) => {
-        updateValue(entities.map(_temp$k));
+        updateValue(entities.map(_temp$j));
       };
       $[2] = updateValue;
       $[3] = t1;
@@ -8658,7 +8658,7 @@
     }
     return t10;
   }, equal);
-  function _temp$k(e) {
+  function _temp$j(e) {
     return getReferenceFrom(e);
   }
   function _temp2$9(ref) {
@@ -9794,7 +9794,7 @@
     }
     let t6;
     if ($[6] !== t3 || $[7] !== t4) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 h-10", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 h-10", size: "small", onValueChange: t4, renderValue: _temp$i, children: t5 }) });
       $[6] = t3;
       $[7] = t4;
       $[8] = t6;
@@ -9881,7 +9881,7 @@
   function _temp2$8(size_0) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: size_0, className: "w-12 font-medium text-center", children: size_0.toUpperCase() }, size_0);
   }
-  function _temp$j(v_0) {
+  function _temp$i(v_0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: v_0.toUpperCase() });
   }
   function getTableCellAlignment(property) {
@@ -10990,7 +10990,7 @@
     let t1;
     if ($[0] !== text) {
       const urlRegex = /https?:\/\/[^\s]+/g;
-      t1 = text.replace(urlRegex, _temp$i);
+      t1 = text.replace(urlRegex, _temp$h);
       $[0] = text;
       $[1] = t1;
     } else {
@@ -11009,7 +11009,7 @@
     }
     return t2;
   };
-  function _temp$i(url) {
+  function _temp$h(url) {
     return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
   }
   const operationLabels$2 = {
@@ -11217,7 +11217,7 @@
     }
     let t6;
     if ($[16] !== operation || $[17] !== t4 || $[18] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$h, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$g, children: t5 }) });
       $[16] = operation;
       $[17] = t4;
       $[18] = t5;
@@ -11341,7 +11341,7 @@
   function _temp2$7(op_1) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op_1, children: operationLabels$1[op_1] }, op_1);
   }
-  function _temp$h(op_0) {
+  function _temp$g(op_0) {
     return operationLabels$1[op_0];
   }
   function BooleanFilterField(t0) {
@@ -11480,7 +11480,7 @@
     }
     let t6;
     if ($[13] !== operation || $[14] !== t4 || $[15] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$g, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$f, children: t5 }) });
       $[13] = operation;
       $[14] = t4;
       $[15] = t5;
@@ -11569,7 +11569,7 @@
   function _temp2$6(op_1) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op_1, children: operationLabels[op_1] }, op_1);
   }
-  function _temp$g(op_0) {
+  function _temp$f(op_0) {
     return operationLabels[op_0];
   }
   const SelectableTable = React.memo(
@@ -12276,7 +12276,7 @@
       const searchBlocked = t12;
       let t2;
       if ($[15] !== customizationController.plugins || $[16] !== dataSource?.initTextSearch) {
-        t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$f);
+        t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$e);
         $[15] = customizationController.plugins;
         $[16] = dataSource?.initTextSearch;
         $[17] = t2;
@@ -12368,7 +12368,7 @@
     }
     return t1;
   }
-  function _temp$f(p_0) {
+  function _temp$e(p_0) {
     return Boolean(p_0.collectionView?.onTextSearchClick);
   }
   function DeleteEntityDialog({
@@ -12918,7 +12918,7 @@
     }
     let t3;
     if ($[3] !== actions) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: _temp$e, children: actions });
+      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: _temp$d, children: actions });
       $[3] = actions;
       $[4] = t3;
     } else {
@@ -13004,7 +13004,7 @@
     }
     return t11;
   }
-  function _temp$e(event) {
+  function _temp$d(event) {
     event.preventDefault();
     event.stopPropagation();
   }
@@ -13296,7 +13296,7 @@
       T0 = ui.Collapse;
       t4 = favouriteCollections.length > 0;
       t2 = "flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]";
-      t3 = favouriteCollections.map(_temp$d);
+      t3 = favouriteCollections.map(_temp$c);
       $[2] = navigationController.topLevelNavigation?.navigationEntries;
       $[3] = t1;
       $[4] = T0;
@@ -13330,7 +13330,7 @@
     }
     return t6;
   }
-  function _temp$d(entry_0) {
+  function _temp$c(entry_0) {
     return /* @__PURE__ */ jsxRuntime.jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
   }
   const scrollsMap = {};
@@ -13427,7 +13427,7 @@
         } else {
           const searchResult = fuse.current?.search(value);
           if (searchResult) {
-            setFilteredUrls(searchResult.map(_temp$c));
+            setFilteredUrls(searchResult.map(_temp$b));
           }
         }
       };
@@ -13705,7 +13705,7 @@
   function _temp2$5(entry) {
     return entry.group;
   }
-  function _temp$c(e_0) {
+  function _temp$b(e_0) {
     return e_0.item.url;
   }
   function EntityCollectionViewActions(t0) {
@@ -15483,7 +15483,7 @@
     }
     let t7;
     if ($[18] !== breadcrumbs.breadcrumbs) {
-      t7 = breadcrumbs.breadcrumbs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2", children: breadcrumbs.breadcrumbs.map(_temp$b) }) });
+      t7 = breadcrumbs.breadcrumbs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2", children: breadcrumbs.breadcrumbs.map(_temp$a) }) });
       $[18] = breadcrumbs.breadcrumbs;
       $[19] = t7;
     } else {
@@ -15595,7 +15595,7 @@
     }
     return t14;
   };
-  function _temp$b(breadcrumb, index) {
+  function _temp$a(breadcrumb, index) {
     return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: "/" }),
       /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { className: "visited:text-inherit visited:dark:text-inherit block", to: breadcrumb.url, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: breadcrumb.title }) }, index)
@@ -15965,7 +15965,7 @@
         } else {
           const searchResult = iconsSearch.search(value);
           const limited = searchResult.slice(0, 50);
-          setKeys(limited.map(_temp$a));
+          setKeys(limited.map(_temp$9));
         }
       }, UPDATE_SEARCH_INDEX_WAIT_MS);
       $[0] = t3;
@@ -16032,7 +16032,7 @@
     }
     return t8;
   }
-  function _temp$a(e) {
+  function _temp$9(e) {
     return e.item.key;
   }
   function FieldCaption(t0) {
@@ -16659,7 +16659,7 @@
     };
     const formRef = React.useRef(null);
     const formView = /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
+      !Builder && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0"), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
         showEntityPath && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
           entity?.path ?? path,
@@ -16668,7 +16668,7 @@
         ] }) })
       ] }),
       children,
-      !collection.hideIdFromForm && /* @__PURE__ */ jsxRuntime.jsx(CustomIdField, { customId: collection.customId, entityId, status, onChange: setEntityId, error: entityIdError, loading: customIdLoading, entity }),
+      !Builder && !collection.hideIdFromForm && /* @__PURE__ */ jsxRuntime.jsx(CustomIdField, { customId: collection.customId, entityId, status, onChange: setEntityId, error: entityIdError, loading: customIdLoading, entity }),
       entityId && formContext && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12 flex flex-col gap-8", ref: formRef, children: [
         formFields(),
         /* @__PURE__ */ jsxRuntime.jsx(ErrorFocus, { containerRef: formRef })
@@ -16678,7 +16678,20 @@
     React.useEffect(() => {
       if (entityId && onIdChange) onIdChange(entityId);
     }, [entityId, onIdChange]);
-    return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutInner, { className, id: `form_${path}`, pluginActions, forceActionsAtTheBottom, EntityFormActionsComponent, formContext, showDefaultActions, children: formView });
+    const disabled_0 = formex$1.isSubmitting || !formex$1.dirty && status === "existing";
+    if (!resolvedCollection || !path) {
+      throw Error("INTERNAL: Collection and path must be defined in form context");
+    }
+    const dialogActions = /* @__PURE__ */ jsxRuntime.jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex: formex$1, disabled: disabled_0, status, pluginActions, openEntityMode, showDefaultActions });
+    return /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formContext.formex, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: formContext.formex.handleSubmit, onReset: () => formex$1.resetForm({
+      values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs)
+    }), noValidate: true, className: ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { id: `form_${path}`, className: ui.cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
+        formContext.formex.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) }),
+        formView
+      ] }) }),
+      dialogActions
+    ] }) });
   }
   function getInitialEntityValues(collection, path, status, entity, propertyConfigs) {
     const resolvedCollection = resolveCollection({
@@ -16719,150 +16732,6 @@
     }
     return errors;
   }
-  function FormLayoutInner(t0) {
-    const $ = reactCompilerRuntime.c(43);
-    const {
-      id,
-      formContext,
-      children,
-      className,
-      forceActionsAtTheBottom,
-      pluginActions,
-      EntityFormActionsComponent,
-      showDefaultActions
-    } = t0;
-    const formex$1 = formContext.formex;
-    const collection = formContext.collection;
-    const path = formContext.path;
-    const entity = formContext.entity;
-    const savingError = formContext.savingError;
-    const status = formContext.status;
-    const openEntityMode = formContext.openEntityMode;
-    const disabled = formex$1.isSubmitting || !formex$1.dirty && status === "existing";
-    const customizationController = useCustomizationController();
-    if (!collection || !path) {
-      throw Error("INTERNAL: Collection and path must be defined in form context");
-    }
-    const t1 = forceActionsAtTheBottom ? "bottom" : "side";
-    let t2;
-    if ($[0] !== pluginActions) {
-      t2 = pluginActions ?? [];
-      $[0] = pluginActions;
-      $[1] = t2;
-    } else {
-      t2 = $[1];
-    }
-    let t3;
-    if ($[2] !== EntityFormActionsComponent || $[3] !== collection || $[4] !== disabled || $[5] !== entity || $[6] !== formex$1 || $[7] !== openEntityMode || $[8] !== path || $[9] !== savingError || $[10] !== showDefaultActions || $[11] !== status || $[12] !== t1 || $[13] !== t2) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx(EntityFormActionsComponent, { collection, path, entity, layout: t1, savingError, formex: formex$1, disabled, status, pluginActions: t2, openEntityMode, showDefaultActions });
-      $[2] = EntityFormActionsComponent;
-      $[3] = collection;
-      $[4] = disabled;
-      $[5] = entity;
-      $[6] = formex$1;
-      $[7] = openEntityMode;
-      $[8] = path;
-      $[9] = savingError;
-      $[10] = showDefaultActions;
-      $[11] = status;
-      $[12] = t1;
-      $[13] = t2;
-      $[14] = t3;
-    } else {
-      t3 = $[14];
-    }
-    const dialogActions = t3;
-    const t4 = formContext.formex;
-    const t5 = formContext.formex.handleSubmit;
-    let t6;
-    if ($[15] !== collection || $[16] !== customizationController.propertyConfigs || $[17] !== entity || $[18] !== formex$1 || $[19] !== path || $[20] !== status) {
-      t6 = () => formex$1.resetForm({
-        values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs)
-      });
-      $[15] = collection;
-      $[16] = customizationController.propertyConfigs;
-      $[17] = entity;
-      $[18] = formex$1;
-      $[19] = path;
-      $[20] = status;
-      $[21] = t6;
-    } else {
-      t6 = $[21];
-    }
-    let t7;
-    if ($[22] !== className) {
-      t7 = ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className);
-      $[22] = className;
-      $[23] = t7;
-    } else {
-      t7 = $[23];
-    }
-    let t8;
-    let t9;
-    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-      t8 = ui.cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit");
-      t9 = ui.cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10");
-      $[24] = t8;
-      $[25] = t9;
-    } else {
-      t8 = $[24];
-      t9 = $[25];
-    }
-    let t10;
-    if ($[26] !== formContext.formex.dirty) {
-      t10 = formContext.formex.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) });
-      $[26] = formContext.formex.dirty;
-      $[27] = t10;
-    } else {
-      t10 = $[27];
-    }
-    let t11;
-    if ($[28] !== children || $[29] !== t10) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t9, children: [
-        t10,
-        children
-      ] });
-      $[28] = children;
-      $[29] = t10;
-      $[30] = t11;
-    } else {
-      t11 = $[30];
-    }
-    let t12;
-    if ($[31] !== id || $[32] !== t11) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: t8, children: t11 });
-      $[31] = id;
-      $[32] = t11;
-      $[33] = t12;
-    } else {
-      t12 = $[33];
-    }
-    let t13;
-    if ($[34] !== dialogActions || $[35] !== formContext.formex.handleSubmit || $[36] !== t12 || $[37] !== t6 || $[38] !== t7) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: t5, onReset: t6, noValidate: true, className: t7, children: [
-        t12,
-        dialogActions
-      ] });
-      $[34] = dialogActions;
-      $[35] = formContext.formex.handleSubmit;
-      $[36] = t12;
-      $[37] = t6;
-      $[38] = t7;
-      $[39] = t13;
-    } else {
-      t13 = $[39];
-    }
-    let t14;
-    if ($[40] !== formContext.formex || $[41] !== t13) {
-      t14 = /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: t4, children: t13 });
-      $[40] = formContext.formex;
-      $[41] = t13;
-      $[42] = t14;
-    } else {
-      t14 = $[42];
-    }
-    return t14;
-  }
   function useOnAutoSave(autoSave, formex2, lastSavedValues, save) {
     if (!autoSave) return;
     React.useEffect(() => {
@@ -17438,7 +17307,7 @@
     }
     let t5;
     if ($[14] !== placeholder) {
-      t5 = placeholder && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: _temp$9, className: "flex flex-col items-center justify-center w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" }) });
+      t5 = placeholder && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: _temp$8, className: "flex flex-col items-center justify-center w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" }) });
       $[14] = placeholder;
       $[15] = t5;
     } else {
@@ -17461,7 +17330,7 @@
     }
     return t6;
   }
-  function _temp$9(e) {
+  function _temp$8(e) {
     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";
@@ -17644,7 +17513,7 @@
     const snackbarContext = useSnackbarController();
     let t1;
     if ($[0] !== storage.acceptedFiles) {
-      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$8).reduce(_temp2$4, {}) : void 0;
+      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$7).reduce(_temp2$4, {}) : void 0;
       $[0] = storage.acceptedFiles;
       $[1] = t1;
     } else {
@@ -17860,7 +17729,7 @@
       ...b
     };
   }
-  function _temp$8(e) {
+  function _temp$7(e) {
     return {
       [e]: []
     };
@@ -18825,7 +18694,7 @@
       } else {
         t42 = $[20];
       }
-      t3 = Object.entries(mapProperties).filter(_temp$7).map(t42);
+      t3 = Object.entries(mapProperties).filter(_temp$6).map(t42);
       $[6] = autoFocus;
       $[7] = context;
       $[8] = disabled;
@@ -18895,7 +18764,7 @@
     }
     return t10;
   }
-  function _temp$7(t0) {
+  function _temp$6(t0) {
     const [, property_0] = t0;
     return !isHidden(property_0);
   }
@@ -20018,7 +19887,7 @@
     const property = t4;
     let t5;
     if ($[9] !== properties) {
-      t5 = Object.entries(properties).map(_temp$6);
+      t5 = Object.entries(properties).map(_temp$5);
       $[9] = properties;
       $[10] = t5;
     } else {
@@ -20109,7 +19978,7 @@
     }
     return t11;
   }
-  function _temp$6(t0) {
+  function _temp$5(t0) {
     const [key, property_0] = t0;
     return {
       id: key,
@@ -21179,6 +21048,16 @@
       return entityView;
     }
   }
+  function resolvedSelectedEntityView(customViews, customizationController, selectedTab) {
+    const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter(Boolean) : [];
+    const selectedEntityView = resolvedEntityViews.find((e) => e.key === selectedTab);
+    const selectedSecondaryForm = customViews && resolvedEntityViews.filter((e) => e.includeActions).find((e) => e.key === selectedTab);
+    return {
+      resolvedEntityViews,
+      selectedEntityView,
+      selectedSecondaryForm
+    };
+  }
   function getNavigationEntriesFromPath(props) {
     const {
       path,
@@ -21798,12 +21677,14 @@
     const customViews = collection.entityViews;
     const customViewsCount = customViews?.length ?? 0;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
-    const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter(Boolean) : [];
-    const selectedEntityView = resolvedEntityViews.find((e_0) => e_0.key === selectedTab);
-    const selectedSecondaryForm = formContext && customViews && resolvedEntityViews.filter((e_1) => e_1.includeActions).find((e_2) => e_2.key === selectedTab);
+    const {
+      resolvedEntityViews,
+      selectedEntityView,
+      selectedSecondaryForm
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
     const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
     const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
-    const customViewsView = customViews && resolvedEntityViews.filter((e_3) => !e_3.includeActions).map((customView) => {
+    const customViewsView = customViews && resolvedEntityViews.filter((e) => !e.includeActions).map((customView) => {
       if (!customView) return null;
       const Builder = customView.Builder;
       if (!Builder) {
@@ -21979,16 +21860,19 @@
   }
   const NEW_URL_HASH = "new_side";
   const SIDE_URL_HASH = "side";
-  function getEntityViewWidth(props, small) {
+  function getEntityViewWidth(props, small, customizationController) {
     if (small) return CONTAINER_FULL_WIDTH;
-    const mainViewSelected = !props.selectedTab;
+    const {
+      selectedSecondaryForm
+    } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
+    const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
     let resolvedWidth;
     if (props.width) {
       resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
     } else if (props.collection?.sideDialogWidth) {
       resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
     }
-    if (!mainViewSelected) {
+    if (!shouldUseSmallLayout) {
       return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`;
     } else {
       if (resolvedWidth) {
@@ -22040,194 +21924,81 @@
     }
   }
   const useBuildSideEntityController = (navigation, sideDialogsController) => {
-    const $ = reactCompilerRuntime.c(44);
     const location = reactRouterDom.useLocation();
     const initialised = React.useRef(false);
+    const customizationController = useCustomizationController();
     const smallLayout = !useLargeLayout();
-    let t0;
-    if ($[0] !== location.hash || $[1] !== location.pathname || $[2] !== navigation || $[3] !== sideDialogsController || $[4] !== smallLayout) {
-      t0 = () => {
-        const newFlag = location.hash === `#${NEW_URL_HASH}`;
-        const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
-        if (!navigation.loading) {
-          if ((newFlag || sideFlag) && navigation.isUrlCollectionPath(location.pathname)) {
-            const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
-            const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
-            for (let i = 0; i < panelsFromUrl.length; i++) {
-              const props = panelsFromUrl[i];
-              if (i === 0) {
-                sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
-              } else {
-                sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
-              }
-            }
+    React.useEffect(() => {
+      const newFlag = location.hash === `#${NEW_URL_HASH}`;
+      const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
+      if (!navigation.loading) {
+        if ((newFlag || sideFlag) && navigation.isUrlCollectionPath(location.pathname)) {
+          const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
+          const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
+          for (let i = 0; i < panelsFromUrl.length; i++) {
+            const props = panelsFromUrl[i];
+            if (i === 0) sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+            else sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
           }
-          initialised.current = true;
         }
-      };
-      $[0] = location.hash;
-      $[1] = location.pathname;
-      $[2] = navigation;
-      $[3] = sideDialogsController;
-      $[4] = smallLayout;
-      $[5] = t0;
-    } else {
-      t0 = $[5];
-    }
-    let t1;
-    if ($[6] !== navigation.loading) {
-      t1 = [navigation.loading];
-      $[6] = navigation.loading;
-      $[7] = t1;
-    } else {
-      t1 = $[7];
-    }
-    React.useEffect(t0, t1);
-    let t2;
-    if ($[8] !== sideDialogsController.sidePanels) {
-      t2 = sideDialogsController.sidePanels.map(_temp$5);
-      $[8] = sideDialogsController.sidePanels;
-      $[9] = t2;
-    } else {
-      t2 = $[9];
-    }
-    const currentPanelKeys = t2;
-    let t3;
-    if ($[10] !== currentPanelKeys || $[11] !== location.hash || $[12] !== location.pathname || $[13] !== navigation || $[14] !== sideDialogsController || $[15] !== smallLayout) {
-      t3 = () => {
-        if (initialised.current) {
-          const sideFlag_0 = location.hash === `#${SIDE_URL_HASH}`;
-          if (sideFlag_0) {
-            const entityOrCollectionPath_0 = navigation.urlPathToDataPath(location.pathname);
-            const panelsFromUrl_0 = buildSidePanelsFromUrl(entityOrCollectionPath_0, navigation.collections ?? [], false);
-            if (panelsFromUrl_0.length <= currentPanelKeys.length) {
-              return;
-            }
-            const lastPanel = panelsFromUrl_0[panelsFromUrl_0.length - 1];
-            const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout);
-            const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : void 0;
-            if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
-              sideDialogsController.replace(panelProps);
-            }
+        initialised.current = true;
+      }
+    }, [navigation.loading]);
+    const currentPanelKeys = sideDialogsController.sidePanels.map((p) => p.key);
+    React.useEffect(() => {
+      if (initialised.current) {
+        const sideFlag_0 = location.hash === `#${SIDE_URL_HASH}`;
+        if (sideFlag_0) {
+          const entityOrCollectionPath_0 = navigation.urlPathToDataPath(location.pathname);
+          const panelsFromUrl_0 = buildSidePanelsFromUrl(entityOrCollectionPath_0, navigation.collections ?? [], false);
+          if (panelsFromUrl_0.length <= currentPanelKeys.length) {
+            return;
           }
-        }
-      };
-      $[10] = currentPanelKeys;
-      $[11] = location.hash;
-      $[12] = location.pathname;
-      $[13] = navigation;
-      $[14] = sideDialogsController;
-      $[15] = smallLayout;
-      $[16] = t3;
-    } else {
-      t3 = $[16];
-    }
-    let t4;
-    if ($[17] !== currentPanelKeys || $[18] !== location.hash || $[19] !== location.pathname) {
-      t4 = [location.pathname, location.hash, currentPanelKeys];
-      $[17] = currentPanelKeys;
-      $[18] = location.hash;
-      $[19] = location.pathname;
-      $[20] = t4;
-    } else {
-      t4 = $[20];
-    }
-    React.useEffect(t3, t4);
-    let t5;
-    if ($[21] !== navigation.buildUrlCollectionPath || $[22] !== navigation.resolveIdsFrom || $[23] !== sideDialogsController || $[24] !== smallLayout) {
-      t5 = () => {
-        const updatedSidePanels = sideDialogsController.sidePanels.map((sidePanelProps) => {
-          if (sidePanelProps.additional) {
-            return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout);
+          const lastPanel = panelsFromUrl_0[panelsFromUrl_0.length - 1];
+          const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
+          const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : void 0;
+          if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
+            sideDialogsController.replace(panelProps);
           }
-          return sidePanelProps;
-        });
-        sideDialogsController.setSidePanels(updatedSidePanels);
-      };
-      $[21] = navigation.buildUrlCollectionPath;
-      $[22] = navigation.resolveIdsFrom;
-      $[23] = sideDialogsController;
-      $[24] = smallLayout;
-      $[25] = t5;
-    } else {
-      t5 = $[25];
-    }
-    let t6;
-    if ($[26] !== smallLayout) {
-      t6 = [smallLayout];
-      $[26] = smallLayout;
-      $[27] = t6;
-    } else {
-      t6 = $[27];
-    }
-    React.useEffect(t5, t6);
-    let t7;
-    if ($[28] !== sideDialogsController) {
-      t7 = () => {
-        sideDialogsController.close();
-      };
-      $[28] = sideDialogsController;
-      $[29] = t7;
-    } else {
-      t7 = $[29];
-    }
-    const close = t7;
-    let t8;
-    if ($[30] !== navigation.buildUrlCollectionPath || $[31] !== navigation.resolveIdsFrom || $[32] !== sideDialogsController || $[33] !== smallLayout) {
-      t8 = (props_0) => {
-        if (props_0.copy && !props_0.entityId) {
-          throw Error("If you want to copy an entity you need to provide an entityId");
         }
-        const defaultSelectedView = resolveDefaultSelectedView(props_0.collection ? props_0.collection.defaultSelectedView : void 0, {
-          status: props_0.copy ? "copy" : props_0.entityId ? "existing" : "new",
-          entityId: props_0.entityId
-        });
-        sideDialogsController.open(propsToSidePanel({
-          selectedTab: defaultSelectedView,
-          ...props_0
-        }, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
-      };
-      $[30] = navigation.buildUrlCollectionPath;
-      $[31] = navigation.resolveIdsFrom;
-      $[32] = sideDialogsController;
-      $[33] = smallLayout;
-      $[34] = t8;
-    } else {
-      t8 = $[34];
-    }
-    const open = t8;
-    let t9;
-    if ($[35] !== navigation.buildUrlCollectionPath || $[36] !== navigation.resolveIdsFrom || $[37] !== sideDialogsController || $[38] !== smallLayout) {
-      t9 = (props_1) => {
-        if (props_1.copy && !props_1.entityId) {
-          throw Error("If you want to copy an entity you need to provide an entityId");
+      }
+    }, [location.pathname, location.hash, currentPanelKeys]);
+    React.useEffect(() => {
+      const updatedSidePanels = sideDialogsController.sidePanels.map((sidePanelProps) => {
+        if (sidePanelProps.additional) {
+          return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
         }
-        sideDialogsController.replace(propsToSidePanel(props_1, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
-      };
-      $[35] = navigation.buildUrlCollectionPath;
-      $[36] = navigation.resolveIdsFrom;
-      $[37] = sideDialogsController;
-      $[38] = smallLayout;
-      $[39] = t9;
-    } else {
-      t9 = $[39];
-    }
-    const replace = t9;
-    let t10;
-    if ($[40] !== close || $[41] !== open || $[42] !== replace) {
-      t10 = {
-        close,
-        open,
-        replace
-      };
-      $[40] = close;
-      $[41] = open;
-      $[42] = replace;
-      $[43] = t10;
-    } else {
-      t10 = $[43];
-    }
-    return t10;
+        return sidePanelProps;
+      });
+      sideDialogsController.setSidePanels(updatedSidePanels);
+    }, [smallLayout]);
+    const close = React.useCallback(() => {
+      sideDialogsController.close();
+    }, [sideDialogsController]);
+    const open = React.useCallback((props_0) => {
+      if (props_0.copy && !props_0.entityId) {
+        throw Error("If you want to copy an entity you need to provide an entityId");
+      }
+      const defaultSelectedView = resolveDefaultSelectedView(props_0.collection ? props_0.collection.defaultSelectedView : void 0, {
+        status: props_0.copy ? "copy" : props_0.entityId ? "existing" : "new",
+        entityId: props_0.entityId
+      });
+      sideDialogsController.open(propsToSidePanel({
+        selectedTab: defaultSelectedView,
+        ...props_0
+      }, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout]);
+    const replace = React.useCallback((props_1) => {
+      if (props_1.copy && !props_1.entityId) {
+        throw Error("If you want to copy an entity you need to provide an entityId");
+      }
+      sideDialogsController.replace(propsToSidePanel(props_1, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+    }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout]);
+    return {
+      close,
+      open,
+      replace
+    };
   };
   function buildSidePanelsFromUrl(path, collections, newFlag) {
     const navigationViewsForPath = getNavigationEntriesFromPath({
@@ -22267,7 +22038,7 @@
     }
     return sidePanel ? [sidePanel] : [];
   }
-  const propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLayout) => {
+  const propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLayout, customizationController) => {
     const collectionPath = removeInitialAndTrailingSlashes(props.path);
     const newPath = props.entityId ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}#${SIDE_URL_HASH}`) : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
     const resolvedPath = resolveIdsFrom(props.path);
@@ -22276,7 +22047,7 @@
       path: resolvedPath,
       formProps: props.formProps
     };
-    const entityViewWidth = getEntityViewWidth(props, smallLayout);
+    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
     return {
       key: `${props.path}/${props.entityId}`,
       component: /* @__PURE__ */ jsxRuntime.jsx(EntitySidePanel, { ...resolvedPanelProps }),
@@ -22287,9 +22058,6 @@
       additional: props
     };
   };
-  function _temp$5(p) {
-    return p.key;
-  }
   function useBuildSideDialogsController() {
     const $ = reactCompilerRuntime.c(24);
     const location = reactRouterDom.useLocation();
@@ -24174,7 +23942,6 @@
   exports2.FireCMSRouter = FireCMSRouter;
   exports2.FormEntry = FormEntry;
   exports2.FormLayout = FormLayout;
-  exports2.FormLayoutInner = FormLayoutInner;
   exports2.GeoPoint = GeoPoint;
   exports2.IconForView = IconForView;
   exports2.ImagePreview = ImagePreview;
@@ -24331,6 +24098,7 @@
   exports2.resolvePropertyEnum = resolvePropertyEnum;
   exports2.resolveStorageFilenameString = resolveStorageFilenameString;
   exports2.resolveStoragePathString = resolveStoragePathString;
+  exports2.resolvedSelectedEntityView = resolvedSelectedEntityView;
   exports2.sanitizeData = sanitizeData;
   exports2.saveEntityWithCallbacks = saveEntityWithCallbacks;
   exports2.segmentsToStrippedPath = segmentsToStrippedPath;