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

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 => {

package/src/form/PropertyFieldBinding.tsx

@@ -17,7 +17,7 @@ import {
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../util";
-import { useFireCMSContext } from "../hooks";
+import { useCustomizationController } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
 import { ErrorBoundary } from "../components";
@@ -81,9 +81,9 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
      autoFocus,
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
 
-    const shouldAlwaysRerender = shouldPropertyReRender(property, fireCMSContext.plugins);
+    const shouldAlwaysRerender = shouldPropertyReRender(property, customizationController.plugins);
     // we use the standard Field for user defined fields, since it rebuilds
     // when there are changes in other values, in contrast to FastField
     const FieldComponent = shouldAlwaysRerender ? Field : FastField;
@@ -102,7 +102,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                     values: fieldProps.form.values,
                     path: context.path,
                     entityId: context.entityId,
-                    fields: fireCMSContext.propertyConfigs
+                    fields: customizationController.propertyConfigs
                 });
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
@@ -114,9 +114,9 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                         Component = resolvedProperty.Field as ComponentType<FieldProps<any>>;
                     }
                 } else {
-                    const propertyConfig = getFieldConfig(resolvedProperty, fireCMSContext.propertyConfigs);
+                    const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
                     if (!propertyConfig) {
-                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: fireCMSContext.propertyConfigs, propertyConfig });
+                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: customizationController.propertyConfigs, propertyConfig });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
@@ -125,7 +125,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
-                        fields: fireCMSContext.propertyConfigs
+                        fields: customizationController.propertyConfigs
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }
@@ -189,7 +189,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          fieldProps: FormikFieldProps<T>
      }) {
 
-    const { plugins } = useFireCMSContext();
+    const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
     const value = fieldProps.field.value;
@@ -197,8 +197,6 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
     const error = getIn(fieldProps.form.errors, propertyKey);
     const touched = getIn(fieldProps.form.touched, propertyKey);
 
-    console.log("error", propertyKey, error);
-
     const showError: boolean = error &&
         (fieldProps.form.submitCount > 0 || property.validation?.unique) &&
         (!Array.isArray(error) || !!error.filter((e: any) => !!e).length);

package/src/form/components/CustomIdField.tsx

@@ -2,12 +2,14 @@ import React, { useMemo } from "react";
 
 import { ErrorMessage } from "formik";
 
-import { Entity, EntityStatus, EnumValueConfig, EnumValues, FireCMSContext } from "../../types";
+import { Entity, EntityStatus, EnumValueConfig, EnumValues } from "../../types";
 
-import { useClipboard, useFireCMSContext, useSnackbarController } from "../../hooks";
+import { useClipboard, useSnackbarController } from "../../hooks";
 import { enumToObjectEntries } from "../../util";
 import { ContentCopyIcon, IconButton, OpenInNewIcon, Select, SelectItem, TextField, Tooltip } from "@firecms/ui";
 import { EnumValuesChip } from "../../preview";
+import { useCustomizationController } from "../../hooks/useCustomizationController";
+import { CustomizationController } from "../../types/customization_controller";
 
 export function CustomIdField<M extends Record<string, any>>({
                                                                  customId,
@@ -42,7 +44,7 @@ export function CustomIdField<M extends Record<string, any>>({
         })
     });
 
-    const appConfig: FireCMSContext | undefined = useFireCMSContext();
+    const customizationController: CustomizationController = useCustomizationController();
 
     const fieldProps = {
         label: idSetAutomatically ? "ID is set automatically" : "ID",
@@ -60,10 +62,10 @@ export function CustomIdField<M extends Record<string, any>>({
                         </IconButton>
                     </Tooltip>
 
-                    {appConfig?.entityLinkBuilder &&
+                    {customizationController?.entityLinkBuilder &&
                         <Tooltip title={"Open in the console"}>
                             <IconButton component={"a"}
-                                        href={appConfig.entityLinkBuilder({ entity })}
+                                        href={customizationController.entityLinkBuilder({ entity })}
                                         rel="noopener noreferrer"
                                         target="_blank"
                                         onClick={(e) => e.stopPropagation()}

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FieldProps } from "../../types";
 import { FieldHelperText } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
+import { useClearRestoreValue } from "../../hooks";
 import { ExpandablePanel } from "@firecms/ui";
 import { getIconForProperty } from "../../util";
 import { LabelWithIcon } from "../../components";
@@ -29,7 +29,6 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
-    const { propertyConfigs } = useFireCMSContext();
     if (!Array.isArray(property.resolvedProperties))
         throw Error("ArrayCustomShapedFieldBinding misconfiguration. Property `of` not set");
 

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -4,7 +4,7 @@ import { FieldProps } from "../../types";
 
 import { FieldHelperText } from "../components";
 import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
+import { useClearRestoreValue, useCustomizationController } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { DateTimeField } from "@firecms/ui";
 
@@ -30,7 +30,7 @@ export function DateTimeFieldBinding({
                                          includeDescription
                                      }: DateTimeFieldProps) {
 
-    const { locale } = useFireCMSContext();
+    const { locale } = useCustomizationController();
     const internalValue = value || null;
 
     useClearRestoreValue({

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { DataType, EntityReference, FieldProps, GeoPoint } from "../../types";
 
-import { ArrayContainer } from "../../components";
+import { ArrayContainer, LabelWithIcon } from "../../components";
 import { FieldHelperText } from "../components";
-
-import { LabelWithIcon } from "../../components";
 import {
     AddIcon,
     ArrowDropDownIcon,
@@ -22,7 +20,7 @@ import {
     Typography
 } from "@firecms/ui";
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -257,7 +255,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
     updateDataType: (rowId: number, dataType: DataType) => void
 }) {
 
-    const { locale } = useFireCMSContext();
+    const { locale } = useCustomizationController();
 
     function buildInput(entryValue: any, fieldKey: string, dataType: DataType) {
         if (dataType === "string" || dataType === "number") {
@@ -439,7 +437,7 @@ function ArrayKeyValueRow<T>({
     disabled?: boolean,
 }) {
 
-    const { locale } = useFireCMSContext();
+    const { locale } = useCustomizationController();
     const [selectedDataType, setSelectedDataType] = useState<DataType>(getDataType(value) ?? "string");
 
     function doUpdateDataType(dataType: DataType) {

package/src/hooks/data/save.ts

@@ -70,8 +70,13 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                                                                                                     }
 ): Promise<void> {
 
+    if (status !== "new" && !entityId) {
+        throw new Error("Entity id must be specified when updating an existing entity");
+    }
     let updatedValues: Partial<EntityValues<M>>;
 
+    const customizationController = context.customizationController;
+
     const resolvedPath = context.navigation.resolveAliasesFrom(path);
 
     const callbacks = collection.callbacks;
@@ -82,7 +87,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                 path,
                 values: previousValues as EntityValues<M>,
                 entityId,
-                fields: context.propertyConfigs
+                fields: customizationController.propertyConfigs
             });
             updatedValues = await callbacks.onPreSave({
                 collection: resolvedCollection,
@@ -119,7 +124,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: context.propertyConfigs
+                    fields: customizationController.propertyConfigs
                 });
                 callbacks.onSaveSuccess({
                     collection: resolvedCollection,
@@ -147,7 +152,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: context.propertyConfigs
+                    fields: customizationController.propertyConfigs
                 });
                 callbacks.onSaveFailure({
                     collection: resolvedCollection,

package/src/hooks/index.tsx

@@ -21,3 +21,4 @@ export * from "./useLargeLayout";
 
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";
+export * from "./useCustomizationController";

package/src/hooks/useAnalyticsController.tsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { AnalyticsController } from "../types";
+import { AnalyticsContext } from "../contexts/AnalyticsContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export const useAnalyticsController = (): AnalyticsController => useContext(AnalyticsContext);

package/src/hooks/useCustomizationController.tsx

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { CustomizationController } from "../types/customization_controller";
+import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
+
+/**
+ * Use this hook to retrieve the customization controller.
+ * This hook includes all the customization options that can be used
+ * to customize the CMS.
+ *
+ * You will likely not need to use this hook directly.
+ *
+ * @group Hooks and utilities
+ */
+export const useCustomizationController = (): CustomizationController => useContext(CustomizationControllerContext);