@rebasepro/admin 0.9.1-canary.ff338b5 → 0.10.0

package/src/components/CollectionViewBinding/SplitListView.tsx

@@ -8,11 +8,12 @@ import {
     defaultBorderMixin,
     ResizablePanels
 } from "@rebasepro/ui";
-import { useLargeLayout } from "@rebasepro/app";
-import { useCollectionRegistryController } from "../../index";
+import { useLargeLayout, UnsavedChangesDialog, useNavigationBlocker } from "@rebasepro/app";
+import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { useNavigate, useLocation } from "react-router-dom";
-import { useUrlController } from "../../index";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 import { ErrorBoundary } from "@rebasepro/ui";
+import { withViewMode } from "../../util/view_mode";
 
 export type SplitListViewProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     collection: CollectionConfig<M>;
@@ -55,6 +56,27 @@ export type SplitListViewProps<M extends Record<string, unknown> = Record<string
 
 const PANEL_SIZE_KEY = "rebase_split_list_panel_size";
 
+/**
+ * Whether the element accepts text, and therefore owns the keystroke.
+ * Covers native fields plus the ARIA roles custom editors expose.
+ */
+function isTextEntryTarget(target: HTMLElement | null): boolean {
+    if (!target) return false;
+    const tag = target.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+    if (target.isContentEditable) return true;
+    return Boolean(target.closest('[contenteditable="true"], [role="textbox"], [role="combobox"], [role="searchbox"]'));
+}
+
+/**
+ * Whether a bare letter shortcut may act on this target. Only the list side of
+ * the split owns them — inside the detail panel a keystroke belongs to the form.
+ */
+function isListShortcutTarget(target: HTMLElement | null, detailPanel: HTMLElement | null): boolean {
+    if (!target || target === document.body) return true;
+    return !detailPanel?.contains(target);
+}
+
 function getSavedPanelSize(path: string): number {
     try {
         const saved = localStorage.getItem(`${PANEL_SIZE_KEY}_${path}`);
@@ -115,6 +137,37 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
 
     const showDetail = selectedEntityId !== undefined;
 
+    // ── Unsaved changes ──
+    // The detail form lives inside the split layout, so every way out of it
+    // (Escape, j/k, clicking another row, the browser back button) is a plain
+    // router navigation. A ref — not state — because the blocker predicate must
+    // observe the change synchronously, before the navigation it is guarding.
+    const dirty = useRef(false);
+    const detailPanelRef = useRef<HTMLDivElement>(null);
+    const setDirty = useCallback((modified: boolean) => {
+        dirty.current = modified;
+    }, []);
+
+    // The form remounts per entity, so its dirty state must not leak into the next one.
+    useEffect(() => {
+        dirty.current = false;
+    }, [selectedEntityId]);
+
+    const blocker = useNavigationBlocker(useCallback(({
+        currentLocation,
+        nextLocation
+    }) => {
+        if (!dirty.current) return false;
+        if (currentLocation.pathname === nextLocation.pathname) return false;
+        // Side panel overlays (e.g. following a relation) render above the form
+        // and leave it mounted — nothing is lost in either direction.
+        const nextHash = nextLocation.hash;
+        if (nextHash === "#side" || nextHash === "#new_side") return false;
+        const currentHash = currentLocation.hash;
+        if (currentHash === "#side" || currentHash === "#new_side") return false;
+        return true;
+    }, []));
+
     // Panel size state with persistence
     const [panelSize, setPanelSize] = useState(() => getSavedPanelSize(path));
 
@@ -170,16 +223,15 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
         };
     }, [selectedEntityId]); // Intentionally only depend on selectedEntityId
 
+    // Build a URL below this collection, preserving the active view mode.
+    const buildUrl = useCallback((subPath: string) => {
+        return withViewMode(urlController.buildUrlCollectionPath(subPath));
+    }, [urlController]);
+
     // Close the detail panel: navigate back to the collection path
     const handleCloseDetail = useCallback(() => {
-        let collectionUrl = urlController.buildUrlCollectionPath(path);
-        // Preserve the __view query param so the view mode is retained
-        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-        if (currentViewParam) {
-            collectionUrl += `${collectionUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-        }
-        navigate(collectionUrl);
-    }, [navigate, urlController, path]);
+        navigate(buildUrl(path));
+    }, [navigate, buildUrl, path]);
 
     // ── Keyboard navigation ──
     const entityIds = useMemo(
@@ -189,23 +241,33 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
-            // Don't intercept when user is typing in an input/textarea
-            const tag = (e.target as HTMLElement)?.tagName;
-            if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || (e.target as HTMLElement)?.isContentEditable) {
-                // Only intercept Escape when inside the detail panel
-                if (e.key === "Escape" && selectedEntityId) {
-                    handleCloseDetail();
+            const target = e.target as HTMLElement | null;
+
+            // Radix overlays own the keyboard while they are open — including Escape.
+            if (document.querySelector('[role="dialog"][data-state="open"]')) return;
+
+            if (e.key === "Escape") {
+                if (!selectedEntityId) return;
+                // First Escape leaves the field (which may also be dismissing its
+                // own dropdown), a second one closes the panel. Closing straight
+                // from a focused field would discard an in-progress edit.
+                if (isTextEntryTarget(target)) {
+                    target?.blur();
                     e.preventDefault();
+                    return;
                 }
-                return;
-            }
-
-            if (e.key === "Escape" && selectedEntityId) {
                 handleCloseDetail();
                 e.preventDefault();
                 return;
             }
 
+            // Record navigation only belongs to the list side. Inside the detail
+            // panel these keys are the form's — arrows move between fields, and a
+            // bare letter is input for widgets that aren't native fields (rich
+            // text, code editors, comboboxes).
+            if (!isListShortcutTarget(target, detailPanelRef.current)) return;
+            if (isTextEntryTarget(target)) return;
+
             // Arrow down / j → next entity
             if ((e.key === "ArrowDown" || e.key === "j") && !e.metaKey && !e.ctrlKey) {
                 e.preventDefault();
@@ -282,6 +344,7 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
 
     const detailPanel = renderedEntityId !== undefined ? (
         <div
+            ref={detailPanelRef}
             className={cls(
                 "flex-1 flex flex-col min-w-0 h-full transition-all ease-out w-full",
                 animationPhase === "entered"
@@ -302,25 +365,15 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                         selectedTab={selectedTab}
                         layout="split"
                         onEditClick={() => {
-                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}/edit`);
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl);
+                            navigate(buildUrl(`${path}/${renderedEntityId}/edit`));
                         }}
                         onTabChange={(params) => {
                             const newSelectedTab = params.selectedTab;
-                            let entityUrl = urlController.buildUrlCollectionPath(
+                            navigate(buildUrl(
                                 newSelectedTab
                                     ? `${path}/${renderedEntityId}/${newSelectedTab}`
                                     : `${path}/${renderedEntityId}`
-                            );
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl);
+                            ));
                         }}
                     />
                     : <EditViewBinding
@@ -332,34 +385,21 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                         parentEntityIds={usedParentEntityIds}
                         selectedTab={selectedTab}
                         layout="split"
-                        onSaved={(params) => {
-                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}`);
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl, { replace: true });
+                        onValuesModified={setDirty}
+                        onSaved={() => {
+                            setDirty(false);
+                            navigate(buildUrl(`${path}/${renderedEntityId}`), { replace: true });
                         }}
                         navigateBack={() => {
-                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}`);
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl);
+                            navigate(buildUrl(`${path}/${renderedEntityId}`));
                         }}
                         onTabChange={(params) => {
                             const newSelectedTab = params.selectedTab;
-                            let entityUrl = urlController.buildUrlCollectionPath(
+                            navigate(buildUrl(
                                 newSelectedTab
                                     ? `${path}/${renderedEntityId}/${newSelectedTab}`
                                     : `${path}/${renderedEntityId}`
-                            );
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl);
+                            ));
                         }}
                     />
                 }
@@ -368,14 +408,25 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
     ) : <></>;
 
     return (
-        <ResizablePanels
-            stacked={!largeLayout}
-            firstPanel={listPanel}
-            secondPanel={detailPanel}
-            showSecondPanel={isDetailVisible}
-            panelSizePercent={animationPhase === "entering" ? 100 : panelSize}
-            onPanelSizeChange={setPanelSize}
-            minPanelSizePx={240}
-        />
+        <>
+            <ResizablePanels
+                stacked={!largeLayout}
+                firstPanel={listPanel}
+                secondPanel={detailPanel}
+                showSecondPanel={isDetailVisible}
+                panelSizePercent={animationPhase === "entering" ? 100 : panelSize}
+                onPanelSizeChange={setPanelSize}
+                minPanelSizePx={240}
+            />
+
+            <UnsavedChangesDialog
+                open={blocker?.state === "blocked"}
+                handleOk={() => {
+                    dirty.current = false;
+                    blocker?.proceed?.();
+                }}
+                handleCancel={() => blocker?.reset?.()}
+                body={<>You have unsaved changes in this <b>{collection.singularName ?? collection.name}</b>.</>}/>
+        </>
     );
 }

package/src/components/DetailViewBinding.tsx

@@ -5,7 +5,8 @@ import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useStat
 import { Entity, EntityStatus, getCollectionDataPath, Property } from "@rebasepro/types";
 import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 
-import { CollectionViewBinding, EntityViewBinding } from "../components";
+import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBinding";
+import { EntityViewBinding } from "./EntityViewBinding";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
@@ -39,7 +40,8 @@ import {
     useLargeLayout,
     useSlot
 } from "@rebasepro/app";
-import { useUrlController, useCollectionRegistryController } from "../index";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useNavigate } from "react-router-dom";
 import { getValueInPath } from "@rebasepro/utils";
 import { getEntityTitlePropertyKey, resolveTitleToString } from "../util/previews";

package/src/components/EditFormActions.tsx

@@ -5,7 +5,7 @@ import type { EntityAction, EntityActionClickProps, SidePanelController } from "
 import React, { useMemo } from "react";
 import { Entity, getCollectionDataPath, RebaseContext } from "@rebasepro/types";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
-import { copyEntityAction, deleteEntityAction } from "../components";
+import { copyEntityAction, deleteEntityAction } from "./common/default_entity_actions";
 import { mergeEntityActions } from "../util/entity_actions";
 import { resolveEntityAction } from "../util/resolutions";
 import { Button, CircularProgress, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Tooltip, Typography } from "@rebasepro/ui";
@@ -19,7 +19,7 @@ import { SideDialogController, useSideDialogContext } from "./SideDialogs";
 import { FormexController } from "@rebasepro/forms";
 import { ErrorTooltip } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
-import { useCMSContext } from "../index";
+import { useCMSContext } from "../hooks/useCMSContext";
 
 export function EditFormActions({
     collection,

package/src/components/EditViewBinding.tsx

@@ -5,7 +5,8 @@ import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useStat
 import { Entity, EntityStatus, getCollectionDataPath } from "@rebasepro/types";
 import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 
-import { CollectionViewBinding, EntityViewBinding } from "../components";
+import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBinding";
+import { EntityViewBinding } from "./EntityViewBinding";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     CenteredView,
@@ -48,7 +49,7 @@ import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
 const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
 import { createFormexStub, getEntityFromCache } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
-import { useUrlController } from "../index";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useNavigate } from "react-router-dom";
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";

package/src/components/EntityPreviewBinding.tsx

@@ -27,7 +27,8 @@ import { IconForView } from "@rebasepro/app";
 import { getPropertyInPath } from "../util/property_utils";
 import { getEntityPreviewKeys, getEntityTitlePropertyKey } from "../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
-import { useCollectionRegistryController, useSidePanel } from "../index";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useSidePanel } from "../hooks/useSidePanel";
 
 export type EntityPreviewBindingProps = {
     size?: PreviewSize,

package/src/components/HomePage/ContentHomePage.tsx

@@ -23,7 +23,8 @@ import { useCollapsedGroups, buildCollapsedDefaults, useCustomizationController,
 import { useRestoreScroll } from "@rebasepro/app";
 
 import { SchemaDriftBanner } from "@rebasepro/app";
-import { useBreadcrumbsController, useCMSContext } from "../../index";
+import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
+import { useCMSContext } from "../../hooks/useCMSContext";
 
 export const DEFAULT_GROUP_NAME = "Views";
 export const ADMIN_GROUP_NAME = "Admin";

package/src/components/HomePage/FavouritesView.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 ;
 import { Chip, Collapse, StarIcon } from "@rebasepro/ui";
 import { useUserConfigurationPersistence } from "@rebasepro/app";
-import { useNavigationStateController } from "../../index";
+import { useNavigationStateController } from "../../hooks/navigation/contexts/NavigationStateContext";
 
 function NavigationChip({ entry }: { entry: NavigationEntry }) {
 

package/src/components/RebaseRouteDefs.tsx

@@ -18,7 +18,7 @@ import { useNavigationStateController } from "../hooks/navigation/contexts/Navig
 import { CollectionEditorDialogs } from "./CollectionEditorDialogs";
 import { useEffect } from "react";
 import { useTranslation } from "@rebasepro/app";
-import { useBreadcrumbsController } from "../index";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 function SettingsView() {
     const { t } = useTranslation();

package/src/components/ReferenceTable/SelectionTableBinding.tsx

@@ -23,7 +23,8 @@ import { useSelectionController } from "../CollectionViewBinding/useSelectionCon
 import { useColumnIds } from "@rebasepro/app";
 import { useSideDialogContext } from "../SideDialogs";
 import { useAnalyticsController } from "@rebasepro/app";
-import { useUrlController, useSidePanel } from "../../index";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
+import { useSidePanel } from "../../hooks/useSidePanel";
 
 /**
  * @group Components

package/src/components/ReferenceWidget.tsx

@@ -7,7 +7,7 @@ import type { PreviewSize } from "../types/components/PropertyPreviewProps";
 import { getReferenceFrom } from "@rebasepro/common";
 import { ReferencePreview } from "../preview";
 import { Button, cls } from "@rebasepro/ui";
-import { useCollectionRegistryController } from "../index";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 
 export type ReferenceWidgetProps<M extends Record<string, unknown>> = {
     name?: string,

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -7,7 +7,7 @@ import { ReferencePreview } from "../../../preview";
 import { Button, Checkbox, Label, Select, SelectItem } from "@rebasepro/ui";
 import { getReferenceFrom } from "@rebasepro/common";
 import { useTranslation } from "@rebasepro/app";
-import { useCollectionRegistryController } from "../../../index";
+import { useCollectionRegistryController } from "../../../hooks/navigation/contexts/CollectionRegistryContext";
 
 interface ReferenceFilterFieldProps {
     name: string,

package/src/components/SidePanelBinding.tsx

@@ -10,8 +10,9 @@ import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router-dom";
 import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
-import { useCollectionRegistryController, useSidePanel } from "../index";
-import { useUrlController } from "../index";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useSidePanel } from "../hooks/useSidePanel";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { resolveDefaultSelectedView } from "@rebasepro/common";
 
 /**
@@ -61,8 +62,10 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
         if (props.onUpdate) {
             props.onUpdate(params);
         }
-        setShowEditInPanel(false);
+        setEditInDialog(false);
         if (params.status !== "existing") {
+            // A newly created entity replaces the panel with its own address,
+            // which already leaves the edit view behind.
             sidePanelController.replace({
                 path: params.path,
                 entityId: params.entityId,
@@ -70,6 +73,8 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
                 updateUrl: collection?.openEntityMode !== "dialog",
                 collection: params.collection
             });
+        } else {
+            closeEditView();
         }
 
         if (sideDialogsController.pendingClose) {
@@ -89,13 +94,46 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
 
     const collection = collectionRegistryController.getCollection(path) ?? props.collection;
 
-    const [showEditInPanel, setShowEditInPanel] = useState(selectedTab === "edit");
+    // Dialog mode deliberately stays out of the URL, so it is the only case that
+    // needs local edit state. Everywhere else `edit` is a path segment, which
+    // keeps refresh and the back button working the same way they do in split.
+    const isDialogMode = collection?.openEntityMode === "dialog";
+    const [editInDialog, setEditInDialog] = useState(false);
+    const showEditInPanel = isDialogMode ? editInDialog : selectedTab === "edit";
     const isDetailMode = collection?.defaultEntityAction === "view" && !showEditInPanel && Boolean(entityId);
 
     // Reset edit mode when switching entities
     useEffect(() => {
-        setShowEditInPanel(selectedTab === "edit");
-    }, [entityId, selectedTab]);
+        setEditInDialog(false);
+    }, [entityId]);
+
+    const openEditView = useCallback(() => {
+        if (isDialogMode || !entityId) {
+            setEditInDialog(true);
+            return;
+        }
+        sidePanelController.replace({
+            path,
+            entityId,
+            selectedTab: "edit",
+            updateUrl: true,
+            collection
+        });
+    }, [isDialogMode, entityId, path, collection, sidePanelController]);
+
+    const closeEditView = useCallback(() => {
+        if (isDialogMode || !entityId) {
+            setEditInDialog(false);
+            return;
+        }
+        sidePanelController.replace({
+            path,
+            entityId,
+            selectedTab: undefined,
+            updateUrl: true,
+            collection
+        });
+    }, [isDialogMode, entityId, path, collection, sidePanelController]);
 
     // One-time correction: when the side panel opens without the correct
     // selectedTab but the resolved collection (from the registry) has a
@@ -154,7 +192,7 @@ entityId }
                         entityId={entityId!}
                         parentCollectionSlugs={parentCollectionSlugs}
                         parentEntityIds={parentEntityIds}
-                        onEditClick={() => setShowEditInPanel(true)}
+                        onEditClick={openEditView}
                         barActions={({
                             status,
                             values
@@ -203,7 +241,7 @@ entityId }
                         parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                         onValuesModified={onValuesModified}
                         onSaved={onUpdate}
-                        navigateBack={() => setShowEditInPanel(false)}
+                        navigateBack={closeEditView}
                         barActions={({
                             status,
                             values

package/src/components/SidePanelProvider.tsx

@@ -6,9 +6,10 @@ import { SidePanelControllerContext } from "../hooks/useSidePanel";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
 import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
-import { useCollectionRegistryController, useUrlController } from "../index";
-import { useNavigationStateController } from "../index";
-import { useAuthController, useBridgeRegistration } from "@rebasepro/app";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
+import { useAuthController, useBridgeRegistration, NavigationBlockerProvider } from "@rebasepro/app";
 
 /**
  * Provider that builds the SidePanelController and makes it available
@@ -54,14 +55,16 @@ export function SidePanelProvider({ children }: { children: React.ReactNode }) {
     );
 
     return (
-        <BreadcrumbsProvider>
-            <SideDialogsControllerContext.Provider value={sideDialogsController}>
-                <SidePanelControllerContext.Provider value={sidePanelController}>
-                    <BridgeAutoRegistrar sidePanelController={sidePanelController}/>
-                    {children}
-                </SidePanelControllerContext.Provider>
-            </SideDialogsControllerContext.Provider>
-        </BreadcrumbsProvider>
+        <NavigationBlockerProvider>
+            <BreadcrumbsProvider>
+                <SideDialogsControllerContext.Provider value={sideDialogsController}>
+                    <SidePanelControllerContext.Provider value={sidePanelController}>
+                        <BridgeAutoRegistrar sidePanelController={sidePanelController}/>
+                        {children}
+                    </SidePanelControllerContext.Provider>
+                </SideDialogsControllerContext.Provider>
+            </BreadcrumbsProvider>
+        </NavigationBlockerProvider>
     );
 }