@firecms/core 3.0.0-alpha.80 → 3.0.0-alpha.82

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

@@ -1,10 +1,12 @@
 import React, { useCallback, useState } from "react";
+import equal from "react-fast-compare"
+
 import { ReferencePreview, ReferencePreviewContainer } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
 import { getReferenceFrom } from "../../../util";
-import { useFireCMSContext, useNavigationController, useReferenceDialog } from "../../../hooks";
+import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
 import { Button } from "@firecms/ui";
 
@@ -22,14 +24,14 @@ type TableReferenceFieldProps = {
 };
 
 export function TableReferenceField(props: TableReferenceFieldProps) {
+    const customizationController = useCustomizationController();
 
-    const context = useFireCMSContext();
     const navigationController = useNavigationController();
     const { path } = props;
     const collection = navigationController.getCollection<EntityCollection>(path);
     if (!collection) {
-        if (context.components?.missingReference) {
-            return <context.components.missingReference path={path}/>;
+        if (customizationController.components?.missingReference) {
+            return <customizationController.components.missingReference path={path}/>;
         } else {
             throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
         }
@@ -37,123 +39,124 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
     return <TableReferenceFieldSuccess {...props} collection={collection}/>;
 }
 
-function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
-    collection: EntityCollection;
-}) {
-    const {
-        name,
-        internalValue,
-        updateValue,
-        multiselect,
-        path,
-        size,
-        previewProperties,
-        title,
-        disabled,
-        forceFilter,
-        collection
-    } = props;
-
-    const [onHover, setOnHover] = useState(false);
-
-    const hoverTrue = useCallback(() => setOnHover(true), []);
-    const hoverFalse = useCallback(() => setOnHover(false), []);
-
-    const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
-        updateValue(entity ? getReferenceFrom(entity) : null);
-    }, [updateValue]);
-
-    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-        updateValue(entities.map((e) => getReferenceFrom(e)));
-    }, [updateValue]);
-
-    const selectedEntityIds = internalValue
-        ? (Array.isArray(internalValue)
-            ? internalValue.map((ref) => ref.id)
-            : internalValue.id ? [internalValue.id] : [])
-        : [];
-
-    const referenceDialogController = useReferenceDialog({
+export const TableReferenceFieldSuccess = React.memo(
+    function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
+        collection: EntityCollection;
+    }) {
+        const {
+            name,
+            internalValue,
+            updateValue,
             multiselect,
             path,
-            collection,
-            onMultipleEntitiesSelected,
-            onSingleEntitySelected,
-            selectedEntityIds,
-            forceFilter
-        }
-    );
-
-    const handleOpen = useCallback(() => {
-        if (disabled)
-            return;
-        referenceDialogController.open();
-    }, [disabled, referenceDialogController]);
-
-    const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
-
-    const buildSingleReferenceField = () => {
-        if (internalValue instanceof EntityReference)
-            return <ReferencePreview
-                onClick={disabled ? undefined : handleOpen}
-                size={getPreviewSizeFrom(size)}
-                reference={internalValue as EntityReference}
-                onHover={onHover}
-                disabled={!path}
-                previewProperties={previewProperties}
-            />;
-        else
-            return <ReferencePreviewContainer
-                onClick={disabled ? undefined : handleOpen}
-                size={getPreviewSizeFrom(size)}>
-                <ErrorView title="Value is not a reference." error={"Click to edit"}/>
-            </ReferencePreviewContainer>;
-    };
-
-    const buildMultipleReferenceField = () => {
-        if (Array.isArray(internalValue))
-            return <>
-                {internalValue.map((reference, index) =>
-                    <div className="m-1 w-full"
-                         key={`preview_array_ref_${name}_${index}`}>
-                        <ReferencePreview
-                            onClick={disabled ? undefined : handleOpen}
-                            size={"tiny"}
-                            reference={reference}
-                            onHover={onHover}
-                            disabled={!path}
-                            previewProperties={previewProperties}
-                        />
-                    </div>
-                )
-                }
-            </>;
-        else
-            return <ErrorView error={"Data is not an array of references"}/>;
-    };
-
-    if (!collection)
-        return <ErrorView error={"The specified collection does not exist"}/>;
-
-    return (
-        <div className="w-full"
-             onMouseEnter={hoverTrue}
-             onMouseMove={hoverTrue}
-             onMouseLeave={hoverFalse}>
-
-            {internalValue && !multiselect && buildSingleReferenceField()}
-
-            {internalValue && multiselect && buildMultipleReferenceField()}
-
-            {valueNotSet &&
-                <Button
-                    onClick={handleOpen}
-                    size={"small"}
-                    variant="outlined"
-                    color="primary">
-                    Edit {title}
-                </Button>}
-
-        </div>
-    );
-}
+            size,
+            previewProperties,
+            title,
+            disabled,
+            forceFilter,
+            collection
+        } = props;
+
+        const [onHover, setOnHover] = useState(false);
+
+        const hoverTrue = useCallback(() => setOnHover(true), []);
+        const hoverFalse = useCallback(() => setOnHover(false), []);
+
+        const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
+            updateValue(entity ? getReferenceFrom(entity) : null);
+        }, [updateValue]);
+
+        const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+            updateValue(entities.map((e) => getReferenceFrom(e)));
+        }, [updateValue]);
+
+        const selectedEntityIds = internalValue
+            ? (Array.isArray(internalValue)
+                ? internalValue.map((ref) => ref.id)
+                : internalValue.id ? [internalValue.id] : [])
+            : [];
+
+        const referenceDialogController = useReferenceDialog({
+                multiselect,
+                path,
+                collection,
+                onMultipleEntitiesSelected,
+                onSingleEntitySelected,
+                selectedEntityIds,
+                forceFilter
+            }
+        );
+
+        const handleOpen = useCallback(() => {
+            if (disabled)
+                return;
+            referenceDialogController.open();
+        }, [disabled, referenceDialogController]);
+
+        const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
+
+        const buildSingleReferenceField = () => {
+            if (internalValue instanceof EntityReference)
+                return <ReferencePreview
+                    onClick={disabled ? undefined : handleOpen}
+                    size={getPreviewSizeFrom(size)}
+                    reference={internalValue as EntityReference}
+                    onHover={onHover}
+                    disabled={!path}
+                    previewProperties={previewProperties}
+                />;
+            else
+                return <ReferencePreviewContainer
+                    onClick={disabled ? undefined : handleOpen}
+                    size={getPreviewSizeFrom(size)}>
+                    <ErrorView title="Value is not a reference." error={"Click to edit"}/>
+                </ReferencePreviewContainer>;
+        };
+
+        const buildMultipleReferenceField = () => {
+            if (Array.isArray(internalValue))
+                return <>
+                    {internalValue.map((reference, index) =>
+                        <div className="m-1 w-full"
+                             key={`preview_array_ref_${name}_${index}`}>
+                            <ReferencePreview
+                                onClick={disabled ? undefined : handleOpen}
+                                size={"tiny"}
+                                reference={reference}
+                                onHover={onHover}
+                                disabled={!path}
+                                previewProperties={previewProperties}
+                            />
+                        </div>
+                    )
+                    }
+                </>;
+            else
+                return <ErrorView error={"Data is not an array of references"}/>;
+        };
+
+        if (!collection)
+            return <ErrorView error={"The specified collection does not exist"}/>;
+
+        return (
+            <div className="w-full"
+                 onMouseEnter={hoverTrue}
+                 onMouseMove={hoverTrue}
+                 onMouseLeave={hoverFalse}>
+
+                {internalValue && !multiselect && buildSingleReferenceField()}
+
+                {internalValue && multiselect && buildMultipleReferenceField()}
+
+                {valueNotSet &&
+                    <Button
+                        onClick={handleOpen}
+                        size={"small"}
+                        variant="outlined"
+                        color="primary">
+                        Edit {title}
+                    </Button>}
+
+            </div>
+        );
+    }, equal);

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
 import { DateTimeField, Select, SelectItem } from "@firecms/ui";
-import { useFireCMSContext } from "../../../hooks";
+import { useCustomizationController } from "../../../hooks";
 
 interface DateTimeFilterFieldProps {
     name: string,
@@ -36,7 +36,7 @@ export function DateTimeFilterField({
                                         title
                                     }: DateTimeFilterFieldProps) {
 
-    const { locale } = useFireCMSContext();
+    const { locale } = useCustomizationController();
     const possibleOperations: (keyof typeof operationLabels) [] = isArray
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];

package/src/components/EntityCollectionTable/internal/default_entity_actions.tsx

@@ -14,7 +14,7 @@ export const editEntityAction: EntityAction = {
                 unhighlightEntity
             }): Promise<void> {
         highlightEntity?.(entity);
-        context.onAnalyticsEvent?.("entity_click", {
+        context.analyticsController?.onAnalyticsEvent?.("entity_click", {
             path: entity.path,
             entityId: entity.id
         });
@@ -40,7 +40,7 @@ export const copyEntityAction: EntityAction = {
                 unhighlightEntity
             }): Promise<void> {
         highlightEntity?.(entity);
-        context.onAnalyticsEvent?.("copy_entity_click", {
+        context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
             path: entity.path,
             entityId: entity.id
         });
@@ -107,7 +107,7 @@ export const deleteEntityAction: EntityAction = {
                     callbacks={collection.callbacks}
                     open={open}
                     onEntityDelete={() => {
-                        context.onAnalyticsEvent?.("single_entity_deleted", {
+                        context.analyticsController?.onAnalyticsEvent?.("single_entity_deleted", {
                             path: fullPath
                         });
                         selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -23,7 +23,7 @@ import { ErrorView, OnCellValueChangeParams } from "../../../../components";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding } from "../../../../form";
-import { useDataSource, useFireCMSContext } from "../../../../hooks";
+import { useCustomizationController, useFireCMSContext } from "../../../../hooks";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
     entity?: Entity<M>;
@@ -65,6 +65,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     // const dataSource = useDataSource();
     const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
 
     const [savingError, setSavingError] = React.useState<any>();
     const [popupLocation, setPopupLocation] = useState<{
@@ -99,7 +100,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             path,
             values: internalValue,
             entityId,
-            fields: fireCMSContext.propertyConfigs
+            fields: customizationController.propertyConfigs
         })
         : undefined;
 
@@ -315,7 +316,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                         </div>
                     </>;
 
-                    const plugins = fireCMSContext.plugins;
+                    const plugins = customizationController.plugins;
                     if (plugins) {
                         // const formController: FormContext<M> = {
                         //     values,

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -38,15 +38,17 @@ import { ReferencePreview } from "../../preview";
 import {
     saveEntityWithCallbacks,
     useAuthController,
-    useDataSource,
-    useFireCMSContext,
+    useCustomizationController,
+    useDataSource, useFireCMSContext,
     useLargeLayout,
     useNavigationController,
     useSideEntityController
 } from "../../hooks";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
-import { useDataSourceEntityCollectionTableController } from "../EntityCollectionTable/useDataSourceEntityCollectionTableController";
+import {
+    useDataSourceEntityCollectionTableController
+} from "../EntityCollectionTable/useDataSourceEntityCollectionTableController";
 import {
     AddIcon,
     Button,
@@ -72,6 +74,7 @@ import {
     editEntityAction
 } from "../EntityCollectionTable/internal/default_entity_actions";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
+import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 
 const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
@@ -124,6 +127,8 @@ export const EntityCollectionView = React.memo(
         const sideEntityController = useSideEntityController();
         const authController = useAuthController();
         const userConfigPersistence = useUserConfigurationPersistence();
+        const analyticsController = useAnalyticsController();
+        const customizationController = useCustomizationController();
         const context = useFireCMSContext();
 
         const containerRef = React.useRef<HTMLDivElement>(null);
@@ -133,6 +138,11 @@ export const EntityCollectionView = React.memo(
             return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
         }, [collectionProp, fullPath, userConfigPersistence?.getCollectionConfig]);
 
+        const collectionRef = React.useRef(collection);
+        useEffect(() => {
+            collectionRef.current = collection;
+        }, [collection]);
+
         const canCreateEntities = canCreateEntity(collection, authController, fullPathToCollectionSegments(fullPath), null);
         const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
@@ -152,11 +162,12 @@ export const EntityCollectionView = React.memo(
         }, [selectedNavigationEntity]);
 
         const checkInlineEditing = useCallback((entity?: Entity<any>): boolean => {
+            const collection = collectionRef.current;
             if (!canEditEntity(collection, authController, fullPathToCollectionSegments(fullPath), entity ?? null)) {
                 return false;
             }
             return collection.inlineEditing === undefined || collection.inlineEditing;
-        }, [collection, authController, fullPath]);
+        }, [authController, fullPath]);
 
         const selectionEnabled = collection.selectionEnabled === undefined || collection.selectionEnabled;
         const hoverRow = !checkInlineEditing();
@@ -178,7 +189,7 @@ export const EntityCollectionView = React.memo(
 
         const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
-            collection,
+            collection: collectionRef.current,
             entitiesDisplayedFirst: [],
             lastDeleteTimestamp
         });
@@ -191,8 +202,9 @@ export const EntityCollectionView = React.memo(
         }, [tableController.setPopupCell]);
 
         const onEntityClick = useCallback((clickedEntity: Entity<M>) => {
+            const collection = collectionRef.current;
             setSelectedNavigationEntity(clickedEntity);
-            context.onAnalyticsEvent?.("edit_entity_clicked", {
+            analyticsController.onAnalyticsEvent?.("edit_entity_clicked", {
                 path: clickedEntity.path,
                 entityId: clickedEntity.id
             });
@@ -203,10 +215,12 @@ export const EntityCollectionView = React.memo(
                 updateUrl: true,
                 onClose: unselectNavigatedEntity
             });
-        }, [fullPath, collection, sideEntityController]);
+        }, [unselectNavigatedEntity]);
 
         const onNewClick = useCallback(() => {
-            context.onAnalyticsEvent?.("new_entity_click", {
+
+            const collection = collectionRef.current;
+            analyticsController.onAnalyticsEvent?.("new_entity_click", {
                 path: fullPath
             });
             sideEntityController.open({
@@ -215,38 +229,31 @@ export const EntityCollectionView = React.memo(
                 updateUrl: true,
                 onClose: unselectNavigatedEntity
             });
-        }, [fullPath, collection, sideEntityController]);
-
-        const onSingleDeleteClick = useCallback((selectedEntity: Entity<any>) => {
-            context.onAnalyticsEvent?.("single_delete_dialog_open", {
-                path: fullPath
-            });
-            setDeleteEntityClicked(selectedEntity);
-        }, [context, fullPath]);
+        }, [fullPath]);
 
-        const onMultipleDeleteClick = useCallback(() => {
-            context.onAnalyticsEvent?.("multiple_delete_dialog_open", {
+        const onMultipleDeleteClick = () => {
+            analyticsController.onAnalyticsEvent?.("multiple_delete_dialog_open", {
                 path: fullPath
             });
             setDeleteEntityClicked(selectedEntities);
-        }, [context, fullPath, selectedEntities]);
+        };
 
-        const internalOnEntityDelete = useCallback((_path: string, entity: Entity<M>) => {
-            context.onAnalyticsEvent?.("single_entity_deleted", {
+        const internalOnEntityDelete = (_path: string, entity: Entity<M>) => {
+            analyticsController.onAnalyticsEvent?.("single_entity_deleted", {
                 path: fullPath
             });
             setSelectedEntities((selectedEntities) => selectedEntities.filter((e) => e.id !== entity.id));
             setLastDeleteTimestamp(Date.now());
-        }, [context, fullPath, setSelectedEntities]);
+        };
 
-        const internalOnMultipleEntitiesDelete = useCallback((_path: string, entities: Entity<M>[]) => {
-            context.onAnalyticsEvent?.("multiple_entities_deleted", {
+        const internalOnMultipleEntitiesDelete = (_path: string, entities: Entity<M>[]) => {
+            analyticsController.onAnalyticsEvent?.("multiple_entities_deleted", {
                 path: fullPath
             });
             setSelectedEntities([]);
             setDeleteEntityClicked(undefined);
             setLastDeleteTimestamp(Date.now());
-        }, [setSelectedEntities]);
+        };
 
         let AddColumnComponent: React.ComponentType<{
             fullPath: string,
@@ -255,8 +262,8 @@ export const EntityCollectionView = React.memo(
         }> | undefined
 
         // we are only using the first plugin that implements this
-        if (context?.plugins) {
-            AddColumnComponent = context.plugins.find(plugin => plugin.collectionView?.AddColumnComponent)?.collectionView?.AddColumnComponent;
+        if (customizationController?.plugins) {
+            AddColumnComponent = customizationController.plugins.find(plugin => plugin.collectionView?.AddColumnComponent)?.collectionView?.AddColumnComponent;
         }
 
         const onCollectionModifiedForUser = useCallback((path: string, partialCollection: PartialEntityCollection<M>) => {
@@ -271,11 +278,13 @@ export const EntityCollectionView = React.memo(
                                                 width,
                                                 key
                                             }: OnColumnResizeParams) => {
+
+            const collection = collectionRef.current;
             // Only for property columns
             if (!getPropertyInPath(collection.properties, key)) return;
             const localCollection = buildPropertyWidthOverwrite(key, width);
             onCollectionModifiedForUser(fullPath, localCollection);
-        }, [collection, onCollectionModifiedForUser, fullPath]);
+        }, [onCollectionModifiedForUser, fullPath]);
 
         const onSizeChanged = useCallback((size: CollectionSize) => {
             if (userConfigPersistence)
@@ -334,7 +343,7 @@ export const EntityCollectionView = React.memo(
         const resolvedCollection = useMemo(() => resolveCollection<M>({
             collection,
             path: fullPath,
-            fields: context.propertyConfigs
+            fields: customizationController.propertyConfigs
         }), [collection, fullPath]);
 
         const getPropertyFor = useCallback(({
@@ -357,9 +366,9 @@ export const EntityCollectionView = React.memo(
                 propertyValue,
                 values: entity.values,
                 entityId: entity.id,
-                fields: context.propertyConfigs
+                fields: customizationController.propertyConfigs
             });
-        }, [collection.properties, context.propertyConfigs, fullPath, resolvedCollection.properties]);
+        }, [collection.properties, customizationController.propertyConfigs, fullPath, resolvedCollection.properties]);
 
         const displayedColumnIds = useColumnIds(resolvedCollection, true);
 
@@ -448,7 +457,7 @@ export const EntityCollectionView = React.memo(
             const uncollapsedActions = entityActions.filter(a => a.collapsed === false);
             const actionsWidth = uncollapsedActions.length * (largeLayout ? 40 : 30);
             return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
-        }, [largeLayout, getActionsForEntity]);
+        }, [largeLayout]);
 
         const tableRowActionsBuilder = useCallback(({
                                                         entity,
@@ -500,8 +509,7 @@ export const EntityCollectionView = React.memo(
                             setPopOverOpen(true);
                             e.stopPropagation();
                         }
-                        : undefined}
-                >
+                        : undefined}>
                     {`${collection.name}`}
                 </Typography>
 
@@ -522,19 +530,20 @@ export const EntityCollectionView = React.memo(
 
         </Popover>;
 
-        function buildAdditionalHeaderWidget({
-                                                 property,
-                                                 propertyKey,
-                                                 onHover
-                                             }: {
+        const buildAdditionalHeaderWidget = useCallback(({
+                                                             property,
+                                                             propertyKey,
+                                                             onHover
+                                                         }: {
             property: ResolvedProperty,
             propertyKey: string,
             onHover: boolean
-        }) {
-            if (!context.plugins)
+        }) => {
+            const collection = collectionRef.current;
+            if (!customizationController.plugins)
                 return null;
             return <>
-                {context.plugins.filter(plugin => plugin.collectionView?.HeaderAction)
+                {customizationController.plugins.filter(plugin => plugin.collectionView?.HeaderAction)
                     .map((plugin, i) => {
                         const HeaderAction = plugin.collectionView!.HeaderAction!;
                         return <HeaderAction
@@ -547,7 +556,7 @@ export const EntityCollectionView = React.memo(
                             parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
-        }
+        }, [customizationController.plugins, fullPath, parentCollectionIds]);
 
         const addColumnComponentInternal = AddColumnComponent
             ? function () {
@@ -562,13 +571,13 @@ export const EntityCollectionView = React.memo(
         const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
         let onTextSearchClick: (() => void) | undefined;
         let textSearchEnabled = Boolean(collection.textSearchEnabled);
-        if (context?.plugins) {
-            const addTextSearchClickListener = context.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+        if (customizationController?.plugins) {
+            const addTextSearchClickListener = customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
 
             onTextSearchClick = addTextSearchClickListener
                 ? () => {
                     setTextSearchLoading(true);
-                    Promise.all(context.plugins?.map(p => {
+                    Promise.all(customizationController.plugins?.map(p => {
                         if (p.collectionView?.onTextSearchClick)
                             return p.collectionView.onTextSearchClick({ context, path: resolvedFullPath, collection, parentCollectionIds });
                         return Promise.resolve(true);
@@ -580,7 +589,7 @@ export const EntityCollectionView = React.memo(
                 }
                 : undefined;
 
-            context.plugins?.forEach(p => {
+            customizationController.plugins?.forEach(p => {
                 if (!textSearchEnabled)
                     if (p.collectionView?.showTextSearchBar) {
                         textSearchEnabled = p.collectionView.showTextSearchBar({ context, path: resolvedFullPath, collection, parentCollectionIds });
@@ -675,9 +684,24 @@ export const EntityCollectionView = React.memo(
 
             </div>
         );
-    }, equal) as React.FunctionComponent<EntityCollectionViewProps<any>>
-
-export function useSelectionController<M extends Record<string, any>>(): SelectionController<M> {
+    }, (a, b) => {
+        return equal(a.fullPath, b.fullPath) &&
+            equal(a.parentCollectionIds, b.parentCollectionIds) &&
+            equal(a.isSubCollection, b.isSubCollection) &&
+            equal(a.className, b.className) &&
+            equal(a.properties, b.properties) &&
+            equal(a.hideIdFromCollection, b.hideIdFromCollection) &&
+            equal(a.inlineEditing, b.inlineEditing) &&
+            equal(a.selectionEnabled, b.selectionEnabled) &&
+            equal(a.selectionController, b.selectionController) &&
+            equal(a.Actions, b.Actions) &&
+            equal(a.defaultSize, b.defaultSize) &&
+            equal(a.textSearchEnabled, b.textSearchEnabled) &&
+            equal(a.additionalFields, b.additionalFields) &&
+            equal(a.forceFilter, b.forceFilter);
+    }) as React.FunctionComponent<EntityCollectionViewProps<any>>
+
+export function useSelectionController<M extends Record<string, any> = any>(): SelectionController<M> {
 
     const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);