@firecms/collection_editor 3.0.0-beta.10 → 3.0.0-beta.11

package/dist/types/config_permissions.d.ts

@@ -1,6 +1,6 @@
 import { EntityCollection } from "@firecms/core";
-export type CollectionEditorPermissionsBuilder<UserType = any, EC extends EntityCollection = EntityCollection> = (params: {
-    user: UserType | null;
+export type CollectionEditorPermissionsBuilder<USER = any, EC extends EntityCollection = EntityCollection> = (params: {
+    user: USER | null;
     collection?: EC;
 }) => CollectionEditorPermissions;
 export type CollectionEditorPermissions = {

package/dist/types/persisted_collection.d.ts

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

package/dist/useCollectionEditorPlugin.d.ts

@@ -4,7 +4,7 @@ import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
-export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
+export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
     /**
      * Firebase app where the configuration is saved.
      */
@@ -12,7 +12,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     /**
      * Define what actions can be performed on the configuration.
      */
-    configPermissions?: CollectionEditorPermissionsBuilder<UserType, EC>;
+    configPermissions?: CollectionEditorPermissionsBuilder<USER, EC>;
     /**
      * The words you define here will not be allowed to be used as group
      * names when creating collections.
@@ -28,7 +28,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     getPathSuggestions?: (path?: string) => Promise<string[]>;
     collectionInference?: CollectionInference;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
-    getUser?: (uid: string) => UserType | null;
+    getUser?: (uid: string) => USER | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
     components?: {
         /**
@@ -51,5 +51,5 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent, components }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent, components }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
 export declare function IntroWidget({}: {}): import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.11",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-beta.10",
-    "@firecms/data_import": "^3.0.0-beta.10",
-    "@firecms/data_import_export": "^3.0.0-beta.10",
-    "@firecms/formex": "^3.0.0-beta.10",
-    "@firecms/schema_inference": "^3.0.0-beta.10",
-    "@firecms/ui": "^3.0.0-beta.10",
+    "@firecms/data_export": "^3.0.0-beta.11",
+    "@firecms/data_import": "^3.0.0-beta.11",
+    "@firecms/data_import_export": "^3.0.0-beta.11",
+    "@firecms/formex": "^3.0.0-beta.11",
+    "@firecms/schema_inference": "^3.0.0-beta.11",
+    "@firecms/ui": "^3.0.0-beta.11",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.25.1",
-    "react-router-dom": "^6.25.1"
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0"
   },
   "exports": {
     ".": {
@@ -51,14 +51,16 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-react-compiler": "beta",
+    "eslint-plugin-react-compiler": "beta",
     "jest": "^29.7.0",
-    "react-router": "^6.26.2",
-    "react-router-dom": "^6.26.2",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8"
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11"
   },
   "files": [
     "dist",
@@ -67,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f844c3f86094efec6c33313c3f106f30cdcd309f"
+  "gitHead": "cb6d419faf2664cfd6cb2603a834e4bf499a92bb"
 }

package/src/types/config_permissions.ts

@@ -1,6 +1,6 @@
 import { EntityCollection } from "@firecms/core";
 
-export type CollectionEditorPermissionsBuilder<UserType = any, EC extends EntityCollection = EntityCollection> = (params: { user: UserType | null, collection?: EC }) => CollectionEditorPermissions;
+export type CollectionEditorPermissionsBuilder<USER = any, EC extends EntityCollection = EntityCollection> = (params: { user: USER | null, collection?: EC }) => CollectionEditorPermissions;
 
 export type CollectionEditorPermissions = {
     /**

package/src/types/persisted_collection.ts

@@ -1,8 +1,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>;
+export type PersistedCollection<M extends Record<string, any> = any, USER extends User = User>
+    = Omit<EntityCollection<M, USER>, "subcollections"> & {
     ownerId?: string;
     subcollections?: PersistedCollection<any, any>[];
     editable?: boolean;

package/src/ui/CollectionViewHeaderAction.tsx

@@ -29,7 +29,7 @@ export function CollectionViewHeaderAction({
             asChild={true}
             title={"Edit"}>
             <IconButton
-                className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
+                className={onHover ? "bg-white dark:bg-surface-950" : "hidden"}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         propertyKey,

package/src/ui/NewCollectionButton.tsx

@@ -3,7 +3,7 @@ import { useCollectionEditorController } from "../useCollectionEditorController"
 
 export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
-    return <div className={"bg-gray-50 dark:bg-gray-900 min-w-fit rounded"}>
+    return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded"}>
         <Button className={"min-w-fit"}
                 variant={"outlined"}
                 onClick={() => collectionEditorController.createCollection({

package/src/ui/PropertyAddColumnComponent.tsx

@@ -29,8 +29,8 @@ export function PropertyAddColumnComponent({
             asChild={true}
             title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950"}
-                // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950"}
+                // className={onHover ? "bg-white dark:bg-surface-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         editedCollectionId: collection.id,

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -5,7 +5,7 @@ import {
     AutocompleteItem,
     BooleanSwitchWithLabel,
     Chip,
-    ClearIcon,
+    CloseIcon,
     cls,
     Container,
     DebouncedTextField,
@@ -214,7 +214,7 @@ export function CollectionDetailsForm({
                             expanded={advancedPanelExpanded}
                             onExpandedChange={setAdvancedPanelExpanded}
                             title={
-                                <div className="flex flex-row text-gray-500">
+                                <div className="flex flex-row text-surface-500">
                                     <SettingsIcon/>
                                     <Typography variant={"subtitle2"}
                                                 className="ml-2">
@@ -271,7 +271,7 @@ export function CollectionDetailsForm({
                                                 setFieldValue("sideDialogWidth", null);
                                             }}
                                             disabled={!values.sideDialogWidth}>
-                                            <ClearIcon size={"small"}/>
+                                            <CloseIcon size={"small"}/>
                                         </IconButton>}
                                         value={values.sideDialogWidth ?? ""}
                                         label={"Side dialog width"}/>
@@ -298,6 +298,8 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="defaultSize"
+                                        size={"large"}
+                                        fullWidth={true}
                                         label="Default row size"
                                         position={"item-aligned"}
                                         onChange={handleChange}
@@ -318,6 +320,8 @@ export function CollectionDetailsForm({
                                         name="customId"
                                         label="Document IDs generation"
                                         position={"item-aligned"}
+                                        size={"large"}
+                                        fullWidth={true}
                                         disabled={customIdValue === "code_defined"}
                                         onValueChange={(v) => {
                                             if (v === "code_defined")
@@ -416,7 +420,7 @@ function DefaultDatabaseField({
     return <Tooltip title={"Database ID"}
                     side={"top"}
                     align={"start"}>
-        <TextField size={"smallest"}
+        <TextField size={"small"}
                    invisible={true}
                    inputClassName={"text-end"}
                    value={databaseId ?? ""}

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -26,13 +26,14 @@ import {
 import {
     ArrowBackIcon,
     Button,
+    CheckIcon,
     cls,
     coolIconKeys,
     defaultBorderMixin,
     Dialog,
     DialogActions,
     DialogContent,
-    DoneIcon,
+    DialogTitle,
     IconButton,
     LoadingButton,
     Tab,
@@ -114,6 +115,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             maxWidth={"7xl"}
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
+            <DialogTitle hidden>Collection editor</DialogTitle>
             {open && <CollectionEditor {...props}
                                        handleCancel={handleCancel}
                                        setFormDirty={setFormDirty}/>}
@@ -276,6 +278,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
     const saveCollection = (updatedCollection: PersistedCollection<M>): Promise<boolean> => {
         const id = updatedCollection.id || updatedCollection.path;
+
         return configController.saveCollection({
             id,
             collectionData: updatedCollection,
@@ -377,7 +380,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
             if (!isNewCollection) {
                 saveCollection(newCollectionState).then(() => {
-                    formexController.resetForm({ values: initialValues });
+                    formexController.resetForm();
                     handleClose(newCollectionState);
                 });
                 return;
@@ -466,7 +469,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const formController = useCreateFormex<PersistedCollection<M>>({
         initialValues,
         onSubmit,
-        validation
+        validation,
+        debugId: "COLLECTION_EDITOR"
     });
 
     const {
@@ -536,7 +540,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
             <>
                 {!isNewCollection && <Tabs value={currentView}
-                                           className={cls(defaultBorderMixin, "justify-end bg-gray-50 dark:bg-gray-950 border-b")}
+                                           innerClassName={cls(defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b")}
                                            onValueChange={(v) => setCurrentView(v as EditorView)}>
                     <Tab value={"details"}>
                         Details
@@ -722,7 +726,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 loading={isSubmitting}
                                 disabled={isSubmitting || (currentView === "details" && !validValues)}
                                 startIcon={currentView === "properties"
-                                    ? <DoneIcon/>
+                                    ? <CheckIcon/>
                                     : undefined}
                             >
                                 {currentView === "details" && "Next"}

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -191,9 +191,9 @@ export function TemplateButton({
                 onClick={onClick}
                 className={cls(
                     "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-slate-300",
+                    "text-surface-700 dark:text-surface-accent-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 "
+                    "border-surface-400 dark:border-surface-600 "
                 )}
             >
                 {icon}

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -16,7 +16,7 @@ import {
 } from "@firecms/core";
 import {
     AddIcon,
-    AutoAwesomeIcon,
+    AutorenewIcon,
     Button,
     CircularProgress,
     cls,
@@ -228,17 +228,13 @@ export function CollectionPropertiesEditorForm({
                                    namespace
                                }: OnPropertyChangedParams) => {
 
+        console.log("!!!!!! onPropertyChanged", property)
+
         const fullId = id ? getFullId(id, namespace) : undefined;
         const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
 
         // If the id has changed we need to a little cleanup
         if (previousId && previousId !== id) {
-            console.debug("onPropertyChanged, id change", {
-                id,
-                property,
-                previousId,
-                namespace
-            })
 
             const previousFullId = getFullId(previousId, namespace);
             const previousPropertyPath = idToPropertiesPath(previousFullId);
@@ -316,7 +312,7 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-gray-50 dark:bg-gray-900"}>
+        <div className={"grid grid-cols-12 gap-2 h-full bg-surface-50 dark:bg-surface-900"}>
             <div className={cls(
                 "p-4 md:p-8 pb-20 md:pb-20",
                 "col-span-12 lg:col-span-5 h-full overflow-auto",
@@ -366,7 +362,7 @@ export function CollectionPropertiesEditorForm({
                                 variant={"filled"}
                                 disabled={inferringProperties}
                                 onClick={inferPropertiesFromData}>
-                                {inferringProperties ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
+                                {inferringProperties ? <CircularProgress size={"small"}/> : <AutorenewIcon/>}
                             </IconButton>
                         </Tooltip>}
                         <Tooltip title={"Add new property"}

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -1,8 +1,11 @@
 import { useCustomizationController } from "@firecms/core";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 
-export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
+export function EntityCustomViewsSelectDialog({
+                                                  open,
+                                                  onClose
+                                              }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
     const {
         entityViews,
     } = useCustomizationController();
@@ -10,10 +13,8 @@ export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean
     return <Dialog
         maxWidth={"md"}
         open={open}>
+        <DialogTitle>Select custom view</DialogTitle>
         <DialogContent className={"flex flex-col gap-4"}>
-            <Typography variant={"h6"}>
-                Select view
-            </Typography>
             {entityViews?.map((view) => {
                 return <Button
                     key={view.key}

package/src/ui/collection_editor/EnumForm.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 import equal from "react-fast-compare"
 
-import { ArrayContainer, EnumValueConfig, EnumValues, FieldCaption, } from "@firecms/core";
+import { ArrayContainer, ArrayEntryParams, EnumValueConfig, EnumValues, FieldCaption, } from "@firecms/core";
 import {
-    AutoAwesomeIcon,
+    AutorenewIcon,
     Badge,
     Button,
     CircularProgress,
@@ -11,6 +11,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     IconButton,
     ListIcon,
     Paper,
@@ -121,7 +122,10 @@ function EnumFormFields({
     const inferredValuesRef = React.useRef(new Set());
     const inferredValues = inferredValuesRef.current;
 
-    const buildEntry = (index: number, internalId: number) => {
+    const buildEntry = ({
+                            index,
+                            internalId
+                        }:ArrayEntryParams) => {
         const justAdded = lastInternalIdAdded === internalId;
         const entryError = errors?.enumValues && errors?.enumValues[index];
         return <EnumEntry index={index}
@@ -179,7 +183,7 @@ function EnumFormFields({
                             variant={"text"}
                             size={"small"}
                             onClick={inferValues}>
-                        {inferring ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
+                        {inferring ? <CircularProgress size={"small"}/> : <AutorenewIcon/>}
                         Infer values from data
                     </Button>}
             </div>
@@ -263,7 +267,7 @@ const EnumEntry = React.memo(
                            size="small"
                            autoFocus={autoFocus}
                            autoComplete="off"
-                           endAdornment={inferredEntry && <AutoAwesomeIcon size={"small"}/>}
+                           endAdornment={inferredEntry && <AutorenewIcon size={"small"}/>}
                            error={Boolean(entryError?.label)}/>
 
                     {!disabled &&
@@ -324,7 +328,7 @@ function EnumEntryDialog({
         open={open}
         onOpenChange={(open) => !open ? onClose() : undefined}
     >
-
+        <DialogTitle hidden>Enum form dialog</DialogTitle>
         <DialogContent>
             {index !== undefined &&
                 <div>

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -1,9 +1,10 @@
-import { EntityCollection, useSnackbarController } from "@firecms/core";
-import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, Typography, } from "@firecms/ui";
+import { EntityCollection, isEmptyObject, useSnackbarController } from "@firecms/core";
+import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography, } from "@firecms/ui";
 import React from "react";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"
 import { camelCase } from "./utils/strings";
+import { clone } from "@firecms/formex";
 
 export function GetCodeDialog({
                                   collection,
@@ -14,15 +15,14 @@ export function GetCodeDialog({
     const snackbarController = useSnackbarController();
 
     const code = collection
-        ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t")
+        ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
         : "No collection selected";
     return <Dialog open={open}
                    onOpenChange={onOpenChange}
                    maxWidth={"4xl"}>
+        <DialogTitle variant={"h6"}>Code for {collection.name}</DialogTitle>
         <DialogContent>
-            <Typography variant={"h6"} className={"my-4"}>
-                Code for {collection.name}
-            </Typography>
+
             <Typography variant={"body2"} className={"my-4 mb-8"}>
                 If you want to customise the collection in code, you can add this collection code to your CMS
                 app configuration.
@@ -78,24 +78,40 @@ export function GetCodeDialog({
 
 function collectionToCode(collection: EntityCollection): object {
 
-    const propertyCleanup = (property: any) => {
-
-        const updatedProperty = {
-            ...property
-        };
-
-        delete updatedProperty.fromBuilder;
-        delete updatedProperty.resolved;
-        delete updatedProperty.propertiesOrder;
-        delete updatedProperty.editable;
+    const propertyCleanup = (value: any): any => {
+        if (value === undefined || value === null) {
+            return value;
+        }
+        const valueCopy = clone(value);
+        if (typeof valueCopy === "function") {
+            return valueCopy;
+        }
+        if (Array.isArray(valueCopy)) {
+            return valueCopy.map((v: any) => propertyCleanup(v));
+        }
+        if (typeof valueCopy === "object") {
+            if (valueCopy === null)
+                return valueCopy;
+            Object.keys(valueCopy).forEach((key) => {
+                if (!isEmptyObject(valueCopy)) {
+                    const childRes = propertyCleanup(valueCopy[key]);
+                    if (childRes !== null && childRes !== undefined && childRes !== false && !isEmptyObject(childRes)) {
+                        valueCopy[key] = childRes;
+                    } else {
+                        delete valueCopy[key];
+                    }
+                }
+            });
+            delete valueCopy.fromBuilder;
+            delete valueCopy.resolved;
+            delete valueCopy.propertiesOrder;
+            delete valueCopy.propertyConfig;
+            delete valueCopy.resolvedProperties;
+            delete valueCopy.editable;
 
-        if (updatedProperty.type === "map") {
-            return {
-                ...updatedProperty,
-                properties: updatedProperty.properties.map(propertyCleanup)
-            }
         }
-        return updatedProperty;
+
+        return valueCopy;
     }
 
     return {
@@ -111,7 +127,9 @@ function collectionToCode(collection: EntityCollection): object {
         customId: collection.customId,
         initialFilter: collection.initialFilter,
         initialSort: collection.initialSort,
-        properties: Object.entries(collection.properties ?? {})
+        properties: Object.entries({
+            ...(collection.properties ?? {})
+        })
             .map(([key, value]) => ({
                 [key]: propertyCleanup(value)
             }))

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -6,7 +6,7 @@ import {
     ConfirmationDialog,
     DEFAULT_FIELD_CONFIGS,
     getFieldConfig,
-    getFieldId,
+    getFieldId, isEmptyObject,
     isPropertyBuilder,
     isValidRegExp,
     mergeDeep,
@@ -31,7 +31,7 @@ import {
     InfoLabel,
     Tooltip,
     Typography,
-    WarningOffIcon
+    WarningIcon
 } from "@firecms/ui";
 import { EnumPropertyField } from "./properties/EnumPropertyField";
 import { StoragePropertyField } from "./properties/StoragePropertyField";
@@ -142,6 +142,7 @@ export const PropertyForm = React.memo(
         };
 
         const formexController = useCreateFormex<PropertyWithId>({
+            debugId: "PROPERTY_FORM",
             initialValues: property
                 ? { id: propertyKey, ...property } as PropertyWithId
                 : initialValue,
@@ -274,7 +275,9 @@ export function PropertyFormDialog({
                   e.stopPropagation();
                   formexRef.current?.handleSubmit(e)
               }}>
+            <DialogTitle hidden>Property edit view</DialogTitle>
             <DialogContent>
+
                 <PropertyForm {...formProps}
                               onDismiss={onCancel}
                               onPropertyChanged={(params) => {
@@ -380,7 +383,7 @@ function PropertyEditFormFields({
     }, [deferredValues, includeIdAndTitle, propertyNamespace]);
 
     useEffect(() => {
-        if (values?.id && onError) {
+        if (values?.id && onError && !isEmptyObject(errors)) {
             onError(values?.id, propertyNamespace, errors);
         }
     }, [errors, propertyNamespace, values?.id]);
@@ -771,7 +774,7 @@ export function WidgetSelectViewItem({
                 <div className={"flex flex-row gap-2 items-center"}>
                     {shouldWarnChangingDataType && <Tooltip
                         title={"This widget uses a different data type than the initially selected widget. This can cause errors with existing data."}>
-                        <WarningOffIcon size="smallest" className={"w-4"}/>
+                        <WarningIcon size="smallest" className={"w-4"}/>
                     </Tooltip>}
                     <Typography
                         color={shouldWarnChangingDataType ? "secondary" : undefined}>{propertyConfig.name}</Typography>

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -1,9 +1,9 @@
 import {
     ErrorBoundary,
-    PropertyConfigBadge,
     getFieldConfig,
     isPropertyBuilder,
     Property,
+    PropertyConfigBadge,
     PropertyOrBuilder,
     useCustomizationController,
 } from "@firecms/core";
@@ -12,9 +12,9 @@ import {
     cardMixin,
     cardSelectedMixin,
     cls,
+    DoNotDisturbOnIcon,
     FunctionsIcon,
     Paper,
-    RemoveCircleIcon,
     Typography,
 } from "@firecms/ui";
 
@@ -130,10 +130,10 @@ export function NonEditablePropertyPreview({
             <div className={"relative m-4"}>
                 {propertyConfig && <PropertyConfigBadge propertyConfig={propertyConfig}/>}
                 {!propertyConfig && <div
-                    className={"h-8 w-8 p-1 rounded-full shadow text-white bg-gray-500"}>
+                    className={"h-8 w-8 p-1 rounded-full shadow text-white bg-surface-500"}>
                     <FunctionsIcon color={"inherit"} size={"medium"}/>
                 </div>}
-                <RemoveCircleIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
+                <DoNotDisturbOnIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
             </div>
             <Paper
                 className={cls(

package/src/ui/collection_editor/PropertyTree.tsx

@@ -9,7 +9,7 @@ import {
     PropertiesOrBuilders,
     PropertyOrBuilder
 } from "@firecms/core";
-import { AutoAwesomeIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
+import { AutorenewIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
 import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
 import { DragDropContext, Draggable, DraggableProvided, Droppable } from "@hello-pangea/dnd";
 import { getFullId, getFullIdPath } from "./util";
@@ -224,7 +224,7 @@ export function PropertyTreeEntry({
             <div className="absolute top-2 right-2 flex flex-row ">
 
                 {isPropertyInferred && <Tooltip title={"Inferred property"}>
-                    <AutoAwesomeIcon size="small" className={"p-2"}/>
+                    <AutorenewIcon size="small" className={"p-2"}/>
                 </Tooltip>}
 
                 {onPropertyRemove && <Tooltip title={"Remove"}