@firecms/core 3.4.0-canary.8635253 → 3.4.0-canary.ce97da7

package/src/components/common/useTableSearchHelper.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { EntityCollection } from "../../types";
 import { useCustomizationController, useDataSource, useFireCMSContext } from "../../hooks";
@@ -6,13 +6,23 @@ import { useCustomizationController, useDataSource, useFireCMSContext } from "..
 export interface UseTableSearchHelperParams<M extends Record<string, any>> {
     collection: EntityCollection<M>;
     fullPath: string;
+    /** `fullPath` split at its real segment boundaries, when known. Never derived from it. */
+    pathSegments?: string[];
     parentCollectionIds?: string[];
+    /**
+     * Search term that is already being applied without the user having gone through the
+     * search bar, e.g. one restored from the URL query params. When set, text search is
+     * initialised automatically instead of waiting for a click on the search bar.
+     */
+    initialSearchString?: string;
 }
 
 export function useTableSearchHelper<M extends Record<string, any>>({
                                                                         collection,
                                                                         fullPath,
-                                                                        parentCollectionIds
+                                                                        pathSegments,
+                                                                        parentCollectionIds,
+                                                                        initialSearchString
                                                                     }: UseTableSearchHelperParams<M>) {
 
     const context = useFireCMSContext();
@@ -21,6 +31,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
 
     const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
     const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+    const autoInitialisedRef = useRef<boolean>(false);
 
     let onTextSearchClick: (() => void) | undefined;
     let textSearchEnabled = Boolean(collection.textSearchEnabled);
@@ -28,6 +39,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
     const props = {
         context,
         path: fullPath,
+        pathSegments,
         databaseId: collection.databaseId,
         collection,
         parentCollectionIds
@@ -54,6 +66,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
                             promises.push(p.collectionView.onTextSearchClick({
                                 context,
                                 path: fullPath,
+                                pathSegments,
                                 collection,
                                 parentCollectionIds
                             }));
@@ -79,6 +92,17 @@ export function useTableSearchHelper<M extends Record<string, any>>({
                 }
         })
     }
+
+    // Only ever runs once, and only when a search term was restored from outside the search
+    // bar: otherwise the search bar would show a term the user can neither edit nor clear,
+    // because it stays read only until text search is initialised.
+    const shouldAutoInitialise = Boolean(initialSearchString) && textSearchEnabled && !textSearchInitialised && Boolean(onTextSearchClick);
+    useEffect(() => {
+        if (autoInitialisedRef.current || !shouldAutoInitialise) return;
+        autoInitialisedRef.current = true;
+        onTextSearchClick?.();
+    }, [shouldAutoInitialise]);
+
     return {
         textSearchLoading,
         textSearchInitialised,

package/src/components/index.tsx

@@ -43,3 +43,4 @@ export * from "./EntityPreview";
 
 export * from "./AIIcon";
 export * from "./LanguageToggle";
+export * from "./LicenseBanner";

package/src/contexts/LicenseStatusContext.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { AccessResponse } from "../types";
+
+/**
+ * License status of the enclosing `FireCMS`. `undefined` means there is no
+ * `FireCMS` above; `null` means the check has not answered (or was skipped).
+ * @internal
+ */
+export const LicenseStatusContext = React.createContext<AccessResponse | null | undefined>(undefined);
+
+/*
+ * The same status, published outside React's tree.
+ *
+ * `useBuildNavigationController` runs in the app component that renders
+ * `<FireCMS>`, above it, so it cannot read the context. It still has to know
+ * when PRO is paused: it applies the plugins' collection, view and home page
+ * navigation contributions itself. `FireCMS` publishes here, and the navigation
+ * controller subscribes with `useSyncExternalStore`.
+ *
+ * One value per page: two `FireCMS` instances on one page would share it, which
+ * is harmless because both check the same project.
+ */
+
+let currentStatus: AccessResponse | null = null;
+const listeners = new Set<() => void>();
+
+/** @internal */
+export function getLicenseStatusSnapshot(): AccessResponse | null {
+    return currentStatus;
+}
+
+/** @internal */
+export function getServerLicenseStatusSnapshot(): AccessResponse | null {
+    return null;
+}
+
+/** @internal */
+export function subscribeLicenseStatus(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+
+/** @internal */
+export function publishLicenseStatus(status: AccessResponse | null): void {
+    if (status === currentStatus) return;
+    currentStatus = status;
+    listeners.forEach(listener => listener());
+}

package/src/contexts/SnackbarProvider.tsx

@@ -1,12 +1,25 @@
 "use client";
 
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 import { SnackbarProvider as NotistackSnackbarProvider } from "notistack";
 
 export const SnackbarProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
 
+    // Notistack renders the snackbars inline, right where this provider sits in the
+    // tree, unless it is given a `domRoot`. Dialogs and side dialogs, on the other
+    // hand, are portalled to the body, so any ancestor of this provider that creates
+    // a stacking context (a transform, a filter, an `isolate`, a positioned element
+    // with a z-index...) traps the snackbars underneath them. Portalling the
+    // snackbars to the body as well puts them in the same stacking context as the
+    // dialogs, where their z-index actually wins.
+    const [domRoot, setDomRoot] = useState<HTMLElement | undefined>(undefined);
+    useEffect(() => {
+        setDomRoot(document.body);
+    }, []);
+
     return (
         <NotistackSnackbarProvider maxSnack={3}
+                                   domRoot={domRoot}
                                    autoHideDuration={3500}>
             {children}
         </NotistackSnackbarProvider>

package/src/core/DefaultAppBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Link, useNavigate } from "react-router-dom";
-import { ErrorBoundary, FireCMSLogo, LanguageToggle } from "../components";
+import { ErrorBoundary, LanguageToggle } from "../components";
 import {
     Avatar,
     BrightnessMediumIcon,
@@ -20,6 +20,7 @@ import { useAuthController, useLargeLayout, useModeController, useNavigationCont
 import { User } from "../types";
 import { useApp } from "../app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { DrawerLogo } from "./DefaultDrawer";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
@@ -119,32 +120,43 @@ export const DefaultAppBar = function DefaultAppBar({
                 "flex flex-row gap-2 px-4 items-center",
                 {
                     "pl-[19rem]": drawerOpen && largeLayout,
-                    "pl-24": hasDrawer && !(drawerOpen && largeLayout),
+                    // The title has to sit at the same x whether or not a Drawer
+                    // is mounted, so the bar reserves the collapsed rail's width
+                    // in both cases. Only a pinned-open drawer moves it, in step
+                    // with the drawer itself.
+                    "pl-24": !(drawerOpen && largeLayout) && (hasDrawer || largeLayout),
                     "z-10": largeLayout,
                     "duration-100": drawerOpen && largeLayout,
                 },
                 className)}>
 
 
+            {/* Rendering DrawerLogo itself, rather than rebuilding its box here,
+                is what keeps the mark from moving when a screen with a drawer
+                follows one without: matching it by hand still left it 4px high,
+                because DrawerLogo centres a 40px box under `pt-4` instead of
+                centring in the 64px bar.
+
+                Gated on `largeLayout`, not on `lg:`: useLargeLayout resolves at
+                min-width 1025px while Tailwind's `lg:` starts at 1024px, and at
+                exactly 1024px the logo would render into a bar that had not
+                reserved room for it, landing on top of the title. */}
+            {navigation && !hasDrawer && largeLayout &&
+                <div className={"absolute left-0 top-0"}>
+                    <DrawerLogo logo={logo} />
+                </div>}
+
             {navigation && <div className="mr-2 hidden lg:block">
                 <Link
                     className="visited:text-inherit visited:dark:text-inherit block"
                     to={navigation?.basePath ?? "/"}
                 >
-                    <div className={"flex flex-row gap-4"}>
-                        {!hasDrawer && (logo
-                            ? <img src={logo}
-                                alt="Logo"
-                                className={cls("w-[32px] h-[32px] object-contain")} />
-                            : <FireCMSLogo width={"32px"} height={"32px"} />)}
-
-                        {typeof title === "string"
-                            ? <Typography variant="subtitle1"
-                                noWrap>
-                                {title}
-                            </Typography>
-                            : title}
-                    </div>
+                    {typeof title === "string"
+                        ? <Typography variant="subtitle1"
+                            noWrap>
+                            {title}
+                        </Typography>
+                        : title}
                 </Link>
             </div>}
 

package/src/core/EntityEditView.tsx

@@ -12,6 +12,7 @@ import {
 
 import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary } from "../components";
 import {
+    buildSubcollectionPathSegments,
     canEditEntity,
     encodeEntityId,
     removeInitialAndTrailingSlashes,
@@ -28,7 +29,7 @@ import {
     useLargeLayout
 } from "../hooks";
 import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography, Menu, MenuItem, ExpandMoreIcon } from "@firecms/ui";
-import { getEntityFromMemoryCache } from "../util/entity_cache";
+import { entityCacheKey, getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
@@ -42,6 +43,8 @@ export type OnUpdateParams = {
     entity: Entity<any>,
     status: EntityStatus,
     path: string,
+    /** `path` split at its real segment boundaries, when known. Never derived from `path`. */
+    pathSegments?: string[],
     entityId?: string;
     selectedTab?: string;
     collection: EntityCollection<any>
@@ -71,6 +74,12 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
      * The navigation path to the entity.
      */
     fullIdPath?: string;
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     * Forwarded to the datasource, and extended for any subcollection rendered inside this
+     * view, so a parent entity id containing "/" stays unambiguous.
+     */
+    pathSegments?: string[];
     collection: EntityCollection<M>;
     entityId?: string;
     databaseId?: string;
@@ -101,6 +110,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         dataLoadingError
     } = useEntityFetch<M, USER>({
         path: props.path,
+        pathSegments: props.pathSegments,
         entityId: entityId,
         collection: props.collection,
         databaseId: props.databaseId,
@@ -108,7 +118,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     });
 
     const initialDirtyValues = entityId
-        ? getEntityFromMemoryCache(props.path + "/" + entityId)
+        ? getEntityFromMemoryCache(entityCacheKey(props.path, entityId))
         : getEntityFromMemoryCache(props.path + "#new");
 
     const authController = useAuthController();
@@ -120,7 +130,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         if (status === "new" || status === "copy") {
             return true;
         } else {
-            return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null) : undefined;
+            return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null, props.pathSegments) : undefined;
         }
     }, [authController, entity, status]);
 
@@ -146,6 +156,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
 export function EntityEditViewInner<M extends Record<string, any>>({
     path,
     fullIdPath,
+    pathSegments,
     entityId,
     selectedTab: selectedTabProp,
     collection,
@@ -194,6 +205,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             entityId,
             parentCollectionIds,
             path,
+            pathSegments,
             status,
             collection,
             context,
@@ -351,6 +363,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.path)}` : undefined;
         // `newFullIdPath` is fed to buildUrlCollectionPath downstream, so it stays escaped.
         const newFullIdPath = fullIdPath && usedEntity ? `${fullIdPath}/${encodeEntityId(usedEntity.id)}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+        // Only extendable when we were given real segments — deriving the parent chain
+        // from the flattened `path` would drop the boundary of a slash-bearing parent id.
+        const newPathSegments = buildSubcollectionPathSegments(pathSegments, usedEntity?.id, subcollection.path);
 
         if (selectedTab !== subcollectionId) return null;
         return (
@@ -365,6 +380,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     (usedEntity && newFullPath
                         ? <EntityCollectionView
                             fullPath={newFullPath}
+                            pathSegments={newPathSegments}
                             fullIdPath={newFullIdPath}
                             parentCollectionIds={[...parentCollectionIds, collection.id]}
                             isSubCollection={true}
@@ -414,6 +430,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         fullIdPath={fullIdPath}
         collection={collection}
         path={path}
+        pathSegments={pathSegments}
         entityId={entityId ?? usedEntity?.id}
         onValuesModified={onValuesModified}
         entity={entity}

package/src/core/EntityEditViewFormActions.tsx

@@ -39,6 +39,7 @@ import { ErrorTooltip } from "../components/ErrorTooltip";
 export function EntityEditViewFormActions({
                                               collection,
                                               path,
+                                              pathSegments,
                                               entity,
                                               layout,
                                               savingError,
@@ -63,8 +64,8 @@ export function EntityEditViewFormActions({
         const customEntityActions = (collection.entityActions ?? [])
             .map(action => resolveEntityAction(action, customizationController.entityActions))
             .filter(Boolean) as EntityAction[];
-        const createEnabled = canCreateEntity(collection, authController, path, null);
-        const deleteEnabled = entity ? canDeleteEntity(collection, authController, path, entity) : false;
+        const createEnabled = canCreateEntity(collection, authController, path, null, pathSegments);
+        const deleteEnabled = entity ? canDeleteEntity(collection, authController, path, entity, entity.pathSegments ?? pathSegments) : false;
         const actions: EntityAction[] = [];
         if (createEnabled)
             actions.push(copyEntityAction);

package/src/core/EntitySidePanel.tsx

@@ -8,7 +8,7 @@ import { EntityEditView, OnUpdateParams } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 import { CloseIcon, IconButton, OpenInFullIcon } from "@firecms/ui";
 import { useLocation, useNavigate } from "react-router-dom";
-import { saveEntityToMemoryCache } from "../util/entity_cache";
+import { entityCacheKey, saveEntityToMemoryCache } from "../util/entity_cache";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -25,6 +25,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         path,
         entityId,
         fullIdPath,
+        pathSegments,
         formProps,
     } = props;
 
@@ -59,6 +60,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         if (params.status !== "existing") {
             sideEntityController.replace({
                 path: params.path,
+                pathSegments: params.pathSegments ?? pathSegments,
                 entityId: params.entityId,
                 fullIdPath: props.fullIdPath,
                 selectedTab: params.selectedTab,
@@ -75,10 +77,10 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     }
 
     const parentCollectionIds = useMemo(() => {
-        return navigationController.getParentCollectionIds(path);
+        return navigationController.getParentCollectionIds(path, pathSegments);
     }, [navigationController, path]);
 
-    const collection = props.collection ?? navigationController.getCollection(fullIdPath ?? path);
+    const collection = props.collection ?? navigationController.getCollection(fullIdPath ?? path, false, pathSegments);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -116,6 +118,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                 <EntityEditView
                     {...props}
                     fullIdPath={fullIdPath}
+                    pathSegments={pathSegments}
                     layout={"side_panel"}
                     collection={collection as EntityCollection}
                     parentCollectionIds={parentCollectionIds}
@@ -135,7 +138,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                 className="self-center"
                                 size={"smallest"}
                                 onClick={() => {
-                                    const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                    const key = (status === "new" || status === "copy") ? path + "#new" : entityCacheKey(path, entityId);
                                     saveEntityToMemoryCache(key, values);
                                     if (entityId)
                                         navigate(location.pathname + location.search);
@@ -152,6 +155,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     }) => {
                         sideEntityController.replace({
                             path,
+                            pathSegments,
                             entityId,
                             fullIdPath: props.fullIdPath,
                             selectedTab,

package/src/core/FireCMS.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import React, { useEffect, useMemo } from "react";
-import { CenteredView, Typography } from "@firecms/ui";
+import React, { useEffect, useMemo, useRef } from "react";
+import { CenteredView } from "@firecms/ui";
+import { AppliedBundles, applyPluginTranslations, createAppliedBundles } from "./plugin_translations";
+import { filterPausedPlugins, isProPaused } from "./pro_plugins";
 import { AuthController } from "../types";
 import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext, ModeControllerProvider } from "../contexts";
@@ -23,6 +25,7 @@ import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
 import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
+import { LicenseStatusContext, publishLicenseStatus } from "../contexts/LicenseStatusContext";
 
 /**
  * If you are using independent components of the CMS
@@ -54,6 +57,7 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         components,
         navigationController,
         apiKey,
+        telemetry,
         userManagement: _userManagement
     } = props;
 
@@ -61,11 +65,42 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
     }
 
-    const { t, i18n } = useTranslation();
+    const { i18n } = useTranslation();
 
     const modeController = useBuildModeController();
 
-    const plugins = navigationController.plugins ?? _pluginsProp;
+    // Every plugin the app mounts. The license check is sent all of their keys:
+    // the server decides from them whether the project needs a license.
+    const allPlugins = navigationController.plugins ?? _pluginsProp;
+
+    const licenseStatus = useProjectLog({
+        apiKey,
+        telemetry,
+        authController,
+        dataSourceDelegate,
+        plugins: allPlugins
+    });
+
+    // The CMS always renders. While PRO is paused, PRO plugins drop out of
+    // everything below (providers, form, collection view and home page
+    // contributions); `useBuildNavigationController` drops their collection,
+    // view and navigation contributions from the status published below.
+    const plugins = useMemo(
+        () => filterPausedPlugins(allPlugins, licenseStatus),
+        [allPlugins, licenseStatus]
+    );
+
+    useEffect(() => {
+        publishLicenseStatus(licenseStatus);
+        if (licenseStatus?.message) {
+            if (isProPaused(licenseStatus)) console.warn(licenseStatus.message);
+            else console.debug(licenseStatus.message);
+        }
+    }, [licenseStatus]);
+
+    // The status belongs to this FireCMS; do not leave it to a later one.
+    useEffect(() => () => publishLicenseStatus(null), []);
+
     const userManagement = plugins?.find(p => p.userManagement)?.userManagement
         ?? _userManagement
         ?? {
@@ -95,13 +130,6 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         onAnalyticsEvent
     }), []);
 
-    const accessResponse = useProjectLog({
-        apiKey,
-        authController,
-        dataSourceDelegate,
-        plugins
-    });
-
     /**
      * Controller in charge of fetching and persisting data
      */
@@ -112,27 +140,42 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController
     });
 
-    // Inject plugin translations into the existing i18next instance
+    // Inject plugin translations into the live i18next instance.
+    //
+    // The work, and the reason repeat writes have to be suppressed, is in
+    // `applyPluginTranslations`. Paused plugins keep their strings: app code
+    // may render their components directly, and strings unlock nothing.
+    const appliedBundles = useRef<AppliedBundles>(createAppliedBundles());
+    const appliedTo = useRef<unknown>(null);
+
     useEffect(() => {
         if (!i18n) return;
-        plugins?.forEach(plugin => {
-            if (plugin.i18n) {
-                Object.keys(plugin.i18n).forEach(locale => {
-                    i18n.addResourceBundle(
-                        locale,
-                        "firecms_core",
-                        plugin.i18n![locale],
-                        true,  // deep merge
-                        true   // overwrite
-                    );
-                });
-            }
+
+        // A different instance has its own store and has been written nothing.
+        // Reset here rather than in an effect of its own, which would run after
+        // this one and wipe the record of what this pass just wrote.
+        if (appliedTo.current !== i18n) {
+            appliedTo.current = i18n;
+            appliedBundles.current = createAppliedBundles();
+        }
+
+        let active = true;
+        const isActive = () => active;
+        const applyFor = (language: string) => applyPluginTranslations({
+            i18n,
+            plugins: allPlugins,
+            language,
+            applied: appliedBundles.current,
+            isActive
         });
-    }, [i18n, plugins]);
 
-    if (accessResponse?.message) {
-        console.warn(accessResponse.message);
-    }
+        applyFor(i18n.language ?? "en");
+        i18n.on("languageChanged", applyFor);
+        return () => {
+            active = false;
+            i18n.off("languageChanged", applyFor);
+        };
+    }, [i18n, allPlugins]);
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -154,26 +197,8 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         );
     }
 
-    if (accessResponse?.blocked) {
-        return (
-            <CenteredView maxWidth={"md"} fullScreen={true} className={"flex flex-col gap-2"}>
-                {/* eslint-disable-next-line i18next/no-literal-string */}
-                <Typography variant={"h4"} gutterBottom>
-                    {t("license_needed")}
-                </Typography>
-                <Typography>
-                    {(() => {
-                        const parts = t("license_description", { email: "%%EMAIL%%" }).split("%%EMAIL%%");
-                        return <>{parts[0]}<a href={"mailto:hello@firecms.co"}>hello@firecms.co</a>{parts[1]}</>;
-                    })()}
-                </Typography>
-                {accessResponse?.message &&
-                    <Typography>{accessResponse?.message}</Typography>}
-            </CenteredView>
-        );
-    }
-
     return (
+        <LicenseStatusContext.Provider value={licenseStatus}>
         <AnalyticsContext.Provider value={analyticsController}>
             <CustomizationControllerContext.Provider value={customizationController}>
                 <UserConfigurationPersistenceContext.Provider
@@ -209,6 +234,7 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
                 </UserConfigurationPersistenceContext.Provider>
             </CustomizationControllerContext.Provider>
         </AnalyticsContext.Provider>
+        </LicenseStatusContext.Provider>
     );
 
 }

package/src/core/SideDialogs.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { EntitySidePanelProps, SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
@@ -67,6 +67,40 @@ export function SideDialogs() {
     </>;
 }
 
+// Menus, selects and popovers opened inside a side dialog are dismissed by Radix as
+// soon as the pointer goes down, but the dialog underneath only makes up its mind on
+// the click that follows, when that layer is already gone and the dialog looks like
+// the topmost one. Without this, the click that dismisses an open menu also asks the
+// panel to close, and an edited entity greets the user with the unsaved changes dialog.
+const NESTED_LAYER_SELECTOR = [
+    "[data-radix-menu-content]",
+    "[data-radix-select-viewport]",
+    "[data-radix-popper-content-wrapper] [role=\"dialog\"]",
+    "[data-suggestion-menu=\"true\"]"
+].join(",");
+
+function useNestedLayerOpenOnPointerDown() {
+    const ref = useRef(false);
+    useEffect(() => {
+        const onPointerDown = () => {
+            ref.current = Array.from(document.querySelectorAll(NESTED_LAYER_SELECTOR))
+                .some(element => window.getComputedStyle(element).visibility !== "hidden");
+        };
+        // the keyboard dismisses one layer at a time on its own, so a stale pointer
+        // interaction must not swallow a close requested with Escape
+        const onKeyDown = () => {
+            ref.current = false;
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        document.addEventListener("keydown", onKeyDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown, true);
+            document.removeEventListener("keydown", onKeyDown, true);
+        };
+    }, []);
+    return ref;
+}
+
 function SideDialogView({
     offsetPosition,
     panel
@@ -82,6 +116,8 @@ function SideDialogView({
 
     const [pendingClose, setPendingClose] = useState(false);
 
+    const nestedLayerOpenOnPointerDown = useNestedLayerOpenOnPointerDown();
+
     const widthRef = React.useRef<string | undefined>(panel?.width);
     const width = widthRef.current;
 
@@ -144,6 +180,13 @@ function SideDialogView({
                             // Let Tiptap handle closing the menu first
                             return;
                         }
+                        // this interaction started on top of a menu or popover: it dismissed
+                        // that layer, it was not a request to close the panel. The flag is
+                        // left alone because a single click asks to close more than once;
+                        // the next pointer or key interaction recomputes it.
+                        if (nestedLayerOpenOnPointerDown.current) {
+                            return;
+                        }
                         onCloseRequest();
                     }
                 }}