@firecms/core 3.0.0-canary.24 → 3.0.0-canary.240

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -2,36 +2,34 @@ import React, { useCallback } from "react";
 
 import {
     ArrayProperty,
-    Entity,
-    EntityCollection,
     FieldProps,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig
 } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
-import { getIconForProperty, isReadOnly } from "../../util";
-import { useSnackbarController, useStorageSource } from "../../hooks";
+import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
+import { useAuthController, useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
 import { StorageItemPreview } from "../components/StorageItemPreview";
 import {
-    cn,
+    cls,
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
-    focusedMixin,
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const disabledClasses = "border-dotted-gray"
-const nonActiveDropClasses = "hover:bg-field-hover dark:hover:bg-field-hover-dark"
+const disabledClasses = fieldBackgroundDisabledMixin;
+const nonActiveDropClasses = fieldBackgroundHoverMixin
 const activeDropClasses = "pt-0 border-2 border-solid"
 const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500"
 const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500"
@@ -52,18 +50,20 @@ export function StorageUploadFieldBinding({
                                               error,
                                               showError,
                                               autoFocus,
-                                              tableMode,
+                                              minimalistView,
                                               property,
                                               includeDescription,
                                               context,
                                               isSubmitting,
                                           }: StorageUploadFieldProps) {
 
+    const authController = useAuthController();
+
     if (!context.entityId)
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
     const storageSource = useStorageSource(context.collection);
-    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting;
+    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting || context.disabled;
 
     const {
         internalValue,
@@ -81,7 +81,7 @@ export function StorageUploadFieldBinding({
         propertyKey,
         value,
         storageSource,
-        disabled,
+        disabled: disabled ?? false,
         onChange: setValue
     });
 
@@ -91,33 +91,32 @@ export function StorageUploadFieldBinding({
         setValue
     });
 
-    const entity: Entity<any> = {
-        id: context.entityId,
-        values: context.values,
-        path: context.path
-    };
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        authController
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     return (
 
         <>
 
-            {!tableMode &&
-                <LabelWithIcon icon={getIconForProperty(property, "small")}
-                               required={property.validation?.required}
-                               title={property.name}
-                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+            {!minimalistView &&
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"h-8text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}
-                collection={context.collection}
                 name={propertyKey}
-                disabled={disabled}
-                autoFocus={autoFocus}
-                property={property}
+                disabled={disabled ?? false}
+                autoFocus={autoFocus ?? false}
+                property={resolvedProperty}
                 onChange={setValue}
                 setInternalValue={setInternalValue}
                 onFilesAdded={onFilesAdded}
-                entity={entity}
                 onFileUploadComplete={onFileUploadComplete}
                 storagePathBuilder={storagePathBuilder}
                 storage={storage}
@@ -135,7 +134,6 @@ export function StorageUploadFieldBinding({
 
 function FileDropComponent({
                                storage,
-                               collection,
                                disabled,
                                isDraggingOver,
                                onFilesAdded,
@@ -144,7 +142,6 @@ function FileDropComponent({
                                autoFocus,
                                internalValue,
                                property,
-                               entity,
                                onClear,
                                metadata,
                                storagePathBuilder,
@@ -154,7 +151,6 @@ function FileDropComponent({
                                helpText
                            }: {
     storage: StorageConfig,
-    collection: EntityCollection,
     disabled: boolean,
     isDraggingOver: boolean,
     droppableProvided: any,
@@ -165,7 +161,6 @@ function FileDropComponent({
     property: ResolvedStringProperty,
     onClear: (clearedStoragePathOrDownloadUrl: string) => void,
     metadata: any,
-    entity: Entity<any>;
     storagePathBuilder: (file: File) => string,
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
     size: PreviewSize,
@@ -190,10 +185,18 @@ function FileDropComponent({
             onDropRejected: (fileRejections, event) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        snackbarContext.open({
-                            type: "error",
-                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                        });
+                        console.error("Error uploading file: ", error);
+                        if (error.code === "file-too-large") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                            });
+                        } else if (error.code === "file-invalid-type") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: "Error uploading file: File type is not supported"
+                            });
+                        }
                     }
                 }
             }
@@ -203,12 +206,12 @@ function FileDropComponent({
     return (
         <div
             {...getRootProps()}
-            className={cn(
+            className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
-                focusedMixin,
                 {
                     [nonActiveDropClasses]: !isDragActive,
                     [activeDropClasses]: isDragActive,
@@ -220,7 +223,7 @@ function FileDropComponent({
             <div
                 {...droppableProvided.droppableProps}
                 ref={droppableProvided.innerRef}
-                className={cn("flex items-center p-1 no-scrollbar",
+                className={cls("flex items-center p-1 no-scrollbar",
                     multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
                     multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
                 )}
@@ -235,11 +238,9 @@ function FileDropComponent({
                     if (entry.storagePathOrDownloadUrl) {
                         child = (
                             <StorageItemPreview
-                                collection={collection}
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
                                 property={property}
                                 disabled={disabled}
-                                entity={entity}
                                 value={entry.storagePathOrDownloadUrl}
                                 onRemove={onClear}
                                 size={entry.size}/>
@@ -251,7 +252,7 @@ function FileDropComponent({
                                 metadata={metadata}
                                 storagePath={storagePathBuilder(entry.file)}
                                 onFileUploadComplete={onFileUploadComplete}
-                                imageSize={size === "medium" ? 220 : 118}
+                                imageSize={size === "large" ? 220 : 118}
                                 simple={false}
                             />
                         );
@@ -268,7 +269,7 @@ function FileDropComponent({
                                     ref={provided.innerRef}
                                     {...provided.draggableProps}
                                     {...provided.dragHandleProps}
-                                    className={cn(focusedMixin, "rounded-md")}
+                                    className={cls("rounded-md")}
                                     style={{
                                         ...provided.draggableProps.style
                                     }}
@@ -288,7 +289,8 @@ function FileDropComponent({
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}>
+                            variant={"label"}
+                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>
@@ -299,7 +301,6 @@ function FileDropComponent({
 
 export interface StorageUploadProps {
     value: StorageFieldItem[];
-    collection: EntityCollection;
     setInternalValue: (v: StorageFieldItem[]) => void;
     name: string;
     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
@@ -307,7 +308,6 @@ export interface StorageUploadProps {
     multipleFilesSupported: boolean;
     autoFocus: boolean;
     disabled: boolean;
-    entity: Entity<any>;
     storage: StorageConfig;
     onFilesAdded: (acceptedFiles: File[]) => void;
     storagePathBuilder: (file: File) => string;
@@ -315,7 +315,6 @@ export interface StorageUploadProps {
 }
 
 export function StorageUpload({
-                                  collection,
                                   property,
                                   name,
                                   value,
@@ -327,7 +326,6 @@ export function StorageUpload({
                                   onFilesAdded,
                                   autoFocus,
                                   storage,
-                                  entity,
                                   storagePathBuilder,
                               }: StorageUploadProps) {
 
@@ -346,7 +344,7 @@ export function StorageUpload({
     }
 
     const metadata: Record<string, unknown> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "small" : "medium";
+    const size = multipleFilesSupported ? "medium" : "large";
 
     const moveItem = useCallback((fromIndex: number, toIndex: number) => {
         if (!multipleFilesSupported) return;
@@ -408,11 +406,10 @@ export function StorageUpload({
                             className="rounded"
                         >
                             <StorageItemPreview
-                                collection={collection}
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
+                                placeholder={true}
                                 property={renderProperty}
                                 disabled={true}
-                                entity={entity}
                                 value={entry.storagePathOrDownloadUrl as string}
                                 onRemove={onClear}
                                 size={entry.size}/>
@@ -422,7 +419,6 @@ export function StorageUpload({
             >
                 {(provided, snapshot) => {
                     return <FileDropComponent storage={storage}
-                                              collection={collection}
                                               disabled={disabled}
                                               isDraggingOver={snapshot.isDraggingOver}
                                               droppableProvided={provided}
@@ -431,7 +427,6 @@ export function StorageUpload({
                                               autoFocus={autoFocus}
                                               internalValue={value}
                                               property={renderProperty}
-                                              entity={entity}
                                               onClear={onClear}
                                               metadata={metadata}
                                               storagePathBuilder={storagePathBuilder}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -5,6 +5,7 @@ import { getIconForProperty } from "../../util";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SwitchFieldProps = FieldProps<boolean>;
 
@@ -15,18 +16,18 @@ type SwitchFieldProps = FieldProps<boolean>;
  * and tables to the specified properties.
  * @group Form fields
  */
-export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
-                                                                                   propertyKey,
-                                                                                   value,
-                                                                                   setValue,
-                                                                                   error,
-                                                                                   showError,
-                                                                                   autoFocus,
-                                                                                   disabled,
-                                                                                   touched,
-                                                                                   property,
-                                                                                   includeDescription
-                                                                               }: SwitchFieldProps, ref) {
+export const SwitchFieldBinding = function SwitchFieldBinding({
+                                                                  propertyKey,
+                                                                  value,
+                                                                  setValue,
+                                                                  error,
+                                                                  showError,
+                                                                  autoFocus,
+                                                                  disabled,
+                                                                  size = "large",
+                                                                  property,
+                                                                  includeDescription
+                                                              }: SwitchFieldProps) {
 
     useClearRestoreValue({
         property,
@@ -37,17 +38,21 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
     return (
         <>
 
-            <BooleanSwitchWithLabel
-                value={value}
-                onValueChange={(v) => setValue(v)}
-                error={showError}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}/>}
-                disabled={disabled}
-                autoFocus={autoFocus}
-                size={"medium"}
-            />
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <BooleanSwitchWithLabel
+                    value={value}
+                    onValueChange={(v) => setValue(v)}
+                    error={showError}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}/>}
+                    disabled={disabled}
+                    autoFocus={autoFocus}
+                    size={size}
+                />
+            </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
@@ -57,4 +62,4 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
         </>
 
     );
-});
+};

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback } from "react";
 
-import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
+import { CloseIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { FieldProps, PreviewType } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
 import { PropertyPreview } from "../../preview";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
 
 interface TextFieldBindingProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean
@@ -18,7 +19,6 @@ interface TextFieldBindingProps<T extends string | number> extends FieldProps<T>
  * @group Form fields
  */
 export function TextFieldBinding<T extends string | number>({
-                                                                context,
                                                                 propertyKey,
                                                                 value,
                                                                 setValue,
@@ -28,6 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
+                                                                size = "large"
                                                             }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
@@ -67,27 +68,30 @@ export function TextFieldBinding<T extends string | number>({
     const isMultiline = Boolean(multiline);
 
     const inputType = property.dataType === "number" ? "number" : undefined;
-    return (
-        <>
-            <TextField
-                value={value}
-                onChange={onChange}
-                autoFocus={autoFocus}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}/>}
-                type={inputType}
-                multiline={isMultiline}
-                disabled={disabled}
-                endAdornment={
-                    property.clearable && <IconButton
-                        onClick={handleClearClick}>
-                        <ClearIcon/>
-                    </IconButton>
-                }
-                error={showError ? error : undefined}
-                inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
-
+    return (<>
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <TextField
+                    size={size}
+                    value={value}
+                    onChange={onChange}
+                    autoFocus={autoFocus}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}/>}
+                    type={inputType}
+                    multiline={isMultiline}
+                    disabled={disabled}
+                    endAdornment={
+                        property.clearable && <IconButton
+                            onClick={handleClearClick}>
+                            <CloseIcon/>
+                        </IconButton>
+                    }
+                    error={showError ? error : undefined}
+                    inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
+            </PropertyIdCopyTooltip>
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
                              error={error}
@@ -100,7 +104,7 @@ export function TextFieldBinding<T extends string | number>({
                 <PropertyPreview
                     value={value}
                     property={property}
-                    size={"medium"}/>
+                    size={size}/>
             </Collapse>}
 
         </>

package/src/form/index.tsx

@@ -1,43 +1,22 @@
-import { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
-import { MultiSelectBinding } from "./field_bindings/MultiSelectBinding";
-import { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
-import { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
-import { TextFieldBinding } from "./field_bindings/TextFieldBinding";
-import { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
-import { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
-import { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
-import { MapFieldBinding } from "./field_bindings/MapFieldBinding";
-import { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
-import { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
-import { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
-import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
-import { MarkdownFieldBinding } from "./field_bindings/MarkdownFieldBinding";
-import { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
+export * from "./EntityForm";
 
-export {
-    ArrayCustomShapedFieldBinding,
-    RepeatFieldBinding,
-    MultiSelectBinding,
-    ArrayOfReferencesFieldBinding,
-    BlockFieldBinding,
-    DateTimeFieldBinding,
-    ReadOnlyFieldBinding,
-    MapFieldBinding,
-    KeyValueFieldBinding,
-    ReferenceFieldBinding,
-    SelectFieldBinding,
-    StorageUploadFieldBinding,
-    SwitchFieldBinding,
-    MarkdownFieldBinding,
-    TextFieldBinding
-};
+export { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
+export { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
+export { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
+export { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
+export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
+export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
+export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
+export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
+export { MapFieldBinding } from "./field_bindings/MapFieldBinding";
+export { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
+export { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
+export { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
+export { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
+export { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
+export { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
 
 export * from "./components";
 
-export type { EntityFormProps } from "./EntityForm";
-export {
-    EntityForm
-} from "./EntityForm";
-
 export { PropertyFieldBinding } from "./PropertyFieldBinding";
 export * from "./useClearRestoreValue";

package/src/form/useClearRestoreValue.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { CMSType, ResolvedProperty } from "../types";
+import { CMSType, Property, ResolvedProperty } from "../types";
 
 /**
  * Hook we use to restore a value after it has been cleared
@@ -14,7 +14,7 @@ export function useClearRestoreValue<T extends CMSType>({
                                                             setValue
                                                         }:
                                                             {
-                                                                property: ResolvedProperty<T>,
+                                                                property: Property<T> | ResolvedProperty<T>,
                                                                 value: T,
                                                                 setValue: (value: T | null, shouldValidate?: boolean) => void
                                                             }) {

package/src/form/validation.ts

@@ -90,11 +90,11 @@ export function mapPropertyToYup<T extends CMSType>(propertyContext: PropertyCon
 }
 
 export function getYupMapObjectSchema({
-                                                                         property,
-                                                                         entityId,
-                                                                         customFieldValidator,
-                                                                         name
-                                                                     }: PropertyContext<Record<string, any>>): ObjectSchema<any> {
+                                          property,
+                                          entityId,
+                                          customFieldValidator,
+                                          name
+                                      }: PropertyContext<Record<string, any>>): ObjectSchema<any> {
     const objectSchema: any = {};
     const validation = property.validation;
     if (property.properties)
@@ -112,23 +112,7 @@ export function getYupMapObjectSchema({
     if (validation?.required) {
         return shape.required(validation?.requiredMessage ? validation.requiredMessage : "Required").nullable(true);
     }
-    return shape.nullable(true);
-    // const object: ObjectSchema<any> = yup.object().shape(objectSchema);
-    // return validation?.required
-    //     ? object.required(validation?.requiredMessage ? validation.requiredMessage : "Required").nullable(true)
-    //     : yup.object().optional().default(undefined).notRequired().nullable(true).test(
-    //         "empty-check",
-    //         "Optional map can be empty",
-    //         (o: any, testContext: any) => {
-    //             try {
-    //                 if (!o || Object.keys(o).length === 0) return true;
-    //                 return object.validateSync(o);
-    //             } catch (e) {
-    //                 testContext.createError(e);
-    //                 console.error(e);
-    //                 return false;
-    //             }
-    //         });
+    return yup.object().shape(shape.fields).default(undefined).notRequired().nullable(true);
 }
 
 function getYupStringSchema({
@@ -175,7 +159,13 @@ function getYupStringSchema({
         if (validation.lowercase) collection = collection.lowercase();
         if (validation.uppercase) collection = collection.uppercase();
         if (property.email) collection = collection.email(`${property.name} must be an email`);
-        if (property.url) collection = collection.url(`${property.name} must be a url`);
+        if (property.url) {
+            if (!property.storage || property.storage?.storeUrl) {
+                collection = collection.url(`${property.name} must be a url`);
+            } else {
+                console.warn(`Property ${property.name} has a url validation but its storage configuration is not set to store urls`);
+            }
+        }
     } else {
         collection = collection.notRequired().nullable(true);
     }

package/src/hooks/data/delete.ts

@@ -12,10 +12,10 @@ import {
 /**
  * @group Hooks and utilities
  */
-export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserType extends User = User> =
+export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, USER extends User = User> =
     DeleteEntityProps<M>
     & {
-    callbacks?: EntityCallbacks<M, UserType>;
+    callbacks?: EntityCallbacks<M, USER>;
     onDeleteSuccess?: (entity: Entity<M>) => void;
     onDeleteFailure?: (entity: Entity<M>, e: Error) => void;
     onPreDeleteHookError?: (entity: Entity<M>, e: Error) => void;
@@ -43,7 +43,7 @@ export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserTy
  * @param context
  * @group Hooks and utilities
  */
-export async function deleteEntityWithCallbacks<M extends Record<string, any>, UserType extends User>({
+export async function deleteEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
                                                                                                           dataSource,
                                                                                                           entity,
                                                                                                           collection,
@@ -56,7 +56,7 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
                                                                                                       }: DeleteEntityWithCallbacksProps<M> & {
                                                                                                           collection: ResolvedEntityCollection<M>,
                                                                                                           dataSource: DataSource,
-                                                                                                          context: FireCMSContext<UserType>
+                                                                                                          context: FireCMSContext<USER>
                                                                                                       }
 ): Promise<boolean> {
 
@@ -81,7 +81,8 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
         }
     }
     return dataSource.deleteEntity({
-        entity
+        entity,
+        collection
     }).then(() => {
         onDeleteSuccess && onDeleteSuccess(entity);
         try {