@firecms/core 3.0.0-canary.84 → 3.0.0-canary.86

package/dist/types/auth.d.ts

@@ -8,7 +8,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
      * The values can be: the user object, null if they skipped login

package/dist/types/datasource.d.ts

@@ -55,9 +55,8 @@ export interface DeleteEntityProps<M extends Record<string, any> = any> {
     entity: Entity<M>;
 }
 /**
- * Implement this interface and pass it to a {@link FireCMS}
- * to connect it to your data source.
- * A Firestore implementation of this interface can be found in {@link useFirestoreDataSource}
+ * Component in charge of communicating with the data source.
+ * Usually you won't need to implement this interface, but a {@link DataSourceDelegate} instead.
  * @group Datasource
  */
 export interface DataSource {
@@ -172,6 +171,14 @@ export type ListenCollectionDelegateProps<M extends Record<string, any> = any> =
     isCollectionGroup?: boolean;
 };
 export interface DataSourceDelegate {
+    /**
+     * Key that identifies this data source delegate
+     */
+    key: string;
+    /**
+     * If the data source has been initialised
+     */
+    initialised?: boolean;
     /**
      * Fetch data from a collection
      * @param path
@@ -220,8 +227,8 @@ export interface DataSourceDelegate {
     /**
      * Save entity to the specified path
      * @param path
-     * @param id
-     * @param collection
+     * @param entityId
+     * @param values
      * @param status
      */
     saveEntity<M extends Record<string, any> = any>({ path, entityId, values, status }: SaveEntityDelegateProps<M>): Promise<Entity<M>>;
@@ -256,7 +263,7 @@ export interface DataSourceDelegate {
     /**
      * Get the object to generate the current time in the datasource
      */
-    currentTime(): any;
+    currentTime?: () => any;
     delegateToCMSModel: (data: any) => any;
     cmsToDelegateModel: (data: any) => any;
     setDateToMidnight: (input?: any) => any;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.84",
+    "version": "3.0.0-canary.86",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,8 +46,8 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/formex": "^3.0.0-canary.84",
-        "@firecms/ui": "^3.0.0-canary.84",
+        "@firecms/formex": "^3.0.0-canary.86",
+        "@firecms/ui": "^3.0.0-canary.86",
         "@fontsource/jetbrains-mono": "^5.0.20",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
@@ -72,37 +72,37 @@
         "firebase": "^10.5.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router": "^6.22.0",
-        "react-router-dom": "^6.22.0"
+        "react-router": "^6.25.1",
+        "react-router-dom": "^6.25.1"
     },
     "devDependencies": {
         "@jest/globals": "^29.7.0",
         "@testing-library/react": "^15.0.7",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
-        "@types/node": "^20.14.9",
+        "@types/node": "^20.14.12",
         "@types/object-hash": "^3.0.6",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/react-measure": "^2.0.12",
         "@vitejs/plugin-react": "^4.3.1",
         "cross-env": "^7.0.3",
-        "firebase": "^10.12.2",
+        "firebase": "^10.12.4",
         "jest": "^29.7.0",
         "npm-run-all": "^4.1.5",
-        "react-router": "^6.24.0",
-        "react-router-dom": "^6.24.0",
-        "ts-jest": "^29.1.5",
+        "react-router": "^6.25.1",
+        "react-router-dom": "^6.25.1",
+        "ts-jest": "^29.2.3",
         "ts-node": "^10.9.2",
         "tsd": "^0.31.1",
-        "typescript": "^5.5.3",
-        "vite": "^5.3.2"
+        "typescript": "^5.5.4",
+        "vite": "^5.3.4"
     },
     "files": [
         "dist",
         "src"
     ],
-    "gitHead": "f286f012efde63060e83eeac5da67a866f1026e6",
+    "gitHead": "33cba1151b6e92dd0dd3b8ac36d428fed4f1f155",
     "publishConfig": {
         "access": "public"
     },

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -67,6 +67,7 @@ export const TableReferenceFieldSuccess = React.memo(
         }, [updateValue]);
 
         const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+            console.log("onMultipleEntitiesSelected", entities);
             updateValue(entities.map((e) => getReferenceFrom(e)));
         }, [updateValue]);
 

package/src/components/EntityPreview.tsx

@@ -199,6 +199,7 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
         }}
         className={cls(
             "bg-white dark:bg-gray-900",
+            "min-h-[42px]",
             fullwidth ? "w-full" : "",
             "items-center",
             hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",

package/src/components/SelectableTable/SelectableTable.tsx

@@ -221,7 +221,6 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                         onEndReached={loadNextPage}
                         onResetPagination={resetPagination}
                         error={dataLoadingError}
-                        paginationEnabled={paginationEnabled}
                         onColumnResize={onColumnResize}
                         rowHeight={getRowHeight(size)}
                         loading={dataLoading}

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -95,7 +95,7 @@ export function DateTimeFilterField({
                     size={"medium"}
                     locale={locale}
                     value={internalValue ?? undefined}
-                    onChange={(dateValue: Date | undefined) => {
+                    onChange={(dateValue: Date | null) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);
                     }}
                     clearable={true}

package/src/components/VirtualTable/VirtualTable.tsx

@@ -91,6 +91,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              data,
                                                              onResetPagination,
                                                              onEndReached,
+                                                             endOffset = 600,
                                                              rowHeight = 54,
                                                              columns: columnsProp,
                                                              onRowClick,
@@ -110,7 +111,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              style,
                                                              className,
                                                              endAdornment,
-                                                             AddColumnComponent
+                                                             AddColumnComponent,
+                                                             debug
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -128,10 +130,14 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const [measureRef, bounds] = useMeasure();
 
         const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
+            if (debug)
+                console.log("onColumnResizeInternal", params);
             setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
         }, [columns]);
 
         const onColumnResizeEndInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
+            if (debug)
+                console.log("onColumnResizeEndInternal", params);
             setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
             if (onColumnResize) {
                 onColumnResize(params);
@@ -142,10 +148,14 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const filterRef = useRef<VirtualTableFilterValues<any> | undefined>();
 
         useEffect(() => {
+            if (debug)
+                console.log("Filter updated", filterInput);
             filterRef.current = filterInput;
         }, [filterInput]);
 
         const scrollToTop = useCallback(() => {
+            if (debug)
+                console.log("scrollToTop");
             endReachCallbackThreshold.current = 0;
             if (tableRef.current) {
                 // scrollRef.current = [scrollRef.current[0], 0];
@@ -155,6 +165,9 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const onColumnSort = useCallback((key: string) => {
 
+            if (debug)
+                console.log("onColumnSort", key);
+
             const isDesc = sortByProperty === key && currentSort === "desc";
             const isAsc = sortByProperty === key && currentSort === "asc";
             const newSort = isAsc ? "desc" : (isDesc ? undefined : "asc");
@@ -181,21 +194,21 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollToTop();
         }, [checkFilterCombination, currentSort, onFilterUpdate, onResetPagination, onSortByUpdate, scrollToTop, sortByProperty]);
 
-        const resetSort = useCallback(() => {
-            endReachCallbackThreshold.current = 0;
-            if (onSortByUpdate)
-                onSortByUpdate(undefined);
-        }, [onSortByUpdate]);
-
         const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
+        if (debug)
+            console.log("maxScroll", maxScroll);
+
         const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + 600) {
+            if (debug)
+                console.log("onEndReachedInternal", scrollOffset, endReachCallbackThreshold.current + endOffset);
+            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
                 endReachCallbackThreshold.current = scrollOffset;
                 onEndReached();
             }
         }, [data?.length, onEndReached]);
 
         const onScroll = useCallback(({
+                                          scrollDirection,
                                           scrollOffset,
                                           scrollUpdateWasRequested
                                       }: {
@@ -203,11 +216,19 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
         }) => {
-            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - 600))
+            if(debug)
+                console.log("onScroll", {
+                    scrollDirection,
+                    scrollOffset,
+                    scrollUpdateWasRequested
+                });
+            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - endOffset))
                 onEndReachedInternal(scrollOffset);
         }, [maxScroll, onEndReachedInternal]);
 
         const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => {
+            if(debug)
+                console.log("onFilterUpdateInternal", column, filterForProperty);
 
             endReachCallbackThreshold.current = 0;
             const filter = filterRef.current;
@@ -272,6 +293,9 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             AddColumnComponent
         };
 
+        if(debug)
+            console.log("VirtualTable render", virtualListController);
+
         // useTraceUpdate(virtualListController);
         return (
             <div

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -31,11 +31,6 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
 
-    /**
-     * If enabled, content is loaded in batch
-     */
-    paginationEnabled?: boolean;
-
     /**
      * Set this callback if you want to support some combinations
      * of filter combinations only.
@@ -50,6 +45,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onEndReached?: () => void;
 
+    /**
+     * Offset in pixels where the onEndReached callback is triggered
+     */
+    endOffset?: number;
+
     /**
      * When the pagination should be reset. E.g. the filters or sorting
      * has been reset.
@@ -147,9 +147,14 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     AddColumnComponent?: React.ComponentType;
 
+    /**
+     * Debug mode
+     */
+    debug?: boolean;
+
 }
 
-export type CellRendererParams<T extends any = any> = {
+export type CellRendererParams<T = any> = {
     column: VirtualTableColumn;
     columns: VirtualTableColumn[];
     columnIndex: number;
@@ -163,7 +168,7 @@ export type CellRendererParams<T extends any = any> = {
  * @see Table
  * @group Components
  */
-export interface VirtualTableColumn<CustomProps extends any = any> {
+export interface VirtualTableColumn<CustomProps = any> {
 
     /**
      * Data key for the cell value, could be "a.b.c"
@@ -237,7 +242,6 @@ export type OnVirtualTableColumnResizeParams = {
     column: VirtualTableColumn
 };
 
-
 /**
  * @see Table
  * @group Components

package/src/core/FireCMS.tsx

@@ -82,7 +82,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         onAnalyticsEvent
     }), []);
 
-    const accessResponse = useProjectLog(authController, plugins);
+    const accessResponse = useProjectLog(authController, dataSourceDelegate, plugins);
 
     if (navigationController.navigationLoadingError) {
         return (

package/src/form/field_bindings/DateTimeFieldBinding.tsx

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

package/src/hooks/data/useDataSource.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from "react";
+import { useContext } from "react";
 import { DataSource, EntityCollection } from "../../types";
 import { DataSourceContext } from "../../contexts/DataSourceContext";
 

package/src/hooks/useProjectLog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { AuthController, FireCMSPlugin } from "../types";
+import { AuthController, DataSourceDelegate, FireCMSPlugin } from "../types";
 
 export const DEFAULT_SERVER_DEV = "https://api-kdoe6pj3qq-ey.a.run.app";
 export const DEFAULT_SERVER = "https://api-drplyi3b6q-ey.a.run.app";
@@ -9,17 +9,26 @@ export type AccessResponse = {
     message?: string;
 }
 
-async function makeRequest(authController: AuthController, pluginKeys: string[] | undefined) {
-    const firebaseToken = await authController.getAuthToken();
+async function makeRequest(authController: AuthController, dataSourceKey: string, pluginKeys: string[] | undefined) {
+    let idToken: string | null;
+    try {
+        idToken = await authController.getAuthToken();
+    } catch (e) {
+        idToken = null;
+    }
     return fetch(DEFAULT_SERVER + "/access_log",
         {
             // mode: "no-cors",
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
-                Authorization: `Basic ${firebaseToken}`,
+                Authorization: `Basic ${idToken}`
             },
-            body: JSON.stringify({ plugins: pluginKeys })
+            body: JSON.stringify({
+                email: authController.user?.email ?? null,
+                datasource: dataSourceKey,
+                plugins: pluginKeys
+            })
         })
         .then(async (res) => {
             return res.json();
@@ -27,15 +36,17 @@ async function makeRequest(authController: AuthController, pluginKeys: string[]
 }
 
 export function useProjectLog(authController: AuthController,
+                              dataSourceDelegate: DataSourceDelegate,
                               plugins?: FireCMSPlugin<any, any, any>[]): AccessResponse | null {
     const [accessResponse, setAccessResponse] = useState<AccessResponse | null>(null);
     const accessedUserRef = useRef<string | null>(null);
+    const dataSourceKey = dataSourceDelegate.key;
     const pluginKeys = plugins?.map(plugin => plugin.key);
     useEffect(() => {
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController, pluginKeys).then(setAccessResponse);
+            makeRequest(authController, dataSourceKey, pluginKeys).then(setAccessResponse);
             accessedUserRef.current = authController.user.uid;
         }
-    }, [authController, pluginKeys]);
+    }, [authController, dataSourceKey, pluginKeys]);
     return accessResponse;
 }

package/src/internal/useBuildDataSource.ts

@@ -216,7 +216,7 @@ export function useBuildDataSource({
                         inputValues: firestoreValues,
                         properties,
                         status,
-                        timestampNowValue: delegate.currentTime(),
+                        timestampNowValue: delegate.currentTime?.() ?? new Date(),
                         setDateToMidnight: delegate.setDateToMidnight
                     })
                 : firestoreValues;
@@ -290,7 +290,7 @@ export function useBuildDataSource({
                 filter,
                 orderBy,
                 order,
-                isCollectionGroup: Boolean(collection.collectionGroup) ?? false
+                isCollectionGroup: Boolean(collection.collectionGroup)
             });
         } : undefined,
 

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

package/src/types/collections.ts

@@ -82,7 +82,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * as the title in entity related views and references.
      * If not specified, the first property simple text property will be used.
      */
-    titleProperty?: keyof M,
+    titleProperty?: keyof M;
 
     /**
      * Can this collection be edited by the end user.

package/src/types/datasource.ts

@@ -1,4 +1,4 @@
-import { Entity, EntityReference, EntityStatus, EntityValues, GeoPoint } from "./entities";
+import { Entity, EntityStatus, EntityValues } from "./entities";
 import { EntityCollection, FilterValues } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 import { FireCMSContext } from "./firecms_context";
@@ -66,9 +66,8 @@ export interface DeleteEntityProps<M extends Record<string, any> = any> {
 }
 
 /**
- * Implement this interface and pass it to a {@link FireCMS}
- * to connect it to your data source.
- * A Firestore implementation of this interface can be found in {@link useFirestoreDataSource}
+ * Component in charge of communicating with the data source.
+ * Usually you won't need to implement this interface, but a {@link DataSourceDelegate} instead.
  * @group Datasource
  */
 export interface DataSource {
@@ -254,6 +253,17 @@ export type ListenCollectionDelegateProps<M extends Record<string, any> = any> =
 };
 
 export interface DataSourceDelegate {
+
+    /**
+     * Key that identifies this data source delegate
+     */
+    key: string;
+
+    /**
+     * If the data source has been initialised
+     */
+    initialised?: boolean;
+
     /**
      * Fetch data from a collection
      * @param path
@@ -332,8 +342,8 @@ export interface DataSourceDelegate {
     /**
      * Save entity to the specified path
      * @param path
-     * @param id
-     * @param collection
+     * @param entityId
+     * @param values
      * @param status
      */
     saveEntity<M extends Record<string, any> = any>({
@@ -379,7 +389,7 @@ export interface DataSourceDelegate {
     /**
      * Get the object to generate the current time in the datasource
      */
-    currentTime(): any;
+    currentTime?: () => any;
 
     delegateToCMSModel: (data: any) => any;