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

package/src/internal/useBuildDataSource.ts

@@ -52,23 +52,25 @@ export function useBuildDataSource({
          */
         fetchCollection: useCallback(<M extends Record<string, any>>({
                                                                          path,
-                                                                         collection: collectionProp,
+                                                                         collection,
                                                                          filter,
                                                                          limit,
                                                                          startAfter,
                                                                          searchString,
                                                                          orderBy,
-                                                                         order
+                                                                         order,
                                                                      }: FetchCollectionProps<M>
         ): Promise<Entity<M>[]> => {
-            return delegate.fetchCollection<M>({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchCollection<M>({
                 path,
                 filter,
                 limit,
                 startAfter,
                 searchString,
                 orderBy,
-                order
+                order,
+                collection
             });
         }, [delegate]),
 
@@ -89,7 +91,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenCollection: delegate.listenCollection
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -106,11 +107,12 @@ export function useBuildDataSource({
             ): () => void => {
 
                 const collection = collectionProp ?? navigationController.getCollection(path);
-                const isCollectionGroup = Boolean(collection?.collectionGroup) ?? false;
-                if (!delegate.listenCollection)
+                const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+
+                if (!usedDelegate.listenCollection)
                     throw Error("useBuildDataSource delegate not initialised");
 
-                return delegate.listenCollection<M>({
+                return usedDelegate.listenCollection<M>({
                     path,
                     filter,
                     limit,
@@ -120,8 +122,7 @@ export function useBuildDataSource({
                     order,
                     onUpdate,
                     onError,
-                    isCollectionGroup,
-                    collection
+                    collection,
                 });
             }, [delegate, navigationController.getCollection])
             : undefined,
@@ -135,12 +136,17 @@ export function useBuildDataSource({
          */
         fetchEntity: useCallback(<M extends Record<string, any>>({
                                                                      path,
-                                                                     entityId
+                                                                     entityId,
+                                                                     collection
                                                                  }: FetchEntityProps<M>
-        ): Promise<Entity<M> | undefined> => delegate.fetchEntity({
-            path,
-            entityId
-        }), [delegate]),
+        ): Promise<Entity<M> | undefined> => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchEntity({
+                path,
+                entityId,
+                collection
+            });
+        }, [delegate.fetchEntity]),
 
         /**
          *
@@ -153,7 +159,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenEntity: delegate.listenEntity
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -162,14 +167,17 @@ export function useBuildDataSource({
                     onUpdate,
                     onError
                 }: ListenEntityProps<M>): () => void => {
-                if (!delegate.listenEntity)
+                const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+
+                if (!usedDelegate.listenEntity)
                     throw Error("useBuildDataSource delegate not initialised");
 
-                return delegate.listenEntity<M>({
+                return usedDelegate.listenEntity<M>({
                     path,
                     entityId,
                     onUpdate,
-                    onError
+                    onError,
+                    collection
                 })
             }, [delegate.listenEntity]) : undefined,
 
@@ -194,6 +202,7 @@ export function useBuildDataSource({
             }: SaveEntityProps<M>): Promise<Entity<M>> => {
 
             const collection = collectionProp ?? navigationController.getCollection(path);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
 
             const resolvedCollection = collection
                 ? resolveCollection<M>({
@@ -206,31 +215,32 @@ export function useBuildDataSource({
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = delegate.cmsToDelegateModel(
+            const firestoreValues = usedDelegate.cmsToDelegateModel(
                 values,
             );
 
-            const updatedFirestoreValues: EntityValues<M> = properties
+            const updatedValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
                         inputValues: firestoreValues,
                         properties,
                         status,
-                        timestampNowValue: delegate.currentTime(),
-                        setDateToMidnight: delegate.setDateToMidnight
+                        timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
+                        setDateToMidnight: usedDelegate.setDateToMidnight
                     })
                 : firestoreValues;
 
-            return delegate.saveEntity({
+            return usedDelegate.saveEntity({
                 path,
+                collection,
                 entityId,
-                values: updatedFirestoreValues,
+                values: updatedValues,
                 status
             }).then((res) => {
                 return {
                     id: res.id,
                     path: res.path,
-                    values: delegate.delegateToCMSModel(updatedFirestoreValues)
+                    values: usedDelegate.delegateToCMSModel(updatedValues)
                 } as Entity<M>;
             });
         }, [delegate.saveEntity, navigationController.getCollection]),
@@ -243,10 +253,15 @@ export function useBuildDataSource({
          */
         deleteEntity: useCallback(<M extends Record<string, any>>(
             {
-                entity
+                entity,
+                collection
             }: DeleteEntityProps<M>
         ): Promise<void> => {
-            return delegate.deleteEntity({ entity });
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.deleteEntity({
+                entity,
+                collection
+            });
         }, [delegate.deleteEntity]),
 
         /**
@@ -263,13 +278,16 @@ export function useBuildDataSource({
             path: string,
             name: string,
             value: any,
-            entityId?: string
+            entityId?: string,
+            collection?: EntityCollection
         ): Promise<boolean> => {
-            return delegate.checkUniqueField(path, name, value, entityId);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.checkUniqueField(path, name, value, entityId, collection);
         }, [delegate.checkUniqueField]),
 
-        generateEntityId: useCallback((path: string): string => {
-            return delegate.generateEntityId(path,);
+        generateEntityId: useCallback((path: string, collection: EntityCollection): string => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.generateEntityId(path, collection);
         }, [delegate.generateEntityId]),
 
         countEntities: delegate.countEntities ? async ({
@@ -285,21 +303,24 @@ export function useBuildDataSource({
             orderBy?: string,
             order?: "desc" | "asc",
         }): Promise<number> => {
-            return delegate.countEntities!({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.countEntities!({
                 path,
                 filter,
                 orderBy,
                 order,
-                isCollectionGroup: Boolean(collection.collectionGroup) ?? false
+                collection
             });
         } : undefined,
 
         isFilterCombinationValid: useCallback(({
                                                    path,
+                                                   databaseId,
                                                    filterValues,
                                                    sortBy
                                                }: {
             path: string,
+            databaseId?: string,
             filterValues: FilterValues<any>,
             sortBy?: [string, "asc" | "desc"]
         }): boolean => {
@@ -308,6 +329,7 @@ export function useBuildDataSource({
             return delegate.isFilterCombinationValid(
                 {
                     path,
+                    databaseId,
                     filterValues,
                     sortBy
                 }
@@ -320,51 +342,12 @@ export function useBuildDataSource({
             collection: EntityCollection,
             parentCollectionIds?: string[]
         }): Promise<boolean> => {
-            if (!delegate.initTextSearch)
+            const usedDelegate = props.collection?.overrides?.dataSourceDelegate ?? delegate;
+            if (!usedDelegate.initTextSearch)
                 return false;
-            return delegate.initTextSearch(props)
+            return usedDelegate.initTextSearch(props)
         }, [delegate.initTextSearch]),
 
     };
 
 }
-
-// /**
-//  * Recursive function that converts Firestore data types into CMS or plain
-//  * JS types.
-//  * FireCMS uses Javascript dates internally instead of Firestore timestamps.
-//  * This makes it easier to interact with the rest of the libraries and
-//  * bindings.
-//  * Also, Firestore references are replaced with {@link EntityReference}
-//  * @param data
-//  * @param buildReference
-//  * @param buildGeoPoint
-//  * @param buildDate
-//  * @param buildDelete
-//  * @group Firestore
-//  */
-// export function cmsToDelegateModel(data: any,
-//                                    buildReference: (reference: EntityReference) => any,
-//                                    buildGeoPoint: (geoPoint: GeoPoint) => any,
-//                                    buildDate: (date: Date) => any,
-//                                    buildDelete: () => any
-// ): any {
-//     if (data === undefined) {
-//         return buildDelete();
-//     } else if (data === null) {
-//         return null;
-//     } else if (Array.isArray(data)) {
-//         return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
-//     } else if (data.isEntityReference && data.isEntityReference()) {
-//         return buildReference(data);
-//     } else if (data instanceof GeoPoint) {
-//         return buildGeoPoint(data);
-//     } else if (data instanceof Date) {
-//         return buildDate(data);
-//     } else if (data && typeof data === "object") {
-//         return Object.entries(data)
-//             .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
-//             .reduce((a, b) => ({ ...a, ...b }), {});
-//     }
-//     return data;
-// }

package/src/internal/useBuildSideDialogsController.tsx

@@ -118,6 +118,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
     return {
         sidePanels,
+        setSidePanels: updateSidePanels,
         close,
         open,
         replace

package/src/internal/useBuildSideEntityController.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from "react";
 import {
     EntityCollection,
     EntitySidePanelProps,
-    NavigationController, PropertyConfig,
+    NavigationController,
     ResolvedProperty,
     SideDialogPanelProps,
     SideDialogsController,
@@ -115,6 +115,16 @@ export const useBuildSideEntityController = (navigation: NavigationController,
         }
     }, [location, navigation.loading, navigation.isUrlCollectionPath, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout, navigation]);
 
+    useEffect(() => {
+        const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
+            if (sidePanelProps.additional) {
+                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout);
+            }
+            return sidePanelProps;
+        });
+        sideDialogsController.setSidePanels(updatedSidePanels);
+    }, [smallLayout]);
+
     const close = useCallback(() => {
         sideDialogsController.close();
     }, [sideDialogsController]);
@@ -210,7 +220,7 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     return sidePanels;
 }
 
-const propsToSidePanel = (props: EntitySidePanelProps<any>,
+const propsToSidePanel = (props: EntitySidePanelProps,
                           buildUrlCollectionPath: (path: string) => string,
                           resolveAliasesFrom: (pathWithAliases: string) => string,
                           smallLayout: boolean): SideDialogPanelProps => {
@@ -227,13 +237,16 @@ const propsToSidePanel = (props: EntitySidePanelProps<any>,
             path: resolvedPath,
         };
 
+        const entityViewWidth = getEntityViewWidth(props, smallLayout);
+
         return {
             key: `${props.path}/${props.entityId}`,
             component: <EntitySidePanel {...resolvedPanelProps}/>,
             urlPath: newPath,
             parentUrlPath: buildUrlCollectionPath(collectionPath),
-            width: getEntityViewWidth(props, smallLayout),
-            onClose: props.onClose
+            width: entityViewWidth,
+            onClose: props.onClose,
+            additional: props
         };
     }
 ;

package/src/internal/useUnsavedChangesDialog.tsx

@@ -84,8 +84,10 @@ export function UnsavedChangesDialog({
 
     return (
         <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
             open={open}
-            onOpenChange={(open) => open ? handleCancel() : handleOk()}
         >
             <DialogContent>
                 <Typography variant={"h6"}>{title}</Typography>

package/src/preview/PropertyPreview.tsx

@@ -86,6 +86,8 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                                              url={value}
                                              interactive={interactive}
                                              previewType={stringProperty.url}/>;
+            } else if (stringProperty.markdown) {
+                content = <Markdown source={value} size={"small"}/>;
             } else if (stringProperty.storage) {
                 const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
                 content = <StorageThumbnail
@@ -93,8 +95,6 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     storeUrl={property.storage?.storeUrl ?? false}
                     size={props.size}
                     storagePathOrDownloadUrl={filePath}/>;
-            } else if (stringProperty.markdown) {
-                content = <Markdown source={value} size={"small"}/>;
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "tiny";
+export type PreviewSize = "medium" | "small" | "smallest";
 
 /**
  * @group Preview components

package/src/preview/components/BooleanPreview.tsx

@@ -21,6 +21,6 @@ export function BooleanPreview({
                   size={size}
                   color={"secondary"}/>
         {property.name && <span
-            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/EnumValuesChip.tsx

@@ -6,7 +6,7 @@ import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFr
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "tiny" | "small" | "medium";
+    size: "smallest" | "small" | "medium";
     className?: string;
     children?: React.ReactNode;
 }

package/src/preview/components/ImagePreview.tsx

@@ -22,7 +22,7 @@ export function ImagePreview({
 
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
-    if (size === "tiny") {
+    if (size === "smallest") {
         return (
             <img src={url}
                  className={"rounded-md"}
@@ -58,7 +58,9 @@ export function ImagePreview({
 
 
             <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
-                {navigator && <Tooltip title="Copy url to clipboard" side={"bottom"}>
+                {navigator && <Tooltip
+                    asChild={true}
+                    title="Copy url to clipboard" side={"bottom"}>
                     <IconButton
                         variant={"filled"}
                         size={"small"}

package/src/preview/components/ReferencePreview.tsx

@@ -21,7 +21,7 @@ export type ReferencePreviewProps = {
 /**
  * @group Preview components
  */
-export const ReferencePreview = React.memo<ReferencePreviewProps>(function ReferencePreview(props: ReferencePreviewProps) {
+export const ReferencePreview = function ReferencePreview(props: ReferencePreviewProps) {
     const reference = props.reference;
     if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
@@ -33,18 +33,7 @@ export const ReferencePreview = React.memo<ReferencePreviewProps>(function Refer
         </EntityPreviewContainer>;
     }
     return <ReferencePreviewInternal {...props} />;
-}, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
-
-function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewProps) {
-    return prevProps.disabled === nextProps.disabled &&
-        prevProps.size === nextProps.size &&
-        prevProps.hover === nextProps.hover &&
-        prevProps.reference?.id === nextProps.reference?.id &&
-        prevProps.reference?.path === nextProps.reference?.path &&
-        prevProps.includeEntityLink === nextProps.includeEntityLink &&
-        prevProps.onClick === nextProps.onClick
-        ;
-}
+};
 
 function ReferencePreviewInternal({
                                       disabled,

package/src/preview/components/UrlComponentPreview.tsx

@@ -84,7 +84,7 @@ function VideoPreview({
                       }: { size: PreviewSize, src: string, interactive: boolean }) {
 
     const imageSize = useMemo(() => {
-        if (size === "tiny")
+        if (size === "smallest")
             return "140px";
         else if (size === "small")
             return "240px";

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -54,7 +54,7 @@ export function ArrayOfMapsPreview({
                     values.map((v, index) => {
                         return (
                             <div key={`table_${v}_${index}`}
-                                 className="border-b last:border-b-0">
+                                 className="border-b last:border-b-0 py-2">
                                 {mapProperties && mapProperties.map(
                                     (key) => (
                                         <div

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -28,7 +28,7 @@ export function ArrayOfReferencesPreview({
     if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
         throw Error("Picked wrong preview component ArrayOfReferencesPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className="flex flex-col w-full">

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -33,7 +33,7 @@ export function ArrayOfStorageComponentsPreview({
     if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
         throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className={"flex flex-wrap gap-2"}>

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -37,7 +37,7 @@ export function ArrayOneOfPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
     const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
@@ -49,7 +49,7 @@ export function ArrayOneOfPreview({
                 values.map((value, index) =>
                     <React.Fragment
                         key={"preview_array_" + value + "_" + index}>
-                        <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                        <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0 py-2")}>
                             <ErrorBoundary>
                                 {value && <PropertyPreview
                                     propertyKey={propertyKey}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -37,7 +37,7 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className="flex flex-col gap-2">

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -34,7 +34,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
 
     const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
 
-    if (size === "tiny")
+    if (size === "smallest")
         return (
             <div className="w-full flex flex-col space-y-1 md:space-y-2">
                 {mapPropertyKeys.map((key, index) => (

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -87,7 +87,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
         mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
         if (size === "small")
             mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-        else if (size === "tiny")
+        else if (size === "smallest")
             mapPropertyKeys = mapPropertyKeys.slice(0, 1);
     }
 
@@ -226,7 +226,7 @@ function renderUrlAudioComponent() {
 
 export function renderSkeletonImageThumbnail(size: PreviewSize) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+    const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
                   height={imageSize}/>

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -45,14 +45,14 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={cls("overflow-x-scroll", size === "tiny" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll", size === "smallest" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>
                         {index !== lines.length - 1 && <br/>}
                     </React.Fragment>)}
             </div>
-            : (size === "tiny"
+            : (size === "smallest"
                     ? <span className={"text-sm"}>{value}</span>
                     : <>{value}</>
             );

package/src/preview/util.ts

@@ -6,7 +6,7 @@ export const SMALL_THUMBNAIL = 100;
 export const REGULAR_THUMBNAIL = 200;
 
 export function getThumbnailMeasure(size: PreviewSize): number {
-    if (size === "tiny")
+    if (size === "smallest")
         return TINY_THUMBNAIL;
     else if (size === "small")
         return SMALL_THUMBNAIL;
@@ -19,7 +19,7 @@ export function getPreviewSizeFrom(size: CollectionSize): PreviewSize {
     switch (size) {
         case "xs":
         case "s":
-            return "tiny";
+            return "smallest";
         case "m":
             return "small";
         case "l":

package/src/types/auth.tsx

@@ -9,7 +9,7 @@ import { StorageSource } from "./storage";
  * to do it as the result of a hook.
  * @group Hooks and utilities
  */
-export type AuthController<UserType extends User = any, ExtraData extends any = any> = {
+export type AuthController<UserType extends User = any, ExtraData = any> = {
 
     /**
      * The user currently logged in