@nocobase/flow-engine 2.1.25 → 2.1.27

package/lib/components/MobilePopup.js

@@ -47,25 +47,36 @@ var import_react_i18next = require("react-i18next");
 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 getMobilePopupMaxHeight = /* @__PURE__ */ __name(() => {
+  var _a;
+  if (typeof CSS !== "undefined" && ((_a = CSS.supports) == null ? void 0 : _a.call(CSS, "height", "100dvh"))) {
+    return "calc(100dvh - var(--nb-mobile-page-header-height, 46px))";
+  }
+  return "calc(100vh - var(--nb-mobile-page-header-height, 46px))";
+}, "getMobilePopupMaxHeight");
 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 bodyStyles = (_a = props.styles) == null ? void 0 : _a.body;
+  const defaultMaxHeight = getMobilePopupMaxHeight();
   const popupStyle = (0, import_react.useMemo)(() => {
     return {
       minHeight: (bodyStyles == null ? void 0 : bodyStyles.minHeight) ?? minHeight,
       height: bodyStyles == null ? void 0 : bodyStyles.height,
-      maxHeight: bodyStyles == null ? void 0 : bodyStyles.maxHeight
+      maxHeight: (bodyStyles == null ? void 0 : bodyStyles.maxHeight) ?? defaultMaxHeight
     };
-  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, minHeight]);
+  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, defaultMaxHeight, minHeight]);
   const bodyStyle = (0, import_react.useMemo)(() => {
     return {
       padding: 0,
+      maxHeight: defaultMaxHeight,
+      overflowY: "auto",
+      overflowX: "hidden",
       ...bodyStyles
     };
-  }, [bodyStyles]);
+  }, [bodyStyles, defaultMaxHeight]);
   const handleCloseKeyDown = (0, import_react.useCallback)(
     (event) => {
       if (event.key !== "Enter" && event.key !== " ") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.25",
+  "version": "2.1.27",
   "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.25",
-    "@nocobase/shared": "2.1.25",
+    "@nocobase/sdk": "2.1.27",
+    "@nocobase/shared": "2.1.27",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "f3326a2681004deee97b563fb6ab04744e26ac71"
+  "gitHead": "c1311c48cf65f8eeac17411d3380ebdd0918f1e2"
 }

package/src/components/MobilePopup.tsx

@@ -26,26 +26,38 @@ interface MobilePopupProps {
   footer?: ReactNode;
 }
 
+const getMobilePopupMaxHeight = () => {
+  if (typeof CSS !== 'undefined' && CSS.supports?.('height', '100dvh')) {
+    return 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+  }
+
+  return 'calc(100vh - var(--nb-mobile-page-header-height, 46px))';
+};
+
 export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
   const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const defaultMaxHeight = getMobilePopupMaxHeight();
   const popupStyle = useMemo(() => {
     return {
       minHeight: bodyStyles?.minHeight ?? minHeight,
       height: bodyStyles?.height,
-      maxHeight: bodyStyles?.maxHeight,
+      maxHeight: bodyStyles?.maxHeight ?? defaultMaxHeight,
     };
-  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, defaultMaxHeight, minHeight]);
 
-  const bodyStyle = useMemo(() => {
+  const bodyStyle = useMemo<React.CSSProperties>(() => {
     return {
       padding: 0,
+      maxHeight: defaultMaxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
       ...bodyStyles,
     };
-  }, [bodyStyles]);
+  }, [bodyStyles, defaultMaxHeight]);
 
   const handleCloseKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLSpanElement>) => {

package/src/components/__tests__/MobilePopup.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { MobilePopup } from '../MobilePopup';
 
 vi.mock('react-i18next', () => ({
@@ -61,6 +61,47 @@ describe('MobilePopup', () => {
     React.ComponentProps<typeof MobilePopup> & { styles?: { body?: React.CSSProperties } }
   >;
 
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('constrains the default popup to the dynamic viewport and keeps the body scrollable', () => {
+    vi.stubGlobal('CSS', {
+      supports: vi.fn((property: string, value: string) => property === 'height' && value === '100dvh'),
+    });
+
+    render(
+      <MobilePopup visible title="Title" onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    const maxHeight = 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+
+    expect(screen.getByTestId('mobile-popup')).toHaveStyle({ maxHeight });
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+    });
+  });
+
+  it('falls back to the layout viewport when dynamic viewport units are unavailable', () => {
+    vi.stubGlobal('CSS', {
+      supports: vi.fn(() => false),
+    });
+
+    render(
+      <MobilePopup visible title="Title" onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+    });
+  });
+
   it('applies drawer body styles as max bounds without forcing fixed half-window height', () => {
     render(
       <MobilePopupWithDrawerStyles visible title="Title" styles={{ body: { maxHeight: '50vh' } }} onClose={vi.fn()}>