@nocobase/flow-engine 2.2.0-alpha.2 → 2.2.0-alpha.3

package/lib/components/FlowContextSelector.js

@@ -90,6 +90,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   value,
   onChange,
   children,
+  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = import_utils.parseValueToPath,
@@ -220,9 +221,9 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
     (0, import_utils.preloadContextSelectorPath)(options, pathToPreload, triggerUpdate);
   }, [options, pathToPreload, triggerUpdate]);
   const defaultChildren = (0, import_react.useMemo)(() => {
-    const hasSelected = currentPath && currentPath.length > 0;
+    const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
     return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: hasSelected ? "primary" : "default", style: defaultButtonStyle }, "x");
-  }, [currentPath]);
+  }, [active, currentPath]);
   const handleChange = (0, import_react.useCallback)(
     (selectedValues, selectedOptions) => {
       const lastOption = selectedOptions == null ? void 0 : selectedOptions[selectedOptions.length - 1];

package/lib/components/MobilePopup.style.js

@@ -96,9 +96,17 @@ const genStyleHook = /* @__PURE__ */ __name((component, styleFn) => {
         return [genCommonStyle(token, prefixCls), styleInterpolation];
       }
     );
-    const memoizedWrapSSR = (0, import_react.useMemo)(() => {
-      return wrapSSR;
-    }, [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    const wrapSSRDeps = [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props];
+    const wrapSSRCacheRef = (0, import_react.useRef)();
+    const currentCache = wrapSSRCacheRef.current;
+    let memoizedWrapSSR = (currentCache == null ? void 0 : currentCache.wrapSSR) || wrapSSR;
+    if (!currentCache || wrapSSRDeps.some((dep, index) => dep !== currentCache.deps[index])) {
+      wrapSSRCacheRef.current = {
+        deps: wrapSSRDeps,
+        wrapSSR
+      };
+      memoizedWrapSSR = wrapSSR;
+    }
     return {
       wrapSSR: memoizedWrapSSR,
       hashId,
@@ -112,7 +120,7 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
   return {
     [componentCls]: {
       ".nb-mobile-action-drawer-header": {
-        height: "var(--nb-mobile-page-header-height)",
+        height: "var(--nb-mobile-page-header-height, 46px)",
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
@@ -139,7 +147,10 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
       ".nb-mobile-action-drawer-body": {
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
-        maxHeight: "calc(100% - var(--nb-mobile-page-header-height))",
+        maxHeight: "calc(100vh - var(--nb-mobile-page-header-height, 46px))",
+        "@supports (height: 100dvh)": {
+          maxHeight: "calc(100dvh - var(--nb-mobile-page-header-height, 46px))"
+        },
         overflowY: "auto",
         overflowX: "hidden",
         backgroundColor: token.colorBgLayout,

package/lib/components/variables/VariableInput.js

@@ -188,7 +188,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
       }
     }, "restoreFromValue");
     restoreFromValue();
-  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode]);
+  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode, value]);
   const ValueComponent = (0, import_react.useMemo)(() => {
     const Component = renderInputComponent == null ? void 0 : renderInputComponent(resolvedMetaTreeNode);
     const CustomComponent = resolvedMetaTreeNode == null ? void 0 : resolvedMetaTreeNode.render;
@@ -325,6 +325,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
     {
       metaTree: resolvedMetaTree,
       value: innerValue,
+      active: (0, import_utils.isVariableValue)(innerValue),
       onChange: handleVariableSelect,
       parseValueToPath: resolvePathFromValue,
       formatPathToValue: resolveValueFromPath,

package/lib/components/variables/types.d.ts

@@ -13,6 +13,16 @@ export interface FlowContextSelectorProps extends Omit<CascaderProps<ContextSele
     value?: string;
     onChange?: (value: string, metaTreeNode?: MetaTreeNode) => void;
     children?: CascaderProps<ContextSelectorItem>['children'];
+    /**
+     * Controls whether the default `x` trigger button is rendered as active
+     * (`type="primary"`). When omitted, the selector falls back to its parsed
+     * `value` path (`true` iff a valid variable path is currently selected).
+     *
+     * Use this when callers intentionally feed synthetic paths such as
+     * `['constant']` / `['null']` into the cascader to keep menu state aligned,
+     * but only want real variable references to show the blue active button.
+     */
+    active?: boolean;
     metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
     parseValueToPath?: (value: string) => string[] | undefined;
     formatPathToValue?: (item: MetaTreeNode) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.2.0-alpha.2",
+  "version": "2.2.0-alpha.3",
   "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.2",
-    "@nocobase/shared": "2.2.0-alpha.2",
+    "@nocobase/sdk": "2.2.0-alpha.3",
+    "@nocobase/shared": "2.2.0-alpha.3",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "9dd5224bb8f6c1ac12d766b9f175bdc29bddd845"
+  "gitHead": "e3ec19361fd7981af9fe2a7f24ad335025cbefcd"
 }

package/src/components/FlowContextSelector.tsx

@@ -85,6 +85,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   value,
   onChange,
   children,
+  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = parseValueToPath,
@@ -266,13 +267,13 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
   // 默认按钮组件
   const defaultChildren = useMemo(() => {
-    const hasSelected = currentPath && currentPath.length > 0;
+    const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
     return (
       <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle}>
         x
       </Button>
     );
-  }, [currentPath]);
+  }, [active, currentPath]);
 
   // 处理选择变化事件
   const handleChange = useCallback(

package/src/components/MobilePopup.style.ts

@@ -11,7 +11,7 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { merge } from '@formily/shared';
 import type { ComponentTokenMap } from 'antd/es/theme/interface';
-import { useMemo, useContext } from 'react';
+import { useContext, useRef } from 'react';
 import { ConfigProvider, theme } from 'antd';
 
 const usePrefixCls = (
@@ -83,6 +83,10 @@ type UseComponentStyleResult = {
   componentCls: string;
   rootPrefixCls: string;
 };
+type WrapSSRCache = {
+  deps: unknown[];
+  wrapSSR: ReturnType<typeof useStyleRegister>;
+};
 
 const genStyleHook = <ComponentName extends OverrideComponent>(
   component: ComponentName,
@@ -122,9 +126,18 @@ const genStyleHook = <ComponentName extends OverrideComponent>(
 
     // useStyleRegister 有 BUG，会导致重复渲染，所以这里做了一层缓存
     // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
-    const memoizedWrapSSR = useMemo(() => {
-      return wrapSSR;
-    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    const wrapSSRDeps = [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props];
+    const wrapSSRCacheRef = useRef<WrapSSRCache>();
+    const currentCache = wrapSSRCacheRef.current;
+    let memoizedWrapSSR: ReturnType<typeof useStyleRegister> = currentCache?.wrapSSR || wrapSSR;
+
+    if (!currentCache || wrapSSRDeps.some((dep, index) => dep !== currentCache.deps[index])) {
+      wrapSSRCacheRef.current = {
+        deps: wrapSSRDeps,
+        wrapSSR,
+      };
+      memoizedWrapSSR = wrapSSR;
+    }
 
     return {
       wrapSSR: memoizedWrapSSR,
@@ -140,7 +153,7 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
   return {
     [componentCls]: {
       '.nb-mobile-action-drawer-header': {
-        height: 'var(--nb-mobile-page-header-height)',
+        height: 'var(--nb-mobile-page-header-height, 46px)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -171,7 +184,10 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-body': {
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
-        maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+        maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+        '@supports (height: 100dvh)': {
+          maxHeight: 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))',
+        },
         overflowY: 'auto',
         overflowX: 'hidden',
         backgroundColor: token.colorBgLayout,

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

@@ -0,0 +1,103 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { CSSProperties, ReactNode } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import { vi } from 'vitest';
+import { MobilePopup } from '../MobilePopup';
+import { useMobileActionDrawerStyle } from '../MobilePopup.style';
+
+vi.mock('antd-mobile', () => ({
+  Popup: ({
+    bodyClassName,
+    bodyStyle,
+    children,
+    className,
+    visible,
+  }: {
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    children?: ReactNode;
+    className?: string;
+    visible?: boolean;
+  }) =>
+    visible ? (
+      <div className={className} data-testid="popup-root">
+        <div className={`adm-popup-body ${bodyClassName || ''}`} data-testid="popup-body" style={bodyStyle}>
+          {children}
+        </div>
+      </div>
+    ) : null,
+}));
+
+vi.mock('antd-mobile-icons', () => ({
+  CloseOutline: () => <span data-testid="close-outline" />,
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+function StyleProbe() {
+  const { componentCls, hashId } = useMobileActionDrawerStyle();
+
+  return (
+    <div className={`${componentCls} ${hashId}`}>
+      <div className="nb-mobile-action-drawer-header" data-testid="drawer-header" />
+      <div className="nb-mobile-action-drawer-body" data-testid="drawer-body" />
+    </div>
+  );
+}
+
+function getInjectedStyles() {
+  return Array.from(document.querySelectorAll('style'))
+    .map((style) => style.textContent || '')
+    .join('\n')
+    .replace(/\s+/g, '');
+}
+
+describe('MobilePopup styles', () => {
+  it('mounts the action drawer class on the real popup body', async () => {
+    render(
+      <MobilePopup visible title="Edit" onClose={vi.fn()}>
+        <div style={{ height: 1200 }}>Long content</div>
+      </MobilePopup>,
+    );
+
+    const popupBody = await screen.findByTestId('popup-body');
+
+    expect(screen.getByTestId('popup-root')).toHaveClass('ant-nb-mobile-action-drawer');
+    expect(popupBody).toHaveClass('adm-popup-body');
+    expect(popupBody).toHaveClass('nb-mobile-action-drawer-body');
+    expect(popupBody).toHaveStyle({ padding: '0px' });
+  });
+
+  it('limits the mobile action drawer body by viewport height', async () => {
+    render(
+      <ConfigProvider>
+        <StyleProbe />
+      </ConfigProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getInjectedStyles()).toContain('.nb-mobile-action-drawer-body');
+    });
+
+    const styles = getInjectedStyles();
+
+    expect(styles).toContain('height:var(--nb-mobile-page-header-height,46px)');
+    expect(styles).toContain('max-height:calc(100vh-var(--nb-mobile-page-header-height,46px))');
+    expect(styles).toContain('max-height:calc(100dvh-var(--nb-mobile-page-header-height,46px))');
+    expect(styles).toContain('overflow-y:auto');
+    expect(styles).not.toContain('max-height:calc(100%-var(--nb-mobile-page-header-height))');
+  });
+});

package/src/components/variables/VariableInput.tsx

@@ -192,7 +192,7 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
     };
 
     restoreFromValue();
-  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode]);
+  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode, value]);
 
   const ValueComponent = useMemo(() => {
     const Component = renderInputComponent?.(resolvedMetaTreeNode);
@@ -356,6 +356,7 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
       <FlowContextSelector
         metaTree={resolvedMetaTree}
         value={innerValue}
+        active={isVariableValue(innerValue)}
         onChange={handleVariableSelect}
         parseValueToPath={resolvePathFromValue}
         formatPathToValue={resolveValueFromPath}

package/src/components/variables/__tests__/FlowContextSelector.test.tsx

@@ -67,6 +67,23 @@ describe('FlowContextSelector', () => {
     });
   });
 
+  it('uses explicit active=false to keep the default trigger unhighlighted even when value parses to a path', async () => {
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector
+          metaTree={() => flowContext.getPropertyMetaTree()}
+          value="{{ ctx.user.name }}"
+          active={false}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    const button = await screen.findByRole('button');
+    expect(button.className).not.toContain('ant-btn-primary');
+  });
+
   it('should support function metaTree loading', async () => {
     const flowContext = createTestFlowContext();
     const metaTreeFn = vi.fn(() => flowContext.getPropertyMetaTree());
@@ -405,10 +422,13 @@ describe('FlowContextSelector', () => {
 
     const clearIcon = document.querySelector('.ant-input-clear-icon') as HTMLElement | null;
     expect(clearIcon).toBeInTheDocument();
+    if (!clearIcon) {
+      throw new Error('Expected inline clear icon to be present');
+    }
 
-    fireEvent.mouseDown(clearIcon!);
-    fireEvent.mouseUp(clearIcon!);
-    fireEvent.click(clearIcon!);
+    fireEvent.mouseDown(clearIcon);
+    fireEvent.mouseUp(clearIcon);
+    fireEvent.click(clearIcon);
 
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith('', undefined);

package/src/components/variables/__tests__/VariableInput.test.tsx

@@ -8,6 +8,7 @@
  */
 
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Input } from 'antd';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import type { ContextSelectorItem } from '../types';
@@ -112,6 +113,50 @@ describe('VariableInput', () => {
     expect(selectorButton).toBeInTheDocument();
   });
 
+  it('should not highlight the selector button for synthetic constant/null paths', async () => {
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput
+          value=""
+          metaTree={[
+            { name: 'constant', title: 'Constant', type: 'string', paths: ['constant'] },
+            { name: 'null', title: 'Null', type: 'object', paths: ['null'] },
+            ...flowContext.getPropertyMetaTree(),
+          ]}
+          converters={{
+            renderInputComponent: (meta) => {
+              const first = meta?.paths?.[0];
+              if (first === 'constant') {
+                return (props: any) => <input aria-label="constant-value" {...props} />;
+              }
+              if (first === 'null') {
+                return () => <Input placeholder="<Null>" readOnly />;
+              }
+              return null;
+            },
+            resolveValueFromPath: (meta) => {
+              const first = meta?.paths?.[0];
+              if (first === 'constant') return '';
+              if (first === 'null') return null;
+              return undefined;
+            },
+            resolvePathFromValue: (currentValue) => {
+              if (currentValue === null) return ['null'];
+              const trimmed = typeof currentValue === 'string' ? currentValue.trim() : currentValue;
+              if (trimmed === '') return ['constant'];
+              return undefined;
+            },
+          }}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    const selectorButton = await screen.findByRole('button');
+    expect(selectorButton.className).not.toContain('ant-btn-primary');
+  });
+
   it('should handle onChange from Input', async () => {
     const onChange = vi.fn();
     const flowContext = createTestFlowContext();
@@ -195,20 +240,21 @@ describe('VariableInput', () => {
 
     const selectElement = container.querySelector('.ant-select');
     expect(selectElement).toBeInTheDocument();
+    if (!selectElement) {
+      throw new Error('Expected variable tag select wrapper to be present');
+    }
 
     // 触发鼠标悬停以显示清除按钮
-    fireEvent.mouseEnter(selectElement!);
+    fireEvent.mouseEnter(selectElement);
 
     // 尝试触发清除功能
     // 方法1: 直接触发 Select 组件的 onClear 事件
-    const selectInstance = selectElement as any;
-
     // 尝试通过键盘事件触发清除
-    fireEvent.keyDown(selectElement!, { key: 'Backspace', code: 'Backspace' });
+    fireEvent.keyDown(selectElement, { key: 'Backspace', code: 'Backspace' });
 
     // 或者尝试触发自定义的清除逻辑
     const clearEvents = new CustomEvent('clear');
-    selectElement!.dispatchEvent(clearEvents);
+    selectElement.dispatchEvent(clearEvents);
 
     // 检查是否调用了清除功能（可能需要调整期望）
     // 如果清除按钮不能直接测试，我们验证组件支持清除功能

package/src/components/variables/types.ts

@@ -16,6 +16,16 @@ export interface FlowContextSelectorProps
   value?: string;
   onChange?: (value: string, metaTreeNode?: MetaTreeNode) => void;
   children?: CascaderProps<ContextSelectorItem>['children'];
+  /**
+   * Controls whether the default `x` trigger button is rendered as active
+   * (`type="primary"`). When omitted, the selector falls back to its parsed
+   * `value` path (`true` iff a valid variable path is currently selected).
+   *
+   * Use this when callers intentionally feed synthetic paths such as
+   * `['constant']` / `['null']` into the cascader to keep menu state aligned,
+   * but only want real variable references to show the blue active button.
+   */
+  active?: boolean;
   metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
   parseValueToPath?: (value: string) => string[] | undefined;
   formatPathToValue?: (item: MetaTreeNode) => string;