@firecms/core 3.0.0-canary.178 → 3.0.0-canary.179

package/dist/types/properties.d.ts

@@ -103,6 +103,11 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
      * save the new config. The saved config will then become the source of truth.
      */
     editable?: boolean;
+    /**
+     * A number between 0 and 100 that indicates the width of the field in the form view.
+     * It defaults to 100, but you can set it to 50 to have two fields in the same row.
+     */
+    widthPercentage?: number;
 }
 /**
  * @group Entity properties

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.178",
+  "version": "3.0.0-canary.179",
   "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.178",
-    "@firecms/formex": "^3.0.0-canary.178",
-    "@firecms/ui": "^3.0.0-canary.178",
+    "@firecms/editor": "^3.0.0-canary.179",
+    "@firecms/formex": "^3.0.0-canary.179",
+    "@firecms/ui": "^3.0.0-canary.179",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "87cb7b5b305fbcca1223aa8e3a62d6eee0f3570d",
+  "gitHead": "39125fe4c1a15167d203baee64f2bbd5376eb766",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { canCreateEntity, canDeleteEntity, fullPathToCollectionSegments } from "../../util";
+import { canCreateEntity, canDeleteEntity } from "../../util";
 import { useAuthController, useCustomizationController, useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
 import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
@@ -124,7 +124,9 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     return (
         <>
-            {actions}
+            <ErrorBoundary>
+                {actions}
+            </ErrorBoundary>
             {multipleDeleteButton}
             {addButton}
         </>

package/src/components/PropertyIdCopyTooltip.tsx

@@ -4,7 +4,7 @@ import { useCallback, useState } from "react";
 export function PropertyIdCopyTooltip({
                                           propertyKey,
                                           className,
-                                          children
+                                          children,
                                       }: {
     propertyKey: string,
     className?: string,
@@ -13,11 +13,10 @@ export function PropertyIdCopyTooltip({
     return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
                     delayDuration={800}
                     side={"top"}
-                    asChild={false}
                     align={"start"}
                     sideOffset={8}
                     className={className}>
-        {children}
+            {children}
     </Tooltip>
 
 }

package/src/core/EntityEditView.tsx

@@ -127,6 +127,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
                                                                                      entityId,
                                                                                      ...props
                                                                                  }: EntityEditViewProps<M>) {
+
     const {
         entity,
         dataLoading,
@@ -173,7 +174,7 @@ function FormLayout({
     return <div
         role="tabpanel"
         id={id}
-        className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl w-full h-fit", className)}>
+        className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit", className)}>
 
         <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
 
@@ -225,8 +226,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
 
-    const actionsAtTheBottom = !largeLayout || layout === "side_panel";
-
     const [saving, setSaving] = useState(false);
     /**
      * These are the values that are being saved. They are debounced.
@@ -316,7 +315,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
 
     const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
-    const [readOnly, setReadOnly] = useState<boolean | undefined>(undefined);
 
     const baseDataSourceValuesRef = useRef<Partial<EntityValues<M>> | null>(cachedDirtyValues ?? getDataSourceEntityValues(initialResolvedCollection, status, usedEntity));
 
@@ -325,16 +323,17 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             setUsedEntity(entity);
     }, [entity]);
 
-    useEffect(() => {
-        if (status === "new") {
-            setReadOnly(false);
+    const canEdit = useMemo(() => {
+        if (status === "new" || status === "copy") {
+            return true;
         } else {
-            const editEnabled = usedEntity ? canEditEntity(collection, authController, path, usedEntity ?? null) : false;
-            if (usedEntity)
-                setReadOnly(!editEnabled);
+            return usedEntity ? canEditEntity(collection, authController, path, usedEntity ?? null) : false;
         }
     }, [authController, usedEntity, status]);
 
+    const readOnly = !canEdit;
+    console.log("readOnly", readOnly);
+
     const onPreSaveHookError = useCallback((e: Error) => {
         setSaving(false);
         snackbarController.open({
@@ -573,7 +572,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         : [];
 
     const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);
-    const shouldShowEntityActions = selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions;
+    const shouldShowEntityActions = !readOnly && (selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
+    const actionsAtTheBottom = !largeLayout || layout === "side_panel" || shouldShowEntityActions === "bottom";
 
     const secondaryForms: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .filter(e => e.includeActions)
@@ -618,7 +618,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                 return <div
                     className={cls(defaultBorderMixin,
-                        "relative flex-grow w-full h-full overflow-auto",
+                        "relative flex-1 w-full h-full overflow-auto",
                         {
                             "hidden": selectedTab !== customView.key
                         })}
@@ -646,7 +646,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             if (selectedTab !== subcollectionId) return null;
             return (
                 <div
-                    className={"relative flex-grow h-full overflow-auto w-full"}
+                    className={"relative flex-1 h-full overflow-auto w-full"}
                     key={`subcol_${subcollectionId}`}
                     role="tabpanel">
 
@@ -827,9 +827,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         }
     }, [formex.isSubmitting, autoSave, underlyingChanges, entity, formex.values, formex.touched, formex.setFieldValue]);
 
+    const formFieldKeys = getFormFieldKeys(resolvedCollection);
+    const resolvedProperties = formFieldKeys.map(key => resolvedCollection.properties[key]);
+
     const formFields = (
-        <>
-            {(getFormFieldKeys(resolvedCollection))
+        <div className={"flex flex-wrap gap-x-4 w-full space-y-8"}>
+            {formFieldKeys
                 .map((key) => {
 
                     const property = resolvedCollection.properties[key];
@@ -843,6 +846,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                         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,
@@ -857,6 +861,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                         return (
                             <div id={`form_field_${key}`}
+                                 className={"relative"}
+                                 style={{ width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)` }}
                                  key={`field_${resolvedCollection.name}_${key}`}>
                                 <ErrorBoundary>
                                     <PropertyFieldBinding {...cmsFormFieldProps}/>
@@ -874,21 +880,22 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                         const child = Builder
                             ? <Builder entity={entity} context={context}/>
-                            : <>
+                            : <div className={"w-full"}>
                                 {additionalField.value?.({
                                     entity,
                                     context
                                 })?.toString()}
-                            </>;
+                            </div>;
+
                         return (
-                            <div key={`additional_${key}`}>
+                            <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, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                                    className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                                     <ErrorBoundary>
                                         {child}
@@ -904,7 +911,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 })
                 .filter(Boolean)}
 
-        </>);
+        </div>);
 
     const disabled = formex.isSubmitting || (!modified && status === "existing");
     const formRef = React.useRef<HTMLDivElement>(null);
@@ -961,7 +968,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             </Typography>
                             <Alert color={"base"} className={"w-full"} size={"small"}>
                                 <code
-                                    className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>{path}/{entityId}</code>
+                                    className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>{entity?.path ?? path}/{entityId}</code>
                             </Alert>
                         </div>
 
@@ -991,18 +998,18 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 </ErrorBoundary>
             )
             : (
-                <>
+                <div className={"flex flex-col"}>
                     <Typography
                         className={"mt-16 mb-8 mx-8"}
                         variant={"h4"}>{collection.singularName ?? collection.name}
                     </Typography>
                     <EntityView
-                        className={"px-12"}
+                        className={"px-8"}
                         entity={usedEntity as Entity<M>}
                         path={path}
                         collection={collection}/>
 
-                </>
+                </div>
             ));
 
     const subcollectionTabs = subcollections && subcollections.map(
@@ -1032,6 +1039,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     }, [entityId, onIdChange]);
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
+    const shouldIncludeForm = selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
@@ -1079,7 +1087,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 return onDiscard();
             }}
             noValidate
-            className={"flex-1 flex flex-row w-full overflow-y-auto justify-center"}>
+            className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center",
+                shouldIncludeForm ? "" : "hidden")}>
 
             <FormLayout
                 className={!mainViewVisible ? "hidden" : ""}
@@ -1205,6 +1214,7 @@ function buildBottomActions<M extends object>({
                                                   layout
                                               }: ActionsViewProps<M>) {
 
+    const canClose = layout === "side_panel";
     return <DialogActions position={"absolute"}>
 
         {savingError &&
@@ -1246,7 +1256,7 @@ function buildBottomActions<M extends object>({
         </Button>
 
         <Button
-            variant="text"
+            variant={canClose ? "text" : "filled"}
             color="primary"
             type="submit"
             disabled={disabled || isSubmitting}
@@ -1258,7 +1268,7 @@ function buildBottomActions<M extends object>({
             {status === "new" && "Create"}
         </Button>
 
-        <LoadingButton
+        {canClose && <LoadingButton
             variant="filled"
             color="primary"
             type="submit"
@@ -1270,7 +1280,7 @@ function buildBottomActions<M extends object>({
             {status === "existing" && "Save and close"}
             {status === "copy" && "Create copy and close"}
             {status === "new" && "Create and close"}
-        </LoadingButton>
+        </LoadingButton>}
 
     </DialogActions>;
 }
@@ -1290,7 +1300,7 @@ function buildSideActions<M extends object>({
                                             }: ActionsViewProps<M>) {
 
     return <div
-        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
+        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
 
         <LoadingButton
             fullWidth={true}

package/src/form/PropertyFieldBinding.tsx

@@ -5,13 +5,13 @@ import { Field, FieldProps as FormexFieldProps, getIn } from "@firecms/formex";
 
 import {
     CMSType,
-    EntityCollection,
     FieldProps,
     FireCMSPlugin,
     PluginFieldBuilderParams,
     Property,
     PropertyFieldBindingProps,
     PropertyOrBuilder,
+    ResolvedEntityCollection,
     ResolvedProperty
 } from "../types";
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
@@ -147,7 +147,9 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     console.warn(`No field component found for property ${propertyKey}`);
                     console.warn("Property:", property);
                     return (
-                        <div>{`Currently the field ${resolvedProperty.dataType} is not supported`}</div>
+                        <div className={"w-full"}>
+                            {`Currently the field ${resolvedProperty.dataType} is not supported`}
+                        </div>
                     );
                 }
 
@@ -199,11 +201,11 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
      },
      formexFieldProps
  }:
-     {
-         Component: ComponentType<FieldProps<T, any, M>>,
-         componentProps: ResolvedPropertyFieldBindingProps<T, M>,
-         formexFieldProps: FormexFieldProps<T, any>
-     }) {
+ {
+     Component: ComponentType<FieldProps<T, any, M>>,
+     componentProps: ResolvedPropertyFieldBindingProps<T, M>,
+     formexFieldProps: FormexFieldProps<T, any>
+ }) {
 
     const { plugins } = useCustomizationController();
 
@@ -296,7 +298,7 @@ const shouldPropertyReRender = (property: PropertyOrBuilder | ResolvedProperty,
 
 interface UseWrappedComponentParams<T extends CMSType = CMSType, M extends Record<string, any> = any> {
     path?: string,
-    collection?: EntityCollection<M>,
+    collection?: ResolvedEntityCollection<M>,
     propertyKey: string,
     property: ResolvedProperty<T>,
     Component: ComponentType<FieldProps<T, any, M>>,
@@ -327,7 +329,7 @@ function useWrappedComponent<T extends CMSType = CMSType, M extends Record<strin
                         Field: Component,
                         plugin,
                         path,
-                        collection
+                        collection,
                     };
                     const enabled = plugin.form?.fieldBuilderEnabled?.(params);
                     if (enabled === undefined || enabled)

package/src/form/components/LabelWithIcon.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { cls } from "@firecms/ui";
 
 interface LabelWithIconProps {
     icon: React.ReactNode;
@@ -23,9 +24,11 @@ export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
         return (
             <div
                 ref={ref}
-                className={`inline-flex items-center my-0.5 ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}
+                className={cls("inline-flex items-center my-0.5",
+                    small ? "gap-1" : "gap-2",
+                    className)}
             >
-        {icon}
+                {icon}
                 <span
                     className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${
                         small ? "translate-x-2 scale-75" : ""
@@ -33,7 +36,7 @@ export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
                 >
           {(title ?? "") + (required ? " *" : "")}
         </span>
-      </div>
+            </div>
         );
     }
 );

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -54,7 +54,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+            className={"h-8 flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -106,7 +106,7 @@ export function ArrayOfReferencesFieldBinding({
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -95,15 +95,6 @@ export function MapFieldBinding({
         </>
     ;
 
-    const title = (
-        <LabelWithIconAndTooltip
-            propertyKey={propertyKey}
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required}
-            title={property.name}
-            className={"text-text-secondary dark:text-text-secondary-dark"}/>
-    );
-
     return (
         <ErrorBoundary>
 
@@ -113,8 +104,16 @@ export function MapFieldBinding({
                                                          expanded
                                                      });
                                                  }}
+                                                 className={property.widthPercentage !== undefined ? "mt-8" : undefined}
                                                  innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
-                                                 title={title}>{mapFormView}</ExpandablePanel>}
+                                                 title={<LabelWithIconAndTooltip
+                                                     propertyKey={propertyKey}
+                                                     icon={getIconForProperty(property, "small")}
+                                                     required={property.validation?.required}
+                                                     title={property.name}
+                                                     className={"text-text-secondary dark:text-text-secondary-dark"}/>}>
+                {mapFormView}
+            </ExpandablePanel>}
 
             {minimalistView && mapFormView}
 

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -135,7 +135,7 @@ export function MarkdownEditorFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             <div className={cls("rounded-md", fieldBackgroundMixin, fieldBackgroundHoverMixin)}>
                 {editor}
             </div>

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -92,7 +92,7 @@ export function MultiSelectFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
                 onValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;
                     if (of && (of as ResolvedProperty)?.dataType === "number") {

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -39,11 +39,11 @@ export function ReadOnlyFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             }
 
             <div
-                className={cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -90,7 +90,7 @@ function ReferenceFieldBindingInternal({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -90,6 +90,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                            includeAddButton={!property.disabled}
                                            newDefaultEntry={getDefaultValueFor(property.of)}
                                            onValueChange={(value) => setFieldValue(propertyKey, value)}
+                                           className={property.widthPercentage !== undefined ? "mt-8" : undefined}
     />;
 
     const title = (<>
@@ -98,7 +99,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -62,7 +62,7 @@ export function SelectFieldBinding<T extends EnumType>({
                             icon={getIconForProperty(property, "small")}
                             required={property.validation?.required}
                             title={property.name}
-                            className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
+                            className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -103,7 +103,7 @@ export function StorageUploadFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -43,6 +43,7 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
                     value={value}
                     onValueChange={(v) => setValue(v)}
                     error={showError}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -75,6 +75,7 @@ export function TextFieldBinding<T extends string | number>({
                     value={value}
                     onChange={onChange}
                     autoFocus={autoFocus}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}

package/src/types/properties.ts

@@ -156,6 +156,12 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
      * save the new config. The saved config will then become the source of truth.
      */
     editable?: boolean;
+
+    /**
+     * A number between 0 and 100 that indicates the width of the field in the form view.
+     * It defaults to 100, but you can set it to 50 to have two fields in the same row.
+     */
+    widthPercentage?: number;
 }
 
 /**

package/src/util/join_collections.ts

@@ -115,6 +115,9 @@ export function mergeCollection(target: EntityCollection,
         if (modifiedCollection)
             resultCollection = modifiedCollection;
     }
+
+    // @ts-ignore
+    resultCollection["merged"] = true;
     return resultCollection
 }
 

package/src/util/parent_references_from_path.ts

@@ -22,11 +22,11 @@ export function getParentReferencesFromPath(props: {
 
         const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
 
+        // If we find a collection, we add the reference and continue
         if (collection) {
-            const path = collection.path;
             const collectionPath = currentFullPath && currentFullPath.length > 0
-                ? (currentFullPath + "/" + path)
-                : path;
+                ? (currentFullPath + "/" + collection.path)
+                : collection.path;
 
             const restOfThePath = removeInitialAndTrailingSlashes(removeInitialAndTrailingSlashes(path).replace(subpathCombination, ""));
             const nextSegments = restOfThePath.length > 0 ? restOfThePath.split("/") : [];