@nocobase/flow-engine 2.1.21 → 2.1.23

package/lib/components/MobilePopup.js

@@ -48,14 +48,34 @@ var import_lazy_helper = require("../lazy-helper");
 const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
 const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
+  var _a;
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
   const { componentCls, hashId } = (0, import_MobilePopup.useMobileActionDrawerStyle)();
-  const style = (0, import_react.useMemo)(() => {
+  const bodyStyles = (_a = props.styles) == null ? void 0 : _a.body;
+  const popupStyle = (0, import_react.useMemo)(() => {
     return {
-      minHeight
+      minHeight: (bodyStyles == null ? void 0 : bodyStyles.minHeight) ?? minHeight,
+      height: bodyStyles == null ? void 0 : bodyStyles.height,
+      maxHeight: bodyStyles == null ? void 0 : bodyStyles.maxHeight
     };
-  }, [minHeight]);
+  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, minHeight]);
+  const bodyStyle = (0, import_react.useMemo)(() => {
+    return {
+      padding: 0,
+      ...bodyStyles
+    };
+  }, [bodyStyles]);
+  const handleCloseKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup]
+  );
   const theme = (0, import_react.useMemo)(() => {
     return {
       token: {
@@ -75,21 +95,19 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
       onClose: closePopup,
       onMaskClick: closePopup,
       bodyClassName: "nb-mobile-action-drawer-body",
-      bodyStyle: {
-        padding: 0
-      },
-      maskStyle: style,
-      style,
+      bodyStyle,
+      style: popupStyle,
       destroyOnClose: true
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-title" }, title), /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: "nb-mobile-action-drawer-close-icon",
         onClick: closePopup,
         role: "button",
         tabIndex: 0,
-        "aria-label": t("Close")
+        "aria-label": t("Close"),
+        onKeyDown: handleCloseKeyDown
       },
       /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)
     )),

package/lib/components/MobilePopup.style.js

@@ -98,7 +98,7 @@ const genStyleHook = /* @__PURE__ */ __name((component, styleFn) => {
     );
     const memoizedWrapSSR = (0, import_react.useMemo)(() => {
       return wrapSSR;
-    }, [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    }, [wrapSSR]);
     return {
       wrapSSR: memoizedWrapSSR,
       hashId,
@@ -119,7 +119,7 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
         borderBottom: `1px solid ${token.colorSplit}`,
         position: "sticky",
         top: 0,
-        backgroundColor: "white",
+        backgroundColor: token.colorBgContainer,
         zIndex: 1e3,
         // to match the button named 'Add block'
         "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
@@ -129,11 +129,21 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
       ".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"
       },
       ".nb-mobile-action-drawer-body": {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.21",
+  "version": "2.1.23",
   "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.1.21",
-    "@nocobase/shared": "2.1.21",
+    "@nocobase/sdk": "2.1.23",
+    "@nocobase/shared": "2.1.23",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "491141417d8338022651c9e99afbd2d84c1e2b0b"
+  "gitHead": "ae4b0097a6c5e4a1347431a5fde24676032ce0ce"
 }

package/src/components/MobilePopup.style.ts

@@ -124,7 +124,7 @@ const genStyleHook = <ComponentName extends OverrideComponent>(
     // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
     const memoizedWrapSSR = useMemo(() => {
       return wrapSSR;
-    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    }, [wrapSSR]);
 
     return {
       wrapSSR: memoizedWrapSSR,
@@ -147,7 +147,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'
@@ -159,12 +159,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>