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

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -38,6 +38,7 @@ import { ReferencePreview } from "../../preview";
 import {
     saveEntityWithCallbacks,
     useAuthController,
+    useCustomizationController,
     useDataSource,
     useFireCMSContext,
     useLargeLayout,
@@ -46,7 +47,9 @@ import {
 } 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 +75,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 +128,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 +139,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 +163,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 +190,7 @@ export const EntityCollectionView = React.memo(
 
         const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
-            collection,
+            collection: collectionRef.current,
             entitiesDisplayedFirst: [],
             lastDeleteTimestamp
         });
@@ -191,8 +203,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 +216,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 +230,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 +263,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 +279,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 +344,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 +367,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 +458,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 +510,7 @@ export const EntityCollectionView = React.memo(
                             setPopOverOpen(true);
                             e.stopPropagation();
                         }
-                        : undefined}
-                >
+                        : undefined}>
                     {`${collection.name}`}
                 </Typography>
 
@@ -522,19 +531,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 +557,7 @@ export const EntityCollectionView = React.memo(
                             parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
-        }
+        }, [customizationController.plugins, fullPath, parentCollectionIds]);
 
         const addColumnComponentInternal = AddColumnComponent
             ? function () {
@@ -562,13 +572,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 +590,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,17 +685,36 @@ 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>(
+    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void
+): SelectionController<M> {
 
     const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);
 
     const toggleEntitySelection = useCallback((entity: Entity<M>) => {
         let newValue;
         if (selectedEntities.map(e => e.id).includes(entity.id)) {
+            onSelectionChange?.(entity, false);
             newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
         } else {
+            onSelectionChange?.(entity, true);
             newValue = [...selectedEntities, entity];
         }
         setSelectedEntities(newValue);

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { canCreateEntity, canDeleteEntity, fullPathToCollectionSegments } from "../../util";
-import { useAuthController, useFireCMSContext, useLargeLayout } from "../../hooks";
-import { CollectionActionsProps, EntityCollection, SelectionController, EntityTableController } from "../../types";
+import { useAuthController, useCustomizationController, useFireCMSContext, useLargeLayout } from "../../hooks";
+import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
 import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
 import { toArray } from "../../util/arrays";
 import { ErrorBoundary } from "../ErrorBoundary";
@@ -34,7 +34,9 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                                                                            }: EntityCollectionViewActionsProps<M>) {
 
     const context = useFireCMSContext();
-    const plugins = context.plugins ?? [];
+
+    const customizationController = useCustomizationController();
+    const plugins = customizationController.plugins ?? [];
 
     const authController = useAuthController();
 

package/src/components/EntityPreview.tsx

@@ -1,9 +1,11 @@
 import React, { useMemo } from "react";
 import { PropertyPreview } from "../preview";
-import { Entity, EntityCollection, FireCMSContext, ResolvedEntityCollection, ResolvedProperties } from "../types";
+import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
 import { resolveCollection } from "../util";
 import { useFireCMSContext } from "../hooks";
 import { cn, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { CustomizationController } from "../types/customization_controller";
+import { useCustomizationController } from "../hooks/useCustomizationController";
 
 /**
  * @group Components
@@ -23,17 +25,15 @@ export function EntityPreview<M extends Record<string, any>>(
         className
     }: EntityPreviewProps<M>) {
 
-    const context = useFireCMSContext();
+    const customizationController: CustomizationController = useCustomizationController();
     const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
         collection,
         path,
         entityId: entity.id,
         values: entity.values,
-        fields: context.propertyConfigs
+        fields: customizationController.propertyConfigs
     }), [collection, path, entity]);
 
-    const appConfig: FireCMSContext | undefined = useFireCMSContext();
-
     const properties: ResolvedProperties = resolvedCollection.properties;
 
     return (
@@ -43,10 +43,11 @@ export function EntityPreview<M extends Record<string, any>>(
                     <div className="flex items-center w-1/4">
                         <span className="pl-2 text-sm text-gray-600">Id</span>
                     </div>
-                    <div className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                    <div
+                        className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
                         <span className="flex-grow mr-2">{entity.id}</span>
-                        {appConfig?.entityLinkBuilder &&
-                            <a href={appConfig.entityLinkBuilder({ entity })}
+                        {customizationController?.entityLinkBuilder &&
+                            <a href={customizationController.entityLinkBuilder({ entity })}
                                rel="noopener noreferrer"
                                target="_blank">
                                 <IconButton>
@@ -66,7 +67,8 @@ export function EntityPreview<M extends Record<string, any>>(
                                 <div className="flex items-center w-1/4">
                                     <span className="pl-2 text-sm text-gray-600">{property.name}</span>
                                 </div>
-                                <div className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                                <div
+                                    className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={value}

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 
-import { useFireCMSContext, useNavigationController } from "../../hooks";
+import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
 import { PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
 
 import { toArray } from "../../util/arrays";
@@ -46,6 +46,7 @@ export function DefaultHomePage({
 }) {
 
     const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
 
     if (!navigationController.topLevelNavigation)
@@ -90,12 +91,12 @@ export function DefaultHomePage({
     let additionalPluginChildrenStart: React.ReactNode | undefined;
     let additionalPluginChildrenEnd: React.ReactNode | undefined;
     let additionalPluginSections: React.ReactNode | undefined;
-    if (context.plugins) {
+    if (customizationController.plugins) {
         const sectionProps: PluginGenericProps = {
             context
         };
         additionalPluginSections = <>
-            {context.plugins.filter(plugin => plugin.homePage?.includeSection)
+            {customizationController.plugins.filter(plugin => plugin.homePage?.includeSection)
                 .map((plugin, i) => {
                     const section = plugin.homePage!.includeSection!(sectionProps)
                     return (
@@ -108,14 +109,14 @@ export function DefaultHomePage({
                 })}
         </>;
         additionalPluginChildrenStart = <div className={"flex flex-col gap-2"}>
-            {context.plugins.filter(plugin => plugin.homePage?.additionalChildrenStart)
+            {customizationController.plugins.filter(plugin => plugin.homePage?.additionalChildrenStart)
                 .map((plugin, i) => {
                     return <div key={`plugin_children_start_${i}`}>{plugin.homePage!.additionalChildrenStart}</div>;
                 })}
         </div>;
 
         additionalPluginChildrenEnd = <div className={"flex flex-col gap-2"}>
-            {context.plugins.filter(plugin => plugin.homePage?.additionalChildrenEnd)
+            {customizationController.plugins.filter(plugin => plugin.homePage?.additionalChildrenEnd)
                 .map((plugin, i) => {
                     return <div key={`plugin_children_start_${i}`}>{plugin.homePage!.additionalChildrenEnd}</div>;
                 })}
@@ -152,8 +153,8 @@ export function DefaultHomePage({
                         context
                     };
 
-                    if (context.plugins) {
-                        context.plugins.forEach(plugin => {
+                    if (customizationController.plugins) {
+                        customizationController.plugins.forEach(plugin => {
                             if (plugin.homePage?.AdditionalCards) {
                                 AdditionalCards.push(...toArray(plugin.homePage?.AdditionalCards));
                             }
@@ -181,7 +182,7 @@ export function DefaultHomePage({
                                                         : entry.type === "view"
                                                             ? "home_navigate_to_view"
                                                             : "unmapped_event";
-                                                context.onAnalyticsEvent?.(event, { path: entry.path });
+                                                context.analyticsController?.onAnalyticsEvent?.(event, { path: entry.path });
                                             }}
                                         />
                                     </div>

package/src/components/HomePage/NavigationCollectionCard.tsx

@@ -1,8 +1,8 @@
 import { useNavigate } from "react-router-dom";
 
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController, useFireCMSContext } from "../../hooks";
 import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
-import { getIconForView } from "../../util";
+import { IconForView } from "../../util";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { ArrowForwardIcon, Card, cn, IconButton, Markdown, StarBorderIcon, StarIcon, Typography } from "@firecms/ui";
 
@@ -32,22 +32,23 @@ export function NavigationCollectionCard({
 }) {
 
     const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = getIconForView(collection ?? view);
+    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
 
     const navigate = useNavigate();
     const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
 
     const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
 
     let actions: React.ReactNode | undefined;
-    if (context.plugins && collection) {
+    if (customizationController.plugins && collection) {
         const actionProps: PluginHomePageActionsProps = {
             path,
             collection,
             context
         };
         actions = <>
-            {context.plugins.map((plugin, i) => (
+            {customizationController.plugins.map((plugin, i) => (
                 plugin.homePage?.CollectionActions
                     ? <plugin.homePage.CollectionActions
                         key={`actions_${i}`}

package/src/components/ReferenceSelectionInner.tsx

@@ -5,8 +5,8 @@ import { EntityCollectionTable } from "./EntityCollectionTable";
 import { EntityCollectionRowActions } from "./EntityCollectionTable/EntityCollectionRowActions";
 import {
     useAuthController,
+    useCustomizationController,
     useDataSource,
-    useFireCMSContext,
     useLargeLayout,
     useNavigationController,
     useSideEntityController
@@ -15,9 +15,12 @@ import { ErrorView } from "./ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
 import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../util";
 import { useSelectionController } from "./EntityCollectionView/EntityCollectionView";
-import { useDataSourceEntityCollectionTableController } from "./EntityCollectionTable/useDataSourceEntityCollectionTableController";
+import {
+    useDataSourceEntityCollectionTableController
+} from "./EntityCollectionTable/useDataSourceEntityCollectionTableController";
 import { useColumnIds } from "./EntityCollectionView/useColumnsIds";
 import { useSideDialogContext } from "../core";
+import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 /**
  * @group Components
@@ -101,7 +104,8 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const navigation = useNavigationController();
-    const context = useFireCMSContext();
+    const analyticsController = useAnalyticsController();
+    const customizationController = useCustomizationController();
 
     const fullPath = navigation.resolveAliasesFrom(pathInput);
 
@@ -109,7 +113,31 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
 
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
 
-    const selectionController = useSelectionController();
+    const toggleEntitySelection = (entity: Entity<any>) => {
+        let newValue;
+        const selectedEntities = selectionController.selectedEntities;
+
+        analyticsController.onAnalyticsEvent?.("reference_selection_toggle", {
+            path: fullPath,
+            entityId: entity.id
+        });
+        if (selectedEntities) {
+
+            if (selectedEntities.map((e) => e.id).indexOf(entity.id) > -1) {
+                newValue = selectedEntities.filter((item: Entity<any>) => item.id !== entity.id);
+            } else {
+                if (maxSelection && selectedEntities.length >= maxSelection)
+                    return;
+                newValue = [...selectedEntities, entity];
+            }
+            selectionController.setSelectedEntities(newValue);
+
+            if (onMultipleEntitiesSelected)
+                onMultipleEntitiesSelected(newValue);
+        }
+    };
+
+    const selectionController = useSelectionController(toggleEntitySelection);
 
     /**
      * Fetch initially selected ids
@@ -142,7 +170,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
     }, [dataSource, fullPath, selectedEntityIdsProp, collection, selectionController.setSelectedEntities]);
 
     const onClear = () => {
-        context.onAnalyticsEvent?.("reference_selection_clear", {
+        analyticsController.onAnalyticsEvent?.("reference_selection_clear", {
             path: fullPath
         });
         selectionController.setSelectedEntities([]);
@@ -153,36 +181,9 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         }
     };
 
-    const toggleEntitySelection = (entity: Entity<any>) => {
-        console.debug("ReferenceSelectionInner toggleEntitySelection", entity);
-        let newValue;
-        const selectedEntities = selectionController.selectedEntities;
-
-        context.onAnalyticsEvent?.("reference_selection_toggle", {
-            path: fullPath,
-            entityId: entity.id
-        });
-        if (selectedEntities) {
-
-            if (selectedEntities.map((e) => e.id).indexOf(entity.id) > -1) {
-                newValue = selectedEntities.filter((item: Entity<any>) => item.id !== entity.id);
-            } else {
-                if (maxSelection && selectedEntities.length >= maxSelection)
-                    return;
-                newValue = [...selectedEntities, entity];
-            }
-            selectionController.setSelectedEntities(newValue);
-
-            if (onMultipleEntitiesSelected)
-                onMultipleEntitiesSelected(newValue);
-        }
-    };
-
     const onEntityClick = (entity: Entity<any>) => {
-        console.debug("ReferenceSelectionInner onEntityClick", entity);
-
         if (!multiselect && onSingleEntitySelected) {
-            context.onAnalyticsEvent?.("reference_selected_single", {
+            analyticsController.onAnalyticsEvent?.("reference_selected_single", {
                 path: fullPath,
                 entityId: entity.id
             });
@@ -195,7 +196,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
 
     // create a new entity from within the reference dialog
     const onNewClick = () => {
-        context.onAnalyticsEvent?.("reference_selection_new_entity", {
+        analyticsController.onAnalyticsEvent?.("reference_selection_new_entity", {
             path: fullPath
         });
         sideEntityController.open({
@@ -251,8 +252,8 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         collection: collection,
         path: fullPath,
         values: {},
-        fields: context.propertyConfigs
-    }), [collection, context.propertyConfigs, fullPath]);
+        fields: customizationController.propertyConfigs
+    }), [collection, customizationController.propertyConfigs, fullPath]);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
@@ -272,6 +273,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
             <div className="flex-grow">
                 {entitiesDisplayedFirst &&
                     <EntityCollectionTable
+                        debugKey={"reference_selection_table"}
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}