@firecms/core 3.0.0-canary.224 → 3.0.0-canary.226

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.224",
+  "version": "3.0.0-canary.226",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.224",
-    "@firecms/formex": "^3.0.0-canary.224",
-    "@firecms/ui": "^3.0.0-canary.224",
+    "@firecms/editor": "^3.0.0-canary.226",
+    "@firecms/formex": "^3.0.0-canary.226",
+    "@firecms/ui": "^3.0.0-canary.226",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -105,7 +105,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "3697a46bef0a8e75b2336043344e02caf0034cbe",
+  "gitHead": "186d2820e1dd7b69916647c3f887ff275351e863",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -147,9 +147,13 @@ export const EntityCollectionView = React.memo(
     ) {
 
         const context = useFireCMSContext();
-        const fullPath = fullPathProp ?? collectionProp.path;
-        const dataSource = useDataSource(collectionProp);
         const navigation = useNavigationController();
+        const fullPath = (fullPathProp ? navigation.resolveIdsFrom(fullPathProp) : undefined) ?? collectionProp.path;
+        console.log("aaa", {
+            fullPathProp,
+            fullPath,
+        })
+        const dataSource = useDataSource(collectionProp);
         const sideEntityController = useSideEntityController();
         const authController = useAuthController();
         const userConfigPersistence = useUserConfigurationPersistence();

package/src/components/VirtualTable/VirtualTable.tsx

@@ -139,7 +139,35 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             setColumns(columnsProp);
         }, [columnsProp]);
 
-        const [measureRef, bounds] = useMeasure();
+        const [_, setForceUpdate] = useState(false);
+        useEffect(() => {
+            // Create a ResizeObserver to detect size changes more aggressively
+            if (tableRef.current) {
+                const resizeObserver = new ResizeObserver(() => {
+                    // Force a re-render when size changes
+                    setForceUpdate(prev => !prev);
+                });
+
+                resizeObserver.observe(tableRef.current);
+
+                return () => {
+                    if (tableRef.current) {
+                        resizeObserver.unobserve(tableRef.current);
+                    }
+                    resizeObserver.disconnect();
+                };
+            }
+            return () => {
+            }
+        }, [tableRef]);
+
+        const [measureRef, bounds] = useMeasure({
+            debounce: 50,
+            polyfill: ResizeObserver,
+            scroll: true,
+            // This is important for handling zooming in react-flow
+            offsetSize: true
+        });
 
         const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
             if (debug)

package/src/core/EntityEditView.tsx

@@ -315,7 +315,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         }
     };
 
-    const entityReadOnlyView = <div
+    const entityReadOnlyView = !canEdit && entity ? <div
         className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
         <div
             className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
@@ -324,11 +324,11 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </Typography>
             <EntityView
                 className={"px-8 h-full overflow-auto"}
-                entity={entity as Entity<M>}
+                entity={entity}
                 path={path}
                 collection={collection}/>
         </div>
-    </div>;
+    </div> : null;
 
     const entityView = <EntityForm<M>
         collection={collection}

package/src/util/navigation_utils.ts

@@ -32,31 +32,76 @@ export function getLastSegment(path: string) {
 }
 
 export function resolveCollectionPathIds(path: string, allCollections: EntityCollection[]): string {
-
     const cleanPath = removeInitialAndTrailingSlashes(path);
     const subpaths = cleanPath.split("/");
+
     if (subpaths.length % 2 === 0) {
-        throw Error(`resolveCollectionPathAliases: Collection paths must have an odd number of segments: ${path}`);
+        throw Error(`resolveCollectionPathIds: Collection paths must have an odd number of segments: ${path}`);
+    }
+
+    // Check if the path exactly matches a collection path
+    const exactMatch = allCollections.find(col => col.path === cleanPath);
+    if (exactMatch) {
+        return exactMatch.path;
+    }
+
+    if (subpaths.length === 1) {
+        // Find collection by ID and return its path
+        const aliasedCollection = allCollections.find((col) => col.id === subpaths[0]);
+        return aliasedCollection?.path ?? subpaths[0];
     }
 
-    const aliasedCollection = allCollections.find((col) => col.id === subpaths[0]);
-    let resolvedAliased;
-    if (aliasedCollection) {
-        resolvedAliased = aliasedCollection.path;
+    // Try to match a multi-segment collection path
+    let matchingCollection: EntityCollection | undefined;
+    let entityIndex = 1;
+
+    // Check if the path starts with a multi-segment collection path
+    for (const collection of allCollections) {
+        const pathSegments = collection.path.split("/");
+        if (pathSegments.length > 1 &&
+            subpaths.slice(0, pathSegments.length).join("/") === collection.path) {
+            matchingCollection = collection;
+            entityIndex = pathSegments.length;
+            break;
+        }
     }
 
-    if (subpaths.length > 1) {
-        const segmentCollection = getCollectionByPathOrId(resolvedAliased ?? subpaths[0], allCollections);
-        if (!segmentCollection?.subcollections) {
+    // If no multi-segment match, fall back to single segment matching
+    if (!matchingCollection) {
+        const matchingCollections = allCollections.filter(col =>
+            col.id === subpaths[0] || col.path === subpaths[0]
+        );
+
+        if (!matchingCollections.length) {
             return cleanPath;
         }
-        const restOfThePath = cleanPath.split("/").slice(2).join("/");
-        return (resolvedAliased ?? subpaths[0]) + "/" + subpaths[1] + "/" + resolveCollectionPathIds(restOfThePath, segmentCollection.subcollections);
-    } else {
-        return resolvedAliased ?? cleanPath;
+
+        matchingCollection = matchingCollections[0];
     }
-}
 
+    const entityId = subpaths[entityIndex];
+    const remainingPath = subpaths.slice(entityIndex + 1);
+
+    // If we have a subcollection ID, try to resolve it
+    if (remainingPath.length > 0) {
+        const subcollectionId = remainingPath[0];
+        const subcollection = matchingCollection.subcollections?.find(
+            subcol => subcol.id === subcollectionId
+        );
+
+        if (subcollection) {
+            return `${matchingCollection.path}/${entityId}/${subcollection.path}`;
+        }
+    }
+
+    // If there are no remaining path segments, just return the collection path with entity ID
+    if (remainingPath.length === 0) {
+        return `${matchingCollection.path}/${entityId}`;
+    }
+
+    // Default case - couldn't match subcollection
+    return `${matchingCollection.path}/${entityId}/${remainingPath.join("/")}`;
+}
 /**
  * Find the corresponding view at any depth for a given path.
  * Note that path or segments of the paths can be collection aliases.