@firecms/collection_editor 3.0.0-canary.2 → 3.0.0-canary.21

package/dist/types/persisted_collection.d.ts

@@ -1,6 +1,6 @@
 import { EntityCollection, User } from "@firecms/core";
 export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User> = Omit<EntityCollection<M, UserType>, "subcollections"> & {
-    ownerId: string;
+    ownerId?: string;
     subcollections?: PersistedCollection<any, any>[];
     editable?: boolean;
 };

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

@@ -30,7 +30,7 @@ export interface CollectionEditorDialogProps {
     parentCollection?: PersistedCollection;
 }
 export declare function CollectionEditorDialog(props: CollectionEditorDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
+export declare function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void;
     setFormDirty: (dirty: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/utils/supported_fields.d.ts

@@ -1,3 +1,3 @@
-import { FieldConfigId, PropertyConfig } from "@firecms/core";
-export declare const supportedFieldsIds: FieldConfigId[];
+import { PropertyConfigId, PropertyConfig } from "@firecms/core";
+export declare const supportedFieldsIds: PropertyConfigId[];
 export declare const supportedFields: Record<string, PropertyConfig>;

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-canary.2",
+  "version": "3.0.0-canary.21",
   "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-canary.2",
-    "@firecms/formex": "^3.0.0-canary.2",
-    "@firecms/schema_inference": "^3.0.0-canary.2",
-    "@firecms/ui": "^3.0.0-canary.2",
+    "@firecms/data_import_export": "^3.0.0-canary.21",
+    "@firecms/formex": "^3.0.0-canary.21",
+    "@firecms/schema_inference": "^3.0.0-canary.21",
+    "@firecms/ui": "^3.0.0-canary.21",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.12.0",
-    "react-router-dom": "^6.12.0"
+    "react-router": "^6.22.0",
+    "react-router-dom": "^6.22.0"
   },
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js",
-      "types": "./dist/src/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
     "./package.json": "./package.json"
   },
@@ -54,24 +54,24 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@types/react": "^18.2.54",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "react-router": "^6.22.0",
     "react-router-dom": "^6.22.0",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.3",
     "vite-plugin-fonts": "^0.7.0"
   },
   "files": [
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "24234382207c741094a561eb4b94a416f00e6b74"
+  "gitHead": "e451246cf15bdd8d934b5e2a70d86f606f6292f5"
 }

package/src/ConfigControllerProvider.tsx

@@ -161,7 +161,7 @@ export const ConfigControllerProvider = React.memo(
             parentCollectionIds: string[],
             collection: PersistedCollection,
         }) => {
-            console.debug("edit property", propertyKey, property, editedCollectionId, currentPropertiesOrder, parentCollectionIds, collection);
+            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(".")

package/src/types/persisted_collection.ts

@@ -3,7 +3,7 @@ import { EntityCollection, User } from "@firecms/core";
 export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User>
     = Omit<EntityCollection<M, UserType>, "subcollections"> & {
     // properties: Properties<M>;
-    ownerId: string;
+    ownerId?: string;
     subcollections?: PersistedCollection<any, any>[];
     editable?: boolean;
 }

package/src/ui/MissingReferenceWidget.tsx

@@ -11,7 +11,8 @@ export function MissingReferenceWidget({ path: pathProp }: {
     const collectionEditor = useCollectionEditorController();
     return <div className={"p-1 flex flex-col items-center"}>
         <ErrorView error={"No collection for path: " + path}/>
-        <Button className={"mx-2"} variant={"outlined"} size={"small"}
+        <Button className={"mx-2"} variant={"outlined"}
+                size={"small"}
                 onClick={() => {
                     collectionEditor.createCollection({
                         initialValues: { path, name: unslugify(path) },

package/src/ui/NewCollectionButton.tsx

@@ -3,14 +3,16 @@ import { useCollectionEditorController } from "../useCollectionEditorController"
 
 export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
-    return <Button className={"min-w-fit"}
-                   variant={"outlined"}
-                   onClick={() => collectionEditorController.createCollection({
-                       parentCollectionIds: [],
-                       redirect: true,
-                       sourceClick: "new_collection_button"
-                   })}>
-        <AddIcon/>
-        New collection
-    </Button>
+    return <div className={"bg-gray-50 dark:bg-gray-900 min-w-fit rounded"}>
+        <Button className={"min-w-fit"}
+                variant={"outlined"}
+                onClick={() => collectionEditorController.createCollection({
+                    parentCollectionIds: [],
+                    redirect: true,
+                    sourceClick: "new_collection_button"
+                })}>
+            <AddIcon/>
+            New collection
+        </Button>
+    </div>
 }

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { EntityCollection, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
+import { EntityCollection, FieldCaption, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
 import {
     Autocomplete,
     AutocompleteItem,
@@ -20,7 +20,6 @@ import {
     useAutoComplete
 } from "@firecms/ui";
 
-import { FieldHelperView } from "./properties/FieldHelperView";
 import { Field, getIn, useFormex } from "@firecms/formex";
 
 export function CollectionDetailsForm({
@@ -142,9 +141,9 @@ export function CollectionDetailsForm({
                             label={"Name"}
                             required
                             error={showErrors && Boolean(errors.name)}/>
-                        <FieldHelperView error={touched.name && Boolean(errors.name)}>
+                        <FieldCaption error={touched.name && Boolean(errors.name)}>
                             {touched.name && Boolean(errors.name) ? errors.name : "Name of in this collection, usually a plural name (e.g. Products)"}
-                        </FieldHelperView>
+                        </FieldCaption>
                     </div>
 
                     <div className={cn("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
@@ -155,11 +154,11 @@ export function CollectionDetailsForm({
                                required
                                error={showErrors && Boolean(errors.path)}/>
 
-                        <FieldHelperView error={touched.path && Boolean(errors.path)}>
+                        <FieldCaption error={touched.path && Boolean(errors.path)}>
                             {touched.path && Boolean(errors.path)
                                 ? errors.path
                                 : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database"}
-                        </FieldHelperView>
+                        </FieldCaption>
 
                     </div>
 
@@ -190,9 +189,9 @@ export function CollectionDetailsForm({
                                 </AutocompleteItem>;
                             })}
                         </Autocomplete>
-                        <FieldHelperView>
+                        <FieldCaption>
                             {showErrors && Boolean(errors.group) ? errors.group : "Group of the collection"}
-                        </FieldHelperView>
+                        </FieldCaption>
                     </div>}
 
                     <div className={"col-span-12"}>
@@ -216,9 +215,9 @@ export function CollectionDetailsForm({
                                            disabled={!isNewCollection}
                                            label={"Collection id"}
                                            error={showErrors && Boolean(errors.id)}/>
-                                    <FieldHelperView error={touched.id && Boolean(errors.id)}>
+                                    <FieldCaption error={touched.id && Boolean(errors.id)}>
                                         {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection"}
-                                    </FieldHelperView>
+                                    </FieldCaption>
                                 </div>
 
                                 <div className={"col-span-12"}>
@@ -232,9 +231,9 @@ export function CollectionDetailsForm({
                                         }}
                                         value={values.singularName ?? ""}
                                         label={"Singular name"}/>
-                                    <FieldHelperView error={showErrors && Boolean(errors.singularName)}>
+                                    <FieldCaption error={showErrors && Boolean(errors.singularName)}>
                                         {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
-                                    </FieldHelperView>
+                                    </FieldCaption>
                                 </div>
                                 <div className={"col-span-12"}>
                                     <TextField
@@ -247,9 +246,9 @@ export function CollectionDetailsForm({
                                         aria-describedby="description-helper-text"
                                         label="Description"
                                     />
-                                    <FieldHelperView error={showErrors && Boolean(errors.description)}>
+                                    <FieldCaption error={showErrors && Boolean(errors.description)}>
                                         {showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
-                                    </FieldHelperView>
+                                    </FieldCaption>
                                 </div>
 
                                 <div className={"col-span-12"}>
@@ -316,11 +315,11 @@ export function CollectionDetailsForm({
                                         onValueChange={(v) => setFieldValue("collectionGroup", v)}
                                         value={values.collectionGroup ?? false}
                                     />
-                                    <FieldHelperView>
+                                    <FieldCaption>
                                         A collection group consists of all collections with the same path. This allows
                                         you
                                         to query over multiple collections at once.
-                                    </FieldHelperView>
+                                    </FieldCaption>
                                 </div>
                                 <div className={"col-span-12"}>
                                     <BooleanSwitchWithLabel
@@ -329,11 +328,11 @@ export function CollectionDetailsForm({
                                         onValueChange={(v) => setFieldValue("textSearchEnabled", v)}
                                         value={values.textSearchEnabled ?? false}
                                     />
-                                    <FieldHelperView>
+                                    <FieldCaption>
                                         Allow text search for this collection. If you have not specified a text search
                                         delegate, this will use the built-in local text search. This is not recommended
                                         for large collections, as it may incur in performance and cost issues.
-                                    </FieldHelperView>
+                                    </FieldCaption>
                                 </div>
                             </div>
                         </ExpandablePanel>

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -136,7 +136,7 @@ type EditorView = "welcome"
     | "extra_view"
     | "subcollections";
 
-export function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
+export function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void,
     setFormDirty: (dirty: boolean) => void
 }) {
@@ -154,14 +154,14 @@ export function CollectionEditor<M extends Record<string, any>>(props: Collectio
     const collectionsInThisLevel = (props.parentCollection ? props.parentCollection.subcollections : collections) ?? [];
     const existingPaths = collectionsInThisLevel.map(col => col.path.trim().toLowerCase());
     const existingIds = collectionsInThisLevel.map(col => col.id?.trim().toLowerCase()).filter(Boolean) as string[];
-    const [collection, setCollection] = React.useState<PersistedCollection<M> | undefined>();
+    const [collection, setCollection] = React.useState<PersistedCollection<any> | undefined>();
     const [initialLoadingCompleted, setInitialLoadingCompleted] = React.useState(false);
 
     useEffect(() => {
         try {
             if (navigation.initialised) {
                 if (props.editedCollectionId) {
-                    setCollection(navigation.getCollectionFromPaths<PersistedCollection<M>>([...(props.parentCollectionIds ?? []), props.editedCollectionId]));
+                    setCollection(navigation.getCollectionFromPaths([...(props.parentCollectionIds ?? []), props.editedCollectionId]));
                 } else {
                     setCollection(undefined);
                 }
@@ -186,14 +186,14 @@ export function CollectionEditor<M extends Record<string, any>>(props: Collectio
         }
         : undefined;
 
-    const initialValues: PersistedCollection<M> = initialCollection
+    const initialValues: PersistedCollection<any> = initialCollection
         ? applyPropertyConfigs(initialCollection, propertyConfigs)
         : {
             id: initialValuesProp?.path ?? randomString(16),
             path: initialValuesProp?.path ?? "",
             name: initialValuesProp?.name ?? "",
             group: initialValuesProp?.group ?? "",
-            properties: {} as PropertiesOrBuilders<M>,
+            properties: {} as PropertiesOrBuilders,
             propertiesOrder: [],
             icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
             ownerId: authController.user?.uid ?? ""
@@ -473,7 +473,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         submitCount
     } = formController;
 
-    const path = values.path ?? editedCollectionId;
+    // TODO: getting data is only working in root collections with this code
+    const path = values.path;
     const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
     const pathError = validatePath(path, isNewCollection, existingPaths, values.id);
 
@@ -575,6 +576,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "import_data_saving" && importConfig &&
                         <ImportSaveInProgress importConfig={importConfig}
                                               collection={values}
+                                              path={path}
                                               onImportSuccess={async (importedCollection) => {
                                                   snackbarController.open({
                                                       type: "info",
@@ -733,9 +735,11 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 function applyPropertyConfigs<M extends Record<string, any> = any>(collection: PersistedCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): PersistedCollection<M> {
     const { properties, ...rest } = collection;
     const propertiesResult: PropertiesOrBuilders<any> = {};
-    Object.keys(properties).forEach((key) => {
-        propertiesResult[key] = applyPropertiesConfig(properties[key] as PropertyOrBuilder, propertyConfigs);
-    });
+    if (properties) {
+        Object.keys(properties).forEach((key) => {
+            propertiesResult[key] = applyPropertiesConfig(properties[key] as PropertyOrBuilder, propertyConfigs);
+        });
+    }
 
     return { ...rest, properties: propertiesResult };
 }

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -190,7 +190,7 @@ export function TemplateButton({
                 onClick={onClick}
                 className={cn(
                     "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
-                    "text-gray-700 dark:text-gray-300",
+                    "text-gray-700 dark:text-slate-300",
                     "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
                     "border-gray-400 dark:border-gray-600 "
                 )}

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -301,7 +301,7 @@ export function CollectionPropertiesEditorForm({
         ? values.propertiesOrder
         : Object.keys(values.properties)) as string[];
 
-    const owner = useMemo(() => getUser(values.ownerId), [getUser, values.ownerId]);
+    const owner = useMemo(() => values.ownerId ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
 
     const onPropertyClick = useCallback((propertyKey: string, namespace?: string) => {
         console.debug("CollectionEditor: onPropertyClick", {

package/src/ui/collection_editor/EnumForm.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import equal from "react-fast-compare"
 
-import { ArrayContainer, EnumValueConfig, EnumValues, } from "@firecms/core";
+import { ArrayContainer, EnumValueConfig, EnumValues, FieldCaption, } from "@firecms/core";
 import {
     AutoAwesomeIcon,
     Badge,
@@ -17,7 +17,6 @@ import {
     SettingsIcon,
     Typography
 } from "@firecms/ui";
-import { FieldHelperView } from "./properties/FieldHelperView";
 import { extractEnumFromValues } from "@firecms/schema_inference";
 import { Field, Formex, getIn, useCreateFormex, useFormex } from "@firecms/formex";
 
@@ -337,9 +336,9 @@ function EnumEntryDialog({
                            autoComplete="off"
                            error={Boolean(idError)}/>
 
-                    <FieldHelperView error={Boolean(idError)}>
+                    <FieldCaption error={Boolean(idError)}>
                         {idError ?? "Value saved in the data source"}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>}
         </DialogContent>
 

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -5,7 +5,7 @@ import { Formex, FormexController, getIn, useCreateFormex } from "@firecms/forme
 import {
     DEFAULT_FIELD_CONFIGS,
     DeleteConfirmationDialog,
-    FieldConfigId,
+    PropertyConfigId,
     getFieldConfig,
     getFieldId,
     isPropertyBuilder,
@@ -375,7 +375,7 @@ function PropertyEditFormFields({
         }
     }, [errors, onError, propertyNamespace, values?.id]);
 
-    const onWidgetSelectChanged = (newSelectedWidgetId: FieldConfigId) => {
+    const onWidgetSelectChanged = (newSelectedWidgetId: PropertyConfigId) => {
         setSelectedFieldConfigId(newSelectedWidgetId);
         setValues(updatePropertyFromWidget(values, newSelectedWidgetId, propertyConfigs));
         // Ugly hack to autofocus the name field
@@ -495,7 +495,7 @@ function PropertyEditFormFields({
                                 return <em>Select a property
                                     widget</em>;
                             }
-                            const key = value as FieldConfigId;
+                            const key = value as PropertyConfigId;
                             const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
                             const baseProperty = propertyConfig.property;
                             const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
@@ -524,7 +524,7 @@ function PropertyEditFormFields({
                             </div>
                         }}
                         onValueChange={(value) => {
-                            onWidgetSelectChanged(value as FieldConfigId);
+                            onWidgetSelectChanged(value as PropertyConfigId);
                         }}>
                         {displayedWidgets.map(([key, propertyConfig]) => {
                             const baseProperty = propertyConfig.property;

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -149,7 +149,7 @@ export function CollectionEditorImportMapping({
                                           idColumn={importConfig.idColumn}
                                           originProperties={importConfig.originProperties}
                                           destinationProperties={values.properties as Properties}
-                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value)}
+                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
                                           buildPropertyView={({
                                                                   property,
                                                                   propertyKey,

package/src/ui/collection_editor/properties/CommonPropertyFields.tsx

@@ -2,8 +2,7 @@ import { Field, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { PropertyWithId } from "../PropertyEditView";
 import React from "react";
-import { FieldHelperView } from "./FieldHelperView";
-import { toSnakeCase, unslugify } from "@firecms/core";
+import { FieldCaption, toSnakeCase, unslugify } from "@firecms/core";
 
 type CommonPropertyFieldsProps = {
     showErrors: boolean,
@@ -64,9 +63,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                         disabled={disabled}
                         error={Boolean(nameError)}/>
 
-                    <FieldHelperView error={Boolean(nameError)}>
+                    <FieldCaption error={Boolean(nameError)}>
                         {nameError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
                 <div>
@@ -88,9 +87,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                         required
                         size="small"
                         error={Boolean(idError)}/>
-                    <FieldHelperView error={Boolean(idError)}>
+                    <FieldCaption error={Boolean(idError)}>
                         {idError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
                 <div>
@@ -99,9 +98,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                            label={"Description"}
                            disabled={disabled}
                            error={Boolean(descriptionError)}/>
-                    <FieldHelperView error={Boolean(descriptionError)}>
+                    <FieldCaption error={Boolean(descriptionError)}>
                         {descriptionError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
             </div>

package/src/ui/collection_editor/properties/DateTimePropertyField.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { getIn, useFormex } from "@firecms/formex";
-import { NumberProperty, StringProperty } from "@firecms/core";
+import { FieldCaption, NumberProperty, StringProperty } from "@firecms/core";
 import { Select, SelectItem } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function DateTimePropertyField({ disabled }: {
     disabled: boolean;
@@ -47,14 +46,14 @@ export function DateTimePropertyField({ disabled }: {
                     <SelectItem value={"date_time"}> Date/Time </SelectItem>
                     <SelectItem value={"date"}> Date </SelectItem>
                 </Select>
-                <FieldHelperView error={Boolean(modeError)}>
+                <FieldCaption error={Boolean(modeError)}>
                     {modeError}
-                </FieldHelperView>
+                </FieldCaption>
 
                 <Select name={autoValuePath}
                         disabled={disabled}
                         value={autoValueValue ?? ""}
-                        onValueChange={(v) => setFieldValue(autoValuePath, v)}
+                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
                         renderValue={(v) => {
                             switch (v) {
                                 case "on_create":
@@ -67,13 +66,13 @@ export function DateTimePropertyField({ disabled }: {
                         }}
                         error={Boolean(autoValueError)}
                         label={"Automatic value"}>
-                    <SelectItem value={""}> None </SelectItem>
+                    <SelectItem value={"none"}> None </SelectItem>
                     <SelectItem value={"on_create"}> On create </SelectItem>
                     <SelectItem value={"on_update"}> On any update </SelectItem>
                 </Select>
-                <FieldHelperView error={Boolean(autoValueError)}>
+                <FieldCaption error={Boolean(autoValueError)}>
                     {autoValueError ?? "Update this field automatically when creating or updating the entity"}
-                </FieldHelperView>
+                </FieldCaption>
 
             </div>
 

package/src/ui/collection_editor/properties/MapPropertyField.tsx

@@ -1,11 +1,10 @@
 import React, { useCallback, useState } from "react";
-import { MapProperty, Property, PropertyConfig, } from "@firecms/core";
+import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
 import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getIn, useFormex } from "@firecms/formex";
 import { PropertyTree } from "../PropertyTree";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function MapPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
     disabled: boolean;
@@ -113,9 +112,9 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     onValueChange={(v) => setFieldValue("spreadChildren", v)}
                     value={values.spreadChildren ?? false}
                 />
-                <FieldHelperView>
+                <FieldCaption>
                     Set this flag to true if you want to display the children of this group as individual columns.
-                </FieldHelperView>
+                </FieldCaption>
             </div>
 
             <PropertyFormDialog

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Field, getIn, useFormex } from "@firecms/formex";
-import { IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
+import { FieldCaption, IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
 import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function ReferencePropertyField({
                                            existing,
@@ -152,10 +151,10 @@ export function CollectionsSelect({
 
             </Select>
 
-            <FieldHelperView>
+            <FieldCaption>
                 You can only edit the reference collection upon field
                 creation.
-            </FieldHelperView>
+            </FieldCaption>
         </>
     );
 }

package/src/ui/collection_editor/properties/validation/StringPropertyValidation.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 
 import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
-import { serializeRegExp } from "@firecms/core";
+import { FieldCaption, serializeRegExp } from "@firecms/core";
 import { DebouncedTextField, } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
-import { FieldHelperView } from "../FieldHelperView";
 import { SwitchControl } from "../../SwitchControl";
 
 export function StringPropertyValidation({
@@ -140,9 +139,9 @@ export function StringPropertyValidation({
                        disabled={disabled}
                        value={matchesStringValue}
                        error={Boolean(matchesError)}/>
-                <FieldHelperView error={Boolean(matchesError)}>
+                <FieldCaption error={Boolean(matchesError)}>
                     {matchesError ? "Not a valid regexp" : "e.g. /^\\d+$/ for digits only"}
-                </FieldHelperView>
+                </FieldCaption>
             </div>}
 
         </div>