@firecms/core 3.0.0-alpha.81 → 3.0.0-alpha.83

package/dist/internal/useBuildCustomizationController.d.ts

@@ -0,0 +1,2 @@
+import { CustomizationController } from "../types/customization_controller";
+export declare function useBuildCustomizationController(controller: CustomizationController): CustomizationController;

package/dist/types/analytics_controller.d.ts

@@ -0,0 +1,7 @@
+import { CMSAnalyticsEvent } from "./analytics";
+export type AnalyticsController = {
+    /**
+     * Callback used to get analytics events from the CMS
+     */
+    onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
+};

package/dist/types/collections.d.ts

@@ -306,6 +306,9 @@ export type SelectionController<M extends Record<string, any> = any> = {
 export type WhereFilterOp = "<" | "<=" | "==" | "!=" | ">=" | ">" | "array-contains" | "in" | "not-in" | "array-contains-any";
 /**
  * Used to define filters applied in collections
+ *
+ * e.g. `{ age: [">=", 18] }`
+ *
  * @group Models
  */
 export type FilterValues<Key extends string> = Partial<Record<Key, [WhereFilterOp, any]>>;

package/dist/types/customization_controller.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { EntityLinkBuilder } from "./entity_link_builder";
+import { FireCMSPlugin } from "./plugins";
+import { EntityCustomView } from "./collections";
+import { Locale } from "./locales";
+import { PropertyConfig } from "./property_config";
+export type CustomizationController = {
+    /**
+     * Builder for generating utility links for entities
+     */
+    entityLinkBuilder?: EntityLinkBuilder;
+    /**
+     * Use plugins to modify the behaviour of the CMS.
+     */
+    plugins?: FireCMSPlugin<any, any, any>[];
+    /**
+     * List of additional custom views for entities.
+     * You can use the key to reference the custom view in
+     * the `entityViews` prop of a collection.
+     *
+     * You can also define an entity view from the UI.
+     */
+    entityViews?: EntityCustomView[];
+    /**
+     * Format of the dates in the CMS.
+     * Defaults to 'MMMM dd, yyyy, HH:mm:ss'
+     */
+    dateTimeFormat?: string;
+    /**
+     * Locale of the CMS, currently only affecting dates
+     */
+    locale?: Locale;
+    /**
+     * Record of custom form fields to be used in the CMS.
+     * You can use the key to reference the custom field in
+     * the `propertyConfig` prop of a property in a collection.
+     */
+    propertyConfigs: Record<string, PropertyConfig>;
+    components?: {
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{
+            path: string;
+        }>;
+    };
+};

package/dist/types/entity_callbacks.d.ts

@@ -24,14 +24,14 @@ export type EntityCallbacks<M extends Record<string, any> = any, UserType extend
      * Callback used when saving fails
      * @param entitySaveProps
      */
-    onSaveFailure?(entitySaveProps: EntityOnSaveProps<M, UserType>): Promise<void> | void;
+    onSaveFailure?(entitySaveProps: EntityOnSaveFailureProps<M, UserType>): Promise<void> | void;
     /**
      * Callback used before saving, you need to return the values that will get
      * saved. If you throw an error in this method the process stops, and an
      * error snackbar gets displayed.
      * @param entitySaveProps
      */
-    onPreSave?(entitySaveProps: EntityOnSaveProps<M, UserType>): Promise<Partial<EntityValues<M>>> | Partial<EntityValues<M>>;
+    onPreSave?(entitySaveProps: EntityOnPreSaveProps<M, UserType>): Promise<Partial<EntityValues<M>>> | Partial<EntityValues<M>>;
     /**
      * Callback used after the entity is deleted.
      * If you throw an error in this method the process stops, and an
@@ -78,6 +78,20 @@ export interface EntityOnFetchProps<M extends Record<string, any> = any, UserTyp
      */
     context: FireCMSContext<UserType>;
 }
+/**
+ * Parameters passed to hooks before an entity is saved
+ * @group Models
+ */
+export type EntityOnPreSaveProps<M extends Record<string, any> = any, UserType extends User = User> = Omit<EntityOnSaveProps<M, UserType>, "entityId"> & {
+    entityId?: string;
+};
+/**
+ * Parameters passed to hooks before an entity is saved
+ * @group Models
+ */
+export type EntityOnSaveFailureProps<M extends Record<string, any> = any, UserType extends User = User> = Omit<EntityOnSaveProps<M, UserType>, "entityId"> & {
+    entityId?: string;
+};
 /**
  * Parameters passed to hooks when an entity is saved
  * @group Models
@@ -99,7 +113,7 @@ export interface EntityOnSaveProps<M extends Record<string, any> = any, UserType
     /**
      * ID of the entity
      */
-    entityId?: string;
+    entityId: string;
     /**
      * Values being saved
      */

package/dist/types/firecms_context.d.ts

@@ -1,19 +1,15 @@
-import { Locale } from "./locales";
 import { DataSource } from "./datasource";
 import { StorageSource } from "./storage";
 import { NavigationController } from "./navigation";
 import { SideEntityController } from "./side_entity_controller";
 import { AuthController } from "./auth";
-import { EntityLinkBuilder } from "./entity_link_builder";
 import { User } from "./user";
 import { SnackbarController } from "../hooks";
 import { UserConfigurationPersistence } from "./local_config_persistence";
 import { SideDialogsController } from "./side_dialogs_controller";
-import { FireCMSPlugin } from "./plugins";
-import { CMSAnalyticsEvent } from "./analytics";
-import { PropertyConfig } from "./property_config";
-import { EntityCustomView } from "./collections";
 import { DialogsController } from "./dialogs_controller";
+import { CustomizationController } from "./customization_controller";
+import { AnalyticsController } from "./analytics_controller";
 /**
  * Context that includes the internal controllers and contexts used by the app.
  * Some controllers and context included in this context can be accessed
@@ -56,9 +52,9 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      */
     authController: AuthControllerType;
     /**
-     * Builder for generating utility links for entities
+     * This controller holds the customization options for the CMS.
      */
-    entityLinkBuilder?: EntityLinkBuilder;
+    customizationController: CustomizationController;
     /**
      * Use this controller to display snackbars
      */
@@ -68,43 +64,7 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      */
     userConfigPersistence?: UserConfigurationPersistence;
     /**
-     * Use plugins to modify the behaviour of the CMS.
-     * Currently, in ALPHA, and likely subject to change.
+     * Callback to send analytics events
      */
-    plugins?: FireCMSPlugin[];
-    /**
-     * Callback used to get analytics events from the CMS
-     */
-    onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
-    /**
-     * Record of custom form fields to be used in the CMS.
-     * You can use the key to reference the custom field in
-     * the `propertyConfig` prop of a property in a collection.
-     */
-    propertyConfigs: Record<string, PropertyConfig>;
-    /**
-     * List of additional custom views for entities.
-     * You can use the key to reference the custom view in
-     * the `entityViews` prop of a collection.
-     *
-     * You can also define an entity view from the UI.
-     */
-    entityViews?: EntityCustomView[];
-    /**
-     * Format of the dates in the CMS.
-     * Defaults to 'MMMM dd, yyyy, HH:mm:ss'
-     */
-    dateTimeFormat?: string;
-    /**
-     * Locale of the CMS, currently only affecting dates
-     */
-    locale?: Locale;
-    components?: {
-        /**
-         * Component to render when a reference is missing
-         */
-        missingReference?: React.ComponentType<{
-            path: string;
-        }>;
-    };
+    analyticsController?: AnalyticsController;
 };

package/dist/types/index.d.ts

@@ -24,3 +24,5 @@ export * from "./firecms";
 export * from "./appcheck";
 export * from "./export_import";
 export * from "./modify_collections";
+export * from "./analytics_controller";
+export * from "./customization_controller";

package/dist/util/icons.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
 import { CMSView, EntityCollection } from "../types";
 export declare function getIcon(iconKey?: string, className?: string): React.ReactElement | undefined;
-export declare function getIconForView(collectionOrView: EntityCollection | CMSView, className?: string): React.ReactElement;
+export declare const IconForView: React.NamedExoticComponent<{
+    collectionOrView: EntityCollection | CMSView;
+    className?: string | undefined;
+}>;

package/dist/util/useTraceUpdate.d.ts

@@ -1 +1 @@
-export declare function useTraceUpdate(props: any): void;
+export declare function useTraceUpdate(props: any, maxDepth?: number): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-alpha.81",
+  "version": "3.0.0-alpha.83",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -38,7 +38,7 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-alpha.81",
+    "@firecms/ui": "^3.0.0-alpha.83",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
@@ -107,7 +107,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "ac77309580f9668647209724e1df2080d3932bef",
+  "gitHead": "96d21eb290969ee8e2cc56ca13a47834bae0ee57",
   "publishConfig": {
     "access": "public"
   }

package/src/components/DeleteEntityDialog.tsx

@@ -1,7 +1,13 @@
 import { Entity, EntityCallbacks, EntityCollection } from "../types";
 import React, { useCallback, useMemo, useState } from "react";
 import { Button, CircularProgress, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
-import { deleteEntityWithCallbacks, useDataSource, useFireCMSContext, useSnackbarController } from "../hooks";
+import {
+    deleteEntityWithCallbacks,
+    useCustomizationController,
+    useDataSource,
+    useFireCMSContext,
+    useSnackbarController
+} from "../hooks";
 import { resolveCollection } from "../util";
 import { EntityPreview } from "./EntityPreview";
 
@@ -30,7 +36,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
                                                                   }: DeleteEntityDialogProps<M>) {
 
     const dataSource = useDataSource();
-    console.log("dataSource", dataSource)
+    const customizationController = useCustomizationController();
     const snackbarController = useSnackbarController();
     const [loading, setLoading] = useState(false);
 
@@ -52,7 +58,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
         path,
-        fields: context.propertyConfigs
+        fields: customizationController.propertyConfigs
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -36,7 +36,7 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
                                                                                              unhighlightEntity,
                                                                                              actions = [],
                                                                                              hideId,
-                                                                                             selectionController
+                                                                                             selectionController,
                                                                                          }:
                                                                                              {
                                                                                                  entity: Entity<any>,

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -64,6 +64,7 @@ export const useEntityCollectionTableController = () => useContext<EntityCollect
 export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>(
     function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
     ({
+         debugKey,
          forceFilter,
          actionsStart,
          actions,
@@ -119,7 +120,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         const largeLayout = useLargeLayout();
         const disabledFilterChange = Boolean(forceFilter);
-        const selectedEntities = selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities;
+        const selectedEntities = (selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities)?.filter(Boolean);
 
         const context: FireCMSContext<UserType> = useFireCMSContext();
 
@@ -131,12 +132,12 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         const filterIsSet = !!filterValues && Object.keys(filterValues).length > 0;
 
-        const loadNextPage = () => {
+        const loadNextPage = useCallback(() => {
             if (!paginationEnabled || dataLoading || noMoreToLoad)
                 return;
             if (itemCount !== undefined)
                 setItemCount?.(itemCount + pageSize);
-        };
+        }, [dataLoading, itemCount, noMoreToLoad, pageSize, paginationEnabled, setItemCount]);
 
         useOutsideAlerter(ref,
             () => {
@@ -150,10 +151,9 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
             setItemCount?.(pageSize);
         }, [pageSize]);
 
-        const onRowClick = useCallback(({ rowData }: {
+        const onRowClickCallback = useCallback(({ rowData }: {
             rowData: Entity<M>
         }) => {
-            console.debug("EntityCollectionTable click");
             if (inlineEditing)
                 return;
             return onEntityClick && onEntityClick(rowData);
@@ -245,7 +245,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                     }
                 </ErrorBoundary>);
 
-        }, [customFieldValidator, inlineEditing, size, selectedEntityIds]);
+        }, [inlineEditing, size, selectedEntityIds]);
 
         const additionalCellRenderer = useCallback(({
                                                         column,
@@ -290,7 +290,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                 </EntityTableCell>
             );
 
-        }, [additionalFieldsMap, size, selectedEntityIds]);
+        }, [size, selectedEntityIds]);
 
         const collectionColumns: VirtualTableColumn[] = useMemo(() => {
                 const columnsResult: VirtualTableColumn[] = propertiesToColumns({
@@ -365,6 +365,31 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
             setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
         }, [forceFilter]);
 
+        // useTraceUpdate({
+        //     data,
+        //     columns,
+        //     inlineEditing,
+        //     size, selectedEntityIds, additionalCellRenderer, propertyCellRenderer,
+        //     cellRenderer,
+        //     onRowClick,
+        //     onEndReached: loadNextPage,
+        //     onResetPagination: resetPagination,
+        //     error: dataLoadingError,
+        //     paginationEnabled,
+        //     onColumnResize,
+        //     loading: dataLoading,
+        //     filter: filterValues,
+        //     onFilterUpdate,
+        //     sortBy,
+        //     onSortByUpdate: setSortBy,
+        //     hoverRow,
+        //     emptyComponent,
+        //     checkFilterCombination,
+        //     createFilterField,
+        // });
+
+        const onRowClick = inlineEditing ? undefined : (onEntityClick ? onRowClickCallback : undefined);
+
         return (
 
             <EntityCollectionTableContext.Provider
@@ -398,7 +423,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                         data={data}
                         columns={columns}
                         cellRenderer={cellRenderer}
-                        onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                        onRowClick={onRowClick}
                         onEndReached={loadNextPage}
                         onResetPagination={resetPagination}
                         error={dataLoadingError}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -3,11 +3,11 @@ import {
     AdditionalFieldDelegate,
     CollectionSize,
     Entity,
+    EntityTableController,
     FilterValues,
     ResolvedProperties,
     ResolvedProperty,
     SelectionController,
-    EntityTableController,
     User
 } from "../../types";
 import { OnCellValueChange, UniqueFieldValidator } from "./types";
@@ -21,9 +21,9 @@ export type OnColumnResizeParams = { width: number, key: string };
  * @group Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
-
     UserType extends User = User> = {
 
+    debugKey?: string;
     /**
      * Display these entities as selected
      */
@@ -105,7 +105,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     inlineEditing?: boolean | ((entity: Entity<M>) => boolean);
 
-    additionalFields?: AdditionalFieldDelegate<M,  UserType>[];
+    additionalFields?: AdditionalFieldDelegate<M, UserType>[];
 
     defaultSize?: CollectionSize;
 
@@ -119,11 +119,11 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     endAdornment?: React.ReactNode;
 
-    AdditionalHeaderWidget?: (props: {
+    AdditionalHeaderWidget?: React.ComponentType<{
         property: ResolvedProperty,
         propertyKey: string,
         onHover: boolean,
-    }) => React.ReactNode;
+    }>;
 
     AddColumnComponent?: React.ComponentType;
 

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -387,7 +387,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
                                     multiselect={true}
                                     path={arrayProperty.of.path}
                                     previewProperties={arrayProperty.of.previewProperties}
-                                    title={arrayProperty.of.name}
+                                    title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
                                 />;
                         }

package/src/components/EntityCollectionTable/SimpleEntityCollectionTable.tsx

@@ -196,7 +196,6 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
         const onRowClick = useCallback(({ rowData }: {
             rowData: Entity<M>
         }) => {
-            console.debug("EntityCollectionTable click");
             if (inlineEditing)
                 return;
             return onEntityClick && onEntityClick(rowData);
@@ -231,7 +230,6 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
             setSelectedCell(undefined);
         }, []);
 
-
         const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
             setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
         }, [forceFilter]);

package/src/components/EntityCollectionTable/column_utils.tsx

@@ -22,11 +22,11 @@ export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     sortable?: boolean;
     forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
     disabledFilter?: boolean;
-    AdditionalHeaderWidget?: (props: {
+    AdditionalHeaderWidget?: React.ComponentType<{
         property: ResolvedProperty,
         propertyKey: string,
         onHover: boolean,
-    }) => React.ReactNode;
+    }>;
 }
 
 export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forceFilter, disabledFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
@@ -43,7 +43,7 @@ export function propertiesToColumns<M extends Record<string, any>>({ properties,
             return {
                 key: key as string,
                 align: getTableCellAlignment(property),
-                icon: (hoverOrOpen) => getIconForProperty(property, "small"),
+                icon: getIconForProperty(property, "small"),
                 title: property.name ?? key as string,
                 sortable: sortable && (forceFilter ? Object.keys(forceFilter).includes(key) : true),
                 filter: !disabledFilter && filterable,