@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/collection_editor/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,10 +1,24 @@
-import { AIIcon } from "@rebasepro/core";
+import { AIIcon } from "@rebasepro/app";
 ;
 import React, { useState } from "react";
 ;
-import { EntityCollection } from "@rebasepro/types";
-import { Button, Card, Chip, cls, Container, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { CodeIcon, TableIcon, ShoppingCartIcon, UserIcon, FileTextIcon, FileIcon } from "lucide-react";
+import { CollectionConfig } from "@rebasepro/types";
+import {
+    Button,
+    Card,
+    Chip,
+    cls,
+    CodeIcon,
+    Container,
+    FileIcon,
+    FileTextIcon,
+    iconSize,
+    ShoppingCartIcon,
+    TableIcon,
+    Tooltip,
+    Typography,
+    UserIcon
+} from "@rebasepro/ui";
 import { CollectionJsonImportDialog } from "./CollectionJsonImportDialog";
 
 import { productsCollectionTemplate } from "./templates/products_template";
@@ -12,7 +26,7 @@ import { blogCollectionTemplate } from "./templates/blog_template";
 import { usersCollectionTemplate } from "./templates/users_template";
 import { ImportFileUpload } from "../../_cms_internals";
 import { pagesCollectionTemplate } from "./templates/pages_template";
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 import { useCollectionEditorController } from "../../useCollectionEditorController";
 import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
 import { CollectionGenerationCallback } from "../../api/generateCollectionApi";
@@ -29,7 +43,7 @@ export function CollectionEditorWelcomeView({
     onImportFromTable
 }: {
     path: string;
-    parentCollection?: EntityCollection;
+    parentCollection?: CollectionConfig;
     onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
     generateCollection?: CollectionGenerationCallback;
@@ -47,7 +61,7 @@ export function CollectionEditorWelcomeView({
         setFieldValue,
         setValues,
         submitCount
-    } = useFormex<EntityCollection>();
+    } = useFormex<CollectionConfig>();
 
     const [jsonImportOpen, setJsonImportOpen] = useState(false);
     const [importingTable, setImportingTable] = useState<string | null>(null);

package/src/collection_editor/ui/collection_editor/CollectionJsonImportDialog.tsx

@@ -1,8 +1,19 @@
 
 import React, { useCallback, useState } from "react";
-import { Button, cls, Dialog, DialogActions, DialogContent, DialogTitle, Typography , iconSize } from "@rebasepro/ui";
-import { CodeIcon } from "lucide-react";
-import { EntityCollection } from "@rebasepro/types";
+import {
+    Alert,
+    Button,
+    cls,
+    CodeIcon,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    iconSize,
+    TextField,
+    Typography
+} from "@rebasepro/ui";
+import { CollectionConfig } from "@rebasepro/types";
 import { validateCollectionJson, CollectionValidationError } from "../../validateCollectionJson";
 
 const EXAMPLE_JSON = `{
@@ -30,7 +41,7 @@ const EXAMPLE_JSON = `{
 export interface CollectionJsonImportDialogProps {
     open: boolean;
     onClose: () => void;
-    onImport: (collection: EntityCollection) => void;
+    onImport: (collection: CollectionConfig) => void;
 }
 
 export function CollectionJsonImportDialog({
@@ -42,7 +53,7 @@ export function CollectionJsonImportDialog({
     const [errors, setErrors] = useState<CollectionValidationError[]>([]);
     const [touched, setTouched] = useState(false);
 
-    const handleJsonChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const handleJsonChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         const value = e.target.value;
         setJsonValue(value);
         setTouched(true);
@@ -95,30 +106,25 @@ export function CollectionJsonImportDialog({
                     <code className="bg-surface-200 dark:bg-surface-700 px-1 rounded">properties</code>.
                 </Typography>
 
-                <textarea
+                <TextField
+                    multiline
+                    minRows={12}
                     value={jsonValue}
                     onChange={handleJsonChange}
                     placeholder={EXAMPLE_JSON}
-                    rows={12}
-                    className={cls(
-                        "w-full p-3 font-mono text-sm rounded-md border resize-none overflow-y-auto",
-                        "bg-surface-50 dark:bg-surface-800",
-                        "focus:outline-none focus:ring-2 focus:ring-primary",
-                        "h-[300px]",
-                        errors.length > 0 && touched
-                            ? "border-red-500 dark:border-red-400"
-                            : "border-surface-300 dark:border-surface-600"
-                    )}
+                    error={errors.length > 0 && touched}
+                    className="w-full"
+                    inputClassName="font-mono text-sm resize-none overflow-y-auto h-[300px]"
                 />
 
                 {errors.length > 0 && touched && (
-                    <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-md border border-red-200 dark:border-red-800">
-                        <Typography variant="body2" className="font-medium text-red-700 dark:text-red-400 mb-2">
+                    <Alert color="error">
+                        <Typography variant="body2" className="font-medium mb-2">
                             Validation errors:
                         </Typography>
                         <ul className="list-disc list-inside space-y-1">
                             {errors.map((error, index) => (
-                                <li key={index} className="text-sm text-red-600 dark:text-red-400">
+                                <li key={index} className="text-sm">
                                     {error.path ? (
                                         <>
                                             <code className="bg-red-100 dark:bg-red-900/40 px-1 rounded">
@@ -132,15 +138,15 @@ export function CollectionJsonImportDialog({
                                 </li>
                             ))}
                         </ul>
-                    </div>
+                    </Alert>
                 )}
 
                 {isValid && (
-                    <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-md border border-green-200 dark:border-green-800">
-                        <Typography variant="body2" className="text-green-700 dark:text-green-400">
+                    <Alert color="success">
+                        <Typography variant="body2">
                             ✓ JSON is valid and ready to import
                         </Typography>
-                    </div>
+                    </Alert>
                 )}
             </DialogContent>
             <DialogActions>

package/src/collection_editor/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,16 +1,28 @@
 
 import React, { useEffect, useMemo, useState } from "react";
 
-import { Field, getIn, useFormex } from "@rebasepro/formex";
+import { Field, getIn, useFormex } from "@rebasepro/forms";
 import {
-    useLargeLayout,
-    useSnackbarController
-} from "@rebasepro/core";
+    useLargeLayout
+} from "@rebasepro/app";
+import { useSafeSnackbarController } from "../../useSafeSnackbarController";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { PlusIcon, CodeIcon, FileSearchIcon } from "lucide-react";
-import { EntityCollection, MapProperty, Properties, Property, PropertyConfig, User } from "@rebasepro/types";
+import {
+    Button,
+    CircularProgress,
+    cls,
+    CodeIcon,
+    DebouncedTextField,
+    defaultBorderMixin,
+    FileSearchIcon,
+    IconButton,
+    iconSize,
+    PlusIcon,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
+import { CollectionConfig, MapProperty, Properties, Property, PropertyConfig, User } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
-import { Button, CircularProgress, cls, DebouncedTextField, defaultBorderMixin, IconButton, Tooltip, Typography } from "@rebasepro/ui";
 
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "./util";
 import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./PropertyEditView";
@@ -18,22 +30,31 @@ import { PropertyTree } from "./PropertyTree";
 import { GetCodeDialog } from "./GetCodeDialog";
 import { useAIModifiedPaths } from "./AIModifiedPathsContext";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
+import type { PropertyTypePreset, PropertyType } from "../../extensibility_types";
+import type { SerializableProperty, SerializableCollectionConfig } from "../../serializable_types";
 
-type PropertyOrBuilder = Property | any;
+type PropertyOrBuilder = Property | Record<string, unknown>;
 
 type CollectionEditorFormProps = {
     showErrors: boolean;
     isNewCollection: boolean;
-    propertyErrorsRef?: React.MutableRefObject<any>;
-    onPropertyError: (propertyKey: string, namespace: string | undefined, error?: Record<string, any>) => void;
+    propertyErrorsRef?: React.MutableRefObject<Record<string, unknown> | undefined>;
+    onPropertyError: (propertyKey: string, namespace: string | undefined, error?: Record<string, unknown>) => void;
     setDirty?: (dirty: boolean) => void;
-    reservedGroups?: string[];
-    extraIcon: React.ReactNode | any;
+    extraIcon: React.ReactNode;
     getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
-    doCollectionInference?: (collection: EntityCollection) => Promise<Partial<EntityCollection> | null> | undefined;
+    doCollectionInference?: (collection: CollectionConfig) => Promise<Partial<CollectionConfig> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;
-
+    propertyTypePresets?: PropertyTypePreset[];
+    hiddenPropertyTypes?: PropertyType[];
+    renderExtraPropertyFields?: (params: {
+        metadata: Record<string, unknown>;
+        onMetadataChange: (key: string, value: unknown) => void;
+        property: SerializableProperty;
+        collection: SerializableCollectionConfig;
+    }) => React.ReactNode;
+    standalone?: boolean;
 };
 
 export function CollectionPropertiesEditorForm({
@@ -42,12 +63,15 @@ export function CollectionPropertiesEditorForm({
     propertyErrorsRef,
     onPropertyError,
     setDirty,
-    reservedGroups,
     extraIcon,
     getUser,
     getData,
     doCollectionInference,
-    propertyConfigs
+    propertyConfigs,
+    propertyTypePresets,
+    hiddenPropertyTypes,
+    renderExtraPropertyFields,
+    standalone,
 
 }: CollectionEditorFormProps) {
 
@@ -58,13 +82,14 @@ export function CollectionPropertiesEditorForm({
         setFieldTouched,
         errors,
         dirty
-    } = useFormex<EntityCollection>();
+    } = useFormex<CollectionConfig>();
 
-    const snackbarController = useSnackbarController();
-    const configController = useCollectionsConfigController();
+    const snackbarController = useSafeSnackbarController();
+    const configControllerFromContext = useCollectionsConfigController();
+    const configController = standalone ? { readOnly: false } : configControllerFromContext;
 
     const largeLayout = useLargeLayout();
-    const asDialog = !largeLayout
+    const asDialog = standalone ? false : !largeLayout
 
     // index of the selected property within the namespace
     const [selectedPropertyIndex, setSelectedPropertyIndex] = useState<number | undefined>();
@@ -91,18 +116,22 @@ export function CollectionPropertiesEditorForm({
 
     const inferPropertiesFromData = doCollectionInference
         ? (): void => {
-            if (!doCollectionInference || configController?.readOnly)
+            const inferenceFn = doCollectionInference;
+            if (!inferenceFn || configController?.readOnly)
                 return;
 
             setInferringProperties(true);
 
             console.debug("CollectionEditor: inferring properties from data", values);
-            // @ts-ignore
-            doCollectionInference(values)
-                .then((newCollection) => {
+            const promise = inferenceFn(values);
+            if (!promise) {
+                setInferringProperties(false);
+                return;
+            }
+            promise.then((newCollection) => {
 
                     if (!newCollection) {
-                        snackbarController.open({
+                        snackbarController?.open?.({
                             type: "error",
                             message: "Could not infer properties from data"
                         });
@@ -129,16 +158,16 @@ export function CollectionPropertiesEditorForm({
                             } else if (
                                 typeof newProp === "object" &&
                                 "type" in newProp &&
-                                newProp.dataType === "map" &&
-                                newProp.properties
+                                (newProp as MapProperty).type === "map" &&
+                                (newProp as MapProperty).properties
                             ) {
                                 // This is a map property, check for new nested properties
                                 const existingMapProps = typeof existingProp === "object" &&
                                     "type" in existingProp &&
-                                    existingProp.dataType === "map"
+                                    (existingProp as MapProperty).type === "map"
                                     ? (existingProp as MapProperty).properties
                                     : undefined;
-                                keys.push(...findNewPropertyKeys(existingMapProps, newProp.properties as Record<string, PropertyOrBuilder>, fullKey));
+                                keys.push(...findNewPropertyKeys(existingMapProps, (newProp as MapProperty).properties as Record<string, PropertyOrBuilder>, fullKey));
                             }
                         }
                         return keys;
@@ -165,11 +194,11 @@ export function CollectionPropertiesEditorForm({
                             } else if (
                                 typeof existingProp === "object" &&
                                 "type" in existingProp &&
-                                existingProp.dataType === "map" &&
+                                (existingProp as MapProperty).type === "map" &&
                                 typeof newProp === "object" &&
                                 "type" in newProp &&
-                                newProp.dataType === "map" &&
-                                newProp.properties
+                                (newProp as MapProperty).type === "map" &&
+                                (newProp as MapProperty).properties
                             ) {
                                 // Both are map properties, recursively add new nested properties
                                 // Only if the existing map has properties, merge them; otherwise keep existing as-is
@@ -179,9 +208,9 @@ export function CollectionPropertiesEditorForm({
                                         ...existingProp,
                                         properties: addNewPropertiesOnly(
                                             existingMapProps,
-                                            newProp.properties as Record<string, PropertyOrBuilder>
-                                        )
-                                    };
+                                            (newProp as MapProperty).properties as Record<string, PropertyOrBuilder>
+                                        ) as Properties
+                                    } as MapProperty;
                                 }
                                 // If existingProp doesn't have properties, keep it as-is (don't overwrite with inferred)
                             }
@@ -209,7 +238,7 @@ export function CollectionPropertiesEditorForm({
 
                     // Check if there are any changes (new properties or modified nested properties)
                     if (allNewPropertyKeys.length === 0) {
-                        snackbarController.open({
+                        snackbarController?.open?.({
                             type: "info",
                             message: "No new properties found in existing data"
                         });
@@ -228,7 +257,7 @@ export function CollectionPropertiesEditorForm({
                     updatePropertiesOrder(updatedPropertiesOrder);
                     setInferredPropertyKeys(allNewPropertyKeys);
 
-                    snackbarController.open({
+                    snackbarController?.open?.({
                         type: "success",
                         message: `Added ${allNewPropertyKeys.length} new ${allNewPropertyKeys.length === 1 ? "property" : "properties"}`
                     });
@@ -345,7 +374,7 @@ export function CollectionPropertiesEditorForm({
 
     };
 
-    const onPropertyErrorInternal = (id: string, namespace?: string, error?: Record<string, any>) => {
+    const onPropertyErrorInternal = (id: string, namespace?: string, error?: Record<string, unknown>) => {
         const propertyPath = id ? getFullId(id, namespace) : undefined;
         console.debug("onPropertyErrorInternal", {
             id,
@@ -365,7 +394,7 @@ export function CollectionPropertiesEditorForm({
         setSelectedPropertyKey(undefined);
     };
 
-    const initialErrors = selectedPropertyKey && propertyErrorsRef?.current?.properties ? propertyErrorsRef.current.properties[selectedPropertyKey] : undefined;
+    const initialErrors = selectedPropertyKey && propertyErrorsRef?.current?.properties ? (propertyErrorsRef.current.properties as Record<string, unknown>)[selectedPropertyKey] as Record<string, any> | undefined : undefined;
 
     const emptyCollection = (values?.propertiesOrder === undefined || values.propertiesOrder.length === 0)
         && (!values?.properties || Object.keys(values.properties).length === 0);
@@ -391,104 +420,93 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-surface dark:bg-surface-dark"}>
+        <div className={"grid grid-cols-12 h-full min-h-0 bg-surface-50 dark:bg-surface-800"}>
             <div className={cls(
-                "bg-surface-50 dark:bg-surface-900",
-                "p-4 md:p-8",
-                "col-span-12 lg:col-span-5 h-full overflow-auto",
+                "col-span-12 lg:col-span-5 h-full min-h-0 flex flex-col bg-surface-50 dark:bg-surface-800",
                 !asDialog && "border-r " + defaultBorderMixin
             )}>
-
-                <div className="flex my-2">
-
-                    <div className="grow mb-4">
-
+                {/* Sidebar Header */}
+                <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px] shrink-0", defaultBorderMixin)}>
+                    <div className="flex-grow min-w-0 pr-2">
                         <Field
                             name={"name"}
                             as={DebouncedTextField}
                             invisible={true}
                             className="-ml-1"
-                            inputClassName="text-2xl font-headers"
+                            inputClassName="text-sm font-semibold truncate bg-transparent border-0 outline-none focus:ring-0"
                             placeholder={"Collection name"}
                             size={"small"}
                             required
                             error={Boolean(errors?.name)}/>
-
-                        {owner &&
-                            <Typography variant={"body2"}
-                                className={"ml-2"}
-                                color={"secondary"}>
-                                Created by {owner.displayName}
-                            </Typography>}
                     </div>
 
-                    {extraIcon && <div className="ml-4">
-                        {extraIcon}
-                    </div>}
+                    {extraIcon && <div className="flex-shrink-0">{extraIcon}</div>}
 
-                    <div className="ml-4 flex flex-row gap-2 items-center flex-shrink-0">
-                        {/* <Tooltip title={"Get the code for this collection"}
-                            asChild={true}>
-                            <IconButton
-                                variant={"filled"}
-                                disabled={inferringProperties}
-                                onClick={() => setCodeDialogOpen(true)}>
-                                <CodeIcon />
-                            </IconButton>
-                        </Tooltip> */}
-                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}
-                            asChild={true}>
+                    <div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
+                        {inferPropertiesFromData && (
+                            <Tooltip title={"Add new properties based on data"} asChild={true}>
+                                <IconButton
+                                    size="small"
+                                    disabled={inferringProperties}
+                                    onClick={inferPropertiesFromData}
+                                >
+                                    {inferringProperties ? <CircularProgress size={"smallest"}/> : <FileSearchIcon size={iconSize.smallest}/>}
+                                </IconButton>
+                            </Tooltip>
+                        )}
+                        <Tooltip title={"Add new property"} asChild={true}>
                             <IconButton
-                                variant={"filled"}
-                                disabled={inferringProperties}
-                                onClick={inferPropertiesFromData}>
-                                {inferringProperties ? <CircularProgress size={"small"}/> : <FileSearchIcon/>}
-                            </IconButton>
-                        </Tooltip>}
-                        <Tooltip title={"Add new property"}
-                            asChild={true}>
-                            <Button
+                                size="small"
                                 disabled={configController?.readOnly}
-                                onClick={() => setNewPropertyDialogOpen(true)}>
-                                <PlusIcon/>
-                            </Button>
+                                onClick={() => setNewPropertyDialogOpen(true)}
+                            >
+                                <PlusIcon size={iconSize.smallest}/>
+                            </IconButton>
                         </Tooltip>
                     </div>
                 </div>
 
-                <ErrorBoundary>
-                    <PropertyTree
-                        className={"mt-2"}
-                        inferredPropertyKeys={inferredPropertyKeys}
-                        selectedPropertyKey={selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined}
-                        properties={values.properties}
-                        additionalFields={values.additionalFields}
-                        propertiesOrder={usedPropertiesOrder}
-                        onPropertyClick={onPropertyClick}
-                        onPropertyMove={onPropertyMove}
-                        onPropertyRemove={(isNewCollection || (inferredPropertyKeys && inferredPropertyKeys.length > 0)) && !configController?.readOnly ? deleteProperty : undefined}
-
-                        errors={errors}/>
-                </ErrorBoundary>
-
-                <Button className={"mt-4 xl:mt-8 w-full"}
-                    variant="filled"
-                    color="neutral"
-                    disabled={configController?.readOnly}
-                    onClick={() => setNewPropertyDialogOpen(true)}
-                    startIcon={<PlusIcon/>}>
-                    Add new property
-                </Button>
+                {/* Sidebar Content */}
+                <div className="flex-grow overflow-y-auto p-3 space-y-3 bg-surface-50 dark:bg-surface-800">
+                    {owner && (
+                        <div className="px-1 py-0.5">
+                            <Typography variant="body2" color="secondary">
+                                Created by {owner.displayName}
+                            </Typography>
+                        </div>
+                    )}
+                    <ErrorBoundary>
+                        <PropertyTree
+                            inferredPropertyKeys={inferredPropertyKeys}
+                            selectedPropertyKey={selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined}
+                            properties={values.properties}
+                            additionalFields={values.additionalFields}
+                            propertiesOrder={usedPropertiesOrder}
+                            onPropertyClick={onPropertyClick}
+                            onPropertyMove={onPropertyMove}
+                            onPropertyRemove={(isNewCollection || (inferredPropertyKeys && inferredPropertyKeys.length > 0)) && !configController?.readOnly ? deleteProperty : undefined}
+                            errors={errors}/>
+                    </ErrorBoundary>
+
+                    <Button className={"w-full"}
+                        variant="outlined"
+                        color="neutral"
+                        disabled={configController?.readOnly}
+                        onClick={() => setNewPropertyDialogOpen(true)}
+                        startIcon={<PlusIcon/>}>
+                        Add new property
+                    </Button>
+                </div>
             </div>
 
             {!asDialog &&
-                <div className={"col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto"}>
+                <div className={"col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto bg-surface-50 dark:bg-surface-800"}>
                     <div
                         className="sticky top-8 min-h-full w-full flex flex-col justify-center">
 
                         {selectedPropertyFullId &&
-                            selectedProperty &&
-                            !isPropertyBuilder(selectedProperty) &&
+                            !!selectedProperty &&
+                            !isPropertyBuilder(selectedProperty as Property) &&
                             <PropertyForm
                                 inArray={false}
                                 key={`edit_view_${selectedPropertyIndex}_${generationCounter}`}
@@ -498,7 +516,7 @@ export function CollectionPropertiesEditorForm({
                                 autoOpenTypeSelect={false}
                                 propertyKey={selectedPropertyKey}
                                 propertyNamespace={selectedPropertyNamespace}
-                                property={selectedProperty}
+                                property={selectedProperty as Property}
                                 onPropertyChanged={onPropertyChanged}
                                 onDelete={deleteProperty}
                                 onError={onPropertyErrorInternal}
@@ -506,6 +524,10 @@ export function CollectionPropertiesEditorForm({
                                 initialErrors={initialErrors}
                                 getData={getData}
                                 propertyConfigs={propertyConfigs}
+                                propertyTypePresets={propertyTypePresets}
+                                hiddenPropertyTypes={hiddenPropertyTypes}
+                                renderExtraPropertyFields={renderExtraPropertyFields}
+                                collectionValues={values}
 
                             />}
 
@@ -525,7 +547,7 @@ export function CollectionPropertiesEditorForm({
                                 </Button>
                             </div>}
 
-                        {selectedProperty && isPropertyBuilder(selectedProperty) &&
+                        {!!selectedProperty && isPropertyBuilder(selectedProperty as Property) &&
                             <Typography variant={"label"} className="flex items-center justify-center">
                                 {"This property is defined as a property builder in code"}
                             </Typography>}
@@ -542,7 +564,7 @@ export function CollectionPropertiesEditorForm({
                 autoOpenTypeSelect={false}
                 propertyKey={selectedPropertyKey}
                 propertyNamespace={selectedPropertyNamespace}
-                property={selectedProperty}
+                property={selectedProperty as Property | undefined}
                 onPropertyChanged={onPropertyChanged}
                 onDelete={deleteProperty}
                 onError={onPropertyErrorInternal}
@@ -550,6 +572,10 @@ export function CollectionPropertiesEditorForm({
                 initialErrors={initialErrors}
                 getData={getData}
                 propertyConfigs={propertyConfigs}
+                propertyTypePresets={propertyTypePresets}
+                hiddenPropertyTypes={hiddenPropertyTypes}
+                renderExtraPropertyFields={renderExtraPropertyFields}
+                collectionValues={values}
 
                 onCancel={closePropertyDialog}
                 onOkClicked={asDialog
@@ -576,6 +602,10 @@ export function CollectionPropertiesEditorForm({
             getData={getData}
             allowDataInference={!isNewCollection}
             propertyConfigs={propertyConfigs}
+            propertyTypePresets={propertyTypePresets}
+            hiddenPropertyTypes={hiddenPropertyTypes}
+            renderExtraPropertyFields={renderExtraPropertyFields}
+            collectionValues={values}
             existingPropertyKeys={values.propertiesOrder as string[]}/>
 
         <ErrorBoundary>