@firecms/core 3.0.0-alpha.84 → 3.0.0-beta.10

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
+import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
-import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, ExpandablePanel } from "@firecms/ui";
-import { ErrorView } from "../../components";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
 
@@ -25,7 +25,7 @@ export function ArrayOfReferencesFieldBinding({
                                                   showError,
                                                   disabled,
                                                   isSubmitting,
-                                                  tableMode,
+                                                  minimalistView,
                                                   property,
                                                   includeDescription,
                                                   setValue,
@@ -38,7 +38,6 @@ export function ArrayOfReferencesFieldBinding({
     }
 
     const expanded = property.expanded === undefined ? true : property.expanded;
-    const [onHover, setOnHover] = React.useState(false);
     const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
 
     useClearRestoreValue({
@@ -57,7 +56,6 @@ export function ArrayOfReferencesFieldBinding({
     }
 
     const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-        console.debug("onMultipleEntitiesSelected", entities);
         setValue(entities.map(e => getReferenceFrom(e)));
     }, [setValue]);
 
@@ -71,44 +69,45 @@ export function ArrayOfReferencesFieldBinding({
         }
     );
 
-    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+    const onEntryClick = (e: React.SyntheticEvent) => {
         e.preventDefault();
         referenceDialogController.open();
-    }, [referenceDialogController]);
+    };
 
     const buildEntry = useCallback((index: number, internalId: number) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
         if (!entryValue)
             return <div>Internal ERROR</div>;
         return (
-            <div
-                onMouseEnter={() => setOnHover(true)}
-                onMouseMove={() => setOnHover(true)}
-                onMouseLeave={() => setOnHover(false)}>
-                <ReferencePreview
-                    disabled={!ofProperty.path}
-                    previewProperties={ofProperty.previewProperties}
-                    size={"medium"}
-                    onClick={onEntryClick}
-                    reference={entryValue}
-                    onHover={onHover}
-                />
-            </div>
+            <ReferencePreview
+                key={internalId}
+                disabled={!ofProperty.path}
+                previewProperties={ofProperty.previewProperties}
+                size={"medium"}
+                onClick={onEntryClick}
+                hover={!disabled}
+                reference={entryValue}
+                includeId={ofProperty.includeId}
+                includeEntityLink={ofProperty.includeEntityLink}
+            />
         );
-    }, [ofProperty.path, ofProperty.previewProperties, onHover, value]);
-
-    const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
-    );
+    }, [ofProperty.path, ofProperty.previewProperties, value]);
+
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     const body = <>
         {!collection && <ErrorView
             error={"The specified collection does not exist. Check console"}/>}
 
-        {collection && <>
+        {collection && <div className={"group"}>
 
             <FormikArrayContainer value={value}
                                   addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
@@ -120,27 +119,28 @@ export function ArrayOfReferencesFieldBinding({
 
             <Button
                 className="my-4 justify-center text-left"
-                variant="outlined"
+                variant="text"
                 color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
                 Edit {property.name}
             </Button>
-        </>}
+        </div>}
     </>;
 
     return (
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel
-                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    titleClassName={fieldBackgroundMixin}
+                    innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -1,16 +1,15 @@
 import React, { useCallback, useEffect, useState } from "react";
 
-import { FastField, FieldProps as FormikFieldProps, useFormikContext } from "formik";
+import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
 import { getDefaultValueFor, getIconForProperty, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
-import { cn, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -28,7 +27,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                             isSubmitting,
                                                             setValue,
                                                             setFieldValue,
-                                                            tableMode,
+                                                            minimalistView,
                                                             property,
                                                             includeDescription,
                                                             underlyingValueHasChanged,
@@ -62,14 +61,17 @@ export function BlockFieldBinding<T extends Array<any>>({
     }, [context, lastAddedId, property.oneOf, propertyKey, value]);
 
     const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
     );
 
     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}
@@ -85,15 +87,15 @@ export function BlockFieldBinding<T extends Array<any>>({
 
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel
-                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
@@ -148,7 +150,7 @@ function BlockEntry({
     const type = value && value[typeField];
     const [typeInternal, setTypeInternal] = useState<string | undefined>(type ?? undefined);
 
-    const formikContext = useFormikContext();
+    const formex = useFormex();
 
     useEffect(() => {
         if (!type) {
@@ -180,28 +182,27 @@ function BlockEntry({
             context,
             autoFocus,
             partOfArray: false,
-            partOfBlock: true,
-            tableMode: false
+            minimalistView: true
         }
         : undefined;
 
     const updateType = (newType: any) => {
         const newSelectedProperty = newType ? properties[newType] : undefined;
         setTypeInternal(newType);
-        formikContext.setFieldTouched(typeFieldName);
-        formikContext.setFieldValue(typeFieldName, newType);
-        formikContext.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
+        formex.setFieldTouched(typeFieldName, true);
+        formex.setFieldValue(typeFieldName, newType);
+        formex.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
     };
 
     return (
-        <div className={cn(paperMixin, "bg-transparent p-4 my-4 py-8")}>
+        <div className={cls(paperMixin, "bg-transparent p-2")}>
 
-            <FastField
-                required={true}
+            <Field
                 name={typeFieldName}
             >
-                {(fieldProps: FormikFieldProps) =>
-                    (
+                {(fieldProps) => {
+                    const value1 = fieldProps.field.value !== undefined && fieldProps.field.value !== null ? fieldProps.field.value as string : "";
+                    return (
                         <>
                             <Select
                                 className="mb-2"
@@ -209,7 +210,7 @@ function BlockEntry({
                                                          className={"px-4 py-2 font-medium"}>Type</Typography>}
                                 size={"small"}
                                 position={"item-aligned"}
-                                value={fieldProps.field.value !== undefined && fieldProps.field.value !== null ? fieldProps.field.value : ""}
+                                value={value1}
                                 renderValue={(enumKey: any) =>
                                     <EnumValuesChip
                                         enumKey={enumKey}
@@ -231,9 +232,10 @@ function BlockEntry({
                                 )}
                             </Select>
                         </>
-                    )
+                    );
                 }
-            </FastField>
+                }
+            </Field>
 
             {fieldProps && (
                 // It is important to use this key to force a re-render of the field on type change

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -2,11 +2,12 @@ import React from "react";
 
 import { FieldProps } from "../../types";
 
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue, useCustomizationController } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { useCustomizationController } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { DateTimeField } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type DateTimeFieldProps = FieldProps<Date>;
 
@@ -41,20 +42,22 @@ export function DateTimeFieldBinding({
 
     return (
         <>
-            <DateTimeField
-                value={internalValue}
-                onChange={(dateValue) => setValue(dateValue)}
-                size={"medium"}
-                mode={property.mode}
-                clearable={property.clearable}
-                locale={locale}
-                error={showError}
-                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}/>}
-            />
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <DateTimeField
+                    value={internalValue}
+                    onChange={(dateValue) => setValue(dateValue)}
+                    size={"medium"}
+                    mode={property.mode}
+                    clearable={property.clearable}
+                    locale={locale}
+                    error={showError}
+                    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}/>}
+                />
+            </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { DataType, EntityReference, FieldProps, GeoPoint } from "../../types";
+import { DataType, FieldProps, GeoPoint } from "../../types";
 
-import { ArrayContainer, LabelWithIcon } from "../../components";
-import { FieldHelperText } from "../components";
+import { ArrayContainer } from "../../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import {
     AddIcon,
     ArrowDropDownIcon,
     BooleanSwitchWithLabel,
     Button,
-    cn,
+    cls,
     DateTimeField,
     defaultBorderMixin,
     ExpandablePanel,
@@ -21,6 +21,7 @@ import {
 } from "@firecms/ui";
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
+import { getIn } from "@firecms/formex";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -32,32 +33,37 @@ type MapEditViewRowState = [number, {
  *
  * @group Form fields
  */
-export function KeyValueFieldBinding<T extends Record<string, any>>({
-                                                                        propertyKey,
-                                                                        value,
-                                                                        showError,
-                                                                        error,
-                                                                        disabled,
-                                                                        property,
-                                                                        setValue,
-                                                                        tableMode,
-                                                                        includeDescription,
-                                                                        underlyingValueHasChanged,
-                                                                        autoFocus,
-                                                                        context
-                                                                    }: FieldProps<T>) {
+export function KeyValueFieldBinding({
+                                         propertyKey,
+                                         value,
+                                         showError,
+                                         error,
+                                         disabled,
+                                         property,
+                                         setValue,
+                                         minimalistView,
+                                         includeDescription,
+                                         underlyingValueHasChanged,
+                                         autoFocus,
+                                         context
+                                     }: FieldProps<Record<string, any>>) {
 
     const expanded = (property.expanded === undefined ? true : property.expanded) || autoFocus;
 
     if (!property.keyValue) {
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
+
+    const initialValues = getIn(context.formex.initialValues, propertyKey);
+
     const mapFormView = <MapEditView value={value}
                                      setValue={setValue}
                                      disabled={disabled}
+                                     initialValue={initialValues}
                                      fieldName={property.name ?? propertyKey}/>;
 
-    const title = <LabelWithIcon
+    const title = <LabelWithIconAndTooltip
+        propertyKey={propertyKey}
         icon={getIconForProperty(property, "small")}
         required={property.validation?.required}
         title={property.name}
@@ -66,11 +72,11 @@ export function KeyValueFieldBinding<T extends Record<string, any>>({
     return (
         <>
 
-            {!tableMode && <ExpandablePanel initiallyExpanded={expanded}
-                                            title={title}
-                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 title={title}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
 
-            {tableMode && mapFormView}
+            {minimalistView && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
@@ -84,6 +90,7 @@ export function KeyValueFieldBinding<T extends Record<string, any>>({
 
 interface MapEditViewParams<T extends Record<string, any>> {
     value?: T;
+    initialValue?: T;
     setValue: (value: (T | null)) => void;
     fieldName?: string,
     disabled?: boolean
@@ -91,14 +98,15 @@ interface MapEditViewParams<T extends Record<string, any>> {
 
 function MapEditView<T extends Record<string, any>>({
                                                         value,
+                                                        initialValue,
                                                         setValue,
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
-        Object.keys(value ?? {}).map((key) => [getRandomId(), {
+        Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
-            dataType: getDataType(value?.[key]) ?? "string"
+            dataType: getDataType(initialValue?.[key]) ?? "string"
         }])
     );
 
@@ -121,8 +129,6 @@ function MapEditView<T extends Record<string, any>>({
         setInternalState(newRowIds);
     }, [value]);
 
-    const originalValue = React.useRef<T>(value ?? {} as T);
-
     const updateDataType = (rowId: number, dataType: DataType) => {
         if (!rowId) {
             console.warn("No key selected for data type update");
@@ -168,7 +174,7 @@ function MapEditView<T extends Record<string, any>>({
                         }
 
                         const newValue = { ...(value ?? {}) } as T;
-                        if (typeof originalValue.current === "object" && fieldKey in originalValue.current) {
+                        if (typeof initialValue === "object" && fieldKey in initialValue) {
                             // @ts-ignore
                             newValue[fieldKey] = undefined; // set to undefined to remove from the object, the datasource will remove it from the backend
                         } else {
@@ -186,7 +192,7 @@ function MapEditView<T extends Record<string, any>>({
                                            value={value ?? {} as T}
                                            onDeleteClick={() => {
                                                const newValue = { ...(value ?? {}) as T };
-                                               if (originalValue.current && fieldKey in originalValue.current) {
+                                               if (initialValue && fieldKey in initialValue) {
                                                    // @ts-ignore
                                                    newValue[fieldKey] = undefined;
                                                } else {
@@ -316,7 +322,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                            }}/>;
         } else if (dataType === "array") {
             return <div
-                className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+                className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <ArrayContainer value={entryValue}
                                 newDefaultEntry={""}
                                 droppableId={rowId.toString()}
@@ -349,7 +355,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
             </div>;
         } else if (dataType === "map") {
             return <div
-                className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+                className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <MapEditView value={entryValue}
                              fieldName={fieldKey}
                              setValue={(updatedValue) => {
@@ -375,7 +381,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
             <Typography key={rowId.toString()}
                         component={"div"}
                         className="font-mono flex flex-row gap-1">
-                <div className="w-[200px] max-w-[25%]">
+                <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
                         placeholder={"key"}
@@ -389,32 +395,32 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="flex-grow">
                     {(dataType !== "map" && dataType !== "array") && buildInput(entryValue, fieldKey, dataType)}
                 </div>
-                <Menu
-                    trigger={<IconButton size={"small"}
-                                         className="h-7 w-7">
-                        <ArrowDropDownIcon/>
-                    </IconButton>}
-                >
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("array")}>array</MenuItem>
-                </Menu>
-
-                <IconButton aria-label="delete"
-                            size={"small"}
-                            onClick={onDeleteClick}
-                            className="h-7 w-7">
-                    <RemoveIcon size={"small"}/>
-                </IconButton>
+                <div className={"flex flex-col"}>
+                    <Menu
+                        trigger={<IconButton size={"smallest"}>
+                            <ArrowDropDownIcon size={"small"}/>
+                        </IconButton>}
+                    >
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                    </Menu>
+
+                    <IconButton aria-label="delete"
+                                size={"smallest"}
+                                onClick={onDeleteClick}>
+                        <RemoveIcon size={"smallest"}/>
+                    </IconButton>
+                </div>
             </Typography>
 
             {(dataType === "map" || dataType === "array") && buildInput(entryValue, fieldKey, dataType)}
@@ -482,7 +488,7 @@ function ArrayKeyValueRow<T>({
                 Arrays of arrays are not supported.
             </Typography>;
         } else if (dataType === "map") {
-            return <div className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+            return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <MapEditView value={entryValue}
                              setValue={(updatedValue) => {
                                  setValue(updatedValue);
@@ -546,7 +552,7 @@ function getDataType(value: any): DataType | undefined {
         return "array";
     } else if (value instanceof Date) {
         return "date";
-    } else if (value instanceof EntityReference) {
+    } else if (value?.isEntityReference && value?.isEntityReference()) {
         return "reference";
     } else if (value instanceof GeoPoint) {
         return "geopoint";