@firecms/core 3.0.0-canary.4 → 3.0.0-canary.41

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>;
 
@@ -43,7 +43,7 @@ export function DateTimeFieldBinding({
         <>
             <DateTimeField
                 value={internalValue}
-                onChange={(dateValue) => setValue(dateValue)}
+                onChange={(dateValue) => setValue(dateValue ?? null)}
                 size={"medium"}
                 mode={property.mode}
                 clearable={property.clearable}

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.isEntityReference && value.isEntityReference()) {
+    } 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.
@@ -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>;
 

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -3,6 +3,7 @@ import React, { useCallback } from "react";
 import {
     ArrayProperty,
     Entity,
+    EntityCollection,
     FieldProps,
     ResolvedArrayProperty,
     ResolvedStringProperty,
@@ -10,11 +11,10 @@ import {
 } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 
 import { getIconForProperty, isReadOnly } from "../../util";
-import { useClearRestoreValue, useSnackbarController, useStorageSource } from "../../hooks";
+import { useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
@@ -27,6 +27,7 @@ import {
     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"
@@ -55,13 +56,13 @@ export function StorageUploadFieldBinding({
                                               property,
                                               includeDescription,
                                               context,
-                                              isSubmitting
+                                              isSubmitting,
                                           }: StorageUploadFieldProps) {
 
     if (!context.entityId)
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
-    const storageSource = useStorageSource();
+    const storageSource = useStorageSource(context.collection);
     const disabled = isReadOnly(property) || !!property.disabled || isSubmitting;
 
     const {
@@ -108,6 +109,7 @@ export function StorageUploadFieldBinding({
 
             <StorageUpload
                 value={internalValue}
+                collection={context.collection}
                 name={propertyKey}
                 disabled={disabled}
                 autoFocus={autoFocus}
@@ -133,6 +135,7 @@ export function StorageUploadFieldBinding({
 
 function FileDropComponent({
                                storage,
+                               collection,
                                disabled,
                                isDraggingOver,
                                onFilesAdded,
@@ -151,6 +154,7 @@ function FileDropComponent({
                                helpText
                            }: {
     storage: StorageConfig,
+    collection: EntityCollection,
     disabled: boolean,
     isDraggingOver: boolean,
     droppableProvided: any,
@@ -231,6 +235,7 @@ function FileDropComponent({
                     if (entry.storagePathOrDownloadUrl) {
                         child = (
                             <StorageItemPreview
+                                collection={collection}
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
                                 property={property}
                                 disabled={disabled}
@@ -294,6 +299,7 @@ function FileDropComponent({
 
 export interface StorageUploadProps {
     value: StorageFieldItem[];
+    collection: EntityCollection;
     setInternalValue: (v: StorageFieldItem[]) => void;
     name: string;
     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
@@ -309,6 +315,7 @@ export interface StorageUploadProps {
 }
 
 export function StorageUpload({
+                                  collection,
                                   property,
                                   name,
                                   value,
@@ -321,7 +328,7 @@ export function StorageUpload({
                                   autoFocus,
                                   storage,
                                   entity,
-                                  storagePathBuilder
+                                  storagePathBuilder,
                               }: StorageUploadProps) {
 
     if (multipleFilesSupported) {
@@ -401,6 +408,7 @@ export function StorageUpload({
                             className="rounded"
                         >
                             <StorageItemPreview
+                                collection={collection}
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
                                 property={renderProperty}
                                 disabled={true}
@@ -414,6 +422,7 @@ export function StorageUpload({
             >
                 {(provided, snapshot) => {
                     return <FileDropComponent storage={storage}
+                                              collection={collection}
                                               disabled={disabled}
                                               isDraggingOver={snapshot.isDraggingOver}
                                               droppableProvided={provided}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 
 import { FieldProps } from "../../types";
-import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../util";
-import { FieldHelperText } from "../components/FieldHelperText";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type SwitchFieldProps = FieldProps<boolean>;
 

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback } from "react";
 
+import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { FieldProps, PreviewType } from "../../types";
-import { FieldHelperText } from "../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
-import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { PropertyPreview } from "../../preview";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
-interface TextFieldProps<T extends string | number> extends FieldProps<T> {
+interface TextFieldBindingProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean
 }
 
@@ -19,6 +18,7 @@ interface TextFieldProps<T extends string | number> extends FieldProps<T> {
  * @group Form fields
  */
 export function TextFieldBinding<T extends string | number>({
+                                                                context,
                                                                 propertyKey,
                                                                 value,
                                                                 setValue,
@@ -28,7 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
-                                                            }: TextFieldProps<T>) {
+                                                            }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
     let url: boolean | PreviewType | undefined;
@@ -97,9 +97,10 @@ export function TextFieldBinding<T extends string | number>({
             {url && <Collapse
                 className="mt-1 ml-1"
                 in={Boolean(value)}>
-                <PropertyPreview value={value}
-                                 property={property}
-                                 size={"medium"}/>
+                <PropertyPreview
+                    value={value}
+                    property={property}
+                    size={"medium"}/>
             </Collapse>}
 
         </>

package/src/form/index.tsx

@@ -40,3 +40,4 @@ export {
 } from "./EntityForm";
 
 export { PropertyFieldBinding } from "./PropertyFieldBinding";
+export * from "./useClearRestoreValue";

package/src/form/validation.ts

@@ -9,8 +9,7 @@ import {
 } from "../types";
 import * as yup from "yup";
 import { AnySchema, ArraySchema, BooleanSchema, DateSchema, NumberSchema, ObjectSchema, StringSchema } from "yup";
-import { enumToObjectEntries } from "../util/enums";
-import { getValueInPath, hydrateRegExp, isPropertyBuilder } from "../util";
+import { enumToObjectEntries, getValueInPath, hydrateRegExp, isPropertyBuilder } from "../util";
 
 // Add custom unique function for array values
 declare module "yup" {
@@ -90,12 +89,12 @@ export function mapPropertyToYup<T extends CMSType>(propertyContext: PropertyCon
     throw Error("Unsupported data type in yup mapping");
 }
 
-export function getYupMapObjectSchema<M extends Record<string, any>>({
+export function getYupMapObjectSchema({
                                                                          property,
                                                                          entityId,
                                                                          customFieldValidator,
                                                                          name
-                                                                     }: PropertyContext<M>): ObjectSchema<any> {
+                                                                     }: PropertyContext<Record<string, any>>): ObjectSchema<any> {
     const objectSchema: any = {};
     const validation = property.validation;
     if (property.properties)

package/src/hooks/data/delete.ts

@@ -12,10 +12,10 @@ import {
 /**
  * @group Hooks and utilities
  */
-export type DeleteEntityWithCallbacksProps<M extends Record<string, any>> =
+export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserType extends User = User> =
     DeleteEntityProps<M>
     & {
-    callbacks?: EntityCallbacks<M>;
+    callbacks?: EntityCallbacks<M, UserType>;
     onDeleteSuccess?: (entity: Entity<M>) => void;
     onDeleteFailure?: (entity: Entity<M>, e: Error) => void;
     onPreDeleteHookError?: (entity: Entity<M>, e: Error) => void;
@@ -62,7 +62,7 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
 
     console.debug("Deleting entity", entity.path, entity.id);
 
-    const entityDeleteProps: EntityOnDeleteProps<M, UserType> = {
+    const entityDeleteProps: EntityOnDeleteProps<M, any> = {
         entity,
         collection,
         entityId: entity.id,

package/src/hooks/data/save.ts

@@ -64,7 +64,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                                                                                                         onPreSaveHookError,
                                                                                                         onSaveSuccessHookError
                                                                                                     }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M>,
+                                                                                                        collection: EntityCollection<M, UserType>,
                                                                                                         dataSource: DataSource,
                                                                                                         context: FireCMSContext<UserType>,
                                                                                                     }

package/src/hooks/data/useCollectionFetch.tsx

@@ -70,7 +70,7 @@ export function useCollectionFetch<M extends Record<string, any>, UserType exten
         searchString
     }: CollectionFetchProps<M>): CollectionFetchResult<M> {
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
     const path = navigationController.resolveAliasesFrom(inputPath);

package/src/hooks/data/useDataSource.tsx

@@ -1,9 +1,14 @@
-import { useContext } from "react";
-import { DataSource } from "../../types";
+import { useContext, useMemo } from "react";
+import { DataSource, EntityCollection } from "../../types";
 import { DataSourceContext } from "../../contexts/DataSourceContext";
 
 /**
  * Use this hook to get the datasource being used
  * @group Hooks and utilities
  */
-export const useDataSource = (): DataSource => useContext(DataSourceContext);
+export const useDataSource = (collection?: EntityCollection<any, any>): DataSource => {
+    const defaultDataSource = useContext(DataSourceContext);
+    if (collection?.overrides?.dataSource)
+        return collection?.overrides.dataSource;
+    return defaultDataSource;
+};

package/src/hooks/data/useEntityFetch.tsx

@@ -7,10 +7,10 @@ import { useFireCMSContext } from "../useFireCMSContext";
 /**
  * @group Hooks and utilities
  */
-export interface EntityFetchProps<M extends Record<string, any>> {
+export interface EntityFetchProps<M extends Record<string, any>, UserType extends User = User> {
     path: string;
     entityId?: string;
-    collection: EntityCollection<M>;
+    collection: EntityCollection<M, UserType>;
     useCache?: boolean;
 }
 
@@ -41,9 +41,9 @@ export function useEntityFetch<M extends Record<string, any>, UserType extends U
         entityId,
         collection,
         useCache = false
-    }: EntityFetchProps<M>): EntityFetchResult<M> {
+    }: EntityFetchProps<M, UserType>): EntityFetchResult<M> {
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
     const path = navigationController.resolveAliasesFrom(inputPath);