@firecms/core 3.0.0-alpha.27 → 3.0.0-alpha.29

package/src/core/components/EntityCollectionTable/internal/default_entity_actions.tsx

@@ -0,0 +1,107 @@
+import { EntityAction } from "../../../../types";
+import { DeleteEntityDialog } from "./DeleteEntityDialog";
+import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon } from "../../../../icons";
+
+export const editEntityAction: EntityAction = {
+    icon: <KeyboardTabIcon/>,
+    name: "Edit",
+    collapsed: false,
+    onClick({
+                entity,
+                collection,
+                context,
+                highlightEntity,
+                unhighlightEntity
+            }): Promise<void> {
+        highlightEntity?.(entity);
+        context.onAnalyticsEvent?.("entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+        context.sideEntityController.open({
+            entityId: entity.id,
+            path: entity.path,
+            collection,
+            updateUrl: true,
+            onClose: () => unhighlightEntity?.(entity)
+        });
+        return Promise.resolve(undefined);
+    }
+}
+
+export const copyEntityAction: EntityAction = {
+    icon: <FileCopyIcon/>,
+    name: "Copy",
+    onClick({
+                entity,
+                collection,
+                context,
+                highlightEntity,
+                unhighlightEntity
+            }): Promise<void> {
+        highlightEntity?.(entity);
+        context.onAnalyticsEvent?.("copy_entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+        context.sideEntityController.open({
+            entityId: entity.id,
+            path: entity.path,
+            copy: true,
+            collection,
+            updateUrl: true,
+            onClose: () => unhighlightEntity?.(entity)
+        });
+        return Promise.resolve(undefined);
+    }
+}
+export const archiveEntityAction: EntityAction = {
+    icon: <ArchiveIcon/>,
+    name: "Archive",
+    onClick({
+                entity,
+                collection,
+                context,
+            }): Promise<void> {
+        // Add your code here
+        return Promise.resolve(undefined);
+    }
+}
+
+export const deleteEntityAction: EntityAction = {
+    icon: <DeleteIcon/>,
+    name: "Delete",
+    onClick({
+                entity,
+                fullPath,
+                collection,
+                context,
+                selectionController,
+                onCollectionChange,
+                sideEntityController
+            }): Promise<void> {
+        const { closeDialog } = context.dialogsController.open({
+            key: "delete_entity_dialog_" + entity.id,
+            Component: ({ open }) => {
+                if (!collection || !fullPath)
+                    throw new Error("deleteEntityAction: Collection is undefined");
+                return <DeleteEntityDialog
+                    entityOrEntitiesToDelete={entity}
+                    path={fullPath}
+                    collection={collection}
+                    callbacks={collection.callbacks}
+                    open={open}
+                    onEntityDelete={() => {
+                        context.onAnalyticsEvent?.("single_entity_deleted", {
+                            path: fullPath
+                        });
+                        selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));
+                        onCollectionChange?.();
+                        sideEntityController?.close();
+                    }}
+                    onClose={closeDialog}/>;
+            }
+        })
+        return Promise.resolve(undefined);
+    }
+}

package/src/core/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -82,13 +82,16 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                 path,
                 entityId,
                 collection: inputCollection,
-                onUpdate: setEntity
+                onUpdate: (e) => {
+                    setEntity(e);
+                    setInternalValue(e?.values);
+                }
             });
         } else {
             return () => {
             };
         }
-    }, [dataSource, entityId, inputCollection, path]);
+    }, [dataSource, entityId, inputCollection, path, open]);
 
     const [internalValue, setInternalValue] = useState<EntityValues<M> | undefined>(entity?.values);
 
@@ -221,6 +224,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
             <Formik
                 initialValues={(entity?.values ?? {}) as EntityValues<M>}
+                enableReinitialize={true}
                 validationSchema={validationSchema}
                 validateOnMount={true}
                 validate={(values) => console.debug("Validating", values)}

package/src/core/components/EntityCollectionTable/types.tsx

@@ -1,59 +1,4 @@
-import {
-    CollectionSize,
-    DataSource,
-    Entity,
-    EntityCollection,
-    FireCMSContext,
-    ResolvedProperty, SelectedCellProps,
-    User
-} from "../../../types";
-
-export type EntityCollectionTableProviderProps<M extends Record<string, any>, AdditionalKey extends string, UserType extends User> = {
-
-    /**
-     * Absolute collection path
-     */
-    path: string;
-
-    /**
-     * Use to resolve the collection properties for specific path, entity id or values
-     */
-    collection: EntityCollection<M>
-
-    /**
-     * List of entities that will be displayed on top, no matter the ordering.
-     * This is used for reference fields selection
-     */
-    entitiesDisplayedFirst?: Entity<M>[];
-
-    /**
-     * Callback when anywhere on the table is clicked
-     */
-    onEntityClick?(entity: Entity<M>): void;
-
-    /**
-     * Callback when the selected size of the table is changed
-     */
-    onSizeChanged?(size: CollectionSize): void;
-
-    /**
-     * Can the table be edited inline
-     */
-    inlineEditing: ((entity: Entity<any>) => boolean) | boolean;
-
-    /**
-     * Builder for creating the buttons in each row
-     * @param entity
-     * @param size
-     */
-    tableRowActionsBuilder?: ({
-                                  entity,
-                                  size
-                              }: {
-        entity: Entity<M>,
-        size: CollectionSize
-    }) => React.ReactNode;
-};
+import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../../types";
 
 export type EntityCollectionTableController<M extends Record<string, any>> = {
 

package/src/core/components/EntityCollectionView/EntityCollectionView.tsx

@@ -6,6 +6,7 @@ import {
     AdditionalFieldDelegate,
     CollectionSize,
     Entity,
+    EntityAction,
     EntityCollection,
     FilterValues,
     PartialEntityCollection,
@@ -40,14 +41,14 @@ import {
     useAuthController,
     useDataSource,
     useFireCMSContext,
+    useLargeLayout,
     useNavigationContext,
     useSideEntityController
 } from "../../../hooks";
 import { useUserConfigurationPersistence } from "../../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import { useEntityCollectionTableController } from "../EntityCollectionTable/useEntityCollectionTableController";
-import { Button, cn, IconButton, TextField, Tooltip, Typography } from "../../../components";
-import { Popover } from "../../../components/Popover";
+import { Button, cn, IconButton, Popover, TextField, Tooltip, Typography } from "../../../components";
 import { Skeleton } from "../../../components/Skeleton";
 import { setIn } from "formik";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
@@ -55,6 +56,11 @@ import { KeyboardTabIcon, SearchIcon } from "../../../icons";
 import { useColumnIds } from "./useColumnsIds";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
+import {
+    copyEntityAction,
+    deleteEntityAction,
+    editEntityAction
+} from "../EntityCollectionTable/internal/default_entity_actions";
 
 const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
@@ -116,6 +122,7 @@ export const EntityCollectionView = React.memo(
             return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
         }, [collectionProp, fullPath, userConfigPersistence?.getCollectionConfig]);
 
+        const canCreateEntities = canCreateEntity(collection, authController, fullPathToCollectionSegments(fullPath), null);
         const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
 
@@ -271,7 +278,7 @@ export const EntityCollectionView = React.memo(
                  value,
                  property,
                  entityId
-             }) => dataSource.checkUniqueField(fullPath, name, value, property, entityId),
+             }) => dataSource.checkUniqueField(fullPath, name, value, entityId),
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
@@ -343,39 +350,8 @@ export const EntityCollectionView = React.memo(
 
         const displayedColumnIds = useColumnIds(resolvedCollection, true);
 
-        const onCopyClicked = useCallback((clickedEntity: Entity<M>) => {
-            setSelectedNavigationEntity(clickedEntity);
-            context.onAnalyticsEvent?.("copy_entity_click", {
-                path: clickedEntity.path,
-                entityId: clickedEntity.id
-            });
-            sideEntityController.open({
-                entityId: clickedEntity.id,
-                path: clickedEntity.path,
-                copy: true,
-                collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity
-            });
-        }, [sideEntityController, collection, fullPath, unselectNavigatedEntity]);
-
-        const onEditClicked = useCallback((clickedEntity: Entity<M>) => {
-            setSelectedNavigationEntity(clickedEntity);
-            context.onAnalyticsEvent?.("entity_click", {
-                path: clickedEntity.path,
-                entityId: clickedEntity.id
-            });
-            sideEntityController.open({
-                entityId: clickedEntity.id,
-                path: clickedEntity.path,
-                collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity
-            });
-        }, [sideEntityController, collection, fullPath, unselectNavigatedEntity]);
-
         const additionalFields = useMemo(() => {
-            const subcollectionColumns: AdditionalFieldDelegate<M, any, any>[] = collection.subcollections?.map((subcollection) => {
+            const subcollectionColumns: AdditionalFieldDelegate<M, any>[] = collection.subcollections?.map((subcollection) => {
                 return {
                     id: getSubcollectionColumnId(subcollection),
                     name: subcollection.name,
@@ -401,7 +377,7 @@ export const EntityCollectionView = React.memo(
                 };
             }) ?? [];
 
-            const collectionGroupParentCollections: AdditionalFieldDelegate<M, any, any>[] = collection.collectionGroup
+            const collectionGroupParentCollections: AdditionalFieldDelegate<M, any>[] = collection.collectionGroup
                 ? [{
                     id: COLLECTION_GROUP_PARENT_ID,
                     name: "Parent entities",
@@ -432,6 +408,32 @@ export const EntityCollectionView = React.memo(
             ];
         }, [collection, fullPath]);
 
+        const updateLastDeleteTimestamp = useCallback(() => {
+            setLastDeleteTimestamp(Date.now());
+        }, []);
+
+        const largeLayout = useLargeLayout();
+
+        const getActionsForEntity = useCallback(({ entity, customEntityActions }: { entity?: Entity<M>, customEntityActions?: EntityAction[] }): EntityAction[] => {
+            const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPathToCollectionSegments(fullPath), entity) : true;
+            const actions: EntityAction[] = [editEntityAction];
+            if (createEnabled)
+                actions.push(copyEntityAction);
+            if (deleteEnabled)
+                actions.push(deleteEntityAction);
+            if (customEntityActions)
+                actions.push(...customEntityActions);
+            return actions;
+        }, [authController, collection, createEnabled, fullPath]);
+
+        const getIdColumnWidth = useCallback(() => {
+            const entityActions = getActionsForEntity({});
+            const collapsedActions = entityActions.filter(a => a.collapsed !== false);
+            const uncollapsedActions = entityActions.filter(a => a.collapsed === false);
+            const actionsWidth = uncollapsedActions.length * (largeLayout ? 40 : 30);
+            return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
+        }, [largeLayout, getActionsForEntity]);
+
         const tableRowActionsBuilder = useCallback(({
                                                         entity,
                                                         size,
@@ -446,7 +448,7 @@ export const EntityCollectionView = React.memo(
 
             const isSelected = isEntitySelected(entity);
 
-            const deleteEnabled = canDeleteEntity(collection, authController, fullPathToCollectionSegments(fullPath), entity);
+            const actions = getActionsForEntity({ entity, customEntityActions: collection.entityActions });
 
             return (
                 <EntityCollectionRowActions
@@ -456,15 +458,18 @@ export const EntityCollectionView = React.memo(
                     isSelected={isSelected}
                     selectionEnabled={selectionEnabled}
                     size={size}
-                    toggleEntitySelection={toggleEntitySelection}
-                    onEditClicked={onEditClicked}
-                    onCopyClicked={createEnabled ? onCopyClicked : undefined}
-                    onDeleteClicked={deleteEnabled ? onSingleDeleteClick : undefined}
+                    highlightEntity={setSelectedNavigationEntity}
+                    unhighlightEntity={unselectNavigatedEntity}
+                    collection={collection}
+                    fullPath={fullPath}
+                    actions={actions}
                     hideId={collection?.hideIdFromCollection}
+                    onCollectionChange={updateLastDeleteTimestamp}
+                    selectionController={usedSelectionController}
                 />
             );
 
-        }, [isEntitySelected, collection, authController, fullPath, selectionEnabled, toggleEntitySelection, onEditClicked, createEnabled, onCopyClicked]);
+        }, [isEntitySelected, collection, authController, fullPath, selectionEnabled, toggleEntitySelection, createEnabled]);
 
         const title = <Popover
             open={popOverOpen}
@@ -522,6 +527,7 @@ export const EntityCollectionView = React.memo(
                             propertyKey={propertyKey}
                             property={property}
                             fullPath={fullPath}
+                            collection={collection}
                             parentPathSegments={parentPathSegments ?? []}/>;
                     })}
             </>;
@@ -569,10 +575,25 @@ export const EntityCollectionView = React.memo(
                         selectionEnabled={selectionEnabled}
                         collectionEntitiesCount={docsCount}
                     />}
+                    emptyComponent={canCreateEntities
+                        ? <div className="flex flex-col items-center justify-center">
+                            <Typography variant={"subtitle2"}>So empty...</Typography>
+                            <Button
+                                color={"primary"}
+                                variant={"outlined"}
+                                onClick={onNewClick}
+                                className="mt-4"
+                            >
+                                Create your first entity
+                            </Button>
+                        </div>
+                        : undefined
+                    }
                     hoverRow={hoverRow}
                     inlineEditing={checkInlineEditing()}
                     AdditionalHeaderWidget={buildAdditionalHeaderWidget}
                     AddColumnComponent={addColumnComponentInternal}
+                    getIdColumnWidth={getIdColumnWidth}
                     additionalIDHeaderWidget={<EntityIdHeaderWidget
                         path={fullPath}
                         collection={collection}/>}
@@ -690,7 +711,10 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
     return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
 }
 
-function EntityIdHeaderWidget({ collection, path }: {
+function EntityIdHeaderWidget({
+                                  collection,
+                                  path
+                              }: {
     collection: EntityCollection,
     path: string
 }) {

package/src/core/components/FieldConfigBadge.tsx

@@ -1,14 +1,14 @@
 import { getIconForWidget } from "../util";
-import { FieldConfig } from "../../types";
+import { PropertyConfig } from "../../types";
 
-export function FieldConfigBadge({ fieldConfig }: { fieldConfig: FieldConfig | undefined }): React.ReactNode {
+export function FieldConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
     const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
 
     return <div
         className={classes}
         style={{
-            background: fieldConfig?.color ?? "#888"
+            background: propertyConfig?.color ?? "#888"
         }}>
-        {getIconForWidget(fieldConfig, "medium")}
+        {getIconForWidget(propertyConfig, "medium")}
     </div>
 }

package/src/core/components/ReferenceSelectionInner.tsx

@@ -230,9 +230,9 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
             size={size}
             isSelected={isSelected}
             selectionEnabled={multiselect}
-            toggleEntitySelection={toggleEntitySelection}
             hideId={collection?.hideIdFromCollection}
-        />;
+            fullPath={fullPath}
+            selectionController={selectionController}/>;
 
     }, [multiselect, selectionController.selectedEntities, toggleEntitySelection, collection?.hideIdFromCollection]);
 

package/src/core/components/VirtualTable/VirtualTable.tsx

@@ -102,7 +102,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              onFilterUpdate,
                                                              sortBy,
                                                              error,
-                                                             emptyMessage,
+                                                             emptyComponent,
                                                              onSortByUpdate,
                                                              loading,
                                                              cellRenderer,
@@ -249,13 +249,11 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             if (loading)
                 return <CircularProgressCenter/>;
             return <div
-                className="flex overflow-auto items-center justify-center p-2 gap-2 h-full">
+                className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
                 <AssignmentIcon/>
-                <Typography>
-                    {emptyMessage}
-                </Typography>
+                {emptyComponent}
             </div>;
-        }, [emptyMessage, loading]);
+        }, [emptyComponent, loading]);
 
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error ? buildErrorView() : (empty ? buildEmptyView() : undefined);

package/src/core/components/VirtualTable/VirtualTableHeader.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject, useCallback, useEffect, useState } from "react";
+import React, { RefObject, useCallback, useEffect, useRef, useState } from "react";
 import equal from "react-fast-compare";
 
 import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
@@ -13,8 +13,8 @@ interface FilterFormProps<T> {
     filter?: [VirtualTableWhereFilterOp, any];
     onHover: boolean,
     createFilterField: (props: FilterFormFieldProps<T>) => React.ReactNode;
-    popupOpen: boolean;
-    setPopupOpen: (open: boolean) => void;
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
 }
 
 export type FilterFormFieldProps<CustomProps> = {
@@ -22,8 +22,8 @@ export type FilterFormFieldProps<CustomProps> = {
     filterValue: [VirtualTableWhereFilterOp, any] | undefined,
     setFilterValue: (filterValue?: [VirtualTableWhereFilterOp, any]) => void;
     column: VirtualTableColumn<CustomProps>;
-    popupOpen: boolean;
-    setPopupOpen: (open: boolean) => void;
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
 };
 
 type VirtualTableHeaderProps<M extends Record<string, any>> = {
@@ -58,6 +58,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         const [onHover, setOnHover] = useState(false);
 
         const [openFilter, setOpenFilter] = React.useState(false);
+        const [hidden, setHidden] = React.useState(false);
 
         const handleSettingsClick = useCallback((event: any) => {
             setOpenFilter(true);
@@ -145,6 +146,8 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                             <Popover
                                 open={openFilter}
                                 onOpenChange={setOpenFilter}
+                                className={hidden ? "hidden" : undefined}
+                                modal={true}
                                 trigger={
                                     <IconButton
                                         className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
@@ -153,17 +156,18 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                         <FilterListIcon size={"small"}/>
                                     </IconButton>}
                             >
-                                {column.filter &&
-                                    <FilterForm column={column}
-                                                filter={filter}
-                                                onHover={onHover}
-                                                onFilterUpdate={update}
-                                                createFilterField={createFilterField}
-                                                popupOpen={openFilter}
-                                                setPopupOpen={setOpenFilter}/>}
+                                <FilterForm column={column}
+                                            filter={filter}
+                                            onHover={onHover}
+                                            onFilterUpdate={update}
+                                            createFilterField={createFilterField}
+                                            hidden={hidden}
+                                            setHidden={setHidden}/>
+
                             </Popover>
 
                         </Badge>
+
                     </div>}
 
                     {column.resizable && <div
@@ -176,7 +180,6 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     />}
                 </div>
 
-
             </ErrorBoundary>
         );
     }, equal) as React.FunctionComponent<VirtualTableHeaderProps<any>>;
@@ -187,8 +190,8 @@ function FilterForm<M>({
                            filter,
                            onHover,
                            createFilterField,
-                           popupOpen,
-                           setPopupOpen,
+                           hidden,
+                           setHidden,
                        }: FilterFormProps<M>) {
 
     const id = column.key;
@@ -216,8 +219,8 @@ function FilterForm<M>({
         filterValue: filterInternal,
         setFilterValue: setFilterInternal,
         column,
-        popupOpen,
-        setPopupOpen
+        hidden,
+        setHidden
     });
 
     if (!filterField) return null;

package/src/core/components/VirtualTable/VirtualTableProps.tsx

@@ -102,7 +102,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
     /**
      * Message displayed when there is no data
      */
-    emptyMessage?: string;
+    emptyComponent?: React.ReactNode;
 
     /**
      * Is the table in a loading state

package/src/core/contexts/DialogsProvider.tsx

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren, useCallback, useRef, useState } from "react";
+import { DialogControllerEntryProps, DialogsController } from "../../types/dialogs_controller";
+
+export const DialogsControllerContext = React.createContext<DialogsController>({} as DialogsController);
+
+export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+
+    const [dialogEntries, setDialogEntries] = useState<DialogControllerEntryProps[]>([]);
+    const dialogEntriesRef = useRef<DialogControllerEntryProps[]>(dialogEntries);
+
+    const updateDialogEntries = (newPanels: DialogControllerEntryProps[]) => {
+        dialogEntriesRef.current = newPanels;
+        setDialogEntries(newPanels);
+    };
+
+    const close = useCallback(() => {
+
+        if (dialogEntries.length === 0)
+            return;
+
+        const updatedPanels = [...dialogEntries.slice(0, -1)];
+        updateDialogEntries(updatedPanels);
+
+    }, [dialogEntries]);
+
+    const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
+
+        const updatedPanels = [...dialogEntries, dialogEntry];
+        updateDialogEntries(updatedPanels);
+
+        return {
+            closeDialog: () => {
+                const updatedPanels = dialogEntriesRef.current.filter(e => e.key !== dialogEntry.key);
+                updateDialogEntries(updatedPanels);
+            }
+        }
+    }, [dialogEntries]);
+
+    return (
+        <DialogsControllerContext.Provider value={{
+            open,
+            close
+        }}>
+            {children}
+            {dialogEntries.map((entry, i) => <entry.Component
+                key={`dialog_${i}`}
+                open={true}/>)}
+        </DialogsControllerContext.Provider>
+    );
+};

package/src/core/form_field_configs.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ArrayProperty, FieldConfig, FieldProps, Property, ResolvedProperty } from "../types";
+import { ArrayProperty, PropertyConfig, FieldProps, Property, ResolvedProperty } from "../types";
 import {
     ArrayCustomShapedFieldBinding,
     ArrayOfReferencesFieldBinding,
@@ -44,7 +44,7 @@ export function isDefaultFieldConfigId(id: string) {
     return Object.keys(DEFAULT_FIELD_CONFIGS).includes(id);
 }
 
-export const DEFAULT_FIELD_CONFIGS: Record<string, FieldConfig<any>> = {
+export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     text_field: {
         key: "text_field",
         name: "Text field",
@@ -313,7 +313,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, FieldConfig<any>> = {
     }
 };
 
-export function getFieldConfig(property: Property | ResolvedProperty, customFields: Record<string, FieldConfig<any>>): FieldConfig | undefined {
+export function getFieldConfig(property: Property | ResolvedProperty, customFields: Record<string, PropertyConfig<any>>): PropertyConfig | undefined {
     const fieldId = getFieldId(property);
     const defaultFieldId = getDefaultFieldId(property);
     // console.log("fieldId", { fieldId });
@@ -386,7 +386,7 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
 }
 
 export function getFieldId(property: Property | ResolvedProperty): string | undefined {
-    if (property.fieldConfig)
-        return property.fieldConfig;
+    if (property.propertyConfig)
+        return property.propertyConfig;
     return getDefaultFieldId(property);
 }