@nocobase/flow-engine 2.2.0-alpha.6 → 2.2.0-alpha.8

package/lib/utils/dirtyAwareApiClient.js

@@ -31,8 +31,10 @@ __export(dirtyAwareApiClient_exports, {
   getDirtyAwareApiClient: () => getDirtyAwareApiClient
 });
 module.exports = __toCommonJS(dirtyAwareApiClient_exports);
+var import_sdk = require("@nocobase/sdk");
 var import_dataSourceDirty = require("./dataSourceDirty");
 const SKIP_DATA_SOURCE_DIRTY = "__nocobaseSkipDataSourceDirty";
+const DIRTY_DISPATCH_TOKEN = Symbol("nocobaseDirtyDispatchToken");
 const dirtyAwareApiClientCache = /* @__PURE__ */ new WeakMap();
 const dirtyAwareApiClientProxies = /* @__PURE__ */ new WeakSet();
 const MUTATING_RESOURCE_ACTIONS = [
@@ -288,6 +290,43 @@ function resolveDirtyResourceAction(options, context) {
   return parseDirtyResourceActionFromUrl(options == null ? void 0 : options.url, context);
 }
 __name(resolveDirtyResourceAction, "resolveDirtyResourceAction");
+function getDirtyResourceActionDispatchKey(dirtyResourceAction, headers) {
+  if (!dirtyResourceAction) {
+    return void 0;
+  }
+  return JSON.stringify([
+    dirtyResourceAction.dataSourceKey || (0, import_dataSourceDirty.getDataSourceKeyFromHeaders)(headers),
+    dirtyResourceAction.resourceName,
+    dirtyResourceAction.actionName
+  ]);
+}
+__name(getDirtyResourceActionDispatchKey, "getDirtyResourceActionDispatchKey");
+function getRequestDispatchKey(options, context) {
+  return getDirtyResourceActionDispatchKey(resolveDirtyResourceAction(options, context), options.headers);
+}
+__name(getRequestDispatchKey, "getRequestDispatchKey");
+function getResourceDispatchKey(name, of, headers) {
+  const resourceName = String(name ?? "").trim();
+  if (!resourceName) {
+    return void 0;
+  }
+  return JSON.stringify([resourceName, String(of ?? ""), (0, import_dataSourceDirty.getDataSourceKeyFromHeaders)(headers)]);
+}
+__name(getResourceDispatchKey, "getResourceDispatchKey");
+function getMatchingRequestToken(token, requestKey) {
+  if (!token || !requestKey || token.requestKey && token.requestKey !== requestKey) {
+    return void 0;
+  }
+  return token;
+}
+__name(getMatchingRequestToken, "getMatchingRequestToken");
+function getMatchingResourceToken(token, resourceKey) {
+  if (!token || !resourceKey || token.resourceKey && token.resourceKey !== resourceKey) {
+    return void 0;
+  }
+  return token;
+}
+__name(getMatchingResourceToken, "getMatchingResourceToken");
 function markResourceActionDataSourceDirty(context, dirtyResourceAction, headers) {
   (0, import_dataSourceDirty.markDataSourceDirty)({
     engine: context.engine,
@@ -297,7 +336,19 @@ function markResourceActionDataSourceDirty(context, dirtyResourceAction, headers
   });
 }
 __name(markResourceActionDataSourceDirty, "markResourceActionDataSourceDirty");
-function createDirtyAwareResource(context, resource, resourceName, resourceOf, headers) {
+function markResourceActionDataSourceDirtyOnce(token, context, dirtyResourceAction, headers) {
+  if (token.skip || token.marked || !dirtyResourceAction || !isMutatingResourceAction(dirtyResourceAction.actionName)) {
+    return;
+  }
+  token.marked = true;
+  markResourceActionDataSourceDirty(context, dirtyResourceAction, headers);
+}
+__name(markResourceActionDataSourceDirtyOnce, "markResourceActionDataSourceDirtyOnce");
+function isObjectRecord(value) {
+  return !!value && typeof value === "object";
+}
+__name(isObjectRecord, "isObjectRecord");
+function createDirtyAwareResource(context, resource, resourceName, resourceOf, headers, requestTokenStack, parentToken) {
   return new Proxy(resource, {
     get(target, prop, receiver) {
       const original = Reflect.get(target, prop, receiver);
@@ -306,10 +357,38 @@ function createDirtyAwareResource(context, resource, resourceName, resourceOf, h
       }
       const action = original;
       return async (...args) => {
-        const result = await action(...args);
+        const actionOptions = isObjectRecord(args[1]) ? args[1] : void 0;
         const dirtyResourceAction = resolveDirtyResourceActionFromResource(resourceName, resourceOf, prop, context);
-        if (dirtyResourceAction) {
-          markResourceActionDataSourceDirty(context, dirtyResourceAction, headers);
+        const requestKey = getDirtyResourceActionDispatchKey(dirtyResourceAction, headers);
+        const resourceKey = getResourceDispatchKey(resourceName, resourceOf, headers);
+        const inheritedToken = getMatchingRequestToken(
+          actionOptions == null ? void 0 : actionOptions[DIRTY_DISPATCH_TOKEN],
+          requestKey
+        ) || getMatchingRequestToken(parentToken, requestKey);
+        const token = inheritedToken || { marked: false, skip: false };
+        const ownsToken = !inheritedToken;
+        token.requestKey ||= requestKey;
+        token.resourceKey ||= resourceKey;
+        if (actionOptions == null ? void 0 : actionOptions[SKIP_DATA_SOURCE_DIRTY]) {
+          token.skip = true;
+        }
+        const forwardedArgs = actionOptions || args[1] == null ? [
+          args[0],
+          {
+            ...actionOptions,
+            [DIRTY_DISPATCH_TOKEN]: token
+          }
+        ] : args;
+        let actionResult;
+        requestTokenStack.push({ key: requestKey, token });
+        try {
+          actionResult = Reflect.apply(action, receiver, forwardedArgs);
+        } finally {
+          requestTokenStack.pop();
+        }
+        const result = await actionResult;
+        if (ownsToken) {
+          markResourceActionDataSourceDirtyOnce(token, context, dirtyResourceAction, headers);
         }
         return result;
       };
@@ -318,31 +397,206 @@ function createDirtyAwareResource(context, resource, resourceName, resourceOf, h
 }
 __name(createDirtyAwareResource, "createDirtyAwareResource");
 function createDirtyAwareApiClient(api, context) {
+  const baseResource = api.resource;
+  const baseRequest = api.request;
+  const shouldUseResourceDispatchReceiver = baseResource === import_sdk.APIClient.prototype.resource;
+  const shouldUseRequestDispatchReceiver = baseRequest === import_sdk.APIClient.prototype.request;
+  const resourceTokenStack = [];
+  const requestTokenStack = [];
+  let hasResourceOverride = false;
+  let resourceOverride;
+  let hasRequestOverride = false;
+  let requestOverride;
+  const getCurrentResource = /* @__PURE__ */ __name(() => hasResourceOverride ? resourceOverride : resource, "getCurrentResource");
+  const getCurrentRequest = /* @__PURE__ */ __name(() => hasRequestOverride ? requestOverride : request, "getCurrentRequest");
+  const dispatchResource = /* @__PURE__ */ __name((token, args) => {
+    const resourceKey = getResourceDispatchKey(args[0], args[1], args[2]);
+    const activeToken = getMatchingResourceToken(token, resourceKey);
+    const shouldWrapActions = !!activeToken && hasResourceOverride;
+    if (activeToken) {
+      activeToken.resourceKey ||= resourceKey;
+      resourceTokenStack.push({ key: resourceKey, token: activeToken });
+    }
+    try {
+      const resourceInstance = Reflect.apply(getCurrentResource(), proxy, args);
+      if (!shouldWrapActions || !activeToken) {
+        return resourceInstance;
+      }
+      return new Proxy(resourceInstance, {
+        get(target, prop, receiver) {
+          const original = Reflect.get(target, prop, receiver);
+          if (typeof prop !== "string" || typeof original !== "function" || !isMutatingResourceAction(prop)) {
+            return original;
+          }
+          const action = original;
+          return (...actionArgs) => {
+            const actionOptions = isObjectRecord(actionArgs[1]) ? actionArgs[1] : void 0;
+            const forwardedArgs = actionOptions || actionArgs[1] == null ? [
+              actionArgs[0],
+              {
+                ...actionOptions,
+                [DIRTY_DISPATCH_TOKEN]: activeToken
+              }
+            ] : actionArgs;
+            resourceTokenStack.push({ key: resourceKey, token: activeToken });
+            requestTokenStack.push({ key: activeToken.requestKey, token: activeToken });
+            try {
+              return Reflect.apply(action, receiver, forwardedArgs);
+            } finally {
+              requestTokenStack.pop();
+              resourceTokenStack.pop();
+            }
+          };
+        }
+      });
+    } finally {
+      if (activeToken) {
+        resourceTokenStack.pop();
+      }
+    }
+  }, "dispatchResource");
+  const createDispatchReceiver = /* @__PURE__ */ __name((token) => {
+    const receiver = Object.create(api);
+    Object.defineProperties(receiver, {
+      request: {
+        configurable: true,
+        value: /* @__PURE__ */ __name((config) => {
+          const options = config;
+          const requestKey = getRequestDispatchKey(options, context);
+          const stackFrame = requestTokenStack.at(-1);
+          const activeToken = getMatchingRequestToken(options == null ? void 0 : options[DIRTY_DISPATCH_TOKEN], requestKey) || (requestKey && (stackFrame == null ? void 0 : stackFrame.key) === requestKey ? stackFrame.token : void 0) || getMatchingRequestToken(token, requestKey);
+          const { [DIRTY_DISPATCH_TOKEN]: _dirtyDispatchToken, ...cleanOptions } = options;
+          const configWithToken = activeToken ? { ...cleanOptions, [DIRTY_DISPATCH_TOKEN]: activeToken } : cleanOptions;
+          if (activeToken) {
+            activeToken.requestKey ||= requestKey;
+            requestTokenStack.push({ key: requestKey, token: activeToken });
+          }
+          try {
+            return Reflect.apply(getCurrentRequest(), proxy, [configWithToken]);
+          } finally {
+            if (activeToken) {
+              requestTokenStack.pop();
+            }
+          }
+        }, "value")
+      },
+      resource: {
+        configurable: true,
+        value: /* @__PURE__ */ __name((...args) => {
+          const resourceKey = getResourceDispatchKey(args[0], args[1], args[2]);
+          const stackFrame = resourceTokenStack.at(-1);
+          const activeToken = getMatchingResourceToken(token, resourceKey) || (resourceKey && (stackFrame == null ? void 0 : stackFrame.key) === resourceKey ? stackFrame.token : void 0);
+          return dispatchResource(activeToken, args);
+        }, "value")
+      }
+    });
+    return receiver;
+  }, "createDispatchReceiver");
   const resource = /* @__PURE__ */ __name((name, of, headers, cancel) => {
-    const targetResource = api.resource(name, of, headers, cancel);
-    return createDirtyAwareResource(context, targetResource, name, of, headers);
+    const resourceKey = getResourceDispatchKey(name, of, headers);
+    const stackFrame = resourceTokenStack.at(-1);
+    const parentToken = resourceKey && (stackFrame == null ? void 0 : stackFrame.key) === resourceKey ? stackFrame.token : void 0;
+    const receiver = createDispatchReceiver(parentToken);
+    const resourceInstance = Reflect.apply(baseResource, shouldUseResourceDispatchReceiver ? receiver : api, [
+      name,
+      of,
+      headers,
+      cancel
+    ]);
+    return createDirtyAwareResource(context, resourceInstance, name, of, headers, requestTokenStack, parentToken);
   }, "resource");
   const request = /* @__PURE__ */ __name((config) => {
     const options = config;
+    const requestKey = getRequestDispatchKey(options, context);
+    const stackFrame = requestTokenStack.at(-1);
+    const inheritedToken = getMatchingRequestToken(options == null ? void 0 : options[DIRTY_DISPATCH_TOKEN], requestKey) || (requestKey && (stackFrame == null ? void 0 : stackFrame.key) === requestKey ? stackFrame.token : void 0);
+    const token = inheritedToken || { marked: false, skip: false };
+    const ownsToken = !inheritedToken;
+    token.requestKey ||= requestKey;
+    if (typeof options.resource === "string") {
+      token.resourceKey ||= getResourceDispatchKey(options.resource, options.resourceOf, options.headers);
+    }
     const skipDataSourceDirty = options == null ? void 0 : options[SKIP_DATA_SOURCE_DIRTY];
-    const dirtyResourceAction = skipDataSourceDirty ? void 0 : resolveDirtyResourceAction(options, context);
-    const { [SKIP_DATA_SOURCE_DIRTY]: _skipDataSourceDirty, ...cleanConfig } = options;
-    return api.request(cleanConfig).then((result) => {
-      if (dirtyResourceAction && isMutatingResourceAction(dirtyResourceAction.actionName)) {
-        markResourceActionDataSourceDirty(context, dirtyResourceAction, options.headers);
+    if (skipDataSourceDirty) {
+      token.skip = true;
+    }
+    const dirtyResourceAction = resolveDirtyResourceAction(options, context);
+    const {
+      [DIRTY_DISPATCH_TOKEN]: _dirtyDispatchToken,
+      [SKIP_DATA_SOURCE_DIRTY]: _skipDataSourceDirty,
+      ...cleanConfig
+    } = options;
+    const receiver = createDispatchReceiver(token);
+    return Reflect.apply(baseRequest, shouldUseRequestDispatchReceiver ? receiver : api, [cleanConfig]).then((result) => {
+      if (ownsToken) {
+        markResourceActionDataSourceDirtyOnce(token, context, dirtyResourceAction, options.headers);
       }
       return result;
     });
   }, "request");
+  const isLockedOwnProperty = /* @__PURE__ */ __name((target, prop) => {
+    const descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+    return !!descriptor && !descriptor.configurable;
+  }, "isLockedOwnProperty");
   const proxy = new Proxy(api, {
     get(target, prop, receiver) {
       if (prop === "resource") {
-        return resource;
+        if (isLockedOwnProperty(target, prop)) {
+          return Reflect.get(target, prop, receiver);
+        }
+        return hasResourceOverride ? resourceOverride : resource;
       }
       if (prop === "request") {
-        return request;
+        if (isLockedOwnProperty(target, prop)) {
+          return Reflect.get(target, prop, receiver);
+        }
+        return hasRequestOverride ? requestOverride : request;
       }
       return Reflect.get(target, prop, receiver);
+    },
+    set(target, prop, value, receiver) {
+      if (prop === "resource") {
+        const descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+        if (descriptor && (!descriptor.configurable || !Reflect.isExtensible(target))) {
+          return false;
+        }
+        hasResourceOverride = true;
+        resourceOverride = value;
+        return true;
+      }
+      if (prop === "request") {
+        const descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+        if (descriptor && (!descriptor.configurable || !Reflect.isExtensible(target))) {
+          return false;
+        }
+        hasRequestOverride = true;
+        requestOverride = value;
+        return true;
+      }
+      return Reflect.set(target, prop, value, receiver);
+    },
+    deleteProperty(target, prop) {
+      if (prop !== "resource" && prop !== "request") {
+        return Reflect.deleteProperty(target, prop);
+      }
+      const descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+      if (descriptor && (!descriptor.configurable || !Reflect.isExtensible(target))) {
+        return false;
+      }
+      if (prop === "resource") {
+        hasResourceOverride = false;
+        resourceOverride = void 0;
+      } else {
+        hasRequestOverride = false;
+        requestOverride = void 0;
+      }
+      return true;
+    },
+    defineProperty(target, prop, descriptor) {
+      if (prop === "resource" || prop === "request") {
+        return false;
+      }
+      return Reflect.defineProperty(target, prop, descriptor);
     }
   });
   dirtyAwareApiClientProxies.add(proxy);

package/lib/utils/loadedPageCache.d.ts

@@ -17,6 +17,7 @@ type DirtyKeyOptions = {
 export declare const createLoadedPageCache: () => {
     getDirtyKeyForModel(model?: FlowModel | null, options?: DirtyKeyOptions): string | undefined;
     markDirty(key?: string): void;
+    markDirtyForOptions(options?: LoadedPageOptions): void;
     shouldBypass(options?: LoadedPageOptions, isFlowSettingsEnabled?: () => boolean): boolean;
     clear(options?: LoadedPageOptions): void;
     mountModelToParent: <T extends FlowModel<import("..").DefaultStructure> = FlowModel<import("..").DefaultStructure>>(model: T, forceReplace?: boolean) => T;

package/lib/utils/loadedPageCache.js

@@ -113,6 +113,12 @@ const createLoadedPageCache = /* @__PURE__ */ __name(() => {
         dirtyKeys.add(key);
       }
     },
+    markDirtyForOptions(options) {
+      const key = getLoadedPageKey(options);
+      if (key) {
+        dirtyKeys.add(key);
+      }
+    },
     shouldBypass(options, isFlowSettingsEnabled) {
       const key = getLoadedPageKey(options);
       if (!key || !dirtyKeys.has(key)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.2.0-alpha.6",
+  "version": "2.2.0-alpha.8",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.2.0-alpha.6",
-    "@nocobase/shared": "2.2.0-alpha.6",
+    "@nocobase/sdk": "2.2.0-alpha.8",
+    "@nocobase/shared": "2.2.0-alpha.8",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "f55b252811f6af01d08cd3814171867b70c8ef7a"
+  "gitHead": "810c81e5963966bda7ec03b6453a3a80fe60e027"
 }

package/src/__tests__/viewScopedFlowEngine.test.ts

@@ -340,9 +340,9 @@ describe('ViewScopedFlowEngine', () => {
     const repository = new DirtyPageRepository();
     root.setModelRepository(repository);
 
-    class ParentModel extends FlowModel {}
-    class PageModel extends FlowModel {}
     class BlockModel extends FlowModel {}
+    class PageModel extends FlowModel<{ parent?: FlowModel; subModels: { items: BlockModel[] } }> {}
+    class ParentModel extends FlowModel<{ parent?: FlowModel; subModels: { page?: PageModel } }> {}
     root.registerModels({ ParentModel, PageModel, BlockModel });
 
     const parent = root.createModel<ParentModel>({ use: 'ParentModel', uid: 'popup-action' });
@@ -357,7 +357,10 @@ describe('ViewScopedFlowEngine', () => {
         items: [{ use: 'BlockModel', uid: 'stale-block' }],
       },
     });
-    const staleBlock = stalePage.findSubModel('items' as any, (item) => item.uid === 'stale-block') as FlowModel;
+    const staleBlock = stalePage.findSubModel('items', (item) => item.uid === 'stale-block');
+    if (!staleBlock) {
+      throw new Error('Expected stale block to be loaded');
+    }
     parent.setSubModel('page', stalePage);
     oldScoped.unlinkFromStack();
 
@@ -372,7 +375,7 @@ describe('ViewScopedFlowEngine', () => {
       },
     };
 
-    root.flowSettings.enable();
+    await root.flowSettings.enable();
     await staleBlock.saveStepParams();
     root.flowSettings.disable();
     repository.findOneCalls = 0;
@@ -388,8 +391,8 @@ describe('ViewScopedFlowEngine', () => {
 
     expect(repository.findOneCalls).toBe(1);
     expect(loaded).not.toBe(stalePage);
-    expect((parent.subModels as any).page).toBe(loaded);
-    expect(loaded?.mapSubModels('items' as any, (item) => item.uid)).toEqual(['fresh-block']);
+    expect(parent.subModels.page).toBe(loaded);
+    expect(loaded?.mapSubModels('items', (item) => item.uid)).toEqual(['fresh-block']);
 
     repository.findOneCalls = 0;
     const nextRuntimeScoped = createViewScopedEngine(root);
@@ -405,6 +408,69 @@ describe('ViewScopedFlowEngine', () => {
     expect(loadedAgain?.uid).toBe('popup-page');
   });
 
+  it('reloads a page after it was loaded in flow settings mode', async () => {
+    const root = new FlowEngine();
+    const repository = new DirtyPageRepository();
+    root.setModelRepository(repository);
+
+    class ParentModel extends FlowModel {}
+    class PageModel extends FlowModel {}
+    class BlockModel extends FlowModel {}
+    root.registerModels({ ParentModel, PageModel, BlockModel });
+
+    const parent = root.createModel<ParentModel>({ use: 'ParentModel', uid: 'settings-popup-action' });
+    repository.data = {
+      use: 'PageModel',
+      uid: 'settings-popup-page',
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      subModels: {
+        items: [{ use: 'BlockModel', uid: 'stale-settings-block' }],
+      },
+    };
+
+    await root.flowSettings.enable();
+    const designScoped = createViewScopedEngine(root);
+    const designLoaded = await designScoped.loadOrCreateModel<PageModel>({
+      async: true,
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      use: 'PageModel',
+    });
+    expect(repository.findOneCalls).toBe(1);
+    expect(designLoaded?.mapSubModels('items', (item) => item.uid)).toEqual(['stale-settings-block']);
+    designScoped.unlinkFromStack();
+
+    repository.data = {
+      use: 'PageModel',
+      uid: 'settings-popup-page',
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      subModels: {
+        items: [{ use: 'BlockModel', uid: 'fresh-settings-block' }],
+      },
+    };
+    root.flowSettings.disable();
+    repository.findOneCalls = 0;
+
+    const runtimeScoped = createViewScopedEngine(root);
+    const runtimeLoaded = await runtimeScoped.loadOrCreateModel<PageModel>({
+      async: true,
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      use: 'PageModel',
+    });
+
+    expect(repository.findOneCalls).toBe(1);
+    expect(runtimeLoaded).not.toBe(designLoaded);
+    expect(parent.subModels.page).toBe(runtimeLoaded);
+    expect(runtimeLoaded?.mapSubModels('items', (item) => item.uid)).toEqual(['fresh-settings-block']);
+  });
+
   it('does not bypass loaded page cache after a non-config save', async () => {
     const root = new FlowEngine();
     const repository = new DirtyPageRepository();

package/src/components/FlowContextSelector.tsx

@@ -292,11 +292,11 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   const defaultChildren = useMemo(() => {
     const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
     return (
-      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle}>
+      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle} disabled={cascaderProps.disabled}>
         x
       </Button>
     );
-  }, [active, currentPath]);
+  }, [active, cascaderProps.disabled, currentPath]);
 
   // 处理选择变化事件
   const handleChange = useCallback(

package/src/components/FormItem.tsx

@@ -54,15 +54,20 @@ const formItemPropKeys: (keyof ExtendedFormItemProps)[] = [
   'showLabel',
 ];
 
+const modelInternalPropKeys = ['globalSort'];
+
 export const FormItem = ({
   children,
   showLabel = true,
   labelWidth,
   ...rest
 }: ExtendedFormItemProps & ChildExtraProps) => {
+  const forwardedRest = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !modelInternalPropKeys.includes(key)),
+  ) as ExtendedFormItemProps & ChildExtraProps;
   // 过滤掉 Form.Item 专用 props，只保留要传给子组件的
   const childProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
+    Object.entries(forwardedRest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
   );
 
   const processedChildren =
@@ -74,7 +79,7 @@ export const FormItem = ({
           }
           return child;
         });
-  const { label, labelWrap, colon = true, layout } = rest;
+  const { label, labelWrap, colon = true, layout } = forwardedRest;
   const effectiveLabelWrap = !layout || layout === 'vertical' ? true : labelWrap;
   const labelColStyle =
     layout === 'vertical' ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
@@ -122,17 +127,17 @@ export const FormItem = ({
   };
   return (
     <Form.Item
-      {...rest}
-      style={{ ...formItemStyle, ...rest.style }}
+      {...forwardedRest}
+      style={{ ...formItemStyle, ...forwardedRest.style }}
       labelCol={{ style: labelColStyle }}
       layout={layout}
       label={renderLabel()}
       colon={false}
-      extra={rest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{rest.extra}</span>}
+      extra={forwardedRest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{forwardedRest.extra}</span>}
       tooltip={
-        rest.tooltip &&
+        forwardedRest.tooltip &&
         ({
-          title: rest.tooltip,
+          title: forwardedRest.tooltip,
           overlayInnerStyle: { whiteSpace: 'pre-line' },
         } as TooltipProps)
       }

package/src/components/MobilePopup.style.ts

@@ -160,7 +160,7 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
         borderBottom: `1px solid ${token.colorSplit}`,
         position: 'sticky',
         top: 0,
-        backgroundColor: 'white',
+        backgroundColor: token.colorBgContainer,
         zIndex: 1000,
 
         // to match the button named 'Add block'
@@ -172,12 +172,23 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-placeholder': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         visibility: 'hidden',
       },
 
+      '.nb-mobile-action-drawer-title': {
+        flex: '1 1 auto',
+        minWidth: 0,
+        overflow: 'hidden',
+        textAlign: 'center',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+
       '.nb-mobile-action-drawer-close-icon': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         cursor: 'pointer',
       },
 

package/src/components/MobilePopup.tsx

@@ -8,7 +8,7 @@
  */
 
 import { ConfigProvider } from 'antd';
-import React, { FC, ReactNode, useMemo } from 'react';
+import React, { FC, ReactNode, useCallback, useMemo } from 'react';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
 import { lazy } from '../lazy-helper';
@@ -31,11 +31,33 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
-  const style = useMemo(() => {
+  const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const popupStyle = useMemo(() => {
     return {
-      minHeight,
+      minHeight: bodyStyles?.minHeight ?? minHeight,
+      height: bodyStyles?.height,
+      maxHeight: bodyStyles?.maxHeight,
     };
-  }, [minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, minHeight]);
+
+  const bodyStyle = useMemo(() => {
+    return {
+      padding: 0,
+      ...bodyStyles,
+    };
+  }, [bodyStyles]);
+
+  const handleCloseKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup],
+  );
 
   const theme = useMemo(() => {
     return {
@@ -57,11 +79,8 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
         onClose={closePopup}
         onMaskClick={closePopup}
         bodyClassName="nb-mobile-action-drawer-body"
-        bodyStyle={{
-          padding: 0,
-        }}
-        maskStyle={style}
-        style={style}
+        bodyStyle={bodyStyle}
+        style={popupStyle}
         destroyOnClose
       >
         <div className="nb-mobile-action-drawer-header">
@@ -69,13 +88,14 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
           <span className="nb-mobile-action-drawer-placeholder">
             <CloseOutline />
           </span>
-          <span>{title}</span>
+          <span className="nb-mobile-action-drawer-title">{title}</span>
           <span
             className="nb-mobile-action-drawer-close-icon"
             onClick={closePopup}
             role="button"
             tabIndex={0}
             aria-label={t('Close')}
+            onKeyDown={handleCloseKeyDown}
           >
             <CloseOutline />
           </span>