@firecms/core 3.0.0-beta.1 → 3.0.0-beta.10

package/src/core/EntitySidePanel.tsx

@@ -4,7 +4,7 @@ import { EntitySidePanelProps } from "../types";
 import { useNavigationController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
-import { EntityView } from "../internal/EntityView";
+import { EntityEditView } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 
 /**
@@ -33,13 +33,15 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         if (!props) return undefined;
         let usedCollection = props.collection;
 
+        const registryCollection = navigationController.getCollection(props.path);
+        if (registryCollection) {
+            usedCollection = registryCollection;
+        }
         if (!usedCollection) {
-            usedCollection = navigationController.getCollection(props.path, props.entityId);
-            if (!usedCollection) {
-                console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
-                throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
-            }
+            console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
+            throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
         }
+
         return usedCollection;
     }, [navigationController, props]);
 
@@ -75,9 +77,8 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     return (
         <>
             <ErrorBoundary>
-                <EntityView
+                <EntityEditView
                     {...props}
-                    formWidth={props.width}
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
                     onValuesAreModified={onValuesAreModified}

package/src/core/FireCMS.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 
-import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext, ModeControllerContext } from "../contexts";
+import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
-import { useCustomizationController, useFireCMSContext, useModeController } from "../hooks";
+import { useCustomizationController, useFireCMSContext } from "../hooks";
 import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
 import { ErrorView } from "../components";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
@@ -12,14 +12,12 @@ import { DataSourceContext } from "../contexts/DataSourceContext";
 import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
 import { NavigationContext } from "../contexts/NavigationContext";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
-import { useLocaleConfig } from "../internal/useLocaleConfig";
-import { CenteredView } from "@firecms/ui";
+import { CenteredView, Typography, useLocaleConfig } 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";
+import { useProjectLog } from "../hooks/useProjectLog";
 
 /**
  * If you are using independent components of the CMS
@@ -30,12 +28,11 @@ import { AnalyticsContext } from "../contexts/AnalyticsContext";
  *
  * You only need to use this component if you are building a custom app.
  *
- * @constructor
+
  * @group Core
  */
 export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
 
-    const modeController = useModeController();
     const {
         children,
         entityLinkBuilder,
@@ -50,25 +47,12 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         propertyConfigs,
         entityViews,
         components,
-        baseCollectionPath,
-        basePath,
-        collections,
-        views
+        navigationController,
+        apiKey
     } = props;
 
     useLocaleConfig(locale);
 
-    const navigationController = useBuildNavigationController({
-        basePath,
-        baseCollectionPath,
-        authController,
-        collections,
-        views,
-        userConfigPersistence,
-        dataSource: dataSourceDelegate,
-        plugins
-    });
-
     /**
      * Controller in charge of fetching and persisting data
      */
@@ -85,7 +69,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
 
-    const customizationController = useBuildCustomizationController({
+    const customizationController: CustomizationController = {
         dateTimeFormat,
         locale,
         entityLinkBuilder,
@@ -93,12 +77,22 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    })
+    };
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
     }), []);
 
+    const accessResponse = useProjectLog({
+        apiKey,
+        authController,
+        dataSourceDelegate,
+        plugins
+    });
+    if (accessResponse?.message) {
+        console.warn(accessResponse.message);
+    }
+
     if (navigationController.navigationLoadingError) {
         return (
             <CenteredView maxWidth={"md"}>
@@ -119,40 +113,54 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         );
     }
 
+    if (accessResponse?.blocked) {
+        return (
+            <CenteredView maxWidth={"md"} fullScreen={true} className={"flex flex-col gap-2"}>
+                <Typography variant={"h4"} gutterBottom>
+                    License needed
+                </Typography>
+                <Typography>
+                    You need a valid license to use FireCMS PRO. Please reach out at <a
+                    href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
+                </Typography>
+                {accessResponse?.message &&
+                    <Typography>{accessResponse?.message}</Typography>}
+            </CenteredView>
+        );
+    }
+
     return (
-        <ModeControllerContext.Provider value={modeController}>
-            <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>
-                </CustomizationControllerContext.Provider>
-            </AnalyticsContext.Provider>
-        </ModeControllerContext.Provider>
+        <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>
+            </CustomizationControllerContext.Provider>
+        </AnalyticsContext.Provider>
     );
 
 }

package/src/core/NavigationRoutes.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Route, Routes, useLocation } from "react-router-dom";
 import { CMSView } from "../types";
-import { DefaultHomePage, EntityCollectionView, NotFoundPage } from "../components";
+import { DefaultHomePage, EntityCollectionView, ErrorBoundary, NotFoundPage } from "../components";
 import { useNavigationController } from "../hooks";
 import { toArray } from "../util/arrays";
 
@@ -13,9 +13,9 @@ export type NavigationRoutesProps = {
     /**
      * In case you need to override the home page
      */
-    HomePage?: React.ComponentType;
+    homePage?: React.ReactNode;
 
-    customRoutes?: React.ReactNode[]
+    children?: React.ReactNode | React.ReactNode[]
 
 };
 
@@ -25,14 +25,13 @@ export type NavigationRoutesProps = {
  * or the home route) related to a {@link NavigationController}.
  * This component needs a parent {@link FireCMS}
  *
- * @constructor
+
  * @group Components
  */
-
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
     function NavigationRoutes({
-                                  HomePage = DefaultHomePage,
-                                  customRoutes
+                                  homePage = <DefaultHomePage/>,
+                                  children
                               }: NavigationRoutesProps) {
 
         const location = useLocation();
@@ -59,6 +58,14 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
                     cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
             });
         }
+        if (navigation.adminViews) {
+            navigation.adminViews.forEach((cmsView) => {
+                if (Array.isArray(cmsView.path))
+                    cmsViews.push(...cmsView.path.map(path => buildCMSViewRoute(path, cmsView)));
+                else
+                    cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
+            });
+        }
 
         // we reorder collections so that nested paths are included first
         const sortedCollections = [...(navigation.collections ?? [])]
@@ -70,20 +77,22 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
                     return <Route path={urlPath + "/*"}
                                   key={`navigation_${collection.id ?? collection.path}`}
                                   element={
-                                      <EntityCollectionView
-                                          key={`collection_view_${collection.id ?? collection.path}`}
-                                          isSubCollection={false}
-                                          parentCollectionIds={[]}
-                                          fullPath={collection.id ?? collection.path}
-                                          {...collection}
-                                          Actions={toArray(collection.Actions)}/>
+                                      <ErrorBoundary>
+                                          <EntityCollectionView
+                                              key={`collection_view_${collection.id ?? collection.path}`}
+                                              isSubCollection={false}
+                                              parentCollectionIds={[]}
+                                              fullPath={collection.id ?? collection.path}
+                                              {...collection}
+                                              Actions={toArray(collection.Actions)}/>
+                                      </ErrorBoundary>
                                   }/>;
                 }
             );
 
         const homeRoute = (
             <Route path={"/"}
-                   element={<HomePage/>}/>
+                   element={homePage}/>
         );
 
         const notFoundRoute = <Route path={"*"}
@@ -102,7 +111,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
                 {notFoundRoute}
 
-                {customRoutes}
+                {children}
 
             </Routes>
         );
@@ -115,4 +124,3 @@ const buildCMSViewRoute = (path: string, cmsView: CMSView) => {
         element={cmsView.view}
     />;
 };
-

package/src/core/SideDialogs.tsx

@@ -126,6 +126,7 @@ function SideDialogView({
             <Sheet
                 open={Boolean(panel)}
                 onOpenChange={(open) => !open && onCloseRequest()}
+                title={"Side dialog " + panel?.key}
             >
                 {panel &&
                     <div

package/src/core/field_configs.tsx

@@ -8,8 +8,8 @@ import {
     DateTimeFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
-    MarkdownFieldBinding,
-    MultiSelectBinding,
+    MarkdownEditorFieldBinding,
+    MultiSelectFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
@@ -77,7 +77,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         property: {
             dataType: "string",
             markdown: true,
-            Field: MarkdownFieldBinding
+            Field: MarkdownEditorFieldBinding
         }
     },
     url: {
@@ -104,6 +104,17 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: TextFieldBinding
         }
     },
+    switch: {
+        key: "switch",
+        name: "Switch",
+        description: "Boolean true or false field (or yes or no, 0 or 1...)",
+        Icon: FlagIcon,
+        color: "#20d9d2",
+        property: {
+            dataType: "boolean",
+            Field: SwitchFieldBinding
+        }
+    },
     select: {
         key: "select",
         name: "Select/enum",
@@ -128,7 +139,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "string",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     number_input: {
@@ -166,7 +177,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "number",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     file_upload: {
@@ -225,17 +236,6 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: ArrayOfReferencesFieldBinding
         }
     },
-    switch: {
-        key: "switch",
-        name: "Switch",
-        description: "Boolean true or false field (or yes or no, 0 or 1...)",
-        Icon: FlagIcon,
-        color: "#20d9d2",
-        property: {
-            dataType: "boolean",
-            Field: SwitchFieldBinding
-        }
-    },
     date_time: {
         key: "date_time",
         name: "Date/time",
@@ -331,7 +331,7 @@ export function getFieldConfig(property: Property | ResolvedProperty, propertyCo
     }
     const defaultFieldConfig = DEFAULT_FIELD_CONFIGS[defaultFieldId];
     const customField = fieldId ? propertyConfigs[fieldId] : undefined;
-    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {});
+    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {} as PropertyConfig);
 }
 
 export function getDefaultFieldId(property: Property | ResolvedProperty) {
@@ -359,8 +359,7 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
     } else if (property.dataType === "map") {
         if (property.keyValue)
             return "key_value";
-        if (property.properties)
-            return "group";
+        return "group";
     } else if (property.dataType === "array") {
         const of = (property as ArrayProperty).of;
         const oneOf = (property as ArrayProperty).oneOf;

package/src/core/index.tsx

@@ -1,14 +1,11 @@
 export * from "./FireCMS";
 
-export type { ScaffoldProps } from "./Scaffold";
-export { Scaffold } from "./Scaffold";
+export * from "../app/Scaffold";
 
-export type { DrawerProps } from "./Drawer";
-export { Drawer, DrawerNavigationItem } from "./Drawer";
+export * from "./DefaultDrawer";
+export * from "./DrawerNavigationItem";
 
 export * from "./field_configs";
 
 export * from "./SideDialogs";
 export * from "./NavigationRoutes";
-export * from "./useBuildModeController";
-export * from "./useBuildLocalConfigurationPersistence";

package/src/form/PropertyFieldBinding.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType, ReactElement, useCallback, useRef } from "react";
 import equal from "react-fast-compare"
 
-import { FastField, Field, FieldProps as FormikFieldProps, getIn } from "formik";
+import { Field, FieldProps as FormexFieldProps, getIn } from "@firecms/formex";
 
 import {
     CMSType,
@@ -51,6 +51,13 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     if (a.propertyKey !== b.propertyKey) {
         return false;
     }
+    if (a.index !== b.index) {
+        return false;
+    }
+
+    if (a.size !== b.size) {
+        return false;
+    }
     const aIsBuilder = isPropertyBuilder(a.property) || a.property.fromBuilder;
     const bIsBuilder = isPropertyBuilder(b.property) || b.property.fromBuilder;
 
@@ -67,7 +74,7 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     return false;
 }) as typeof PropertyFieldBindingInternal;
 
-function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps = any, M extends Record<string, any> = Record<string, any>>
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
 ({
      propertyKey,
      property,
@@ -75,34 +82,31 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
      includeDescription,
      underlyingValueHasChanged,
      disabled,
-     tableMode,
      partOfArray,
-     partOfBlock,
+     minimalistView,
      autoFocus,
+     index,
+     size
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
     const customizationController = useCustomizationController();
 
-    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;
-
     return (
-        <FieldComponent
+        <Field
+            key={propertyKey}
             name={propertyKey}
         >
-            {(fieldProps: FormikFieldProps<T>) => {
+            {(fieldProps) => {
 
                 let Component: ComponentType<FieldProps<T>> | undefined;
                 const resolvedProperty: ResolvedProperty<T> | null = resolveProperty({
                     propertyKey,
-                    propertyValue: fieldProps.field.value,
                     propertyOrBuilder: property,
                     values: fieldProps.form.values,
                     path: context.path,
                     entityId: context.entityId,
-                    fields: customizationController.propertyConfigs
+                    fields: customizationController.propertyConfigs,
+                    index
                 });
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
@@ -116,16 +120,22 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                 } else {
                     const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
                     if (!propertyConfig) {
-                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: customizationController.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({
+                        propertyKey,
                         propertyOrBuilder: propertyConfig.property,
-                        propertyValue: fieldProps.field.value,
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
-                        fields: customizationController.propertyConfigs
+                        fields: customizationController.propertyConfigs,
+                        index
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }
@@ -144,10 +154,10 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                     underlyingValueHasChanged,
                     context,
                     disabled,
-                    tableMode,
                     partOfArray,
-                    partOfBlock,
-                    autoFocus
+                    minimalistView,
+                    autoFocus,
+                    size
                 };
 
                 return <FieldInternal
@@ -155,7 +165,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                     componentProps={componentProps}
                     fieldProps={fieldProps}/>;
             }}
-        </FieldComponent>
+        </Field>
     );
 
 }
@@ -174,26 +184,26 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          property,
          includeDescription,
          underlyingValueHasChanged,
-         tableMode,
          partOfArray,
-         partOfBlock,
+         minimalistView,
          autoFocus,
          context,
-         disabled
+         disabled,
+         size
      },
      fieldProps
  }:
      {
          Component: ComponentType<FieldProps<T, any, M>>,
          componentProps: ResolvedPropertyFieldBindingProps<T, M>,
-         fieldProps: FormikFieldProps<T>
+         fieldProps: FormexFieldProps<T, any>
      }) {
 
     const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
     const value = fieldProps.field.value;
-    const initialValue = fieldProps.meta.initialValue;
+    // const initialValue = fieldProps.meta.initialValue;
     const error = getIn(fieldProps.form.errors, propertyKey);
     const touched = getIn(fieldProps.form.touched, propertyKey);
 
@@ -201,7 +211,14 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         (fieldProps.form.submitCount > 0 || property.validation?.unique) &&
         (!Array.isArray(error) || !!error.filter((e: any) => !!e).length);
 
-    const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent(context.path, context.collection, propertyKey, property, Component, plugins);
+    const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent({
+        path: context.path,
+        collection: context.collection,
+        propertyKey: propertyKey,
+        property: property,
+        Component: Component,
+        plugins: plugins
+    });
     const UsedComponent: ComponentType<FieldProps<T>> = WrappedComponent ?? Component;
 
     const isSubmitting = fieldProps.form.isSubmitting;
@@ -219,7 +236,6 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
     const cmsFieldProps: FieldProps<T, CustomProps, M> = {
         propertyKey,
         value: value as T,
-        initialValue,
         setValue,
         setFieldValue,
         error,
@@ -230,12 +246,12 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         property: property as ResolvedProperty<T>,
         disabled: disabled ?? false,
         underlyingValueHasChanged: underlyingValueHasChanged ?? false,
-        tableMode: tableMode ?? false,
         partOfArray: partOfArray ?? false,
-        partOfBlock: partOfBlock ?? false,
+        minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,
-        context
+        context,
+        size
     };
 
     return (
@@ -271,13 +287,24 @@ const shouldPropertyReRender = (property: PropertyOrBuilder | ResolvedProperty,
     }
 }
 
-function useWrappedComponent<T extends CMSType = CMSType, M extends Record<string, any> = any>(
-    path: string,
-    collection: EntityCollection<M>,
+interface UseWrappedComponentParams<T extends CMSType = CMSType, M extends Record<string, any> = any> {
+    path?: string,
+    collection?: EntityCollection<M>,
     propertyKey: string,
     property: ResolvedProperty<T>,
     Component: ComponentType<FieldProps<T, any, M>>,
     plugins?: FireCMSPlugin[]
+}
+
+function useWrappedComponent<T extends CMSType = CMSType, M extends Record<string, any> = any>(
+    {
+        path,
+        collection,
+        propertyKey,
+        property,
+        Component,
+        plugins
+    }: UseWrappedComponentParams<T, M>
 ): ComponentType<FieldProps<T, any, M>> | null {
 
     const wrapperRef = useRef<ComponentType<FieldProps<T, any, M>> | null>((() => {