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

package/dist/util/resolutions.d.ts

@@ -1,12 +1,12 @@
 import { ArrayProperty, CMSType, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
-export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, fields, ignoreMissingFields }: {
+export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, propertyConfigs, ignoreMissingFields }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
     entityId?: string;
     values?: Partial<EntityValues<M>>;
     previousValues?: Partial<EntityValues<M>>;
     userConfigPersistence?: UserConfigurationPersistence;
-    fields?: Record<string, PropertyConfig>;
+    propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
 }) => ResolvedEntityCollection<M>;
 /**
@@ -23,7 +23,7 @@ export declare function resolveProperty<T extends CMSType = CMSType, M extends R
     entityId?: string;
     index?: number;
     fromBuilder?: boolean;
-    fields?: Record<string, PropertyConfig<any>>;
+    propertyConfigs?: Record<string, PropertyConfig<any>>;
     ignoreMissingFields?: boolean;
 }): ResolvedProperty<T> | null;
 export declare function getArrayResolvedProperties<M>({ propertyKey, propertyValue, property, ...props }: {
@@ -37,7 +37,7 @@ export declare function getArrayResolvedProperties<M>({ propertyKey, propertyVal
     entityId?: string;
     index?: number;
     fromBuilder?: boolean;
-    fields?: Record<string, PropertyConfig>;
+    propertyConfigs?: Record<string, PropertyConfig>;
 }): ResolvedProperty[];
 export declare function resolveArrayProperty<T extends any[], M>({ propertyKey, property, ignoreMissingFields, ...props }: {
     propertyKey?: string;
@@ -48,7 +48,7 @@ export declare function resolveArrayProperty<T extends any[], M>({ propertyKey,
     entityId?: string;
     index?: number;
     fromBuilder?: boolean;
-    fields?: Record<string, PropertyConfig>;
+    propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
 }): ResolvedArrayProperty;
 /**
@@ -65,7 +65,7 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
     entityId?: string;
     index?: number;
     fromBuilder?: boolean;
-    fields?: Record<string, PropertyConfig>;
+    propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
 }): ResolvedProperties<M>;
 /**

package/package.json

@@ -1,131 +1,137 @@
 {
-    "name": "@firecms/core",
-    "type": "module",
-    "version": "3.0.0-beta.10",
-    "description": "Awesome Firebase/Firestore-based headless open-source CMS",
-    "funding": {
-        "url": "https://github.com/sponsors/firecmsco"
+  "name": "@firecms/core",
+  "type": "module",
+  "version": "3.0.0-beta.11",
+  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
+  "funding": {
+    "url": "https://github.com/sponsors/firecmsco"
+  },
+  "author": "FireCMS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/firecmsco/firecms.git",
+    "directory": "packages/firecms_core"
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "source": "src/index.ts",
+  "engines": {
+    "node": ">=14"
+  },
+  "keywords": [
+    "firebase",
+    "cms",
+    "admin",
+    "admin panel",
+    "firebase panel",
+    "firestore",
+    "headless",
+    "headless cms",
+    "content manager"
+  ],
+  "scripts": {
+    "watch": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "prepublishOnly": "run-s build",
+    "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
+    "test:lint": "eslint \"src/**\" --quiet",
+    "test": "jest",
+    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
+    "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
     },
-    "author": "FireCMS",
-    "license": "MIT",
-    "repository": "git@github.com:FireCMSco/firecms.git",
-    "main": "./dist/index.umd.js",
-    "module": "./dist/index.es.js",
-    "types": "./dist/index.d.ts",
-    "source": "src/index.ts",
-    "engines": {
-        "node": ">=14"
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@firecms/editor": "^3.0.0-beta.11",
+    "@firecms/formex": "^3.0.0-beta.11",
+    "@firecms/ui": "^3.0.0-beta.11",
+    "@hello-pangea/dnd": "^17.0.0",
+    "@radix-ui/react-portal": "^1.1.2",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "fuse.js": "^7.0.0",
+    "history": "^5.3.0",
+    "markdown-it": "^14.1.0",
+    "notistack": "^3.0.1",
+    "object-hash": "^3.0.0",
+    "react-dropzone": "^14.3.5",
+    "react-fast-compare": "^3.2.2",
+    "react-image-file-resizer": "^0.4.8",
+    "react-transition-group": "^4.4.5",
+    "react-use-measure": "^2.1.1",
+    "react-window": "^1.8.10",
+    "yup": "^0.32.11"
+  },
+  "peerDependencies": {
+    "firebase": "^10.5.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20.17.9",
+    "@types/object-hash": "^3.0.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-measure": "^2.0.12",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-react-compiler": "beta",
+    "cross-env": "^7.0.3",
+    "eslint-plugin-react-compiler": "beta",
+    "firebase": "^10.14.1",
+    "jest": "^29.7.0",
+    "npm-run-all": "^4.1.5",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "tsd": "^0.31.2",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "gitHead": "cb6d419faf2664cfd6cb2603a834e4bf499a92bb",
+  "publishConfig": {
+    "access": "public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
     },
-    "keywords": [
-        "firebase",
-        "cms",
-        "admin",
-        "admin panel",
-        "firebase panel",
-        "firestore",
-        "headless",
-        "headless cms",
-        "content manager"
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
     ],
-    "scripts": {
-        "watch": "vite build --watch",
-        "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
-        "prepublishOnly": "run-s build",
-        "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
-        "test:lint": "eslint \"src/**\" --quiet",
-        "test": "jest",
-        "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
-        "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
-    },
-    "exports": {
-        ".": {
-            "import": "./dist/index.es.js",
-            "require": "./dist/index.umd.js",
-            "types": "./dist/index.d.ts"
-        },
-        "./package.json": "./package.json"
-    },
-    "dependencies": {
-        "@firecms/editor": "^3.0.0-beta.10",
-        "@firecms/formex": "^3.0.0-beta.10",
-        "@firecms/ui": "^3.0.0-beta.10",
-        "@hello-pangea/dnd": "^17.0.0",
-        "@radix-ui/react-portal": "^1.1.2",
-        "clsx": "^2.1.1",
-        "date-fns": "^3.6.0",
-        "fuse.js": "^7.0.0",
-        "history": "^5.3.0",
-        "markdown-it": "^14.1.0",
-        "notistack": "^3.0.1",
-        "object-hash": "^3.0.0",
-        "react-dropzone": "^14.2.9",
-        "react-fast-compare": "^3.2.2",
-        "react-image-file-resizer": "^0.4.8",
-        "react-transition-group": "^4.4.5",
-        "react-use-measure": "^2.1.1",
-        "react-window": "^1.8.10",
-        "yup": "^0.32.11"
-    },
-    "peerDependencies": {
-        "firebase": "^10.5.2",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-router": "^6.25.1",
-        "react-router-dom": "^6.25.1"
-    },
-    "devDependencies": {
-        "@jest/globals": "^29.7.0",
-        "@testing-library/react": "^16.0.1",
-        "@testing-library/user-event": "^14.5.2",
-        "@types/jest": "^29.5.13",
-        "@types/node": "^20.16.11",
-        "@types/object-hash": "^3.0.6",
-        "@types/react": "^18.3.11",
-        "@types/react-dom": "^18.3.0",
-        "@types/react-measure": "^2.0.12",
-        "@vitejs/plugin-react": "^4.3.2",
-        "cross-env": "^7.0.3",
-        "firebase": "^10.14.0",
-        "jest": "^29.7.0",
-        "npm-run-all": "^4.1.5",
-        "react-router": "^6.26.2",
-        "react-router-dom": "^6.26.2",
-        "ts-jest": "^29.2.5",
-        "ts-node": "^10.9.2",
-        "tsd": "^0.31.2",
-        "typescript": "^5.6.3",
-        "vite": "^5.4.8"
-    },
-    "files": [
-        "dist",
-        "src"
-    ],
-    "gitHead": "f844c3f86094efec6c33313c3f106f30cdcd309f",
-    "publishConfig": {
-        "access": "public"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "jest": {
-        "transform": {
-            "^.+\\.tsx?$": "ts-jest"
-        },
-        "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
-        "moduleFileExtensions": [
-            "ts",
-            "tsx",
-            "js",
-            "jsx",
-            "json",
-            "node"
-        ],
-        "testEnvironment": "node",
-        "moduleNameMapper": {
-            "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
-        }
+    "testEnvironment": "node",
+    "moduleNameMapper": {
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
     }
+  }
 }

package/src/app/Scaffold.tsx

@@ -91,7 +91,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                 autoOpenDrawer
             }}>
                 <div
-                    className={cls("flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden", className)}
+                    className={cls("flex h-screen w-screen bg-surface-50 dark:bg-surface-900 text-surface-900 dark:text-white overflow-hidden", className)}
                     style={{
                         paddingTop: "env(safe-area-inset-top)",
                         paddingLeft: "env(safe-area-inset-left)",
@@ -168,7 +168,7 @@ function DrawerWrapper(props: {
                      sideOffset={12}
                      asChild={true}>
                 <div
-                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
+                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
                     <IconButton
                         color="inherit"
                         aria-label="Open menu"
@@ -209,7 +209,7 @@ function DrawerWrapper(props: {
                 aria-label="Open drawer"
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
-                className="absolute sm:top-2 sm:left-5 top-1 left-2"
+                className="absolute sm:top-2 sm:left-4 top-1 left-2"
             >
                 <MenuIcon/>
             </IconButton>
@@ -217,7 +217,7 @@ function DrawerWrapper(props: {
                    transparent={true}
                    open={props.open}
                    onOpenChange={props.setDrawerOpen}
-                   title={"Navigaion drawer"}
+                   title={"Navigation drawer"}
                    overlayClassName={"bg-white bg-opacity-80"}
             >
                 {innerDrawer}

package/src/components/ArrayContainer.tsx

@@ -6,10 +6,12 @@ import { getHashValue } from "../util";
 import {
     AddIcon,
     Button,
+    cls,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin,
     HandleIcon,
     IconButton,
+    KeyboardArrowDownIcon,
+    KeyboardArrowUpIcon,
     Menu,
     MenuItem,
     RemoveIcon,
@@ -17,11 +19,21 @@ import {
     useOutsideAlerter
 } from "@firecms/ui";
 
-interface ArrayContainerProps<T> {
+export type ArrayEntryParams = {
+    index: number,
+    internalId: number,
+    isDragging: boolean,
+    storedProps?: object,
+    storeProps: (props: object) => void
+};
+
+export type ArrayEntryBuilder = (params: ArrayEntryParams) => React.ReactNode;
+
+export interface ArrayContainerProps<T> {
     droppableId: string;
     value: T[];
     addLabel: string;
-    buildEntry: (index: number, internalId: number) => React.ReactNode;
+    buildEntry: ArrayEntryBuilder;
     disabled?: boolean;
     size?: "small" | "medium";
     onInternalIdAdded?: (id: number) => void;
@@ -68,6 +80,12 @@ export function ArrayContainer<T>({
             ? Object.values(internalIdsRef.current)
             : []);
 
+    const itemCustomPropsRef = useRef<Record<number, object>>({});
+
+    const updateItemCustomProps = useCallback((internalId: number, customProps: object) => {
+        itemCustomPropsRef.current[internalId] = customProps;
+    }, []);
+
     useEffect(() => {
         if (hasValue && value && value.length !== internalIds.length) {
             const newInternalIds = value.map((v, index) => {
@@ -116,6 +134,18 @@ export function ArrayContainer<T>({
         onValueChange([...value.slice(0, index + 1), copyingItem, ...value.slice(index + 1)]);
     };
 
+    const addInIndex = (index: number) => {
+        const id = getRandomId();
+        const newIds: number[] = [
+            ...internalIds.splice(0, index),
+            id,
+            ...internalIds.slice(index)];
+        if (onInternalIdAdded)
+            onInternalIdAdded(id);
+        setInternalIds(newIds);
+        onValueChange([...value.slice(0, index), newDefaultEntry, ...value.slice(index)]);
+    }
+
     const onDragEnd = (result: any) => {
         // dropped outside the list
         if (!result.destination) {
@@ -150,13 +180,16 @@ export function ArrayContainer<T>({
                                    remove={remove}
                                    copy={copy}
                                    isDragging={snapshot.isDragging}
+                                   storedProps={itemCustomPropsRef.current[internalId]}
+                                   updateItemCustomProps={updateItemCustomProps}
+                                   addInIndex={addInIndex}
                                />
                            );
                        }}
             >
                 {(droppableProvided, droppableSnapshot) => (
                     <div
-                        className={className}
+                        className={cls("space-y-1", className)}
                         {...droppableProvided.droppableProps}
                         ref={droppableProvided.innerRef}>
                         {hasValue && internalIds.map((internalId: number, index: number) => {
@@ -177,6 +210,9 @@ export function ArrayContainer<T>({
                                             remove={remove}
                                             copy={copy}
                                             isDragging={snapshot.isDragging}
+                                            storedProps={itemCustomPropsRef.current[internalId]}
+                                            updateItemCustomProps={updateItemCustomProps}
+                                            addInIndex={addInIndex}
                                         />
                                     )}
                                 </Draggable>
@@ -209,10 +245,13 @@ type ArrayContainerItemProps = {
     internalId: number,
     size?: "small" | "medium",
     disabled: boolean,
-    buildEntry: (index: number, internalId: number) => React.ReactNode,
+    buildEntry: ArrayEntryBuilder,
     remove: (index: number) => void,
     copy: (index: number) => void,
+    addInIndex?: (index: number) => void,
     isDragging: boolean,
+    storedProps?: object,
+    updateItemCustomProps: (internalId: number, props: object) => void
 };
 
 export function ArrayContainerItem({
@@ -223,36 +262,39 @@ export function ArrayContainerItem({
                                        disabled,
                                        buildEntry,
                                        remove,
+                                       addInIndex,
                                        copy,
-                                       isDragging
+                                       isDragging,
+                                       storedProps,
+                                       updateItemCustomProps
                                    }: ArrayContainerItemProps) {
 
-    const [onHover, setOnHover] = React.useState(false);
-    const setOnHoverTrue = useCallback(() => setOnHover(true), []);
-    const setOnHoverFalse = useCallback(() => setOnHover(false), []);
-
     return <div
-        onMouseEnter={setOnHoverTrue}
-        onMouseMove={setOnHoverTrue}
-        onMouseLeave={setOnHoverFalse}
         ref={provided.innerRef}
         {...provided.draggableProps}
         style={provided.draggableProps.style}
         className={`${
-            (isDragging || onHover) ? "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20" : ""
-        } mb-1 rounded-md opacity-100`}
+            !isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""
+        } rounded-md opacity-100`}
     >
         <div
             className="flex items-start">
             <div
                 className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
-                {buildEntry(index, internalId)}
+                {buildEntry({
+                    index,
+                    internalId,
+                    isDragging,
+                    storedProps,
+                    storeProps: (props: object) => updateItemCustomProps(internalId, props)
+                })}
             </div>
             <ArrayItemOptions direction={size === "small" ? "row" : "column"}
                               disabled={disabled}
                               remove={remove}
                               index={index}
                               provided={provided}
+                              addInIndex={addInIndex}
                               copy={copy}/>
         </div>
     </div>;
@@ -265,13 +307,15 @@ export function ArrayItemOptions({
                                      index,
                                      provided,
                                      copy,
+                                     addInIndex
                                  }: {
     direction?: "row" | "column",
     disabled: boolean,
     remove: (index: number) => void,
     index: number,
     provided: any,
-    copy: (index: number) => void
+    copy: (index: number) => void,
+    addInIndex?: (index: number) => void
 }) {
 
     const [menuOpen, setMenuOpen] = useState(false);
@@ -321,6 +365,24 @@ export function ArrayItemOptions({
                     Copy
                 </MenuItem>
 
+                {addInIndex && <MenuItem dense
+                                         onClick={() => {
+                                             setMenuOpen(false);
+                                             addInIndex(index);
+                                         }}>
+                    <KeyboardArrowUpIcon size={"small"}/>
+                    Add on top
+                </MenuItem>}
+
+                {addInIndex && <MenuItem dense
+                                         onClick={() => {
+                                             setMenuOpen(false);
+                                             addInIndex(index + 1);
+                                         }}>
+                    <KeyboardArrowDownIcon size={"small"}/>
+                    Add below
+                </MenuItem>}
+
             </Menu>
         </Tooltip>
 

package/src/components/CircularProgressCenter.tsx

@@ -13,7 +13,7 @@ export function CircularProgressCenter({ text, ...props }: CircularProgressProps
 }) {
     return (
         <div
-            className="flex w-full h-screen max-h-full max-w-full bg-gray-50 dark:bg-gray-900 gap-4">
+            className="flex w-full h-screen max-h-full max-w-full bg-surface-50 dark:bg-surface-900 gap-4">
             <div className="m-auto flex flex-col gap-2 items-center">
                 <CircularProgress {...props}/>
                 {text && <Typography

package/src/components/ConfirmationDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton, Typography } from "@firecms/ui";
 
 export function ConfirmationDialog({
                                              open,
@@ -22,8 +22,8 @@ export function ConfirmationDialog({
             open={open}
             onOpenChange={(open) => !open ? onCancel() : undefined}
         >
+            <DialogTitle variant={"h6"} className={"mb-2"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"} className={"mb-2"}>{title}</Typography>
                 {body}
             </DialogContent>
 

package/src/components/DeleteEntityDialog.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCallbacks, EntityCollection } from "../types";
 import React, { useCallback, useMemo, useState } from "react";
-import { Button, CircularProgress, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@firecms/ui";
 import {
     deleteEntityWithCallbacks,
     useCustomizationController,
@@ -40,25 +40,17 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const snackbarController = useSnackbarController();
     const [loading, setLoading] = useState(false);
 
-    const [entityOrEntities, setUsedEntityOrEntities] = React.useState<Entity<M> | Entity<M>[]>();
-
-    const [multipleEntities, setMultipleEntities] = React.useState<boolean>();
     const context = useFireCMSContext();
+    const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
+        ? entityOrEntitiesToDelete[0]
+        : entityOrEntitiesToDelete;
 
-    React.useEffect(() => {
-        if (entityOrEntitiesToDelete) {
-            const revisedEntityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
-                ? entityOrEntitiesToDelete[0]
-                : entityOrEntitiesToDelete;
-            setUsedEntityOrEntities(revisedEntityOrEntities);
-            setMultipleEntities(Array.isArray(revisedEntityOrEntities));
-        }
-    }, [entityOrEntitiesToDelete]);
+    const multipleEntities = Array.isArray(entityOrEntities);
 
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
         path,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {
@@ -181,11 +173,10 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
             open={open}
             onOpenChange={(open) => !open ? onClose() : undefined}
         >
+            <DialogTitle id="delete-dialog-title">
+                {dialogTitle}
+            </DialogTitle>
             <DialogContent fullHeight={true}>
-                <Typography variant={"subtitle2"} className={"p-4"}>
-                    {dialogTitle}
-                </Typography>
-
                 {!multipleEntities && <div className={"p-4"}>{content}</div>}
             </DialogContent>
             <DialogActions>

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -66,9 +66,12 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     return (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
+            onClick={useCallback((event: any) => {
+                event.stopPropagation();
+            }, [])}
             style={{
                 width,
                 position: frozen ? "sticky" : "initial",