@firecms/core 3.0.0-beta.11 → 3.0.0-beta.12

package/src/form/EntityFormActions.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import { Entity, EntityAction, FireCMSContext, ResolvedEntityCollection, SideEntityController } from "../types";
+import { Button, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Typography } from "@firecms/ui";
+import { FormexController } from "@firecms/formex";
+import { useFireCMSContext, useSideEntityController } from "../hooks";
+
+export interface EntityFormActionsProps {
+    collection: ResolvedEntityCollection;
+    path: string;
+    entity?: Entity;
+    layout: "bottom" | "side";
+    savingError?: Error;
+    formex: FormexController<any>;
+    disabled: boolean;
+    status: "new" | "existing" | "copy";
+    pluginActions: React.ReactNode[];
+    openEntityMode: "side_panel" | "full_screen";
+    showDefaultActions?: boolean;
+}
+
+export function EntityFormActions({
+                                      collection,
+                                      entity,
+                                      layout,
+                                      savingError,
+                                      formex,
+                                      disabled,
+                                      status,
+                                      pluginActions,
+                                      openEntityMode
+                                  }: EntityFormActionsProps) {
+
+    const context = useFireCMSContext();
+    const sideEntityController = useSideEntityController();
+
+    return layout === "bottom"
+        ? buildBottomActions({
+            savingError,
+            entity,
+            collection,
+            context,
+            sideEntityController,
+            isSubmitting: formex.isSubmitting,
+            disabled,
+            status,
+            pluginActions,
+            openEntityMode
+        })
+        : buildSideActions({
+            savingError,
+            entity,
+            collection,
+            context,
+            sideEntityController,
+            isSubmitting: formex.isSubmitting,
+            disabled,
+            status,
+            pluginActions,
+            openEntityMode
+        });
+}
+
+type ActionsViewProps<M extends object> = {
+    savingError: Error | undefined,
+    entity: Entity<M> | undefined,
+    formActions?: EntityAction[],
+    collection: ResolvedEntityCollection,
+    context: FireCMSContext,
+    sideEntityController: SideEntityController,
+    isSubmitting: boolean,
+    disabled: boolean,
+    status: "new" | "existing" | "copy",
+    pluginActions?: React.ReactNode[],
+    openEntityMode: "side_panel" | "full_screen";
+};
+
+function buildBottomActions<M extends object>({
+                                                  savingError,
+                                                  entity,
+                                                  formActions,
+                                                  collection,
+                                                  context,
+                                                  sideEntityController,
+                                                  isSubmitting,
+                                                  disabled,
+                                                  status,
+                                                  pluginActions,
+                                                  openEntityMode
+                                              }: ActionsViewProps<M>) {
+
+    return <DialogActions position={"absolute"}>
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+        {entity && (formActions ?? []).length > 0 && <div className="flex-grow flex overflow-auto no-scrollbar">
+            {(formActions ?? []).map(action => (
+                <IconButton
+                    key={action.name}
+                    color="primary"
+                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                        event.stopPropagation();
+                        if (entity)
+                            action.onClick({
+                                entity,
+                                fullPath: collection.path,
+                                collection: collection,
+                                context,
+                                sideEntityController,
+                                openEntityMode: openEntityMode
+                            });
+                    }}>
+                    {action.icon}
+                </IconButton>
+            ))}
+        </div>}
+        {pluginActions}
+        <Button variant="text" disabled={disabled || isSubmitting} type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+        <Button variant={"filled"} color="primary" type="submit"
+                disabled={disabled || isSubmitting}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </Button>
+
+    </DialogActions>;
+}
+
+function buildSideActions<M extends object>({
+                                                savingError,
+                                                entity,
+                                                formActions,
+                                                collection,
+                                                context,
+                                                sideEntityController,
+                                                isSubmitting,
+                                                disabled,
+                                                status,
+                                                pluginActions
+                                            }: ActionsViewProps<M>) {
+
+    return <div
+        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}
+                       variant="filled"
+                       color="primary"
+                       type="submit"
+                       size={"large"}
+                       disabled={disabled || isSubmitting}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </LoadingButton>
+        <Button fullWidth={true} variant="text" disabled={disabled || isSubmitting} type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+
+        {pluginActions}
+
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+    </div>;
+}

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";
@@ -74,7 +74,7 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     return false;
 }) as typeof PropertyFieldBindingInternal;
 
-function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>
 ({
      propertyKey,
      property,
@@ -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>
                     );
                 }
 
@@ -175,7 +177,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
 
 }
 
-type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>> =
+type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = any> =
     Omit<PropertyFieldBindingProps<T, M>, "property">
     & {
     property: ResolvedProperty<T>
@@ -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/FormEntry.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ErrorBoundary } from "../../components";
+
+export function FormEntry({
+                              propertyKey,
+                              widthPercentage = 100,
+                              children
+                          }: {
+    propertyKey: string;
+    widthPercentage?: number;
+    children: React.ReactNode;
+}) {
+    return (
+        <div id={`form_field_${propertyKey}`}
+             className={"relative"}
+             style={{ width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)` }}>
+            <ErrorBoundary>
+                {children}
+            </ErrorBoundary>
+        </div>
+    );
+}

package/src/form/components/FormLayout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cls } from "@firecms/ui";
+
+export function FormLayout({
+                               children,
+                               className
+                           }: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-8", className)}>
+            {children}
+        </div>
+    );
+}

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/components/StorageUploadProgress.tsx

@@ -92,7 +92,7 @@ export function StorageUploadProgress({
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
-                <Skeleton className="w-full h-full"/>}
+                <Skeleton className="m-4 w-full h-full"/>}
 
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}

package/src/form/components/index.tsx

@@ -1,3 +1,5 @@
 export * from "./FieldHelperText";
 export * from "./LabelWithIcon";
 export * from "./LabelWithIconAndTooltip";
+export * from "./FormEntry";
+export * from "./FormLayout";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -20,14 +20,15 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         showError,
                                                                         isSubmitting,
                                                                         setValue,
-                                                                        minimalistView,
+                                                                        minimalistView: minimalistViewProp,
                                                                         property,
                                                                         includeDescription,
-                                                                        underlyingValueHasChanged,
                                                                         context,
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
     let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
     if (!resolvedProperties) {
         resolvedProperties = getArrayResolvedProperties({
@@ -52,7 +53,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>}
     </>);
 
@@ -63,7 +64,6 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             disabled: disabled || thisDisabled,
             property: childProperty,
             includeDescription,
-            underlyingValueHasChanged,
             context,
             partOfArray: true,
             minimalistView: false,

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -25,13 +25,15 @@ export function ArrayOfReferencesFieldBinding({
                                                   showError,
                                                   disabled,
                                                   isSubmitting,
-                                                  minimalistView,
+                                                  minimalistView: minimalistViewProp,
                                                   property,
                                                   includeDescription,
                                                   setValue,
                                                   setFieldValue
                                               }: ArrayOfReferencesFieldProps) {
 
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
     const ofProperty = property.of as ResolvedProperty;
     if (ofProperty.dataType !== "reference") {
         throw Error("ArrayOfReferencesField expected a property containing references");
@@ -104,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/BlockFieldBinding.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
@@ -28,7 +28,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                             isSubmitting,
                                                             setValue,
                                                             setFieldValue,
-                                                            minimalistView,
+                                                            minimalistView: minimalistViewProp,
                                                             property,
                                                             includeDescription,
                                                             underlyingValueHasChanged,
@@ -36,6 +36,8 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                             disabled
                                                         }: FieldProps<T>) {
 
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
     if (!property.oneOf)
         throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
 

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -51,6 +51,7 @@ export function DateTimeFieldBinding({
                     clearable={property.clearable}
                     locale={locale}
                     error={showError}
+                    disabled={disabled}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -5,7 +5,7 @@ import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
+import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
 /**
  * Field that renders the children property fields
@@ -21,9 +21,8 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
-                                    minimalistView,
+                                    minimalistView: minimalistViewProp,
                                     includeDescription,
-                                    underlyingValueHasChanged,
                                     autoFocus,
                                     context,
                                     onPropertyChange
@@ -31,6 +30,7 @@ export function MapFieldBinding({
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
     const expanded = property.expanded === undefined ? true : property.expanded;
+    const minimalistView = minimalistViewProp || property.minimalistView;
 
     if (!property.properties) {
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
@@ -51,7 +51,7 @@ export function MapFieldBinding({
     }
 
     const mapFormView = <>
-            <div className="py-1 flex flex-col space-y-2">
+            <div className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
                 {Object.entries(mapProperties)
                     .filter(([_, property]) => !isHidden(property))
                     .map(([entryKey, childProperty], index) => {
@@ -61,7 +61,6 @@ export function MapFieldBinding({
                                 disabled: disabled || thisDisabled,
                                 property: childProperty,
                                 includeDescription,
-                                underlyingValueHasChanged,
                                 context,
                                 partOfArray: false,
                                 minimalistView: false,
@@ -76,7 +75,7 @@ export function MapFieldBinding({
                             };
 
                             return (
-                                <div key={`map-${propertyKey}-${index}`}>
+                                <div key={`map-${propertyKey}-${index}`} className={"relative"}>
                                     <ErrorBoundary>
                                         <PropertyFieldBinding
                                             {...fieldBindingProps}/>
@@ -94,15 +93,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>
 
@@ -112,8 +102,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

@@ -3,13 +3,14 @@ import {
     FieldHelperText,
     FieldProps,
     getIconForProperty,
-    LabelWithIconAndTooltip, PropertyOrBuilder,
+    LabelWithIconAndTooltip,
+    PropertyOrBuilder,
     randomString,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     useStorageSource
 } from "../../index";
-import { cls, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
+import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
 import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
 
@@ -27,11 +28,13 @@ export function MarkdownEditorFieldBinding({
                                                showError,
                                                error,
                                                minimalistView,
+                                               disabled: disabledProp,
                                                isSubmitting,
                                                context,
                                                customProps,
                                            }: FieldProps<string, MarkdownEditorFieldProps>) {
 
+    const disabled = disabledProp || isSubmitting;
     const highlight = customProps?.highlight;
     const editorProps = customProps?.editorProps;
     const storageSource = useStorageSource();
@@ -54,11 +57,9 @@ export function MarkdownEditorFieldBinding({
         if (internalValue.current !== value) {
             internalValue.current = value;
             setFieldVersion(fieldVersion + 1);
-            // fieldVersion.current = fieldVersion.current + 1;
         }
     }, [value]);
 
-
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
         values: entityValues
@@ -107,6 +108,7 @@ export function MarkdownEditorFieldBinding({
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
         highlight={highlight}
+        disabled={disabled}
         handleImageUpload={async (file: File) => {
             const storagePath = storagePathBuilder(file);
             const fileName = await fileNameBuilder(file);
@@ -135,8 +137,9 @@ 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"}/>
-            <div className={cls("rounded-md", fieldBackgroundMixin, fieldBackgroundHoverMixin)}>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            <div
+                className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}
             </div>
             <FieldHelperText includeDescription={includeDescription}

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

@@ -23,7 +23,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              isSubmitting,
                                                              setValue,
                                                              setFieldValue,
-                                                             minimalistView,
+                                                             minimalistView: minimalistViewProp,
                                                              property,
                                                              includeDescription,
                                                              underlyingValueHasChanged,
@@ -31,6 +31,8 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              disabled
                                                          }: FieldProps<T>) {
 
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
 
@@ -88,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 = (<>
@@ -96,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={