@firecms/collection_editor 3.0.0-canary.8 → 3.0.0-canary.80

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { EntityCollection, unslugify, } from "@firecms/core";
-import { Button, Card, Chip, CircularProgress, cn, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
+import { Button, Card, Chip, CircularProgress, cls, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
 
 import { productsCollectionTemplate } from "./templates/products_template";
 import { blogCollectionTemplate } from "./templates/blog_template";
@@ -19,7 +19,7 @@ export function CollectionEditorWelcomeView({
     path: string;
     pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
-    onContinue: (importData?: object[]) => void;
+    onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
 }) {
 
@@ -154,7 +154,7 @@ export function CollectionEditorWelcomeView({
                         ● Create a collection from a file (csv, json, xls, xslx...)
                     </Typography>
 
-                    <ImportFileUpload onDataAdded={(data) => onContinue(data)}/>
+                    <ImportFileUpload onDataAdded={(data, propertiesOrder) => onContinue(data, propertiesOrder)}/>
 
                 </div>}
 
@@ -188,7 +188,7 @@ export function TemplateButton({
         <Tooltip title={subtitle}>
             <Card
                 onClick={onClick}
-                className={cn(
+                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",
                     "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import { Field, getIn, useFormex } from "@firecms/formex";
 import {
@@ -19,7 +19,7 @@ import {
     AutoAwesomeIcon,
     Button,
     CircularProgress,
-    cn,
+    cls,
     CodeIcon,
     DebouncedTextField,
     defaultBorderMixin,
@@ -43,7 +43,7 @@ type CollectionEditorFormProps = {
     setDirty?: (dirty: boolean) => void;
     reservedGroups?: string[];
     extraIcon: React.ReactNode;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
     doCollectionInference: (collection: PersistedCollection) => Promise<Partial<EntityCollection> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;
@@ -158,20 +158,20 @@ export function CollectionPropertiesEditorForm({
         }
         : undefined;
 
-    const getCurrentPropertiesOrder = useCallback((namespace?: string) => {
-        if (!namespace) return currentPropertiesOrderRef.current[""];
+    const getCurrentPropertiesOrder = (namespace?: string) => {
+        if (!namespace) return currentPropertiesOrderRef.current[""] ?? getIn(values, namespaceToPropertiesOrderPath());
         return currentPropertiesOrderRef.current[namespace] ?? getIn(values, namespaceToPropertiesOrderPath(namespace));
-    }, [values]);
+    };
 
-    const updatePropertiesOrder = useCallback((newPropertiesOrder: string[], namespace?: string) => {
+    const updatePropertiesOrder = (newPropertiesOrder: string[], namespace?: string) => {
         const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
 
         setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
         currentPropertiesOrderRef.current[namespace ?? ""] = newPropertiesOrder;
 
-    }, [setFieldValue]);
+    };
 
-    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
@@ -179,15 +179,17 @@ export function CollectionPropertiesEditorForm({
         setFieldValue(idToPropertiesPath(fullId), undefined, false);
 
         const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
-        const newPropertiesOrder = currentPropertiesOrder.filter((p) => p !== propertyKey);
-        updatePropertiesOrder(newPropertiesOrder, namespace);
+        if (currentPropertiesOrder) {
+            const newPropertiesOrder = currentPropertiesOrder.filter((p) => p !== propertyKey);
+            updatePropertiesOrder(newPropertiesOrder, namespace);
+        }
 
         setNewPropertyDialogOpen(false);
 
         setSelectedPropertyIndex(undefined);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [getCurrentPropertiesOrder, setFieldValue, updatePropertiesOrder]);
+    };
 
     const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
@@ -207,8 +209,8 @@ export function CollectionPropertiesEditorForm({
             ...(values.properties ?? {}),
             [id]: property
         }, false);
-        const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties)), id];
 
+        const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties)), id];
         updatePropertiesOrder(newPropertiesOrder);
 
         setNewPropertyDialogOpen(false);
@@ -273,7 +275,7 @@ export function CollectionPropertiesEditorForm({
 
     };
 
-    const onPropertyErrorInternal = useCallback((id: string, namespace?: string, error?: Record<string, any>) => {
+    const onPropertyErrorInternal = (id: string, namespace?: string, error?: Record<string, any>) => {
         const propertyPath = id ? getFullId(id, namespace) : undefined;
         console.debug("onPropertyErrorInternal", {
             id,
@@ -286,7 +288,7 @@ export function CollectionPropertiesEditorForm({
             onPropertyError(id, namespace, hasError ? error : undefined);
             setFieldError(idToPropertiesPath(propertyPath), hasError ? "Property error" : undefined);
         }
-    }, [])
+    }
 
     const closePropertyDialog = () => {
         setSelectedPropertyIndex(undefined);
@@ -301,9 +303,9 @@ export function CollectionPropertiesEditorForm({
         ? values.propertiesOrder
         : Object.keys(values.properties)) as string[];
 
-    const owner = useMemo(() => values.ownerId ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
+    const owner = useMemo(() => values.ownerId && getUser ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
 
-    const onPropertyClick = useCallback((propertyKey: string, namespace?: string) => {
+    const onPropertyClick = (propertyKey: string, namespace?: string) => {
         console.debug("CollectionEditor: onPropertyClick", {
             propertyKey,
             namespace
@@ -311,11 +313,11 @@ export function CollectionPropertiesEditorForm({
         setSelectedPropertyIndex(usedPropertiesOrder.indexOf(propertyKey));
         setSelectedPropertyKey(propertyKey);
         setSelectedPropertyNamespace(namespace);
-    }, [usedPropertiesOrder]);
+    };
 
     const body = (
         <div className={"grid grid-cols-12 gap-2 h-full bg-gray-50 dark:bg-gray-900"}>
-            <div className={cn(
+            <div className={cls(
                 "p-4 md:p-8 pb-20 md:pb-20",
                 "col-span-12 lg:col-span-5 h-full overflow-auto",
                 !asDialog && "border-r " + defaultBorderMixin
@@ -496,11 +498,12 @@ export function CollectionPropertiesEditorForm({
                 collectionEditable={collectionEditable}
                 existingPropertyKeys={values.propertiesOrder as string[]}/>
 
-            <GetCodeDialog
-                collection={values}
-                open={codeDialogOpen}
-                onOpenChange={setCodeDialogOpen}/>
-
+            <ErrorBoundary>
+                <GetCodeDialog
+                    collection={values}
+                    open={codeDialogOpen}
+                    onOpenChange={setCodeDialogOpen}/>
+            </ErrorBoundary>
         </>
     );
 }

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -5,11 +5,17 @@ import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"
 import { camelCase } from "./utils/strings";
 
-export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
+export function GetCodeDialog({
+                                  collection,
+                                  onOpenChange,
+                                  open
+                              }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
 
     const snackbarController = useSnackbarController();
 
-    const code = "import { EntityCollection } from \"firecms\";\n\nconst " + (collection.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t");
+    const code = collection
+        ? "import { EntityCollection } from \"firecms\";\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"}>
@@ -29,7 +35,13 @@ export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange
                 code={code}
                 language="typescript"
             >
-                {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                {({
+                      className,
+                      style,
+                      tokens,
+                      getLineProps,
+                      getTokenProps
+                  }) => (
                     <pre style={style} className={"p-4 rounded text-sm"}>
         {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line })}>

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -17,7 +17,7 @@ import {
 } from "@firecms/core";
 import {
     Button,
-    cn,
+    cls,
     DeleteIcon,
     Dialog,
     DialogActions,
@@ -228,6 +228,7 @@ export const PropertyForm = React.memo(
         a.includeIdAndName === b.includeIdAndName &&
         a.autoOpenTypeSelect === b.autoOpenTypeSelect &&
         a.autoUpdateId === b.autoUpdateId &&
+        a.existingPropertyKeys === b.existingPropertyKeys &&
         a.existingProperty === b.existingProperty
 );
 
@@ -367,13 +368,13 @@ function PropertyEditFormFields({
                 }
             }
         }
-    }, [deferredValues, includeIdAndTitle, onPropertyChanged, propertyNamespace]);
+    }, [deferredValues, includeIdAndTitle, propertyNamespace]);
 
     useEffect(() => {
         if (values?.id && onError) {
             onError(values?.id, propertyNamespace, errors);
         }
-    }, [errors, onError, propertyNamespace, values?.id]);
+    }, [errors, propertyNamespace, values?.id]);
 
     const onWidgetSelectChanged = (newSelectedWidgetId: PropertyConfigId) => {
         setSelectedFieldConfigId(newSelectedWidgetId);
@@ -508,7 +509,7 @@ function PropertyEditFormFields({
                                         e.preventDefault();
                                     }
                                 }}
-                                className={cn(
+                                className={cls(
                                     "flex items-center",
                                     optionDisabled ? "w-full pointer-events-none opacity-50" : "")}>
                                 <div className={"mr-8"}>

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -11,7 +11,7 @@ import {
     cardClickableMixin,
     cardMixin,
     cardSelectedMixin,
-    cn,
+    cls,
     FunctionsIcon,
     Paper,
     RemoveCircleIcon,
@@ -45,9 +45,6 @@ export function PropertyFieldPreview({
         ? "border-red-500 dark:border-red-500 border-opacity-100 dark:border-opacity-100 ring-0 dark:ring-0"
         : (selected ? "border-primary" : "border-transparent");
 
-    if(hasError)
-    console.log("PropertyFieldPreview", property)
-
     return <ErrorBoundary>
         <div
             onClick={onClick}
@@ -56,7 +53,7 @@ export function PropertyFieldPreview({
                 <PropertyConfigBadge propertyConfig={propertyConfig}/>
             </div>
             <Paper
-                className={cn(
+                className={cls(
                     "border",
                     "pl-2 w-full flex flex-row gap-4 items-center",
                     cardMixin,
@@ -139,7 +136,7 @@ export function NonEditablePropertyPreview({
                 <RemoveCircleIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
             </div>
             <Paper
-                className={cn(
+                className={cls(
                     "pl-2 w-full flex flex-row gap-4 items-center",
                     cardMixin,
                     onClick ? cardClickableMixin : "",

package/src/ui/collection_editor/PropertySelectItem.tsx

@@ -1,5 +1,5 @@
 import { PropertyConfigBadge, PropertyConfig } from "@firecms/core";
-import { cn, SelectItem, Typography } from "@firecms/ui";
+import { cls, SelectItem, Typography } from "@firecms/ui";
 
 export interface PropertySelectItemProps {
     value: string;
@@ -13,7 +13,7 @@ export function PropertySelectItem({ value, optionDisabled, propertyConfig, exis
                        disabled={optionDisabled}
                        className={"flex flex-row items-center"}>
         <div
-            className={cn(
+            className={cls(
                 "flex flex-row items-center text-base min-h-[52px]",
                 optionDisabled ? "w-full" : "")}>
             <div className={"mr-8"}>

package/src/ui/collection_editor/PropertyTree.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import equal from "react-fast-compare"
 
 import {
@@ -48,7 +48,7 @@ export const PropertyTree = React.memo(
 
         const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
 
-        const onDragEnd = useCallback((result: any) => {
+        const onDragEnd = (result: any) => {
             // dropped outside the list
             if (!result.destination) {
                 return;
@@ -61,7 +61,7 @@ export const PropertyTree = React.memo(
             newPropertiesOrder.splice(endIndex, 0, removed);
             if (onPropertyMove)
                 onPropertyMove(newPropertiesOrder, namespace);
-        }, [namespace, onPropertyMove, propertiesOrder])
+        }
 
         return (
             <>

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -41,7 +41,7 @@ export function SubcollectionsEditTab({
     parentCollection?: EntityCollection,
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     parentCollectionIds?: string[];
 }) {
 
@@ -135,7 +135,7 @@ export function SubcollectionsEditTab({
                         {totalEntityViews === 0 &&
                             <Alert action={<Button variant="text"
                                                    size={"small"}
-                                                   href={"https://firecms.co/docs/customization_quickstart"}
+                                                   href={"https://firecms.co/docs/cloud/quickstart"}
                                                    component={"a"}
                                                    rel="noopener noreferrer"
                                                    target="_blank">More info</Button>}>

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

@@ -1,21 +1,33 @@
-import { convertDataToEntity, getPropertiesMapping, ImportConfig } from "@firecms/data_import_export";
-import { EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
-import { useEffect } from "react";
+import { convertDataToEntity, ImportConfig } from "@firecms/data_import_export";
+import { CircularProgressCenter, EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
+import { useEffect, useState } from "react";
 import { Typography } from "@firecms/ui";
 
-export function CollectionEditorImportDataPreview({ importConfig, properties, propertiesOrder }: {
+export function CollectionEditorImportDataPreview({
+                                                      importConfig,
+                                                      properties,
+                                                      propertiesOrder
+                                                  }: {
     importConfig: ImportConfig,
     properties: Properties,
     propertiesOrder: string[]
 }) {
 
-    useEffect(() => {
-        const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties);
-        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, propertiesMapping, "TEMP_PATH"));
+    const [loading, setLoading] = useState<boolean>(false);
+
+    async function loadEntities() {
+        // const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties, importConfig.headersMapping);
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
         importConfig.setEntities(mappedData);
+    }
+
+    useEffect(() => {
+        loadEntities().finally(() => setLoading(false));
     }, []);
 
     const selectionController = useSelectionController();
+    if (loading)
+        return <CircularProgressCenter/>
 
     return <EntityCollectionTable
         title={<div>
@@ -31,7 +43,11 @@ export function CollectionEditorImportDataPreview({ importConfig, properties, pr
         filterable={false}
         sortable={false}
         selectionController={selectionController}
-        displayedColumnIds={propertiesOrder.map(p => ({ key: p, disabled: false }))}
-        properties={properties}/>
+        displayedColumnIds={propertiesOrder.map(p => ({
+            key: p,
+            disabled: false
+        }))}
+        properties={properties}
+        enablePopupIcon={false}/>
 
 }

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

@@ -6,7 +6,7 @@ import {
 } from "@firecms/data_import_export";
 import { getIn, useFormex } from "@firecms/formex";
 
-import { PropertyConfigBadge, getFieldConfig, getFieldId, Properties, Property, PropertyConfig, } from "@firecms/core";
+import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
 import { Container, Select, Tooltip, Typography } from "@firecms/ui";
 import React, { useState } from "react";
 import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
@@ -143,18 +143,20 @@ export function CollectionEditorImportMapping({
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
 
-                <Typography variant="h6" className={"mt-4"}>Data property mapping</Typography>
+                <Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
 
-                <DataNewPropertiesMapping headersMapping={importConfig.headersMapping}
-                                          idColumn={importConfig.idColumn}
-                                          originProperties={importConfig.originProperties}
+                <DataNewPropertiesMapping importConfig={importConfig}
                                           destinationProperties={values.properties as Properties}
-                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
                                           buildPropertyView={({
                                                                   property,
                                                                   propertyKey,
-                                                                  importKey
+                                                                  importKey,
+                                                                  isIdColumn
                                                               }) => {
+                                              if (isIdColumn) {
+                                                  return <Typography> This column will be used as ID</Typography>
+                                              }
+
                                               return <ImportNewPropertyFieldPreview
                                                   property={property}
                                                   propertyKey={propertyKey}

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

@@ -1,12 +1,18 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { getIn, useFormex } from "@firecms/formex";
 import { PropertyFormDialog } from "../PropertyEditView";
-import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
 import { PropertyTree } from "../PropertyTree";
 import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
 
-export function BlockPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
+export function BlockPropertyField({
+                                       disabled,
+                                       getData,
+                                       allowDataInference,
+                                       propertyConfigs,
+                                       collectionEditable
+                                   }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
@@ -43,20 +49,20 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.oneOf?.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
 
-    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
 
         setFieldValue(`oneOf.${idToPropertiesPath(fullId)}`, undefined, false);
         const propertiesOrderPath = `oneOf.${namespaceToPropertiesOrderPath(namespace)}`;
-        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath);
+        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
         setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
 
         setPropertyDialogOpen(false);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [setFieldValue, values]);
+    };
 
     const addChildButton = <Button
         autoFocus
@@ -68,9 +74,9 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
         Add property to {values.name ?? "this block"}
     </Button>;
 
-    const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(`oneOf.${namespaceToPropertiesOrderPath(namespace)}`, propertiesOrder, false);
-    }, []);
+    };
 
     return (
         <>

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

@@ -71,7 +71,7 @@ export function EnumPropertyField({
                           }}
                           getData={getData
                               ? () => getData()
-                                  .then(res => res.map(d => values.id && getIn(d, values.id)).filter(Boolean))
+                                  .then(res => res.map(entry => values.id && getIn(entry, values.id)).filter(Boolean))
                               : undefined}
                           onValuesChanged={onValuesChanged}/>
             </div>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
 import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
@@ -42,7 +42,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         setPropertyDialogOpen(false);
     };
 
-    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
@@ -58,16 +58,16 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         setPropertyDialogOpen(false);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [setFieldValue, values]);
+    };
 
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
 
     const empty = !propertiesOrder || propertiesOrder.length < 1;
 
-    const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
-    }, []);
+    };
 
     return (
         <>

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

@@ -39,7 +39,6 @@ export function RepeatPropertyField({
 
     const onPropertyChanged = ({ id, property, namespace }:
                                    { id?: string, property: Property, namespace?: string }) => {
-        console.log("onPropertyChanged", id, property, namespace);
         setFieldValue("of", property);
     };