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

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -1,15 +1,16 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
-import { getDefaultValueFor, getIconForProperty, } from "../../util";
+import { getDefaultValueFor, getIconForProperty, mergeDeep, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { ArrayContainer, ArrayEntryParams } from "../../components";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -27,7 +28,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                             isSubmitting,
                                                             setValue,
                                                             setFieldValue,
-                                                            minimalistView,
+                                                            minimalistView: minimalistViewProp,
                                                             property,
                                                             includeDescription,
                                                             underlyingValueHasChanged,
@@ -35,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");
 
@@ -47,9 +50,15 @@ export function BlockFieldBinding<T extends Array<any>>({
 
     const [lastAddedId, setLastAddedId] = useState<number | undefined>();
 
-    const buildEntry = useCallback((index: number, internalId: number) => {
+    const buildEntry = ({
+                            index,
+                            internalId,
+                            storedProps,
+                            storeProps
+                        }: ArrayEntryParams) => {
+
         return <BlockEntry
-            key={`array_one_of_${index}`}
+            key={`array_one_of_${internalId}`}
             name={`${propertyKey}.${index}`}
             index={index}
             value={value[index]}
@@ -57,8 +66,10 @@ export function BlockFieldBinding<T extends Array<any>>({
             valueField={property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE}
             properties={property.oneOf!.properties}
             autoFocus={internalId === lastAddedId}
-            context={context}/>;
-    }, [context, lastAddedId, property.oneOf, propertyKey, value]);
+            context={context}
+            storeProps={storeProps}
+            storedProps={storedProps}/>;
+    };
 
     const title = (
         <LabelWithIconAndTooltip
@@ -70,19 +81,19 @@ export function BlockFieldBinding<T extends Array<any>>({
     );
 
     const firstOneOfKey = Object.keys(property.oneOf.properties)[0];
-    const body = <FormikArrayContainer value={value}
-                                       className={"flex flex-col gap-3"}
-                                       name={propertyKey}
-                                       addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
-                                       buildEntry={buildEntry}
-                                       onInternalIdAdded={setLastAddedId}
-                                       disabled={isSubmitting || Boolean(property.disabled)}
-                                       includeAddButton={!property.disabled}
-                                       setFieldValue={setFieldValue}
-                                       newDefaultEntry={{
-                                           [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,
-                                           [property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE]: getDefaultValueFor(property.oneOf.properties[firstOneOfKey])
-                                       }}/>;
+    const body = <ArrayContainer value={value}
+                                 className={"flex flex-col gap-3"}
+                                 droppableId={propertyKey}
+                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                 buildEntry={buildEntry}
+                                 onInternalIdAdded={setLastAddedId}
+                                 disabled={isSubmitting || Boolean(property.disabled)}
+                                 includeAddButton={!property.disabled}
+                                 onValueChange={(value) => setFieldValue(propertyKey, value)}
+                                 newDefaultEntry={{
+                                     [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,
+                                     [property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE]: getDefaultValueFor(property.oneOf.properties[firstOneOfKey])
+                                 }}/>;
     return (
 
         <>
@@ -134,6 +145,9 @@ interface BlockEntryProps {
      */
     context: FormContext<any>;
 
+    storedProps?: object,
+    storeProps: (props: object) => void
+
 }
 
 function BlockEntry({
@@ -144,7 +158,9 @@ function BlockEntry({
                         valueField,
                         properties,
                         autoFocus,
-                        context
+                        context,
+                        storedProps,
+                        storeProps
                     }: BlockEntryProps) {
 
     const type = value && value[typeField];
@@ -164,7 +180,9 @@ function BlockEntry({
         }
     }, [type]);
 
-    const property = typeInternal ? properties[typeInternal] : undefined;
+    const propertyInternal = typeInternal ? properties[typeInternal] : undefined;
+
+    const property = storedProps && typeof propertyInternal === "object" ? mergeDeep(propertyInternal, storedProps) : propertyInternal;
 
     const enumValuesConfigs = Object.entries(properties)
         .map(([key, property]) => ({
@@ -182,7 +200,8 @@ function BlockEntry({
             context,
             autoFocus,
             partOfArray: false,
-            minimalistView: true
+            minimalistView: true,
+            onPropertyChange: storeProps,
         }
         : undefined;
 
@@ -208,7 +227,8 @@ function BlockEntry({
                                 className="mb-2"
                                 placeholder={<Typography variant={"caption"}
                                                          className={"px-4 py-2 font-medium"}>Type</Typography>}
-                                size={"small"}
+                                size={"medium"}
+                                fullWidth={true}
                                 position={"item-aligned"}
                                 value={value1}
                                 renderValue={(enumKey: any) =>

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -46,11 +46,12 @@ export function DateTimeFieldBinding({
                 <DateTimeField
                     value={internalValue}
                     onChange={(dateValue) => setValue(dateValue)}
-                    size={"medium"}
+                    size={"large"}
                     mode={property.mode}
                     clearable={property.clearable}
                     locale={locale}
                     error={showError}
+                    disabled={disabled}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -270,7 +270,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 placeholder={"value"}
                 value={entryValue}
                 type={dataType === "number" ? "number" : "text"}
-                size={"small"}
+                size={"medium"}
                 disabled={disabled || !fieldKey}
                 onChange={(event) => {
                     if (dataType === "number") {
@@ -300,7 +300,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 }}/>;
         } else if (dataType === "date") {
             return <DateTimeField value={entryValue}
-                                  size={"small"}
+                                  size={"medium"}
                                   locale={locale}
                                   disabled={disabled || !fieldKey}
                                   onChange={(date) => {
@@ -311,7 +311,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"small"}
+                                           size={"medium"}
                                            position={"start"}
                                            disabled={disabled || !fieldKey}
                                            onValueChange={(newValue) => {
@@ -336,7 +336,10 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                         [fieldKey]: newValue
                                     });
                                 }}
-                                buildEntry={(index, internalId) => {
+                                buildEntry={({
+                                                 index,
+                                                 internalId
+                                             }) => {
                                     return <ArrayKeyValueRow
                                         index={index}
                                         id={internalId}
@@ -386,7 +389,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                         value={fieldKey}
                         placeholder={"key"}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
-                        size={"small"}
+                        size={"medium"}
                         onChange={(event) => {
                             onFieldKeyChange(event.target.value);
                         }}/>
@@ -454,7 +457,7 @@ function ArrayKeyValueRow<T>({
         if (dataType === "string" || dataType === "number") {
             return <TextField value={entryValue}
                               type={dataType === "number" ? "number" : "text"}
-                              size={"small"}
+                              size={"medium"}
                               onChange={(event) => {
                                   if (dataType === "number") {
                                       const numberValue = event.target.value ? parseFloat(event.target.value) : undefined;
@@ -471,7 +474,7 @@ function ArrayKeyValueRow<T>({
                               }}/>;
         } else if (dataType === "date") {
             return <DateTimeField value={entryValue}
-                                  size={"small"}
+                                  size={"medium"}
                                   locale={locale}
                                   onChange={(date) => {
                                       setValue(date as T);

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { FieldProps, Properties, ResolvedProperties } from "../../types";
+import { FieldProps, MapProperty, Properties, PropertyFieldBindingProps, ResolvedProperties } from "../../types";
 
 import { ErrorBoundary } from "../../components";
-import { getIconForProperty, isHidden, pick } from "../../util";
+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,15 +21,16 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
-                                    minimalistView,
+                                    minimalistView: minimalistViewProp,
                                     includeDescription,
-                                    underlyingValueHasChanged,
                                     autoFocus,
-                                    context
+                                    context,
+                                    onPropertyChange
                                 }: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
-    const expanded = (property.expanded === undefined ? true : property.expanded) || autoFocus;
+    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}`);
@@ -50,55 +51,69 @@ export function MapFieldBinding({
     }
 
     const mapFormView = <>
-        <div className="py-1 flex flex-col space-y-2">
-            {Object.entries(mapProperties)
-                .filter(([_, property]) => !isHidden(property))
-                .map(([entryKey, childProperty], index) => {
-                        const fieldBindingProps = {
-                            propertyKey: `${propertyKey}.${entryKey}`,
-                            disabled,
-                            property: childProperty,
-                            includeDescription,
-                            underlyingValueHasChanged,
-                            context,
-                            partOfArray: false,
-                            minimalistView: false,
-                            autoFocus: autoFocus && index === 0
-                        };
-
-                        return (
-                            <div key={`map-${propertyKey}-${index}`}>
-                                <ErrorBoundary>
-                                    <PropertyFieldBinding
-                                        {...fieldBindingProps}/>
-                                </ErrorBoundary>
-                            </div>
-                        );
-                    }
-                )}
-        </div>
-
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
-
-    </>;
-
-    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"}/>
-    );
+            <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) => {
+                            const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+                            const fieldBindingProps: PropertyFieldBindingProps<any> = {
+                                propertyKey: `${propertyKey}.${entryKey}`,
+                                disabled: disabled || thisDisabled,
+                                property: childProperty,
+                                includeDescription,
+                                context,
+                                partOfArray: false,
+                                minimalistView: false,
+                                autoFocus: autoFocus && index === 0,
+                                onPropertyChange: function (updatedProperty) {
+                                    onPropertyChange?.({
+                                        properties: {
+                                            [entryKey]: updatedProperty
+                                        }
+                                    } as Partial<MapProperty>);
+                                }
+                            };
+
+                            return (
+                                <div key={`map-${propertyKey}-${index}`} className={"relative"}>
+                                    <ErrorBoundary>
+                                        <PropertyFieldBinding
+                                            {...fieldBindingProps}/>
+                                    </ErrorBoundary>
+                                </div>
+                            )
+                                ;
+                        }
+                    )
+                }
+            </div>
+
+            {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+
+        </>
+    ;
 
     return (
         <ErrorBoundary>
 
-            {!minimalistView && !minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-gray-900"}
-                                                                    title={title}>{mapFormView}</ExpandablePanel>}
-
-            {(minimalistView || minimalistView) && mapFormView}
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 onExpandedChange={(expanded) => {
+                                                     onPropertyChange?.({
+                                                         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={<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}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError ?? false}
@@ -128,6 +143,8 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
         <InputLabel>Add property</InputLabel>
         <Select
             value={""}
+            size={"large"}
+            fullWidth={true}
             disabled={disabled}
             onValueChange={handleAddProperty}
             renderValue={(key) => (properties as Properties)[key].name || key}>

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

@@ -18,7 +18,7 @@ import { cls } from "@firecms/ui";
  * and tables to the specified properties.
  * @group Form fields
  */
-export function ReferenceFieldBinding<M extends Record<string, any>>(props: FieldProps<EntityReference>) {
+export function ReferenceFieldBinding(props: FieldProps) {
 
     if (typeof props.property.path !== "string") {
         return <ReadOnlyFieldBinding {...props}/>
@@ -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"}/>}
@@ -111,12 +111,12 @@ function ReferenceFieldBindingInternal({
                 {!value && <div className="justify-center text-left">
                     <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
                         disabled || isSubmitting
-                            ? "text-slate-500"
-                            : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
+                            ? "text-surface-accent-500"
+                            : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
                                             onClick={onEntryClick}
                                             size={"medium"}>
                         <IconForView collectionOrView={collection}
-                                     className={"text-gray-300 dark:text-gray-600"}/>
+                                     className={"text-surface-300 dark:text-surface-600"}/>
                         {`Edit ${property.name}`.toUpperCase()}
                     </EntityPreviewContainer>
                 </div>}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
-import { ErrorBoundary } from "../../components";
-import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty } from "../../util";
+import { CMSType, FieldProps, PropertyFieldBindingProps, ResolvedProperty } from "../../types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorBoundary } from "../../components";
+import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty, mergeDeep } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
@@ -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");
 
@@ -43,8 +45,6 @@ export function RepeatFieldBinding<T extends Array<any>>({
             ignoreMissingFields: false
         })
     }
-    // if (!resolvedProperties || !Array.isArray(resolvedProperties))
-    //     throw Error("RepeatFieldBinding - Internal error: Expected array in 'property.resolvedProperties'");
 
     const expanded = property.expanded === undefined ? true : property.expanded;
     const ofProperty: ResolvedProperty<CMSType[]> = property.of as ResolvedProperty<CMSType[]>;
@@ -57,33 +57,41 @@ export function RepeatFieldBinding<T extends Array<any>>({
         setValue
     });
 
-    const buildEntry = (index: number, internalId: number) => {
+    const buildEntry = ({
+                            index,
+                            internalId,
+                            storedProps,
+                            storeProps
+                        }: ArrayEntryParams) => {
         const childProperty = resolvedProperties[index] ?? ofProperty;
-        const fieldProps = {
+        const fieldProps: PropertyFieldBindingProps<any, any> = {
             propertyKey: `${propertyKey}.${index}`,
             disabled,
-            property: childProperty,
+            property: storedProps ? mergeDeep(childProperty, storedProps) : childProperty,
+            onPropertyChange: storeProps,
             includeDescription,
             underlyingValueHasChanged,
             context,
             partOfArray: true,
             minimalistView: false,
-            autoFocus: internalId === lastAddedId
+            autoFocus: internalId === lastAddedId,
         };
         return <ErrorBoundary>
             <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;
     };
 
-    const arrayContainer = <FormikArrayContainer value={value}
-                                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
-                                                 name={propertyKey}
-                                                 setFieldValue={setFieldValue}
-                                                 buildEntry={buildEntry}
-                                                 onInternalIdAdded={setLastAddedId}
-                                                 disabled={isSubmitting || Boolean(property.disabled)}
-                                                 includeAddButton={!property.disabled}
-                                                 newDefaultEntry={getDefaultValueFor(property.of)}/>;
+    const arrayContainer = <ArrayContainer droppableId={propertyKey}
+                                           addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                           value={value}
+                                           buildEntry={buildEntry}
+                                           onInternalIdAdded={setLastAddedId}
+                                           disabled={isSubmitting || Boolean(property.disabled)}
+                                           includeAddButton={!property.disabled}
+                                           newDefaultEntry={getDefaultValueFor(property.of)}
+                                           onValueChange={(value) => setFieldValue(propertyKey, value)}
+                                           className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+    />;
 
     const title = (<>
         <LabelWithIconAndTooltip
@@ -91,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>}
     </>);
 
@@ -109,7 +117,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
-                             error={error}
+                             error={error ? (typeof error === "string" ? error : "A property of this array/repeat has an error") : undefined}
                              disabled={disabled}
                              property={property}/>