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

package/dist/form/EntityForm.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Entity, EntityCollection, EntityStatus, FormContext } from "../types";
+import { Entity, EntityCollection, EntityCustomViewParams, EntityStatus, FormContext } from "../types";
 import { FormexController } from "@firecms/formex";
 import { ValidationError } from "yup";
 import { EntityFormActionsProps } from "./EntityFormActions";
@@ -38,8 +38,10 @@ export type EntityFormProps<M extends Record<string, any>> = {
      */
     showEntityPath?: boolean;
     EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
+    Builder?: React.ComponentType<EntityCustomViewParams<M>>;
+    children?: React.ReactNode;
 };
-export declare function EntityForm<M extends Record<string, any>>({ path, entityId: entityIdProp, collection, onValuesModified, onIdChange, onSaved, entity, initialDirtyValues, onFormContextReady, forceActionsAtTheBottom, initialStatus, className, onStatusChange, onEntityChange, openEntityMode, formex: formexProp, EntityFormActionsComponent, showDefaultActions, showEntityPath }: EntityFormProps<M>): import("react/jsx-runtime").JSX.Element;
+export declare function EntityForm<M extends Record<string, any>>({ path, entityId: entityIdProp, collection, onValuesModified, onIdChange, onSaved, entity, initialDirtyValues, onFormContextReady, forceActionsAtTheBottom, initialStatus, className, onStatusChange, onEntityChange, openEntityMode, formex: formexProp, Builder, EntityFormActionsComponent, showDefaultActions, showEntityPath, children }: EntityFormProps<M>): import("react/jsx-runtime").JSX.Element;
 export declare function yupToFormErrors(yupError: ValidationError): Record<string, any>;
 export declare function FormLayoutInner({ id, formContext, children, className, forceActionsAtTheBottom, pluginActions, EntityFormActionsComponent, showDefaultActions, }: {
     id?: string;

package/dist/index.es.js

@@ -15723,7 +15723,7 @@ function ArrayContainerItem(t0) {
   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);
@@ -16296,9 +16296,11 @@ function EntityForm({
   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`);
@@ -16609,48 +16611,53 @@ function EntityForm({
     }
   }, [formex.isSubmitting, autoSave, underlyingChanges, entity, formex.values, formex.touched, formex.setFieldValue]);
   const formFieldKeys = getFormFieldKeys(resolvedCollection);
-  const formFields = () => /* @__PURE__ */ 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.touched[key_1];
-      const disabled = !autoSave && formex.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__ */ jsx(FormEntry, { propertyKey: key_1, widthPercentage, children: /* @__PURE__ */ 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__ */ jsx(Builder, { collection, entity, modifiedValues: formex.values, formContext });
+    }
+    return /* @__PURE__ */ 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.touched[key_1];
+        const disabled = !autoSave && formex.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__ */ jsx(FormEntry, { propertyKey: key_1, widthPercentage, children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_1}`);
       }
-      const child = Builder ? /* @__PURE__ */ jsx(Builder, { entity, context }) : /* @__PURE__ */ jsx("div", { className: "w-full", children: additionalField.value?.({
-        entity,
-        context
-      })?.toString() });
-      return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-        /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
-        /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ 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__ */ jsx(Builder_0, { entity, context }) : /* @__PURE__ */ jsx("div", { className: "w-full", children: additionalField.value?.({
+          entity,
+          context
+        })?.toString() });
+        return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+          /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ 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 = useRef(null);
   const formView = /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start mt-4 lg:mt-8 mb-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
       /* @__PURE__ */ jsx(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__ */ jsx(Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
         entity?.path ?? path,
@@ -16658,6 +16665,7 @@ function EntityForm({
         entityId
       ] }) })
     ] }),
+    children,
     !collection.hideIdFromForm && /* @__PURE__ */ jsx(CustomIdField, { customId: collection.customId, entityId, status, onChange: setEntityId, error: entityIdError, loading: customIdLoading, entity }),
     entityId && formContext && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "mt-12 flex flex-col gap-8", ref: formRef, children: [
       formFields(),
@@ -18803,7 +18811,7 @@ function MapFieldBinding(t0) {
             });
           }
         };
-        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...fieldBindingProps }) }) }, `map-${propertyKey}-${index}`);
+        return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...fieldBindingProps }) }) }, `map-${propertyKey}-${index}`);
       };
       $[14] = autoFocus;
       $[15] = context;
@@ -21747,52 +21755,6 @@ function EntityEditView(t0) {
   }
   return t5;
 }
-function SecondaryForm(t0) {
-  const $ = 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__ */ 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__ */ jsx(ErrorBoundary, { children: t1 });
-    $[5] = t1;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  let t3;
-  if ($[7] !== className || $[8] !== forceActionsAtTheBottom || $[9] !== formContext || $[10] !== t2) {
-    t3 = /* @__PURE__ */ 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,
@@ -21829,7 +21791,6 @@ function EntityEditViewInner({
       setSelectedTab(selectedTabProp ?? MAIN_TAB_VALUE);
     }
   }, [selectedTabProp]);
-  const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
   const subcollections = (collection.subcollections ?? []).filter((c2) => !c2.hideFromNavigation);
   const subcollectionsCount = subcollections?.length ?? 0;
   const customViews = collection.entityViews;
@@ -21837,25 +21798,19 @@ function EntityEditViewInner({
   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__ */ 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__ */ jsx("div", { className: cls(defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
-      "hidden": selectedTab !== customView_0.key
-    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ 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__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ 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) => {
@@ -21894,7 +21849,7 @@ function EntityEditViewInner({
     };
     onSaved?.(res);
     formProps?.onSaved?.(res);
-  } });
+  }, Builder: selectedSecondaryForm?.Builder });
   const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsx(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__ */ jsx(Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
   const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
@@ -21912,7 +21867,6 @@ function EntityEditViewInner({
       ] })
     ] }),
     globalLoading ? /* @__PURE__ */ jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsx(CircularProgressCenter, {}) }) : entityView,
-    secondaryForms,
     customViewsView,
     subCollectionsViews
   ] });