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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.202",
+  "version": "3.0.0-canary.204",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.202",
-    "@firecms/formex": "^3.0.0-canary.202",
-    "@firecms/ui": "^3.0.0-canary.202",
+    "@firecms/editor": "^3.0.0-canary.204",
+    "@firecms/formex": "^3.0.0-canary.204",
+    "@firecms/ui": "^3.0.0-canary.204",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "6e21f87de35d34c8c4fcb15d1e5f1d07b0f69488",
+  "gitHead": "2fb107e78d8fc3ade463adaf00908e3a8c812a0f",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ArrayContainer.tsx

@@ -289,7 +289,7 @@ export function ArrayContainerItem({
         ref={provided.innerRef}
         {...provided.draggableProps}
         style={provided.draggableProps.style}
-        className={`${
+        className={`relative ${
             !isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""
         } rounded-md opacity-100`}
     >

package/src/core/EntityEditView.tsx

@@ -214,8 +214,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         }
     }, [selectedTabProp]);
 
-    const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
-
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews;
@@ -228,28 +226,13 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         : [];
 
     const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);
-    const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
-
-    const secondaryForms: React.ReactNode[] | undefined = formContext && customViews && resolvedEntityViews
-        .filter(e => e.includeActions)
-        .map((customView) => {
-            if (!customView || !formContext)
-                return null;
+    const selectedSecondaryForm = formContext
+        && customViews
+        && resolvedEntityViews.filter(e => e.includeActions).find(e => e.key === selectedTab);
 
-            if (!customView.Builder) {
-                console.error("customView.Builder is not defined");
-                return null;
-            }
-
-            return <SecondaryForm key={`custom_view_${customView.key}`}
-                                  className={selectedTab !== customView.key ? "hidden" : ""}
-                                  customView={customView}
-                                  formContext={formContext}
-                                  collection={collection}
-                                  forceActionsAtTheBottom={!largeLayout || layout === "side_panel" || customView.includeActions === "bottom"}
-                                  entity={usedEntity}/>;
+    const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
 
-        }).filter(Boolean);
+    const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .filter(e => !e.includeActions)
@@ -361,6 +344,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             onSaved?.(res);
             formProps?.onSaved?.(res);
         }}
+        Builder={selectedSecondaryForm?.Builder}
     />;
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
@@ -421,7 +405,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </div>
             : entityView}
 
-        {secondaryForms}
+        {/*{secondaryForms}*/}
 
         {customViewsView}
 

package/src/form/EntityForm.tsx

@@ -3,6 +3,7 @@ import {
     CMSAnalyticsEvent,
     Entity,
     EntityCollection,
+    EntityCustomViewParams,
     EntityStatus,
     EntityValues,
     FormContext,
@@ -81,6 +82,10 @@ export type EntityFormProps<M extends Record<string, any>> = {
     showEntityPath?: boolean;
 
     EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
+
+    Builder?: React.ComponentType<EntityCustomViewParams<M>>;
+
+    children?: React.ReactNode;
 };
 
 export function EntityForm<M extends Record<string, any>>({
@@ -100,9 +105,11 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onEntityChange,
                                                               openEntityMode = "full_screen",
                                                               formex: formexProp,
+                                                              Builder,
                                                               EntityFormActionsComponent = EntityFormActions,
                                                               showDefaultActions = true,
-                                                              showEntityPath = true
+                                                              showEntityPath = true,
+                                                              children
                                                           }: EntityFormProps<M>) {
 
     if (collection.customId && collection.formAutoSave) {
@@ -495,83 +502,94 @@ export function EntityForm<M extends Record<string, any>>({
 
     const formFieldKeys = getFormFieldKeys(resolvedCollection);
 
-    const formFields = () => (
-        <FormLayout>
-            {formFieldKeys.map((key) => {
-                const property = resolvedCollection.properties[key];
-                if (property) {
-                    const underlyingValueHasChanged: boolean =
-                        !!underlyingChanges &&
-                        Object.keys(underlyingChanges).includes(key) &&
-                        formex.touched[key];
-                    const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
-                    const hidden = isHidden(property);
-                    if (hidden) return null;
-                    const widthPercentage = property.widthPercentage ?? 100;
-                    const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
-                        propertyKey: key,
-                        disabled,
-                        property,
-                        includeDescription: property.description || property.longDescription,
-                        underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-                        context: formContext,
-                        partOfArray: false,
-                        minimalistView: false,
-                        autoFocus: false
-                    };
-
-                    return (
-                        <FormEntry propertyKey={key}
-                                   widthPercentage={widthPercentage}
-                                   key={`field_${key}`}>
-                            <PropertyFieldBinding {...cmsFormFieldProps} />
-                        </FormEntry>
-                    );
-                }
+    const formFields = () => {
 
-                const additionalField = resolvedCollection.additionalFields?.find(f => f.key === key);
-                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");
+        if (Builder) {
+            return <Builder
+                collection={collection}
+                entity={entity}
+                modifiedValues={formex.values}
+                formContext={formContext}
+            />;
+        }
+        return (
+            <FormLayout>
+                {formFieldKeys.map((key) => {
+                    const property = resolvedCollection.properties[key];
+                    if (property) {
+                        const underlyingValueHasChanged: boolean =
+                            !!underlyingChanges &&
+                            Object.keys(underlyingChanges).includes(key) &&
+                            formex.touched[key];
+                        const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
+                        const hidden = isHidden(property);
+                        if (hidden) return null;
+                        const widthPercentage = property.widthPercentage ?? 100;
+                        const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
+                            propertyKey: key,
+                            disabled,
+                            property,
+                            includeDescription: property.description || property.longDescription,
+                            underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+                            context: formContext,
+                            partOfArray: false,
+                            minimalistView: false,
+                            autoFocus: false
+                        };
+
+                        return (
+                            <FormEntry propertyKey={key}
+                                       widthPercentage={widthPercentage}
+                                       key={`field_${key}`}>
+                                <PropertyFieldBinding {...cmsFormFieldProps} />
+                            </FormEntry>
+                        );
                     }
-                    const child = Builder
-                        ? <Builder entity={entity} context={context}/>
-                        : <div className={"w-full"}>
-                            {additionalField.value?.({
-                                entity,
-                                context
-                            })?.toString()}
-                        </div>;
-
-                    return (
-                        <div key={`additional_${key}`} className={"w-full"}>
-                            <LabelWithIconAndTooltip
-                                propertyKey={key}
-                                icon={<NotesIcon size={"small"}/>}
-                                title={additionalField.name}
-                                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-                            <div
-                                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
-                                <ErrorBoundary>
-                                    {child}
-                                </ErrorBoundary>
+
+                    const additionalField = resolvedCollection.additionalFields?.find(f => f.key === key);
+                    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 child = Builder
+                            ? <Builder entity={entity} context={context}/>
+                            : <div className={"w-full"}>
+                                {additionalField.value?.({
+                                    entity,
+                                    context
+                                })?.toString()}
+                            </div>;
+
+                        return (
+                            <div key={`additional_${key}`} className={"w-full"}>
+                                <LabelWithIconAndTooltip
+                                    propertyKey={key}
+                                    icon={<NotesIcon size={"small"}/>}
+                                    title={additionalField.name}
+                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                                <div
+                                    className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                                    <ErrorBoundary>
+                                        {child}
+                                    </ErrorBoundary>
+                                </div>
                             </div>
-                        </div>
-                    );
-                }
+                        );
+                    }
 
-                console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
-                return null;
-            }).filter(Boolean)}
-        </FormLayout>
-    );
+                    console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+                    return null;
+                }).filter(Boolean)}
+            </FormLayout>
+        );
+    };
 
     const formRef = useRef<HTMLDivElement>(null);
 
     const formView = <ErrorBoundary>
         <>
-            <div className={"w-full py-2 flex flex-col items-start mt-4 lg:mt-8 mb-8"}>
+            <div className={"w-full py-2 flex flex-col items-start my-4 lg:my-6"}>
                 <Typography
                     className={"py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0")}
                     variant={"h4"}>
@@ -585,6 +603,8 @@ export function EntityForm<M extends Record<string, any>>({
                 </Alert>}
             </div>
 
+            {children}
+
             {!collection.hideIdFromForm &&
                 <CustomIdField customId={collection.customId}
                                entityId={entityId}

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -75,7 +75,7 @@ export function MapFieldBinding({
                             };
 
                             return (
-                                <div key={`map-${propertyKey}-${index}`}>
+                                <div key={`map-${propertyKey}-${index}`} className={"relative"}>
                                     <ErrorBoundary>
                                         <PropertyFieldBinding
                                             {...fieldBindingProps}/>