@nocobase/flow-engine 2.0.0-alpha.7 → 2.0.0-alpha.71

package/lib/components/FlowContextSelector.js

@@ -43,6 +43,7 @@ module.exports = __toCommonJS(FlowContextSelector_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_icons = require("@ant-design/icons");
+var import_css = require("@emotion/css");
 var import_utils = require("./variables/utils");
 var import_useResolvedMetaTree = require("./variables/useResolvedMetaTree");
 var import_FlowContextProvider = require("../FlowContextProvider");
@@ -50,6 +51,12 @@ const defaultButtonStyle = {
   fontStyle: "italic",
   fontFamily: "New York, Times New Roman, Times, serif"
 };
+const cascaderPopupAutoHeightClassName = import_css.css`
+  .ant-cascader-menu {
+    height: fit-content;
+    max-height: 50vh;
+  }
+`;
 const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   value,
   onChange,
@@ -60,6 +67,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   formatPathToValue: customFormatPathToValue,
   open,
   onlyLeafSelectable = false,
+  ignoreFieldNames,
   ...cascaderProps
 }) => {
   const lastSelectedRef = (0, import_react.useRef)(null);
@@ -98,8 +106,12 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   const options = (0, import_react.useMemo)(() => {
     if (!resolvedMetaTree) return [];
     const base = (0, import_utils.buildContextSelectorItems)(resolvedMetaTree);
-    return translateOptions(base);
-  }, [resolvedMetaTree, updateFlag, translateOptions]);
+    return translateOptions(base).filter((item) => {
+      var _a;
+      if (!ignoreFieldNames || ignoreFieldNames.length === 0) return true;
+      return !ignoreFieldNames.includes(((_a = item.meta) == null ? void 0 : _a.name) || "");
+    });
+  }, [resolvedMetaTree, updateFlag, translateOptions, ignoreFieldNames]);
   const [tempSelectedPath, setTempSelectedPath] = (0, import_react.useState)([]);
   const handleLoadData = (0, import_react.useCallback)(
     async (selectedOptions) => {
@@ -197,6 +209,9 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
     },
     [onChange, customFormatPathToValue, onlyLeafSelectable]
   );
+  const mergedPopupClassName = (0, import_react.useMemo)(() => {
+    return (0, import_css.cx)(cascaderPopupAutoHeightClassName, cascaderProps.popupClassName);
+  }, [cascaderProps.popupClassName]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Cascader,
     {
@@ -209,7 +224,8 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
       changeOnSelect: !onlyLeafSelectable,
       expandTrigger: "click",
       open,
-      showSearch: children === null
+      showSearch: children === null,
+      popupClassName: mergedPopupClassName
     },
     children === null ? null : children || defaultChildren
   );

package/lib/components/FlowModelRenderer.d.ts

@@ -24,7 +24,7 @@ export interface FlowModelRendererProps {
         /**
          * @default 'inside'
          */
-        toolbarPosition?: 'inside' | 'above';
+        toolbarPosition?: 'inside' | 'above' | 'below';
     };
     /** 流程设置的交互风格 */
     flowSettingsVariant?: 'dropdown' | 'contextMenu' | 'modal' | 'drawer';
@@ -32,9 +32,7 @@ export interface FlowModelRendererProps {
     hideRemoveInSettings?: boolean;
     /** 是否在边框左上角显示模型title，默认 false */
     showTitle?: boolean;
-    /** 是否跳过自动应用流程，默认 false */
-    skipApplyAutoFlows?: boolean;
-    /** 当 skipApplyAutoFlows !== false 时，传递给 useApplyAutoFlows 的额外上下文 */
+    /** 传递给 beforeRender 事件的运行时参数 */
     inputArgs?: Record<string, any>;
     /** 是否在最外层包装 FlowErrorFallback 组件，默认 false */
     showErrorFallback?: boolean;
@@ -42,6 +40,7 @@ export interface FlowModelRendererProps {
     settingsMenuLevel?: number;
     /** 额外的工具栏项目，仅应用于此实例 */
     extraToolbarItems?: ToolbarItemConfig[];
+    useCache?: boolean;
 }
 /**
  * A React component responsible for rendering a FlowModel.
@@ -54,8 +53,7 @@ export interface FlowModelRendererProps {
  * @param {string} props.flowSettingsVariant - The interaction style for flow settings.
  * @param {boolean} props.hideRemoveInSettings - Whether to hide remove button in settings.
  * @param {boolean} props.showTitle - Whether to show model title in the top-left corner of the border.
- * @param {boolean} props.skipApplyAutoFlows - Whether to skip applying auto flows.
- * @param {any} props.inputArgs - Runtime arguments to pass to useApplyAutoFlows when skipApplyAutoFlows is false.
+ * @param {any} props.inputArgs - Runtime arguments to pass to beforeRender event flows.
  * @param {number} props.settingsMenuLevel - Settings menu levels: 1=current model only (default), 2=include sub-models.
  * @param {ToolbarItemConfig[]} props.extraToolbarItems - Extra toolbar items to add to this renderer instance.
  * @returns {React.ReactNode | null} The rendered output of the model, or null if the model or its render method is invalid.

package/lib/components/FlowModelRenderer.js

@@ -41,8 +41,6 @@ __export(FlowModelRenderer_exports, {
   MemoFlowModelRenderer: () => MemoFlowModelRenderer
 });
 module.exports = __toCommonJS(FlowModelRenderer_exports);
-var import_reactive_react = require("@formily/reactive-react");
-var import_antd = require("antd");
 var import_lodash = __toESM(require("lodash"));
 var import_react = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
@@ -51,7 +49,8 @@ var import_utils = require("../utils");
 var import_FlowErrorFallback = require("./FlowErrorFallback");
 var import_FlowsContextMenu = require("./settings/wrappers/contextual/FlowsContextMenu");
 var import_FlowsFloatContextMenu = require("./settings/wrappers/contextual/FlowsFloatContextMenu");
-const FlowModelRendererWithAutoFlows = (0, import_reactive_react.observer)(
+var import_reactive = require("../reactive");
+const FlowModelRendererWithAutoFlows = (0, import_reactive.observer)(
   ({
     model,
     showFlowSettings,
@@ -64,7 +63,10 @@ const FlowModelRendererWithAutoFlows = (0, import_reactive_react.observer)(
     extraToolbarItems,
     fallback
   }) => {
-    const { loading: pending, error: autoFlowsError } = (0, import_hooks.useApplyAutoFlows)(model, inputArgs, { throwOnError: false });
+    const { loading: pending, error: autoFlowsError } = (0, import_hooks.useApplyAutoFlows)(model, inputArgs, {
+      throwOnError: false,
+      useCache: model.context.useCache
+    });
     (0, import_utils.setAutoFlowError)(model, autoFlowsError || null);
     if (pending) {
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, fallback);
@@ -84,34 +86,7 @@ const FlowModelRendererWithAutoFlows = (0, import_reactive_react.observer)(
     ));
   }
 );
-const FlowModelRendererWithoutAutoFlows = (0, import_reactive_react.observer)(
-  ({
-    model,
-    showFlowSettings,
-    flowSettingsVariant,
-    hideRemoveInSettings,
-    showTitle,
-    showErrorFallback,
-    settingsMenuLevel,
-    extraToolbarItems
-  }) => {
-    (0, import_utils.setAutoFlowError)(model, null);
-    return /* @__PURE__ */ import_react.default.createElement(import_hooks.FlowModelProvider, { model }, /* @__PURE__ */ import_react.default.createElement(
-      FlowModelRendererCore,
-      {
-        model,
-        showFlowSettings,
-        flowSettingsVariant,
-        hideRemoveInSettings,
-        showTitle,
-        showErrorFallback,
-        settingsMenuLevel,
-        extraToolbarItems
-      }
-    ));
-  }
-);
-const FlowModelRendererCore = (0, import_reactive_react.observer)(
+const FlowModelRendererCore = (0, import_reactive.observer)(
   ({
     model,
     showFlowSettings,
@@ -122,6 +97,7 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
     settingsMenuLevel,
     extraToolbarItems
   }) => {
+    var _a;
     const wrapWithErrorBoundary = /* @__PURE__ */ __name((children) => {
       if (showErrorFallback) {
         return /* @__PURE__ */ import_react.default.createElement(import_react_error_boundary.ErrorBoundary, { FallbackComponent: import_FlowErrorFallback.FlowErrorFallback }, children);
@@ -139,8 +115,13 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
       }
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, rendered);
     }, "ContentOrError");
+    const rawUse = model == null ? void 0 : model.use;
+    const resolvedName = ((_a = model == null ? void 0 : model.constructor) == null ? void 0 : _a.name) || model.uid;
+    const contentKey = typeof rawUse === "string" ? `${rawUse}:${model.uid}` : `${resolvedName}:${model.uid}`;
     if (!showFlowSettings) {
-      return wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null));
+      return wrapWithErrorBoundary(
+        /* @__PURE__ */ import_react.default.createElement("div", { key: contentKey }, /* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+      );
     }
     switch (flowSettingsVariant) {
       case "dropdown":
@@ -158,10 +139,14 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
             toolbarStyle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.style : void 0,
             toolbarPosition: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.toolbarPosition : void 0
           },
-          wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+          wrapWithErrorBoundary(
+            /* @__PURE__ */ import_react.default.createElement("div", { key: contentKey }, /* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+          )
         );
       case "contextMenu":
-        return /* @__PURE__ */ import_react.default.createElement(import_FlowsContextMenu.FlowsContextMenu, { model, showDeleteButton: !hideRemoveInSettings }, wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null)));
+        return /* @__PURE__ */ import_react.default.createElement(import_FlowsContextMenu.FlowsContextMenu, { model, showDeleteButton: !hideRemoveInSettings }, wrapWithErrorBoundary(
+          /* @__PURE__ */ import_react.default.createElement("div", { key: contentKey }, /* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+        ));
       case "modal":
         console.warn("FlowModelRenderer: modal variant is not implemented yet");
         return wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null));
@@ -186,7 +171,9 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
             toolbarStyle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.style : void 0,
             toolbarPosition: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.toolbarPosition : void 0
           },
-          wrapWithErrorBoundary(/* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+          wrapWithErrorBoundary(
+            /* @__PURE__ */ import_react.default.createElement("div", { key: contentKey }, /* @__PURE__ */ import_react.default.createElement(ContentOrError, null))
+          )
         );
     }
   },
@@ -194,37 +181,32 @@ const FlowModelRendererCore = (0, import_reactive_react.observer)(
     displayName: "FlowModelRendererCore"
   }
 );
-const FlowModelRenderer = (0, import_reactive_react.observer)(
+const FlowModelRenderer = (0, import_reactive.observer)(
   ({
     model,
-    fallback = /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton.Button, { size: "small" }),
+    fallback = null,
     showFlowSettings = false,
     flowSettingsVariant = "dropdown",
     hideRemoveInSettings = false,
     showTitle = false,
-    skipApplyAutoFlows = false,
     inputArgs,
     showErrorFallback = true,
     settingsMenuLevel,
-    extraToolbarItems
+    extraToolbarItems,
+    useCache
   }) => {
+    (0, import_react.useEffect)(() => {
+      if (model == null ? void 0 : model.context) {
+        model.context.defineProperty("useCache", {
+          value: typeof useCache === "boolean" ? useCache : model.context.useCache
+        });
+      }
+    }, [model == null ? void 0 : model.context, useCache]);
     if (!model || typeof model.render !== "function") {
       console.warn("FlowModelRenderer: Invalid model or render method not found.", model);
       return null;
     }
-    const content = skipApplyAutoFlows ? /* @__PURE__ */ import_react.default.createElement(
-      FlowModelRendererWithoutAutoFlows,
-      {
-        model,
-        showFlowSettings,
-        flowSettingsVariant,
-        hideRemoveInSettings,
-        showTitle,
-        showErrorFallback,
-        settingsMenuLevel,
-        extraToolbarItems
-      }
-    ) : /* @__PURE__ */ import_react.default.createElement(
+    const content = /* @__PURE__ */ import_react.default.createElement(
       FlowModelRendererWithAutoFlows,
       {
         model,

package/lib/components/FormItem.js

@@ -136,7 +136,11 @@ const FormItem = /* @__PURE__ */ __name(({
       layout,
       label: renderLabel(),
       colon: false,
-      extra: rest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, rest.extra)
+      extra: rest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, rest.extra),
+      tooltip: rest.tooltip && {
+        title: rest.tooltip,
+        overlayInnerStyle: { whiteSpace: "pre-line" }
+      }
     },
     processedChildren
   );

package/lib/components/MobilePopup.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { FC, ReactNode } from 'react';
+interface MobilePopupProps {
+    title?: string;
+    visible: boolean;
+    minHeight?: number | string;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+    footer?: ReactNode;
+}
+export declare const MobilePopup: FC<MobilePopupProps>;
+export {};

package/lib/components/MobilePopup.js

@@ -0,0 +1,102 @@
+/**
+ * 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.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MobilePopup_exports = {};
+__export(MobilePopup_exports, {
+  MobilePopup: () => MobilePopup
+});
+module.exports = __toCommonJS(MobilePopup_exports);
+var import_antd = require("antd");
+var import_antd_mobile = require("antd-mobile");
+var import_react = __toESM(require("react"));
+var import_antd_mobile_icons = require("antd-mobile-icons");
+var import_MobilePopup = require("./MobilePopup.style");
+var import_react_i18next = require("react-i18next");
+const MobilePopup = /* @__PURE__ */ __name((props) => {
+  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)(() => {
+    return {
+      minHeight
+    };
+  }, [minHeight]);
+  const theme = (0, import_react.useMemo)(() => {
+    return {
+      token: {
+        paddingPageHorizontal: 8,
+        paddingPageVertical: 8,
+        marginBlock: 12,
+        borderRadiusBlock: 8,
+        fontSize: 14
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd_mobile.Popup,
+    {
+      className: `${componentCls} ${hashId} ${className || ""}`,
+      visible,
+      onClose: closePopup,
+      onMaskClick: closePopup,
+      bodyClassName: "nb-mobile-action-drawer-body",
+      bodyStyle: {
+        padding: 0
+      },
+      maskStyle: style,
+      style,
+      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(import_antd_mobile_icons.CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "nb-mobile-action-drawer-close-icon",
+        onClick: closePopup,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": t("Close")
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)
+    )),
+    children,
+    footer && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-footer" }, footer)
+  ));
+}, "MobilePopup");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MobilePopup
+});

package/lib/components/MobilePopup.style.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { useStyleRegister } from '@ant-design/cssinjs';
+type UseComponentStyleResult = {
+    wrapSSR: ReturnType<typeof useStyleRegister>;
+    hashId: string;
+    componentCls: string;
+    rootPrefixCls: string;
+};
+export declare const useMobileActionDrawerStyle: (props?: any) => UseComponentStyleResult;
+export {};

package/lib/components/MobilePopup.style.js

@@ -0,0 +1,186 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MobilePopup_style_exports = {};
+__export(MobilePopup_style_exports, {
+  useMobileActionDrawerStyle: () => useMobileActionDrawerStyle
+});
+module.exports = __toCommonJS(MobilePopup_style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_shared = require("@formily/shared");
+var import_react = require("react");
+var import_antd = require("antd");
+const usePrefixCls = /* @__PURE__ */ __name((tag, props) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext) || {};
+  if ("ConfigContext" in import_antd.ConfigProvider) {
+    return (getPrefixCls == null ? void 0 : getPrefixCls(tag, props == null ? void 0 : props.prefixCls)) || "";
+  } else {
+    const prefix = (props == null ? void 0 : props.prefixCls) ?? "ant-";
+    return `${prefix}${tag ?? ""}`;
+  }
+}, "usePrefixCls");
+const { ConfigContext } = import_antd.ConfigProvider;
+const useConfig = /* @__PURE__ */ __name(() => (0, import_react.useContext)(ConfigContext), "useConfig");
+const useToken = import_antd.theme.useToken;
+const genCommonStyle = /* @__PURE__ */ __name((token, componentPrefixCls) => {
+  const { fontFamily, fontSize } = token;
+  const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+  return {
+    [rootPrefixSelector]: {
+      fontFamily,
+      fontSize,
+      boxSizing: "border-box",
+      "&::before, &::after": {
+        boxSizing: "border-box"
+      },
+      [rootPrefixSelector]: {
+        boxSizing: "border-box",
+        "&::before, &::after": {
+          boxSizing: "border-box"
+        }
+      }
+    }
+  };
+}, "genCommonStyle");
+const genStyleHook = /* @__PURE__ */ __name((component, styleFn) => {
+  return (props) => {
+    const { theme: theme2, token, hashId } = useToken();
+    const { getPrefixCls, iconPrefixCls } = useConfig();
+    const prefixCls = usePrefixCls(component);
+    const rootPrefixCls = getPrefixCls();
+    const wrapSSR = (0, import_cssinjs.useStyleRegister)(
+      {
+        theme: theme2,
+        token,
+        hashId,
+        path: ["formily-antd", component, prefixCls, iconPrefixCls]
+      },
+      () => {
+        const componentCls = `.${prefixCls}`;
+        const mergedToken = (0, import_shared.merge)(token, {
+          componentCls,
+          prefixCls,
+          iconCls: `.${iconPrefixCls}`,
+          antCls: `.${rootPrefixCls}`
+        });
+        const styleInterpolation = styleFn(mergedToken, props, {
+          hashId,
+          prefixCls,
+          rootPrefixCls,
+          iconPrefixCls
+        });
+        return [genCommonStyle(token, prefixCls), styleInterpolation];
+      }
+    );
+    const memoizedWrapSSR = (0, import_react.useMemo)(() => {
+      return wrapSSR;
+    }, [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    return {
+      wrapSSR: memoizedWrapSSR,
+      hashId,
+      componentCls: prefixCls,
+      rootPrefixCls
+    };
+  };
+}, "genStyleHook");
+const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      ".nb-mobile-action-drawer-header": {
+        height: "var(--nb-mobile-page-header-height)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderBottom: `1px solid ${token.colorSplit}`,
+        position: "sticky",
+        top: 0,
+        backgroundColor: "white",
+        zIndex: 1e3,
+        // to match the button named 'Add block'
+        "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
+          margin: 12
+        }
+      },
+      ".nb-mobile-action-drawer-placeholder": {
+        display: "inline-block",
+        padding: 12,
+        visibility: "hidden"
+      },
+      ".nb-mobile-action-drawer-close-icon": {
+        display: "inline-block",
+        padding: 12,
+        cursor: "pointer"
+      },
+      ".nb-mobile-action-drawer-body": {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        maxHeight: "calc(100% - var(--nb-mobile-page-header-height))",
+        overflowY: "auto",
+        overflowX: "hidden",
+        backgroundColor: token.colorBgLayout,
+        // 不带 tab 页的半窗
+        "& > .nb-grid-container": {
+          padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`
+        },
+        // 带有 tab 页的半窗
+        ".ant-tabs-nav": {
+          marginBottom: "0px !important",
+          padding: `0 ${token.paddingPageHorizontal + token.borderRadiusBlock / 2}px`,
+          backgroundColor: token.colorBgContainer
+        },
+        // clear the margin-bottom of the last block
+        "& > .nb-grid-container > .nb-grid > .nb-grid-warp > .nb-grid-row:nth-last-child(2) .noco-card-item": {
+          marginBottom: 0,
+          "& > .ant-card": {
+            marginBottom: "0 !important"
+          }
+        }
+      },
+      ".nb-mobile-action-drawer-footer": {
+        padding: "8px var(--nb-mobile-page-tabs-content-padding)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        position: "sticky",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1e3,
+        borderTop: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.colorBgLayout,
+        ".ant-btn": {
+          marginLeft: 8
+        }
+      }
+    }
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMobileActionDrawerStyle
+});

package/lib/components/common/withFlowDesignMode.d.ts

@@ -11,7 +11,7 @@ import React from 'react';
  * 高阶组件：仅在设计模式启用时渲染子组件
  *
  * @param WrappedComponent 要包装的组件
- * @returns 包装后的组件，只在 flowSettings.enabled 为 true 时渲染
+ * @returns 包装后的组件，只在 flowSettingsEnabled 为 true 时渲染
  *
  * @example
  * ```tsx

package/lib/components/common/withFlowDesignMode.js

@@ -41,12 +41,12 @@ __export(withFlowDesignMode_exports, {
 });
 module.exports = __toCommonJS(withFlowDesignMode_exports);
 var import_react = __toESM(require("react"));
-var import_reactive_react = require("@formily/reactive-react");
-var import_provider = require("../../provider");
+var import_FlowContextProvider = require("../../FlowContextProvider");
+var import__ = require("../..");
 function withFlowDesignMode(WrappedComponent) {
-  const WithFlowDesignModeComponent = (0, import_reactive_react.observer)((props) => {
-    const flowEngine = (0, import_provider.useFlowEngine)();
-    if (!flowEngine.flowSettings.enabled) {
+  const WithFlowDesignModeComponent = (0, import__.observer)((props) => {
+    const ctx = (0, import_FlowContextProvider.useFlowContext)();
+    if (!ctx.flowSettingsEnabled) {
       return null;
     }
     return /* @__PURE__ */ import_react.default.createElement(WrappedComponent, { ...props });

package/lib/components/dnd/gridDragPlanner.d.ts

@@ -31,6 +31,7 @@ export interface Point {
 export interface GridLayoutData {
     rows: Record<string, string[][]>;
     sizes: Record<string, number[]>;
+    rowOrder?: string[];
 }
 export interface ColumnSlot {
     type: 'column';