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

package/dist/util/property_utils.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
-export declare function isReferenceProperty(propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
+import { AuthController, EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
+export declare function isReferenceProperty(authController: AuthController, propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
 export declare function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode;
 export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): import("react/jsx-runtime").JSX.Element;
 export declare function getIconForProperty(property: PropertyOrBuilder<any> | ResolvedProperty<any>, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;

package/dist/util/references.d.ts

@@ -1,4 +1,4 @@
-import { EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
-export declare function getEntityPreviewKeys(targetCollection: EntityCollection<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
+import { AuthController, EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
+export declare function getEntityPreviewKeys(authController: AuthController, targetCollection: EntityCollection<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
 export declare function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): string | undefined;
 export declare function getEntityImagePreviewPropertyKey<M extends object>(collection: ResolvedEntityCollection<M>): string | undefined;

package/dist/util/resolutions.d.ts

@@ -1,5 +1,5 @@
-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, propertyConfigs, ignoreMissingFields }: {
+import { ArrayProperty, AuthController, CMSType, CustomizationController, 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, propertyConfigs, ignoreMissingFields, authController }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
     entityId?: string;
@@ -8,6 +8,7 @@ export declare const resolveCollection: <M extends Record<string, any>>({ collec
     userConfigPersistence?: UserConfigurationPersistence;
     propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
+    authController: AuthController;
 }) => ResolvedEntityCollection<M>;
 /**
  * Resolve property builders, enums and arrays.
@@ -25,6 +26,7 @@ export declare function resolveProperty<T extends CMSType = CMSType, M extends R
     fromBuilder?: boolean;
     propertyConfigs?: Record<string, PropertyConfig<any>>;
     ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedProperty<T> | null;
 export declare function getArrayResolvedProperties<M>({ propertyKey, propertyValue, property, ...props }: {
     propertyValue: any;
@@ -38,6 +40,7 @@ export declare function getArrayResolvedProperties<M>({ propertyKey, propertyVal
     index?: number;
     fromBuilder?: boolean;
     propertyConfigs?: Record<string, PropertyConfig>;
+    authController: AuthController;
 }): ResolvedProperty[];
 export declare function resolveArrayProperty<T extends any[], M>({ propertyKey, property, ignoreMissingFields, ...props }: {
     propertyKey?: string;
@@ -50,6 +53,7 @@ export declare function resolveArrayProperty<T extends any[], M>({ propertyKey,
     fromBuilder?: boolean;
     propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedArrayProperty;
 /**
  * Resolve enums and arrays for properties
@@ -67,6 +71,7 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
     fromBuilder?: boolean;
     propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedProperties<M>;
 /**
  * Resolve enum aliases for a string or number property
@@ -76,3 +81,8 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
 export declare function resolvePropertyEnum(property: StringProperty | NumberProperty, fromBuilder?: boolean): ResolvedStringProperty | ResolvedNumberProperty;
 export declare function resolveEnumValues(input: EnumValues): EnumValueConfig[] | undefined;
 export declare function resolveEntityView(entityView: string | EntityCustomView<any>, contextEntityViews?: EntityCustomView<any>[]): EntityCustomView<any> | undefined;
+export declare function resolvedSelectedEntityView<M extends Record<string, any>>(customViews: (string | EntityCustomView<M>)[] | undefined, customizationController: CustomizationController, selectedTab?: string, canEdit?: boolean): {
+    resolvedEntityViews: EntityCustomView<M>[];
+    selectedEntityView: EntityCustomView<M> | undefined;
+    selectedSecondaryForm: EntityCustomView<M> | undefined;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.13",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,63 +50,62 @@
     "./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",
+    "@firecms/editor": "^3.0.0-beta.13",
+    "@firecms/formex": "^3.0.0-beta.13",
+    "@firecms/ui": "^3.0.0-beta.13",
     "@hello-pangea/dnd": "^17.0.0",
-    "@radix-ui/react-portal": "^1.1.2",
+    "@radix-ui/react-portal": "^1.1.3",
     "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",
+    "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
+    "prism-react-renderer": "^2.4.1",
     "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",
+    "react-window": "^1.8.11",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "firebase": "^10.5.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
     "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",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20.17.9",
+    "@types/node": "^20.17.14",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.0",
     "@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",
+    "react-router": "^6.28.2",
+    "react-router-dom": "^6.28.2",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tsd": "^0.31.2",
-    "typescript": "^5.7.2",
-    "vite": "^5.4.11"
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "cb6d419faf2664cfd6cb2603a834e4bf499a92bb",
+  "gitHead": "26d5e1f33a7ac00c78e45cd3cb3c397f4ba00821",
   "publishConfig": {
     "access": "public"
   },

package/src/app/Scaffold.tsx

@@ -23,6 +23,11 @@ export interface ScaffoldProps {
      */
     logo?: string;
 
+    /**
+     * If true, the main content will be padded in large layouts. Defaults to true.
+     */
+    padding?: boolean;
+
     className?: string;
 
     style?: React.CSSProperties;
@@ -47,7 +52,8 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             autoOpenDrawer,
             logo,
             className,
-            style
+            style,
+            padding = true
         } = props;
 
         const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
@@ -116,10 +122,14 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
                     <main
                         className="flex flex-col flex-grow overflow-auto">
+
                         {hasAppBar && <DrawerHeader/>}
+
                         <div
-                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1", {
-                                "lg:mt-4": !hasAppBar
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto m-0 ", {
+                                "lg:mt-4": !hasAppBar,
+                                "mt-1 lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid": padding,
+                                "border-t": hasAppBar && !padding,
                             })}>
 
                             <ErrorBoundary>

package/src/components/ArrayContainer.tsx

@@ -37,10 +37,17 @@ export interface ArrayContainerProps<T> {
     disabled?: boolean;
     size?: "small" | "medium";
     onInternalIdAdded?: (id: number) => void;
+    /**
+     * @deprecated Use `canAddElements` instead
+     */
     includeAddButton?: boolean;
+    canAddElements?: boolean;
+    sortable?: boolean;
     newDefaultEntry: T;
     onValueChange: (value: T[]) => void,
     className?: string;
+    min?: number;
+    max?: number;
 }
 
 const buildIdsMap = (value: any[]) =>
@@ -64,12 +71,19 @@ export function ArrayContainer<T>({
                                       buildEntry,
                                       size = "medium",
                                       onInternalIdAdded,
-                                      includeAddButton,
+                                      includeAddButton: deprecatedIncludeAddButton,
+                                      canAddElements: canAddElementsProp = true,
+                                      sortable = true,
                                       newDefaultEntry,
                                       onValueChange,
-                                      className
+                                      className,
+                                      min = 0,
+                                      max = Infinity
                                   }: ArrayContainerProps<T>) {
 
+    const canAddElements = (canAddElementsProp || canAddElementsProp === undefined)
+        && (deprecatedIncludeAddButton === undefined || deprecatedIncludeAddButton);
+
     const hasValue = value && Array.isArray(value) && value.length > 0;
 
     // Used to track the ids that have displayed the initial show animation
@@ -78,7 +92,8 @@ export function ArrayContainer<T>({
     const [internalIds, setInternalIds] = useState<number[]>(
         hasValue
             ? Object.values(internalIdsRef.current)
-            : []);
+            : []
+    );
 
     const itemCustomPropsRef = useRef<Record<number, object>>({});
 
@@ -104,7 +119,7 @@ export function ArrayContainer<T>({
 
     const insertInEnd = (e: React.SyntheticEvent) => {
         e.preventDefault();
-        if (disabled) return;
+        if (disabled || (value ?? []).length >= max) return;
         const id = getRandomId();
         const newIds: number[] = [...internalIds, id];
         if (onInternalIdAdded)
@@ -114,6 +129,7 @@ export function ArrayContainer<T>({
     };
 
     const remove = (index: number) => {
+        if ((value ?? []).length <= min) return;
         const newIds = [...internalIds];
         newIds.splice(index, 1);
         setInternalIds(newIds);
@@ -121,12 +137,14 @@ export function ArrayContainer<T>({
     };
 
     const copy = (index: number) => {
+        if ((value ?? []).length >= max) return;
         const id = getRandomId();
         const copyingItem = value[index];
         const newIds: number[] = [
-            ...internalIds.splice(0, index + 1),
+            ...internalIds.slice(0, index + 1),
             id,
-            ...internalIds.splice(index + 1, internalIds.length - index - 1)];
+            ...internalIds.slice(index + 1)
+        ];
         if (onInternalIdAdded)
             onInternalIdAdded(id);
         setInternalIds(newIds);
@@ -135,11 +153,13 @@ export function ArrayContainer<T>({
     };
 
     const addInIndex = (index: number) => {
+        if ((value ?? []).length >= max) return;
         const id = getRandomId();
         const newIds: number[] = [
-            ...internalIds.splice(0, index),
+            ...internalIds.slice(0, index),
             id,
-            ...internalIds.slice(index)];
+            ...internalIds.slice(index)
+        ];
         if (onInternalIdAdded)
             onInternalIdAdded(id);
         setInternalIds(newIds);
@@ -183,6 +203,8 @@ export function ArrayContainer<T>({
                                    storedProps={itemCustomPropsRef.current[internalId]}
                                    updateItemCustomProps={updateItemCustomProps}
                                    addInIndex={addInIndex}
+                                   canAddElements={canAddElements}
+                                   sortable={sortable}
                                />
                            );
                        }}
@@ -197,7 +219,7 @@ export function ArrayContainer<T>({
                                 <Draggable
                                     key={`array_field_${internalId}`}
                                     draggableId={`array_field_${internalId}`}
-                                    isDragDisabled={disabled}
+                                    isDragDisabled={disabled || !sortable}
                                     index={index}>
                                     {(provided, snapshot) => (
                                         <ArrayContainerItem
@@ -213,6 +235,8 @@ export function ArrayContainer<T>({
                                             storedProps={itemCustomPropsRef.current[internalId]}
                                             updateItemCustomProps={updateItemCustomProps}
                                             addInIndex={addInIndex}
+                                            canAddElements={canAddElements}
+                                            sortable={sortable}
                                         />
                                     )}
                                 </Draggable>
@@ -221,17 +245,19 @@ export function ArrayContainer<T>({
 
                         {droppableProvided.placeholder}
 
-                        {includeAddButton && <div className="py-4 justify-center text-left">
-                            <Button
-                                variant={"text"}
-                                size={size === "small" ? "small" : "medium"}
-                                color="primary"
-                                disabled={disabled}
-                                startIcon={<AddIcon/>}
-                                onClick={insertInEnd}>
-                                {addLabel ?? "Add"}
-                            </Button>
-                        </div>}
+                        {canAddElements && (
+                            <div className="my-4 justify-center text-left">
+                                <Button
+                                    variant={"text"}
+                                    size={size === "small" ? "small" : "medium"}
+                                    color="primary"
+                                    disabled={disabled || value?.length >= max}
+                                    startIcon={<AddIcon/>}
+                                    onClick={insertInEnd}>
+                                    {addLabel ?? "Add"}
+                                </Button>
+                            </div>
+                        )}
                     </div>
                 )}
             </Droppable>
@@ -249,6 +275,8 @@ type ArrayContainerItemProps = {
     remove: (index: number) => void,
     copy: (index: number) => void,
     addInIndex?: (index: number) => void,
+    canAddElements?: boolean,
+    sortable: boolean,
     isDragging: boolean,
     storedProps?: object,
     updateItemCustomProps: (internalId: number, props: object) => void
@@ -263,6 +291,8 @@ export function ArrayContainerItem({
                                        buildEntry,
                                        remove,
                                        addInIndex,
+                                       canAddElements,
+                                       sortable,
                                        copy,
                                        isDragging,
                                        storedProps,
@@ -273,7 +303,7 @@ export function ArrayContainerItem({
         ref={provided.innerRef}
         {...provided.draggableProps}
         style={provided.draggableProps.style}
-        className={`${
+        className={`relative ${
             !isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""
         } rounded-md opacity-100`}
     >
@@ -295,6 +325,8 @@ export function ArrayContainerItem({
                               index={index}
                               provided={provided}
                               addInIndex={addInIndex}
+                              canAddElements={canAddElements}
+                              sortable={sortable}
                               copy={copy}/>
         </div>
     </div>;
@@ -307,6 +339,8 @@ export function ArrayItemOptions({
                                      index,
                                      provided,
                                      copy,
+                                     canAddElements,
+                                     sortable,
                                      addInIndex
                                  }: {
     direction?: "row" | "column",
@@ -315,6 +349,8 @@ export function ArrayItemOptions({
     index: number,
     provided: any,
     copy: (index: number) => void,
+    sortable: boolean,
+    canAddElements?: boolean,
     addInIndex?: (index: number) => void
 }) {
 
@@ -330,10 +366,10 @@ export function ArrayItemOptions({
             delayDuration={400}
             open={menuOpen ? false : undefined}
             side={direction === "column" ? "left" : undefined}
-            title="Drag to move. Click for more options">
+            title={!disabled && sortable ? "Drag to move. Click for more options" : undefined}>
             <IconButton
                 size="small"
-                disabled={disabled}
+                disabled={disabled || !canAddElements}
                 onClick={(e) => {
                     e.preventDefault();
                     setMenuOpen(true);
@@ -341,7 +377,7 @@ export function ArrayItemOptions({
                 onDragStart={(e: any) => {
                     setMenuOpen(false);
                 }}
-                className={`cursor-${disabled ? "inherit" : "grab"}`}>
+                className={disabled || !sortable ? "cursor-inherit" : "cursor-grab"}>
                 <HandleIcon/>
             </IconButton>
 

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-surface-50 dark:bg-surface-900 gap-4">
+            className="flex w-full h-screen max-h-full max-w-full gap-4">
             <div className="m-auto flex flex-col gap-2 items-center">
                 <CircularProgress {...props}/>
                 {text && <Typography

package/src/components/DeleteEntityDialog.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@firecms/ui";
 import {
     deleteEntityWithCallbacks,
+    useAuthController,
     useCustomizationController,
     useDataSource,
     useFireCMSContext,
@@ -34,7 +35,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
                                                                       onMultipleEntitiesDelete,
                                                                       path
                                                                   }: DeleteEntityDialogProps<M>) {
-
+    const authController = useAuthController();
     const dataSource = useDataSource(collection);
     const customizationController = useCustomizationController();
     const snackbarController = useSnackbarController();
@@ -50,7 +51,8 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
         path,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {
@@ -181,7 +183,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
             </DialogContent>
             <DialogActions>
 
-                {loading && <CircularProgress size={"small"}/>}
+                {loading && <CircularProgress size={"smallest"}/>}
 
                 <Button onClick={handleCancel}
                         disabled={loading}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,8 +1,20 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
+import {
+    Checkbox,
+    Chip,
+    cls,
+    EditIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    Skeleton,
+    Tooltip
+} from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
+import { hasEntityInCache } from "../../util/entity_cache";
 
 /**
  *
@@ -32,23 +44,25 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                                                                   actions = [],
                                                                                   hideId,
                                                                                   selectionController,
+                                                                                  openEntityMode
                                                                               }:
-                                                                                  {
-                                                                                      entity: Entity<any>,
-                                                                                      collection?: EntityCollection<any>,
-                                                                                      fullPath?: string,
-                                                                                      width: number,
-                                                                                      frozen?: boolean,
-                                                                                      size: CollectionSize,
-                                                                                      isSelected?: boolean,
-                                                                                      selectionEnabled?: boolean,
-                                                                                      actions?: EntityAction[],
-                                                                                      hideId?: boolean,
-                                                                                      onCollectionChange?: () => void,
-                                                                                      selectionController?: SelectionController;
-                                                                                      highlightEntity?: (entity: Entity<any>) => void;
-                                                                                      unhighlightEntity?: (entity: Entity<any>) => void;
-                                                                                  }) {
+                                                                              {
+                                                                                  entity: Entity<any>,
+                                                                                  collection?: EntityCollection<any>,
+                                                                                  fullPath?: string,
+                                                                                  width: number,
+                                                                                  frozen?: boolean,
+                                                                                  size: CollectionSize,
+                                                                                  isSelected?: boolean,
+                                                                                  selectionEnabled?: boolean,
+                                                                                  actions?: EntityAction[],
+                                                                                  hideId?: boolean,
+                                                                                  onCollectionChange?: () => void,
+                                                                                  selectionController?: SelectionController;
+                                                                                  highlightEntity?: (entity: Entity<any>) => void;
+                                                                                  unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                  openEntityMode: "side_panel" | "full_screen";
+                                                                              }) {
 
     const largeLayout = useLargeLayout();
 
@@ -63,6 +77,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
     return (
         <div
             className={cls(
@@ -98,6 +113,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                         highlightEntity,
                                         unhighlightEntity,
                                         onCollectionChange,
+                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
                                     });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
@@ -126,6 +142,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                             highlightEntity,
                                             unhighlightEntity,
                                             onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
                                     {action.icon}
@@ -148,15 +165,21 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
             {!hideId && size !== "xs" && (
                 <div
-                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1"
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-
-                    {entity
-                        ? entity.id
-                        : <Skeleton/>
-                    }
+                    {hasDraft && <Tooltip title={"Local unsaved changes"} className={"inline"}>
+                        <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
+                            <EditIcon size={12}/>
+                        </Chip>
+                    </Tooltip>}
+                    <span className="min-w-0 truncate text-center">
+                        {entity
+                            ? entity.id
+                            : <Skeleton/>
+                        }
+                    </span>
                 </div>
             )}
 

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -34,14 +34,14 @@ import { getRowHeight } from "../common/table_height";
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the datasource, by using the hook
- * {@link useDataSourceEntityCollectionTableController}
+ * {@link useDataSourceTableController}
  *
  * @see EntityCollectionTableProps
  * @see EntityCollectionView
  * @see VirtualTable
  * @group Components
  */
-export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, USER extends User>
+export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any> = any, USER extends User = any>
 ({
      className,
      style,
@@ -57,6 +57,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      highlightedEntities,
      onEntityClick,
      onColumnResize,
+     initialScroll,
+     onScroll,
      onSizeChanged,
      textSearchEnabled = false,
      hoverRow = true,
@@ -76,7 +78,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      getIdColumnWidth,
      onTextSearchClick,
      textSearchLoading,
-     enablePopupIcon
+     enablePopupIcon,
+     openEntityMode = "side_panel"
  }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
@@ -265,7 +268,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                                                        width={column.width}
                                                        frozen={column.frozen}
                                                        isSelected={false}
-                                                       size={size}/>;
+                                                       size={size}
+                                                       openEntityMode={openEntityMode}/>;
             } else if (additionalFieldsMap[columnKey]) {
                 return additionalCellRenderer(props);
             } else if (props.columnIndex < columns.length + 1) {
@@ -313,6 +317,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                              highlightedRow={(entity: Entity<M>) => Boolean(selectedEntities?.find(e => e.id === entity.id && e.path === entity.path))}
                              tableController={tableController}
                              onValueChange={onValueChange}
+                             initialScroll={initialScroll}
+                             onScroll={onScroll}
                              onColumnResize={onColumnResize}
                              hoverRow={hoverRow}
                              filterable={filterable}