@firecms/collection_editor 3.0.0-canary.44 → 3.0.0-canary.46

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-canary.44",
+  "version": "3.0.0-canary.46",
   "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.44",
-    "@firecms/formex": "^3.0.0-canary.44",
-    "@firecms/schema_inference": "^3.0.0-canary.44",
-    "@firecms/ui": "^3.0.0-canary.44",
+    "@firecms/data_import_export": "^3.0.0-canary.46",
+    "@firecms/formex": "^3.0.0-canary.46",
+    "@firecms/schema_inference": "^3.0.0-canary.46",
+    "@firecms/ui": "^3.0.0-canary.46",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "15e52171f137c2876a3566bbc2752d140b9d0c7a"
+  "gitHead": "7af477c065bf21042e06cb957803665ee504a712"
 }

package/src/ConfigControllerProvider.tsx

@@ -109,12 +109,12 @@ export const ConfigControllerProvider = React.memo(
             deleteCollections: true
         }), []);
 
-        const editCollection = useCallback(({
-                                                id,
-                                                fullPath,
-                                                parentCollectionIds,
-                                                parentCollection
-                                            }: {
+        const editCollection = ({
+                                    id,
+                                    fullPath,
+                                    parentCollectionIds,
+                                    parentCollection
+                                }: {
             id?: string,
             fullPath?: string,
             parentCollectionIds: string[],
@@ -133,16 +133,16 @@ export const ConfigControllerProvider = React.memo(
                 parentCollection,
                 redirect: false
             });
-        }, []);
+        };
 
-        const editProperty = useCallback(({
-                                              propertyKey,
-                                              property,
-                                              editedCollectionId,
-                                              currentPropertiesOrder,
-                                              parentCollectionIds,
-                                              collection
-                                          }: {
+        const editProperty = ({
+                                  propertyKey,
+                                  property,
+                                  editedCollectionId,
+                                  currentPropertiesOrder,
+                                  parentCollectionIds,
+                                  collection
+                              }: {
             propertyKey?: string,
             property?: Property,
             currentPropertiesOrder?: string[],
@@ -171,15 +171,15 @@ export const ConfigControllerProvider = React.memo(
                 parentCollectionIds,
                 collectionEditable: collection?.editable ?? false
             });
-        }, []);
+        };
 
-        const createCollection = React.useCallback(({
-                                                        parentCollectionIds,
-                                                        parentCollection,
-                                                        initialValues,
-                                                        redirect,
-                                                        sourceClick
-                                                    }: {
+        const createCollection = ({
+                                      parentCollectionIds,
+                                      parentCollection,
+                                      initialValues,
+                                      redirect,
+                                      sourceClick
+                                  }: {
             parentCollectionIds: string[],
             parentCollection?: PersistedCollection
             initialValues?: {
@@ -211,7 +211,7 @@ export const ConfigControllerProvider = React.memo(
                 initialValues,
                 redirect
             });
-        }, []);
+        };
 
         return (
             <ConfigControllerContext.Provider value={collectionConfigController}>

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -6,7 +6,7 @@ import {
 } from "@firecms/core";
 import { DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
 
 export function HomePageEditorCollectionAction({
@@ -24,13 +24,13 @@ export function HomePageEditorCollectionAction({
         collection
     });
 
-    const onEditCollectionClicked = useCallback(() => {
+    const onEditCollectionClicked = () => {
         collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
-    }, [collectionEditorController, path]);
+    };
 
     const [deleteRequested, setDeleteRequested] = useState(false);
 
-    const deleteCollection = useCallback(() => {
+    const deleteCollection = () => {
         configController?.deleteCollection({ id: collection.id }).then(() => {
             setDeleteRequested(false);
             snackbarController.open({
@@ -38,7 +38,7 @@ export function HomePageEditorCollectionAction({
                 type: "success"
             });
         });
-    }, [path, configController]);
+    };
 
     return <>
 

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -235,6 +235,27 @@ export function CollectionDetailsForm({
                                         {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
                                     </FieldCaption>
                                 </div>
+                                <div className={"col-span-12"}>
+                                    <TextField
+                                        error={showErrors && Boolean(errors.sideDialogWidth)}
+                                        name={"sideDialogWidth"}
+                                        type={"number"}
+                                        aria-describedby={"sideDialogWidth-helper"}
+                                        onChange={(e) => {
+                                            setFieldTouched("sideDialogWidth", true);
+                                            const value = e.target.value;
+                                            if (!value) {
+                                                setFieldValue("sideDialogWidth", undefined);
+                                            } else if (!isNaN(Number(value))) {
+                                                setFieldValue("sideDialogWidth", Number(value));
+                                            }
+                                        }}
+                                        value={values.sideDialogWidth ?? ""}
+                                        label={"Side dialog width"}/>
+                                    <FieldCaption error={showErrors && Boolean(errors.singularName)}>
+                                        {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px"}
+                                    </FieldCaption>
+                                </div>
                                 <div className={"col-span-12"}>
                                     <TextField
                                         error={showErrors && Boolean(errors.description)}
@@ -272,7 +293,7 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"
-                                        label="Data IDs generation"
+                                        label="Document IDs generation"
                                         position={"item-aligned"}
                                         disabled={customIdValue === "code_defined"}
                                         onValueChange={(v) => {

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
     CircularProgressCenter,
     EntityCollection,
@@ -88,13 +88,13 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
     const [formDirty, setFormDirty] = React.useState<boolean>(false);
     const [unsavedChangesDialogOpen, setUnsavedChangesDialogOpen] = React.useState<boolean>(false);
 
-    const handleCancel = useCallback(() => {
+    const handleCancel = () => {
         if (!formDirty) {
             props.handleClose(undefined);
         } else {
             setUnsavedChangesDialogOpen(true);
         }
-    }, [formDirty, props.handleClose]);
+    };
 
     useEffect(() => {
         if (!open) {
@@ -170,7 +170,7 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         } catch (e) {
             console.error(e);
         }
-    }, [props.editedCollectionId, props.parentCollectionIds, navigation]);
+    }, [props.editedCollectionId, props.parentCollectionIds, navigation.initialised, navigation.getCollectionFromPaths]);
 
     if (!topLevelNavigation) {
         throw Error("Internal: Navigation not ready in collection editor");
@@ -294,7 +294,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             });
     };
 
-    const setNextMode = useCallback(() => {
+    const setNextMode = () => {
         if (currentView === "details") {
             if (importConfig.inUse) {
                 setCurrentView("import_data_saving");
@@ -315,14 +315,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             setCurrentView("details");
         }
 
-    }, [currentView, importConfig.inUse, extraView]);
+    };
 
-    const doCollectionInference = useCallback((collection: PersistedCollection<any>) => {
+    const doCollectionInference = (collection: PersistedCollection<any>) => {
         if (!collectionInference) return undefined;
         return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentCollectionIds ?? []);
-    }, [collectionInference, parentCollectionIds]);
+    };
 
-    const inferCollectionFromData = useCallback(async (newCollection: PersistedCollection<M>) => {
+    const inferCollectionFromData = async (newCollection: PersistedCollection<M>) => {
 
         try {
             if (!doCollectionInference) {
@@ -366,7 +366,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             });
             return newCollection;
         }
-    }, [parentCollectionIds, doCollectionInference]);
+    };
 
     const onSubmit = (newCollectionState: PersistedCollection<M>, formexController: FormexController<PersistedCollection<M>>) => {
         console.log("Submitting collection", newCollectionState);

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -158,20 +158,20 @@ export function CollectionPropertiesEditorForm({
         }
         : undefined;
 
-    const getCurrentPropertiesOrder = useCallback((namespace?: string) => {
+    const getCurrentPropertiesOrder = (namespace?: string) => {
         if (!namespace) return currentPropertiesOrderRef.current[""];
         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");
@@ -187,7 +187,7 @@ export function CollectionPropertiesEditorForm({
         setSelectedPropertyIndex(undefined);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [getCurrentPropertiesOrder, setFieldValue, updatePropertiesOrder]);
+    };
 
     const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
@@ -273,7 +273,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 +286,7 @@ export function CollectionPropertiesEditorForm({
             onPropertyError(id, namespace, hasError ? error : undefined);
             setFieldError(idToPropertiesPath(propertyPath), hasError ? "Property error" : undefined);
         }
-    }, [])
+    }
 
     const closePropertyDialog = () => {
         setSelectedPropertyIndex(undefined);
@@ -303,7 +303,7 @@ export function CollectionPropertiesEditorForm({
 
     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,7 +311,7 @@ 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"}>

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -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);

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/properties/BlockPropertyField.tsx

@@ -1,4 +1,4 @@
-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";
@@ -49,7 +49,7 @@ export function BlockPropertyField({
     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");
@@ -62,7 +62,7 @@ export function BlockPropertyField({
         setPropertyDialogOpen(false);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [setFieldValue, values]);
+    };
 
     const addChildButton = <Button
         autoFocus
@@ -74,9 +74,9 @@ export function BlockPropertyField({
         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/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 (
         <>