@firecms/core 3.0.0-canary.3 → 3.0.0-canary.30

package/src/form/EntityForm.tsx

@@ -19,8 +19,9 @@ import equal from "react-fast-compare"
 import {
     canCreateEntity,
     canDeleteEntity,
-    fullPathToCollectionSegments,
     getDefaultValuesFor,
+    getEntityTitlePropertyKey,
+    getValueInPath,
     isHidden,
     isReadOnly,
     resolveCollection
@@ -171,7 +172,7 @@ function EntityFormInternal<M extends Record<string, any>>({
                                                                onFormContextChange,
                                                                hideId,
                                                                autoSave,
-                                                               onIdUpdateError
+                                                               onIdUpdateError,
                                                            }: EntityFormProps<M>) {
 
     const analyticsController = useAnalyticsController();
@@ -179,7 +180,7 @@ function EntityFormInternal<M extends Record<string, any>>({
     const customizationController = useCustomizationController();
 
     const context = useFireCMSContext();
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(inputCollection);
     const plugins = customizationController.plugins;
 
     const initialResolvedCollection = useMemo(() => resolveCollection({
@@ -344,6 +345,9 @@ function EntityFormInternal<M extends Record<string, any>>({
         fields: customizationController.propertyConfigs
     });
 
+    const titlePropertyKey = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
+    const title = internalValues && titlePropertyKey ? getValueInPath(internalValues, titlePropertyKey) : undefined;
+
     const onIdUpdate = inputCollection.callbacks?.onIdUpdate;
 
     const doOnIdUpdate = useCallback(async () => {
@@ -389,12 +393,15 @@ function EntityFormInternal<M extends Record<string, any>>({
 
     const authController = useAuthController();
 
-    const getActionsForEntity = useCallback(({ entity, customEntityActions }: {
+    const getActionsForEntity = useCallback(({
+                                                 entity,
+                                                 customEntityActions
+                                             }: {
         entity?: Entity<M>,
         customEntityActions?: EntityAction[]
     }): EntityAction[] => {
-        const createEnabled = canCreateEntity(inputCollection, authController, fullPathToCollectionSegments(path), null);
-        const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, fullPathToCollectionSegments(path), entity) : true;
+        const createEnabled = canCreateEntity(inputCollection, authController, path, null);
+        const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, path, entity) : true;
         const actions: EntityAction[] = [];
         if (createEnabled)
             actions.push(copyEntityAction);
@@ -436,7 +443,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         pluginActions.push(...plugins.map((plugin, i) => (
             plugin.form?.Actions
                 ? <plugin.form.Actions
-                    key={`actions_${plugin.name}`} {...actionProps}/>
+                    key={`actions_${plugin.key}`} {...actionProps}/>
                 : null
         )).filter(Boolean));
     }
@@ -454,8 +461,8 @@ function EntityFormInternal<M extends Record<string, any>>({
                     className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
 
                     <Typography
-                        className={"mt-4 flex-grow " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
-                        variant={"h4"}>{inputCollection.singularName ?? inputCollection.name}
+                        className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
+                        variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
                     </Typography>
                     <Alert color={"base"} className={"w-full"} size={"small"}>
                         <code className={"text-xs select-all"}>{path}/{entityId}</code>
@@ -508,7 +515,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
     savingError?: Error,
     closeAfterSaveRef: MutableRefObject<boolean>,
     autoSave?: boolean,
-    entityActions: EntityAction[]
+    entityActions: EntityAction[],
 }) {
 
     const {
@@ -530,7 +537,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
         dirty,
         closeAfterSaveRef,
         autoSave,
-        entityActions
+        entityActions,
     } = props;
 
     const context = useFireCMSContext();
@@ -598,6 +605,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                                 <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
                                          delayDuration={800}
                                          side={"left"}
+                                         align={"start"}
                                          sideOffset={16}>
                                     <PropertyFieldBinding {...cmsFormFieldProps}/>
                                 </Tooltip>
@@ -655,7 +663,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                                         fullPath: resolvedCollection.path,
                                         collection: resolvedCollection,
                                         context,
-                                        sideEntityController
+                                        sideEntityController,
                                     });
                             }}>
                             {action.icon}

package/src/form/components/StorageItemPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Entity, ResolvedStringProperty } from "../../types";
+import { Entity, EntityCollection, ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
 import { cn, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
@@ -14,6 +14,7 @@ interface StorageItemPreviewProps {
     onRemove: (value: string) => void;
     size: PreviewSize;
     disabled: boolean;
+    collection: EntityCollection;
 }
 
 export function StorageItemPreview({
@@ -23,7 +24,8 @@ export function StorageItemPreview({
                                        entity,
                                        onRemove,
                                        disabled,
-                                       size
+                                       size,
+                                       collection
                                    }: StorageItemPreviewProps) {
 
     return (
@@ -54,7 +56,7 @@ export function StorageItemPreview({
                     <PropertyPreview propertyKey={name}
                                      value={value}
                                      property={property}
-                                     // entity={entity}
+                        // entity={entity}
                                      size={size}/>
                 </ErrorBoundary>
             }

package/src/form/components/StorageUploadProgress.tsx

@@ -4,6 +4,7 @@ import { useSnackbarController, useStorageSource } from "../../hooks";
 import { StorageFieldItem } from "../../util/useStorageUploadController";
 import { ErrorView } from "../../components";
 import { cn, paperMixin, Skeleton } from "@firecms/ui";
+import { EntityCollection, StorageSource } from "../../types";
 
 export interface StorageUploadItemProps {
     storagePath: string;
@@ -22,10 +23,10 @@ export function StorageUploadProgress({
                                           metadata,
                                           onFileUploadComplete,
                                           imageSize,
-                                          simple
+                                          simple,
                                       }: StorageUploadItemProps) {
 
-    const storage = useStorageSource();
+    const storageSource = useStorageSource();
 
     const snackbarController = useSnackbarController();
 
@@ -41,7 +42,7 @@ export function StorageUploadProgress({
         setError(undefined);
         setLoading(true);
 
-        storage.uploadFile({
+        storageSource.uploadFile({
             file,
             fileName,
             path: storagePath,
@@ -67,7 +68,7 @@ export function StorageUploadProgress({
             .finally(() => {
                 uploading.current = false;
             });
-    }, [entry, metadata, onFileUploadComplete, storage, storagePath]);
+    }, [entry, metadata, onFileUploadComplete, storageSource, storagePath]);
 
     React.useEffect(() => {
         mounted.current = true;
@@ -89,7 +90,7 @@ export function StorageUploadProgress({
 
         <div className={cn(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
-             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
+            `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
                 <Skeleton className="w-full h-full"/>}

package/src/form/components/index.tsx

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

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { useClearRestoreValue } from "../../hooks";
 import { ExpandablePanel } from "@firecms/ui";
 import { getIconForProperty } from "../../util";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Array field used for custom

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,12 +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 { ErrorView, LabelWithIcon } from "../../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
-import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, ExpandablePanel } from "@firecms/ui";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { Button, cn, ExpandablePanel, fieldBackgroundMixin } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
 
@@ -37,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({
@@ -80,21 +80,17 @@ export function ArrayOfReferencesFieldBinding({
         if (!entryValue)
             return <div>Internal ERROR</div>;
         return (
-            <div
-                onMouseEnter={() => setOnHover(true)}
-                onMouseMove={() => setOnHover(true)}
-                onMouseLeave={() => setOnHover(false)}>
                 <ReferencePreview
+                    key={internalId}
                     disabled={!ofProperty.path}
                     previewProperties={ofProperty.previewProperties}
                     size={"medium"}
                     onClick={onEntryClick}
+                    hover={!disabled}
                     reference={entryValue}
-                    onHover={onHover}
                 />
-            </div>
         );
-    }, [ofProperty.path, ofProperty.previewProperties, onHover, value]);
+    }, [ofProperty.path, ofProperty.previewProperties, value]);
 
     const title = (
         <LabelWithIcon icon={getIconForProperty(property, "small")}
@@ -107,7 +103,7 @@ export function ArrayOfReferencesFieldBinding({
         {!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"}
@@ -125,7 +121,7 @@ export function ArrayOfReferencesFieldBinding({
                 onClick={onEntryClick}>
                 Edit {property.name}
             </Button>
-        </>}
+        </div>}
     </>;
 
     return (
@@ -133,7 +129,8 @@ export function ArrayOfReferencesFieldBinding({
 
             {!tableMode &&
                 <ExpandablePanel
-                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    titleClassName={fieldBackgroundMixin}
+                    className={cn("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -2,15 +2,14 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } 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 { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -2,11 +2,11 @@ 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";
 
 type DateTimeFieldProps = FieldProps<Date>;
 

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -1,8 +1,8 @@
 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, LabelWithIcon } from "../components";
 import {
     AddIcon,
     ArrowDropDownIcon,
@@ -32,20 +32,20 @@ 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,
+                                         tableMode,
+                                         includeDescription,
+                                         underlyingValueHasChanged,
+                                         autoFocus,
+                                         context
+                                     }: FieldProps<Record<string, any>>) {
 
     const expanded = (property.expanded === undefined ? true : property.expanded) || autoFocus;
 
@@ -546,7 +546,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";

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
-import { ErrorBoundary, LabelWithIcon } from "../../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
-import { FieldHelperText } from "../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
@@ -14,21 +14,21 @@ import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
  * and tables to the specified properties.
  * @group Form fields
  */
-export function MapFieldBinding<T extends Record<string, any>>({
-                                                                   propertyKey,
-                                                                   value,
-                                                                   showError,
-                                                                   error,
-                                                                   disabled,
-                                                                   property,
-                                                                   setValue,
-                                                                   partOfBlock,
-                                                                   tableMode,
-                                                                   includeDescription,
-                                                                   underlyingValueHasChanged,
-                                                                   autoFocus,
-                                                                   context
-                                                               }: FieldProps<T>) {
+export function MapFieldBinding({
+                                    propertyKey,
+                                    value,
+                                    showError,
+                                    error,
+                                    disabled,
+                                    property,
+                                    setValue,
+                                    partOfBlock,
+                                    tableMode,
+                                    includeDescription,
+                                    underlyingValueHasChanged,
+                                    autoFocus,
+                                    context
+                                }: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
     const expanded = (property.expanded === undefined ? true : property.expanded) || autoFocus;

package/src/form/field_bindings/MarkdownFieldBinding.tsx

@@ -4,8 +4,7 @@ import React, { useDeferredValue, useEffect, useRef } from "react";
 import MarkdownIt from "markdown-it";
 import MdEditor, { Plugins } from "react-markdown-editor-lite";
 
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { FieldProps } from "../../types";
 import { getIconForProperty } from "../../util";
 import {

package/src/form/field_bindings/MultiSelectBinding.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
 import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * This fields renders a dropdown with multiple selection.

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { Entity, FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { FieldHelperText } from "../components";
-import { ErrorBoundary, LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
 import { cn, paperMixin } from "@firecms/ui";
 
@@ -53,7 +53,7 @@ export function ReadOnlyFieldBinding({
                     <PropertyPreview propertyKey={propertyKey}
                                      value={value}
                                      property={property}
-                                     // entity={entity}
+                        // entity={entity}
                                      size={"medium"}/>
                 </ErrorBoundary>
 

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useMemo } from "react";
 
 import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
-import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText } from "../components";
-import { ErrorView, LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorView } from "../../components";
 import { ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 import { Button } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Field that opens a reference selection dialog.
@@ -49,7 +50,7 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
         setValue
     });
 
-    const validValue = value && value instanceof EntityReference;
+    const validValue = value && value.isEntityReference && value.isEntityReference();
 
     const navigationController = useNavigationController();
     const collection: EntityCollection | undefined = useMemo(() => {
@@ -94,6 +95,7 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
                 {value && <ReferencePreview
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
+                    hover={!disabled}
                     size={"medium"}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={value}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { ErrorBoundary, LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Generic array field that allows reordering and renders the child property

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util";
 import { ClearIcon, cn, IconButton, Select, SelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;