@firecms/core 3.0.1 → 3.1.0-canary.24c8270

package/src/hooks/useBuildNavigationController.tsx

@@ -122,10 +122,10 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const navigate = useNavigate();
 
-    const collectionsRef = useRef<EntityCollection[] | undefined>();
-    const viewsRef = useRef<CMSView[] | undefined>();
-    const adminViewsRef = useRef<CMSView[] | undefined>();
-    const navigationEntriesOrderRef = useRef<string[] | undefined>();
+    const collectionsRef = useRef<EntityCollection[] | undefined>(undefined);
+    const viewsRef = useRef<CMSView[] | undefined>(undefined);
+    const adminViewsRef = useRef<CMSView[] | undefined>(undefined);
+    const navigationEntriesOrderRef = useRef<string[] | undefined>(undefined);
 
     const [initialised, setInitialised] = useState<boolean>(false);
 
@@ -140,8 +140,12 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const fullCollectionPath = cleanBasePath ? `/${cleanBasePath}/${cleanBaseCollectionPath}` : `/${cleanBaseCollectionPath}`;
 
-    const buildCMSUrlPath = useCallback((path: string): string => cleanBasePath ? `/${cleanBasePath}/${encodePath(path)}` : `/${encodePath(path)}`,
-        [cleanBasePath]);
+
+    const buildCMSUrlPath = useCallback((path: string): string => {
+        // Strip trailing /* wildcard from paths (used for nested routes in React Router)
+        const cleanPath = path.replace(/\/\*$/, "");
+        return cleanBasePath ? `/${cleanBasePath}/${encodePath(cleanPath)}` : `/${encodePath(cleanPath)}`;
+    }, [cleanBasePath]);
 
     const buildUrlCollectionPath = useCallback((path: string): string => `${removeInitialAndTrailingSlashes(baseCollectionPath)}/${encodePath(path)}`,
         [baseCollectionPath]);
@@ -331,10 +335,10 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         try {
 
             const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
-                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins),
-                    resolveCMSViews(viewsProp, authController, dataSourceDelegate),
-                    resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)
-                ]
+                resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins),
+                resolveCMSViews(viewsProp, authController, dataSourceDelegate, plugins),
+                resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)
+            ]
             );
 
             const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder, undefined, onNavigationEntriesOrderUpdate);
@@ -483,8 +487,10 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const urlPathToDataPath = useCallback((path: string): string => {
         const decodedPath = decodeURIComponent(path);
-        if (decodedPath.startsWith(fullCollectionPath))
-            return decodedPath.replace(fullCollectionPath, "");
+        const withoutHash = decodedPath.split("#")[0];
+        const cleanPath = withoutHash.split("?")[0];
+        if (cleanPath.startsWith(fullCollectionPath))
+            return cleanPath.replace(fullCollectionPath, "");
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 
@@ -561,9 +567,27 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 }
 
 function encodePath(input: string) {
-    return encodeURIComponent(removeInitialAndTrailingSlashes(input))
-        .replaceAll("%2F", "/")
-        .replaceAll("%23", "#");
+    const cleanInput = removeInitialAndTrailingSlashes(input);
+    const [pathPart, rest] = cleanInput.split("?", 2);
+
+    let encodedPath = encodeURIComponent(pathPart).replaceAll("%2F", "/");
+    let result = encodedPath;
+
+    if (rest !== undefined) {
+        const [searchPart, hashPart] = rest.split("#", 2);
+        result += `?${searchPart}`;
+        if (hashPart !== undefined) {
+            result += `#${hashPart}`;
+        }
+    } else {
+        const [pathOnly, hashOnly] = cleanInput.split("#", 2);
+        if (hashOnly !== undefined) {
+            encodedPath = encodeURIComponent(pathOnly).replaceAll("%2F", "/");
+            result = `${encodedPath}#${hashOnly}`;
+        }
+    }
+
+    return result;
 }
 
 function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[], authController: AuthController<User>): EntityCollection[] {
@@ -597,10 +621,10 @@ function applyPluginModifyCollection(resolvedCollections: EntityCollection[], mo
 }
 
 async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>,
-                                  collectionPermissions: PermissionsBuilder | undefined,
-                                  authController: AuthController,
-                                  dataSource: DataSourceDelegate,
-                                  plugins: FireCMSPlugin[] | undefined): Promise<EntityCollection[]> {
+    collectionPermissions: PermissionsBuilder | undefined,
+    authController: AuthController,
+    dataSource: DataSourceDelegate,
+    plugins: FireCMSPlugin[] | undefined): Promise<EntityCollection[]> {
     let resolvedCollections: EntityCollection[] = [];
     if (typeof collections === "function") {
         resolvedCollections = await collections({
@@ -629,7 +653,12 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
     return resolvedCollections;
 }
 
-async function resolveCMSViews(baseViews: CMSView[] | CMSViewsBuilder | undefined, authController: AuthController, dataSource: DataSourceDelegate) {
+async function resolveCMSViews(
+    baseViews: CMSView[] | CMSViewsBuilder | undefined,
+    authController: AuthController,
+    dataSource: DataSourceDelegate,
+    plugins?: FireCMSPlugin[]
+) {
     let resolvedViews: CMSView[] = [];
     if (typeof baseViews === "function") {
         resolvedViews = await baseViews({
@@ -640,6 +669,16 @@ async function resolveCMSViews(baseViews: CMSView[] | CMSViewsBuilder | undefine
     } else if (Array.isArray(baseViews)) {
         resolvedViews = baseViews;
     }
+
+    // Inject views from plugins
+    if (plugins) {
+        for (const plugin of plugins) {
+            if (plugin.views && plugin.views.length > 0) {
+                resolvedViews = [...resolvedViews, ...plugin.views];
+            }
+        }
+    }
+
     return resolvedViews;
 }
 
@@ -688,8 +727,8 @@ function useCustomBlocker(): NavigationBlocker {
     let blocker: any;
     try {
         blocker = useBlocker(({
-                                  nextLocation
-                              }) => {
+            nextLocation
+        }) => {
             const allBasePaths = Object.values(blockListeners).map(b => b.basePath).filter(Boolean) as string[];
             if (allBasePaths && allBasePaths.some(path => nextLocation.pathname.startsWith(path)))
                 return false;
@@ -729,11 +768,11 @@ function useCustomBlocker(): NavigationBlocker {
 }
 
 function computeNavigationGroups({
-                                     navigationGroupMappings,
-                                     collections,
-                                     views,
-                                     plugins
-                                 }: {
+    navigationGroupMappings,
+    collections,
+    views,
+    plugins
+}: {
     navigationGroupMappings?: NavigationGroupMapping[],
     collections?: EntityCollection[],
     views?: CMSView[],
@@ -743,6 +782,7 @@ function computeNavigationGroups({
     let result = navigationGroupMappings;
 
     // Merge plugin navigation entries
+    // IMPORTANT: Deep clone the groups to avoid mutating the original input
     result = plugins ? plugins?.reduce((acc, plugin) => {
         if (plugin.homePage?.navigationEntries) {
             plugin.homePage.navigationEntries.forEach((entry) => {
@@ -763,7 +803,10 @@ function computeNavigationGroups({
 
         }
         return acc;
-    }, [...(result ?? [])] as NavigationGroupMapping[]) : result;
+    }, (result ?? []).map(g => ({
+        name: g.name,
+        entries: [...g.entries]
+    }))) : result;
 
     // Track all entries that are already assigned to groups
     const assignedEntries = new Set<string>();

package/src/hooks/useCollapsedGroups.ts

@@ -1,15 +1,22 @@
 import { useCallback, useEffect, useState } from "react";
 
+const STORAGE_KEY_PREFIX = "firecms-collapsed-groups";
+
 /**
  * Custom hook for managing collapsed/expanded state of navigation groups
  * with localStorage persistence. Automatically cleans up stale group entries
  * when groups are removed from the navigation.
+ * 
+ * @param groupNames - Array of group names to track
+ * @param namespace - Namespace for localStorage key (e.g., "home", "drawer") to allow independent state
  */
-export function useCollapsedGroups(groupNames: string[]) {
+export function useCollapsedGroups(groupNames: string[], namespace: string = "default") {
+    const storageKey = `${STORAGE_KEY_PREFIX}-${namespace}`;
+
     // Load collapsed groups from localStorage on mount
     const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
         try {
-            const stored = localStorage.getItem('firecms-collapsed-groups');
+            const stored = localStorage.getItem(storageKey);
             return stored ? JSON.parse(stored) : {};
         } catch {
             return {};
@@ -19,11 +26,11 @@ export function useCollapsedGroups(groupNames: string[]) {
     // Save to localStorage whenever collapsedGroups changes
     useEffect(() => {
         try {
-            localStorage.setItem('firecms-collapsed-groups', JSON.stringify(collapsedGroups));
+            localStorage.setItem(storageKey, JSON.stringify(collapsedGroups));
         } catch {
             // Silently fail if localStorage is not available
         }
-    }, [collapsedGroups]);
+    }, [collapsedGroups, storageKey]);
 
     // Clean up collapsed groups state when groups change - remove entries for groups that no longer exist
     useEffect(() => {
@@ -62,3 +69,4 @@ export function useCollapsedGroups(groupNames: string[]) {
         toggleGroupCollapsed
     };
 }
+

package/src/hooks/useValidateAuthenticator.tsx

@@ -51,7 +51,7 @@ export function useValidateAuthenticator<USER extends User = any>
      * We use this ref to check the authentication only if the user has
      * changed.
      */
-    const checkedUserRef = useRef<User | undefined>();
+    const checkedUserRef = useRef<User | undefined>(undefined);
 
     const checkAuthentication = useCallback(async () => {
 

package/src/internal/useBuildDataSource.ts

@@ -26,11 +26,11 @@ import { resolveCollection, updateDateAutoValues } from "../util";
  * @group Firebase
  */
 export function useBuildDataSource({
-                                       delegate,
-                                       propertyConfigs,
-                                       navigationController,
-                                       authController
-                                   }: {
+    delegate,
+    propertyConfigs,
+    navigationController,
+    authController
+}: {
     delegate: DataSourceDelegate,
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
@@ -54,15 +54,15 @@ export function useBuildDataSource({
          * @group Firestore
          */
         fetchCollection: useCallback(<M extends Record<string, any>>({
-                                                                         path,
-                                                                         collection,
-                                                                         filter,
-                                                                         limit,
-                                                                         startAfter,
-                                                                         searchString,
-                                                                         orderBy,
-                                                                         order,
-                                                                     }: FetchCollectionProps<M>
+            path,
+            collection,
+            filter,
+            limit,
+            startAfter,
+            searchString,
+            orderBy,
+            order,
+        }: FetchCollectionProps<M>
         ): Promise<Entity<M>[]> => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
             return usedDelegate.fetchCollection<M>({
@@ -138,10 +138,10 @@ export function useBuildDataSource({
          * @group Firestore
          */
         fetchEntity: useCallback(<M extends Record<string, any>>({
-                                                                     path,
-                                                                     entityId,
-                                                                     collection
-                                                                 }: FetchEntityProps<M>
+            path,
+            entityId,
+            collection
+        }: FetchEntityProps<M>
         ): Promise<Entity<M> | undefined> => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
             return usedDelegate.fetchEntity({
@@ -195,7 +195,7 @@ export function useBuildDataSource({
          * @param status
          * @group Firestore
          */
-        saveEntity: useCallback(<M extends Record<string, any>>(
+        saveEntity: useCallback(async <M extends Record<string, any>>(
             {
                 path,
                 entityId,
@@ -229,22 +229,56 @@ export function useBuildDataSource({
                         inputValues: delegateValues,
                         properties,
                         status,
-                        timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
-                        setDateToMidnight: usedDelegate.setDateToMidnight
+                        timestampNowValue: usedDelegate.currentTime?.() ?? new Date()
                     })
                 : delegateValues;
 
+            // Auto-assign order property value for new/copy entities
+            let finalValues = updatedValues;
+            const orderProperty = collection?.orderProperty;
+            if (orderProperty && (status === "new" || status === "copy")) {
+                const orderProp = properties?.[orderProperty as keyof M];
+                if (orderProp) {
+                    const currentValue = updatedValues[orderProperty as keyof M];
+                    if (currentValue === undefined || currentValue === null) {
+                        try {
+                            const entities = await usedDelegate.fetchCollection({
+                                path,
+                                orderBy: orderProperty,
+                                order: "asc",
+                                limit: 1,
+                                collection
+                            });
+                            const minOrder = entities.length > 0
+                                ? entities[0].values?.[orderProperty] ?? null
+                                : null;
+                            finalValues = {
+                                ...updatedValues,
+                                [orderProperty]: minOrder !== null ? minOrder - 1 : 0
+                            } as EntityValues<M>;
+                        } catch (e) {
+                            console.error("Failed to fetch min order value:", e);
+                            // Fallback to 0 if query fails
+                            finalValues = {
+                                ...updatedValues,
+                                [orderProperty]: 0
+                            } as EntityValues<M>;
+                        }
+                    }
+                }
+            }
+
             return usedDelegate.saveEntity({
                 path,
                 collection,
                 entityId,
-                values: updatedValues,
+                values: finalValues,
                 status
             }).then((res) => {
                 return {
                     id: res.id,
                     path: res.path,
-                    values: usedDelegate.delegateToCMSModel(updatedValues)
+                    values: usedDelegate.delegateToCMSModel(finalValues)
                 } as Entity<M>;
             });
         }, [delegate.saveEntity, navigationController.getCollection]),
@@ -295,12 +329,12 @@ export function useBuildDataSource({
         }, [delegate.generateEntityId]),
 
         countEntities: delegate.countEntities ? async ({
-                                                           path,
-                                                           collection,
-                                                           filter,
-                                                           order,
-                                                           orderBy
-                                                       }: {
+            path,
+            collection,
+            filter,
+            order,
+            orderBy
+        }: {
             path: string,
             collection: EntityCollection<any>,
             filter?: FilterValues<Extract<keyof any, string>>,
@@ -318,11 +352,11 @@ export function useBuildDataSource({
         } : undefined,
 
         isFilterCombinationValid: useCallback(({
-                                                   path,
-                                                   databaseId,
-                                                   filterValues,
-                                                   sortBy
-                                               }: {
+            path,
+            databaseId,
+            filterValues,
+            sortBy
+        }: {
             path: string,
             databaseId?: string,
             filterValues: FilterValues<any>,

package/src/internal/useBuildSideDialogsController.tsx

@@ -32,11 +32,12 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
     const close = useCallback(() => {
 
-        if (sidePanels.length === 0)
+        const currentPanels = sidePanelsRef.current;
+        if (currentPanels.length === 0)
             return;
 
-        const lastSidePanel = sidePanels[sidePanels.length - 1];
-        const updatedPanels = [...sidePanels.slice(0, -1)];
+        const lastSidePanel = currentPanels[currentPanels.length - 1];
+        const updatedPanels = [...currentPanels.slice(0, -1)];
         updateSidePanels(updatedPanels);
 
         if (routesCount.current > 0) {
@@ -56,7 +57,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
                 }
             );
         }
-    }, [sidePanels, navigate, location]);
+    }, [navigate, location]);
 
     const open = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
 
@@ -69,7 +70,8 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
         const baseLocation = (location.state as any)?.base_location ?? location;
 
-        const updatedPanels = [...sidePanels, ...newPanels];
+        const currentPanels = sidePanelsRef.current;
+        const updatedPanels = [...currentPanels, ...newPanels];
         updateSidePanels(updatedPanels);
 
         newPanels.forEach((panel) => {
@@ -86,7 +88,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
             }
         });
 
-    }, [location, navigate, sidePanels]);
+    }, [location, navigate]);
 
     const replace = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
 
@@ -97,7 +99,8 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
         const baseLocation = (location.state as any)?.base_location ?? location;
 
-        const updatedPanels = [...sidePanels.slice(0, -newPanels.length), ...newPanels];
+        const currentPanels = sidePanelsRef.current;
+        const updatedPanels = [...currentPanels.slice(0, -newPanels.length), ...newPanels];
         updateSidePanels(updatedPanels);
 
         newPanels.forEach((panel) => {
@@ -115,7 +118,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
             }
         });
 
-    }, [location, navigate, sidePanels]);
+    }, [location, navigate]);
 
     return {
         sidePanels,

package/src/internal/useBuildSideEntityController.tsx

@@ -20,7 +20,6 @@ import {
 } from "../util";
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
 import { useCustomizationController, useLargeLayout } from "../hooks";
-import { EntitySidePanel } from "../core/EntitySidePanel";
 import { JSON_TAB_VALUE } from "../core/EntityEditView";
 
 const NEW_URL_HASH = "new_side";
@@ -100,8 +99,8 @@ function getNestedPropertiesDepth(property: ResolvedProperty, accumulator: numbe
 }
 
 export const useBuildSideEntityController = (navigation: NavigationController,
-                                             sideDialogsController: SideDialogsController,
-                                             authController: AuthController
+    sideDialogsController: SideDialogsController,
+    authController: AuthController
 ): SideEntityController => {
 
     const location = useLocation();
@@ -122,9 +121,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 for (let i = 0; i < panelsFromUrl.length; i++) {
                     const props = panelsFromUrl[i];
                     if (i === 0)
-                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController));
+                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController, location.search));
                     else
-                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController))
+                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController, location.search))
                 }
             }
             initialised.current = true;
@@ -144,7 +143,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                     return;
                 }
                 const lastPanel = panelsFromUrl[panelsFromUrl.length - 1];
-                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController);
+                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController, location.search);
                 const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : undefined;
                 if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
                     sideDialogsController.replace(panelProps);
@@ -157,7 +156,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     useEffect(() => {
         const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
             if (sidePanelProps.additional) {
-                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController);
+                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController, location.search);
             }
             return sidePanelProps;
         });
@@ -184,17 +183,18 @@ export const useBuildSideEntityController = (navigation: NavigationController,
 
         sideDialogsController.open(
             propsToSidePanel({
-                    selectedTab: defaultSelectedView,
-                    ...props
-                },
+                selectedTab: defaultSelectedView,
+                ...props
+            },
                 navigation.buildUrlCollectionPath,
                 navigation.resolveIdsFrom,
                 smallLayout,
                 customizationController,
-                authController
+                authController,
+                location.search
             ));
 
-    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, authController.user]);
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, authController.user, location.search]);
 
     const replace = useCallback((props: EntitySidePanelProps<any>) => {
 
@@ -202,9 +202,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController, location.search));
 
-    }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout, authController.user]);
+    }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout, authController.user, location.search]);
 
     return {
         close,
@@ -215,7 +215,6 @@ export const useBuildSideEntityController = (navigation: NavigationController,
 
 export function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[] {
 
-
     const navigationViewsForPath: NavigationViewInternal<any>[] = getNavigationEntriesFromPath({
         path,
         collections
@@ -267,18 +266,19 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
 }
 
 const propsToSidePanel = (props: EntitySidePanelProps,
-                          buildUrlCollectionPath: (path: string) => string,
-                          resolveIdsFrom: (pathWithAliases: string) => string,
-                          smallLayout: boolean,
-                          customizationController: CustomizationController,
-                          authController: AuthController
+    buildUrlCollectionPath: (path: string) => string,
+    resolveIdsFrom: (pathWithAliases: string) => string,
+    smallLayout: boolean,
+    customizationController: CustomizationController,
+    authController: AuthController,
+    locationSearch: string
 ): SideDialogPanelProps => {
 
     const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
     const urlPath = props.entityId
-        ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}#${SIDE_URL_HASH}`)
-        : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+        ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}${locationSearch}#${SIDE_URL_HASH}`)
+        : buildUrlCollectionPath(`${collectionPath}${locationSearch}#${NEW_URL_HASH}`);
 
     const resolvedPanelProps: EntitySidePanelProps<any> = {
         ...props,
@@ -288,12 +288,12 @@ const propsToSidePanel = (props: EntitySidePanelProps,
     const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController, authController);
     return {
         key: `${props.path}/${props.entityId}`,
-        component: <EntitySidePanel {...resolvedPanelProps}/>,
+        component: undefined, // Lazy render in SideDialogs for better performance
         urlPath: urlPath,
         parentUrlPath: buildUrlCollectionPath(collectionPath),
         width: entityViewWidth,
         onClose: props.onClose,
-        additional: props
+        additional: resolvedPanelProps
     };
 }
 

package/src/internal/useRestoreScroll.tsx

@@ -1,24 +1,28 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { useLocation } from "react-router-dom";
 
 const scrollsMap: Record<string, number> = {};
 
 export function useRestoreScroll() {
 
-    // const scrollsMap = React.useRef<Record<string, number>>({});
-
     const location = useLocation();
 
-    const containerRef = React.useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
     const [scroll, setScroll] = React.useState(0);
     const [direction, setDirection] = React.useState<"up" | "down">("down");
 
+    // Use ref to track previous scroll for direction calculation
+    // This avoids recreating handleScroll on every scroll
+    const prevScrollRef = useRef(0);
+
     const handleScroll = useCallback(() => {
         if (!containerRef.current || !location.key) return;
-        scrollsMap[location.key] = containerRef.current.scrollTop;
-        setScroll(containerRef.current.scrollTop);
-        setDirection(containerRef.current.scrollTop > scroll ? "down" : "up");
-    }, [containerRef, location.key, scroll]);
+        const scrollTop = containerRef.current.scrollTop;
+        scrollsMap[location.key] = scrollTop;
+        setScroll(scrollTop);
+        setDirection(scrollTop > prevScrollRef.current ? "down" : "up");
+        prevScrollRef.current = scrollTop;
+    }, [location.key]);
 
     useEffect(() => {
         const container = containerRef.current;
@@ -29,16 +33,24 @@ export function useRestoreScroll() {
             if (container)
                 container.removeEventListener("scroll", handleScroll);
         };
-    }, [containerRef, handleScroll, location]);
+    }, [handleScroll]);
 
+    // Defer scroll restoration to next tick to allow async content to render
+    // This is necessary because DefaultHomePage content loads asynchronously
     useEffect(() => {
-        if (!containerRef.current || !scrollsMap[location.key]) return;
-        containerRef.current.scrollTo(
-            {
-                top: scrollsMap[location.key],
+        const savedScroll = scrollsMap[location.key];
+        if (!containerRef.current || !savedScroll) return;
+
+        const timeoutId = setTimeout(() => {
+            if (!containerRef.current) return;
+            containerRef.current.scrollTo({
+                top: savedScroll,
                 behavior: "auto"
             });
-    }, [location]);
+        }, 0);
+
+        return () => clearTimeout(timeoutId);
+    }, [location.key]);
 
     return {
         containerRef,