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

package/dist/index.umd.js

@@ -15725,7 +15725,7 @@
     const t1 = provided.innerRef;
     const t2 = provided.draggableProps;
     const t3 = provided.draggableProps.style;
-    const t4 = `${!isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""} rounded-md opacity-100`;
+    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;
     if ($[0] !== internalId || $[1] !== updateItemCustomProps) {
       t5 = (props) => updateItemCustomProps(internalId, props);
@@ -16298,9 +16298,11 @@
     onEntityChange,
     openEntityMode = "full_screen",
     formex: formexProp,
+    Builder,
     EntityFormActionsComponent = EntityFormActions,
     showDefaultActions = true,
-    showEntityPath = true
+    showEntityPath = true,
+    children
   }) {
     if (collection.customId && collection.formAutoSave) {
       console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
@@ -16611,48 +16613,53 @@
       }
     }, [formex$1.isSubmitting, autoSave, underlyingChanges, entity, formex$1.values, formex$1.touched, formex$1.setFieldValue]);
     const formFieldKeys = getFormFieldKeys(resolvedCollection);
-    const formFields = () => /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { children: formFieldKeys.map((key_1) => {
-      const property_0 = resolvedCollection.properties[key_1];
-      if (property_0) {
-        const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex$1.touched[key_1];
-        const disabled = !autoSave && formex$1.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
-        const hidden = isHidden(property_0);
-        if (hidden) return null;
-        const widthPercentage = property_0.widthPercentage ?? 100;
-        const cmsFormFieldProps = {
-          propertyKey: key_1,
-          disabled,
-          property: property_0,
-          includeDescription: property_0.description || property_0.longDescription,
-          underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-          context: formContext,
-          partOfArray: false,
-          minimalistView: false,
-          autoFocus: false
-        };
-        return /* @__PURE__ */ jsxRuntime.jsx(FormEntry, { propertyKey: key_1, widthPercentage, children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_1}`);
-      }
-      const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_1);
-      if (additionalField && entity) {
-        const Builder = additionalField.Builder;
-        if (!Builder && !additionalField.value) {
-          throw new Error("When using additional fields you need to provide a Builder or a value");
+    const formFields = () => {
+      if (Builder) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity, modifiedValues: formex$1.values, formContext });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { children: formFieldKeys.map((key_1) => {
+        const property_0 = resolvedCollection.properties[key_1];
+        if (property_0) {
+          const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex$1.touched[key_1];
+          const disabled = !autoSave && formex$1.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
+          const hidden = isHidden(property_0);
+          if (hidden) return null;
+          const widthPercentage = property_0.widthPercentage ?? 100;
+          const cmsFormFieldProps = {
+            propertyKey: key_1,
+            disabled,
+            property: property_0,
+            includeDescription: property_0.description || property_0.longDescription,
+            underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+            context: formContext,
+            partOfArray: false,
+            minimalistView: false,
+            autoFocus: false
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(FormEntry, { propertyKey: key_1, widthPercentage, children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_1}`);
         }
-        const child = Builder ? /* @__PURE__ */ jsxRuntime.jsx(Builder, { entity, context }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: additionalField.value?.({
-          entity,
-          context
-        })?.toString() });
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsxRuntime.jsx(ui.NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: child }) })
-        ] }, `additional_${key_1}`);
-      }
-      console.warn(`Property ${key_1} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
-      return null;
-    }).filter(Boolean) });
+        const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_1);
+        if (additionalField && entity) {
+          const Builder_0 = additionalField.Builder;
+          if (!Builder_0 && !additionalField.value) {
+            throw new Error("When using additional fields you need to provide a Builder or a value");
+          }
+          const child = Builder_0 ? /* @__PURE__ */ jsxRuntime.jsx(Builder_0, { entity, context }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: additionalField.value?.({
+            entity,
+            context
+          })?.toString() });
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsxRuntime.jsx(ui.NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: child }) })
+          ] }, `additional_${key_1}`);
+        }
+        console.warn(`Property ${key_1} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+        return null;
+      }).filter(Boolean) });
+    };
     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 mt-4 lg:mt-8 mb-8", children: [
+      /* @__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,
@@ -16660,6 +16667,7 @@
           entityId
         ] }) })
       ] }),
+      children,
       !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(),
@@ -18805,7 +18813,7 @@
               });
             }
           };
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...fieldBindingProps }) }) }, `map-${propertyKey}-${index}`);
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...fieldBindingProps }) }) }, `map-${propertyKey}-${index}`);
         };
         $[14] = autoFocus;
         $[15] = context;
@@ -21749,52 +21757,6 @@
     }
     return t5;
   }
-  function SecondaryForm(t0) {
-    const $ = reactCompilerRuntime.c(12);
-    const {
-      collection,
-      className,
-      customView,
-      entity,
-      formContext,
-      forceActionsAtTheBottom
-    } = t0;
-    if (!customView.Builder) {
-      console.error("customView.Builder is not defined");
-      return null;
-    }
-    let t1;
-    if ($[0] !== collection || $[1] !== customView.Builder || $[2] !== entity || $[3] !== formContext) {
-      t1 = formContext && /* @__PURE__ */ jsxRuntime.jsx(customView.Builder, { collection, entity, modifiedValues: formContext.formex.values ?? entity?.values, formContext });
-      $[0] = collection;
-      $[1] = customView.Builder;
-      $[2] = entity;
-      $[3] = formContext;
-      $[4] = t1;
-    } else {
-      t1 = $[4];
-    }
-    let t2;
-    if ($[5] !== t1) {
-      t2 = /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: t1 });
-      $[5] = t1;
-      $[6] = t2;
-    } else {
-      t2 = $[6];
-    }
-    let t3;
-    if ($[7] !== className || $[8] !== forceActionsAtTheBottom || $[9] !== formContext || $[10] !== t2) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx(FormLayoutInner, { className, forceActionsAtTheBottom, formContext, EntityFormActionsComponent: EntityEditViewFormActions, children: t2 });
-      $[7] = className;
-      $[8] = forceActionsAtTheBottom;
-      $[9] = formContext;
-      $[10] = t2;
-      $[11] = t3;
-    } else {
-      t3 = $[11];
-    }
-    return t3;
-  }
   function EntityEditViewInner({
     path,
     entityId,
@@ -21831,7 +21793,6 @@
         setSelectedTab(selectedTabProp ?? MAIN_TAB_VALUE);
       }
     }, [selectedTabProp]);
-    const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
     const subcollections = (collection.subcollections ?? []).filter((c) => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews;
@@ -21839,25 +21800,19 @@
     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 actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
-    const secondaryForms = formContext && customViews && resolvedEntityViews.filter((e_1) => e_1.includeActions).map((customView) => {
-      if (!customView || !formContext) return null;
-      if (!customView.Builder) {
-        console.error("customView.Builder is not defined");
-        return null;
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(SecondaryForm, { className: selectedTab !== customView.key ? "hidden" : "", customView, formContext, collection, forceActionsAtTheBottom: !largeLayout || layout === "side_panel" || customView.includeActions === "bottom", entity: usedEntity }, `custom_view_${customView.key}`);
-    }).filter(Boolean);
-    const customViewsView = customViews && resolvedEntityViews.filter((e_2) => !e_2.includeActions).map((customView_0) => {
-      if (!customView_0) return null;
-      const Builder = customView_0.Builder;
+    const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
+    const customViewsView = customViews && resolvedEntityViews.filter((e_3) => !e_3.includeActions).map((customView) => {
+      if (!customView) return null;
+      const Builder = customView.Builder;
       if (!Builder) {
         console.error("customView.Builder is not defined");
         return null;
       }
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
-        "hidden": selectedTab !== customView_0.key
-      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: formContext.formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView_0.key}`);
+        "hidden": selectedTab !== customView.key
+      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: formContext.formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
     }).filter(Boolean);
     const globalLoading = dataLoading && !usedEntity;
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
@@ -21896,7 +21851,7 @@
       };
       onSaved?.(res);
       formProps?.onSaved?.(res);
-    } });
+    }, Builder: selectedSecondaryForm?.Builder });
     const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: subcollection_0.id, children: subcollection_0.name }, `entity_detail_collection_tab_${subcollection_0.name}`));
     const customViewTabs = resolvedEntityViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
@@ -21914,7 +21869,6 @@
         ] })
       ] }),
       globalLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {}) }) : entityView,
-      secondaryForms,
       customViewsView,
       subCollectionsViews
     ] });