@firecms/collection_editor 3.0.0-beta.2-pre.2 → 3.0.0-beta.2-pre.4

package/dist/types/collection_editor_controller.d.ts

@@ -7,7 +7,7 @@ import { PersistedCollection } from "./persisted_collection";
  */
 export interface CollectionEditorController {
     editCollection: (props: {
-        path?: string;
+        id?: string;
         fullPath?: string;
         parentCollectionIds: string[];
         parentCollection?: PersistedCollection;
@@ -21,12 +21,13 @@ export interface CollectionEditorController {
         parentCollectionIds: string[];
         parentCollection?: PersistedCollection;
         redirect: boolean;
+        sourceClick?: string;
     }) => void;
     editProperty: (props: {
         propertyKey?: string;
         property?: Property;
         currentPropertiesOrder?: string[];
-        editedCollectionPath: string;
+        editedCollectionId: string;
         parentCollectionIds: string[];
         collection: PersistedCollection;
     }) => void;

package/dist/types/config_controller.d.ts

@@ -21,13 +21,13 @@ export interface CollectionsConfigController {
 export type UpdateCollectionParams<M extends Record<string, any>> = {
     id: string;
     collectionData: Partial<PersistedCollection<M>>;
-    previousPath?: string;
+    previousId?: string;
     parentCollectionIds?: string[];
 };
 export type SaveCollectionParams<M extends Record<string, any>> = {
     id: string;
     collectionData: PersistedCollection<M>;
-    previousPath?: string;
+    previousId?: string;
     parentCollectionIds?: string[];
 };
 export type SavePropertyParams = {
@@ -46,6 +46,6 @@ export type DeletePropertyParams = {
     parentCollectionIds?: string[];
 };
 export type DeleteCollectionParams = {
-    path: string;
+    id: string;
     parentCollectionIds?: string[];
 };

package/dist/ui/collection_editor/CollectionEditorDialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CMSType, EntityCollection, User } from "@firecms/core";
+import { EntityCollection, User } from "@firecms/core";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionInference } from "../../types/collection_inference";
 import { PersistedCollection } from "../../types/persisted_collection";
@@ -11,7 +11,7 @@ export interface CollectionEditorDialogProps {
         path?: string;
         name?: string;
     };
-    editedCollectionPath?: string;
+    editedCollectionId?: string;
     fullPath?: string;
     parentCollectionIds?: string[];
     handleClose: (collection?: EntityCollection) => void;
@@ -30,9 +30,7 @@ export interface CollectionEditorDialogProps {
     parentCollection?: PersistedCollection;
 }
 export declare function CollectionEditorDialog(props: CollectionEditorDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare function CollectionEditorDialogInternal<M extends {
-    [Key: string]: CMSType;
-}>({ isNewCollection, initialValues: initialValuesProp, configController, editedCollectionPath, parentCollectionIds, fullPath, collectionInference, handleClose, reservedGroups, extraView, handleCancel, setFormDirty, pathSuggestions, getUser, parentCollection, getData }: CollectionEditorDialogProps & {
+export declare function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
     handleCancel: () => void;
     setFormDirty: (dirty: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/CollectionEditorWelcomeView.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { EntityCollection } from "@firecms/core";
-export declare function CollectionEditorWelcomeView({ path, pathSuggestions, parentCollection, onContinue, collections }: {
+export declare function CollectionEditorWelcomeView({ path, pathSuggestions, parentCollection, onContinue, existingCollectionPaths }: {
     path: string;
     pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[]) => void;
-    collections?: EntityCollection[];
+    existingCollectionPaths?: string[];
 }): import("react/jsx-runtime").JSX.Element;
 export declare function TemplateButton({ title, subtitle, icon, onClick }: {
     title: string;

package/dist/ui/collection_editor/CollectionPropertiesEditorForm.d.ts

@@ -1,12 +1,11 @@
 import React from "react";
-import { FormikErrors } from "formik";
 import { EntityCollection, PropertyConfig, User } from "@firecms/core";
 import { PersistedCollection } from "../../types/persisted_collection";
 type CollectionEditorFormProps = {
     showErrors: boolean;
     isNewCollection: boolean;
     propertyErrorsRef?: React.MutableRefObject<any>;
-    onPropertyError: (propertyKey: string, namespace: string | undefined, error?: FormikErrors<any>) => void;
+    onPropertyError: (propertyKey: string, namespace: string | undefined, error?: Record<string, any>) => void;
     setDirty?: (dirty: boolean) => void;
     reservedGroups?: string[];
     extraIcon: React.ReactNode;

package/dist/ui/collection_editor/EnumForm.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { EnumValueConfig } from "@firecms/core";
 type EnumFormProps = {
     enumValues: EnumValueConfig[];
@@ -9,5 +8,5 @@ type EnumFormProps = {
     allowDataInference?: boolean;
     getData?: () => Promise<string[]>;
 };
-export declare const EnumForm: React.NamedExoticComponent<EnumFormProps>;
+export declare function EnumForm({ enumValues, onValuesChanged, onError, updateIds, disabled, allowDataInference, getData }: EnumFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/collection_editor/PropertyEditView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormikErrors, FormikProps } from "formik";
+import { FormexController } from "@firecms/formex";
 import { Property, PropertyConfig } from "@firecms/core";
 export type PropertyWithId = Property & {
     id?: string;
@@ -22,13 +22,13 @@ export type PropertyFormProps = {
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onPropertyChangedImmediate?: boolean;
     onDelete?: (id?: string, namespace?: string) => void;
-    onError?: (id: string, namespace?: string, error?: FormikErrors<any>) => void;
-    initialErrors?: FormikErrors<any>;
-    forceShowErrors?: boolean;
+    onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
+    initialErrors?: Record<string, any>;
     existingPropertyKeys?: string[];
+    forceShowErrors?: boolean;
     allowDataInference: boolean;
     getData?: () => Promise<object[]>;
-    getHelpers?: (formikProps: FormikProps<PropertyWithId>) => void;
+    getController?: (formex: FormexController<PropertyWithId>) => void;
     propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };

package/dist/ui/collection_editor/PropertyTree.d.ts

@@ -1,22 +1,23 @@
+import React from "react";
 import { AdditionalFieldDelegate, CMSType, PropertiesOrBuilders, PropertyOrBuilder } from "@firecms/core";
 import { DraggableProvided } from "@hello-pangea/dnd";
-export declare function PropertyTree<M extends {
+export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     [Key: string]: CMSType;
-}>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable, }: {
-    namespace?: string;
-    selectedPropertyKey?: string;
-    onPropertyClick?: (propertyKey: string, namespace?: string) => void;
+}>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable }: {
+    namespace?: string | undefined;
+    selectedPropertyKey?: string | undefined;
+    onPropertyClick?: ((propertyKey: string, namespace?: string) => void) | undefined;
     properties: PropertiesOrBuilders<M>;
-    propertiesOrder?: string[];
-    additionalFields?: AdditionalFieldDelegate<M>[];
+    propertiesOrder?: string[] | undefined;
+    additionalFields?: AdditionalFieldDelegate<M, import("@firecms/core").User>[] | undefined;
     errors: Record<string, any>;
-    onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
-    onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
-    className?: string;
-    inferredPropertyKeys?: string[];
+    onPropertyMove?: ((propertiesOrder: string[], namespace?: string) => void) | undefined;
+    onPropertyRemove?: ((propertyKey: string, namespace?: string) => void) | undefined;
+    className?: string | undefined;
+    inferredPropertyKeys?: string[] | undefined;
     collectionEditable: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable, }: {
+}) => import("react/jsx-runtime").JSX.Element)>;
+export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
     propertyKey: string;
     namespace?: string;
     propertyOrBuilder: PropertyOrBuilder;

package/dist/ui/collection_editor/SwitchControl.d.ts

@@ -0,0 +1,8 @@
+import { FormexFieldProps } from "@firecms/formex";
+export declare function SwitchControl({ field, form, label, tooltip, disabled, size, allowIndeterminate }: FormexFieldProps & {
+    label: string;
+    tooltip?: string;
+    disabled?: boolean;
+    size?: "small" | "medium";
+    allowIndeterminate?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/properties/CommonPropertyFields.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 type CommonPropertyFieldsProps = {
     showErrors: boolean;
     disabledId: boolean;
-    existingPropertyKeys?: string[];
     disabled: boolean;
     isNewProperty: boolean;
     autoUpdateId: boolean;

package/dist/ui/collection_editor/util.d.ts

@@ -2,3 +2,4 @@ export declare function idToPropertiesPath(id: string): string;
 export declare function namespaceToPropertiesPath(namespace?: string): string;
 export declare function namespaceToPropertiesOrderPath(namespace?: string): string;
 export declare function getFullId(propertyKey: string, propertyNamespace?: string): string;
+export declare function getFullIdPath(propertyKey: string, propertyNamespace?: string): string;

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.2-pre.2",
+  "version": "3.0.0-beta.2-pre.4",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_import_export": "^3.0.0-beta.2-pre.2",
-    "@firecms/schema_inference": "^3.0.0-beta.2-pre.2",
-    "@firecms/ui": "^3.0.0-beta.2-pre.2",
+    "@firecms/data_import_export": "^3.0.0-beta.2-pre.4",
+    "@firecms/formex": "^3.0.0-beta.2-pre.4",
+    "@firecms/schema_inference": "^3.0.0-beta.2-pre.4",
+    "@firecms/ui": "^3.0.0-beta.2-pre.4",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
@@ -72,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f3f62fc3cbc4f0d9d1a26817a14cff06393b7c2b"
+  "gitHead": "a947c08aada0e374aec7dff2b0dc9e540e170834"
 }

package/src/ConfigControllerProvider.tsx

@@ -80,7 +80,7 @@ export const ConfigControllerProvider = React.memo(
         const {
             collections
         } = navigation;
-        const existingPaths = collections.map(col => col.path.trim().toLowerCase());
+        const existingPaths = (collections ?? []).map(col => col.path.trim().toLowerCase());
 
         const [rootPathSuggestions, setRootPathSuggestions] = React.useState<string[] | undefined>();
         useEffect(() => {
@@ -94,7 +94,7 @@ export const ConfigControllerProvider = React.memo(
         const [currentDialog, setCurrentDialog] = React.useState<{
             isNewCollection: boolean,
             parentCollection?: PersistedCollection,
-            editedCollectionPath?: string,
+            editedCollectionId?: string,
             fullPath?: string,
             parentCollectionIds: string[],
             initialValues?: {
@@ -111,7 +111,7 @@ export const ConfigControllerProvider = React.memo(
             namespace?: string,
             parentCollection?: PersistedCollection,
             currentPropertiesOrder?: string[],
-            editedCollectionPath: string,
+            editedCollectionId: string,
             fullPath?: string,
             parentCollectionIds: string[],
             collectionEditable: boolean;
@@ -124,20 +124,20 @@ export const ConfigControllerProvider = React.memo(
         }), []);
 
         const editCollection = useCallback(({
-                                                path,
+                                                id,
                                                 fullPath,
                                                 parentCollectionIds,
                                                 parentCollection
                                             }: {
-            path?: string,
+            id?: string,
             fullPath?: string,
             parentCollectionIds: string[],
             parentCollection?: PersistedCollection
         }) => {
-            console.debug("edit collection", path, fullPath, parentCollectionIds, parentCollection);
-            onAnalyticsEvent?.("edit_collection", { path, fullPath });
+            console.debug("Edit collection", id, fullPath, parentCollectionIds, parentCollection);
+            onAnalyticsEvent?.("edit_collection", { id, fullPath });
             setCurrentDialog({
-                editedCollectionPath: path,
+                editedCollectionId: id,
                 fullPath,
                 parentCollectionIds,
                 isNewCollection: false,
@@ -149,7 +149,7 @@ export const ConfigControllerProvider = React.memo(
         const editProperty = useCallback(({
                                               propertyKey,
                                               property,
-                                              editedCollectionPath,
+                                              editedCollectionId,
                                               currentPropertiesOrder,
                                               parentCollectionIds,
                                               collection
@@ -157,12 +157,12 @@ export const ConfigControllerProvider = React.memo(
             propertyKey?: string,
             property?: Property,
             currentPropertiesOrder?: string[],
-            editedCollectionPath: string,
+            editedCollectionId: string,
             parentCollectionIds: string[],
             collection: PersistedCollection,
         }) => {
-            console.debug("edit property", propertyKey, property, editedCollectionPath, currentPropertiesOrder, parentCollectionIds, collection);
-            onAnalyticsEvent?.("edit_property", { propertyKey, editedCollectionPath });
+            console.debug("edit property", propertyKey, property, editedCollectionId, currentPropertiesOrder, parentCollectionIds, collection);
+            onAnalyticsEvent?.("edit_property", { propertyKey, editedCollectionId });
             // namespace is all the path until the last dot
             const namespace = propertyKey && propertyKey.includes(".")
                 ? propertyKey.substring(0, propertyKey.lastIndexOf("."))
@@ -175,7 +175,7 @@ export const ConfigControllerProvider = React.memo(
                 property,
                 namespace,
                 currentPropertiesOrder,
-                editedCollectionPath,
+                editedCollectionId: editedCollectionId,
                 parentCollectionIds,
                 collectionEditable: collection?.editable ?? false
             });
@@ -185,7 +185,8 @@ export const ConfigControllerProvider = React.memo(
                                                         parentCollectionIds,
                                                         parentCollection,
                                                         initialValues,
-                                                        redirect
+                                                        redirect,
+                                                        sourceClick
                                                     }: {
             parentCollectionIds: string[],
             parentCollection?: PersistedCollection
@@ -194,10 +195,11 @@ export const ConfigControllerProvider = React.memo(
                 path?: string,
                 name?: string
             },
-            redirect: boolean
+            redirect: boolean,
+            sourceClick?: string
         }) => {
-            console.debug("create collection", parentCollectionIds, parentCollection, initialValues, redirect);
-            onAnalyticsEvent?.("create_collection", { parentCollectionIds, parentCollection, initialValues, redirect });
+            console.debug("Create collection", { parentCollectionIds, parentCollection, initialValues, redirect, sourceClick });
+            onAnalyticsEvent?.("create_collection", { parentCollectionIds, parentCollection, initialValues, redirect, sourceClick });
             setCurrentDialog({
                 isNewCollection: true,
                 parentCollectionIds,
@@ -260,10 +262,10 @@ export const ConfigControllerProvider = React.memo(
                         autoOpenTypeSelect={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
                         inArray={false}
                         collectionEditable={currentPropertyDialog?.collectionEditable ?? false}
-                        getData={getData && currentPropertyDialog?.editedCollectionPath
+                        getData={getData && currentPropertyDialog?.editedCollectionId
                             ? () => {
-                                console.debug("get data for property", currentPropertyDialog?.editedCollectionPath);
-                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionPath!)
+                                console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
+                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId!)
                                 return getData(resolvedPath, []);
                             }
                             : undefined}
@@ -275,7 +277,7 @@ export const ConfigControllerProvider = React.memo(
                             if (!id) return;
                             const newProperty = !(currentPropertyDialog.propertyKey);
                             return collectionConfigController.saveProperty({
-                                path: currentPropertyDialog?.editedCollectionPath,
+                                path: currentPropertyDialog?.editedCollectionId,
                                 property,
                                 propertyKey: id,
                                 newPropertiesOrder: newProperty && currentPropertyDialog.currentPropertiesOrder ? [...currentPropertyDialog.currentPropertiesOrder, id] : undefined,
@@ -296,7 +298,7 @@ export const ConfigControllerProvider = React.memo(
                             if (!currentPropertyDialog?.propertyKey) return;
                             const newPropertiesOrder = currentPropertyDialog?.currentPropertiesOrder?.filter(p => p !== currentPropertyDialog?.propertyKey);
                             return collectionConfigController.deleteProperty({
-                                path: currentPropertyDialog?.editedCollectionPath,
+                                path: currentPropertyDialog?.editedCollectionId,
                                 propertyKey: currentPropertyDialog?.propertyKey,
                                 namespace: currentPropertyDialog?.namespace,
                                 newPropertiesOrder,

package/src/types/collection_editor_controller.tsx

@@ -9,7 +9,7 @@ import { PersistedCollection } from "./persisted_collection";
 export interface CollectionEditorController {
 
     editCollection: (props: {
-        path?: string,
+        id?: string,
         fullPath?: string,
         parentCollectionIds: string[],
         parentCollection?: PersistedCollection
@@ -23,14 +23,15 @@ export interface CollectionEditorController {
         },
         parentCollectionIds: string[],
         parentCollection?: PersistedCollection,
-        redirect: boolean
+        redirect: boolean,
+        sourceClick?: string
     }) => void;
 
     editProperty: (props: {
         propertyKey?: string,
         property?: Property,
         currentPropertiesOrder?: string[],
-        editedCollectionPath: string,
+        editedCollectionId: string,
         parentCollectionIds: string[],
         collection: PersistedCollection
     }) => void;

package/src/types/config_controller.tsx

@@ -26,14 +26,14 @@ export interface CollectionsConfigController {
 export type UpdateCollectionParams<M extends Record<string, any>> = {
     id: string,
     collectionData: Partial<PersistedCollection<M>>,
-    previousPath?: string,
+    previousId?: string,
     parentCollectionIds?: string[]
 }
 
 export type SaveCollectionParams<M extends Record<string, any>> = {
     id: string,
     collectionData: PersistedCollection<M>,
-    previousPath?: string,
+    previousId?: string,
     parentCollectionIds?: string[]
 }
 
@@ -55,6 +55,6 @@ export type DeletePropertyParams = {
 }
 
 export type DeleteCollectionParams = {
-    path: string,
+    id: string,
     parentCollectionIds?: string[]
 }

package/src/ui/CollectionViewHeaderAction.tsx

@@ -30,7 +30,7 @@ export function CollectionViewHeaderAction({
                     collectionEditorController.editProperty({
                         propertyKey,
                         property,
-                        editedCollectionPath: fullPath,
+                        editedCollectionId: collection.id,
                         parentCollectionIds,
                         collection
                     });

package/src/ui/EditorCollectionAction.tsx

@@ -39,7 +39,7 @@ export function EditorCollectionAction({
     if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.initialFilter)) ||
         !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
         saveDefaultFilterButton = <>
-            {collection.initialFilter || collection.initialSort && <Tooltip
+            {(collection.initialFilter || collection.initialSort) && <Tooltip
                 title={"Reset to default filter and sort"}>
                 <Button
                     color={"primary"}
@@ -64,7 +64,7 @@ export function EditorCollectionAction({
                     variant={"outlined"}
                     onClick={() => configController
                         ?.saveCollection({
-                            id: collection.path,
+                            id: collection.id,
                             parentCollectionIds,
                             collectionData: mergeDeep(collection as PersistedCollection,
                                 {
@@ -89,7 +89,7 @@ export function EditorCollectionAction({
             color={"primary"}
             disabled={!canEditCollection}
             onClick={canEditCollection
-                ? () => collectionEditorController?.editCollection({ path: collection.path, fullPath, parentCollectionIds, parentCollection: parentCollection as PersistedCollection })
+                ? () => collectionEditorController?.editCollection({ id: collection.id, fullPath, parentCollectionIds, parentCollection: parentCollection as PersistedCollection })
                 : undefined}>
             <SettingsIcon/>
         </IconButton>

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -25,13 +25,13 @@ export function HomePageEditorCollectionAction({
     });
 
     const onEditCollectionClicked = useCallback(() => {
-        collectionEditorController?.editCollection({ path, parentCollectionIds: [] });
+        collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
     }, [collectionEditorController, path]);
 
     const [deleteRequested, setDeleteRequested] = useState(false);
 
     const deleteCollection = useCallback(() => {
-        configController?.deleteCollection({ path }).then(() => {
+        configController?.deleteCollection({ id: collection.id }).then(() => {
             setDeleteRequested(false);
             snackbarController.open({
                 message: "Collection deleted",

package/src/ui/MissingReferenceWidget.tsx

@@ -16,7 +16,8 @@ export function MissingReferenceWidget({ path: pathProp }: {
                     collectionEditor.createCollection({
                         initialValues: { path, name: unslugify(path) },
                         parentCollectionIds,
-                        redirect: false
+                        redirect: false,
+                        sourceClick: "missing_reference"
                     });
                 }}>
             Create

package/src/ui/NewCollectionButton.tsx

@@ -7,9 +7,9 @@ export function NewCollectionButton() {
                    variant={"outlined"}
                    onClick={() => collectionEditorController.createCollection({
                        parentCollectionIds: [],
-                       redirect: true
-                   })
-                   }>
+                       redirect: true,
+                       sourceClick: "new_collection_button"
+                   })}>
         <AddIcon/>
         New collection
     </Button>

package/src/ui/NewCollectionCard.tsx

@@ -25,7 +25,8 @@ export function NewCollectionCard({
                   ? () => collectionEditorController.createCollection({
                       initialValues: group ? { group } : undefined,
                       parentCollectionIds: [],
-                      redirect: true
+                      redirect: true,
+                      sourceClick: "new_collection_card"
                   })
                   : undefined}>
 

package/src/ui/PropertyAddColumnComponent.tsx

@@ -29,7 +29,7 @@ export function PropertyAddColumnComponent({
                 // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({
-                        editedCollectionPath: fullPath,
+                        editedCollectionId: collection.id,
                         parentCollectionIds,
                         currentPropertiesOrder: getDefaultPropertiesOrder(collection),
                         collection

package/src/ui/RootCollectionSuggestions.tsx

@@ -17,7 +17,7 @@ export function RootCollectionSuggestions() {
 
     const rootPathSuggestions = collectionEditorController.rootPathSuggestions ?? [];
 
-    const showSuggestions = rootPathSuggestions.length > 3 || (navigationController.collections.length === 0 && rootPathSuggestions.length > 0);
+    const showSuggestions = rootPathSuggestions.length > 3 || ((navigationController.collections ?? []).length === 0 && rootPathSuggestions.length > 0);
     return <Collapse
         in={showSuggestions}>
 
@@ -40,7 +40,8 @@ export function RootCollectionSuggestions() {
                                     ? () => collectionEditorController.createCollection({
                                         initialValues: { path, name: unslugify(path) },
                                         parentCollectionIds: [],
-                                        redirect: true
+                                        redirect: true,
+                                        sourceClick: "root_collection_suggestion"
                                     })
                                     : undefined}
                                 size="small">

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -19,9 +19,9 @@ import {
     Typography,
     useAutoComplete
 } from "@firecms/ui";
-import { Field, getIn, useFormikContext } from "formik";
 
 import { FieldHelperView } from "./properties/FieldHelperView";
+import { useFormex, Field, getIn } from "@firecms/formex";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -50,7 +50,7 @@ export function CollectionDetailsForm({
         setFieldTouched,
         isSubmitting,
         submitCount
-    } = useFormikContext<EntityCollection>();
+    } = useFormex<EntityCollection>();
 
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
     const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);