@firecms/core 3.0.0-beta.8 → 3.0.0-beta.9

package/src/form/PropertyFieldBinding.tsx

@@ -51,6 +51,13 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     if (a.propertyKey !== b.propertyKey) {
         return false;
     }
+    if (a.index !== b.index) {
+        return false;
+    }
+
+    if (a.size !== b.size) {
+        return false;
+    }
     const aIsBuilder = isPropertyBuilder(a.property) || a.property.fromBuilder;
     const bIsBuilder = isPropertyBuilder(b.property) || b.property.fromBuilder;
 
@@ -75,10 +82,11 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      includeDescription,
      underlyingValueHasChanged,
      disabled,
-     tableMode,
      partOfArray,
-     partOfBlock,
+     minimalistView,
      autoFocus,
+     index,
+     size
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
     const customizationController = useCustomizationController();
@@ -97,7 +105,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     values: fieldProps.form.values,
                     path: context.path,
                     entityId: context.entityId,
-                    fields: customizationController.propertyConfigs
+                    fields: customizationController.propertyConfigs,
+                    index
                 });
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
@@ -120,11 +129,13 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
+                        propertyKey,
                         propertyOrBuilder: propertyConfig.property,
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
-                        fields: customizationController.propertyConfigs
+                        fields: customizationController.propertyConfigs,
+                        index
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }
@@ -143,10 +154,10 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     underlyingValueHasChanged,
                     context,
                     disabled,
-                    tableMode,
                     partOfArray,
-                    partOfBlock,
-                    autoFocus
+                    minimalistView,
+                    autoFocus,
+                    size
                 };
 
                 return <FieldInternal
@@ -173,12 +184,12 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          property,
          includeDescription,
          underlyingValueHasChanged,
-         tableMode,
          partOfArray,
-         partOfBlock,
+         minimalistView,
          autoFocus,
          context,
-         disabled
+         disabled,
+         size
      },
      fieldProps
  }:
@@ -225,7 +236,6 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
     const cmsFieldProps: FieldProps<T, CustomProps, M> = {
         propertyKey,
         value: value as T,
-        // initialValue,
         setValue,
         setFieldValue,
         error,
@@ -236,12 +246,12 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         property: property as ResolvedProperty<T>,
         disabled: disabled ?? false,
         underlyingValueHasChanged: underlyingValueHasChanged ?? false,
-        tableMode: tableMode ?? false,
         partOfArray: partOfArray ?? false,
-        partOfBlock: partOfBlock ?? false,
+        minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,
-        context
+        context,
+        size
     };
 
     return (

package/src/form/components/CustomIdField.tsx

@@ -68,7 +68,8 @@ export function CustomIdField<M extends Record<string, any>>({
                 ? (
                     <>
 
-                        <Tooltip title={"Copy"}>
+                        <Tooltip title={"Copy"}
+                                 asChild={true}>
                             <IconButton onClick={(e) => copy(entity.id)}
                                         aria-label="copy-id">
                                 <ContentCopyIcon size={"small"}/>
@@ -76,7 +77,8 @@ export function CustomIdField<M extends Record<string, any>>({
                         </Tooltip>
 
                         {customizationController?.entityLinkBuilder &&
-                            <Tooltip title={"Open in the console"}>
+                            <Tooltip title={"Open in the console"}
+                                     asChild={true}>
                                 <IconButton component={"a"}
                                             href={customizationController.entityLinkBuilder({ entity })}
                                             rel="noopener noreferrer"

package/src/form/components/FieldHelperText.tsx

@@ -44,7 +44,7 @@ export function FieldHelperText({
         {property.longDescription &&
             <Tooltip title={property.longDescription}
                      side="bottom"
-            >
+                     asChild={true}>
                 <IconButton
                     size={"small"}
                     className="self-start">

package/src/form/components/FormikArrayContainer.tsx

@@ -12,6 +12,7 @@ interface ArrayContainerProps<T> {
     includeAddButton?: boolean;
     newDefaultEntry?: T | null;
     setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
+    className?: string;
 }
 
 /**
@@ -27,7 +28,8 @@ export function FormikArrayContainer<T>({
                                             onInternalIdAdded,
                                             includeAddButton,
                                             newDefaultEntry = null,
-                                            setFieldValue
+                                            setFieldValue,
+                                            className
                                         }: ArrayContainerProps<T>) {
 
     return <ArrayContainer droppableId={name}
@@ -39,6 +41,7 @@ export function FormikArrayContainer<T>({
                            onInternalIdAdded={onInternalIdAdded}
                            includeAddButton={includeAddButton}
                            newDefaultEntry={newDefaultEntry}
+                           className={className}
                            onValueChange={(value) => setFieldValue(name, value)}
     />;
 }

package/src/form/components/LabelWithIcon.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface LabelWithIconProps {
     icon: React.ReactNode;
@@ -12,22 +12,30 @@ interface LabelWithIconProps {
  * Render the label of with an icon and the title of a property
  * @group Form custom fields
  */
-export function LabelWithIcon({
-                                  icon,
-                                  title,
-                                  small,
-                                  className,
-                                  required
-                              }: LabelWithIconProps) {
-    return (
-        <span
-            className={`inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}>
-
-            {icon}
-
-            <span
-                className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
-
+export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
+    ({
+         icon,
+         title,
+         small,
+         className,
+         required
+     }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={`inline-flex items-center my-0.5 ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}
+            >
+        {icon}
+                <span
+                    className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${
+                        small ? "translate-x-2 scale-75" : ""
+                    }`}
+                >
+          {(title ?? "") + (required ? " *" : "")}
         </span>
-    );
-}
+      </div>
+        );
+    }
+);
+
+LabelWithIcon.displayName = "LabelWithIcon";

package/src/form/components/LabelWithIconAndTooltip.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { LabelWithIcon } from "./LabelWithIcon";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+
+interface LabelWithIconAndTooltip {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+    propertyKey: string
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export function LabelWithIconAndTooltip({
+                                            propertyKey,
+                                            className,
+                                            ...props
+                                        }: LabelWithIconAndTooltip) {
+    return (
+        <PropertyIdCopyTooltip propertyKey={propertyKey} className={className}>
+            <LabelWithIcon {...props}/>
+        </PropertyIdCopyTooltip>
+    );
+}

package/src/form/components/StorageItemPreview.tsx

@@ -39,6 +39,7 @@ export function StorageItemPreview({
                     className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
 
                     <Tooltip
+                        asChild={true}
                         title="Remove">
                         <IconButton
                             size={"small"}

package/src/form/components/StorageUploadProgress.tsx

@@ -4,7 +4,6 @@ import { useSnackbarController, useStorageSource } from "../../hooks";
 import { StorageFieldItem } from "../../util/useStorageUploadController";
 import { ErrorView } from "../../components";
 import { cls, paperMixin, Skeleton } from "@firecms/ui";
-import { EntityCollection, StorageSource } from "../../types";
 
 export interface StorageUploadItemProps {
     storagePath: string;

package/src/form/components/index.tsx

@@ -1,3 +1,4 @@
 export * from "./FormikArrayContainer";
 export * from "./FieldHelperText";
 export * from "./LabelWithIcon";
+export * from "./LabelWithIconAndTooltip";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
-import { getIconForProperty } from "../../util";
+import { getArrayResolvedProperties, getIconForProperty } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -20,7 +20,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         showError,
                                                                         isSubmitting,
                                                                         setValue,
-                                                                        tableMode,
+                                                                        minimalistView,
                                                                         property,
                                                                         includeDescription,
                                                                         underlyingValueHasChanged,
@@ -28,8 +28,15 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
-    if (!Array.isArray(property.resolvedProperties))
-        throw Error("ArrayCustomShapedFieldBinding misconfiguration. Property `of` not set");
+    let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
+    if (!resolvedProperties) {
+        resolvedProperties = getArrayResolvedProperties({
+            propertyValue: value,
+            propertyKey,
+            property,
+            ignoreMissingFields: false
+        })
+    }
 
     const expanded = property.expanded === undefined ? true : property.expanded;
 
@@ -40,14 +47,16 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
     });
 
     const title = (<>
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 
-    const body = property.resolvedProperties.map((childProperty, index) => {
+    const body = resolvedProperties.map((childProperty, index) => {
         const fieldProps = {
             propertyKey: `${propertyKey}[${index}]`,
             disabled,
@@ -55,9 +64,8 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             includeDescription,
             underlyingValueHasChanged,
             context,
-            tableMode: false,
             partOfArray: true,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: false
         };
         return <div key={`custom_shaped_array_${index}`} className="pb-4">
@@ -69,14 +77,14 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
 
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel initiallyExpanded={expanded}
                                  title={title}
                                  className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
 import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
@@ -25,7 +25,7 @@ export function ArrayOfReferencesFieldBinding({
                                                   showError,
                                                   disabled,
                                                   isSubmitting,
-                                                  tableMode,
+                                                  minimalistView,
                                                   property,
                                                   includeDescription,
                                                   setValue,
@@ -70,35 +70,37 @@ 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 (
-                <ReferencePreview
-                    key={internalId}
-                    disabled={!ofProperty.path}
-                    previewProperties={ofProperty.previewProperties}
-                    size={"medium"}
-                    onClick={onEntryClick}
-                    hover={!disabled}
-                    reference={entryValue}
-                    includeId={ofProperty.includeId}
-                    includeEntityLink={ofProperty.includeEntityLink}
-                />
+            <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, value]);
 
     const title = (<>
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        <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>}
     </>);
 
@@ -118,7 +120,7 @@ export function ArrayOfReferencesFieldBinding({
 
             <Button
                 className="my-4 justify-center text-left"
-                variant="outlined"
+                variant="text"
                 color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
@@ -130,7 +132,7 @@ export function ArrayOfReferencesFieldBinding({
     return (
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel
                     titleClassName={fieldBackgroundMixin}
                     className={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
@@ -139,7 +141,7 @@ export function ArrayOfReferencesFieldBinding({
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
@@ -27,7 +27,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                             isSubmitting,
                                                             setValue,
                                                             setFieldValue,
-                                                            tableMode,
+                                                            minimalistView,
                                                             property,
                                                             includeDescription,
                                                             underlyingValueHasChanged,
@@ -61,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}
@@ -84,7 +87,7 @@ 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"}
                     initiallyExpanded={expanded}
@@ -92,7 +95,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
@@ -179,8 +182,7 @@ function BlockEntry({
             context,
             autoFocus,
             partOfArray: false,
-            partOfBlock: true,
-            tableMode: false
+            minimalistView: true
         }
         : undefined;
 
@@ -193,7 +195,7 @@ function BlockEntry({
     };
 
     return (
-        <div className={cls(paperMixin, "bg-transparent p-4 my-4 py-8")}>
+        <div className={cls(paperMixin, "bg-transparent p-2")}>
 
             <Field
                 name={typeFieldName}

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -7,6 +7,7 @@ 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 ?? null)}
-                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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { DataType, FieldProps, GeoPoint } from "../../types";
 
 import { ArrayContainer } from "../../components";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import {
     AddIcon,
     ArrowDropDownIcon,
@@ -41,7 +41,7 @@ export function KeyValueFieldBinding({
                                          disabled,
                                          property,
                                          setValue,
-                                         tableMode,
+                                         minimalistView,
                                          includeDescription,
                                          underlyingValueHasChanged,
                                          autoFocus,
@@ -62,7 +62,8 @@ export function KeyValueFieldBinding({
                                      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}
@@ -71,11 +72,11 @@ export function KeyValueFieldBinding({
     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}
+                                                 className={"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}