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

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);

package/src/hooks/useFireCMSContext.tsx

@@ -1,4 +1,3 @@
-import { createContext, useContext } from "react";
 import { AuthController, FireCMSContext, User } from "../types";
 import { useAuthController } from "./useAuthController";
 import { useSideDialogsController } from "./useSideDialogsController";
@@ -9,8 +8,8 @@ import { useStorageSource } from "./useStorageSource";
 import { useSnackbarController } from "./useSnackbarController";
 import { useUserConfigurationPersistence } from "./useUserConfigurationPersistence";
 import { useDialogsController } from "./useDialogsController";
-
-export const FireCMSContextInstance = createContext<Partial<FireCMSContext>>({});
+import { useCustomizationController } from "./useCustomizationController";
+import { useAnalyticsController } from "./useAnalyticsController";
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -23,7 +22,6 @@ export const FireCMSContextInstance = createContext<Partial<FireCMSContext>>({})
  */
 export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
 
-    const partialContext = useContext(FireCMSContextInstance) as FireCMSContext<UserType, AuthControllerType>;
     const authController = useAuthController<UserType, AuthControllerType>();
     const sideDialogsController = useSideDialogsController();
     const sideEntityController = useSideEntityController();
@@ -33,9 +31,10 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     const snackbarController = useSnackbarController();
     const userConfigPersistence = useUserConfigurationPersistence();
     const dialogsController = useDialogsController();
+    const customizationController = useCustomizationController();
+    const analyticsController = useAnalyticsController();
 
     return {
-        ...partialContext,
         authController,
         sideDialogsController,
         sideEntityController,
@@ -44,7 +43,9 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
         storageSource,
         snackbarController,
         userConfigPersistence,
-        dialogsController
-    }
+        dialogsController,
+        customizationController,
+        analyticsController
+    };
 
 };

package/src/internal/EntityView.tsx

@@ -22,6 +22,7 @@ import {
 import {
     saveEntityWithCallbacks,
     useAuthController,
+    useCustomizationController,
     useDataSource,
     useEntityFetch,
     useFireCMSContext,
@@ -98,6 +99,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const snackbarController = useSnackbarController();
+    const customizationController = useCustomizationController();
     const context = useFireCMSContext();
     const authController = useAuthController<UserType>();
 
@@ -297,7 +299,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
     };
 
     const resolvedEntityViews = customViews ? customViews
-            .map(e => resolveEntityView(e, context.entityViews))
+            .map(e => resolveEntityView(e, customizationController.entityViews))
             .filter(Boolean) as EntityCustomView[]
         : [];
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
@@ -411,7 +413,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
     }
 
     function buildForm() {
-        const plugins = context.plugins;
+        const plugins = customizationController.plugins;
         let form = <EntityForm
             status={status}
             path={path}

package/src/internal/useBuildCustomizationController.tsx

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

package/src/internal/useBuildSideDialogsController.tsx

@@ -4,7 +4,6 @@ import { SideDialogPanelProps, SideDialogsController } from "../types";
 import equal from "react-fast-compare"
 
 export function useBuildSideDialogsController(): SideDialogsController {
-    console.log("useBuildSideDialogsController");
 
     const location = useLocation();
     const navigate = useNavigate();

package/src/preview/PropertyPreview.tsx

@@ -13,7 +13,7 @@ import {
 import { resolveProperty } from "../util";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
-import { useFireCMSContext } from "../hooks";
+import { useCustomizationController } from "../hooks";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -37,7 +37,8 @@ import { ErrorView } from "../components";
  */
 export const PropertyPreview = React.memo(function PropertyPreview<T extends CMSType>(props: PropertyPreviewProps<T>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
     let content: React.ReactNode | any;
     const {
         property: inputProperty,
@@ -53,7 +54,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         propertyKey,
         propertyOrBuilder: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (value === undefined || property === null) {

package/src/preview/components/DatePreview.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 import { format } from "date-fns";
 import * as locales from "date-fns/locale";
-import { FireCMSContext } from "../../types";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { defaultDateFormat } from "../../util";
 
 /**
@@ -13,10 +12,10 @@ export function DatePreview({
                                 date
                             }: { date: Date }): React.ReactElement {
 
-    const appConfig: FireCMSContext<any> | undefined = useFireCMSContext();
+    const customizationController = useCustomizationController();
     // @ts-ignore
-    const dateUtilsLocale = appConfig?.locale ? locales[appConfig?.locale] : undefined;
-    const dateFormat: string = appConfig?.dateTimeFormat ?? defaultDateFormat;
+    const dateUtilsLocale = customizationController?.locale ? locales[customizationController?.locale] : undefined;
+    const dateFormat: string = customizationController?.dateTimeFormat ?? defaultDateFormat;
     const formattedDate = date ? format(date, dateFormat, { locale: dateUtilsLocale }) : "";
 
     return (

package/src/preview/components/ReferencePreview.tsx

@@ -4,12 +4,18 @@ import { useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, ResolvedProperty } from "../../types";
 
 import { getReferencePreviewKeys, getValueInPath, resolveCollection } from "../../util";
-import { useEntityFetch, useFireCMSContext, useNavigationController, useSideEntityController } from "../../hooks";
+import {
+    useCustomizationController,
+    useEntityFetch,
+    useNavigationController,
+    useSideEntityController
+} from "../../hooks";
 import { PropertyPreview } from "../PropertyPreview";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { SkeletonPropertyComponent } from "../property_previews/SkeletonPropertyComponent";
 import { cn, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { ErrorView } from "../../components";
+import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -58,13 +64,14 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
                                                                      allowEntityNavigation = true
                                                                  }: ReferencePreviewProps) {
 
-    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
     const navigationController = useNavigationController();
 
     const collection = navigationController.getCollection<EntityCollection<M>>(reference.path);
     if (!collection) {
-        if (context.components?.missingReference) {
-            return <context.components.missingReference path={reference.path}/>;
+        if (customizationController.components?.missingReference) {
+            return <customizationController.components.missingReference path={reference.path}/>;
         } else {
             throw Error(`Couldn't find the corresponding collection view for the path: ${reference.path}`);
         }
@@ -85,7 +92,9 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
     collection: EntityCollection<M>
 }) {
 
-    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
+    const analyticsController = useAnalyticsController();
     const sideEntityController = useSideEntityController();
 
     const {
@@ -109,10 +118,10 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
         collection,
         path: reference.path,
         values: usedEntity?.values,
-        fields: context.propertyConfigs
+        fields: customizationController.propertyConfigs
     }), [collection]);
 
-    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, context.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
+    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
         [previewProperties, resolvedCollection, size]);
 
     let body: React.ReactNode;
@@ -179,7 +188,7 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
                                 size={"small"}
                                 onClick={(e) => {
                                     e.stopPropagation();
-                                    context.onAnalyticsEvent?.("entity_click_from_reference", {
+                                    analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
                                         path: usedEntity.path,
                                         entityId: usedEntity.id
                                     });

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ErrorBoundary } from "../../components";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { resolveArrayProperty } from "../../util";
@@ -15,13 +15,13 @@ export function ArrayOfMapsPreview({
                                        size,
                                        // entity
                                    }: PropertyPreviewProps<Record<string, any>[]>) {
-    const fireCMSContext = useFireCMSContext();
 
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -1,6 +1,6 @@
 import { ResolvedReferenceProperty } from "../../types";
 import { resolveArrayProperty } from "../../util";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ReferencePreview } from "../components/ReferencePreview";
 
@@ -14,12 +14,12 @@ export function ArrayOfReferencesPreview({
                                              size
                                          }: PropertyPreviewProps<any[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
 
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { ErrorBoundary } from "../../components";
@@ -19,12 +19,12 @@ export function ArrayOfStorageComponentsPreview({
                                                     size
                                                 }: PropertyPreviewProps<any[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -3,7 +3,7 @@ import { ResolvedStringProperty } from "../../types";
 
 import { resolveArrayProperty } from "../../util";
 import { PropertyPreviewProps, StringPropertyPreview } from "../../preview";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -17,12 +17,12 @@ export function ArrayOfStringsPreview({
                                           size
                                       }: PropertyPreviewProps<string[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {
@@ -45,7 +45,7 @@ export function ArrayOfStringsPreview({
                             <StringPropertyPreview propertyKey={propertyKey}
                                                    property={stringProperty}
                                                    value={v}
-                                                   // entity={entity}
+                                // entity={entity}
                                                    size={size}/>
                         </ErrorBoundary>
                     </div>

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cn, defaultBorderMixin } from "@firecms/ui";
@@ -19,12 +19,12 @@ export function ArrayOneOfPreview({
                                       // entity
                                   }: PropertyPreviewProps<any[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (property?.dataType !== "array")

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useFireCMSContext } from "../../hooks";
+import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cn, defaultBorderMixin } from "@firecms/ui";
@@ -19,12 +19,12 @@ export function ArrayPropertyPreview({
                                          size
                                      }: PropertyPreviewProps<any[]>) {
 
-    const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.propertyConfigs
+        fields: customizationController.propertyConfigs
     });
 
     if (!property.of) {

package/src/types/analytics_controller.tsx

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