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

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
@@ -29,10 +31,10 @@ export function EntityPreview<M extends Record<string, any>>(
         path,
         entityId: entity.id,
         values: entity.values,
-        fields: context.propertyConfigs
+        fields: customizationController.propertyConfigs
     }), [collection, path, entity]);
 
-    const appConfig: FireCMSContext | undefined = useFireCMSContext();
+    const customizationController: CustomizationController = useCustomizationController();
 
     const properties: ResolvedProperties = resolvedCollection.properties;
 
@@ -43,10 +45,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 +69,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);
 
@@ -142,7 +146,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([]);
@@ -158,7 +162,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         let newValue;
         const selectedEntities = selectionController.selectedEntities;
 
-        context.onAnalyticsEvent?.("reference_selection_toggle", {
+        analyticsController.onAnalyticsEvent?.("reference_selection_toggle", {
             path: fullPath,
             entityId: entity.id
         });
@@ -182,7 +186,7 @@ export function ReferenceSelectionInner<M extends Record<string, 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 +199,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 +255,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);

package/src/components/VirtualTable/VirtualTable.tsx

@@ -257,31 +257,34 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error ? buildErrorView() : (empty ? buildEmptyView() : undefined);
 
+        const virtualListController = {
+            data,
+            size,
+            cellRenderer,
+            columns,
+            currentSort,
+            onRowClick,
+            customView,
+            onColumnResize: onColumnResizeInternal,
+            onColumnResizeEnd: onColumnResizeEndInternal,
+            filter: filterRef.current,
+            onColumnSort,
+            onFilterUpdate: onFilterUpdateInternal,
+            sortByProperty,
+            hoverRow: hoverRow ?? false,
+            createFilterField,
+            rowClassName,
+            endAdornment,
+            AddColumnComponent
+        };
+
+        // useTraceUpdate(virtualListController);
         return (
             <div
                 ref={measureRef}
                 className={cn("h-full w-full", className)}>
                 <VirtualListContext.Provider
-                    value={{
-                        data,
-                        size,
-                        cellRenderer,
-                        columns,
-                        currentSort,
-                        onRowClick,
-                        customView,
-                        onColumnResize: onColumnResizeInternal,
-                        onColumnResizeEnd: onColumnResizeEndInternal,
-                        filter: filterRef.current,
-                        onColumnSort,
-                        onFilterUpdate: onFilterUpdateInternal,
-                        sortByProperty,
-                        hoverRow: hoverRow ?? false,
-                        createFilterField,
-                        rowClassName,
-                        endAdornment,
-                        AddColumnComponent
-                    }}>
+                    value={virtualListController}>
 
                     <MemoizedList
                         outerRef={tableRef}

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -17,16 +17,34 @@ type VirtualTableCellProps<T extends any> = {
 
 export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
     function VirtualTableCell<T extends any>(props: VirtualTableCellProps<T>) {
-        return props.rowData && <props.cellRenderer
-            rowData={props.rowData}
-            rowIndex={props.rowIndex}
-            isScrolling={false}
-            column={props.column}
-            columns={props.columns}
-            columnIndex={props.columnIndex}
-            width={props.column.width}/>
+        // @ts-ignore
+        return props.rowData && props.cellRenderer(
+            {
+                cellData: props.cellData,
+                rowData: props.rowData,
+                rowIndex: props.rowIndex,
+                isScrolling: false,
+                column: props.column,
+                columns: props.columns,
+                columnIndex: props.columnIndex,
+                width: props.column.width
+            } as CellRendererParams<T>
+        );
+        // return props.rowData && <props.cellRenderer
+        //     rowData={props.rowData}
+        //     rowIndex={props.rowIndex}
+        //     isScrolling={false}
+        //     column={props.column}
+        //     columns={props.columns}
+        //     columnIndex={props.columnIndex}
+        //     width={props.column.width}/>
     },
     (a, b) => {
-        return equal(a, b);
+        return equal(a.rowData, b.rowData) &&
+            equal(a.column, b.column) &&
+            equal(a.cellData, b.cellData) &&
+            equal(a.rowIndex, b.rowIndex) &&
+            equal(a.cellRenderer, b.cellRenderer) &&
+            equal(a.columnIndex, b.columnIndex)
     }
 );

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -106,7 +106,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                         <div
                             className={`flex items-center justify-${column.headerAlign} flex-row`}>
 
-                            {column.icon && column.icon(onHover || openFilter)}
+                            {column.icon}
 
                             <div
                                 className="truncate -webkit-box w-full mx-1 overflow-hidden"

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ResolvedProperty, WhereFilterOp } from "../../types";
+import { WhereFilterOp } from "../../types";
 import { FilterFormFieldProps } from "./VirtualTableHeader";
 
 export type OnRowClickParams<T extends Record<string, any>> = {
@@ -188,7 +188,7 @@ export interface VirtualTableColumn<CustomProps extends any = any> {
     /**
      * Icon displayed in the header
      */
-    icon?: (hoverOrOpen: boolean) => React.ReactNode;
+    icon?: React.ReactNode;
 
     /**
      *

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { DateTimeField } from "@firecms/ui";
-import { useFireCMSContext } from "../../../hooks";
+import { useCustomizationController } from "../../../hooks";
 
 export function VirtualTableDateField(props: {
     name: string;
@@ -13,7 +13,7 @@ export function VirtualTableDateField(props: {
     onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }) {
 
-    const { locale } = useFireCMSContext();
+    const { locale } = useCustomizationController();
     const {
         disabled,
         error,

package/src/contexts/AnalyticsContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { AnalyticsController } from "../types";
+
+export const AnalyticsContext = React.createContext<AnalyticsController>({} as AnalyticsController);

package/src/contexts/CustomizationControllerContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { CustomizationController } from "../types/customization_controller";
+
+export const CustomizationControllerContext = React.createContext<CustomizationController>({} as CustomizationController);

package/src/core/Drawer.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback } from "react";
 
-import { useFireCMSContext, useLargeLayout, useNavigationController } from "../hooks";
+import { useLargeLayout, useNavigationController } from "../hooks";
 
 import { NavLink } from "react-router-dom";
 import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
-import { getIconForView } from "../util";
+import { IconForView } from "../util";
 import { cn, Tooltip, Typography } from "@firecms/ui";
+import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 /**
  * Props used in case you need to override the default drawer
@@ -27,7 +28,7 @@ export function Drawer({
                            closeDrawer
                        }: DrawerProps) {
 
-    const context = useFireCMSContext();
+    const analyticsController = useAnalyticsController();
     const navigation = useNavigationController();
 
     const tooltipsOpen = hovered && !drawerOpen;
@@ -60,7 +61,7 @@ export function Drawer({
         const eventName: CMSAnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
             : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
-        context.onAnalyticsEvent?.(eventName, { url: view.url });
+        analyticsController.onAnalyticsEvent?.(eventName, { url: view.url });
         if (!largeLayout)
             closeDrawer();
     };
@@ -77,7 +78,7 @@ export function Drawer({
                         .map((view, index) =>
                             <DrawerNavigationItem
                                 key={`navigation_${index}`}
-                                icon={getIconForView(view.collection ?? view.view)}
+                                icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
                                 tooltipsOpen={tooltipsOpen}
                                 drawerOpen={drawerOpen}
                                 onClick={() => onClick(view)}
@@ -92,7 +93,7 @@ export function Drawer({
 
                 return <DrawerNavigationItem
                     key={`navigation_${index}`}
-                    icon={getIconForView(view.collection ?? view.view)}
+                    icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
                     tooltipsOpen={tooltipsOpen}
                     onClick={() => onClick(view)}
                     drawerOpen={drawerOpen}

package/src/core/FireCMS.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext, ModeControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
-import { FireCMSContextInstance, useFireCMSContext, useModeController } from "../hooks";
+import { useCustomizationController, useFireCMSContext, useModeController } from "../hooks";
 import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
 import { ErrorView } from "../components";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
@@ -17,6 +17,9 @@ import { CenteredView } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildNavigationController } from "../internal/useBuildNavigationController";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
+import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
+import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
+import { AnalyticsContext } from "../contexts/AnalyticsContext";
 
 /**
  * If you are using independent components of the CMS
@@ -82,16 +85,19 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
 
-    const context: Partial<FireCMSContext> = useMemo(() => ({
-        entityLinkBuilder,
+    const customizationController = useBuildCustomizationController({
         dateTimeFormat,
         locale,
+        entityLinkBuilder,
         plugins,
-        onAnalyticsEvent,
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    }), [dateTimeFormat, locale, plugins, entityViews, propertyConfigs, components]);
+    })
+
+    const analyticsController = useMemo(() => ({
+        onAnalyticsEvent
+    }), []);
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -115,35 +121,37 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     return (
         <ModeControllerContext.Provider value={modeController}>
-            <FireCMSContextInstance.Provider value={context}>
-                <UserConfigurationPersistenceContext.Provider
-                    value={userConfigPersistence}>
-                    <StorageSourceContext.Provider
-                        value={storageSource}>
-                        <DataSourceContext.Provider
-                            value={dataSource}>
-                            <AuthControllerContext.Provider
-                                value={authController}>
-                                <SideDialogsControllerContext.Provider
-                                    value={sideDialogsController}>
-                                    <SideEntityControllerContext.Provider
-                                        value={sideEntityController}>
-                                        <NavigationContext.Provider
-                                            value={navigationController}>
+            <AnalyticsContext.Provider value={analyticsController}>
+                <CustomizationControllerContext.Provider value={customizationController}>
+                    <UserConfigurationPersistenceContext.Provider
+                        value={userConfigPersistence}>
+                        <StorageSourceContext.Provider
+                            value={storageSource}>
+                            <DataSourceContext.Provider
+                                value={dataSource}>
+                                <AuthControllerContext.Provider
+                                    value={authController}>
+                                    <SideDialogsControllerContext.Provider
+                                        value={sideDialogsController}>
+                                        <SideEntityControllerContext.Provider
+                                            value={sideEntityController}>
+                                            <NavigationContext.Provider
+                                                value={navigationController}>
                                                 <DialogsProvider>
                                                     <FireCMSInternal
                                                         loading={loading}>
                                                         {children}
                                                     </FireCMSInternal>
                                                 </DialogsProvider>
-                                        </NavigationContext.Provider>
-                                    </SideEntityControllerContext.Provider>
-                                </SideDialogsControllerContext.Provider>
-                            </AuthControllerContext.Provider>
-                        </DataSourceContext.Provider>
-                    </StorageSourceContext.Provider>
-                </UserConfigurationPersistenceContext.Provider>
-            </FireCMSContextInstance.Provider>
+                                            </NavigationContext.Provider>
+                                        </SideEntityControllerContext.Provider>
+                                    </SideDialogsControllerContext.Provider>
+                                </AuthControllerContext.Provider>
+                            </DataSourceContext.Provider>
+                        </StorageSourceContext.Provider>
+                    </UserConfigurationPersistenceContext.Provider>
+                </CustomizationControllerContext.Provider>
+            </AnalyticsContext.Provider>
         </ModeControllerContext.Provider>
     );
 
@@ -161,12 +169,14 @@ function FireCMSInternal({
 }) {
 
     const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
     let childrenResult = children({
         context,
         loading
     });
 
-    const plugins = context.plugins;
+    const plugins = customizationController.plugins;
     if (!loading && plugins) {
         plugins.forEach((plugin: FireCMSPlugin) => {
             if (plugin.provider) {

package/src/form/EntityForm.tsx

@@ -25,7 +25,13 @@ import {
     isReadOnly,
     resolveCollection
 } from "../util";
-import { useAuthController, useDataSource, useFireCMSContext, useSideEntityController } from "../hooks";
+import {
+    useAuthController,
+    useCustomizationController,
+    useDataSource,
+    useFireCMSContext,
+    useSideEntityController
+} from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
 import { Alert, Button, cn, DialogActions, IconButton, Typography } from "@firecms/ui";
@@ -34,6 +40,7 @@ import {
     copyEntityAction,
     deleteEntityAction
 } from "../components/EntityCollectionTable/internal/default_entity_actions";
+import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 /**
  * @group Components
@@ -148,15 +155,19 @@ function EntityFormInternal<M extends Record<string, any>>({
                                                                onIdUpdateError
                                                            }: EntityFormProps<M>) {
 
+    const analyticsController = useAnalyticsController();
+
+    const customizationController = useCustomizationController();
+
     const context = useFireCMSContext();
     const dataSource = useDataSource();
-    const plugins = context.plugins;
+    const plugins = customizationController.plugins;
 
     const initialResolvedCollection = useMemo(() => resolveCollection({
         collection: inputCollection,
         path,
         values: entity?.values,
-        fields: context.propertyConfigs
+        fields: customizationController.propertyConfigs
     }), [entity?.values, path]);
 
     const mustSetCustomId: boolean = (status === "new" || status === "copy") &&
@@ -219,7 +230,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         entityId,
         values: internalValues,
         previousValues: initialValues,
-        fields: context.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     const onIdUpdate = inputCollection.callbacks?.onIdUpdate;
@@ -274,7 +285,7 @@ function EntityFormInternal<M extends Record<string, any>>({
             const eventName: CMSAnalyticsEvent = status === "new"
                 ? "new_entity_saved"
                 : (status === "copy" ? "entity_copied" : (status === "existing" ? "entity_edited" : "unmapped_event"));
-            context.onAnalyticsEvent?.(eventName, { path });
+            analyticsController.onAnalyticsEvent?.(eventName, { path });
             initialValuesRef.current = values;
         })
             .catch(e => {