@firecms/core 3.0.1 → 3.1.0-canary.7d91b7c

package/src/form/PropertyFieldBinding.tsx

@@ -75,21 +75,21 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
 }) as typeof PropertyFieldBindingInternal;
 
 function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>
-({
-     propertyKey,
-     property,
-     context,
-     includeDescription,
-     underlyingValueHasChanged,
-     disabled: disabledProp,
-     partOfArray,
-     partOfBlock,
-     minimalistView,
-     autoFocus,
-     index,
-     size,
-     onPropertyChange,
- }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
+    ({
+        propertyKey,
+        property,
+        context,
+        includeDescription,
+        underlyingValueHasChanged,
+        disabled: disabledProp,
+        partOfArray,
+        partOfBlock,
+        minimalistView,
+        autoFocus,
+        index,
+        size,
+        onPropertyChange,
+    }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
@@ -137,7 +137,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     }
                     const configProperty = resolveProperty({
                         propertyKey,
-                        propertyOrBuilder: propertyConfig.property,
+                        propertyOrBuilder: propertyConfig.property as any,
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
@@ -145,7 +145,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                         index,
                         authController
                     });
-                    Component = configProperty.Field as ComponentType<FieldProps<T>>;
+                    Component = configProperty?.Field as ComponentType<FieldProps<T>> | undefined;
                 }
                 if (!Component) {
                     console.warn(`No field component found for property ${propertyKey}`);
@@ -175,7 +175,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                 return <FieldInternal
                     Component={Component as ComponentType<FieldProps>}
                     componentProps={componentProps}
-                    formexFieldProps={fieldProps}/>;
+                    formexFieldProps={fieldProps} />;
             }}
         </Field>
     );
@@ -185,39 +185,54 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
 type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = any> =
     Omit<PropertyFieldBindingProps<T, M>, "property">
     & {
-    property: ResolvedProperty<T>
-};
+        property: ResolvedProperty<T>
+    };
 
 function FieldInternal<T extends CMSType, CustomProps, M extends Record<string, any>>
-({
-     Component,
-     componentProps: {
-         propertyKey,
-         property,
-         includeDescription,
-         underlyingValueHasChanged,
-         partOfArray,
-         partOfBlock,
-         minimalistView,
-         autoFocus,
-         context,
-         disabled,
-         size,
-         onPropertyChange
-     },
-     formexFieldProps
- }:
- {
-     Component: ComponentType<FieldProps<T, any, M>>,
-     componentProps: ResolvedPropertyFieldBindingProps<T, M>,
-     formexFieldProps: FormexFieldProps<T, any>
- }) {
+    ({
+        Component,
+        componentProps: {
+            propertyKey,
+            property,
+            includeDescription,
+            underlyingValueHasChanged,
+            partOfArray,
+            partOfBlock,
+            minimalistView,
+            autoFocus,
+            context,
+            disabled,
+            size,
+            onPropertyChange
+        },
+        formexFieldProps
+    }:
+        {
+            Component: ComponentType<FieldProps<T, any, M>>,
+            componentProps: ResolvedPropertyFieldBindingProps<T, M>,
+            formexFieldProps: FormexFieldProps<T, any>
+        }) {
 
     const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
     const value = formexFieldProps.field.value;
-    const error = getIn(formexFieldProps.form.errors, propertyKey);
+
+    // Get error for this field path, but avoid string indexing issues
+    // When an array has a string error like "Tags should have unique values",
+    // accessing errors["tags"]["0"] returns "T" (string indexing).
+    // We traverse the path manually and stop if we hit a string.
+    let error: any = formexFieldProps.form.errors;
+    for (const part of propertyKey.split(".")) {
+        if (error === undefined || error === null) break;
+        if (typeof error === "string") {
+            // Parent is a string error, children shouldn't inherit individual characters
+            error = undefined;
+            break;
+        }
+        error = error[part];
+    }
+
     const touched = getIn(formexFieldProps.form.touched, propertyKey);
 
     const showError: boolean = error &&
@@ -272,7 +287,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
     return (
         <ErrorBoundary>
 
-            <UsedComponent {...cmsFieldProps}/>
+            <UsedComponent {...cmsFieldProps} />
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>
@@ -287,7 +302,7 @@ const shouldPropertyReRender = (property: PropertyOrBuilder | ResolvedProperty,
     if (plugins?.some((plugin) => plugin.form?.fieldBuilder)) {
         return true;
     }
-    if (isPropertyBuilder(property)) {
+    if (isPropertyBuilder(property as any)) {
         return true;
     }
     const defAProperty = property as Property | ResolvedProperty;

package/src/form/components/ErrorFocus.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useRef } from "react";
 import { useFormex } from "@firecms/formex";
 
 export const ErrorFocus = ({ containerRef }:
-                               {
-                                   containerRef?: React.RefObject<HTMLDivElement>
-                               }) => {
+    {
+        containerRef?: React.RefObject<HTMLDivElement | null>
+    }) => {
     const {
         isValidating,
         errors,

package/src/form/components/StorageItemPreview.tsx

@@ -29,9 +29,10 @@ export function StorageItemPreview({
                                    }: StorageItemPreviewProps) {
 
     return (
-        <div className={cls(paperMixin,
+        <div className={cls(
             "relative border-box flex items-center justify-center",
             size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
+            paperMixin,
             className)}>
 
             {!placeholder && !disabled &&

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -129,7 +129,6 @@ export function ArrayOfReferencesFieldBinding({
             <Button
                 className="ml-3.5 my-4 justify-center text-left"
                 variant="text"
-                color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
                 <EditIcon size={"small"}/>

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -19,17 +19,17 @@ type DateTimeFieldProps = FieldProps<Date>;
  * @group Form fields
  */
 export function DateTimeFieldBinding({
-                                         propertyKey,
-                                         value,
-                                         setValue,
-                                         autoFocus,
-                                         error,
-                                         showError,
-                                         disabled,
-                                         touched,
-                                         property,
-                                         includeDescription
-                                     }: DateTimeFieldProps) {
+    propertyKey,
+    value,
+    setValue,
+    autoFocus,
+    error,
+    showError,
+    disabled,
+    touched,
+    property,
+    includeDescription
+}: DateTimeFieldProps) {
 
     const { locale } = useCustomizationController();
     const internalValue = value || null;
@@ -50,21 +50,22 @@ export function DateTimeFieldBinding({
                     mode={property.mode}
                     clearable={property.clearable}
                     locale={locale}
+                    timezone={property.timezone}
                     error={showError}
                     disabled={disabled}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}
                         className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
-                        title={property.name}/>}
+                        title={property.name} />}
                 />
             </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
 
         </>
     );

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -215,7 +215,6 @@ function MapEditView<T extends Record<string, any>>({
 
         <Button variant={"text"}
                 size={"small"}
-                color="primary"
                 className="w-full"
                 disabled={disabled}
                 startIcon={<AddIcon/>}

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -4,6 +4,7 @@ import { FieldProps, MapProperty, Properties, PropertyFieldBindingProps, Resolve
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { FormEntry } from "../components/FormEntry";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
@@ -15,19 +16,19 @@ import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/u
  * @group Form fields
  */
 export function MapFieldBinding({
-                                    propertyKey,
-                                    value,
-                                    showError,
-                                    error,
-                                    disabled,
-                                    property,
-                                    partOfArray,
-                                    minimalistView: minimalistViewProp,
-                                    includeDescription,
-                                    autoFocus,
-                                    context,
-                                    onPropertyChange
-                                }: FieldProps<Record<string, any>>) {
+    propertyKey,
+    value,
+    showError,
+    error,
+    disabled,
+    property,
+    partOfArray,
+    minimalistView: minimalistViewProp,
+    includeDescription,
+    autoFocus,
+    context,
+    onPropertyChange
+}: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
     const expanded = property.expanded === undefined ? true : property.expanded;
@@ -52,75 +53,76 @@ export function MapFieldBinding({
     }
 
     const mapFormView = <>
-            <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>);
+        <div
+            className={cls("py-1 flex flex-wrap gap-x-4 w-full 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
                                 }
-                            };
-
-                            return (
-                                <div key={`map-${propertyKey}-${index}`} className={"relative"}>
-                                    <ErrorBoundary>
-                                        <PropertyFieldBinding
-                                            {...fieldBindingProps}/>
-                                    </ErrorBoundary>
-                                </div>
-                            )                                ;
+                            } as Partial<MapProperty>);
                         }
-                    )
+                    };
+
+                    const widthPercentage = childProperty.widthPercentage ?? 100;
+                    return (
+                        <FormEntry propertyKey={`${propertyKey}.${entryKey}`}
+                            widthPercentage={widthPercentage}
+                            key={`map-${propertyKey}-${index}`}>
+                            <PropertyFieldBinding
+                                {...fieldBindingProps} />
+                        </FormEntry>
+                    );
                 }
-            </div>
+                )
+            }
+        </div>
 
-            {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
 
-        </>
-    ;
+    </>
+        ;
 
     return (
         <ErrorBoundary>
 
             {!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"}/>}>
+                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}
-                             error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
-                             disabled={disabled}
-                             property={property}/>
+                showError={showError ?? false}
+                error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
+                disabled={disabled}
+                property={property} />
 
         </ErrorBoundary>
     );
@@ -150,7 +152,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
             onValueChange={handleAddProperty}
             renderValue={(key) => (properties as Properties)[key].name || key}>
             {keys.map((key) => <SelectItem key={key}
-                                           value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
+                value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
         </Select>
     </div>;
 };

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -21,19 +21,19 @@ interface MarkdownEditorFieldProps {
 }
 
 export function MarkdownEditorFieldBinding({
-                                               property,
-                                               propertyKey,
-                                               value,
-                                               setValue,
-                                               includeDescription,
-                                               showError,
-                                               error,
-                                               minimalistView,
-                                               disabled: disabledProp,
-                                               isSubmitting,
-                                               context,
-                                               customProps,
-                                           }: FieldProps<string, MarkdownEditorFieldProps>) {
+    property,
+    propertyKey,
+    value,
+    setValue,
+    includeDescription,
+    showError,
+    error,
+    minimalistView,
+    disabled: disabledProp,
+    isSubmitting,
+    context,
+    customProps,
+}: FieldProps<string, MarkdownEditorFieldProps>) {
 
     const authController = useAuthController();
     const disabled = disabledProp || isSubmitting;
@@ -65,7 +65,7 @@ export function MarkdownEditorFieldBinding({
     }, [value]);
 
     const resolvedProperty = resolveProperty({
-        propertyOrBuilder: property as PropertyOrBuilder,
+        propertyOrBuilder: property as PropertyOrBuilder<string>,
         values: entityValues,
         authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
@@ -109,12 +109,16 @@ export function MarkdownEditorFieldBinding({
         }) ?? "/";
     }, [entityId, entityValues, path, property, propertyKey, storage]);
 
+    // Extract markdown config from property - can be boolean or object
+    const markdownConfig = typeof property.markdown === 'object' ? property.markdown : undefined;
+
     const editor = <FireCMSEditor
         content={value}
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
         highlight={highlight}
         disabled={disabled}
+        markdownConfig={markdownConfig}
         handleImageUpload={async (file: File) => {
             const storagePath = storagePathBuilder(file);
             const fileName = await fileNameBuilder(file);
@@ -143,15 +147,15 @@ export function MarkdownEditorFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"h-8 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, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}
             </div>
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             property={property}/>
+                showError={showError}
+                error={error}
+                property={property} />
         </>
 
     );